@fluentui/react-portal 9.4.2 → 9.4.4
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.md +23 -2
- package/dist/index.d.ts +5 -0
- package/lib/components/Portal/usePortal.js +55 -27
- package/lib/components/Portal/usePortal.js.map +1 -1
- package/lib/index.js +2 -1
- package/lib/index.js.map +1 -1
- package/lib/utils/toMountNodeProps.js +21 -0
- package/lib/utils/toMountNodeProps.js.map +1 -0
- package/lib-commonjs/components/Portal/usePortal.js +58 -38
- package/lib-commonjs/components/Portal/usePortal.js.map +1 -1
- package/lib-commonjs/index.js +4 -3
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/utils/toMountNodeProps.js +27 -0
- package/lib-commonjs/utils/toMountNodeProps.js.map +1 -0
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,33 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-portal
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 14 Dec 2023 09:51:35 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.4.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.4.4)
|
|
8
|
+
|
|
9
|
+
Thu, 14 Dec 2023 09:51:35 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.4.3..@fluentui/react-portal_v9.4.4)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: Virtual parent cannot be the DOM child of mount node ([PR #29990](https://github.com/microsoft/fluentui/pull/29990) by lingfangao@hotmail.com)
|
|
15
|
+
- Bump @fluentui/react-shared-contexts to v9.13.1 ([commit](https://github.com/microsoft/fluentui/commit/80a1b02be2fbbdde916ac87fbf760e442a2295c4) by beachball)
|
|
16
|
+
- Bump @fluentui/react-tabster to v9.15.1 ([commit](https://github.com/microsoft/fluentui/commit/80a1b02be2fbbdde916ac87fbf760e442a2295c4) by beachball)
|
|
17
|
+
- Bump @fluentui/react-utilities to v9.15.3 ([commit](https://github.com/microsoft/fluentui/commit/80a1b02be2fbbdde916ac87fbf760e442a2295c4) by beachball)
|
|
18
|
+
|
|
19
|
+
## [9.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.4.3)
|
|
20
|
+
|
|
21
|
+
Thu, 30 Nov 2023 13:42:06 GMT
|
|
22
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.4.2..@fluentui/react-portal_v9.4.3)
|
|
23
|
+
|
|
24
|
+
### Patches
|
|
25
|
+
|
|
26
|
+
- Bump @fluentui/react-tabster to v9.15.0 ([PR #29929](https://github.com/microsoft/fluentui/pull/29929) by beachball)
|
|
27
|
+
|
|
7
28
|
## [9.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.4.2)
|
|
8
29
|
|
|
9
|
-
Mon, 20 Nov 2023 09:
|
|
30
|
+
Mon, 20 Nov 2023 09:55:10 GMT
|
|
10
31
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.4.1..@fluentui/react-portal_v9.4.2)
|
|
11
32
|
|
|
12
33
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -41,6 +41,11 @@ export declare const renderPortal_unstable: (state: PortalState) => React_2.Reac
|
|
|
41
41
|
|
|
42
42
|
export { setVirtualParent }
|
|
43
43
|
|
|
44
|
+
/**
|
|
45
|
+
* The function that normalizes the `mountNode` prop into an object with element and className props.
|
|
46
|
+
*
|
|
47
|
+
* @param mountNode - an HTML element or an object with props
|
|
48
|
+
*/
|
|
44
49
|
export declare function toMountNodeProps(mountNode: PortalProps['mountNode']): {
|
|
45
50
|
element?: HTMLElement | null;
|
|
46
51
|
className?: string;
|
|
@@ -1,22 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { setVirtualParent } from '@fluentui/react-utilities';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
+
import { toMountNodeProps } from '../../utils/toMountNodeProps';
|
|
3
4
|
import { usePortalMountNode } from './usePortalMountNode';
|
|
4
|
-
export function toMountNodeProps(mountNode) {
|
|
5
|
-
if (isHTMLElement(mountNode)) {
|
|
6
|
-
return {
|
|
7
|
-
element: mountNode
|
|
8
|
-
};
|
|
9
|
-
}
|
|
10
|
-
if (typeof mountNode === 'object') {
|
|
11
|
-
if (mountNode === null) {
|
|
12
|
-
return {
|
|
13
|
-
element: null
|
|
14
|
-
};
|
|
15
|
-
}
|
|
16
|
-
return mountNode;
|
|
17
|
-
}
|
|
18
|
-
return {};
|
|
19
|
-
}
|
|
20
5
|
/**
|
|
21
6
|
* Create the state required to render Portal.
|
|
22
7
|
*
|
|
@@ -30,23 +15,66 @@ export function toMountNodeProps(mountNode) {
|
|
|
30
15
|
disabled: !!element,
|
|
31
16
|
className
|
|
32
17
|
});
|
|
18
|
+
const mountNode = element !== null && element !== void 0 ? element : fallbackElement;
|
|
33
19
|
const state = {
|
|
34
20
|
children: props.children,
|
|
35
|
-
mountNode
|
|
21
|
+
mountNode,
|
|
36
22
|
virtualParentRootRef
|
|
37
23
|
};
|
|
38
24
|
React.useEffect(()=>{
|
|
39
|
-
if (
|
|
40
|
-
|
|
25
|
+
if (!mountNode) {
|
|
26
|
+
return;
|
|
27
|
+
}
|
|
28
|
+
const virtualParent = virtualParentRootRef.current;
|
|
29
|
+
// By default, we create a mount node for portal on `document.body` (see usePortalMountNode()) and have following structure:
|
|
30
|
+
//
|
|
31
|
+
// <body>
|
|
32
|
+
// <!-- ⚛️ application root -->
|
|
33
|
+
// <div id="root">
|
|
34
|
+
// <!-- ⬇️ portal node rendered in a tree to anchor (virtual parent node) -->
|
|
35
|
+
// <span aria-hidden="true"></span>
|
|
36
|
+
// </div>
|
|
37
|
+
// <div id="portal-mount-node">
|
|
38
|
+
// <!-- 🧩portal content -->
|
|
39
|
+
// </div>
|
|
40
|
+
// </body>
|
|
41
|
+
//
|
|
42
|
+
// To make sure that `.elementContains()` works correctly, we link a virtual parent to a portal node (a virtual parent node becomes a parent of mount node):
|
|
43
|
+
// virtual.contains(mountNode) === false
|
|
44
|
+
// (while we need ⬇️⬇️⬇️)
|
|
45
|
+
// elementsContains(virtualParent, mountNode) === true
|
|
46
|
+
// elementsContains(mountNode, virtualParent) === false
|
|
47
|
+
//
|
|
48
|
+
// For more details, check docs for virtual parent utils.
|
|
49
|
+
//
|
|
50
|
+
// However, if a user provides a custom mount node (via `props`) the structure could be different:
|
|
51
|
+
//
|
|
52
|
+
// <body>
|
|
53
|
+
// <!-- application root -->
|
|
54
|
+
// <div id="root">
|
|
55
|
+
// <div id="portal-mount-node">
|
|
56
|
+
// <!-- 🧩portal content -->
|
|
57
|
+
//
|
|
58
|
+
// <span aria-hidden="true"></span>
|
|
59
|
+
// </div>
|
|
60
|
+
// </div>
|
|
61
|
+
// </body>
|
|
62
|
+
//
|
|
63
|
+
// A mount node in this case contains portal's content and a virtual parent node. In this case nodes linking is redundant and the check below avoids it.
|
|
64
|
+
//
|
|
65
|
+
// Otherwise, there is a circular reference - both elements are parents of each other:
|
|
66
|
+
// elementsContains(mountNode, virtualParent) === true
|
|
67
|
+
// elementsContains(virtualParent, mountNode) === true
|
|
68
|
+
const isVirtualParentInsideChild = mountNode.contains(virtualParent);
|
|
69
|
+
if (virtualParent && !isVirtualParentInsideChild) {
|
|
70
|
+
setVirtualParent(mountNode, virtualParent);
|
|
71
|
+
return ()=>{
|
|
72
|
+
setVirtualParent(mountNode, undefined);
|
|
73
|
+
};
|
|
41
74
|
}
|
|
42
|
-
return ()=>{
|
|
43
|
-
if (state.mountNode) {
|
|
44
|
-
setVirtualParent(state.mountNode, undefined);
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
75
|
}, [
|
|
48
|
-
|
|
49
|
-
|
|
76
|
+
virtualParentRootRef,
|
|
77
|
+
mountNode
|
|
50
78
|
]);
|
|
51
79
|
return state;
|
|
52
80
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePortal.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["usePortal.ts"],"sourcesContent":["import { setVirtualParent } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { toMountNodeProps } from '../../utils/toMountNodeProps';\nimport { usePortalMountNode } from './usePortalMountNode';\nimport type { PortalProps, PortalState } from './Portal.types';\n\n/**\n * Create the state required to render Portal.\n *\n * The returned state can be modified with hooks such as usePortalStyles, before being passed to renderPortal_unstable.\n *\n * @param props - props from this instance of Portal\n */\nexport const usePortal_unstable = (props: PortalProps): PortalState => {\n const { element, className } = toMountNodeProps(props.mountNode);\n\n const virtualParentRootRef = React.useRef<HTMLSpanElement>(null);\n const fallbackElement = usePortalMountNode({ disabled: !!element, className });\n\n const mountNode = element ?? fallbackElement;\n const state: PortalState = {\n children: props.children,\n mountNode,\n virtualParentRootRef,\n };\n\n React.useEffect(() => {\n if (!mountNode) {\n return;\n }\n\n const virtualParent = virtualParentRootRef.current;\n\n // By default, we create a mount node for portal on `document.body` (see usePortalMountNode()) and have following structure:\n //\n // <body>\n // <!-- ⚛️ application root -->\n // <div id=\"root\">\n // <!-- ⬇️ portal node rendered in a tree to anchor (virtual parent node) -->\n // <span aria-hidden=\"true\"></span>\n // </div>\n // <div id=\"portal-mount-node\">\n // <!-- 🧩portal content -->\n // </div>\n // </body>\n //\n // To make sure that `.elementContains()` works correctly, we link a virtual parent to a portal node (a virtual parent node becomes a parent of mount node):\n // virtual.contains(mountNode) === false\n // (while we need ⬇️⬇️⬇️)\n // elementsContains(virtualParent, mountNode) === true\n // elementsContains(mountNode, virtualParent) === false\n //\n // For more details, check docs for virtual parent utils.\n //\n // However, if a user provides a custom mount node (via `props`) the structure could be different:\n //\n // <body>\n // <!-- application root -->\n // <div id=\"root\">\n // <div id=\"portal-mount-node\">\n // <!-- 🧩portal content -->\n //\n // <span aria-hidden=\"true\"></span>\n // </div>\n // </div>\n // </body>\n //\n // A mount node in this case contains portal's content and a virtual parent node. In this case nodes linking is redundant and the check below avoids it.\n //\n // Otherwise, there is a circular reference - both elements are parents of each other:\n // elementsContains(mountNode, virtualParent) === true\n // elementsContains(virtualParent, mountNode) === true\n const isVirtualParentInsideChild = mountNode.contains(virtualParent);\n\n if (virtualParent && !isVirtualParentInsideChild) {\n setVirtualParent(mountNode, virtualParent);\n\n return () => {\n setVirtualParent(mountNode, undefined);\n };\n }\n }, [virtualParentRootRef, mountNode]);\n\n return state;\n};\n"],"names":["setVirtualParent","React","toMountNodeProps","usePortalMountNode","usePortal_unstable","props","element","className","mountNode","virtualParentRootRef","useRef","fallbackElement","disabled","state","children","useEffect","virtualParent","current","isVirtualParentInsideChild","contains","undefined"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,4BAA4B;AAC7D,YAAYC,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,kBAAkB,QAAQ,uBAAuB;AAG1D;;;;;;CAMC,GACD,OAAO,MAAMC,qBAAqB,CAACC;IACjC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGL,iBAAiBG,MAAMG,SAAS;IAE/D,MAAMC,uBAAuBR,MAAMS,MAAM,CAAkB;IAC3D,MAAMC,kBAAkBR,mBAAmB;QAAES,UAAU,CAAC,CAACN;QAASC;IAAU;IAE5E,MAAMC,YAAYF,oBAAAA,qBAAAA,UAAWK;IAC7B,MAAME,QAAqB;QACzBC,UAAUT,MAAMS,QAAQ;QACxBN;QACAC;IACF;IAEAR,MAAMc,SAAS,CAAC;QACd,IAAI,CAACP,WAAW;YACd;QACF;QAEA,MAAMQ,gBAAgBP,qBAAqBQ,OAAO;QAElD,4HAA4H;QAC5H,EAAE;QACF,SAAS;QACT,iCAAiC;QACjC,oBAAoB;QACpB,iFAAiF;QACjF,uCAAuC;QACvC,WAAW;QACX,iCAAiC;QACjC,gCAAgC;QAChC,WAAW;QACX,UAAU;QACV,EAAE;QACF,4JAA4J;QAC5J,0CAA0C;QAC1C,2BAA2B;QAC3B,wDAAwD;QACxD,yDAAyD;QACzD,EAAE;QACF,yDAAyD;QACzD,EAAE;QACF,kGAAkG;QAClG,EAAE;QACF,SAAS;QACT,8BAA8B;QAC9B,oBAAoB;QACpB,mCAAmC;QACnC,kCAAkC;QAClC,EAAE;QACF,yCAAyC;QACzC,aAAa;QACb,WAAW;QACX,UAAU;QACV,EAAE;QACF,wJAAwJ;QACxJ,EAAE;QACF,sFAAsF;QACtF,wDAAwD;QACxD,wDAAwD;QACxD,MAAMC,6BAA6BV,UAAUW,QAAQ,CAACH;QAEtD,IAAIA,iBAAiB,CAACE,4BAA4B;YAChDlB,iBAAiBQ,WAAWQ;YAE5B,OAAO;gBACLhB,iBAAiBQ,WAAWY;YAC9B;QACF;IACF,GAAG;QAACX;QAAsBD;KAAU;IAEpC,OAAOK;AACT,EAAE"}
|
package/lib/index.js
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
1
|
export { elementContains, setVirtualParent } from '@fluentui/react-utilities';
|
|
2
|
-
export { Portal, renderPortal_unstable,
|
|
2
|
+
export { Portal, renderPortal_unstable, usePortal_unstable } from './components/Portal/index';
|
|
3
|
+
export { toMountNodeProps } from './utils/toMountNodeProps';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"sourcesContent":["export { elementContains, setVirtualParent } from '@fluentui/react-utilities';\nexport { Portal, renderPortal_unstable,
|
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export { elementContains, setVirtualParent } from '@fluentui/react-utilities';\nexport { Portal, renderPortal_unstable, usePortal_unstable } from './components/Portal/index';\nexport type { PortalProps, PortalState } from './components/Portal/index';\n\nexport { toMountNodeProps } from './utils/toMountNodeProps';\n"],"names":["elementContains","setVirtualParent","Portal","renderPortal_unstable","usePortal_unstable","toMountNodeProps"],"mappings":"AAAA,SAASA,eAAe,EAAEC,gBAAgB,QAAQ,4BAA4B;AAC9E,SAASC,MAAM,EAAEC,qBAAqB,EAAEC,kBAAkB,QAAQ,4BAA4B;AAG9F,SAASC,gBAAgB,QAAQ,2BAA2B"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { isHTMLElement } from '@fluentui/react-utilities';
|
|
2
|
+
/**
|
|
3
|
+
* The function that normalizes the `mountNode` prop into an object with element and className props.
|
|
4
|
+
*
|
|
5
|
+
* @param mountNode - an HTML element or an object with props
|
|
6
|
+
*/ export function toMountNodeProps(mountNode) {
|
|
7
|
+
if (isHTMLElement(mountNode)) {
|
|
8
|
+
return {
|
|
9
|
+
element: mountNode
|
|
10
|
+
};
|
|
11
|
+
}
|
|
12
|
+
if (typeof mountNode === 'object') {
|
|
13
|
+
if (mountNode === null) {
|
|
14
|
+
return {
|
|
15
|
+
element: null
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
return mountNode;
|
|
19
|
+
}
|
|
20
|
+
return {};
|
|
21
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["toMountNodeProps.ts"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport type { PortalProps } from '../Portal';\n\n/**\n * The function that normalizes the `mountNode` prop into an object with element and className props.\n *\n * @param mountNode - an HTML element or an object with props\n */\nexport function toMountNodeProps(mountNode: PortalProps['mountNode']): {\n element?: HTMLElement | null;\n className?: string;\n} {\n if (isHTMLElement(mountNode)) {\n return { element: mountNode };\n }\n\n if (typeof mountNode === 'object') {\n if (mountNode === null) {\n return { element: null };\n }\n\n return mountNode;\n }\n\n return {};\n}\n"],"names":["isHTMLElement","toMountNodeProps","mountNode","element"],"mappings":"AAAA,SAASA,aAAa,QAAQ,4BAA4B;AAG1D;;;;CAIC,GACD,OAAO,SAASC,iBAAiBC,SAAmC;IAIlE,IAAIF,cAAcE,YAAY;QAC5B,OAAO;YAAEC,SAASD;QAAU;IAC9B;IAEA,IAAI,OAAOA,cAAc,UAAU;QACjC,IAAIA,cAAc,MAAM;YACtB,OAAO;gBAAEC,SAAS;YAAK;QACzB;QAEA,OAAOD;IACT;IAEA,OAAO,CAAC;AACV"}
|
|
@@ -2,64 +2,84 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
|
3
3
|
value: true
|
|
4
4
|
});
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
get: all[name]
|
|
9
|
-
});
|
|
10
|
-
}
|
|
11
|
-
_export(exports, {
|
|
12
|
-
toMountNodeProps: function() {
|
|
13
|
-
return toMountNodeProps;
|
|
14
|
-
},
|
|
15
|
-
usePortal_unstable: function() {
|
|
5
|
+
Object.defineProperty(exports, "usePortal_unstable", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
16
8
|
return usePortal_unstable;
|
|
17
9
|
}
|
|
18
10
|
});
|
|
19
11
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
20
12
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
21
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
|
+
const _toMountNodeProps = require("../../utils/toMountNodeProps");
|
|
22
15
|
const _usePortalMountNode = require("./usePortalMountNode");
|
|
23
|
-
function toMountNodeProps(mountNode) {
|
|
24
|
-
if ((0, _reactutilities.isHTMLElement)(mountNode)) {
|
|
25
|
-
return {
|
|
26
|
-
element: mountNode
|
|
27
|
-
};
|
|
28
|
-
}
|
|
29
|
-
if (typeof mountNode === 'object') {
|
|
30
|
-
if (mountNode === null) {
|
|
31
|
-
return {
|
|
32
|
-
element: null
|
|
33
|
-
};
|
|
34
|
-
}
|
|
35
|
-
return mountNode;
|
|
36
|
-
}
|
|
37
|
-
return {};
|
|
38
|
-
}
|
|
39
16
|
const usePortal_unstable = (props)=>{
|
|
40
|
-
const { element, className } = toMountNodeProps(props.mountNode);
|
|
17
|
+
const { element, className } = (0, _toMountNodeProps.toMountNodeProps)(props.mountNode);
|
|
41
18
|
const virtualParentRootRef = _react.useRef(null);
|
|
42
19
|
const fallbackElement = (0, _usePortalMountNode.usePortalMountNode)({
|
|
43
20
|
disabled: !!element,
|
|
44
21
|
className
|
|
45
22
|
});
|
|
23
|
+
const mountNode = element !== null && element !== void 0 ? element : fallbackElement;
|
|
46
24
|
const state = {
|
|
47
25
|
children: props.children,
|
|
48
|
-
mountNode
|
|
26
|
+
mountNode,
|
|
49
27
|
virtualParentRootRef
|
|
50
28
|
};
|
|
51
29
|
_react.useEffect(()=>{
|
|
52
|
-
if (
|
|
53
|
-
|
|
30
|
+
if (!mountNode) {
|
|
31
|
+
return;
|
|
32
|
+
}
|
|
33
|
+
const virtualParent = virtualParentRootRef.current;
|
|
34
|
+
// By default, we create a mount node for portal on `document.body` (see usePortalMountNode()) and have following structure:
|
|
35
|
+
//
|
|
36
|
+
// <body>
|
|
37
|
+
// <!-- ⚛️ application root -->
|
|
38
|
+
// <div id="root">
|
|
39
|
+
// <!-- ⬇️ portal node rendered in a tree to anchor (virtual parent node) -->
|
|
40
|
+
// <span aria-hidden="true"></span>
|
|
41
|
+
// </div>
|
|
42
|
+
// <div id="portal-mount-node">
|
|
43
|
+
// <!-- 🧩portal content -->
|
|
44
|
+
// </div>
|
|
45
|
+
// </body>
|
|
46
|
+
//
|
|
47
|
+
// To make sure that `.elementContains()` works correctly, we link a virtual parent to a portal node (a virtual parent node becomes a parent of mount node):
|
|
48
|
+
// virtual.contains(mountNode) === false
|
|
49
|
+
// (while we need ⬇️⬇️⬇️)
|
|
50
|
+
// elementsContains(virtualParent, mountNode) === true
|
|
51
|
+
// elementsContains(mountNode, virtualParent) === false
|
|
52
|
+
//
|
|
53
|
+
// For more details, check docs for virtual parent utils.
|
|
54
|
+
//
|
|
55
|
+
// However, if a user provides a custom mount node (via `props`) the structure could be different:
|
|
56
|
+
//
|
|
57
|
+
// <body>
|
|
58
|
+
// <!-- application root -->
|
|
59
|
+
// <div id="root">
|
|
60
|
+
// <div id="portal-mount-node">
|
|
61
|
+
// <!-- 🧩portal content -->
|
|
62
|
+
//
|
|
63
|
+
// <span aria-hidden="true"></span>
|
|
64
|
+
// </div>
|
|
65
|
+
// </div>
|
|
66
|
+
// </body>
|
|
67
|
+
//
|
|
68
|
+
// A mount node in this case contains portal's content and a virtual parent node. In this case nodes linking is redundant and the check below avoids it.
|
|
69
|
+
//
|
|
70
|
+
// Otherwise, there is a circular reference - both elements are parents of each other:
|
|
71
|
+
// elementsContains(mountNode, virtualParent) === true
|
|
72
|
+
// elementsContains(virtualParent, mountNode) === true
|
|
73
|
+
const isVirtualParentInsideChild = mountNode.contains(virtualParent);
|
|
74
|
+
if (virtualParent && !isVirtualParentInsideChild) {
|
|
75
|
+
(0, _reactutilities.setVirtualParent)(mountNode, virtualParent);
|
|
76
|
+
return ()=>{
|
|
77
|
+
(0, _reactutilities.setVirtualParent)(mountNode, undefined);
|
|
78
|
+
};
|
|
54
79
|
}
|
|
55
|
-
return ()=>{
|
|
56
|
-
if (state.mountNode) {
|
|
57
|
-
(0, _reactutilities.setVirtualParent)(state.mountNode, undefined);
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
80
|
}, [
|
|
61
|
-
|
|
62
|
-
|
|
81
|
+
virtualParentRootRef,
|
|
82
|
+
mountNode
|
|
63
83
|
]);
|
|
64
84
|
return state;
|
|
65
85
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["usePortal.js"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"sources":["usePortal.js"],"sourcesContent":["import { setVirtualParent } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { toMountNodeProps } from '../../utils/toMountNodeProps';\nimport { usePortalMountNode } from './usePortalMountNode';\n/**\n * Create the state required to render Portal.\n *\n * The returned state can be modified with hooks such as usePortalStyles, before being passed to renderPortal_unstable.\n *\n * @param props - props from this instance of Portal\n */ export const usePortal_unstable = (props)=>{\n const { element, className } = toMountNodeProps(props.mountNode);\n const virtualParentRootRef = React.useRef(null);\n const fallbackElement = usePortalMountNode({\n disabled: !!element,\n className\n });\n const mountNode = element !== null && element !== void 0 ? element : fallbackElement;\n const state = {\n children: props.children,\n mountNode,\n virtualParentRootRef\n };\n React.useEffect(()=>{\n if (!mountNode) {\n return;\n }\n const virtualParent = virtualParentRootRef.current;\n // By default, we create a mount node for portal on `document.body` (see usePortalMountNode()) and have following structure:\n //\n // <body>\n // <!-- ⚛️ application root -->\n // <div id=\"root\">\n // <!-- ⬇️ portal node rendered in a tree to anchor (virtual parent node) -->\n // <span aria-hidden=\"true\"></span>\n // </div>\n // <div id=\"portal-mount-node\">\n // <!-- 🧩portal content -->\n // </div>\n // </body>\n //\n // To make sure that `.elementContains()` works correctly, we link a virtual parent to a portal node (a virtual parent node becomes a parent of mount node):\n // virtual.contains(mountNode) === false\n // (while we need ⬇️⬇️⬇️)\n // elementsContains(virtualParent, mountNode) === true\n // elementsContains(mountNode, virtualParent) === false\n //\n // For more details, check docs for virtual parent utils.\n //\n // However, if a user provides a custom mount node (via `props`) the structure could be different:\n //\n // <body>\n // <!-- application root -->\n // <div id=\"root\">\n // <div id=\"portal-mount-node\">\n // <!-- 🧩portal content -->\n //\n // <span aria-hidden=\"true\"></span>\n // </div>\n // </div>\n // </body>\n //\n // A mount node in this case contains portal's content and a virtual parent node. In this case nodes linking is redundant and the check below avoids it.\n //\n // Otherwise, there is a circular reference - both elements are parents of each other:\n // elementsContains(mountNode, virtualParent) === true\n // elementsContains(virtualParent, mountNode) === true\n const isVirtualParentInsideChild = mountNode.contains(virtualParent);\n if (virtualParent && !isVirtualParentInsideChild) {\n setVirtualParent(mountNode, virtualParent);\n return ()=>{\n setVirtualParent(mountNode, undefined);\n };\n }\n }, [\n virtualParentRootRef,\n mountNode\n ]);\n return state;\n};\n"],"names":["usePortal_unstable","props","element","className","toMountNodeProps","mountNode","virtualParentRootRef","React","useRef","fallbackElement","usePortalMountNode","disabled","state","children","useEffect","virtualParent","current","isVirtualParentInsideChild","contains","setVirtualParent","undefined"],"mappings":";;;;+BAUiBA;;;eAAAA;;;;gCAVgB;iEACV;kCACU;oCACE;AAOxB,MAAMA,qBAAqB,CAACC;IACnC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGC,IAAAA,kCAAgB,EAACH,MAAMI,SAAS;IAC/D,MAAMC,uBAAuBC,OAAMC,MAAM,CAAC;IAC1C,MAAMC,kBAAkBC,IAAAA,sCAAkB,EAAC;QACvCC,UAAU,CAAC,CAACT;QACZC;IACJ;IACA,MAAME,YAAYH,YAAY,QAAQA,YAAY,KAAK,IAAIA,UAAUO;IACrE,MAAMG,QAAQ;QACVC,UAAUZ,MAAMY,QAAQ;QACxBR;QACAC;IACJ;IACAC,OAAMO,SAAS,CAAC;QACZ,IAAI,CAACT,WAAW;YACZ;QACJ;QACA,MAAMU,gBAAgBT,qBAAqBU,OAAO;QAClD,4HAA4H;QAC5H,EAAE;QACF,SAAS;QACT,iCAAiC;QACjC,oBAAoB;QACpB,iFAAiF;QACjF,uCAAuC;QACvC,WAAW;QACX,iCAAiC;QACjC,gCAAgC;QAChC,WAAW;QACX,UAAU;QACV,EAAE;QACF,4JAA4J;QAC5J,0CAA0C;QAC1C,2BAA2B;QAC3B,wDAAwD;QACxD,yDAAyD;QACzD,EAAE;QACF,yDAAyD;QACzD,EAAE;QACF,kGAAkG;QAClG,EAAE;QACF,SAAS;QACT,8BAA8B;QAC9B,oBAAoB;QACpB,mCAAmC;QACnC,kCAAkC;QAClC,EAAE;QACF,yCAAyC;QACzC,aAAa;QACb,WAAW;QACX,UAAU;QACV,EAAE;QACF,wJAAwJ;QACxJ,EAAE;QACF,sFAAsF;QACtF,wDAAwD;QACxD,wDAAwD;QACxD,MAAMC,6BAA6BZ,UAAUa,QAAQ,CAACH;QACtD,IAAIA,iBAAiB,CAACE,4BAA4B;YAC9CE,IAAAA,gCAAgB,EAACd,WAAWU;YAC5B,OAAO;gBACHI,IAAAA,gCAAgB,EAACd,WAAWe;YAChC;QACJ;IACJ,GAAG;QACCd;QACAD;KACH;IACD,OAAOO;AACX"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -21,12 +21,13 @@ _export(exports, {
|
|
|
21
21
|
renderPortal_unstable: function() {
|
|
22
22
|
return _index.renderPortal_unstable;
|
|
23
23
|
},
|
|
24
|
-
toMountNodeProps: function() {
|
|
25
|
-
return _index.toMountNodeProps;
|
|
26
|
-
},
|
|
27
24
|
usePortal_unstable: function() {
|
|
28
25
|
return _index.usePortal_unstable;
|
|
26
|
+
},
|
|
27
|
+
toMountNodeProps: function() {
|
|
28
|
+
return _toMountNodeProps.toMountNodeProps;
|
|
29
29
|
}
|
|
30
30
|
});
|
|
31
31
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
32
32
|
const _index = require("./components/Portal/index");
|
|
33
|
+
const _toMountNodeProps = require("./utils/toMountNodeProps");
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.js"],"sourcesContent":["export { elementContains, setVirtualParent } from '@fluentui/react-utilities';\nexport { Portal, renderPortal_unstable,
|
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export { elementContains, setVirtualParent } from '@fluentui/react-utilities';\nexport { Portal, renderPortal_unstable, usePortal_unstable } from './components/Portal/index';\nexport { toMountNodeProps } from './utils/toMountNodeProps';\n"],"names":["elementContains","setVirtualParent","Portal","renderPortal_unstable","usePortal_unstable","toMountNodeProps"],"mappings":";;;;;;;;;;;IAASA,eAAe;eAAfA,+BAAe;;IAAEC,gBAAgB;eAAhBA,gCAAgB;;IACjCC,MAAM;eAANA,aAAM;;IAAEC,qBAAqB;eAArBA,4BAAqB;;IAAEC,kBAAkB;eAAlBA,yBAAkB;;IACjDC,gBAAgB;eAAhBA,kCAAgB;;;gCAFyB;uBACgB;kCACjC"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", {
|
|
3
|
+
value: true
|
|
4
|
+
});
|
|
5
|
+
Object.defineProperty(exports, "toMountNodeProps", {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: function() {
|
|
8
|
+
return toMountNodeProps;
|
|
9
|
+
}
|
|
10
|
+
});
|
|
11
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
|
12
|
+
function toMountNodeProps(mountNode) {
|
|
13
|
+
if ((0, _reactutilities.isHTMLElement)(mountNode)) {
|
|
14
|
+
return {
|
|
15
|
+
element: mountNode
|
|
16
|
+
};
|
|
17
|
+
}
|
|
18
|
+
if (typeof mountNode === 'object') {
|
|
19
|
+
if (mountNode === null) {
|
|
20
|
+
return {
|
|
21
|
+
element: null
|
|
22
|
+
};
|
|
23
|
+
}
|
|
24
|
+
return mountNode;
|
|
25
|
+
}
|
|
26
|
+
return {};
|
|
27
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["toMountNodeProps.js"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\n/**\n * The function that normalizes the `mountNode` prop into an object with element and className props.\n *\n * @param mountNode - an HTML element or an object with props\n */ export function toMountNodeProps(mountNode) {\n if (isHTMLElement(mountNode)) {\n return {\n element: mountNode\n };\n }\n if (typeof mountNode === 'object') {\n if (mountNode === null) {\n return {\n element: null\n };\n }\n return mountNode;\n }\n return {};\n}\n"],"names":["toMountNodeProps","mountNode","isHTMLElement","element"],"mappings":";;;;+BAKoBA;;;eAAAA;;;gCALU;AAKnB,SAASA,iBAAiBC,SAAS;IAC1C,IAAIC,IAAAA,6BAAa,EAACD,YAAY;QAC1B,OAAO;YACHE,SAASF;QACb;IACJ;IACA,IAAI,OAAOA,cAAc,UAAU;QAC/B,IAAIA,cAAc,MAAM;YACpB,OAAO;gBACHE,SAAS;YACb;QACJ;QACA,OAAOF;IACX;IACA,OAAO,CAAC;AACZ"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-portal",
|
|
3
|
-
"version": "9.4.
|
|
3
|
+
"version": "9.4.4",
|
|
4
4
|
"description": "A utility component that creates portals compatible with Fluent UI",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -32,9 +32,9 @@
|
|
|
32
32
|
"@fluentui/scripts-tasks": "*"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@fluentui/react-shared-contexts": "^9.13.
|
|
36
|
-
"@fluentui/react-tabster": "^9.
|
|
37
|
-
"@fluentui/react-utilities": "^9.15.
|
|
35
|
+
"@fluentui/react-shared-contexts": "^9.13.1",
|
|
36
|
+
"@fluentui/react-tabster": "^9.15.1",
|
|
37
|
+
"@fluentui/react-utilities": "^9.15.3",
|
|
38
38
|
"@griffel/react": "^1.5.14",
|
|
39
39
|
"@swc/helpers": "^0.5.1",
|
|
40
40
|
"use-disposable": "^1.0.1"
|