@fluentui/react-motion-components-preview 0.0.0-nightly-20241022-0408.1 → 0.0.0-nightly-20241025-0408.1

package/CHANGELOG.md

@@ -1,20 +1,20 @@
 # Change Log - @fluentui/react-motion-components-preview
 
-This log was last generated on Tue, 22 Oct 2024 04:13:00 GMT and should not be manually modified.
+This log was last generated on Fri, 25 Oct 2024 04:13:26 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly-20241022-0408.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20241022-0408.1)
+## [0.0.0-nightly-20241025-0408.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.0.0-nightly-20241025-0408.1)
 
-Tue, 22 Oct 2024 04:13:00 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.2.0..@fluentui/react-motion-components-preview_v0.0.0-nightly-20241022-0408.1)
+Fri, 25 Oct 2024 04:13:26 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion-components-preview_v0.2.0..@fluentui/react-motion-components-preview_v0.0.0-nightly-20241025-0408.1)
 
 ### Changes
 
 - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
-- Bump @fluentui/react-motion to v0.0.0-nightly-20241022-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/34387c50336474b28c7676ffe0d9dacee23d478c) by beachball)
-- Bump @fluentui/react-conformance to v0.0.0-nightly-20241022-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/34387c50336474b28c7676ffe0d9dacee23d478c) by beachball)
-- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20241022-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/34387c50336474b28c7676ffe0d9dacee23d478c) by beachball)
+- Bump @fluentui/react-motion to v0.0.0-nightly-20241025-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/3012e825c951e5a060b596b5e04b86f7403bdc30) by beachball)
+- Bump @fluentui/react-conformance to v0.0.0-nightly-20241025-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/3012e825c951e5a060b596b5e04b86f7403bdc30) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20241025-0408.1 ([commit](https://github.com/microsoft/fluentui/commit/3012e825c951e5a060b596b5e04b86f7403bdc30) by beachball)
 
 ## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion-components-preview_v0.2.0)
 

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import type { MotionParam } from '@fluentui/react-motion';
 import { PresenceComponent } from '@fluentui/react-motion';
+import type { PresenceMotion } from '@fluentui/react-motion';
 import type { PresenceMotionFn } from '@fluentui/react-motion';
 
 /** A React component that applies collapse/expand transitions to its children. */
@@ -56,6 +57,9 @@ export declare const createCollapseDelayedPresence: PresenceMotionFnCreator<Coll
 /** Defines a presence motion for collapse/expand. */
 export declare const createCollapsePresence: PresenceMotionFnCreator<CollapseVariantParams, CollapseRuntimeParams>;
 
+/** Define a presence motion for fade in/out  */
+export declare const createFadePresence: PresenceMotionCreator<FadeVariantParams>;
+
 /** A React component that applies fade in/out transitions to its children. */
 export declare const Fade: PresenceComponent<    {}>;
 
@@ -63,6 +67,26 @@ export declare const FadeExaggerated: PresenceComponent<    {}>;
 
 export declare const FadeSnappy: PresenceComponent<    {}>;
 
+declare type FadeVariantParams = {
+    /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */
+    enterDuration?: number;
+    /** Easing curve for the enter transition (fade-in). Defaults to the `easeEase` value.  */
+    enterEasing?: string;
+    /** Time (ms) for the exit transition (fade-out). Defaults to the `enterDuration` param for symmetry. */
+    exitDuration?: number;
+    /** Easing curve for the exit transition (fade-out). Defaults to the `enterEasing` param for symmetry.  */
+    exitEasing?: string;
+};
+
+/**
+ * This is a factory function that generates a motion object from variant params, e.g. duration, easing, etc.
+ * The generated object defines a presence motion with `enter` and `exit` transitions.
+ * This motion object is declarative, i.e. data without side effects,
+ * and it is framework-independent, i.e. non-React.
+ * It can be turned into a React component using `createPresenceComponent`.
+ */
+declare type PresenceMotionCreator<MotionVariantParams extends Record<string, MotionParam> = {}> = (variantParams?: MotionVariantParams) => PresenceMotion;
+
 /**
  * This is a factory function that generates a motion function, which has variant params bound into it.
  * The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.

package/lib/components/Fade/Fade.js

@@ -1,40 +1,34 @@
-import { motionTokens, createPresenceComponent, createPresenceComponentVariant } from '@fluentui/react-motion';
-const duration = motionTokens.durationNormal;
-const easing = motionTokens.curveEasyEase;
-/** Define a presence motion for fade in/out  */ const fadeMotion = {
-    enter: {
-        duration,
-        easing,
-        keyframes: [
-            {
-                opacity: 0
-            },
-            {
-                opacity: 1
-            }
-        ]
-    },
-    exit: {
-        duration,
-        easing,
-        keyframes: [
-            {
-                opacity: 1
-            },
-            {
-                opacity: 0
-            }
-        ]
-    }
-};
-/** A React component that applies fade in/out transitions to its children. */ export const Fade = createPresenceComponent(fadeMotion);
-export const FadeSnappy = createPresenceComponentVariant(Fade, {
-    all: {
-        duration: motionTokens.durationFast
-    }
-});
-export const FadeExaggerated = createPresenceComponentVariant(Fade, {
-    all: {
-        duration: motionTokens.durationGentle
-    }
-});
+import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';
+/** Define a presence motion for fade in/out  */ export const createFadePresence = ({ enterDuration = motionTokens.durationNormal, enterEasing = motionTokens.curveEasyEase, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({
+        enter: {
+            duration: enterDuration,
+            easing: enterEasing,
+            keyframes: [
+                {
+                    opacity: 0
+                },
+                {
+                    opacity: 1
+                }
+            ]
+        },
+        exit: {
+            duration: exitDuration,
+            easing: exitEasing,
+            keyframes: [
+                {
+                    opacity: 1
+                },
+                {
+                    opacity: 0
+                }
+            ]
+        }
+    });
+/** A React component that applies fade in/out transitions to its children. */ export const Fade = createPresenceComponent(createFadePresence());
+export const FadeSnappy = createPresenceComponent(createFadePresence({
+    enterDuration: motionTokens.durationFast
+}));
+export const FadeExaggerated = createPresenceComponent(createFadePresence({
+    enterDuration: motionTokens.durationGentle
+}));

package/lib/components/Fade/Fade.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Fade.ts"],"sourcesContent":["import {\n  motionTokens,\n  PresenceMotion,\n  createPresenceComponent,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\n\nconst duration = motionTokens.durationNormal;\nconst easing = motionTokens.curveEasyEase;\n\n/** Define a presence motion for fade in/out  */\nconst fadeMotion: PresenceMotion = {\n  enter: { duration, easing, keyframes: [{ opacity: 0 }, { opacity: 1 }] },\n  exit: { duration, easing, keyframes: [{ opacity: 1 }, { opacity: 0 }] },\n};\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(fadeMotion);\n\nexport const FadeSnappy = createPresenceComponentVariant(Fade, { all: { duration: motionTokens.durationFast } });\n\nexport const FadeExaggerated = createPresenceComponentVariant(Fade, { all: { duration: motionTokens.durationGentle } });\n"],"names":["motionTokens","createPresenceComponent","createPresenceComponentVariant","duration","durationNormal","easing","curveEasyEase","fadeMotion","enter","keyframes","opacity","exit","Fade","FadeSnappy","all","durationFast","FadeExaggerated","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SACEA,YAAY,EAEZC,uBAAuB,EACvBC,8BAA8B,QACzB,yBAAyB;AAEhC,MAAMC,WAAWH,aAAaI,cAAc;AAC5C,MAAMC,SAASL,aAAaM,aAAa;AAEzC,8CAA8C,GAC9C,MAAMC,aAA6B;IACjCC,OAAO;QAAEL;QAAUE;QAAQI,WAAW;YAAC;gBAAEC,SAAS;YAAE;YAAG;gBAAEA,SAAS;YAAE;SAAE;IAAC;IACvEC,MAAM;QAAER;QAAUE;QAAQI,WAAW;YAAC;gBAAEC,SAAS;YAAE;YAAG;gBAAEA,SAAS;YAAE;SAAE;IAAC;AACxE;AAEA,4EAA4E,GAC5E,OAAO,MAAME,OAAOX,wBAAwBM,YAAY;AAExD,OAAO,MAAMM,aAAaX,+BAA+BU,MAAM;IAAEE,KAAK;QAAEX,UAAUH,aAAae,YAAY;IAAC;AAAE,GAAG;AAEjH,OAAO,MAAMC,kBAAkBd,+BAA+BU,MAAM;IAAEE,KAAK;QAAEX,UAAUH,aAAaiB,cAAc;IAAC;AAAE,GAAG"}
+{"version":3,"sources":["Fade.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport type { PresenceMotionCreator } from '../../types';\n\ntype FadeVariantParams = {\n  /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */\n  enterDuration?: number;\n\n  /** Easing curve for the enter transition (fade-in). Defaults to the `easeEase` value.  */\n  enterEasing?: string;\n\n  /** Time (ms) for the exit transition (fade-out). Defaults to the `enterDuration` param for symmetry. */\n  exitDuration?: number;\n\n  /** Easing curve for the exit transition (fade-out). Defaults to the `enterEasing` param for symmetry.  */\n  exitEasing?: string;\n};\n\n/** Define a presence motion for fade in/out  */\nexport const createFadePresence: PresenceMotionCreator<FadeVariantParams> = ({\n  enterDuration = motionTokens.durationNormal,\n  enterEasing = motionTokens.curveEasyEase,\n  exitDuration = enterDuration,\n  exitEasing = enterEasing,\n} = {}) => ({\n  enter: { duration: enterDuration, easing: enterEasing, keyframes: [{ opacity: 0 }, { opacity: 1 }] },\n  exit: { duration: exitDuration, easing: exitEasing, keyframes: [{ opacity: 1 }, { opacity: 0 }] },\n});\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(createFadePresence());\n\nexport const FadeSnappy = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationFast }));\n\nexport const FadeExaggerated = createPresenceComponent(\n  createFadePresence({ enterDuration: motionTokens.durationGentle }),\n);\n"],"names":["motionTokens","createPresenceComponent","createFadePresence","enterDuration","durationNormal","enterEasing","curveEasyEase","exitDuration","exitEasing","enter","duration","easing","keyframes","opacity","exit","Fade","FadeSnappy","durationFast","FadeExaggerated","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,YAAY,EAAEC,uBAAuB,QAAQ,yBAAyB;AAiB/E,8CAA8C,GAC9C,OAAO,MAAMC,qBAA+D,CAAC,EAC3EC,gBAAgBH,aAAaI,cAAc,EAC3CC,cAAcL,aAAaM,aAAa,EACxCC,eAAeJ,aAAa,EAC5BK,aAAaH,WAAW,EACzB,GAAG,CAAC,CAAC,GAAM,CAAA;QACVI,OAAO;YAAEC,UAAUP;YAAeQ,QAAQN;YAAaO,WAAW;gBAAC;oBAAEC,SAAS;gBAAE;gBAAG;oBAAEA,SAAS;gBAAE;aAAE;QAAC;QACnGC,MAAM;YAAEJ,UAAUH;YAAcI,QAAQH;YAAYI,WAAW;gBAAC;oBAAEC,SAAS;gBAAE;gBAAG;oBAAEA,SAAS;gBAAE;aAAE;QAAC;IAClG,CAAA,EAAG;AAEH,4EAA4E,GAC5E,OAAO,MAAME,OAAOd,wBAAwBC,sBAAsB;AAElE,OAAO,MAAMc,aAAaf,wBAAwBC,mBAAmB;IAAEC,eAAeH,aAAaiB,YAAY;AAAC,IAAI;AAEpH,OAAO,MAAMC,kBAAkBjB,wBAC7BC,mBAAmB;IAAEC,eAAeH,aAAamB,cAAc;AAAC,IAChE"}

package/lib/index.js

@@ -1,3 +1,3 @@
 export { Collapse, CollapseSnappy, CollapseExaggerated, CollapseDelayed, createCollapsePresence, createCollapseDelayedPresence } from './components/Collapse';
-export { Fade, FadeSnappy, FadeExaggerated } from './components/Fade';
+export { Fade, FadeSnappy, FadeExaggerated, createFadePresence } from './components/Fade';
 export { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  Collapse,\n  CollapseSnappy,\n  CollapseExaggerated,\n  CollapseDelayed,\n  createCollapsePresence,\n  createCollapseDelayedPresence,\n} from './components/Collapse';\nexport { Fade, FadeSnappy, FadeExaggerated } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';\n"],"names":["Collapse","CollapseSnappy","CollapseExaggerated","CollapseDelayed","createCollapsePresence","createCollapseDelayedPresence","Fade","FadeSnappy","FadeExaggerated","Scale","ScaleSnappy","ScaleExaggerated"],"rangeMappings":";;","mappings":"AAAA,SACEA,QAAQ,EACRC,cAAc,EACdC,mBAAmB,EACnBC,eAAe,EACfC,sBAAsB,EACtBC,6BAA6B,QACxB,wBAAwB;AAC/B,SAASC,IAAI,EAAEC,UAAU,EAAEC,eAAe,QAAQ,oBAAoB;AACtE,SAASC,KAAK,EAAEC,WAAW,EAAEC,gBAAgB,QAAQ,qBAAqB"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  Collapse,\n  CollapseSnappy,\n  CollapseExaggerated,\n  CollapseDelayed,\n  createCollapsePresence,\n  createCollapseDelayedPresence,\n} from './components/Collapse';\nexport { Fade, FadeSnappy, FadeExaggerated, createFadePresence } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';\n"],"names":["Collapse","CollapseSnappy","CollapseExaggerated","CollapseDelayed","createCollapsePresence","createCollapseDelayedPresence","Fade","FadeSnappy","FadeExaggerated","createFadePresence","Scale","ScaleSnappy","ScaleExaggerated"],"rangeMappings":";;","mappings":"AAAA,SACEA,QAAQ,EACRC,cAAc,EACdC,mBAAmB,EACnBC,eAAe,EACfC,sBAAsB,EACtBC,6BAA6B,QACxB,wBAAwB;AAC/B,SAASC,IAAI,EAAEC,UAAU,EAAEC,eAAe,EAAEC,kBAAkB,QAAQ,oBAAoB;AAC1F,SAASC,KAAK,EAAEC,WAAW,EAAEC,gBAAgB,QAAQ,qBAAqB"}

package/lib/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["types.ts"],"sourcesContent":["import type { MotionParam, PresenceMotionFn } from '@fluentui/react-motion';\n\n/**\n * This is a factory function that generates a motion function, which has variant params bound into it.\n * The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.\n * This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.\n * For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,\n * while the runtime params may give access to the target element, which is different for each instance.\n *\n * The generated motion function is also framework-independent, i.e. non-React.\n * It can be turned into a React component using `createPresenceComponent`.\n */\n// TODO: move to @fluentui/react-motion when stable\nexport type PresenceMotionFnCreator<\n  MotionVariantParams extends Record<string, MotionParam> = {},\n  MotionRuntimeParams extends Record<string, MotionParam> = {},\n> = (variantParams?: MotionVariantParams) => PresenceMotionFn<MotionRuntimeParams>;\n"],"names":[],"rangeMappings":";;;;;;;;;;","mappings":"AAEA;;;;;;;;;CASC,GACD,mDAAmD;AACnD,WAGmF"}
+{"version":3,"sources":["types.ts"],"sourcesContent":["import type { MotionParam, PresenceMotion, PresenceMotionFn } from '@fluentui/react-motion';\n\n/**\n * This is a factory function that generates a motion object from variant params, e.g. duration, easing, etc.\n * The generated object defines a presence motion with `enter` and `exit` transitions.\n * This motion object is declarative, i.e. data without side effects,\n * and it is framework-independent, i.e. non-React.\n * It can be turned into a React component using `createPresenceComponent`.\n */\n// TODO: move to @fluentui/react-motion when stable\nexport type PresenceMotionCreator<MotionVariantParams extends Record<string, MotionParam> = {}> = (\n  variantParams?: MotionVariantParams,\n) => PresenceMotion;\n\n/**\n * This is a factory function that generates a motion function, which has variant params bound into it.\n * The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.\n * This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.\n * For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,\n * while the runtime params may give access to the target element, which is different for each instance.\n *\n * The generated motion function is also framework-independent, i.e. non-React.\n * It can be turned into a React component using `createPresenceComponent`.\n */\n// TODO: move to @fluentui/react-motion when stable\nexport type PresenceMotionFnCreator<\n  MotionVariantParams extends Record<string, MotionParam> = {},\n  MotionRuntimeParams extends Record<string, MotionParam> = {},\n> = (variantParams?: MotionVariantParams) => PresenceMotionFn<MotionRuntimeParams>;\n"],"names":[],"rangeMappings":";;;;;;;;;;","mappings":"AAcA;;;;;;;;;CASC,GACD,mDAAmD;AACnD,WAGmF"}

package/lib-commonjs/components/Fade/Fade.js

@@ -17,45 +17,42 @@ _export(exports, {
     },
     FadeSnappy: function() {
         return FadeSnappy;
-    }
-});
-const _reactmotion = require("@fluentui/react-motion");
-const duration = _reactmotion.motionTokens.durationNormal;
-const easing = _reactmotion.motionTokens.curveEasyEase;
-/** Define a presence motion for fade in/out  */ const fadeMotion = {
-    enter: {
-        duration,
-        easing,
-        keyframes: [
-            {
-                opacity: 0
-            },
-            {
-                opacity: 1
-            }
-        ]
     },
-    exit: {
-        duration,
-        easing,
-        keyframes: [
-            {
-                opacity: 1
-            },
-            {
-                opacity: 0
-            }
-        ]
-    }
-};
-const Fade = (0, _reactmotion.createPresenceComponent)(fadeMotion);
-const FadeSnappy = (0, _reactmotion.createPresenceComponentVariant)(Fade, {
-    all: {
-        duration: _reactmotion.motionTokens.durationFast
-    }
-});
-const FadeExaggerated = (0, _reactmotion.createPresenceComponentVariant)(Fade, {
-    all: {
-        duration: _reactmotion.motionTokens.durationGentle
+    createFadePresence: function() {
+        return createFadePresence;
     }
 });
+const _reactmotion = require("@fluentui/react-motion");
+const createFadePresence = ({ enterDuration = _reactmotion.motionTokens.durationNormal, enterEasing = _reactmotion.motionTokens.curveEasyEase, exitDuration = enterDuration, exitEasing = enterEasing } = {})=>({
+        enter: {
+            duration: enterDuration,
+            easing: enterEasing,
+            keyframes: [
+                {
+                    opacity: 0
+                },
+                {
+                    opacity: 1
+                }
+            ]
+        },
+        exit: {
+            duration: exitDuration,
+            easing: exitEasing,
+            keyframes: [
+                {
+                    opacity: 1
+                },
+                {
+                    opacity: 0
+                }
+            ]
+        }
+    });
+const Fade = (0, _reactmotion.createPresenceComponent)(createFadePresence());
+const FadeSnappy = (0, _reactmotion.createPresenceComponent)(createFadePresence({
+    enterDuration: _reactmotion.motionTokens.durationFast
+}));
+const FadeExaggerated = (0, _reactmotion.createPresenceComponent)(createFadePresence({
+    enterDuration: _reactmotion.motionTokens.durationGentle
+}));

package/lib-commonjs/components/Fade/Fade.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Fade.ts"],"sourcesContent":["import {\n  motionTokens,\n  PresenceMotion,\n  createPresenceComponent,\n  createPresenceComponentVariant,\n} from '@fluentui/react-motion';\n\nconst duration = motionTokens.durationNormal;\nconst easing = motionTokens.curveEasyEase;\n\n/** Define a presence motion for fade in/out  */\nconst fadeMotion: PresenceMotion = {\n  enter: { duration, easing, keyframes: [{ opacity: 0 }, { opacity: 1 }] },\n  exit: { duration, easing, keyframes: [{ opacity: 1 }, { opacity: 0 }] },\n};\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(fadeMotion);\n\nexport const FadeSnappy = createPresenceComponentVariant(Fade, { all: { duration: motionTokens.durationFast } });\n\nexport const FadeExaggerated = createPresenceComponentVariant(Fade, { all: { duration: motionTokens.durationGentle } });\n"],"names":["Fade","FadeExaggerated","FadeSnappy","duration","motionTokens","durationNormal","easing","curveEasyEase","fadeMotion","enter","keyframes","opacity","exit","createPresenceComponent","createPresenceComponentVariant","all","durationFast","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAiBaA,IAAAA;eAAAA;;IAIAC,eAAAA;eAAAA;;IAFAC,UAAAA;eAAAA;;;6BAdN;AAEP,MAAMC,WAAWC,yBAAAA,CAAaC,cAAc;AAC5C,MAAMC,SAASF,yBAAAA,CAAaG,aAAa;AAEzC,8CAA8C,GAC9C,MAAMC,aAA6B;IACjCC,OAAO;QAAEN;QAAUG;QAAQI,WAAW;YAAC;gBAAEC,SAAS;YAAE;YAAG;gBAAEA,SAAS;YAAE;SAAE;IAAC;IACvEC,MAAM;QAAET;QAAUG;QAAQI,WAAW;YAAC;gBAAEC,SAAS;YAAE;YAAG;gBAAEA,SAAS;YAAE;SAAE;IAAC;AACxE;AAGO,MAAMX,OAAOa,IAAAA,oCAAAA,EAAwBL;AAErC,MAAMN,aAAaY,IAAAA,2CAAAA,EAA+Bd,MAAM;IAAEe,KAAK;QAAEZ,UAAUC,yBAAAA,CAAaY,YAAY;IAAC;AAAE;AAEvG,MAAMf,kBAAkBa,IAAAA,2CAAAA,EAA+Bd,MAAM;IAAEe,KAAK;QAAEZ,UAAUC,yBAAAA,CAAaa,cAAc;IAAC;AAAE"}
+{"version":3,"sources":["Fade.ts"],"sourcesContent":["import { motionTokens, createPresenceComponent } from '@fluentui/react-motion';\nimport type { PresenceMotionCreator } from '../../types';\n\ntype FadeVariantParams = {\n  /** Time (ms) for the enter transition (fade-in). Defaults to the `durationNormal` value (200 ms). */\n  enterDuration?: number;\n\n  /** Easing curve for the enter transition (fade-in). Defaults to the `easeEase` value.  */\n  enterEasing?: string;\n\n  /** Time (ms) for the exit transition (fade-out). Defaults to the `enterDuration` param for symmetry. */\n  exitDuration?: number;\n\n  /** Easing curve for the exit transition (fade-out). Defaults to the `enterEasing` param for symmetry.  */\n  exitEasing?: string;\n};\n\n/** Define a presence motion for fade in/out  */\nexport const createFadePresence: PresenceMotionCreator<FadeVariantParams> = ({\n  enterDuration = motionTokens.durationNormal,\n  enterEasing = motionTokens.curveEasyEase,\n  exitDuration = enterDuration,\n  exitEasing = enterEasing,\n} = {}) => ({\n  enter: { duration: enterDuration, easing: enterEasing, keyframes: [{ opacity: 0 }, { opacity: 1 }] },\n  exit: { duration: exitDuration, easing: exitEasing, keyframes: [{ opacity: 1 }, { opacity: 0 }] },\n});\n\n/** A React component that applies fade in/out transitions to its children. */\nexport const Fade = createPresenceComponent(createFadePresence());\n\nexport const FadeSnappy = createPresenceComponent(createFadePresence({ enterDuration: motionTokens.durationFast }));\n\nexport const FadeExaggerated = createPresenceComponent(\n  createFadePresence({ enterDuration: motionTokens.durationGentle }),\n);\n"],"names":["Fade","FadeExaggerated","FadeSnappy","createFadePresence","enterDuration","motionTokens","durationNormal","enterEasing","curveEasyEase","exitDuration","exitEasing","enter","duration","easing","keyframes","opacity","exit","createPresenceComponent","durationFast","durationGentle"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IA6BaA,IAAAA;eAAAA;;IAIAC,eAAAA;eAAAA;;IAFAC,UAAAA;eAAAA;;IAbAC,kBAAAA;eAAAA;;;6BAlByC;AAkB/C,MAAMA,qBAA+D,CAAC,EAC3EC,gBAAgBC,yBAAAA,CAAaC,cAAc,EAC3CC,cAAcF,yBAAAA,CAAaG,aAAa,EACxCC,eAAeL,aAAa,EAC5BM,aAAaH,WAAW,EACzB,GAAG,CAAC,CAAC,GAAM,CAAA;QACVI,OAAO;YAAEC,UAAUR;YAAeS,QAAQN;YAAaO,WAAW;gBAAC;oBAAEC,SAAS;gBAAE;gBAAG;oBAAEA,SAAS;gBAAE;aAAE;QAAC;QACnGC,MAAM;YAAEJ,UAAUH;YAAcI,QAAQH;YAAYI,WAAW;gBAAC;oBAAEC,SAAS;gBAAE;gBAAG;oBAAEA,SAAS;gBAAE;aAAE;QAAC;IAClG,CAAA;AAGO,MAAMf,OAAOiB,IAAAA,oCAAAA,EAAwBd;AAErC,MAAMD,aAAae,IAAAA,oCAAAA,EAAwBd,mBAAmB;IAAEC,eAAeC,yBAAAA,CAAaa,YAAY;AAAC;AAEzG,MAAMjB,kBAAkBgB,IAAAA,oCAAAA,EAC7Bd,mBAAmB;IAAEC,eAAeC,yBAAAA,CAAac,cAAc;AAAC"}

package/lib-commonjs/index.js

@@ -44,6 +44,9 @@ _export(exports, {
     },
     createCollapsePresence: function() {
         return _Collapse.createCollapsePresence;
+    },
+    createFadePresence: function() {
+        return _Fade.createFadePresence;
     }
 });
 const _Collapse = require("./components/Collapse");

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  Collapse,\n  CollapseSnappy,\n  CollapseExaggerated,\n  CollapseDelayed,\n  createCollapsePresence,\n  createCollapseDelayedPresence,\n} from './components/Collapse';\nexport { Fade, FadeSnappy, FadeExaggerated } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';\n"],"names":["Collapse","CollapseDelayed","CollapseExaggerated","CollapseSnappy","Fade","FadeExaggerated","FadeSnappy","Scale","ScaleExaggerated","ScaleSnappy","createCollapseDelayedPresence","createCollapsePresence"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,QAAQ;eAARA,kBAAQ;;IAGRC,eAAe;eAAfA,yBAAe;;IADfC,mBAAmB;eAAnBA,6BAAmB;;IADnBC,cAAc;eAAdA,wBAAc;;IAMPC,IAAI;eAAJA,UAAI;;IAAcC,eAAe;eAAfA,qBAAe;;IAA3BC,UAAU;eAAVA,gBAAU;;IAChBC,KAAK;eAALA,YAAK;;IAAeC,gBAAgB;eAAhBA,uBAAgB;;IAA7BC,WAAW;eAAXA,kBAAW;;IAHzBC,6BAA6B;eAA7BA,uCAA6B;;IAD7BC,sBAAsB;eAAtBA,gCAAsB;;;0BAEjB;sBAC2C;uBACG"}
+{"version":3,"sources":["index.ts"],"sourcesContent":["export {\n  Collapse,\n  CollapseSnappy,\n  CollapseExaggerated,\n  CollapseDelayed,\n  createCollapsePresence,\n  createCollapseDelayedPresence,\n} from './components/Collapse';\nexport { Fade, FadeSnappy, FadeExaggerated, createFadePresence } from './components/Fade';\nexport { Scale, ScaleSnappy, ScaleExaggerated } from './components/Scale';\n"],"names":["Collapse","CollapseDelayed","CollapseExaggerated","CollapseSnappy","Fade","FadeExaggerated","FadeSnappy","Scale","ScaleExaggerated","ScaleSnappy","createCollapseDelayedPresence","createCollapsePresence","createFadePresence"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IACEA,QAAQ;eAARA,kBAAQ;;IAGRC,eAAe;eAAfA,yBAAe;;IADfC,mBAAmB;eAAnBA,6BAAmB;;IADnBC,cAAc;eAAdA,wBAAc;;IAMPC,IAAI;eAAJA,UAAI;;IAAcC,eAAe;eAAfA,qBAAe;;IAA3BC,UAAU;eAAVA,gBAAU;;IAChBC,KAAK;eAALA,YAAK;;IAAeC,gBAAgB;eAAhBA,uBAAgB;;IAA7BC,WAAW;eAAXA,kBAAW;;IAHzBC,6BAA6B;eAA7BA,uCAA6B;;IAD7BC,sBAAsB;eAAtBA,gCAAsB;;IAGoBC,kBAAkB;eAAlBA,wBAAkB;;;0BADvD;sBAC+D;uBACjB"}

package/lib-commonjs/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["types.ts"],"sourcesContent":["import type { MotionParam, PresenceMotionFn } from '@fluentui/react-motion';\n\n/**\n * This is a factory function that generates a motion function, which has variant params bound into it.\n * The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.\n * This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.\n * For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,\n * while the runtime params may give access to the target element, which is different for each instance.\n *\n * The generated motion function is also framework-independent, i.e. non-React.\n * It can be turned into a React component using `createPresenceComponent`.\n */\n// TODO: move to @fluentui/react-motion when stable\nexport type PresenceMotionFnCreator<\n  MotionVariantParams extends Record<string, MotionParam> = {},\n  MotionRuntimeParams extends Record<string, MotionParam> = {},\n> = (variantParams?: MotionVariantParams) => PresenceMotionFn<MotionRuntimeParams>;\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":"AAEA;;;;;;;;;CASC,GACD,mDAAmD"}
+{"version":3,"sources":["types.ts"],"sourcesContent":["import type { MotionParam, PresenceMotion, PresenceMotionFn } from '@fluentui/react-motion';\n\n/**\n * This is a factory function that generates a motion object from variant params, e.g. duration, easing, etc.\n * The generated object defines a presence motion with `enter` and `exit` transitions.\n * This motion object is declarative, i.e. data without side effects,\n * and it is framework-independent, i.e. non-React.\n * It can be turned into a React component using `createPresenceComponent`.\n */\n// TODO: move to @fluentui/react-motion when stable\nexport type PresenceMotionCreator<MotionVariantParams extends Record<string, MotionParam> = {}> = (\n  variantParams?: MotionVariantParams,\n) => PresenceMotion;\n\n/**\n * This is a factory function that generates a motion function, which has variant params bound into it.\n * The generated motion function accepts other runtime params that aren't locked into the variant, but supplied at runtime.\n * This separation allows the variant to be defined once and reused with different runtime params which may be orthogonal to the variant params.\n * For example, a variant may define the duration and easing of a transition, which are fixed for all instances of the variant,\n * while the runtime params may give access to the target element, which is different for each instance.\n *\n * The generated motion function is also framework-independent, i.e. non-React.\n * It can be turned into a React component using `createPresenceComponent`.\n */\n// TODO: move to @fluentui/react-motion when stable\nexport type PresenceMotionFnCreator<\n  MotionVariantParams extends Record<string, MotionParam> = {},\n  MotionRuntimeParams extends Record<string, MotionParam> = {},\n> = (variantParams?: MotionVariantParams) => PresenceMotionFn<MotionRuntimeParams>;\n"],"names":[],"rangeMappings":";;;;;;;;;","mappings":"AAcA;;;;;;;;;CASC,GACD,mDAAmD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-motion-components-preview",
-  "version": "0.0.0-nightly-20241022-0408.1",
+  "version": "0.0.0-nightly-20241025-0408.1",
   "description": "A preview package for Fluent UI motion components, providing a collection of components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -29,13 +29,13 @@
   },
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/react-conformance": "0.0.0-nightly-20241022-0408.1",
-    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20241022-0408.1",
+    "@fluentui/react-conformance": "0.0.0-nightly-20241025-0408.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly-20241025-0408.1",
     "@fluentui/scripts-api-extractor": "*",
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-motion": "0.0.0-nightly-20241022-0408.1",
+    "@fluentui/react-motion": "0.0.0-nightly-20241025-0408.1",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {