Private
Public Access
1
0

feat: Fluent UI Outlook Lite + connections mockup

This commit is contained in:
2026-04-14 18:52:25 +00:00
parent 1199eff6c3
commit dfa4010406
34820 changed files with 1003813 additions and 205 deletions

814
node_modules/@fluentui/react-swatch-picker/CHANGELOG.md generated vendored Normal file
View File

@@ -0,0 +1,814 @@
# Change Log - @fluentui/react-swatch-picker
This log was last generated on Wed, 01 Apr 2026 15:50:23 GMT and should not be manually modified.
<!-- Start content -->
## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.5.1)
Wed, 01 Apr 2026 15:50:23 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.5.0..@fluentui/react-swatch-picker_v9.5.1)
### Patches
- Bump @fluentui/react-field to v9.5.0 ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by beachball)
## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.5.0)
Wed, 11 Mar 2026 09:22:22 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.4.15..@fluentui/react-swatch-picker_v9.5.0)
### Minor changes
- feat(react-swatch-picker): Add focusMode prop for tab/arrow key navigation ([PR #35803](https://github.com/microsoft/fluentui/pull/35803) by v.kozlova13@gmail.com)
- Bump @fluentui/react-field to v9.4.16 ([PR #35859](https://github.com/microsoft/fluentui/pull/35859) by beachball)
## [9.4.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.4.15)
Wed, 25 Feb 2026 13:32:28 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.4.14..@fluentui/react-swatch-picker_v9.4.15)
### Patches
- Bump @fluentui/react-context-selector to v9.2.15 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
- Bump @fluentui/react-field to v9.4.15 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.4.1 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
- Bump @fluentui/react-shared-contexts to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
- Bump @fluentui/react-tabster to v9.26.13 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
- Bump @fluentui/react-utilities to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
## [9.4.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.4.14)
Thu, 12 Feb 2026 10:46:15 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.4.13..@fluentui/react-swatch-picker_v9.4.14)
### Patches
- Bump @fluentui/react-field to v9.4.14 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.4.0 ([PR #35743](https://github.com/microsoft/fluentui/pull/35743) by beachball)
## [9.4.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.4.13)
Thu, 22 Jan 2026 17:06:40 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.4.12..@fluentui/react-swatch-picker_v9.4.13)
### Patches
- Bump @fluentui/react-context-selector to v9.2.14 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
- Bump @fluentui/react-field to v9.4.13 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.3.5 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
- Bump @fluentui/react-shared-contexts to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
- Bump @fluentui/react-tabster to v9.26.12 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
- Bump @fluentui/react-theme to v9.2.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
- Bump @fluentui/react-utilities to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
## [9.4.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.4.12)
Wed, 17 Dec 2025 18:10:11 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.4.11..@fluentui/react-swatch-picker_v9.4.12)
### Patches
- Bump @fluentui/react-context-selector to v9.2.13 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
- Bump @fluentui/react-field to v9.4.12 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.3.4 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
- Bump @fluentui/react-tabster to v9.26.11 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
- Bump @fluentui/react-utilities to v9.26.0 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
## [9.4.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.4.11)
Tue, 11 Nov 2025 19:18:10 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.4.10..@fluentui/react-swatch-picker_v9.4.11)
### Patches
- chore: Bump @griffel/react package. ([PR #35469](https://github.com/microsoft/fluentui/pull/35469) by estebanmu@microsoft.com)
- Bump @fluentui/react-context-selector to v9.2.12 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
- Bump @fluentui/react-field to v9.4.11 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.3.3 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
- Bump @fluentui/react-shared-contexts to v9.26.0 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
- Bump @fluentui/react-tabster to v9.26.10 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
- Bump @fluentui/react-utilities to v9.25.4 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
## [9.4.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.4.10)
Thu, 06 Nov 2025 15:01:25 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.4.9..@fluentui/react-swatch-picker_v9.4.10)
### Patches
- Bump @fluentui/react-context-selector to v9.2.11 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
- Bump @fluentui/react-field to v9.4.10 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.3.2 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
- Bump @fluentui/react-tabster to v9.26.9 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
- Bump @fluentui/react-utilities to v9.25.3 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
## [9.4.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.4.9)
Fri, 31 Oct 2025 16:22:06 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.4.8..@fluentui/react-swatch-picker_v9.4.9)
### Patches
- Bump @fluentui/react-context-selector to v9.2.10 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
- Bump @fluentui/react-field to v9.4.9 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.3.1 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
- Bump @fluentui/react-tabster to v9.26.8 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
- Bump @fluentui/react-utilities to v9.25.2 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
## [9.4.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.4.8)
Tue, 21 Oct 2025 14:16:59 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.4.7..@fluentui/react-swatch-picker_v9.4.8)
### Patches
- Bump @fluentui/react-field to v9.4.8 ([PR #35343](https://github.com/microsoft/fluentui/pull/35343) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.3.0 ([PR #35343](https://github.com/microsoft/fluentui/pull/35343) by beachball)
## [9.4.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.4.7)
Wed, 08 Oct 2025 12:04:53 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.4.6..@fluentui/react-swatch-picker_v9.4.7)
### Patches
- Bump @fluentui/react-context-selector to v9.2.9 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
- Bump @fluentui/react-field to v9.4.7 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.2.2 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
- Bump @fluentui/react-tabster to v9.26.7 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
- Bump @fluentui/react-utilities to v9.25.1 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
## [9.4.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.4.6)
Thu, 02 Oct 2025 15:12:34 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.4.5..@fluentui/react-swatch-picker_v9.4.6)
### Patches
- feat: enforce usage of use client directive for files with client-only features ([PR #35173](https://github.com/microsoft/fluentui/pull/35173) by dmytrokirpa@microsoft.com)
- Bump @fluentui/react-context-selector to v9.2.8 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
- Bump @fluentui/react-field to v9.4.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.2.1 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
- Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
- Bump @fluentui/react-tabster to v9.26.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
- Bump @fluentui/react-utilities to v9.25.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
## [9.4.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.4.5)
Mon, 08 Sep 2025 12:50:38 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.4.4..@fluentui/react-swatch-picker_v9.4.5)
### Patches
- chore: enforce explicit module boundary types ([PR #35080](https://github.com/microsoft/fluentui/pull/35080) by dmytrokirpa@microsoft.com)
- fix: react 19 type issues ([PR #34864](https://github.com/microsoft/fluentui/pull/34864) by dmytrokirpa@microsoft.com)
- chore: extend peer dependencies versions to support React 19 ([PR #35145](https://github.com/microsoft/fluentui/pull/35145) by dmytrokirpa@microsoft.com)
- Bump @fluentui/react-context-selector to v9.2.7 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
- Bump @fluentui/react-field to v9.4.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.2.0 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
- Bump @fluentui/react-shared-contexts to v9.25.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
- Bump @fluentui/react-tabster to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
- Bump @fluentui/react-utilities to v9.24.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
## [9.4.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.4.4)
Thu, 21 Aug 2025 12:25:19 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.4.3..@fluentui/react-swatch-picker_v9.4.4)
### Patches
- Bump @fluentui/react-context-selector to v9.2.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
- Bump @fluentui/react-field to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.1.6 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
- Bump @fluentui/react-shared-contexts to v9.25.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
- Bump @fluentui/react-tabster to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
- Bump @fluentui/react-utilities to v9.24.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
## [9.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.4.3)
Thu, 07 Aug 2025 10:03:28 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.4.2..@fluentui/react-swatch-picker_v9.4.3)
### Patches
- fix: migrate to R19 compatible JSX.* namespace types ([PR #34923](https://github.com/microsoft/fluentui/pull/34923) by martinhochel@microsoft.com)
- Bump @fluentui/react-context-selector to v9.2.5 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
- Bump @fluentui/react-field to v9.4.3 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.1.5 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
- Bump @fluentui/react-tabster to v9.26.3 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
- Bump @fluentui/react-utilities to v9.23.2 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
## [9.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.4.2)
Wed, 30 Jul 2025 13:10:57 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.4.1..@fluentui/react-swatch-picker_v9.4.2)
### Patches
- Bump @fluentui/react-context-selector to v9.2.4 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
- Bump @fluentui/react-field to v9.4.2 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.1.4 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
- Bump @fluentui/react-shared-contexts to v9.24.1 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
- Bump @fluentui/react-tabster to v9.26.2 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
- Bump @fluentui/react-theme to v9.2.0 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
- Bump @fluentui/react-utilities to v9.23.1 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
## [9.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.4.1)
Mon, 28 Jul 2025 18:48:21 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.4.0..@fluentui/react-swatch-picker_v9.4.1)
### Patches
- Bump @fluentui/react-context-selector to v9.2.3 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
- Bump @fluentui/react-field to v9.4.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.1.3 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
- Bump @fluentui/react-tabster to v9.26.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
- Bump @fluentui/react-utilities to v9.23.0 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.4.0)
Thu, 17 Jul 2025 13:49:47 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.3.7..@fluentui/react-swatch-picker_v9.4.0)
### Minor changes
- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
- Bump @fluentui/react-field to v9.4.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
## [9.3.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.3.7)
Fri, 11 Jul 2025 15:59:24 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.3.6..@fluentui/react-swatch-picker_v9.3.7)
### Patches
- Bump @fluentui/react-field to v9.3.7 ([PR #34807](https://github.com/microsoft/fluentui/pull/34807) by beachball)
## [9.3.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.3.6)
Fri, 04 Jul 2025 10:02:51 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.3.5..@fluentui/react-swatch-picker_v9.3.6)
### Patches
- Bump @fluentui/react-field to v9.3.6 ([PR #34457](https://github.com/microsoft/fluentui/pull/34457) by beachball)
## [9.3.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.3.5)
Fri, 27 Jun 2025 13:39:41 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.3.4..@fluentui/react-swatch-picker_v9.3.5)
### Patches
- Bump @fluentui/react-field to v9.3.5 ([PR #34734](https://github.com/microsoft/fluentui/pull/34734) by beachball)
- Bump @fluentui/react-tabster to v9.25.3 ([PR #34734](https://github.com/microsoft/fluentui/pull/34734) by beachball)
## [9.3.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.3.4)
Thu, 26 Jun 2025 14:11:55 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.3.3..@fluentui/react-swatch-picker_v9.3.4)
### Patches
- Bump @fluentui/react-context-selector to v9.2.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
- Bump @fluentui/react-field to v9.3.4 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.1.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
- Bump @fluentui/react-tabster to v9.25.2 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
- Bump @fluentui/react-utilities to v9.22.0 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
## [9.3.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.3.3)
Mon, 23 Jun 2025 15:49:48 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.3.2..@fluentui/react-swatch-picker_v9.3.3)
### Patches
- Bump @fluentui/react-field to v9.3.3 ([PR #34677](https://github.com/microsoft/fluentui/pull/34677) by beachball)
## [9.3.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.3.2)
Wed, 18 Jun 2025 17:34:00 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.3.1..@fluentui/react-swatch-picker_v9.3.2)
### Patches
- Bump @fluentui/react-context-selector to v9.2.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
- Bump @fluentui/react-field to v9.3.2 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.1.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
- Bump @fluentui/react-shared-contexts to v9.24.0 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
- Bump @fluentui/react-tabster to v9.25.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
- Bump @fluentui/react-utilities to v9.21.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
## [9.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.3.1)
Fri, 13 Jun 2025 12:32:53 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.3.0..@fluentui/react-swatch-picker_v9.3.1)
### Patches
- Bump @fluentui/react-field to v9.3.1 ([PR #34639](https://github.com/microsoft/fluentui/pull/34639) by beachball)
## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.3.0)
Thu, 12 Jun 2025 09:43:33 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.2.9..@fluentui/react-swatch-picker_v9.3.0)
### Minor changes
- Bump @fluentui/react-context-selector to v9.2.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
- Bump @fluentui/react-field to v9.3.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.1.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
- Bump @fluentui/react-tabster to v9.25.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
- Bump @fluentui/react-utilities to v9.21.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
## [9.2.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.2.9)
Wed, 11 Jun 2025 22:31:58 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.2.8..@fluentui/react-swatch-picker_v9.2.9)
### Patches
- Bump @fluentui/react-field to v9.2.9 ([PR #34631](https://github.com/microsoft/fluentui/pull/34631) by beachball)
## [9.2.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.2.8)
Fri, 06 Jun 2025 13:15:17 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.2.7..@fluentui/react-swatch-picker_v9.2.8)
### Patches
- Bump @fluentui/react-context-selector to v9.1.77 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
- Bump @fluentui/react-field to v9.2.8 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.55 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
- Bump @fluentui/react-tabster to v9.24.8 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
- Bump @fluentui/react-utilities to v9.20.0 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
## [9.2.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.2.7)
Wed, 14 May 2025 18:49:20 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.2.6..@fluentui/react-swatch-picker_v9.2.7)
### Patches
- Bump @fluentui/react-field to v9.2.7 ([PR #34438](https://github.com/microsoft/fluentui/pull/34438) by beachball)
- Bump @fluentui/react-tabster to v9.24.7 ([PR #34438](https://github.com/microsoft/fluentui/pull/34438) by beachball)
## [9.2.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.2.6)
Thu, 24 Apr 2025 09:59:45 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.2.5..@fluentui/react-swatch-picker_v9.2.6)
### Patches
- Bump @fluentui/react-field to v9.2.6 ([PR #34315](https://github.com/microsoft/fluentui/pull/34315) by beachball)
- Bump @fluentui/react-tabster to v9.24.6 ([PR #34315](https://github.com/microsoft/fluentui/pull/34315) by beachball)
## [9.2.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.2.5)
Wed, 16 Apr 2025 19:42:04 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.2.4..@fluentui/react-swatch-picker_v9.2.5)
### Patches
- fix: design change of selected state for ColorSwatch ([PR #34214](https://github.com/microsoft/fluentui/pull/34214) by v.kozlova13@gmail.com)
- Bump @fluentui/react-context-selector to v9.1.76 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
- Bump @fluentui/react-field to v9.2.5 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.54 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
- Bump @fluentui/react-tabster to v9.24.5 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
- Bump @fluentui/react-utilities to v9.19.0 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
## [9.2.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.2.4)
Tue, 01 Apr 2025 15:08:02 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.2.3..@fluentui/react-swatch-picker_v9.2.4)
### Patches
- Bump @fluentui/react-field to v9.2.4 ([PR #33909](https://github.com/microsoft/fluentui/pull/33909) by beachball)
- Bump @fluentui/react-tabster to v9.24.4 ([PR #33909](https://github.com/microsoft/fluentui/pull/33909) by beachball)
## [9.2.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.2.3)
Thu, 27 Mar 2025 21:12:51 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.2.2..@fluentui/react-swatch-picker_v9.2.3)
### Patches
- Bump @fluentui/react-context-selector to v9.1.75 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
- Bump @fluentui/react-field to v9.2.3 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.53 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
- Bump @fluentui/react-shared-contexts to v9.23.1 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
- Bump @fluentui/react-tabster to v9.24.3 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
- Bump @fluentui/react-utilities to v9.18.23 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
## [9.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.2.2)
Wed, 19 Mar 2025 15:40:43 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.2.1..@fluentui/react-swatch-picker_v9.2.2)
### Patches
- Bump @fluentui/react-context-selector to v9.1.74 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
- Bump @fluentui/react-field to v9.2.2 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.52 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
- Bump @fluentui/react-shared-contexts to v9.23.0 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
- Bump @fluentui/react-tabster to v9.24.2 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
- Bump @fluentui/react-utilities to v9.18.22 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
## [9.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.2.1)
Tue, 11 Mar 2025 18:58:54 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.2.0..@fluentui/react-swatch-picker_v9.2.1)
### Patches
- Bump @fluentui/react-context-selector to v9.1.73 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
- Bump @fluentui/react-field to v9.2.1 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.51 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
- Bump @fluentui/react-shared-contexts to v9.22.0 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
- Bump @fluentui/react-tabster to v9.24.1 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
- Bump @fluentui/react-utilities to v9.18.21 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.2.0)
Fri, 21 Feb 2025 14:34:05 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.20..@fluentui/react-swatch-picker_v9.2.0)
### Minor changes
- Bump @fluentui/react-field to v9.2.0 ([PR #33876](https://github.com/microsoft/fluentui/pull/33876) by beachball)
- Bump @fluentui/react-tabster to v9.24.0 ([PR #33876](https://github.com/microsoft/fluentui/pull/33876) by beachball)
## [9.1.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.20)
Mon, 27 Jan 2025 20:27:35 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.19..@fluentui/react-swatch-picker_v9.1.20)
### Patches
- Bump @fluentui/react-field to v9.1.86 ([PR #33724](https://github.com/microsoft/fluentui/pull/33724) by beachball)
## [9.1.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.19)
Wed, 22 Jan 2025 14:00:21 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.18..@fluentui/react-swatch-picker_v9.1.19)
### Patches
- Bump @fluentui/react-context-selector to v9.1.72 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
- Bump @fluentui/react-field to v9.1.85 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.50 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
- Bump @fluentui/react-tabster to v9.23.3 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
- Bump @fluentui/react-utilities to v9.18.20 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
## [9.1.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.18)
Wed, 08 Jan 2025 18:33:36 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.17..@fluentui/react-swatch-picker_v9.1.18)
### Patches
- Bump @fluentui/react-field to v9.1.84 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.49 ([PR #33550](https://github.com/microsoft/fluentui/pull/33550) by beachball)
## [9.1.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.17)
Mon, 16 Dec 2024 16:26:49 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.16..@fluentui/react-swatch-picker_v9.1.17)
### Patches
- Bump @fluentui/react-context-selector to v9.1.71 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
- Bump @fluentui/react-field to v9.1.83 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.48 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
- Bump @fluentui/react-shared-contexts to v9.21.2 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
- Bump @fluentui/react-tabster to v9.23.2 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
- Bump @fluentui/react-theme to v9.1.24 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
- Bump @fluentui/react-utilities to v9.18.19 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
## [9.1.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.16)
Mon, 09 Dec 2024 17:38:05 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.15..@fluentui/react-swatch-picker_v9.1.16)
### Patches
- chore: remove usage of "export *" ([PR #33384](https://github.com/microsoft/fluentui/pull/33384) by olfedias@microsoft.com)
- Bump @fluentui/react-field to v9.1.82 ([PR #33431](https://github.com/microsoft/fluentui/pull/33431) by beachball)
## [9.1.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.15)
Fri, 06 Dec 2024 12:53:42 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.14..@fluentui/react-swatch-picker_v9.1.15)
### Patches
- Updated README.md ([PR #33385](https://github.com/microsoft/fluentui/pull/33385) by vkozlova@microsoft.com)
- Bump @fluentui/react-context-selector to v9.1.70 ([PR #33372](https://github.com/microsoft/fluentui/pull/33372) by beachball)
- Bump @fluentui/react-field to v9.1.81 ([PR #33372](https://github.com/microsoft/fluentui/pull/33372) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.47 ([PR #33372](https://github.com/microsoft/fluentui/pull/33372) by beachball)
- Bump @fluentui/react-shared-contexts to v9.21.1 ([PR #33372](https://github.com/microsoft/fluentui/pull/33372) by beachball)
- Bump @fluentui/react-tabster to v9.23.1 ([PR #33372](https://github.com/microsoft/fluentui/pull/33372) by beachball)
- Bump @fluentui/react-theme to v9.1.23 ([PR #33372](https://github.com/microsoft/fluentui/pull/33372) by beachball)
- Bump @fluentui/react-utilities to v9.18.18 ([PR #33372](https://github.com/microsoft/fluentui/pull/33372) by beachball)
## [9.1.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.14)
Thu, 28 Nov 2024 09:30:52 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.13..@fluentui/react-swatch-picker_v9.1.14)
### Patches
- feat: Correctly integrating SwatchPicker with Field component. ([PR #33274](https://github.com/microsoft/fluentui/pull/33274) by Humberto.Morimoto@microsoft.com)
## [9.1.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.13)
Mon, 11 Nov 2024 10:00:55 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.12..@fluentui/react-swatch-picker_v9.1.13)
### Patches
- chore: replace npm-scripts and just-scrtips with nx inferred tasks ([PR #33074](https://github.com/microsoft/fluentui/pull/33074) by martinhochel@microsoft.com)
- Bump @fluentui/react-context-selector to v9.1.69 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.46 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
- Bump @fluentui/react-shared-contexts to v9.21.0 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
- Bump @fluentui/react-tabster to v9.23.0 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
- Bump @fluentui/react-theme to v9.1.22 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
- Bump @fluentui/react-utilities to v9.18.17 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
## [9.1.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.12)
Tue, 15 Oct 2024 17:17:53 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.11..@fluentui/react-swatch-picker_v9.1.12)
### Patches
- Bump @fluentui/react-context-selector to v9.1.68 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.45 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
- Bump @fluentui/react-shared-contexts to v9.20.2 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
- Bump @fluentui/react-tabster to v9.22.9 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
- Bump @fluentui/react-theme to v9.1.21 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
- Bump @fluentui/react-utilities to v9.18.16 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
## [9.1.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.11)
Tue, 08 Oct 2024 22:05:59 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.10..@fluentui/react-swatch-picker_v9.1.11)
### Patches
- Bump @fluentui/react-tabster to v9.22.8 ([PR #33007](https://github.com/microsoft/fluentui/pull/33007) by beachball)
## [9.1.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.10)
Mon, 23 Sep 2024 12:40:17 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.9..@fluentui/react-swatch-picker_v9.1.10)
### Patches
- Bump @fluentui/react-context-selector to v9.1.67 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.44 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
- Bump @fluentui/react-shared-contexts to v9.20.1 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
- Bump @fluentui/react-tabster to v9.22.7 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
- Bump @fluentui/react-theme to v9.1.20 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
- Bump @fluentui/react-utilities to v9.18.15 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
## [9.1.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.9)
Tue, 10 Sep 2024 10:19:12 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.8..@fluentui/react-swatch-picker_v9.1.9)
### Patches
- Bump @fluentui/react-context-selector to v9.1.66 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.43 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
- Bump @fluentui/react-tabster to v9.22.6 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
- Bump @fluentui/react-utilities to v9.18.14 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
## [9.1.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.8)
Thu, 15 Aug 2024 13:49:46 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.7..@fluentui/react-swatch-picker_v9.1.8)
### Patches
- Bump @fluentui/react-tabster to v9.22.5 ([PR #32313](https://github.com/microsoft/fluentui/pull/32313) by beachball)
## [9.1.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.7)
Thu, 15 Aug 2024 08:22:13 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.6..@fluentui/react-swatch-picker_v9.1.7)
### Patches
- (react-swatch-picker): fixed documentation ([PR #32279](https://github.com/microsoft/fluentui/pull/32279) by vkozlova@microsoft.com)
- Bump @fluentui/react-tabster to v9.22.4 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
## [9.1.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.6)
Tue, 23 Jul 2024 20:13:14 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.5..@fluentui/react-swatch-picker_v9.1.6)
### Patches
- Bump @fluentui/react-context-selector to v9.1.65 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.42 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
- Bump @fluentui/react-shared-contexts to v9.20.0 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
- Bump @fluentui/react-tabster to v9.22.3 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
- Bump @fluentui/react-utilities to v9.18.13 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
## [9.1.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.5)
Mon, 15 Jul 2024 17:25:48 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.4..@fluentui/react-swatch-picker_v9.1.5)
### Patches
- fix: revert incorectly set npm versions in all packages ([PR #31937](https://github.com/microsoft/fluentui/pull/31937) by martinhochel@microsoft.com)
- Bump @fluentui/react-context-selector to v9.1.64 ([PR #31998](https://github.com/microsoft/fluentui/pull/31998) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.41 ([PR #31998](https://github.com/microsoft/fluentui/pull/31998) by beachball)
- Bump @fluentui/react-shared-contexts to v9.19.1 ([PR #31998](https://github.com/microsoft/fluentui/pull/31998) by beachball)
- Bump @fluentui/react-tabster to v9.22.2 ([PR #31998](https://github.com/microsoft/fluentui/pull/31998) by beachball)
- Bump @fluentui/react-utilities to v9.18.12 ([PR #31998](https://github.com/microsoft/fluentui/pull/31998) by beachball)
## [9.1.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.4)
Mon, 01 Jul 2024 20:30:31 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.3..@fluentui/react-swatch-picker_v9.1.4)
### Patches
- chore: add eslint react-compiler ([PR #31457](https://github.com/microsoft/fluentui/pull/31457) by seanmonahan@microsoft.com)
- chore: Update react-icons package to ^2.0.245 ([PR #31802](https://github.com/microsoft/fluentui/pull/31802) by ololubek@microsoft.com)
- fix(react-swatch-picker): fixed colors of selected and pressed states ([PR #31830](https://github.com/microsoft/fluentui/pull/31830) by vkozlova@microsoft.com)
- Bump @fluentui/react-context-selector to v9.1.63 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.40 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
- Bump @fluentui/react-tabster to v9.22.1 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
- Bump @fluentui/react-utilities to v9.18.11 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
## [9.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.3)
Mon, 17 Jun 2024 07:34:17 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.2..@fluentui/react-swatch-picker_v9.1.3)
### Patches
- Bump @fluentui/react-context-selector to v9.1.62 ([commit](https://github.com/microsoft/fluentui/commit/9ae683c22f2e65d94422a571ad5d3f97d0a77234) by beachball)
- Bump @fluentui/react-tabster to v9.22.0 ([commit](https://github.com/microsoft/fluentui/commit/9ae683c22f2e65d94422a571ad5d3f97d0a77234) by beachball)
## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.2)
Thu, 06 Jun 2024 15:26:39 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.1..@fluentui/react-swatch-picker_v9.1.2)
### Patches
- Bump @fluentui/react-context-selector to v9.1.61 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.39 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
- Bump @fluentui/react-tabster to v9.21.5 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
- Bump @fluentui/react-utilities to v9.18.10 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.1)
Thu, 23 May 2024 08:02:48 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker_v9.1.0..@fluentui/react-swatch-picker_v9.1.1)
### Patches
- chore: replace usage of .shorthands() in styles ([PR #31448](https://github.com/microsoft/fluentui/pull/31448) by olfedias@microsoft.com)
- Bump @fluentui/react-tabster to v9.21.4 ([commit](https://github.com/microsoft/fluentui/commit/03599d609e8310b08c57d1f871cffbf717d79207) by beachball)
## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker_v9.1.0)
Mon, 20 May 2024 12:45:04 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.6.0..@fluentui/react-swatch-picker_v9.1.0)
### Minor changes
- feat(react-swatch-picker): release SwatchPicker as 9.0.0 stable ([PR #31389](https://github.com/microsoft/fluentui/pull/31389) by vkozlova@microsoft.com)
- Bump @fluentui/react-context-selector to v9.1.60 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.38 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
- Bump @fluentui/react-shared-contexts to v9.19.0 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
- Bump @fluentui/react-tabster to v9.21.3 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
- Bump @fluentui/react-utilities to v9.18.9 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
### Patches
- chore: bump @griffel/react ([PR #31258](https://github.com/microsoft/fluentui/pull/31258) by olfedias@microsoft.com)
## [0.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.6.0)
Thu, 16 May 2024 09:25:18 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.5.0..@fluentui/react-swatch-picker-preview_v0.6.0)
### Minor changes
- feat(react-swatch-picker): added contrast ratio utils ([PR #31358](https://github.com/microsoft/fluentui/pull/31358) by vkozlova@microsoft.com)
### Patches
- chore: Upgrade react-icons version to 2.0.239 to pick up provider export map fix. ([PR #31287](https://github.com/microsoft/fluentui/pull/31287) by ololubek@microsoft.com)
## [0.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.5.0)
Mon, 13 May 2024 12:34:20 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.4.3..@fluentui/react-swatch-picker-preview_v0.5.0)
### Minor changes
- feat: Add missing SwatchPicker context exports. ([PR #31328](https://github.com/microsoft/fluentui/pull/31328) by estebanmu@microsoft.com)
## [0.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.4.3)
Thu, 09 May 2024 19:35:12 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.4.2..@fluentui/react-swatch-picker-preview_v0.4.3)
### Patches
- Bump @fluentui/react-tabster to v9.21.2 ([PR #31321](https://github.com/microsoft/fluentui/pull/31321) by beachball)
## [0.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.4.2)
Mon, 06 May 2024 12:55:02 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.4.1..@fluentui/react-swatch-picker-preview_v0.4.2)
### Patches
- Bump @fluentui/react-context-selector to v9.1.59 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.37 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
- Bump @fluentui/react-shared-contexts to v9.18.0 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
- Bump @fluentui/react-tabster to v9.21.1 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
- Bump @fluentui/react-utilities to v9.18.8 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
## [0.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.4.1)
Thu, 02 May 2024 11:36:38 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.4.0..@fluentui/react-swatch-picker-preview_v0.4.1)
### Patches
- chore: upgrade @fluentui/react-icons to 2.0.237. ([PR #31139](https://github.com/microsoft/fluentui/pull/31139) by ololubek@microsoft.com)
- Bump @fluentui/react-tabster to v9.21.0 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
## [0.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.4.0)
Tue, 23 Apr 2024 08:17:48 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.3.0..@fluentui/react-swatch-picker-preview_v0.4.0)
### Minor changes
- fix: BREAKING CHANGE - api changes and fixes ([PR #31097](https://github.com/microsoft/fluentui/pull/31097) by vkozlova@microsoft.com)
- Bump @fluentui/react-context-selector to v9.1.58 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.36 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
- Bump @fluentui/react-shared-contexts to v9.17.0 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
- Bump @fluentui/react-tabster to v9.20.1 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
- Bump @fluentui/react-utilities to v9.18.7 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
## [0.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.3.0)
Wed, 17 Apr 2024 21:53:58 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.2.1..@fluentui/react-swatch-picker-preview_v0.3.0)
### Minor changes
- feat(react-swatch-picker): Added EmptySwatch component ([PR #30953](https://github.com/microsoft/fluentui/pull/30953) by vkozlova@microsoft.com)
- Bump @fluentui/react-tabster to v9.20.0 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
### Patches
- fix(react-swatch-picker): colors in HC mode ([PR #31014](https://github.com/microsoft/fluentui/pull/31014) by vkozlova@microsoft.com)
- fix(react-swatch-picker): a11y attrs for ImageSwatch ([PR #31060](https://github.com/microsoft/fluentui/pull/31060) by vkozlova@microsoft.com)
- chore: Update react-icons to 2.0.235 ([PR #31011](https://github.com/microsoft/fluentui/pull/31011) by ololubek@microsoft.com)
## [0.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.2.1)
Tue, 02 Apr 2024 09:48:00 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.2.0..@fluentui/react-swatch-picker-preview_v0.2.1)
### Patches
- Bump @fluentui/react-context-selector to v9.1.57 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
- Bump @fluentui/react-jsx-runtime to v9.0.35 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
- Bump @fluentui/react-shared-contexts to v9.16.0 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
- Bump @fluentui/react-tabster to v9.19.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
- Bump @fluentui/react-utilities to v9.18.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.2.0)
Thu, 28 Mar 2024 10:43:54 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-swatch-picker-preview_v0.1.0..@fluentui/react-swatch-picker-preview_v0.2.0)
### Minor changes
- feat(react-swatch-picker): changed API in rendering utils ([PR #30868](https://github.com/microsoft/fluentui/pull/30868) by vkozlova@microsoft.com)
## [0.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-swatch-picker-preview_v0.1.0)
Wed, 27 Mar 2024 10:29:33 GMT
### Minor changes
- 'feat: release react-swatch-picker to unstable ([PR #30881](https://github.com/microsoft/fluentui/pull/30881) by vkozlova@microsoft.com)

15
node_modules/@fluentui/react-swatch-picker/LICENSE generated vendored Normal file
View File

@@ -0,0 +1,15 @@
@fluentui/react-swatch-picker-preview
Copyright (c) Microsoft Corporation
All rights reserved.
MIT License
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED _AS IS_, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

59
node_modules/@fluentui/react-swatch-picker/README.md generated vendored Normal file
View File

@@ -0,0 +1,59 @@
# @fluentui/react-swatch-picker
**React Swatch Picker components for [Fluent UI React](https://react.fluentui.dev/)**
The SwatchPicker is used in graphic and text editors. It allows user to choose a needed color, image or pattern.
The SwatchPicker can be integrated within a popover or used as a standalone feature.
## Usage
To import React SwatchPicker components:
```tsx
import { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';
```
Simple example of SwatchPicker Usage:
```tsx
import { SwatchPicker, ColorSwatch, SwatchPickerOnSelectEventHandler } from '@fluentui/react-components';
export const App = () => {
const [selectedValue, setSelectedValue] = React.useState('00B053');
const [selectedColor, setSelectedColor] = React.useState('#00B053');
const handleSelect: SwatchPickerOnSelectEventHandler = (_, data) => {
setSelectedValue(data.selectedValue);
setSelectedColor(data.selectedColor);
};
return (
<>
<SwatchPicker aria-label="SwatchPicker default" selectedValue={selectedValue} onSelectionChange={handleSelect}>
<ColorSwatch color="#FF1921" value="FF1921" aria-label="red" />
<ColorSwatch color="#FFC12E" value="FFC12E" aria-label="orange" />
<ColorSwatch color="#FEFF37" value="FEFF37" aria-label="yellow" />
<ColorSwatch disabled color="#90D057" value="90D057" aria-label="light green" />
<ColorSwatch color="#00B053" value="00B053" aria-label="green" />
<ColorSwatch color="#00AFED" value="00AFED" aria-label="light blue" />
<ColorSwatch color="#006EBD" value="006EBD" aria-label="blue" />
<ColorSwatch color="#011F5E" value="011F5E" aria-label="dark blue" />
<ColorSwatch color="#712F9E" value="712F9E" aria-label="purple" />
</SwatchPicker>
<div
style={{
backgroundColor: selectedColor,
}}
/>
</>
);
};
```
## Specification
See the [Spec.md](./docs/Spec.md) file for background information on the design/engineering decisions of the component.
## API
For information about the components, please refer to the [API documentation](https://react.fluentui.dev/?path=/docs/components-swatchpicker--default).

View File

@@ -0,0 +1,358 @@
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { ContextSelector } from '@fluentui/react-context-selector';
import type { EventData } from '@fluentui/react-utilities';
import type { EventHandler } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
/**
* ColorSwatch component is used to render a colors, icons and gradients.
*/
export declare const ColorSwatch: ForwardRefComponent<ColorSwatchProps>;
export declare const colorSwatchClassNames: SlotClassNames<ColorSwatchSlots>;
/**
* ColorSwatch Props
*/
export declare type ColorSwatchProps = ComponentProps<ColorSwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'> & {
/**
* Border color when contrast is low
*/
borderColor?: string;
/**
* Swatch color
*/
color: string;
/**
* Whether the swatch is disabled
*/
disabled?: boolean;
/**
* Swatch value
*/
value: string;
};
export declare type ColorSwatchSlots = {
root: NonNullable<Slot<'button'>>;
icon?: Slot<'span'>;
disabledIcon?: Slot<'span'>;
};
/**
* State used in rendering ColorSwatch
*/
export declare type ColorSwatchState = ComponentState<ColorSwatchSlots> & Pick<ColorSwatchProps, 'color' | 'disabled' | 'size' | 'shape' | 'value'> & {
selected: boolean;
};
/**
* EmptySwatch component is used for adding new color swatches.
*/
export declare const EmptySwatch: ForwardRefComponent<EmptySwatchProps>;
export declare const emptySwatchClassNames: SlotClassNames<EmptySwatchSlots>;
/**
* EmptySwatch Props
*/
export declare type EmptySwatchProps = ComponentProps<EmptySwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'>;
export declare type EmptySwatchSlots = {
root: Slot<'button'>;
};
/**
* State used in rendering EmptySwatch
*/
export declare type EmptySwatchState = ComponentState<EmptySwatchSlots> & Pick<EmptySwatchProps, 'size' | 'shape'>;
/**
* ImageSwatch component is used to render an images, patterns and textures.
*/
export declare const ImageSwatch: ForwardRefComponent<ImageSwatchProps>;
export declare const imageSwatchClassNames: SlotClassNames<ImageSwatchSlots>;
/**
* ImageSwatch Props
*/
export declare type ImageSwatchProps = ComponentProps<ImageSwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'> & {
/**
* Swatch color
*/
src: string;
/**
* Swatch value
*/
value: string;
};
export declare type ImageSwatchSlots = {
root: Slot<'button'>;
};
/**
* State used in rendering ImageSwatch
*/
export declare type ImageSwatchState = ComponentState<ImageSwatchSlots> & Pick<ImageSwatchProps, 'color' | 'size' | 'shape' | 'value'> & {
selected: boolean;
};
/**
* Render the final JSX of ColorSwatch
*/
export declare const renderColorSwatch_unstable: (state: ColorSwatchState) => JSXElement;
/**
* Render the final JSX of EmptySwatch
*/
export declare const renderEmptySwatch_unstable: (state: EmptySwatchState) => JSXElement;
/**
* Render the final JSX of ImageSwatch
*/
export declare const renderImageSwatch_unstable: (state: ImageSwatchState) => JSXElement;
/**
* Render the final JSX of SwatchPicker
*/
export declare const renderSwatchPicker_unstable: (state: SwatchPickerState, contextValues: SwatchPickerContextValues) => JSXElement;
export declare const renderSwatchPickerGrid: (props: SwatchPickerGridProps) => JSXElement[];
/**
* Render the final JSX of SwatchPickerRow
*/
export declare const renderSwatchPickerRow_unstable: (state: SwatchPickerRowState) => JSXElement;
export declare const swatchCSSVars: {
color: string;
borderColor: string;
};
/**
* SwatchPicker component - TODO: add more docs
*/
export declare const SwatchPicker: ForwardRefComponent<SwatchPickerProps>;
export declare const swatchPickerClassNames: SlotClassNames<SwatchPickerSlots>;
export declare const swatchPickerContextDefaultValue: SwatchPickerContextValue;
/**
* The context through which individual color controls communicate with the picker.
*/
export declare type SwatchPickerContextValue = Pick<SwatchPickerProps, 'size' | 'shape' | 'spacing' | 'selectedValue'> & {
/**
* Whether layout is grid.
*/
isGrid: boolean;
/**
* Callback used by ColorSwatch to request a change on it's selected state
* Should be used to select ColorSwatch
*
* @internal
*/
requestSelectionChange: (event: React_2.MouseEvent<HTMLButtonElement>, data: {
selectedValue: string;
selectedSwatch: string;
}) => void;
};
export declare type SwatchPickerContextValues = {
swatchPicker: SwatchPickerContextValue;
};
export declare type SwatchPickerGridProps = {
items: SwatchProps[];
columnCount: number;
renderRow?: (props: {
children: JSXElement[];
rowId: string | number;
}) => JSXElement;
renderSwatch?: (item: SwatchProps) => JSXElement;
};
export declare type SwatchPickerOnSelectEventHandler = EventHandler<SwatchPickerOnSelectionChangeData>;
export declare type SwatchPickerOnSelectionChangeData = EventData<'click', React_2.MouseEvent<HTMLButtonElement>> & {
selectedValue: string;
selectedSwatch: string;
};
/**
* SwatchPicker Props
*/
export declare type SwatchPickerProps = ComponentProps<SwatchPickerSlots> & {
/**
* Default selected value
*/
defaultSelectedValue?: string;
/**
* Sets the focus behavior for the SwatchPicker.
*
* `arrow`
* This behavior will cycle through all elements inside of the SwatchPicker when pressing the Arrow key.
*
* `tab`
* This behavior will cycle through all elements inside of the SwatchPicker when pressing the Tab key.
*
* @default 'arrow'
*/
focusMode?: 'arrow' | 'tab';
/**
* Whether SwatchPicker is row or grid
*/
layout?: 'row' | 'grid';
/**
* Triggers a callback when the value has been changed
*/
onSelectionChange?: EventHandler<SwatchPickerOnSelectionChangeData>;
/**
* Controlled selected value
*/
selectedValue?: string;
/**
* Swatch size
* @defaultvalue 'medium'
*/
size?: 'extra-small' | 'small' | 'medium' | 'large';
/**
* Swatch shape
* @defaultvalue 'square'
*/
shape?: 'rounded' | 'square' | 'circular';
/**
* Spacing between swatches
* @defaultvalue 'medium'
*/
spacing?: 'small' | 'medium';
};
export declare const SwatchPickerProvider: React_2.Provider<SwatchPickerContextValue> & React_2.FC<React_2.ProviderProps<SwatchPickerContextValue>>;
/**
* SwatchPickerRow component is used to render a row of swatches.
*/
export declare const SwatchPickerRow: ForwardRefComponent<SwatchPickerRowProps>;
export declare const swatchPickerRowClassNames: SlotClassNames<SwatchPickerRowSlots>;
/**
* SwatchPickerRow Props
*/
export declare type SwatchPickerRowProps = ComponentProps<SwatchPickerRowSlots>;
export declare type SwatchPickerRowSlots = {
root: Slot<'div'>;
};
/**
* State used in rendering SwatchPickerRow
*/
export declare type SwatchPickerRowState = ComponentState<SwatchPickerRowSlots> & Pick<SwatchPickerProps, 'spacing'>;
export declare type SwatchPickerSlots = {
root: Slot<'div'>;
};
/**
* State used in rendering SwatchPicker
*/
export declare type SwatchPickerState = ComponentState<SwatchPickerSlots> & SwatchPickerContextValue & Pick<SwatchPickerProps, 'layout' | 'size' | 'shape' | 'spacing'> & {
isGrid: boolean;
};
export declare type SwatchProps = ImageSwatchProps | ColorSwatchProps;
/**
* Create the state required to render ColorSwatch.
*
* The returned state can be modified with hooks such as useColorSwatchStyles_unstable,
* before being passed to renderColorSwatch_unstable.
*
* @param props - props from this instance of ColorSwatch
* @param ref - reference to root HTMLButtonElement of ColorSwatch
*/
export declare const useColorSwatch_unstable: (props: ColorSwatchProps, ref: React_2.Ref<HTMLButtonElement>) => ColorSwatchState;
/**
* Apply styling to the ColorSwatch slots based on the state
*/
export declare const useColorSwatchStyles_unstable: (state: ColorSwatchState) => ColorSwatchState;
/**
* Create the state required to render EmptySwatch.
*
* The returned state can be modified with hooks such as useEmptySwatchStyles_unstable,
* before being passed to renderEmptySwatch_unstable.
*
* @param props - props from this instance of EmptySwatch
* @param ref - reference to root HTMLDivElement of EmptySwatch
*/
export declare const useEmptySwatch_unstable: (props: EmptySwatchProps, ref: React_2.Ref<HTMLButtonElement>) => EmptySwatchState;
/**
* Apply styling to the EmptySwatch slots based on the state
*/
export declare const useEmptySwatchStyles_unstable: (state: EmptySwatchState) => EmptySwatchState;
/**
* Create the state required to render ImageSwatch.
*
* The returned state can be modified with hooks such as useImageSwatchStyles_unstable,
* before being passed to renderImageSwatch_unstable.
*
* @param props - props from this instance of ImageSwatch
* @param ref - reference to root HTMLDivElement of ImageSwatch
*/
export declare const useImageSwatch_unstable: (props: ImageSwatchProps, ref: React_2.Ref<HTMLButtonElement>) => ImageSwatchState;
/**
* Apply styling to the ImageSwatch slots based on the state
*/
export declare const useImageSwatchStyles_unstable: (state: ImageSwatchState) => ImageSwatchState;
/**
* Create the state required to render SwatchPicker.
*
* The returned state can be modified with hooks such as useSwatchPickerStyles_unstable,
* before being passed to renderSwatchPicker_unstable.
*
* @param props - props from this instance of SwatchPicker
* @param ref - reference to root HTMLElement of SwatchPicker
*/
export declare const useSwatchPicker_unstable: (props: SwatchPickerProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerState;
export declare const useSwatchPickerContextValue_unstable: <T>(selector: ContextSelector<SwatchPickerContextValue, T>) => T;
export declare const useSwatchPickerContextValues: (state: SwatchPickerState) => SwatchPickerContextValues;
/**
* Create the state required to render SwatchPickerRow.
*
* The returned state can be modified with hooks such as useSwatchPickerRowStyles_unstable,
* before being passed to renderSwatchPickerRow_unstable.
*
* @param props - props from this instance of SwatchPickerRow
* @param ref - reference to root HTMLDivElement of SwatchPickerRow
*/
export declare const useSwatchPickerRow_unstable: (props: SwatchPickerRowProps, ref: React_2.Ref<HTMLDivElement>) => SwatchPickerRowState;
/**
* Apply styling to the SwatchPickerRow slots based on the state
*/
export declare const useSwatchPickerRowStyles_unstable: (state: SwatchPickerRowState) => SwatchPickerRowState;
/**
* Apply styling to the SwatchPicker slots based on the state
*/
export declare const useSwatchPickerStyles_unstable: (state: SwatchPickerState) => SwatchPickerState;
export { }

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ColorSwatch: function() {
return _index.ColorSwatch;
},
colorSwatchClassNames: function() {
return _index.colorSwatchClassNames;
},
renderColorSwatch_unstable: function() {
return _index.renderColorSwatch_unstable;
},
swatchCSSVars: function() {
return _index.swatchCSSVars;
},
useColorSwatchStyles_unstable: function() {
return _index.useColorSwatchStyles_unstable;
},
useColorSwatch_unstable: function() {
return _index.useColorSwatch_unstable;
}
});
const _index = require("./components/ColorSwatch/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/ColorSwatch.ts"],"sourcesContent":["export type { ColorSwatchProps, ColorSwatchSlots, ColorSwatchState } from './components/ColorSwatch/index';\nexport {\n ColorSwatch,\n colorSwatchClassNames,\n renderColorSwatch_unstable,\n swatchCSSVars,\n useColorSwatchStyles_unstable,\n useColorSwatch_unstable,\n} from './components/ColorSwatch/index';\n"],"names":["ColorSwatch","colorSwatchClassNames","renderColorSwatch_unstable","swatchCSSVars","useColorSwatchStyles_unstable","useColorSwatch_unstable"],"mappings":";;;;;;;;;;;;eAEEA,kBAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAC1BC,oBAAa;;;eACbC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAClB,iCAAiC"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
EmptySwatch: function() {
return _index.EmptySwatch;
},
emptySwatchClassNames: function() {
return _index.emptySwatchClassNames;
},
renderEmptySwatch_unstable: function() {
return _index.renderEmptySwatch_unstable;
},
useEmptySwatchStyles_unstable: function() {
return _index.useEmptySwatchStyles_unstable;
},
useEmptySwatch_unstable: function() {
return _index.useEmptySwatch_unstable;
}
});
const _index = require("./components/EmptySwatch/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/EmptySwatch.ts"],"sourcesContent":["export type { EmptySwatchProps, EmptySwatchSlots, EmptySwatchState } from './components/EmptySwatch/index';\nexport {\n EmptySwatch,\n emptySwatchClassNames,\n renderEmptySwatch_unstable,\n useEmptySwatchStyles_unstable,\n useEmptySwatch_unstable,\n} from './components/EmptySwatch/index';\n"],"names":["EmptySwatch","emptySwatchClassNames","renderEmptySwatch_unstable","useEmptySwatchStyles_unstable","useEmptySwatch_unstable"],"mappings":";;;;;;;;;;;;eAEEA,kBAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAC1BC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAClB,iCAAiC"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ImageSwatch: function() {
return _index.ImageSwatch;
},
imageSwatchClassNames: function() {
return _index.imageSwatchClassNames;
},
renderImageSwatch_unstable: function() {
return _index.renderImageSwatch_unstable;
},
useImageSwatchStyles_unstable: function() {
return _index.useImageSwatchStyles_unstable;
},
useImageSwatch_unstable: function() {
return _index.useImageSwatch_unstable;
}
});
const _index = require("./components/ImageSwatch/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/ImageSwatch.ts"],"sourcesContent":["export type { ImageSwatchProps, ImageSwatchSlots, ImageSwatchState } from './components/ImageSwatch/index';\nexport {\n ImageSwatch,\n imageSwatchClassNames,\n renderImageSwatch_unstable,\n useImageSwatchStyles_unstable,\n useImageSwatch_unstable,\n} from './components/ImageSwatch/index';\n"],"names":["ImageSwatch","imageSwatchClassNames","renderImageSwatch_unstable","useImageSwatchStyles_unstable","useImageSwatch_unstable"],"mappings":";;;;;;;;;;;;eAEEA,kBAAW;;;eACXC,4BAAqB;;;eACrBC,iCAA0B;;;eAC1BC,oCAA6B;;;eAC7BC,8BAAuB;;;uBAClB,iCAAiC"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
SwatchPicker: function() {
return _index.SwatchPicker;
},
renderSwatchPicker_unstable: function() {
return _index.renderSwatchPicker_unstable;
},
swatchPickerClassNames: function() {
return _index.swatchPickerClassNames;
},
useSwatchPickerStyles_unstable: function() {
return _index.useSwatchPickerStyles_unstable;
},
useSwatchPicker_unstable: function() {
return _index.useSwatchPicker_unstable;
}
});
const _index = require("./components/SwatchPicker/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/SwatchPicker.ts"],"sourcesContent":["export type {\n SwatchPickerOnSelectEventHandler,\n SwatchPickerOnSelectionChangeData,\n SwatchPickerProps,\n SwatchPickerSlots,\n SwatchPickerState,\n} from './components/SwatchPicker/index';\nexport {\n SwatchPicker,\n renderSwatchPicker_unstable,\n swatchPickerClassNames,\n useSwatchPickerStyles_unstable,\n useSwatchPicker_unstable,\n} from './components/SwatchPicker/index';\n"],"names":["SwatchPicker","renderSwatchPicker_unstable","swatchPickerClassNames","useSwatchPickerStyles_unstable","useSwatchPicker_unstable"],"mappings":";;;;;;;;;;;;eAQEA,mBAAY;;;eACZC,kCAA2B;;;eAC3BC,6BAAsB;;;eACtBC,qCAA8B;;;eAC9BC,+BAAwB;;;uBACnB,kCAAkC"}

View File

@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
SwatchPickerRow: function() {
return _index.SwatchPickerRow;
},
renderSwatchPickerRow_unstable: function() {
return _index.renderSwatchPickerRow_unstable;
},
swatchPickerRowClassNames: function() {
return _index.swatchPickerRowClassNames;
},
useSwatchPickerRowStyles_unstable: function() {
return _index.useSwatchPickerRowStyles_unstable;
},
useSwatchPickerRow_unstable: function() {
return _index.useSwatchPickerRow_unstable;
}
});
const _index = require("./components/SwatchPickerRow/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/SwatchPickerRow.ts"],"sourcesContent":["export type {\n SwatchPickerRowProps,\n SwatchPickerRowSlots,\n SwatchPickerRowState,\n} from './components/SwatchPickerRow/index';\nexport {\n SwatchPickerRow,\n renderSwatchPickerRow_unstable,\n swatchPickerRowClassNames,\n useSwatchPickerRowStyles_unstable,\n useSwatchPickerRow_unstable,\n} from './components/SwatchPickerRow/index';\n"],"names":["SwatchPickerRow","renderSwatchPickerRow_unstable","swatchPickerRowClassNames","useSwatchPickerRowStyles_unstable","useSwatchPickerRow_unstable"],"mappings":";;;;;;;;;;;;eAMEA,sBAAe;;;eACfC,qCAA8B;;;eAC9BC,gCAAyB;;;eACzBC,wCAAiC;;;eACjCC,kCAA2B;;;uBACtB,qCAAqC"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "ColorSwatch", {
enumerable: true,
get: function() {
return ColorSwatch;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useColorSwatch = require("./useColorSwatch");
const _renderColorSwatch = require("./renderColorSwatch");
const _useColorSwatchStylesstyles = require("./useColorSwatchStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const ColorSwatch = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useColorSwatch.useColorSwatch_unstable)(props, ref);
(0, _useColorSwatchStylesstyles.useColorSwatchStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useColorSwatchStyles_unstable')(state);
return (0, _renderColorSwatch.renderColorSwatch_unstable)(state);
});
ColorSwatch.displayName = 'ColorSwatch';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ColorSwatch/ColorSwatch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorSwatch_unstable } from './useColorSwatch';\nimport { renderColorSwatch_unstable } from './renderColorSwatch';\nimport { useColorSwatchStyles_unstable } from './useColorSwatchStyles.styles';\nimport type { ColorSwatchProps } from './ColorSwatch.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ColorSwatch component is used to render a colors, icons and gradients.\n */\nexport const ColorSwatch: ForwardRefComponent<ColorSwatchProps> = React.forwardRef((props, ref) => {\n const state = useColorSwatch_unstable(props, ref);\n\n useColorSwatchStyles_unstable(state);\n useCustomStyleHook_unstable('useColorSwatchStyles_unstable')(state);\n\n return renderColorSwatch_unstable(state);\n});\n\nColorSwatch.displayName = 'ColorSwatch';\n"],"names":["React","useColorSwatch_unstable","renderColorSwatch_unstable","useColorSwatchStyles_unstable","useCustomStyleHook_unstable","ColorSwatch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAElC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering ColorSwatch
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ColorSwatch/ColorSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type ColorSwatchSlots = {\n root: NonNullable<Slot<'button'>>;\n icon?: Slot<'span'>;\n disabledIcon?: Slot<'span'>;\n};\n\n/**\n * ColorSwatch Props\n */\nexport type ColorSwatchProps = ComponentProps<ColorSwatchSlots> &\n Pick<SwatchPickerProps, 'size' | 'shape'> & {\n /**\n * Border color when contrast is low\n */\n borderColor?: string;\n\n /**\n * Swatch color\n */\n color: string;\n\n /**\n * Whether the swatch is disabled\n */\n disabled?: boolean;\n\n /**\n * Swatch value\n */\n value: string;\n };\n\n/**\n * State used in rendering ColorSwatch\n */\nexport type ColorSwatchState = ComponentState<ColorSwatchSlots> &\n Pick<ColorSwatchProps, 'color' | 'disabled' | 'size' | 'shape' | 'value'> & {\n selected: boolean;\n };\n"],"names":[],"mappings":"AAmCA;;CAEC,GACD,WAGI"}

View File

@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ColorSwatch: function() {
return _ColorSwatch.ColorSwatch;
},
colorSwatchClassNames: function() {
return _useColorSwatchStylesstyles.colorSwatchClassNames;
},
renderColorSwatch_unstable: function() {
return _renderColorSwatch.renderColorSwatch_unstable;
},
swatchCSSVars: function() {
return _useColorSwatchStylesstyles.swatchCSSVars;
},
useColorSwatchStyles_unstable: function() {
return _useColorSwatchStylesstyles.useColorSwatchStyles_unstable;
},
useColorSwatch_unstable: function() {
return _useColorSwatch.useColorSwatch_unstable;
}
});
const _ColorSwatch = require("./ColorSwatch");
const _renderColorSwatch = require("./renderColorSwatch");
const _useColorSwatch = require("./useColorSwatch");
const _useColorSwatchStylesstyles = require("./useColorSwatchStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ColorSwatch/index.ts"],"sourcesContent":["export { ColorSwatch } from './ColorSwatch';\nexport type { ColorSwatchProps, ColorSwatchSlots, ColorSwatchState } from './ColorSwatch.types';\nexport { renderColorSwatch_unstable } from './renderColorSwatch';\nexport { useColorSwatch_unstable } from './useColorSwatch';\nexport { colorSwatchClassNames, swatchCSSVars, useColorSwatchStyles_unstable } from './useColorSwatchStyles.styles';\n"],"names":["ColorSwatch","renderColorSwatch_unstable","useColorSwatch_unstable","colorSwatchClassNames","swatchCSSVars","useColorSwatchStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAIXG,iDAAqB;;;eAFrBF,6CAA0B;;;eAEHG,yCAAa;;;eAAEC,yDAA6B;;;eADnEH,uCAAuB;;;6BAHJ,gBAAgB;mCAED,sBAAsB;gCACzB,mBAAmB;4CACyB,gCAAgC"}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderColorSwatch_unstable", {
enumerable: true,
get: function() {
return renderColorSwatch_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderColorSwatch_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
children: [
state.root.children,
state.icon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.icon, {}),
state.disabled && state.disabledIcon && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.disabledIcon, {})
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ColorSwatch/renderColorSwatch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ColorSwatchState, ColorSwatchSlots } from './ColorSwatch.types';\n\n/**\n * Render the final JSX of ColorSwatch\n */\nexport const renderColorSwatch_unstable = (state: ColorSwatchState): JSXElement => {\n assertSlots<ColorSwatchSlots>(state);\n\n return (\n <state.root>\n {state.root.children}\n {state.icon && <state.icon />}\n {state.disabled && state.disabledIcon && <state.disabledIcon />}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderColorSwatch_unstable","state","root","children","icon","disabled","disabledIcon"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,mCAAmC,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,IAAI,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,IAAI,EAAA,CAAA;YACzBH,MAAMI,QAAQ,IAAIJ,MAAMK,YAAY,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,YAAY,EAAA,CAAA;;;AAGlE,EAAE"}

View File

@@ -0,0 +1,80 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useColorSwatch_unstable", {
enumerable: true,
get: function() {
return useColorSwatch_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _swatchPicker = require("../../contexts/swatchPicker");
const _useColorSwatchStylesstyles = require("./useColorSwatchStyles.styles");
const _reacticons = require("@fluentui/react-icons");
const _reacttheme = require("@fluentui/react-theme");
const useColorSwatch_unstable = (props, ref)=>{
const { borderColor, color, disabled, disabledIcon, icon, value, onClick, size, shape, style, ...rest } = props;
const _size = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.size);
const _shape = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.shape);
const isGrid = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.isGrid);
const requestSelectionChange = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.requestSelectionChange);
const selected = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.selectedValue === value);
const onColorSwatchClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onClick, (event)=>requestSelectionChange(event, {
selectedValue: value,
selectedSwatch: color
})));
const rootVariables = {
[_useColorSwatchStylesstyles.swatchCSSVars.color]: color,
[_useColorSwatchStylesstyles.swatchCSSVars.borderColor]: borderColor !== null && borderColor !== void 0 ? borderColor : _reacttheme.tokens.colorTransparentStroke
};
const role = isGrid ? 'gridcell' : 'radio';
const ariaSelected = isGrid ? {
'aria-selected': selected
} : {
'aria-checked': selected
};
const iconShorthand = _reactutilities.slot.optional(icon, {
elementType: 'span'
});
const disabledIconShorthand = _reactutilities.slot.optional(disabledIcon, {
defaultProps: {
children: /*#__PURE__*/ _react.createElement(_reacticons.ProhibitedFilled, null)
},
renderByDefault: true,
elementType: 'span'
});
return {
components: {
root: 'button',
icon: 'span',
disabledIcon: 'span'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('button', {
ref,
role,
...ariaSelected,
onClick: onColorSwatchClick,
type: 'button',
disabled,
...rest,
style: {
...rootVariables,
...style
}
}), {
elementType: 'button'
}),
icon: iconShorthand,
disabledIcon: disabledIconShorthand,
disabled,
size: size !== null && size !== void 0 ? size : _size,
shape: shape !== null && shape !== void 0 ? shape : _shape,
selected,
color,
value
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,329 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
colorSwatchClassNames: function() {
return colorSwatchClassNames;
},
swatchCSSVars: function() {
return swatchCSSVars;
},
useColorSwatchStyles_unstable: function() {
return useColorSwatchStyles_unstable;
}
});
const _react = require("@griffel/react");
const colorSwatchClassNames = {
root: 'fui-ColorSwatch',
icon: 'fui-ColorSwatch__icon',
disabledIcon: 'fui-ColorSwatch__disabledIcon'
};
const swatchCSSVars = {
color: `--fui-SwatchPicker--color`,
borderColor: `--fui-SwatchPicker--borderColor`
};
const { color, borderColor } = swatchCSSVars;
/**
* Styles for the root slot
*/ const useResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("ryw27oi", null, {
r: [
".ryw27oi{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid var(--fui-SwatchPicker--borderColor);background:var(--fui-SwatchPicker--color);overflow:hidden;padding:0;}",
".ryw27oi:hover{cursor:pointer;border:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}",
".ryw27oi:hover:active{border:none;box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorCompoundBrandStrokePressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}",
".ryw27oi:focus{outline:none;}",
".ryw27oi:focus-visible{outline:none;}",
".ryw27oi[data-fui-focus-visible]{border:none;outline:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}"
],
s: [
"@media (forced-colors: active){.ryw27oi{forced-color-adjust:none;}.ryw27oi:hover{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke2Hover),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}.ryw27oi:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}}"
]
});
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
disabled: {
eoavqd: "fphbwmw",
Bvxd0ez: "f1q3txrk",
Be968up: "f10pb1y8"
},
selected: {
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "f3bhgqh",
E5pizo: "f8ps3yo",
Bvxd0ez: "f106r15f",
vajtyg: "ft0nc49",
j6ew2k: "f16jq8vy",
Bv9i2bc: "f1wdoq7e"
},
selectedSmall: {
E5pizo: "fxflcoq",
Bvxd0ez: "fha7ylp",
vajtyg: "fb3iqi"
}
}, {
h: [
".fphbwmw:hover{cursor:not-allowed;}",
".f1q3txrk:hover{box-shadow:none;}",
".f106r15f:hover{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorCompoundBrandStrokeHover),inset 0 0 0 6px var(--colorStrokeFocus1);}",
".ft0nc49:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorCompoundBrandStrokePressed),inset 0 0 0 7px var(--colorStrokeFocus1);}",
".fha7ylp:hover{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorCompoundBrandStrokeHover),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}",
".fb3iqi:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorCompoundBrandStrokePressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}"
],
m: [
[
"@media (forced-colors: active){.f10pb1y8:hover{box-shadow:none;}}",
{
m: "(forced-colors: active)"
}
],
[
"@media (forced-colors: active){.f1wdoq7e{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 5px var(--colorStrokeFocus1);}}",
{
m: "(forced-colors: active)"
}
]
],
d: [
[
".f3bhgqh{border:none;}",
{
p: -2
}
],
".f8ps3yo{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke1),inset 0 0 0 5px var(--colorStrokeFocus1);}",
".f16jq8vy[data-fui-focus-visible]{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus2),inset 0 0 0 5px var(--colorStrokeFocus1);}",
".fxflcoq{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}"
]
});
const useSizeStyles = /*#__PURE__*/ (0, _react.__styles)({
"extra-small": {
a9b677: "f64fuq3",
Bqenvij: "fjamq6b",
Bvxd0ez: "fnzblak",
Bfsrqk8: 0,
B9zn80p: 0,
libdba: 0,
qi15n7: 0,
G6mxvm: 0,
Bpld233: 0,
B2v0cj4: 0,
qv9p00: 0,
Bg6oviu: 0,
Bk6r4ia: 0,
Bckajt6: 0,
Bone85h: 0,
hkxzgu: 0,
b661bw: 0,
kpb45w: 0,
uiygdg: 0,
rljib7: "f18wa7jm",
vajtyg: "faswyoo"
},
small: {
a9b677: "fq4mcun",
Bqenvij: "frvgh55",
Bfsrqk8: 0,
B9zn80p: 0,
libdba: 0,
qi15n7: 0,
G6mxvm: 0,
Bpld233: 0,
B2v0cj4: 0,
qv9p00: 0,
Bg6oviu: 0,
Bk6r4ia: 0,
Bckajt6: 0,
Bone85h: 0,
hkxzgu: 0,
b661bw: 0,
kpb45w: 0,
uiygdg: 0,
rljib7: "f18wa7jm",
vajtyg: "faswyoo"
},
medium: {
a9b677: "f1w9dchk",
Bqenvij: "fxldao9"
},
large: {
a9b677: "f1szoe96",
Bqenvij: "f1d2rq10"
}
}, {
d: [
".f64fuq3{width:20px;}",
".fjamq6b{height:20px;}",
".fq4mcun{width:24px;}",
".frvgh55{height:24px;}",
".f1w9dchk{width:28px;}",
".fxldao9{height:28px;}",
".f1szoe96{width:32px;}",
".f1d2rq10{height:32px;}"
],
h: [
".fnzblak:hover{box-shadow:inset 0 0 0 var(--strokeWidthThin) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus1);}",
[
".f18wa7jm:hover:active{border:none;}",
{
p: -2
}
],
".faswyoo:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorCompoundBrandStrokePressed),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}",
[
".f18wa7jm:hover:active{border:none;}",
{
p: -2
}
]
]
});
const useShapeStyles = /*#__PURE__*/ (0, _react.__styles)({
rounded: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "f2krc9w"
},
circular: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f44lkw9",
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "f1062rbf"
},
square: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f1fabniw",
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "fj0ryk1"
}
}, {
d: [
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
[
".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
[
".f44lkw9{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
],
[
".f1062rbf[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
],
[
".f1fabniw{border-radius:var(--borderRadiusNone);}",
{
p: -1
}
],
[
".fj0ryk1[data-fui-focus-visible]{border-radius:var(--borderRadiusNone);}",
{
p: -1
}
]
]
});
const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
disabledIcon: {
sj55zd: "fqpbvvt",
Bhu2qc9: "f14y0k3d"
},
icon: {
qhf8xq: "f1euv43f",
mc9l5x: "f22iagw",
qb2dma: "f7nlbp4"
},
"extra-small": {
Be2twd7: "f4ybsrx"
},
small: {
Be2twd7: "f4ybsrx"
},
medium: {
Be2twd7: "fe5j1ua"
},
large: {
Be2twd7: "f1rt2boy"
}
}, {
d: [
".fqpbvvt{color:var(--colorNeutralForegroundInverted);}",
".f14y0k3d{filter:drop-shadow(0 1px 1px rgb(0 0 0 / 1));}",
".f1euv43f{position:absolute;}",
".f22iagw{display:flex;}",
".f7nlbp4{align-self:center;}",
".f4ybsrx{font-size:16px;}",
".fe5j1ua{font-size:20px;}",
".f1rt2boy{font-size:24px;}"
]
});
const useColorSwatchStyles_unstable = (state)=>{
'use no memo';
const { size = 'medium', shape = 'square' } = state;
const resetStyles = useResetStyles();
const styles = useStyles();
const sizeStyles = useSizeStyles();
const shapeStyles = useShapeStyles();
const iconStyles = useIconStyles();
const smallerSelectedStyles = size === 'small' || size === 'extra-small' ? styles.selectedSmall : '';
state.root.className = (0, _react.mergeClasses)(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.selected && smallerSelectedStyles, state.disabled && styles.disabled, state.root.className);
if (state.disabled && state.disabledIcon) {
state.disabledIcon.className = (0, _react.mergeClasses)(iconStyles.icon, iconStyles[size], iconStyles.disabledIcon, state.disabledIcon.className);
}
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(iconStyles.icon, iconStyles[size], state.icon.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,206 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
colorSwatchClassNames: function() {
return colorSwatchClassNames;
},
swatchCSSVars: function() {
return swatchCSSVars;
},
useColorSwatchStyles_unstable: function() {
return useColorSwatchStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const _reacttabster = require("@fluentui/react-tabster");
const colorSwatchClassNames = {
root: 'fui-ColorSwatch',
icon: 'fui-ColorSwatch__icon',
disabledIcon: 'fui-ColorSwatch__disabledIcon'
};
const swatchCSSVars = {
color: `--fui-SwatchPicker--color`,
borderColor: `--fui-SwatchPicker--borderColor`
};
const { color, borderColor } = swatchCSSVars;
/**
* Styles for the root slot
*/ const useResetStyles = (0, _react.makeResetStyles)({
display: 'inline-flex',
flexShrink: 0,
alignItems: 'center',
justifyContent: 'center',
boxSizing: 'border-box',
border: `1px solid var(${borderColor})`,
background: `var(${color})`,
overflow: 'hidden',
padding: '0',
':hover': {
cursor: 'pointer',
border: 'none',
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
},
':hover:active': {
border: 'none',
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorStrokeFocus1}`
},
':focus': {
outline: 'none'
},
':focus-visible': {
outline: 'none'
},
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
border: 'none',
outline: 'none',
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorStrokeFocus2}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
}),
// High contrast styles
'@media (forced-colors: active)': {
forcedColorAdjust: 'none',
':hover': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorBrandStroke2Hover}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
},
':hover:active': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorStrokeFocus1}`
}
}
});
const useStyles = (0, _react.makeStyles)({
disabled: {
':hover': {
cursor: 'not-allowed',
boxShadow: 'none'
},
'@media (forced-colors: active)': {
':hover': {
boxShadow: 'none'
}
}
},
selected: {
border: 'none',
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`,
':hover': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${_reacttheme.tokens.colorStrokeFocus1}`
},
':hover:active': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 7px ${_reacttheme.tokens.colorStrokeFocus1}`
},
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus2}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`
}),
'@media (forced-colors: active)': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke2Pressed}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`
}
},
selectedSmall: {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`,
':hover': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
},
':hover:active': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorStrokeFocus1}`
}
}
});
const useSizeStyles = (0, _react.makeStyles)({
'extra-small': {
width: '20px',
height: '20px',
':hover': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThin} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorStrokeFocus1}`
},
':hover:active': {
border: 'none',
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
}
},
small: {
width: '24px',
height: '24px',
':hover:active': {
border: 'none',
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
}
},
medium: {
width: '28px',
height: '28px'
},
large: {
width: '32px',
height: '32px'
}
});
const useShapeStyles = (0, _react.makeStyles)({
rounded: {
borderRadius: _reacttheme.tokens.borderRadiusMedium,
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
borderRadius: _reacttheme.tokens.borderRadiusMedium
})
},
circular: {
borderRadius: _reacttheme.tokens.borderRadiusCircular,
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
borderRadius: _reacttheme.tokens.borderRadiusCircular
})
},
square: {
borderRadius: _reacttheme.tokens.borderRadiusNone,
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
borderRadius: _reacttheme.tokens.borderRadiusNone
})
}
});
const useIconStyles = (0, _react.makeStyles)({
disabledIcon: {
color: _reacttheme.tokens.colorNeutralForegroundInverted,
filter: 'drop-shadow(0 1px 1px rgb(0 0 0 / 1))'
},
icon: {
position: 'absolute',
display: 'flex',
alignSelf: 'center'
},
'extra-small': {
fontSize: '16px'
},
small: {
fontSize: '16px'
},
medium: {
fontSize: '20px'
},
large: {
fontSize: '24px'
}
});
const useColorSwatchStyles_unstable = (state)=>{
'use no memo';
const { size = 'medium', shape = 'square' } = state;
const resetStyles = useResetStyles();
const styles = useStyles();
const sizeStyles = useSizeStyles();
const shapeStyles = useShapeStyles();
const iconStyles = useIconStyles();
const smallerSelectedStyles = size === 'small' || size === 'extra-small' ? styles.selectedSmall : '';
state.root.className = (0, _react.mergeClasses)(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.selected && smallerSelectedStyles, state.disabled && styles.disabled, state.root.className);
if (state.disabled && state.disabledIcon) {
state.disabledIcon.className = (0, _react.mergeClasses)(iconStyles.icon, iconStyles[size], iconStyles.disabledIcon, state.disabledIcon.className);
}
if (state.icon) {
state.icon.className = (0, _react.mergeClasses)(iconStyles.icon, iconStyles[size], state.icon.className);
}
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "EmptySwatch", {
enumerable: true,
get: function() {
return EmptySwatch;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useEmptySwatch = require("./useEmptySwatch");
const _renderEmptySwatch = require("./renderEmptySwatch");
const _useEmptySwatchStylesstyles = require("./useEmptySwatchStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const EmptySwatch = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useEmptySwatch.useEmptySwatch_unstable)(props, ref);
(0, _useEmptySwatchStylesstyles.useEmptySwatchStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useEmptySwatchStyles_unstable')(state);
return (0, _renderEmptySwatch.renderEmptySwatch_unstable)(state);
});
EmptySwatch.displayName = 'EmptySwatch';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/EmptySwatch/EmptySwatch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useEmptySwatch_unstable } from './useEmptySwatch';\nimport { renderEmptySwatch_unstable } from './renderEmptySwatch';\nimport { useEmptySwatchStyles_unstable } from './useEmptySwatchStyles.styles';\nimport type { EmptySwatchProps } from './EmptySwatch.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * EmptySwatch component is used for adding new color swatches.\n */\nexport const EmptySwatch: ForwardRefComponent<EmptySwatchProps> = React.forwardRef((props, ref) => {\n const state = useEmptySwatch_unstable(props, ref);\n\n useEmptySwatchStyles_unstable(state);\n useCustomStyleHook_unstable('useEmptySwatchStyles_unstable')(state);\n return renderEmptySwatch_unstable(state);\n});\n\nEmptySwatch.displayName = 'EmptySwatch';\n"],"names":["React","useEmptySwatch_unstable","renderEmptySwatch_unstable","useEmptySwatchStyles_unstable","useCustomStyleHook_unstable","EmptySwatch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAElC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAC7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering EmptySwatch
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/EmptySwatch/EmptySwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type EmptySwatchSlots = {\n root: Slot<'button'>;\n};\n\n/**\n * EmptySwatch Props\n */\nexport type EmptySwatchProps = ComponentProps<EmptySwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'>;\n\n/**\n * State used in rendering EmptySwatch\n */\nexport type EmptySwatchState = ComponentState<EmptySwatchSlots> & Pick<EmptySwatchProps, 'size' | 'shape'>;\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAA2G"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
EmptySwatch: function() {
return _EmptySwatch.EmptySwatch;
},
emptySwatchClassNames: function() {
return _useEmptySwatchStylesstyles.emptySwatchClassNames;
},
renderEmptySwatch_unstable: function() {
return _renderEmptySwatch.renderEmptySwatch_unstable;
},
useEmptySwatchStyles_unstable: function() {
return _useEmptySwatchStylesstyles.useEmptySwatchStyles_unstable;
},
useEmptySwatch_unstable: function() {
return _useEmptySwatch.useEmptySwatch_unstable;
}
});
const _EmptySwatch = require("./EmptySwatch");
const _renderEmptySwatch = require("./renderEmptySwatch");
const _useEmptySwatch = require("./useEmptySwatch");
const _useEmptySwatchStylesstyles = require("./useEmptySwatchStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/EmptySwatch/index.ts"],"sourcesContent":["export { EmptySwatch } from './EmptySwatch';\nexport type { EmptySwatchProps, EmptySwatchSlots, EmptySwatchState } from './EmptySwatch.types';\nexport { renderEmptySwatch_unstable } from './renderEmptySwatch';\nexport { useEmptySwatch_unstable } from './useEmptySwatch';\nexport { emptySwatchClassNames, useEmptySwatchStyles_unstable } from './useEmptySwatchStyles.styles';\n"],"names":["EmptySwatch","renderEmptySwatch_unstable","useEmptySwatch_unstable","emptySwatchClassNames","useEmptySwatchStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAIXG,iDAAqB;;;eAFrBF,6CAA0B;;;eAEHG,yDAA6B;;;eADpDF,uCAAuB;;;6BAHJ,gBAAgB;mCAED,sBAAsB;gCACzB,mBAAmB;4CACU,gCAAgC"}

View File

@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderEmptySwatch_unstable", {
enumerable: true,
get: function() {
return renderEmptySwatch_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderEmptySwatch_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/EmptySwatch/renderEmptySwatch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { EmptySwatchState, EmptySwatchSlots } from './EmptySwatch.types';\n\n/**\n * Render the final JSX of EmptySwatch\n */\nexport const renderEmptySwatch_unstable = (state: EmptySwatchState): JSXElement => {\n assertSlots<EmptySwatchSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderEmptySwatch_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,6BAA6B,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

View File

@@ -0,0 +1,40 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useEmptySwatch_unstable", {
enumerable: true,
get: function() {
return useEmptySwatch_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _swatchPicker = require("../../contexts/swatchPicker");
const useEmptySwatch_unstable = (props, ref)=>{
const { size, shape, ...rest } = props;
const _size = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.size);
const _shape = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.shape);
const isGrid = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.isGrid);
const role = isGrid ? 'gridcell' : 'radio';
const a11yProps = isGrid ? {} : {
'aria-checked': false
};
return {
components: {
root: 'button'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('button', {
ref,
role,
...a11yProps,
...rest
}), {
elementType: 'button'
}),
size: size !== null && size !== void 0 ? size : _size,
shape: shape !== null && shape !== void 0 ? shape : _shape
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/EmptySwatch/useEmptySwatch.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { EmptySwatchProps, EmptySwatchState } from './EmptySwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render EmptySwatch.\n *\n * The returned state can be modified with hooks such as useEmptySwatchStyles_unstable,\n * before being passed to renderEmptySwatch_unstable.\n *\n * @param props - props from this instance of EmptySwatch\n * @param ref - reference to root HTMLDivElement of EmptySwatch\n */\nexport const useEmptySwatch_unstable = (\n props: EmptySwatchProps,\n ref: React.Ref<HTMLButtonElement>,\n): EmptySwatchState => {\n const { size, shape, ...rest } = props;\n const _size = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n const _shape = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n const role = isGrid ? 'gridcell' : 'radio';\n const a11yProps = isGrid ? {} : { 'aria-checked': false };\n return {\n components: {\n root: 'button',\n },\n root: slot.always(\n getIntrinsicElementProps('button', {\n ref,\n role,\n ...a11yProps,\n ...rest,\n }),\n { elementType: 'button' },\n ),\n size: size ?? _size,\n shape: shape ?? _shape,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useEmptySwatch_unstable","props","ref","size","shape","rest","_size","ctx","_shape","isGrid","role","a11yProps","components","root","always","elementType"],"mappings":"AAAA;;;;;+BAgBaI;;;;;;;iEAdU,QAAQ;gCACgB,4BAA4B;8BAEtB,8BAA8B;AAW5E,gCAAgC,CACrCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IACjC,MAAMK,YAAQP,kDAAAA,EAAqCQ,CAAAA,MAAOA,IAAIJ,IAAI;IAClE,MAAMK,aAAST,kDAAAA,EAAqCQ,CAAAA,MAAOA,IAAIH,KAAK;IACpE,MAAMK,aAASV,kDAAAA,EAAqCQ,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,OAAOD,SAAS,aAAa;IACnC,MAAME,YAAYF,SAAS,CAAC,IAAI;QAAE,gBAAgB;IAAM;IACxD,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,oBAAAA,CAAKgB,MAAM,KACfjB,wCAAAA,EAAyB,UAAU;YACjCK;YACAQ;YACA,GAAGC,SAAS;YACZ,GAAGN,IAAI;QACT,IACA;YAAEU,aAAa;QAAS;QAE1BZ,MAAMA,SAAAA,QAAAA,SAAAA,KAAAA,IAAAA,OAAQG;QACdF,OAAOA,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,QAASI;IAClB;AACF,EAAE"}

View File

@@ -0,0 +1,145 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
emptySwatchClassNames: function() {
return emptySwatchClassNames;
},
useEmptySwatchStyles_unstable: function() {
return useEmptySwatchStyles_unstable;
}
});
const _react = require("@griffel/react");
const emptySwatchClassNames = {
root: 'fui-EmptySwatch'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1top892", null, [
".r1top892{background-color:var(--colorTransparentBackground);border:1px dashed var(--colorNeutralForeground4);}"
]);
const useSizeStyles = /*#__PURE__*/ (0, _react.__styles)({
"extra-small": {
a9b677: "f64fuq3",
Bqenvij: "fjamq6b"
},
small: {
a9b677: "fq4mcun",
Bqenvij: "frvgh55"
},
medium: {
a9b677: "f1w9dchk",
Bqenvij: "fxldao9"
},
large: {
a9b677: "f1szoe96",
Bqenvij: "f1d2rq10"
}
}, {
d: [
".f64fuq3{width:20px;}",
".fjamq6b{height:20px;}",
".fq4mcun{width:24px;}",
".frvgh55{height:24px;}",
".f1w9dchk{width:28px;}",
".fxldao9{height:28px;}",
".f1szoe96{width:32px;}",
".f1d2rq10{height:32px;}"
]
});
const useShapeStyles = /*#__PURE__*/ (0, _react.__styles)({
rounded: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "f2krc9w"
},
circular: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f44lkw9",
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "f1062rbf"
},
square: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f1fabniw",
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "fj0ryk1"
}
}, {
d: [
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
[
".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
[
".f44lkw9{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
],
[
".f1062rbf[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
],
[
".f1fabniw{border-radius:var(--borderRadiusNone);}",
{
p: -1
}
],
[
".fj0ryk1[data-fui-focus-visible]{border-radius:var(--borderRadiusNone);}",
{
p: -1
}
]
]
});
const useEmptySwatchStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const sizeStyles = useSizeStyles();
const shapeStyles = useShapeStyles();
var _state_size;
const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';
var _state_shape;
state.root.className = (0, _react.mergeClasses)(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useEmptySwatchStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const emptySwatchClassNames = {\n root: 'fui-EmptySwatch'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n backgroundColor: tokens.colorTransparentBackground,\n border: `1px dashed ${tokens.colorNeutralForeground4}`\n});\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px'\n },\n small: {\n width: '24px',\n height: '24px'\n },\n medium: {\n width: '28px',\n height: '28px'\n },\n large: {\n width: '32px',\n height: '32px'\n }\n});\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusMedium\n })\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusCircular\n })\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({\n borderRadius: tokens.borderRadiusNone\n })\n }\n});\n/**\n * Apply styling to the EmptySwatch slots based on the state\n */ export const useEmptySwatchStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n var _state_size;\n const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';\n var _state_shape;\n state.root.className = mergeClasses(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);\n return state;\n};\n"],"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","emptySwatchClassNames","root","useStyles","useSizeStyles","a9b677","Bqenvij","small","medium","large","d","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","p","useEmptySwatchStyles_unstable","state","styles","sizeStyles","shapeStyles","_state_size","size","_state_shape","className","shape"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,qBAAqB;;;IAiDjByB,6BAA6B;;;;uBApDY,gBAAgB;AAGnE,8BAA8B;IACjCxB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGP,oBAAA,EAAA,YAAA,MAAA;IAAA;CAGrB,CAAC;AACF,MAAMQ,aAAa,GAAA,WAAA,OAAGP,eAAA,EAAA;IAAA,eAAA;QAAAQ,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,KAAA,EAAA;QAAAF,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAE,MAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAG,KAAA,EAAA;QAAAJ,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAI,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAiBrB,CAAC;AACF,MAAMC,cAAc,GAAA,WAAA,OAAGd,eAAA,EAAA;IAAAe,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAV,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAE,MAAA,EAAA;QAAAX,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAZ,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAe,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAmBtB,CAAC;AAGS,uCAAuCE,KAAK,IAAG;IACtD,aAAa;IACb,MAAMC,MAAM,GAAGzB,SAAS,CAAC,CAAC;IAC1B,MAAM0B,UAAU,GAAGzB,aAAa,CAAC,CAAC;IAClC,MAAM0B,WAAW,GAAGnB,cAAc,CAAC,CAAC;IACpC,IAAIoB,WAAW;IACf,MAAMC,IAAI,GAAG,CAACD,WAAW,GAAGJ,KAAK,CAACK,IAAAA,AAAI,MAAM,IAAI,IAAID,WAAW,KAAK,KAAK,CAAC,GAAGA,WAAW,GAAG,QAAQ;IACnG,IAAIE,YAAY;IAChBN,KAAK,CAACzB,IAAI,CAACgC,SAAS,OAAGpC,mBAAY,EAACG,qBAAqB,CAACC,IAAI,EAAE0B,MAAM,EAAEC,UAAU,CAACG,IAAI,CAAC,EAAEF,WAAW,CAAC,CAACG,YAAY,GAAGN,KAAK,CAACQ,KAAAA,AAAK,MAAM,IAAI,IAAIF,YAAY,KAAK,KAAK,CAAC,GAAGA,YAAY,GAAG,QAAQ,CAAC,EAAEN,KAAK,CAACzB,IAAI,CAACgC,SAAS,CAAC;IACxN,OAAOP,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,80 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
emptySwatchClassNames: function() {
return emptySwatchClassNames;
},
useEmptySwatchStyles_unstable: function() {
return useEmptySwatchStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const _reacttabster = require("@fluentui/react-tabster");
const emptySwatchClassNames = {
root: 'fui-EmptySwatch'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeResetStyles)({
backgroundColor: _reacttheme.tokens.colorTransparentBackground,
border: `1px dashed ${_reacttheme.tokens.colorNeutralForeground4}`
});
const useSizeStyles = (0, _react.makeStyles)({
'extra-small': {
width: '20px',
height: '20px'
},
small: {
width: '24px',
height: '24px'
},
medium: {
width: '28px',
height: '28px'
},
large: {
width: '32px',
height: '32px'
}
});
const useShapeStyles = (0, _react.makeStyles)({
rounded: {
borderRadius: _reacttheme.tokens.borderRadiusMedium,
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
borderRadius: _reacttheme.tokens.borderRadiusMedium
})
},
circular: {
borderRadius: _reacttheme.tokens.borderRadiusCircular,
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
borderRadius: _reacttheme.tokens.borderRadiusCircular
})
},
square: {
borderRadius: _reacttheme.tokens.borderRadiusNone,
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
borderRadius: _reacttheme.tokens.borderRadiusNone
})
}
});
const useEmptySwatchStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const sizeStyles = useSizeStyles();
const shapeStyles = useShapeStyles();
var _state_size;
const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';
var _state_shape;
state.root.className = (0, _react.mergeClasses)(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/EmptySwatch/useEmptySwatchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { EmptySwatchSlots, EmptySwatchState } from './EmptySwatch.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const emptySwatchClassNames: SlotClassNames<EmptySwatchSlots> = {\n root: 'fui-EmptySwatch',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n backgroundColor: tokens.colorTransparentBackground,\n border: `1px dashed ${tokens.colorNeutralForeground4}`,\n});\n\nconst useSizeStyles = makeStyles({\n 'extra-small': {\n width: '20px',\n height: '20px',\n },\n small: {\n width: '24px',\n height: '24px',\n },\n medium: {\n width: '28px',\n height: '28px',\n },\n large: {\n width: '32px',\n height: '32px',\n },\n});\n\nconst useShapeStyles = makeStyles({\n rounded: {\n borderRadius: tokens.borderRadiusMedium,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusMedium }),\n },\n circular: {\n borderRadius: tokens.borderRadiusCircular,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusCircular }),\n },\n square: {\n borderRadius: tokens.borderRadiusNone,\n ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusNone }),\n },\n});\n\n/**\n * Apply styling to the EmptySwatch slots based on the state\n */\nexport const useEmptySwatchStyles_unstable = (state: EmptySwatchState): EmptySwatchState => {\n 'use no memo';\n\n const styles = useStyles();\n const sizeStyles = useSizeStyles();\n const shapeStyles = useShapeStyles();\n\n const size = state.size ?? 'medium';\n\n state.root.className = mergeClasses(\n emptySwatchClassNames.root,\n styles,\n sizeStyles[size],\n shapeStyles[state.shape ?? 'square'],\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","emptySwatchClassNames","root","useStyles","backgroundColor","colorTransparentBackground","border","colorNeutralForeground4","useSizeStyles","width","height","small","medium","large","useShapeStyles","rounded","borderRadius","borderRadiusMedium","circular","borderRadiusCircular","square","borderRadiusNone","useEmptySwatchStyles_unstable","state","styles","sizeStyles","shapeStyles","size","className","shape"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,qBAAAA;;;iCAiDAqB;eAAAA;;;uBAvD6C,iBAAiB;4BAGpD,wBAAwB;8BACC,0BAA0B;AAEnE,8BAAgE;IACrEpB,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYP,sBAAAA,EAAgB;IAChCQ,iBAAiBL,kBAAAA,CAAOM,0BAA0B;IAClDC,QAAQ,CAAC,WAAW,EAAEP,kBAAAA,CAAOQ,uBAAuB,EAAE;AACxD;AAEA,MAAMC,oBAAgBX,iBAAAA,EAAW;IAC/B,eAAe;QACbY,OAAO;QACPC,QAAQ;IACV;IACAC,OAAO;QACLF,OAAO;QACPC,QAAQ;IACV;IACAE,QAAQ;QACNH,OAAO;QACPC,QAAQ;IACV;IACAG,OAAO;QACLJ,OAAO;QACPC,QAAQ;IACV;AACF;AAEA,MAAMI,qBAAiBjB,iBAAAA,EAAW;IAChCkB,SAAS;QACPC,cAAcjB,kBAAAA,CAAOkB,kBAAkB;QACvC,OAAGjB,6CAAAA,EAAgC;YAAEgB,cAAcjB,kBAAAA,CAAOkB,kBAAkB;QAAC,EAAE;IACjF;IACAC,UAAU;QACRF,cAAcjB,kBAAAA,CAAOoB,oBAAoB;QACzC,OAAGnB,6CAAAA,EAAgC;YAAEgB,cAAcjB,kBAAAA,CAAOoB,oBAAoB;QAAC,EAAE;IACnF;IACAC,QAAQ;QACNJ,cAAcjB,kBAAAA,CAAOsB,gBAAgB;QACrC,OAAGrB,6CAAAA,EAAgC;YAAEgB,cAAcjB,kBAAAA,CAAOsB,gBAAgB;QAAC,EAAE;IAC/E;AACF;AAKO,sCAAsC,CAACE;IAC5C;IAEA,MAAMC,SAASrB;IACf,MAAMsB,aAAajB;IACnB,MAAMkB,cAAcZ;QAEPS;IAAb,MAAMI,OAAOJ,CAAAA,cAAAA,MAAMI,IAAAA,AAAI,MAAA,QAAVJ,gBAAAA,KAAAA,IAAAA,cAAc;QAMbA;IAJdA,MAAMrB,IAAI,CAAC0B,SAAS,OAAG9B,mBAAAA,EACrBG,sBAAsBC,IAAI,EAC1BsB,QACAC,UAAU,CAACE,KAAK,EAChBD,WAAW,CAACH,CAAAA,eAAAA,MAAMM,KAAAA,AAAK,MAAA,QAAXN,iBAAAA,KAAAA,IAAAA,eAAe,SAAS,EACpCA,MAAMrB,IAAI,CAAC0B,SAAS;IAGtB,OAAOL;AACT,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "ImageSwatch", {
enumerable: true,
get: function() {
return ImageSwatch;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useImageSwatch = require("./useImageSwatch");
const _renderImageSwatch = require("./renderImageSwatch");
const _useImageSwatchStylesstyles = require("./useImageSwatchStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const ImageSwatch = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useImageSwatch.useImageSwatch_unstable)(props, ref);
(0, _useImageSwatchStylesstyles.useImageSwatchStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useImageSwatchStyles_unstable')(state);
return (0, _renderImageSwatch.renderImageSwatch_unstable)(state);
});
ImageSwatch.displayName = 'ImageSwatch';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ImageSwatch/ImageSwatch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useImageSwatch_unstable } from './useImageSwatch';\nimport { renderImageSwatch_unstable } from './renderImageSwatch';\nimport { useImageSwatchStyles_unstable } from './useImageSwatchStyles.styles';\nimport type { ImageSwatchProps } from './ImageSwatch.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ImageSwatch component is used to render an images, patterns and textures.\n */\nexport const ImageSwatch: ForwardRefComponent<ImageSwatchProps> = React.forwardRef((props, ref) => {\n const state = useImageSwatch_unstable(props, ref);\n\n useImageSwatchStyles_unstable(state);\n useCustomStyleHook_unstable('useImageSwatchStyles_unstable')(state);\n\n return renderImageSwatch_unstable(state);\n});\n\nImageSwatch.displayName = 'ImageSwatch';\n"],"names":["React","useImageSwatch_unstable","renderImageSwatch_unstable","useImageSwatchStyles_unstable","useCustomStyleHook_unstable","ImageSwatch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAElC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering ImageSwatch
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ImageSwatch/ImageSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type ImageSwatchSlots = {\n root: Slot<'button'>;\n};\n\n/**\n * ImageSwatch Props\n */\nexport type ImageSwatchProps = ComponentProps<ImageSwatchSlots> &\n Pick<SwatchPickerProps, 'size' | 'shape'> & {\n /**\n * Swatch color\n */\n src: string;\n\n /**\n * Swatch value\n */\n value: string;\n };\n\n/**\n * State used in rendering ImageSwatch\n */\nexport type ImageSwatchState = ComponentState<ImageSwatchSlots> &\n Pick<ImageSwatchProps, 'color' | 'size' | 'shape' | 'value'> & {\n selected: boolean;\n };\n"],"names":[],"mappings":"AAuBA;;CAEC,GACD,WAGI"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ImageSwatch: function() {
return _ImageSwatch.ImageSwatch;
},
imageSwatchClassNames: function() {
return _useImageSwatchStylesstyles.imageSwatchClassNames;
},
renderImageSwatch_unstable: function() {
return _renderImageSwatch.renderImageSwatch_unstable;
},
useImageSwatchStyles_unstable: function() {
return _useImageSwatchStylesstyles.useImageSwatchStyles_unstable;
},
useImageSwatch_unstable: function() {
return _useImageSwatch.useImageSwatch_unstable;
}
});
const _ImageSwatch = require("./ImageSwatch");
const _renderImageSwatch = require("./renderImageSwatch");
const _useImageSwatch = require("./useImageSwatch");
const _useImageSwatchStylesstyles = require("./useImageSwatchStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ImageSwatch/index.ts"],"sourcesContent":["export { ImageSwatch } from './ImageSwatch';\nexport type { ImageSwatchProps, ImageSwatchSlots, ImageSwatchState } from './ImageSwatch.types';\nexport { renderImageSwatch_unstable } from './renderImageSwatch';\nexport { useImageSwatch_unstable } from './useImageSwatch';\nexport { imageSwatchClassNames, useImageSwatchStyles_unstable } from './useImageSwatchStyles.styles';\n"],"names":["ImageSwatch","renderImageSwatch_unstable","useImageSwatch_unstable","imageSwatchClassNames","useImageSwatchStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAIXG,iDAAqB;;;eAFrBF,6CAA0B;;;eAEHG,yDAA6B;;;eADpDF,uCAAuB;;;6BAHJ,gBAAgB;mCAED,sBAAsB;gCACzB,mBAAmB;4CACU,gCAAgC"}

View File

@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderImageSwatch_unstable", {
enumerable: true,
get: function() {
return renderImageSwatch_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderImageSwatch_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ImageSwatch/renderImageSwatch.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ImageSwatchState, ImageSwatchSlots } from './ImageSwatch.types';\n\n/**\n * Render the final JSX of ImageSwatch\n */\nexport const renderImageSwatch_unstable = (state: ImageSwatchState): JSXElement => {\n assertSlots<ImageSwatchSlots>(state);\n\n return <state.root />;\n};\n"],"names":["assertSlots","renderImageSwatch_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,6BAA6B,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

View File

@@ -0,0 +1,55 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useImageSwatch_unstable", {
enumerable: true,
get: function() {
return useImageSwatch_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _swatchPicker = require("../../contexts/swatchPicker");
const useImageSwatch_unstable = (props, ref)=>{
const { src, value, onClick, style, ...rest } = props;
const size = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.size);
const shape = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.shape);
const isGrid = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.isGrid);
const requestSelectionChange = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.requestSelectionChange);
const selected = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.selectedValue === value);
const role = isGrid ? 'gridcell' : 'radio';
const ariaSelected = isGrid ? {
'aria-selected': selected
} : {
'aria-checked': selected
};
const onImageSwatchClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onClick, (event)=>requestSelectionChange(event, {
selectedValue: value,
selectedSwatch: src
})));
return {
components: {
root: 'button'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('button', {
ref,
role,
...ariaSelected,
onClick: onImageSwatchClick,
...rest,
style: {
backgroundImage: `url(${src})`,
...style
}
}), {
elementType: 'button'
}),
value,
selected,
size,
shape
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ImageSwatch/useImageSwatch.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { ImageSwatchProps, ImageSwatchState } from './ImageSwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render ImageSwatch.\n *\n * The returned state can be modified with hooks such as useImageSwatchStyles_unstable,\n * before being passed to renderImageSwatch_unstable.\n *\n * @param props - props from this instance of ImageSwatch\n * @param ref - reference to root HTMLDivElement of ImageSwatch\n */\nexport const useImageSwatch_unstable = (\n props: ImageSwatchProps,\n ref: React.Ref<HTMLButtonElement>,\n): ImageSwatchState => {\n const { src, value, onClick, style, ...rest } = props;\n const size = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n const shape = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n const requestSelectionChange = useSwatchPickerContextValue_unstable(ctx => ctx.requestSelectionChange);\n const selected = useSwatchPickerContextValue_unstable(ctx => ctx.selectedValue === value);\n\n const role = isGrid ? 'gridcell' : 'radio';\n const ariaSelected = isGrid\n ? {\n 'aria-selected': selected,\n }\n : { 'aria-checked': selected };\n\n const onImageSwatchClick = useEventCallback(\n mergeCallbacks(onClick, (event: React.MouseEvent<HTMLButtonElement>) =>\n requestSelectionChange(event, {\n selectedValue: value,\n selectedSwatch: src,\n }),\n ),\n );\n\n return {\n components: {\n root: 'button',\n },\n root: slot.always(\n getIntrinsicElementProps('button', {\n ref,\n role,\n ...ariaSelected,\n onClick: onImageSwatchClick,\n ...rest,\n style: {\n backgroundImage: `url(${src})`,\n ...style,\n },\n }),\n { elementType: 'button' },\n ),\n value,\n selected,\n size,\n shape,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","mergeCallbacks","useSwatchPickerContextValue_unstable","useImageSwatch_unstable","props","ref","src","value","onClick","style","rest","size","ctx","shape","isGrid","requestSelectionChange","selected","selectedValue","role","ariaSelected","onImageSwatchClick","event","selectedSwatch","components","root","always","backgroundImage","elementType"],"mappings":"AAAA;;;;;+BAgBaM;;;;;;;iEAdU,QAAQ;gCACkD,4BAA4B;8BAExD,8BAA8B;AAW5E,gCAAgC,CACrCC,OACAC;IAEA,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGN;IAChD,MAAMO,WAAOT,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAID,IAAI;IACjE,MAAME,YAAQX,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIC,KAAK;IACnE,MAAMC,aAASZ,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,6BAAyBb,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIG,sBAAsB;IACrG,MAAMC,eAAWd,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIK,aAAa,KAAKV;IAEnF,MAAMW,OAAOJ,SAAS,aAAa;IACnC,MAAMK,eAAeL,SACjB;QACE,iBAAiBE;IACnB,IACA;QAAE,gBAAgBA;IAAS;IAE/B,MAAMI,yBAAqBpB,gCAAAA,MACzBC,8BAAAA,EAAeO,SAAS,CAACa,QACvBN,uBAAuBM,OAAO;YAC5BJ,eAAeV;YACfe,gBAAgBhB;QAClB;IAIJ,OAAO;QACLiB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMzB,oBAAAA,CAAK0B,MAAM,KACf3B,wCAAAA,EAAyB,UAAU;YACjCO;YACAa;YACA,GAAGC,YAAY;YACfX,SAASY;YACT,GAAGV,IAAI;YACPD,OAAO;gBACLiB,iBAAiB,CAAC,IAAI,EAAEpB,IAAI,CAAC,CAAC;gBAC9B,GAAGG,KAAK;YACV;QACF,IACA;YAAEkB,aAAa;QAAS;QAE1BpB;QACAS;QACAL;QACAE;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,203 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
imageSwatchClassNames: function() {
return imageSwatchClassNames;
},
useImageSwatchStyles_unstable: function() {
return useImageSwatchStyles_unstable;
}
});
const _react = require("@griffel/react");
const imageSwatchClassNames = {
root: 'fui-ImageSwatch'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r18b5q7m", null, {
r: [
".r18b5q7m{display:inline-flex;box-sizing:border-box;border:1px solid var(--colorTransparentStroke);background-size:cover;background-repeat:no-repeat;padding:0;}",
".r18b5q7m:hover{cursor:pointer;border:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}",
".r18b5q7m:hover:active{border:none;box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorCompoundBrandStrokePressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}",
".r18b5q7m:focus{outline:none;}",
".r18b5q7m:focus-visible{outline:none;}",
".r18b5q7m[data-fui-focus-visible]{border:none;outline:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}"
],
s: [
"@media (forced-colors: active){.r18b5q7m{forced-color-adjust:none;}.r18b5q7m:hover{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke2Hover),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}.r18b5q7m:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}}"
]
});
const useStylesSelected = /*#__PURE__*/ (0, _react.__styles)({
selected: {
Bgfg5da: 0,
B9xav0g: 0,
oivjwe: 0,
Bn0qgzm: 0,
B4g9neb: 0,
zhjwy3: 0,
wvpqe5: 0,
ibv6hh: 0,
u1mtju: 0,
h3c5rm: 0,
vrafjx: 0,
Bekrc4i: 0,
i8vvqc: 0,
g2u3we: 0,
icvyot: 0,
B4j52fo: 0,
irswps: "f3bhgqh",
E5pizo: "f8ps3yo",
Bvxd0ez: "f106r15f",
vajtyg: "ft0nc49",
j6ew2k: "f16jq8vy",
Bv9i2bc: "f1wdoq7e"
}
}, {
d: [
[
".f3bhgqh{border:none;}",
{
p: -2
}
],
".f8ps3yo{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke1),inset 0 0 0 5px var(--colorStrokeFocus1);}",
".f16jq8vy[data-fui-focus-visible]{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus2),inset 0 0 0 5px var(--colorStrokeFocus1);}"
],
h: [
".f106r15f:hover{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorCompoundBrandStrokeHover),inset 0 0 0 6px var(--colorStrokeFocus1);}",
".ft0nc49:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorCompoundBrandStrokePressed),inset 0 0 0 7px var(--colorStrokeFocus1);}"
],
m: [
[
"@media (forced-colors: active){.f1wdoq7e{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 5px var(--colorStrokeFocus1);}}",
{
m: "(forced-colors: active)"
}
]
]
});
const useSizeStyles = /*#__PURE__*/ (0, _react.__styles)({
"extra-small": {
a9b677: "f64fuq3",
Bqenvij: "fjamq6b"
},
small: {
a9b677: "fq4mcun",
Bqenvij: "frvgh55"
},
medium: {
a9b677: "f1w9dchk",
Bqenvij: "fxldao9"
},
large: {
a9b677: "f1szoe96",
Bqenvij: "f1d2rq10"
}
}, {
d: [
".f64fuq3{width:20px;}",
".fjamq6b{height:20px;}",
".fq4mcun{width:24px;}",
".frvgh55{height:24px;}",
".f1w9dchk{width:28px;}",
".fxldao9{height:28px;}",
".f1szoe96{width:32px;}",
".f1d2rq10{height:32px;}"
]
});
const useShapeStyles = /*#__PURE__*/ (0, _react.__styles)({
rounded: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "ft85np5",
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "f2krc9w"
},
circular: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f44lkw9",
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "f1062rbf"
},
square: {
Beyfa6y: 0,
Bbmb7ep: 0,
Btl43ni: 0,
B7oj6ja: 0,
Dimara: "f1fabniw",
Bw81rd7: 0,
kdpuga: 0,
dm238s: 0,
B6xbmo0: 0,
B3whbx2: "fj0ryk1"
}
}, {
d: [
[
".ft85np5{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
[
".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}",
{
p: -1
}
],
[
".f44lkw9{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
],
[
".f1062rbf[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);}",
{
p: -1
}
],
[
".f1fabniw{border-radius:var(--borderRadiusNone);}",
{
p: -1
}
],
[
".fj0ryk1[data-fui-focus-visible]{border-radius:var(--borderRadiusNone);}",
{
p: -1
}
]
]
});
const useImageSwatchStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const selectedStyles = useStylesSelected();
const sizeStyles = useSizeStyles();
const shapeStyles = useShapeStyles();
const { size = 'medium', shape = 'square' } = state;
state.root.className = (0, _react.mergeClasses)(imageSwatchClassNames.root, styles, sizeStyles[size], shapeStyles[shape], state.selected && selectedStyles.selected, state.root.className);
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,131 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
imageSwatchClassNames: function() {
return imageSwatchClassNames;
},
useImageSwatchStyles_unstable: function() {
return useImageSwatchStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const _reacttabster = require("@fluentui/react-tabster");
const imageSwatchClassNames = {
root: 'fui-ImageSwatch'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeResetStyles)({
display: 'inline-flex',
boxSizing: 'border-box',
border: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`,
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
padding: '0',
':hover': {
cursor: 'pointer',
border: 'none',
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
},
':hover:active': {
border: 'none',
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorStrokeFocus1}`
},
':focus': {
outline: 'none'
},
':focus-visible': {
outline: 'none'
},
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
border: 'none',
outline: 'none',
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorStrokeFocus2}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
}),
// High contrast styles
'@media (forced-colors: active)': {
forcedColorAdjust: 'none',
':hover': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorBrandStroke2Hover}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
},
':hover:active': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorStrokeFocus1}`
}
}
});
const useStylesSelected = (0, _react.makeStyles)({
selected: {
border: 'none',
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`,
':hover': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${_reacttheme.tokens.colorStrokeFocus1}`
},
':hover:active': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 7px ${_reacttheme.tokens.colorStrokeFocus1}`
},
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus2}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`
}),
'@media (forced-colors: active)': {
boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke2Pressed}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`
}
}
});
const useSizeStyles = (0, _react.makeStyles)({
'extra-small': {
width: '20px',
height: '20px'
},
small: {
width: '24px',
height: '24px'
},
medium: {
width: '28px',
height: '28px'
},
large: {
width: '32px',
height: '32px'
}
});
const useShapeStyles = (0, _react.makeStyles)({
rounded: {
borderRadius: _reacttheme.tokens.borderRadiusMedium,
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
borderRadius: _reacttheme.tokens.borderRadiusMedium
})
},
circular: {
borderRadius: _reacttheme.tokens.borderRadiusCircular,
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
borderRadius: _reacttheme.tokens.borderRadiusCircular
})
},
square: {
borderRadius: _reacttheme.tokens.borderRadiusNone,
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
borderRadius: _reacttheme.tokens.borderRadiusNone
})
}
});
const useImageSwatchStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const selectedStyles = useStylesSelected();
const sizeStyles = useSizeStyles();
const shapeStyles = useShapeStyles();
const { size = 'medium', shape = 'square' } = state;
state.root.className = (0, _react.mergeClasses)(imageSwatchClassNames.root, styles, sizeStyles[size], shapeStyles[shape], state.selected && selectedStyles.selected, state.root.className);
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "SwatchPicker", {
enumerable: true,
get: function() {
return SwatchPicker;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useSwatchPicker = require("./useSwatchPicker");
const _renderSwatchPicker = require("./renderSwatchPicker");
const _useSwatchPickerStylesstyles = require("./useSwatchPickerStyles.styles");
const _swatchPicker = require("../../contexts/swatchPicker");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const SwatchPicker = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useSwatchPicker.useSwatchPicker_unstable)(props, ref);
const contextValues = (0, _swatchPicker.useSwatchPickerContextValues)(state);
(0, _useSwatchPickerStylesstyles.useSwatchPickerStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useSwatchPickerStyles_unstable')(state);
return (0, _renderSwatchPicker.renderSwatchPicker_unstable)(state, contextValues);
});
SwatchPicker.displayName = 'SwatchPicker';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useSwatchPicker_unstable } from './useSwatchPicker';\nimport { renderSwatchPicker_unstable } from './renderSwatchPicker';\nimport { useSwatchPickerStyles_unstable } from './useSwatchPickerStyles.styles';\nimport type { SwatchPickerProps } from './SwatchPicker.types';\nimport { useSwatchPickerContextValues } from '../../contexts/swatchPicker';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SwatchPicker component - TODO: add more docs\n */\nexport const SwatchPicker: ForwardRefComponent<SwatchPickerProps> = React.forwardRef((props, ref) => {\n const state = useSwatchPicker_unstable(props, ref);\n const contextValues = useSwatchPickerContextValues(state);\n\n useSwatchPickerStyles_unstable(state);\n useCustomStyleHook_unstable('useSwatchPickerStyles_unstable')(state);\n\n return renderSwatchPicker_unstable(state, contextValues);\n});\n\nSwatchPicker.displayName = 'SwatchPicker';\n"],"names":["React","useSwatchPicker_unstable","renderSwatchPicker_unstable","useSwatchPickerStyles_unstable","useSwatchPickerContextValues","useCustomStyleHook_unstable","SwatchPicker","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;iCAEU,oBAAoB;oCACjB,uBAAuB;6CACpB,iCAAiC;8BAEnC,8BAA8B;qCAC/B,kCAAkC;AAKvE,MAAMM,eAAAA,WAAAA,GAAuDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQT,yCAAAA,EAAyBO,OAAOC;IAC9C,MAAME,oBAAgBP,0CAAAA,EAA6BM;QAEnDP,2DAAAA,EAA+BO;QAC/BL,gDAAAA,EAA4B,kCAAkCK;IAE9D,WAAOR,+CAAAA,EAA4BQ,OAAOC;AAC5C,GAAG;AAEHL,aAAaM,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPicker/SwatchPicker.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport { SwatchPickerContextValue } from '../../contexts/swatchPicker';\n\nexport type SwatchPickerSlots = {\n root: Slot<'div'>;\n};\n\nexport type SwatchPickerOnSelectEventHandler = EventHandler<SwatchPickerOnSelectionChangeData>;\n\nexport type SwatchPickerOnSelectionChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement>> & {\n selectedValue: string;\n selectedSwatch: string;\n};\n\n/**\n * SwatchPicker Props\n */\nexport type SwatchPickerProps = ComponentProps<SwatchPickerSlots> & {\n /**\n * Default selected value\n */\n defaultSelectedValue?: string;\n\n /**\n * Sets the focus behavior for the SwatchPicker.\n *\n * `arrow`\n * This behavior will cycle through all elements inside of the SwatchPicker when pressing the Arrow key.\n *\n * `tab`\n * This behavior will cycle through all elements inside of the SwatchPicker when pressing the Tab key.\n *\n * @default 'arrow'\n */\n focusMode?: 'arrow' | 'tab';\n\n /**\n * Whether SwatchPicker is row or grid\n */\n layout?: 'row' | 'grid';\n\n /**\n * Triggers a callback when the value has been changed\n */\n onSelectionChange?: EventHandler<SwatchPickerOnSelectionChangeData>;\n\n /**\n * Controlled selected value\n */\n selectedValue?: string;\n\n /**\n * Swatch size\n * @defaultvalue 'medium'\n */\n size?: 'extra-small' | 'small' | 'medium' | 'large';\n\n /**\n * Swatch shape\n * @defaultvalue 'square'\n */\n shape?: 'rounded' | 'square' | 'circular';\n\n /**\n * Spacing between swatches\n * @defaultvalue 'medium'\n */\n spacing?: 'small' | 'medium';\n};\n\n/**\n * State used in rendering SwatchPicker\n */\nexport type SwatchPickerState = ComponentState<SwatchPickerSlots> &\n SwatchPickerContextValue &\n Pick<SwatchPickerProps, 'layout' | 'size' | 'shape' | 'spacing'> & {\n isGrid: boolean;\n };\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
SwatchPicker: function() {
return _SwatchPicker.SwatchPicker;
},
renderSwatchPicker_unstable: function() {
return _renderSwatchPicker.renderSwatchPicker_unstable;
},
swatchPickerClassNames: function() {
return _useSwatchPickerStylesstyles.swatchPickerClassNames;
},
useSwatchPickerStyles_unstable: function() {
return _useSwatchPickerStylesstyles.useSwatchPickerStyles_unstable;
},
useSwatchPicker_unstable: function() {
return _useSwatchPicker.useSwatchPicker_unstable;
}
});
const _SwatchPicker = require("./SwatchPicker");
const _renderSwatchPicker = require("./renderSwatchPicker");
const _useSwatchPicker = require("./useSwatchPicker");
const _useSwatchPickerStylesstyles = require("./useSwatchPickerStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPicker/index.ts"],"sourcesContent":["export { SwatchPicker } from './SwatchPicker';\nexport type {\n SwatchPickerOnSelectEventHandler,\n SwatchPickerOnSelectionChangeData,\n SwatchPickerProps,\n SwatchPickerSlots,\n SwatchPickerState,\n} from './SwatchPicker.types';\nexport { renderSwatchPicker_unstable } from './renderSwatchPicker';\nexport { useSwatchPicker_unstable } from './useSwatchPicker';\nexport { swatchPickerClassNames, useSwatchPickerStyles_unstable } from './useSwatchPickerStyles.styles';\n"],"names":["SwatchPicker","renderSwatchPicker_unstable","useSwatchPicker_unstable","swatchPickerClassNames","useSwatchPickerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,0BAAY;;;eAQZC,+CAA2B;;;eAE3BE,mDAAsB;;;eAAEC,2DAA8B;;;eADtDF,yCAAwB;;;8BATJ,iBAAiB;oCAQF,uBAAuB;iCAC1B,oBAAoB;6CACU,iCAAiC"}

