@fluentui/react-portal 9.0.1 → 9.0.4
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 +90 -1
- package/CHANGELOG.md +35 -2
- package/dist/index.d.ts +0 -2
- package/lib/components/Portal/Portal.types.js.map +1 -1
- package/lib/components/Portal/renderPortal.js +1 -1
- package/lib/components/Portal/renderPortal.js.map +1 -1
- package/lib/components/Portal/usePortal.js +0 -2
- package/lib/components/Portal/usePortal.js.map +1 -1
- package/lib/components/Portal/usePortalMountNode.js +4 -3
- package/lib/components/Portal/usePortalMountNode.js.map +1 -1
- package/lib-commonjs/components/Portal/renderPortal.js +1 -1
- package/lib-commonjs/components/Portal/renderPortal.js.map +1 -1
- package/lib-commonjs/components/Portal/usePortal.js +0 -3
- package/lib-commonjs/components/Portal/usePortal.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 +6 -5
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,96 @@
|
|
|
2
2
|
"name": "@fluentui/react-portal",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 03 Aug 2022 16:00:21 GMT",
|
|
6
|
+
"tag": "@fluentui/react-portal_v9.0.4",
|
|
7
|
+
"version": "9.0.4",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "lingfangao@hotmail.com",
|
|
12
|
+
"package": "@fluentui/react-portal",
|
|
13
|
+
"commit": "71590ea6aeab8ce24d8c8e50e0ee80ece81a4392",
|
|
14
|
+
"comment": "fix: use `useFocusVisible` hook for :focus-visible styles"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "miroslav.stastny@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-portal",
|
|
19
|
+
"commit": "08563664778fd80284561d3c9d254307a0a32362",
|
|
20
|
+
"comment": "chore: Bump Griffel dependencies"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-portal",
|
|
25
|
+
"comment": "Bump @fluentui/react-tabster to v9.1.0",
|
|
26
|
+
"commit": "54bc6105c5c9c9023da35d4670239e44117ed4a5"
|
|
27
|
+
}
|
|
28
|
+
],
|
|
29
|
+
"none": [
|
|
30
|
+
{
|
|
31
|
+
"author": "lingfangao@hotmail.com",
|
|
32
|
+
"package": "@fluentui/react-portal",
|
|
33
|
+
"commit": "99cc385631d04a76ee10ebc143cb9fecd99640b6",
|
|
34
|
+
"comment": "chore: Add `prerelease` as disallowed changetype for 9.0.0 packages"
|
|
35
|
+
}
|
|
36
|
+
]
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"date": "Thu, 14 Jul 2022 21:21:02 GMT",
|
|
41
|
+
"tag": "@fluentui/react-portal_v9.0.3",
|
|
42
|
+
"version": "9.0.3",
|
|
43
|
+
"comments": {
|
|
44
|
+
"patch": [
|
|
45
|
+
{
|
|
46
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
47
|
+
"package": "@fluentui/react-portal",
|
|
48
|
+
"commit": "802bc4e3730a88b0fc61b5bf42ef7fc6b6543fe2",
|
|
49
|
+
"comment": "fix: Fixing bad version bump of @fluentui/react-utilities."
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
"author": "beachball",
|
|
53
|
+
"package": "@fluentui/react-portal",
|
|
54
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.3",
|
|
55
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"author": "beachball",
|
|
59
|
+
"package": "@fluentui/react-portal",
|
|
60
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.2",
|
|
61
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
|
62
|
+
}
|
|
63
|
+
]
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
"date": "Thu, 14 Jul 2022 17:06:20 GMT",
|
|
68
|
+
"tag": "@fluentui/react-portal_v9.0.2",
|
|
69
|
+
"version": "9.0.2",
|
|
70
|
+
"comments": {
|
|
71
|
+
"patch": [
|
|
72
|
+
{
|
|
73
|
+
"author": "lingfangao@hotmail.com",
|
|
74
|
+
"package": "@fluentui/react-portal",
|
|
75
|
+
"commit": "6ff3fb3cfb5d81d3db822f675a4ab0fb8be9559a",
|
|
76
|
+
"comment": "fix: `Portal` does not use useIsSSR hook"
|
|
77
|
+
},
|
|
78
|
+
{
|
|
79
|
+
"author": "beachball",
|
|
80
|
+
"package": "@fluentui/react-portal",
|
|
81
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.2",
|
|
82
|
+
"commit": "35237381e941c8935b1892c9217096cea3e5601f"
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"author": "beachball",
|
|
86
|
+
"package": "@fluentui/react-portal",
|
|
87
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.1-0",
|
|
88
|
+
"commit": "35237381e941c8935b1892c9217096cea3e5601f"
|
|
89
|
+
}
|
|
90
|
+
]
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"date": "Tue, 28 Jun 2022 17:39:50 GMT",
|
|
6
95
|
"tag": "@fluentui/react-portal_v9.0.1",
|
|
7
96
|
"version": "9.0.1",
|
|
8
97
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,45 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-portal
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 03 Aug 2022 16:00:21 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.0.4)
|
|
8
|
+
|
|
9
|
+
Wed, 03 Aug 2022 16:00:21 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.0.3..@fluentui/react-portal_v9.0.4)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: use `useFocusVisible` hook for :focus-visible styles ([PR #24154](https://github.com/microsoft/fluentui/pull/24154) by lingfangao@hotmail.com)
|
|
15
|
+
- chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
|
|
16
|
+
- Bump @fluentui/react-tabster to v9.1.0 ([PR #24201](https://github.com/microsoft/fluentui/pull/24201) by beachball)
|
|
17
|
+
|
|
18
|
+
## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.0.3)
|
|
19
|
+
|
|
20
|
+
Thu, 14 Jul 2022 21:21:02 GMT
|
|
21
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.0.2..@fluentui/react-portal_v9.0.3)
|
|
22
|
+
|
|
23
|
+
### Patches
|
|
24
|
+
|
|
25
|
+
- fix: Fixing bad version bump of @fluentui/react-utilities. ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by Humberto.Morimoto@microsoft.com)
|
|
26
|
+
- Bump @fluentui/react-tabster to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
27
|
+
- Bump @fluentui/react-utilities to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
28
|
+
|
|
29
|
+
## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.0.2)
|
|
30
|
+
|
|
31
|
+
Thu, 14 Jul 2022 17:06:20 GMT
|
|
32
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.0.1..@fluentui/react-portal_v9.0.2)
|
|
33
|
+
|
|
34
|
+
### Patches
|
|
35
|
+
|
|
36
|
+
- fix: `Portal` does not use useIsSSR hook ([PR #23612](https://github.com/microsoft/fluentui/pull/23612) by lingfangao@hotmail.com)
|
|
37
|
+
- Bump @fluentui/react-tabster to v9.0.2 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
|
|
38
|
+
- Bump @fluentui/react-utilities to v9.0.1-0 ([PR #23897](https://github.com/microsoft/fluentui/pull/23897) by beachball)
|
|
39
|
+
|
|
7
40
|
## [9.0.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.0.1)
|
|
8
41
|
|
|
9
|
-
Tue, 28 Jun 2022 17:
|
|
42
|
+
Tue, 28 Jun 2022 17:39:50 GMT
|
|
10
43
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.0.0..@fluentui/react-portal_v9.0.1)
|
|
11
44
|
|
|
12
45
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -28,8 +28,6 @@ export declare type PortalProps = {
|
|
|
28
28
|
};
|
|
29
29
|
|
|
30
30
|
export declare type PortalState = Pick<PortalProps, 'children'> & Required<Pick<PortalProps, 'mountNode'>> & {
|
|
31
|
-
/** Indicates if a Portal should be rendered. */
|
|
32
|
-
shouldRender: boolean;
|
|
33
31
|
/**
|
|
34
32
|
* Ref to the root span element as virtual parent
|
|
35
33
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Portal.types.js","sourceRoot":"../src/","sources":["components/Portal/Portal.types.ts"],"names":[],"mappings":"","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;\n};\n\nexport type PortalState = Pick<PortalProps, 'children'> &\n Required<Pick<PortalProps, 'mountNode'>> & {\n
|
|
1
|
+
{"version":3,"file":"Portal.types.js","sourceRoot":"../src/","sources":["components/Portal/Portal.types.ts"],"names":[],"mappings":"","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;\n};\n\nexport type PortalState = Pick<PortalProps, 'children'> &\n Required<Pick<PortalProps, 'mountNode'>> & {\n /**\n * Ref to the root span element as virtual parent\n */\n virtualParentRootRef: React.MutableRefObject<HTMLSpanElement | null>;\n };\n"]}
|
|
@@ -8,6 +8,6 @@ export const renderPortal_unstable = state => {
|
|
|
8
8
|
return /*#__PURE__*/React.createElement("span", {
|
|
9
9
|
hidden: true,
|
|
10
10
|
ref: state.virtualParentRootRef
|
|
11
|
-
}, state.
|
|
11
|
+
}, state.mountNode && /*#__PURE__*/ReactDOM.createPortal(state.children, state.mountNode));
|
|
12
12
|
};
|
|
13
13
|
//# sourceMappingURL=renderPortal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Portal/renderPortal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAZ,MAA0B,WAA1B;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAA2C;EAC9E,oBACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;IAAM,MAAM,EAAA,IAAZ;IAAa,GAAG,EAAE,KAAK,CAAC;EAAxB,CAAA,EACG,KAAK,CAAC,
|
|
1
|
+
{"version":3,"sources":["components/Portal/renderPortal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAZ,MAA0B,WAA1B;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA;;AAEG;;AACH,OAAO,MAAM,qBAAqB,GAAI,KAAD,IAA2C;EAC9E,oBACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;IAAM,MAAM,EAAA,IAAZ;IAAa,GAAG,EAAE,KAAK,CAAC;EAAxB,CAAA,EACG,KAAK,CAAC,SAAN,iBAAmB,QAAQ,CAAC,YAAT,CAAsB,KAAK,CAAC,QAA5B,EAAsC,KAAK,CAAC,SAA5C,CADtB,CADF;AAKD,CANM","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"],"sourceRoot":"../src/"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { useIsSSR } from '@fluentui/react-utilities';
|
|
3
2
|
import { usePortalMountNode } from './usePortalMountNode';
|
|
4
3
|
import { setVirtualParent } from '../../virtualParent/index';
|
|
5
4
|
/**
|
|
@@ -22,7 +21,6 @@ export const usePortal_unstable = props => {
|
|
|
22
21
|
const state = {
|
|
23
22
|
children,
|
|
24
23
|
mountNode: mountNode !== null && mountNode !== void 0 ? mountNode : fallbackMountNode,
|
|
25
|
-
shouldRender: !useIsSSR(),
|
|
26
24
|
virtualParentRootRef
|
|
27
25
|
};
|
|
28
26
|
React.useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Portal/usePortal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,
|
|
1
|
+
{"version":3,"sources":["components/Portal/usePortal.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,kBAAT,QAAmC,sBAAnC;AACA,SAAS,gBAAT,QAAiC,2BAAjC;AAGA;;;;;;AAMG;;AACH,OAAO,MAAM,kBAAkB,GAAI,KAAD,IAAoC;EACpE,MAAM;IAAE,QAAF;IAAY;EAAZ,IAA0B,KAAhC;EAEA,MAAM,oBAAoB,GAAG,KAAK,CAAC,MAAN,CAA8B,IAA9B,CAA7B;EACA,MAAM,iBAAiB,GAAG,kBAAkB,CAAC;IAAE,QAAQ,EAAE,CAAC,CAAC;EAAd,CAAD,CAA5C;EAEA,MAAM,KAAK,GAAgB;IACzB,QADyB;IAEzB,SAAS,EAAE,SAAS,KAAA,IAAT,IAAA,SAAS,KAAA,KAAA,CAAT,GAAA,SAAA,GAAa,iBAFC;IAGzB;EAHyB,CAA3B;EAMA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,KAAK,CAAC,oBAAN,CAA2B,OAA3B,IAAsC,KAAK,CAAC,SAAhD,EAA2D;MACzD,gBAAgB,CAAC,KAAK,CAAC,SAAP,EAAkB,KAAK,CAAC,oBAAN,CAA2B,OAA7C,CAAhB;IACD;EACF,CAJD,EAIG,CAAC,KAAK,CAAC,oBAAP,EAA6B,KAAK,CAAC,SAAnC,CAJH;EAMA,OAAO,KAAP;AACD,CAnBM","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 }, [state.virtualParentRootRef, state.mountNode]);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -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/"}
|
|
@@ -17,7 +17,7 @@ const renderPortal_unstable = state => {
|
|
|
17
17
|
return React.createElement("span", {
|
|
18
18
|
hidden: true,
|
|
19
19
|
ref: state.virtualParentRootRef
|
|
20
|
-
}, state.
|
|
20
|
+
}, state.mountNode && ReactDOM.createPortal(state.children, state.mountNode));
|
|
21
21
|
};
|
|
22
22
|
|
|
23
23
|
exports.renderPortal_unstable = renderPortal_unstable;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Portal/renderPortal.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,QAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,qBAAqB,GAAI,KAAD,IAA2C;EAC9E,OACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;IAAM,MAAM,EAAA,IAAZ;IAAa,GAAG,EAAE,KAAK,CAAC;EAAxB,CAAA,EACG,KAAK,CAAC,
|
|
1
|
+
{"version":3,"sources":["components/Portal/renderPortal.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,QAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,qBAAqB,GAAI,KAAD,IAA2C;EAC9E,OACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;IAAM,MAAM,EAAA,IAAZ;IAAa,GAAG,EAAE,KAAK,CAAC;EAAxB,CAAA,EACG,KAAK,CAAC,SAAN,IAAmB,QAAQ,CAAC,YAAT,CAAsB,KAAK,CAAC,QAA5B,EAAsC,KAAK,CAAC,SAA5C,CADtB,CADF;AAKD,CANM;;AAAM,OAAA,CAAA,qBAAA,GAAqB,qBAArB","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"],"sourceRoot":"../src/"}
|
|
@@ -7,8 +7,6 @@ exports.usePortal_unstable = void 0;
|
|
|
7
7
|
|
|
8
8
|
const React = /*#__PURE__*/require("react");
|
|
9
9
|
|
|
10
|
-
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
11
|
-
|
|
12
10
|
const usePortalMountNode_1 = /*#__PURE__*/require("./usePortalMountNode");
|
|
13
11
|
|
|
14
12
|
const index_1 = /*#__PURE__*/require("../../virtualParent/index");
|
|
@@ -33,7 +31,6 @@ const usePortal_unstable = props => {
|
|
|
33
31
|
const state = {
|
|
34
32
|
children,
|
|
35
33
|
mountNode: mountNode !== null && mountNode !== void 0 ? mountNode : fallbackMountNode,
|
|
36
|
-
shouldRender: !react_utilities_1.useIsSSR(),
|
|
37
34
|
virtualParentRootRef
|
|
38
35
|
};
|
|
39
36
|
React.useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Portal/usePortal.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,
|
|
1
|
+
{"version":3,"sources":["components/Portal/usePortal.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,oBAAA,gBAAA,OAAA,CAAA,sBAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;;;AAMG;;;AACI,MAAM,kBAAkB,GAAI,KAAD,IAAoC;EACpE,MAAM;IAAE,QAAF;IAAY;EAAZ,IAA0B,KAAhC;EAEA,MAAM,oBAAoB,GAAG,KAAK,CAAC,MAAN,CAA8B,IAA9B,CAA7B;EACA,MAAM,iBAAiB,GAAG,oBAAA,CAAA,kBAAA,CAAmB;IAAE,QAAQ,EAAE,CAAC,CAAC;EAAd,CAAnB,CAA1B;EAEA,MAAM,KAAK,GAAgB;IACzB,QADyB;IAEzB,SAAS,EAAE,SAAS,KAAA,IAAT,IAAA,SAAS,KAAA,KAAA,CAAT,GAAA,SAAA,GAAa,iBAFC;IAGzB;EAHyB,CAA3B;EAMA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,KAAK,CAAC,oBAAN,CAA2B,OAA3B,IAAsC,KAAK,CAAC,SAAhD,EAA2D;MACzD,OAAA,CAAA,gBAAA,CAAiB,KAAK,CAAC,SAAvB,EAAkC,KAAK,CAAC,oBAAN,CAA2B,OAA7D;IACD;EACF,CAJD,EAIG,CAAC,KAAK,CAAC,oBAAP,EAA6B,KAAK,CAAC,SAAnC,CAJH;EAMA,OAAO,KAAP;AACD,CAnBM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","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 }, [state.virtualParentRootRef, state.mountNode]);\n\n return state;\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.4",
|
|
4
4
|
"description": "A utility component that creates portals compatible with Fluent UI",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -32,9 +32,9 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@fluentui/react-shared-contexts": "^9.0.0",
|
|
35
|
-
"@fluentui/react-tabster": "^9.0
|
|
36
|
-
"@fluentui/react-utilities": "^9.0.
|
|
37
|
-
"@griffel/react": "^1.2.
|
|
35
|
+
"@fluentui/react-tabster": "^9.1.0",
|
|
36
|
+
"@fluentui/react-utilities": "^9.0.2",
|
|
37
|
+
"@griffel/react": "^1.2.3",
|
|
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": {
|