@fluentui/react-motion 0.0.0-nightly-20241127-0406.1 → 0.0.0-nightly-20241129-0407.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +17 -8
- package/lib/contexts/MotionBehaviourContext.js.map +1 -1
- package/lib/hooks/useIsReducedMotion.js +3 -2
- package/lib/hooks/useIsReducedMotion.js.map +1 -1
- package/lib-commonjs/contexts/MotionBehaviourContext.js.map +1 -1
- package/lib-commonjs/hooks/useIsReducedMotion.js +3 -2
- package/lib-commonjs/hooks/useIsReducedMotion.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,21 +1,30 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-motion
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 29 Nov 2024 04:11:31 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20241129-0407.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v0.0.0-nightly-20241129-0407.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.
|
|
9
|
+
Fri, 29 Nov 2024 04:11:31 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.2..@fluentui/react-motion_v0.0.0-nightly-20241129-0407.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-conformance to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20241129-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cb50933b122d1b8b06a1802228328eb380948af7) by beachball)
|
|
16
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20241129-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cb50933b122d1b8b06a1802228328eb380948af7) by beachball)
|
|
17
|
+
- Bump @fluentui/react-conformance to v0.0.0-nightly-20241129-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cb50933b122d1b8b06a1802228328eb380948af7) by beachball)
|
|
18
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20241129-0407.1 ([commit](https://github.com/microsoft/fluentui/commit/cb50933b122d1b8b06a1802228328eb380948af7) by beachball)
|
|
19
|
+
|
|
20
|
+
## [9.6.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.2)
|
|
21
|
+
|
|
22
|
+
Thu, 28 Nov 2024 09:30:51 GMT
|
|
23
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.6.1..@fluentui/react-motion_v9.6.2)
|
|
24
|
+
|
|
25
|
+
### Patches
|
|
26
|
+
|
|
27
|
+
- fix: respect reduced motion in createMotionComponent() ([PR #33357](https://github.com/microsoft/fluentui/pull/33357) by olfedias@microsoft.com)
|
|
19
28
|
|
|
20
29
|
## [9.6.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.6.1)
|
|
21
30
|
|
|
@@ -1 +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;
|
|
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);\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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
1
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
2
|
+
import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
|
3
|
+
import * as React from 'react';
|
|
3
4
|
const REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';
|
|
4
5
|
// TODO: find a better approach there as each hook creates a separate subscription
|
|
5
6
|
export function useIsReducedMotion() {
|
|
@@ -8,7 +9,7 @@ export function useIsReducedMotion() {
|
|
|
8
9
|
const targetWindow = (_targetDocument_defaultView = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) !== null && _targetDocument_defaultView !== void 0 ? _targetDocument_defaultView : null;
|
|
9
10
|
const queryValue = React.useRef(false);
|
|
10
11
|
const isEnabled = React.useCallback(()=>queryValue.current, []);
|
|
11
|
-
|
|
12
|
+
useIsomorphicLayoutEffect(()=>{
|
|
12
13
|
if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {
|
|
13
14
|
return;
|
|
14
15
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useIsReducedMotion.ts"],"sourcesContent":["import
|
|
1
|
+
{"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"}
|
|
@@ -1 +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":";;;;;;;;;;;
|
|
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);\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"}
|
|
@@ -9,8 +9,9 @@ Object.defineProperty(exports, "useIsReducedMotion", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
|
-
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
12
|
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
13
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
15
|
const REDUCED_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';
|
|
15
16
|
function useIsReducedMotion() {
|
|
16
17
|
const { targetDocument } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
@@ -18,7 +19,7 @@ function useIsReducedMotion() {
|
|
|
18
19
|
const targetWindow = (_targetDocument_defaultView = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView) !== null && _targetDocument_defaultView !== void 0 ? _targetDocument_defaultView : null;
|
|
19
20
|
const queryValue = _react.useRef(false);
|
|
20
21
|
const isEnabled = _react.useCallback(()=>queryValue.current, []);
|
|
21
|
-
|
|
22
|
+
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
|
|
22
23
|
if (targetWindow === null || typeof targetWindow.matchMedia !== 'function') {
|
|
23
24
|
return;
|
|
24
25
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/hooks/useIsReducedMotion.ts"],"sourcesContent":["import
|
|
1
|
+
{"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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-motion",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20241129-0407.1",
|
|
4
4
|
"description": "A package with utilities & motion definitions using Web Animations API",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -19,14 +19,14 @@
|
|
|
19
19
|
"license": "MIT",
|
|
20
20
|
"devDependencies": {
|
|
21
21
|
"@fluentui/eslint-plugin": "*",
|
|
22
|
-
"@fluentui/react-conformance": "0.0.0-nightly-
|
|
23
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
22
|
+
"@fluentui/react-conformance": "0.0.0-nightly-20241129-0407.1",
|
|
23
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20241129-0407.1",
|
|
24
24
|
"@fluentui/scripts-api-extractor": "*",
|
|
25
25
|
"@fluentui/scripts-cypress": "*"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
29
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
28
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20241129-0407.1",
|
|
29
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20241129-0407.1",
|
|
30
30
|
"@swc/helpers": "^0.5.1",
|
|
31
31
|
"react-is": "^17.0.2"
|
|
32
32
|
},
|