@fluentui/react-portal 9.0.3 → 9.0.5
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 +79 -3
- package/CHANGELOG.md +27 -4
- package/lib/components/Portal/usePortalMountNode.js +4 -3
- package/lib/components/Portal/usePortalMountNode.js.map +1 -1
- package/lib-commonjs/components/Portal/usePortalMountNode.js +5 -4
- package/lib-commonjs/components/Portal/usePortalMountNode.js.map +1 -1
- package/package.json +9 -8
- package/dist/tsdoc-metadata.json +0 -11
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,83 @@
|
|
|
2
2
|
"name": "@fluentui/react-portal",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Thu,
|
|
5
|
+
"date": "Thu, 15 Sep 2022 09:44:36 GMT",
|
|
6
|
+
"tag": "@fluentui/react-portal_v9.0.5",
|
|
7
|
+
"version": "9.0.5",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "olfedias@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-portal",
|
|
13
|
+
"commit": "e610024474cfe5d45f61501a8b6a21daf4c794a2",
|
|
14
|
+
"comment": "chore: Update Griffel to latest version"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-portal",
|
|
19
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.1",
|
|
20
|
+
"commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-portal",
|
|
25
|
+
"comment": "Bump @fluentui/react-tabster to v9.1.1",
|
|
26
|
+
"commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-portal",
|
|
31
|
+
"comment": "Bump @fluentui/react-utilities to v9.1.0",
|
|
32
|
+
"commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
|
|
33
|
+
}
|
|
34
|
+
],
|
|
35
|
+
"none": [
|
|
36
|
+
{
|
|
37
|
+
"author": "martinhochel@microsoft.com",
|
|
38
|
+
"package": "@fluentui/react-portal",
|
|
39
|
+
"commit": "e6cf183695d6d67a24e038c49a876224e5ed35e5",
|
|
40
|
+
"comment": "chore: update package scaffold"
|
|
41
|
+
}
|
|
42
|
+
]
|
|
43
|
+
}
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"date": "Wed, 03 Aug 2022 16:03:54 GMT",
|
|
47
|
+
"tag": "@fluentui/react-portal_v9.0.4",
|
|
48
|
+
"version": "9.0.4",
|
|
49
|
+
"comments": {
|
|
50
|
+
"patch": [
|
|
51
|
+
{
|
|
52
|
+
"author": "lingfangao@hotmail.com",
|
|
53
|
+
"package": "@fluentui/react-portal",
|
|
54
|
+
"commit": "71590ea6aeab8ce24d8c8e50e0ee80ece81a4392",
|
|
55
|
+
"comment": "fix: use `useFocusVisible` hook for :focus-visible styles"
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"author": "miroslav.stastny@microsoft.com",
|
|
59
|
+
"package": "@fluentui/react-portal",
|
|
60
|
+
"commit": "08563664778fd80284561d3c9d254307a0a32362",
|
|
61
|
+
"comment": "chore: Bump Griffel dependencies"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"author": "beachball",
|
|
65
|
+
"package": "@fluentui/react-portal",
|
|
66
|
+
"comment": "Bump @fluentui/react-tabster to v9.1.0",
|
|
67
|
+
"commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
|
|
68
|
+
}
|
|
69
|
+
],
|
|
70
|
+
"none": [
|
|
71
|
+
{
|
|
72
|
+
"author": "lingfangao@hotmail.com",
|
|
73
|
+
"package": "@fluentui/react-portal",
|
|
74
|
+
"commit": "99cc385631d04a76ee10ebc143cb9fecd99640b6",
|
|
75
|
+
"comment": "chore: Add `prerelease` as disallowed changetype for 9.0.0 packages"
|
|
76
|
+
}
|
|
77
|
+
]
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"date": "Thu, 14 Jul 2022 21:21:02 GMT",
|
|
6
82
|
"tag": "@fluentui/react-portal_v9.0.3",
|
|
7
83
|
"version": "9.0.3",
|
|
8
84
|
"comments": {
|
|
@@ -17,13 +93,13 @@
|
|
|
17
93
|
"author": "beachball",
|
|
18
94
|
"package": "@fluentui/react-portal",
|
|
19
95
|
"comment": "Bump @fluentui/react-tabster to v9.0.3",
|
|
20
|
-
"commit": "
|
|
96
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
|
21
97
|
},
|
|
22
98
|
{
|
|
23
99
|
"author": "beachball",
|
|
24
100
|
"package": "@fluentui/react-portal",
|
|
25
101
|
"comment": "Bump @fluentui/react-utilities to v9.0.2",
|
|
26
|
-
"commit": "
|
|
102
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
|
27
103
|
}
|
|
28
104
|
]
|
|
29
105
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,19 +1,42 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-portal
|
|
2
2
|
|
|
3
|
-
This log was last generated on Thu,
|
|
3
|
+
This log was last generated on Thu, 15 Sep 2022 09:44:36 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.0.5)
|
|
8
|
+
|
|
9
|
+
Thu, 15 Sep 2022 09:44:36 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.0.4..@fluentui/react-portal_v9.0.5)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: Update Griffel to latest version ([PR #24221](https://github.com/microsoft/fluentui/pull/24221) by olfedias@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-shared-contexts to v9.0.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
|
16
|
+
- Bump @fluentui/react-tabster to v9.1.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
|
17
|
+
- Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
|
18
|
+
|
|
19
|
+
## [9.0.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.0.4)
|
|
20
|
+
|
|
21
|
+
Wed, 03 Aug 2022 16:03:54 GMT
|
|
22
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.0.3..@fluentui/react-portal_v9.0.4)
|
|
23
|
+
|
|
24
|
+
### Patches
|
|
25
|
+
|
|
26
|
+
- fix: use `useFocusVisible` hook for :focus-visible styles ([PR #24154](https://github.com/microsoft/fluentui/pull/24154) by lingfangao@hotmail.com)
|
|
27
|
+
- chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
|
|
28
|
+
- Bump @fluentui/react-tabster to v9.1.0 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
|
|
29
|
+
|
|
7
30
|
## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.0.3)
|
|
8
31
|
|
|
9
|
-
Thu, 14 Jul 2022 21:
|
|
32
|
+
Thu, 14 Jul 2022 21:21:02 GMT
|
|
10
33
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.0.2..@fluentui/react-portal_v9.0.3)
|
|
11
34
|
|
|
12
35
|
### Patches
|
|
13
36
|
|
|
14
37
|
- fix: Fixing bad version bump of @fluentui/react-utilities. ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by Humberto.Morimoto@microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-tabster to v9.0.3 ([PR #
|
|
16
|
-
- Bump @fluentui/react-utilities to v9.0.2 ([PR #
|
|
38
|
+
- Bump @fluentui/react-tabster to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
39
|
+
- Bump @fluentui/react-utilities to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
17
40
|
|
|
18
41
|
## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.0.2)
|
|
19
42
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
|
3
3
|
import { useThemeClassName_unstable as useThemeClassName, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
4
|
-
import { useKeyboardNavAttribute } from '@fluentui/react-tabster';
|
|
5
4
|
import { __styles, mergeClasses } from '@griffel/react';
|
|
5
|
+
import { useFocusVisible } from '@fluentui/react-tabster';
|
|
6
6
|
|
|
7
7
|
const useStyles = /*#__PURE__*/__styles({
|
|
8
8
|
"root": {
|
|
@@ -22,6 +22,7 @@ export const usePortalMountNode = options => {
|
|
|
22
22
|
targetDocument,
|
|
23
23
|
dir
|
|
24
24
|
} = useFluent();
|
|
25
|
+
const focusVisibleRef = useFocusVisible();
|
|
25
26
|
const classes = useStyles();
|
|
26
27
|
const themeClassName = useThemeClassName();
|
|
27
28
|
const className = mergeClasses(themeClassName, classes.root);
|
|
@@ -39,13 +40,13 @@ export const usePortalMountNode = options => {
|
|
|
39
40
|
const classesToApply = className.split(' ').filter(Boolean);
|
|
40
41
|
element.classList.add(...classesToApply);
|
|
41
42
|
element.setAttribute('dir', dir);
|
|
43
|
+
focusVisibleRef.current = element;
|
|
42
44
|
return () => {
|
|
43
45
|
element.classList.remove(...classesToApply);
|
|
44
46
|
element.removeAttribute('dir');
|
|
45
47
|
};
|
|
46
48
|
}
|
|
47
|
-
}, [
|
|
48
|
-
useKeyboardNavAttribute().current = element;
|
|
49
|
+
}, [className, dir, element, focusVisibleRef]);
|
|
49
50
|
React.useEffect(() => {
|
|
50
51
|
return () => {
|
|
51
52
|
var _a;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Portal/usePortalMountNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,2BAA1C;AACA,SACE,0BAA0B,IAAI,iBADhC,EAEE,kBAAkB,IAAI,SAFxB,QAGO,iCAHP;AAIA,
|
|
1
|
+
{"version":3,"sources":["components/Portal/usePortalMountNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,2BAA1C;AACA,SACE,0BAA0B,IAAI,iBADhC,EAEE,kBAAkB,IAAI,SAFxB,QAGO,iCAHP;AAIA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,eAAT,QAAgC,yBAAhC;;AASA,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;EAEA,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,KAAK,CAAC,OAAN,CAAc,MAAK;IACjC,IAAI,cAAc,KAAK,SAAnB,IAAgC,OAAO,CAAC,QAA5C,EAAsD;MACpD,OAAO,IAAP;IACD;;IAED,MAAM,UAAU,GAAG,cAAc,CAAC,aAAf,CAA6B,KAA7B,CAAnB;IACA,cAAc,CAAC,IAAf,CAAoB,WAApB,CAAgC,UAAhC;IAEA,OAAO,UAAP;EACD,CATe,EASb,CAAC,cAAD,EAAiB,OAAO,CAAC,QAAzB,CATa,CAAhB;EAWA,yBAAyB,CAAC,MAAK;IAC7B,IAAI,OAAJ,EAAa;MACX,MAAM,cAAc,GAAG,SAAS,CAAC,KAAV,CAAgB,GAAhB,EAAqB,MAArB,CAA4B,OAA5B,CAAvB;MAEA,OAAO,CAAC,SAAR,CAAkB,GAAlB,CAAsB,GAAG,cAAzB;MACA,OAAO,CAAC,YAAR,CAAqB,KAArB,EAA4B,GAA5B;MACA,eAAe,CAAC,OAAhB,GAA0B,OAA1B;MAEA,OAAO,MAAK;QACV,OAAO,CAAC,SAAR,CAAkB,MAAlB,CAAyB,GAAG,cAA5B;QACA,OAAO,CAAC,eAAR,CAAwB,KAAxB;MACD,CAHD;IAID;EACF,CAbwB,EAatB,CAAC,SAAD,EAAY,GAAZ,EAAiB,OAAjB,EAA0B,eAA1B,CAbsB,CAAzB;EAeA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,OAAO,MAAK;;;MACV,CAAA,EAAA,GAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,aAAT,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,KAAA,CAAtB,GAAsB,EAAA,CAAE,WAAF,CAAc,OAAd,CAAtB;IACD,CAFD;EAGD,CAJD,EAIG,CAAC,OAAD,CAJH;EAMA,OAAO,OAAP;AACD,CA1CM","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\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';\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\n const classes = useStyles();\n const themeClassName = useThemeClassName();\n\n const className = mergeClasses(themeClassName, classes.root);\n\n const element = React.useMemo(() => {\n if (targetDocument === undefined || options.disabled) {\n return null;\n }\n\n const newElement = targetDocument.createElement('div');\n targetDocument.body.appendChild(newElement);\n\n return newElement;\n }, [targetDocument, options.disabled]);\n\n useIsomorphicLayoutEffect(() => {\n if (element) {\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 }\n }, [className, dir, element, focusVisibleRef]);\n\n React.useEffect(() => {\n return () => {\n element?.parentElement?.removeChild(element);\n };\n }, [element]);\n\n return element;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -11,10 +11,10 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
|
11
11
|
|
|
12
12
|
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
|
13
13
|
|
|
14
|
-
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
15
|
-
|
|
16
14
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
17
15
|
|
|
16
|
+
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
17
|
+
|
|
18
18
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
19
19
|
"root": {
|
|
20
20
|
"qhf8xq": "f10pi13n",
|
|
@@ -33,6 +33,7 @@ const usePortalMountNode = options => {
|
|
|
33
33
|
targetDocument,
|
|
34
34
|
dir
|
|
35
35
|
} = react_shared_contexts_1.useFluent_unstable();
|
|
36
|
+
const focusVisibleRef = react_tabster_1.useFocusVisible();
|
|
36
37
|
const classes = useStyles();
|
|
37
38
|
const themeClassName = react_shared_contexts_1.useThemeClassName_unstable();
|
|
38
39
|
const className = react_1.mergeClasses(themeClassName, classes.root);
|
|
@@ -50,13 +51,13 @@ const usePortalMountNode = options => {
|
|
|
50
51
|
const classesToApply = className.split(' ').filter(Boolean);
|
|
51
52
|
element.classList.add(...classesToApply);
|
|
52
53
|
element.setAttribute('dir', dir);
|
|
54
|
+
focusVisibleRef.current = element;
|
|
53
55
|
return () => {
|
|
54
56
|
element.classList.remove(...classesToApply);
|
|
55
57
|
element.removeAttribute('dir');
|
|
56
58
|
};
|
|
57
59
|
}
|
|
58
|
-
}, [
|
|
59
|
-
react_tabster_1.useKeyboardNavAttribute().current = element;
|
|
60
|
+
}, [className, dir, element, focusVisibleRef]);
|
|
60
61
|
React.useEffect(() => {
|
|
61
62
|
return () => {
|
|
62
63
|
var _a;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Portal/usePortalMountNode.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAIA,MAAA,
|
|
1
|
+
{"version":3,"sources":["components/Portal/usePortalMountNode.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,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;;AASA,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;EAEA,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,KAAK,CAAC,OAAN,CAAc,MAAK;IACjC,IAAI,cAAc,KAAK,SAAnB,IAAgC,OAAO,CAAC,QAA5C,EAAsD;MACpD,OAAO,IAAP;IACD;;IAED,MAAM,UAAU,GAAG,cAAc,CAAC,aAAf,CAA6B,KAA7B,CAAnB;IACA,cAAc,CAAC,IAAf,CAAoB,WAApB,CAAgC,UAAhC;IAEA,OAAO,UAAP;EACD,CATe,EASb,CAAC,cAAD,EAAiB,OAAO,CAAC,QAAzB,CATa,CAAhB;EAWA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;IAC7B,IAAI,OAAJ,EAAa;MACX,MAAM,cAAc,GAAG,SAAS,CAAC,KAAV,CAAgB,GAAhB,EAAqB,MAArB,CAA4B,OAA5B,CAAvB;MAEA,OAAO,CAAC,SAAR,CAAkB,GAAlB,CAAsB,GAAG,cAAzB;MACA,OAAO,CAAC,YAAR,CAAqB,KAArB,EAA4B,GAA5B;MACA,eAAe,CAAC,OAAhB,GAA0B,OAA1B;MAEA,OAAO,MAAK;QACV,OAAO,CAAC,SAAR,CAAkB,MAAlB,CAAyB,GAAG,cAA5B;QACA,OAAO,CAAC,eAAR,CAAwB,KAAxB;MACD,CAHD;IAID;EACF,CAbD,EAaG,CAAC,SAAD,EAAY,GAAZ,EAAiB,OAAjB,EAA0B,eAA1B,CAbH;EAeA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,OAAO,MAAK;;;MACV,CAAA,EAAA,GAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,aAAT,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,KAAA,CAAtB,GAAsB,EAAA,CAAE,WAAF,CAAc,OAAd,CAAtB;IACD,CAFD;EAGD,CAJD,EAIG,CAAC,OAAD,CAJH;EAMA,OAAO,OAAP;AACD,CA1CM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\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';\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\n const classes = useStyles();\n const themeClassName = useThemeClassName();\n\n const className = mergeClasses(themeClassName, classes.root);\n\n const element = React.useMemo(() => {\n if (targetDocument === undefined || options.disabled) {\n return null;\n }\n\n const newElement = targetDocument.createElement('div');\n targetDocument.body.appendChild(newElement);\n\n return newElement;\n }, [targetDocument, options.disabled]);\n\n useIsomorphicLayoutEffect(() => {\n if (element) {\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 }\n }, [className, dir, element, focusVisibleRef]);\n\n React.useEffect(() => {\n return () => {\n element?.parentElement?.removeChild(element);\n };\n }, [element]);\n\n return element;\n};\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-portal",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.5",
|
|
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",
|
|
@@ -21,8 +21,8 @@
|
|
|
21
21
|
"start": "yarn storybook",
|
|
22
22
|
"test": "jest --passWithNoTests",
|
|
23
23
|
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
|
24
|
-
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-portal/src && yarn docs",
|
|
25
|
-
"storybook": "
|
|
24
|
+
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-portal/src && yarn docs",
|
|
25
|
+
"storybook": "start-storybook",
|
|
26
26
|
"type-check": "tsc -b tsconfig.json"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
@@ -31,10 +31,10 @@
|
|
|
31
31
|
"@fluentui/scripts": "^1.0.0"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@fluentui/react-shared-contexts": "^9.0.
|
|
35
|
-
"@fluentui/react-tabster": "^9.
|
|
36
|
-
"@fluentui/react-utilities": "^9.0
|
|
37
|
-
"@griffel/react": "^1.
|
|
34
|
+
"@fluentui/react-shared-contexts": "^9.0.1",
|
|
35
|
+
"@fluentui/react-tabster": "^9.1.1",
|
|
36
|
+
"@fluentui/react-utilities": "^9.1.0",
|
|
37
|
+
"@griffel/react": "^1.3.0",
|
|
38
38
|
"tslib": "^2.1.0"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
@@ -45,7 +45,8 @@
|
|
|
45
45
|
},
|
|
46
46
|
"beachball": {
|
|
47
47
|
"disallowedChangeTypes": [
|
|
48
|
-
"major"
|
|
48
|
+
"major",
|
|
49
|
+
"prerelease"
|
|
49
50
|
]
|
|
50
51
|
},
|
|
51
52
|
"exports": {
|
package/dist/tsdoc-metadata.json
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
|
|
2
|
-
// It should be published with your NPM package. It should not be tracked by Git.
|
|
3
|
-
{
|
|
4
|
-
"tsdocVersion": "0.12",
|
|
5
|
-
"toolPackages": [
|
|
6
|
-
{
|
|
7
|
-
"packageName": "@microsoft/api-extractor",
|
|
8
|
-
"packageVersion": "7.18.1"
|
|
9
|
-
}
|
|
10
|
-
]
|
|
11
|
-
}
|