View File

@@ -0,0 +1,22 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderSwatchPicker_unstable", {
enumerable: true,
get: function() {
return renderSwatchPicker_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const _swatchPicker = require("../../contexts/swatchPicker");
const renderSwatchPicker_unstable = (state, contextValues)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_swatchPicker.SwatchPickerProvider, {
value: contextValues.swatchPicker,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
children: state.root.children
})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPicker/renderSwatchPicker.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { SwatchPickerProvider } from '../../contexts/swatchPicker';\nimport type { SwatchPickerContextValues } from '../../contexts/swatchPicker';\nimport type { SwatchPickerState, SwatchPickerSlots } from './SwatchPicker.types';\n\n/**\n * Render the final JSX of SwatchPicker\n */\nexport const renderSwatchPicker_unstable = (\n state: SwatchPickerState,\n contextValues: SwatchPickerContextValues,\n): JSXElement => {\n assertSlots<SwatchPickerSlots>(state);\n\n return (\n <SwatchPickerProvider value={contextValues.swatchPicker}>\n <state.root>{state.root.children}</state.root>\n </SwatchPickerProvider>\n );\n};\n"],"names":["assertSlots","SwatchPickerProvider","renderSwatchPicker_unstable","state","contextValues","value","swatchPicker","root","children"],"mappings":";;;;+BAYaE;;;;;;4BAXb,gDAAiD;gCAErB,4BAA4B;8BAEnB,8BAA8B;AAO5D,oCAAoC,CACzCC,OACAC;QAEAJ,2BAAAA,EAA+BG;IAE/B,OAAA,WAAA,OACE,eAAA,EAACF,kCAAAA,EAAAA;QAAqBI,OAAOD,cAAcE,YAAY;kBACrD,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA;sBAAEJ,MAAMI,IAAI,CAACC,QAAQ;;;AAGtC,EAAE"}

