@fluentui/react-motion 9.6.1 → 9.6.2

package/CHANGELOG.md

@@ -1,19 +1,28 @@
 # Change Log - @fluentui/react-motion
 
-This log was last generated on Mon, 11 Nov 2024 09:55:10 GMT and should not be manually modified.
+This log was last generated on Thu, 28 Nov 2024 09:29:42 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.6.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.2)
+
+Thu, 28 Nov 2024 09:29:42 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 09:55:10 GMT 
+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 #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
-- Bump @fluentui/react-utilities to v9.18.17 ([PR #31887](https://github.com/microsoft/fluentui/pull/31887) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.21.0 ([PR #33238](https://github.com/microsoft/fluentui/pull/33238) by beachball)
+- Bump @fluentui/react-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)
 

package/lib/contexts/MotionBehaviourContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/MotionBehaviourContext.ts"],"sourcesContent":["import * 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);\nexport const MotionBehaviourProvider = MotionBehaviourContext.Provider;\nexport const useMotionBehaviourContext = () => React.useContext(MotionBehaviourContext) ?? 'default';\n"],"names":["React","MotionBehaviourContext","createContext","undefined","MotionBehaviourProvider","Provider","useMotionBehaviourContext","useContext"],"rangeMappings":";;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,MAAMC,yBAAyBD,MAAME,aAAa,CAAkCC;AACpF,OAAO,MAAMC,0BAA0BH,uBAAuBI,QAAQ,CAAC;AACvE,OAAO,MAAMC,4BAA4B;QAAMN;WAAAA,CAAAA,oBAAAA,MAAMO,UAAU,CAACN,qCAAjBD,+BAAAA,oBAA4C;AAAQ,EAAE"}
+{"version":3,"sources":["../src/contexts/MotionBehaviourContext.ts"],"sourcesContent":["import * 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 = () => React.useContext(MotionBehaviourContext) ?? 'default';\n"],"names":["React","MotionBehaviourContext","createContext","undefined","MotionBehaviourProvider","Provider","useMotionBehaviourContext","useContext"],"rangeMappings":";;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAO/B,MAAMC,yBAAyBD,MAAME,aAAa,CAAkCC;AAEpF,OAAO,MAAMC,0BAA0BH,uBAAuBI,QAAQ,CAAC;AACvE,OAAO,MAAMC,4BAA4B;QAAMN;WAAAA,CAAAA,oBAAAA,MAAMO,UAAU,CAACN,qCAAjBD,+BAAAA,oBAA4C;AAAQ,EAAE"}

package/lib/hooks/useIsReducedMotion.js

@@ -1,5 +1,6 @@
-import * as React from 'react';
 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() {
@@ -8,7 +9,7 @@ export function useIsReducedMotion() {
     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(()=>{
+    useIsomorphicLayoutEffect(()=>{
         if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {
             return;
         }

package/lib/hooks/useIsReducedMotion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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"}
+{"version":3,"sources":["../src/hooks/useIsReducedMotion.ts"],"sourcesContent":["import { 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,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"}

package/lib-commonjs/contexts/MotionBehaviourContext.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/contexts/MotionBehaviourContext.ts"],"sourcesContent":["import * 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);\nexport const MotionBehaviourProvider = MotionBehaviourContext.Provider;\nexport const useMotionBehaviourContext = () => React.useContext(MotionBehaviourContext) ?? 'default';\n"],"names":["MotionBehaviourProvider","useMotionBehaviourContext","MotionBehaviourContext","React","createContext","undefined","Provider","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,uBAAuB;eAAvBA;;IACAC,yBAAyB;eAAzBA;;;;iEATU;AAOvB,MAAMC,yBAAyBC,OAAMC,aAAa,CAAkCC;AAC7E,MAAML,0BAA0BE,uBAAuBI,QAAQ;AAC/D,MAAML,4BAA4B;QAAME;WAAAA,CAAAA,oBAAAA,OAAMI,UAAU,CAACL,qCAAjBC,+BAAAA,oBAA4C;AAAQ"}
+{"version":3,"sources":["../src/contexts/MotionBehaviourContext.ts"],"sourcesContent":["import * 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 = () => React.useContext(MotionBehaviourContext) ?? 'default';\n"],"names":["MotionBehaviourProvider","useMotionBehaviourContext","MotionBehaviourContext","React","createContext","undefined","Provider","useContext"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IASaA,uBAAuB;eAAvBA;;IACAC,yBAAyB;eAAzBA;;;;iEAVU;AAOvB,MAAMC,yBAAyBC,OAAMC,aAAa,CAAkCC;AAE7E,MAAML,0BAA0BE,uBAAuBI,QAAQ;AAC/D,MAAML,4BAA4B;QAAME;WAAAA,CAAAA,oBAAAA,OAAMI,UAAU,CAACL,qCAAjBC,+BAAAA,oBAA4C;AAAQ"}

package/lib-commonjs/hooks/useIsReducedMotion.js

@@ -9,8 +9,9 @@ Object.defineProperty(exports, "useIsReducedMotion", {
     }
 });
 const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const _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)();
@@ -18,7 +19,7 @@ function useIsReducedMotion() {
     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(()=>{
+    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
         if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {
             return;
         }

package/lib-commonjs/hooks/useIsReducedMotion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/hooks/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":["useIsReducedMotion","REDUCED_MEDIA_QUERY","targetDocument","useFluent","targetWindow","defaultView","queryValue","React","useRef","isEnabled","useCallback","current","useEffect","matchMedia","queryMatch","matches","matchListener","e","addEventListener","removeEventListener"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAOgBA;;;eAAAA;;;;iEAPO;qCACyB;AAEhD,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;IAEhEJ,OAAMK,SAAS,CAAC;QACd,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"}
+{"version":3,"sources":["../src/hooks/useIsReducedMotion.ts"],"sourcesContent":["import { 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAQgBA;;;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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-motion",
-  "version": "9.6.1",
+  "version": "9.6.2",
   "description": "A package with utilities & motion definitions using Web Animations API",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",