@fluentui/react-motion 0.0.0-nightly-20240607-0405.1

package/CHANGELOG.md

@@ -0,0 +1,171 @@
+# Change Log - @fluentui/react-motion
+
+This log was last generated on Fri, 07 Jun 2024 04:24:06 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## [0.0.0-nightly-20240607-0405.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v0.0.0-nightly-20240607-0405.1)
+
+Fri, 07 Jun 2024 04:24:06 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.0.0..@fluentui/react-motion_v0.0.0-nightly-20240607-0405.1)
+
+### Changes
+
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
+- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20240607-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e219591328e69d0e326772cfeb1d5634636bb417) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20240607-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e219591328e69d0e326772cfeb1d5634636bb417) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20240607-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e219591328e69d0e326772cfeb1d5634636bb417) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20240607-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/e219591328e69d0e326772cfeb1d5634636bb417) by beachball)
+
+## [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)

package/LICENSE

@@ -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

package/README.md

@@ -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.

package/dist/index.d.ts

@@ -0,0 +1,144 @@
+import * as React_2 from 'react';
+
+export declare type AtomMotion = {
+    keyframes: Keyframe[];
+} & KeyframeEffectOptions;
+
+export declare type AtomMotionFn = (params: {
+    element: HTMLElement;
+}) => AtomMotion | AtomMotion[];
+
+/**
+ * Creates a component that will animate the children using the provided motion.
+ *
+ * @param value - A motion definition.
+ */
+export declare function createMotionComponent(value: AtomMotion | AtomMotion[] | AtomMotionFn): React_2.FC<MotionComponentProps>;
+
+export declare function createPresenceComponent(value: PresenceMotion | PresenceMotionFn): React_2.FC<PresenceComponentProps>;
+
+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;
+};
+
+export declare type MotionComponentProps = {
+    children: React_2.ReactElement;
+    /** Provides imperative controls for the animation. */
+    imperativeRef?: React_2.Ref<MotionImperativeRef | undefined>;
+};
+
+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;
+};
+
+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;
+};
+
+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: React_2.ReactElement;
+    /** 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: 'enter' | 'exit';
+    }) => 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 class PresenceGroup extends React_2.Component<PresenceGroupProps, PresenceGroupState> {
+    private mounted;
+    static getDerivedStateFromProps(nextProps: PresenceGroupProps, { childMapping: prevChildMapping, firstRender }: PresenceGroupState): {
+        childMapping: PresenceGroupChildMapping;
+        firstRender: boolean;
+    };
+    constructor(props: PresenceGroupProps, context: unknown);
+    private handleExit;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}
+
+declare type PresenceGroupChild = {
+    element: React_2.ReactElement;
+    appear: boolean;
+    visible: boolean;
+    unmountOnExit: boolean;
+};
+
+declare type PresenceGroupChildMapping = Record<string, PresenceGroupChild>;
+
+declare type PresenceGroupProps = {
+    children: React_2.ReactNode;
+};
+
+declare type PresenceGroupState = {
+    childMapping: PresenceGroupChildMapping;
+    firstRender: boolean;
+};
+
+export declare type PresenceMotion = {
+    enter: AtomMotion | AtomMotion[];
+    exit: AtomMotion | AtomMotion[];
+};
+
+export declare type PresenceMotionFn = (params: {
+    element: HTMLElement;
+}) => PresenceMotion;
+
+export { }

package/lib/components/PresenceGroup.js

@@ -0,0 +1,53 @@
+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){
+        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
+        };
+    }
+}

package/lib/components/PresenceGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PresenceGroup.tsx"],"sourcesContent":["import * as React from 'react';\n\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  ) {\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    super(props, context);\n\n    this.state = {\n      childMapping: {},\n      firstRender: true,\n    };\n  }\n\n  private handleExit = (childKey: string) => {\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() {\n    this.mounted = true;\n  }\n\n  componentWillUnmount() {\n    this.mounted = false;\n  }\n\n  render() {\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,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,EACnE;QACA,MAAMC,mBAAmBT,gBAAgBK,UAAUK,QAAQ;QAE3D,OAAO;YACLJ,cAAcE,cAAcC,mBAAmBV,oBAAoBQ,kBAAkBE;YACrFD,aAAa;QACf;IACF;IA4BAG,oBAAoB;QAClB,IAAI,CAACC,OAAO,GAAG;IACjB;IAEAC,uBAAuB;QACrB,IAAI,CAACD,OAAO,GAAG;IACjB;IAEAE,SAAS;QACP,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;IA5CAC,YAAYC,KAAyB,EAAEC,OAAgB,CAAE;QACvD,KAAK,CAACD,OAAOC;QAff,uBAAQf,WAAmB;QAuB3B,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;AAsCF"}

package/lib/components/PresenceGroupItemProvider.js

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';
+/**
+ * @internal
+ *
+ * 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.
+ */ 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);
+};

package/lib/components/PresenceGroupItemProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PresenceGroupItemProvider.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport type { PresenceGroupChildContextValue } from '../contexts/PresenceGroupChildContext';\n\ntype PresenceGroupItemProviderProps = Omit<PresenceGroupChildContextValue, 'onExit'> & {\n  children: React.ReactElement;\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 * @internal\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 */\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,YAAYA,WAAW,QAAQ;AAE/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"}

package/lib/contexts/PresenceGroupChildContext.js

@@ -0,0 +1,4 @@
+import * as React from 'react';
+/**
+ * @internal
+ */ export const PresenceGroupChildContext = React.createContext(undefined);

package/lib/contexts/PresenceGroupChildContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["PresenceGroupChildContext.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * @internal\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"],"names":["React","PresenceGroupChildContext","createContext","undefined"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAa/B;;CAEC,GACD,OAAO,MAAMC,4BAA4BD,MAAME,aAAa,CAA6CC,WAAW"}

package/lib/factories/createMotionComponent.js

@@ -0,0 +1,41 @@
+import { useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useIsReducedMotion } from '../hooks/useIsReducedMotion';
+import { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';
+import { animateAtoms } from '../utils/animateAtoms';
+import { getChildElement } from '../utils/getChildElement';
+/**
+ * Creates a component that will animate the children using the provided motion.
+ *
+ * @param value - A motion definition.
+ */ export function createMotionComponent(value) {
+    const Atom = (props)=>{
+        const { children, imperativeRef } = props;
+        const child = getChildElement(children);
+        const handleRef = useMotionImperativeRef(imperativeRef);
+        const elementRef = React.useRef();
+        const isReducedMotion = useIsReducedMotion();
+        useIsomorphicLayoutEffect(()=>{
+            const element = elementRef.current;
+            if (element) {
+                const atoms = typeof value === 'function' ? value({
+                    element
+                }) : value;
+                const handle = animateAtoms(element, atoms, {
+                    isReducedMotion: isReducedMotion()
+                });
+                handleRef.current = handle;
+                return ()=>{
+                    handle.cancel();
+                };
+            }
+        }, [
+            handleRef,
+            isReducedMotion
+        ]);
+        return React.cloneElement(children, {
+            ref: useMergedRefs(elementRef, child.ref)
+        });
+    };
+    return Atom;
+}

package/lib/factories/createMotionComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["createMotionComponent.ts"],"sourcesContent":["import { useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { animateAtoms } from '../utils/animateAtoms';\nimport { getChildElement } from '../utils/getChildElement';\nimport type { AtomMotion, AtomMotionFn, MotionImperativeRef } from '../types';\n\nexport type MotionComponentProps = {\n  children: React.ReactElement;\n\n  /** Provides imperative controls for the animation. */\n  imperativeRef?: React.Ref<MotionImperativeRef | undefined>;\n};\n\n/**\n * Creates a component that will animate the children using the provided motion.\n *\n * @param value - A motion definition.\n */\nexport function createMotionComponent(value: AtomMotion | AtomMotion[] | AtomMotionFn) {\n  const Atom: React.FC<MotionComponentProps> = props => {\n    const { children, imperativeRef } = props;\n    const child = getChildElement(children);\n\n    const handleRef = useMotionImperativeRef(imperativeRef);\n    const elementRef = React.useRef<HTMLElement>();\n\n    const isReducedMotion = useIsReducedMotion();\n\n    useIsomorphicLayoutEffect(() => {\n      const element = elementRef.current;\n\n      if (element) {\n        const atoms = typeof value === 'function' ? value({ element }) : value;\n        const handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n\n        handleRef.current = handle;\n\n        return () => {\n          handle.cancel();\n        };\n      }\n    }, [handleRef, isReducedMotion]);\n\n    return React.cloneElement(children, { ref: useMergedRefs(elementRef, child.ref) });\n  };\n\n  return Atom;\n}\n"],"names":["useIsomorphicLayoutEffect","useMergedRefs","React","useIsReducedMotion","useMotionImperativeRef","animateAtoms","getChildElement","createMotionComponent","value","Atom","props","children","imperativeRef","child","handleRef","elementRef","useRef","isReducedMotion","element","current","atoms","handle","cancel","cloneElement","ref"],"mappings":"AAAA,SAASA,yBAAyB,EAAEC,aAAa,QAAQ,4BAA4B;AACrF,YAAYC,WAAW,QAAQ;AAE/B,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,sBAAsB,QAAQ,kCAAkC;AACzE,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,eAAe,QAAQ,2BAA2B;AAU3D;;;;CAIC,GACD,OAAO,SAASC,sBAAsBC,KAA+C;IACnF,MAAMC,OAAuCC,CAAAA;QAC3C,MAAM,EAAEC,QAAQ,EAAEC,aAAa,EAAE,GAAGF;QACpC,MAAMG,QAAQP,gBAAgBK;QAE9B,MAAMG,YAAYV,uBAAuBQ;QACzC,MAAMG,aAAab,MAAMc,MAAM;QAE/B,MAAMC,kBAAkBd;QAExBH,0BAA0B;YACxB,MAAMkB,UAAUH,WAAWI,OAAO;YAElC,IAAID,SAAS;gBACX,MAAME,QAAQ,OAAOZ,UAAU,aAAaA,MAAM;oBAAEU;gBAAQ,KAAKV;gBACjE,MAAMa,SAAShB,aAAaa,SAASE,OAAO;oBAAEH,iBAAiBA;gBAAkB;gBAEjFH,UAAUK,OAAO,GAAGE;gBAEpB,OAAO;oBACLA,OAAOC,MAAM;gBACf;YACF;QACF,GAAG;YAACR;YAAWG;SAAgB;QAE/B,OAAOf,MAAMqB,YAAY,CAACZ,UAAU;YAAEa,KAAKvB,cAAcc,YAAYF,MAAMW,GAAG;QAAE;IAClF;IAEA,OAAOf;AACT"}

package/lib/factories/createPresenceComponent.js

@@ -0,0 +1,86 @@
+import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';
+import { useIsReducedMotion } from '../hooks/useIsReducedMotion';
+import { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';
+import { useMountedState } from '../hooks/useMountedState';
+import { animateAtoms } from '../utils/animateAtoms';
+import { getChildElement } from '../utils/getChildElement';
+function shouldSkipAnimation(appear, isFirstMount, visible) {
+    return !appear && isFirstMount && visible;
+}
+export function createPresenceComponent(value) {
+    const Presence = (props)=>{
+        const itemContext = React.useContext(PresenceGroupChildContext);
+        const { appear, children, imperativeRef, onMotionFinish, visible, unmountOnExit } = {
+            ...itemContext,
+            ...props
+        };
+        const [mounted, setMounted] = useMountedState(visible, unmountOnExit);
+        const child = getChildElement(children);
+        const handleRef = useMotionImperativeRef(imperativeRef);
+        const elementRef = React.useRef();
+        const ref = useMergedRefs(elementRef, child.ref);
+        const optionsRef = React.useRef({});
+        const isFirstMount = useFirstMount();
+        const isReducedMotion = useIsReducedMotion();
+        const onEnterFinish = useEventCallback(()=>{
+            onMotionFinish === null || onMotionFinish === void 0 ? void 0 : onMotionFinish(null, {
+                direction: 'enter'
+            });
+        });
+        const onExitFinish = useEventCallback(()=>{
+            onMotionFinish === null || onMotionFinish === void 0 ? void 0 : onMotionFinish(null, {
+                direction: 'exit'
+            });
+            if (unmountOnExit) {
+                setMounted(false);
+                itemContext === null || itemContext === void 0 ? void 0 : itemContext.onExit();
+            }
+        });
+        useIsomorphicLayoutEffect(()=>{
+            optionsRef.current = {
+                appear
+            };
+        });
+        useIsomorphicLayoutEffect(()=>{
+            const element = elementRef.current;
+            if (!element || shouldSkipAnimation(optionsRef.current.appear, isFirstMount, visible)) {
+                return;
+            }
+            const presenceMotion = typeof value === 'function' ? value({
+                element
+            }) : value;
+            const atoms = visible ? presenceMotion.enter : presenceMotion.exit;
+            const handle = animateAtoms(element, atoms, {
+                isReducedMotion: isReducedMotion()
+            });
+            if (!visible && isFirstMount) {
+                // Heads up!
+                // .finish() is used there to skip animation on first mount, but apply animation styles immediately
+                handle.finish();
+                return;
+            }
+            handleRef.current = handle;
+            handle.onfinish = visible ? onEnterFinish : onExitFinish;
+            return ()=>{
+                handle.cancel();
+            };
+        }, // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        [
+            handleRef,
+            isReducedMotion,
+            onEnterFinish,
+            onExitFinish,
+            visible
+        ]);
+        if (mounted) {
+            return React.cloneElement(child, {
+                ref
+            });
+        }
+        return null;
+    };
+    return Presence;
+}

package/lib/factories/createPresenceComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["createPresenceComponent.ts"],"sourcesContent":["import { useEventCallback, useFirstMount, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { PresenceGroupChildContext } from '../contexts/PresenceGroupChildContext';\nimport { useIsReducedMotion } from '../hooks/useIsReducedMotion';\nimport { useMotionImperativeRef } from '../hooks/useMotionImperativeRef';\nimport { useMountedState } from '../hooks/useMountedState';\nimport { animateAtoms } from '../utils/animateAtoms';\nimport { getChildElement } from '../utils/getChildElement';\nimport type { PresenceMotion, MotionImperativeRef, PresenceMotionFn } from '../types';\n\nexport type PresenceComponentProps = {\n  /**\n   * By default, the child component won't execute the \"enter\" motion when it initially mounts, regardless of the value\n   * of \"visible\". If you desire this behavior, ensure both \"appear\" and \"visible\" are set to \"true\".\n   */\n  appear?: boolean;\n\n  /** A React element that will be cloned and will have motion effects applied to it. */\n  children: React.ReactElement;\n\n  /** Provides imperative controls for the animation. */\n  imperativeRef?: React.Ref<MotionImperativeRef | undefined>;\n\n  /**\n   * Callback that is called when the whole motion finishes.\n   *\n   * A motion definition can contain multiple animations and therefore multiple \"finish\" events. The callback is\n   * triggered once all animations have finished with \"null\" instead of an event object to avoid ambiguity.\n   */\n  // eslint-disable-next-line @nx/workspace-consistent-callback-type -- EventHandler<T> does not support \"null\"\n  onMotionFinish?: (ev: null, data: { direction: 'enter' | 'exit' }) => void;\n\n  /** Defines whether a component is visible; triggers the \"enter\" or \"exit\" motions. */\n  visible?: boolean;\n\n  /**\n   * By default, the child component remains mounted after it reaches the \"finished\" state. Set \"unmountOnExit\" if\n   * you prefer to unmount the component after it finishes exiting.\n   */\n  unmountOnExit?: boolean;\n};\n\nfunction shouldSkipAnimation(appear: boolean | undefined, isFirstMount: boolean, visible: boolean | undefined) {\n  return !appear && isFirstMount && visible;\n}\n\nexport function createPresenceComponent(value: PresenceMotion | PresenceMotionFn) {\n  const Presence: React.FC<PresenceComponentProps> = props => {\n    const itemContext = React.useContext(PresenceGroupChildContext);\n    const { appear, children, imperativeRef, onMotionFinish, visible, unmountOnExit } = { ...itemContext, ...props };\n\n    const [mounted, setMounted] = useMountedState(visible, unmountOnExit);\n    const child = getChildElement(children);\n\n    const handleRef = useMotionImperativeRef(imperativeRef);\n    const elementRef = React.useRef<HTMLElement>();\n    const ref = useMergedRefs(elementRef, child.ref);\n    const optionsRef = React.useRef<{ appear?: boolean }>({});\n\n    const isFirstMount = useFirstMount();\n    const isReducedMotion = useIsReducedMotion();\n\n    const onEnterFinish = useEventCallback(() => {\n      onMotionFinish?.(null, { direction: 'enter' });\n    });\n    const onExitFinish = useEventCallback(() => {\n      onMotionFinish?.(null, { direction: 'exit' });\n\n      if (unmountOnExit) {\n        setMounted(false);\n        itemContext?.onExit();\n      }\n    });\n\n    useIsomorphicLayoutEffect(() => {\n      optionsRef.current = { appear };\n    });\n\n    useIsomorphicLayoutEffect(\n      () => {\n        const element = elementRef.current;\n\n        if (!element || shouldSkipAnimation(optionsRef.current.appear, isFirstMount, visible)) {\n          return;\n        }\n\n        const presenceMotion = typeof value === 'function' ? value({ element }) : value;\n        const atoms = visible ? presenceMotion.enter : presenceMotion.exit;\n\n        const handle = animateAtoms(element, atoms, { isReducedMotion: isReducedMotion() });\n\n        if (!visible && isFirstMount) {\n          // Heads up!\n          // .finish() is used there to skip animation on first mount, but apply animation styles immediately\n          handle.finish();\n          return;\n        }\n\n        handleRef.current = handle;\n        handle.onfinish = visible ? onEnterFinish : onExitFinish;\n\n        return () => {\n          handle.cancel();\n        };\n      },\n      // Excluding `isFirstMount` from deps to prevent re-triggering the animation on subsequent renders\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [handleRef, isReducedMotion, onEnterFinish, onExitFinish, visible],\n    );\n\n    if (mounted) {\n      return React.cloneElement(child, { ref });\n    }\n\n    return null;\n  };\n\n  return Presence;\n}\n"],"names":["useEventCallback","useFirstMount","useIsomorphicLayoutEffect","useMergedRefs","React","PresenceGroupChildContext","useIsReducedMotion","useMotionImperativeRef","useMountedState","animateAtoms","getChildElement","shouldSkipAnimation","appear","isFirstMount","visible","createPresenceComponent","value","Presence","props","itemContext","useContext","children","imperativeRef","onMotionFinish","unmountOnExit","mounted","setMounted","child","handleRef","elementRef","useRef","ref","optionsRef","isReducedMotion","onEnterFinish","direction","onExitFinish","onExit","current","element","presenceMotion","atoms","enter","exit","handle","finish","onfinish","cancel","cloneElement"],"mappings":"AAAA,SAASA,gBAAgB,EAAEC,aAAa,EAAEC,yBAAyB,EAAEC,aAAa,QAAQ,4BAA4B;AACtH,YAAYC,WAAW,QAAQ;AAE/B,SAASC,yBAAyB,QAAQ,wCAAwC;AAClF,SAASC,kBAAkB,QAAQ,8BAA8B;AACjE,SAASC,sBAAsB,QAAQ,kCAAkC;AACzE,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,YAAY,QAAQ,wBAAwB;AACrD,SAASC,eAAe,QAAQ,2BAA2B;AAmC3D,SAASC,oBAAoBC,MAA2B,EAAEC,YAAqB,EAAEC,OAA4B;IAC3G,OAAO,CAACF,UAAUC,gBAAgBC;AACpC;AAEA,OAAO,SAASC,wBAAwBC,KAAwC;IAC9E,MAAMC,WAA6CC,CAAAA;QACjD,MAAMC,cAAcf,MAAMgB,UAAU,CAACf;QACrC,MAAM,EAAEO,MAAM,EAAES,QAAQ,EAAEC,aAAa,EAAEC,cAAc,EAAET,OAAO,EAAEU,aAAa,EAAE,GAAG;YAAE,GAAGL,WAAW;YAAE,GAAGD,KAAK;QAAC;QAE/G,MAAM,CAACO,SAASC,WAAW,GAAGlB,gBAAgBM,SAASU;QACvD,MAAMG,QAAQjB,gBAAgBW;QAE9B,MAAMO,YAAYrB,uBAAuBe;QACzC,MAAMO,aAAazB,MAAM0B,MAAM;QAC/B,MAAMC,MAAM5B,cAAc0B,YAAYF,MAAMI,GAAG;QAC/C,MAAMC,aAAa5B,MAAM0B,MAAM,CAAuB,CAAC;QAEvD,MAAMjB,eAAeZ;QACrB,MAAMgC,kBAAkB3B;QAExB,MAAM4B,gBAAgBlC,iBAAiB;YACrCuB,2BAAAA,qCAAAA,eAAiB,MAAM;gBAAEY,WAAW;YAAQ;QAC9C;QACA,MAAMC,eAAepC,iBAAiB;YACpCuB,2BAAAA,qCAAAA,eAAiB,MAAM;gBAAEY,WAAW;YAAO;YAE3C,IAAIX,eAAe;gBACjBE,WAAW;gBACXP,wBAAAA,kCAAAA,YAAakB,MAAM;YACrB;QACF;QAEAnC,0BAA0B;YACxB8B,WAAWM,OAAO,GAAG;gBAAE1B;YAAO;QAChC;QAEAV,0BACE;YACE,MAAMqC,UAAUV,WAAWS,OAAO;YAElC,IAAI,CAACC,WAAW5B,oBAAoBqB,WAAWM,OAAO,CAAC1B,MAAM,EAAEC,cAAcC,UAAU;gBACrF;YACF;YAEA,MAAM0B,iBAAiB,OAAOxB,UAAU,aAAaA,MAAM;gBAAEuB;YAAQ,KAAKvB;YAC1E,MAAMyB,QAAQ3B,UAAU0B,eAAeE,KAAK,GAAGF,eAAeG,IAAI;YAElE,MAAMC,SAASnC,aAAa8B,SAASE,OAAO;gBAAER,iBAAiBA;YAAkB;YAEjF,IAAI,CAACnB,WAAWD,cAAc;gBAC5B,YAAY;gBACZ,mGAAmG;gBACnG+B,OAAOC,MAAM;gBACb;YACF;YAEAjB,UAAUU,OAAO,GAAGM;YACpBA,OAAOE,QAAQ,GAAGhC,UAAUoB,gBAAgBE;YAE5C,OAAO;gBACLQ,OAAOG,MAAM;YACf;QACF,GACA,kGAAkG;QAClG,uDAAuD;QACvD;YAACnB;YAAWK;YAAiBC;YAAeE;YAActB;SAAQ;QAGpE,IAAIW,SAAS;YACX,OAAOrB,MAAM4C,YAAY,CAACrB,OAAO;gBAAEI;YAAI;QACzC;QAEA,OAAO;IACT;IAEA,OAAOd;AACT"}

package/lib/hooks/useIsReducedMotion.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
+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, []);
+    React.useEffect(()=>{
+        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;
+}

package/lib/hooks/useIsReducedMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useIsReducedMotion.ts"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\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  React.useEffect(() => {\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":["React","useFluent_unstable","useFluent","REDUCED_MEDIA_QUERY","useIsReducedMotion","targetDocument","targetWindow","defaultView","queryValue","useRef","isEnabled","useCallback","current","useEffect","matchMedia","queryMatch","matches","matchListener","e","addEventListener","removeEventListener"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF,MAAMC,sBAAsB;AAE5B,kFAAkF;AAElF,OAAO,SAASC;IACd,MAAM,EAAEC,cAAc,EAAE,GAAGH;QACSG;IAApC,MAAMC,eAA8BD,CAAAA,8BAAAA,2BAAAA,qCAAAA,eAAgBE,WAAW,cAA3BF,yCAAAA,8BAA+B;IAEnE,MAAMG,aAAaR,MAAMS,MAAM,CAAU;IACzC,MAAMC,YAAYV,MAAMW,WAAW,CAAC,IAAMH,WAAWI,OAAO,EAAE,EAAE;IAEhEZ,MAAMa,SAAS,CAAC;QACd,IAAIP,iBAAiB,QAAQ,OAAOA,aAAaQ,UAAU,KAAK,YAAY;YAC1E;QACF;QAEA,MAAMC,aAAaT,aAAaQ,UAAU,CAACX;QAE3C,IAAIY,WAAWC,OAAO,EAAE;YACtBR,WAAWI,OAAO,GAAG;QACvB;QAEA,MAAMK,gBAAgB,CAACC;YACrBV,WAAWI,OAAO,GAAGM,EAAEF,OAAO;QAChC;QAEAD,WAAWI,gBAAgB,CAAC,UAAUF;QAEtC,OAAO;YACLF,WAAWK,mBAAmB,CAAC,UAAUH;QAC3C;IACF,GAAG;QAACX;KAAa;IAEjB,OAAOI;AACT"}