View File

@@ -0,0 +1,61 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useSwatchPicker_unstable", {
enumerable: true,
get: function() {
return useSwatchPicker_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactfield = require("@fluentui/react-field");
const _reacttabster = require("@fluentui/react-tabster");
const _reactutilities = require("@fluentui/react-utilities");
const useSwatchPicker_unstable = (props, ref)=>{
// Merge props from surrounding <Field>, if any
props = (0, _reactfield.useFieldControlProps_unstable)(props);
const { focusMode = 'arrow', layout, onSelectionChange, size = 'medium', shape, spacing = 'medium', style, ...rest } = props;
const isGrid = layout === 'grid';
const focusAttributes = (0, _reacttabster.useArrowNavigationGroup)({
circular: true,
axis: isGrid ? 'grid-linear' : 'both',
memorizeCurrent: true
});
const role = isGrid ? 'grid' : 'radiogroup';
const [selectedValue, setSelectedValue] = (0, _reactutilities.useControllableState)({
state: props.selectedValue,
defaultState: props.defaultSelectedValue,
initialState: ''
});
const requestSelectionChange = (0, _reactutilities.useEventCallback)((event, data)=>{
onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(event, {
type: 'click',
event,
selectedValue: data.selectedValue,
selectedSwatch: data.selectedSwatch
});
setSelectedValue(data.selectedValue);
});
return {
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref,
role,
...focusMode === 'arrow' ? focusAttributes : {},
...rest
}), {
elementType: 'div'
}),
isGrid,
requestSelectionChange,
selectedValue,
size,
shape,
spacing
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPicker/useSwatchPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\n\nimport type { SwatchPickerProps, SwatchPickerState } from './SwatchPicker.types';\n\n/**\n * Create the state required to render SwatchPicker.\n *\n * The returned state can be modified with hooks such as useSwatchPickerStyles_unstable,\n * before being passed to renderSwatchPicker_unstable.\n *\n * @param props - props from this instance of SwatchPicker\n * @param ref - reference to root HTMLElement of SwatchPicker\n */\nexport const useSwatchPicker_unstable = (\n props: SwatchPickerProps,\n ref: React.Ref<HTMLDivElement>,\n): SwatchPickerState => {\n // Merge props from surrounding <Field>, if any\n props = useFieldControlProps_unstable(props);\n\n const {\n focusMode = 'arrow',\n layout,\n onSelectionChange,\n size = 'medium',\n shape,\n spacing = 'medium',\n style,\n ...rest\n } = props;\n\n const isGrid = layout === 'grid';\n const focusAttributes = useArrowNavigationGroup({\n circular: true,\n axis: isGrid ? 'grid-linear' : 'both',\n memorizeCurrent: true,\n });\n\n const role = isGrid ? 'grid' : 'radiogroup';\n\n const [selectedValue, setSelectedValue] = useControllableState({\n state: props.selectedValue,\n defaultState: props.defaultSelectedValue,\n initialState: '',\n });\n\n const requestSelectionChange: SwatchPickerState['requestSelectionChange'] = useEventCallback((event, data) => {\n onSelectionChange?.(event, {\n type: 'click',\n event,\n selectedValue: data.selectedValue,\n selectedSwatch: data.selectedSwatch,\n });\n setSelectedValue(data.selectedValue);\n });\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role,\n ...(focusMode === 'arrow' ? focusAttributes : {}),\n ...rest,\n }),\n { elementType: 'div' },\n ),\n isGrid,\n requestSelectionChange,\n selectedValue,\n size,\n shape,\n spacing,\n };\n};\n"],"names":["React","useFieldControlProps_unstable","useArrowNavigationGroup","getIntrinsicElementProps","useControllableState","useEventCallback","slot","useSwatchPicker_unstable","props","ref","focusMode","layout","onSelectionChange","size","shape","spacing","style","rest","isGrid","focusAttributes","circular","axis","memorizeCurrent","role","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","initialState","requestSelectionChange","event","data","type","selectedSwatch","components","root","always","elementType"],"mappings":"AAAA;;;;;+BAmBaO;;;;;;;iEAjBU,QAAQ;4BAEe,wBAAwB;8BAC9B,0BAA0B;gCACqB,4BAA4B;AAa5G,iCAAiC,CACtCC,OACAC;IAEA,+CAA+C;IAC/CD,YAAQP,yCAAAA,EAA8BO;IAEtC,MAAM,EACJE,YAAY,OAAO,EACnBC,MAAM,EACNC,iBAAiB,EACjBC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAU,QAAQ,EAClBC,KAAK,EACL,GAAGC,MACJ,GAAGT;IAEJ,MAAMU,SAASP,WAAW;IAC1B,MAAMQ,kBAAkBjB,yCAAAA,EAAwB;QAC9CkB,UAAU;QACVC,MAAMH,SAAS,gBAAgB;QAC/BI,iBAAiB;IACnB;IAEA,MAAMC,OAAOL,SAAS,SAAS;IAE/B,MAAM,CAACM,eAAeC,iBAAiB,OAAGrB,oCAAAA,EAAqB;QAC7DsB,OAAOlB,MAAMgB,aAAa;QAC1BG,cAAcnB,MAAMoB,oBAAoB;QACxCC,cAAc;IAChB;IAEA,MAAMC,6BAAsEzB,gCAAAA,EAAiB,CAAC0B,OAAOC;QACnGpB,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBmB,OAAO;YACzBE,MAAM;YACNF;YACAP,eAAeQ,KAAKR,aAAa;YACjCU,gBAAgBF,KAAKE,cAAc;QACrC;QACAT,iBAAiBO,KAAKR,aAAa;IACrC;IAEA,OAAO;QACLW,YAAY;YACVC,MAAM;QACR;QACAA,MAAM9B,oBAAAA,CAAK+B,MAAM,KACflC,wCAAAA,EAAyB,OAAO;YAC9BM;YACAc;YACA,GAAIb,cAAc,UAAUS,kBAAkB,CAAC,CAAC;YAChD,GAAGF,IAAI;QACT,IACA;YAAEqB,aAAa;QAAM;QAEvBpB;QACAY;QACAN;QACAX;QACAC;QACAC;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,83 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
swatchPickerClassNames: function() {
return swatchPickerClassNames;
},
useSwatchPickerStyles_unstable: function() {
return useSwatchPickerStyles_unstable;
}
});
const _react = require("@griffel/react");
const swatchPickerClassNames = {
root: 'fui-SwatchPicker'
};
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
Byoj8tv: 0,
uwmqm3: 0,
z189sj: 0,
z8tnut: 0,
B0ocmuz: "f14ufcw5",
mc9l5x: "f22iagw"
},
row: {
Beiy3e4: "f1063pyq"
},
grid: {
Beiy3e4: "f1vx9l62"
},
spacingSmall: {
i8kkvl: 0,
Belr9w4: 0,
rmohyg: "f1t6b6ee"
},
spacingMedium: {
i8kkvl: 0,
Belr9w4: 0,
rmohyg: "f4xv25i"
}
}, {
d: [
[
".f14ufcw5{padding:var(--spacingHorizontalNone) var(--spacingVerticalNone);}",
{
p: -1
}
],
".f22iagw{display:flex;}",
".f1063pyq{flex-direction:row;}",
".f1vx9l62{flex-direction:column;}",
[
".f1t6b6ee{gap:2px;}",
{
p: -1
}
],
[
".f4xv25i{gap:4px;}",
{
p: -1
}
]
]
});
const useSwatchPickerStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const layoutStyle = state.isGrid ? styles.grid : styles.row;
const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
state.root.className = (0, _react.mergeClasses)(swatchPickerClassNames.root, styles.root, layoutStyle, spacingStyle, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useSwatchPickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const swatchPickerClassNames = {\n root: 'fui-SwatchPicker'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n root: {\n padding: `${tokens.spacingHorizontalNone} ${tokens.spacingVerticalNone}`,\n display: 'flex'\n },\n row: {\n flexDirection: 'row'\n },\n grid: {\n flexDirection: 'column'\n },\n spacingSmall: {\n gap: '2px'\n },\n spacingMedium: {\n gap: '4px'\n }\n});\n/**\n * Apply styling to the SwatchPicker slots based on the state\n */ export const useSwatchPickerStyles_unstable = (state)=>{\n 'use no memo';\n const styles = useStyles();\n const layoutStyle = state.isGrid ? styles.grid : styles.row;\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n state.root.className = mergeClasses(swatchPickerClassNames.root, styles.root, layoutStyle, spacingStyle, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","tokens","swatchPickerClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mc9l5x","row","Beiy3e4","grid","spacingSmall","i8kkvl","Belr9w4","rmohyg","spacingMedium","d","p","useSwatchPickerStyles_unstable","state","styles","layoutStyle","isGrid","spacingStyle","spacing","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,sBAAsB;;;IAyBlBmB,8BAA8B;;;;uBA3BN,gBAAgB;AAElD,+BAA+B;IAClClB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,GAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,IAAA,EAAA;QAAAD,OAAA,EAAA;IAAA;IAAAE,YAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,aAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAiBrB,CAAC;AAGS,uCAAwCE,KAAK,IAAG;IACvD,aAAa;IACb,MAAMC,MAAM,GAAGnB,SAAS,CAAC,CAAC;IAC1B,MAAMoB,WAAW,GAAGF,KAAK,CAACG,MAAM,GAAGF,MAAM,CAACV,IAAI,GAAGU,MAAM,CAACZ,GAAG;IAC3D,MAAMe,YAAY,GAAGJ,KAAK,CAACK,OAAO,KAAK,OAAO,GAAGJ,MAAM,CAACT,YAAY,GAAGS,MAAM,CAACL,aAAa;IAC3FI,KAAK,CAACnB,IAAI,CAACyB,SAAS,OAAG5B,mBAAY,EAACE,sBAAsB,CAACC,IAAI,EAAEoB,MAAM,CAACpB,IAAI,EAAEqB,WAAW,EAAEE,YAAY,EAAEJ,KAAK,CAACnB,IAAI,CAACyB,SAAS,CAAC;IAC9H,OAAON,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,52 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
swatchPickerClassNames: function() {
return swatchPickerClassNames;
},
useSwatchPickerStyles_unstable: function() {
return useSwatchPickerStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttheme = require("@fluentui/react-theme");
const swatchPickerClassNames = {
root: 'fui-SwatchPicker'
};
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
root: {
padding: `${_reacttheme.tokens.spacingHorizontalNone} ${_reacttheme.tokens.spacingVerticalNone}`,
display: 'flex'
},
row: {
flexDirection: 'row'
},
grid: {
flexDirection: 'column'
},
spacingSmall: {
gap: '2px'
},
spacingMedium: {
gap: '4px'
}
});
const useSwatchPickerStyles_unstable = (state)=>{
'use no memo';
const styles = useStyles();
const layoutStyle = state.isGrid ? styles.grid : styles.row;
const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
state.root.className = (0, _react.mergeClasses)(swatchPickerClassNames.root, styles.root, layoutStyle, spacingStyle, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPicker/useSwatchPickerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwatchPickerSlots, SwatchPickerState } from './SwatchPicker.types';\nimport { tokens } from '@fluentui/react-theme';\nexport const swatchPickerClassNames: SlotClassNames<SwatchPickerSlots> = {\n root: 'fui-SwatchPicker',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n padding: `${tokens.spacingHorizontalNone} ${tokens.spacingVerticalNone}`,\n display: 'flex',\n },\n row: {\n flexDirection: 'row',\n },\n grid: {\n flexDirection: 'column',\n },\n spacingSmall: { gap: '2px' },\n spacingMedium: { gap: '4px' },\n});\n\n/**\n * Apply styling to the SwatchPicker slots based on the state\n */\nexport const useSwatchPickerStyles_unstable = (state: SwatchPickerState): SwatchPickerState => {\n 'use no memo';\n\n const styles = useStyles();\n const layoutStyle = state.isGrid ? styles.grid : styles.row;\n\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n state.root.className = mergeClasses(\n swatchPickerClassNames.root,\n styles.root,\n layoutStyle,\n spacingStyle,\n state.root.className,\n );\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","swatchPickerClassNames","root","useStyles","padding","spacingHorizontalNone","spacingVerticalNone","display","row","flexDirection","grid","spacingSmall","gap","spacingMedium","useSwatchPickerStyles_unstable","state","styles","layoutStyle","isGrid","spacingStyle","spacing","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaG,sBAAAA;;;IAyBAa,8BAAAA;;;;uBA7B4B,iBAAiB;4BAGnC,wBAAwB;AACxC,+BAAkE;IACvEZ,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJE,SAAS,GAAGJ,kBAAAA,CAAOK,qBAAqB,CAAC,CAAC,EAAEL,kBAAAA,CAAOM,mBAAmB,EAAE;QACxEC,SAAS;IACX;IACAC,KAAK;QACHC,eAAe;IACjB;IACAC,MAAM;QACJD,eAAe;IACjB;IACAE,cAAc;QAAEC,KAAK;IAAM;IAC3BC,eAAe;QAAED,KAAK;IAAM;AAC9B;AAKO,uCAAuC,CAACG;IAC7C;IAEA,MAAMC,SAASb;IACf,MAAMc,cAAcF,MAAMG,MAAM,GAAGF,OAAON,IAAI,GAAGM,OAAOR,GAAG;IAE3D,MAAMW,eAAeJ,MAAMK,OAAO,KAAK,UAAUJ,OAAOL,YAAY,GAAGK,OAAOH,aAAa;IAC3FE,MAAMb,IAAI,CAACmB,SAAS,OAAGtB,mBAAAA,EACrBE,uBAAuBC,IAAI,EAC3Bc,OAAOd,IAAI,EACXe,aACAE,cACAJ,MAAMb,IAAI,CAACmB,SAAS;IAGtB,OAAON;AACT,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "SwatchPickerRow", {
enumerable: true,
get: function() {
return SwatchPickerRow;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useSwatchPickerRow = require("./useSwatchPickerRow");
const _renderSwatchPickerRow = require("./renderSwatchPickerRow");
const _useSwatchPickerRowStylesstyles = require("./useSwatchPickerRowStyles.styles");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const SwatchPickerRow = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useSwatchPickerRow.useSwatchPickerRow_unstable)(props, ref);
(0, _useSwatchPickerRowStylesstyles.useSwatchPickerRowStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useSwatchPickerRowStyles_unstable')(state);
return (0, _renderSwatchPickerRow.renderSwatchPickerRow_unstable)(state);
});
SwatchPickerRow.displayName = 'SwatchPickerRow';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPickerRow/SwatchPickerRow.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useSwatchPickerRow_unstable } from './useSwatchPickerRow';\nimport { renderSwatchPickerRow_unstable } from './renderSwatchPickerRow';\nimport { useSwatchPickerRowStyles_unstable } from './useSwatchPickerRowStyles.styles';\nimport type { SwatchPickerRowProps } from './SwatchPickerRow.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SwatchPickerRow component is used to render a row of swatches.\n */\nexport const SwatchPickerRow: ForwardRefComponent<SwatchPickerRowProps> = React.forwardRef((props, ref) => {\n const state = useSwatchPickerRow_unstable(props, ref);\n\n useSwatchPickerRowStyles_unstable(state);\n useCustomStyleHook_unstable('useSwatchPickerRowStyles_unstable')(state);\n return renderSwatchPickerRow_unstable(state);\n});\n\nSwatchPickerRow.displayName = 'SwatchPickerRow';\n"],"names":["React","useSwatchPickerRow_unstable","renderSwatchPickerRow_unstable","useSwatchPickerRowStyles_unstable","useCustomStyleHook_unstable","SwatchPickerRow","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;oCAEa,uBAAuB;uCACpB,0BAA0B;gDACvB,oCAAoC;qCAE1C,kCAAkC;AAKvE,MAAMK,kBAAAA,WAAAA,GAA6DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,YAAQR,+CAAAA,EAA4BM,OAAOC;QAEjDL,iEAAAA,EAAkCM;QAClCL,gDAAAA,EAA4B,qCAAqCK;IACjE,WAAOP,qDAAAA,EAA+BO;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

