@fluentui/react-portal 9.1.11 → 9.2.0
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +49 -1
- package/CHANGELOG.md +23 -2
- package/dist/index.d.ts +6 -2
- package/lib/components/Portal/Portal.types.js.map +1 -1
- package/lib/components/Portal/usePortal.js +26 -8
- package/lib/components/Portal/usePortal.js.map +1 -1
- package/lib/components/Portal/usePortalMountNode.js +3 -4
- package/lib/components/Portal/usePortalMountNode.js.map +1 -1
- package/lib-amd/components/Portal/Portal.types.js.map +1 -1
- package/lib-amd/components/Portal/usePortal.js +19 -6
- package/lib-amd/components/Portal/usePortal.js.map +1 -1
- package/lib-amd/components/Portal/usePortalMountNode.js +3 -4
- package/lib-amd/components/Portal/usePortalMountNode.js.map +1 -1
- package/lib-commonjs/components/Portal/Portal.types.js.map +1 -1
- package/lib-commonjs/components/Portal/usePortal.js +28 -9
- package/lib-commonjs/components/Portal/usePortal.js.map +1 -1
- package/lib-commonjs/components/Portal/usePortalMountNode.js +3 -4
- package/lib-commonjs/components/Portal/usePortalMountNode.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,55 @@
|
|
|
2
2
|
"name": "@fluentui/react-portal",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 15 Mar 2023 10:17:03 GMT",
|
|
6
|
+
"tag": "@fluentui/react-portal_v9.2.0",
|
|
7
|
+
"version": "9.2.0",
|
|
8
|
+
"comments": {
|
|
9
|
+
"minor": [
|
|
10
|
+
{
|
|
11
|
+
"author": "olfedias@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-portal",
|
|
13
|
+
"commit": "6d89241afb94c8f50514a396763be5c798047d80",
|
|
14
|
+
"comment": "feat: accept a className in mountNode in Portal"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-portal",
|
|
19
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.3.1",
|
|
20
|
+
"commit": "5da01b4766ae6d81befb7bcd588d9cf8d969e1e2"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-portal",
|
|
25
|
+
"comment": "Bump @fluentui/react-tabster to v9.5.7",
|
|
26
|
+
"commit": "5da01b4766ae6d81befb7bcd588d9cf8d969e1e2"
|
|
27
|
+
}
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
{
|
|
32
|
+
"date": "Mon, 13 Mar 2023 08:58:26 GMT",
|
|
33
|
+
"tag": "@fluentui/react-portal_v9.1.12",
|
|
34
|
+
"version": "9.1.12",
|
|
35
|
+
"comments": {
|
|
36
|
+
"patch": [
|
|
37
|
+
{
|
|
38
|
+
"author": "beachball",
|
|
39
|
+
"package": "@fluentui/react-portal",
|
|
40
|
+
"comment": "Bump @fluentui/react-tabster to v9.5.6",
|
|
41
|
+
"commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"author": "beachball",
|
|
45
|
+
"package": "@fluentui/react-portal",
|
|
46
|
+
"comment": "Bump @fluentui/react-utilities to v9.7.0",
|
|
47
|
+
"commit": "edf96a6b5d6f13843ada1400480e347b84384b8e"
|
|
48
|
+
}
|
|
49
|
+
]
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"date": "Fri, 10 Mar 2023 07:14:01 GMT",
|
|
6
54
|
"tag": "@fluentui/react-portal_v9.1.11",
|
|
7
55
|
"version": "9.1.11",
|
|
8
56
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,33 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-portal
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 15 Mar 2023 10:17:03 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.2.0)
|
|
8
|
+
|
|
9
|
+
Wed, 15 Mar 2023 10:17:03 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.1.12..@fluentui/react-portal_v9.2.0)
|
|
11
|
+
|
|
12
|
+
### Minor changes
|
|
13
|
+
|
|
14
|
+
- feat: accept a className in mountNode in Portal ([PR #27008](https://github.com/microsoft/fluentui/pull/27008) by olfedias@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-shared-contexts to v9.3.1 ([PR #27213](https://github.com/microsoft/fluentui/pull/27213) by beachball)
|
|
16
|
+
- Bump @fluentui/react-tabster to v9.5.7 ([PR #27213](https://github.com/microsoft/fluentui/pull/27213) by beachball)
|
|
17
|
+
|
|
18
|
+
## [9.1.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.1.12)
|
|
19
|
+
|
|
20
|
+
Mon, 13 Mar 2023 08:58:26 GMT
|
|
21
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.1.11..@fluentui/react-portal_v9.1.12)
|
|
22
|
+
|
|
23
|
+
### Patches
|
|
24
|
+
|
|
25
|
+
- Bump @fluentui/react-tabster to v9.5.6 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
|
|
26
|
+
- Bump @fluentui/react-utilities to v9.7.0 ([PR #27161](https://github.com/microsoft/fluentui/pull/27161) by beachball)
|
|
27
|
+
|
|
7
28
|
## [9.1.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.1.11)
|
|
8
29
|
|
|
9
|
-
Fri, 10 Mar 2023 07:
|
|
30
|
+
Fri, 10 Mar 2023 07:14:01 GMT
|
|
10
31
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.1.10..@fluentui/react-portal_v9.1.11)
|
|
11
32
|
|
|
12
33
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -24,10 +24,14 @@ export declare type PortalProps = {
|
|
|
24
24
|
*
|
|
25
25
|
* @default a new element on document.body without any styling
|
|
26
26
|
*/
|
|
27
|
-
mountNode?: HTMLElement | null
|
|
27
|
+
mountNode?: HTMLElement | null | {
|
|
28
|
+
element?: HTMLElement | null;
|
|
29
|
+
className?: string;
|
|
30
|
+
};
|
|
28
31
|
};
|
|
29
32
|
|
|
30
|
-
export declare type PortalState = Pick<PortalProps, 'children'> &
|
|
33
|
+
export declare type PortalState = Pick<PortalProps, 'children'> & {
|
|
34
|
+
mountNode: HTMLElement | null | undefined;
|
|
31
35
|
/**
|
|
32
36
|
* Ref to the root span element as virtual parent
|
|
33
37
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Portal.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-portal/src/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'>
|
|
1
|
+
{"version":3,"file":"Portal.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-portal/src/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 | { element?: HTMLElement | null; className?: string };\n};\n\nexport type PortalState = Pick<PortalProps, 'children'> & {\n mountNode: HTMLElement | null | undefined;\n\n /**\n * Ref to the root span element as virtual parent\n */\n virtualParentRootRef: React.MutableRefObject<HTMLSpanElement | null>;\n};\n"]}
|
|
@@ -1,6 +1,23 @@
|
|
|
1
|
+
import { isHTMLElement } from '@fluentui/react-utilities';
|
|
1
2
|
import * as React from 'react';
|
|
2
|
-
import { usePortalMountNode } from './usePortalMountNode';
|
|
3
3
|
import { setVirtualParent } from '../../virtualParent/index';
|
|
4
|
+
import { usePortalMountNode } from './usePortalMountNode';
|
|
5
|
+
export function toMountNodeProps(mountNode) {
|
|
6
|
+
if (isHTMLElement(mountNode)) {
|
|
7
|
+
return {
|
|
8
|
+
element: mountNode
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
if (typeof mountNode === 'object') {
|
|
12
|
+
if (mountNode === null) {
|
|
13
|
+
return {
|
|
14
|
+
element: null
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
return mountNode;
|
|
18
|
+
}
|
|
19
|
+
return {};
|
|
20
|
+
}
|
|
4
21
|
/**
|
|
5
22
|
* Create the state required to render Portal.
|
|
6
23
|
*
|
|
@@ -10,16 +27,17 @@ import { setVirtualParent } from '../../virtualParent/index';
|
|
|
10
27
|
*/
|
|
11
28
|
export const usePortal_unstable = props => {
|
|
12
29
|
const {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
} = props;
|
|
30
|
+
element,
|
|
31
|
+
className
|
|
32
|
+
} = toMountNodeProps(props.mountNode);
|
|
16
33
|
const virtualParentRootRef = React.useRef(null);
|
|
17
|
-
const
|
|
18
|
-
disabled: !!
|
|
34
|
+
const fallbackElement = usePortalMountNode({
|
|
35
|
+
disabled: !!element,
|
|
36
|
+
className
|
|
19
37
|
});
|
|
20
38
|
const state = {
|
|
21
|
-
children,
|
|
22
|
-
mountNode:
|
|
39
|
+
children: props.children,
|
|
40
|
+
mountNode: element !== null && element !== void 0 ? element : fallbackElement,
|
|
23
41
|
virtualParentRootRef
|
|
24
42
|
};
|
|
25
43
|
React.useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","usePortalMountNode","
|
|
1
|
+
{"version":3,"names":["isHTMLElement","React","setVirtualParent","usePortalMountNode","toMountNodeProps","mountNode","element","usePortal_unstable","props","className","virtualParentRootRef","useRef","fallbackElement","disabled","state","children","useEffect","current","undefined"],"sources":["../src/packages/react-components/react-portal/src/components/Portal/usePortal.ts"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { setVirtualParent } from '../../virtualParent/index';\nimport { usePortalMountNode } from './usePortalMountNode';\nimport type { PortalProps, PortalState } from './Portal.types';\n\nexport function toMountNodeProps(mountNode: PortalProps['mountNode']): {\n element?: HTMLElement | null;\n className?: string;\n} {\n if (isHTMLElement(mountNode)) {\n return { element: mountNode };\n }\n\n if (typeof mountNode === 'object') {\n if (mountNode === null) {\n return { element: null };\n }\n\n return mountNode;\n }\n\n return {};\n}\n\n/**\n * Create the state required to render Portal.\n *\n * The returned state can be modified with hooks such as usePortalStyles, before being passed to renderPortal_unstable.\n *\n * @param props - props from this instance of Portal\n */\nexport const usePortal_unstable = (props: PortalProps): PortalState => {\n const { element, className } = toMountNodeProps(props.mountNode);\n\n const virtualParentRootRef = React.useRef<HTMLSpanElement>(null);\n const fallbackElement = usePortalMountNode({ disabled: !!element, className });\n\n const state: PortalState = {\n children: props.children,\n mountNode: element ?? fallbackElement,\n virtualParentRootRef,\n };\n\n React.useEffect(() => {\n if (state.virtualParentRootRef.current && state.mountNode) {\n setVirtualParent(state.mountNode, state.virtualParentRootRef.current);\n }\n return () => {\n if (state.mountNode) {\n setVirtualParent(state.mountNode, undefined);\n }\n };\n }, [state.virtualParentRootRef, state.mountNode]);\n\n return state;\n};\n"],"mappings":"AAAA,SAASA,aAAa,QAAQ,2BAA2B;AACzD,OAAO,KAAKC,KAAK,MAAM,OAAO;AAE9B,SAASC,gBAAgB,QAAQ,2BAA2B;AAC5D,SAASC,kBAAkB,QAAQ,sBAAsB;AAGzD,OAAM,SAAUC,gBAAgBA,CAACC,SAAmC;EAIlE,IAAIL,aAAa,CAACK,SAAS,CAAC,EAAE;IAC5B,OAAO;MAAEC,OAAO,EAAED;IAAS,CAAE;;EAG/B,IAAI,OAAOA,SAAS,KAAK,QAAQ,EAAE;IACjC,IAAIA,SAAS,KAAK,IAAI,EAAE;MACtB,OAAO;QAAEC,OAAO,EAAE;MAAI,CAAE;;IAG1B,OAAOD,SAAS;;EAGlB,OAAO,EAAE;AACX;AAEA;;;;;;;AAOA,OAAO,MAAME,kBAAkB,GAAIC,KAAkB,IAAiB;EACpE,MAAM;IAAEF,OAAO;IAAEG;EAAS,CAAE,GAAGL,gBAAgB,CAACI,KAAK,CAACH,SAAS,CAAC;EAEhE,MAAMK,oBAAoB,GAAGT,KAAK,CAACU,MAAM,CAAkB,IAAI,CAAC;EAChE,MAAMC,eAAe,GAAGT,kBAAkB,CAAC;IAAEU,QAAQ,EAAE,CAAC,CAACP,OAAO;IAAEG;EAAS,CAAE,CAAC;EAE9E,MAAMK,KAAK,GAAgB;IACzBC,QAAQ,EAAEP,KAAK,CAACO,QAAQ;IACxBV,SAAS,EAAEC,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIM,eAAe;IACrCF;GACD;EAEDT,KAAK,CAACe,SAAS,CAAC,MAAK;IACnB,IAAIF,KAAK,CAACJ,oBAAoB,CAACO,OAAO,IAAIH,KAAK,CAACT,SAAS,EAAE;MACzDH,gBAAgB,CAACY,KAAK,CAACT,SAAS,EAAES,KAAK,CAACJ,oBAAoB,CAACO,OAAO,CAAC;;IAEvE,OAAO,MAAK;MACV,IAAIH,KAAK,CAACT,SAAS,EAAE;QACnBH,gBAAgB,CAACY,KAAK,CAACT,SAAS,EAAEa,SAAS,CAAC;;IAEhD,CAAC;EACH,CAAC,EAAE,CAACJ,KAAK,CAACJ,oBAAoB,EAAEI,KAAK,CAACT,SAAS,CAAC,CAAC;EAEjD,OAAOS,KAAK;AACd,CAAC"}
|
|
@@ -12,9 +12,8 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
12
12
|
}, {
|
|
13
13
|
d: [".f10pi13n{position:relative;}", ".f494woh{z-index:1000000;}"]
|
|
14
14
|
});
|
|
15
|
-
const reactMajorVersion = /*#__PURE__*/Number( /*#__PURE__*/React.version.split('.')[0]);
|
|
16
15
|
/**
|
|
17
|
-
* Creates a new element on a document.body to mount portals
|
|
16
|
+
* Creates a new element on a "document.body" to mount portals.
|
|
18
17
|
*/
|
|
19
18
|
export const usePortalMountNode = options => {
|
|
20
19
|
const {
|
|
@@ -24,7 +23,7 @@ export const usePortalMountNode = options => {
|
|
|
24
23
|
const focusVisibleRef = useFocusVisible();
|
|
25
24
|
const classes = useStyles();
|
|
26
25
|
const themeClassName = useThemeClassName();
|
|
27
|
-
const className = mergeClasses(themeClassName, classes.root);
|
|
26
|
+
const className = mergeClasses(themeClassName, classes.root, options.className);
|
|
28
27
|
const element = useDisposable(() => {
|
|
29
28
|
if (targetDocument === undefined || options.disabled) {
|
|
30
29
|
return [null, () => null];
|
|
@@ -33,7 +32,7 @@ export const usePortalMountNode = options => {
|
|
|
33
32
|
targetDocument.body.appendChild(newElement);
|
|
34
33
|
return [newElement, () => newElement.remove()];
|
|
35
34
|
}, [targetDocument]);
|
|
36
|
-
if (
|
|
35
|
+
if (useInsertionEffect) {
|
|
37
36
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
38
37
|
useInsertionEffect(() => {
|
|
39
38
|
if (!element) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useThemeClassName_unstable","useThemeClassName","useFluent_unstable","useFluent","__styles","mergeClasses","useFocusVisible","useDisposable","useInsertionEffect","useStyles","root","qhf8xq","Bj3rh1h","d","
|
|
1
|
+
{"version":3,"names":["React","useThemeClassName_unstable","useThemeClassName","useFluent_unstable","useFluent","__styles","mergeClasses","useFocusVisible","useDisposable","useInsertionEffect","useStyles","root","qhf8xq","Bj3rh1h","d","usePortalMountNode","options","targetDocument","dir","focusVisibleRef","classes","themeClassName","className","element","undefined","disabled","newElement","createElement","body","appendChild","remove","classesToApply","split","filter","Boolean","classList","add","setAttribute","current","removeAttribute","useMemo"],"sources":["../src/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 | undefined;\n\nexport type UsePortalMountNodeOptions = {\n /**\n * Since hooks cannot be called conditionally use this flag to disable creating the node\n */\n disabled?: boolean;\n\n className?: string;\n};\n\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, options.className);\n\n const element = useDisposable(() => {\n if (targetDocument === undefined || options.disabled) {\n return [null, () => null];\n }\n\n const newElement = targetDocument.createElement('div');\n targetDocument.body.appendChild(newElement);\n return [newElement, () => newElement.remove()];\n }, [targetDocument]);\n\n if (useInsertionEffect) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useInsertionEffect(() => {\n if (!element) {\n return;\n }\n\n const classesToApply = className.split(' ').filter(Boolean);\n\n element.classList.add(...classesToApply);\n element.setAttribute('dir', dir);\n focusVisibleRef.current = element;\n\n return () => {\n element.classList.remove(...classesToApply);\n element.removeAttribute('dir');\n };\n }, [className, dir, element, focusVisibleRef]);\n } else {\n // This useMemo call is intentional for React 17\n // We don't want to re-create the portal element when its attributes change.\n // This also should not be done in an effect because, changing the value of css variables\n // after initial mount can trigger interesting CSS side effects like transitions.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useMemo(() => {\n if (!element) {\n return;\n }\n\n // Force replace all classes\n element.className = className;\n element.setAttribute('dir', dir);\n focusVisibleRef.current = element;\n }, [className, dir, element, focusVisibleRef]);\n }\n\n return element;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,0BAA0B,IAAIC,iBAAiB,EAC/CC,kBAAkB,IAAIC,SAAS,QAC1B,iCAAiC;AACxC,SAAAC,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,eAAe,QAAQ,yBAAyB;AACzD,SAASC,aAAa,QAAQ,gBAAgB;AAE9C,MAAMC,kBAAkB,GAAIT,KAAe,CAAC,cAAc,GAAG,QAAQ,CAA6C;AAWlH,MAAMU,SAAS,gBAAGL,QAAA;EAAAM,IAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAKhB;AAEF;;;AAGA,OAAO,MAAMC,kBAAkB,GAAIC,OAAkC,IAAwB;EAC3F,MAAM;IAAEC,cAAc;IAAEC;EAAG,CAAE,GAAGd,SAAS,EAAE;EAC3C,MAAMe,eAAe,GAAGZ,eAAe,EAAgE;EACvG,MAAMa,OAAO,GAAGV,SAAS,EAAE;EAC3B,MAAMW,cAAc,GAAGnB,iBAAiB,EAAE;EAE1C,MAAMoB,SAAS,GAAGhB,YAAY,CAACe,cAAc,EAAED,OAAO,CAACT,IAAI,EAAEK,OAAO,CAACM,SAAS,CAAC;EAE/E,MAAMC,OAAO,GAAGf,aAAa,CAAC,MAAK;IACjC,IAAIS,cAAc,KAAKO,SAAS,IAAIR,OAAO,CAACS,QAAQ,EAAE;MACpD,OAAO,CAAC,IAAI,EAAE,MAAM,IAAI,CAAC;;IAG3B,MAAMC,UAAU,GAAGT,cAAc,CAACU,aAAa,CAAC,KAAK,CAAC;IACtDV,cAAc,CAACW,IAAI,CAACC,WAAW,CAACH,UAAU,CAAC;IAC3C,OAAO,CAACA,UAAU,EAAE,MAAMA,UAAU,CAACI,MAAM,EAAE,CAAC;EAChD,CAAC,EAAE,CAACb,cAAc,CAAC,CAAC;EAEpB,IAAIR,kBAAkB,EAAE;IACtB;IACAA,kBAAkB,CAAC,MAAK;MACtB,IAAI,CAACc,OAAO,EAAE;QACZ;;MAGF,MAAMQ,cAAc,GAAGT,SAAS,CAACU,KAAK,CAAC,GAAG,CAAC,CAACC,MAAM,CAACC,OAAO,CAAC;MAE3DX,OAAO,CAACY,SAAS,CAACC,GAAG,CAAC,GAAGL,cAAc,CAAC;MACxCR,OAAO,CAACc,YAAY,CAAC,KAAK,EAAEnB,GAAG,CAAC;MAChCC,eAAe,CAACmB,OAAO,GAAGf,OAAO;MAEjC,OAAO,MAAK;QACVA,OAAO,CAACY,SAAS,CAACL,MAAM,CAAC,GAAGC,cAAc,CAAC;QAC3CR,OAAO,CAACgB,eAAe,CAAC,KAAK,CAAC;MAChC,CAAC;IACH,CAAC,EAAE,CAACjB,SAAS,EAAEJ,GAAG,EAAEK,OAAO,EAAEJ,eAAe,CAAC,CAAC;GAC/C,MAAM;IACL;IACA;IACA;IACA;IACA;IACAnB,KAAK,CAACwC,OAAO,CAAC,MAAK;MACjB,IAAI,CAACjB,OAAO,EAAE;QACZ;;MAGF;MACAA,OAAO,CAACD,SAAS,GAAGA,SAAS;MAC7BC,OAAO,CAACc,YAAY,CAAC,KAAK,EAAEnB,GAAG,CAAC;MAChCC,eAAe,CAACmB,OAAO,GAAGf,OAAO;IACnC,CAAC,EAAE,CAACD,SAAS,EAAEJ,GAAG,EAAEK,OAAO,EAAEJ,eAAe,CAAC,CAAC;;EAGhD,OAAOI,OAAO;AAChB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Portal.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-portal/src/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'>
|
|
1
|
+
{"version":3,"file":"Portal.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-portal/src/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 | { element?: HTMLElement | null; className?: string };\n};\n\nexport type PortalState = Pick<PortalProps, 'children'> & {\n mountNode: HTMLElement | null | undefined;\n\n /**\n * Ref to the root span element as virtual parent\n */\n virtualParentRootRef: React.MutableRefObject<HTMLSpanElement | null>;\n};\n"]}
|
|
@@ -1,7 +1,20 @@
|
|
|
1
|
-
define(["require", "exports", "react", "
|
|
1
|
+
define(["require", "exports", "@fluentui/react-utilities", "react", "../../virtualParent/index", "./usePortalMountNode"], function (require, exports, react_utilities_1, React, index_1, usePortalMountNode_1) {
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.usePortal_unstable = void 0;
|
|
4
|
+
exports.usePortal_unstable = exports.toMountNodeProps = void 0;
|
|
5
|
+
function toMountNodeProps(mountNode) {
|
|
6
|
+
if (react_utilities_1.isHTMLElement(mountNode)) {
|
|
7
|
+
return { element: mountNode };
|
|
8
|
+
}
|
|
9
|
+
if (typeof mountNode === 'object') {
|
|
10
|
+
if (mountNode === null) {
|
|
11
|
+
return { element: null };
|
|
12
|
+
}
|
|
13
|
+
return mountNode;
|
|
14
|
+
}
|
|
15
|
+
return {};
|
|
16
|
+
}
|
|
17
|
+
exports.toMountNodeProps = toMountNodeProps;
|
|
5
18
|
/**
|
|
6
19
|
* Create the state required to render Portal.
|
|
7
20
|
*
|
|
@@ -10,12 +23,12 @@ define(["require", "exports", "react", "./usePortalMountNode", "../../virtualPar
|
|
|
10
23
|
* @param props - props from this instance of Portal
|
|
11
24
|
*/
|
|
12
25
|
var usePortal_unstable = function (props) {
|
|
13
|
-
var
|
|
26
|
+
var _a = toMountNodeProps(props.mountNode), element = _a.element, className = _a.className;
|
|
14
27
|
var virtualParentRootRef = React.useRef(null);
|
|
15
|
-
var
|
|
28
|
+
var fallbackElement = usePortalMountNode_1.usePortalMountNode({ disabled: !!element, className: className });
|
|
16
29
|
var state = {
|
|
17
|
-
children: children,
|
|
18
|
-
mountNode:
|
|
30
|
+
children: props.children,
|
|
31
|
+
mountNode: element !== null && element !== void 0 ? element : fallbackElement,
|
|
19
32
|
virtualParentRootRef: virtualParentRootRef,
|
|
20
33
|
};
|
|
21
34
|
React.useEffect(function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePortal.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-portal/src/components/Portal/usePortal.ts"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"usePortal.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-portal/src/components/Portal/usePortal.ts"],"names":[],"mappings":";;;;IAOA,SAAgB,gBAAgB,CAAC,SAAmC;QAIlE,IAAI,+BAAa,CAAC,SAAS,CAAC,EAAE;YAC5B,OAAO,EAAE,OAAO,EAAE,SAAS,EAAE,CAAC;SAC/B;QAED,IAAI,OAAO,SAAS,KAAK,QAAQ,EAAE;YACjC,IAAI,SAAS,KAAK,IAAI,EAAE;gBACtB,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;aAC1B;YAED,OAAO,SAAS,CAAC;SAClB;QAED,OAAO,EAAE,CAAC;IACZ,CAAC;IAjBD,4CAiBC;IAED;;;;;;OAMG;IACI,IAAM,kBAAkB,GAAG,UAAC,KAAkB;QAC7C,IAAA,KAAyB,gBAAgB,CAAC,KAAK,CAAC,SAAS,CAAC,EAAxD,OAAO,aAAA,EAAE,SAAS,eAAsC,CAAC;QAEjE,IAAM,oBAAoB,GAAG,KAAK,CAAC,MAAM,CAAkB,IAAI,CAAC,CAAC;QACjE,IAAM,eAAe,GAAG,uCAAkB,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,OAAO,EAAE,SAAS,WAAA,EAAE,CAAC,CAAC;QAE/E,IAAM,KAAK,GAAgB;YACzB,QAAQ,EAAE,KAAK,CAAC,QAAQ;YACxB,SAAS,EAAE,OAAO,aAAP,OAAO,cAAP,OAAO,GAAI,eAAe;YACrC,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;oBACnB,wBAAgB,CAAC,KAAK,CAAC,SAAS,EAAE,SAAS,CAAC,CAAC;iBAC9C;YACH,CAAC,CAAC;QACJ,CAAC,EAAE,CAAC,KAAK,CAAC,oBAAoB,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;QAElD,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAxBW,QAAA,kBAAkB,sBAwB7B","sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { setVirtualParent } from '../../virtualParent/index';\nimport { usePortalMountNode } from './usePortalMountNode';\nimport type { PortalProps, PortalState } from './Portal.types';\n\nexport function toMountNodeProps(mountNode: PortalProps['mountNode']): {\n element?: HTMLElement | null;\n className?: string;\n} {\n if (isHTMLElement(mountNode)) {\n return { element: mountNode };\n }\n\n if (typeof mountNode === 'object') {\n if (mountNode === null) {\n return { element: null };\n }\n\n return mountNode;\n }\n\n return {};\n}\n\n/**\n * Create the state required to render Portal.\n *\n * The returned state can be modified with hooks such as usePortalStyles, before being passed to renderPortal_unstable.\n *\n * @param props - props from this instance of Portal\n */\nexport const usePortal_unstable = (props: PortalProps): PortalState => {\n const { element, className } = toMountNodeProps(props.mountNode);\n\n const virtualParentRootRef = React.useRef<HTMLSpanElement>(null);\n const fallbackElement = usePortalMountNode({ disabled: !!element, className });\n\n const state: PortalState = {\n children: props.children,\n mountNode: element ?? fallbackElement,\n virtualParentRootRef,\n };\n\n React.useEffect(() => {\n if (state.virtualParentRootRef.current && state.mountNode) {\n setVirtualParent(state.mountNode, state.virtualParentRootRef.current);\n }\n return () => {\n if (state.mountNode) {\n setVirtualParent(state.mountNode, undefined);\n }\n };\n }, [state.virtualParentRootRef, state.mountNode]);\n\n return state;\n};\n"]}
|
|
@@ -9,16 +9,15 @@ define(["require", "exports", "react", "@fluentui/react-shared-contexts", "@grif
|
|
|
9
9
|
zIndex: 1000000,
|
|
10
10
|
},
|
|
11
11
|
});
|
|
12
|
-
var reactMajorVersion = Number(React.version.split('.')[0]);
|
|
13
12
|
/**
|
|
14
|
-
* Creates a new element on a document.body to mount portals
|
|
13
|
+
* Creates a new element on a "document.body" to mount portals.
|
|
15
14
|
*/
|
|
16
15
|
var usePortalMountNode = function (options) {
|
|
17
16
|
var _a = react_shared_contexts_1.useFluent_unstable(), targetDocument = _a.targetDocument, dir = _a.dir;
|
|
18
17
|
var focusVisibleRef = react_tabster_1.useFocusVisible();
|
|
19
18
|
var classes = useStyles();
|
|
20
19
|
var themeClassName = react_shared_contexts_1.useThemeClassName_unstable();
|
|
21
|
-
var className = react_1.mergeClasses(themeClassName, classes.root);
|
|
20
|
+
var className = react_1.mergeClasses(themeClassName, classes.root, options.className);
|
|
22
21
|
var element = use_disposable_1.useDisposable(function () {
|
|
23
22
|
if (targetDocument === undefined || options.disabled) {
|
|
24
23
|
return [null, function () { return null; }];
|
|
@@ -27,7 +26,7 @@ define(["require", "exports", "react", "@fluentui/react-shared-contexts", "@grif
|
|
|
27
26
|
targetDocument.body.appendChild(newElement);
|
|
28
27
|
return [newElement, function () { return newElement.remove(); }];
|
|
29
28
|
}, [targetDocument]);
|
|
30
|
-
if (
|
|
29
|
+
if (useInsertionEffect) {
|
|
31
30
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
32
31
|
useInsertionEffect(function () {
|
|
33
32
|
var _a;
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,CAA6C,CAAC;IAWnH,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,OAAO;SAChB;KACF,CAAC,CAAC;IAEH;;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,EAAE,OAAO,CAAC,SAAS,CAAC,CAAC;QAEhF,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,kBAAkB,EAAE;YACtB,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 | undefined;\n\nexport type UsePortalMountNodeOptions = {\n /**\n * Since hooks cannot be called conditionally use this flag to disable creating the node\n */\n disabled?: boolean;\n\n className?: string;\n};\n\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, options.className);\n\n const element = useDisposable(() => {\n if (targetDocument === undefined || options.disabled) {\n return [null, () => null];\n }\n\n const newElement = targetDocument.createElement('div');\n targetDocument.body.appendChild(newElement);\n return [newElement, () => newElement.remove()];\n }, [targetDocument]);\n\n if (useInsertionEffect) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useInsertionEffect(() => {\n if (!element) {\n return;\n }\n\n const classesToApply = className.split(' ').filter(Boolean);\n\n element.classList.add(...classesToApply);\n element.setAttribute('dir', dir);\n focusVisibleRef.current = element;\n\n return () => {\n element.classList.remove(...classesToApply);\n element.removeAttribute('dir');\n };\n }, [className, dir, element, focusVisibleRef]);\n } else {\n // This useMemo call is intentional for React 17\n // We don't want to re-create the portal element when its attributes change.\n // This also should not be done in an effect because, changing the value of css variables\n // after initial mount can trigger interesting CSS side effects like transitions.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useMemo(() => {\n if (!element) {\n return;\n }\n\n // Force replace all classes\n element.className = className;\n element.setAttribute('dir', dir);\n focusVisibleRef.current = element;\n }, [className, dir, element, focusVisibleRef]);\n }\n\n return element;\n};\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["../src/packages/react-components/react-portal/src/components/Portal/Portal.types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type PortalProps = {\n /**\n * React children\n */\n children?: React.ReactNode;\n\n /**\n * Where the portal children are mounted on DOM\n *\n * @default a new element on document.body without any styling\n */\n mountNode?: HTMLElement | null;\n};\n\nexport type PortalState = Pick<PortalProps, 'children'>
|
|
1
|
+
{"version":3,"names":[],"sources":["../src/packages/react-components/react-portal/src/components/Portal/Portal.types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport type PortalProps = {\n /**\n * React children\n */\n children?: React.ReactNode;\n\n /**\n * Where the portal children are mounted on DOM\n *\n * @default a new element on document.body without any styling\n */\n mountNode?: HTMLElement | null | { element?: HTMLElement | null; className?: string };\n};\n\nexport type PortalState = Pick<PortalProps, 'children'> & {\n mountNode: HTMLElement | null | undefined;\n\n /**\n * Ref to the root span element as virtual parent\n */\n virtualParentRootRef: React.MutableRefObject<HTMLSpanElement | null>;\n};\n"],"mappings":""}
|
|
@@ -3,10 +3,28 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.usePortal_unstable = void 0;
|
|
6
|
+
exports.usePortal_unstable = exports.toMountNodeProps = void 0;
|
|
7
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
7
8
|
const React = /*#__PURE__*/require("react");
|
|
8
|
-
const usePortalMountNode_1 = /*#__PURE__*/require("./usePortalMountNode");
|
|
9
9
|
const index_1 = /*#__PURE__*/require("../../virtualParent/index");
|
|
10
|
+
const usePortalMountNode_1 = /*#__PURE__*/require("./usePortalMountNode");
|
|
11
|
+
function toMountNodeProps(mountNode) {
|
|
12
|
+
if (react_utilities_1.isHTMLElement(mountNode)) {
|
|
13
|
+
return {
|
|
14
|
+
element: mountNode
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
if (typeof mountNode === 'object') {
|
|
18
|
+
if (mountNode === null) {
|
|
19
|
+
return {
|
|
20
|
+
element: null
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
return mountNode;
|
|
24
|
+
}
|
|
25
|
+
return {};
|
|
26
|
+
}
|
|
27
|
+
exports.toMountNodeProps = toMountNodeProps;
|
|
10
28
|
/**
|
|
11
29
|
* Create the state required to render Portal.
|
|
12
30
|
*
|
|
@@ -16,16 +34,17 @@ const index_1 = /*#__PURE__*/require("../../virtualParent/index");
|
|
|
16
34
|
*/
|
|
17
35
|
const usePortal_unstable = props => {
|
|
18
36
|
const {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
} = props;
|
|
37
|
+
element,
|
|
38
|
+
className
|
|
39
|
+
} = toMountNodeProps(props.mountNode);
|
|
22
40
|
const virtualParentRootRef = React.useRef(null);
|
|
23
|
-
const
|
|
24
|
-
disabled: !!
|
|
41
|
+
const fallbackElement = usePortalMountNode_1.usePortalMountNode({
|
|
42
|
+
disabled: !!element,
|
|
43
|
+
className
|
|
25
44
|
});
|
|
26
45
|
const state = {
|
|
27
|
-
children,
|
|
28
|
-
mountNode:
|
|
46
|
+
children: props.children,
|
|
47
|
+
mountNode: element !== null && element !== void 0 ? element : fallbackElement,
|
|
29
48
|
virtualParentRootRef
|
|
30
49
|
};
|
|
31
50
|
React.useEffect(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["
|
|
1
|
+
{"version":3,"names":["react_utilities_1","require","React","index_1","usePortalMountNode_1","toMountNodeProps","mountNode","isHTMLElement","element","exports","usePortal_unstable","props","className","virtualParentRootRef","useRef","fallbackElement","usePortalMountNode","disabled","state","children","useEffect","current","setVirtualParent","undefined"],"sources":["../src/packages/react-components/react-portal/src/components/Portal/usePortal.ts"],"sourcesContent":["import { isHTMLElement } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { setVirtualParent } from '../../virtualParent/index';\nimport { usePortalMountNode } from './usePortalMountNode';\nimport type { PortalProps, PortalState } from './Portal.types';\n\nexport function toMountNodeProps(mountNode: PortalProps['mountNode']): {\n element?: HTMLElement | null;\n className?: string;\n} {\n if (isHTMLElement(mountNode)) {\n return { element: mountNode };\n }\n\n if (typeof mountNode === 'object') {\n if (mountNode === null) {\n return { element: null };\n }\n\n return mountNode;\n }\n\n return {};\n}\n\n/**\n * Create the state required to render Portal.\n *\n * The returned state can be modified with hooks such as usePortalStyles, before being passed to renderPortal_unstable.\n *\n * @param props - props from this instance of Portal\n */\nexport const usePortal_unstable = (props: PortalProps): PortalState => {\n const { element, className } = toMountNodeProps(props.mountNode);\n\n const virtualParentRootRef = React.useRef<HTMLSpanElement>(null);\n const fallbackElement = usePortalMountNode({ disabled: !!element, className });\n\n const state: PortalState = {\n children: props.children,\n mountNode: element ?? fallbackElement,\n virtualParentRootRef,\n };\n\n React.useEffect(() => {\n if (state.virtualParentRootRef.current && state.mountNode) {\n setVirtualParent(state.mountNode, state.virtualParentRootRef.current);\n }\n return () => {\n if (state.mountNode) {\n setVirtualParent(state.mountNode, undefined);\n }\n };\n }, [state.virtualParentRootRef, state.mountNode]);\n\n return state;\n};\n"],"mappings":";;;;;;AAAA,MAAAA,iBAAA,gBAAAC,OAAA;AACA,MAAAC,KAAA,gBAAAD,OAAA;AAEA,MAAAE,OAAA,gBAAAF,OAAA;AACA,MAAAG,oBAAA,gBAAAH,OAAA;AAGA,SAAgBI,gBAAgBA,CAACC,SAAmC;EAIlE,IAAIN,iBAAA,CAAAO,aAAa,CAACD,SAAS,CAAC,EAAE;IAC5B,OAAO;MAAEE,OAAO,EAAEF;IAAS,CAAE;;EAG/B,IAAI,OAAOA,SAAS,KAAK,QAAQ,EAAE;IACjC,IAAIA,SAAS,KAAK,IAAI,EAAE;MACtB,OAAO;QAAEE,OAAO,EAAE;MAAI,CAAE;;IAG1B,OAAOF,SAAS;;EAGlB,OAAO,EAAE;AACX;AAjBAG,OAAA,CAAAJ,gBAAA,GAAAA,gBAAA;AAmBA;;;;;;;AAOO,MAAMK,kBAAkB,GAAIC,KAAkB,IAAiB;EACpE,MAAM;IAAEH,OAAO;IAAEI;EAAS,CAAE,GAAGP,gBAAgB,CAACM,KAAK,CAACL,SAAS,CAAC;EAEhE,MAAMO,oBAAoB,GAAGX,KAAK,CAACY,MAAM,CAAkB,IAAI,CAAC;EAChE,MAAMC,eAAe,GAAGX,oBAAA,CAAAY,kBAAkB,CAAC;IAAEC,QAAQ,EAAE,CAAC,CAACT,OAAO;IAAEI;EAAS,CAAE,CAAC;EAE9E,MAAMM,KAAK,GAAgB;IACzBC,QAAQ,EAAER,KAAK,CAACQ,QAAQ;IACxBb,SAAS,EAAEE,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAIO,eAAe;IACrCF;GACD;EAEDX,KAAK,CAACkB,SAAS,CAAC,MAAK;IACnB,IAAIF,KAAK,CAACL,oBAAoB,CAACQ,OAAO,IAAIH,KAAK,CAACZ,SAAS,EAAE;MACzDH,OAAA,CAAAmB,gBAAgB,CAACJ,KAAK,CAACZ,SAAS,EAAEY,KAAK,CAACL,oBAAoB,CAACQ,OAAO,CAAC;;IAEvE,OAAO,MAAK;MACV,IAAIH,KAAK,CAACZ,SAAS,EAAE;QACnBH,OAAA,CAAAmB,gBAAgB,CAACJ,KAAK,CAACZ,SAAS,EAAEiB,SAAS,CAAC;;IAEhD,CAAC;EACH,CAAC,EAAE,CAACL,KAAK,CAACL,oBAAoB,EAAEK,KAAK,CAACZ,SAAS,CAAC,CAAC;EAEjD,OAAOY,KAAK;AACd,CAAC;AAxBYT,OAAA,CAAAC,kBAAkB,GAAAA,kBAAA"}
|
|
@@ -18,9 +18,8 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
18
18
|
}, {
|
|
19
19
|
d: [".f10pi13n{position:relative;}", ".f494woh{z-index:1000000;}"]
|
|
20
20
|
});
|
|
21
|
-
const reactMajorVersion = /*#__PURE__*/Number( /*#__PURE__*/React.version.split('.')[0]);
|
|
22
21
|
/**
|
|
23
|
-
* Creates a new element on a document.body to mount portals
|
|
22
|
+
* Creates a new element on a "document.body" to mount portals.
|
|
24
23
|
*/
|
|
25
24
|
const usePortalMountNode = options => {
|
|
26
25
|
const {
|
|
@@ -30,7 +29,7 @@ const usePortalMountNode = options => {
|
|
|
30
29
|
const focusVisibleRef = react_tabster_1.useFocusVisible();
|
|
31
30
|
const classes = useStyles();
|
|
32
31
|
const themeClassName = react_shared_contexts_1.useThemeClassName_unstable();
|
|
33
|
-
const className = react_1.mergeClasses(themeClassName, classes.root);
|
|
32
|
+
const className = react_1.mergeClasses(themeClassName, classes.root, options.className);
|
|
34
33
|
const element = use_disposable_1.useDisposable(() => {
|
|
35
34
|
if (targetDocument === undefined || options.disabled) {
|
|
36
35
|
return [null, () => null];
|
|
@@ -39,7 +38,7 @@ const usePortalMountNode = options => {
|
|
|
39
38
|
targetDocument.body.appendChild(newElement);
|
|
40
39
|
return [newElement, () => newElement.remove()];
|
|
41
40
|
}, [targetDocument]);
|
|
42
|
-
if (
|
|
41
|
+
if (useInsertionEffect) {
|
|
43
42
|
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
44
43
|
useInsertionEffect(() => {
|
|
45
44
|
if (!element) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","require","react_shared_contexts_1","react_1","react_tabster_1","use_disposable_1","useInsertionEffect","useStyles","__styles","root","qhf8xq","Bj3rh1h","d","
|
|
1
|
+
{"version":3,"names":["React","require","react_shared_contexts_1","react_1","react_tabster_1","use_disposable_1","useInsertionEffect","useStyles","__styles","root","qhf8xq","Bj3rh1h","d","usePortalMountNode","options","targetDocument","dir","useFluent_unstable","focusVisibleRef","useFocusVisible","classes","themeClassName","useThemeClassName_unstable","className","mergeClasses","element","useDisposable","undefined","disabled","newElement","createElement","body","appendChild","remove","classesToApply","split","filter","Boolean","classList","add","setAttribute","current","removeAttribute","useMemo","exports"],"sources":["../src/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 | undefined;\n\nexport type UsePortalMountNodeOptions = {\n /**\n * Since hooks cannot be called conditionally use this flag to disable creating the node\n */\n disabled?: boolean;\n\n className?: string;\n};\n\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, options.className);\n\n const element = useDisposable(() => {\n if (targetDocument === undefined || options.disabled) {\n return [null, () => null];\n }\n\n const newElement = targetDocument.createElement('div');\n targetDocument.body.appendChild(newElement);\n return [newElement, () => newElement.remove()];\n }, [targetDocument]);\n\n if (useInsertionEffect) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n useInsertionEffect(() => {\n if (!element) {\n return;\n }\n\n const classesToApply = className.split(' ').filter(Boolean);\n\n element.classList.add(...classesToApply);\n element.setAttribute('dir', dir);\n focusVisibleRef.current = element;\n\n return () => {\n element.classList.remove(...classesToApply);\n element.removeAttribute('dir');\n };\n }, [className, dir, element, focusVisibleRef]);\n } else {\n // This useMemo call is intentional for React 17\n // We don't want to re-create the portal element when its attributes change.\n // This also should not be done in an effect because, changing the value of css variables\n // after initial mount can trigger interesting CSS side effects like transitions.\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useMemo(() => {\n if (!element) {\n return;\n }\n\n // Force replace all classes\n element.className = className;\n element.setAttribute('dir', dir);\n focusVisibleRef.current = element;\n }, [className, dir, element, focusVisibleRef]);\n }\n\n return element;\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,uBAAA,gBAAAD,OAAA;AAIA,MAAAE,OAAA,gBAAAF,OAAA;AACA,MAAAG,eAAA,gBAAAH,OAAA;AACA,MAAAI,gBAAA,gBAAAJ,OAAA;AAEA,MAAMK,kBAAkB,GAAIN,KAAe,CAAC,cAAc,GAAG,QAAQ,CAA6C;AAWlH,MAAMO,SAAS,gBAAGJ,OAAA,CAAAK,QAAU;EAAAC,IAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAK1B;AAEF;;;AAGO,MAAMC,kBAAkB,GAAIC,OAAkC,IAAwB;EAC3F,MAAM;IAAEC,cAAc;IAAEC;EAAG,CAAE,GAAGd,uBAAA,CAAAe,kBAAS,EAAE;EAC3C,MAAMC,eAAe,GAAGd,eAAA,CAAAe,eAAe,EAAgE;EACvG,MAAMC,OAAO,GAAGb,SAAS,EAAE;EAC3B,MAAMc,cAAc,GAAGnB,uBAAA,CAAAoB,0BAAiB,EAAE;EAE1C,MAAMC,SAAS,GAAGpB,OAAA,CAAAqB,YAAY,CAACH,cAAc,EAAED,OAAO,CAACX,IAAI,EAAEK,OAAO,CAACS,SAAS,CAAC;EAE/E,MAAME,OAAO,GAAGpB,gBAAA,CAAAqB,aAAa,CAAC,MAAK;IACjC,IAAIX,cAAc,KAAKY,SAAS,IAAIb,OAAO,CAACc,QAAQ,EAAE;MACpD,OAAO,CAAC,IAAI,EAAE,MAAM,IAAI,CAAC;;IAG3B,MAAMC,UAAU,GAAGd,cAAc,CAACe,aAAa,CAAC,KAAK,CAAC;IACtDf,cAAc,CAACgB,IAAI,CAACC,WAAW,CAACH,UAAU,CAAC;IAC3C,OAAO,CAACA,UAAU,EAAE,MAAMA,UAAU,CAACI,MAAM,EAAE,CAAC;EAChD,CAAC,EAAE,CAAClB,cAAc,CAAC,CAAC;EAEpB,IAAIT,kBAAkB,EAAE;IACtB;IACAA,kBAAkB,CAAC,MAAK;MACtB,IAAI,CAACmB,OAAO,EAAE;QACZ;;MAGF,MAAMS,cAAc,GAAGX,SAAS,CAACY,KAAK,CAAC,GAAG,CAAC,CAACC,MAAM,CAACC,OAAO,CAAC;MAE3DZ,OAAO,CAACa,SAAS,CAACC,GAAG,CAAC,GAAGL,cAAc,CAAC;MACxCT,OAAO,CAACe,YAAY,CAAC,KAAK,EAAExB,GAAG,CAAC;MAChCE,eAAe,CAACuB,OAAO,GAAGhB,OAAO;MAEjC,OAAO,MAAK;QACVA,OAAO,CAACa,SAAS,CAACL,MAAM,CAAC,GAAGC,cAAc,CAAC;QAC3CT,OAAO,CAACiB,eAAe,CAAC,KAAK,CAAC;MAChC,CAAC;IACH,CAAC,EAAE,CAACnB,SAAS,EAAEP,GAAG,EAAES,OAAO,EAAEP,eAAe,CAAC,CAAC;GAC/C,MAAM;IACL;IACA;IACA;IACA;IACA;IACAlB,KAAK,CAAC2C,OAAO,CAAC,MAAK;MACjB,IAAI,CAAClB,OAAO,EAAE;QACZ;;MAGF;MACAA,OAAO,CAACF,SAAS,GAAGA,SAAS;MAC7BE,OAAO,CAACe,YAAY,CAAC,KAAK,EAAExB,GAAG,CAAC;MAChCE,eAAe,CAACuB,OAAO,GAAGhB,OAAO;IACnC,CAAC,EAAE,CAACF,SAAS,EAAEP,GAAG,EAAES,OAAO,EAAEP,eAAe,CAAC,CAAC;;EAGhD,OAAOO,OAAO;AAChB,CAAC;AAvDYmB,OAAA,CAAA/B,kBAAkB,GAAAA,kBAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-portal",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.2.0",
|
|
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",
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
"@fluentui/scripts-tasks": "*"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@fluentui/react-shared-contexts": "^9.3.
|
|
35
|
-
"@fluentui/react-tabster": "^9.5.
|
|
36
|
-
"@fluentui/react-utilities": "^9.
|
|
34
|
+
"@fluentui/react-shared-contexts": "^9.3.1",
|
|
35
|
+
"@fluentui/react-tabster": "^9.5.7",
|
|
36
|
+
"@fluentui/react-utilities": "^9.7.0",
|
|
37
37
|
"@griffel/react": "^1.5.2",
|
|
38
38
|
"tslib": "^2.1.0",
|
|
39
39
|
"use-disposable": "^1.0.1"
|