@fluentui/react-portal 9.1.12 → 9.2.0
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 +28 -1
- package/CHANGELOG.md +13 -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 +3 -3
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,34 @@
|
|
|
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",
|
|
6
33
|
"tag": "@fluentui/react-portal_v9.1.12",
|
|
7
34
|
"version": "9.1.12",
|
|
8
35
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,23 @@
|
|
|
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
|
+
|
|
7
18
|
## [9.1.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.1.12)
|
|
8
19
|
|
|
9
|
-
Mon, 13 Mar 2023 08:
|
|
20
|
+
Mon, 13 Mar 2023 08:58:26 GMT
|
|
10
21
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.1.11..@fluentui/react-portal_v9.1.12)
|
|
11
22
|
|
|
12
23
|
### 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,8 +31,8 @@
|
|
|
31
31
|
"@fluentui/scripts-tasks": "*"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@fluentui/react-shared-contexts": "^9.3.
|
|
35
|
-
"@fluentui/react-tabster": "^9.5.
|
|
34
|
+
"@fluentui/react-shared-contexts": "^9.3.1",
|
|
35
|
+
"@fluentui/react-tabster": "^9.5.7",
|
|
36
36
|
"@fluentui/react-utilities": "^9.7.0",
|
|
37
37
|
"@griffel/react": "^1.5.2",
|
|
38
38
|
"tslib": "^2.1.0",
|