View File

@@ -0,0 +1,6 @@
/**
* State used in rendering SwatchPickerRow
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPickerRow/SwatchPickerRow.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type SwatchPickerRowSlots = {\n root: Slot<'div'>;\n};\n\n/**\n * SwatchPickerRow Props\n */\nexport type SwatchPickerRowProps = ComponentProps<SwatchPickerRowSlots>;\n\n/**\n * State used in rendering SwatchPickerRow\n */\nexport type SwatchPickerRowState = ComponentState<SwatchPickerRowSlots> & Pick<SwatchPickerProps, 'spacing'>;\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAA6G"}

View File

@@ -0,0 +1,31 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
SwatchPickerRow: function() {
return _SwatchPickerRow.SwatchPickerRow;
},
renderSwatchPickerRow_unstable: function() {
return _renderSwatchPickerRow.renderSwatchPickerRow_unstable;
},
swatchPickerRowClassNames: function() {
return _useSwatchPickerRowStylesstyles.swatchPickerRowClassNames;
},
useSwatchPickerRowStyles_unstable: function() {
return _useSwatchPickerRowStylesstyles.useSwatchPickerRowStyles_unstable;
},
useSwatchPickerRow_unstable: function() {
return _useSwatchPickerRow.useSwatchPickerRow_unstable;
}
});
const _SwatchPickerRow = require("./SwatchPickerRow");
const _renderSwatchPickerRow = require("./renderSwatchPickerRow");
const _useSwatchPickerRow = require("./useSwatchPickerRow");
const _useSwatchPickerRowStylesstyles = require("./useSwatchPickerRowStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPickerRow/index.ts"],"sourcesContent":["export { SwatchPickerRow } from './SwatchPickerRow';\nexport type { SwatchPickerRowProps, SwatchPickerRowSlots, SwatchPickerRowState } from './SwatchPickerRow.types';\nexport { renderSwatchPickerRow_unstable } from './renderSwatchPickerRow';\nexport { useSwatchPickerRow_unstable } from './useSwatchPickerRow';\nexport { swatchPickerRowClassNames, useSwatchPickerRowStyles_unstable } from './useSwatchPickerRowStyles.styles';\n"],"names":["SwatchPickerRow","renderSwatchPickerRow_unstable","useSwatchPickerRow_unstable","swatchPickerRowClassNames","useSwatchPickerRowStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gCAAe;;;eAEfC,qDAA8B;;;eAE9BE,yDAAyB;;;eAAEC,iEAAiC;;;eAD5DF,+CAA2B;;;iCAHJ,oBAAoB;uCAEL,0BAA0B;oCAC7B,uBAAuB;gDACU,oCAAoC"}

