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

817
node_modules/@fluentui/react-list/CHANGELOG.md generated vendored Normal file
View File

@@ -0,0 +1,817 @@
# Change Log - @fluentui/react-list
This log was last generated on Wed, 01 Apr 2026 15:50:23 GMT and should not be manually modified.
<!-- Start content -->
## [9.6.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.6.13)
Wed, 01 Apr 2026 15:50:23 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.6.12..@fluentui/react-list_v9.6.13)
### Patches
- Bump @fluentui/react-checkbox to v9.6.0 ([PR #35912](https://github.com/microsoft/fluentui/pull/35912) by beachball)
## [9.6.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.6.12)
Thu, 26 Mar 2026 08:12:54 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.6.11..@fluentui/react-list_v9.6.12)
### Patches
- Bump @fluentui/react-checkbox to v9.5.17 ([PR #35824](https://github.com/microsoft/fluentui/pull/35824) by beachball)
## [9.6.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.6.11)
Wed, 11 Mar 2026 09:22:22 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.6.10..@fluentui/react-list_v9.6.11)
### Patches
- Bump @fluentui/react-checkbox to v9.5.16 ([PR #35859](https://github.com/microsoft/fluentui/pull/35859) by beachball)
## [9.6.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.6.10)
Wed, 25 Feb 2026 13:32:28 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.6.9..@fluentui/react-list_v9.6.10)
### Patches
- Bump @fluentui/react-checkbox to v9.5.15 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
- Bump @fluentui/react-context-selector to v9.2.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-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)
- Bump @fluentui/react-shared-contexts to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
## [9.6.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.6.9)
Thu, 12 Feb 2026 10:46:15 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.6.8..@fluentui/react-list_v9.6.9)
### Patches
- Bump @fluentui/react-checkbox to v9.5.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.6.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.6.8)
Thu, 22 Jan 2026 17:06:58 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.6.7..@fluentui/react-list_v9.6.8)
### Patches
- Bump @fluentui/react-checkbox to v9.5.13 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
- Bump @fluentui/react-context-selector to v9.2.14 ([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-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)
- Bump @fluentui/react-shared-contexts to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
## [9.6.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.6.7)
Wed, 17 Dec 2025 18:10:11 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.6.6..@fluentui/react-list_v9.6.7)
### Patches
- Bump @fluentui/react-checkbox to v9.5.12 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
- Bump @fluentui/react-context-selector to v9.2.13 ([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.6.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.6.6)
Tue, 11 Nov 2025 19:18:25 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.6.5..@fluentui/react-list_v9.6.6)
### Patches
- chore: Bump @griffel/react package. ([PR #35469](https://github.com/microsoft/fluentui/pull/35469) by estebanmu@microsoft.com)
- Bump @fluentui/react-checkbox to v9.5.11 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
- Bump @fluentui/react-context-selector to v9.2.12 ([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-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)
- Bump @fluentui/react-shared-contexts to v9.26.0 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
## [9.6.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.6.5)
Thu, 06 Nov 2025 15:01:25 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.6.4..@fluentui/react-list_v9.6.5)
### Patches
- Bump @fluentui/react-checkbox to v9.5.10 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
- Bump @fluentui/react-context-selector to v9.2.11 ([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.6.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.6.4)
Fri, 31 Oct 2025 16:22:06 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.6.3..@fluentui/react-list_v9.6.4)
### Patches
- Bump @fluentui/react-checkbox to v9.5.9 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
- Bump @fluentui/react-context-selector to v9.2.10 ([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.6.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.6.3)
Tue, 21 Oct 2025 14:16:59 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.6.2..@fluentui/react-list_v9.6.3)
### Patches
- Fix selection becoming broken after re-enabling ([PR #35331](https://github.com/microsoft/fluentui/pull/35331) by jirivyhnalek@microsoft.com)
- Bump @fluentui/react-checkbox to v9.5.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.6.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.6.2)
Wed, 08 Oct 2025 12:04:53 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.6.1..@fluentui/react-list_v9.6.2)
### Patches
- Bump @fluentui/react-checkbox to v9.5.7 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
- Bump @fluentui/react-context-selector to v9.2.9 ([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.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.6.1)
Thu, 02 Oct 2025 15:12:23 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.6.0..@fluentui/react-list_v9.6.1)
### 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-checkbox to v9.5.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
- Bump @fluentui/react-context-selector to v9.2.8 ([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-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)
- Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.6.0)
Mon, 08 Sep 2025 12:51:04 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.5.0..@fluentui/react-list_v9.6.0)
### Minor changes
- Use default cursor when selection is disabled ([PR #35153](https://github.com/microsoft/fluentui/pull/35153) by jirivyhnalek@microsoft.com)
- Bump @fluentui/react-checkbox to v9.5.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
- Bump @fluentui/react-context-selector to v9.2.7 ([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-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)
- Bump @fluentui/react-shared-contexts to v9.25.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
### Patches
- chore: enforce explicit module boundary types ([PR #35080](https://github.com/microsoft/fluentui/pull/35080) 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)
- fix: react 19 type issues ([PR #34864](https://github.com/microsoft/fluentui/pull/34864) by dmytrokirpa@microsoft.com)
## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.5.0)
Thu, 21 Aug 2025 12:25:37 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.4.2..@fluentui/react-list_v9.5.0)
### Minor changes
- Feat: Add support for disabling selection per item ([PR #34851](https://github.com/microsoft/fluentui/pull/34851) by jirivyhnalek@microsoft.com)
- Bump @fluentui/react-checkbox to v9.5.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
- Bump @fluentui/react-context-selector to v9.2.6 ([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-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)
- Bump @fluentui/react-shared-contexts to v9.25.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
## [9.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.4.2)
Thu, 07 Aug 2025 10:03:33 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.4.1..@fluentui/react-list_v9.4.2)
### Patches
- Bump @fluentui/react-checkbox to v9.5.3 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
- Bump @fluentui/react-context-selector to v9.2.5 ([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.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.4.1)
Wed, 30 Jul 2025 13:10:57 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.4.0..@fluentui/react-list_v9.4.1)
### Patches
- Bump @fluentui/react-checkbox to v9.5.2 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
- Bump @fluentui/react-context-selector to v9.2.4 ([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-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)
- Bump @fluentui/react-shared-contexts to v9.24.1 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.4.0)
Mon, 28 Jul 2025 18:48:18 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.3.0..@fluentui/react-list_v9.4.0)
### Minor changes
- fix(react-list): Dont crash in dev mode when navigation mode is changed ([PR #34613](https://github.com/microsoft/fluentui/pull/34613) by jirivyhnalek@microsoft.com)
- Bump @fluentui/react-checkbox to v9.5.1 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
- Bump @fluentui/react-context-selector to v9.2.3 ([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.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.3.0)
Thu, 17 Jul 2025 13:49:40 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.2.7..@fluentui/react-list_v9.3.0)
### Minor changes
- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
- Bump @fluentui/react-checkbox to v9.5.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.2.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.2.7)
Fri, 11 Jul 2025 15:59:24 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.2.6..@fluentui/react-list_v9.2.7)
### Patches
- Bump @fluentui/react-checkbox to v9.4.7 ([PR #34807](https://github.com/microsoft/fluentui/pull/34807) by beachball)
## [9.2.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.2.6)
Fri, 04 Jul 2025 10:02:51 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.2.5..@fluentui/react-list_v9.2.6)
### Patches
- Bump @fluentui/react-checkbox to v9.4.6 ([PR #34457](https://github.com/microsoft/fluentui/pull/34457) by beachball)
## [9.2.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.2.5)
Fri, 27 Jun 2025 13:39:41 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.2.4..@fluentui/react-list_v9.2.5)
### Patches
- Bump @fluentui/react-checkbox to v9.4.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.2.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.2.4)
Thu, 26 Jun 2025 14:11:55 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.2.3..@fluentui/react-list_v9.2.4)
### Patches
- Bump @fluentui/react-checkbox to v9.4.4 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
- Bump @fluentui/react-context-selector to v9.2.2 ([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.2.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.2.3)
Mon, 23 Jun 2025 15:49:48 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.2.2..@fluentui/react-list_v9.2.3)
### Patches
- Bump @fluentui/react-checkbox to v9.4.3 ([PR #34677](https://github.com/microsoft/fluentui/pull/34677) by beachball)
## [9.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.2.2)
Wed, 18 Jun 2025 17:34:00 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.2.1..@fluentui/react-list_v9.2.2)
### Patches
- Bump @fluentui/react-checkbox to v9.4.2 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
- Bump @fluentui/react-context-selector to v9.2.1 ([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-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)
- Bump @fluentui/react-shared-contexts to v9.24.0 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
## [9.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.2.1)
Fri, 13 Jun 2025 12:32:53 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.2.0..@fluentui/react-list_v9.2.1)
### Patches
- Bump @fluentui/react-checkbox to v9.4.1 ([PR #34639](https://github.com/microsoft/fluentui/pull/34639) by beachball)
## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.2.0)
Thu, 12 Jun 2025 09:43:33 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.1.9..@fluentui/react-list_v9.2.0)
### Minor changes
- Bump @fluentui/react-checkbox to v9.4.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
- Bump @fluentui/react-context-selector to v9.2.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.1.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.1.9)
Wed, 11 Jun 2025 22:31:58 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.1.8..@fluentui/react-list_v9.1.9)
### Patches
- Bump @fluentui/react-checkbox to v9.3.9 ([PR #34631](https://github.com/microsoft/fluentui/pull/34631) by beachball)
## [9.1.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.1.8)
Fri, 06 Jun 2025 13:15:17 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.1.7..@fluentui/react-list_v9.1.8)
### Patches
- Bump @fluentui/react-checkbox to v9.3.8 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
- Bump @fluentui/react-context-selector to v9.1.77 ([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.1.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.1.7)
Wed, 14 May 2025 18:49:20 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.1.6..@fluentui/react-list_v9.1.7)
### Patches
- Bump @fluentui/react-checkbox to v9.3.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.1.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.1.6)
Thu, 24 Apr 2025 09:59:45 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.1.5..@fluentui/react-list_v9.1.6)
### Patches
- Bump @fluentui/react-checkbox to v9.3.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.1.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.1.5)
Wed, 16 Apr 2025 19:42:18 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.1.4..@fluentui/react-list_v9.1.5)
### Patches
- Bump @fluentui/react-checkbox to v9.3.5 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
- Bump @fluentui/react-context-selector to v9.1.76 ([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.1.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.1.4)
Tue, 01 Apr 2025 15:08:01 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.1.3..@fluentui/react-list_v9.1.4)
### Patches
- bugfix: ensure external tabster attributes are merged with internals ([PR #34117](https://github.com/microsoft/fluentui/pull/34117) by bernardo.sunderhus@gmail.com)
- Bump @fluentui/react-checkbox to v9.3.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.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.1.3)
Thu, 27 Mar 2025 21:12:51 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.1.2..@fluentui/react-list_v9.1.3)
### Patches
- Bump @fluentui/react-checkbox to v9.3.3 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
- Bump @fluentui/react-context-selector to v9.1.75 ([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-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)
- Bump @fluentui/react-shared-contexts to v9.23.1 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.1.2)
Wed, 19 Mar 2025 15:40:43 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.1.1..@fluentui/react-list_v9.1.2)
### Patches
- Bump @fluentui/react-checkbox to v9.3.2 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
- Bump @fluentui/react-context-selector to v9.1.74 ([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-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)
- Bump @fluentui/react-shared-contexts to v9.23.0 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.1.1)
Tue, 11 Mar 2025 18:58:54 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.1.0..@fluentui/react-list_v9.1.1)
### Patches
- Bump @fluentui/react-checkbox to v9.3.1 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
- Bump @fluentui/react-context-selector to v9.1.73 ([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-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)
- Bump @fluentui/react-shared-contexts to v9.22.0 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.1.0)
Fri, 21 Feb 2025 14:34:05 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.0.2..@fluentui/react-list_v9.1.0)
### Minor changes
- Bump @fluentui/react-checkbox to v9.3.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.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.0.2)
Mon, 27 Jan 2025 20:27:35 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.0.1..@fluentui/react-list_v9.0.2)
### Patches
- Bump @fluentui/react-checkbox to v9.2.47 ([PR #33724](https://github.com/microsoft/fluentui/pull/33724) by beachball)
## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.0.1)
Wed, 22 Jan 2025 14:00:21 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list_v9.0.0..@fluentui/react-list_v9.0.1)
### Patches
- Bump @fluentui/react-checkbox to v9.2.46 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
- Bump @fluentui/react-context-selector to v9.1.72 ([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.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-list_v9.0.0)
Wed, 08 Jan 2025 18:33:34 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.4.4..@fluentui/react-list_v9.0.0)
### Minor changes
- feat: release stable ([PR #33378](https://github.com/microsoft/fluentui/pull/33378) by jirivyhnalek@microsoft.com)
- Bump @fluentui/react-checkbox to v9.2.45 ([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)
## [0.4.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.4.4)
Mon, 16 Dec 2024 16:26:49 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.4.3..@fluentui/react-list-preview_v0.4.4)
### Patches
- Bump @fluentui/react-checkbox to v9.2.44 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
- Bump @fluentui/react-context-selector to v9.1.71 ([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-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)
- Bump @fluentui/react-shared-contexts to v9.21.2 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
## [0.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.4.3)
Mon, 09 Dec 2024 17:38:16 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.4.2..@fluentui/react-list-preview_v0.4.3)
### Patches
- Bump @fluentui/react-checkbox to v9.2.43 ([PR #33431](https://github.com/microsoft/fluentui/pull/33431) by beachball)
## [0.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.4.2)
Fri, 06 Dec 2024 12:53:39 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.4.1..@fluentui/react-list-preview_v0.4.2)
### Patches
- chore: remove usage of "export *" ([PR #33380](https://github.com/microsoft/fluentui/pull/33380) by olfedias@microsoft.com)
- Bump @fluentui/react-checkbox to v9.2.42 ([PR #33372](https://github.com/microsoft/fluentui/pull/33372) by beachball)
- Bump @fluentui/react-context-selector to v9.1.70 ([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-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)
- Bump @fluentui/react-shared-contexts to v9.21.1 ([PR #33372](https://github.com/microsoft/fluentui/pull/33372) by beachball)
## [0.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.4.1)
Mon, 18 Nov 2024 09:44:40 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.4.0..@fluentui/react-list-preview_v0.4.1)
### Patches
- Bump @fluentui/react-checkbox to v9.2.41 ([PR #33229](https://github.com/microsoft/fluentui/pull/33229) by beachball)
## [0.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.4.0)
Mon, 11 Nov 2024 10:00:42 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.3.9..@fluentui/react-list-preview_v0.4.0)
### Minor changes
- Breaking: Render List/ListItem as "div" when in composite nav mode ([PR #33197](https://github.com/microsoft/fluentui/pull/33197) by jirivyhnalek@microsoft.com)
- Bump @fluentui/react-checkbox to v9.2.40 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
- 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/keyboard-keys to v9.0.8 ([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)
- Bump @fluentui/react-shared-contexts to v9.21.0 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
### 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)
## [0.3.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.3.9)
Tue, 15 Oct 2024 17:17:53 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.3.8..@fluentui/react-list-preview_v0.3.9)
### Patches
- Bump @fluentui/react-checkbox to v9.2.39 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
- 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-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)
- Bump @fluentui/react-shared-contexts to v9.20.2 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
## [0.3.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.3.8)
Tue, 08 Oct 2024 22:05:57 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.3.7..@fluentui/react-list-preview_v0.3.8)
### Patches
- Bump @fluentui/react-checkbox to v9.2.38 ([PR #33007](https://github.com/microsoft/fluentui/pull/33007) by beachball)
- Bump @fluentui/react-tabster to v9.22.8 ([PR #33007](https://github.com/microsoft/fluentui/pull/33007) by beachball)
## [0.3.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.3.7)
Mon, 23 Sep 2024 12:40:13 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.3.6..@fluentui/react-list-preview_v0.3.7)
### Patches
- Bump @fluentui/react-checkbox to v9.2.37 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
- 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-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)
- Bump @fluentui/react-shared-contexts to v9.20.1 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
## [0.3.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.3.6)
Tue, 10 Sep 2024 10:19:12 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.3.5..@fluentui/react-list-preview_v0.3.6)
### Patches
- Bump @fluentui/react-checkbox to v9.2.36 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
- 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)
## [0.3.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.3.5)
Thu, 15 Aug 2024 13:49:46 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.3.4..@fluentui/react-list-preview_v0.3.5)
### Patches
- Bump @fluentui/react-checkbox to v9.2.35 ([PR #32313](https://github.com/microsoft/fluentui/pull/32313) by beachball)
- Bump @fluentui/react-tabster to v9.22.5 ([PR #32313](https://github.com/microsoft/fluentui/pull/32313) by beachball)
## [0.3.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.3.4)
Thu, 15 Aug 2024 08:22:11 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.3.3..@fluentui/react-list-preview_v0.3.4)
### Patches
- chore: ensures useMergedTabsterAttributes supports Partial attributes ([PR #32300](https://github.com/microsoft/fluentui/pull/32300) by bernardo.sunderhus@gmail.com)
- Bump @fluentui/react-checkbox to v9.2.34 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
- Bump @fluentui/react-tabster to v9.22.4 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
## [0.3.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.3.3)
Tue, 30 Jul 2024 18:47:35 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.3.2..@fluentui/react-list-preview_v0.3.3)
### Patches
- Bump @fluentui/react-checkbox to v9.2.33 ([PR #32157](https://github.com/microsoft/fluentui/pull/32157) by beachball)
## [0.3.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.3.2)
Tue, 23 Jul 2024 20:13:14 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.3.1..@fluentui/react-list-preview_v0.3.2)
### Patches
- Bump @fluentui/react-checkbox to v9.2.32 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
- 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-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)
- Bump @fluentui/react-shared-contexts to v9.20.0 ([PR #32067](https://github.com/microsoft/fluentui/pull/32067) by beachball)
## [0.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.3.1)
Mon, 15 Jul 2024 17:25:33 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.3.0..@fluentui/react-list-preview_v0.3.1)
### 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-checkbox to v9.2.31 ([PR #31998](https://github.com/microsoft/fluentui/pull/31998) by beachball)
- 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-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)
- Bump @fluentui/react-shared-contexts to v9.19.1 ([PR #31998](https://github.com/microsoft/fluentui/pull/31998) by beachball)
## [0.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.3.0)
Mon, 01 Jul 2024 20:30:52 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.2.9..@fluentui/react-list-preview_v0.3.0)
### Minor changes
- feat: Pass data with value to onAction callback ([PR #31803](https://github.com/microsoft/fluentui/pull/31803) by jirivyhnalek@microsoft.com)
- Bump @fluentui/react-checkbox to v9.2.30 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
- 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)
### Patches
- chore: add eslint react-compiler ([PR #31457](https://github.com/microsoft/fluentui/pull/31457) by seanmonahan@microsoft.com)
## [0.2.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.2.9)
Mon, 17 Jun 2024 07:34:17 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.2.8..@fluentui/react-list-preview_v0.2.9)
### Patches
- Bump @fluentui/react-checkbox to v9.2.29 ([commit](https://github.com/microsoft/fluentui/commit/9ae683c22f2e65d94422a571ad5d3f97d0a77234) by beachball)
- 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)
## [0.2.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.2.8)
Thu, 06 Jun 2024 15:26:34 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.2.7..@fluentui/react-list-preview_v0.2.8)
### Patches
- chore: ensure only state or defaultState is provided on useControllableState hook invocation ([PR #31461](https://github.com/microsoft/fluentui/pull/31461) by bernardo.sunderhus@gmail.com)
- Bump @fluentui/react-checkbox to v9.2.28 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
- 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)
## [0.2.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.2.7)
Thu, 23 May 2024 08:02:44 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.2.6..@fluentui/react-list-preview_v0.2.7)
### Patches
- chore: replace usage of .shorthands() in styles ([PR #31432](https://github.com/microsoft/fluentui/pull/31432) by olfedias@microsoft.com)
- Bump @fluentui/react-checkbox to v9.2.27 ([commit](https://github.com/microsoft/fluentui/commit/03599d609e8310b08c57d1f871cffbf717d79207) by beachball)
- Bump @fluentui/react-tabster to v9.21.4 ([commit](https://github.com/microsoft/fluentui/commit/03599d609e8310b08c57d1f871cffbf717d79207) by beachball)
## [0.2.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.2.6)
Mon, 20 May 2024 12:44:57 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.2.5..@fluentui/react-list-preview_v0.2.6)
### Patches
- chore: bump @griffel/react ([PR #31258](https://github.com/microsoft/fluentui/pull/31258) by olfedias@microsoft.com)
- Bump @fluentui/react-checkbox to v9.2.26 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
- 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-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)
- Bump @fluentui/react-shared-contexts to v9.19.0 ([PR #26682](https://github.com/microsoft/fluentui/pull/26682) by beachball)
## [0.2.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.2.5)
Thu, 16 May 2024 09:25:20 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.2.4..@fluentui/react-list-preview_v0.2.5)
### Patches
- Bump @fluentui/react-checkbox to v9.2.25 ([PR #31390](https://github.com/microsoft/fluentui/pull/31390) by beachball)
## [0.2.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.2.4)
Thu, 09 May 2024 19:35:12 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.2.3..@fluentui/react-list-preview_v0.2.4)
### Patches
- Bump @fluentui/react-checkbox to v9.2.24 ([PR #31321](https://github.com/microsoft/fluentui/pull/31321) by beachball)
- Bump @fluentui/react-tabster to v9.21.2 ([PR #31321](https://github.com/microsoft/fluentui/pull/31321) by beachball)
## [0.2.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.2.3)
Mon, 06 May 2024 12:55:02 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.2.2..@fluentui/react-list-preview_v0.2.3)
### Patches
- Bump @fluentui/react-checkbox to v9.2.23 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
- 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-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)
- Bump @fluentui/react-shared-contexts to v9.18.0 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
## [0.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.2.2)
Thu, 02 May 2024 11:36:44 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.2.1..@fluentui/react-list-preview_v0.2.2)
### Patches
- Bump @fluentui/react-checkbox to v9.2.22 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
- Bump @fluentui/react-tabster to v9.21.0 ([PR #31231](https://github.com/microsoft/fluentui/pull/31231) by beachball)
## [0.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.2.1)
Tue, 23 Apr 2024 08:17:49 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.2.0..@fluentui/react-list-preview_v0.2.1)
### Patches
- Bump @fluentui/react-checkbox to v9.2.21 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
- 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-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)
- Bump @fluentui/react-shared-contexts to v9.17.0 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.2.0)
Wed, 17 Apr 2024 21:53:54 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-list-preview_v0.1.0..@fluentui/react-list-preview_v0.2.0)
### Minor changes
- Tabster 7.1.0. ([PR #30969](https://github.com/microsoft/fluentui/pull/30969) by marata@microsoft.com)
- Bump @fluentui/react-checkbox to v9.2.20 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
- Bump @fluentui/react-tabster to v9.20.0 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
## [0.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-list-preview_v0.1.0)
Thu, 04 Apr 2024 12:08:07 GMT
### Minor changes
- feat: Release preview package ([PR #30898](https://github.com/microsoft/fluentui/pull/30898) by jirivyhnalek@microsoft.com)

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

@@ -0,0 +1,15 @@
@fluentui/react-list
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

5
node_modules/@fluentui/react-list/README.md generated vendored Normal file
View File

@@ -0,0 +1,5 @@
# @fluentui/react-list
**React List components for [Fluent UI React](https://react.fluentui.dev/)**
These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.

153
node_modules/@fluentui/react-list/dist/index.d.ts generated vendored Normal file
View File

@@ -0,0 +1,153 @@
import { Checkbox } from '@fluentui/react-checkbox';
import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
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 { SelectionItemId } from '@fluentui/react-utilities';
import type { SelectionMode as SelectionMode_2 } from '@fluentui/react-utilities';
import type { Slot } from '@fluentui/react-utilities';
import type { SlotClassNames } from '@fluentui/react-utilities';
export declare const List: ForwardRefComponent<ListProps>;
export declare const listClassNames: SlotClassNames<ListSlots>;
declare type ListContextValue = {
selection?: ListSelectionState;
validateListItem: (listItemElement: HTMLElement) => void;
};
declare type ListContextValues = {
listContext: ListContextValue;
synchronousContext: ListSynchronousContextValue;
};
export declare const ListItem: ForwardRefComponent<ListItemProps>;
declare type ListItemActionEvent = CustomEvent<ListItemActionEventDetail>;
declare type ListItemActionEventData = EventData<typeof ListItemActionEventName, ListItemActionEvent> & {
value: ListItemValue;
};
declare interface ListItemActionEventDetail {
originalEvent: React_2.MouseEvent | React_2.KeyboardEvent;
}
declare const ListItemActionEventName = "ListItemAction";
export declare const listItemClassNames: SlotClassNames<ListItemSlots>;
/**
* ListItem Props
*/
export declare type ListItemProps = ComponentProps<ListItemSlots> & {
value?: ListItemValue;
onAction?: EventHandler<ListItemActionEventData>;
disabledSelection?: boolean;
};
export declare type ListItemSlots = {
root: NonNullable<Slot<'li', 'div'>>;
checkmark?: Slot<typeof Checkbox>;
};
/**
* State used in rendering ListItem
*/
export declare type ListItemState = ComponentState<ListItemSlots> & {
selectable: boolean;
navigable: boolean;
disabled?: boolean;
};
declare type ListItemValue = string | number;
declare type ListNavigationMode = 'items' | 'composite';
/**
* List Props
*/
export declare type ListProps = ComponentProps<ListSlots> & {
navigationMode?: ListNavigationMode;
selectionMode?: SelectionMode_2;
selectedItems?: SelectionItemId[];
defaultSelectedItems?: SelectionItemId[];
onSelectionChange?: EventHandler<OnListSelectionChangeData>;
};
declare type ListSelectionState = {
isSelected: (item: string | number) => boolean;
toggleItem: (e: React_2.SyntheticEvent, id: string | number) => void;
deselectItem: (e: React_2.SyntheticEvent, id: string | number) => void;
selectItem: (e: React_2.SyntheticEvent, id: string | number) => void;
clearSelection: (e: React_2.SyntheticEvent) => void;
toggleAllItems: (e: React_2.SyntheticEvent, itemIds: string[] | number[]) => void;
setSelectedItems: React_2.Dispatch<React_2.SetStateAction<Iterable<SelectionItemId>>>;
selectedItems: SelectionItemId[];
};
export declare type ListSlots = {
root: NonNullable<Slot<'ul', 'div' | 'ol'>>;
};
/**
* State used in rendering List
*/
export declare type ListState = ComponentState<ListSlots> & ListContextValue & ListSynchronousContextValue;
declare type ListSynchronousContextValue = {
navigationMode: ListNavigationMode | undefined;
listItemRole: string;
};
declare type OnListSelectionChangeData = EventData<'change', React_2.SyntheticEvent> & {
selectedItems: SelectionItemId[];
};
/**
* Render the final JSX of List
*/
export declare const renderList_unstable: (state: ListState, contextValues: ListContextValues) => JSXElement;
/**
* Render the final JSX of ListItem
*/
export declare const renderListItem_unstable: (state: ListItemState) => JSXElement;
/**
* Create the state required to render List.
*
* The returned state can be modified with hooks such as useListStyles_unstable,
* before being passed to renderList_unstable.
*
* @param props - props from this instance of List
* @param ref - reference to root HTMLElement of List
*/
export declare const useList_unstable: (props: ListProps, ref: React_2.Ref<HTMLDivElement | HTMLUListElement | HTMLOListElement>) => ListState;
/**
* Create the state required to render ListItem.
*
* The returned state can be modified with hooks such as useListItemStyles_unstable,
* before being passed to renderListItem_unstable.
*
* @param props - props from this instance of ListItem
* @param ref - reference to root HTMLLIElement | HTMLDivElementof ListItem
*/
export declare const useListItem_unstable: (props: ListItemProps, ref: React_2.Ref<HTMLLIElement | HTMLDivElement>) => ListItemState;
/**
* Apply styling to the ListItem slots based on the state
*/
export declare const useListItemStyles_unstable: (state: ListItemState) => ListItemState;
/**
* Apply styling to the List slots based on the state
*/
export declare const useListStyles_unstable: (state: ListState) => ListState;
export { }

28
node_modules/@fluentui/react-list/lib-commonjs/List.js generated vendored Normal file
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, {
List: function() {
return _index.List;
},
listClassNames: function() {
return _index.listClassNames;
},
renderList_unstable: function() {
return _index.renderList_unstable;
},
useListStyles_unstable: function() {
return _index.useListStyles_unstable;
},
useList_unstable: function() {
return _index.useList_unstable;
}
});
const _index = require("./components/List/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/List.ts"],"sourcesContent":["export type {\n ListContextValue,\n ListContextValues,\n ListNavigationMode,\n ListProps,\n ListSlots,\n ListState,\n OnListSelectionChangeData,\n} from './components/List/index';\nexport {\n List,\n listClassNames,\n renderList_unstable,\n useListStyles_unstable,\n useList_unstable,\n} from './components/List/index';\n"],"names":["List","listClassNames","renderList_unstable","useListStyles_unstable","useList_unstable"],"mappings":";;;;;;;;;;;;eAUEA,WAAI;;;eACJC,qBAAc;;;eACdC,0BAAmB;;;eACnBC,6BAAsB;;;eACtBC,uBAAgB;;;uBACX,0BAA0B"}

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, {
ListItem: function() {
return _index.ListItem;
},
listItemClassNames: function() {
return _index.listItemClassNames;
},
renderListItem_unstable: function() {
return _index.renderListItem_unstable;
},
useListItemStyles_unstable: function() {
return _index.useListItemStyles_unstable;
},
useListItem_unstable: function() {
return _index.useListItem_unstable;
}
});
const _index = require("./components/ListItem/index");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/ListItem.ts"],"sourcesContent":["export type {\n ListItemActionEventData,\n ListItemProps,\n ListItemSlots,\n ListItemState,\n ListItemValue,\n} from './components/ListItem/index';\nexport {\n ListItem,\n listItemClassNames,\n renderListItem_unstable,\n useListItemStyles_unstable,\n useListItem_unstable,\n} from './components/ListItem/index';\n"],"names":["ListItem","listItemClassNames","renderListItem_unstable","useListItemStyles_unstable","useListItem_unstable"],"mappings":";;;;;;;;;;;;eAQEA,eAAQ;;;eACRC,yBAAkB;;;eAClBC,8BAAuB;;;eACvBC,iCAA0B;;;eAC1BC,2BAAoB;;;uBACf,8BAA8B"}

View File

@@ -0,0 +1,26 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "List", {
enumerable: true,
get: function() {
return List;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useList = require("./useList");
const _renderList = require("./renderList");
const _useListStylesstyles = require("./useListStyles.styles");
const _useListContextValues = require("./useListContextValues");
const List = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useList.useList_unstable)(props, ref);
const contextValues = (0, _useListContextValues.useListContextValues_unstable)(state);
(0, _useListStylesstyles.useListStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useListStyles_unstable')(state);
return (0, _renderList.renderList_unstable)(state, contextValues);
});
List.displayName = 'List';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/List/List.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useList_unstable } from './useList';\nimport { renderList_unstable } from './renderList';\nimport { useListStyles_unstable } from './useListStyles.styles';\nimport type { ListProps } from './List.types';\nimport { useListContextValues_unstable } from './useListContextValues';\n\nexport const List: ForwardRefComponent<ListProps> = React.forwardRef((props, ref) => {\n const state = useList_unstable(props, ref);\n const contextValues = useListContextValues_unstable(state);\n\n useListStyles_unstable(state);\n useCustomStyleHook_unstable('useListStyles_unstable')(state);\n\n return renderList_unstable(state, contextValues);\n});\n\nList.displayName = 'List';\n"],"names":["React","useCustomStyleHook_unstable","useList_unstable","renderList_unstable","useListStyles_unstable","useListContextValues_unstable","List","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;yBAC7C,YAAY;4BACT,eAAe;qCACZ,yBAAyB;sCAElB,yBAAyB;AAEhE,MAAMM,OAAAA,WAAAA,GAAuCN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,YAAQR,yBAAAA,EAAiBM,OAAOC;IACtC,MAAME,oBAAgBN,mDAAAA,EAA8BK;QAEpDN,2CAAAA,EAAuBM;QACvBT,gDAAAA,EAA4B,0BAA0BS;IAEtD,WAAOP,+BAAAA,EAAoBO,OAAOC;AACpC,GAAG;AAEHL,KAAKM,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/List/List.types.ts"],"sourcesContent":["import * as React from 'react';\n\nimport type {\n ComponentProps,\n ComponentState,\n Slot,\n SelectionMode,\n SelectionItemId,\n EventHandler,\n EventData,\n} from '@fluentui/react-utilities';\nimport type { ListSelectionState } from '../../hooks/types';\n\nexport type ListSlots = {\n root: NonNullable<Slot<'ul', 'div' | 'ol'>>;\n};\n\nexport type OnListSelectionChangeData = EventData<'change', React.SyntheticEvent> & {\n selectedItems: SelectionItemId[];\n};\n\nexport type ListNavigationMode = 'items' | 'composite';\n\n/**\n * List Props\n */\nexport type ListProps = ComponentProps<ListSlots> & {\n navigationMode?: ListNavigationMode;\n selectionMode?: SelectionMode;\n selectedItems?: SelectionItemId[];\n defaultSelectedItems?: SelectionItemId[];\n onSelectionChange?: EventHandler<OnListSelectionChangeData>;\n};\n\nexport type ListContextValue = {\n selection?: ListSelectionState;\n validateListItem: (listItemElement: HTMLElement) => void;\n};\n\nexport type ListSynchronousContextValue = {\n navigationMode: ListNavigationMode | undefined;\n listItemRole: string;\n};\n\nexport type ListContextValues = {\n listContext: ListContextValue;\n synchronousContext: ListSynchronousContextValue;\n};\n\n/**\n * State used in rendering List\n */\nexport type ListState = ComponentState<ListSlots> & ListContextValue & ListSynchronousContextValue;\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, {
List: function() {
return _List.List;
},
listClassNames: function() {
return _useListStylesstyles.listClassNames;
},
renderList_unstable: function() {
return _renderList.renderList_unstable;
},
useListStyles_unstable: function() {
return _useListStylesstyles.useListStyles_unstable;
},
useList_unstable: function() {
return _useList.useList_unstable;
}
});
const _List = require("./List");
const _renderList = require("./renderList");
const _useList = require("./useList");
const _useListStylesstyles = require("./useListStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/List/index.ts"],"sourcesContent":["export { List } from './List';\nexport type {\n ListContextValue,\n ListContextValues,\n ListNavigationMode,\n ListProps,\n ListSlots,\n ListState,\n OnListSelectionChangeData,\n} from './List.types';\nexport { renderList_unstable } from './renderList';\nexport { useList_unstable } from './useList';\nexport { listClassNames, useListStyles_unstable } from './useListStyles.styles';\n"],"names":["List","renderList_unstable","useList_unstable","listClassNames","useListStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,UAAI;;;eAYJG,mCAAc;;;eAFdF,+BAAmB;;;eAEHG,2CAAsB;;;eADtCF,yBAAgB;;;sBAXJ,SAAS;4BAUM,eAAe;yBAClB,YAAY;qCACU,yBAAyB"}

View File

@@ -0,0 +1,51 @@
'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, {
ListContextProvider: function() {
return ListContextProvider;
},
ListSynchronousContextProvider: function() {
return ListSynchronousContextProvider;
},
listContextDefaultValue: function() {
return listContextDefaultValue;
},
useListContext_unstable: function() {
return useListContext_unstable;
},
useListSynchronousContext: function() {
return useListSynchronousContext;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reactcontextselector = require("@fluentui/react-context-selector");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const listContextDefaultValue = {
selection: undefined,
validateListItem: ()=>{
/* noop */ }
};
const listContext = (0, _reactcontextselector.createContext)(undefined);
const ListContextProvider = listContext.Provider;
const useListContext_unstable = (selector)=>(0, _reactcontextselector.useContextSelector)(listContext, (ctx = listContextDefaultValue)=>selector(ctx));
// This is a context that uses the standard, React Context API.
// The reason why this exists is that the Fluent UI Context Provider replaces the
// React Context Provider with a custom one that needs a layout effect to update the context value.
// This results in issues with element/role validation, as the ListItem component has not been updated yet
// when the validation happens.
// https://github.com/microsoft/fluentui/issues/34467
const ListSynchronousContext = /*#__PURE__*/ _react.createContext(undefined);
const ListSynchronousContextProvider = ListSynchronousContext.Provider;
const useListSynchronousContext = ()=>_react.useContext(ListSynchronousContext) || {
navigationMode: undefined,
listItemRole: 'listitem'
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/List/listContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { ListSynchronousContextValue, ListContextValue } from './List.types';\nimport * as React from 'react';\n\nexport const listContextDefaultValue: ListContextValue = {\n selection: undefined,\n validateListItem: () => {\n /* noop */\n },\n};\n\nconst listContext = createContext<ListContextValue | undefined>(undefined);\n\nexport const ListContextProvider = listContext.Provider;\n\nexport const useListContext_unstable = <T>(selector: ContextSelector<ListContextValue, T>): T =>\n useContextSelector(listContext, (ctx = listContextDefaultValue) => selector(ctx));\n\n// This is a context that uses the standard, React Context API.\n// The reason why this exists is that the Fluent UI Context Provider replaces the\n// React Context Provider with a custom one that needs a layout effect to update the context value.\n// This results in issues with element/role validation, as the ListItem component has not been updated yet\n// when the validation happens.\n// https://github.com/microsoft/fluentui/issues/34467\nconst ListSynchronousContext = React.createContext<ListSynchronousContextValue | undefined>(undefined);\n\nexport const ListSynchronousContextProvider = ListSynchronousContext.Provider;\nexport const useListSynchronousContext = (): ListSynchronousContextValue =>\n React.useContext(ListSynchronousContext) || {\n navigationMode: undefined,\n listItemRole: 'listitem',\n };\n"],"names":["createContext","useContextSelector","React","listContextDefaultValue","selection","undefined","validateListItem","listContext","ListContextProvider","Provider","useListContext_unstable","selector","ctx","ListSynchronousContext","ListSynchronousContextProvider","useListSynchronousContext","useContext","navigationMode","listItemRole"],"mappings":"AAAA;;;;;;;;;;;;uBAgBaQ;eAAAA;;kCAaAM;;;2BAtBAX;;;2BAWAO;;;IAYAK,yBAAAA;;;;;sCA5BqC,mCAAmC;iEAG9D,QAAQ;AAExB,MAAMZ,0BAA4C;IACvDC,WAAWC;IACXC,kBAAkB;IAChB,QAAQ,GACV;AACF,EAAE;AAEF,MAAMC,kBAAcP,mCAAAA,EAA4CK;AAEzD,4BAA4BE,YAAYE,QAAQ,CAAC;AAEjD,MAAMC,0BAA0B,CAAIC,eACzCV,wCAAAA,EAAmBM,aAAa,CAACK,MAAMT,uBAAuB,GAAKQ,SAASC,MAAM;AAEpF,+DAA+D;AAC/D,iFAAiF;AACjF,mGAAmG;AACnG,0GAA0G;AAC1G,+BAA+B;AAC/B,qDAAqD;AACrD,MAAMC,uCAAyBX,OAAMF,aAAa,CAA0CK;AAErF,MAAMS,iCAAiCD,uBAAuBJ,QAAQ,CAAC;AACvE,kCAAkC,IACvCP,OAAMc,UAAU,CAACH,2BAA2B;QAC1CI,gBAAgBZ;QAChBa,cAAc;IAChB,EAAE"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/List/renderList.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 { ListState, ListSlots, ListContextValues } from './List.types';\nimport { ListContextProvider, ListSynchronousContextProvider } from './listContext';\n\n/**\n * Render the final JSX of List\n */\nexport const renderList_unstable = (state: ListState, contextValues: ListContextValues): JSXElement => {\n assertSlots<ListSlots>(state);\n\n return (\n <ListContextProvider value={contextValues.listContext}>\n <ListSynchronousContextProvider value={contextValues.synchronousContext}>\n <state.root />\n </ListSynchronousContextProvider>\n </ListContextProvider>\n );\n};\n"],"names":["assertSlots","ListContextProvider","ListSynchronousContextProvider","renderList_unstable","state","contextValues","value","listContext","synchronousContext","root"],"mappings":";;;;+BAWaG;;;;;;4BAVb,gDAAiD;gCAErB,4BAA4B;6BAGY,gBAAgB;AAK7E,4BAA4B,CAACC,OAAkBC;QACpDL,2BAAAA,EAAuBI;IAEvB,OAAA,WAAA,OACE,eAAA,EAACH,gCAAAA,EAAAA;QAAoBK,OAAOD,cAAcE,WAAW;kBACnD,WAAA,OAAA,eAAA,EAACL,2CAAAA,EAAAA;YAA+BI,OAAOD,cAAcG,kBAAkB;sBACrE,WAAA,OAAA,eAAA,EAACJ,MAAMK,IAAI,EAAA,CAAA;;;AAInB,EAAE"}

View File

@@ -0,0 +1,79 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useList_unstable", {
enumerable: true,
get: function() {
return useList_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 _reacttabster = require("@fluentui/react-tabster");
const _useListSelection = require("../../hooks/useListSelection");
const _utils = require("../../utils");
const DEFAULT_ROOT_EL_TYPE = 'ul';
const useList_unstable = (props, ref)=>{
const { navigationMode, selectionMode, selectedItems, defaultSelectedItems, onSelectionChange } = props;
const as = props.as || navigationMode === 'composite' ? 'div' : DEFAULT_ROOT_EL_TYPE;
const arrowNavigationAttributes = (0, _reacttabster.useArrowNavigationGroup)({
axis: 'vertical',
memorizeCurrent: true
});
const [selectionState, setSelectionState] = (0, _reactutilities.useControllableState)({
state: selectedItems,
defaultState: defaultSelectedItems,
initialState: []
});
const onChange = (0, _reactutilities.useEventCallback)((e, data)=>{
const selectedItemsAsArray = Array.from(data.selectedItems);
setSelectionState(selectedItemsAsArray);
onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(e, {
event: e,
type: 'change',
selectedItems: selectedItemsAsArray
});
});
const selection = (0, _useListSelection.useListSelection)({
onSelectionChange: onChange,
selectionMode: selectionMode || 'multiselect',
selectedItems: selectionState
});
const listRole = props.role || (0, _utils.calculateListRole)(navigationMode, !!selectionMode);
const listItemRole = (0, _utils.calculateListItemRoleForListRole)(listRole);
const { findAllFocusable } = (0, _reacttabster.useFocusFinders)();
const validateListItem = (0, _reactutilities.useEventCallback)((listItemEl)=>{
if (process.env.NODE_ENV === 'production') {
return;
}
const itemRole = listItemEl.getAttribute('role') || '';
const focusable = findAllFocusable(listItemEl);
(0, _utils.validateProperElementTypes)(as, listItemEl.tagName.toLocaleLowerCase());
(0, _utils.validateProperRolesAreUsed)(listRole, itemRole, !!selectionMode, focusable.length > 0);
(0, _utils.validateGridCellsArePresent)(listRole, listItemEl);
});
return {
components: {
root: as
},
root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, {
ref,
role: listRole,
...selectionMode && {
'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined
},
...arrowNavigationAttributes,
...props
}), {
elementType: as
}),
listItemRole,
validateListItem,
navigationMode,
// only pass down selection state if its handled internally, otherwise just report the events
selection: selectionMode ? selection : undefined
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,32 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useListContextValues_unstable", {
enumerable: true,
get: function() {
return useListContextValues_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
function useListContextValues_unstable(state) {
const { selection, navigationMode, listItemRole, validateListItem } = state;
const listContext = {
selection,
navigationMode,
validateListItem
};
const synchronousContext = _react.useMemo(()=>({
listItemRole,
navigationMode
}), [
listItemRole,
navigationMode
]);
return {
listContext,
synchronousContext
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/List/useListContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ListContextValues, ListState } from './List.types';\n\nexport function useListContextValues_unstable(state: ListState): ListContextValues {\n const { selection, navigationMode, listItemRole, validateListItem } = state;\n\n const listContext = {\n selection,\n navigationMode,\n validateListItem,\n };\n\n const synchronousContext = React.useMemo(\n () => ({\n listItemRole,\n navigationMode,\n }),\n [listItemRole, navigationMode],\n );\n\n return {\n listContext,\n synchronousContext,\n };\n}\n"],"names":["React","useListContextValues_unstable","state","selection","navigationMode","listItemRole","validateListItem","listContext","synchronousContext","useMemo"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;AAGxB,SAASC,8BAA8BC,KAAgB;IAC5D,MAAM,EAAEC,SAAS,EAAEC,cAAc,EAAEC,YAAY,EAAEC,gBAAgB,EAAE,GAAGJ;IAEtE,MAAMK,cAAc;QAClBJ;QACAC;QACAE;IACF;IAEA,MAAME,qBAAqBR,OAAMS,OAAO,CACtC,IAAO,CAAA;YACLJ;YACAD;SACF,CAAA,EACA;QAACC;QAAcD;KAAe;IAGhC,OAAO;QACLG;QACAC;IACF;AACF"}

View File

@@ -0,0 +1,32 @@
'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, {
listClassNames: function() {
return listClassNames;
},
useListStyles_unstable: function() {
return useListStyles_unstable;
}
});
const _react = require("@griffel/react");
const listClassNames = {
root: 'fui-List'
};
const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1m6yby2", null, [
".r1m6yby2{padding:0;margin:0;text-indent:0;list-style-type:none;}"
]);
const useListStyles_unstable = (state)=>{
'use no memo';
const rootStyles = useRootBaseStyles();
state.root.className = (0, _react.mergeClasses)(listClassNames.root, rootStyles, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useListStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nexport const listClassNames = {\n root: 'fui-List'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none'\n});\n/**\n * Apply styling to the List slots based on the state\n */ export const useListStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootBaseStyles();\n state.root.className = mergeClasses(listClassNames.root, rootStyles, state.root.className);\n return state;\n};\n"],"names":["__resetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","useListStyles_unstable","state","rootStyles","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;kBAEe;;;0BAWY;;;;uBAZO,gBAAgB;AACvD,MAAME,iBAAiB;IAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,GAAA,WAAA,OAAGJ,oBAAA,EAAA,YAAA,MAAA;IAAA;CAKzB,CAAC;AAGS,MAAMK,0BAA0BC,KAAK,IAAG;IAC/C,aAAa;IACb,MAAMC,UAAU,GAAGH,iBAAiB,CAAC,CAAC;IACtCE,KAAK,CAACH,IAAI,CAACK,SAAS,OAAGP,mBAAY,EAACC,cAAc,CAACC,IAAI,EAAEI,UAAU,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;IAC1F,OAAOF,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,35 @@
'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, {
listClassNames: function() {
return listClassNames;
},
useListStyles_unstable: function() {
return useListStyles_unstable;
}
});
const _react = require("@griffel/react");
const listClassNames = {
root: 'fui-List'
};
const useRootBaseStyles = (0, _react.makeResetStyles)({
padding: 0,
margin: 0,
textIndent: 0,
listStyleType: 'none'
});
const useListStyles_unstable = (state)=>{
'use no memo';
const rootStyles = useRootBaseStyles();
state.root.className = (0, _react.mergeClasses)(listClassNames.root, rootStyles, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/List/useListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { ListSlots, ListState } from './List.types';\n\nexport const listClassNames: SlotClassNames<ListSlots> = {\n root: 'fui-List',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n});\n\n/**\n * Apply styling to the List slots based on the state\n */\nexport const useListStyles_unstable = (state: ListState): ListState => {\n 'use no memo';\n\n const rootStyles = useRootBaseStyles();\n\n state.root.className = mergeClasses(listClassNames.root, rootStyles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","padding","margin","textIndent","listStyleType","useListStyles_unstable","state","rootStyles","className"],"mappings":"AAAA;;;;;;;;;;;;kBAMaE;;;0BAcAO;;;;uBAjBiC,iBAAiB;AAGxD,MAAMP,iBAA4C;IACvDC,MAAM;AACR,EAAE;AAEF,MAAMC,wBAAoBJ,sBAAAA,EAAgB;IACxCK,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;AACjB;AAKO,MAAMC,yBAAyB,CAACC;IACrC;IAEA,MAAMC,aAAaP;IAEnBM,MAAMP,IAAI,CAACS,SAAS,OAAGX,mBAAAA,EAAaC,eAAeC,IAAI,EAAEQ,YAAYD,MAAMP,IAAI,CAACS,SAAS;IAEzF,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,24 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "ListItem", {
enumerable: true,
get: function() {
return ListItem;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _useListItem = require("./useListItem");
const _renderListItem = require("./renderListItem");
const _useListItemStylesstyles = require("./useListItemStyles.styles");
const ListItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const state = (0, _useListItem.useListItem_unstable)(props, ref);
(0, _useListItemStylesstyles.useListItemStyles_unstable)(state);
(0, _reactsharedcontexts.useCustomStyleHook_unstable)('useListItemStyles_unstable')(state);
return (0, _renderListItem.renderListItem_unstable)(state);
});
ListItem.displayName = 'ListItem';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ListItem/ListItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useListItem_unstable } from './useListItem';\nimport { renderListItem_unstable } from './renderListItem';\nimport { useListItemStyles_unstable } from './useListItemStyles.styles';\nimport type { ListItemProps } from './ListItem.types';\n\nexport const ListItem: ForwardRefComponent<ListItemProps> = React.forwardRef<HTMLLIElement | HTMLDivElement>(\n (props, ref) => {\n const state = useListItem_unstable(props, ref);\n\n useListItemStyles_unstable(state);\n useCustomStyleHook_unstable('useListItemStyles_unstable')(state);\n return renderListItem_unstable(state);\n },\n);\n\nListItem.displayName = 'ListItem';\n"],"names":["React","useCustomStyleHook_unstable","useListItem_unstable","renderListItem_unstable","useListItemStyles_unstable","ListItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCAEa,kCAAkC;6BACzC,gBAAgB;gCACb,mBAAmB;yCAChB,6BAA6B;AAGjE,MAAMK,WAAAA,WAAAA,GAA+CL,OAAMM,UAAU,CAC1E,CAACC,OAAOC;IACN,MAAMC,YAAQP,iCAAAA,EAAqBK,OAAOC;QAE1CJ,mDAAAA,EAA2BK;QAC3BR,gDAAAA,EAA4B,8BAA8BQ;IAC1D,WAAON,uCAAAA,EAAwBM;AACjC,GACA;AAEFJ,SAASK,WAAW,GAAG"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ListItem/ListItem.types.ts"],"sourcesContent":["import { Checkbox } from '@fluentui/react-checkbox';\nimport type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';\nimport { ListItemActionEvent, ListItemActionEventName } from '../../events/ListItemActionEvent';\n\nexport type ListItemSlots = {\n root: NonNullable<Slot<'li', 'div'>>;\n checkmark?: Slot<typeof Checkbox>;\n};\n\nexport type ListItemValue = string | number;\n\nexport type ListItemActionEventData = EventData<typeof ListItemActionEventName, ListItemActionEvent> & {\n value: ListItemValue;\n};\n/**\n * ListItem Props\n */\nexport type ListItemProps = ComponentProps<ListItemSlots> & {\n value?: ListItemValue;\n onAction?: EventHandler<ListItemActionEventData>;\n disabledSelection?: boolean;\n};\n\n/**\n * State used in rendering ListItem\n */\nexport type ListItemState = ComponentState<ListItemSlots> & {\n selectable: boolean;\n navigable: boolean;\n disabled?: boolean;\n};\n"],"names":[],"mappings":"AAuBA;;CAEC,GACD,WAIE"}

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, {
ListItem: function() {
return _ListItem.ListItem;
},
listItemClassNames: function() {
return _useListItemStylesstyles.listItemClassNames;
},
renderListItem_unstable: function() {
return _renderListItem.renderListItem_unstable;
},
useListItemStyles_unstable: function() {
return _useListItemStylesstyles.useListItemStyles_unstable;
},
useListItem_unstable: function() {
return _useListItem.useListItem_unstable;
}
});
const _ListItem = require("./ListItem");
const _renderListItem = require("./renderListItem");
const _useListItem = require("./useListItem");
const _useListItemStylesstyles = require("./useListItemStyles.styles");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ListItem/index.ts"],"sourcesContent":["export { ListItem } from './ListItem';\nexport type {\n ListItemActionEventData,\n ListItemProps,\n ListItemSlots,\n ListItemState,\n ListItemValue,\n} from './ListItem.types';\nexport { renderListItem_unstable } from './renderListItem';\nexport { useListItem_unstable } from './useListItem';\nexport { listItemClassNames, useListItemStyles_unstable } from './useListItemStyles.styles';\n"],"names":["ListItem","renderListItem_unstable","useListItem_unstable","listItemClassNames","useListItemStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kBAAQ;;;eAURG,2CAAkB;;;eAFlBF,uCAAuB;;;eAEHG,mDAA0B;;;eAD9CF,iCAAoB;;;0BATJ,aAAa;gCAQE,mBAAmB;6BACtB,gBAAgB;yCACU,6BAA6B"}

View File

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

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ListItem/renderListItem.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 { ListItemState, ListItemSlots } from './ListItem.types';\n\n/**\n * Render the final JSX of ListItem\n */\nexport const renderListItem_unstable = (state: ListItemState): JSXElement => {\n assertSlots<ListItemSlots>(state);\n\n return (\n <state.root>\n {state.checkmark && <state.checkmark />}\n {state.root.children}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderListItem_unstable","state","root","checkmark","children"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,gCAAgC,CAACC;QACtCF,2BAAAA,EAA2BE;IAE3B,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACRD,MAAME,SAAS,IAAA,WAAA,OAAI,eAAA,EAACF,MAAME,SAAS,EAAA,CAAA;YACnCF,MAAMC,IAAI,CAACE,QAAQ;;;AAG1B,EAAE"}

View File

@@ -0,0 +1,194 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useListItem_unstable", {
enumerable: true,
get: function() {
return useListItem_unstable;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reacttabster = require("@fluentui/react-tabster");
const _reactutilities = require("@fluentui/react-utilities");
const _listContext = require("../List/listContext");
const _keyboardkeys = require("@fluentui/keyboard-keys");
const _reactcheckbox = require("@fluentui/react-checkbox");
const _ListItemActionEvent = require("../../events/ListItemActionEvent");
const DEFAULT_ROOT_EL_TYPE = 'li';
const useListItem_unstable = (props, ref)=>{
const id = (0, _reactutilities.useId)('listItem');
const { value = id, onKeyDown, onClick, tabIndex, role, onAction, disabledSelection } = props;
const toggleItem = (0, _listContext.useListContext_unstable)((ctx)=>{
var _ctx_selection;
return (_ctx_selection = ctx.selection) === null || _ctx_selection === void 0 ? void 0 : _ctx_selection.toggleItem;
});
const { navigationMode, listItemRole } = (0, _listContext.useListSynchronousContext)();
const isSelectionModeEnabled = (0, _listContext.useListContext_unstable)((ctx)=>!!ctx.selection);
var _useListContext_unstable;
const isSelected = (_useListContext_unstable = (0, _listContext.useListContext_unstable)((ctx)=>{
var _ctx_selection;
return (_ctx_selection = ctx.selection) === null || _ctx_selection === void 0 ? void 0 : _ctx_selection.isSelected(value);
})) !== null && _useListContext_unstable !== void 0 ? _useListContext_unstable : false;
const validateListItem = (0, _listContext.useListContext_unstable)((ctx)=>ctx.validateListItem);
const as = props.as || navigationMode === 'composite' ? 'div' : DEFAULT_ROOT_EL_TYPE;
const finalListItemRole = role || listItemRole;
const focusableItems = Boolean(isSelectionModeEnabled || navigationMode || tabIndex === 0);
const rootRef = _react.useRef(null);
const checkmarkRef = _react.useRef(null);
const handleAction = (0, _reactutilities.useEventCallback)((event)=>{
onAction === null || onAction === void 0 ? void 0 : onAction(event, {
event,
value,
type: _ListItemActionEvent.ListItemActionEventName
});
if (event.defaultPrevented) {
return;
}
if (isSelectionModeEnabled && !disabledSelection) {
toggleItem === null || toggleItem === void 0 ? void 0 : toggleItem(event.detail.originalEvent, value);
}
});
_react.useEffect(()=>{
if (rootRef.current) {
validateListItem(rootRef.current);
}
}, [
validateListItem
]);
const triggerAction = (e)=>{
const actionEvent = (0, _ListItemActionEvent.createListItemActionEvent)(e);
handleAction(actionEvent);
e.target.dispatchEvent(actionEvent);
};
const focusableGroupAttrs = (0, _reacttabster.useFocusableGroup)({
ignoreDefaultKeydown: {
Enter: true
},
tabBehavior: 'limited-trap-focus'
});
const handleClick = (0, _reactutilities.useEventCallback)((e)=>{
onClick === null || onClick === void 0 ? void 0 : onClick(e);
if (e.defaultPrevented) {
return;
}
const isFromCheckbox = (0, _reactutilities.elementContains)(checkmarkRef.current, e.target);
if (isFromCheckbox) {
return;
}
triggerAction(e);
});
const handleKeyDown = (0, _reactutilities.useEventCallback)((e)=>{
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
if (e.defaultPrevented) {
return;
}
// If the event is fired from an element inside the list item
if (e.target !== e.currentTarget) {
if (focusableItems) {
// If the items are focusable, we need to handle the arrow keys to move focus to them
switch(e.key){
// If it's one of the Arrows defined, jump out of the list item to focus on the ListItem itself
// The ArrowLeft will only trigger if the target element is the leftmost, otherwise the
// arrowNavigationAttributes handles it and prevents it from bubbling here.
case _keyboardkeys.ArrowLeft:
e.target.dispatchEvent(new _reacttabster.GroupperMoveFocusEvent({
action: _reacttabster.GroupperMoveFocusActions.Escape
}));
break;
case _keyboardkeys.ArrowDown:
case _keyboardkeys.ArrowUp:
e.preventDefault();
// Press ESC on the original target to get focus to the parent group (List)
e.target.dispatchEvent(new _reacttabster.GroupperMoveFocusEvent({
action: _reacttabster.GroupperMoveFocusActions.Escape
}));
// Now dispatch the original key to move up or down in the list
e.currentTarget.dispatchEvent(new _reacttabster.MoverMoveFocusEvent({
key: _reacttabster.MoverKeys[e.key]
}));
}
return;
}
return;
}
switch(e.key){
case _keyboardkeys.Space:
// we have to prevent default here otherwise the space key will scroll the page
e.preventDefault();
// Space always toggles selection (if enabled)
if (isSelectionModeEnabled) {
if (!disabledSelection) {
toggleItem === null || toggleItem === void 0 ? void 0 : toggleItem(e, value);
}
} else {
triggerAction(e);
}
break;
case _keyboardkeys.Enter:
triggerAction(e);
break;
case _keyboardkeys.ArrowRight:
if (navigationMode === 'composite') {
e.target.dispatchEvent(new _reacttabster.GroupperMoveFocusEvent({
action: _reacttabster.GroupperMoveFocusActions.Enter
}));
}
break;
}
});
const onCheckboxChange = (0, _reactutilities.useEventCallback)((e, data)=>{
if (!isSelectionModeEnabled || e.defaultPrevented) {
return;
}
toggleItem === null || toggleItem === void 0 ? void 0 : toggleItem(e, value);
});
const arrowNavigationAttributes = (0, _reacttabster.useArrowNavigationGroup)({
axis: 'horizontal'
});
const tabsterAttributes = (0, _reacttabster.useMergedTabsterAttributes_unstable)(focusableItems ? arrowNavigationAttributes : {}, focusableGroupAttrs, props);
const root = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, {
ref: (0, _reactutilities.useMergedRefs)(rootRef, ref),
tabIndex: focusableItems ? 0 : undefined,
role: finalListItemRole,
id: String(value),
...isSelectionModeEnabled && {
'aria-selected': isSelected,
'aria-disabled': disabledSelection && !onAction || undefined
},
...props,
...tabsterAttributes,
onKeyDown: handleKeyDown,
onClick: isSelectionModeEnabled || onClick || onAction ? handleClick : undefined
}), {
elementType: as
});
const checkmark = _reactutilities.slot.optional(props.checkmark, {
defaultProps: {
checked: isSelected,
tabIndex: -1,
disabled: disabledSelection
},
renderByDefault: isSelectionModeEnabled,
elementType: _reactcheckbox.Checkbox
});
const mergedCheckmarkRef = (0, _reactutilities.useMergedRefs)(checkmark === null || checkmark === void 0 ? void 0 : checkmark.ref, checkmarkRef);
if (checkmark) {
checkmark.onChange = (0, _reactutilities.mergeCallbacks)(checkmark.onChange, onCheckboxChange);
checkmark.ref = mergedCheckmarkRef;
}
const state = {
components: {
root: as,
checkmark: _reactcheckbox.Checkbox
},
root,
checkmark,
disabled: disabledSelection && !onAction,
selectable: isSelectionModeEnabled,
navigable: focusableItems
};
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,76 @@
'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, {
listItemClassNames: function() {
return listItemClassNames;
},
useListItemStyles_unstable: function() {
return useListItemStyles_unstable;
}
});
const _react = require("@griffel/react");
const listItemClassNames = {
root: 'fui-ListItem',
checkmark: 'fui-ListItem__checkmark'
};
const useRootBaseStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rikgcmv", null, [
".rikgcmv{padding:0;margin:0;text-indent:0;list-style-type:none;}",
".rikgcmv[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);}"
]);
const useCheckmarkBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
root: {
qb2dma: "f7nlbp4",
Bpb5tq4: 0,
Biccaaf: 0,
Gaeyjg: 0,
ldoezw: 0,
B6gmeee: "f1bgo3o3"
}
}, {
d: [
".f7nlbp4{align-self:center;}",
[
".f1bgo3o3 .fui-Checkbox__indicator{margin:4px;}",
{
p: -1
}
]
]
});
/**
* Styles for the root slot
*/ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
rootClickableOrSelectable: {
mc9l5x: "f22iagw",
Bceei9c: "f1k6fduh"
},
disabled: {
Bceei9c: "f158kwzp"
}
}, {
d: [
".f22iagw{display:flex;}",
".f1k6fduh{cursor:pointer;}",
".f158kwzp{cursor:default;}"
]
});
const useListItemStyles_unstable = (state)=>{
'use no memo';
const rootBaseStyles = useRootBaseStyles();
const checkmarkBaseStyles = useCheckmarkBaseStyles();
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickableOrSelectable, state.disabled && styles.disabled, state.root.className);
if (state.checkmark) {
state.checkmark.className = (0, _react.mergeClasses)(listItemClassNames.checkmark, checkmarkBaseStyles.root, state.checkmark.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["useListItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const listItemClassNames = {\n root: 'fui-ListItem',\n checkmark: 'fui-ListItem__checkmark'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium\n }, {\n selector: 'focus'\n })\n});\nconst useCheckmarkBaseStyles = makeStyles({\n root: {\n alignSelf: 'center',\n '& .fui-Checkbox__indicator': {\n margin: '4px'\n }\n }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n rootClickableOrSelectable: {\n display: 'flex',\n cursor: 'pointer'\n },\n disabled: {\n cursor: 'default'\n }\n});\n/**\n * Apply styling to the ListItem slots based on the state\n */ export const useListItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const checkmarkBaseStyles = useCheckmarkBaseStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickableOrSelectable, state.disabled && styles.disabled, state.root.className);\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(listItemClassNames.checkmark, checkmarkBaseStyles.root, state.checkmark.className);\n }\n return state;\n};\n"],"names":["__styles","__resetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","checkmark","useRootBaseStyles","useCheckmarkBaseStyles","qb2dma","Bpb5tq4","Biccaaf","Gaeyjg","ldoezw","B6gmeee","d","p","useStyles","rootClickableOrSelectable","mc9l5x","Bceei9c","disabled","useListItemStyles_unstable","state","rootBaseStyles","checkmarkBaseStyles","styles","className","selectable","navigable"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,kBAAkB;;;8BAqCY;eAA1BkB;;;uBAxCyC,gBAAgB;AAGnE,2BAA2B;IAC9BjB,IAAI,EAAE,cAAc;IACpBC,SAAS,EAAE;AACf,CAAC;AACD,MAAMC,iBAAiB,GAAA,WAAA,OAAGP,oBAAA,EAAA,WAAA,MAAA;IAAA;IAAA;CAWzB,CAAC;AACF,MAAMQ,sBAAsB,GAAA,WAAA,OAAGT,eAAA,EAAA;IAAAM,IAAA,EAAA;QAAAI,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAO9B,CAAC;AACF;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGlB,eAAA,EAAA;IAAAmB,yBAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,QAAA,EAAA;QAAAD,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAL,CAAA,EAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAQrB,CAAC;AAGS,oCAAoCQ,KAAK,IAAG;IACnD,aAAa;IACb,MAAMC,cAAc,GAAGjB,iBAAiB,CAAC,CAAC;IAC1C,MAAMkB,mBAAmB,GAAGjB,sBAAsB,CAAC,CAAC;IACpD,MAAMkB,MAAM,GAAGT,SAAS,CAAC,CAAC;IAC1BM,KAAK,CAAClB,IAAI,CAACsB,SAAS,OAAG1B,mBAAY,EAACG,kBAAkB,CAACC,IAAI,EAAEmB,cAAc,EAAE,CAACD,KAAK,CAACK,UAAU,IAAIL,KAAK,CAACM,SAAAA,AAAS,KAAKH,MAAM,CAACR,yBAAyB,EAAEK,KAAK,CAACF,QAAQ,IAAIK,MAAM,CAACL,QAAQ,EAAEE,KAAK,CAAClB,IAAI,CAACsB,SAAS,CAAC;IAChN,IAAIJ,KAAK,CAACjB,SAAS,EAAE;QACjBiB,KAAK,CAACjB,SAAS,CAACqB,SAAS,OAAG1B,mBAAY,EAACG,kBAAkB,CAACE,SAAS,EAAEmB,mBAAmB,CAACpB,IAAI,EAAEkB,KAAK,CAACjB,SAAS,CAACqB,SAAS,CAAC;IAC/H;IACA,OAAOJ,KAAK;AAChB,CAAC"}

View File

@@ -0,0 +1,68 @@
'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, {
listItemClassNames: function() {
return listItemClassNames;
},
useListItemStyles_unstable: function() {
return useListItemStyles_unstable;
}
});
const _react = require("@griffel/react");
const _reacttabster = require("@fluentui/react-tabster");
const _reacttheme = require("@fluentui/react-theme");
const listItemClassNames = {
root: 'fui-ListItem',
checkmark: 'fui-ListItem__checkmark'
};
const useRootBaseStyles = (0, _react.makeResetStyles)({
padding: 0,
margin: 0,
textIndent: 0,
listStyleType: 'none',
...(0, _reacttabster.createCustomFocusIndicatorStyle)({
outline: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorStrokeFocus2}`,
borderRadius: _reacttheme.tokens.borderRadiusMedium
}, {
selector: 'focus'
})
});
const useCheckmarkBaseStyles = (0, _react.makeStyles)({
root: {
alignSelf: 'center',
'& .fui-Checkbox__indicator': {
margin: '4px'
}
}
});
/**
* Styles for the root slot
*/ const useStyles = (0, _react.makeStyles)({
rootClickableOrSelectable: {
display: 'flex',
cursor: 'pointer'
},
disabled: {
cursor: 'default'
}
});
const useListItemStyles_unstable = (state)=>{
'use no memo';
const rootBaseStyles = useRootBaseStyles();
const checkmarkBaseStyles = useCheckmarkBaseStyles();
const styles = useStyles();
state.root.className = (0, _react.mergeClasses)(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickableOrSelectable, state.disabled && styles.disabled, state.root.className);
if (state.checkmark) {
state.checkmark.className = (0, _react.mergeClasses)(listItemClassNames.checkmark, checkmarkBaseStyles.root, state.checkmark.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ListItem/useListItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { ListItemSlots, ListItemState } from './ListItem.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const listItemClassNames: SlotClassNames<ListItemSlots> = {\n root: 'fui-ListItem',\n checkmark: 'fui-ListItem__checkmark',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle(\n {\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n },\n { selector: 'focus' },\n ),\n});\n\nconst useCheckmarkBaseStyles = makeStyles({\n root: {\n alignSelf: 'center',\n\n '& .fui-Checkbox__indicator': { margin: '4px' },\n },\n});\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n rootClickableOrSelectable: {\n display: 'flex',\n cursor: 'pointer',\n },\n\n disabled: {\n cursor: 'default',\n },\n});\n\n/**\n * Apply styling to the ListItem slots based on the state\n */\nexport const useListItemStyles_unstable = (state: ListItemState): ListItemState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n const checkmarkBaseStyles = useCheckmarkBaseStyles();\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n listItemClassNames.root,\n rootBaseStyles,\n (state.selectable || state.navigable) && styles.rootClickableOrSelectable,\n state.disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(\n listItemClassNames.checkmark,\n checkmarkBaseStyles.root,\n state.checkmark.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","checkmark","useRootBaseStyles","padding","margin","textIndent","listStyleType","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","useCheckmarkBaseStyles","alignSelf","useStyles","rootClickableOrSelectable","display","cursor","disabled","useListItemStyles_unstable","state","rootBaseStyles","checkmarkBaseStyles","styles","className","selectable","navigable"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,kBAAAA;;;IA2CAqB,0BAAAA;;;;uBAhD6C,iBAAiB;8BAC3B,0BAA0B;4BAEnD,wBAAwB;AAExC,2BAA0D;IAC/DpB,MAAM;IACNC,WAAW;AACb,EAAE;AAEF,MAAMC,wBAAoBP,sBAAAA,EAAgB;IACxCQ,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;IACf,OAAGT,6CAAAA,EACD;QACEU,SAAS,GAAGT,kBAAAA,CAAOU,gBAAgB,CAAC,OAAO,EAAEV,kBAAAA,CAAOW,iBAAiB,EAAE;QACvEC,cAAcZ,kBAAAA,CAAOa,kBAAkB;IACzC,GACA;QAAEC,UAAU;IAAQ,EACrB;AACH;AAEA,MAAMC,6BAAyBnB,iBAAAA,EAAW;IACxCM,MAAM;QACJc,WAAW;QAEX,8BAA8B;YAAEV,QAAQ;QAAM;IAChD;AACF;AACA;;CAEC,GACD,MAAMW,gBAAYrB,iBAAAA,EAAW;IAC3BsB,2BAA2B;QACzBC,SAAS;QACTC,QAAQ;IACV;IAEAC,UAAU;QACRD,QAAQ;IACV;AACF;AAKO,mCAAmC,CAACG;IACzC;IAEA,MAAMC,iBAAiBpB;IACvB,MAAMqB,sBAAsBV;IAC5B,MAAMW,SAAST;IAEfM,MAAMrB,IAAI,CAACyB,SAAS,OAAG7B,mBAAAA,EACrBG,mBAAmBC,IAAI,EACvBsB,gBACCD,CAAAA,MAAMK,UAAU,IAAIL,MAAMM,SAAAA,AAAQ,KAAMH,OAAOR,yBAAyB,EACzEK,MAAMF,QAAQ,IAAIK,OAAOL,QAAQ,EACjCE,MAAMrB,IAAI,CAACyB,SAAS;IAGtB,IAAIJ,MAAMpB,SAAS,EAAE;QACnBoB,MAAMpB,SAAS,CAACwB,SAAS,OAAG7B,mBAAAA,EAC1BG,mBAAmBE,SAAS,EAC5BsB,oBAAoBvB,IAAI,EACxBqB,MAAMpB,SAAS,CAACwB,SAAS;IAE7B;IAEA,OAAOJ;AACT,EAAE"}

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, {
ListItemActionEventName: function() {
return ListItemActionEventName;
},
createListItemActionEvent: function() {
return createListItemActionEvent;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const ListItemActionEventName = 'ListItemAction';
const createListItemActionEvent = (originalEvent)=>new CustomEvent(ListItemActionEventName, {
cancelable: true,
bubbles: true,
detail: {
originalEvent
}
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/events/ListItemActionEvent.ts"],"sourcesContent":["import * as React from 'react';\n\nexport const ListItemActionEventName = 'ListItemAction';\n\nexport interface ListItemActionEventDetail {\n originalEvent: React.MouseEvent | React.KeyboardEvent;\n}\n\nexport type ListItemActionEvent = CustomEvent<ListItemActionEventDetail>;\n\nexport const createListItemActionEvent = (\n originalEvent: React.MouseEvent | React.KeyboardEvent,\n): CustomEvent<ListItemActionEventDetail> =>\n new CustomEvent<ListItemActionEventDetail>(ListItemActionEventName, {\n cancelable: true,\n bubbles: true,\n detail: { originalEvent },\n });\n"],"names":["React","ListItemActionEventName","createListItemActionEvent","originalEvent","CustomEvent","cancelable","bubbles","detail"],"mappings":";;;;;;;;;;;2BAEaC;;;6BAQAC;;;;;iEAVU,QAAQ;AAExB,MAAMD,0BAA0B,iBAAiB;AAQjD,MAAMC,4BAA4B,CACvCC,gBAEA,IAAIC,YAAuCH,yBAAyB;QAClEI,YAAY;QACZC,SAAS;QACTC,QAAQ;YAAEJ;QAAc;IAC1B,GAAG"}

View File

@@ -0,0 +1,11 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useListSelection", {
enumerable: true,
get: function() {
return _useListSelection.useListSelection;
}
});
const _useListSelection = require("./useListSelection");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/index.ts"],"sourcesContent":["export { useListSelection } from './useListSelection';\n"],"names":["useListSelection"],"mappings":";;;;;;;eAASA,kCAAgB;;;kCAAQ,qBAAqB"}

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/hooks/types.ts"],"sourcesContent":["import { SelectionItemId } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nexport type ListSelectionState = {\n isSelected: (item: string | number) => boolean;\n toggleItem: (e: React.SyntheticEvent, id: string | number) => void;\n deselectItem: (e: React.SyntheticEvent, id: string | number) => void;\n selectItem: (e: React.SyntheticEvent, id: string | number) => void;\n clearSelection: (e: React.SyntheticEvent) => void;\n toggleAllItems: (e: React.SyntheticEvent, itemIds: string[] | number[]) => void;\n setSelectedItems: React.Dispatch<React.SetStateAction<Iterable<SelectionItemId>>>;\n selectedItems: SelectionItemId[];\n};\n"],"names":["React"],"mappings":";;;;;iEACuB,QAAQ"}

View File

@@ -0,0 +1,53 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useListSelection", {
enumerable: true,
get: function() {
return useListSelection;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reactutilities = require("@fluentui/react-utilities");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
function useListSelection(options = {
selectionMode: 'multiselect'
}) {
const { selectionMode, defaultSelectedItems, onSelectionChange } = options;
const [selectedItems, setSelectedItems] = (0, _reactutilities.useControllableState)({
state: options.selectedItems,
defaultState: defaultSelectedItems,
initialState: []
});
const [selected, selectionMethods] = (0, _reactutilities.useSelection)({
selectionMode,
defaultSelectedItems,
selectedItems,
onSelectionChange: (e, data)=>{
setSelectedItems(data.selectedItems);
onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(e, data);
}
});
const toggleItem = (0, _reactutilities.useEventCallback)((e, itemId)=>selectionMethods.toggleItem(e, itemId));
const toggleAllItems = (0, _reactutilities.useEventCallback)((e, itemIds)=>{
selectionMethods.toggleAllItems(e, itemIds);
});
const deselectItem = (0, _reactutilities.useEventCallback)((e, itemId)=>selectionMethods.deselectItem(e, itemId));
const selectItem = (0, _reactutilities.useEventCallback)((e, itemId)=>selectionMethods.selectItem(e, itemId));
const clearSelection = (0, _reactutilities.useEventCallback)((e)=>selectionMethods.clearItems(e));
const selectedArray = _react.useMemo(()=>Array.from(selected), [
selected
]);
return {
selectedItems: selectedArray,
toggleItem,
toggleAllItems,
deselectItem,
selectItem,
setSelectedItems,
isSelected: (id)=>selectionMethods.isSelected(id),
clearSelection
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/useListSelection.tsx"],"sourcesContent":["'use client';\n\nimport { SelectionHookParams, useControllableState, useEventCallback, useSelection } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { ListSelectionState } from './types';\n\nexport function useListSelection(options: SelectionHookParams = { selectionMode: 'multiselect' }): ListSelectionState {\n const { selectionMode, defaultSelectedItems, onSelectionChange } = options;\n\n const [selectedItems, setSelectedItems] = useControllableState({\n state: options.selectedItems,\n defaultState: defaultSelectedItems,\n initialState: [],\n });\n\n const [selected, selectionMethods] = useSelection({\n selectionMode,\n defaultSelectedItems,\n selectedItems,\n onSelectionChange: (e, data) => {\n setSelectedItems(data.selectedItems);\n onSelectionChange?.(e, data);\n },\n });\n\n const toggleItem: ListSelectionState['toggleItem'] = useEventCallback((e, itemId) =>\n selectionMethods.toggleItem(e, itemId),\n );\n\n const toggleAllItems: ListSelectionState['toggleAllItems'] = useEventCallback((e, itemIds) => {\n selectionMethods.toggleAllItems(e, itemIds);\n });\n\n const deselectItem: ListSelectionState['deselectItem'] = useEventCallback((e, itemId: string | number) =>\n selectionMethods.deselectItem(e, itemId),\n );\n\n const selectItem: ListSelectionState['selectItem'] = useEventCallback((e, itemId: string | number) =>\n selectionMethods.selectItem(e, itemId),\n );\n\n const clearSelection: ListSelectionState['clearSelection'] = useEventCallback(e => selectionMethods.clearItems(e));\n\n const selectedArray = React.useMemo(() => Array.from(selected), [selected]);\n\n return {\n selectedItems: selectedArray,\n toggleItem,\n toggleAllItems,\n deselectItem,\n selectItem,\n setSelectedItems,\n isSelected: (id: string | number) => selectionMethods.isSelected(id),\n clearSelection,\n };\n}\n"],"names":["useControllableState","useEventCallback","useSelection","React","useListSelection","options","selectionMode","defaultSelectedItems","onSelectionChange","selectedItems","setSelectedItems","state","defaultState","initialState","selected","selectionMethods","e","data","toggleItem","itemId","toggleAllItems","itemIds","deselectItem","selectItem","clearSelection","clearItems","selectedArray","useMemo","Array","from","isSelected","id"],"mappings":"AAAA;;;;;+BAMgBI;;;;;;;gCAJ0E,4BAA4B;iEAC/F,QAAQ;AAGxB,0BAA0BC,UAA+B;IAAEC,eAAe;AAAc,CAAC;IAC9F,MAAM,EAAEA,aAAa,EAAEC,oBAAoB,EAAEC,iBAAiB,EAAE,GAAGH;IAEnE,MAAM,CAACI,eAAeC,iBAAiB,GAAGV,wCAAAA,EAAqB;QAC7DW,OAAON,QAAQI,aAAa;QAC5BG,cAAcL;QACdM,cAAc,EAAE;IAClB;IAEA,MAAM,CAACC,UAAUC,iBAAiB,OAAGb,4BAAAA,EAAa;QAChDI;QACAC;QACAE;QACAD,mBAAmB,CAACQ,GAAGC;YACrBP,iBAAiBO,KAAKR,aAAa;YACnCD,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,kBAAoBQ,GAAGC;QACzB;IACF;IAEA,MAAMC,iBAA+CjB,gCAAAA,EAAiB,CAACe,GAAGG,SACxEJ,iBAAiBG,UAAU,CAACF,GAAGG;IAGjC,MAAMC,qBAAuDnB,gCAAAA,EAAiB,CAACe,GAAGK;QAChFN,iBAAiBK,cAAc,CAACJ,GAAGK;IACrC;IAEA,MAAMC,mBAAmDrB,gCAAAA,EAAiB,CAACe,GAAGG,SAC5EJ,iBAAiBO,YAAY,CAACN,GAAGG;IAGnC,MAAMI,iBAA+CtB,gCAAAA,EAAiB,CAACe,GAAGG,SACxEJ,iBAAiBQ,UAAU,CAACP,GAAGG;IAGjC,MAAMK,qBAAuDvB,gCAAAA,EAAiBe,CAAAA,IAAKD,iBAAiBU,UAAU,CAACT;IAE/G,MAAMU,gBAAgBvB,OAAMwB,OAAO,CAAC,IAAMC,MAAMC,IAAI,CAACf,WAAW;QAACA;KAAS;IAE1E,OAAO;QACLL,eAAeiB;QACfR;QACAE;QACAE;QACAC;QACAb;QACAoB,YAAY,CAACC,KAAwBhB,iBAAiBe,UAAU,CAACC;QACjEP;IACF;AACF"}

View File

@@ -0,0 +1,44 @@
"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, {
List: function() {
return _List.List;
},
ListItem: function() {
return _ListItem.ListItem;
},
listClassNames: function() {
return _List.listClassNames;
},
listItemClassNames: function() {
return _ListItem.listItemClassNames;
},
renderListItem_unstable: function() {
return _ListItem.renderListItem_unstable;
},
renderList_unstable: function() {
return _List.renderList_unstable;
},
useListItemStyles_unstable: function() {
return _ListItem.useListItemStyles_unstable;
},
useListItem_unstable: function() {
return _ListItem.useListItem_unstable;
},
useListStyles_unstable: function() {
return _List.useListStyles_unstable;
},
useList_unstable: function() {
return _List.useList_unstable;
}
});
const _List = require("./List");
const _ListItem = require("./ListItem");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { List, listClassNames, renderList_unstable, useListStyles_unstable, useList_unstable } from './List';\n\nexport type { ListProps, ListSlots, ListState } from './List';\nexport {\n ListItem,\n listItemClassNames,\n renderListItem_unstable,\n useListItemStyles_unstable,\n useListItem_unstable,\n} from './ListItem';\nexport type { ListItemProps, ListItemSlots, ListItemState } from './ListItem';\n"],"names":["List","listClassNames","renderList_unstable","useListStyles_unstable","useList_unstable","ListItem","listItemClassNames","renderListItem_unstable","useListItemStyles_unstable","useListItem_unstable"],"mappings":";;;;;;;;;;;IAASA;yBAAI;;IAIXK;iCAAQ;;;eAJKJ,oBAAc;;sBAKT;eAAlBK;;;eACAC,iCAAuB;;;eANML,yBAAmB;;;eAOhDM,oCAA0B;;;eAC1BC,8BAAoB;;;eAR8BN,4BAAsB;;;eAAEC,sBAAgB;;;sBAAQ,SAAS;0BAStG,aAAa"}

View File

@@ -0,0 +1,26 @@
/**
* Calculate the role for the list item based on the list role.
* @param listRole - the role of the list
* @returns proper role for the list item
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "calculateListItemRoleForListRole", {
enumerable: true,
get: function() {
return calculateListItemRoleForListRole;
}
});
const calculateListItemRoleForListRole = (listRole)=>{
switch(listRole){
case 'list':
return 'listitem';
case 'listbox':
return 'option';
case 'grid':
return 'row';
default:
return 'listitem';
}
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/calculateListItemRoleForListRole.ts"],"sourcesContent":["/**\n * Calculate the role for the list item based on the list role.\n * @param listRole - the role of the list\n * @returns proper role for the list item\n */\nexport const calculateListItemRoleForListRole = (listRole: string): string => {\n switch (listRole) {\n case 'list':\n return 'listitem';\n case 'listbox':\n return 'option';\n case 'grid':\n return 'row';\n default:\n return 'listitem';\n }\n};\n"],"names":["calculateListItemRoleForListRole","listRole"],"mappings":"AAAA;;;;CAIC,GACD;;;;;;;;;;AAAO,MAAMA,mCAAmC,CAACC;IAC/C,OAAQA;QACN,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT,KAAK;YACH,OAAO;QACT;YACE,OAAO;IACX;AACF,EAAE"}

View File

@@ -0,0 +1,24 @@
/**
* Calculate the role for the list based on the navigation mode and selectable state
* @param navigationMode - the navigation mode of the list
* @param selectable - whether the list is selectable
* @returns 'grid' if navigationMode is 'composite', otherwise 'listbox' if selectable or 'list' if not
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "calculateListRole", {
enumerable: true,
get: function() {
return calculateListRole;
}
});
const calculateListRole = (navigationMode, selectable)=>{
if (navigationMode === 'composite') {
return 'grid';
} else if (selectable) {
return 'listbox';
} else {
return 'list';
}
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/calculateListRole.ts"],"sourcesContent":["import { ListNavigationMode } from '../List';\n\n/**\n * Calculate the role for the list based on the navigation mode and selectable state\n * @param navigationMode - the navigation mode of the list\n * @param selectable - whether the list is selectable\n * @returns 'grid' if navigationMode is 'composite', otherwise 'listbox' if selectable or 'list' if not\n */\n\nexport const calculateListRole = (\n navigationMode: ListNavigationMode | undefined,\n selectable: boolean,\n): 'grid' | 'listbox' | 'list' => {\n if (navigationMode === 'composite') {\n return 'grid';\n } else if (selectable) {\n return 'listbox';\n } else {\n return 'list';\n }\n};\n"],"names":["calculateListRole","navigationMode","selectable"],"mappings":"AAEA;;;;;CAKC,GAED;;;;;;;;;;AAAO,MAAMA,oBAAoB,CAC/BC,gBACAC;IAEA,IAAID,mBAAmB,aAAa;QAClC,OAAO;IACT,OAAO,IAAIC,YAAY;QACrB,OAAO;IACT,OAAO;QACL,OAAO;IACT;AACF,EAAE"}

View File

@@ -0,0 +1,32 @@
"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, {
calculateListItemRoleForListRole: function() {
return _calculateListItemRoleForListRole.calculateListItemRoleForListRole;
},
calculateListRole: function() {
return _calculateListRole.calculateListRole;
},
validateGridCellsArePresent: function() {
return _validateGridCellsArePresent.validateGridCellsArePresent;
},
validateProperElementTypes: function() {
return _validateProperElementTypes.validateProperElementTypes;
},
validateProperRolesAreUsed: function() {
return _validateProperRolesAreUsed.validateProperRolesAreUsed;
}
});
const _calculateListRole = require("./calculateListRole");
const _validateProperElementTypes = require("./validateProperElementTypes");
const _validateProperRolesAreUsed = require("./validateProperRolesAreUsed");
const _calculateListItemRoleForListRole = require("./calculateListItemRoleForListRole");
const _validateGridCellsArePresent = require("./validateGridCellsArePresent");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/index.ts"],"sourcesContent":["export { calculateListRole } from './calculateListRole';\nexport { validateProperElementTypes } from './validateProperElementTypes';\nexport { validateProperRolesAreUsed } from './validateProperRolesAreUsed';\nexport { calculateListItemRoleForListRole } from './calculateListItemRoleForListRole';\nexport { validateGridCellsArePresent } from './validateGridCellsArePresent';\n"],"names":["calculateListRole","validateProperElementTypes","validateProperRolesAreUsed","calculateListItemRoleForListRole","validateGridCellsArePresent"],"mappings":";;;;;;;;;;;;eAGSG,kEAAgC;;;eAHhCH,oCAAiB;;;eAIjBI,wDAA2B;;;eAH3BH,sDAA0B;;;eAC1BC,sDAA0B;;;mCAFD,sBAAsB;4CACb,+BAA+B;4CAC/B,+BAA+B;kDACzB,qCAAqC;6CAC1C,gCAAgC"}

View File

@@ -0,0 +1,26 @@
/**
* Validates that grid cells are present in a grid list item. This is necessary for proper screen reader support.
* If grid cells are not present and we're not running in production mode, a warning will be logged to the console.
* @param listRole - The role of the list
* @param listItemEl - The list item element
* @returns
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "validateGridCellsArePresent", {
enumerable: true,
get: function() {
return validateGridCellsArePresent;
}
});
const validateGridCellsArePresent = (listRole, listItemEl)=>{
if (listRole !== 'grid') {
return;
}
const gridCells = listItemEl.querySelectorAll(':scope > [role="gridcell"]');
if (gridCells.length === 0) {
//eslint-disable-next-line no-console
console.warn(`@fluentui/react-list [useList]:\nList items in List with "grid" role (which is automatically assigned when navigationMode is set to "composite") must contain at least one "gridcell" as direct child of <ListItem /> for proper screen reader support.`, `Ideally, each focus target should be in it's own "gridcell", which is a direct child of <ListItem />.\n`);
}
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/validateGridCellsArePresent.ts"],"sourcesContent":["/**\n * Validates that grid cells are present in a grid list item. This is necessary for proper screen reader support.\n * If grid cells are not present and we're not running in production mode, a warning will be logged to the console.\n * @param listRole - The role of the list\n * @param listItemEl - The list item element\n * @returns\n */\nexport const validateGridCellsArePresent = (listRole: string, listItemEl: HTMLElement): void => {\n if (listRole !== 'grid') {\n return;\n }\n\n const gridCells = listItemEl.querySelectorAll(':scope > [role=\"gridcell\"]');\n if (gridCells.length === 0) {\n //eslint-disable-next-line no-console\n console.warn(\n `@fluentui/react-list [useList]:\\nList items in List with \"grid\" role (which is automatically assigned when navigationMode is set to \"composite\") must contain at least one \"gridcell\" as direct child of <ListItem /> for proper screen reader support.`,\n `Ideally, each focus target should be in it's own \"gridcell\", which is a direct child of <ListItem />.\\n`,\n );\n }\n};\n"],"names":["validateGridCellsArePresent","listRole","listItemEl","gridCells","querySelectorAll","length","console","warn"],"mappings":"AAAA;;;;;;CAMC,GACD;;;;;;;;;;AAAO,MAAMA,8BAA8B,CAACC,UAAkBC;IAC5D,IAAID,aAAa,QAAQ;QACvB;IACF;IAEA,MAAME,YAAYD,WAAWE,gBAAgB,CAAC;IAC9C,IAAID,UAAUE,MAAM,KAAK,GAAG;QAC1B,qCAAqC;QACrCC,QAAQC,IAAI,CACV,CAAC,uPAAuP,CAAC,EACzP,CAAC,uGAAuG,CAAC;IAE7G;AACF,EAAE"}

View File

@@ -0,0 +1,22 @@
/**
* Validates that the List and ListItem elements are compatible
* @param listRenderedAs - the type of the parent element
* @param listItemRenderedAs - the type of the child element
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "validateProperElementTypes", {
enumerable: true,
get: function() {
return validateProperElementTypes;
}
});
function validateProperElementTypes(listRenderedAs, listItemRenderedAs) {
if (listItemRenderedAs === 'div' && listRenderedAs !== 'div') {
throw new Error('ListItem cannot be rendered as a div when its parent is not a div.');
}
if (listItemRenderedAs === 'li' && listRenderedAs === 'div') {
throw new Error('ListItem cannot be rendered as a li when its parent is a div.');
}
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/validateProperElementTypes.ts"],"sourcesContent":["/**\n * Validates that the List and ListItem elements are compatible\n * @param listRenderedAs - the type of the parent element\n * @param listItemRenderedAs - the type of the child element\n */\nexport function validateProperElementTypes(listRenderedAs?: string, listItemRenderedAs?: string): void {\n if (listItemRenderedAs === 'div' && listRenderedAs !== 'div') {\n throw new Error('ListItem cannot be rendered as a div when its parent is not a div.');\n }\n if (listItemRenderedAs === 'li' && listRenderedAs === 'div') {\n throw new Error('ListItem cannot be rendered as a li when its parent is a div.');\n }\n}\n"],"names":["validateProperElementTypes","listRenderedAs","listItemRenderedAs","Error"],"mappings":"AAAA;;;;CAIC,GACD;;;;;;;;;;AAAO,SAASA,2BAA2BC,cAAuB,EAAEC,kBAA2B;IAC7F,IAAIA,uBAAuB,SAASD,mBAAmB,OAAO;QAC5D,MAAM,IAAIE,MAAM;IAClB;IACA,IAAID,uBAAuB,QAAQD,mBAAmB,OAAO;QAC3D,MAAM,IAAIE,MAAM;IAClB;AACF"}

View File

@@ -0,0 +1,46 @@
/**
* Validate that the proper roles are used for the given combination of roles and states.
* If the roles are invalid and we're not running in production mode, an warning will be logged to the console.
*
* @param role - the role of the list
* @param listItemRole - the role of the list item
* @param hasSelection - whether the list has selection enabled
* @param hasFocusableChildren - whether the list has focusable children
* @returns
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "validateProperRolesAreUsed", {
enumerable: true,
get: function() {
return validateProperRolesAreUsed;
}
});
const validateProperRolesAreUsed = (role, listItemRole, hasSelection, hasFocusableChildren)=>{
// Explode when the pair of roles is invalid
if (role === 'list' && listItemRole !== 'listitem') {
throw new Error('When the List role is "list", ListItem role must be "listitem".');
}
if (role === 'listbox' && listItemRole !== 'option') {
throw new Error('When the List role is "listbox", ListItem role must be "option".');
}
if (role === 'grid' && listItemRole !== 'row') {
throw new Error('When the List role is "grid", ListItem role must be "row".');
}
const expectedRole = (()=>{
if (hasFocusableChildren) {
return 'grid';
} else {
if (hasSelection) {
return 'listbox';
} else {
return 'list';
}
}
})();
if (role !== expectedRole) {
/* eslint-disable-next-line no-console */ console.warn(`@fluentui/react-list [useList]:\nThe role "${role}" does not match the expected role "${expectedRole}".\nPlease use the "navigationMode" property for automatic role assignment and keyboard navigation.\nIf you are using this role intentionally, make sure to verify screen reader support.
`);
}
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/validateProperRolesAreUsed.ts"],"sourcesContent":["/**\n * Validate that the proper roles are used for the given combination of roles and states.\n * If the roles are invalid and we're not running in production mode, an warning will be logged to the console.\n *\n * @param role - the role of the list\n * @param listItemRole - the role of the list item\n * @param hasSelection - whether the list has selection enabled\n * @param hasFocusableChildren - whether the list has focusable children\n * @returns\n */\nexport const validateProperRolesAreUsed = (\n role: string,\n listItemRole: string,\n hasSelection: boolean,\n hasFocusableChildren: boolean,\n): void => {\n // Explode when the pair of roles is invalid\n if (role === 'list' && listItemRole !== 'listitem') {\n throw new Error('When the List role is \"list\", ListItem role must be \"listitem\".');\n }\n if (role === 'listbox' && listItemRole !== 'option') {\n throw new Error('When the List role is \"listbox\", ListItem role must be \"option\".');\n }\n if (role === 'grid' && listItemRole !== 'row') {\n throw new Error('When the List role is \"grid\", ListItem role must be \"row\".');\n }\n\n const expectedRole = (() => {\n if (hasFocusableChildren) {\n return 'grid';\n } else {\n if (hasSelection) {\n return 'listbox';\n } else {\n return 'list';\n }\n }\n })();\n\n if (role !== expectedRole) {\n /* eslint-disable-next-line no-console */\n console.warn(`@fluentui/react-list [useList]:\\nThe role \"${role}\" does not match the expected role \"${expectedRole}\".\\nPlease use the \"navigationMode\" property for automatic role assignment and keyboard navigation.\\nIf you are using this role intentionally, make sure to verify screen reader support.\n `);\n }\n};\n"],"names":["validateProperRolesAreUsed","role","listItemRole","hasSelection","hasFocusableChildren","Error","expectedRole","console","warn"],"mappings":"AAAA;;;;;;;;;CASC,GACD;;;;;;;;;;AAAO,MAAMA,6BAA6B,CACxCC,MACAC,cACAC,cACAC;IAEA,4CAA4C;IAC5C,IAAIH,SAAS,UAAUC,iBAAiB,YAAY;QAClD,MAAM,IAAIG,MAAM;IAClB;IACA,IAAIJ,SAAS,aAAaC,iBAAiB,UAAU;QACnD,MAAM,IAAIG,MAAM;IAClB;IACA,IAAIJ,SAAS,UAAUC,iBAAiB,OAAO;QAC7C,MAAM,IAAIG,MAAM;IAClB;IAEA,MAAMC,eAAgB;QACpB,IAAIF,sBAAsB;YACxB,OAAO;QACT,OAAO;YACL,IAAID,cAAc;gBAChB,OAAO;YACT,OAAO;gBACL,OAAO;YACT;QACF;KACF,CAAA;IAEA,IAAIF,SAASK,cAAc;QACzB,uCAAuC,GACvCC,QAAQC,IAAI,CAAC,CAAC,2CAA2C,EAAEP,KAAK,oCAAoC,EAAEK,aAAa;IACnH,CAAC;IACH;AACF,EAAE"}

1
node_modules/@fluentui/react-list/lib/List.js generated vendored Normal file
View File

@@ -0,0 +1 @@
export { List, listClassNames, renderList_unstable, useListStyles_unstable, useList_unstable } from './components/List/index';

1
node_modules/@fluentui/react-list/lib/List.js.map generated vendored Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/List.ts"],"sourcesContent":["export type {\n ListContextValue,\n ListContextValues,\n ListNavigationMode,\n ListProps,\n ListSlots,\n ListState,\n OnListSelectionChangeData,\n} from './components/List/index';\nexport {\n List,\n listClassNames,\n renderList_unstable,\n useListStyles_unstable,\n useList_unstable,\n} from './components/List/index';\n"],"names":["List","listClassNames","renderList_unstable","useListStyles_unstable","useList_unstable"],"mappings":"AASA,SACEA,IAAI,EACJC,cAAc,EACdC,mBAAmB,EACnBC,sBAAsB,EACtBC,gBAAgB,QACX,0BAA0B"}

1
node_modules/@fluentui/react-list/lib/ListItem.js generated vendored Normal file
View File

@@ -0,0 +1 @@
export { ListItem, listItemClassNames, renderListItem_unstable, useListItemStyles_unstable, useListItem_unstable } from './components/ListItem/index';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/ListItem.ts"],"sourcesContent":["export type {\n ListItemActionEventData,\n ListItemProps,\n ListItemSlots,\n ListItemState,\n ListItemValue,\n} from './components/ListItem/index';\nexport {\n ListItem,\n listItemClassNames,\n renderListItem_unstable,\n useListItemStyles_unstable,\n useListItem_unstable,\n} from './components/ListItem/index';\n"],"names":["ListItem","listItemClassNames","renderListItem_unstable","useListItemStyles_unstable","useListItem_unstable"],"mappings":"AAOA,SACEA,QAAQ,EACRC,kBAAkB,EAClBC,uBAAuB,EACvBC,0BAA0B,EAC1BC,oBAAoB,QACf,8BAA8B"}

View File

@@ -0,0 +1,15 @@
'use client';
import * as React from 'react';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
import { useList_unstable } from './useList';
import { renderList_unstable } from './renderList';
import { useListStyles_unstable } from './useListStyles.styles';
import { useListContextValues_unstable } from './useListContextValues';
export const List = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useList_unstable(props, ref);
const contextValues = useListContextValues_unstable(state);
useListStyles_unstable(state);
useCustomStyleHook_unstable('useListStyles_unstable')(state);
return renderList_unstable(state, contextValues);
});
List.displayName = 'List';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/List/List.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useList_unstable } from './useList';\nimport { renderList_unstable } from './renderList';\nimport { useListStyles_unstable } from './useListStyles.styles';\nimport type { ListProps } from './List.types';\nimport { useListContextValues_unstable } from './useListContextValues';\n\nexport const List: ForwardRefComponent<ListProps> = React.forwardRef((props, ref) => {\n const state = useList_unstable(props, ref);\n const contextValues = useListContextValues_unstable(state);\n\n useListStyles_unstable(state);\n useCustomStyleHook_unstable('useListStyles_unstable')(state);\n\n return renderList_unstable(state, contextValues);\n});\n\nList.displayName = 'List';\n"],"names":["React","useCustomStyleHook_unstable","useList_unstable","renderList_unstable","useListStyles_unstable","useListContextValues_unstable","List","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,sBAAsB,QAAQ,yBAAyB;AAEhE,SAASC,6BAA6B,QAAQ,yBAAyB;AAEvE,OAAO,MAAMC,qBAAuCN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,QAAQR,iBAAiBM,OAAOC;IACtC,MAAME,gBAAgBN,8BAA8BK;IAEpDN,uBAAuBM;IACvBT,4BAA4B,0BAA0BS;IAEtD,OAAOP,oBAAoBO,OAAOC;AACpC,GAAG;AAEHL,KAAKM,WAAW,GAAG"}

View File

@@ -0,0 +1 @@
import * as React from 'react';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/List/List.types.ts"],"sourcesContent":["import * as React from 'react';\n\nimport type {\n ComponentProps,\n ComponentState,\n Slot,\n SelectionMode,\n SelectionItemId,\n EventHandler,\n EventData,\n} from '@fluentui/react-utilities';\nimport type { ListSelectionState } from '../../hooks/types';\n\nexport type ListSlots = {\n root: NonNullable<Slot<'ul', 'div' | 'ol'>>;\n};\n\nexport type OnListSelectionChangeData = EventData<'change', React.SyntheticEvent> & {\n selectedItems: SelectionItemId[];\n};\n\nexport type ListNavigationMode = 'items' | 'composite';\n\n/**\n * List Props\n */\nexport type ListProps = ComponentProps<ListSlots> & {\n navigationMode?: ListNavigationMode;\n selectionMode?: SelectionMode;\n selectedItems?: SelectionItemId[];\n defaultSelectedItems?: SelectionItemId[];\n onSelectionChange?: EventHandler<OnListSelectionChangeData>;\n};\n\nexport type ListContextValue = {\n selection?: ListSelectionState;\n validateListItem: (listItemElement: HTMLElement) => void;\n};\n\nexport type ListSynchronousContextValue = {\n navigationMode: ListNavigationMode | undefined;\n listItemRole: string;\n};\n\nexport type ListContextValues = {\n listContext: ListContextValue;\n synchronousContext: ListSynchronousContextValue;\n};\n\n/**\n * State used in rendering List\n */\nexport type ListState = ComponentState<ListSlots> & ListContextValue & ListSynchronousContextValue;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

View File

@@ -0,0 +1,4 @@
export { List } from './List';
export { renderList_unstable } from './renderList';
export { useList_unstable } from './useList';
export { listClassNames, useListStyles_unstable } from './useListStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/List/index.ts"],"sourcesContent":["export { List } from './List';\nexport type {\n ListContextValue,\n ListContextValues,\n ListNavigationMode,\n ListProps,\n ListSlots,\n ListState,\n OnListSelectionChangeData,\n} from './List.types';\nexport { renderList_unstable } from './renderList';\nexport { useList_unstable } from './useList';\nexport { listClassNames, useListStyles_unstable } from './useListStyles.styles';\n"],"names":["List","renderList_unstable","useList_unstable","listClassNames","useListStyles_unstable"],"mappings":"AAAA,SAASA,IAAI,QAAQ,SAAS;AAU9B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,cAAc,EAAEC,sBAAsB,QAAQ,yBAAyB"}

View File

@@ -0,0 +1,23 @@
'use client';
import { createContext, useContextSelector } from '@fluentui/react-context-selector';
import * as React from 'react';
export const listContextDefaultValue = {
selection: undefined,
validateListItem: ()=>{
/* noop */ }
};
const listContext = createContext(undefined);
export const ListContextProvider = listContext.Provider;
export const useListContext_unstable = (selector)=>useContextSelector(listContext, (ctx = listContextDefaultValue)=>selector(ctx));
// This is a context that uses the standard, React Context API.
// The reason why this exists is that the Fluent UI Context Provider replaces the
// React Context Provider with a custom one that needs a layout effect to update the context value.
// This results in issues with element/role validation, as the ListItem component has not been updated yet
// when the validation happens.
// https://github.com/microsoft/fluentui/issues/34467
const ListSynchronousContext = React.createContext(undefined);
export const ListSynchronousContextProvider = ListSynchronousContext.Provider;
export const useListSynchronousContext = ()=>React.useContext(ListSynchronousContext) || {
navigationMode: undefined,
listItemRole: 'listitem'
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/List/listContext.ts"],"sourcesContent":["'use client';\n\nimport { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { ContextSelector } from '@fluentui/react-context-selector';\nimport { ListSynchronousContextValue, ListContextValue } from './List.types';\nimport * as React from 'react';\n\nexport const listContextDefaultValue: ListContextValue = {\n selection: undefined,\n validateListItem: () => {\n /* noop */\n },\n};\n\nconst listContext = createContext<ListContextValue | undefined>(undefined);\n\nexport const ListContextProvider = listContext.Provider;\n\nexport const useListContext_unstable = <T>(selector: ContextSelector<ListContextValue, T>): T =>\n useContextSelector(listContext, (ctx = listContextDefaultValue) => selector(ctx));\n\n// This is a context that uses the standard, React Context API.\n// The reason why this exists is that the Fluent UI Context Provider replaces the\n// React Context Provider with a custom one that needs a layout effect to update the context value.\n// This results in issues with element/role validation, as the ListItem component has not been updated yet\n// when the validation happens.\n// https://github.com/microsoft/fluentui/issues/34467\nconst ListSynchronousContext = React.createContext<ListSynchronousContextValue | undefined>(undefined);\n\nexport const ListSynchronousContextProvider = ListSynchronousContext.Provider;\nexport const useListSynchronousContext = (): ListSynchronousContextValue =>\n React.useContext(ListSynchronousContext) || {\n navigationMode: undefined,\n listItemRole: 'listitem',\n };\n"],"names":["createContext","useContextSelector","React","listContextDefaultValue","selection","undefined","validateListItem","listContext","ListContextProvider","Provider","useListContext_unstable","selector","ctx","ListSynchronousContext","ListSynchronousContextProvider","useListSynchronousContext","useContext","navigationMode","listItemRole"],"mappings":"AAAA;AAEA,SAASA,aAAa,EAAEC,kBAAkB,QAAQ,mCAAmC;AAGrF,YAAYC,WAAW,QAAQ;AAE/B,OAAO,MAAMC,0BAA4C;IACvDC,WAAWC;IACXC,kBAAkB;IAChB,QAAQ,GACV;AACF,EAAE;AAEF,MAAMC,cAAcP,cAA4CK;AAEhE,OAAO,MAAMG,sBAAsBD,YAAYE,QAAQ,CAAC;AAExD,OAAO,MAAMC,0BAA0B,CAAIC,WACzCV,mBAAmBM,aAAa,CAACK,MAAMT,uBAAuB,GAAKQ,SAASC,MAAM;AAEpF,+DAA+D;AAC/D,iFAAiF;AACjF,mGAAmG;AACnG,0GAA0G;AAC1G,+BAA+B;AAC/B,qDAAqD;AACrD,MAAMC,yBAAyBX,MAAMF,aAAa,CAA0CK;AAE5F,OAAO,MAAMS,iCAAiCD,uBAAuBJ,QAAQ,CAAC;AAC9E,OAAO,MAAMM,4BAA4B,IACvCb,MAAMc,UAAU,CAACH,2BAA2B;QAC1CI,gBAAgBZ;QAChBa,cAAc;IAChB,EAAE"}

View File

@@ -0,0 +1,15 @@
import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
import { ListContextProvider, ListSynchronousContextProvider } from './listContext';
/**
* Render the final JSX of List
*/ export const renderList_unstable = (state, contextValues)=>{
assertSlots(state);
return /*#__PURE__*/ _jsx(ListContextProvider, {
value: contextValues.listContext,
children: /*#__PURE__*/ _jsx(ListSynchronousContextProvider, {
value: contextValues.synchronousContext,
children: /*#__PURE__*/ _jsx(state.root, {})
})
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/List/renderList.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 { ListState, ListSlots, ListContextValues } from './List.types';\nimport { ListContextProvider, ListSynchronousContextProvider } from './listContext';\n\n/**\n * Render the final JSX of List\n */\nexport const renderList_unstable = (state: ListState, contextValues: ListContextValues): JSXElement => {\n assertSlots<ListSlots>(state);\n\n return (\n <ListContextProvider value={contextValues.listContext}>\n <ListSynchronousContextProvider value={contextValues.synchronousContext}>\n <state.root />\n </ListSynchronousContextProvider>\n </ListContextProvider>\n );\n};\n"],"names":["assertSlots","ListContextProvider","ListSynchronousContextProvider","renderList_unstable","state","contextValues","value","listContext","synchronousContext","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,mBAAmB,EAAEC,8BAA8B,QAAQ,gBAAgB;AAEpF;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAACC,OAAkBC;IACpDL,YAAuBI;IAEvB,qBACE,KAACH;QAAoBK,OAAOD,cAAcE,WAAW;kBACnD,cAAA,KAACL;YAA+BI,OAAOD,cAAcG,kBAAkB;sBACrE,cAAA,KAACJ,MAAMK,IAAI;;;AAInB,EAAE"}

View File

@@ -0,0 +1,76 @@
'use client';
import * as React from 'react';
import { getIntrinsicElementProps, slot, useControllableState, useEventCallback } from '@fluentui/react-utilities';
import { useArrowNavigationGroup, useFocusFinders } from '@fluentui/react-tabster';
import { useListSelection } from '../../hooks/useListSelection';
import { calculateListItemRoleForListRole, calculateListRole, validateGridCellsArePresent, validateProperElementTypes, validateProperRolesAreUsed } from '../../utils';
const DEFAULT_ROOT_EL_TYPE = 'ul';
/**
* Create the state required to render List.
*
* The returned state can be modified with hooks such as useListStyles_unstable,
* before being passed to renderList_unstable.
*
* @param props - props from this instance of List
* @param ref - reference to root HTMLElement of List
*/ export const useList_unstable = (props, ref)=>{
const { navigationMode, selectionMode, selectedItems, defaultSelectedItems, onSelectionChange } = props;
const as = props.as || navigationMode === 'composite' ? 'div' : DEFAULT_ROOT_EL_TYPE;
const arrowNavigationAttributes = useArrowNavigationGroup({
axis: 'vertical',
memorizeCurrent: true
});
const [selectionState, setSelectionState] = useControllableState({
state: selectedItems,
defaultState: defaultSelectedItems,
initialState: []
});
const onChange = useEventCallback((e, data)=>{
const selectedItemsAsArray = Array.from(data.selectedItems);
setSelectionState(selectedItemsAsArray);
onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(e, {
event: e,
type: 'change',
selectedItems: selectedItemsAsArray
});
});
const selection = useListSelection({
onSelectionChange: onChange,
selectionMode: selectionMode || 'multiselect',
selectedItems: selectionState
});
const listRole = props.role || calculateListRole(navigationMode, !!selectionMode);
const listItemRole = calculateListItemRoleForListRole(listRole);
const { findAllFocusable } = useFocusFinders();
const validateListItem = useEventCallback((listItemEl)=>{
if (process.env.NODE_ENV === 'production') {
return;
}
const itemRole = listItemEl.getAttribute('role') || '';
const focusable = findAllFocusable(listItemEl);
validateProperElementTypes(as, listItemEl.tagName.toLocaleLowerCase());
validateProperRolesAreUsed(listRole, itemRole, !!selectionMode, focusable.length > 0);
validateGridCellsArePresent(listRole, listItemEl);
});
return {
components: {
root: as
},
root: slot.always(getIntrinsicElementProps(as, {
ref,
role: listRole,
...selectionMode && {
'aria-multiselectable': selectionMode === 'multiselect' ? true : undefined
},
...arrowNavigationAttributes,
...props
}), {
elementType: as
}),
listItemRole,
validateListItem,
navigationMode,
// only pass down selection state if its handled internally, otherwise just report the events
selection: selectionMode ? selection : undefined
};
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,21 @@
'use client';
import * as React from 'react';
export function useListContextValues_unstable(state) {
const { selection, navigationMode, listItemRole, validateListItem } = state;
const listContext = {
selection,
navigationMode,
validateListItem
};
const synchronousContext = React.useMemo(()=>({
listItemRole,
navigationMode
}), [
listItemRole,
navigationMode
]);
return {
listContext,
synchronousContext
};
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/List/useListContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ListContextValues, ListState } from './List.types';\n\nexport function useListContextValues_unstable(state: ListState): ListContextValues {\n const { selection, navigationMode, listItemRole, validateListItem } = state;\n\n const listContext = {\n selection,\n navigationMode,\n validateListItem,\n };\n\n const synchronousContext = React.useMemo(\n () => ({\n listItemRole,\n navigationMode,\n }),\n [listItemRole, navigationMode],\n );\n\n return {\n listContext,\n synchronousContext,\n };\n}\n"],"names":["React","useListContextValues_unstable","state","selection","navigationMode","listItemRole","validateListItem","listContext","synchronousContext","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,8BAA8BC,KAAgB;IAC5D,MAAM,EAAEC,SAAS,EAAEC,cAAc,EAAEC,YAAY,EAAEC,gBAAgB,EAAE,GAAGJ;IAEtE,MAAMK,cAAc;QAClBJ;QACAC;QACAE;IACF;IAEA,MAAME,qBAAqBR,MAAMS,OAAO,CACtC,IAAO,CAAA;YACLJ;YACAD;QACF,CAAA,GACA;QAACC;QAAcD;KAAe;IAGhC,OAAO;QACLG;QACAC;IACF;AACF"}

View File

@@ -0,0 +1,17 @@
'use client';
import { __resetStyles, mergeClasses } from '@griffel/react';
export const listClassNames = {
root: 'fui-List'
};
const useRootBaseStyles = /*#__PURE__*/__resetStyles("r1m6yby2", null, [".r1m6yby2{padding:0;margin:0;text-indent:0;list-style-type:none;}"]);
/**
* Apply styling to the List slots based on the state
*/
export const useListStyles_unstable = state => {
'use no memo';
const rootStyles = useRootBaseStyles();
state.root.className = mergeClasses(listClassNames.root, rootStyles, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"names":["__resetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","useListStyles_unstable","state","rootStyles","className"],"sources":["useListStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nexport const listClassNames = {\n root: 'fui-List'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none'\n});\n/**\n * Apply styling to the List slots based on the state\n */ export const useListStyles_unstable = (state)=>{\n 'use no memo';\n const rootStyles = useRootBaseStyles();\n state.root.className = mergeClasses(listClassNames.root, rootStyles, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,QAAQ,gBAAgB;AAC9D,OAAO,MAAMC,cAAc,GAAG;EAC1BC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,iBAAiB,gBAAGJ,aAAA,wFAKzB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMK,sBAAsB,GAAIC,KAAK,IAAG;EAC/C,aAAa;;EACb,MAAMC,UAAU,GAAGH,iBAAiB,CAAC,CAAC;EACtCE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGP,YAAY,CAACC,cAAc,CAACC,IAAI,EAAEI,UAAU,EAAED,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAC1F,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,19 @@
'use client';
import { makeResetStyles, mergeClasses } from '@griffel/react';
export const listClassNames = {
root: 'fui-List'
};
const useRootBaseStyles = makeResetStyles({
padding: 0,
margin: 0,
textIndent: 0,
listStyleType: 'none'
});
/**
* Apply styling to the List slots based on the state
*/ export const useListStyles_unstable = (state)=>{
'use no memo';
const rootStyles = useRootBaseStyles();
state.root.className = mergeClasses(listClassNames.root, rootStyles, state.root.className);
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/List/useListStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, mergeClasses } from '@griffel/react';\nimport type { ListSlots, ListState } from './List.types';\n\nexport const listClassNames: SlotClassNames<ListSlots> = {\n root: 'fui-List',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n});\n\n/**\n * Apply styling to the List slots based on the state\n */\nexport const useListStyles_unstable = (state: ListState): ListState => {\n 'use no memo';\n\n const rootStyles = useRootBaseStyles();\n\n state.root.className = mergeClasses(listClassNames.root, rootStyles, state.root.className);\n\n return state;\n};\n"],"names":["makeResetStyles","mergeClasses","listClassNames","root","useRootBaseStyles","padding","margin","textIndent","listStyleType","useListStyles_unstable","state","rootStyles","className"],"mappings":"AAAA;AAGA,SAASA,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAG/D,OAAO,MAAMC,iBAA4C;IACvDC,MAAM;AACR,EAAE;AAEF,MAAMC,oBAAoBJ,gBAAgB;IACxCK,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;AACjB;AAEA;;CAEC,GACD,OAAO,MAAMC,yBAAyB,CAACC;IACrC;IAEA,MAAMC,aAAaP;IAEnBM,MAAMP,IAAI,CAACS,SAAS,GAAGX,aAAaC,eAAeC,IAAI,EAAEQ,YAAYD,MAAMP,IAAI,CAACS,SAAS;IAEzF,OAAOF;AACT,EAAE"}

View File

@@ -0,0 +1,13 @@
'use client';
import * as React from 'react';
import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
import { useListItem_unstable } from './useListItem';
import { renderListItem_unstable } from './renderListItem';
import { useListItemStyles_unstable } from './useListItemStyles.styles';
export const ListItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const state = useListItem_unstable(props, ref);
useListItemStyles_unstable(state);
useCustomStyleHook_unstable('useListItemStyles_unstable')(state);
return renderListItem_unstable(state);
});
ListItem.displayName = 'ListItem';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ListItem/ListItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useListItem_unstable } from './useListItem';\nimport { renderListItem_unstable } from './renderListItem';\nimport { useListItemStyles_unstable } from './useListItemStyles.styles';\nimport type { ListItemProps } from './ListItem.types';\n\nexport const ListItem: ForwardRefComponent<ListItemProps> = React.forwardRef<HTMLLIElement | HTMLDivElement>(\n (props, ref) => {\n const state = useListItem_unstable(props, ref);\n\n useListItemStyles_unstable(state);\n useCustomStyleHook_unstable('useListItemStyles_unstable')(state);\n return renderListItem_unstable(state);\n },\n);\n\nListItem.displayName = 'ListItem';\n"],"names":["React","useCustomStyleHook_unstable","useListItem_unstable","renderListItem_unstable","useListItemStyles_unstable","ListItem","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,kCAAkC;AAC9E,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B;AAGxE,OAAO,MAAMC,yBAA+CL,MAAMM,UAAU,CAC1E,CAACC,OAAOC;IACN,MAAMC,QAAQP,qBAAqBK,OAAOC;IAE1CJ,2BAA2BK;IAC3BR,4BAA4B,8BAA8BQ;IAC1D,OAAON,wBAAwBM;AACjC,GACA;AAEFJ,SAASK,WAAW,GAAG"}

View File

@@ -0,0 +1,3 @@
/**
* State used in rendering ListItem
*/ export { };

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ListItem/ListItem.types.ts"],"sourcesContent":["import { Checkbox } from '@fluentui/react-checkbox';\nimport type { ComponentProps, ComponentState, EventData, EventHandler, Slot } from '@fluentui/react-utilities';\nimport { ListItemActionEvent, ListItemActionEventName } from '../../events/ListItemActionEvent';\n\nexport type ListItemSlots = {\n root: NonNullable<Slot<'li', 'div'>>;\n checkmark?: Slot<typeof Checkbox>;\n};\n\nexport type ListItemValue = string | number;\n\nexport type ListItemActionEventData = EventData<typeof ListItemActionEventName, ListItemActionEvent> & {\n value: ListItemValue;\n};\n/**\n * ListItem Props\n */\nexport type ListItemProps = ComponentProps<ListItemSlots> & {\n value?: ListItemValue;\n onAction?: EventHandler<ListItemActionEventData>;\n disabledSelection?: boolean;\n};\n\n/**\n * State used in rendering ListItem\n */\nexport type ListItemState = ComponentState<ListItemSlots> & {\n selectable: boolean;\n navigable: boolean;\n disabled?: boolean;\n};\n"],"names":[],"mappings":"AAuBA;;CAEC,GACD,WAIE"}

View File

@@ -0,0 +1,4 @@
export { ListItem } from './ListItem';
export { renderListItem_unstable } from './renderListItem';
export { useListItem_unstable } from './useListItem';
export { listItemClassNames, useListItemStyles_unstable } from './useListItemStyles.styles';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ListItem/index.ts"],"sourcesContent":["export { ListItem } from './ListItem';\nexport type {\n ListItemActionEventData,\n ListItemProps,\n ListItemSlots,\n ListItemState,\n ListItemValue,\n} from './ListItem.types';\nexport { renderListItem_unstable } from './renderListItem';\nexport { useListItem_unstable } from './useListItem';\nexport { listItemClassNames, useListItemStyles_unstable } from './useListItemStyles.styles';\n"],"names":["ListItem","renderListItem_unstable","useListItem_unstable","listItemClassNames","useListItemStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AAQtC,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,kBAAkB,EAAEC,0BAA0B,QAAQ,6BAA6B"}

View File

@@ -0,0 +1,13 @@
import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
import { assertSlots } from '@fluentui/react-utilities';
/**
* Render the final JSX of ListItem
*/ export const renderListItem_unstable = (state)=>{
assertSlots(state);
return /*#__PURE__*/ _jsxs(state.root, {
children: [
state.checkmark && /*#__PURE__*/ _jsx(state.checkmark, {}),
state.root.children
]
});
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ListItem/renderListItem.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 { ListItemState, ListItemSlots } from './ListItem.types';\n\n/**\n * Render the final JSX of ListItem\n */\nexport const renderListItem_unstable = (state: ListItemState): JSXElement => {\n assertSlots<ListItemSlots>(state);\n\n return (\n <state.root>\n {state.checkmark && <state.checkmark />}\n {state.root.children}\n </state.root>\n );\n};\n"],"names":["assertSlots","renderListItem_unstable","state","root","checkmark","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtCF,YAA2BE;IAE3B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,SAAS,kBAAI,KAACF,MAAME,SAAS;YACnCF,MAAMC,IAAI,CAACE,QAAQ;;;AAG1B,EAAE"}

View File

@@ -0,0 +1,191 @@
'use client';
import * as React from 'react';
import { GroupperMoveFocusEvent, MoverMoveFocusEvent, GroupperMoveFocusActions, MoverKeys, useArrowNavigationGroup, useFocusableGroup, useMergedTabsterAttributes_unstable } from '@fluentui/react-tabster';
import { elementContains, getIntrinsicElementProps, mergeCallbacks, slot, useEventCallback, useId, useMergedRefs } from '@fluentui/react-utilities';
import { useListSynchronousContext, useListContext_unstable } from '../List/listContext';
import { Enter, Space, ArrowUp, ArrowDown, ArrowRight, ArrowLeft } from '@fluentui/keyboard-keys';
import { Checkbox } from '@fluentui/react-checkbox';
import { createListItemActionEvent, ListItemActionEventName } from '../../events/ListItemActionEvent';
const DEFAULT_ROOT_EL_TYPE = 'li';
/**
* Create the state required to render ListItem.
*
* The returned state can be modified with hooks such as useListItemStyles_unstable,
* before being passed to renderListItem_unstable.
*
* @param props - props from this instance of ListItem
* @param ref - reference to root HTMLLIElement | HTMLDivElementof ListItem
*/ export const useListItem_unstable = (props, ref)=>{
const id = useId('listItem');
const { value = id, onKeyDown, onClick, tabIndex, role, onAction, disabledSelection } = props;
const toggleItem = useListContext_unstable((ctx)=>{
var _ctx_selection;
return (_ctx_selection = ctx.selection) === null || _ctx_selection === void 0 ? void 0 : _ctx_selection.toggleItem;
});
const { navigationMode, listItemRole } = useListSynchronousContext();
const isSelectionModeEnabled = useListContext_unstable((ctx)=>!!ctx.selection);
var _useListContext_unstable;
const isSelected = (_useListContext_unstable = useListContext_unstable((ctx)=>{
var _ctx_selection;
return (_ctx_selection = ctx.selection) === null || _ctx_selection === void 0 ? void 0 : _ctx_selection.isSelected(value);
})) !== null && _useListContext_unstable !== void 0 ? _useListContext_unstable : false;
const validateListItem = useListContext_unstable((ctx)=>ctx.validateListItem);
const as = props.as || navigationMode === 'composite' ? 'div' : DEFAULT_ROOT_EL_TYPE;
const finalListItemRole = role || listItemRole;
const focusableItems = Boolean(isSelectionModeEnabled || navigationMode || tabIndex === 0);
const rootRef = React.useRef(null);
const checkmarkRef = React.useRef(null);
const handleAction = useEventCallback((event)=>{
onAction === null || onAction === void 0 ? void 0 : onAction(event, {
event,
value,
type: ListItemActionEventName
});
if (event.defaultPrevented) {
return;
}
if (isSelectionModeEnabled && !disabledSelection) {
toggleItem === null || toggleItem === void 0 ? void 0 : toggleItem(event.detail.originalEvent, value);
}
});
React.useEffect(()=>{
if (rootRef.current) {
validateListItem(rootRef.current);
}
}, [
validateListItem
]);
const triggerAction = (e)=>{
const actionEvent = createListItemActionEvent(e);
handleAction(actionEvent);
e.target.dispatchEvent(actionEvent);
};
const focusableGroupAttrs = useFocusableGroup({
ignoreDefaultKeydown: {
Enter: true
},
tabBehavior: 'limited-trap-focus'
});
const handleClick = useEventCallback((e)=>{
onClick === null || onClick === void 0 ? void 0 : onClick(e);
if (e.defaultPrevented) {
return;
}
const isFromCheckbox = elementContains(checkmarkRef.current, e.target);
if (isFromCheckbox) {
return;
}
triggerAction(e);
});
const handleKeyDown = useEventCallback((e)=>{
onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(e);
if (e.defaultPrevented) {
return;
}
// If the event is fired from an element inside the list item
if (e.target !== e.currentTarget) {
if (focusableItems) {
// If the items are focusable, we need to handle the arrow keys to move focus to them
switch(e.key){
// If it's one of the Arrows defined, jump out of the list item to focus on the ListItem itself
// The ArrowLeft will only trigger if the target element is the leftmost, otherwise the
// arrowNavigationAttributes handles it and prevents it from bubbling here.
case ArrowLeft:
e.target.dispatchEvent(new GroupperMoveFocusEvent({
action: GroupperMoveFocusActions.Escape
}));
break;
case ArrowDown:
case ArrowUp:
e.preventDefault();
// Press ESC on the original target to get focus to the parent group (List)
e.target.dispatchEvent(new GroupperMoveFocusEvent({
action: GroupperMoveFocusActions.Escape
}));
// Now dispatch the original key to move up or down in the list
e.currentTarget.dispatchEvent(new MoverMoveFocusEvent({
key: MoverKeys[e.key]
}));
}
return;
}
return;
}
switch(e.key){
case Space:
// we have to prevent default here otherwise the space key will scroll the page
e.preventDefault();
// Space always toggles selection (if enabled)
if (isSelectionModeEnabled) {
if (!disabledSelection) {
toggleItem === null || toggleItem === void 0 ? void 0 : toggleItem(e, value);
}
} else {
triggerAction(e);
}
break;
case Enter:
triggerAction(e);
break;
case ArrowRight:
if (navigationMode === 'composite') {
e.target.dispatchEvent(new GroupperMoveFocusEvent({
action: GroupperMoveFocusActions.Enter
}));
}
break;
}
});
const onCheckboxChange = useEventCallback((e, data)=>{
if (!isSelectionModeEnabled || e.defaultPrevented) {
return;
}
toggleItem === null || toggleItem === void 0 ? void 0 : toggleItem(e, value);
});
const arrowNavigationAttributes = useArrowNavigationGroup({
axis: 'horizontal'
});
const tabsterAttributes = useMergedTabsterAttributes_unstable(focusableItems ? arrowNavigationAttributes : {}, focusableGroupAttrs, props);
const root = slot.always(getIntrinsicElementProps(as, {
ref: useMergedRefs(rootRef, ref),
tabIndex: focusableItems ? 0 : undefined,
role: finalListItemRole,
id: String(value),
...isSelectionModeEnabled && {
'aria-selected': isSelected,
'aria-disabled': disabledSelection && !onAction || undefined
},
...props,
...tabsterAttributes,
onKeyDown: handleKeyDown,
onClick: isSelectionModeEnabled || onClick || onAction ? handleClick : undefined
}), {
elementType: as
});
const checkmark = slot.optional(props.checkmark, {
defaultProps: {
checked: isSelected,
tabIndex: -1,
disabled: disabledSelection
},
renderByDefault: isSelectionModeEnabled,
elementType: Checkbox
});
const mergedCheckmarkRef = useMergedRefs(checkmark === null || checkmark === void 0 ? void 0 : checkmark.ref, checkmarkRef);
if (checkmark) {
checkmark.onChange = mergeCallbacks(checkmark.onChange, onCheckboxChange);
checkmark.ref = mergedCheckmarkRef;
}
const state = {
components: {
root: as,
checkmark: Checkbox
},
root,
checkmark,
disabled: disabledSelection && !onAction,
selectable: isSelectionModeEnabled,
navigable: focusableItems
};
return state;
};

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,53 @@
'use client';
import { __styles, __resetStyles, mergeClasses } from '@griffel/react';
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
import { tokens } from '@fluentui/react-theme';
export const listItemClassNames = {
root: 'fui-ListItem',
checkmark: 'fui-ListItem__checkmark'
};
const useRootBaseStyles = /*#__PURE__*/__resetStyles("rikgcmv", null, [".rikgcmv{padding:0;margin:0;text-indent:0;list-style-type:none;}", ".rikgcmv[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);border-radius:var(--borderRadiusMedium);}"]);
const useCheckmarkBaseStyles = /*#__PURE__*/__styles({
root: {
qb2dma: "f7nlbp4",
Bpb5tq4: 0,
Biccaaf: 0,
Gaeyjg: 0,
ldoezw: 0,
B6gmeee: "f1bgo3o3"
}
}, {
d: [".f7nlbp4{align-self:center;}", [".f1bgo3o3 .fui-Checkbox__indicator{margin:4px;}", {
p: -1
}]]
});
/**
* Styles for the root slot
*/
const useStyles = /*#__PURE__*/__styles({
rootClickableOrSelectable: {
mc9l5x: "f22iagw",
Bceei9c: "f1k6fduh"
},
disabled: {
Bceei9c: "f158kwzp"
}
}, {
d: [".f22iagw{display:flex;}", ".f1k6fduh{cursor:pointer;}", ".f158kwzp{cursor:default;}"]
});
/**
* Apply styling to the ListItem slots based on the state
*/
export const useListItemStyles_unstable = state => {
'use no memo';
const rootBaseStyles = useRootBaseStyles();
const checkmarkBaseStyles = useCheckmarkBaseStyles();
const styles = useStyles();
state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickableOrSelectable, state.disabled && styles.disabled, state.root.className);
if (state.checkmark) {
state.checkmark.className = mergeClasses(listItemClassNames.checkmark, checkmarkBaseStyles.root, state.checkmark.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"names":["__styles","__resetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","checkmark","useRootBaseStyles","useCheckmarkBaseStyles","qb2dma","Bpb5tq4","Biccaaf","Gaeyjg","ldoezw","B6gmeee","d","p","useStyles","rootClickableOrSelectable","mc9l5x","Bceei9c","disabled","useListItemStyles_unstable","state","rootBaseStyles","checkmarkBaseStyles","styles","className","selectable","navigable"],"sources":["useListItemStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nexport const listItemClassNames = {\n root: 'fui-ListItem',\n checkmark: 'fui-ListItem__checkmark'\n};\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle({\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium\n }, {\n selector: 'focus'\n })\n});\nconst useCheckmarkBaseStyles = makeStyles({\n root: {\n alignSelf: 'center',\n '& .fui-Checkbox__indicator': {\n margin: '4px'\n }\n }\n});\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n rootClickableOrSelectable: {\n display: 'flex',\n cursor: 'pointer'\n },\n disabled: {\n cursor: 'default'\n }\n});\n/**\n * Apply styling to the ListItem slots based on the state\n */ export const useListItemStyles_unstable = (state)=>{\n 'use no memo';\n const rootBaseStyles = useRootBaseStyles();\n const checkmarkBaseStyles = useCheckmarkBaseStyles();\n const styles = useStyles();\n state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickableOrSelectable, state.disabled && styles.disabled, state.root.className);\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(listItemClassNames.checkmark, checkmarkBaseStyles.root, state.checkmark.className);\n }\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,kBAAkB,GAAG;EAC9BC,IAAI,EAAE,cAAc;EACpBC,SAAS,EAAE;AACf,CAAC;AACD,MAAMC,iBAAiB,gBAAGP,aAAA,mOAWzB,CAAC;AACF,MAAMQ,sBAAsB,gBAAGT,QAAA;EAAAM,IAAA;IAAAI,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAO9B,CAAC;AACF;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGlB,QAAA;EAAAmB,yBAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAD,OAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,CAQrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMO,0BAA0B,GAAIC,KAAK,IAAG;EACnD,aAAa;;EACb,MAAMC,cAAc,GAAGjB,iBAAiB,CAAC,CAAC;EAC1C,MAAMkB,mBAAmB,GAAGjB,sBAAsB,CAAC,CAAC;EACpD,MAAMkB,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1BM,KAAK,CAAClB,IAAI,CAACsB,SAAS,GAAG1B,YAAY,CAACG,kBAAkB,CAACC,IAAI,EAAEmB,cAAc,EAAE,CAACD,KAAK,CAACK,UAAU,IAAIL,KAAK,CAACM,SAAS,KAAKH,MAAM,CAACR,yBAAyB,EAAEK,KAAK,CAACF,QAAQ,IAAIK,MAAM,CAACL,QAAQ,EAAEE,KAAK,CAAClB,IAAI,CAACsB,SAAS,CAAC;EAChN,IAAIJ,KAAK,CAACjB,SAAS,EAAE;IACjBiB,KAAK,CAACjB,SAAS,CAACqB,SAAS,GAAG1B,YAAY,CAACG,kBAAkB,CAACE,SAAS,EAAEmB,mBAAmB,CAACpB,IAAI,EAAEkB,KAAK,CAACjB,SAAS,CAACqB,SAAS,CAAC;EAC/H;EACA,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}

View File

@@ -0,0 +1,52 @@
'use client';
import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';
import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
import { tokens } from '@fluentui/react-theme';
export const listItemClassNames = {
root: 'fui-ListItem',
checkmark: 'fui-ListItem__checkmark'
};
const useRootBaseStyles = makeResetStyles({
padding: 0,
margin: 0,
textIndent: 0,
listStyleType: 'none',
...createCustomFocusIndicatorStyle({
outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
borderRadius: tokens.borderRadiusMedium
}, {
selector: 'focus'
})
});
const useCheckmarkBaseStyles = makeStyles({
root: {
alignSelf: 'center',
'& .fui-Checkbox__indicator': {
margin: '4px'
}
}
});
/**
* Styles for the root slot
*/ const useStyles = makeStyles({
rootClickableOrSelectable: {
display: 'flex',
cursor: 'pointer'
},
disabled: {
cursor: 'default'
}
});
/**
* Apply styling to the ListItem slots based on the state
*/ export const useListItemStyles_unstable = (state)=>{
'use no memo';
const rootBaseStyles = useRootBaseStyles();
const checkmarkBaseStyles = useCheckmarkBaseStyles();
const styles = useStyles();
state.root.className = mergeClasses(listItemClassNames.root, rootBaseStyles, (state.selectable || state.navigable) && styles.rootClickableOrSelectable, state.disabled && styles.disabled, state.root.className);
if (state.checkmark) {
state.checkmark.className = mergeClasses(listItemClassNames.checkmark, checkmarkBaseStyles.root, state.checkmark.className);
}
return state;
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/ListItem/useListItemStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport type { ListItemSlots, ListItemState } from './ListItem.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const listItemClassNames: SlotClassNames<ListItemSlots> = {\n root: 'fui-ListItem',\n checkmark: 'fui-ListItem__checkmark',\n};\n\nconst useRootBaseStyles = makeResetStyles({\n padding: 0,\n margin: 0,\n textIndent: 0,\n listStyleType: 'none',\n ...createCustomFocusIndicatorStyle(\n {\n outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n borderRadius: tokens.borderRadiusMedium,\n },\n { selector: 'focus' },\n ),\n});\n\nconst useCheckmarkBaseStyles = makeStyles({\n root: {\n alignSelf: 'center',\n\n '& .fui-Checkbox__indicator': { margin: '4px' },\n },\n});\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n rootClickableOrSelectable: {\n display: 'flex',\n cursor: 'pointer',\n },\n\n disabled: {\n cursor: 'default',\n },\n});\n\n/**\n * Apply styling to the ListItem slots based on the state\n */\nexport const useListItemStyles_unstable = (state: ListItemState): ListItemState => {\n 'use no memo';\n\n const rootBaseStyles = useRootBaseStyles();\n const checkmarkBaseStyles = useCheckmarkBaseStyles();\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n listItemClassNames.root,\n rootBaseStyles,\n (state.selectable || state.navigable) && styles.rootClickableOrSelectable,\n state.disabled && styles.disabled,\n state.root.className,\n );\n\n if (state.checkmark) {\n state.checkmark.className = mergeClasses(\n listItemClassNames.checkmark,\n checkmarkBaseStyles.root,\n state.checkmark.className,\n );\n }\n\n return state;\n};\n"],"names":["makeStyles","makeResetStyles","mergeClasses","createCustomFocusIndicatorStyle","tokens","listItemClassNames","root","checkmark","useRootBaseStyles","padding","margin","textIndent","listStyleType","outline","strokeWidthThick","colorStrokeFocus2","borderRadius","borderRadiusMedium","selector","useCheckmarkBaseStyles","alignSelf","useStyles","rootClickableOrSelectable","display","cursor","disabled","useListItemStyles_unstable","state","rootBaseStyles","checkmarkBaseStyles","styles","className","selectable","navigable"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,eAAe,EAAEC,YAAY,QAAQ,iBAAiB;AAC3E,SAASC,+BAA+B,QAAQ,0BAA0B;AAE1E,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,qBAAoD;IAC/DC,MAAM;IACNC,WAAW;AACb,EAAE;AAEF,MAAMC,oBAAoBP,gBAAgB;IACxCQ,SAAS;IACTC,QAAQ;IACRC,YAAY;IACZC,eAAe;IACf,GAAGT,gCACD;QACEU,SAAS,GAAGT,OAAOU,gBAAgB,CAAC,OAAO,EAAEV,OAAOW,iBAAiB,EAAE;QACvEC,cAAcZ,OAAOa,kBAAkB;IACzC,GACA;QAAEC,UAAU;IAAQ,EACrB;AACH;AAEA,MAAMC,yBAAyBnB,WAAW;IACxCM,MAAM;QACJc,WAAW;QAEX,8BAA8B;YAAEV,QAAQ;QAAM;IAChD;AACF;AACA;;CAEC,GACD,MAAMW,YAAYrB,WAAW;IAC3BsB,2BAA2B;QACzBC,SAAS;QACTC,QAAQ;IACV;IAEAC,UAAU;QACRD,QAAQ;IACV;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,6BAA6B,CAACC;IACzC;IAEA,MAAMC,iBAAiBpB;IACvB,MAAMqB,sBAAsBV;IAC5B,MAAMW,SAAST;IAEfM,MAAMrB,IAAI,CAACyB,SAAS,GAAG7B,aACrBG,mBAAmBC,IAAI,EACvBsB,gBACA,AAACD,CAAAA,MAAMK,UAAU,IAAIL,MAAMM,SAAS,AAAD,KAAMH,OAAOR,yBAAyB,EACzEK,MAAMF,QAAQ,IAAIK,OAAOL,QAAQ,EACjCE,MAAMrB,IAAI,CAACyB,SAAS;IAGtB,IAAIJ,MAAMpB,SAAS,EAAE;QACnBoB,MAAMpB,SAAS,CAACwB,SAAS,GAAG7B,aAC1BG,mBAAmBE,SAAS,EAC5BsB,oBAAoBvB,IAAI,EACxBqB,MAAMpB,SAAS,CAACwB,SAAS;IAE7B;IAEA,OAAOJ;AACT,EAAE"}

View File

@@ -0,0 +1,9 @@
import * as React from 'react';
export const ListItemActionEventName = 'ListItemAction';
export const createListItemActionEvent = (originalEvent)=>new CustomEvent(ListItemActionEventName, {
cancelable: true,
bubbles: true,
detail: {
originalEvent
}
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/events/ListItemActionEvent.ts"],"sourcesContent":["import * as React from 'react';\n\nexport const ListItemActionEventName = 'ListItemAction';\n\nexport interface ListItemActionEventDetail {\n originalEvent: React.MouseEvent | React.KeyboardEvent;\n}\n\nexport type ListItemActionEvent = CustomEvent<ListItemActionEventDetail>;\n\nexport const createListItemActionEvent = (\n originalEvent: React.MouseEvent | React.KeyboardEvent,\n): CustomEvent<ListItemActionEventDetail> =>\n new CustomEvent<ListItemActionEventDetail>(ListItemActionEventName, {\n cancelable: true,\n bubbles: true,\n detail: { originalEvent },\n });\n"],"names":["React","ListItemActionEventName","createListItemActionEvent","originalEvent","CustomEvent","cancelable","bubbles","detail"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,OAAO,MAAMC,0BAA0B,iBAAiB;AAQxD,OAAO,MAAMC,4BAA4B,CACvCC,gBAEA,IAAIC,YAAuCH,yBAAyB;QAClEI,YAAY;QACZC,SAAS;QACTC,QAAQ;YAAEJ;QAAc;IAC1B,GAAG"}

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