@fluentui/react-portal 0.0.0-nightly-20221221-0931.1 → 0.0.0-nightly-20221223-0422.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +30 -9
- package/CHANGELOG.md +17 -7
- package/lib/components/Portal/usePortalMountNode.js +19 -20
- package/lib/components/Portal/usePortalMountNode.js.map +1 -1
- package/lib-commonjs/components/Portal/usePortalMountNode.js +22 -20
- package/lib-commonjs/components/Portal/usePortalMountNode.js.map +1 -1
- package/package.json +6 -5
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-portal",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-portal_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Fri, 23 Dec 2022 04:29:45 GMT",
|
|
6
|
+
"tag": "@fluentui/react-portal_v0.0.0-nightly-20221223-0422.1",
|
|
7
|
+
"version": "0.0.0-nightly-20221223-0422.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,20 +16,41 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-portal",
|
|
19
|
-
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221223-0422.1",
|
|
20
|
+
"commit": "0545cf7adc2781bf888f2dbfb801fe8262b0da87"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-portal",
|
|
25
|
-
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20221223-0422.1",
|
|
26
|
+
"commit": "0545cf7adc2781bf888f2dbfb801fe8262b0da87"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-portal",
|
|
31
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221223-0422.1",
|
|
32
|
+
"commit": "0545cf7adc2781bf888f2dbfb801fe8262b0da87"
|
|
33
|
+
}
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"date": "Wed, 21 Dec 2022 10:20:33 GMT",
|
|
39
|
+
"tag": "@fluentui/react-portal_v9.0.14",
|
|
40
|
+
"version": "9.0.14",
|
|
41
|
+
"comments": {
|
|
42
|
+
"patch": [
|
|
43
|
+
{
|
|
44
|
+
"author": "beachball",
|
|
45
|
+
"package": "@fluentui/react-portal",
|
|
46
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.1.4",
|
|
47
|
+
"commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui/react-portal",
|
|
52
|
+
"comment": "Bump @fluentui/react-tabster to v9.3.4",
|
|
53
|
+
"commit": "66bf89f634cad4a275e957d7a2214c7e73ff8c2e"
|
|
33
54
|
}
|
|
34
55
|
]
|
|
35
56
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,20 +1,30 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-portal
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 23 Dec 2022 04:29:45 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20221223-0422.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v0.0.0-nightly-20221223-0422.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.0.
|
|
9
|
+
Fri, 23 Dec 2022 04:29:45 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.0.14..@fluentui/react-portal_v0.0.0-nightly-20221223-0422.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221223-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/0545cf7adc2781bf888f2dbfb801fe8262b0da87) by beachball)
|
|
16
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20221223-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/0545cf7adc2781bf888f2dbfb801fe8262b0da87) by beachball)
|
|
17
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20221223-0422.1 ([commit](https://github.com/microsoft/fluentui/commit/0545cf7adc2781bf888f2dbfb801fe8262b0da87) by beachball)
|
|
18
|
+
|
|
19
|
+
## [9.0.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.0.14)
|
|
20
|
+
|
|
21
|
+
Wed, 21 Dec 2022 10:20:33 GMT
|
|
22
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.0.13..@fluentui/react-portal_v9.0.14)
|
|
23
|
+
|
|
24
|
+
### Patches
|
|
25
|
+
|
|
26
|
+
- Bump @fluentui/react-shared-contexts to v9.1.4 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
|
|
27
|
+
- Bump @fluentui/react-tabster to v9.3.4 ([commit](https://github.com/microsoft/fluentui/commit/66bf89f634cad4a275e957d7a2214c7e73ff8c2e) by beachball)
|
|
18
28
|
|
|
19
29
|
## [9.0.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.0.13)
|
|
20
30
|
|
|
@@ -2,6 +2,10 @@ import * as React from 'react';
|
|
|
2
2
|
import { useThemeClassName_unstable as useThemeClassName, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
3
3
|
import { __styles, mergeClasses } from '@griffel/react';
|
|
4
4
|
import { useFocusVisible } from '@fluentui/react-tabster';
|
|
5
|
+
import { useDisposable } from 'use-disposable';
|
|
6
|
+
import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities'; // String concatenation is used to prevent bundlers to complain with older versions of React
|
|
7
|
+
|
|
8
|
+
const useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : useIsomorphicLayoutEffect;
|
|
5
9
|
|
|
6
10
|
const useStyles = /*#__PURE__*/__styles({
|
|
7
11
|
"root": {
|
|
@@ -25,38 +29,33 @@ export const usePortalMountNode = options => {
|
|
|
25
29
|
const classes = useStyles();
|
|
26
30
|
const themeClassName = useThemeClassName();
|
|
27
31
|
const className = mergeClasses(themeClassName, classes.root);
|
|
28
|
-
const element =
|
|
32
|
+
const element = useDisposable(() => {
|
|
29
33
|
if (targetDocument === undefined || options.disabled) {
|
|
30
|
-
return null;
|
|
34
|
+
return [null, () => null];
|
|
31
35
|
}
|
|
32
36
|
|
|
33
37
|
const newElement = targetDocument.createElement('div');
|
|
34
38
|
targetDocument.body.appendChild(newElement);
|
|
35
|
-
return newElement;
|
|
36
|
-
}, [targetDocument
|
|
39
|
+
return [newElement, () => newElement.remove()];
|
|
40
|
+
}, [targetDocument]); // This useEffect call is intentional
|
|
37
41
|
// We don't want to re-create the portal element when its attributes change.
|
|
38
42
|
// This also should not be done in an effect because, changing the value of css variables
|
|
39
43
|
// after initial mount can trigger interesting CSS side effects like transitions.
|
|
40
44
|
|
|
41
|
-
|
|
42
|
-
if (element) {
|
|
43
|
-
|
|
44
|
-
element.classList.add(...classesToApply);
|
|
45
|
-
element.setAttribute('dir', dir);
|
|
46
|
-
focusVisibleRef.current = element;
|
|
47
|
-
return () => {
|
|
48
|
-
element.classList.remove(...classesToApply);
|
|
49
|
-
element.removeAttribute('dir');
|
|
50
|
-
};
|
|
45
|
+
useInsertionEffect(() => {
|
|
46
|
+
if (!element) {
|
|
47
|
+
return;
|
|
51
48
|
}
|
|
52
|
-
}, [className, dir, element, focusVisibleRef]);
|
|
53
|
-
React.useEffect(() => {
|
|
54
|
-
return () => {
|
|
55
|
-
var _a;
|
|
56
49
|
|
|
57
|
-
|
|
50
|
+
const classesToApply = className.split(' ').filter(Boolean);
|
|
51
|
+
element.classList.add(...classesToApply);
|
|
52
|
+
element.setAttribute('dir', dir);
|
|
53
|
+
focusVisibleRef.current = element;
|
|
54
|
+
return () => {
|
|
55
|
+
element.classList.remove(...classesToApply);
|
|
56
|
+
element.removeAttribute('dir');
|
|
58
57
|
};
|
|
59
|
-
}, [element]);
|
|
58
|
+
}, [className, dir, element, focusVisibleRef]);
|
|
60
59
|
return element;
|
|
61
60
|
};
|
|
62
61
|
//# sourceMappingURL=usePortalMountNode.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-portal/src/components/Portal/usePortalMountNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SACE,0BAA0B,IAAI,iBADhC,EAEE,kBAAkB,IAAI,SAFxB,QAGO,iCAHP;AAIA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,eAAT,QAAgC,yBAAhC;;
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-portal/src/components/Portal/usePortalMountNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SACE,0BAA0B,IAAI,iBADhC,EAEE,kBAAkB,IAAI,SAFxB,QAGO,iCAHP;AAIA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,eAAT,QAAgC,yBAAhC;AACA,SAAS,aAAT,QAA8B,gBAA9B;AACA,SAAS,yBAAT,QAA0C,2BAA1C,C,CAEA;;AACA,MAAM,kBAAkB,GAAI,KAAe,CAAC,iBAAiB,QAAlB,CAAf,GACvB,KAAe,CAAC,iBAAiB,QAAlB,CADQ,GAExB,yBAFJ;;AAWA,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAOA;;AAEG;;;AACH,OAAO,MAAM,kBAAkB,GAAI,OAAD,IAA2D;EAC3F,MAAM;IAAE,cAAF;IAAkB;EAAlB,IAA0B,SAAS,EAAzC;EACA,MAAM,eAAe,GAAG,eAAe,EAAvC;EACA,MAAM,OAAO,GAAG,SAAS,EAAzB;EACA,MAAM,cAAc,GAAG,iBAAiB,EAAxC;EAEA,MAAM,SAAS,GAAG,YAAY,CAAC,cAAD,EAAiB,OAAO,CAAC,IAAzB,CAA9B;EAEA,MAAM,OAAO,GAAG,aAAa,CAAC,MAAK;IACjC,IAAI,cAAc,KAAK,SAAnB,IAAgC,OAAO,CAAC,QAA5C,EAAsD;MACpD,OAAO,CAAC,IAAD,EAAO,MAAM,IAAb,CAAP;IACD;;IAED,MAAM,UAAU,GAAG,cAAc,CAAC,aAAf,CAA6B,KAA7B,CAAnB;IACA,cAAc,CAAC,IAAf,CAAoB,WAApB,CAAgC,UAAhC;IACA,OAAO,CAAC,UAAD,EAAa,MAAM,UAAU,CAAC,MAAX,EAAnB,CAAP;EACD,CAR4B,EAQ1B,CAAC,cAAD,CAR0B,CAA7B,CAR2F,CAkB3F;EACA;EACA;EACA;;EACA,kBAAkB,CAAC,MAAK;IACtB,IAAI,CAAC,OAAL,EAAc;MACZ;IACD;;IAED,MAAM,cAAc,GAAG,SAAS,CAAC,KAAV,CAAgB,GAAhB,EAAqB,MAArB,CAA4B,OAA5B,CAAvB;IAEA,OAAO,CAAC,SAAR,CAAkB,GAAlB,CAAsB,GAAG,cAAzB;IACA,OAAO,CAAC,YAAR,CAAqB,KAArB,EAA4B,GAA5B;IACA,eAAe,CAAC,OAAhB,GAA0B,OAA1B;IAEA,OAAO,MAAK;MACV,OAAO,CAAC,SAAR,CAAkB,MAAlB,CAAyB,GAAG,cAA5B;MACA,OAAO,CAAC,eAAR,CAAwB,KAAxB;IACD,CAHD;EAID,CAfiB,EAef,CAAC,SAAD,EAAY,GAAZ,EAAiB,OAAjB,EAA0B,eAA1B,CAfe,CAAlB;EAiBA,OAAO,OAAP;AACD,CAxCM","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';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n ? (React as never)['useInsertion' + 'Effect']\n : useIsomorphicLayoutEffect;\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\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 // This useEffect call is intentional\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 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\n return element;\n};\n"],"sourceRoot":""}
|
|
@@ -13,6 +13,13 @@ const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
|
13
13
|
|
|
14
14
|
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
15
15
|
|
|
16
|
+
const use_disposable_1 = /*#__PURE__*/require("use-disposable");
|
|
17
|
+
|
|
18
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities"); // String concatenation is used to prevent bundlers to complain with older versions of React
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
const useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : react_utilities_1.useIsomorphicLayoutEffect;
|
|
22
|
+
|
|
16
23
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
17
24
|
"root": {
|
|
18
25
|
"qhf8xq": "f10pi13n",
|
|
@@ -35,38 +42,33 @@ const usePortalMountNode = options => {
|
|
|
35
42
|
const classes = useStyles();
|
|
36
43
|
const themeClassName = react_shared_contexts_1.useThemeClassName_unstable();
|
|
37
44
|
const className = react_1.mergeClasses(themeClassName, classes.root);
|
|
38
|
-
const element =
|
|
45
|
+
const element = use_disposable_1.useDisposable(() => {
|
|
39
46
|
if (targetDocument === undefined || options.disabled) {
|
|
40
|
-
return null;
|
|
47
|
+
return [null, () => null];
|
|
41
48
|
}
|
|
42
49
|
|
|
43
50
|
const newElement = targetDocument.createElement('div');
|
|
44
51
|
targetDocument.body.appendChild(newElement);
|
|
45
|
-
return newElement;
|
|
46
|
-
}, [targetDocument
|
|
52
|
+
return [newElement, () => newElement.remove()];
|
|
53
|
+
}, [targetDocument]); // This useEffect call is intentional
|
|
47
54
|
// We don't want to re-create the portal element when its attributes change.
|
|
48
55
|
// This also should not be done in an effect because, changing the value of css variables
|
|
49
56
|
// after initial mount can trigger interesting CSS side effects like transitions.
|
|
50
57
|
|
|
51
|
-
|
|
52
|
-
if (element) {
|
|
53
|
-
|
|
54
|
-
element.classList.add(...classesToApply);
|
|
55
|
-
element.setAttribute('dir', dir);
|
|
56
|
-
focusVisibleRef.current = element;
|
|
57
|
-
return () => {
|
|
58
|
-
element.classList.remove(...classesToApply);
|
|
59
|
-
element.removeAttribute('dir');
|
|
60
|
-
};
|
|
58
|
+
useInsertionEffect(() => {
|
|
59
|
+
if (!element) {
|
|
60
|
+
return;
|
|
61
61
|
}
|
|
62
|
-
}, [className, dir, element, focusVisibleRef]);
|
|
63
|
-
React.useEffect(() => {
|
|
64
|
-
return () => {
|
|
65
|
-
var _a;
|
|
66
62
|
|
|
67
|
-
|
|
63
|
+
const classesToApply = className.split(' ').filter(Boolean);
|
|
64
|
+
element.classList.add(...classesToApply);
|
|
65
|
+
element.setAttribute('dir', dir);
|
|
66
|
+
focusVisibleRef.current = element;
|
|
67
|
+
return () => {
|
|
68
|
+
element.classList.remove(...classesToApply);
|
|
69
|
+
element.removeAttribute('dir');
|
|
68
70
|
};
|
|
69
|
-
}, [element]);
|
|
71
|
+
}, [className, dir, element, focusVisibleRef]);
|
|
70
72
|
return element;
|
|
71
73
|
};
|
|
72
74
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-portal/src/components/Portal/usePortalMountNode.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAIA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;
|
|
1
|
+
{"version":3,"sources":["../../../../../../../../../packages/react-components/react-portal/src/components/Portal/usePortalMountNode.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAIA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA,C,CAEA;;;AACA,MAAM,kBAAkB,GAAI,KAAe,CAAC,iBAAiB,QAAlB,CAAf,GACvB,KAAe,CAAC,iBAAiB,QAAlB,CADQ,GAExB,iBAAA,CAAA,yBAFJ;;AAWA,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAOA;;AAEG;;;AACI,MAAM,kBAAkB,GAAI,OAAD,IAA2D;EAC3F,MAAM;IAAE,cAAF;IAAkB;EAAlB,IAA0B,uBAAA,CAAA,kBAAA,EAAhC;EACA,MAAM,eAAe,GAAG,eAAA,CAAA,eAAA,EAAxB;EACA,MAAM,OAAO,GAAG,SAAS,EAAzB;EACA,MAAM,cAAc,GAAG,uBAAA,CAAA,0BAAA,EAAvB;EAEA,MAAM,SAAS,GAAG,OAAA,CAAA,YAAA,CAAa,cAAb,EAA6B,OAAO,CAAC,IAArC,CAAlB;EAEA,MAAM,OAAO,GAAG,gBAAA,CAAA,aAAA,CAAc,MAAK;IACjC,IAAI,cAAc,KAAK,SAAnB,IAAgC,OAAO,CAAC,QAA5C,EAAsD;MACpD,OAAO,CAAC,IAAD,EAAO,MAAM,IAAb,CAAP;IACD;;IAED,MAAM,UAAU,GAAG,cAAc,CAAC,aAAf,CAA6B,KAA7B,CAAnB;IACA,cAAc,CAAC,IAAf,CAAoB,WAApB,CAAgC,UAAhC;IACA,OAAO,CAAC,UAAD,EAAa,MAAM,UAAU,CAAC,MAAX,EAAnB,CAAP;EACD,CARe,EAQb,CAAC,cAAD,CARa,CAAhB,CAR2F,CAkB3F;EACA;EACA;EACA;;EACA,kBAAkB,CAAC,MAAK;IACtB,IAAI,CAAC,OAAL,EAAc;MACZ;IACD;;IAED,MAAM,cAAc,GAAG,SAAS,CAAC,KAAV,CAAgB,GAAhB,EAAqB,MAArB,CAA4B,OAA5B,CAAvB;IAEA,OAAO,CAAC,SAAR,CAAkB,GAAlB,CAAsB,GAAG,cAAzB;IACA,OAAO,CAAC,YAAR,CAAqB,KAArB,EAA4B,GAA5B;IACA,eAAe,CAAC,OAAhB,GAA0B,OAA1B;IAEA,OAAO,MAAK;MACV,OAAO,CAAC,SAAR,CAAkB,MAAlB,CAAyB,GAAG,cAA5B;MACA,OAAO,CAAC,eAAR,CAAwB,KAAxB;IACD,CAHD;EAID,CAfiB,EAef,CAAC,SAAD,EAAY,GAAZ,EAAiB,OAAjB,EAA0B,eAA1B,CAfe,CAAlB;EAiBA,OAAO,OAAP;AACD,CAxCM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","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';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n ? (React as never)['useInsertion' + 'Effect']\n : useIsomorphicLayoutEffect;\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\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 // This useEffect call is intentional\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 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\n return element;\n};\n"],"sourceRoot":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-portal",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20221223-0422.1",
|
|
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",
|
|
@@ -30,11 +30,12 @@
|
|
|
30
30
|
"@fluentui/scripts": "^1.0.0"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
34
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
|
35
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
33
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20221223-0422.1",
|
|
34
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20221223-0422.1",
|
|
35
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20221223-0422.1",
|
|
36
36
|
"@griffel/react": "^1.4.2",
|
|
37
|
-
"tslib": "^2.1.0"
|
|
37
|
+
"tslib": "^2.1.0",
|
|
38
|
+
"use-disposable": "^1.0.1"
|
|
38
39
|
},
|
|
39
40
|
"peerDependencies": {
|
|
40
41
|
"@types/react": ">=16.8.0 <19.0.0",
|