View File

@@ -0,0 +1,16 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderSwatchPickerRow_unstable", {
enumerable: true,
get: function() {
return renderSwatchPickerRow_unstable;
}
});
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
const _reactutilities = require("@fluentui/react-utilities");
const renderSwatchPickerRow_unstable = (state)=>{
(0, _reactutilities.assertSlots)(state);
return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPickerRow/renderSwatchPickerRow.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { SwatchPickerRowState, SwatchPickerRowSlots } from './SwatchPickerRow.types';\n\n/**\n * Render the final JSX of SwatchPickerRow\n */\nexport const renderSwatchPickerRow_unstable = (state: SwatchPickerRowState): JSXElement => {\n assertSlots<SwatchPickerRowSlots>(state);\n return <state.root />;\n};\n"],"names":["assertSlots","renderSwatchPickerRow_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,iCAAiC,CAACC;QAC7CF,2BAAAA,EAAkCE;IAClC,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

View File

@@ -0,0 +1,32 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useSwatchPickerRow_unstable", {
enumerable: true,
get: function() {
return useSwatchPickerRow_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _swatchPicker = require("../../contexts/swatchPicker");
const useSwatchPickerRow_unstable = (props, ref)=>{
const { style, ...rest } = props;
const spacing = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.spacing);
return {
components: {
root: 'div'
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
ref,
role: 'row',
...rest
}), {
elementType: 'div'
}),
spacing
};
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPickerRow/useSwatchPickerRow.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerRowProps, SwatchPickerRowState } from './SwatchPickerRow.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render SwatchPickerRow.\n *\n * The returned state can be modified with hooks such as useSwatchPickerRowStyles_unstable,\n * before being passed to renderSwatchPickerRow_unstable.\n *\n * @param props - props from this instance of SwatchPickerRow\n * @param ref - reference to root HTMLDivElement of SwatchPickerRow\n */\nexport const useSwatchPickerRow_unstable = (\n props: SwatchPickerRowProps,\n ref: React.Ref<HTMLDivElement>,\n): SwatchPickerRowState => {\n const { style, ...rest } = props;\n const spacing = useSwatchPickerContextValue_unstable(ctx => ctx.spacing);\n\n return {\n components: {\n root: 'div',\n },\n root: slot.always(\n getIntrinsicElementProps('div', {\n ref,\n role: 'row',\n ...rest,\n }),\n { elementType: 'div' },\n ),\n spacing,\n };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useSwatchPickerRow_unstable","props","ref","style","rest","spacing","ctx","components","root","always","role","elementType"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACgB,4BAA4B;8BAEtB,8BAA8B;AAW5E,MAAMI,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGH;IAC3B,MAAMI,cAAUN,kDAAAA,EAAqCO,CAAAA,MAAOA,IAAID,OAAO;IAEvE,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMV,oBAAAA,CAAKW,MAAM,KACfZ,wCAAAA,EAAyB,OAAO;YAC9BK;YACAQ,MAAM;YACN,GAAGN,IAAI;QACT,IACA;YAAEO,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}

