@fluentui/react-portal 9.2.11 → 9.2.12
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +28 -1
- package/CHANGELOG.md +13 -2
- package/lib/Portal.js +0 -1
- package/lib/Portal.js.map +1 -1
- package/lib/components/Portal/Portal.js +3 -5
- package/lib/components/Portal/Portal.js.map +1 -1
- package/lib/components/Portal/Portal.types.js +0 -1
- package/lib/components/Portal/Portal.types.js.map +1 -1
- package/lib/components/Portal/index.js +0 -1
- package/lib/components/Portal/index.js.map +1 -1
- package/lib/components/Portal/renderPortal.js +5 -7
- package/lib/components/Portal/renderPortal.js.map +1 -1
- package/lib/components/Portal/usePortal.js +38 -40
- package/lib/components/Portal/usePortal.js.map +1 -1
- package/lib/components/Portal/usePortalMountNode.js +63 -50
- package/lib/components/Portal/usePortalMountNode.js.map +1 -1
- package/lib/components/Portal/usePortalMountNodeStyles.styles.js.map +1 -1
- package/lib/index.js +0 -1
- package/lib/index.js.map +1 -1
- package/lib/virtualParent/elementContains.js +19 -21
- package/lib/virtualParent/elementContains.js.map +1 -1
- package/lib/virtualParent/getParent.js +12 -15
- package/lib/virtualParent/getParent.js.map +1 -1
- package/lib/virtualParent/index.js +0 -1
- package/lib/virtualParent/index.js.map +1 -1
- package/lib/virtualParent/isVirtualElement.js +2 -3
- package/lib/virtualParent/isVirtualElement.js.map +1 -1
- package/lib/virtualParent/setVirtualParent.js +9 -10
- package/lib/virtualParent/setVirtualParent.js.map +1 -1
- package/lib/virtualParent/types.js +1 -2
- package/lib/virtualParent/types.js.map +1 -1
- package/lib-commonjs/Portal.js +0 -3
- package/lib-commonjs/Portal.js.map +1 -1
- package/lib-commonjs/components/Portal/Portal.js +1 -3
- package/lib-commonjs/components/Portal/Portal.js.map +1 -1
- package/lib-commonjs/components/Portal/Portal.types.js +0 -3
- package/lib-commonjs/components/Portal/Portal.types.js.map +1 -1
- package/lib-commonjs/components/Portal/index.js +0 -3
- package/lib-commonjs/components/Portal/index.js.map +1 -1
- package/lib-commonjs/components/Portal/renderPortal.js +1 -3
- package/lib-commonjs/components/Portal/renderPortal.js.map +1 -1
- package/lib-commonjs/components/Portal/usePortal.js +1 -3
- package/lib-commonjs/components/Portal/usePortal.js.map +1 -1
- package/lib-commonjs/components/Portal/usePortalMountNode.js +1 -3
- package/lib-commonjs/components/Portal/usePortalMountNode.js.map +1 -1
- package/lib-commonjs/components/Portal/usePortalMountNodeStyles.styles.js +0 -2
- package/lib-commonjs/components/Portal/usePortalMountNodeStyles.styles.js.map +1 -1
- package/lib-commonjs/index.js +0 -3
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/virtualParent/elementContains.js +1 -3
- package/lib-commonjs/virtualParent/elementContains.js.map +1 -1
- package/lib-commonjs/virtualParent/getParent.js +1 -3
- package/lib-commonjs/virtualParent/getParent.js.map +1 -1
- package/lib-commonjs/virtualParent/index.js +0 -3
- package/lib-commonjs/virtualParent/index.js.map +1 -1
- package/lib-commonjs/virtualParent/isVirtualElement.js +1 -3
- package/lib-commonjs/virtualParent/isVirtualElement.js.map +1 -1
- package/lib-commonjs/virtualParent/setVirtualParent.js +1 -3
- package/lib-commonjs/virtualParent/setVirtualParent.js.map +1 -1
- package/lib-commonjs/virtualParent/types.js +0 -3
- package/lib-commonjs/virtualParent/types.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.json
CHANGED
@@ -2,7 +2,34 @@
|
|
2
2
|
"name": "@fluentui/react-portal",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
5
|
+
"date": "Wed, 31 May 2023 06:42:59 GMT",
|
6
|
+
"tag": "@fluentui/react-portal_v9.2.12",
|
7
|
+
"version": "9.2.12",
|
8
|
+
"comments": {
|
9
|
+
"patch": [
|
10
|
+
{
|
11
|
+
"author": "seanmonahan@microsoft.com",
|
12
|
+
"package": "@fluentui/react-portal",
|
13
|
+
"commit": "d640b972d7ac86bfb76ae6c6329f12cdd33b3b7c",
|
14
|
+
"comment": "chore: Update Griffel to v1.5.7."
|
15
|
+
},
|
16
|
+
{
|
17
|
+
"author": "beachball",
|
18
|
+
"package": "@fluentui/react-portal",
|
19
|
+
"comment": "Bump @fluentui/react-tabster to v9.7.5",
|
20
|
+
"commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
|
21
|
+
},
|
22
|
+
{
|
23
|
+
"author": "beachball",
|
24
|
+
"package": "@fluentui/react-portal",
|
25
|
+
"comment": "Bump @fluentui/react-utilities to v9.9.2",
|
26
|
+
"commit": "17ca96c6b7f684f36a5c63e40e78b4986a86c713"
|
27
|
+
}
|
28
|
+
]
|
29
|
+
}
|
30
|
+
},
|
31
|
+
{
|
32
|
+
"date": "Thu, 25 May 2023 10:00:48 GMT",
|
6
33
|
"tag": "@fluentui/react-portal_v9.2.11",
|
7
34
|
"version": "9.2.11",
|
8
35
|
"comments": {
|
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,23 @@
|
|
1
1
|
# Change Log - @fluentui/react-portal
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Wed, 31 May 2023 06:42:59 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.2.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.2.12)
|
8
|
+
|
9
|
+
Wed, 31 May 2023 06:42:59 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.2.11..@fluentui/react-portal_v9.2.12)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- chore: Update Griffel to v1.5.7. ([PR #27925](https://github.com/microsoft/fluentui/pull/27925) by seanmonahan@microsoft.com)
|
15
|
+
- Bump @fluentui/react-tabster to v9.7.5 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
|
16
|
+
- Bump @fluentui/react-utilities to v9.9.2 ([PR #28054](https://github.com/microsoft/fluentui/pull/28054) by beachball)
|
17
|
+
|
7
18
|
## [9.2.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.2.11)
|
8
19
|
|
9
|
-
Thu, 25 May 2023
|
20
|
+
Thu, 25 May 2023 10:00:48 GMT
|
10
21
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.2.10..@fluentui/react-portal_v9.2.11)
|
11
22
|
|
12
23
|
### Patches
|
package/lib/Portal.js
CHANGED
package/lib/Portal.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["Portal.ts"],"sourcesContent":["export * from './components/Portal/index';\n"],"names":[],"mappings":"AAAA,cAAc,4BAA4B"}
|
@@ -4,10 +4,8 @@ import { renderPortal_unstable } from './renderPortal';
|
|
4
4
|
/**
|
5
5
|
* A portal provides a way to render children into a DOM node
|
6
6
|
* that exists outside the DOM hierarchy of the parent component.
|
7
|
-
*/
|
8
|
-
|
9
|
-
|
10
|
-
return renderPortal_unstable(state);
|
7
|
+
*/ export const Portal = (props)=>{
|
8
|
+
const state = usePortal_unstable(props);
|
9
|
+
return renderPortal_unstable(state);
|
11
10
|
};
|
12
11
|
Portal.displayName = 'Portal';
|
13
|
-
//# sourceMappingURL=Portal.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["Portal.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { usePortal_unstable } from './usePortal';\nimport { renderPortal_unstable } from './renderPortal';\nimport type { PortalProps } from './Portal.types';\n\n/**\n * A portal provides a way to render children into a DOM node\n * that exists outside the DOM hierarchy of the parent component.\n */\nexport const Portal: React.FC<PortalProps> = props => {\n const state = usePortal_unstable(props);\n\n return renderPortal_unstable(state);\n};\n\nPortal.displayName = 'Portal';\n"],"names":["React","usePortal_unstable","renderPortal_unstable","Portal","props","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AAGvD;;;CAGC,GACD,OAAO,MAAMC,SAAgCC,CAAAA,QAAS;IACpD,MAAMC,QAAQJ,mBAAmBG;IAEjC,OAAOF,sBAAsBG;AAC/B,EAAE;AAEFF,OAAOG,WAAW,GAAG"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["Portal.types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type PortalProps = {\n /**\n * React children\n */\n children?: React.ReactNode;\n\n /**\n * Where the portal children are mounted on DOM\n *\n * @default a new element on document.body without any styling\n */\n mountNode?: HTMLElement | null | { element?: HTMLElement | null; className?: string };\n};\n\nexport type PortalState = Pick<PortalProps, 'children'> & {\n mountNode: HTMLElement | null | undefined;\n\n /**\n * Ref to the root span element as virtual parent\n */\n virtualParentRootRef: React.MutableRefObject<HTMLSpanElement | null>;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './Portal';\nexport * from './Portal.types';\nexport * from './renderPortal';\nexport * from './usePortal';\n"],"names":[],"mappings":"AAAA,cAAc,WAAW;AACzB,cAAc,iBAAiB;AAC/B,cAAc,iBAAiB;AAC/B,cAAc,cAAc"}
|
@@ -2,11 +2,9 @@ import * as ReactDOM from 'react-dom';
|
|
2
2
|
import * as React from 'react';
|
3
3
|
/**
|
4
4
|
* Render the final JSX of Portal
|
5
|
-
*/
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
}, state.mountNode && /*#__PURE__*/ReactDOM.createPortal(state.children, state.mountNode));
|
5
|
+
*/ export const renderPortal_unstable = (state)=>{
|
6
|
+
return /*#__PURE__*/ React.createElement("span", {
|
7
|
+
hidden: true,
|
8
|
+
ref: state.virtualParentRootRef
|
9
|
+
}, state.mountNode && /*#__PURE__*/ ReactDOM.createPortal(state.children, state.mountNode));
|
11
10
|
};
|
12
|
-
//# sourceMappingURL=renderPortal.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["renderPortal.tsx"],"sourcesContent":["import * as ReactDOM from 'react-dom';\nimport * as React from 'react';\nimport type { PortalState } from './Portal.types';\n\n/**\n * Render the final JSX of Portal\n */\nexport const renderPortal_unstable = (state: PortalState): React.ReactElement => {\n return (\n <span hidden ref={state.virtualParentRootRef}>\n {state.mountNode && ReactDOM.createPortal(state.children, state.mountNode)}\n </span>\n );\n};\n"],"names":["ReactDOM","React","renderPortal_unstable","state","span","hidden","ref","virtualParentRootRef","mountNode","createPortal","children"],"mappings":"AAAA,YAAYA,cAAc,YAAY;AACtC,YAAYC,WAAW,QAAQ;AAG/B;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC,QAA2C;IAC/E,qBACE,oBAACC;QAAKC,QAAAA,IAAM;QAACC,KAAKH,MAAMI,oBAAoB;OACzCJ,MAAMK,SAAS,kBAAIR,SAASS,YAAY,CAACN,MAAMO,QAAQ,EAAEP,MAAMK,SAAS;AAG/E,EAAE"}
|
@@ -3,20 +3,20 @@ import * as React from 'react';
|
|
3
3
|
import { setVirtualParent } from '../../virtualParent/index';
|
4
4
|
import { usePortalMountNode } from './usePortalMountNode';
|
5
5
|
export function toMountNodeProps(mountNode) {
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
6
|
+
if (isHTMLElement(mountNode)) {
|
7
|
+
return {
|
8
|
+
element: mountNode
|
9
|
+
};
|
10
|
+
}
|
11
|
+
if (typeof mountNode === 'object') {
|
12
|
+
if (mountNode === null) {
|
13
|
+
return {
|
14
|
+
element: null
|
15
|
+
};
|
16
|
+
}
|
17
|
+
return mountNode;
|
16
18
|
}
|
17
|
-
return
|
18
|
-
}
|
19
|
-
return {};
|
19
|
+
return {};
|
20
20
|
}
|
21
21
|
/**
|
22
22
|
* Create the state required to render Portal.
|
@@ -24,32 +24,30 @@ export function toMountNodeProps(mountNode) {
|
|
24
24
|
* The returned state can be modified with hooks such as usePortalStyles, before being passed to renderPortal_unstable.
|
25
25
|
*
|
26
26
|
* @param props - props from this instance of Portal
|
27
|
-
*/
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
const state = {
|
39
|
-
children: props.children,
|
40
|
-
mountNode: element !== null && element !== void 0 ? element : fallbackElement,
|
41
|
-
virtualParentRootRef
|
42
|
-
};
|
43
|
-
React.useEffect(() => {
|
44
|
-
if (state.virtualParentRootRef.current && state.mountNode) {
|
45
|
-
setVirtualParent(state.mountNode, state.virtualParentRootRef.current);
|
46
|
-
}
|
47
|
-
return () => {
|
48
|
-
if (state.mountNode) {
|
49
|
-
setVirtualParent(state.mountNode, undefined);
|
50
|
-
}
|
27
|
+
*/ export const usePortal_unstable = (props)=>{
|
28
|
+
const { element , className } = toMountNodeProps(props.mountNode);
|
29
|
+
const virtualParentRootRef = React.useRef(null);
|
30
|
+
const fallbackElement = usePortalMountNode({
|
31
|
+
disabled: !!element,
|
32
|
+
className
|
33
|
+
});
|
34
|
+
const state = {
|
35
|
+
children: props.children,
|
36
|
+
mountNode: element !== null && element !== void 0 ? element : fallbackElement,
|
37
|
+
virtualParentRootRef
|
51
38
|
};
|
52
|
-
|
53
|
-
|
39
|
+
React.useEffect(()=>{
|
40
|
+
if (state.virtualParentRootRef.current && state.mountNode) {
|
41
|
+
setVirtualParent(state.mountNode, state.virtualParentRootRef.current);
|
42
|
+
}
|
43
|
+
return ()=>{
|
44
|
+
if (state.mountNode) {
|
45
|
+
setVirtualParent(state.mountNode, undefined);
|
46
|
+
}
|
47
|
+
};
|
48
|
+
}, [
|
49
|
+
state.virtualParentRootRef,
|
50
|
+
state.mountNode
|
51
|
+
]);
|
52
|
+
return state;
|
54
53
|
};
|
55
|
-
//# sourceMappingURL=usePortal.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["usePortal.ts"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { setVirtualParent } from '../../virtualParent/index';\nimport { usePortalMountNode } from './usePortalMountNode';\nimport type { PortalProps, PortalState } from './Portal.types';\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\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 state: PortalState = {\n children: props.children,\n mountNode: element ?? fallbackElement,\n virtualParentRootRef,\n };\n\n React.useEffect(() => {\n if (state.virtualParentRootRef.current && state.mountNode) {\n setVirtualParent(state.mountNode, state.virtualParentRootRef.current);\n }\n return () => {\n if (state.mountNode) {\n setVirtualParent(state.mountNode, undefined);\n }\n };\n }, [state.virtualParentRootRef, state.mountNode]);\n\n return state;\n};\n"],"names":["isHTMLElement","React","setVirtualParent","usePortalMountNode","toMountNodeProps","mountNode","element","usePortal_unstable","props","className","virtualParentRootRef","useRef","fallbackElement","disabled","state","children","useEffect","current","undefined"],"mappings":"AAAA,SAASA,aAAa,QAAQ,4BAA4B;AAC1D,YAAYC,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,4BAA4B;AAC7D,SAASC,kBAAkB,QAAQ,uBAAuB;AAG1D,OAAO,SAASC,iBAAiBC,SAAmC,EAGlE;IACA,IAAIL,cAAcK,YAAY;QAC5B,OAAO;YAAEC,SAASD;QAAU;IAC9B,CAAC;IAED,IAAI,OAAOA,cAAc,UAAU;QACjC,IAAIA,cAAc,IAAI,EAAE;YACtB,OAAO;gBAAEC,SAAS,IAAI;YAAC;QACzB,CAAC;QAED,OAAOD;IACT,CAAC;IAED,OAAO,CAAC;AACV,CAAC;AAED;;;;;;CAMC,GACD,OAAO,MAAME,qBAAqB,CAACC,QAAoC;IACrE,MAAM,EAAEF,QAAO,EAAEG,UAAS,EAAE,GAAGL,iBAAiBI,MAAMH,SAAS;IAE/D,MAAMK,uBAAuBT,MAAMU,MAAM,CAAkB,IAAI;IAC/D,MAAMC,kBAAkBT,mBAAmB;QAAEU,UAAU,CAAC,CAACP;QAASG;IAAU;IAE5E,MAAMK,QAAqB;QACzBC,UAAUP,MAAMO,QAAQ;QACxBV,WAAWC,oBAAAA,qBAAAA,UAAWM,eAAe;QACrCF;IACF;IAEAT,MAAMe,SAAS,CAAC,IAAM;QACpB,IAAIF,MAAMJ,oBAAoB,CAACO,OAAO,IAAIH,MAAMT,SAAS,EAAE;YACzDH,iBAAiBY,MAAMT,SAAS,EAAES,MAAMJ,oBAAoB,CAACO,OAAO;QACtE,CAAC;QACD,OAAO,IAAM;YACX,IAAIH,MAAMT,SAAS,EAAE;gBACnBH,iBAAiBY,MAAMT,SAAS,EAAEa;YACpC,CAAC;QACH;IACF,GAAG;QAACJ,MAAMJ,oBAAoB;QAAEI,MAAMT,SAAS;KAAC;IAEhD,OAAOS;AACT,EAAE"}
|
@@ -7,55 +7,68 @@ import { usePortalMountNodeStylesStyles } from './usePortalMountNodeStyles.style
|
|
7
7
|
const useInsertionEffect = React['useInsertion' + 'Effect'];
|
8
8
|
/**
|
9
9
|
* Creates a new element on a "document.body" to mount portals.
|
10
|
-
*/
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
10
|
+
*/ export const usePortalMountNode = (options)=>{
|
11
|
+
const { targetDocument , dir } = useFluent();
|
12
|
+
const focusVisibleRef = useFocusVisible();
|
13
|
+
const classes = usePortalMountNodeStylesStyles();
|
14
|
+
const themeClassName = useThemeClassName();
|
15
|
+
const className = mergeClasses(themeClassName, classes.root, options.className);
|
16
|
+
const element = useDisposable(()=>{
|
17
|
+
if (targetDocument === undefined || options.disabled) {
|
18
|
+
return [
|
19
|
+
null,
|
20
|
+
()=>null
|
21
|
+
];
|
22
|
+
}
|
23
|
+
const newElement = targetDocument.createElement('div');
|
24
|
+
targetDocument.body.appendChild(newElement);
|
25
|
+
return [
|
26
|
+
newElement,
|
27
|
+
()=>newElement.remove()
|
28
|
+
];
|
29
|
+
}, [
|
30
|
+
targetDocument
|
31
|
+
]);
|
32
|
+
if (useInsertionEffect) {
|
33
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
34
|
+
useInsertionEffect(()=>{
|
35
|
+
if (!element) {
|
36
|
+
return;
|
37
|
+
}
|
38
|
+
const classesToApply = className.split(' ').filter(Boolean);
|
39
|
+
element.classList.add(...classesToApply);
|
40
|
+
element.setAttribute('dir', dir);
|
41
|
+
focusVisibleRef.current = element;
|
42
|
+
return ()=>{
|
43
|
+
element.classList.remove(...classesToApply);
|
44
|
+
element.removeAttribute('dir');
|
45
|
+
};
|
46
|
+
}, [
|
47
|
+
className,
|
48
|
+
dir,
|
49
|
+
element,
|
50
|
+
focusVisibleRef
|
51
|
+
]);
|
52
|
+
} else {
|
53
|
+
// This useMemo call is intentional for React 17
|
54
|
+
// We don't want to re-create the portal element when its attributes change.
|
55
|
+
// This also should not be done in an effect because, changing the value of css variables
|
56
|
+
// after initial mount can trigger interesting CSS side effects like transitions.
|
57
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
58
|
+
React.useMemo(()=>{
|
59
|
+
if (!element) {
|
60
|
+
return;
|
61
|
+
}
|
62
|
+
// Force replace all classes
|
63
|
+
element.className = className;
|
64
|
+
element.setAttribute('dir', dir);
|
65
|
+
focusVisibleRef.current = element;
|
66
|
+
}, [
|
67
|
+
className,
|
68
|
+
dir,
|
69
|
+
element,
|
70
|
+
focusVisibleRef
|
71
|
+
]);
|
23
72
|
}
|
24
|
-
|
25
|
-
targetDocument.body.appendChild(newElement);
|
26
|
-
return [newElement, () => newElement.remove()];
|
27
|
-
}, [targetDocument]);
|
28
|
-
if (useInsertionEffect) {
|
29
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
30
|
-
useInsertionEffect(() => {
|
31
|
-
if (!element) {
|
32
|
-
return;
|
33
|
-
}
|
34
|
-
const classesToApply = className.split(' ').filter(Boolean);
|
35
|
-
element.classList.add(...classesToApply);
|
36
|
-
element.setAttribute('dir', dir);
|
37
|
-
focusVisibleRef.current = element;
|
38
|
-
return () => {
|
39
|
-
element.classList.remove(...classesToApply);
|
40
|
-
element.removeAttribute('dir');
|
41
|
-
};
|
42
|
-
}, [className, dir, element, focusVisibleRef]);
|
43
|
-
} else {
|
44
|
-
// This useMemo call is intentional for React 17
|
45
|
-
// We don't want to re-create the portal element when its attributes change.
|
46
|
-
// This also should not be done in an effect because, changing the value of css variables
|
47
|
-
// after initial mount can trigger interesting CSS side effects like transitions.
|
48
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
49
|
-
React.useMemo(() => {
|
50
|
-
if (!element) {
|
51
|
-
return;
|
52
|
-
}
|
53
|
-
// Force replace all classes
|
54
|
-
element.className = className;
|
55
|
-
element.setAttribute('dir', dir);
|
56
|
-
focusVisibleRef.current = element;
|
57
|
-
}, [className, dir, element, focusVisibleRef]);
|
58
|
-
}
|
59
|
-
return element;
|
73
|
+
return element;
|
60
74
|
};
|
61
|
-
//# sourceMappingURL=usePortalMountNode.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["usePortalMountNode.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n useThemeClassName_unstable as useThemeClassName,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport { mergeClasses } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\nimport { useDisposable } from 'use-disposable';\n\nimport { usePortalMountNodeStylesStyles } from './usePortalMountNodeStyles.styles';\n\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect'] as typeof React.useLayoutEffect | undefined;\n\nexport type UsePortalMountNodeOptions = {\n /**\n * Since hooks cannot be called conditionally use this flag to disable creating the node\n */\n disabled?: boolean;\n\n className?: string;\n};\n\n/**\n * Creates a new element on a \"document.body\" to mount portals.\n */\nexport const usePortalMountNode = (options: UsePortalMountNodeOptions): HTMLElement | null => {\n const { targetDocument, dir } = useFluent();\n const focusVisibleRef = useFocusVisible<HTMLDivElement>() as React.MutableRefObject<HTMLElement | null>;\n const classes = usePortalMountNodeStylesStyles();\n const themeClassName = useThemeClassName();\n\n const className = mergeClasses(themeClassName, classes.root, options.className);\n\n const element = useDisposable(() => {\n if (targetDocument === undefined || options.disabled) {\n return [null, () => null];\n }\n\n const newElement = targetDocument.createElement('div');\n targetDocument.body.appendChild(newElement);\n return [newElement, () => newElement.remove()];\n }, [targetDocument]);\n\n if (useInsertionEffect) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useInsertionEffect(() => {\n if (!element) {\n return;\n }\n\n const classesToApply = className.split(' ').filter(Boolean);\n\n element.classList.add(...classesToApply);\n element.setAttribute('dir', dir);\n focusVisibleRef.current = element;\n\n return () => {\n element.classList.remove(...classesToApply);\n element.removeAttribute('dir');\n };\n }, [className, dir, element, focusVisibleRef]);\n } else {\n // This useMemo call is intentional for React 17\n // We don't want to re-create the portal element when its attributes change.\n // This also should not be done in an effect because, changing the value of css variables\n // after initial mount can trigger interesting CSS side effects like transitions.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useMemo(() => {\n if (!element) {\n return;\n }\n\n // Force replace all classes\n element.className = className;\n element.setAttribute('dir', dir);\n focusVisibleRef.current = element;\n }, [className, dir, element, focusVisibleRef]);\n }\n\n return element;\n};\n"],"names":["React","useThemeClassName_unstable","useThemeClassName","useFluent_unstable","useFluent","mergeClasses","useFocusVisible","useDisposable","usePortalMountNodeStylesStyles","useInsertionEffect","usePortalMountNode","options","targetDocument","dir","focusVisibleRef","classes","themeClassName","className","root","element","undefined","disabled","newElement","createElement","body","appendChild","remove","classesToApply","split","filter","Boolean","classList","add","setAttribute","current","removeAttribute","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,8BAA8BC,iBAAiB,EAC/CC,sBAAsBC,SAAS,QAC1B,kCAAkC;AACzC,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,aAAa,QAAQ,iBAAiB;AAE/C,SAASC,8BAA8B,QAAQ,oCAAoC;AAEnF,MAAMC,qBAAqB,AAACT,KAAe,CAAC,iBAAiB,SAAS;AAWtE;;CAEC,GACD,OAAO,MAAMU,qBAAqB,CAACC,UAA2D;IAC5F,MAAM,EAAEC,eAAc,EAAEC,IAAG,EAAE,GAAGT;IAChC,MAAMU,kBAAkBR;IACxB,MAAMS,UAAUP;IAChB,MAAMQ,iBAAiBd;IAEvB,MAAMe,YAAYZ,aAAaW,gBAAgBD,QAAQG,IAAI,EAAEP,QAAQM,SAAS;IAE9E,MAAME,UAAUZ,cAAc,IAAM;QAClC,IAAIK,mBAAmBQ,aAAaT,QAAQU,QAAQ,EAAE;YACpD,OAAO;gBAAC,IAAI;gBAAE,IAAM,IAAI;aAAC;QAC3B,CAAC;QAED,MAAMC,aAAaV,eAAeW,aAAa,CAAC;QAChDX,eAAeY,IAAI,CAACC,WAAW,CAACH;QAChC,OAAO;YAACA;YAAY,IAAMA,WAAWI,MAAM;SAAG;IAChD,GAAG;QAACd;KAAe;IAEnB,IAAIH,oBAAoB;QACtB,sDAAsD;QACtDA,mBAAmB,IAAM;YACvB,IAAI,CAACU,SAAS;gBACZ;YACF,CAAC;YAED,MAAMQ,iBAAiBV,UAAUW,KAAK,CAAC,KAAKC,MAAM,CAACC;YAEnDX,QAAQY,SAAS,CAACC,GAAG,IAAIL;YACzBR,QAAQc,YAAY,CAAC,OAAOpB;YAC5BC,gBAAgBoB,OAAO,GAAGf;YAE1B,OAAO,IAAM;gBACXA,QAAQY,SAAS,CAACL,MAAM,IAAIC;gBAC5BR,QAAQgB,eAAe,CAAC;YAC1B;QACF,GAAG;YAAClB;YAAWJ;YAAKM;YAASL;SAAgB;IAC/C,OAAO;QACL,gDAAgD;QAChD,4EAA4E;QAC5E,yFAAyF;QACzF,iFAAiF;QACjF,sDAAsD;QACtDd,MAAMoC,OAAO,CAAC,IAAM;YAClB,IAAI,CAACjB,SAAS;gBACZ;YACF,CAAC;YAED,4BAA4B;YAC5BA,QAAQF,SAAS,GAAGA;YACpBE,QAAQc,YAAY,CAAC,OAAOpB;YAC5BC,gBAAgBoB,OAAO,GAAGf;QAC5B,GAAG;YAACF;YAAWJ;YAAKM;YAASL;SAAgB;IAC/C,CAAC;IAED,OAAOK;AACT,EAAE"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"names":["__styles","usePortalMountNodeStylesStyles","root","qhf8xq","Bj3rh1h","d"],"sources":["
|
1
|
+
{"version":3,"names":["__styles","usePortalMountNodeStylesStyles","root","qhf8xq","Bj3rh1h","d"],"sources":["usePortalMountNodeStyles.styles.js"],"sourcesContent":["import { makeStyles } from '@griffel/react';\nexport const usePortalMountNodeStylesStyles = makeStyles({\n root: {\n position: 'relative',\n zIndex: 1000000\n }\n});\n"],"mappings":"AAAA,SAAAA,QAAA,QAA2B,gBAAgB;AAC3C,OAAO,MAAMC,8BAA8B,gBAAGD,QAAA;EAAAE,IAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAK7C,CAAC"}
|
package/lib/index.js
CHANGED
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export { Portal, renderPortal_unstable, usePortal_unstable } from './components/Portal/index';\nexport type { PortalProps, PortalState } from './components/Portal/index';\nexport { elementContains, setVirtualParent } from './virtualParent/index';\n"],"names":["Portal","renderPortal_unstable","usePortal_unstable","elementContains","setVirtualParent"],"mappings":"AAAA,SAASA,MAAM,EAAEC,qBAAqB,EAAEC,kBAAkB,QAAQ,4BAA4B;AAE9F,SAASC,eAAe,EAAEC,gBAAgB,QAAQ,wBAAwB"}
|
@@ -4,27 +4,25 @@ import { getParent } from './getParent';
|
|
4
4
|
* checks the virtual parent hierarchy. If a virtual parents exists, it is chosen over the actual parent
|
5
5
|
*
|
6
6
|
* @returns true if the child can find the parent in its virtual hierarchy
|
7
|
-
*/
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
if (parent === child) {
|
13
|
-
return true;
|
14
|
-
} else {
|
15
|
-
// Tracks references of nodes that have been visited to prevent infinite loops
|
16
|
-
const set = new WeakSet();
|
17
|
-
while (child) {
|
18
|
-
const nextParent = getParent(child, {
|
19
|
-
skipVirtual: set.has(child)
|
20
|
-
});
|
21
|
-
set.add(child);
|
22
|
-
if (nextParent === parent) {
|
7
|
+
*/ export function elementContains(parent, child) {
|
8
|
+
if (!parent || !child) {
|
9
|
+
return false;
|
10
|
+
}
|
11
|
+
if (parent === child) {
|
23
12
|
return true;
|
24
|
-
|
25
|
-
|
13
|
+
} else {
|
14
|
+
// Tracks references of nodes that have been visited to prevent infinite loops
|
15
|
+
const set = new WeakSet();
|
16
|
+
while(child){
|
17
|
+
const nextParent = getParent(child, {
|
18
|
+
skipVirtual: set.has(child)
|
19
|
+
});
|
20
|
+
set.add(child);
|
21
|
+
if (nextParent === parent) {
|
22
|
+
return true;
|
23
|
+
}
|
24
|
+
child = nextParent;
|
25
|
+
}
|
26
26
|
}
|
27
|
-
|
28
|
-
return false;
|
27
|
+
return false;
|
29
28
|
}
|
30
|
-
//# sourceMappingURL=elementContains.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["elementContains.ts"],"sourcesContent":["import { getParent } from './getParent';\n\n/**\n * Similar functionality to `element.contains` DOM API for use without of order DOM elements that\n * checks the virtual parent hierarchy. If a virtual parents exists, it is chosen over the actual parent\n *\n * @returns true if the child can find the parent in its virtual hierarchy\n */\nexport function elementContains(parent: Node | null, child: Node | null): boolean {\n if (!parent || !child) {\n return false;\n }\n\n if (parent === child) {\n return true;\n } else {\n // Tracks references of nodes that have been visited to prevent infinite loops\n const set = new WeakSet<Node>();\n\n while (child) {\n const nextParent: Node | null = getParent(child, {\n skipVirtual: set.has(child),\n });\n set.add(child);\n\n if (nextParent === parent) {\n return true;\n }\n\n child = nextParent;\n }\n }\n\n return false;\n}\n"],"names":["getParent","elementContains","parent","child","set","WeakSet","nextParent","skipVirtual","has","add"],"mappings":"AAAA,SAASA,SAAS,QAAQ,cAAc;AAExC;;;;;CAKC,GACD,OAAO,SAASC,gBAAgBC,MAAmB,EAAEC,KAAkB,EAAW;IAChF,IAAI,CAACD,UAAU,CAACC,OAAO;QACrB,OAAO,KAAK;IACd,CAAC;IAED,IAAID,WAAWC,OAAO;QACpB,OAAO,IAAI;IACb,OAAO;QACL,8EAA8E;QAC9E,MAAMC,MAAM,IAAIC;QAEhB,MAAOF,MAAO;YACZ,MAAMG,aAA0BN,UAAUG,OAAO;gBAC/CI,aAAaH,IAAII,GAAG,CAACL;YACvB;YACAC,IAAIK,GAAG,CAACN;YAER,IAAIG,eAAeJ,QAAQ;gBACzB,OAAO,IAAI;YACb,CAAC;YAEDC,QAAQG;QACV;IACF,CAAC;IAED,OAAO,KAAK;AACd,CAAC"}
|
@@ -1,24 +1,21 @@
|
|
1
1
|
import { isVirtualElement } from './isVirtualElement';
|
2
2
|
/**
|
3
3
|
* Gets the virtual parent given the child element, if it exists.
|
4
|
-
*/
|
5
|
-
|
6
|
-
return isVirtualElement(child) ? child._virtual.parent || null : null;
|
4
|
+
*/ function getVirtualParent(child) {
|
5
|
+
return isVirtualElement(child) ? child._virtual.parent || null : null;
|
7
6
|
}
|
8
7
|
/**
|
9
8
|
* Gets the element which is the parent of a given element.
|
10
9
|
* This method prefers the virtual parent over real DOM parent when present.
|
11
|
-
*/
|
12
|
-
|
13
|
-
|
14
|
-
return null;
|
15
|
-
}
|
16
|
-
if (!options.skipVirtual) {
|
17
|
-
const virtualParent = getVirtualParent(child);
|
18
|
-
if (virtualParent) {
|
19
|
-
return virtualParent;
|
10
|
+
*/ export function getParent(child, options = {}) {
|
11
|
+
if (!child) {
|
12
|
+
return null;
|
20
13
|
}
|
21
|
-
|
22
|
-
|
14
|
+
if (!options.skipVirtual) {
|
15
|
+
const virtualParent = getVirtualParent(child);
|
16
|
+
if (virtualParent) {
|
17
|
+
return virtualParent;
|
18
|
+
}
|
19
|
+
}
|
20
|
+
return (child === null || child === void 0 ? void 0 : child.parentNode) || null;
|
23
21
|
}
|
24
|
-
//# sourceMappingURL=getParent.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["getParent.ts"],"sourcesContent":["import { isVirtualElement } from './isVirtualElement';\n\ntype GetParentOptions = {\n /**\n * Indicates if getParent() should ignore a virtual parent.\n */\n skipVirtual?: boolean;\n};\n\n/**\n * Gets the virtual parent given the child element, if it exists.\n */\nfunction getVirtualParent(child: Node): Node | null {\n return isVirtualElement(child) ? child._virtual.parent || null : null;\n}\n\n/**\n * Gets the element which is the parent of a given element.\n * This method prefers the virtual parent over real DOM parent when present.\n */\nexport function getParent(child: Node | null, options: GetParentOptions = {}): Node | null {\n if (!child) {\n return null;\n }\n\n if (!options.skipVirtual) {\n const virtualParent = getVirtualParent(child);\n\n if (virtualParent) {\n return virtualParent;\n }\n }\n\n return child?.parentNode || null;\n}\n"],"names":["isVirtualElement","getVirtualParent","child","_virtual","parent","getParent","options","skipVirtual","virtualParent","parentNode"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,qBAAqB;AAStD;;CAEC,GACD,SAASC,iBAAiBC,KAAW,EAAe;IAClD,OAAOF,iBAAiBE,SAASA,MAAMC,QAAQ,CAACC,MAAM,IAAI,IAAI,GAAG,IAAI;AACvE;AAEA;;;CAGC,GACD,OAAO,SAASC,UAAUH,KAAkB,EAAEI,UAA4B,CAAC,CAAC,EAAe;IACzF,IAAI,CAACJ,OAAO;QACV,OAAO,IAAI;IACb,CAAC;IAED,IAAI,CAACI,QAAQC,WAAW,EAAE;QACxB,MAAMC,gBAAgBP,iBAAiBC;QAEvC,IAAIM,eAAe;YACjB,OAAOA;QACT,CAAC;IACH,CAAC;IAED,OAAON,CAAAA,kBAAAA,mBAAAA,KAAAA,IAAAA,MAAOO,UAAU,AAAD,KAAK,IAAI;AAClC,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './elementContains';\nexport * from './setVirtualParent';\n"],"names":[],"mappings":"AAAA,cAAc,oBAAoB;AAClC,cAAc,qBAAqB"}
|
@@ -1,6 +1,5 @@
|
|
1
1
|
/**
|
2
2
|
* Determines whether or not an element has the virtual hierarchy extension.
|
3
|
-
*/export function isVirtualElement(element) {
|
4
|
-
|
3
|
+
*/ export function isVirtualElement(element) {
|
4
|
+
return element && !!element._virtual;
|
5
5
|
}
|
6
|
-
//# sourceMappingURL=isVirtualElement.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["isVirtualElement.ts"],"sourcesContent":["import type { VirtualElement } from './types';\n\n/**\n * Determines whether or not an element has the virtual hierarchy extension.\n */\nexport function isVirtualElement(element: Node | VirtualElement): element is VirtualElement {\n return element && !!(<VirtualElement>element)._virtual;\n}\n"],"names":["isVirtualElement","element","_virtual"],"mappings":"AAEA;;CAEC,GACD,OAAO,SAASA,iBAAiBC,OAA8B,EAA6B;IAC1F,OAAOA,WAAW,CAAC,CAAC,AAAiBA,QAASC,QAAQ;AACxD,CAAC"}
|
@@ -3,14 +3,13 @@
|
|
3
3
|
*
|
4
4
|
* @param child - Theme element to set the virtual parent
|
5
5
|
* @param parent - The virtual parent, use `undefined` to remove a virtual parent relationship
|
6
|
-
*/export function setVirtualParent(child, parent) {
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
6
|
+
*/ export function setVirtualParent(child, parent) {
|
7
|
+
if (!child) {
|
8
|
+
return;
|
9
|
+
}
|
10
|
+
const virtualChild = child;
|
11
|
+
if (!virtualChild._virtual) {
|
12
|
+
virtualChild._virtual = {};
|
13
|
+
}
|
14
|
+
virtualChild._virtual.parent = parent;
|
15
15
|
}
|
16
|
-
//# sourceMappingURL=setVirtualParent.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["setVirtualParent.ts"],"sourcesContent":["import type { VirtualElement } from './types';\n\n/**\n * Sets the virtual parent of an element.\n *\n * @param child - Theme element to set the virtual parent\n * @param parent - The virtual parent, use `undefined` to remove a virtual parent relationship\n */\nexport function setVirtualParent(child: Node, parent?: Node): void {\n if (!child) {\n return;\n }\n\n const virtualChild = child as VirtualElement;\n\n if (!virtualChild._virtual) {\n virtualChild._virtual = {};\n }\n\n virtualChild._virtual.parent = parent;\n}\n"],"names":["setVirtualParent","child","parent","virtualChild","_virtual"],"mappings":"AAEA;;;;;CAKC,GACD,OAAO,SAASA,iBAAiBC,KAAW,EAAEC,MAAa,EAAQ;IACjE,IAAI,CAACD,OAAO;QACV;IACF,CAAC;IAED,MAAME,eAAeF;IAErB,IAAI,CAACE,aAAaC,QAAQ,EAAE;QAC1BD,aAAaC,QAAQ,GAAG,CAAC;IAC3B,CAAC;IAEDD,aAAaC,QAAQ,CAACF,MAAM,GAAGA;AACjC,CAAC"}
|
@@ -1,2 +1 @@
|
|
1
|
-
export {};
|
2
|
-
//# sourceMappingURL=types.js.map
|
1
|
+
export { };
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"sources":["types.ts"],"sourcesContent":["export interface VirtualElement extends Node {\n _virtual: {\n parent?: Node;\n };\n}\n"],"names":[],"mappings":"AAAA,WAIC"}
|
package/lib-commonjs/Portal.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["Portal.js"],"sourcesContent":["export * from './components/Portal/index';\n"],"names":[],"mappings":";;;;;oBAAc"}
|
@@ -14,6 +14,4 @@ const Portal = (props)=>{
|
|
14
14
|
const state = (0, _usePortal.usePortal_unstable)(props);
|
15
15
|
return (0, _renderPortal.renderPortal_unstable)(state);
|
16
16
|
};
|
17
|
-
Portal.displayName = 'Portal';
|
18
|
-
|
19
|
-
//# sourceMappingURL=Portal.js.map
|
17
|
+
Portal.displayName = 'Portal';
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["Portal.js"],"sourcesContent":["import * as React from 'react';\nimport { usePortal_unstable } from './usePortal';\nimport { renderPortal_unstable } from './renderPortal';\n/**\n * A portal provides a way to render children into a DOM node\n * that exists outside the DOM hierarchy of the parent component.\n */ export const Portal = (props)=>{\n const state = usePortal_unstable(props);\n return renderPortal_unstable(state);\n};\nPortal.displayName = 'Portal';\n"],"names":["Portal","props","state","usePortal_unstable","renderPortal_unstable","displayName"],"mappings":";;;;+BAMiBA;;aAAAA;;;6DANM;2BACY;8BACG;AAI3B,MAAMA,SAAS,CAACC,QAAQ;IAC/B,MAAMC,QAAQC,IAAAA,6BAAkB,EAACF;IACjC,OAAOG,IAAAA,mCAAqB,EAACF;AACjC;AACAF,OAAOK,WAAW,GAAG"}
|
@@ -4,6 +4,3 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
|
6
6
|
const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
|
7
|
-
//# sourceMappingURL=Portal.types.js.map
|
8
|
-
|
9
|
-
//# sourceMappingURL=Portal.types.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["Portal.types.js"],"sourcesContent":["import * as React from 'react';\n"],"names":[],"mappings":";;;;;6DAAuB"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './Portal';\nexport * from './Portal.types';\nexport * from './renderPortal';\nexport * from './usePortal';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA"}
|
@@ -14,6 +14,4 @@ const renderPortal_unstable = (state)=>{
|
|
14
14
|
hidden: true,
|
15
15
|
ref: state.virtualParentRootRef
|
16
16
|
}, state.mountNode && /*#__PURE__*/ _reactDom.createPortal(state.children, state.mountNode));
|
17
|
-
};
|
18
|
-
|
19
|
-
//# sourceMappingURL=renderPortal.js.map
|
17
|
+
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["renderPortal.js"],"sourcesContent":["import * as ReactDOM from 'react-dom';\nimport * as React from 'react';\n/**\n * Render the final JSX of Portal\n */ export const renderPortal_unstable = (state)=>{\n return /*#__PURE__*/ React.createElement(\"span\", {\n hidden: true,\n ref: state.virtualParentRootRef\n }, state.mountNode && /*#__PURE__*/ ReactDOM.createPortal(state.children, state.mountNode));\n};\n"],"names":["renderPortal_unstable","state","React","createElement","hidden","ref","virtualParentRootRef","mountNode","ReactDOM","createPortal","children"],"mappings":";;;;+BAIiBA;;aAAAA;;;gEAJS;6DACH;AAGZ,MAAMA,wBAAwB,CAACC,QAAQ;IAC9C,OAAO,WAAW,GAAGC,OAAMC,aAAa,CAAC,QAAQ;QAC7CC,QAAQ,IAAI;QACZC,KAAKJ,MAAMK,oBAAoB;IACnC,GAAGL,MAAMM,SAAS,IAAI,WAAW,GAAGC,UAASC,YAAY,CAACR,MAAMS,QAAQ,EAAET,MAAMM,SAAS;AAC7F"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["usePortal.js"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { setVirtualParent } from '../../virtualParent/index';\nimport { usePortalMountNode } from './usePortalMountNode';\nexport 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/**\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 state = {\n children: props.children,\n mountNode: element !== null && element !== void 0 ? element : fallbackElement,\n virtualParentRootRef\n };\n React.useEffect(()=>{\n if (state.virtualParentRootRef.current && state.mountNode) {\n setVirtualParent(state.mountNode, state.virtualParentRootRef.current);\n }\n return ()=>{\n if (state.mountNode) {\n setVirtualParent(state.mountNode, undefined);\n }\n };\n }, [\n state.virtualParentRootRef,\n state.mountNode\n ]);\n return state;\n};\n"],"names":["toMountNodeProps","usePortal_unstable","mountNode","isHTMLElement","element","props","className","virtualParentRootRef","React","useRef","fallbackElement","usePortalMountNode","disabled","state","children","useEffect","current","setVirtualParent","undefined"],"mappings":";;;;;;;;;;;IAIgBA,gBAAgB,MAAhBA;IAsBCC,kBAAkB,MAAlBA;;;gCA1Ba;6DACP;uBACU;oCACE;AAC5B,SAASD,iBAAiBE,SAAS,EAAE;IACxC,IAAIC,IAAAA,6BAAa,EAACD,YAAY;QAC1B,OAAO;YACHE,SAASF;QACb;IACJ,CAAC;IACD,IAAI,OAAOA,cAAc,UAAU;QAC/B,IAAIA,cAAc,IAAI,EAAE;YACpB,OAAO;gBACHE,SAAS,IAAI;YACjB;QACJ,CAAC;QACD,OAAOF;IACX,CAAC;IACD,OAAO,CAAC;AACZ;AAOW,MAAMD,qBAAqB,CAACI,QAAQ;IAC3C,MAAM,EAAED,QAAO,EAAGE,UAAS,EAAG,GAAGN,iBAAiBK,MAAMH,SAAS;IACjE,MAAMK,uBAAuBC,OAAMC,MAAM,CAAC,IAAI;IAC9C,MAAMC,kBAAkBC,IAAAA,sCAAkB,EAAC;QACvCC,UAAU,CAAC,CAACR;QACZE;IACJ;IACA,MAAMO,QAAQ;QACVC,UAAUT,MAAMS,QAAQ;QACxBZ,WAAWE,YAAY,IAAI,IAAIA,YAAY,KAAK,IAAIA,UAAUM,eAAe;QAC7EH;IACJ;IACAC,OAAMO,SAAS,CAAC,IAAI;QAChB,IAAIF,MAAMN,oBAAoB,CAACS,OAAO,IAAIH,MAAMX,SAAS,EAAE;YACvDe,IAAAA,uBAAgB,EAACJ,MAAMX,SAAS,EAAEW,MAAMN,oBAAoB,CAACS,OAAO;QACxE,CAAC;QACD,OAAO,IAAI;YACP,IAAIH,MAAMX,SAAS,EAAE;gBACjBe,IAAAA,uBAAgB,EAACJ,MAAMX,SAAS,EAAEgB;YACtC,CAAC;QACL;IACJ,GAAG;QACCL,MAAMN,oBAAoB;QAC1BM,MAAMX,SAAS;KAClB;IACD,OAAOW;AACX"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["usePortalMountNode.js"],"sourcesContent":["import * as React from 'react';\nimport { useThemeClassName_unstable as useThemeClassName, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { mergeClasses } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\nimport { useDisposable } from 'use-disposable';\nimport { usePortalMountNodeStylesStyles } from './usePortalMountNodeStyles.styles';\nconst useInsertionEffect = React['useInsertion' + 'Effect'];\n/**\n * Creates a new element on a \"document.body\" to mount portals.\n */ export const usePortalMountNode = (options)=>{\n const { targetDocument , dir } = useFluent();\n const focusVisibleRef = useFocusVisible();\n const classes = usePortalMountNodeStylesStyles();\n const themeClassName = useThemeClassName();\n const className = mergeClasses(themeClassName, classes.root, options.className);\n const element = useDisposable(()=>{\n if (targetDocument === undefined || options.disabled) {\n return [\n null,\n ()=>null\n ];\n }\n const newElement = targetDocument.createElement('div');\n targetDocument.body.appendChild(newElement);\n return [\n newElement,\n ()=>newElement.remove()\n ];\n }, [\n targetDocument\n ]);\n if (useInsertionEffect) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useInsertionEffect(()=>{\n if (!element) {\n return;\n }\n const classesToApply = className.split(' ').filter(Boolean);\n element.classList.add(...classesToApply);\n element.setAttribute('dir', dir);\n focusVisibleRef.current = element;\n return ()=>{\n element.classList.remove(...classesToApply);\n element.removeAttribute('dir');\n };\n }, [\n className,\n dir,\n element,\n focusVisibleRef\n ]);\n } else {\n // This useMemo call is intentional for React 17\n // We don't want to re-create the portal element when its attributes change.\n // This also should not be done in an effect because, changing the value of css variables\n // after initial mount can trigger interesting CSS side effects like transitions.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useMemo(()=>{\n if (!element) {\n return;\n }\n // Force replace all classes\n element.className = className;\n element.setAttribute('dir', dir);\n focusVisibleRef.current = element;\n }, [\n className,\n dir,\n element,\n focusVisibleRef\n ]);\n }\n return element;\n};\n"],"names":["usePortalMountNode","useInsertionEffect","React","options","targetDocument","dir","useFluent","focusVisibleRef","useFocusVisible","classes","usePortalMountNodeStylesStyles","themeClassName","useThemeClassName","className","mergeClasses","root","element","useDisposable","undefined","disabled","newElement","createElement","body","appendChild","remove","classesToApply","split","filter","Boolean","classList","add","setAttribute","current","removeAttribute","useMemo"],"mappings":";;;;+BASiBA;;aAAAA;;;6DATM;qCAC0E;wBACpE;8BACG;+BACF;gDACiB;AAC/C,MAAMC,qBAAqBC,MAAK,CAAC,iBAAiB,SAAS;AAGhD,MAAMF,qBAAqB,CAACG,UAAU;IAC7C,MAAM,EAAEC,eAAc,EAAGC,IAAG,EAAG,GAAGC,IAAAA,uCAAS;IAC3C,MAAMC,kBAAkBC,IAAAA,6BAAe;IACvC,MAAMC,UAAUC,IAAAA,8DAA8B;IAC9C,MAAMC,iBAAiBC,IAAAA,+CAAiB;IACxC,MAAMC,YAAYC,IAAAA,oBAAY,EAACH,gBAAgBF,QAAQM,IAAI,EAAEZ,QAAQU,SAAS;IAC9E,MAAMG,UAAUC,IAAAA,4BAAa,EAAC,IAAI;QAC9B,IAAIb,mBAAmBc,aAAaf,QAAQgB,QAAQ,EAAE;YAClD,OAAO;gBACH,IAAI;gBACJ,IAAI,IAAI;aACX;QACL,CAAC;QACD,MAAMC,aAAahB,eAAeiB,aAAa,CAAC;QAChDjB,eAAekB,IAAI,CAACC,WAAW,CAACH;QAChC,OAAO;YACHA;YACA,IAAIA,WAAWI,MAAM;SACxB;IACL,GAAG;QACCpB;KACH;IACD,IAAIH,oBAAoB;QACpB,sDAAsD;QACtDA,mBAAmB,IAAI;YACnB,IAAI,CAACe,SAAS;gBACV;YACJ,CAAC;YACD,MAAMS,iBAAiBZ,UAAUa,KAAK,CAAC,KAAKC,MAAM,CAACC;YACnDZ,QAAQa,SAAS,CAACC,GAAG,IAAIL;YACzBT,QAAQe,YAAY,CAAC,OAAO1B;YAC5BE,gBAAgByB,OAAO,GAAGhB;YAC1B,OAAO,IAAI;gBACPA,QAAQa,SAAS,CAACL,MAAM,IAAIC;gBAC5BT,QAAQiB,eAAe,CAAC;YAC5B;QACJ,GAAG;YACCpB;YACAR;YACAW;YACAT;SACH;IACL,OAAO;QACH,gDAAgD;QAChD,4EAA4E;QAC5E,yFAAyF;QACzF,iFAAiF;QACjF,sDAAsD;QACtDL,OAAMgC,OAAO,CAAC,IAAI;YACd,IAAI,CAAClB,SAAS;gBACV;YACJ,CAAC;YACD,4BAA4B;YAC5BA,QAAQH,SAAS,GAAGA;YACpBG,QAAQe,YAAY,CAAC,OAAO1B;YAC5BE,gBAAgByB,OAAO,GAAGhB;QAC9B,GAAG;YACCH;YACAR;YACAW;YACAT;SACH;IACL,CAAC;IACD,OAAOS;AACX"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["usePortalMountNodeStyles.styles.js"],"sourcesContent":["import { __styles } from '@griffel/react';\nexport const usePortalMountNodeStylesStyles = /*#__PURE__*/__styles({\n root: {\n qhf8xq: \"f10pi13n\",\n Bj3rh1h: \"f494woh\"\n }\n}, {\n d: [\".f10pi13n{position:relative;}\", \".f494woh{z-index:1000000;}\"]\n});\n//# sourceMappingURL=usePortalMountNodeStyles.styles.js.map"],"names":["usePortalMountNodeStylesStyles","__styles","root","qhf8xq","Bj3rh1h","d"],"mappings":";;;;+BACaA;;aAAAA;;uBADY;AAClB,MAAMA,iCAAiC,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IAClEC,MAAM;QACJC,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAiC;KAA6B;AACpE,IACA,2DAA2D"}
|
package/lib-commonjs/index.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export { Portal, renderPortal_unstable, usePortal_unstable } from './components/Portal/index';\nexport { elementContains, setVirtualParent } from './virtualParent/index';\n"],"names":["Portal","renderPortal_unstable","usePortal_unstable","elementContains","setVirtualParent"],"mappings":";;;;;;;;;;;IAASA,MAAM,MAANA,aAAM;IAAEC,qBAAqB,MAArBA,4BAAqB;IAAEC,kBAAkB,MAAlBA,yBAAkB;IACjDC,eAAe,MAAfA,uBAAe;IAAEC,gBAAgB,MAAhBA,wBAAgB;;uBADwB;wBAChB"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["elementContains.js"],"sourcesContent":["import { getParent } from './getParent';\n/**\n * Similar functionality to `element.contains` DOM API for use without of order DOM elements that\n * checks the virtual parent hierarchy. If a virtual parents exists, it is chosen over the actual parent\n *\n * @returns true if the child can find the parent in its virtual hierarchy\n */ export function elementContains(parent, child) {\n if (!parent || !child) {\n return false;\n }\n if (parent === child) {\n return true;\n } else {\n // Tracks references of nodes that have been visited to prevent infinite loops\n const set = new WeakSet();\n while(child){\n const nextParent = getParent(child, {\n skipVirtual: set.has(child)\n });\n set.add(child);\n if (nextParent === parent) {\n return true;\n }\n child = nextParent;\n }\n }\n return false;\n}\n"],"names":["elementContains","parent","child","set","WeakSet","nextParent","getParent","skipVirtual","has","add"],"mappings":";;;;+BAMoBA;;aAAAA;;2BANM;AAMf,SAASA,gBAAgBC,MAAM,EAAEC,KAAK,EAAE;IAC/C,IAAI,CAACD,UAAU,CAACC,OAAO;QACnB,OAAO,KAAK;IAChB,CAAC;IACD,IAAID,WAAWC,OAAO;QAClB,OAAO,IAAI;IACf,OAAO;QACH,8EAA8E;QAC9E,MAAMC,MAAM,IAAIC;QAChB,MAAMF,MAAM;YACR,MAAMG,aAAaC,IAAAA,oBAAS,EAACJ,OAAO;gBAChCK,aAAaJ,IAAIK,GAAG,CAACN;YACzB;YACAC,IAAIM,GAAG,CAACP;YACR,IAAIG,eAAeJ,QAAQ;gBACvB,OAAO,IAAI;YACf,CAAC;YACDC,QAAQG;QACZ;IACJ,CAAC;IACD,OAAO,KAAK;AAChB"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["getParent.js"],"sourcesContent":["import { isVirtualElement } from './isVirtualElement';\n/**\n * Gets the virtual parent given the child element, if it exists.\n */ function getVirtualParent(child) {\n return isVirtualElement(child) ? child._virtual.parent || null : null;\n}\n/**\n * Gets the element which is the parent of a given element.\n * This method prefers the virtual parent over real DOM parent when present.\n */ export function getParent(child, options = {}) {\n if (!child) {\n return null;\n }\n if (!options.skipVirtual) {\n const virtualParent = getVirtualParent(child);\n if (virtualParent) {\n return virtualParent;\n }\n }\n return (child === null || child === void 0 ? void 0 : child.parentNode) || null;\n}\n"],"names":["getParent","getVirtualParent","child","isVirtualElement","_virtual","parent","options","skipVirtual","virtualParent","parentNode"],"mappings":";;;;+BASoBA;;aAAAA;;kCATa;AACjC;;CAEC,GAAG,SAASC,iBAAiBC,KAAK,EAAE;IACjC,OAAOC,IAAAA,kCAAgB,EAACD,SAASA,MAAME,QAAQ,CAACC,MAAM,IAAI,IAAI,GAAG,IAAI;AACzE;AAIW,SAASL,UAAUE,KAAK,EAAEI,UAAU,CAAC,CAAC,EAAE;IAC/C,IAAI,CAACJ,OAAO;QACR,OAAO,IAAI;IACf,CAAC;IACD,IAAI,CAACI,QAAQC,WAAW,EAAE;QACtB,MAAMC,gBAAgBP,iBAAiBC;QACvC,IAAIM,eAAe;YACf,OAAOA;QACX,CAAC;IACL,CAAC;IACD,OAAO,AAACN,CAAAA,UAAU,IAAI,IAAIA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMO,UAAU,AAAD,KAAM,IAAI;AACnF"}
|
@@ -5,6 +5,3 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
|
6
6
|
_exportStar(require("./elementContains"), exports);
|
7
7
|
_exportStar(require("./setVirtualParent"), exports);
|
8
|
-
//# sourceMappingURL=index.js.map
|
9
|
-
|
10
|
-
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './elementContains';\nexport * from './setVirtualParent';\n"],"names":[],"mappings":";;;;;oBAAc;oBACA"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["isVirtualElement.js"],"sourcesContent":["/**\n * Determines whether or not an element has the virtual hierarchy extension.\n */ export function isVirtualElement(element) {\n return element && !!element._virtual;\n}\n"],"names":["isVirtualElement","element","_virtual"],"mappings":"AAAA;;CAEC;;;;+BAAmBA;;aAAAA;;AAAT,SAASA,iBAAiBC,OAAO,EAAE;IAC1C,OAAOA,WAAW,CAAC,CAACA,QAAQC,QAAQ;AACxC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"sources":["setVirtualParent.js"],"sourcesContent":["/**\n * Sets the virtual parent of an element.\n *\n * @param child - Theme element to set the virtual parent\n * @param parent - The virtual parent, use `undefined` to remove a virtual parent relationship\n */ export function setVirtualParent(child, parent) {\n if (!child) {\n return;\n }\n const virtualChild = child;\n if (!virtualChild._virtual) {\n virtualChild._virtual = {};\n }\n virtualChild._virtual.parent = parent;\n}\n"],"names":["setVirtualParent","child","parent","virtualChild","_virtual"],"mappings":"AAAA;;;;;CAKC;;;;+BAAmBA;;aAAAA;;AAAT,SAASA,iBAAiBC,KAAK,EAAEC,MAAM,EAAE;IAChD,IAAI,CAACD,OAAO;QACR;IACJ,CAAC;IACD,MAAME,eAAeF;IACrB,IAAI,CAACE,aAAaC,QAAQ,EAAE;QACxBD,aAAaC,QAAQ,GAAG,CAAC;IAC7B,CAAC;IACDD,aAAaC,QAAQ,CAACF,MAAM,GAAGA;AACnC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":[
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":""}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-portal",
|
3
|
-
"version": "9.2.
|
3
|
+
"version": "9.2.12",
|
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",
|
@@ -33,9 +33,9 @@
|
|
33
33
|
},
|
34
34
|
"dependencies": {
|
35
35
|
"@fluentui/react-shared-contexts": "^9.5.0",
|
36
|
-
"@fluentui/react-tabster": "^9.7.
|
37
|
-
"@fluentui/react-utilities": "^9.9.
|
38
|
-
"@griffel/react": "^1.5.
|
36
|
+
"@fluentui/react-tabster": "^9.7.5",
|
37
|
+
"@fluentui/react-utilities": "^9.9.2",
|
38
|
+
"@griffel/react": "^1.5.7",
|
39
39
|
"@swc/helpers": "^0.4.14",
|
40
40
|
"use-disposable": "^1.0.1"
|
41
41
|
},
|