@fluentui/react-motion 9.10.1 → 9.10.3
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 +24 -2
- package/dist/index.d.ts +3 -2
- package/lib/components/PresenceGroup.js +0 -1
- package/lib/components/PresenceGroup.js.map +1 -1
- package/lib/utils/useChildElement.js +2 -11
- package/lib/utils/useChildElement.js.map +1 -1
- package/lib-commonjs/components/PresenceGroup.js +0 -1
- package/lib-commonjs/components/PresenceGroup.js.map +1 -1
- package/lib-commonjs/utils/useChildElement.js +1 -10
- package/lib-commonjs/utils/useChildElement.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,34 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-motion
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 21 Aug 2025 12:20:18 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.10.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.10.3)
|
|
8
|
+
|
|
9
|
+
Thu, 21 Aug 2025 12:20:18 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.10.2..@fluentui/react-motion_v9.10.3)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- refactor: move getRefFromReactElement to react-utilities ([PR #35030](https://github.com/microsoft/fluentui/pull/35030) by dmytrokirpa@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-shared-contexts to v9.25.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
|
|
16
|
+
- Bump @fluentui/react-utilities to v9.24.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
|
|
17
|
+
|
|
18
|
+
## [9.10.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.10.2)
|
|
19
|
+
|
|
20
|
+
Thu, 07 Aug 2025 10:03:25 GMT
|
|
21
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.10.1..@fluentui/react-motion_v9.10.2)
|
|
22
|
+
|
|
23
|
+
### Patches
|
|
24
|
+
|
|
25
|
+
- fix: adjust PresenseGroup types to support react 19 ([PR #34722](https://github.com/microsoft/fluentui/pull/34722) by dmytrokirpa@microsoft.com)
|
|
26
|
+
- fix: migrate to R19 compatible JSX.* namespace types ([PR #34923](https://github.com/microsoft/fluentui/pull/34923) by martinhochel@microsoft.com)
|
|
27
|
+
- Bump @fluentui/react-utilities to v9.23.2 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
|
|
28
|
+
|
|
7
29
|
## [9.10.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-motion_v9.10.1)
|
|
8
30
|
|
|
9
|
-
Wed, 30 Jul 2025
|
|
31
|
+
Wed, 30 Jul 2025 13:10:57 GMT
|
|
10
32
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-motion_v9.10.0..@fluentui/react-motion_v9.10.1)
|
|
11
33
|
|
|
12
34
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { JSXElement } from '@fluentui/react-utilities';
|
|
1
2
|
import { JSXIntrinsicElementKeys } from '@fluentui/react-utilities';
|
|
2
3
|
import * as React_2 from 'react';
|
|
3
4
|
import { SlotComponentType } from '@fluentui/react-utilities';
|
|
@@ -202,11 +203,11 @@ export declare class PresenceGroup extends React_2.Component<PresenceGroupProps,
|
|
|
202
203
|
childMapping: PresenceGroupChildMapping;
|
|
203
204
|
firstRender: boolean;
|
|
204
205
|
};
|
|
205
|
-
constructor(props: PresenceGroupProps, context
|
|
206
|
+
constructor(props: PresenceGroupProps, context?: unknown);
|
|
206
207
|
private handleExit;
|
|
207
208
|
componentDidMount(): void;
|
|
208
209
|
componentWillUnmount(): void;
|
|
209
|
-
render():
|
|
210
|
+
render(): JSXElement;
|
|
210
211
|
}
|
|
211
212
|
|
|
212
213
|
declare type PresenceGroupChild = {
|
|
@@ -17,7 +17,6 @@ import { PresenceGroupItemProvider } from './PresenceGroupItemProvider';
|
|
|
17
17
|
componentWillUnmount() {
|
|
18
18
|
this.mounted = false;
|
|
19
19
|
}
|
|
20
|
-
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
21
20
|
render() {
|
|
22
21
|
return /*#__PURE__*/ React.createElement(React.Fragment, null, Object.entries(this.state.childMapping).map(([childKey, childProps])=>/*#__PURE__*/ React.createElement(PresenceGroupItemProvider, {
|
|
23
22
|
...childProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/PresenceGroup.tsx"],"sourcesContent":["import * as React from 'react';\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
|
|
1
|
+
{"version":3,"sources":["../src/components/PresenceGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { getNextChildMapping } from '../utils/groups/getNextChildMapping';\nimport { getChildMapping } from '../utils/groups/getChildMapping';\nimport type { PresenceGroupChildMapping } from '../utils/groups/types';\nimport { PresenceGroupItemProvider } from './PresenceGroupItemProvider';\n\ntype PresenceGroupProps = {\n children: React.ReactNode;\n};\n\ntype PresenceGroupState = {\n childMapping: PresenceGroupChildMapping;\n firstRender: boolean;\n};\n\n/* eslint-disable @typescript-eslint/explicit-member-accessibility */\n/* eslint-disable @typescript-eslint/naming-convention */\n/* eslint-disable @typescript-eslint/member-ordering */\n\nexport class PresenceGroup extends React.Component<PresenceGroupProps, PresenceGroupState> {\n private mounted: boolean = false;\n\n static getDerivedStateFromProps(\n nextProps: PresenceGroupProps,\n { childMapping: prevChildMapping, firstRender }: PresenceGroupState,\n ) {\n const nextChildMapping = getChildMapping(nextProps.children);\n\n return {\n childMapping: firstRender ? nextChildMapping : getNextChildMapping(prevChildMapping, nextChildMapping),\n firstRender: false,\n };\n }\n\n constructor(props: PresenceGroupProps, context?: unknown) {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\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 render(): JSXElement {\n return (\n <>\n {Object.entries(this.state.childMapping).map(([childKey, childProps]) => (\n <PresenceGroupItemProvider {...childProps} childKey={childKey} key={childKey} onExit={this.handleExit}>\n {childProps.element}\n </PresenceGroupItemProvider>\n ))}\n </>\n );\n }\n}\n"],"names":["React","getNextChildMapping","getChildMapping","PresenceGroupItemProvider","PresenceGroup","Component","getDerivedStateFromProps","nextProps","childMapping","prevChildMapping","firstRender","nextChildMapping","children","componentDidMount","mounted","componentWillUnmount","render","Object","entries","state","map","childKey","childProps","key","onExit","handleExit","element","constructor","props","context","currentChildMapping","setState"],"mappings":";AAAA,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;IA6BAG,oBAAoB;QAClB,IAAI,CAACC,OAAO,GAAG;IACjB;IAEAC,uBAAuB;QACrB,IAAI,CAACD,OAAO,GAAG;IACjB;IACAE,SAAqB;QACnB,qBACE,0CACGC,OAAOC,OAAO,CAAC,IAAI,CAACC,KAAK,CAACX,YAAY,EAAEY,GAAG,CAAC,CAAC,CAACC,UAAUC,WAAW,iBAClE,oBAACnB;gBAA2B,GAAGmB,UAAU;gBAAED,UAAUA;gBAAUE,KAAKF;gBAAUG,QAAQ,IAAI,CAACC,UAAU;eAClGH,WAAWI,OAAO;IAK7B;IA5CAC,YAAYC,KAAyB,EAAEC,OAAiB,CAAE;QACxD,4DAA4D;QAC5D,KAAK,CAACD,OAAOC,UAhBf,uBAAQf,WAAmB,QAwB3B,uBAAQW,cAAa,CAACJ;YACpB,MAAMS,sBAAsB5B,gBAAgB,IAAI,CAAC0B,KAAK,CAAChB,QAAQ;YAE/D,IAAIS,YAAYS,qBAAqB;gBACnC;YACF;YAEA,IAAI,IAAI,CAAChB,OAAO,EAAE;gBAChB,IAAI,CAACiB,QAAQ,CAACZ,CAAAA;oBACZ,MAAMX,eAAe;wBAAE,GAAGW,MAAMX,YAAY;oBAAC;oBAC7C,OAAOA,YAAY,CAACa,SAAS;oBAE7B,OAAO;wBAAEb;oBAAa;gBACxB;YACF;QACF;QArBE,IAAI,CAACW,KAAK,GAAG;YACXX,cAAc,CAAC;YACfE,aAAa;QACf;IACF;AAqCF"}
|
|
@@ -1,20 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { useMergedRefs } from '@fluentui/react-utilities';
|
|
3
|
-
const IS_REACT_19 = React.version.startsWith('19.');
|
|
2
|
+
import { getReactElementRef, useMergedRefs } from '@fluentui/react-utilities';
|
|
4
3
|
const CHILD_ERROR_MESSAGE = [
|
|
5
4
|
'@fluentui/react-motion: Invalid child element.',
|
|
6
5
|
'\n',
|
|
7
6
|
'Motion factories require a single child element to be passed. ',
|
|
8
7
|
'That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().'
|
|
9
8
|
].join('');
|
|
10
|
-
/**
|
|
11
|
-
* A backwards-compatible way to get the ref from a React element without console errors.
|
|
12
|
-
*/ function getRefFromReactElement(element) {
|
|
13
|
-
if (IS_REACT_19) {
|
|
14
|
-
return element.props.ref;
|
|
15
|
-
}
|
|
16
|
-
return element.ref;
|
|
17
|
-
}
|
|
18
9
|
/**
|
|
19
10
|
* Validates the child and returns a cloned child element with a ref.
|
|
20
11
|
*
|
|
@@ -37,7 +28,7 @@ const CHILD_ERROR_MESSAGE = [
|
|
|
37
28
|
if (React.isValidElement(child)) {
|
|
38
29
|
return [
|
|
39
30
|
React.cloneElement(child, {
|
|
40
|
-
ref: useMergedRefs(childRef,
|
|
31
|
+
ref: useMergedRefs(childRef, getReactElementRef(child))
|
|
41
32
|
}),
|
|
42
33
|
childRef
|
|
43
34
|
];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/useChildElement.ts"],"sourcesContent":["import * as React from 'react';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\nconst
|
|
1
|
+
{"version":3,"sources":["../src/utils/useChildElement.ts"],"sourcesContent":["import * as React from 'react';\nimport { getReactElementRef, useMergedRefs } from '@fluentui/react-utilities';\n\nconst CHILD_ERROR_MESSAGE = [\n '@fluentui/react-motion: Invalid child element.',\n '\\n',\n 'Motion factories require a single child element to be passed. ',\n 'That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().',\n].join('');\n\n/**\n * Validates the child and returns a cloned child element with a ref.\n *\n * Throws an error if the child is not a valid React element, similar to \"React.Children.only\".\n * Logs a warning in development mode if the ref is not set as the component remains functional.\n */\nexport function useChildElement(\n children: React.ReactElement,\n mounted: boolean = true,\n): [React.ReactElement, React.RefObject<HTMLElement>] {\n const childRef = React.useRef<HTMLElement>(null);\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production') {\n if (mounted && !childRef.current) {\n // eslint-disable-next-line no-console\n console.error(CHILD_ERROR_MESSAGE);\n }\n }\n }, [mounted]);\n\n try {\n const child = React.Children.only(children) as Parameters<typeof React.isValidElement>[0];\n\n if (React.isValidElement(child)) {\n return [\n React.cloneElement(child as React.ReactElement<{ ref: React.Ref<HTMLElement> }>, {\n ref: useMergedRefs(childRef, getReactElementRef(child)),\n }),\n childRef,\n ];\n }\n } catch {\n /* empty */\n }\n\n throw new Error(CHILD_ERROR_MESSAGE);\n}\n"],"names":["React","getReactElementRef","useMergedRefs","CHILD_ERROR_MESSAGE","join","useChildElement","children","mounted","childRef","useRef","useEffect","process","env","NODE_ENV","current","console","error","child","Children","only","isValidElement","cloneElement","ref","Error"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,EAAEC,aAAa,QAAQ,4BAA4B;AAE9E,MAAMC,sBAAsB;IAC1B;IACA;IACA;IACA;CACD,CAACC,IAAI,CAAC;AAEP;;;;;CAKC,GACD,OAAO,SAASC,gBACdC,QAA4B,EAC5BC,UAAmB,IAAI;IAEvB,MAAMC,WAAWR,MAAMS,MAAM,CAAc;IAE3CT,MAAMU,SAAS,CAAC;QACd,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,IAAIN,WAAW,CAACC,SAASM,OAAO,EAAE;gBAChC,sCAAsC;gBACtCC,QAAQC,KAAK,CAACb;YAChB;QACF;IACF,GAAG;QAACI;KAAQ;IAEZ,IAAI;QACF,MAAMU,QAAQjB,MAAMkB,QAAQ,CAACC,IAAI,CAACb;QAElC,IAAIN,MAAMoB,cAAc,CAACH,QAAQ;YAC/B,OAAO;gBACLjB,MAAMqB,YAAY,CAACJ,OAA8D;oBAC/EK,KAAKpB,cAAcM,UAAUP,mBAAmBgB;gBAClD;gBACAT;aACD;QACH;IACF,EAAE,OAAM;IACN,SAAS,GACX;IAEA,MAAM,IAAIe,MAAMpB;AAClB"}
|
|
@@ -28,7 +28,6 @@ class PresenceGroup extends _react.Component {
|
|
|
28
28
|
componentWillUnmount() {
|
|
29
29
|
this.mounted = false;
|
|
30
30
|
}
|
|
31
|
-
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
32
31
|
render() {
|
|
33
32
|
return /*#__PURE__*/ _react.createElement(_react.Fragment, null, Object.entries(this.state.childMapping).map(([childKey, childProps])=>/*#__PURE__*/ _react.createElement(_PresenceGroupItemProvider.PresenceGroupItemProvider, {
|
|
34
33
|
...childProps,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/PresenceGroup.tsx"],"sourcesContent":["import * as React from 'react';\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
|
|
1
|
+
{"version":3,"sources":["../src/components/PresenceGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { getNextChildMapping } from '../utils/groups/getNextChildMapping';\nimport { getChildMapping } from '../utils/groups/getChildMapping';\nimport type { PresenceGroupChildMapping } from '../utils/groups/types';\nimport { PresenceGroupItemProvider } from './PresenceGroupItemProvider';\n\ntype PresenceGroupProps = {\n children: React.ReactNode;\n};\n\ntype PresenceGroupState = {\n childMapping: PresenceGroupChildMapping;\n firstRender: boolean;\n};\n\n/* eslint-disable @typescript-eslint/explicit-member-accessibility */\n/* eslint-disable @typescript-eslint/naming-convention */\n/* eslint-disable @typescript-eslint/member-ordering */\n\nexport class PresenceGroup extends React.Component<PresenceGroupProps, PresenceGroupState> {\n private mounted: boolean = false;\n\n static getDerivedStateFromProps(\n nextProps: PresenceGroupProps,\n { childMapping: prevChildMapping, firstRender }: PresenceGroupState,\n ) {\n const nextChildMapping = getChildMapping(nextProps.children);\n\n return {\n childMapping: firstRender ? nextChildMapping : getNextChildMapping(prevChildMapping, nextChildMapping),\n firstRender: false,\n };\n }\n\n constructor(props: PresenceGroupProps, context?: unknown) {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\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 render(): JSXElement {\n return (\n <>\n {Object.entries(this.state.childMapping).map(([childKey, childProps]) => (\n <PresenceGroupItemProvider {...childProps} childKey={childKey} key={childKey} onExit={this.handleExit}>\n {childProps.element}\n </PresenceGroupItemProvider>\n ))}\n </>\n );\n }\n}\n"],"names":["PresenceGroup","React","Component","getDerivedStateFromProps","nextProps","childMapping","prevChildMapping","firstRender","nextChildMapping","getChildMapping","children","getNextChildMapping","componentDidMount","mounted","componentWillUnmount","render","Object","entries","state","map","childKey","childProps","PresenceGroupItemProvider","key","onExit","handleExit","element","constructor","props","context","currentChildMapping","setState"],"mappings":";;;;+BAoBaA;;;eAAAA;;;;;iEApBU;qCAEa;iCACJ;2CAEU;AAenC,MAAMA,sBAAsBC,OAAMC,SAAS;IAGhD,OAAOC,yBACLC,SAA6B,EAC7B,EAAEC,cAAcC,gBAAgB,EAAEC,WAAW,EAAsB,EACnE;QACA,MAAMC,mBAAmBC,IAAAA,gCAAe,EAACL,UAAUM,QAAQ;QAE3D,OAAO;YACLL,cAAcE,cAAcC,mBAAmBG,IAAAA,wCAAmB,EAACL,kBAAkBE;YACrFD,aAAa;QACf;IACF;IA6BAK,oBAAoB;QAClB,IAAI,CAACC,OAAO,GAAG;IACjB;IAEAC,uBAAuB;QACrB,IAAI,CAACD,OAAO,GAAG;IACjB;IACAE,SAAqB;QACnB,qBACE,4CACGC,OAAOC,OAAO,CAAC,IAAI,CAACC,KAAK,CAACb,YAAY,EAAEc,GAAG,CAAC,CAAC,CAACC,UAAUC,WAAW,iBAClE,qBAACC,oDAAyB;gBAAE,GAAGD,UAAU;gBAAED,UAAUA;gBAAUG,KAAKH;gBAAUI,QAAQ,IAAI,CAACC,UAAU;eAClGJ,WAAWK,OAAO;IAK7B;IA5CAC,YAAYC,KAAyB,EAAEC,OAAiB,CAAE;QACxD,4DAA4D;QAC5D,KAAK,CAACD,OAAOC,UAhBf,yBAAQhB,WAAmB,QAwB3B,yBAAQY,cAAa,CAACL;YACpB,MAAMU,sBAAsBrB,IAAAA,gCAAe,EAAC,IAAI,CAACmB,KAAK,CAAClB,QAAQ;YAE/D,IAAIU,YAAYU,qBAAqB;gBACnC;YACF;YAEA,IAAI,IAAI,CAACjB,OAAO,EAAE;gBAChB,IAAI,CAACkB,QAAQ,CAACb,CAAAA;oBACZ,MAAMb,eAAe;wBAAE,GAAGa,MAAMb,YAAY;oBAAC;oBAC7C,OAAOA,YAAY,CAACe,SAAS;oBAE7B,OAAO;wBAAEf;oBAAa;gBACxB;YACF;QACF;QArBE,IAAI,CAACa,KAAK,GAAG;YACXb,cAAc,CAAC;YACfE,aAAa;QACf;IACF;AAqCF"}
|
|
@@ -11,21 +11,12 @@ Object.defineProperty(exports, "useChildElement", {
|
|
|
11
11
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
12
12
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
13
13
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
14
|
-
const IS_REACT_19 = _react.version.startsWith('19.');
|
|
15
14
|
const CHILD_ERROR_MESSAGE = [
|
|
16
15
|
'@fluentui/react-motion: Invalid child element.',
|
|
17
16
|
'\n',
|
|
18
17
|
'Motion factories require a single child element to be passed. ',
|
|
19
18
|
'That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().'
|
|
20
19
|
].join('');
|
|
21
|
-
/**
|
|
22
|
-
* A backwards-compatible way to get the ref from a React element without console errors.
|
|
23
|
-
*/ function getRefFromReactElement(element) {
|
|
24
|
-
if (IS_REACT_19) {
|
|
25
|
-
return element.props.ref;
|
|
26
|
-
}
|
|
27
|
-
return element.ref;
|
|
28
|
-
}
|
|
29
20
|
function useChildElement(children, mounted = true) {
|
|
30
21
|
const childRef = _react.useRef(null);
|
|
31
22
|
_react.useEffect(()=>{
|
|
@@ -43,7 +34,7 @@ function useChildElement(children, mounted = true) {
|
|
|
43
34
|
if (_react.isValidElement(child)) {
|
|
44
35
|
return [
|
|
45
36
|
_react.cloneElement(child, {
|
|
46
|
-
ref: (0, _reactutilities.useMergedRefs)(childRef,
|
|
37
|
+
ref: (0, _reactutilities.useMergedRefs)(childRef, (0, _reactutilities.getReactElementRef)(child))
|
|
47
38
|
}),
|
|
48
39
|
childRef
|
|
49
40
|
];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/utils/useChildElement.ts"],"sourcesContent":["import * as React from 'react';\nimport { useMergedRefs } from '@fluentui/react-utilities';\n\nconst
|
|
1
|
+
{"version":3,"sources":["../src/utils/useChildElement.ts"],"sourcesContent":["import * as React from 'react';\nimport { getReactElementRef, useMergedRefs } from '@fluentui/react-utilities';\n\nconst CHILD_ERROR_MESSAGE = [\n '@fluentui/react-motion: Invalid child element.',\n '\\n',\n 'Motion factories require a single child element to be passed. ',\n 'That element element should support ref forwarding i.e. it should be either an intrinsic element (e.g. div) or a component that uses React.forwardRef().',\n].join('');\n\n/**\n * Validates the child and returns a cloned child element with a ref.\n *\n * Throws an error if the child is not a valid React element, similar to \"React.Children.only\".\n * Logs a warning in development mode if the ref is not set as the component remains functional.\n */\nexport function useChildElement(\n children: React.ReactElement,\n mounted: boolean = true,\n): [React.ReactElement, React.RefObject<HTMLElement>] {\n const childRef = React.useRef<HTMLElement>(null);\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production') {\n if (mounted && !childRef.current) {\n // eslint-disable-next-line no-console\n console.error(CHILD_ERROR_MESSAGE);\n }\n }\n }, [mounted]);\n\n try {\n const child = React.Children.only(children) as Parameters<typeof React.isValidElement>[0];\n\n if (React.isValidElement(child)) {\n return [\n React.cloneElement(child as React.ReactElement<{ ref: React.Ref<HTMLElement> }>, {\n ref: useMergedRefs(childRef, getReactElementRef(child)),\n }),\n childRef,\n ];\n }\n } catch {\n /* empty */\n }\n\n throw new Error(CHILD_ERROR_MESSAGE);\n}\n"],"names":["useChildElement","CHILD_ERROR_MESSAGE","join","children","mounted","childRef","React","useRef","useEffect","process","env","NODE_ENV","current","console","error","child","Children","only","isValidElement","cloneElement","ref","useMergedRefs","getReactElementRef","Error"],"mappings":";;;;+BAgBgBA;;;eAAAA;;;;iEAhBO;gCAC2B;AAElD,MAAMC,sBAAsB;IAC1B;IACA;IACA;IACA;CACD,CAACC,IAAI,CAAC;AAQA,SAASF,gBACdG,QAA4B,EAC5BC,UAAmB,IAAI;IAEvB,MAAMC,WAAWC,OAAMC,MAAM,CAAc;IAE3CD,OAAME,SAAS,CAAC;QACd,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,IAAIP,WAAW,CAACC,SAASO,OAAO,EAAE;gBAChC,sCAAsC;gBACtCC,QAAQC,KAAK,CAACb;YAChB;QACF;IACF,GAAG;QAACG;KAAQ;IAEZ,IAAI;QACF,MAAMW,QAAQT,OAAMU,QAAQ,CAACC,IAAI,CAACd;QAElC,IAAIG,OAAMY,cAAc,CAACH,QAAQ;YAC/B,OAAO;gBACLT,OAAMa,YAAY,CAACJ,OAA8D;oBAC/EK,KAAKC,IAAAA,6BAAa,EAAChB,UAAUiB,IAAAA,kCAAkB,EAACP;gBAClD;gBACAV;aACD;QACH;IACF,EAAE,OAAM;IACN,SAAS,GACX;IAEA,MAAM,IAAIkB,MAAMtB;AAClB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-motion",
|
|
3
|
-
"version": "9.10.
|
|
3
|
+
"version": "9.10.3",
|
|
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",
|
|
@@ -25,8 +25,8 @@
|
|
|
25
25
|
"@fluentui/scripts-cypress": "*"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
29
|
-
"@fluentui/react-utilities": "^9.
|
|
28
|
+
"@fluentui/react-shared-contexts": "^9.25.0",
|
|
29
|
+
"@fluentui/react-utilities": "^9.24.0",
|
|
30
30
|
"@swc/helpers": "^0.5.1"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|