View File

@@ -0,0 +1,49 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
swatchPickerRowClassNames: function() {
return swatchPickerRowClassNames;
},
useSwatchPickerRowStyles_unstable: function() {
return useSwatchPickerRowStyles_unstable;
}
});
const _react = require("@griffel/react");
const swatchPickerRowClassNames = {
root: 'fui-SwatchPickerRow'
};
/**
* Styles for the root slot
*/ const useResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1xhj18k", null, [
".r1xhj18k{display:flex;flex-direction:row;}"
]);
const useStyles = /*#__PURE__*/ (0, _react.__styles)({
spacingSmall: {
i8kkvl: "f16mnhsx"
},
spacingMedium: {
i8kkvl: "f1q8lukm"
}
}, {
d: [
".f16mnhsx{column-gap:2px;}",
".f1q8lukm{column-gap:4px;}"
]
});
const useSwatchPickerRowStyles_unstable = (state)=>{
'use no memo';
const resetStyles = useResetStyles();
const styles = useStyles();
const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
state.root.className = (0, _react.mergeClasses)(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useSwatchPickerRowStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses, makeStyles } from '@griffel/react';\nexport const swatchPickerRowClassNames = {\n root: 'fui-SwatchPickerRow'\n};\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'row'\n});\nconst useStyles = makeStyles({\n spacingSmall: {\n columnGap: '2px'\n },\n spacingMedium: {\n columnGap: '4px'\n }\n});\n/**\n * Apply styling to the SwatchPickerRow slots based on the state\n */ export const useSwatchPickerRowStyles_unstable = (state)=>{\n 'use no memo';\n const resetStyles = useResetStyles();\n const styles = useStyles();\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n state.root.className = mergeClasses(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","__styles","swatchPickerRowClassNames","root","useResetStyles","useStyles","spacingSmall","i8kkvl","spacingMedium","d","useSwatchPickerRowStyles_unstable","state","resetStyles","styles","spacingStyle","spacing","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECG,yBAAyB;;;qCAmBY;;;;uBApBQ,gBAAgB;AACnE,kCAAkC;IACrCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,cAAc,GAAA,WAAA,OAAGL,oBAAA,EAAA,YAAA,MAAA;IAAA;CAG1B,CAAC;AACF,MAAMM,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAK,YAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,aAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAOjB,CAAC;AAGS,MAAMC,qCAAqCC,KAAK,IAAG;IAC1D,aAAa;IACb,MAAMC,WAAW,GAAGR,cAAc,CAAC,CAAC;IACpC,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;IAC1B,MAAMS,YAAY,GAAGH,KAAK,CAACI,OAAO,KAAK,OAAO,GAAGF,MAAM,CAACP,YAAY,GAAGO,MAAM,CAACL,aAAa;IAC3FG,KAAK,CAACR,IAAI,CAACa,SAAS,OAAGhB,mBAAY,EAACE,yBAAyB,CAACC,IAAI,EAAES,WAAW,EAAEE,YAAY,EAAEH,KAAK,CAACR,IAAI,CAACa,SAAS,CAAC;IACpH,OAAOL,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,45 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
swatchPickerRowClassNames: function() {
return swatchPickerRowClassNames;
},
useSwatchPickerRowStyles_unstable: function() {
return useSwatchPickerRowStyles_unstable;
}
});
const _react = require("@griffel/react");
const swatchPickerRowClassNames = {
root: 'fui-SwatchPickerRow'
};
/**
* Styles for the root slot
*/ const useResetStyles = (0, _react.makeResetStyles)({
display: 'flex',
flexDirection: 'row'
});
const useStyles = (0, _react.makeStyles)({
spacingSmall: {
columnGap: '2px'
},
spacingMedium: {
columnGap: '4px'
}
});
const useSwatchPickerRowStyles_unstable = (state)=>{
'use no memo';
const resetStyles = useResetStyles();
const styles = useStyles();
const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
state.root.className = (0, _react.mergeClasses)(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses, makeStyles } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwatchPickerRowSlots, SwatchPickerRowState } from './SwatchPickerRow.types';\n\nexport const swatchPickerRowClassNames: SlotClassNames<SwatchPickerRowSlots> = {\n root: 'fui-SwatchPickerRow',\n};\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n display: 'flex',\n flexDirection: 'row',\n});\n\nconst useStyles = makeStyles({\n spacingSmall: {\n columnGap: '2px',\n },\n spacingMedium: {\n columnGap: '4px',\n },\n});\n\n/**\n * Apply styling to the SwatchPickerRow slots based on the state\n */\nexport const useSwatchPickerRowStyles_unstable = (state: SwatchPickerRowState): SwatchPickerRowState => {\n 'use no memo';\n\n const resetStyles = useResetStyles();\n const styles = useStyles();\n const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n\n state.root.className = mergeClasses(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","makeStyles","swatchPickerRowClassNames","root","useResetStyles","display","flexDirection","useStyles","spacingSmall","columnGap","spacingMedium","useSwatchPickerRowStyles_unstable","state","resetStyles","styles","spacingStyle","spacing","className"],"mappings":"AAAA;;;;;;;;;;;;IAMaG,yBAAAA;;;qCAwBAS;;;;uBA5B6C,iBAAiB;AAIpE,kCAAwE;IAC7ER,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,qBAAiBL,sBAAAA,EAAgB;IACrCM,SAAS;IACTC,eAAe;AACjB;AAEA,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BO,cAAc;QACZC,WAAW;IACb;IACAC,eAAe;QACbD,WAAW;IACb;AACF;AAKO,MAAME,oCAAoC,CAACC;IAChD;IAEA,MAAMC,cAAcT;IACpB,MAAMU,SAASP;IACf,MAAMQ,eAAeH,MAAMI,OAAO,KAAK,UAAUF,OAAON,YAAY,GAAGM,OAAOJ,aAAa;IAE3FE,MAAMT,IAAI,CAACc,SAAS,OAAGjB,mBAAAA,EAAaE,0BAA0BC,IAAI,EAAEU,aAAaE,cAAcH,MAAMT,IAAI,CAACc,SAAS;IAEnH,OAAOL;AACT,EAAE"}

View File

@@ -0,0 +1,25 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
SwatchPickerProvider: function() {
return _swatchPicker.SwatchPickerProvider;
},
swatchPickerContextDefaultValue: function() {
return _swatchPicker.swatchPickerContextDefaultValue;
},
useSwatchPickerContextValue_unstable: function() {
return _swatchPicker.useSwatchPickerContextValue_unstable;
},
useSwatchPickerContextValues: function() {
return _swatchPicker.useSwatchPickerContextValues;
}
});
const _swatchPicker = require("./swatchPicker");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/index.ts"],"sourcesContent":["export type { SwatchPickerContextValue, SwatchPickerContextValues } from './swatchPicker';\nexport {\n SwatchPickerProvider,\n swatchPickerContextDefaultValue,\n useSwatchPickerContextValue_unstable,\n useSwatchPickerContextValues,\n} from './swatchPicker';\n"],"names":["SwatchPickerProvider","swatchPickerContextDefaultValue","useSwatchPickerContextValue_unstable","useSwatchPickerContextValues"],"mappings":";;;;;;;;;;;;eAEEA,kCAAoB;;;eACpBC,6CAA+B;;;eAC/BC,kDAAoC;;;eACpCC,0CAA4B;;;8BACvB,iBAAiB"}

