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

612
node_modules/@fluentui/react-motion/CHANGELOG.md generated vendored Normal file
View File

@@ -0,0 +1,612 @@
# Change Log - @fluentui/react-motion
This log was last generated on Mon, 30 Mar 2026 14:35:48 GMT and should not be manually modified.
<!-- Start content -->
## [9.14.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.14.0)
Mon, 30 Mar 2026 14:35:48 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.13.0..@fluentui/react-motion_v9.14.0)
### Minor changes
- feat: add motionSlot() as parallel to presenceMotionSlot() ([PR #35888](https://github.com/microsoft/fluentui/pull/35888) by robertpenner@microsoft.com)
- feat: add motionSlot() as parallel to presenceMotionSlot() ([PR #35883](https://github.com/microsoft/fluentui/pull/35883) by robertpenner@microsoft.com)
## [9.13.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.13.0)
Tue, 03 Mar 2026 09:43:40 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.12.0..@fluentui/react-motion_v9.13.0)
### Minor changes
- fix: make children optional in MotionRefForwarder to resolve type issue ([PR #35763](https://github.com/microsoft/fluentui/pull/35763) by robertpenner@microsoft.com)
### Patches
- fix: add MotionRefForwarderReset to prevent context leaking to descendants ([PR #35807](https://github.com/microsoft/fluentui/pull/35807) by olfedias@microsoft.com)
## [9.12.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.12.0)
Wed, 25 Feb 2026 13:32:23 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.11.6..@fluentui/react-motion_v9.12.0)
### Minor changes
- feat: export MotionRefForwarder and useMotionForwardedRef for shared motion ref forwarding ([PR #35774](https://github.com/microsoft/fluentui/pull/35774) by robertpenner@microsoft.com)
- Bump @fluentui/react-shared-contexts to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
- Bump @fluentui/react-utilities to v9.26.2 ([PR #35782](https://github.com/microsoft/fluentui/pull/35782) by beachball)
## [9.11.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.11.6)
Thu, 22 Jan 2026 17:06:32 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.11.5..@fluentui/react-motion_v9.11.6)
### Patches
- fix: cleanup animation handle on unmounted component ([PR #35617](https://github.com/microsoft/fluentui/pull/35617) by olfedias@microsoft.com)
- Bump @fluentui/react-shared-contexts to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
- Bump @fluentui/react-utilities to v9.26.1 ([PR #35574](https://github.com/microsoft/fluentui/pull/35574) by beachball)
## [9.11.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.11.5)
Wed, 17 Dec 2025 18:10:11 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.11.4..@fluentui/react-motion_v9.11.5)
### Patches
- Bump @fluentui/react-utilities to v9.26.0 ([PR #35582](https://github.com/microsoft/fluentui/pull/35582) by beachball)
## [9.11.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.11.4)
Tue, 11 Nov 2025 19:18:29 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.11.3..@fluentui/react-motion_v9.11.4)
### Patches
- Bump @fluentui/react-shared-contexts to v9.26.0 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
- Bump @fluentui/react-utilities to v9.25.4 ([PR #35462](https://github.com/microsoft/fluentui/pull/35462) by beachball)
## [9.11.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.11.3)
Thu, 06 Nov 2025 15:01:23 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.11.2..@fluentui/react-motion_v9.11.3)
### Patches
- chore: migrate source to react 19 ([PR #35434](https://github.com/microsoft/fluentui/pull/35434) by martinhochel@microsoft.com)
- Bump @fluentui/react-utilities to v9.25.3 ([PR #35466](https://github.com/microsoft/fluentui/pull/35466) by beachball)
## [9.11.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.11.2)
Fri, 31 Oct 2025 16:22:06 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.11.1..@fluentui/react-motion_v9.11.2)
### Patches
- Bump @fluentui/react-utilities to v9.25.2 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
## [9.11.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.11.1)
Wed, 08 Oct 2025 12:04:53 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.11.0..@fluentui/react-motion_v9.11.1)
### Patches
- Bump @fluentui/react-utilities to v9.25.1 ([PR #35294](https://github.com/microsoft/fluentui/pull/35294) by beachball)
## [9.11.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.11.0)
Thu, 02 Oct 2025 15:12:27 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.10.4..@fluentui/react-motion_v9.11.0)
### Minor changes
- feat(motion): add createMotionComponentVariant factory ([PR #35149](https://github.com/microsoft/fluentui/pull/35149) by robertpenner@microsoft.com)
- Bump @fluentui/react-shared-contexts to v9.25.2 ([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)
### 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)
## [9.10.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.10.4)
Mon, 08 Sep 2025 12:51:09 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.10.3..@fluentui/react-motion_v9.10.4)
### 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)
- Bump @fluentui/react-shared-contexts to v9.25.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
- Bump @fluentui/react-utilities to v9.24.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
## [9.10.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.10.3)
Thu, 21 Aug 2025 12:25:14 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.10.2..@fluentui/react-motion_v9.10.3)
### Patches
- refactor: move getRefFromReactElement to react-utilities ([PR #35030](https://github.com/microsoft/fluentui/pull/35030) by dmytrokirpa@microsoft.com)
- Bump @fluentui/react-shared-contexts to v9.25.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
- Bump @fluentui/react-utilities to v9.24.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
## [9.10.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.10.2)
Thu, 07 Aug 2025 10:03:25 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.10.1..@fluentui/react-motion_v9.10.2)
### Patches
- fix: adjust PresenseGroup types to support react 19 ([PR #34722](https://github.com/microsoft/fluentui/pull/34722) by dmytrokirpa@microsoft.com)
- fix: migrate to R19 compatible JSX.* namespace types ([PR #34923](https://github.com/microsoft/fluentui/pull/34923) by martinhochel@microsoft.com)
- Bump @fluentui/react-utilities to v9.23.2 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
## [9.10.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.10.1)
Wed, 30 Jul 2025 13:10:57 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.10.0..@fluentui/react-motion_v9.10.1)
### Patches
- Bump @fluentui/react-shared-contexts to v9.24.1 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
- Bump @fluentui/react-utilities to v9.23.1 ([PR #34881](https://github.com/microsoft/fluentui/pull/34881) by beachball)
## [9.10.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.10.0)
Mon, 28 Jul 2025 18:48:20 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.9.0..@fluentui/react-motion_v9.10.0)
### Minor changes
- feat: replace global JSX.IntrinsicElements with in house alternative to make types compatible across react major versions ([PR #34733](https://github.com/microsoft/fluentui/pull/34733) by martinhochel@microsoft.com)
- Bump @fluentui/react-utilities to v9.23.0 ([PR #34918](https://github.com/microsoft/fluentui/pull/34918) by beachball)
## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.9.0)
Thu, 26 Jun 2025 14:11:54 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.8.1..@fluentui/react-motion_v9.9.0)
### Minor changes
- Presence enter & exit motions can be used separately with .In & .Out ([PR #33930](https://github.com/microsoft/fluentui/pull/33930) by robertpenner@microsoft.com)
- Bump @fluentui/react-utilities to v9.22.0 ([PR #34529](https://github.com/microsoft/fluentui/pull/34529) by beachball)
## [9.8.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.8.1)
Wed, 18 Jun 2025 17:34:00 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.8.0..@fluentui/react-motion_v9.8.1)
### Patches
- Bump @fluentui/react-shared-contexts to v9.24.0 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
- Bump @fluentui/react-utilities to v9.21.1 ([PR #34675](https://github.com/microsoft/fluentui/pull/34675) by beachball)
## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.8.0)
Thu, 12 Jun 2025 09:43:33 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.7.4..@fluentui/react-motion_v9.8.0)
### Minor changes
- Bump @fluentui/react-utilities to v9.21.0 ([PR #34456](https://github.com/microsoft/fluentui/pull/34456) by beachball)
## [9.7.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.7.4)
Fri, 06 Jun 2025 13:15:17 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.7.3..@fluentui/react-motion_v9.7.4)
### Patches
- Bump @fluentui/react-utilities to v9.20.0 ([PR #34572](https://github.com/microsoft/fluentui/pull/34572) by beachball)
## [9.7.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.7.3)
Wed, 14 May 2025 18:49:18 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.7.2..@fluentui/react-motion_v9.7.3)
### Patches
- Export child context ([PR #34449](https://github.com/microsoft/fluentui/pull/34449) by charles.assuncao@microsoft.com)
## [9.7.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.7.2)
Wed, 16 Apr 2025 19:42:02 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.7.1..@fluentui/react-motion_v9.7.2)
### Patches
- fix: improve element validation to work with React 19 ([PR #34164](https://github.com/microsoft/fluentui/pull/34164) by olfedias@microsoft.com)
- Bump @fluentui/react-utilities to v9.19.0 ([PR #34166](https://github.com/microsoft/fluentui/pull/34166) by beachball)
## [9.7.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.7.1)
Thu, 27 Mar 2025 21:12:51 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.7.0..@fluentui/react-motion_v9.7.1)
### Patches
- Bump @fluentui/react-shared-contexts to v9.23.1 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
- Bump @fluentui/react-utilities to v9.18.23 ([PR #34034](https://github.com/microsoft/fluentui/pull/34034) by beachball)
## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.7.0)
Wed, 26 Mar 2025 21:47:46 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.10..@fluentui/react-motion_v9.7.0)
### Minor changes
- fix(motion): make createPresenceComponentVariant support motion arrays ([PR #33996](https://github.com/microsoft/fluentui/pull/33996) by robertpenner@microsoft.com)
### Patches
- fix: handle error cases in "element.animate()" ([PR #34096](https://github.com/microsoft/fluentui/pull/34096) by seanmonahan@microsoft.com)
## [9.6.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.10)
Thu, 20 Mar 2025 09:34:58 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.9..@fluentui/react-motion_v9.6.10)
### Patches
- feat: experimental createInterruptablePresence() ([PR #33994](https://github.com/microsoft/fluentui/pull/33994) by olfedias@microsoft.com)
## [9.6.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.9)
Wed, 19 Mar 2025 15:40:43 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.8..@fluentui/react-motion_v9.6.9)
### Patches
- Bump @fluentui/react-shared-contexts to v9.23.0 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
- Bump @fluentui/react-utilities to v9.18.22 ([PR #34032](https://github.com/microsoft/fluentui/pull/34032) by beachball)
## [9.6.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.8)
Tue, 11 Mar 2025 18:58:51 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.7..@fluentui/react-motion_v9.6.8)
### Patches
- fix: apply initial styles consistently ([PR #33810](https://github.com/microsoft/fluentui/pull/33810) by olfedias@microsoft.com)
- Bump @fluentui/react-shared-contexts to v9.22.0 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
- Bump @fluentui/react-utilities to v9.18.21 ([PR #33927](https://github.com/microsoft/fluentui/pull/33927) by beachball)
## [9.6.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.7)
Wed, 22 Jan 2025 14:00:19 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.6..@fluentui/react-motion_v9.6.7)
### Patches
- feat: add extended support for reduced motion ([PR #33353](https://github.com/microsoft/fluentui/pull/33353) by olfedias@microsoft.com)
- Bump @fluentui/react-utilities to v9.18.20 ([PR #33631](https://github.com/microsoft/fluentui/pull/33631) by beachball)
## [9.6.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.6)
Wed, 08 Jan 2025 18:33:34 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.5..@fluentui/react-motion_v9.6.6)
### Patches
- fix: handle case when Animation.persist() does not exist ([PR #33282](https://github.com/microsoft/fluentui/pull/33282) by seanmonahan@microsoft.com)
## [9.6.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.5)
Mon, 16 Dec 2024 16:26:49 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.4..@fluentui/react-motion_v9.6.5)
### Patches
- Bump @fluentui/react-shared-contexts to v9.21.2 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
- Bump @fluentui/react-utilities to v9.18.19 ([PR #33468](https://github.com/microsoft/fluentui/pull/33468) by beachball)
## [9.6.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.4)
Mon, 09 Dec 2024 17:38:13 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.3..@fluentui/react-motion_v9.6.4)
### Patches
- fix: avoid memory leak in Animation:finished ([PR #33431](https://github.com/microsoft/fluentui/pull/33431) by olfedias@microsoft.com)
## [9.6.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.3)
Fri, 06 Dec 2024 12:53:46 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.2..@fluentui/react-motion_v9.6.3)
### Patches
- Bump @fluentui/react-shared-contexts to v9.21.1 ([PR #33372](https://github.com/microsoft/fluentui/pull/33372) by beachball)
- Bump @fluentui/react-utilities to v9.18.18 ([PR #33372](https://github.com/microsoft/fluentui/pull/33372) by beachball)
## [9.6.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.2)
Thu, 28 Nov 2024 09:30:51 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.1..@fluentui/react-motion_v9.6.2)
### Patches
- fix: respect reduced motion in createMotionComponent() ([PR #33357](https://github.com/microsoft/fluentui/pull/33357) by olfedias@microsoft.com)
## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.1)
Mon, 11 Nov 2024 10:00:45 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.0..@fluentui/react-motion_v9.6.1)
### Patches
- chore: replace npm-scripts and just-scrtips with nx inferred tasks ([PR #33074](https://github.com/microsoft/fluentui/pull/33074) by martinhochel@microsoft.com)
- Bump @fluentui/react-shared-contexts to v9.21.0 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
- Bump @fluentui/react-utilities to v9.18.17 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
## [9.6.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.0)
Tue, 15 Oct 2024 17:17:53 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.5.2..@fluentui/react-motion_v9.6.0)
### Minor changes
- feat: export MotionParam type ([PR #32939](https://github.com/microsoft/fluentui/pull/32939) by robertpenner@microsoft.com)
- Bump @fluentui/react-shared-contexts to v9.20.2 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
- Bump @fluentui/react-utilities to v9.18.16 ([PR #32999](https://github.com/microsoft/fluentui/pull/32999) by beachball)
## [9.5.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.5.2)
Mon, 23 Sep 2024 12:40:17 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.5.1..@fluentui/react-motion_v9.5.2)
### Patches
- Bump @fluentui/react-shared-contexts to v9.20.1 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
- Bump @fluentui/react-utilities to v9.18.15 ([PR #32840](https://github.com/microsoft/fluentui/pull/32840) by beachball)
## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.5.1)
Tue, 10 Sep 2024 10:19:12 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.5.0..@fluentui/react-motion_v9.5.1)
### Patches
- Bump @fluentui/react-utilities to v9.18.14 ([PR #32494](https://github.com/microsoft/fluentui/pull/32494) by beachball)
## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.5.0)
Fri, 16 Aug 2024 10:24:17 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.4.0..@fluentui/react-motion_v9.5.0)
### Minor changes
- feat: Add context to configure motion behaviour ([PR #32316](https://github.com/microsoft/fluentui/pull/32316) by lingfangao@hotmail.com)
## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.4.0)
Tue, 23 Jul 2024 20:13:12 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.3.0..@fluentui/react-motion_v9.4.0)
### Minor changes
- feat: add presenceMotionSlot() API ([PR #31984](https://github.com/microsoft/fluentui/pull/31984) by olfedias@microsoft.com)
- Bump @fluentui/react-shared-contexts to v9.20.0 ([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)
### Patches
- fix: improve Web Animations API detection in tests ([PR #32029](https://github.com/microsoft/fluentui/pull/32029) by olfedias@microsoft.com)
## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.3.0)
Mon, 15 Jul 2024 17:25:35 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.2.2..@fluentui/react-motion_v9.3.0)
### Minor changes
- feat(motion): add PresenceDirection type ([PR #31958](https://github.com/microsoft/fluentui/pull/31958) by olfedias@microsoft.com)
- Bump @fluentui/react-shared-contexts to v9.19.1 ([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)
### Patches
- fix: revert incorectly set npm versions in all packages ([PR #31937](https://github.com/microsoft/fluentui/pull/31937) by martinhochel@microsoft.com)
- feat: add createPresenceComponentVariant() ([PR #31943](https://github.com/microsoft/fluentui/pull/31943) by olfedias@microsoft.com)
## [9.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.2.2)
Thu, 04 Jul 2024 15:14:35 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.2.1..@fluentui/react-motion_v9.2.2)
### Patches
- fix: Check if DOM is available before using Element global to avoid breaks in build. ([PR #31907](https://github.com/microsoft/fluentui/pull/31907) by estebanmu@microsoft.com)
## [9.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.2.1)
Mon, 01 Jul 2024 20:30:22 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.2.0..@fluentui/react-motion_v9.2.1)
### Patches
- chore: add eslint react-compiler ([PR #31457](https://github.com/microsoft/fluentui/pull/31457) by seanmonahan@microsoft.com)
- fix: improve Jest compat ([PR #31715](https://github.com/microsoft/fluentui/pull/31715) by olfedias@microsoft.com)
- chore: adds 'use no memo' directive ([PR #31787](https://github.com/microsoft/fluentui/pull/31787) by seanmonahan@microsoft.com)
- Bump @fluentui/react-utilities to v9.18.11 ([PR #31861](https://github.com/microsoft/fluentui/pull/31861) by beachball)
## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.2.0)
Mon, 17 Jun 2024 07:34:16 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.1.0..@fluentui/react-motion_v9.2.0)
### Minor changes
- feat: Implement `onMotionCancel` callback handler ([PR #31698](https://github.com/microsoft/fluentui/pull/31698) by lingfangao@hotmail.com)
## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.1.0)
Wed, 12 Jun 2024 13:17:19 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.0.0..@fluentui/react-motion_v9.1.0)
### Minor changes
- feat: add support for params ([PR #31566](https://github.com/microsoft/fluentui/pull/31566) by olfedias@microsoft.com)
- feat: Add consistent start and finish lifecycle callbacks ([PR #31644](https://github.com/microsoft/fluentui/pull/31644) by lingfangao@hotmail.com)
### Patches
- fix(motions): improve compat for jsdom & jest ([PR #31602](https://github.com/microsoft/fluentui/pull/31602) by olfedias@microsoft.com)
## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.0.0)
Thu, 06 Jun 2024 15:26:35 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motions-preview_v0.3.2..@fluentui/react-motion_v9.0.0)
### Minor changes
- feat: release stable ([PR #31574](https://github.com/microsoft/fluentui/pull/31574) by olfedias@microsoft.com)
- Bump @fluentui/react-utilities to v9.18.10 ([PR #31586](https://github.com/microsoft/fluentui/pull/31586) by beachball)
## [0.3.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-motions-preview_v0.3.2)
Mon, 20 May 2024 12:44:59 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motions-preview_v0.3.1..@fluentui/react-motions-preview_v0.3.2)
### Patches
- chore(motions): add mock for .animate() calls ([PR #31390](https://github.com/microsoft/fluentui/pull/31390) by olfedias@microsoft.com)
- Bump @fluentui/react-shared-contexts to v9.19.0 ([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)
## [0.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motions-preview_v0.3.1)
Thu, 16 May 2024 09:25:16 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motions-preview_v0.3.0..@fluentui/react-motions-preview_v0.3.1)
### Patches
- fix(motions): use useFirstMount() in createPresenceComponent() ([PR #31379](https://github.com/microsoft/fluentui/pull/31379) by olfedias@microsoft.com)
## [0.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motions-preview_v0.3.0)
Thu, 09 May 2024 19:35:11 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motions-preview_v0.2.8..@fluentui/react-motions-preview_v0.3.0)
### Minor changes
- BREAKING: fix motion token values and adjust structure to match original source ([PR #31262](https://github.com/microsoft/fluentui/pull/31262) by robert@robertpenner.com)
## [0.2.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-motions-preview_v0.2.8)
Mon, 06 May 2024 12:55:02 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motions-preview_v0.2.7..@fluentui/react-motions-preview_v0.2.8)
### Patches
- Bump @fluentui/react-shared-contexts to v9.18.0 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
- Bump @fluentui/react-utilities to v9.18.8 ([PR #31271](https://github.com/microsoft/fluentui/pull/31271) by beachball)
## [0.2.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-motions-preview_v0.2.7)
Thu, 02 May 2024 11:36:35 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motions-preview_v0.2.6..@fluentui/react-motions-preview_v0.2.7)
### Patches
- fix(PresenceGroup): cleanup children properly ([PR #31175](https://github.com/microsoft/fluentui/pull/31175) by olfedias@microsoft.com)
- chore: improve state handling in createPresenceComponent() ([PR #31143](https://github.com/microsoft/fluentui/pull/31143) by olfedias@microsoft.com)
## [0.2.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-motions-preview_v0.2.6)
Tue, 23 Apr 2024 08:17:49 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motions-preview_v0.2.5..@fluentui/react-motions-preview_v0.2.6)
### Patches
- Bump @fluentui/react-shared-contexts to v9.17.0 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
- Bump @fluentui/react-utilities to v9.18.7 ([PR #31113](https://github.com/microsoft/fluentui/pull/31113) by beachball)
## [0.2.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-motions-preview_v0.2.5)
Tue, 02 Apr 2024 09:48:01 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motions-preview_v0.2.4..@fluentui/react-motions-preview_v0.2.5)
### Patches
- Bump @fluentui/react-shared-contexts to v9.16.0 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
- Bump @fluentui/react-utilities to v9.18.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
## [0.2.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-motions-preview_v0.2.4)
Mon, 18 Mar 2024 19:50:46 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motions-preview_v0.2.3..@fluentui/react-motions-preview_v0.2.4)
### Patches
- Bump @fluentui/react-shared-contexts to v9.15.2 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
- Bump @fluentui/react-utilities to v9.18.5 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
## [0.2.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-motions-preview_v0.2.3)
Fri, 15 Mar 2024 21:43:49 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motions-preview_v0.2.2..@fluentui/react-motions-preview_v0.2.3)
### Patches
- Bump @fluentui/react-shared-contexts to v9.15.1 ([PR #30740](https://github.com/microsoft/fluentui/pull/30740) by beachball)
- Bump @fluentui/react-utilities to v9.18.4 ([PR #30740](https://github.com/microsoft/fluentui/pull/30740) by beachball)
## [0.2.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-motions-preview_v0.2.2)
Thu, 07 Mar 2024 19:33:27 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motions-preview_v0.2.1..@fluentui/react-motions-preview_v0.2.2)
### Patches
- Bump @fluentui/react-shared-contexts to v9.15.0 ([PR #30687](https://github.com/microsoft/fluentui/pull/30687) by beachball)
- Bump @fluentui/react-utilities to v9.18.3 ([PR #30687](https://github.com/microsoft/fluentui/pull/30687) by beachball)
## [0.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motions-preview_v0.2.1)
Wed, 28 Feb 2024 02:34:19 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motions-preview_v0.2.0..@fluentui/react-motions-preview_v0.2.1)
### Patches
- Bump @fluentui/react-shared-contexts to v9.14.1 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
- Bump @fluentui/react-utilities to v9.18.2 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motions-preview_v0.2.0)
Tue, 20 Feb 2024 14:22:22 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motions-preview_v0.1.1..@fluentui/react-motions-preview_v0.2.0)
### Minor changes
- BREAKING: rename createAtom() to createMotionComponent() & createPresence() to createPresenceMotion() ([PR #30550](https://github.com/microsoft/fluentui/pull/30550) by olfedias@microsoft.com)
- BREAKING: remove exports for atom & presence definitions ([PR #30548](https://github.com/microsoft/fluentui/pull/30548) by olfedias@microsoft.com)
- Bump @fluentui/react-utilities to v9.18.1 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
### Patches
- feat: add onMotionFinish() callback to createPresenceComponent() ([PR #30529](https://github.com/microsoft/fluentui/pull/30529) by olfedias@microsoft.com)
- feat: add PresenceGroup component ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by olfedias@microsoft.com)
## [0.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motions-preview_v0.1.1)
Tue, 30 Jan 2024 23:16:54 GMT
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motions-preview_v0.1.0..@fluentui/react-motions-preview_v0.1.1)
### Patches
- Bump @fluentui/react-utilities to v9.18.0 ([PR #29983](https://github.com/microsoft/fluentui/pull/29983) by beachball)
## [0.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motions-preview_v0.1.0)
Tue, 23 Jan 2024 15:10:59 GMT
### Minor changes
- chore: initial release ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by olfedias@microsoft.com)
- Bump @fluentui/react-utilities to v9.17.0 ([PR #30359](https://github.com/microsoft/fluentui/pull/30359) by beachball)

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

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

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

@@ -0,0 +1,5 @@
# @fluentui/react-motion
**React Motions 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.

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

@@ -0,0 +1,344 @@
import type { JSXElement } from '@fluentui/react-utilities';
import type { JSXIntrinsicElementKeys } from '@fluentui/react-utilities';
import * as React_2 from 'react';
import type { SlotComponentType } from '@fluentui/react-utilities';
import type { SlotRenderFunction } from '@fluentui/react-utilities';
declare type AtomCore = {
keyframes: Keyframe[];
} & KeyframeEffectOptions;
export declare type AtomMotion = AtomCore & {
/**
* Allows to specify a reduced motion version of the animation. If provided, the settings will be used when the
* user has enabled the reduced motion setting in the operating system (i.e `prefers-reduced-motion` media query is
* active). If not provided, the duration of the animation will be overridden to be 1ms.
*
* Note, if `keyframes` are provided, they will be used instead of the regular `keyframes`.
*/
reducedMotion?: Partial<AtomCore>;
};
export declare type AtomMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (params: {
element: HTMLElement;
} & MotionParams) => AtomMotion | AtomMotion[];
/**
* Creates a component that will animate the children using the provided motion.
*
* @param value - A motion definition.
*/
export declare function createMotionComponent<MotionParams extends Record<string, MotionParam> = {}>(value: AtomMotion | AtomMotion[] | AtomMotionFn<MotionParams>): MotionComponent<MotionParams>;
/**
* Create a new motion component based on another motion component,
* using the provided variant parameters as defaults.
*
* @param component - A component created by `createMotionComponent`.
* @param variantParams - An object containing the variant parameters to be used as defaults.
* The variant parameters should match the type of the component's motion parameters.
* @returns A new motion component that uses the provided variant parameters as defaults.
* The new component can still accept runtime parameters that override the defaults.
*/
export declare function createMotionComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(component: MotionComponent<MotionParams>, variantParams: Partial<MotionParams>): MotionComponent<MotionParams>;
export declare function createPresenceComponent<MotionParams extends Record<string, MotionParam> = {}>(value: PresenceMotion | PresenceMotionFn<MotionParams>): PresenceComponent<MotionParams>;
/**
* Create a new presence component based on another presence component,
* using the provided variant parameters as defaults.
*
* @param component - A component created by `createPresenceComponent`.
* @param variantParams - An object containing the variant parameters to be used as defaults.
* The variant parameters should match the type of the component's motion parameters.
* @returns A new presence component that uses the provided variant parameters as defaults.
* The new component can still accept runtime parameters that override the defaults.
*/
export declare function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(component: PresenceComponent<MotionParams>, variantParams: Partial<MotionParams>): PresenceComponent<MotionParams>;
export declare const curves: {
readonly curveAccelerateMax: "cubic-bezier(0.9,0.1,1,0.2)";
readonly curveAccelerateMid: "cubic-bezier(1,0,1,1)";
readonly curveAccelerateMin: "cubic-bezier(0.8,0,0.78,1)";
readonly curveDecelerateMax: "cubic-bezier(0.1,0.9,0.2,1)";
readonly curveDecelerateMid: "cubic-bezier(0,0,0,1)";
readonly curveDecelerateMin: "cubic-bezier(0.33,0,0.1,1)";
readonly curveEasyEaseMax: "cubic-bezier(0.8,0,0.2,1)";
readonly curveEasyEase: "cubic-bezier(0.33,0,0.67,1)";
readonly curveLinear: "cubic-bezier(0,0,1,1)";
};
export declare const durations: {
readonly durationUltraFast: 50;
readonly durationFaster: 100;
readonly durationFast: 150;
readonly durationNormal: 200;
readonly durationGentle: 250;
readonly durationSlow: 300;
readonly durationSlower: 400;
readonly durationUltraSlow: 500;
};
/**
* A private symbol to store the motion definition on the component for variants.
*
* @internal
*/
declare const MOTION_DEFINITION: unique symbol;
export declare const MotionBehaviourProvider: React_2.Provider<MotionBehaviourType | undefined>;
/**
* Specifies the behaviour of child motion component under @see MotionBehaviourProvider.
*/
declare type MotionBehaviourType = 'skip' | 'default';
export declare type MotionComponent<MotionParams extends Record<string, MotionParam> = {}> = React_2.FC<MotionComponentProps & MotionParams> & {
[MOTION_DEFINITION]: AtomMotionFn<MotionParams>;
};
export declare type MotionComponentProps = {
children: JSXElement;
/** Provides imperative controls for the animation. */
imperativeRef?: React_2.Ref<MotionImperativeRef | undefined>;
/**
* Callback that is called when the whole motion finishes.
*
* A motion definition can contain multiple animations and therefore multiple "finish" events. The callback is
* triggered once all animations have finished with "null" instead of an event object to avoid ambiguity.
*/
onMotionFinish?: (ev: null) => void;
/**
* Callback that is called when the whole motion is cancelled.
*
* A motion definition can contain multiple animations and therefore multiple "cancel" events. The callback is
* triggered once all animations have been cancelled with "null" instead of an event object to avoid ambiguity.
*/
onMotionCancel?: (ev: null) => void;
/**
* Callback that is called when the whole motion starts.
*
* A motion definition can contain multiple animations and therefore multiple "start" events. The callback is
* triggered when the first animation is started. There is no official "start" event with the Web Animations API.
* so the callback is triggered with "null".
*/
onMotionStart?: (ev: null) => void;
};
export declare type MotionImperativeRef = {
/** Sets the playback rate of the animation, where 1 is normal speed. */
setPlaybackRate: (rate: number) => void;
/** Sets the state of the animation to running or paused. */
setPlayState: (state: 'running' | 'paused') => void;
};
/**
* A motion param should be a primitive value that can be serialized to JSON and could be potentially used a plain
* dependency for React hooks.
*/
export declare type MotionParam = boolean | number | string;
/**
* A component that forwards a ref to its children via a React context.
* This is used to pass a motion component's ref through to the actual surface element,
* since motion components wrap their children and the ref needs to reach the inner element.
*
* @internal
*/
export declare const MotionRefForwarder: React_2.ForwardRefExoticComponent<{
children?: React_2.ReactElement;
} & React_2.RefAttributes<HTMLElement>>;
/**
* Resets the MotionRefForwarder context to `undefined` for its children.
* Render this in components that consume `useMotionForwardedRef()` and render
* arbitrary user content, to prevent the context from leaking to descendants.
*
* @internal
*/
export declare const MotionRefForwarderReset: React_2.FC<{
children: React_2.ReactElement;
}>;
export declare function motionSlot<MotionParams extends Record<string, MotionParam> = {}>(motion: MotionSlotProps<MotionParams> | null | undefined, options: {
elementType: React_2.FC<MotionComponentProps & MotionParams>;
defaultProps: MotionSlotRenderProps & MotionParams;
}): SlotComponentType<MotionSlotRenderProps & MotionParams>;
export declare type MotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<MotionComponentProps, 'imperativeRef' | 'onMotionFinish' | 'onMotionStart' | 'onMotionCancel'> & {
/**
* @deprecated Do not use. Motion Slots do not support intrinsic elements.
*
* If you want to override the animation, use the children render function instead.
*/
as?: JSXIntrinsicElementKeys;
children?: SlotRenderFunction<MotionSlotRenderProps & MotionParams & {
children: JSXElement;
}>;
};
/**
* @internal
*/
declare type MotionSlotRenderProps = Pick<MotionComponentProps, 'onMotionFinish' | 'onMotionStart' | 'onMotionCancel'>;
export declare const motionTokens: {
curveAccelerateMax: "cubic-bezier(0.9,0.1,1,0.2)";
curveAccelerateMid: "cubic-bezier(1,0,1,1)";
curveAccelerateMin: "cubic-bezier(0.8,0,0.78,1)";
curveDecelerateMax: "cubic-bezier(0.1,0.9,0.2,1)";
curveDecelerateMid: "cubic-bezier(0,0,0,1)";
curveDecelerateMin: "cubic-bezier(0.33,0,0.1,1)";
curveEasyEaseMax: "cubic-bezier(0.8,0,0.2,1)";
curveEasyEase: "cubic-bezier(0.33,0,0.67,1)";
curveLinear: "cubic-bezier(0,0,1,1)";
durationUltraFast: 50;
durationFaster: 100;
durationFast: 150;
durationNormal: 200;
durationGentle: 250;
durationSlow: 300;
durationSlower: 400;
durationUltraSlow: 500;
};
/**
* A private symbol to store the motion definition on the component for variants.
*
* @internal
*/
declare const PRESENCE_MOTION_DEFINITION: unique symbol;
export declare type PresenceComponent<MotionParams extends Record<string, MotionParam> = {}> = React_2.FC<PresenceComponentProps & MotionParams> & {
(props: PresenceComponentProps & MotionParams): JSXElement | null;
[PRESENCE_MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;
In: React_2.FC<MotionComponentProps & MotionParams>;
Out: React_2.FC<MotionComponentProps & MotionParams>;
};
export declare type PresenceComponentProps = {
/**
* By default, the child component won't execute the "enter" motion when it initially mounts, regardless of the value
* of "visible". If you desire this behavior, ensure both "appear" and "visible" are set to "true".
*/
appear?: boolean;
/** A React element that will be cloned and will have motion effects applied to it. */
children: JSXElement;
/** Provides imperative controls for the animation. */
imperativeRef?: React_2.Ref<MotionImperativeRef | undefined>;
/**
* Callback that is called when the whole motion finishes.
*
* A motion definition can contain multiple animations and therefore multiple "finish" events. The callback is
* triggered once all animations have finished with "null" instead of an event object to avoid ambiguity.
*/
onMotionFinish?: (ev: null, data: {
direction: PresenceDirection;
}) => void;
/**
* Callback that is called when the whole motion is cancelled. When a motion is cancelled it does not
* emit a finish event but a specific cancel event
*
* A motion definition can contain multiple animations and therefore multiple "finish" events. The callback is
* triggered once all animations have finished with "null" instead of an event object to avoid ambiguity.
*/
onMotionCancel?: (ev: null, data: {
direction: PresenceDirection;
}) => void;
/**
* Callback that is called when the whole motion starts.
*
* A motion definition can contain multiple animations and therefore multiple "start" events. The callback is
* triggered when the first animation is started. There is no official "start" event with the Web Animations API.
* so the callback is triggered with "null".
*/
onMotionStart?: (ev: null, data: {
direction: PresenceDirection;
}) => void;
/** Defines whether a component is visible; triggers the "enter" or "exit" motions. */
visible?: boolean;
/**
* By default, the child component remains mounted after it reaches the "finished" state. Set "unmountOnExit" if
* you prefer to unmount the component after it finishes exiting.
*/
unmountOnExit?: boolean;
};
export declare type PresenceDirection = 'enter' | 'exit';
export declare class PresenceGroup extends React_2.Component<PresenceGroupProps, PresenceGroupState> {
private mounted;
static getDerivedStateFromProps(nextProps: PresenceGroupProps, { childMapping: prevChildMapping, firstRender }: PresenceGroupState): PresenceGroupState;
constructor(props: PresenceGroupProps, context?: unknown);
private handleExit;
componentDidMount(): void;
componentWillUnmount(): void;
render(): JSXElement;
}
declare type PresenceGroupChild = {
element: JSXElement;
appear: boolean;
visible: boolean;
unmountOnExit: boolean;
};
export declare type PresenceGroupChildContextValue = {
appear: boolean;
visible: boolean;
unmountOnExit: boolean;
onExit: () => void;
};
declare type PresenceGroupChildMapping = Record<string, PresenceGroupChild>;
export declare const PresenceGroupChildProvider: React_2.Provider<PresenceGroupChildContextValue | undefined>;
declare type PresenceGroupProps = {
children: React_2.ReactNode;
};
declare type PresenceGroupState = {
childMapping: PresenceGroupChildMapping;
firstRender: boolean;
};
export declare type PresenceMotion = Record<PresenceDirection, AtomMotion | AtomMotion[]>;
export declare type PresenceMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (params: {
element: HTMLElement;
} & MotionParams) => PresenceMotion;
export declare function presenceMotionSlot<MotionParams extends Record<string, MotionParam> = {}>(motion: PresenceMotionSlotProps<MotionParams> | null | undefined, options: {
elementType: React_2.FC<PresenceComponentProps & MotionParams>;
defaultProps: PresenceMotionSlotRenderProps & MotionParams;
}): SlotComponentType<PresenceMotionSlotRenderProps & MotionParams>;
export declare type PresenceMotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<PresenceComponentProps, 'imperativeRef' | 'onMotionFinish' | 'onMotionStart'> & {
/**
* @deprecated Do not use. Presence Motion Slots do not support intrinsic elements.
*
* If you want to override the animation, use the children render function instead.
*/
as?: JSXIntrinsicElementKeys;
children?: SlotRenderFunction<PresenceMotionSlotRenderProps & MotionParams & {
children: JSXElement;
}>;
};
/**
* @internal
*/
declare type PresenceMotionSlotRenderProps = Pick<PresenceComponentProps, 'appear' | 'onMotionFinish' | 'onMotionStart' | 'unmountOnExit' | 'visible'>;
/**
* A hook that reads the ref forwarded by `MotionRefForwarder` from context.
* Used in child components to merge the motion ref into the root slot ref.
*
* @internal
*/
export declare function useMotionForwardedRef(): React_2.Ref<HTMLElement> | undefined;
export declare const usePresenceGroupChildContext: () => PresenceGroupChildContextValue | undefined;
export { }

View File

@@ -0,0 +1,40 @@
'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, {
MotionRefForwarder: function() {
return MotionRefForwarder;
},
MotionRefForwarderReset: function() {
return MotionRefForwarderReset;
},
useMotionForwardedRef: function() {
return useMotionForwardedRef;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const MotionRefForwarderContext = /*#__PURE__*/ _react.createContext(undefined);
function useMotionForwardedRef() {
return _react.useContext(MotionRefForwarderContext);
}
const MotionRefForwarder = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
return /*#__PURE__*/ _react.createElement(MotionRefForwarderContext.Provider, {
value: ref
}, props.children);
});
MotionRefForwarder.displayName = 'MotionRefForwarder';
const MotionRefForwarderReset = (props)=>{
return /*#__PURE__*/ _react.createElement(MotionRefForwarderContext.Provider, {
value: undefined
}, props.children);
};
MotionRefForwarderReset.displayName = 'MotionRefForwarderReset';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MotionRefForwarder.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nconst MotionRefForwarderContext = React.createContext<React.Ref<HTMLElement> | undefined>(undefined);\n\n/**\n * A hook that reads the ref forwarded by `MotionRefForwarder` from context.\n * Used in child components to merge the motion ref into the root slot ref.\n *\n * @internal\n */\nexport function useMotionForwardedRef(): React.Ref<HTMLElement> | undefined {\n return React.useContext(MotionRefForwarderContext);\n}\n\n/**\n * A component that forwards a ref to its children via a React context.\n * This is used to pass a motion component's ref through to the actual surface element,\n * since motion components wrap their children and the ref needs to reach the inner element.\n *\n * @internal\n */\nexport const MotionRefForwarder = React.forwardRef<HTMLElement, { children?: React.ReactElement }>((props, ref) => {\n return <MotionRefForwarderContext.Provider value={ref}>{props.children}</MotionRefForwarderContext.Provider>;\n});\n\nMotionRefForwarder.displayName = 'MotionRefForwarder';\n\n/**\n * Resets the MotionRefForwarder context to `undefined` for its children.\n * Render this in components that consume `useMotionForwardedRef()` and render\n * arbitrary user content, to prevent the context from leaking to descendants.\n *\n * @internal\n */\nexport const MotionRefForwarderReset: React.FC<{ children: React.ReactElement }> = props => {\n return <MotionRefForwarderContext.Provider value={undefined}>{props.children}</MotionRefForwarderContext.Provider>;\n};\n\nMotionRefForwarderReset.displayName = 'MotionRefForwarderReset';\n"],"names":["MotionRefForwarder","MotionRefForwarderReset","useMotionForwardedRef","MotionRefForwarderContext","React","createContext","undefined","useContext","forwardRef","props","ref","Provider","value","children","displayName"],"mappings":"AAAA;;;;;;;;;;;;IAuBaA,kBAAkB;eAAlBA;;IAaAC,uBAAuB;eAAvBA;;IAxBGC,qBAAqB;eAArBA;;;;iEAVO;AAEvB,MAAMC,0CAA4BC,OAAMC,aAAa,CAAqCC;AAQnF,SAASJ;IACd,OAAOE,OAAMG,UAAU,CAACJ;AAC1B;AASO,MAAMH,mCAAqBI,OAAMI,UAAU,CAAiD,CAACC,OAAOC;IACzG,qBAAO,qBAACP,0BAA0BQ,QAAQ;QAACC,OAAOF;OAAMD,MAAMI,QAAQ;AACxE;AAEAb,mBAAmBc,WAAW,GAAG;AAS1B,MAAMb,0BAAsEQ,CAAAA;IACjF,qBAAO,qBAACN,0BAA0BQ,QAAQ;QAACC,OAAON;OAAYG,MAAMI,QAAQ;AAC9E;AAEAZ,wBAAwBa,WAAW,GAAG"}

View File

@@ -0,0 +1,65 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "PresenceGroup", {
enumerable: true,
get: function() {
return PresenceGroup;
}
});
const _define_property = require("@swc/helpers/_/_define_property");
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _getNextChildMapping = require("../utils/groups/getNextChildMapping");
const _getChildMapping = require("../utils/groups/getChildMapping");
const _PresenceGroupItemProvider = require("./PresenceGroupItemProvider");
class PresenceGroup extends _react.Component {
static getDerivedStateFromProps(nextProps, { childMapping: prevChildMapping, firstRender }) {
const nextChildMapping = (0, _getChildMapping.getChildMapping)(nextProps.children);
return {
childMapping: firstRender ? nextChildMapping : (0, _getNextChildMapping.getNextChildMapping)(prevChildMapping, nextChildMapping),
firstRender: false
};
}
componentDidMount() {
this.mounted = true;
}
componentWillUnmount() {
this.mounted = false;
}
render() {
return /*#__PURE__*/ _react.createElement(_react.Fragment, null, Object.entries(this.state.childMapping).map(([childKey, childProps])=>/*#__PURE__*/ _react.createElement(_PresenceGroupItemProvider.PresenceGroupItemProvider, {
...childProps,
childKey: childKey,
key: childKey,
onExit: this.handleExit
}, childProps.element)));
}
constructor(props, context){
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - React.Component constructor has only one argument in React 19
super(props, context), _define_property._(this, "mounted", false), _define_property._(this, "handleExit", (childKey)=>{
const currentChildMapping = (0, _getChildMapping.getChildMapping)(this.props.children);
if (childKey in currentChildMapping) {
return;
}
if (this.mounted) {
this.setState((state)=>{
const childMapping = {
...state.childMapping
};
delete childMapping[childKey];
return {
childMapping
};
});
}
});
this.state = {
childMapping: {},
firstRender: true
};
}
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PresenceGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { getNextChildMapping } from '../utils/groups/getNextChildMapping';\nimport { getChildMapping } from '../utils/groups/getChildMapping';\nimport type { PresenceGroupChildMapping } from '../utils/groups/types';\nimport { PresenceGroupItemProvider } from './PresenceGroupItemProvider';\n\ntype PresenceGroupProps = {\n children: React.ReactNode;\n};\n\ntype PresenceGroupState = {\n childMapping: PresenceGroupChildMapping;\n firstRender: boolean;\n};\n\n/* eslint-disable @typescript-eslint/explicit-member-accessibility */\n/* eslint-disable @typescript-eslint/naming-convention */\n/* eslint-disable @typescript-eslint/member-ordering */\n\nexport class PresenceGroup extends React.Component<PresenceGroupProps, PresenceGroupState> {\n private mounted: boolean = false;\n\n static getDerivedStateFromProps(\n nextProps: PresenceGroupProps,\n { childMapping: prevChildMapping, firstRender }: PresenceGroupState,\n ): PresenceGroupState {\n const nextChildMapping = getChildMapping(nextProps.children);\n\n return {\n childMapping: firstRender ? nextChildMapping : getNextChildMapping(prevChildMapping, nextChildMapping),\n firstRender: false,\n };\n }\n\n constructor(props: PresenceGroupProps, context?: unknown) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore - React.Component constructor has only one argument in React 19\n super(props, context);\n\n this.state = {\n childMapping: {},\n firstRender: true,\n };\n }\n\n private handleExit = (childKey: string): void => {\n const currentChildMapping = getChildMapping(this.props.children);\n\n if (childKey in currentChildMapping) {\n return;\n }\n\n if (this.mounted) {\n this.setState(state => {\n const childMapping = { ...state.childMapping };\n delete childMapping[childKey];\n\n return { childMapping };\n });\n }\n };\n\n componentDidMount(): void {\n this.mounted = true;\n }\n\n componentWillUnmount(): void {\n this.mounted = false;\n }\n render(): JSXElement {\n return (\n <>\n {Object.entries(this.state.childMapping).map(([childKey, childProps]) => (\n <PresenceGroupItemProvider {...childProps} childKey={childKey} key={childKey} onExit={this.handleExit}>\n {childProps.element}\n </PresenceGroupItemProvider>\n ))}\n </>\n );\n }\n}\n"],"names":["PresenceGroup","React","Component","getDerivedStateFromProps","nextProps","childMapping","prevChildMapping","firstRender","nextChildMapping","getChildMapping","children","getNextChildMapping","componentDidMount","mounted","componentWillUnmount","render","Object","entries","state","map","childKey","childProps","PresenceGroupItemProvider","key","onExit","handleExit","element","constructor","props","context","currentChildMapping","setState"],"mappings":"AAAA;;;;;+BAsBaA;;;eAAAA;;;;;iEApBU;qCAEa;iCACJ;2CAEU;AAenC,MAAMA,sBAAsBC,OAAMC,SAAS;IAGhD,OAAOC,yBACLC,SAA6B,EAC7B,EAAEC,cAAcC,gBAAgB,EAAEC,WAAW,EAAsB,EAC/C;QACpB,MAAMC,mBAAmBC,IAAAA,gCAAe,EAACL,UAAUM,QAAQ;QAE3D,OAAO;YACLL,cAAcE,cAAcC,mBAAmBG,IAAAA,wCAAmB,EAACL,kBAAkBE;YACrFD,aAAa;QACf;IACF;IA8BAK,oBAA0B;QACxB,IAAI,CAACC,OAAO,GAAG;IACjB;IAEAC,uBAA6B;QAC3B,IAAI,CAACD,OAAO,GAAG;IACjB;IACAE,SAAqB;QACnB,qBACE,4CACGC,OAAOC,OAAO,CAAC,IAAI,CAACC,KAAK,CAACb,YAAY,EAAEc,GAAG,CAAC,CAAC,CAACC,UAAUC,WAAW,iBAClE,qBAACC,oDAAyB;gBAAE,GAAGD,UAAU;gBAAED,UAAUA;gBAAUG,KAAKH;gBAAUI,QAAQ,IAAI,CAACC,UAAU;eAClGJ,WAAWK,OAAO;IAK7B;IA7CAC,YAAYC,KAAyB,EAAEC,OAAiB,CAAE;QACxD,6DAA6D;QAC7D,6EAA6E;QAC7E,KAAK,CAACD,OAAOC,UAjBf,yBAAQhB,WAAmB,QAyB3B,yBAAQY,cAAa,CAACL;YACpB,MAAMU,sBAAsBrB,IAAAA,gCAAe,EAAC,IAAI,CAACmB,KAAK,CAAClB,QAAQ;YAE/D,IAAIU,YAAYU,qBAAqB;gBACnC;YACF;YAEA,IAAI,IAAI,CAACjB,OAAO,EAAE;gBAChB,IAAI,CAACkB,QAAQ,CAACb,CAAAA;oBACZ,MAAMb,eAAe;wBAAE,GAAGa,MAAMb,YAAY;oBAAC;oBAC7C,OAAOA,YAAY,CAACe,SAAS;oBAE7B,OAAO;wBAAEf;oBAAa;gBACxB;YACF;QACF;QArBE,IAAI,CAACa,KAAK,GAAG;YACXb,cAAc,CAAC;YACfE,aAAa;QACf;IACF;AAqCF"}

View File

@@ -0,0 +1,32 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "PresenceGroupItemProvider", {
enumerable: true,
get: function() {
return PresenceGroupItemProvider;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _PresenceGroupChildContext = require("../contexts/PresenceGroupChildContext");
const PresenceGroupItemProvider = (props)=>{
const { appear, childKey, onExit, visible, unmountOnExit } = props;
const contextValue = _react.useMemo(()=>({
appear,
visible,
onExit: ()=>onExit(childKey),
unmountOnExit
}), [
appear,
childKey,
onExit,
visible,
unmountOnExit
]);
return /*#__PURE__*/ _react.createElement(_PresenceGroupChildContext.PresenceGroupChildContext.Provider, {
value: contextValue
}, props.children);
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PresenceGroupItemProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport type { PresenceGroupChildContextValue } from '../contexts/PresenceGroupChildContext';\n\ntype PresenceGroupItemProviderProps = Omit<PresenceGroupChildContextValue, 'onExit'> & {\n children: JSXElement;\n childKey: string;\n // That's an internal callback, so we don't need to enforce the type here\n // eslint-disable-next-line @nx/workspace-consistent-callback-type\n onExit: (childKey: string) => void;\n};\n\n/**\n * Provides context for a single child of a `PresenceGroup`. Exists only to make a stable context value for a child.\n * Not intended for direct use.\n *\n * @internal\n */\nexport const PresenceGroupItemProvider: React.FC<PresenceGroupItemProviderProps> = props => {\n const { appear, childKey, onExit, visible, unmountOnExit } = props;\n const contextValue = React.useMemo(\n () => ({\n appear,\n visible,\n onExit: () => onExit(childKey),\n unmountOnExit,\n }),\n [appear, childKey, onExit, visible, unmountOnExit],\n );\n\n return <PresenceGroupChildContext.Provider value={contextValue}>{props.children}</PresenceGroupChildContext.Provider>;\n};\n"],"names":["PresenceGroupItemProvider","props","appear","childKey","onExit","visible","unmountOnExit","contextValue","React","useMemo","PresenceGroupChildContext","Provider","value","children"],"mappings":"AAAA;;;;;+BAsBaA;;;eAAAA;;;;iEApBU;2CAGmB;AAiBnC,MAAMA,4BAAsEC,CAAAA;IACjF,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,aAAa,EAAE,GAAGL;IAC7D,MAAMM,eAAeC,OAAMC,OAAO,CAChC,IAAO,CAAA;YACLP;YACAG;YACAD,QAAQ,IAAMA,OAAOD;YACrBG;QACF,CAAA,GACA;QAACJ;QAAQC;QAAUC;QAAQC;QAASC;KAAc;IAGpD,qBAAO,qBAACI,oDAAyB,CAACC,QAAQ;QAACC,OAAOL;OAAeN,MAAMY,QAAQ;AACjF"}

View File

@@ -0,0 +1,27 @@
'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, {
MotionBehaviourProvider: function() {
return MotionBehaviourProvider;
},
useMotionBehaviourContext: function() {
return useMotionBehaviourContext;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const MotionBehaviourContext = _react.createContext(undefined);
const MotionBehaviourProvider = MotionBehaviourContext.Provider;
const useMotionBehaviourContext = ()=>{
var _React_useContext;
return (_React_useContext = _react.useContext(MotionBehaviourContext)) !== null && _React_useContext !== void 0 ? _React_useContext : 'default';
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/MotionBehaviourContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\n/**\n * Specifies the behaviour of child motion component under @see MotionBehaviourProvider.\n */\nexport type MotionBehaviourType = 'skip' | 'default';\n\nconst MotionBehaviourContext = React.createContext<MotionBehaviourType | undefined>(undefined);\n\nexport const MotionBehaviourProvider = MotionBehaviourContext.Provider;\nexport const useMotionBehaviourContext = (): MotionBehaviourType =>\n React.useContext(MotionBehaviourContext) ?? 'default';\n"],"names":["MotionBehaviourProvider","useMotionBehaviourContext","MotionBehaviourContext","React","createContext","undefined","Provider","useContext"],"mappings":"AAAA;;;;;;;;;;;;IAWaA,uBAAuB;eAAvBA;;IACAC,yBAAyB;eAAzBA;;;;iEAVU;AAOvB,MAAMC,yBAAyBC,OAAMC,aAAa,CAAkCC;AAE7E,MAAML,0BAA0BE,uBAAuBI,QAAQ;AAC/D,MAAML,4BAA4B;QACvCE;WAAAA,CAAAA,oBAAAA,OAAMI,UAAU,CAACL,qCAAjBC,+BAAAA,oBAA4C"}

View File

@@ -0,0 +1,27 @@
'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, {
PresenceGroupChildContext: function() {
return PresenceGroupChildContext;
},
PresenceGroupChildProvider: function() {
return PresenceGroupChildProvider;
},
usePresenceGroupChildContext: function() {
return usePresenceGroupChildContext;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const PresenceGroupChildContext = _react.createContext(undefined);
const PresenceGroupChildProvider = PresenceGroupChildContext.Provider;
const usePresenceGroupChildContext = ()=>_react.useContext(PresenceGroupChildContext);

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/PresenceGroupChildContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nexport type PresenceGroupChildContextValue = {\n appear: boolean;\n visible: boolean;\n unmountOnExit: boolean;\n\n onExit: () => void;\n};\n\n/**\n * @internal\n */\nexport const PresenceGroupChildContext = React.createContext<PresenceGroupChildContextValue | undefined>(undefined);\n\nexport const PresenceGroupChildProvider = PresenceGroupChildContext.Provider;\nexport const usePresenceGroupChildContext = (): PresenceGroupChildContextValue | undefined =>\n React.useContext(PresenceGroupChildContext);\n"],"names":["PresenceGroupChildContext","PresenceGroupChildProvider","usePresenceGroupChildContext","React","createContext","undefined","Provider","useContext"],"mappings":"AAAA;;;;;;;;;;;;IAeaA,yBAAyB;eAAzBA;;IAEAC,0BAA0B;eAA1BA;;IACAC,4BAA4B;eAA5BA;;;;iEAhBU;AAahB,MAAMF,4BAA4BG,OAAMC,aAAa,CAA6CC;AAElG,MAAMJ,6BAA6BD,0BAA0BM,QAAQ;AACrE,MAAMJ,+BAA+B,IAC1CC,OAAMI,UAAU,CAACP"}

View File

@@ -0,0 +1,96 @@
'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, {
MOTION_DEFINITION: function() {
return MOTION_DEFINITION;
},
createMotionComponent: function() {
return createMotionComponent;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reactutilities = require("@fluentui/react-utilities");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _useAnimateAtoms = require("../hooks/useAnimateAtoms");
const _useMotionImperativeRef = require("../hooks/useMotionImperativeRef");
const _useIsReducedMotion = require("../hooks/useIsReducedMotion");
const _useChildElement = require("../utils/useChildElement");
const _MotionBehaviourContext = require("../contexts/MotionBehaviourContext");
const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');
function createMotionComponent(value) {
const Atom = (props)=>{
'use no memo';
const { children, imperativeRef, onMotionFinish: onMotionFinishProp, onMotionStart: onMotionStartProp, onMotionCancel: onMotionCancelProp, ..._rest } = props;
const params = _rest;
const [child, childRef] = (0, _useChildElement.useChildElement)(children);
const handleRef = (0, _useMotionImperativeRef.useMotionImperativeRef)(imperativeRef);
const skipMotions = (0, _MotionBehaviourContext.useMotionBehaviourContext)() === 'skip';
const optionsRef = _react.useRef({
skipMotions,
params
});
const animateAtoms = (0, _useAnimateAtoms.useAnimateAtoms)();
const isReducedMotion = (0, _useIsReducedMotion.useIsReducedMotion)();
const onMotionStart = (0, _reactutilities.useEventCallback)(()=>{
onMotionStartProp === null || onMotionStartProp === void 0 ? void 0 : onMotionStartProp(null);
});
const onMotionFinish = (0, _reactutilities.useEventCallback)(()=>{
onMotionFinishProp === null || onMotionFinishProp === void 0 ? void 0 : onMotionFinishProp(null);
});
const onMotionCancel = (0, _reactutilities.useEventCallback)(()=>{
onMotionCancelProp === null || onMotionCancelProp === void 0 ? void 0 : onMotionCancelProp(null);
});
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
// Heads up!
// We store the params in a ref to avoid re-rendering the component when the params change.
optionsRef.current = {
skipMotions,
params
};
});
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
const element = childRef.current;
if (element) {
const atoms = typeof value === 'function' ? value({
element,
...optionsRef.current.params
}) : value;
onMotionStart();
const handle = animateAtoms(element, atoms, {
isReducedMotion: isReducedMotion()
});
handleRef.current = handle;
handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);
if (optionsRef.current.skipMotions) {
handle.finish();
}
return ()=>{
handle.cancel();
};
}
}, [
animateAtoms,
childRef,
handleRef,
isReducedMotion,
onMotionFinish,
onMotionStart,
onMotionCancel
]);
return child;
};
return Object.assign(Atom, {
// Heads up!
// Always normalize it to a function to simplify types
[MOTION_DEFINITION]: typeof value === 'function' ? value : ()=>value
});
}

File diff suppressed because one or more lines are too long

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, {
createMotionComponentVariant: function() {
return createMotionComponentVariant;
},
createMotionFnVariant: function() {
return createMotionFnVariant;
}
});
const _createMotionComponent = require("./createMotionComponent");
function createMotionFnVariant(motionFn, variantParams) {
const variantFn = (runtimeParams)=>motionFn({
...variantParams,
...runtimeParams
});
return variantFn;
}
function createMotionComponentVariant(component, variantParams) {
const originalFn = component[_createMotionComponent.MOTION_DEFINITION];
// The variant params become new defaults, but they can still be overridden by runtime params.
const variantFn = createMotionFnVariant(originalFn, variantParams);
return (0, _createMotionComponent.createMotionComponent)(variantFn);
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/factories/createMotionComponentVariant.ts"],"sourcesContent":["import type { MotionParam, AtomMotionFn } from '../types';\nimport { MOTION_DEFINITION, createMotionComponent, MotionComponent } from './createMotionComponent';\n\n/**\n * Create a variant function that wraps a motion function to customize it.\n * The new motion function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n *\n * @internal\n */\nexport function createMotionFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n motionFn: AtomMotionFn<MotionParams>,\n variantParams: Partial<MotionParams>,\n): typeof motionFn {\n const variantFn: typeof motionFn = runtimeParams => motionFn({ ...variantParams, ...runtimeParams });\n return variantFn;\n}\n\n/**\n * Create a new motion component based on another motion component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createMotionComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new motion component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createMotionComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n component: MotionComponent<MotionParams>,\n variantParams: Partial<MotionParams>,\n): MotionComponent<MotionParams> {\n const originalFn = component[MOTION_DEFINITION];\n // The variant params become new defaults, but they can still be overridden by runtime params.\n const variantFn = createMotionFnVariant(originalFn, variantParams);\n return createMotionComponent(variantFn);\n}\n"],"names":["createMotionComponentVariant","createMotionFnVariant","motionFn","variantParams","variantFn","runtimeParams","component","originalFn","MOTION_DEFINITION","createMotionComponent"],"mappings":";;;;;;;;;;;IA4BgBA,4BAA4B;eAA5BA;;IAlBAC,qBAAqB;eAArBA;;;uCAT0D;AASnE,SAASA,sBACdC,QAAoC,EACpCC,aAAoC;IAEpC,MAAMC,YAA6BC,CAAAA,gBAAiBH,SAAS;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IAClG,OAAOD;AACT;AAYO,SAASJ,6BACdM,SAAwC,EACxCH,aAAoC;IAEpC,MAAMI,aAAaD,SAAS,CAACE,wCAAiB,CAAC;IAC/C,8FAA8F;IAC9F,MAAMJ,YAAYH,sBAAsBM,YAAYJ;IACpD,OAAOM,IAAAA,4CAAqB,EAACL;AAC/B"}

View File

@@ -0,0 +1,183 @@
'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, {
PRESENCE_MOTION_DEFINITION: function() {
return PRESENCE_MOTION_DEFINITION;
},
createPresenceComponent: function() {
return createPresenceComponent;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reactutilities = require("@fluentui/react-utilities");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _PresenceGroupChildContext = require("../contexts/PresenceGroupChildContext");
const _useAnimateAtoms = require("../hooks/useAnimateAtoms");
const _useMotionImperativeRef = require("../hooks/useMotionImperativeRef");
const _useMountedState = require("../hooks/useMountedState");
const _useIsReducedMotion = require("../hooks/useIsReducedMotion");
const _useChildElement = require("../utils/useChildElement");
const _MotionBehaviourContext = require("../contexts/MotionBehaviourContext");
const _createMotionComponent = require("./createMotionComponent");
const PRESENCE_MOTION_DEFINITION = Symbol('PRESENCE_MOTION_DEFINITION');
const INTERRUPTABLE_MOTION_SYMBOL = Symbol.for('interruptablePresence');
function createPresenceComponent(value) {
return Object.assign((props)=>{
'use no memo';
const itemContext = _react.useContext(_PresenceGroupChildContext.PresenceGroupChildContext);
const merged = {
...itemContext,
...props
};
const skipMotions = (0, _MotionBehaviourContext.useMotionBehaviourContext)() === 'skip';
const { appear, children, imperativeRef, onExit, onMotionFinish, onMotionStart, onMotionCancel, visible, unmountOnExit, ..._rest } = merged;
const params = _rest;
const [mounted, setMounted] = (0, _useMountedState.useMountedState)(visible, unmountOnExit);
const [child, childRef] = (0, _useChildElement.useChildElement)(children, mounted);
const handleRef = (0, _useMotionImperativeRef.useMotionImperativeRef)(imperativeRef);
const optionsRef = _react.useRef({
appear,
params,
skipMotions
});
const animateAtoms = (0, _useAnimateAtoms.useAnimateAtoms)();
const isFirstMount = (0, _reactutilities.useFirstMount)();
const isReducedMotion = (0, _useIsReducedMotion.useIsReducedMotion)();
const handleMotionStart = (0, _reactutilities.useEventCallback)((direction)=>{
onMotionStart === null || onMotionStart === void 0 ? void 0 : onMotionStart(null, {
direction
});
});
const handleMotionFinish = (0, _reactutilities.useEventCallback)((direction)=>{
onMotionFinish === null || onMotionFinish === void 0 ? void 0 : onMotionFinish(null, {
direction
});
if (direction === 'exit' && unmountOnExit) {
setMounted(false);
onExit === null || onExit === void 0 ? void 0 : onExit();
}
});
const handleMotionCancel = (0, _reactutilities.useEventCallback)((direction)=>{
onMotionCancel === null || onMotionCancel === void 0 ? void 0 : onMotionCancel(null, {
direction
});
});
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
// Heads up!
// We store the params in a ref to avoid re-rendering the component when the params change.
optionsRef.current = {
appear,
params,
skipMotions
};
});
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
const element = childRef.current;
if (!element) {
return;
}
let handle;
function cleanup() {
if (!handle) {
return;
}
// Heads up!
//
// If the animation is interruptible & is running, we don't want to cancel it as it will be reversed in
// the next effect.
if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION && handle.isRunning()) {
return;
}
handle.cancel();
handleRef.current = undefined;
}
const presenceMotion = typeof value === 'function' ? value({
element,
...optionsRef.current.params
}) : value;
const IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION = presenceMotion[INTERRUPTABLE_MOTION_SYMBOL];
if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION) {
handle = handleRef.current;
if (handle && handle.isRunning()) {
handle.reverse();
return cleanup;
}
}
const atoms = visible ? presenceMotion.enter : presenceMotion.exit;
const direction = visible ? 'enter' : 'exit';
// Heads up!
// Initial styles are applied when the component is mounted for the first time and "appear" is set to "false" (otherwise animations are triggered)
const applyInitialStyles = !optionsRef.current.appear && isFirstMount;
const skipAnimationByConfig = optionsRef.current.skipMotions;
if (!applyInitialStyles) {
handleMotionStart(direction);
}
handle = animateAtoms(element, atoms, {
isReducedMotion: isReducedMotion()
});
if (applyInitialStyles) {
// Heads up!
// .finish() is used in this case to skip animation and apply animation styles immediately
handle.finish();
return cleanup;
}
handleRef.current = handle;
handle.setMotionEndCallbacks(()=>handleMotionFinish(direction), ()=>handleMotionCancel(direction));
if (skipAnimationByConfig) {
handle.finish();
}
return cleanup;
}, // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders
// eslint-disable-next-line react-hooks/exhaustive-deps
[
animateAtoms,
childRef,
handleRef,
isReducedMotion,
handleMotionFinish,
handleMotionStart,
handleMotionCancel,
visible
]);
_react.useEffect(()=>{
// Heads up!
//
// Dispose the handle when unmounting the component to clean up retained references. Doing it in a separate
// effect to ensure that the component is unmounted.
if (unmountOnExit && !mounted) {
var _handleRef_current;
(_handleRef_current = handleRef.current) === null || _handleRef_current === void 0 ? void 0 : _handleRef_current.dispose();
}
}, [
handleRef,
unmountOnExit,
mounted
]);
if (mounted) {
return child;
}
return null;
}, {
// Heads up!
// Always normalize it to a function to simplify types
[PRESENCE_MOTION_DEFINITION]: typeof value === 'function' ? value : ()=>value
}, {
// Wrap `enter` in its own motion component as a static method, e.g. <Fade.In>
In: (0, _createMotionComponent.createMotionComponent)(// If we have a motion function, wrap it to forward the runtime params and pick `enter`.
// Otherwise, pass the `enter` motion object directly.
typeof value === 'function' ? (...args)=>value(...args).enter : value.enter),
// Wrap `exit` in its own motion component as a static method, e.g. <Fade.Out>
Out: (0, _createMotionComponent.createMotionComponent)(// If we have a motion function, wrap it to forward the runtime params and pick `exit`.
// Otherwise, pass the `exit` motion object directly.
typeof value === 'function' ? (...args)=>value(...args).exit : value.exit)
});
}

File diff suppressed because one or more lines are too long

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, {
createPresenceComponentVariant: function() {
return createPresenceComponentVariant;
},
createPresenceFnVariant: function() {
return createPresenceFnVariant;
}
});
const _createPresenceComponent = require("./createPresenceComponent");
function createPresenceFnVariant(presenceFn, variantParams) {
const variantFn = (runtimeParams)=>presenceFn({
...variantParams,
...runtimeParams
});
return variantFn;
}
function createPresenceComponentVariant(component, variantParams) {
const originalFn = component[_createPresenceComponent.PRESENCE_MOTION_DEFINITION];
// The variant params become new defaults, but they can still be overridden by runtime params.
const variantFn = createPresenceFnVariant(originalFn, variantParams);
return (0, _createPresenceComponent.createPresenceComponent)(variantFn);
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/factories/createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceMotionFn } from '../types';\nimport { PRESENCE_MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';\n\n/**\n * Create a variant function that wraps a presence function to customize it.\n * The new presence function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n *\n * @internal\n */\nexport function createPresenceFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n presenceFn: PresenceMotionFn<MotionParams>,\n variantParams: Partial<MotionParams>,\n): typeof presenceFn {\n const variantFn: typeof presenceFn = runtimeParams => presenceFn({ ...variantParams, ...runtimeParams });\n return variantFn;\n}\n\n/**\n * Create a new presence component based on another presence component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createPresenceComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new presence component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n component: PresenceComponent<MotionParams>,\n variantParams: Partial<MotionParams>,\n): PresenceComponent<MotionParams> {\n const originalFn = component[PRESENCE_MOTION_DEFINITION];\n // The variant params become new defaults, but they can still be overridden by runtime params.\n const variantFn = createPresenceFnVariant(originalFn, variantParams);\n return createPresenceComponent(variantFn);\n}\n"],"names":["createPresenceComponentVariant","createPresenceFnVariant","presenceFn","variantParams","variantFn","runtimeParams","component","originalFn","PRESENCE_MOTION_DEFINITION","createPresenceComponent"],"mappings":";;;;;;;;;;;IA4BgBA,8BAA8B;eAA9BA;;IAlBAC,uBAAuB;eAAvBA;;;yCATuE;AAShF,SAASA,wBACdC,UAA0C,EAC1CC,aAAoC;IAEpC,MAAMC,YAA+BC,CAAAA,gBAAiBH,WAAW;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IACtG,OAAOD;AACT;AAYO,SAASJ,+BACdM,SAA0C,EAC1CH,aAAoC;IAEpC,MAAMI,aAAaD,SAAS,CAACE,mDAA0B,CAAC;IACxD,8FAA8F;IAC9F,MAAMJ,YAAYH,wBAAwBM,YAAYJ;IACtD,OAAOM,IAAAA,gDAAuB,EAACL;AACjC"}

View File

@@ -0,0 +1,201 @@
'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, {
DEFAULT_ANIMATION_OPTIONS: function() {
return DEFAULT_ANIMATION_OPTIONS;
},
useAnimateAtoms: function() {
return useAnimateAtoms;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _isAnimationRunning = require("../utils/isAnimationRunning");
const DEFAULT_ANIMATION_OPTIONS = {
fill: 'forwards'
};
// A motion atom's default reduced motion is a simple 1 ms duration.
// But an atom can define a custom reduced motion, overriding keyframes and/or params like duration, easing, iterations, etc.
const DEFAULT_REDUCED_MOTION_ATOM = {
duration: 1
};
/**
* Creates an animation handle that controls multiple animations.
* Is used to avoid leaking "element" references from the hook.
*
* @param animations
*/ function createHandle(animations) {
return {
set playbackRate (rate){
animations.forEach((animation)=>{
animation.playbackRate = rate;
});
},
setMotionEndCallbacks (onfinish, oncancel) {
// Heads up!
// This could use "Animation:finished", but it's causing a memory leak in Chromium.
// See: https://issues.chromium.org/u/2/issues/383016426
const promises = animations.map((animation)=>{
return new Promise((resolve, reject)=>{
animation.onfinish = ()=>resolve();
animation.oncancel = ()=>reject();
});
});
Promise.all(promises).then(()=>{
onfinish();
}).catch(()=>{
oncancel();
});
},
isRunning () {
return animations.some((animation)=>(0, _isAnimationRunning.isAnimationRunning)(animation));
},
dispose: ()=>{
animations.length = 0;
},
cancel: ()=>{
animations.forEach((animation)=>{
animation.cancel();
});
},
pause: ()=>{
animations.forEach((animation)=>{
animation.pause();
});
},
play: ()=>{
animations.forEach((animation)=>{
animation.play();
});
},
finish: ()=>{
animations.forEach((animation)=>{
animation.finish();
});
},
reverse: ()=>{
// Heads up!
//
// This is used for the interruptible motion. If the animation is running, we need to reverse it.
//
// TODO: what do with animations that have "delay"?
// TODO: what do with animations that have different "durations"?
animations.forEach((animation)=>{
animation.reverse();
});
}
};
}
function useAnimateAtomsInSupportedEnvironment() {
var _window_Animation;
// eslint-disable-next-line @nx/workspace-no-restricted-globals
const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof ((_window_Animation = window.Animation) === null || _window_Animation === void 0 ? void 0 : _window_Animation.prototype.persist) === 'function';
return _react.useCallback((element, value, options)=>{
const atoms = Array.isArray(value) ? value : [
value
];
const { isReducedMotion } = options;
const animations = atoms.map((motion)=>{
// Grab the custom reduced motion definition if it exists, or fall back to the default reduced motion.
const { keyframes: motionKeyframes, reducedMotion = DEFAULT_REDUCED_MOTION_ATOM, ...params } = motion;
// Grab the reduced motion keyframes if they exist, or fall back to the regular keyframes.
const { keyframes: reducedMotionKeyframes = motionKeyframes, ...reducedMotionParams } = reducedMotion;
const animationKeyframes = isReducedMotion ? reducedMotionKeyframes : motionKeyframes;
const animationParams = {
...DEFAULT_ANIMATION_OPTIONS,
...params,
// Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled
...isReducedMotion && reducedMotionParams
};
try {
// Firefox can throw an error when calling `element.animate()`.
// See: https://github.com/microsoft/fluentui/issues/33902
const animation = element.animate(animationKeyframes, animationParams);
if (SUPPORTS_PERSIST) {
// Chromium browsers can return null when calling `element.animate()`.
// See: https://github.com/microsoft/fluentui/issues/33902
animation === null || animation === void 0 ? void 0 : animation.persist();
} else {
const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];
var _element_style;
Object.assign((_element_style = element.style) !== null && _element_style !== void 0 ? _element_style : {}, resultKeyframe);
}
return animation;
} catch (e) {
return null;
}
}).filter((animation)=>!!animation);
return createHandle(animations);
}, [
SUPPORTS_PERSIST
]);
}
/**
* In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary
* to ensure that the callback is not executed synchronously, which would cause the test to fail.
*
* @see https://github.com/microsoft/fluentui/issues/31701
*/ function useAnimateAtomsInTestEnvironment() {
const [count, setCount] = _react.useState(0);
const callbackRef = _react.useRef(undefined);
const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();
_react.useEffect(()=>{
if (count > 0) {
var _callbackRef_current;
(_callbackRef_current = callbackRef.current) === null || _callbackRef_current === void 0 ? void 0 : _callbackRef_current.call(callbackRef);
}
}, [
count
]);
return _react.useCallback((element, value, options)=>{
const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';
// Heads up!
// If the environment supports Web Animations API, we can use the native implementation.
if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {
return realAnimateAtoms(element, value, options);
}
return {
setMotionEndCallbacks (onfinish) {
callbackRef.current = onfinish;
setCount((v)=>v + 1);
},
set playbackRate (rate){
/* no-op */ },
isRunning () {
return false;
},
dispose () {
/* no-op */ },
cancel () {
/* no-op */ },
pause () {
/* no-op */ },
play () {
/* no-op */ },
finish () {
/* no-op */ },
reverse () {
/* no-op */ }
};
}, [
realAnimateAtoms
]);
}
function useAnimateAtoms() {
'use no memo';
if (process.env.NODE_ENV === 'test') {
// eslint-disable-next-line react-hooks/rules-of-hooks
return useAnimateAtomsInTestEnvironment();
}
// eslint-disable-next-line react-hooks/rules-of-hooks
return useAnimateAtomsInSupportedEnvironment();
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,42 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useIsReducedMotion", {
enumerable: true,
get: function() {
return useIsReducedMotion;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
const _reactutilities = require("@fluentui/react-utilities");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';
function useIsReducedMotion() {
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
var _targetDocument_defaultView;
const targetWindow = (_targetDocument_defaultView = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) !== null && _targetDocument_defaultView !== void 0 ? _targetDocument_defaultView : null;
const queryValue = _react.useRef(false);
const isEnabled = _react.useCallback(()=>queryValue.current, []);
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {
return;
}
const queryMatch = targetWindow.matchMedia(REDUCED_MEDIA_QUERY);
if (queryMatch.matches) {
queryValue.current = true;
}
const matchListener = (e)=>{
queryValue.current = e.matches;
};
queryMatch.addEventListener('change', matchListener);
return ()=>{
queryMatch.removeEventListener('change', matchListener);
};
}, [
targetWindow
]);
return isEnabled;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/useIsReducedMotion.ts"],"sourcesContent":["'use client';\n\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nconst REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';\n\n// TODO: find a better approach there as each hook creates a separate subscription\n\nexport function useIsReducedMotion(): () => boolean {\n const { targetDocument } = useFluent();\n const targetWindow: Window | null = targetDocument?.defaultView ?? null;\n\n const queryValue = React.useRef<boolean>(false);\n const isEnabled = React.useCallback(() => queryValue.current, []);\n\n useIsomorphicLayoutEffect(() => {\n if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {\n return;\n }\n\n const queryMatch = targetWindow.matchMedia(REDUCED_MEDIA_QUERY);\n\n if (queryMatch.matches) {\n queryValue.current = true;\n }\n\n const matchListener = (e: MediaQueryListEvent) => {\n queryValue.current = e.matches;\n };\n\n queryMatch.addEventListener('change', matchListener);\n\n return () => {\n queryMatch.removeEventListener('change', matchListener);\n };\n }, [targetWindow]);\n\n return isEnabled;\n}\n"],"names":["useIsReducedMotion","REDUCED_MEDIA_QUERY","targetDocument","useFluent","targetWindow","defaultView","queryValue","React","useRef","isEnabled","useCallback","current","useIsomorphicLayoutEffect","matchMedia","queryMatch","matches","matchListener","e","addEventListener","removeEventListener"],"mappings":"AAAA;;;;;+BAUgBA;;;eAAAA;;;;qCARgC;gCACN;iEACnB;AAEvB,MAAMC,sBAAsB;AAIrB,SAASD;IACd,MAAM,EAAEE,cAAc,EAAE,GAAGC,IAAAA,uCAAS;QACAD;IAApC,MAAME,eAA8BF,CAAAA,8BAAAA,2BAAAA,qCAAAA,eAAgBG,WAAW,cAA3BH,yCAAAA,8BAA+B;IAEnE,MAAMI,aAAaC,OAAMC,MAAM,CAAU;IACzC,MAAMC,YAAYF,OAAMG,WAAW,CAAC,IAAMJ,WAAWK,OAAO,EAAE,EAAE;IAEhEC,IAAAA,yCAAyB,EAAC;QACxB,IAAIR,iBAAiB,QAAQ,OAAOA,aAAaS,UAAU,KAAK,YAAY;YAC1E;QACF;QAEA,MAAMC,aAAaV,aAAaS,UAAU,CAACZ;QAE3C,IAAIa,WAAWC,OAAO,EAAE;YACtBT,WAAWK,OAAO,GAAG;QACvB;QAEA,MAAMK,gBAAgB,CAACC;YACrBX,WAAWK,OAAO,GAAGM,EAAEF,OAAO;QAChC;QAEAD,WAAWI,gBAAgB,CAAC,UAAUF;QAEtC,OAAO;YACLF,WAAWK,mBAAmB,CAAC,UAAUH;QAC3C;IACF,GAAG;QAACZ;KAAa;IAEjB,OAAOK;AACT"}

View File

@@ -0,0 +1,34 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMotionImperativeRef", {
enumerable: true,
get: function() {
return useMotionImperativeRef;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
function useMotionImperativeRef(imperativeRef) {
const animationRef = _react.useRef(undefined);
_react.useImperativeHandle(imperativeRef, ()=>({
setPlayState: (state)=>{
if (state === 'running') {
var _animationRef_current;
(_animationRef_current = animationRef.current) === null || _animationRef_current === void 0 ? void 0 : _animationRef_current.play();
}
if (state === 'paused') {
var _animationRef_current1;
(_animationRef_current1 = animationRef.current) === null || _animationRef_current1 === void 0 ? void 0 : _animationRef_current1.pause();
}
},
setPlaybackRate: (rate)=>{
if (animationRef.current) {
animationRef.current.playbackRate = rate;
}
}
}));
return animationRef;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/useMotionImperativeRef.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AnimationHandle, MotionImperativeRef } from '../types';\n\nexport function useMotionImperativeRef(\n imperativeRef: React.Ref<MotionImperativeRef | undefined> | undefined,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n): React.MutableRefObject<AnimationHandle | undefined> {\n const animationRef = React.useRef<AnimationHandle | undefined>(undefined);\n\n React.useImperativeHandle(imperativeRef, () => ({\n setPlayState: state => {\n if (state === 'running') {\n animationRef.current?.play();\n }\n\n if (state === 'paused') {\n animationRef.current?.pause();\n }\n },\n setPlaybackRate: rate => {\n if (animationRef.current) {\n animationRef.current.playbackRate = rate;\n }\n },\n }));\n\n return animationRef;\n}\n"],"names":["useMotionImperativeRef","imperativeRef","animationRef","React","useRef","undefined","useImperativeHandle","setPlayState","state","current","play","pause","setPlaybackRate","rate","playbackRate"],"mappings":"AAAA;;;;;+BAKgBA;;;eAAAA;;;;iEAHO;AAGhB,SAASA,uBACdC,aAAqE;IAGrE,MAAMC,eAAeC,OAAMC,MAAM,CAA8BC;IAE/DF,OAAMG,mBAAmB,CAACL,eAAe,IAAO,CAAA;YAC9CM,cAAcC,CAAAA;gBACZ,IAAIA,UAAU,WAAW;wBACvBN;qBAAAA,wBAAAA,aAAaO,OAAO,cAApBP,4CAAAA,sBAAsBQ,IAAI;gBAC5B;gBAEA,IAAIF,UAAU,UAAU;wBACtBN;qBAAAA,yBAAAA,aAAaO,OAAO,cAApBP,6CAAAA,uBAAsBS,KAAK;gBAC7B;YACF;YACAC,iBAAiBC,CAAAA;gBACf,IAAIX,aAAaO,OAAO,EAAE;oBACxBP,aAAaO,OAAO,CAACK,YAAY,GAAGD;gBACtC;YACF;QACF,CAAA;IAEA,OAAOX;AACT"}

View File

@@ -0,0 +1,35 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useMountedState", {
enumerable: true,
get: function() {
return useMountedState;
}
});
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 useMountedState(visible = false, unmountOnExit = false) {
const mountedRef = _react.useRef(unmountOnExit ? visible : true);
const forceUpdate = (0, _reactutilities.useForceUpdate)();
const setMounted = _react.useCallback((newValue)=>{
if (mountedRef.current !== newValue) {
mountedRef.current = newValue;
forceUpdate();
}
}, [
forceUpdate
]);
_react.useEffect(()=>{
if (visible) {
mountedRef.current = visible;
}
});
return [
visible || mountedRef.current,
setMounted
];
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/useMountedState.ts"],"sourcesContent":["'use client';\n\nimport { useForceUpdate } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\n/**\n * This hook manages the mounted state of a component, based on the \"visible\" and \"unmountOnExit\" props.\n * It simulates the behavior of getDerivedStateFromProps(), which is not available in functional components.\n */\nexport function useMountedState(\n visible: boolean = false,\n unmountOnExit: boolean = false,\n): [boolean, (value: boolean) => void] {\n const mountedRef = React.useRef<boolean>(unmountOnExit ? visible : true);\n const forceUpdate = useForceUpdate();\n\n const setMounted = React.useCallback(\n (newValue: boolean) => {\n if (mountedRef.current !== newValue) {\n mountedRef.current = newValue;\n forceUpdate();\n }\n },\n [forceUpdate],\n );\n\n React.useEffect(() => {\n if (visible) {\n mountedRef.current = visible;\n }\n });\n\n return [visible || mountedRef.current, setMounted];\n}\n"],"names":["useMountedState","visible","unmountOnExit","mountedRef","React","useRef","forceUpdate","useForceUpdate","setMounted","useCallback","newValue","current","useEffect"],"mappings":"AAAA;;;;;+BASgBA;;;eAAAA;;;;gCAPe;iEACR;AAMhB,SAASA,gBACdC,UAAmB,KAAK,EACxBC,gBAAyB,KAAK;IAE9B,MAAMC,aAAaC,OAAMC,MAAM,CAAUH,gBAAgBD,UAAU;IACnE,MAAMK,cAAcC,IAAAA,8BAAc;IAElC,MAAMC,aAAaJ,OAAMK,WAAW,CAClC,CAACC;QACC,IAAIP,WAAWQ,OAAO,KAAKD,UAAU;YACnCP,WAAWQ,OAAO,GAAGD;YACrBJ;QACF;IACF,GACA;QAACA;KAAY;IAGfF,OAAMQ,SAAS,CAAC;QACd,IAAIX,SAAS;YACXE,WAAWQ,OAAO,GAAGV;QACvB;IACF;IAEA,OAAO;QAACA,WAAWE,WAAWQ,OAAO;QAAEH;KAAW;AACpD"}

View File

@@ -0,0 +1,71 @@
"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, {
MotionBehaviourProvider: function() {
return _MotionBehaviourContext.MotionBehaviourProvider;
},
MotionRefForwarder: function() {
return _MotionRefForwarder.MotionRefForwarder;
},
MotionRefForwarderReset: function() {
return _MotionRefForwarder.MotionRefForwarderReset;
},
PresenceGroup: function() {
return _PresenceGroup.PresenceGroup;
},
PresenceGroupChildProvider: function() {
return _PresenceGroupChildContext.PresenceGroupChildProvider;
},
createMotionComponent: function() {
return _createMotionComponent.createMotionComponent;
},
createMotionComponentVariant: function() {
return _createMotionComponentVariant.createMotionComponentVariant;
},
createPresenceComponent: function() {
return _createPresenceComponent.createPresenceComponent;
},
createPresenceComponentVariant: function() {
return _createPresenceComponentVariant.createPresenceComponentVariant;
},
curves: function() {
return _motionTokens.curves;
},
durations: function() {
return _motionTokens.durations;
},
motionSlot: function() {
return _motionSlot.motionSlot;
},
motionTokens: function() {
return _motionTokens.motionTokens;
},
presenceMotionSlot: function() {
return _presenceMotionSlot.presenceMotionSlot;
},
useMotionForwardedRef: function() {
return _MotionRefForwarder.useMotionForwardedRef;
},
usePresenceGroupChildContext: function() {
return _PresenceGroupChildContext.usePresenceGroupChildContext;
}
});
const _motionTokens = require("./motions/motionTokens");
const _createMotionComponent = require("./factories/createMotionComponent");
const _createMotionComponentVariant = require("./factories/createMotionComponentVariant");
const _createPresenceComponent = require("./factories/createPresenceComponent");
const _createPresenceComponentVariant = require("./factories/createPresenceComponentVariant");
const _PresenceGroup = require("./components/PresenceGroup");
const _MotionRefForwarder = require("./components/MotionRefForwarder");
const _motionSlot = require("./slots/motionSlot");
const _presenceMotionSlot = require("./slots/presenceMotionSlot");
const _PresenceGroupChildContext = require("./contexts/PresenceGroupChildContext");
const _MotionBehaviourContext = require("./contexts/MotionBehaviourContext");

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { motionTokens, durations, curves } from './motions/motionTokens';\n\nexport {\n createMotionComponent,\n type MotionComponentProps,\n type MotionComponent,\n} from './factories/createMotionComponent';\nexport { createMotionComponentVariant } from './factories/createMotionComponentVariant';\nexport {\n createPresenceComponent,\n type PresenceComponentProps,\n type PresenceComponent,\n} from './factories/createPresenceComponent';\nexport { createPresenceComponentVariant } from './factories/createPresenceComponentVariant';\n\nexport { PresenceGroup } from './components/PresenceGroup';\nexport { MotionRefForwarder, MotionRefForwarderReset, useMotionForwardedRef } from './components/MotionRefForwarder';\n\nexport { motionSlot, type MotionSlotProps } from './slots/motionSlot';\nexport { presenceMotionSlot, type PresenceMotionSlotProps } from './slots/presenceMotionSlot';\n\nexport {\n PresenceGroupChildProvider,\n usePresenceGroupChildContext,\n type PresenceGroupChildContextValue,\n} from './contexts/PresenceGroupChildContext';\n\nexport type {\n AtomMotion,\n AtomMotionFn,\n PresenceMotion,\n PresenceMotionFn,\n PresenceDirection,\n MotionImperativeRef,\n MotionParam,\n} from './types';\n\nexport { MotionBehaviourProvider } from './contexts/MotionBehaviourContext';\n"],"names":["MotionBehaviourProvider","MotionRefForwarder","MotionRefForwarderReset","PresenceGroup","PresenceGroupChildProvider","createMotionComponent","createMotionComponentVariant","createPresenceComponent","createPresenceComponentVariant","curves","durations","motionSlot","motionTokens","presenceMotionSlot","useMotionForwardedRef","usePresenceGroupChildContext"],"mappings":";;;;;;;;;;;IAqCSA,uBAAuB;eAAvBA,+CAAuB;;IArBvBC,kBAAkB;eAAlBA,sCAAkB;;IAAEC,uBAAuB;eAAvBA,2CAAuB;;IAD3CC,aAAa;eAAbA,4BAAa;;IAOpBC,0BAA0B;eAA1BA,qDAA0B;;IAnB1BC,qBAAqB;eAArBA,4CAAqB;;IAIdC,4BAA4B;eAA5BA,0DAA4B;;IAEnCC,uBAAuB;eAAvBA,gDAAuB;;IAIhBC,8BAA8B;eAA9BA,8DAA8B;;IAbLC,MAAM;eAANA,oBAAM;;IAAjBC,SAAS;eAATA,uBAAS;;IAkBvBC,UAAU;eAAVA,sBAAU;;IAlBVC,YAAY;eAAZA,0BAAY;;IAmBZC,kBAAkB;eAAlBA,sCAAkB;;IAH2BC,qBAAqB;eAArBA,yCAAqB;;IAOzEC,4BAA4B;eAA5BA,uDAA4B;;;8BAvBkB;uCAMzC;8CACsC;yCAKtC;gDACwC;+BAEjB;oCACqD;4BAElC;oCACgB;2CAM1D;wCAYiC"}

View File

@@ -0,0 +1,58 @@
// Copied from packages/tokens/src/global/durations.ts
// Values are numeric in milliseconds for ease of use in Web Animations API
// (rather than parsing '__ms')
"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, {
curves: function() {
return curves;
},
durations: function() {
return durations;
},
motionTokens: function() {
return motionTokens;
}
});
const durations = {
durationUltraFast: 50,
durationFaster: 100,
durationFast: 150,
durationNormal: 200,
durationGentle: 250,
durationSlow: 300,
durationSlower: 400,
durationUltraSlow: 500
};
const curves = {
curveAccelerateMax: 'cubic-bezier(0.9,0.1,1,0.2)',
curveAccelerateMid: 'cubic-bezier(1,0,1,1)',
curveAccelerateMin: 'cubic-bezier(0.8,0,0.78,1)',
curveDecelerateMax: 'cubic-bezier(0.1,0.9,0.2,1)',
curveDecelerateMid: 'cubic-bezier(0,0,0,1)',
curveDecelerateMin: 'cubic-bezier(0.33,0,0.1,1)',
curveEasyEaseMax: 'cubic-bezier(0.8,0,0.2,1)',
curveEasyEase: 'cubic-bezier(0.33,0,0.67,1)',
curveLinear: 'cubic-bezier(0,0,1,1)'
};
const motionTokens = {
...durations,
...curves
}; /*
TODO: enforce naming conventions when TypeScript 4.4 features are supported in Fluent:
type DurationKey = `duration${Capitalize<string>}`;
type CurveKey = `curve${Capitalize<string>}`;
type CurveValue = `cubic-bezier(${number},${number},${number},${number})`;
type DurationTokens = Record<DurationKey, number>;
type CurveTokens = Record<CurveKey, CurveValue>;
*/

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/motions/motionTokens.ts"],"sourcesContent":["// Copied from packages/tokens/src/global/durations.ts\n// Values are numeric in milliseconds for ease of use in Web Animations API\n// (rather than parsing '__ms')\nexport const durations = {\n durationUltraFast: 50,\n durationFaster: 100,\n durationFast: 150,\n durationNormal: 200,\n durationGentle: 250,\n durationSlow: 300,\n durationSlower: 400,\n durationUltraSlow: 500,\n} as const;\n\n// Copied from packages/tokens/src/global/curves.ts\n// Names and values are preserved exactly\nexport const curves = {\n curveAccelerateMax: 'cubic-bezier(0.9,0.1,1,0.2)',\n curveAccelerateMid: 'cubic-bezier(1,0,1,1)',\n curveAccelerateMin: 'cubic-bezier(0.8,0,0.78,1)',\n curveDecelerateMax: 'cubic-bezier(0.1,0.9,0.2,1)',\n curveDecelerateMid: 'cubic-bezier(0,0,0,1)',\n curveDecelerateMin: 'cubic-bezier(0.33,0,0.1,1)',\n curveEasyEaseMax: 'cubic-bezier(0.8,0,0.2,1)',\n curveEasyEase: 'cubic-bezier(0.33,0,0.67,1)',\n curveLinear: 'cubic-bezier(0,0,1,1)',\n} as const;\n\n// A merged flat lookup for convenience\nexport const motionTokens = {\n ...durations,\n ...curves,\n};\n\n/*\nTODO: enforce naming conventions when TypeScript 4.4 features are supported in Fluent:\n\ntype DurationKey = `duration${Capitalize<string>}`;\ntype CurveKey = `curve${Capitalize<string>}`;\ntype CurveValue = `cubic-bezier(${number},${number},${number},${number})`;\n\ntype DurationTokens = Record<DurationKey, number>;\ntype CurveTokens = Record<CurveKey, CurveValue>;\n*/\n"],"names":["curves","durations","motionTokens","durationUltraFast","durationFaster","durationFast","durationNormal","durationGentle","durationSlow","durationSlower","durationUltraSlow","curveAccelerateMax","curveAccelerateMid","curveAccelerateMin","curveDecelerateMax","curveDecelerateMid","curveDecelerateMin","curveEasyEaseMax","curveEasyEase","curveLinear"],"mappings":"AAAA,sDAAsD;AACtD,2EAA2E;AAC3E,+BAA+B;;;;;;;;;;;;IAclBA,MAAM;eAANA;;IAbAC,SAAS;eAATA;;IA0BAC,YAAY;eAAZA;;;AA1BN,MAAMD,YAAY;IACvBE,mBAAmB;IACnBC,gBAAgB;IAChBC,cAAc;IACdC,gBAAgB;IAChBC,gBAAgB;IAChBC,cAAc;IACdC,gBAAgB;IAChBC,mBAAmB;AACrB;AAIO,MAAMV,SAAS;IACpBW,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,kBAAkB;IAClBC,eAAe;IACfC,aAAa;AACf;AAGO,MAAMjB,eAAe;IAC1B,GAAGD,SAAS;IACZ,GAAGD,MAAM;AACX,GAEA;;;;;;;;;AASA"}

View File

@@ -0,0 +1,50 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "motionSlot", {
enumerable: true,
get: function() {
return motionSlot;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
function motionSlot(motion, options) {
// eslint-disable-next-line @typescript-eslint/no-deprecated
const { as, children, ...rest } = motion !== null && motion !== void 0 ? motion : {};
if (process.env.NODE_ENV !== 'production') {
if (typeof as !== 'undefined') {
throw new Error(`@fluentui/react-motion: "as" property is not supported on motion slots.`);
}
}
if (motion === null) {
// Heads up!
// Render function is used there to avoid rendering a motion component and render children directly
const renderFn = (_, props)=>/*#__PURE__*/ _react.createElement(_react.Fragment, null, props.children);
/**
* Casting is required here as SlotComponentType is a function, not an object.
* Although SlotComponentType has a function signature, it is still just an object.
* This is required to make a slot callable (JSX compatible), this is the exact same approach
* that is used on `@types/react` components
*/ return {
[_reactutilities.SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,
[_reactutilities.SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
};
}
/**
* Casting is required here as SlotComponentType is a function, not an object.
* Although SlotComponentType has a function signature, it is still just an object.
* This is required to make a slot callable (JSX compatible), this is the exact same approach
* that is used on `@types/react` components
*/ const propsWithMetadata = {
...options.defaultProps,
...rest,
[_reactutilities.SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
};
if (typeof children === 'function') {
propsWithMetadata[_reactutilities.SLOT_RENDER_FUNCTION_SYMBOL] = children;
}
return propsWithMetadata;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/slots/motionSlot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from '@fluentui/react-utilities';\nimport type {\n JSXElement,\n JSXIntrinsicElementKeys,\n SlotComponentType,\n SlotRenderFunction,\n} from '@fluentui/react-utilities';\n\nimport type { MotionComponentProps } from '../factories/createMotionComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype MotionSlotRenderProps = Pick<MotionComponentProps, 'onMotionFinish' | 'onMotionStart' | 'onMotionCancel'>;\n\nexport type MotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n MotionComponentProps,\n 'imperativeRef' | 'onMotionFinish' | 'onMotionStart' | 'onMotionCancel'\n> & {\n // FIXME: 'as' property is required by design on the slot AP but it does not support components, only intrinsic\n // elements motion slots do not support intrinsic elements, only custom components.\n /**\n * @deprecated Do not use. Motion Slots do not support intrinsic elements.\n *\n * If you want to override the animation, use the children render function instead.\n */\n as?: JSXIntrinsicElementKeys;\n\n // TODO: remove once React v18 slot API is modified ComponentProps is not properly adding render function as a\n // possible value for children\n children?: SlotRenderFunction<MotionSlotRenderProps & MotionParams & { children: JSXElement }>;\n};\n\nexport function motionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n motion: MotionSlotProps<MotionParams> | null | undefined,\n options: {\n elementType: React.FC<MotionComponentProps & MotionParams>;\n defaultProps: MotionSlotRenderProps & MotionParams;\n },\n): SlotComponentType<MotionSlotRenderProps & MotionParams> {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { as, children, ...rest } = motion ?? {};\n\n if (process.env.NODE_ENV !== 'production') {\n if (typeof as !== 'undefined') {\n throw new Error(`@fluentui/react-motion: \"as\" property is not supported on motion slots.`);\n }\n }\n\n if (motion === null) {\n // Heads up!\n // Render function is used there to avoid rendering a motion component and render children directly\n const renderFn: SlotRenderFunction<MotionSlotRenderProps & MotionParams & { children: JSXElement }> = (\n _,\n props,\n ) => <>{props.children}</>;\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n return {\n [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<MotionSlotRenderProps & MotionParams>;\n }\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n const propsWithMetadata = {\n ...options.defaultProps,\n ...rest,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<MotionSlotRenderProps & MotionParams>;\n\n if (typeof children === 'function') {\n propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n MotionSlotRenderProps & MotionParams\n >;\n }\n\n return propsWithMetadata;\n}\n"],"names":["motionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","renderFn","_","props","SLOT_RENDER_FUNCTION_SYMBOL","SLOT_ELEMENT_TYPE_SYMBOL","elementType","propsWithMetadata","defaultProps"],"mappings":";;;;+BAmCgBA;;;eAAAA;;;;iEAnCO;gCAC+C;AAkC/D,SAASA,WACdC,MAAwD,EACxDC,OAGC;IAED,4DAA4D;IAC5D,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ,mBAAAA,oBAAAA,SAAU,CAAC;IAE7C,IAAIK,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,OAAOL,OAAO,aAAa;YAC7B,MAAM,IAAIM,MAAM,CAAC,uEAAuE,CAAC;QAC3F;IACF;IAEA,IAAIR,WAAW,MAAM;QACnB,YAAY;QACZ,mGAAmG;QACnG,MAAMS,WAAgG,CACpGC,GACAC,sBACG,4CAAGA,MAAMR,QAAQ;QAEtB;;;;;KAKC,GACD,OAAO;YACL,CAACS,2CAA2B,CAAC,EAAEH;YAC/B,CAACI,wCAAwB,CAAC,EAAEZ,QAAQa,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGd,QAAQe,YAAY;QACvB,GAAGZ,IAAI;QACP,CAACS,wCAAwB,CAAC,EAAEZ,QAAQa,WAAW;IACjD;IAEA,IAAI,OAAOX,aAAa,YAAY;QAClCY,iBAAiB,CAACH,2CAA2B,CAAC,GAAGT;IAGnD;IAEA,OAAOY;AACT"}

View File

@@ -0,0 +1,51 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "presenceMotionSlot", {
enumerable: true,
get: function() {
return presenceMotionSlot;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
function presenceMotionSlot(motion, options) {
// eslint-disable-next-line @typescript-eslint/no-deprecated
const { as, children, ...rest } = motion !== null && motion !== void 0 ? motion : {};
if (process.env.NODE_ENV !== 'production') {
if (typeof as !== 'undefined') {
throw new Error(`@fluentui/react-motion: "as" property is not supported on motion slots.`);
}
}
if (motion === null) {
// Heads up!
// Render function is used there to avoid rendering a motion component and handle unmounting logic
const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;
const renderFn = (_, props)=>isUnmounted ? null : /*#__PURE__*/ _react.createElement(_react.Fragment, null, props.children);
/**
* Casting is required here as SlotComponentType is a function, not an object.
* Although SlotComponentType has a function signature, it is still just an object.
* This is required to make a slot callable (JSX compatible), this is the exact same approach
* that is used on `@types/react` components
*/ return {
[_reactutilities.SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,
[_reactutilities.SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
};
}
/**
* Casting is required here as SlotComponentType is a function, not an object.
* Although SlotComponentType has a function signature, it is still just an object.
* This is required to make a slot callable (JSX compatible), this is the exact same approach
* that is used on `@types/react` components
*/ const propsWithMetadata = {
...options.defaultProps,
...rest,
[_reactutilities.SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
};
if (typeof children === 'function') {
propsWithMetadata[_reactutilities.SLOT_RENDER_FUNCTION_SYMBOL] = children;
}
return propsWithMetadata;
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":[],"names":[],"mappings":""}

View File

@@ -0,0 +1,29 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "getChildMapping", {
enumerable: true,
get: function() {
return getChildMapping;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
function getChildMapping(children) {
const childMapping = {};
if (children) {
_react.Children.toArray(children).forEach((child)=>{
if (_react.isValidElement(child)) {
var _child_key;
childMapping[(_child_key = child.key) !== null && _child_key !== void 0 ? _child_key : ''] = {
appear: false,
element: child,
visible: true,
unmountOnExit: true
};
}
});
}
return childMapping;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/groups/getChildMapping.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PresenceGroupChildMapping } from './types';\n\n/**\n * Given `children`, return an object mapping key to child.\n */\nexport function getChildMapping(children: React.ReactNode | undefined): PresenceGroupChildMapping {\n const childMapping: PresenceGroupChildMapping = {};\n\n if (children) {\n React.Children.toArray(children).forEach(child => {\n if (React.isValidElement(child)) {\n childMapping[child.key ?? ''] = {\n appear: false,\n element: child,\n visible: true,\n unmountOnExit: true,\n };\n }\n });\n }\n\n return childMapping;\n}\n"],"names":["getChildMapping","children","childMapping","React","Children","toArray","forEach","child","isValidElement","key","appear","element","visible","unmountOnExit"],"mappings":";;;;+BAMgBA;;;eAAAA;;;;iEANO;AAMhB,SAASA,gBAAgBC,QAAqC;IACnE,MAAMC,eAA0C,CAAC;IAEjD,IAAID,UAAU;QACZE,OAAMC,QAAQ,CAACC,OAAO,CAACJ,UAAUK,OAAO,CAACC,CAAAA;YACvC,IAAIJ,OAAMK,cAAc,CAACD,QAAQ;oBAClBA;gBAAbL,YAAY,CAACK,CAAAA,aAAAA,MAAME,GAAG,cAATF,wBAAAA,aAAa,GAAG,GAAG;oBAC9BG,QAAQ;oBACRC,SAASJ;oBACTK,SAAS;oBACTC,eAAe;gBACjB;YACF;QACF;IACF;IAEA,OAAOX;AACT"}

View File

@@ -0,0 +1,40 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "getNextChildMapping", {
enumerable: true,
get: function() {
return getNextChildMapping;
}
});
const _mergeChildMappings = require("./mergeChildMappings");
function getNextChildMapping(prevChildMapping, nextChildMapping) {
const childrenMapping = (0, _mergeChildMappings.mergeChildMappings)(prevChildMapping, nextChildMapping);
Object.entries(childrenMapping).forEach(([key, childDefinition])=>{
const hasPrev = key in prevChildMapping;
const hasNext = key in nextChildMapping;
if (hasNext) {
// Case 1: item hasn't changed transition states
if (hasPrev) {
childrenMapping[key] = {
...childDefinition
};
return;
}
// Case 2: item is new (entering)
childrenMapping[key] = {
...childDefinition,
appear: true,
visible: true
};
return;
}
// Case 3: item is leaving
childrenMapping[key] = {
...childDefinition,
visible: false
};
});
return childrenMapping;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/groups/getNextChildMapping.ts"],"sourcesContent":["import { mergeChildMappings } from './mergeChildMappings';\nimport type { PresenceGroupChildMapping } from './types';\n\nexport function getNextChildMapping(\n prevChildMapping: PresenceGroupChildMapping,\n nextChildMapping: PresenceGroupChildMapping,\n): PresenceGroupChildMapping {\n const childrenMapping = mergeChildMappings(prevChildMapping, nextChildMapping);\n\n Object.entries(childrenMapping).forEach(([key, childDefinition]) => {\n const hasPrev = key in prevChildMapping;\n const hasNext = key in nextChildMapping;\n\n if (hasNext) {\n // Case 1: item hasn't changed transition states\n if (hasPrev) {\n childrenMapping[key] = { ...childDefinition };\n return;\n }\n\n // Case 2: item is new (entering)\n childrenMapping[key] = {\n ...childDefinition,\n appear: true,\n visible: true,\n };\n return;\n }\n\n // Case 3: item is leaving\n childrenMapping[key] = {\n ...childDefinition,\n visible: false,\n };\n });\n\n return childrenMapping;\n}\n"],"names":["getNextChildMapping","prevChildMapping","nextChildMapping","childrenMapping","mergeChildMappings","Object","entries","forEach","key","childDefinition","hasPrev","hasNext","appear","visible"],"mappings":";;;;+BAGgBA;;;eAAAA;;;oCAHmB;AAG5B,SAASA,oBACdC,gBAA2C,EAC3CC,gBAA2C;IAE3C,MAAMC,kBAAkBC,IAAAA,sCAAkB,EAACH,kBAAkBC;IAE7DG,OAAOC,OAAO,CAACH,iBAAiBI,OAAO,CAAC,CAAC,CAACC,KAAKC,gBAAgB;QAC7D,MAAMC,UAAUF,OAAOP;QACvB,MAAMU,UAAUH,OAAON;QAEvB,IAAIS,SAAS;YACX,gDAAgD;YAChD,IAAID,SAAS;gBACXP,eAAe,CAACK,IAAI,GAAG;oBAAE,GAAGC,eAAe;gBAAC;gBAC5C;YACF;YAEA,iCAAiC;YACjCN,eAAe,CAACK,IAAI,GAAG;gBACrB,GAAGC,eAAe;gBAClBG,QAAQ;gBACRC,SAAS;YACX;YACA;QACF;QAEA,0BAA0B;QAC1BV,eAAe,CAACK,IAAI,GAAG;YACrB,GAAGC,eAAe;YAClBI,SAAS;QACX;IACF;IAEA,OAAOV;AACT"}

View File

@@ -0,0 +1,45 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "mergeChildMappings", {
enumerable: true,
get: function() {
return mergeChildMappings;
}
});
function mergeChildMappings(prevMapping, nextMapping) {
function getValueForKey(key) {
return key in nextMapping ? nextMapping[key] : prevMapping[key];
}
// For each key of `next`, the list of keys to insert before that key in
// the combined list
const nextKeysPending = {};
let pendingKeys = [];
// eslint-disable-next-line guard-for-in
for(const prevKey in prevMapping){
if (prevKey in nextMapping) {
if (pendingKeys.length) {
nextKeysPending[prevKey] = pendingKeys;
pendingKeys = [];
}
continue;
}
pendingKeys.push(prevKey);
}
const childMapping = {};
// eslint-disable-next-line guard-for-in
for(const nextKey in nextMapping){
if (nextKeysPending[nextKey]) {
for (const pendingNextKey of nextKeysPending[nextKey]){
childMapping[pendingNextKey] = getValueForKey(pendingNextKey);
}
}
childMapping[nextKey] = getValueForKey(nextKey);
}
// Finally, add the keys which didn't appear before any key in `next`
for (const pendingKey of pendingKeys){
childMapping[pendingKey] = getValueForKey(pendingKey);
}
return childMapping;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/groups/mergeChildMappings.ts"],"sourcesContent":["import type { PresenceGroupChildMapping } from './types';\n\n/**\n * When you're adding or removing children some may be added or removed in the same render pass. We want to show *both*\n * since we want to simultaneously animate elements in and out. This function takes a previous set of keys and a new set\n * of keys and merges them with its best guess of the correct ordering.\n */\nexport function mergeChildMappings(\n prevMapping: PresenceGroupChildMapping,\n nextMapping: PresenceGroupChildMapping,\n): PresenceGroupChildMapping {\n function getValueForKey(key: string) {\n return key in nextMapping ? nextMapping[key] : prevMapping[key];\n }\n\n // For each key of `next`, the list of keys to insert before that key in\n // the combined list\n const nextKeysPending: Record<string, string[]> = {};\n let pendingKeys: string[] = [];\n\n // eslint-disable-next-line guard-for-in\n for (const prevKey in prevMapping) {\n if (prevKey in nextMapping) {\n if (pendingKeys.length) {\n nextKeysPending[prevKey] = pendingKeys;\n pendingKeys = [];\n }\n\n continue;\n }\n\n pendingKeys.push(prevKey);\n }\n\n const childMapping: PresenceGroupChildMapping = {};\n\n // eslint-disable-next-line guard-for-in\n for (const nextKey in nextMapping) {\n if (nextKeysPending[nextKey]) {\n for (const pendingNextKey of nextKeysPending[nextKey]) {\n childMapping[pendingNextKey] = getValueForKey(pendingNextKey);\n }\n }\n\n childMapping[nextKey] = getValueForKey(nextKey);\n }\n\n // Finally, add the keys which didn't appear before any key in `next`\n for (const pendingKey of pendingKeys) {\n childMapping[pendingKey] = getValueForKey(pendingKey);\n }\n\n return childMapping;\n}\n"],"names":["mergeChildMappings","prevMapping","nextMapping","getValueForKey","key","nextKeysPending","pendingKeys","prevKey","length","push","childMapping","nextKey","pendingNextKey","pendingKey"],"mappings":";;;;+BAOgBA;;;eAAAA;;;AAAT,SAASA,mBACdC,WAAsC,EACtCC,WAAsC;IAEtC,SAASC,eAAeC,GAAW;QACjC,OAAOA,OAAOF,cAAcA,WAAW,CAACE,IAAI,GAAGH,WAAW,CAACG,IAAI;IACjE;IAEA,wEAAwE;IACxE,oBAAoB;IACpB,MAAMC,kBAA4C,CAAC;IACnD,IAAIC,cAAwB,EAAE;IAE9B,wCAAwC;IACxC,IAAK,MAAMC,WAAWN,YAAa;QACjC,IAAIM,WAAWL,aAAa;YAC1B,IAAII,YAAYE,MAAM,EAAE;gBACtBH,eAAe,CAACE,QAAQ,GAAGD;gBAC3BA,cAAc,EAAE;YAClB;YAEA;QACF;QAEAA,YAAYG,IAAI,CAACF;IACnB;IAEA,MAAMG,eAA0C,CAAC;IAEjD,wCAAwC;IACxC,IAAK,MAAMC,WAAWT,YAAa;QACjC,IAAIG,eAAe,CAACM,QAAQ,EAAE;YAC5B,KAAK,MAAMC,kBAAkBP,eAAe,CAACM,QAAQ,CAAE;gBACrDD,YAAY,CAACE,eAAe,GAAGT,eAAeS;YAChD;QACF;QAEAF,YAAY,CAACC,QAAQ,GAAGR,eAAeQ;IACzC;IAEA,qEAAqE;IACrE,KAAK,MAAME,cAAcP,YAAa;QACpCI,YAAY,CAACG,WAAW,GAAGV,eAAeU;IAC5C;IAEA,OAAOH;AACT"}

View File

@@ -0,0 +1,4 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});

View File

@@ -0,0 +1 @@
{"version":3,"sources":[],"names":[],"mappings":""}

View File

@@ -0,0 +1,35 @@
/**
* Checks if the animation is running at the moment.
*/ "use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "isAnimationRunning", {
enumerable: true,
get: function() {
return isAnimationRunning;
}
});
function isAnimationRunning(animation) {
if (animation.playState === 'running') {
var _animation_effect;
// Heads up!
//
// There is an edge case where the animation is running, but the overall progress is 0 or 1. In this case, we
// consider the animation to be not running. If it will be reversed it will flip from 1 to 0, and we will observe a
// glitch.
// "overallProgress" is not supported in all browsers, so we need to check if it exists.
// We will fall back to the currentTime and duration if "overallProgress" is not supported.
if (animation.overallProgress !== undefined) {
var _animation_overallProgress;
const overallProgress = (_animation_overallProgress = animation.overallProgress) !== null && _animation_overallProgress !== void 0 ? _animation_overallProgress : 0;
return overallProgress > 0 && overallProgress < 1;
}
var _animation_currentTime;
const currentTime = Number((_animation_currentTime = animation.currentTime) !== null && _animation_currentTime !== void 0 ? _animation_currentTime : 0);
var _animation_effect_getTiming_duration;
const totalTime = Number((_animation_effect_getTiming_duration = (_animation_effect = animation.effect) === null || _animation_effect === void 0 ? void 0 : _animation_effect.getTiming().duration) !== null && _animation_effect_getTiming_duration !== void 0 ? _animation_effect_getTiming_duration : 0);
return currentTime > 0 && currentTime < totalTime;
}
return false;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/isAnimationRunning.ts"],"sourcesContent":["/**\n * Checks if the animation is running at the moment.\n */\nexport function isAnimationRunning(animation: Animation & { readonly overallProgress?: number | null }): boolean {\n if (animation.playState === 'running') {\n // Heads up!\n //\n // There is an edge case where the animation is running, but the overall progress is 0 or 1. In this case, we\n // consider the animation to be not running. If it will be reversed it will flip from 1 to 0, and we will observe a\n // glitch.\n\n // \"overallProgress\" is not supported in all browsers, so we need to check if it exists.\n // We will fall back to the currentTime and duration if \"overallProgress\" is not supported.\n if (animation.overallProgress !== undefined) {\n const overallProgress = animation.overallProgress ?? 0;\n\n return overallProgress > 0 && overallProgress < 1;\n }\n\n const currentTime = Number(animation.currentTime ?? 0);\n const totalTime = Number(animation.effect?.getTiming().duration ?? 0);\n\n return currentTime > 0 && currentTime < totalTime;\n }\n\n return false;\n}\n"],"names":["isAnimationRunning","animation","playState","overallProgress","undefined","currentTime","Number","totalTime","effect","getTiming","duration"],"mappings":"AAAA;;CAEC;;;;+BACeA;;;eAAAA;;;AAAT,SAASA,mBAAmBC,SAAmE;IACpG,IAAIA,UAAUC,SAAS,KAAK,WAAW;YAgBZD;QAfzB,YAAY;QACZ,EAAE;QACF,6GAA6G;QAC7G,mHAAmH;QACnH,UAAU;QAEV,wFAAwF;QACxF,2FAA2F;QAC3F,IAAIA,UAAUE,eAAe,KAAKC,WAAW;gBACnBH;YAAxB,MAAME,kBAAkBF,CAAAA,6BAAAA,UAAUE,eAAe,cAAzBF,wCAAAA,6BAA6B;YAErD,OAAOE,kBAAkB,KAAKA,kBAAkB;QAClD;YAE2BF;QAA3B,MAAMI,cAAcC,OAAOL,CAAAA,yBAAAA,UAAUI,WAAW,cAArBJ,oCAAAA,yBAAyB;YAC3BA;QAAzB,MAAMM,YAAYD,OAAOL,CAAAA,wCAAAA,oBAAAA,UAAUO,MAAM,cAAhBP,wCAAAA,kBAAkBQ,SAAS,GAAGC,QAAQ,cAAtCT,kDAAAA,uCAA0C;QAEnE,OAAOI,cAAc,KAAKA,cAAcE;IAC1C;IAEA,OAAO;AACT"}

View File

@@ -0,0 +1,46 @@
'use client';
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useChildElement", {
enumerable: true,
get: function() {
return useChildElement;
}
});
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 CHILD_ERROR_MESSAGE = [
'@fluentui/react-motion: Invalid child element.',
'\n',
'Motion factories require a single child element to be passed. ',
'That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().'
].join('');
function useChildElement(children, mounted = true) {
const childRef = _react.useRef(null);
_react.useEffect(()=>{
if (process.env.NODE_ENV !== 'production') {
if (mounted && !childRef.current) {
// eslint-disable-next-line no-console
console.error(CHILD_ERROR_MESSAGE);
}
}
}, [
mounted
]);
try {
const child = _react.Children.only(children);
if (_react.isValidElement(child)) {
return [
_react.cloneElement(child, {
ref: (0, _reactutilities.useMergedRefs)(childRef, (0, _reactutilities.getReactElementRef)(child))
}),
childRef
];
}
} catch {
/* empty */ }
throw new Error(CHILD_ERROR_MESSAGE);
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/useChildElement.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getReactElementRef, useMergedRefs } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nconst CHILD_ERROR_MESSAGE = [\n '@fluentui/react-motion: Invalid child element.',\n '\\n',\n 'Motion factories require a single child element to be passed. ',\n 'That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().',\n].join('');\n\n/**\n * Validates the child and returns a cloned child element with a ref.\n *\n * Throws an error if the child is not a valid React element, similar to \"React.Children.only\".\n * Logs a warning in development mode if the ref is not set as the component remains functional.\n */\nexport function useChildElement(\n children: JSXElement,\n mounted: boolean = true,\n): [JSXElement, React.RefObject<HTMLElement | null>] {\n const childRef = React.useRef<HTMLElement>(null);\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production') {\n if (mounted && !childRef.current) {\n // eslint-disable-next-line no-console\n console.error(CHILD_ERROR_MESSAGE);\n }\n }\n }, [mounted]);\n\n try {\n const child = React.Children.only(children) as Parameters<typeof React.isValidElement>[0];\n\n if (React.isValidElement(child)) {\n return [\n React.cloneElement(child as React.ReactElement<{ ref: React.Ref<HTMLElement> }>, {\n ref: useMergedRefs(childRef, getReactElementRef(child)),\n }),\n childRef,\n ];\n }\n } catch {\n /* empty */\n }\n\n throw new Error(CHILD_ERROR_MESSAGE);\n}\n"],"names":["useChildElement","CHILD_ERROR_MESSAGE","join","children","mounted","childRef","React","useRef","useEffect","process","env","NODE_ENV","current","console","error","child","Children","only","isValidElement","cloneElement","ref","useMergedRefs","getReactElementRef","Error"],"mappings":"AAAA;;;;;+BAmBgBA;;;eAAAA;;;;iEAjBO;gCAC2B;AAGlD,MAAMC,sBAAsB;IAC1B;IACA;IACA;IACA;CACD,CAACC,IAAI,CAAC;AAQA,SAASF,gBACdG,QAAoB,EACpBC,UAAmB,IAAI;IAEvB,MAAMC,WAAWC,OAAMC,MAAM,CAAc;IAE3CD,OAAME,SAAS,CAAC;QACd,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,IAAIP,WAAW,CAACC,SAASO,OAAO,EAAE;gBAChC,sCAAsC;gBACtCC,QAAQC,KAAK,CAACb;YAChB;QACF;IACF,GAAG;QAACG;KAAQ;IAEZ,IAAI;QACF,MAAMW,QAAQT,OAAMU,QAAQ,CAACC,IAAI,CAACd;QAElC,IAAIG,OAAMY,cAAc,CAACH,QAAQ;YAC/B,OAAO;gBACLT,OAAMa,YAAY,CAACJ,OAA8D;oBAC/EK,KAAKC,IAAAA,6BAAa,EAAChB,UAAUiB,IAAAA,kCAAkB,EAACP;gBAClD;gBACAV;aACD;QACH;IACF,EAAE,OAAM;IACN,SAAS,GACX;IAEA,MAAM,IAAIkB,MAAMtB;AAClB"}

View File

@@ -0,0 +1,35 @@
'use client';
import * as React from 'react';
const MotionRefForwarderContext = /*#__PURE__*/ React.createContext(undefined);
/**
* A hook that reads the ref forwarded by `MotionRefForwarder` from context.
* Used in child components to merge the motion ref into the root slot ref.
*
* @internal
*/ export function useMotionForwardedRef() {
return React.useContext(MotionRefForwarderContext);
}
/**
* A component that forwards a ref to its children via a React context.
* This is used to pass a motion component's ref through to the actual surface element,
* since motion components wrap their children and the ref needs to reach the inner element.
*
* @internal
*/ export const MotionRefForwarder = /*#__PURE__*/ React.forwardRef((props, ref)=>{
return /*#__PURE__*/ React.createElement(MotionRefForwarderContext.Provider, {
value: ref
}, props.children);
});
MotionRefForwarder.displayName = 'MotionRefForwarder';
/**
* Resets the MotionRefForwarder context to `undefined` for its children.
* Render this in components that consume `useMotionForwardedRef()` and render
* arbitrary user content, to prevent the context from leaking to descendants.
*
* @internal
*/ export const MotionRefForwarderReset = (props)=>{
return /*#__PURE__*/ React.createElement(MotionRefForwarderContext.Provider, {
value: undefined
}, props.children);
};
MotionRefForwarderReset.displayName = 'MotionRefForwarderReset';

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/MotionRefForwarder.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nconst MotionRefForwarderContext = React.createContext<React.Ref<HTMLElement> | undefined>(undefined);\n\n/**\n * A hook that reads the ref forwarded by `MotionRefForwarder` from context.\n * Used in child components to merge the motion ref into the root slot ref.\n *\n * @internal\n */\nexport function useMotionForwardedRef(): React.Ref<HTMLElement> | undefined {\n return React.useContext(MotionRefForwarderContext);\n}\n\n/**\n * A component that forwards a ref to its children via a React context.\n * This is used to pass a motion component's ref through to the actual surface element,\n * since motion components wrap their children and the ref needs to reach the inner element.\n *\n * @internal\n */\nexport const MotionRefForwarder = React.forwardRef<HTMLElement, { children?: React.ReactElement }>((props, ref) => {\n return <MotionRefForwarderContext.Provider value={ref}>{props.children}</MotionRefForwarderContext.Provider>;\n});\n\nMotionRefForwarder.displayName = 'MotionRefForwarder';\n\n/**\n * Resets the MotionRefForwarder context to `undefined` for its children.\n * Render this in components that consume `useMotionForwardedRef()` and render\n * arbitrary user content, to prevent the context from leaking to descendants.\n *\n * @internal\n */\nexport const MotionRefForwarderReset: React.FC<{ children: React.ReactElement }> = props => {\n return <MotionRefForwarderContext.Provider value={undefined}>{props.children}</MotionRefForwarderContext.Provider>;\n};\n\nMotionRefForwarderReset.displayName = 'MotionRefForwarderReset';\n"],"names":["React","MotionRefForwarderContext","createContext","undefined","useMotionForwardedRef","useContext","MotionRefForwarder","forwardRef","props","ref","Provider","value","children","displayName","MotionRefForwarderReset"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,MAAMC,0CAA4BD,MAAME,aAAa,CAAqCC;AAE1F;;;;;CAKC,GACD,OAAO,SAASC;IACd,OAAOJ,MAAMK,UAAU,CAACJ;AAC1B;AAEA;;;;;;CAMC,GACD,OAAO,MAAMK,mCAAqBN,MAAMO,UAAU,CAAiD,CAACC,OAAOC;IACzG,qBAAO,oBAACR,0BAA0BS,QAAQ;QAACC,OAAOF;OAAMD,MAAMI,QAAQ;AACxE,GAAG;AAEHN,mBAAmBO,WAAW,GAAG;AAEjC;;;;;;CAMC,GACD,OAAO,MAAMC,0BAAsEN,CAAAA;IACjF,qBAAO,oBAACP,0BAA0BS,QAAQ;QAACC,OAAOR;OAAYK,MAAMI,QAAQ;AAC9E,EAAE;AAEFE,wBAAwBD,WAAW,GAAG"}

View File

@@ -0,0 +1,54 @@
'use client';
import { _ as _define_property } from "@swc/helpers/_/_define_property";
import * as React from 'react';
import { getNextChildMapping } from '../utils/groups/getNextChildMapping';
import { getChildMapping } from '../utils/groups/getChildMapping';
import { PresenceGroupItemProvider } from './PresenceGroupItemProvider';
/* eslint-disable @typescript-eslint/explicit-member-accessibility */ /* eslint-disable @typescript-eslint/naming-convention */ /* eslint-disable @typescript-eslint/member-ordering */ export class PresenceGroup extends React.Component {
static getDerivedStateFromProps(nextProps, { childMapping: prevChildMapping, firstRender }) {
const nextChildMapping = getChildMapping(nextProps.children);
return {
childMapping: firstRender ? nextChildMapping : getNextChildMapping(prevChildMapping, nextChildMapping),
firstRender: false
};
}
componentDidMount() {
this.mounted = true;
}
componentWillUnmount() {
this.mounted = false;
}
render() {
return /*#__PURE__*/ React.createElement(React.Fragment, null, Object.entries(this.state.childMapping).map(([childKey, childProps])=>/*#__PURE__*/ React.createElement(PresenceGroupItemProvider, {
...childProps,
childKey: childKey,
key: childKey,
onExit: this.handleExit
}, childProps.element)));
}
constructor(props, context){
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore - React.Component constructor has only one argument in React 19
super(props, context), _define_property(this, "mounted", false), _define_property(this, "handleExit", (childKey)=>{
const currentChildMapping = getChildMapping(this.props.children);
if (childKey in currentChildMapping) {
return;
}
if (this.mounted) {
this.setState((state)=>{
const childMapping = {
...state.childMapping
};
delete childMapping[childKey];
return {
childMapping
};
});
}
});
this.state = {
childMapping: {},
firstRender: true
};
}
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PresenceGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { getNextChildMapping } from '../utils/groups/getNextChildMapping';\nimport { getChildMapping } from '../utils/groups/getChildMapping';\nimport type { PresenceGroupChildMapping } from '../utils/groups/types';\nimport { PresenceGroupItemProvider } from './PresenceGroupItemProvider';\n\ntype PresenceGroupProps = {\n children: React.ReactNode;\n};\n\ntype PresenceGroupState = {\n childMapping: PresenceGroupChildMapping;\n firstRender: boolean;\n};\n\n/* eslint-disable @typescript-eslint/explicit-member-accessibility */\n/* eslint-disable @typescript-eslint/naming-convention */\n/* eslint-disable @typescript-eslint/member-ordering */\n\nexport class PresenceGroup extends React.Component<PresenceGroupProps, PresenceGroupState> {\n private mounted: boolean = false;\n\n static getDerivedStateFromProps(\n nextProps: PresenceGroupProps,\n { childMapping: prevChildMapping, firstRender }: PresenceGroupState,\n ): PresenceGroupState {\n const nextChildMapping = getChildMapping(nextProps.children);\n\n return {\n childMapping: firstRender ? nextChildMapping : getNextChildMapping(prevChildMapping, nextChildMapping),\n firstRender: false,\n };\n }\n\n constructor(props: PresenceGroupProps, context?: unknown) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore - React.Component constructor has only one argument in React 19\n super(props, context);\n\n this.state = {\n childMapping: {},\n firstRender: true,\n };\n }\n\n private handleExit = (childKey: string): void => {\n const currentChildMapping = getChildMapping(this.props.children);\n\n if (childKey in currentChildMapping) {\n return;\n }\n\n if (this.mounted) {\n this.setState(state => {\n const childMapping = { ...state.childMapping };\n delete childMapping[childKey];\n\n return { childMapping };\n });\n }\n };\n\n componentDidMount(): void {\n this.mounted = true;\n }\n\n componentWillUnmount(): void {\n this.mounted = false;\n }\n render(): JSXElement {\n return (\n <>\n {Object.entries(this.state.childMapping).map(([childKey, childProps]) => (\n <PresenceGroupItemProvider {...childProps} childKey={childKey} key={childKey} onExit={this.handleExit}>\n {childProps.element}\n </PresenceGroupItemProvider>\n ))}\n </>\n );\n }\n}\n"],"names":["React","getNextChildMapping","getChildMapping","PresenceGroupItemProvider","PresenceGroup","Component","getDerivedStateFromProps","nextProps","childMapping","prevChildMapping","firstRender","nextChildMapping","children","componentDidMount","mounted","componentWillUnmount","render","Object","entries","state","map","childKey","childProps","key","onExit","handleExit","element","constructor","props","context","currentChildMapping","setState"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,mBAAmB,QAAQ,sCAAsC;AAC1E,SAASC,eAAe,QAAQ,kCAAkC;AAElE,SAASC,yBAAyB,QAAQ,8BAA8B;AAWxE,mEAAmE,GACnE,uDAAuD,GACvD,qDAAqD,GAErD,OAAO,MAAMC,sBAAsBJ,MAAMK,SAAS;IAGhD,OAAOC,yBACLC,SAA6B,EAC7B,EAAEC,cAAcC,gBAAgB,EAAEC,WAAW,EAAsB,EAC/C;QACpB,MAAMC,mBAAmBT,gBAAgBK,UAAUK,QAAQ;QAE3D,OAAO;YACLJ,cAAcE,cAAcC,mBAAmBV,oBAAoBQ,kBAAkBE;YACrFD,aAAa;QACf;IACF;IA8BAG,oBAA0B;QACxB,IAAI,CAACC,OAAO,GAAG;IACjB;IAEAC,uBAA6B;QAC3B,IAAI,CAACD,OAAO,GAAG;IACjB;IACAE,SAAqB;QACnB,qBACE,0CACGC,OAAOC,OAAO,CAAC,IAAI,CAACC,KAAK,CAACX,YAAY,EAAEY,GAAG,CAAC,CAAC,CAACC,UAAUC,WAAW,iBAClE,oBAACnB;gBAA2B,GAAGmB,UAAU;gBAAED,UAAUA;gBAAUE,KAAKF;gBAAUG,QAAQ,IAAI,CAACC,UAAU;eAClGH,WAAWI,OAAO;IAK7B;IA7CAC,YAAYC,KAAyB,EAAEC,OAAiB,CAAE;QACxD,6DAA6D;QAC7D,6EAA6E;QAC7E,KAAK,CAACD,OAAOC,UAjBf,uBAAQf,WAAmB,QAyB3B,uBAAQW,cAAa,CAACJ;YACpB,MAAMS,sBAAsB5B,gBAAgB,IAAI,CAAC0B,KAAK,CAAChB,QAAQ;YAE/D,IAAIS,YAAYS,qBAAqB;gBACnC;YACF;YAEA,IAAI,IAAI,CAAChB,OAAO,EAAE;gBAChB,IAAI,CAACiB,QAAQ,CAACZ,CAAAA;oBACZ,MAAMX,eAAe;wBAAE,GAAGW,MAAMX,YAAY;oBAAC;oBAC7C,OAAOA,YAAY,CAACa,SAAS;oBAE7B,OAAO;wBAAEb;oBAAa;gBACxB;YACF;QACF;QArBE,IAAI,CAACW,KAAK,GAAG;YACXX,cAAc,CAAC;YACfE,aAAa;QACf;IACF;AAqCF"}

View File

@@ -0,0 +1,26 @@
'use client';
import * as React from 'react';
import { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';
/**
* Provides context for a single child of a `PresenceGroup`. Exists only to make a stable context value for a child.
* Not intended for direct use.
*
* @internal
*/ export const PresenceGroupItemProvider = (props)=>{
const { appear, childKey, onExit, visible, unmountOnExit } = props;
const contextValue = React.useMemo(()=>({
appear,
visible,
onExit: ()=>onExit(childKey),
unmountOnExit
}), [
appear,
childKey,
onExit,
visible,
unmountOnExit
]);
return /*#__PURE__*/ React.createElement(PresenceGroupChildContext.Provider, {
value: contextValue
}, props.children);
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/PresenceGroupItemProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport type { PresenceGroupChildContextValue } from '../contexts/PresenceGroupChildContext';\n\ntype PresenceGroupItemProviderProps = Omit<PresenceGroupChildContextValue, 'onExit'> & {\n children: JSXElement;\n childKey: string;\n // That's an internal callback, so we don't need to enforce the type here\n // eslint-disable-next-line @nx/workspace-consistent-callback-type\n onExit: (childKey: string) => void;\n};\n\n/**\n * Provides context for a single child of a `PresenceGroup`. Exists only to make a stable context value for a child.\n * Not intended for direct use.\n *\n * @internal\n */\nexport const PresenceGroupItemProvider: React.FC<PresenceGroupItemProviderProps> = props => {\n const { appear, childKey, onExit, visible, unmountOnExit } = props;\n const contextValue = React.useMemo(\n () => ({\n appear,\n visible,\n onExit: () => onExit(childKey),\n unmountOnExit,\n }),\n [appear, childKey, onExit, visible, unmountOnExit],\n );\n\n return <PresenceGroupChildContext.Provider value={contextValue}>{props.children}</PresenceGroupChildContext.Provider>;\n};\n"],"names":["React","PresenceGroupChildContext","PresenceGroupItemProvider","props","appear","childKey","onExit","visible","unmountOnExit","contextValue","useMemo","Provider","value","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,yBAAyB,QAAQ,wCAAwC;AAWlF;;;;;CAKC,GACD,OAAO,MAAMC,4BAAsEC,CAAAA;IACjF,MAAM,EAAEC,MAAM,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,OAAO,EAAEC,aAAa,EAAE,GAAGL;IAC7D,MAAMM,eAAeT,MAAMU,OAAO,CAChC,IAAO,CAAA;YACLN;YACAG;YACAD,QAAQ,IAAMA,OAAOD;YACrBG;QACF,CAAA,GACA;QAACJ;QAAQC;QAAUC;QAAQC;QAASC;KAAc;IAGpD,qBAAO,oBAACP,0BAA0BU,QAAQ;QAACC,OAAOH;OAAeN,MAAMU,QAAQ;AACjF,EAAE"}

View File

@@ -0,0 +1,8 @@
'use client';
import * as React from 'react';
const MotionBehaviourContext = React.createContext(undefined);
export const MotionBehaviourProvider = MotionBehaviourContext.Provider;
export const useMotionBehaviourContext = ()=>{
var _React_useContext;
return (_React_useContext = React.useContext(MotionBehaviourContext)) !== null && _React_useContext !== void 0 ? _React_useContext : 'default';
};

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/MotionBehaviourContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\n/**\n * Specifies the behaviour of child motion component under @see MotionBehaviourProvider.\n */\nexport type MotionBehaviourType = 'skip' | 'default';\n\nconst MotionBehaviourContext = React.createContext<MotionBehaviourType | undefined>(undefined);\n\nexport const MotionBehaviourProvider = MotionBehaviourContext.Provider;\nexport const useMotionBehaviourContext = (): MotionBehaviourType =>\n React.useContext(MotionBehaviourContext) ?? 'default';\n"],"names":["React","MotionBehaviourContext","createContext","undefined","MotionBehaviourProvider","Provider","useMotionBehaviourContext","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAO/B,MAAMC,yBAAyBD,MAAME,aAAa,CAAkCC;AAEpF,OAAO,MAAMC,0BAA0BH,uBAAuBI,QAAQ,CAAC;AACvE,OAAO,MAAMC,4BAA4B;QACvCN;WAAAA,CAAAA,oBAAAA,MAAMO,UAAU,CAACN,qCAAjBD,+BAAAA,oBAA4C;EAAU"}

View File

@@ -0,0 +1,7 @@
'use client';
import * as React from 'react';
/**
* @internal
*/ export const PresenceGroupChildContext = React.createContext(undefined);
export const PresenceGroupChildProvider = PresenceGroupChildContext.Provider;
export const usePresenceGroupChildContext = ()=>React.useContext(PresenceGroupChildContext);

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/contexts/PresenceGroupChildContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nexport type PresenceGroupChildContextValue = {\n appear: boolean;\n visible: boolean;\n unmountOnExit: boolean;\n\n onExit: () => void;\n};\n\n/**\n * @internal\n */\nexport const PresenceGroupChildContext = React.createContext<PresenceGroupChildContextValue | undefined>(undefined);\n\nexport const PresenceGroupChildProvider = PresenceGroupChildContext.Provider;\nexport const usePresenceGroupChildContext = (): PresenceGroupChildContextValue | undefined =>\n React.useContext(PresenceGroupChildContext);\n"],"names":["React","PresenceGroupChildContext","createContext","undefined","PresenceGroupChildProvider","Provider","usePresenceGroupChildContext","useContext"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAU/B;;CAEC,GACD,OAAO,MAAMC,4BAA4BD,MAAME,aAAa,CAA6CC,WAAW;AAEpH,OAAO,MAAMC,6BAA6BH,0BAA0BI,QAAQ,CAAC;AAC7E,OAAO,MAAMC,+BAA+B,IAC1CN,MAAMO,UAAU,CAACN,2BAA2B"}

View File

@@ -0,0 +1,85 @@
'use client';
import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
import * as React from 'react';
import { useAnimateAtoms } from '../hooks/useAnimateAtoms';
import { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';
import { useIsReducedMotion } from '../hooks/useIsReducedMotion';
import { useChildElement } from '../utils/useChildElement';
import { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';
/**
* A private symbol to store the motion definition on the component for variants.
*
* @internal
*/ export const MOTION_DEFINITION = Symbol('MOTION_DEFINITION');
/**
* Creates a component that will animate the children using the provided motion.
*
* @param value - A motion definition.
*/ export function createMotionComponent(value) {
const Atom = (props)=>{
'use no memo';
const { children, imperativeRef, onMotionFinish: onMotionFinishProp, onMotionStart: onMotionStartProp, onMotionCancel: onMotionCancelProp, ..._rest } = props;
const params = _rest;
const [child, childRef] = useChildElement(children);
const handleRef = useMotionImperativeRef(imperativeRef);
const skipMotions = useMotionBehaviourContext() === 'skip';
const optionsRef = React.useRef({
skipMotions,
params
});
const animateAtoms = useAnimateAtoms();
const isReducedMotion = useIsReducedMotion();
const onMotionStart = useEventCallback(()=>{
onMotionStartProp === null || onMotionStartProp === void 0 ? void 0 : onMotionStartProp(null);
});
const onMotionFinish = useEventCallback(()=>{
onMotionFinishProp === null || onMotionFinishProp === void 0 ? void 0 : onMotionFinishProp(null);
});
const onMotionCancel = useEventCallback(()=>{
onMotionCancelProp === null || onMotionCancelProp === void 0 ? void 0 : onMotionCancelProp(null);
});
useIsomorphicLayoutEffect(()=>{
// Heads up!
// We store the params in a ref to avoid re-rendering the component when the params change.
optionsRef.current = {
skipMotions,
params
};
});
useIsomorphicLayoutEffect(()=>{
const element = childRef.current;
if (element) {
const atoms = typeof value === 'function' ? value({
element,
...optionsRef.current.params
}) : value;
onMotionStart();
const handle = animateAtoms(element, atoms, {
isReducedMotion: isReducedMotion()
});
handleRef.current = handle;
handle.setMotionEndCallbacks(onMotionFinish, onMotionCancel);
if (optionsRef.current.skipMotions) {
handle.finish();
}
return ()=>{
handle.cancel();
};
}
}, [
animateAtoms,
childRef,
handleRef,
isReducedMotion,
onMotionFinish,
onMotionStart,
onMotionCancel
]);
return child;
};
return Object.assign(Atom, {
// Heads up!
// Always normalize it to a function to simplify types
[MOTION_DEFINITION]: typeof value === 'function' ? value : ()=>value
});
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,29 @@
import { MOTION_DEFINITION, createMotionComponent } from './createMotionComponent';
/**
* Create a variant function that wraps a motion function to customize it.
* The new motion function has the supplied variant params as defaults,
* but these can still be overridden by runtime params when the new function is called.
*
* @internal
*/ export function createMotionFnVariant(motionFn, variantParams) {
const variantFn = (runtimeParams)=>motionFn({
...variantParams,
...runtimeParams
});
return variantFn;
}
/**
* Create a new motion component based on another motion component,
* using the provided variant parameters as defaults.
*
* @param component - A component created by `createMotionComponent`.
* @param variantParams - An object containing the variant parameters to be used as defaults.
* The variant parameters should match the type of the component's motion parameters.
* @returns A new motion component that uses the provided variant parameters as defaults.
* The new component can still accept runtime parameters that override the defaults.
*/ export function createMotionComponentVariant(component, variantParams) {
const originalFn = component[MOTION_DEFINITION];
// The variant params become new defaults, but they can still be overridden by runtime params.
const variantFn = createMotionFnVariant(originalFn, variantParams);
return createMotionComponent(variantFn);
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/factories/createMotionComponentVariant.ts"],"sourcesContent":["import type { MotionParam, AtomMotionFn } from '../types';\nimport { MOTION_DEFINITION, createMotionComponent, MotionComponent } from './createMotionComponent';\n\n/**\n * Create a variant function that wraps a motion function to customize it.\n * The new motion function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n *\n * @internal\n */\nexport function createMotionFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n motionFn: AtomMotionFn<MotionParams>,\n variantParams: Partial<MotionParams>,\n): typeof motionFn {\n const variantFn: typeof motionFn = runtimeParams => motionFn({ ...variantParams, ...runtimeParams });\n return variantFn;\n}\n\n/**\n * Create a new motion component based on another motion component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createMotionComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new motion component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createMotionComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n component: MotionComponent<MotionParams>,\n variantParams: Partial<MotionParams>,\n): MotionComponent<MotionParams> {\n const originalFn = component[MOTION_DEFINITION];\n // The variant params become new defaults, but they can still be overridden by runtime params.\n const variantFn = createMotionFnVariant(originalFn, variantParams);\n return createMotionComponent(variantFn);\n}\n"],"names":["MOTION_DEFINITION","createMotionComponent","createMotionFnVariant","motionFn","variantParams","variantFn","runtimeParams","createMotionComponentVariant","component","originalFn"],"mappings":"AACA,SAASA,iBAAiB,EAAEC,qBAAqB,QAAyB,0BAA0B;AAEpG;;;;;;CAMC,GACD,OAAO,SAASC,sBACdC,QAAoC,EACpCC,aAAoC;IAEpC,MAAMC,YAA6BC,CAAAA,gBAAiBH,SAAS;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IAClG,OAAOD;AACT;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASE,6BACdC,SAAwC,EACxCJ,aAAoC;IAEpC,MAAMK,aAAaD,SAAS,CAACR,kBAAkB;IAC/C,8FAA8F;IAC9F,MAAMK,YAAYH,sBAAsBO,YAAYL;IACpD,OAAOH,sBAAsBI;AAC/B"}

View File

@@ -0,0 +1,168 @@
'use client';
import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
import * as React from 'react';
import { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';
import { useAnimateAtoms } from '../hooks/useAnimateAtoms';
import { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';
import { useMountedState } from '../hooks/useMountedState';
import { useIsReducedMotion } from '../hooks/useIsReducedMotion';
import { useChildElement } from '../utils/useChildElement';
import { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';
import { createMotionComponent } from './createMotionComponent';
/**
* A private symbol to store the motion definition on the component for variants.
*
* @internal
*/ export const PRESENCE_MOTION_DEFINITION = Symbol('PRESENCE_MOTION_DEFINITION');
const INTERRUPTABLE_MOTION_SYMBOL = Symbol.for('interruptablePresence');
export function createPresenceComponent(value) {
return Object.assign((props)=>{
'use no memo';
const itemContext = React.useContext(PresenceGroupChildContext);
const merged = {
...itemContext,
...props
};
const skipMotions = useMotionBehaviourContext() === 'skip';
const { appear, children, imperativeRef, onExit, onMotionFinish, onMotionStart, onMotionCancel, visible, unmountOnExit, ..._rest } = merged;
const params = _rest;
const [mounted, setMounted] = useMountedState(visible, unmountOnExit);
const [child, childRef] = useChildElement(children, mounted);
const handleRef = useMotionImperativeRef(imperativeRef);
const optionsRef = React.useRef({
appear,
params,
skipMotions
});
const animateAtoms = useAnimateAtoms();
const isFirstMount = useFirstMount();
const isReducedMotion = useIsReducedMotion();
const handleMotionStart = useEventCallback((direction)=>{
onMotionStart === null || onMotionStart === void 0 ? void 0 : onMotionStart(null, {
direction
});
});
const handleMotionFinish = useEventCallback((direction)=>{
onMotionFinish === null || onMotionFinish === void 0 ? void 0 : onMotionFinish(null, {
direction
});
if (direction === 'exit' && unmountOnExit) {
setMounted(false);
onExit === null || onExit === void 0 ? void 0 : onExit();
}
});
const handleMotionCancel = useEventCallback((direction)=>{
onMotionCancel === null || onMotionCancel === void 0 ? void 0 : onMotionCancel(null, {
direction
});
});
useIsomorphicLayoutEffect(()=>{
// Heads up!
// We store the params in a ref to avoid re-rendering the component when the params change.
optionsRef.current = {
appear,
params,
skipMotions
};
});
useIsomorphicLayoutEffect(()=>{
const element = childRef.current;
if (!element) {
return;
}
let handle;
function cleanup() {
if (!handle) {
return;
}
// Heads up!
//
// If the animation is interruptible & is running, we don't want to cancel it as it will be reversed in
// the next effect.
if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION && handle.isRunning()) {
return;
}
handle.cancel();
handleRef.current = undefined;
}
const presenceMotion = typeof value === 'function' ? value({
element,
...optionsRef.current.params
}) : value;
const IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION = presenceMotion[INTERRUPTABLE_MOTION_SYMBOL];
if (IS_EXPERIMENTAL_INTERRUPTIBLE_MOTION) {
handle = handleRef.current;
if (handle && handle.isRunning()) {
handle.reverse();
return cleanup;
}
}
const atoms = visible ? presenceMotion.enter : presenceMotion.exit;
const direction = visible ? 'enter' : 'exit';
// Heads up!
// Initial styles are applied when the component is mounted for the first time and "appear" is set to "false" (otherwise animations are triggered)
const applyInitialStyles = !optionsRef.current.appear && isFirstMount;
const skipAnimationByConfig = optionsRef.current.skipMotions;
if (!applyInitialStyles) {
handleMotionStart(direction);
}
handle = animateAtoms(element, atoms, {
isReducedMotion: isReducedMotion()
});
if (applyInitialStyles) {
// Heads up!
// .finish() is used in this case to skip animation and apply animation styles immediately
handle.finish();
return cleanup;
}
handleRef.current = handle;
handle.setMotionEndCallbacks(()=>handleMotionFinish(direction), ()=>handleMotionCancel(direction));
if (skipAnimationByConfig) {
handle.finish();
}
return cleanup;
}, // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders
// eslint-disable-next-line react-hooks/exhaustive-deps
[
animateAtoms,
childRef,
handleRef,
isReducedMotion,
handleMotionFinish,
handleMotionStart,
handleMotionCancel,
visible
]);
React.useEffect(()=>{
// Heads up!
//
// Dispose the handle when unmounting the component to clean up retained references. Doing it in a separate
// effect to ensure that the component is unmounted.
if (unmountOnExit && !mounted) {
var _handleRef_current;
(_handleRef_current = handleRef.current) === null || _handleRef_current === void 0 ? void 0 : _handleRef_current.dispose();
}
}, [
handleRef,
unmountOnExit,
mounted
]);
if (mounted) {
return child;
}
return null;
}, {
// Heads up!
// Always normalize it to a function to simplify types
[PRESENCE_MOTION_DEFINITION]: typeof value === 'function' ? value : ()=>value
}, {
// Wrap `enter` in its own motion component as a static method, e.g. <Fade.In>
In: createMotionComponent(// If we have a motion function, wrap it to forward the runtime params and pick `enter`.
// Otherwise, pass the `enter` motion object directly.
typeof value === 'function' ? (...args)=>value(...args).enter : value.enter),
// Wrap `exit` in its own motion component as a static method, e.g. <Fade.Out>
Out: createMotionComponent(// If we have a motion function, wrap it to forward the runtime params and pick `exit`.
// Otherwise, pass the `exit` motion object directly.
typeof value === 'function' ? (...args)=>value(...args).exit : value.exit)
});
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,29 @@
import { PRESENCE_MOTION_DEFINITION, createPresenceComponent } from './createPresenceComponent';
/**
* Create a variant function that wraps a presence function to customize it.
* The new presence function has the supplied variant params as defaults,
* but these can still be overridden by runtime params when the new function is called.
*
* @internal
*/ export function createPresenceFnVariant(presenceFn, variantParams) {
const variantFn = (runtimeParams)=>presenceFn({
...variantParams,
...runtimeParams
});
return variantFn;
}
/**
* Create a new presence component based on another presence component,
* using the provided variant parameters as defaults.
*
* @param component - A component created by `createPresenceComponent`.
* @param variantParams - An object containing the variant parameters to be used as defaults.
* The variant parameters should match the type of the component's motion parameters.
* @returns A new presence component that uses the provided variant parameters as defaults.
* The new component can still accept runtime parameters that override the defaults.
*/ export function createPresenceComponentVariant(component, variantParams) {
const originalFn = component[PRESENCE_MOTION_DEFINITION];
// The variant params become new defaults, but they can still be overridden by runtime params.
const variantFn = createPresenceFnVariant(originalFn, variantParams);
return createPresenceComponent(variantFn);
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/factories/createPresenceComponentVariant.ts"],"sourcesContent":["import type { MotionParam, PresenceMotionFn } from '../types';\nimport { PRESENCE_MOTION_DEFINITION, createPresenceComponent, PresenceComponent } from './createPresenceComponent';\n\n/**\n * Create a variant function that wraps a presence function to customize it.\n * The new presence function has the supplied variant params as defaults,\n * but these can still be overridden by runtime params when the new function is called.\n *\n * @internal\n */\nexport function createPresenceFnVariant<MotionParams extends Record<string, MotionParam> = {}>(\n presenceFn: PresenceMotionFn<MotionParams>,\n variantParams: Partial<MotionParams>,\n): typeof presenceFn {\n const variantFn: typeof presenceFn = runtimeParams => presenceFn({ ...variantParams, ...runtimeParams });\n return variantFn;\n}\n\n/**\n * Create a new presence component based on another presence component,\n * using the provided variant parameters as defaults.\n *\n * @param component - A component created by `createPresenceComponent`.\n * @param variantParams - An object containing the variant parameters to be used as defaults.\n * The variant parameters should match the type of the component's motion parameters.\n * @returns A new presence component that uses the provided variant parameters as defaults.\n * The new component can still accept runtime parameters that override the defaults.\n */\nexport function createPresenceComponentVariant<MotionParams extends Record<string, MotionParam> = {}>(\n component: PresenceComponent<MotionParams>,\n variantParams: Partial<MotionParams>,\n): PresenceComponent<MotionParams> {\n const originalFn = component[PRESENCE_MOTION_DEFINITION];\n // The variant params become new defaults, but they can still be overridden by runtime params.\n const variantFn = createPresenceFnVariant(originalFn, variantParams);\n return createPresenceComponent(variantFn);\n}\n"],"names":["PRESENCE_MOTION_DEFINITION","createPresenceComponent","createPresenceFnVariant","presenceFn","variantParams","variantFn","runtimeParams","createPresenceComponentVariant","component","originalFn"],"mappings":"AACA,SAASA,0BAA0B,EAAEC,uBAAuB,QAA2B,4BAA4B;AAEnH;;;;;;CAMC,GACD,OAAO,SAASC,wBACdC,UAA0C,EAC1CC,aAAoC;IAEpC,MAAMC,YAA+BC,CAAAA,gBAAiBH,WAAW;YAAE,GAAGC,aAAa;YAAE,GAAGE,aAAa;QAAC;IACtG,OAAOD;AACT;AAEA;;;;;;;;;CASC,GACD,OAAO,SAASE,+BACdC,SAA0C,EAC1CJ,aAAoC;IAEpC,MAAMK,aAAaD,SAAS,CAACR,2BAA2B;IACxD,8FAA8F;IAC9F,MAAMK,YAAYH,wBAAwBO,YAAYL;IACtD,OAAOH,wBAAwBI;AACjC"}

View File

@@ -0,0 +1,184 @@
'use client';
import * as React from 'react';
import { isAnimationRunning } from '../utils/isAnimationRunning';
export const DEFAULT_ANIMATION_OPTIONS = {
fill: 'forwards'
};
// A motion atom's default reduced motion is a simple 1 ms duration.
// But an atom can define a custom reduced motion, overriding keyframes and/or params like duration, easing, iterations, etc.
const DEFAULT_REDUCED_MOTION_ATOM = {
duration: 1
};
/**
* Creates an animation handle that controls multiple animations.
* Is used to avoid leaking "element" references from the hook.
*
* @param animations
*/ function createHandle(animations) {
return {
set playbackRate (rate){
animations.forEach((animation)=>{
animation.playbackRate = rate;
});
},
setMotionEndCallbacks (onfinish, oncancel) {
// Heads up!
// This could use "Animation:finished", but it's causing a memory leak in Chromium.
// See: https://issues.chromium.org/u/2/issues/383016426
const promises = animations.map((animation)=>{
return new Promise((resolve, reject)=>{
animation.onfinish = ()=>resolve();
animation.oncancel = ()=>reject();
});
});
Promise.all(promises).then(()=>{
onfinish();
}).catch(()=>{
oncancel();
});
},
isRunning () {
return animations.some((animation)=>isAnimationRunning(animation));
},
dispose: ()=>{
animations.length = 0;
},
cancel: ()=>{
animations.forEach((animation)=>{
animation.cancel();
});
},
pause: ()=>{
animations.forEach((animation)=>{
animation.pause();
});
},
play: ()=>{
animations.forEach((animation)=>{
animation.play();
});
},
finish: ()=>{
animations.forEach((animation)=>{
animation.finish();
});
},
reverse: ()=>{
// Heads up!
//
// This is used for the interruptible motion. If the animation is running, we need to reverse it.
//
// TODO: what do with animations that have "delay"?
// TODO: what do with animations that have different "durations"?
animations.forEach((animation)=>{
animation.reverse();
});
}
};
}
function useAnimateAtomsInSupportedEnvironment() {
var _window_Animation;
// eslint-disable-next-line @nx/workspace-no-restricted-globals
const SUPPORTS_PERSIST = typeof window !== 'undefined' && typeof ((_window_Animation = window.Animation) === null || _window_Animation === void 0 ? void 0 : _window_Animation.prototype.persist) === 'function';
return React.useCallback((element, value, options)=>{
const atoms = Array.isArray(value) ? value : [
value
];
const { isReducedMotion } = options;
const animations = atoms.map((motion)=>{
// Grab the custom reduced motion definition if it exists, or fall back to the default reduced motion.
const { keyframes: motionKeyframes, reducedMotion = DEFAULT_REDUCED_MOTION_ATOM, ...params } = motion;
// Grab the reduced motion keyframes if they exist, or fall back to the regular keyframes.
const { keyframes: reducedMotionKeyframes = motionKeyframes, ...reducedMotionParams } = reducedMotion;
const animationKeyframes = isReducedMotion ? reducedMotionKeyframes : motionKeyframes;
const animationParams = {
...DEFAULT_ANIMATION_OPTIONS,
...params,
// Use reduced motion overrides (e.g. duration, easing) when reduced motion is enabled
...isReducedMotion && reducedMotionParams
};
try {
// Firefox can throw an error when calling `element.animate()`.
// See: https://github.com/microsoft/fluentui/issues/33902
const animation = element.animate(animationKeyframes, animationParams);
if (SUPPORTS_PERSIST) {
// Chromium browsers can return null when calling `element.animate()`.
// See: https://github.com/microsoft/fluentui/issues/33902
animation === null || animation === void 0 ? void 0 : animation.persist();
} else {
const resultKeyframe = animationKeyframes[animationKeyframes.length - 1];
var _element_style;
Object.assign((_element_style = element.style) !== null && _element_style !== void 0 ? _element_style : {}, resultKeyframe);
}
return animation;
} catch (e) {
return null;
}
}).filter((animation)=>!!animation);
return createHandle(animations);
}, [
SUPPORTS_PERSIST
]);
}
/**
* In test environments, this hook is used to delay the execution of a callback until the next render. This is necessary
* to ensure that the callback is not executed synchronously, which would cause the test to fail.
*
* @see https://github.com/microsoft/fluentui/issues/31701
*/ function useAnimateAtomsInTestEnvironment() {
const [count, setCount] = React.useState(0);
const callbackRef = React.useRef(undefined);
const realAnimateAtoms = useAnimateAtomsInSupportedEnvironment();
React.useEffect(()=>{
if (count > 0) {
var _callbackRef_current;
(_callbackRef_current = callbackRef.current) === null || _callbackRef_current === void 0 ? void 0 : _callbackRef_current.call(callbackRef);
}
}, [
count
]);
return React.useCallback((element, value, options)=>{
const ELEMENT_SUPPORTS_WEB_ANIMATIONS = typeof element.animate === 'function';
// Heads up!
// If the environment supports Web Animations API, we can use the native implementation.
if (ELEMENT_SUPPORTS_WEB_ANIMATIONS) {
return realAnimateAtoms(element, value, options);
}
return {
setMotionEndCallbacks (onfinish) {
callbackRef.current = onfinish;
setCount((v)=>v + 1);
},
set playbackRate (rate){
/* no-op */ },
isRunning () {
return false;
},
dispose () {
/* no-op */ },
cancel () {
/* no-op */ },
pause () {
/* no-op */ },
play () {
/* no-op */ },
finish () {
/* no-op */ },
reverse () {
/* no-op */ }
};
}, [
realAnimateAtoms
]);
}
/**
* @internal
*/ export function useAnimateAtoms() {
'use no memo';
if (process.env.NODE_ENV === 'test') {
// eslint-disable-next-line react-hooks/rules-of-hooks
return useAnimateAtomsInTestEnvironment();
}
// eslint-disable-next-line react-hooks/rules-of-hooks
return useAnimateAtomsInSupportedEnvironment();
}

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,32 @@
'use client';
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
import * as React from 'react';
const REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';
// TODO: find a better approach there as each hook creates a separate subscription
export function useIsReducedMotion() {
const { targetDocument } = useFluent();
var _targetDocument_defaultView;
const targetWindow = (_targetDocument_defaultView = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) !== null && _targetDocument_defaultView !== void 0 ? _targetDocument_defaultView : null;
const queryValue = React.useRef(false);
const isEnabled = React.useCallback(()=>queryValue.current, []);
useIsomorphicLayoutEffect(()=>{
if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {
return;
}
const queryMatch = targetWindow.matchMedia(REDUCED_MEDIA_QUERY);
if (queryMatch.matches) {
queryValue.current = true;
}
const matchListener = (e)=>{
queryValue.current = e.matches;
};
queryMatch.addEventListener('change', matchListener);
return ()=>{
queryMatch.removeEventListener('change', matchListener);
};
}, [
targetWindow
]);
return isEnabled;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/useIsReducedMotion.ts"],"sourcesContent":["'use client';\n\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nconst REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';\n\n// TODO: find a better approach there as each hook creates a separate subscription\n\nexport function useIsReducedMotion(): () => boolean {\n const { targetDocument } = useFluent();\n const targetWindow: Window | null = targetDocument?.defaultView ?? null;\n\n const queryValue = React.useRef<boolean>(false);\n const isEnabled = React.useCallback(() => queryValue.current, []);\n\n useIsomorphicLayoutEffect(() => {\n if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {\n return;\n }\n\n const queryMatch = targetWindow.matchMedia(REDUCED_MEDIA_QUERY);\n\n if (queryMatch.matches) {\n queryValue.current = true;\n }\n\n const matchListener = (e: MediaQueryListEvent) => {\n queryValue.current = e.matches;\n };\n\n queryMatch.addEventListener('change', matchListener);\n\n return () => {\n queryMatch.removeEventListener('change', matchListener);\n };\n }, [targetWindow]);\n\n return isEnabled;\n}\n"],"names":["useFluent_unstable","useFluent","useIsomorphicLayoutEffect","React","REDUCED_MEDIA_QUERY","useIsReducedMotion","targetDocument","targetWindow","defaultView","queryValue","useRef","isEnabled","useCallback","current","matchMedia","queryMatch","matches","matchListener","e","addEventListener","removeEventListener"],"mappings":"AAAA;AAEA,SAASA,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,yBAAyB,QAAQ,4BAA4B;AACtE,YAAYC,WAAW,QAAQ;AAE/B,MAAMC,sBAAsB;AAE5B,kFAAkF;AAElF,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGL;QACSK;IAApC,MAAMC,eAA8BD,CAAAA,8BAAAA,2BAAAA,qCAAAA,eAAgBE,WAAW,cAA3BF,yCAAAA,8BAA+B;IAEnE,MAAMG,aAAaN,MAAMO,MAAM,CAAU;IACzC,MAAMC,YAAYR,MAAMS,WAAW,CAAC,IAAMH,WAAWI,OAAO,EAAE,EAAE;IAEhEX,0BAA0B;QACxB,IAAIK,iBAAiB,QAAQ,OAAOA,aAAaO,UAAU,KAAK,YAAY;YAC1E;QACF;QAEA,MAAMC,aAAaR,aAAaO,UAAU,CAACV;QAE3C,IAAIW,WAAWC,OAAO,EAAE;YACtBP,WAAWI,OAAO,GAAG;QACvB;QAEA,MAAMI,gBAAgB,CAACC;YACrBT,WAAWI,OAAO,GAAGK,EAAEF,OAAO;QAChC;QAEAD,WAAWI,gBAAgB,CAAC,UAAUF;QAEtC,OAAO;YACLF,WAAWK,mBAAmB,CAAC,UAAUH;QAC3C;IACF,GAAG;QAACV;KAAa;IAEjB,OAAOI;AACT"}

View File

@@ -0,0 +1,23 @@
'use client';
import * as React from 'react';
export function useMotionImperativeRef(imperativeRef) {
const animationRef = React.useRef(undefined);
React.useImperativeHandle(imperativeRef, ()=>({
setPlayState: (state)=>{
if (state === 'running') {
var _animationRef_current;
(_animationRef_current = animationRef.current) === null || _animationRef_current === void 0 ? void 0 : _animationRef_current.play();
}
if (state === 'paused') {
var _animationRef_current1;
(_animationRef_current1 = animationRef.current) === null || _animationRef_current1 === void 0 ? void 0 : _animationRef_current1.pause();
}
},
setPlaybackRate: (rate)=>{
if (animationRef.current) {
animationRef.current.playbackRate = rate;
}
}
}));
return animationRef;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/useMotionImperativeRef.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { AnimationHandle, MotionImperativeRef } from '../types';\n\nexport function useMotionImperativeRef(\n imperativeRef: React.Ref<MotionImperativeRef | undefined> | undefined,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n): React.MutableRefObject<AnimationHandle | undefined> {\n const animationRef = React.useRef<AnimationHandle | undefined>(undefined);\n\n React.useImperativeHandle(imperativeRef, () => ({\n setPlayState: state => {\n if (state === 'running') {\n animationRef.current?.play();\n }\n\n if (state === 'paused') {\n animationRef.current?.pause();\n }\n },\n setPlaybackRate: rate => {\n if (animationRef.current) {\n animationRef.current.playbackRate = rate;\n }\n },\n }));\n\n return animationRef;\n}\n"],"names":["React","useMotionImperativeRef","imperativeRef","animationRef","useRef","undefined","useImperativeHandle","setPlayState","state","current","play","pause","setPlaybackRate","rate","playbackRate"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,uBACdC,aAAqE;IAGrE,MAAMC,eAAeH,MAAMI,MAAM,CAA8BC;IAE/DL,MAAMM,mBAAmB,CAACJ,eAAe,IAAO,CAAA;YAC9CK,cAAcC,CAAAA;gBACZ,IAAIA,UAAU,WAAW;wBACvBL;qBAAAA,wBAAAA,aAAaM,OAAO,cAApBN,4CAAAA,sBAAsBO,IAAI;gBAC5B;gBAEA,IAAIF,UAAU,UAAU;wBACtBL;qBAAAA,yBAAAA,aAAaM,OAAO,cAApBN,6CAAAA,uBAAsBQ,KAAK;gBAC7B;YACF;YACAC,iBAAiBC,CAAAA;gBACf,IAAIV,aAAaM,OAAO,EAAE;oBACxBN,aAAaM,OAAO,CAACK,YAAY,GAAGD;gBACtC;YACF;QACF,CAAA;IAEA,OAAOV;AACT"}

View File

@@ -0,0 +1,27 @@
'use client';
import { useForceUpdate } from '@fluentui/react-utilities';
import * as React from 'react';
/**
* This hook manages the mounted state of a component, based on the "visible" and "unmountOnExit" props.
* It simulates the behavior of getDerivedStateFromProps(), which is not available in functional components.
*/ export function useMountedState(visible = false, unmountOnExit = false) {
const mountedRef = React.useRef(unmountOnExit ? visible : true);
const forceUpdate = useForceUpdate();
const setMounted = React.useCallback((newValue)=>{
if (mountedRef.current !== newValue) {
mountedRef.current = newValue;
forceUpdate();
}
}, [
forceUpdate
]);
React.useEffect(()=>{
if (visible) {
mountedRef.current = visible;
}
});
return [
visible || mountedRef.current,
setMounted
];
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/hooks/useMountedState.ts"],"sourcesContent":["'use client';\n\nimport { useForceUpdate } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\n/**\n * This hook manages the mounted state of a component, based on the \"visible\" and \"unmountOnExit\" props.\n * It simulates the behavior of getDerivedStateFromProps(), which is not available in functional components.\n */\nexport function useMountedState(\n visible: boolean = false,\n unmountOnExit: boolean = false,\n): [boolean, (value: boolean) => void] {\n const mountedRef = React.useRef<boolean>(unmountOnExit ? visible : true);\n const forceUpdate = useForceUpdate();\n\n const setMounted = React.useCallback(\n (newValue: boolean) => {\n if (mountedRef.current !== newValue) {\n mountedRef.current = newValue;\n forceUpdate();\n }\n },\n [forceUpdate],\n );\n\n React.useEffect(() => {\n if (visible) {\n mountedRef.current = visible;\n }\n });\n\n return [visible || mountedRef.current, setMounted];\n}\n"],"names":["useForceUpdate","React","useMountedState","visible","unmountOnExit","mountedRef","useRef","forceUpdate","setMounted","useCallback","newValue","current","useEffect"],"mappings":"AAAA;AAEA,SAASA,cAAc,QAAQ,4BAA4B;AAC3D,YAAYC,WAAW,QAAQ;AAE/B;;;CAGC,GACD,OAAO,SAASC,gBACdC,UAAmB,KAAK,EACxBC,gBAAyB,KAAK;IAE9B,MAAMC,aAAaJ,MAAMK,MAAM,CAAUF,gBAAgBD,UAAU;IACnE,MAAMI,cAAcP;IAEpB,MAAMQ,aAAaP,MAAMQ,WAAW,CAClC,CAACC;QACC,IAAIL,WAAWM,OAAO,KAAKD,UAAU;YACnCL,WAAWM,OAAO,GAAGD;YACrBH;QACF;IACF,GACA;QAACA;KAAY;IAGfN,MAAMW,SAAS,CAAC;QACd,IAAIT,SAAS;YACXE,WAAWM,OAAO,GAAGR;QACvB;IACF;IAEA,OAAO;QAACA,WAAWE,WAAWM,OAAO;QAAEH;KAAW;AACpD"}

11
node_modules/@fluentui/react-motion/lib/index.js generated vendored Normal file
View File

@@ -0,0 +1,11 @@
export { motionTokens, durations, curves } from './motions/motionTokens';
export { createMotionComponent } from './factories/createMotionComponent';
export { createMotionComponentVariant } from './factories/createMotionComponentVariant';
export { createPresenceComponent } from './factories/createPresenceComponent';
export { createPresenceComponentVariant } from './factories/createPresenceComponentVariant';
export { PresenceGroup } from './components/PresenceGroup';
export { MotionRefForwarder, MotionRefForwarderReset, useMotionForwardedRef } from './components/MotionRefForwarder';
export { motionSlot } from './slots/motionSlot';
export { presenceMotionSlot } from './slots/presenceMotionSlot';
export { PresenceGroupChildProvider, usePresenceGroupChildContext } from './contexts/PresenceGroupChildContext';
export { MotionBehaviourProvider } from './contexts/MotionBehaviourContext';

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

@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { motionTokens, durations, curves } from './motions/motionTokens';\n\nexport {\n createMotionComponent,\n type MotionComponentProps,\n type MotionComponent,\n} from './factories/createMotionComponent';\nexport { createMotionComponentVariant } from './factories/createMotionComponentVariant';\nexport {\n createPresenceComponent,\n type PresenceComponentProps,\n type PresenceComponent,\n} from './factories/createPresenceComponent';\nexport { createPresenceComponentVariant } from './factories/createPresenceComponentVariant';\n\nexport { PresenceGroup } from './components/PresenceGroup';\nexport { MotionRefForwarder, MotionRefForwarderReset, useMotionForwardedRef } from './components/MotionRefForwarder';\n\nexport { motionSlot, type MotionSlotProps } from './slots/motionSlot';\nexport { presenceMotionSlot, type PresenceMotionSlotProps } from './slots/presenceMotionSlot';\n\nexport {\n PresenceGroupChildProvider,\n usePresenceGroupChildContext,\n type PresenceGroupChildContextValue,\n} from './contexts/PresenceGroupChildContext';\n\nexport type {\n AtomMotion,\n AtomMotionFn,\n PresenceMotion,\n PresenceMotionFn,\n PresenceDirection,\n MotionImperativeRef,\n MotionParam,\n} from './types';\n\nexport { MotionBehaviourProvider } from './contexts/MotionBehaviourContext';\n"],"names":["motionTokens","durations","curves","createMotionComponent","createMotionComponentVariant","createPresenceComponent","createPresenceComponentVariant","PresenceGroup","MotionRefForwarder","MotionRefForwarderReset","useMotionForwardedRef","motionSlot","presenceMotionSlot","PresenceGroupChildProvider","usePresenceGroupChildContext","MotionBehaviourProvider"],"mappings":"AAAA,SAASA,YAAY,EAAEC,SAAS,EAAEC,MAAM,QAAQ,yBAAyB;AAEzE,SACEC,qBAAqB,QAGhB,oCAAoC;AAC3C,SAASC,4BAA4B,QAAQ,2CAA2C;AACxF,SACEC,uBAAuB,QAGlB,sCAAsC;AAC7C,SAASC,8BAA8B,QAAQ,6CAA6C;AAE5F,SAASC,aAAa,QAAQ,6BAA6B;AAC3D,SAASC,kBAAkB,EAAEC,uBAAuB,EAAEC,qBAAqB,QAAQ,kCAAkC;AAErH,SAASC,UAAU,QAA8B,qBAAqB;AACtE,SAASC,kBAAkB,QAAsC,6BAA6B;AAE9F,SACEC,0BAA0B,EAC1BC,4BAA4B,QAEvB,uCAAuC;AAY9C,SAASC,uBAAuB,QAAQ,oCAAoC"}

View File

@@ -0,0 +1,40 @@
// Copied from packages/tokens/src/global/durations.ts
// Values are numeric in milliseconds for ease of use in Web Animations API
// (rather than parsing '__ms')
export const durations = {
durationUltraFast: 50,
durationFaster: 100,
durationFast: 150,
durationNormal: 200,
durationGentle: 250,
durationSlow: 300,
durationSlower: 400,
durationUltraSlow: 500
};
// Copied from packages/tokens/src/global/curves.ts
// Names and values are preserved exactly
export const curves = {
curveAccelerateMax: 'cubic-bezier(0.9,0.1,1,0.2)',
curveAccelerateMid: 'cubic-bezier(1,0,1,1)',
curveAccelerateMin: 'cubic-bezier(0.8,0,0.78,1)',
curveDecelerateMax: 'cubic-bezier(0.1,0.9,0.2,1)',
curveDecelerateMid: 'cubic-bezier(0,0,0,1)',
curveDecelerateMin: 'cubic-bezier(0.33,0,0.1,1)',
curveEasyEaseMax: 'cubic-bezier(0.8,0,0.2,1)',
curveEasyEase: 'cubic-bezier(0.33,0,0.67,1)',
curveLinear: 'cubic-bezier(0,0,1,1)'
};
// A merged flat lookup for convenience
export const motionTokens = {
...durations,
...curves
}; /*
TODO: enforce naming conventions when TypeScript 4.4 features are supported in Fluent:
type DurationKey = `duration${Capitalize<string>}`;
type CurveKey = `curve${Capitalize<string>}`;
type CurveValue = `cubic-bezier(${number},${number},${number},${number})`;
type DurationTokens = Record<DurationKey, number>;
type CurveTokens = Record<CurveKey, CurveValue>;
*/

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/motions/motionTokens.ts"],"sourcesContent":["// Copied from packages/tokens/src/global/durations.ts\n// Values are numeric in milliseconds for ease of use in Web Animations API\n// (rather than parsing '__ms')\nexport const durations = {\n durationUltraFast: 50,\n durationFaster: 100,\n durationFast: 150,\n durationNormal: 200,\n durationGentle: 250,\n durationSlow: 300,\n durationSlower: 400,\n durationUltraSlow: 500,\n} as const;\n\n// Copied from packages/tokens/src/global/curves.ts\n// Names and values are preserved exactly\nexport const curves = {\n curveAccelerateMax: 'cubic-bezier(0.9,0.1,1,0.2)',\n curveAccelerateMid: 'cubic-bezier(1,0,1,1)',\n curveAccelerateMin: 'cubic-bezier(0.8,0,0.78,1)',\n curveDecelerateMax: 'cubic-bezier(0.1,0.9,0.2,1)',\n curveDecelerateMid: 'cubic-bezier(0,0,0,1)',\n curveDecelerateMin: 'cubic-bezier(0.33,0,0.1,1)',\n curveEasyEaseMax: 'cubic-bezier(0.8,0,0.2,1)',\n curveEasyEase: 'cubic-bezier(0.33,0,0.67,1)',\n curveLinear: 'cubic-bezier(0,0,1,1)',\n} as const;\n\n// A merged flat lookup for convenience\nexport const motionTokens = {\n ...durations,\n ...curves,\n};\n\n/*\nTODO: enforce naming conventions when TypeScript 4.4 features are supported in Fluent:\n\ntype DurationKey = `duration${Capitalize<string>}`;\ntype CurveKey = `curve${Capitalize<string>}`;\ntype CurveValue = `cubic-bezier(${number},${number},${number},${number})`;\n\ntype DurationTokens = Record<DurationKey, number>;\ntype CurveTokens = Record<CurveKey, CurveValue>;\n*/\n"],"names":["durations","durationUltraFast","durationFaster","durationFast","durationNormal","durationGentle","durationSlow","durationSlower","durationUltraSlow","curves","curveAccelerateMax","curveAccelerateMid","curveAccelerateMin","curveDecelerateMax","curveDecelerateMid","curveDecelerateMin","curveEasyEaseMax","curveEasyEase","curveLinear","motionTokens"],"mappings":"AAAA,sDAAsD;AACtD,2EAA2E;AAC3E,+BAA+B;AAC/B,OAAO,MAAMA,YAAY;IACvBC,mBAAmB;IACnBC,gBAAgB;IAChBC,cAAc;IACdC,gBAAgB;IAChBC,gBAAgB;IAChBC,cAAc;IACdC,gBAAgB;IAChBC,mBAAmB;AACrB,EAAW;AAEX,mDAAmD;AACnD,yCAAyC;AACzC,OAAO,MAAMC,SAAS;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,oBAAoB;IACpBC,kBAAkB;IAClBC,eAAe;IACfC,aAAa;AACf,EAAW;AAEX,uCAAuC;AACvC,OAAO,MAAMC,eAAe;IAC1B,GAAGnB,SAAS;IACZ,GAAGS,MAAM;AACX,EAAE,CAEF;;;;;;;;;AASA"}

View File

@@ -0,0 +1,39 @@
import * as React from 'react';
import { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from '@fluentui/react-utilities';
export function motionSlot(motion, options) {
// eslint-disable-next-line @typescript-eslint/no-deprecated
const { as, children, ...rest } = motion !== null && motion !== void 0 ? motion : {};
if (process.env.NODE_ENV !== 'production') {
if (typeof as !== 'undefined') {
throw new Error(`@fluentui/react-motion: "as" property is not supported on motion slots.`);
}
}
if (motion === null) {
// Heads up!
// Render function is used there to avoid rendering a motion component and render children directly
const renderFn = (_, props)=>/*#__PURE__*/ React.createElement(React.Fragment, null, props.children);
/**
* Casting is required here as SlotComponentType is a function, not an object.
* Although SlotComponentType has a function signature, it is still just an object.
* This is required to make a slot callable (JSX compatible), this is the exact same approach
* that is used on `@types/react` components
*/ return {
[SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,
[SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
};
}
/**
* Casting is required here as SlotComponentType is a function, not an object.
* Although SlotComponentType has a function signature, it is still just an object.
* This is required to make a slot callable (JSX compatible), this is the exact same approach
* that is used on `@types/react` components
*/ const propsWithMetadata = {
...options.defaultProps,
...rest,
[SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
};
if (typeof children === 'function') {
propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children;
}
return propsWithMetadata;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/slots/motionSlot.tsx"],"sourcesContent":["import * as React from 'react';\nimport { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from '@fluentui/react-utilities';\nimport type {\n JSXElement,\n JSXIntrinsicElementKeys,\n SlotComponentType,\n SlotRenderFunction,\n} from '@fluentui/react-utilities';\n\nimport type { MotionComponentProps } from '../factories/createMotionComponent';\nimport type { MotionParam } from '../types';\n\n/**\n * @internal\n */\ntype MotionSlotRenderProps = Pick<MotionComponentProps, 'onMotionFinish' | 'onMotionStart' | 'onMotionCancel'>;\n\nexport type MotionSlotProps<MotionParams extends Record<string, MotionParam> = {}> = Pick<\n MotionComponentProps,\n 'imperativeRef' | 'onMotionFinish' | 'onMotionStart' | 'onMotionCancel'\n> & {\n // FIXME: 'as' property is required by design on the slot AP but it does not support components, only intrinsic\n // elements motion slots do not support intrinsic elements, only custom components.\n /**\n * @deprecated Do not use. Motion Slots do not support intrinsic elements.\n *\n * If you want to override the animation, use the children render function instead.\n */\n as?: JSXIntrinsicElementKeys;\n\n // TODO: remove once React v18 slot API is modified ComponentProps is not properly adding render function as a\n // possible value for children\n children?: SlotRenderFunction<MotionSlotRenderProps & MotionParams & { children: JSXElement }>;\n};\n\nexport function motionSlot<MotionParams extends Record<string, MotionParam> = {}>(\n motion: MotionSlotProps<MotionParams> | null | undefined,\n options: {\n elementType: React.FC<MotionComponentProps & MotionParams>;\n defaultProps: MotionSlotRenderProps & MotionParams;\n },\n): SlotComponentType<MotionSlotRenderProps & MotionParams> {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n const { as, children, ...rest } = motion ?? {};\n\n if (process.env.NODE_ENV !== 'production') {\n if (typeof as !== 'undefined') {\n throw new Error(`@fluentui/react-motion: \"as\" property is not supported on motion slots.`);\n }\n }\n\n if (motion === null) {\n // Heads up!\n // Render function is used there to avoid rendering a motion component and render children directly\n const renderFn: SlotRenderFunction<MotionSlotRenderProps & MotionParams & { children: JSXElement }> = (\n _,\n props,\n ) => <>{props.children}</>;\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n return {\n [SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<MotionSlotRenderProps & MotionParams>;\n }\n\n /**\n * Casting is required here as SlotComponentType is a function, not an object.\n * Although SlotComponentType has a function signature, it is still just an object.\n * This is required to make a slot callable (JSX compatible), this is the exact same approach\n * that is used on `@types/react` components\n */\n const propsWithMetadata = {\n ...options.defaultProps,\n ...rest,\n [SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType,\n } as SlotComponentType<MotionSlotRenderProps & MotionParams>;\n\n if (typeof children === 'function') {\n propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children as SlotRenderFunction<\n MotionSlotRenderProps & MotionParams\n >;\n }\n\n return propsWithMetadata;\n}\n"],"names":["React","SLOT_ELEMENT_TYPE_SYMBOL","SLOT_RENDER_FUNCTION_SYMBOL","motionSlot","motion","options","as","children","rest","process","env","NODE_ENV","Error","renderFn","_","props","elementType","propsWithMetadata","defaultProps"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,2BAA2B,QAAQ,4BAA4B;AAkClG,OAAO,SAASC,WACdC,MAAwD,EACxDC,OAGC;IAED,4DAA4D;IAC5D,MAAM,EAAEC,EAAE,EAAEC,QAAQ,EAAE,GAAGC,MAAM,GAAGJ,mBAAAA,oBAAAA,SAAU,CAAC;IAE7C,IAAIK,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,IAAI,OAAOL,OAAO,aAAa;YAC7B,MAAM,IAAIM,MAAM,CAAC,uEAAuE,CAAC;QAC3F;IACF;IAEA,IAAIR,WAAW,MAAM;QACnB,YAAY;QACZ,mGAAmG;QACnG,MAAMS,WAAgG,CACpGC,GACAC,sBACG,0CAAGA,MAAMR,QAAQ;QAEtB;;;;;KAKC,GACD,OAAO;YACL,CAACL,4BAA4B,EAAEW;YAC/B,CAACZ,yBAAyB,EAAEI,QAAQW,WAAW;QACjD;IACF;IAEA;;;;;GAKC,GACD,MAAMC,oBAAoB;QACxB,GAAGZ,QAAQa,YAAY;QACvB,GAAGV,IAAI;QACP,CAACP,yBAAyB,EAAEI,QAAQW,WAAW;IACjD;IAEA,IAAI,OAAOT,aAAa,YAAY;QAClCU,iBAAiB,CAACf,4BAA4B,GAAGK;IAGnD;IAEA,OAAOU;AACT"}

View File

@@ -0,0 +1,40 @@
import * as React from 'react';
import { SLOT_ELEMENT_TYPE_SYMBOL, SLOT_RENDER_FUNCTION_SYMBOL } from '@fluentui/react-utilities';
export function presenceMotionSlot(motion, options) {
// eslint-disable-next-line @typescript-eslint/no-deprecated
const { as, children, ...rest } = motion !== null && motion !== void 0 ? motion : {};
if (process.env.NODE_ENV !== 'production') {
if (typeof as !== 'undefined') {
throw new Error(`@fluentui/react-motion: "as" property is not supported on motion slots.`);
}
}
if (motion === null) {
// Heads up!
// Render function is used there to avoid rendering a motion component and handle unmounting logic
const isUnmounted = !options.defaultProps.visible && options.defaultProps.unmountOnExit;
const renderFn = (_, props)=>isUnmounted ? null : /*#__PURE__*/ React.createElement(React.Fragment, null, props.children);
/**
* Casting is required here as SlotComponentType is a function, not an object.
* Although SlotComponentType has a function signature, it is still just an object.
* This is required to make a slot callable (JSX compatible), this is the exact same approach
* that is used on `@types/react` components
*/ return {
[SLOT_RENDER_FUNCTION_SYMBOL]: renderFn,
[SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
};
}
/**
* Casting is required here as SlotComponentType is a function, not an object.
* Although SlotComponentType has a function signature, it is still just an object.
* This is required to make a slot callable (JSX compatible), this is the exact same approach
* that is used on `@types/react` components
*/ const propsWithMetadata = {
...options.defaultProps,
...rest,
[SLOT_ELEMENT_TYPE_SYMBOL]: options.elementType
};
if (typeof children === 'function') {
propsWithMetadata[SLOT_RENDER_FUNCTION_SYMBOL] = children;
}
return propsWithMetadata;
}

File diff suppressed because one or more lines are too long

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

@@ -0,0 +1 @@
export { };

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

@@ -0,0 +1 @@
{"version":3,"sources":["../src/types.ts"],"sourcesContent":["type AtomCore = { keyframes: Keyframe[] } & KeyframeEffectOptions;\n\nexport type AtomMotion = AtomCore & {\n /**\n * Allows to specify a reduced motion version of the animation. If provided, the settings will be used when the\n * user has enabled the reduced motion setting in the operating system (i.e `prefers-reduced-motion` media query is\n * active). If not provided, the duration of the animation will be overridden to be 1ms.\n *\n * Note, if `keyframes` are provided, they will be used instead of the regular `keyframes`.\n */\n reducedMotion?: Partial<AtomCore>;\n};\n\nexport type PresenceDirection = 'enter' | 'exit';\n\nexport type PresenceMotion = Record<PresenceDirection, AtomMotion | AtomMotion[]>;\n\n/**\n * A motion param should be a primitive value that can be serialized to JSON and could be potentially used a plain\n * dependency for React hooks.\n */\nexport type MotionParam = boolean | number | string;\n\nexport type AtomMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (\n params: { element: HTMLElement } & MotionParams,\n) => AtomMotion | AtomMotion[];\n\nexport type PresenceMotionFn<MotionParams extends Record<string, MotionParam> = {}> = (\n params: { element: HTMLElement } & MotionParams,\n) => PresenceMotion;\n\n// ---\n\nexport type AnimationHandle = Pick<Animation, 'cancel' | 'finish' | 'pause' | 'play' | 'playbackRate' | 'reverse'> & {\n setMotionEndCallbacks: (onfinish: () => void, oncancel: () => void) => void;\n isRunning: () => boolean;\n dispose: () => void;\n};\n\nexport type MotionImperativeRef = {\n /** Sets the playback rate of the animation, where 1 is normal speed. */\n setPlaybackRate: (rate: number) => void;\n\n /** Sets the state of the animation to running or paused. */\n setPlayState: (state: 'running' | 'paused') => void;\n};\n"],"names":[],"mappings":"AAuCA,WAME"}

View File

@@ -0,0 +1,20 @@
import * as React from 'react';
/**
* Given `children`, return an object mapping key to child.
*/ export function getChildMapping(children) {
const childMapping = {};
if (children) {
React.Children.toArray(children).forEach((child)=>{
if (React.isValidElement(child)) {
var _child_key;
childMapping[(_child_key = child.key) !== null && _child_key !== void 0 ? _child_key : ''] = {
appear: false,
element: child,
visible: true,
unmountOnExit: true
};
}
});
}
return childMapping;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/groups/getChildMapping.ts"],"sourcesContent":["import * as React from 'react';\nimport type { PresenceGroupChildMapping } from './types';\n\n/**\n * Given `children`, return an object mapping key to child.\n */\nexport function getChildMapping(children: React.ReactNode | undefined): PresenceGroupChildMapping {\n const childMapping: PresenceGroupChildMapping = {};\n\n if (children) {\n React.Children.toArray(children).forEach(child => {\n if (React.isValidElement(child)) {\n childMapping[child.key ?? ''] = {\n appear: false,\n element: child,\n visible: true,\n unmountOnExit: true,\n };\n }\n });\n }\n\n return childMapping;\n}\n"],"names":["React","getChildMapping","children","childMapping","Children","toArray","forEach","child","isValidElement","key","appear","element","visible","unmountOnExit"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B;;CAEC,GACD,OAAO,SAASC,gBAAgBC,QAAqC;IACnE,MAAMC,eAA0C,CAAC;IAEjD,IAAID,UAAU;QACZF,MAAMI,QAAQ,CAACC,OAAO,CAACH,UAAUI,OAAO,CAACC,CAAAA;YACvC,IAAIP,MAAMQ,cAAc,CAACD,QAAQ;oBAClBA;gBAAbJ,YAAY,CAACI,CAAAA,aAAAA,MAAME,GAAG,cAATF,wBAAAA,aAAa,GAAG,GAAG;oBAC9BG,QAAQ;oBACRC,SAASJ;oBACTK,SAAS;oBACTC,eAAe;gBACjB;YACF;QACF;IACF;IAEA,OAAOV;AACT"}

View File

@@ -0,0 +1,30 @@
import { mergeChildMappings } from './mergeChildMappings';
export function getNextChildMapping(prevChildMapping, nextChildMapping) {
const childrenMapping = mergeChildMappings(prevChildMapping, nextChildMapping);
Object.entries(childrenMapping).forEach(([key, childDefinition])=>{
const hasPrev = key in prevChildMapping;
const hasNext = key in nextChildMapping;
if (hasNext) {
// Case 1: item hasn't changed transition states
if (hasPrev) {
childrenMapping[key] = {
...childDefinition
};
return;
}
// Case 2: item is new (entering)
childrenMapping[key] = {
...childDefinition,
appear: true,
visible: true
};
return;
}
// Case 3: item is leaving
childrenMapping[key] = {
...childDefinition,
visible: false
};
});
return childrenMapping;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/groups/getNextChildMapping.ts"],"sourcesContent":["import { mergeChildMappings } from './mergeChildMappings';\nimport type { PresenceGroupChildMapping } from './types';\n\nexport function getNextChildMapping(\n prevChildMapping: PresenceGroupChildMapping,\n nextChildMapping: PresenceGroupChildMapping,\n): PresenceGroupChildMapping {\n const childrenMapping = mergeChildMappings(prevChildMapping, nextChildMapping);\n\n Object.entries(childrenMapping).forEach(([key, childDefinition]) => {\n const hasPrev = key in prevChildMapping;\n const hasNext = key in nextChildMapping;\n\n if (hasNext) {\n // Case 1: item hasn't changed transition states\n if (hasPrev) {\n childrenMapping[key] = { ...childDefinition };\n return;\n }\n\n // Case 2: item is new (entering)\n childrenMapping[key] = {\n ...childDefinition,\n appear: true,\n visible: true,\n };\n return;\n }\n\n // Case 3: item is leaving\n childrenMapping[key] = {\n ...childDefinition,\n visible: false,\n };\n });\n\n return childrenMapping;\n}\n"],"names":["mergeChildMappings","getNextChildMapping","prevChildMapping","nextChildMapping","childrenMapping","Object","entries","forEach","key","childDefinition","hasPrev","hasNext","appear","visible"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,uBAAuB;AAG1D,OAAO,SAASC,oBACdC,gBAA2C,EAC3CC,gBAA2C;IAE3C,MAAMC,kBAAkBJ,mBAAmBE,kBAAkBC;IAE7DE,OAAOC,OAAO,CAACF,iBAAiBG,OAAO,CAAC,CAAC,CAACC,KAAKC,gBAAgB;QAC7D,MAAMC,UAAUF,OAAON;QACvB,MAAMS,UAAUH,OAAOL;QAEvB,IAAIQ,SAAS;YACX,gDAAgD;YAChD,IAAID,SAAS;gBACXN,eAAe,CAACI,IAAI,GAAG;oBAAE,GAAGC,eAAe;gBAAC;gBAC5C;YACF;YAEA,iCAAiC;YACjCL,eAAe,CAACI,IAAI,GAAG;gBACrB,GAAGC,eAAe;gBAClBG,QAAQ;gBACRC,SAAS;YACX;YACA;QACF;QAEA,0BAA0B;QAC1BT,eAAe,CAACI,IAAI,GAAG;YACrB,GAAGC,eAAe;YAClBI,SAAS;QACX;IACF;IAEA,OAAOT;AACT"}

View File

@@ -0,0 +1,39 @@
/**
* When you're adding or removing children some may be added or removed in the same render pass. We want to show *both*
* since we want to simultaneously animate elements in and out. This function takes a previous set of keys and a new set
* of keys and merges them with its best guess of the correct ordering.
*/ export function mergeChildMappings(prevMapping, nextMapping) {
function getValueForKey(key) {
return key in nextMapping ? nextMapping[key] : prevMapping[key];
}
// For each key of `next`, the list of keys to insert before that key in
// the combined list
const nextKeysPending = {};
let pendingKeys = [];
// eslint-disable-next-line guard-for-in
for(const prevKey in prevMapping){
if (prevKey in nextMapping) {
if (pendingKeys.length) {
nextKeysPending[prevKey] = pendingKeys;
pendingKeys = [];
}
continue;
}
pendingKeys.push(prevKey);
}
const childMapping = {};
// eslint-disable-next-line guard-for-in
for(const nextKey in nextMapping){
if (nextKeysPending[nextKey]) {
for (const pendingNextKey of nextKeysPending[nextKey]){
childMapping[pendingNextKey] = getValueForKey(pendingNextKey);
}
}
childMapping[nextKey] = getValueForKey(nextKey);
}
// Finally, add the keys which didn't appear before any key in `next`
for (const pendingKey of pendingKeys){
childMapping[pendingKey] = getValueForKey(pendingKey);
}
return childMapping;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/groups/mergeChildMappings.ts"],"sourcesContent":["import type { PresenceGroupChildMapping } from './types';\n\n/**\n * When you're adding or removing children some may be added or removed in the same render pass. We want to show *both*\n * since we want to simultaneously animate elements in and out. This function takes a previous set of keys and a new set\n * of keys and merges them with its best guess of the correct ordering.\n */\nexport function mergeChildMappings(\n prevMapping: PresenceGroupChildMapping,\n nextMapping: PresenceGroupChildMapping,\n): PresenceGroupChildMapping {\n function getValueForKey(key: string) {\n return key in nextMapping ? nextMapping[key] : prevMapping[key];\n }\n\n // For each key of `next`, the list of keys to insert before that key in\n // the combined list\n const nextKeysPending: Record<string, string[]> = {};\n let pendingKeys: string[] = [];\n\n // eslint-disable-next-line guard-for-in\n for (const prevKey in prevMapping) {\n if (prevKey in nextMapping) {\n if (pendingKeys.length) {\n nextKeysPending[prevKey] = pendingKeys;\n pendingKeys = [];\n }\n\n continue;\n }\n\n pendingKeys.push(prevKey);\n }\n\n const childMapping: PresenceGroupChildMapping = {};\n\n // eslint-disable-next-line guard-for-in\n for (const nextKey in nextMapping) {\n if (nextKeysPending[nextKey]) {\n for (const pendingNextKey of nextKeysPending[nextKey]) {\n childMapping[pendingNextKey] = getValueForKey(pendingNextKey);\n }\n }\n\n childMapping[nextKey] = getValueForKey(nextKey);\n }\n\n // Finally, add the keys which didn't appear before any key in `next`\n for (const pendingKey of pendingKeys) {\n childMapping[pendingKey] = getValueForKey(pendingKey);\n }\n\n return childMapping;\n}\n"],"names":["mergeChildMappings","prevMapping","nextMapping","getValueForKey","key","nextKeysPending","pendingKeys","prevKey","length","push","childMapping","nextKey","pendingNextKey","pendingKey"],"mappings":"AAEA;;;;CAIC,GACD,OAAO,SAASA,mBACdC,WAAsC,EACtCC,WAAsC;IAEtC,SAASC,eAAeC,GAAW;QACjC,OAAOA,OAAOF,cAAcA,WAAW,CAACE,IAAI,GAAGH,WAAW,CAACG,IAAI;IACjE;IAEA,wEAAwE;IACxE,oBAAoB;IACpB,MAAMC,kBAA4C,CAAC;IACnD,IAAIC,cAAwB,EAAE;IAE9B,wCAAwC;IACxC,IAAK,MAAMC,WAAWN,YAAa;QACjC,IAAIM,WAAWL,aAAa;YAC1B,IAAII,YAAYE,MAAM,EAAE;gBACtBH,eAAe,CAACE,QAAQ,GAAGD;gBAC3BA,cAAc,EAAE;YAClB;YAEA;QACF;QAEAA,YAAYG,IAAI,CAACF;IACnB;IAEA,MAAMG,eAA0C,CAAC;IAEjD,wCAAwC;IACxC,IAAK,MAAMC,WAAWT,YAAa;QACjC,IAAIG,eAAe,CAACM,QAAQ,EAAE;YAC5B,KAAK,MAAMC,kBAAkBP,eAAe,CAACM,QAAQ,CAAE;gBACrDD,YAAY,CAACE,eAAe,GAAGT,eAAeS;YAChD;QACF;QAEAF,YAAY,CAACC,QAAQ,GAAGR,eAAeQ;IACzC;IAEA,qEAAqE;IACrE,KAAK,MAAME,cAAcP,YAAa;QACpCI,YAAY,CAACG,WAAW,GAAGV,eAAeU;IAC5C;IAEA,OAAOH;AACT"}

View File

@@ -0,0 +1 @@
export { };

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/groups/types.ts"],"sourcesContent":["import type { JSXElement } from '@fluentui/react-utilities';\n\nexport type PresenceGroupChild = {\n element: JSXElement;\n\n appear: boolean;\n visible: boolean;\n unmountOnExit: boolean;\n};\n\nexport type PresenceGroupChildMapping = Record<string, PresenceGroupChild>;\n"],"names":[],"mappings":"AAUA,WAA2E"}

View File

@@ -0,0 +1,25 @@
/**
* Checks if the animation is running at the moment.
*/ export function isAnimationRunning(animation) {
if (animation.playState === 'running') {
var _animation_effect;
// Heads up!
//
// There is an edge case where the animation is running, but the overall progress is 0 or 1. In this case, we
// consider the animation to be not running. If it will be reversed it will flip from 1 to 0, and we will observe a
// glitch.
// "overallProgress" is not supported in all browsers, so we need to check if it exists.
// We will fall back to the currentTime and duration if "overallProgress" is not supported.
if (animation.overallProgress !== undefined) {
var _animation_overallProgress;
const overallProgress = (_animation_overallProgress = animation.overallProgress) !== null && _animation_overallProgress !== void 0 ? _animation_overallProgress : 0;
return overallProgress > 0 && overallProgress < 1;
}
var _animation_currentTime;
const currentTime = Number((_animation_currentTime = animation.currentTime) !== null && _animation_currentTime !== void 0 ? _animation_currentTime : 0);
var _animation_effect_getTiming_duration;
const totalTime = Number((_animation_effect_getTiming_duration = (_animation_effect = animation.effect) === null || _animation_effect === void 0 ? void 0 : _animation_effect.getTiming().duration) !== null && _animation_effect_getTiming_duration !== void 0 ? _animation_effect_getTiming_duration : 0);
return currentTime > 0 && currentTime < totalTime;
}
return false;
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/isAnimationRunning.ts"],"sourcesContent":["/**\n * Checks if the animation is running at the moment.\n */\nexport function isAnimationRunning(animation: Animation & { readonly overallProgress?: number | null }): boolean {\n if (animation.playState === 'running') {\n // Heads up!\n //\n // There is an edge case where the animation is running, but the overall progress is 0 or 1. In this case, we\n // consider the animation to be not running. If it will be reversed it will flip from 1 to 0, and we will observe a\n // glitch.\n\n // \"overallProgress\" is not supported in all browsers, so we need to check if it exists.\n // We will fall back to the currentTime and duration if \"overallProgress\" is not supported.\n if (animation.overallProgress !== undefined) {\n const overallProgress = animation.overallProgress ?? 0;\n\n return overallProgress > 0 && overallProgress < 1;\n }\n\n const currentTime = Number(animation.currentTime ?? 0);\n const totalTime = Number(animation.effect?.getTiming().duration ?? 0);\n\n return currentTime > 0 && currentTime < totalTime;\n }\n\n return false;\n}\n"],"names":["isAnimationRunning","animation","playState","overallProgress","undefined","currentTime","Number","totalTime","effect","getTiming","duration"],"mappings":"AAAA;;CAEC,GACD,OAAO,SAASA,mBAAmBC,SAAmE;IACpG,IAAIA,UAAUC,SAAS,KAAK,WAAW;YAgBZD;QAfzB,YAAY;QACZ,EAAE;QACF,6GAA6G;QAC7G,mHAAmH;QACnH,UAAU;QAEV,wFAAwF;QACxF,2FAA2F;QAC3F,IAAIA,UAAUE,eAAe,KAAKC,WAAW;gBACnBH;YAAxB,MAAME,kBAAkBF,CAAAA,6BAAAA,UAAUE,eAAe,cAAzBF,wCAAAA,6BAA6B;YAErD,OAAOE,kBAAkB,KAAKA,kBAAkB;QAClD;YAE2BF;QAA3B,MAAMI,cAAcC,OAAOL,CAAAA,yBAAAA,UAAUI,WAAW,cAArBJ,oCAAAA,yBAAyB;YAC3BA;QAAzB,MAAMM,YAAYD,OAAOL,CAAAA,wCAAAA,oBAAAA,UAAUO,MAAM,cAAhBP,wCAAAA,kBAAkBQ,SAAS,GAAGC,QAAQ,cAAtCT,kDAAAA,uCAA0C;QAEnE,OAAOI,cAAc,KAAKA,cAAcE;IAC1C;IAEA,OAAO;AACT"}

View File

@@ -0,0 +1,40 @@
'use client';
import * as React from 'react';
import { getReactElementRef, useMergedRefs } from '@fluentui/react-utilities';
const CHILD_ERROR_MESSAGE = [
'@fluentui/react-motion: Invalid child element.',
'\n',
'Motion factories require a single child element to be passed. ',
'That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().'
].join('');
/**
* Validates the child and returns a cloned child element with a ref.
*
* Throws an error if the child is not a valid React element, similar to "React.Children.only".
* Logs a warning in development mode if the ref is not set as the component remains functional.
*/ export function useChildElement(children, mounted = true) {
const childRef = React.useRef(null);
React.useEffect(()=>{
if (process.env.NODE_ENV !== 'production') {
if (mounted && !childRef.current) {
// eslint-disable-next-line no-console
console.error(CHILD_ERROR_MESSAGE);
}
}
}, [
mounted
]);
try {
const child = React.Children.only(children);
if (React.isValidElement(child)) {
return [
React.cloneElement(child, {
ref: useMergedRefs(childRef, getReactElementRef(child))
}),
childRef
];
}
} catch {
/* empty */ }
throw new Error(CHILD_ERROR_MESSAGE);
}

View File

@@ -0,0 +1 @@
{"version":3,"sources":["../src/utils/useChildElement.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getReactElementRef, useMergedRefs } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nconst CHILD_ERROR_MESSAGE = [\n '@fluentui/react-motion: Invalid child element.',\n '\\n',\n 'Motion factories require a single child element to be passed. ',\n 'That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().',\n].join('');\n\n/**\n * Validates the child and returns a cloned child element with a ref.\n *\n * Throws an error if the child is not a valid React element, similar to \"React.Children.only\".\n * Logs a warning in development mode if the ref is not set as the component remains functional.\n */\nexport function useChildElement(\n children: JSXElement,\n mounted: boolean = true,\n): [JSXElement, React.RefObject<HTMLElement | null>] {\n const childRef = React.useRef<HTMLElement>(null);\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production') {\n if (mounted && !childRef.current) {\n // eslint-disable-next-line no-console\n console.error(CHILD_ERROR_MESSAGE);\n }\n }\n }, [mounted]);\n\n try {\n const child = React.Children.only(children) as Parameters<typeof React.isValidElement>[0];\n\n if (React.isValidElement(child)) {\n return [\n React.cloneElement(child as React.ReactElement<{ ref: React.Ref<HTMLElement> }>, {\n ref: useMergedRefs(childRef, getReactElementRef(child)),\n }),\n childRef,\n ];\n }\n } catch {\n /* empty */\n }\n\n throw new Error(CHILD_ERROR_MESSAGE);\n}\n"],"names":["React","getReactElementRef","useMergedRefs","CHILD_ERROR_MESSAGE","join","useChildElement","children","mounted","childRef","useRef","useEffect","process","env","NODE_ENV","current","console","error","child","Children","only","isValidElement","cloneElement","ref","Error"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,EAAEC,aAAa,QAAQ,4BAA4B;AAG9E,MAAMC,sBAAsB;IAC1B;IACA;IACA;IACA;CACD,CAACC,IAAI,CAAC;AAEP;;;;;CAKC,GACD,OAAO,SAASC,gBACdC,QAAoB,EACpBC,UAAmB,IAAI;IAEvB,MAAMC,WAAWR,MAAMS,MAAM,CAAc;IAE3CT,MAAMU,SAAS,CAAC;QACd,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,IAAIN,WAAW,CAACC,SAASM,OAAO,EAAE;gBAChC,sCAAsC;gBACtCC,QAAQC,KAAK,CAACb;YAChB;QACF;IACF,GAAG;QAACI;KAAQ;IAEZ,IAAI;QACF,MAAMU,QAAQjB,MAAMkB,QAAQ,CAACC,IAAI,CAACb;QAElC,IAAIN,MAAMoB,cAAc,CAACH,QAAQ;YAC/B,OAAO;gBACLjB,MAAMqB,YAAY,CAACJ,OAA8D;oBAC/EK,KAAKpB,cAAcM,UAAUP,mBAAmBgB;gBAClD;gBACAT;aACD;QACH;IACF,EAAE,OAAM;IACN,SAAS,GACX;IAEA,MAAM,IAAIe,MAAMpB;AAClB"}

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