@fluentui/react-portal 9.1.1 → 9.1.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.json +37 -1
- package/CHANGELOG.md +21 -2
- package/lib/components/Portal/usePortal.js +5 -0
- package/lib/components/Portal/usePortal.js.map +1 -1
- package/lib/components/Portal/usePortalMountNode.js +33 -20
- package/lib/components/Portal/usePortalMountNode.js.map +1 -1
- package/lib-amd/components/Portal/usePortal.js +5 -0
- package/lib-amd/components/Portal/usePortal.js.map +1 -1
- package/lib-amd/components/Portal/usePortalMountNode.js +36 -23
- package/lib-amd/components/Portal/usePortalMountNode.js.map +1 -1
- package/lib-commonjs/components/Portal/usePortal.js +5 -0
- package/lib-commonjs/components/Portal/usePortal.js.map +1 -1
- package/lib-commonjs/components/Portal/usePortalMountNode.js +33 -20
- package/lib-commonjs/components/Portal/usePortalMountNode.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,43 @@
|
|
|
2
2
|
"name": "@fluentui/react-portal",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Mon,
|
|
5
|
+
"date": "Mon, 23 Jan 2023 16:41:43 GMT",
|
|
6
|
+
"tag": "@fluentui/react-portal_v9.1.3",
|
|
7
|
+
"version": "9.1.3",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "arthurd@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-portal",
|
|
13
|
+
"commit": "f6440277702514c86bd2a640a7706940ffcbe7d0",
|
|
14
|
+
"comment": "clean up parent reference to avoid memory leaks"
|
|
15
|
+
}
|
|
16
|
+
]
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"date": "Wed, 18 Jan 2023 16:32:55 GMT",
|
|
21
|
+
"tag": "@fluentui/react-portal_v9.1.2",
|
|
22
|
+
"version": "9.1.2",
|
|
23
|
+
"comments": {
|
|
24
|
+
"patch": [
|
|
25
|
+
{
|
|
26
|
+
"author": "lingfangao@hotmail.com",
|
|
27
|
+
"package": "@fluentui/react-portal",
|
|
28
|
+
"commit": "13cf1d07a6df4617106c731ba0379b6102a08104",
|
|
29
|
+
"comment": "fix: Insert css variables class at render time"
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"author": "beachball",
|
|
33
|
+
"package": "@fluentui/react-portal",
|
|
34
|
+
"comment": "Bump @fluentui/react-tabster to v9.4.0",
|
|
35
|
+
"commit": "13cf1d07a6df4617106c731ba0379b6102a08104"
|
|
36
|
+
}
|
|
37
|
+
]
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"date": "Mon, 16 Jan 2023 08:39:07 GMT",
|
|
6
42
|
"tag": "@fluentui/react-portal_v9.1.1",
|
|
7
43
|
"version": "9.1.1",
|
|
8
44
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,31 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-portal
|
|
2
2
|
|
|
3
|
-
This log was last generated on Mon,
|
|
3
|
+
This log was last generated on Mon, 23 Jan 2023 16:41:43 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.1.3)
|
|
8
|
+
|
|
9
|
+
Mon, 23 Jan 2023 16:41:43 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.1.2..@fluentui/react-portal_v9.1.3)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- clean up parent reference to avoid memory leaks ([PR #26435](https://github.com/microsoft/fluentui/pull/26435) by arthurd@microsoft.com)
|
|
15
|
+
|
|
16
|
+
## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.1.2)
|
|
17
|
+
|
|
18
|
+
Wed, 18 Jan 2023 16:32:55 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.1.1..@fluentui/react-portal_v9.1.2)
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- fix: Insert css variables class at render time ([PR #26377](https://github.com/microsoft/fluentui/pull/26377) by lingfangao@hotmail.com)
|
|
24
|
+
- Bump @fluentui/react-tabster to v9.4.0 ([PR #26377](https://github.com/microsoft/fluentui/pull/26377) by beachball)
|
|
25
|
+
|
|
7
26
|
## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.1.1)
|
|
8
27
|
|
|
9
|
-
Mon, 16 Jan 2023 08:
|
|
28
|
+
Mon, 16 Jan 2023 08:39:07 GMT
|
|
10
29
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.1.0..@fluentui/react-portal_v9.1.1)
|
|
11
30
|
|
|
12
31
|
### Patches
|
|
@@ -26,6 +26,11 @@ export const usePortal_unstable = props => {
|
|
|
26
26
|
if (state.virtualParentRootRef.current && state.mountNode) {
|
|
27
27
|
setVirtualParent(state.mountNode, state.virtualParentRootRef.current);
|
|
28
28
|
}
|
|
29
|
+
return () => {
|
|
30
|
+
if (state.mountNode) {
|
|
31
|
+
setVirtualParent(state.mountNode, undefined);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
29
34
|
}, [state.virtualParentRootRef, state.mountNode]);
|
|
30
35
|
return state;
|
|
31
36
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB,QAAQ,sBAAsB;AACzD,SAASC,gBAAgB,QAAQ,2BAA2B;AAG5D;;;;;;;AAOA,OAAO,MAAMC,kBAAkB,GAAIC,KAAkB,IAAiB;EACpE,MAAM;IAAEC,QAAQ;IAAEC;EAAS,CAAE,GAAGF,KAAK;EAErC,MAAMG,oBAAoB,GAAGP,KAAK,CAACQ,MAAM,CAAkB,IAAI,CAAC;EAChE,MAAMC,iBAAiB,GAAGR,kBAAkB,CAAC;IAAES,QAAQ,EAAE,CAAC,CAACJ;EAAS,CAAE,CAAC;EAEvE,MAAMK,KAAK,GAAgB;IACzBN,QAAQ;IACRC,SAAS,EAAEA,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIG,iBAAiB;IACzCF;GACD;EAEDP,KAAK,CAACY,SAAS,CAAC,MAAK;IACnB,IAAID,KAAK,CAACJ,oBAAoB,CAACM,OAAO,IAAIF,KAAK,CAACL,SAAS,EAAE;MACzDJ,gBAAgB,CAACS,KAAK,CAACL,SAAS,EAAEK,KAAK,CAACJ,oBAAoB,CAACM,OAAO,CAAC;;
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,kBAAkB,QAAQ,sBAAsB;AACzD,SAASC,gBAAgB,QAAQ,2BAA2B;AAG5D;;;;;;;AAOA,OAAO,MAAMC,kBAAkB,GAAIC,KAAkB,IAAiB;EACpE,MAAM;IAAEC,QAAQ;IAAEC;EAAS,CAAE,GAAGF,KAAK;EAErC,MAAMG,oBAAoB,GAAGP,KAAK,CAACQ,MAAM,CAAkB,IAAI,CAAC;EAChE,MAAMC,iBAAiB,GAAGR,kBAAkB,CAAC;IAAES,QAAQ,EAAE,CAAC,CAACJ;EAAS,CAAE,CAAC;EAEvE,MAAMK,KAAK,GAAgB;IACzBN,QAAQ;IACRC,SAAS,EAAEA,SAAS,aAATA,SAAS,cAATA,SAAS,GAAIG,iBAAiB;IACzCF;GACD;EAEDP,KAAK,CAACY,SAAS,CAAC,MAAK;IACnB,IAAID,KAAK,CAACJ,oBAAoB,CAACM,OAAO,IAAIF,KAAK,CAACL,SAAS,EAAE;MACzDJ,gBAAgB,CAACS,KAAK,CAACL,SAAS,EAAEK,KAAK,CAACJ,oBAAoB,CAACM,OAAO,CAAC;;IAEvE,OAAO,MAAK;MACV,IAAIF,KAAK,CAACL,SAAS,EAAE;QAACJ,gBAAgB,CAACS,KAAK,CAACL,SAAS,EAAEQ,SAAS,CAAC;;IACpE,CAAC;EACH,CAAC,EAAE,CAACH,KAAK,CAACJ,oBAAoB,EAAEI,KAAK,CAACL,SAAS,CAAC,CAAC;EAEjD,OAAOK,KAAK;AACd,CAAC","names":["React","usePortalMountNode","setVirtualParent","usePortal_unstable","props","children","mountNode","virtualParentRootRef","useRef","fallbackMountNode","disabled","state","useEffect","current","undefined"],"sourceRoot":"../src/","sources":["packages/react-components/react-portal/src/components/Portal/usePortal.ts"],"sourcesContent":["import * as React from 'react';\nimport { usePortalMountNode } from './usePortalMountNode';\nimport { setVirtualParent } from '../../virtualParent/index';\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 { children, mountNode } = props;\n\n const virtualParentRootRef = React.useRef<HTMLSpanElement>(null);\n const fallbackMountNode = usePortalMountNode({ disabled: !!mountNode });\n\n const state: PortalState = {\n children,\n mountNode: mountNode ?? fallbackMountNode,\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) {setVirtualParent(state.mountNode, undefined);}\n };\n }, [state.virtualParentRootRef, state.mountNode]);\n\n return state;\n};\n"]}
|
|
@@ -3,9 +3,7 @@ import { useThemeClassName_unstable as useThemeClassName, useFluent_unstable as
|
|
|
3
3
|
import { __styles, mergeClasses } from '@griffel/react';
|
|
4
4
|
import { useFocusVisible } from '@fluentui/react-tabster';
|
|
5
5
|
import { useDisposable } from 'use-disposable';
|
|
6
|
-
|
|
7
|
-
// String concatenation is used to prevent bundlers to complain with older versions of React
|
|
8
|
-
const useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : useIsomorphicLayoutEffect;
|
|
6
|
+
const useInsertionEffect = React['useInsertion' + 'Effect'];
|
|
9
7
|
const useStyles = /*#__PURE__*/__styles({
|
|
10
8
|
root: {
|
|
11
9
|
qhf8xq: "f10pi13n",
|
|
@@ -14,6 +12,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
14
12
|
}, {
|
|
15
13
|
d: [".f10pi13n{position:relative;}", ".f494woh{z-index:1000000;}"]
|
|
16
14
|
});
|
|
15
|
+
const reactMajorVersion = /*#__PURE__*/Number( /*#__PURE__*/React.version.split('.')[0]);
|
|
17
16
|
/**
|
|
18
17
|
* Creates a new element on a document.body to mount portals
|
|
19
18
|
*/
|
|
@@ -34,23 +33,37 @@ export const usePortalMountNode = options => {
|
|
|
34
33
|
targetDocument.body.appendChild(newElement);
|
|
35
34
|
return [newElement, () => newElement.remove()];
|
|
36
35
|
}, [targetDocument]);
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
36
|
+
if (reactMajorVersion >= 18) {
|
|
37
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
38
|
+
useInsertionEffect(() => {
|
|
39
|
+
if (!element) {
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
const classesToApply = className.split(' ').filter(Boolean);
|
|
43
|
+
element.classList.add(...classesToApply);
|
|
44
|
+
element.setAttribute('dir', dir);
|
|
45
|
+
focusVisibleRef.current = element;
|
|
46
|
+
return () => {
|
|
47
|
+
element.classList.remove(...classesToApply);
|
|
48
|
+
element.removeAttribute('dir');
|
|
49
|
+
};
|
|
50
|
+
}, [className, dir, element, focusVisibleRef]);
|
|
51
|
+
} else {
|
|
52
|
+
// This useMemo call is intentional for React 17
|
|
53
|
+
// We don't want to re-create the portal element when its attributes change.
|
|
54
|
+
// This also should not be done in an effect because, changing the value of css variables
|
|
55
|
+
// after initial mount can trigger interesting CSS side effects like transitions.
|
|
56
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
57
|
+
React.useMemo(() => {
|
|
58
|
+
if (!element) {
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
// Force replace all classes
|
|
62
|
+
element.className = className;
|
|
63
|
+
element.setAttribute('dir', dir);
|
|
64
|
+
focusVisibleRef.current = element;
|
|
65
|
+
}, [className, dir, element, focusVisibleRef]);
|
|
66
|
+
}
|
|
54
67
|
return element;
|
|
55
68
|
};
|
|
56
69
|
//# sourceMappingURL=usePortalMountNode.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,0BAA0B,IAAIC,iBAAiB,EAC/CC,kBAAkB,IAAIC,SAAS,QAC1B,iCAAiC;AACxC,mBAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,eAAe,QAAQ,yBAAyB;AACzD,SAASC,aAAa,QAAQ,gBAAgB;
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,0BAA0B,IAAIC,iBAAiB,EAC/CC,kBAAkB,IAAIC,SAAS,QAC1B,iCAAiC;AACxC,mBAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,eAAe,QAAQ,yBAAyB;AACzD,SAASC,aAAa,QAAQ,gBAAgB;AAE9C,MAAMC,kBAAkB,GAAIR,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAiC;AAStG,MAAMS,SAAS,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAKhB;AAEF,MAAMC,iBAAiB,gBAAGC,MAAM,CAAC,mBAAK,CAACC,OAAO,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AAE7D;;;AAGA,OAAO,MAAMC,kBAAkB,GAAIC,OAAkC,IAAwB;EAC3F,MAAM;IAAEC,cAAc;IAAEC;EAAG,CAAE,GAAGb,SAAS,EAAE;EAC3C,MAAMc,eAAe,GAAGZ,eAAe,EAAgE;EACvG,MAAMa,OAAO,GAAGV,SAAS,EAAE;EAC3B,MAAMW,cAAc,GAAGlB,iBAAiB,EAAE;EAE1C,MAAMmB,SAAS,GAAGhB,YAAY,CAACe,cAAc,EAAED,OAAO,CAACG,IAAI,CAAC;EAE5D,MAAMC,OAAO,GAAGhB,aAAa,CAAC,MAAK;IACjC,IAAIS,cAAc,KAAKQ,SAAS,IAAIT,OAAO,CAACU,QAAQ,EAAE;MACpD,OAAO,CAAC,IAAI,EAAE,MAAM,IAAI,CAAC;;IAG3B,MAAMC,UAAU,GAAGV,cAAc,CAACW,aAAa,CAAC,KAAK,CAAC;IACtDX,cAAc,CAACY,IAAI,CAACC,WAAW,CAACH,UAAU,CAAC;IAC3C,OAAO,CAACA,UAAU,EAAE,MAAMA,UAAU,CAACI,MAAM,EAAE,CAAC;EAChD,CAAC,EAAE,CAACd,cAAc,CAAC,CAAC;EAEpB,IAAIN,iBAAiB,IAAI,EAAE,EAAE;IAC3B;IACAF,kBAAkB,CAAC,MAAK;MACtB,IAAI,CAACe,OAAO,EAAE;QACZ;;MAGF,MAAMQ,cAAc,GAAGV,SAAS,CAACR,KAAK,CAAC,GAAG,CAAC,CAACmB,MAAM,CAACC,OAAO,CAAC;MAE3DV,OAAO,CAACW,SAAS,CAACC,GAAG,CAAC,GAAGJ,cAAc,CAAC;MACxCR,OAAO,CAACa,YAAY,CAAC,KAAK,EAAEnB,GAAG,CAAC;MAChCC,eAAe,CAACmB,OAAO,GAAGd,OAAO;MAEjC,OAAO,MAAK;QACVA,OAAO,CAACW,SAAS,CAACJ,MAAM,CAAC,GAAGC,cAAc,CAAC;QAC3CR,OAAO,CAACe,eAAe,CAAC,KAAK,CAAC;MAChC,CAAC;IACH,CAAC,EAAE,CAACjB,SAAS,EAAEJ,GAAG,EAAEM,OAAO,EAAEL,eAAe,CAAC,CAAC;GAC/C,MAAM;IACL;IACA;IACA;IACA;IACA;IACAlB,KAAK,CAACuC,OAAO,CAAC,MAAK;MACjB,IAAI,CAAChB,OAAO,EAAE;QACZ;;MAGF;MACAA,OAAO,CAACF,SAAS,GAAGA,SAAS;MAC7BE,OAAO,CAACa,YAAY,CAAC,KAAK,EAAEnB,GAAG,CAAC;MAChCC,eAAe,CAACmB,OAAO,GAAGd,OAAO;IACnC,CAAC,EAAE,CAACF,SAAS,EAAEJ,GAAG,EAAEM,OAAO,EAAEL,eAAe,CAAC,CAAC;;EAGhD,OAAOK,OAAO;AAChB,CAAC","names":["React","useThemeClassName_unstable","useThemeClassName","useFluent_unstable","useFluent","mergeClasses","useFocusVisible","useDisposable","useInsertionEffect","useStyles","reactMajorVersion","Number","version","split","usePortalMountNode","options","targetDocument","dir","focusVisibleRef","classes","themeClassName","className","root","element","undefined","disabled","newElement","createElement","body","appendChild","remove","classesToApply","filter","Boolean","classList","add","setAttribute","current","removeAttribute","useMemo"],"sourceRoot":"../src/","sources":["packages/react-components/react-portal/src/components/Portal/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 { makeStyles, mergeClasses } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\nimport { useDisposable } from 'use-disposable';\n\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect'] as typeof React.useLayoutEffect;\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\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n zIndex: 1000000,\n },\n});\n\nconst reactMajorVersion = Number(React.version.split('.')[0]);\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 = useStyles();\n const themeClassName = useThemeClassName();\n\n const className = mergeClasses(themeClassName, classes.root);\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 (reactMajorVersion >= 18) {\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"]}
|
|
@@ -22,6 +22,11 @@ define(["require", "exports", "react", "./usePortalMountNode", "../../virtualPar
|
|
|
22
22
|
if (state.virtualParentRootRef.current && state.mountNode) {
|
|
23
23
|
index_1.setVirtualParent(state.mountNode, state.virtualParentRootRef.current);
|
|
24
24
|
}
|
|
25
|
+
return function () {
|
|
26
|
+
if (state.mountNode) {
|
|
27
|
+
index_1.setVirtualParent(state.mountNode, undefined);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
25
30
|
}, [state.virtualParentRootRef, state.mountNode]);
|
|
26
31
|
return state;
|
|
27
32
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePortal.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-portal/src/components/Portal/usePortal.ts"],"names":[],"mappings":";;;;IAKA;;;;;;OAMG;IACI,IAAM,kBAAkB,GAAG,UAAC,KAAkB;QAC3C,IAAA,QAAQ,GAAgB,KAAK,SAArB,EAAE,SAAS,GAAK,KAAK,UAAV,CAAW;QAEtC,IAAM,oBAAoB,GAAG,KAAK,CAAC,MAAM,CAAkB,IAAI,CAAC,CAAC;QACjE,IAAM,iBAAiB,GAAG,uCAAkB,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC;QAExE,IAAM,KAAK,GAAgB;YACzB,QAAQ,UAAA;YACR,SAAS,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,iBAAiB;YACzC,oBAAoB,sBAAA;SACrB,CAAC;QAEF,KAAK,CAAC,SAAS,CAAC;YACd,IAAI,KAAK,CAAC,oBAAoB,CAAC,OAAO,IAAI,KAAK,CAAC,SAAS,EAAE;gBACzD,wBAAgB,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC;aACvE;
|
|
1
|
+
{"version":3,"file":"usePortal.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-portal/src/components/Portal/usePortal.ts"],"names":[],"mappings":";;;;IAKA;;;;;;OAMG;IACI,IAAM,kBAAkB,GAAG,UAAC,KAAkB;QAC3C,IAAA,QAAQ,GAAgB,KAAK,SAArB,EAAE,SAAS,GAAK,KAAK,UAAV,CAAW;QAEtC,IAAM,oBAAoB,GAAG,KAAK,CAAC,MAAM,CAAkB,IAAI,CAAC,CAAC;QACjE,IAAM,iBAAiB,GAAG,uCAAkB,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,SAAS,EAAE,CAAC,CAAC;QAExE,IAAM,KAAK,GAAgB;YACzB,QAAQ,UAAA;YACR,SAAS,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,iBAAiB;YACzC,oBAAoB,sBAAA;SACrB,CAAC;QAEF,KAAK,CAAC,SAAS,CAAC;YACd,IAAI,KAAK,CAAC,oBAAoB,CAAC,OAAO,IAAI,KAAK,CAAC,SAAS,EAAE;gBACzD,wBAAgB,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC;aACvE;YACD,OAAO;gBACL,IAAI,KAAK,CAAC,SAAS,EAAE;oBAAC,wBAAgB,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;iBAAC;YACtE,CAAC,CAAC;QACJ,CAAC,EAAE,CAAC,KAAK,CAAC,oBAAoB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;QAElD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAtBW,QAAA,kBAAkB,sBAsB7B","sourcesContent":["import * as React from 'react';\nimport { usePortalMountNode } from './usePortalMountNode';\nimport { setVirtualParent } from '../../virtualParent/index';\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 { children, mountNode } = props;\n\n const virtualParentRootRef = React.useRef<HTMLSpanElement>(null);\n const fallbackMountNode = usePortalMountNode({ disabled: !!mountNode });\n\n const state: PortalState = {\n children,\n mountNode: mountNode ?? fallbackMountNode,\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) {setVirtualParent(state.mountNode, undefined);}\n };\n }, [state.virtualParentRootRef, state.mountNode]);\n\n return state;\n};\n"]}
|
|
@@ -1,17 +1,15 @@
|
|
|
1
|
-
define(["require", "exports", "react", "@fluentui/react-shared-contexts", "@griffel/react", "@fluentui/react-tabster", "use-disposable"
|
|
1
|
+
define(["require", "exports", "react", "@fluentui/react-shared-contexts", "@griffel/react", "@fluentui/react-tabster", "use-disposable"], function (require, exports, React, react_shared_contexts_1, react_1, react_tabster_1, use_disposable_1) {
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.usePortalMountNode = void 0;
|
|
5
|
-
|
|
6
|
-
var useInsertionEffect = React['useInsertion' + 'Effect']
|
|
7
|
-
? React['useInsertion' + 'Effect']
|
|
8
|
-
: react_utilities_1.useIsomorphicLayoutEffect;
|
|
5
|
+
var useInsertionEffect = React['useInsertion' + 'Effect'];
|
|
9
6
|
var useStyles = react_1.makeStyles({
|
|
10
7
|
root: {
|
|
11
8
|
position: 'relative',
|
|
12
9
|
zIndex: 1000000,
|
|
13
10
|
},
|
|
14
11
|
});
|
|
12
|
+
var reactMajorVersion = Number(React.version.split('.')[0]);
|
|
15
13
|
/**
|
|
16
14
|
* Creates a new element on a document.body to mount portals
|
|
17
15
|
*/
|
|
@@ -29,25 +27,40 @@ define(["require", "exports", "react", "@fluentui/react-shared-contexts", "@grif
|
|
|
29
27
|
targetDocument.body.appendChild(newElement);
|
|
30
28
|
return [newElement, function () { return newElement.remove(); }];
|
|
31
29
|
}, [targetDocument]);
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
// after initial mount can trigger interesting CSS side effects like transitions.
|
|
36
|
-
useInsertionEffect(function () {
|
|
37
|
-
var _a;
|
|
38
|
-
if (!element) {
|
|
39
|
-
return;
|
|
40
|
-
}
|
|
41
|
-
var classesToApply = className.split(' ').filter(Boolean);
|
|
42
|
-
(_a = element.classList).add.apply(_a, classesToApply);
|
|
43
|
-
element.setAttribute('dir', dir);
|
|
44
|
-
focusVisibleRef.current = element;
|
|
45
|
-
return function () {
|
|
30
|
+
if (reactMajorVersion >= 18) {
|
|
31
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
32
|
+
useInsertionEffect(function () {
|
|
46
33
|
var _a;
|
|
47
|
-
(
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
34
|
+
if (!element) {
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
var classesToApply = className.split(' ').filter(Boolean);
|
|
38
|
+
(_a = element.classList).add.apply(_a, classesToApply);
|
|
39
|
+
element.setAttribute('dir', dir);
|
|
40
|
+
focusVisibleRef.current = element;
|
|
41
|
+
return function () {
|
|
42
|
+
var _a;
|
|
43
|
+
(_a = element.classList).remove.apply(_a, classesToApply);
|
|
44
|
+
element.removeAttribute('dir');
|
|
45
|
+
};
|
|
46
|
+
}, [className, dir, element, focusVisibleRef]);
|
|
47
|
+
}
|
|
48
|
+
else {
|
|
49
|
+
// This useMemo call is intentional for React 17
|
|
50
|
+
// We don't want to re-create the portal element when its attributes change.
|
|
51
|
+
// This also should not be done in an effect because, changing the value of css variables
|
|
52
|
+
// after initial mount can trigger interesting CSS side effects like transitions.
|
|
53
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
54
|
+
React.useMemo(function () {
|
|
55
|
+
if (!element) {
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
// Force replace all classes
|
|
59
|
+
element.className = className;
|
|
60
|
+
element.setAttribute('dir', dir);
|
|
61
|
+
focusVisibleRef.current = element;
|
|
62
|
+
}, [className, dir, element, focusVisibleRef]);
|
|
63
|
+
}
|
|
51
64
|
return element;
|
|
52
65
|
};
|
|
53
66
|
exports.usePortalMountNode = usePortalMountNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePortalMountNode.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-portal/src/components/Portal/usePortalMountNode.ts"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"usePortalMountNode.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-portal/src/components/Portal/usePortalMountNode.ts"],"names":[],"mappings":";;;;IASA,IAAM,kBAAkB,GAAI,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAiC,CAAC;IASvG,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,OAAO;SAChB;KACF,CAAC,CAAC;IAEH,IAAM,iBAAiB,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE9D;;OAEG;IACI,IAAM,kBAAkB,GAAG,UAAC,OAAkC;QAC7D,IAAA,KAA0B,0CAAS,EAAE,EAAnC,cAAc,oBAAA,EAAE,GAAG,SAAgB,CAAC;QAC5C,IAAM,eAAe,GAAG,+BAAe,EAAgE,CAAC;QACxG,IAAM,OAAO,GAAG,SAAS,EAAE,CAAC;QAC5B,IAAM,cAAc,GAAG,kDAAiB,EAAE,CAAC;QAE3C,IAAM,SAAS,GAAG,oBAAY,CAAC,cAAc,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;QAE7D,IAAM,OAAO,GAAG,8BAAa,CAAC;YAC5B,IAAI,cAAc,KAAK,SAAS,IAAI,OAAO,CAAC,QAAQ,EAAE;gBACpD,OAAO,CAAC,IAAI,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI,CAAC,CAAC;aAC3B;YAED,IAAM,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACvD,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;YAC5C,OAAO,CAAC,UAAU,EAAE,cAAM,OAAA,UAAU,CAAC,MAAM,EAAE,EAAnB,CAAmB,CAAC,CAAC;QACjD,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;QAErB,IAAI,iBAAiB,IAAI,EAAE,EAAE;YAC3B,sDAAsD;YACtD,kBAAkB,CAAC;;gBACjB,IAAI,CAAC,OAAO,EAAE;oBACZ,OAAO;iBACR;gBAED,IAAM,cAAc,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;gBAE5D,CAAA,KAAA,OAAO,CAAC,SAAS,CAAA,CAAC,GAAG,WAAI,cAAc,EAAE;gBACzC,OAAO,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;gBACjC,eAAe,CAAC,OAAO,GAAG,OAAO,CAAC;gBAElC,OAAO;;oBACL,CAAA,KAAA,OAAO,CAAC,SAAS,CAAA,CAAC,MAAM,WAAI,cAAc,EAAE;oBAC5C,OAAO,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;gBACjC,CAAC,CAAC;YACJ,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC;SAChD;aAAM;YACL,gDAAgD;YAChD,4EAA4E;YAC5E,yFAAyF;YACzF,iFAAiF;YACjF,sDAAsD;YACtD,KAAK,CAAC,OAAO,CAAC;gBACZ,IAAI,CAAC,OAAO,EAAE;oBACZ,OAAO;iBACR;gBAED,4BAA4B;gBAC5B,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;gBAC9B,OAAO,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;gBACjC,eAAe,CAAC,OAAO,GAAG,OAAO,CAAC;YACpC,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC;SAChD;QAED,OAAO,OAAO,CAAC;IACjB,CAAC,CAAC;IAvDW,QAAA,kBAAkB,sBAuD7B","sourcesContent":["import * as React from 'react';\nimport {\n useThemeClassName_unstable as useThemeClassName,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\nimport { useDisposable } from 'use-disposable';\n\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect'] as typeof React.useLayoutEffect;\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\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n zIndex: 1000000,\n },\n});\n\nconst reactMajorVersion = Number(React.version.split('.')[0]);\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 = useStyles();\n const themeClassName = useThemeClassName();\n\n const className = mergeClasses(themeClassName, classes.root);\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 (reactMajorVersion >= 18) {\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"]}
|
|
@@ -32,6 +32,11 @@ const usePortal_unstable = props => {
|
|
|
32
32
|
if (state.virtualParentRootRef.current && state.mountNode) {
|
|
33
33
|
index_1.setVirtualParent(state.mountNode, state.virtualParentRootRef.current);
|
|
34
34
|
}
|
|
35
|
+
return () => {
|
|
36
|
+
if (state.mountNode) {
|
|
37
|
+
index_1.setVirtualParent(state.mountNode, undefined);
|
|
38
|
+
}
|
|
39
|
+
};
|
|
35
40
|
}, [state.virtualParentRootRef, state.mountNode]);
|
|
36
41
|
return state;
|
|
37
42
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAGA;;;;;;;AAOO,MAAMA,kBAAkB,GAAIC,KAAkB,IAAiB;EACpE,MAAM;IAAEC,QAAQ;IAAEC;EAAS,CAAE,GAAGF,KAAK;EAErC,MAAMG,oBAAoB,GAAGC,KAAK,CAACC,MAAM,CAAkB,IAAI,CAAC;EAChE,MAAMC,iBAAiB,GAAGC,uCAAkB,CAAC;IAAEC,QAAQ,EAAE,CAAC,CAACN;EAAS,CAAE,CAAC;EAEvE,MAAMO,KAAK,GAAgB;IACzBR,QAAQ;IACRC,SAAS,EAAEA,SAAS,aAATA,SAAS,cAATA,SAAS,GAAII,iBAAiB;IACzCH;GACD;EAEDC,KAAK,CAACM,SAAS,CAAC,MAAK;IACnB,IAAID,KAAK,CAACN,oBAAoB,CAACQ,OAAO,IAAIF,KAAK,CAACP,SAAS,EAAE;MACzDU,wBAAgB,CAACH,KAAK,CAACP,SAAS,EAAEO,KAAK,CAACN,oBAAoB,CAACQ,OAAO,CAAC;;
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAGA;;;;;;;AAOO,MAAMA,kBAAkB,GAAIC,KAAkB,IAAiB;EACpE,MAAM;IAAEC,QAAQ;IAAEC;EAAS,CAAE,GAAGF,KAAK;EAErC,MAAMG,oBAAoB,GAAGC,KAAK,CAACC,MAAM,CAAkB,IAAI,CAAC;EAChE,MAAMC,iBAAiB,GAAGC,uCAAkB,CAAC;IAAEC,QAAQ,EAAE,CAAC,CAACN;EAAS,CAAE,CAAC;EAEvE,MAAMO,KAAK,GAAgB;IACzBR,QAAQ;IACRC,SAAS,EAAEA,SAAS,aAATA,SAAS,cAATA,SAAS,GAAII,iBAAiB;IACzCH;GACD;EAEDC,KAAK,CAACM,SAAS,CAAC,MAAK;IACnB,IAAID,KAAK,CAACN,oBAAoB,CAACQ,OAAO,IAAIF,KAAK,CAACP,SAAS,EAAE;MACzDU,wBAAgB,CAACH,KAAK,CAACP,SAAS,EAAEO,KAAK,CAACN,oBAAoB,CAACQ,OAAO,CAAC;;IAEvE,OAAO,MAAK;MACV,IAAIF,KAAK,CAACP,SAAS,EAAE;QAACU,wBAAgB,CAACH,KAAK,CAACP,SAAS,EAAEW,SAAS,CAAC;;IACpE,CAAC;EACH,CAAC,EAAE,CAACJ,KAAK,CAACN,oBAAoB,EAAEM,KAAK,CAACP,SAAS,CAAC,CAAC;EAEjD,OAAOO,KAAK;AACd,CAAC;AAtBYK,0BAAkB","names":["usePortal_unstable","props","children","mountNode","virtualParentRootRef","React","useRef","fallbackMountNode","usePortalMountNode_1","disabled","state","useEffect","current","index_1","undefined","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-portal/src/components/Portal/usePortal.ts"],"sourcesContent":["import * as React from 'react';\nimport { usePortalMountNode } from './usePortalMountNode';\nimport { setVirtualParent } from '../../virtualParent/index';\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 { children, mountNode } = props;\n\n const virtualParentRootRef = React.useRef<HTMLSpanElement>(null);\n const fallbackMountNode = usePortalMountNode({ disabled: !!mountNode });\n\n const state: PortalState = {\n children,\n mountNode: mountNode ?? fallbackMountNode,\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) {setVirtualParent(state.mountNode, undefined);}\n };\n }, [state.virtualParentRootRef, state.mountNode]);\n\n return state;\n};\n"]}
|
|
@@ -9,9 +9,7 @@ const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-con
|
|
|
9
9
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
10
10
|
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
11
11
|
const use_disposable_1 = /*#__PURE__*/require("use-disposable");
|
|
12
|
-
const
|
|
13
|
-
// String concatenation is used to prevent bundlers to complain with older versions of React
|
|
14
|
-
const useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : react_utilities_1.useIsomorphicLayoutEffect;
|
|
12
|
+
const useInsertionEffect = React['useInsertion' + 'Effect'];
|
|
15
13
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
16
14
|
root: {
|
|
17
15
|
qhf8xq: "f10pi13n",
|
|
@@ -20,6 +18,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
20
18
|
}, {
|
|
21
19
|
d: [".f10pi13n{position:relative;}", ".f494woh{z-index:1000000;}"]
|
|
22
20
|
});
|
|
21
|
+
const reactMajorVersion = /*#__PURE__*/Number( /*#__PURE__*/React.version.split('.')[0]);
|
|
23
22
|
/**
|
|
24
23
|
* Creates a new element on a document.body to mount portals
|
|
25
24
|
*/
|
|
@@ -40,23 +39,37 @@ const usePortalMountNode = options => {
|
|
|
40
39
|
targetDocument.body.appendChild(newElement);
|
|
41
40
|
return [newElement, () => newElement.remove()];
|
|
42
41
|
}, [targetDocument]);
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
42
|
+
if (reactMajorVersion >= 18) {
|
|
43
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
44
|
+
useInsertionEffect(() => {
|
|
45
|
+
if (!element) {
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
const classesToApply = className.split(' ').filter(Boolean);
|
|
49
|
+
element.classList.add(...classesToApply);
|
|
50
|
+
element.setAttribute('dir', dir);
|
|
51
|
+
focusVisibleRef.current = element;
|
|
52
|
+
return () => {
|
|
53
|
+
element.classList.remove(...classesToApply);
|
|
54
|
+
element.removeAttribute('dir');
|
|
55
|
+
};
|
|
56
|
+
}, [className, dir, element, focusVisibleRef]);
|
|
57
|
+
} else {
|
|
58
|
+
// This useMemo call is intentional for React 17
|
|
59
|
+
// We don't want to re-create the portal element when its attributes change.
|
|
60
|
+
// This also should not be done in an effect because, changing the value of css variables
|
|
61
|
+
// after initial mount can trigger interesting CSS side effects like transitions.
|
|
62
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
63
|
+
React.useMemo(() => {
|
|
64
|
+
if (!element) {
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
// Force replace all classes
|
|
68
|
+
element.className = className;
|
|
69
|
+
element.setAttribute('dir', dir);
|
|
70
|
+
focusVisibleRef.current = element;
|
|
71
|
+
}, [className, dir, element, focusVisibleRef]);
|
|
72
|
+
}
|
|
60
73
|
return element;
|
|
61
74
|
};
|
|
62
75
|
exports.usePortalMountNode = usePortalMountNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;AAIA;AACA;AACA;
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AAIA;AACA;AACA;AAEA,MAAMA,kBAAkB,GAAIC,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAiC;AAStG,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAK1B;AAEF,MAAMC,iBAAiB,gBAAGC,MAAM,CAAC,mBAAK,CAACC,OAAO,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AAE7D;;;AAGO,MAAMC,kBAAkB,GAAIC,OAAkC,IAAwB;EAC3F,MAAM;IAAEC,cAAc;IAAEC;EAAG,CAAE,GAAGC,0CAAS,EAAE;EAC3C,MAAMC,eAAe,GAAGC,+BAAe,EAAgE;EACvG,MAAMC,OAAO,GAAGb,SAAS,EAAE;EAC3B,MAAMc,cAAc,GAAGJ,kDAAiB,EAAE;EAE1C,MAAMK,SAAS,GAAGd,oBAAY,CAACa,cAAc,EAAED,OAAO,CAACG,IAAI,CAAC;EAE5D,MAAMC,OAAO,GAAGC,8BAAa,CAAC,MAAK;IACjC,IAAIV,cAAc,KAAKW,SAAS,IAAIZ,OAAO,CAACa,QAAQ,EAAE;MACpD,OAAO,CAAC,IAAI,EAAE,MAAM,IAAI,CAAC;;IAG3B,MAAMC,UAAU,GAAGb,cAAc,CAACc,aAAa,CAAC,KAAK,CAAC;IACtDd,cAAc,CAACe,IAAI,CAACC,WAAW,CAACH,UAAU,CAAC;IAC3C,OAAO,CAACA,UAAU,EAAE,MAAMA,UAAU,CAACI,MAAM,EAAE,CAAC;EAChD,CAAC,EAAE,CAACjB,cAAc,CAAC,CAAC;EAEpB,IAAIN,iBAAiB,IAAI,EAAE,EAAE;IAC3B;IACAJ,kBAAkB,CAAC,MAAK;MACtB,IAAI,CAACmB,OAAO,EAAE;QACZ;;MAGF,MAAMS,cAAc,GAAGX,SAAS,CAACV,KAAK,CAAC,GAAG,CAAC,CAACsB,MAAM,CAACC,OAAO,CAAC;MAE3DX,OAAO,CAACY,SAAS,CAACC,GAAG,CAAC,GAAGJ,cAAc,CAAC;MACxCT,OAAO,CAACc,YAAY,CAAC,KAAK,EAAEtB,GAAG,CAAC;MAChCE,eAAe,CAACqB,OAAO,GAAGf,OAAO;MAEjC,OAAO,MAAK;QACVA,OAAO,CAACY,SAAS,CAACJ,MAAM,CAAC,GAAGC,cAAc,CAAC;QAC3CT,OAAO,CAACgB,eAAe,CAAC,KAAK,CAAC;MAChC,CAAC;IACH,CAAC,EAAE,CAAClB,SAAS,EAAEN,GAAG,EAAEQ,OAAO,EAAEN,eAAe,CAAC,CAAC;GAC/C,MAAM;IACL;IACA;IACA;IACA;IACA;IACAZ,KAAK,CAACmC,OAAO,CAAC,MAAK;MACjB,IAAI,CAACjB,OAAO,EAAE;QACZ;;MAGF;MACAA,OAAO,CAACF,SAAS,GAAGA,SAAS;MAC7BE,OAAO,CAACc,YAAY,CAAC,KAAK,EAAEtB,GAAG,CAAC;MAChCE,eAAe,CAACqB,OAAO,GAAGf,OAAO;IACnC,CAAC,EAAE,CAACF,SAAS,EAAEN,GAAG,EAAEQ,OAAO,EAAEN,eAAe,CAAC,CAAC;;EAGhD,OAAOM,OAAO;AAChB,CAAC;AAvDYkB,0BAAkB","names":["useInsertionEffect","React","useStyles","react_1","reactMajorVersion","Number","version","split","usePortalMountNode","options","targetDocument","dir","react_shared_contexts_1","focusVisibleRef","react_tabster_1","classes","themeClassName","className","root","element","use_disposable_1","undefined","disabled","newElement","createElement","body","appendChild","remove","classesToApply","filter","Boolean","classList","add","setAttribute","current","removeAttribute","useMemo","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-portal/src/components/Portal/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 { makeStyles, mergeClasses } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\nimport { useDisposable } from 'use-disposable';\n\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect'] as typeof React.useLayoutEffect;\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\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n zIndex: 1000000,\n },\n});\n\nconst reactMajorVersion = Number(React.version.split('.')[0]);\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 = useStyles();\n const themeClassName = useThemeClassName();\n\n const className = mergeClasses(themeClassName, classes.root);\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 (reactMajorVersion >= 18) {\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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-portal",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.3",
|
|
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,7 +32,7 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@fluentui/react-shared-contexts": "^9.1.5",
|
|
35
|
-
"@fluentui/react-tabster": "^9.
|
|
35
|
+
"@fluentui/react-tabster": "^9.4.0",
|
|
36
36
|
"@fluentui/react-utilities": "^9.4.0",
|
|
37
37
|
"@griffel/react": "^1.5.2",
|
|
38
38
|
"tslib": "^2.1.0",
|