View File

@@ -0,0 +1,55 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
SwatchPickerProvider: function() {
return SwatchPickerProvider;
},
swatchPickerContextDefaultValue: function() {
return swatchPickerContextDefaultValue;
},
useSwatchPickerContextValue_unstable: function() {
return useSwatchPickerContextValue_unstable;
},
useSwatchPickerContextValues: function() {
return useSwatchPickerContextValues;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactcontextselector = require("@fluentui/react-context-selector");
const useSwatchPickerContextValues = (state)=>{
const { isGrid, size, shape, spacing, requestSelectionChange, selectedValue } = state;
// This context is created with "@fluentui/react-context-selector", these is no sense to memoize it
const swatchPicker = {
isGrid,
size,
shape,
spacing,
selectedValue,
requestSelectionChange
};
return {
swatchPicker
};
};
const swatchPickerContextDefaultValue = {
requestSelectionChange: ()=>{
/*noop*/ },
isGrid: false,
size: 'medium',
shape: 'square',
spacing: 'medium',
selectedValue: undefined
};
const SwatchPickerContext = (0, _reactcontextselector.createContext)(undefined);
const SwatchPickerProvider = SwatchPickerContext.Provider;
const useSwatchPickerContextValue_unstable = (selector)=>(0, _reactcontextselector.useContextSelector)(SwatchPickerContext, (ctx = swatchPickerContextDefaultValue)=>selector(ctx));

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/swatchPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector, Context } from '@fluentui/react-context-selector';\nimport type { SwatchPickerProps, SwatchPickerState } from '../components/SwatchPicker/SwatchPicker.types';\n\n/**\n * The context through which individual color controls communicate with the picker.\n */\nexport type SwatchPickerContextValue = Pick<SwatchPickerProps, 'size' | 'shape' | 'spacing' | 'selectedValue'> & {\n /**\n * Whether layout is grid.\n */\n isGrid: boolean;\n\n /**\n * Callback used by ColorSwatch to request a change on it's selected state\n * Should be used to select ColorSwatch\n *\n * @internal\n */\n requestSelectionChange: (\n event: React.MouseEvent<HTMLButtonElement>,\n data: { selectedValue: string; selectedSwatch: string },\n ) => void;\n};\n\nexport const useSwatchPickerContextValues = (state: SwatchPickerState): SwatchPickerContextValues => {\n const { isGrid, size, shape, spacing, requestSelectionChange, selectedValue } = state;\n\n // This context is created with \"@fluentui/react-context-selector\", these is no sense to memoize it\n const swatchPicker: SwatchPickerContextValue = {\n isGrid,\n size,\n shape,\n spacing,\n selectedValue,\n requestSelectionChange,\n };\n\n return { swatchPicker };\n};\n\nexport const swatchPickerContextDefaultValue: SwatchPickerContextValue = {\n requestSelectionChange: () => {\n /*noop*/\n },\n isGrid: false,\n size: 'medium',\n shape: 'square',\n spacing: 'medium',\n selectedValue: undefined,\n};\n\nexport type SwatchPickerContextValues = {\n swatchPicker: SwatchPickerContextValue;\n};\n\nconst SwatchPickerContext = createContext<SwatchPickerContextValue | undefined>(\n undefined,\n) as Context<SwatchPickerContextValue>;\n\nexport const SwatchPickerProvider = SwatchPickerContext.Provider;\n\nexport const useSwatchPickerContextValue_unstable = <T>(selector: ContextSelector<SwatchPickerContextValue, T>): T =>\n useContextSelector(SwatchPickerContext, (ctx = swatchPickerContextDefaultValue) => selector(ctx));\n"],"names":["React","createContext","useContextSelector","useSwatchPickerContextValues","state","isGrid","size","shape","spacing","requestSelectionChange","selectedValue","swatchPicker","swatchPickerContextDefaultValue","undefined","SwatchPickerContext","SwatchPickerProvider","Provider","useSwatchPickerContextValue_unstable","selector","ctx"],"mappings":"AAAA;;;;;;;;;;;;wBA+Dae;;;mCAnBAH;;;wCAqBAK;;;gCArCAd;;;;;iEA1BU,QAAQ;sCACmB,mCAAmC;AAyB9E,MAAMA,+BAA+B,CAACC;IAC3C,MAAM,EAAEC,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAEC,OAAO,EAAEC,sBAAsB,EAAEC,aAAa,EAAE,GAAGN;IAEhF,mGAAmG;IACnG,MAAMO,eAAyC;QAC7CN;QACAC;QACAC;QACAC;QACAE;QACAD;IACF;IAEA,OAAO;QAAEE;IAAa;AACxB,EAAE;AAEK,MAAMC,kCAA4D;IACvEH,wBAAwB;IACtB,MAAM,GACR;IACAJ,QAAQ;IACRC,MAAM;IACNC,OAAO;IACPC,SAAS;IACTE,eAAeG;AACjB,EAAE;AAMF,MAAMC,0BAAsBb,mCAAAA,EAC1BY;AAGK,MAAME,uBAAuBD,oBAAoBE,QAAQ,CAAC;AAE1D,MAAMC,uCAAuC,CAAIC,eACtDhB,wCAAAA,EAAmBY,qBAAqB,CAACK,MAAMP,+BAA+B,GAAKM,SAASC,MAAM"}

View File

@@ -0,0 +1,112 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
ColorSwatch: function() {
return _ColorSwatch.ColorSwatch;
},
EmptySwatch: function() {
return _EmptySwatch.EmptySwatch;
},
ImageSwatch: function() {
return _ImageSwatch.ImageSwatch;
},
SwatchPicker: function() {
return _SwatchPicker.SwatchPicker;
},
SwatchPickerProvider: function() {
return _contexts.SwatchPickerProvider;
},
SwatchPickerRow: function() {
return _SwatchPickerRow.SwatchPickerRow;
},
colorSwatchClassNames: function() {
return _ColorSwatch.colorSwatchClassNames;
},
emptySwatchClassNames: function() {
return _EmptySwatch.emptySwatchClassNames;
},
imageSwatchClassNames: function() {
return _ImageSwatch.imageSwatchClassNames;
},
renderColorSwatch_unstable: function() {
return _ColorSwatch.renderColorSwatch_unstable;
},
renderEmptySwatch_unstable: function() {
return _EmptySwatch.renderEmptySwatch_unstable;
},
renderImageSwatch_unstable: function() {
return _ImageSwatch.renderImageSwatch_unstable;
},
renderSwatchPickerGrid: function() {
return _renderUtils.renderSwatchPickerGrid;
},
renderSwatchPickerRow_unstable: function() {
return _SwatchPickerRow.renderSwatchPickerRow_unstable;
},
renderSwatchPicker_unstable: function() {
return _SwatchPicker.renderSwatchPicker_unstable;
},
swatchCSSVars: function() {
return _ColorSwatch.swatchCSSVars;
},
swatchPickerClassNames: function() {
return _SwatchPicker.swatchPickerClassNames;
},
swatchPickerContextDefaultValue: function() {
return _contexts.swatchPickerContextDefaultValue;
},
swatchPickerRowClassNames: function() {
return _SwatchPickerRow.swatchPickerRowClassNames;
},
useColorSwatchStyles_unstable: function() {
return _ColorSwatch.useColorSwatchStyles_unstable;
},
useColorSwatch_unstable: function() {
return _ColorSwatch.useColorSwatch_unstable;
},
useEmptySwatchStyles_unstable: function() {
return _EmptySwatch.useEmptySwatchStyles_unstable;
},
useEmptySwatch_unstable: function() {
return _EmptySwatch.useEmptySwatch_unstable;
},
useImageSwatchStyles_unstable: function() {
return _ImageSwatch.useImageSwatchStyles_unstable;
},
useImageSwatch_unstable: function() {
return _ImageSwatch.useImageSwatch_unstable;
},
useSwatchPickerContextValue_unstable: function() {
return _contexts.useSwatchPickerContextValue_unstable;
},
useSwatchPickerContextValues: function() {
return _contexts.useSwatchPickerContextValues;
},
useSwatchPickerRowStyles_unstable: function() {
return _SwatchPickerRow.useSwatchPickerRowStyles_unstable;
},
useSwatchPickerRow_unstable: function() {
return _SwatchPickerRow.useSwatchPickerRow_unstable;
},
useSwatchPickerStyles_unstable: function() {
return _SwatchPicker.useSwatchPickerStyles_unstable;
},
useSwatchPicker_unstable: function() {
return _SwatchPicker.useSwatchPicker_unstable;
}
});
const _SwatchPicker = require("./SwatchPicker");
const _contexts = require("./contexts");
const _ColorSwatch = require("./ColorSwatch");
const _ImageSwatch = require("./ImageSwatch");
const _SwatchPickerRow = require("./SwatchPickerRow");
const _renderUtils = require("./utils/renderUtils");
const _EmptySwatch = require("./EmptySwatch");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n SwatchPicker,\n renderSwatchPicker_unstable,\n useSwatchPickerStyles_unstable,\n useSwatchPicker_unstable,\n swatchPickerClassNames,\n} from './SwatchPicker';\nexport {\n SwatchPickerProvider,\n swatchPickerContextDefaultValue,\n useSwatchPickerContextValue_unstable,\n useSwatchPickerContextValues,\n} from './contexts';\nexport type { SwatchPickerContextValue, SwatchPickerContextValues } from './contexts';\nexport type {\n SwatchPickerProps,\n SwatchPickerSlots,\n SwatchPickerState,\n SwatchPickerOnSelectionChangeData,\n SwatchPickerOnSelectEventHandler,\n} from './SwatchPicker';\nexport {\n ColorSwatch,\n renderColorSwatch_unstable,\n useColorSwatchStyles_unstable,\n useColorSwatch_unstable,\n colorSwatchClassNames,\n swatchCSSVars,\n} from './ColorSwatch';\nexport type { ColorSwatchProps, ColorSwatchSlots, ColorSwatchState } from './ColorSwatch';\nexport {\n ImageSwatch,\n renderImageSwatch_unstable,\n useImageSwatchStyles_unstable,\n useImageSwatch_unstable,\n imageSwatchClassNames,\n} from './ImageSwatch';\nexport type { ImageSwatchProps, ImageSwatchSlots, ImageSwatchState } from './ImageSwatch';\nexport type { SwatchPickerRowProps, SwatchPickerRowSlots, SwatchPickerRowState } from './SwatchPickerRow';\nexport {\n SwatchPickerRow,\n renderSwatchPickerRow_unstable,\n useSwatchPickerRowStyles_unstable,\n useSwatchPickerRow_unstable,\n swatchPickerRowClassNames,\n} from './SwatchPickerRow';\nexport { renderSwatchPickerGrid } from './utils/renderUtils';\nexport type { SwatchProps, SwatchPickerGridProps } from './utils/renderUtils';\nexport {\n EmptySwatch,\n renderEmptySwatch_unstable,\n useEmptySwatchStyles_unstable,\n useEmptySwatch_unstable,\n emptySwatchClassNames,\n} from './EmptySwatch';\nexport type { EmptySwatchProps, EmptySwatchSlots, EmptySwatchState } from './EmptySwatch';\n"],"names":["SwatchPicker","renderSwatchPicker_unstable","useSwatchPickerStyles_unstable","useSwatchPicker_unstable","swatchPickerClassNames","SwatchPickerProvider","swatchPickerContextDefaultValue","useSwatchPickerContextValue_unstable","useSwatchPickerContextValues","ColorSwatch","renderColorSwatch_unstable","useColorSwatchStyles_unstable","useColorSwatch_unstable","colorSwatchClassNames","swatchCSSVars","ImageSwatch","renderImageSwatch_unstable","useImageSwatchStyles_unstable","useImageSwatch_unstable","imageSwatchClassNames","SwatchPickerRow","renderSwatchPickerRow_unstable","useSwatchPickerRowStyles_unstable","useSwatchPickerRow_unstable","swatchPickerRowClassNames","renderSwatchPickerGrid","EmptySwatch","renderEmptySwatch_unstable","useEmptySwatchStyles_unstable","useEmptySwatch_unstable","emptySwatchClassNames"],"mappings":";;;;;;;;;;;IAsBES,WAAW;;;IA2BXiB;uCAAW;;;eAlBXX,wBAAW;;;eA9BXf,0BAAY;;IAOZK,oBAAoB;;;;eAgCpBe,gCAAe;;;eAdfP,kCAAqB;;IA2BrBiB;iDAAqB;;;eAlBrBX,kCAAqB;;IAZrBT,0BAA0B;;;;eA2B1BiB,uCAA0B;;8BAlBA;eAA1BX;;;eAcOS,mCAAsB;;;eAL7BJ,+CAA8B;;;eAvC9BpB,yCAA2B;;;eAyB3Ba,0BAAa;;0BAtBS;eAAtBV;;IAIAE,+BAA+B;;;;eAmC/BkB,0CAAyB;;IApBzBb;yDAA6B;;;eAC7BC,oCAAuB;;;eA0BvBgB,0CAA6B;;IAC7BC;mDAAuB;;;eAnBvBZ,0CAA6B;;2BACN;eAAvBC;;;eAxBAX,8CAAoC;;gCACR;eAA5BC;;IA+BAc;iEAAiC;;;eACjCC,4CAA2B;;;eAxC3BrB,4CAA8B;;;eAC9BC,sCAAwB;;;8BAEnB,iBAAiB;0BAMjB,aAAa;6BAgBb,gBAAgB;6BAQhB,gBAAgB;iCAShB,oBAAoB;6BACY,sBAAsB;6BAQtD,gBAAgB"}

View File

@@ -0,0 +1,43 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "renderSwatchPickerGrid", {
enumerable: true,
get: function() {
return renderSwatchPickerGrid;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _ = require("../");
const renderSwatchPickerGrid = (props)=>{
const { items, columnCount, renderRow, renderSwatch } = props;
const _renderRow = renderRow || (({ children, rowId })=>/*#__PURE__*/ _react.createElement(_.SwatchPickerRow, {
key: rowId
}, children));
const _renderSwatch = renderSwatch || ((item)=>{
var _item_src;
return item.src ? /*#__PURE__*/ _react.createElement(_.ImageSwatch, {
key: item.value,
src: (_item_src = item.src) !== null && _item_src !== void 0 ? _item_src : '',
...item
}) : /*#__PURE__*/ _react.createElement(_.ColorSwatch, {
key: item.value,
color: item.color || '',
...item
});
});
const rowCount = Math.ceil(items.length / columnCount);
const rows = Array.from({
length: rowCount
}, (_, i)=>{
const start = i * columnCount;
const end = start + columnCount;
return items.slice(start, end);
});
return rows.map((row, index)=>_renderRow({
children: row.map(_renderSwatch),
rowId: index
}));
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/renderUtils.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { ColorSwatch, SwatchPickerRow, ImageSwatch } from '../';\nimport type { ColorSwatchProps, ImageSwatchProps } from '../';\n\nexport type SwatchProps = ImageSwatchProps | ColorSwatchProps;\n\nexport type SwatchPickerGridProps = {\n items: SwatchProps[];\n columnCount: number;\n renderRow?: (props: { children: JSXElement[]; rowId: string | number }) => JSXElement;\n renderSwatch?: (item: SwatchProps) => JSXElement;\n};\n\nexport const renderSwatchPickerGrid = (props: SwatchPickerGridProps): JSXElement[] => {\n const { items, columnCount, renderRow, renderSwatch } = props;\n const _renderRow = renderRow || (({ children, rowId }) => <SwatchPickerRow key={rowId}>{children}</SwatchPickerRow>);\n const _renderSwatch =\n renderSwatch ||\n ((item: SwatchProps) =>\n (item as ImageSwatchProps).src ? (\n <ImageSwatch key={item.value} src={(item as ImageSwatchProps).src ?? ''} {...item} />\n ) : (\n <ColorSwatch key={item.value} color={item.color || ''} {...item} />\n ));\n\n const rowCount = Math.ceil(items.length / columnCount);\n const rows = Array.from({ length: rowCount }, (_, i) => {\n const start = i * columnCount;\n const end = start + columnCount;\n return items.slice(start, end);\n });\n\n return rows.map((row, index) => _renderRow({ children: row.map(_renderSwatch), rowId: index }));\n};\n"],"names":["React","ColorSwatch","SwatchPickerRow","ImageSwatch","renderSwatchPickerGrid","props","items","columnCount","renderRow","renderSwatch","_renderRow","children","rowId","key","_renderSwatch","item","src","value","color","rowCount","Math","ceil","length","rows","Array","from","_","i","start","end","slice","map","row","index"],"mappings":";;;;+BAcaI;;;;;;;iEAdU,QAAQ;kBAE2B,MAAM;AAYzD,+BAA+B,CAACC;IACrC,MAAM,EAAEC,KAAK,EAAEC,WAAW,EAAEC,SAAS,EAAEC,YAAY,EAAE,GAAGJ;IACxD,MAAMK,aAAaF,aAAc,CAAA,CAAC,EAAEG,QAAQ,EAAEC,KAAK,EAAE,GAAA,WAAA,GAAK,OAAA,aAAA,CAACV,iBAAAA,EAAAA;YAAgBW,KAAKD;WAAQD,SAAAA,CAA0B;IAClH,MAAMG,gBACJL,gBACC,CAAA,CAACM;YAEqC;eADpCA,KAA0BC,GAAG,GAAA,WAAA,GAC5B,OAAA,aAAA,CAACb,aAAAA,EAAAA;YAAYU,KAAKE,KAAKE,KAAK;YAAED,KAAK,CAAA,YAACD,KAA0BC,GAAAA,AAAG,MAAA,QAA9B,cAAA,KAAA,IAAA,YAAkC;YAAK,GAAGD,IAAI;2BAEjF,OAAA,aAAA,CAACd,aAAAA,EAAAA;YAAYY,KAAKE,KAAKE,KAAK;YAAEC,OAAOH,KAAKG,KAAK,IAAI;YAAK,GAAGH,IAAI;;MACjE;IAEJ,MAAMI,WAAWC,KAAKC,IAAI,CAACf,MAAMgB,MAAM,GAAGf;IAC1C,MAAMgB,OAAOC,MAAMC,IAAI,CAAC;QAAEH,QAAQH;IAAS,GAAG,CAACO,GAAGC;QAChD,MAAMC,QAAQD,IAAIpB;QAClB,MAAMsB,MAAMD,QAAQrB;QACpB,OAAOD,MAAMwB,KAAK,CAACF,OAAOC;IAC5B;IAEA,OAAON,KAAKQ,GAAG,CAAC,CAACC,KAAKC,QAAUvB,WAAW;YAAEC,UAAUqB,IAAID,GAAG,CAACjB;YAAgBF,OAAOqB;QAAM;AAC9F,EAAE"}

View File

@@ -0,0 +1 @@
export { ColorSwatch, colorSwatchClassNames, renderColorSwatch_unstable, swatchCSSVars, useColorSwatchStyles_unstable, useColorSwatch_unstable } from './components/ColorSwatch/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/ColorSwatch.ts"],"sourcesContent":["export type { ColorSwatchProps, ColorSwatchSlots, ColorSwatchState } from './components/ColorSwatch/index';\nexport {\n ColorSwatch,\n colorSwatchClassNames,\n renderColorSwatch_unstable,\n swatchCSSVars,\n useColorSwatchStyles_unstable,\n useColorSwatch_unstable,\n} from './components/ColorSwatch/index';\n"],"names":["ColorSwatch","colorSwatchClassNames","renderColorSwatch_unstable","swatchCSSVars","useColorSwatchStyles_unstable","useColorSwatch_unstable"],"mappings":"AACA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,aAAa,EACbC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}

View File

@@ -0,0 +1 @@
export { EmptySwatch, emptySwatchClassNames, renderEmptySwatch_unstable, useEmptySwatchStyles_unstable, useEmptySwatch_unstable } from './components/EmptySwatch/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/EmptySwatch.ts"],"sourcesContent":["export type { EmptySwatchProps, EmptySwatchSlots, EmptySwatchState } from './components/EmptySwatch/index';\nexport {\n EmptySwatch,\n emptySwatchClassNames,\n renderEmptySwatch_unstable,\n useEmptySwatchStyles_unstable,\n useEmptySwatch_unstable,\n} from './components/EmptySwatch/index';\n"],"names":["EmptySwatch","emptySwatchClassNames","renderEmptySwatch_unstable","useEmptySwatchStyles_unstable","useEmptySwatch_unstable"],"mappings":"AACA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}

View File

@@ -0,0 +1 @@
export { ImageSwatch, imageSwatchClassNames, renderImageSwatch_unstable, useImageSwatchStyles_unstable, useImageSwatch_unstable } from './components/ImageSwatch/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/ImageSwatch.ts"],"sourcesContent":["export type { ImageSwatchProps, ImageSwatchSlots, ImageSwatchState } from './components/ImageSwatch/index';\nexport {\n ImageSwatch,\n imageSwatchClassNames,\n renderImageSwatch_unstable,\n useImageSwatchStyles_unstable,\n useImageSwatch_unstable,\n} from './components/ImageSwatch/index';\n"],"names":["ImageSwatch","imageSwatchClassNames","renderImageSwatch_unstable","useImageSwatchStyles_unstable","useImageSwatch_unstable"],"mappings":"AACA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,6BAA6B,EAC7BC,uBAAuB,QAClB,iCAAiC"}

View File

@@ -0,0 +1 @@
export { SwatchPicker, renderSwatchPicker_unstable, swatchPickerClassNames, useSwatchPickerStyles_unstable, useSwatchPicker_unstable } from './components/SwatchPicker/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/SwatchPicker.ts"],"sourcesContent":["export type {\n SwatchPickerOnSelectEventHandler,\n SwatchPickerOnSelectionChangeData,\n SwatchPickerProps,\n SwatchPickerSlots,\n SwatchPickerState,\n} from './components/SwatchPicker/index';\nexport {\n SwatchPicker,\n renderSwatchPicker_unstable,\n swatchPickerClassNames,\n useSwatchPickerStyles_unstable,\n useSwatchPicker_unstable,\n} from './components/SwatchPicker/index';\n"],"names":["SwatchPicker","renderSwatchPicker_unstable","swatchPickerClassNames","useSwatchPickerStyles_unstable","useSwatchPicker_unstable"],"mappings":"AAOA,SACEA,YAAY,EACZC,2BAA2B,EAC3BC,sBAAsB,EACtBC,8BAA8B,EAC9BC,wBAAwB,QACnB,kCAAkC"}

Some files were not shown because too many files have changed in this diff Show More