npm - @fluentui/react-portal - Versions diffs - 9.6.3 → 9.7.0 - Mend

@fluentui/react-portal 9.6.3 → 9.7.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.

Files changed (14) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,12 +1,31 @@
 # Change Log - @fluentui/react-portal
-This log was last generated on Fri, 27 Jun 2025 13:36:33 GMT and should not be manually modified.
+This log was last generated on Thu, 17 Jul 2025 13:45:43 GMT and should not be manually modified.
 <!-- Start content -->
+## [9.7.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.7.0)
+Thu, 17 Jul 2025 13:45:43 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.6.4..@fluentui/react-portal_v9.7.0)
+### Minor changes
+- feat: enable griffel raw styles ([PR #34853](https://github.com/microsoft/fluentui/pull/34853) by martinhochel@microsoft.com)
+- Bump @fluentui/react-tabster to v9.26.0 ([PR #34862](https://github.com/microsoft/fluentui/pull/34862) by beachball)
+## [9.6.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.6.4)
+Fri, 04 Jul 2025 10:02:46 GMT
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.6.3..@fluentui/react-portal_v9.6.4)
+### Patches
+- Revert "chore(react-portal): support for React 19" ([PR #34737](https://github.com/microsoft/fluentui/pull/34737) by olfedias@microsoft.com)
 ## [9.6.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.6.3)
-Fri, 27 Jun 2025 13:36:33 GMT
+Fri, 27 Jun 2025 13:39:41 GMT
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.6.2..@fluentui/react-portal_v9.6.3)
 ### Patches

package/lib/components/Portal/usePortal.js CHANGED Viewed

@@ -73,6 +73,7 @@ import { usePortalMountNode } from './usePortalMountNode';
             };
         }
     }, [
+        virtualParentRootRef,
         mountNode
     ]);
     return state;

package/lib/components/Portal/usePortal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Portal/usePortal.ts"],"sourcesContent":["import { setVirtualParent } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { toMountNodeProps } from '../../utils/toMountNodeProps';\nimport { usePortalMountNode } from './usePortalMountNode';\nimport type { PortalProps, PortalState } from './Portal.types';\n\n/*\n Create the state required to render Portal.\n \n The returned state can be modified with hooks such as usePortalStyles, before being passed to renderPortal_unstable.\n \n @param props - props from this instance of Portal\n */\nexport const usePortal_unstable = (props: PortalProps): PortalState => {\n const { element, className } = toMountNodeProps(props.mountNode);\n\n const virtualParentRootRef = React.useRef<HTMLSpanElement>(null);\n const fallbackElement = usePortalMountNode({ disabled: !!element, className });\n\n const mountNode = element ?? fallbackElement;\n const state: PortalState = {\n children: props.children,\n mountNode,\n virtualParentRootRef,\n };\n\n React.useEffect(() => {\n if (!mountNode) {\n return;\n }\n\n const virtualParent = virtualParentRootRef.current;\n\n // By default, we create a mount node for portal on `document.body` (see usePortalMountNode()) and have following structure:\n //\n // <body>\n // <!-- ⚛️ application root -->\n // <div id=\"root\">\n // <!-- ⬇️ portal node rendered in a tree to anchor (virtual parent node) -->\n // <span aria-hidden=\"true\"></span>\n // </div>\n // <div id=\"portal-mount-node\">\n // <!-- 🧩portal content -->\n // </div>\n // </body>\n //\n // To make sure that `.elementContains()` works correctly, we link a virtual parent to a portal node (a virtual parent node becomes a parent of mount node):\n // virtual.contains(mountNode) === false\n // (while we need ⬇️⬇️⬇️)\n // elementsContains(virtualParent, mountNode) === true\n // elementsContains(mountNode, virtualParent) === false\n //\n // For more details, check docs for virtual parent utils.\n //\n // However, if a user provides a custom mount node (via `props`) the structure could be different:\n //\n // <body>\n // <!-- application root -->\n // <div id=\"root\">\n // <div id=\"portal-mount-node\">\n // <!-- 🧩portal content -->\n //\n // <span aria-hidden=\"true\"></span>\n // </div>\n // </div>\n // </body>\n //\n // A mount node in this case contains portal's content and a virtual parent node. In this case nodes linking is redundant and the check below avoids it.\n //\n // Otherwise, there is a circular reference - both elements are parents of each other:\n // elementsContains(mountNode, virtualParent) === true\n // elementsContains(virtualParent, mountNode) === true\n const isVirtualParentInsideChild = mountNode.contains(virtualParent);\n\n if (virtualParent && !isVirtualParentInsideChild) {\n setVirtualParent(mountNode, virtualParent);\n\n return () => {\n setVirtualParent(mountNode, undefined);\n };\n }\n }, [mountNode]);\n\n return state;\n};\n"],"names":["setVirtualParent","React","toMountNodeProps","usePortalMountNode","usePortal_unstable","props","element","className","mountNode","virtualParentRootRef","useRef","fallbackElement","disabled","state","children","useEffect","virtualParent","current","isVirtualParentInsideChild","contains","undefined"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":"AAAA,SAASA,gBAAgB,QAAQ,4BAA4B;AAC7D,YAAYC,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,kBAAkB,QAAQ,uBAAuB;AAG1D;;;;;;CAMC,GACD,OAAO,MAAMC,qBAAqB,CAACC;IACjC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGL,iBAAiBG,MAAMG,SAAS;IAE/D,MAAMC,uBAAuBR,MAAMS,MAAM,CAAkB;IAC3D,MAAMC,kBAAkBR,mBAAmB;QAAES,UAAU,CAAC,CAACN;QAASC;IAAU;IAE5E,MAAMC,YAAYF,oBAAAA,qBAAAA,UAAWK;IAC7B,MAAME,QAAqB;QACzBC,UAAUT,MAAMS,QAAQ;QACxBN;QACAC;IACF;IAEAR,MAAMc,SAAS,CAAC;QACd,IAAI,CAACP,WAAW;YACd;QACF;QAEA,MAAMQ,gBAAgBP,qBAAqBQ,OAAO;QAElD,4HAA4H;QAC5H,EAAE;QACF,SAAS;QACT,iCAAiC;QACjC,oBAAoB;QACpB,iFAAiF;QACjF,uCAAuC;QACvC,WAAW;QACX,iCAAiC;QACjC,gCAAgC;QAChC,WAAW;QACX,UAAU;QACV,EAAE;QACF,4JAA4J;QAC5J,0CAA0C;QAC1C,2BAA2B;QAC3B,wDAAwD;QACxD,yDAAyD;QACzD,EAAE;QACF,yDAAyD;QACzD,EAAE;QACF,kGAAkG;QAClG,EAAE;QACF,SAAS;QACT,8BAA8B;QAC9B,oBAAoB;QACpB,mCAAmC;QACnC,kCAAkC;QAClC,EAAE;QACF,yCAAyC;QACzC,aAAa;QACb,WAAW;QACX,UAAU;QACV,EAAE;QACF,wJAAwJ;QACxJ,EAAE;QACF,sFAAsF;QACtF,wDAAwD;QACxD,wDAAwD;QACxD,MAAMC,6BAA6BV,UAAUW,QAAQ,CAACH;QAEtD,IAAIA,iBAAiB,CAACE,4BAA4B;YAChDlB,iBAAiBQ,WAAWQ;YAE5B,OAAO;gBACLhB,iBAAiBQ,WAAWY;YAC9B;QACF;IACF,GAAG;~~QAACZ~~;KAAU;~~IAEd~~,OAAOK;AACT,EAAE"}
1	+ {"version":3,"sources":["../src/components/Portal/usePortal.ts"],"sourcesContent":["import { setVirtualParent } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { toMountNodeProps } from '../../utils/toMountNodeProps';\nimport { usePortalMountNode } from './usePortalMountNode';\nimport type { PortalProps, PortalState } from './Portal.types';\n\n/*\n Create the state required to render Portal.\n \n The returned state can be modified with hooks such as usePortalStyles, before being passed to renderPortal_unstable.\n \n @param props - props from this instance of Portal\n */\nexport const usePortal_unstable = (props: PortalProps): PortalState => {\n const { element, className } = toMountNodeProps(props.mountNode);\n\n const virtualParentRootRef = React.useRef<HTMLSpanElement>(null);\n const fallbackElement = usePortalMountNode({ disabled: !!element, className });\n\n const mountNode = element ?? fallbackElement;\n const state: PortalState = {\n children: props.children,\n mountNode,\n virtualParentRootRef,\n };\n\n React.useEffect(() => {\n if (!mountNode) {\n return;\n }\n\n const virtualParent = virtualParentRootRef.current;\n\n // By default, we create a mount node for portal on `document.body` (see usePortalMountNode()) and have following structure:\n //\n // <body>\n // <!-- ⚛️ application root -->\n // <div id=\"root\">\n // <!-- ⬇️ portal node rendered in a tree to anchor (virtual parent node) -->\n // <span aria-hidden=\"true\"></span>\n // </div>\n // <div id=\"portal-mount-node\">\n // <!-- 🧩portal content -->\n // </div>\n // </body>\n //\n // To make sure that `.elementContains()` works correctly, we link a virtual parent to a portal node (a virtual parent node becomes a parent of mount node):\n // virtual.contains(mountNode) === false\n // (while we need ⬇️⬇️⬇️)\n // elementsContains(virtualParent, mountNode) === true\n // elementsContains(mountNode, virtualParent) === false\n //\n // For more details, check docs for virtual parent utils.\n //\n // However, if a user provides a custom mount node (via `props`) the structure could be different:\n //\n // <body>\n // <!-- application root -->\n // <div id=\"root\">\n // <div id=\"portal-mount-node\">\n // <!-- 🧩portal content -->\n //\n // <span aria-hidden=\"true\"></span>\n // </div>\n // </div>\n // </body>\n //\n // A mount node in this case contains portal's content and a virtual parent node. In this case nodes linking is redundant and the check below avoids it.\n //\n // Otherwise, there is a circular reference - both elements are parents of each other:\n // elementsContains(mountNode, virtualParent) === true\n // elementsContains(virtualParent, mountNode) === true\n const isVirtualParentInsideChild = mountNode.contains(virtualParent);\n\n if (virtualParent && !isVirtualParentInsideChild) {\n setVirtualParent(mountNode, virtualParent);\n\n return () => {\n setVirtualParent(mountNode, undefined);\n };\n }\n }, [virtualParentRootRef, mountNode]);\n\n return state;\n};\n"],"names":["setVirtualParent","React","toMountNodeProps","usePortalMountNode","usePortal_unstable","props","element","className","mountNode","virtualParentRootRef","useRef","fallbackElement","disabled","state","children","useEffect","virtualParent","current","isVirtualParentInsideChild","contains","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,gBAAgB,QAAQ,4BAA4B;AAC7D,YAAYC,WAAW,QAAQ;AAE/B,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,kBAAkB,QAAQ,uBAAuB;AAG1D;;;;;;CAMC,GACD,OAAO,MAAMC,qBAAqB,CAACC;IACjC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGL,iBAAiBG,MAAMG,SAAS;IAE/D,MAAMC,uBAAuBR,MAAMS,MAAM,CAAkB;IAC3D,MAAMC,kBAAkBR,mBAAmB;QAAES,UAAU,CAAC,CAACN;QAASC;IAAU;IAE5E,MAAMC,YAAYF,oBAAAA,qBAAAA,UAAWK;IAC7B,MAAME,QAAqB;QACzBC,UAAUT,MAAMS,QAAQ;QACxBN;QACAC;IACF;IAEAR,MAAMc,SAAS,CAAC;QACd,IAAI,CAACP,WAAW;YACd;QACF;QAEA,MAAMQ,gBAAgBP,qBAAqBQ,OAAO;QAElD,4HAA4H;QAC5H,EAAE;QACF,SAAS;QACT,iCAAiC;QACjC,oBAAoB;QACpB,iFAAiF;QACjF,uCAAuC;QACvC,WAAW;QACX,iCAAiC;QACjC,gCAAgC;QAChC,WAAW;QACX,UAAU;QACV,EAAE;QACF,4JAA4J;QAC5J,0CAA0C;QAC1C,2BAA2B;QAC3B,wDAAwD;QACxD,yDAAyD;QACzD,EAAE;QACF,yDAAyD;QACzD,EAAE;QACF,kGAAkG;QAClG,EAAE;QACF,SAAS;QACT,8BAA8B;QAC9B,oBAAoB;QACpB,mCAAmC;QACnC,kCAAkC;QAClC,EAAE;QACF,yCAAyC;QACzC,aAAa;QACb,WAAW;QACX,UAAU;QACV,EAAE;QACF,wJAAwJ;QACxJ,EAAE;QACF,sFAAsF;QACtF,wDAAwD;QACxD,wDAAwD;QACxD,MAAMC,6BAA6BV,UAAUW,QAAQ,CAACH;QAEtD,IAAIA,iBAAiB,CAACE,4BAA4B;YAChDlB,iBAAiBQ,WAAWQ;YAE5B,OAAO;gBACLhB,iBAAiBQ,WAAWY;YAC9B;QACF;IACF,GAAG;QAACX;QAAsBD;KAAU;IAEpC,OAAOK;AACT,EAAE"}

package/lib/components/Portal/usePortalMountNode.js CHANGED Viewed

@@ -2,158 +2,9 @@ import * as React from 'react';
 import { useThemeClassName_unstable as useThemeClassName, useFluent_unstable as useFluent, usePortalMountNode as usePortalMountNodeContext } from '@fluentui/react-shared-contexts';
 import { mergeClasses } from '@griffel/react';
 import { useFocusVisible } from '@fluentui/react-tabster';
+import { useDisposable } from 'use-disposable';
 import { usePortalMountNodeStylesStyles } from './usePortalMountNodeStyles.styles';
 const useInsertionEffect = React['useInsertion' + 'Effect'];
-/**
- * Legacy element factory for React 17 and below. It's not safe for concurrent rendering.
- *
- * Creates a new element on a "document.body" to mount portals.
- */ const useLegacyElementFactory = (options)=>{
-    const { className, dir, focusVisibleRef, targetNode } = options;
-    const targetElement = React.useMemo(()=>{
-        if (targetNode === undefined || options.disabled) {
-            return null;
-        }
-        const element = targetNode.ownerDocument.createElement('div');
-        targetNode.appendChild(element);
-        return element;
-    }, [
-        targetNode,
-        options.disabled
-    ]);
-    // Heads up!
-    // This useMemo() call is intentional for React 17 & below.
-    //
-    // We don't want to re-create the portal element when its attributes change. This also cannot not be done in an effect
-    // because, changing the value of CSS variables after an initial mount will trigger interesting CSS side effects like
-    // transitions.
-    React.useMemo(()=>{
-        if (!targetElement) {
-            return;
-        }
-        targetElement.className = className;
-        targetElement.setAttribute('dir', dir);
-        targetElement.setAttribute('data-portal-node', 'true');
-        // eslint-disable-next-line react-compiler/react-compiler
-        focusVisibleRef.current = targetElement;
-    }, [
-        className,
-        dir,
-        targetElement,
-        focusVisibleRef
-    ]);
-    React.useEffect(()=>{
-        return ()=>{
-            targetElement === null || targetElement === void 0 ? void 0 : targetElement.remove();
-        };
-    }, [
-        targetElement
-    ]);
-    return targetElement;
-};
-/**
- * This is a modern element factory for React 18 and above. It is safe for concurrent rendering.
- *
- * It abuses the fact that React will mount DOM once (unlike hooks), so by using a proxy we can intercept:
- * - the `remove()` method (we call it in `useEffect()`) and remove the element only when the portal is unmounted
- * - all other methods (and properties) will be called by React once a portal is mounted
- */ const useModernElementFactory = (options)=>{
-    const { className, dir, focusVisibleRef, targetNode } = options;
-    const [elementFactory] = React.useState(()=>{
-        let currentElement = undefined;
-        function get(targetRoot, forceCreation) {
-            if (currentElement) {
-                return currentElement;
-            }
-            if (forceCreation) {
-                currentElement = targetRoot.ownerDocument.createElement('div');
-                targetRoot.appendChild(currentElement);
-            }
-            return currentElement;
-        }
-        function dispose() {
-            if (currentElement) {
-                currentElement.remove();
-                currentElement = undefined;
-            }
-        }
-        return {
-            get,
-            dispose
-        };
-    });
-    const elementProxy = React.useMemo(()=>{
-        if (targetNode === undefined || options.disabled) {
-            return null;
-        }
-        return new Proxy({}, {
-            get (_, property) {
-                // Heads up!
-                // We intercept the `remove()` method to remove the mount node only when portal has been unmounted already.
-                if (property === 'remove') {
-                    const targetElement = elementFactory.get(targetNode, false);
-                    if (targetElement) {
-                        // If the mountElement has children, the portal is still mounted
-                        const portalHasNoChildren = targetElement.childNodes.length === 0;
-                        if (portalHasNoChildren) {
-                            return targetElement.remove.bind(targetElement);
-                        }
-                    }
-                    return ()=>{
-                    // If the mountElement has children, ignore the remove call
-                    };
-                }
-                const targetElement = elementFactory.get(targetNode, true);
-                const targetProperty = targetElement[property];
-                if (typeof targetProperty === 'function') {
-                    return targetProperty.bind(targetElement);
-                }
-                return targetProperty;
-            },
-            set (_, property, value) {
-                const targetElement = elementFactory.get(targetNode, true);
-                if (targetElement) {
-                    Object.assign(targetElement, {
-                        [property]: value
-                    });
-                    return true;
-                }
-                return false;
-            }
-        });
-    }, [
-        elementFactory,
-        targetNode,
-        options.disabled
-    ]);
-    React.useEffect(()=>{
-        return ()=>{
-            elementProxy === null || elementProxy === void 0 ? void 0 : elementProxy.remove();
-        };
-    }, [
-        elementProxy
-    ]);
-    useInsertionEffect(()=>{
-        if (!elementProxy) {
-            return;
-        }
-        const classesToApply = className.split(' ').filter(Boolean);
-        elementProxy.classList.add(...classesToApply);
-        elementProxy.setAttribute('dir', dir);
-        elementProxy.setAttribute('data-portal-node', 'true');
-        focusVisibleRef.current = elementProxy;
-        return ()=>{
-            elementProxy.classList.remove(...classesToApply);
-            elementProxy.removeAttribute('dir');
-        };
-    }, [
-        className,
-        dir,
-        elementProxy,
-        focusVisibleRef
-    ]);
-    return elementProxy;
-};
 /**
  * Creates a new element on a "document.body" to mount portals.
  */ export const usePortalMountNode = (options)=>{
@@ -163,17 +14,66 @@ const useInsertionEffect = React['useInsertion' + 'Effect'];
     const focusVisibleRef = useFocusVisible();
     const classes = usePortalMountNodeStylesStyles();
     const themeClassName = useThemeClassName();
-    const factoryOptions = {
-        dir,
-        disabled: options.disabled,
-        focusVisibleRef,
-        className: mergeClasses(themeClassName, classes.root, options.className),
-        targetNode: mountNode !== null && mountNode !== void 0 ? mountNode : targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body
-    };
+    const className = mergeClasses(themeClassName, classes.root, options.className);
+    const targetNode = mountNode !== null && mountNode !== void 0 ? mountNode : targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body;
+    const element = useDisposable(()=>{
+        if (targetNode === undefined || options.disabled) {
+            return [
+                null,
+                ()=>null
+            ];
+        }
+        const newElement = targetNode.ownerDocument.createElement('div');
+        targetNode.appendChild(newElement);
+        return [
+            newElement,
+            ()=>newElement.remove()
+        ];
+    }, [
+        targetNode
+    ]);
     if (useInsertionEffect) {
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        return useModernElementFactory(factoryOptions);
+        useInsertionEffect(()=>{
+            if (!element) {
+                return;
+            }
+            const classesToApply = className.split(' ').filter(Boolean);
+            element.classList.add(...classesToApply);
+            element.setAttribute('dir', dir);
+            element.setAttribute('data-portal-node', 'true');
+            focusVisibleRef.current = element;
+            return ()=>{
+                element.classList.remove(...classesToApply);
+                element.removeAttribute('dir');
+            };
+        }, [
+            className,
+            dir,
+            element,
+            focusVisibleRef
+        ]);
+    } else {
+        // This useMemo call is intentional for React 17
+        // We don't want to re-create the portal element when its attributes change.
+        // This also should not be done in an effect because, changing the value of css variables
+        // after initial mount can trigger interesting CSS side effects like transitions.
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        React.useMemo(()=>{
+            if (!element) {
+                return;
+            }
+            // Force replace all classes
+            element.className = className;
+            element.setAttribute('dir', dir);
+            element.setAttribute('data-portal-node', 'true');
+            focusVisibleRef.current = element;
+        }, [
+            className,
+            dir,
+            element,
+            focusVisibleRef
+        ]);
     }
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    return useLegacyElementFactory(factoryOptions);
+    return element;
 };

package/lib/components/Portal/usePortalMountNode.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Portal/usePortalMountNode.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n useThemeClassName_unstable as useThemeClassName,\n useFluent_unstable as useFluent,\n usePortalMountNode as usePortalMountNodeContext,\n} from '@fluentui/react-shared-contexts';\nimport { mergeClasses } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\n\nimport { usePortalMountNodeStylesStyles } from './usePortalMountNodeStyles.styles';\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\ntype UseElementFactoryOptions = {\n className: string;\n dir: string;\n disabled: boolean \| undefined;\n focusVisibleRef: React.MutableRefObject<HTMLElement \| null>;\n targetNode: HTMLElement \| ShadowRoot \| undefined;\n};\ntype UseElementFactory = (options: UseElementFactoryOptions) => HTMLDivElement \| null;\n\n/\n Legacy element factory for React 17 and below. It's not safe for concurrent rendering.\n \n Creates a new element on a \"document.body\" to mount portals.\n /\nconst useLegacyElementFactory: UseElementFactory = options => {\n const { className, dir, focusVisibleRef, targetNode } = options;\n\n const targetElement = React.useMemo(() => {\n if (targetNode === undefined \|\| options.disabled) {\n return null;\n }\n\n const element = targetNode.ownerDocument.createElement('div');\n targetNode.appendChild(element);\n\n return element;\n }, [targetNode, options.disabled]);\n\n // Heads up!\n // This useMemo() call is intentional for React 17 & below.\n //\n // We don't want to re-create the portal element when its attributes change. This also cannot not be done in an effect\n // because, changing the value of CSS variables after an initial mount will trigger interesting CSS side effects like\n // transitions.\n React.useMemo(() => {\n if (!targetElement) {\n return;\n }\n\n targetElement.className = className;\n targetElement.setAttribute('dir', dir);\n targetElement.setAttribute('data-portal-node', 'true');\n\n // eslint-disable-next-line react-compiler/react-compiler\n focusVisibleRef.current = targetElement;\n }, [className, dir, targetElement, focusVisibleRef]);\n\n React.useEffect(() => {\n return () => {\n targetElement?.remove();\n };\n }, [targetElement]);\n\n return targetElement;\n};\n\n/\n This is a modern element factory for React 18 and above. It is safe for concurrent rendering.\n \n It abuses the fact that React will mount DOM once (unlike hooks), so by using a proxy we can intercept:\n * - the `remove()` method (we call it in `useEffect()`) and remove the element only when the portal is unmounted\n * - all other methods (and properties) will be called by React once a portal is mounted\n /\nconst useModernElementFactory: UseElementFactory = options => {\n const { className, dir, focusVisibleRef, targetNode } = options;\n\n const [elementFactory] = React.useState(() => {\n let currentElement: HTMLDivElement \| undefined = undefined;\n\n function get(targetRoot: HTMLElement \| ShadowRoot, forceCreation: false): HTMLDivElement \| undefined;\n function get(targetRoot: HTMLElement \| ShadowRoot, forceCreation: true): HTMLDivElement;\n function get(targetRoot: HTMLElement \| ShadowRoot, forceCreation: boolean): HTMLDivElement \| undefined {\n if (currentElement) {\n return currentElement;\n }\n\n if (forceCreation) {\n currentElement = targetRoot.ownerDocument.createElement('div');\n targetRoot.appendChild(currentElement);\n }\n\n return currentElement;\n }\n\n function dispose() {\n if (currentElement) {\n currentElement.remove();\n currentElement = undefined;\n }\n }\n\n return {\n get,\n dispose,\n };\n });\n\n const elementProxy = React.useMemo(() => {\n if (targetNode === undefined \|\| options.disabled) {\n return null;\n }\n\n return new Proxy({} as HTMLDivElement, {\n get(_, property: keyof HTMLDivElement) {\n // Heads up!\n // We intercept the `remove()` method to remove the mount node only when portal has been unmounted already.\n if (property === 'remove') {\n const targetElement = elementFactory.get(targetNode, false);\n\n if (targetElement) {\n // If the mountElement has children, the portal is still mounted\n const portalHasNoChildren = targetElement.childNodes.length === 0;\n\n if (portalHasNoChildren) {\n return targetElement.remove.bind(targetElement);\n }\n }\n\n return () => {\n // If the mountElement has children, ignore the remove call\n };\n }\n\n const targetElement = elementFactory.get(targetNode, true);\n const targetProperty = targetElement[property];\n\n if (typeof targetProperty === 'function') {\n return targetProperty.bind(targetElement);\n }\n\n return targetProperty;\n },\n\n set(_, property: keyof HTMLDivElement, value) {\n const targetElement = elementFactory.get(targetNode, true);\n\n if (targetElement) {\n Object.assign(targetElement, { [property]: value });\n return true;\n }\n\n return false;\n },\n });\n }, [elementFactory, targetNode, options.disabled]);\n\n React.useEffect(() => {\n return () => {\n elementProxy?.remove();\n };\n }, [elementProxy]);\n\n useInsertionEffect!(() => {\n if (!elementProxy) {\n return;\n }\n\n const classesToApply = className.split(' ').filter(Boolean);\n\n elementProxy.classList.add(...classesToApply);\n elementProxy.setAttribute('dir', dir);\n elementProxy.setAttribute('data-portal-node', 'true');\n\n focusVisibleRef.current = elementProxy;\n\n return () => {\n elementProxy.classList.remove(...classesToApply);\n elementProxy.removeAttribute('dir');\n };\n }, [className, dir, elementProxy, focusVisibleRef]);\n\n return elementProxy;\n};\n\n/\n Creates a new element on a \"document.body\" to mount portals.\n */\nexport const usePortalMountNode = (options: UsePortalMountNodeOptions): HTMLElement \| null => {\n 'use no memo';\n\n const { targetDocument, dir } = useFluent();\n const mountNode = usePortalMountNodeContext();\n\n const focusVisibleRef = useFocusVisible<HTMLDivElement>() as React.MutableRefObject<HTMLElement \| null>;\n const classes = usePortalMountNodeStylesStyles();\n const themeClassName = useThemeClassName();\n\n const factoryOptions: UseElementFactoryOptions = {\n dir,\n disabled: options.disabled,\n focusVisibleRef,\n\n className: mergeClasses(themeClassName, classes.root, options.className),\n targetNode: mountNode ?? targetDocument?.body,\n };\n\n if (useInsertionEffect) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useModernElementFactory(factoryOptions);\n }\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useLegacyElementFactory(factoryOptions);\n};\n"],"names":["React","useThemeClassName_unstable","useThemeClassName","useFluent_unstable","useFluent","usePortalMountNode","usePortalMountNodeContext","mergeClasses","useFocusVisible","usePortalMountNodeStylesStyles","useInsertionEffect","useLegacyElementFactory","options","className","dir","focusVisibleRef","targetNode","targetElement","useMemo","undefined","disabled","element","ownerDocument","createElement","appendChild","setAttribute","current","useEffect","remove","useModernElementFactory","elementFactory","useState","currentElement","get","targetRoot","forceCreation","dispose","elementProxy","Proxy","_","property","portalHasNoChildren","childNodes","length","bind","targetProperty","set","value","Object","assign","classesToApply","split","filter","Boolean","classList","add","removeAttribute","targetDocument","mountNode","classes","themeClassName","factoryOptions","root","body"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["../src/components/Portal/usePortalMountNode.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n useThemeClassName_unstable as useThemeClassName,\n useFluent_unstable as useFluent,\n usePortalMountNode as usePortalMountNodeContext,\n} from '@fluentui/react-shared-contexts';\nimport { mergeClasses } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\nimport { useDisposable } from 'use-disposable';\n\nimport { usePortalMountNodeStylesStyles } from './usePortalMountNodeStyles.styles';\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\n/\n Creates a new element on a \"document.body\" to mount portals.\n */\nexport const usePortalMountNode = (options: UsePortalMountNodeOptions): HTMLElement \| null => {\n 'use no memo';\n\n const { targetDocument, dir } = useFluent();\n const mountNode = usePortalMountNodeContext();\n\n const focusVisibleRef = useFocusVisible<HTMLDivElement>() as React.MutableRefObject<HTMLElement \| null>;\n const classes = usePortalMountNodeStylesStyles();\n const themeClassName = useThemeClassName();\n\n const className = mergeClasses(themeClassName, classes.root, options.className);\n const targetNode: HTMLElement \| ShadowRoot \| undefined = mountNode ?? targetDocument?.body;\n\n const element = useDisposable(() => {\n if (targetNode === undefined \|\| options.disabled) {\n return [null, () => null];\n }\n\n const newElement = targetNode.ownerDocument.createElement('div');\n targetNode.appendChild(newElement);\n return [newElement, () => newElement.remove()];\n }, [targetNode]);\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 element.setAttribute('data-portal-node', 'true');\n\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 element.setAttribute('data-portal-node', 'true');\n\n focusVisibleRef.current = element;\n }, [className, dir, element, focusVisibleRef]);\n }\n\n return element;\n};\n"],"names":["React","useThemeClassName_unstable","useThemeClassName","useFluent_unstable","useFluent","usePortalMountNode","usePortalMountNodeContext","mergeClasses","useFocusVisible","useDisposable","usePortalMountNodeStylesStyles","useInsertionEffect","options","targetDocument","dir","mountNode","focusVisibleRef","classes","themeClassName","className","root","targetNode","body","element","undefined","disabled","newElement","ownerDocument","createElement","appendChild","remove","classesToApply","split","filter","Boolean","classList","add","setAttribute","current","removeAttribute","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,8BAA8BC,iBAAiB,EAC/CC,sBAAsBC,SAAS,EAC/BC,sBAAsBC,yBAAyB,QAC1C,kCAAkC;AACzC,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,aAAa,QAAQ,iBAAiB;AAE/C,SAASC,8BAA8B,QAAQ,oCAAoC;AAEnF,MAAMC,qBAAqB,AAACX,KAAe,CAAC,iBAAiB,SAAS;AAWtE;;CAEC,GACD,OAAO,MAAMK,qBAAqB,CAACO;IACjC;IAEA,MAAM,EAAEC,cAAc,EAAEC,GAAG,EAAE,GAAGV;IAChC,MAAMW,YAAYT;IAElB,MAAMU,kBAAkBR;IACxB,MAAMS,UAAUP;IAChB,MAAMQ,iBAAiBhB;IAEvB,MAAMiB,YAAYZ,aAAaW,gBAAgBD,QAAQG,IAAI,EAAER,QAAQO,SAAS;IAC9E,MAAME,aAAmDN,sBAAAA,uBAAAA,YAAaF,2BAAAA,qCAAAA,eAAgBS,IAAI;IAE1F,MAAMC,UAAUd,cAAc;QAC5B,IAAIY,eAAeG,aAAaZ,QAAQa,QAAQ,EAAE;YAChD,OAAO;gBAAC;gBAAM,IAAM;aAAK;QAC3B;QAEA,MAAMC,aAAaL,WAAWM,aAAa,CAACC,aAAa,CAAC;QAC1DP,WAAWQ,WAAW,CAACH;QACvB,OAAO;YAACA;YAAY,IAAMA,WAAWI,MAAM;SAAG;IAChD,GAAG;QAACT;KAAW;IAEf,IAAIV,oBAAoB;QACtB,sDAAsD;QACtDA,mBAAmB;YACjB,IAAI,CAACY,SAAS;gBACZ;YACF;YAEA,MAAMQ,iBAAiBZ,UAAUa,KAAK,CAAC,KAAKC,MAAM,CAACC;YAEnDX,QAAQY,SAAS,CAACC,GAAG,IAAIL;YACzBR,QAAQc,YAAY,CAAC,OAAOvB;YAC5BS,QAAQc,YAAY,CAAC,oBAAoB;YAEzCrB,gBAAgBsB,OAAO,GAAGf;YAE1B,OAAO;gBACLA,QAAQY,SAAS,CAACL,MAAM,IAAIC;gBAC5BR,QAAQgB,eAAe,CAAC;YAC1B;QACF,GAAG;YAACpB;YAAWL;YAAKS;YAASP;SAAgB;IAC/C,OAAO;QACL,gDAAgD;QAChD,4EAA4E;QAC5E,yFAAyF;QACzF,iFAAiF;QACjF,sDAAsD;QACtDhB,MAAMwC,OAAO,CAAC;YACZ,IAAI,CAACjB,SAAS;gBACZ;YACF;YAEA,4BAA4B;YAC5BA,QAAQJ,SAAS,GAAGA;YACpBI,QAAQc,YAAY,CAAC,OAAOvB;YAC5BS,QAAQc,YAAY,CAAC,oBAAoB;YAEzCrB,gBAAgBsB,OAAO,GAAGf;QAC5B,GAAG;YAACJ;YAAWL;YAAKS;YAASP;SAAgB;IAC/C;IAEA,OAAOO;AACT,EAAE"}

package/lib/components/Portal/usePortalMountNodeStyles.styles.raw.js ADDED Viewed

@@ -0,0 +1,14 @@
+import { makeStyles } from '@griffel/react';
+export const usePortalMountNodeStylesStyles = makeStyles({
+    root: {
+        // Creates new stacking context to prevent z-index issues
+        // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
+        //
+        // Also keeps a portal on top of a page to prevent scrollbars from appearing
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 1000000
+    }
+});

package/lib/components/Portal/usePortalMountNodeStyles.styles.raw.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/Portal/usePortalMountNodeStyles.styles.ts"],"sourcesContent":["import { makeStyles } from '@griffel/react';\n\nexport const usePortalMountNodeStylesStyles = makeStyles({\n root: {\n // Creates new stacking context to prevent z-index issues\n // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context\n //\n // Also keeps a portal on top of a page to prevent scrollbars from appearing\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n\n zIndex: 1000000,\n },\n});\n"],"names":["makeStyles","usePortalMountNodeStylesStyles","root","position","top","left","right","zIndex"],"rangeMappings":";;;;;;;;;;;;;","mappings":"AAAA,SAASA,UAAU,QAAQ,iBAAiB;AAE5C,OAAO,MAAMC,iCAAiCD,WAAW;IACvDE,MAAM;QACJ,yDAAyD;QACzD,gHAAgH;QAChH,EAAE;QACF,4EAA4E;QAC5EC,UAAU;QACVC,KAAK;QACLC,MAAM;QACNC,OAAO;QAEPC,QAAQ;IACV;AACF,GAAG"}

package/lib-commonjs/components/Portal/usePortal.js CHANGED Viewed

@@ -78,6 +78,7 @@ const usePortal_unstable = (props)=>{
             };
         }
     }, [
+        virtualParentRootRef,
         mountNode
     ]);
     return state;

package/lib-commonjs/components/Portal/usePortal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Portal/usePortal.ts"],"sourcesContent":["import { setVirtualParent } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { toMountNodeProps } from '../../utils/toMountNodeProps';\nimport { usePortalMountNode } from './usePortalMountNode';\nimport type { PortalProps, PortalState } from './Portal.types';\n\n/*\n Create the state required to render Portal.\n \n The returned state can be modified with hooks such as usePortalStyles, before being passed to renderPortal_unstable.\n \n @param props - props from this instance of Portal\n */\nexport const usePortal_unstable = (props: PortalProps): PortalState => {\n const { element, className } = toMountNodeProps(props.mountNode);\n\n const virtualParentRootRef = React.useRef<HTMLSpanElement>(null);\n const fallbackElement = usePortalMountNode({ disabled: !!element, className });\n\n const mountNode = element ?? fallbackElement;\n const state: PortalState = {\n children: props.children,\n mountNode,\n virtualParentRootRef,\n };\n\n React.useEffect(() => {\n if (!mountNode) {\n return;\n }\n\n const virtualParent = virtualParentRootRef.current;\n\n // By default, we create a mount node for portal on `document.body` (see usePortalMountNode()) and have following structure:\n //\n // <body>\n // <!-- ⚛️ application root -->\n // <div id=\"root\">\n // <!-- ⬇️ portal node rendered in a tree to anchor (virtual parent node) -->\n // <span aria-hidden=\"true\"></span>\n // </div>\n // <div id=\"portal-mount-node\">\n // <!-- 🧩portal content -->\n // </div>\n // </body>\n //\n // To make sure that `.elementContains()` works correctly, we link a virtual parent to a portal node (a virtual parent node becomes a parent of mount node):\n // virtual.contains(mountNode) === false\n // (while we need ⬇️⬇️⬇️)\n // elementsContains(virtualParent, mountNode) === true\n // elementsContains(mountNode, virtualParent) === false\n //\n // For more details, check docs for virtual parent utils.\n //\n // However, if a user provides a custom mount node (via `props`) the structure could be different:\n //\n // <body>\n // <!-- application root -->\n // <div id=\"root\">\n // <div id=\"portal-mount-node\">\n // <!-- 🧩portal content -->\n //\n // <span aria-hidden=\"true\"></span>\n // </div>\n // </div>\n // </body>\n //\n // A mount node in this case contains portal's content and a virtual parent node. In this case nodes linking is redundant and the check below avoids it.\n //\n // Otherwise, there is a circular reference - both elements are parents of each other:\n // elementsContains(mountNode, virtualParent) === true\n // elementsContains(virtualParent, mountNode) === true\n const isVirtualParentInsideChild = mountNode.contains(virtualParent);\n\n if (virtualParent && !isVirtualParentInsideChild) {\n setVirtualParent(mountNode, virtualParent);\n\n return () => {\n setVirtualParent(mountNode, undefined);\n };\n }\n }, [mountNode]);\n\n return state;\n};\n"],"names":["usePortal_unstable","props","element","className","toMountNodeProps","mountNode","virtualParentRootRef","React","useRef","fallbackElement","usePortalMountNode","disabled","state","children","useEffect","virtualParent","current","isVirtualParentInsideChild","contains","setVirtualParent","undefined"],"rangeMappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","mappings":";;;;+BAcaA;;;eAAAA;;;;gCAdoB;iEACV;kCAEU;oCACE;AAU5B,MAAMA,qBAAqB,CAACC;IACjC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGC,IAAAA,kCAAAA,EAAiBH,MAAMI,SAAS;IAE/D,MAAMC,uBAAuBC,OAAMC,MAAM,CAAkB;IAC3D,MAAMC,kBAAkBC,IAAAA,sCAAAA,EAAmB;QAAEC,UAAU,CAAC,CAACT;QAASC;IAAU;IAE5E,MAAME,YAAYH,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,UAAWO;IAC7B,MAAMG,QAAqB;QACzBC,UAAUZ,MAAMY,QAAQ;QACxBR;QACAC;IACF;IAEAC,OAAMO,SAAS,CAAC;QACd,IAAI,CAACT,WAAW;YACd;QACF;QAEA,MAAMU,gBAAgBT,qBAAqBU,OAAO;QAElD,4HAA4H;QAC5H,EAAE;QACF,SAAS;QACT,iCAAiC;QACjC,oBAAoB;QACpB,iFAAiF;QACjF,uCAAuC;QACvC,WAAW;QACX,iCAAiC;QACjC,gCAAgC;QAChC,WAAW;QACX,UAAU;QACV,EAAE;QACF,4JAA4J;QAC5J,0CAA0C;QAC1C,2BAA2B;QAC3B,wDAAwD;QACxD,yDAAyD;QACzD,EAAE;QACF,yDAAyD;QACzD,EAAE;QACF,kGAAkG;QAClG,EAAE;QACF,SAAS;QACT,8BAA8B;QAC9B,oBAAoB;QACpB,mCAAmC;QACnC,kCAAkC;QAClC,EAAE;QACF,yCAAyC;QACzC,aAAa;QACb,WAAW;QACX,UAAU;QACV,EAAE;QACF,wJAAwJ;QACxJ,EAAE;QACF,sFAAsF;QACtF,wDAAwD;QACxD,wDAAwD;QACxD,MAAMC,6BAA6BZ,UAAUa,QAAQ,CAACH;QAEtD,IAAIA,iBAAiB,CAACE,4BAA4B;YAChDE,IAAAA,gCAAAA,EAAiBd,WAAWU;YAE5B,OAAO;gBACLI,IAAAA,gCAAAA,EAAiBd,WAAWe;YAC9B;QACF;IACF,GAAG;~~QAACf~~;KAAU;~~IAEd~~,OAAOO;AACT"}
1	+ {"version":3,"sources":["../src/components/Portal/usePortal.ts"],"sourcesContent":["import { setVirtualParent } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { toMountNodeProps } from '../../utils/toMountNodeProps';\nimport { usePortalMountNode } from './usePortalMountNode';\nimport type { PortalProps, PortalState } from './Portal.types';\n\n/*\n Create the state required to render Portal.\n \n The returned state can be modified with hooks such as usePortalStyles, before being passed to renderPortal_unstable.\n \n @param props - props from this instance of Portal\n */\nexport const usePortal_unstable = (props: PortalProps): PortalState => {\n const { element, className } = toMountNodeProps(props.mountNode);\n\n const virtualParentRootRef = React.useRef<HTMLSpanElement>(null);\n const fallbackElement = usePortalMountNode({ disabled: !!element, className });\n\n const mountNode = element ?? fallbackElement;\n const state: PortalState = {\n children: props.children,\n mountNode,\n virtualParentRootRef,\n };\n\n React.useEffect(() => {\n if (!mountNode) {\n return;\n }\n\n const virtualParent = virtualParentRootRef.current;\n\n // By default, we create a mount node for portal on `document.body` (see usePortalMountNode()) and have following structure:\n //\n // <body>\n // <!-- ⚛️ application root -->\n // <div id=\"root\">\n // <!-- ⬇️ portal node rendered in a tree to anchor (virtual parent node) -->\n // <span aria-hidden=\"true\"></span>\n // </div>\n // <div id=\"portal-mount-node\">\n // <!-- 🧩portal content -->\n // </div>\n // </body>\n //\n // To make sure that `.elementContains()` works correctly, we link a virtual parent to a portal node (a virtual parent node becomes a parent of mount node):\n // virtual.contains(mountNode) === false\n // (while we need ⬇️⬇️⬇️)\n // elementsContains(virtualParent, mountNode) === true\n // elementsContains(mountNode, virtualParent) === false\n //\n // For more details, check docs for virtual parent utils.\n //\n // However, if a user provides a custom mount node (via `props`) the structure could be different:\n //\n // <body>\n // <!-- application root -->\n // <div id=\"root\">\n // <div id=\"portal-mount-node\">\n // <!-- 🧩portal content -->\n //\n // <span aria-hidden=\"true\"></span>\n // </div>\n // </div>\n // </body>\n //\n // A mount node in this case contains portal's content and a virtual parent node. In this case nodes linking is redundant and the check below avoids it.\n //\n // Otherwise, there is a circular reference - both elements are parents of each other:\n // elementsContains(mountNode, virtualParent) === true\n // elementsContains(virtualParent, mountNode) === true\n const isVirtualParentInsideChild = mountNode.contains(virtualParent);\n\n if (virtualParent && !isVirtualParentInsideChild) {\n setVirtualParent(mountNode, virtualParent);\n\n return () => {\n setVirtualParent(mountNode, undefined);\n };\n }\n }, [virtualParentRootRef, mountNode]);\n\n return state;\n};\n"],"names":["usePortal_unstable","props","element","className","toMountNodeProps","mountNode","virtualParentRootRef","React","useRef","fallbackElement","usePortalMountNode","disabled","state","children","useEffect","virtualParent","current","isVirtualParentInsideChild","contains","setVirtualParent","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAcaA;;;eAAAA;;;;gCAdoB;iEACV;kCAEU;oCACE;AAU5B,MAAMA,qBAAqB,CAACC;IACjC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGC,IAAAA,kCAAAA,EAAiBH,MAAMI,SAAS;IAE/D,MAAMC,uBAAuBC,OAAMC,MAAM,CAAkB;IAC3D,MAAMC,kBAAkBC,IAAAA,sCAAAA,EAAmB;QAAEC,UAAU,CAAC,CAACT;QAASC;IAAU;IAE5E,MAAME,YAAYH,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,UAAWO;IAC7B,MAAMG,QAAqB;QACzBC,UAAUZ,MAAMY,QAAQ;QACxBR;QACAC;IACF;IAEAC,OAAMO,SAAS,CAAC;QACd,IAAI,CAACT,WAAW;YACd;QACF;QAEA,MAAMU,gBAAgBT,qBAAqBU,OAAO;QAElD,4HAA4H;QAC5H,EAAE;QACF,SAAS;QACT,iCAAiC;QACjC,oBAAoB;QACpB,iFAAiF;QACjF,uCAAuC;QACvC,WAAW;QACX,iCAAiC;QACjC,gCAAgC;QAChC,WAAW;QACX,UAAU;QACV,EAAE;QACF,4JAA4J;QAC5J,0CAA0C;QAC1C,2BAA2B;QAC3B,wDAAwD;QACxD,yDAAyD;QACzD,EAAE;QACF,yDAAyD;QACzD,EAAE;QACF,kGAAkG;QAClG,EAAE;QACF,SAAS;QACT,8BAA8B;QAC9B,oBAAoB;QACpB,mCAAmC;QACnC,kCAAkC;QAClC,EAAE;QACF,yCAAyC;QACzC,aAAa;QACb,WAAW;QACX,UAAU;QACV,EAAE;QACF,wJAAwJ;QACxJ,EAAE;QACF,sFAAsF;QACtF,wDAAwD;QACxD,wDAAwD;QACxD,MAAMC,6BAA6BZ,UAAUa,QAAQ,CAACH;QAEtD,IAAIA,iBAAiB,CAACE,4BAA4B;YAChDE,IAAAA,gCAAAA,EAAiBd,WAAWU;YAE5B,OAAO;gBACLI,IAAAA,gCAAAA,EAAiBd,WAAWe;YAC9B;QACF;IACF,GAAG;QAACd;QAAsBD;KAAU;IAEpC,OAAOO;AACT"}

package/lib-commonjs/components/Portal/usePortalMountNode.js CHANGED Viewed

@@ -13,158 +13,9 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
 const _react1 = require("@griffel/react");
 const _reacttabster = require("@fluentui/react-tabster");
+const _usedisposable = require("use-disposable");
 const _usePortalMountNodeStylesstyles = require("./usePortalMountNodeStyles.styles");
 const useInsertionEffect = _react['useInsertion' + 'Effect'];
-/**
- * Legacy element factory for React 17 and below. It's not safe for concurrent rendering.
- *
- * Creates a new element on a "document.body" to mount portals.
- */ const useLegacyElementFactory = (options)=>{
-    const { className, dir, focusVisibleRef, targetNode } = options;
-    const targetElement = _react.useMemo(()=>{
-        if (targetNode === undefined || options.disabled) {
-            return null;
-        }
-        const element = targetNode.ownerDocument.createElement('div');
-        targetNode.appendChild(element);
-        return element;
-    }, [
-        targetNode,
-        options.disabled
-    ]);
-    // Heads up!
-    // This useMemo() call is intentional for React 17 & below.
-    //
-    // We don't want to re-create the portal element when its attributes change. This also cannot not be done in an effect
-    // because, changing the value of CSS variables after an initial mount will trigger interesting CSS side effects like
-    // transitions.
-    _react.useMemo(()=>{
-        if (!targetElement) {
-            return;
-        }
-        targetElement.className = className;
-        targetElement.setAttribute('dir', dir);
-        targetElement.setAttribute('data-portal-node', 'true');
-        // eslint-disable-next-line react-compiler/react-compiler
-        focusVisibleRef.current = targetElement;
-    }, [
-        className,
-        dir,
-        targetElement,
-        focusVisibleRef
-    ]);
-    _react.useEffect(()=>{
-        return ()=>{
-            targetElement === null || targetElement === void 0 ? void 0 : targetElement.remove();
-        };
-    }, [
-        targetElement
-    ]);
-    return targetElement;
-};
-/**
- * This is a modern element factory for React 18 and above. It is safe for concurrent rendering.
- *
- * It abuses the fact that React will mount DOM once (unlike hooks), so by using a proxy we can intercept:
- * - the `remove()` method (we call it in `useEffect()`) and remove the element only when the portal is unmounted
- * - all other methods (and properties) will be called by React once a portal is mounted
- */ const useModernElementFactory = (options)=>{
-    const { className, dir, focusVisibleRef, targetNode } = options;
-    const [elementFactory] = _react.useState(()=>{
-        let currentElement = undefined;
-        function get(targetRoot, forceCreation) {
-            if (currentElement) {
-                return currentElement;
-            }
-            if (forceCreation) {
-                currentElement = targetRoot.ownerDocument.createElement('div');
-                targetRoot.appendChild(currentElement);
-            }
-            return currentElement;
-        }
-        function dispose() {
-            if (currentElement) {
-                currentElement.remove();
-                currentElement = undefined;
-            }
-        }
-        return {
-            get,
-            dispose
-        };
-    });
-    const elementProxy = _react.useMemo(()=>{
-        if (targetNode === undefined || options.disabled) {
-            return null;
-        }
-        return new Proxy({}, {
-            get (_, property) {
-                // Heads up!
-                // We intercept the `remove()` method to remove the mount node only when portal has been unmounted already.
-                if (property === 'remove') {
-                    const targetElement = elementFactory.get(targetNode, false);
-                    if (targetElement) {
-                        // If the mountElement has children, the portal is still mounted
-                        const portalHasNoChildren = targetElement.childNodes.length === 0;
-                        if (portalHasNoChildren) {
-                            return targetElement.remove.bind(targetElement);
-                        }
-                    }
-                    return ()=>{
-                    // If the mountElement has children, ignore the remove call
-                    };
-                }
-                const targetElement = elementFactory.get(targetNode, true);
-                const targetProperty = targetElement[property];
-                if (typeof targetProperty === 'function') {
-                    return targetProperty.bind(targetElement);
-                }
-                return targetProperty;
-            },
-            set (_, property, value) {
-                const targetElement = elementFactory.get(targetNode, true);
-                if (targetElement) {
-                    Object.assign(targetElement, {
-                        [property]: value
-                    });
-                    return true;
-                }
-                return false;
-            }
-        });
-    }, [
-        elementFactory,
-        targetNode,
-        options.disabled
-    ]);
-    _react.useEffect(()=>{
-        return ()=>{
-            elementProxy === null || elementProxy === void 0 ? void 0 : elementProxy.remove();
-        };
-    }, [
-        elementProxy
-    ]);
-    useInsertionEffect(()=>{
-        if (!elementProxy) {
-            return;
-        }
-        const classesToApply = className.split(' ').filter(Boolean);
-        elementProxy.classList.add(...classesToApply);
-        elementProxy.setAttribute('dir', dir);
-        elementProxy.setAttribute('data-portal-node', 'true');
-        focusVisibleRef.current = elementProxy;
-        return ()=>{
-            elementProxy.classList.remove(...classesToApply);
-            elementProxy.removeAttribute('dir');
-        };
-    }, [
-        className,
-        dir,
-        elementProxy,
-        focusVisibleRef
-    ]);
-    return elementProxy;
-};
 const usePortalMountNode = (options)=>{
     'use no memo';
     const { targetDocument, dir } = (0, _reactsharedcontexts.useFluent_unstable)();
@@ -172,17 +23,66 @@ const usePortalMountNode = (options)=>{
     const focusVisibleRef = (0, _reacttabster.useFocusVisible)();
     const classes = (0, _usePortalMountNodeStylesstyles.usePortalMountNodeStylesStyles)();
     const themeClassName = (0, _reactsharedcontexts.useThemeClassName_unstable)();
-    const factoryOptions = {
-        dir,
-        disabled: options.disabled,
-        focusVisibleRef,
-        className: (0, _react1.mergeClasses)(themeClassName, classes.root, options.className),
-        targetNode: mountNode !== null && mountNode !== void 0 ? mountNode : targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body
-    };
+    const className = (0, _react1.mergeClasses)(themeClassName, classes.root, options.className);
+    const targetNode = mountNode !== null && mountNode !== void 0 ? mountNode : targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body;
+    const element = (0, _usedisposable.useDisposable)(()=>{
+        if (targetNode === undefined || options.disabled) {
+            return [
+                null,
+                ()=>null
+            ];
+        }
+        const newElement = targetNode.ownerDocument.createElement('div');
+        targetNode.appendChild(newElement);
+        return [
+            newElement,
+            ()=>newElement.remove()
+        ];
+    }, [
+        targetNode
+    ]);
     if (useInsertionEffect) {
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        return useModernElementFactory(factoryOptions);
+        useInsertionEffect(()=>{
+            if (!element) {
+                return;
+            }
+            const classesToApply = className.split(' ').filter(Boolean);
+            element.classList.add(...classesToApply);
+            element.setAttribute('dir', dir);
+            element.setAttribute('data-portal-node', 'true');
+            focusVisibleRef.current = element;
+            return ()=>{
+                element.classList.remove(...classesToApply);
+                element.removeAttribute('dir');
+            };
+        }, [
+            className,
+            dir,
+            element,
+            focusVisibleRef
+        ]);
+    } else {
+        // This useMemo call is intentional for React 17
+        // We don't want to re-create the portal element when its attributes change.
+        // This also should not be done in an effect because, changing the value of css variables
+        // after initial mount can trigger interesting CSS side effects like transitions.
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        _react.useMemo(()=>{
+            if (!element) {
+                return;
+            }
+            // Force replace all classes
+            element.className = className;
+            element.setAttribute('dir', dir);
+            element.setAttribute('data-portal-node', 'true');
+            focusVisibleRef.current = element;
+        }, [
+            className,
+            dir,
+            element,
+            focusVisibleRef
+        ]);
     }
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    return useLegacyElementFactory(factoryOptions);
+    return element;
 };

package/lib-commonjs/components/Portal/usePortalMountNode.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/components/Portal/usePortalMountNode.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n useThemeClassName_unstable as useThemeClassName,\n useFluent_unstable as useFluent,\n usePortalMountNode as usePortalMountNodeContext,\n} from '@fluentui/react-shared-contexts';\nimport { mergeClasses } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\n\nimport { usePortalMountNodeStylesStyles } from './usePortalMountNodeStyles.styles';\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\ntype UseElementFactoryOptions = {\n className: string;\n dir: string;\n disabled: boolean \| undefined;\n focusVisibleRef: React.MutableRefObject<HTMLElement \| null>;\n targetNode: HTMLElement \| ShadowRoot \| undefined;\n};\ntype UseElementFactory = (options: UseElementFactoryOptions) => HTMLDivElement \| null;\n\n/\n Legacy element factory for React 17 and below. It's not safe for concurrent rendering.\n \n Creates a new element on a \"document.body\" to mount portals.\n /\nconst useLegacyElementFactory: UseElementFactory = options => {\n const { className, dir, focusVisibleRef, targetNode } = options;\n\n const targetElement = React.useMemo(() => {\n if (targetNode === undefined \|\| options.disabled) {\n return null;\n }\n\n const element = targetNode.ownerDocument.createElement('div');\n targetNode.appendChild(element);\n\n return element;\n }, [targetNode, options.disabled]);\n\n // Heads up!\n // This useMemo() call is intentional for React 17 & below.\n //\n // We don't want to re-create the portal element when its attributes change. This also cannot not be done in an effect\n // because, changing the value of CSS variables after an initial mount will trigger interesting CSS side effects like\n // transitions.\n React.useMemo(() => {\n if (!targetElement) {\n return;\n }\n\n targetElement.className = className;\n targetElement.setAttribute('dir', dir);\n targetElement.setAttribute('data-portal-node', 'true');\n\n // eslint-disable-next-line react-compiler/react-compiler\n focusVisibleRef.current = targetElement;\n }, [className, dir, targetElement, focusVisibleRef]);\n\n React.useEffect(() => {\n return () => {\n targetElement?.remove();\n };\n }, [targetElement]);\n\n return targetElement;\n};\n\n/\n This is a modern element factory for React 18 and above. It is safe for concurrent rendering.\n \n It abuses the fact that React will mount DOM once (unlike hooks), so by using a proxy we can intercept:\n * - the `remove()` method (we call it in `useEffect()`) and remove the element only when the portal is unmounted\n * - all other methods (and properties) will be called by React once a portal is mounted\n /\nconst useModernElementFactory: UseElementFactory = options => {\n const { className, dir, focusVisibleRef, targetNode } = options;\n\n const [elementFactory] = React.useState(() => {\n let currentElement: HTMLDivElement \| undefined = undefined;\n\n function get(targetRoot: HTMLElement \| ShadowRoot, forceCreation: false): HTMLDivElement \| undefined;\n function get(targetRoot: HTMLElement \| ShadowRoot, forceCreation: true): HTMLDivElement;\n function get(targetRoot: HTMLElement \| ShadowRoot, forceCreation: boolean): HTMLDivElement \| undefined {\n if (currentElement) {\n return currentElement;\n }\n\n if (forceCreation) {\n currentElement = targetRoot.ownerDocument.createElement('div');\n targetRoot.appendChild(currentElement);\n }\n\n return currentElement;\n }\n\n function dispose() {\n if (currentElement) {\n currentElement.remove();\n currentElement = undefined;\n }\n }\n\n return {\n get,\n dispose,\n };\n });\n\n const elementProxy = React.useMemo(() => {\n if (targetNode === undefined \|\| options.disabled) {\n return null;\n }\n\n return new Proxy({} as HTMLDivElement, {\n get(_, property: keyof HTMLDivElement) {\n // Heads up!\n // We intercept the `remove()` method to remove the mount node only when portal has been unmounted already.\n if (property === 'remove') {\n const targetElement = elementFactory.get(targetNode, false);\n\n if (targetElement) {\n // If the mountElement has children, the portal is still mounted\n const portalHasNoChildren = targetElement.childNodes.length === 0;\n\n if (portalHasNoChildren) {\n return targetElement.remove.bind(targetElement);\n }\n }\n\n return () => {\n // If the mountElement has children, ignore the remove call\n };\n }\n\n const targetElement = elementFactory.get(targetNode, true);\n const targetProperty = targetElement[property];\n\n if (typeof targetProperty === 'function') {\n return targetProperty.bind(targetElement);\n }\n\n return targetProperty;\n },\n\n set(_, property: keyof HTMLDivElement, value) {\n const targetElement = elementFactory.get(targetNode, true);\n\n if (targetElement) {\n Object.assign(targetElement, { [property]: value });\n return true;\n }\n\n return false;\n },\n });\n }, [elementFactory, targetNode, options.disabled]);\n\n React.useEffect(() => {\n return () => {\n elementProxy?.remove();\n };\n }, [elementProxy]);\n\n useInsertionEffect!(() => {\n if (!elementProxy) {\n return;\n }\n\n const classesToApply = className.split(' ').filter(Boolean);\n\n elementProxy.classList.add(...classesToApply);\n elementProxy.setAttribute('dir', dir);\n elementProxy.setAttribute('data-portal-node', 'true');\n\n focusVisibleRef.current = elementProxy;\n\n return () => {\n elementProxy.classList.remove(...classesToApply);\n elementProxy.removeAttribute('dir');\n };\n }, [className, dir, elementProxy, focusVisibleRef]);\n\n return elementProxy;\n};\n\n/\n Creates a new element on a \"document.body\" to mount portals.\n */\nexport const usePortalMountNode = (options: UsePortalMountNodeOptions): HTMLElement \| null => {\n 'use no memo';\n\n const { targetDocument, dir } = useFluent();\n const mountNode = usePortalMountNodeContext();\n\n const focusVisibleRef = useFocusVisible<HTMLDivElement>() as React.MutableRefObject<HTMLElement \| null>;\n const classes = usePortalMountNodeStylesStyles();\n const themeClassName = useThemeClassName();\n\n const factoryOptions: UseElementFactoryOptions = {\n dir,\n disabled: options.disabled,\n focusVisibleRef,\n\n className: mergeClasses(themeClassName, classes.root, options.className),\n targetNode: mountNode ?? targetDocument?.body,\n };\n\n if (useInsertionEffect) {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useModernElementFactory(factoryOptions);\n }\n\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useLegacyElementFactory(factoryOptions);\n};\n"],"names":["usePortalMountNode","useInsertionEffect","React","useLegacyElementFactory","options","className","dir","focusVisibleRef","targetNode","targetElement","useMemo","undefined","disabled","element","ownerDocument","createElement","appendChild","setAttribute","current","useEffect","remove","useModernElementFactory","elementFactory","useState","currentElement","get","targetRoot","forceCreation","dispose","elementProxy","Proxy","_","property","portalHasNoChildren","childNodes","length","bind","targetProperty","set","value","Object","assign","classesToApply","split","filter","Boolean","classList","add","removeAttribute","targetDocument","useFluent","mountNode","usePortalMountNodeContext","useFocusVisible","classes","usePortalMountNodeStylesStyles","themeClassName","useThemeClassName","factoryOptions","mergeClasses","root","body"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
1	+ {"version":3,"sources":["../src/components/Portal/usePortalMountNode.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n useThemeClassName_unstable as useThemeClassName,\n useFluent_unstable as useFluent,\n usePortalMountNode as usePortalMountNodeContext,\n} from '@fluentui/react-shared-contexts';\nimport { mergeClasses } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\nimport { useDisposable } from 'use-disposable';\n\nimport { usePortalMountNodeStylesStyles } from './usePortalMountNodeStyles.styles';\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\n/\n Creates a new element on a \"document.body\" to mount portals.\n */\nexport const usePortalMountNode = (options: UsePortalMountNodeOptions): HTMLElement \| null => {\n 'use no memo';\n\n const { targetDocument, dir } = useFluent();\n const mountNode = usePortalMountNodeContext();\n\n const focusVisibleRef = useFocusVisible<HTMLDivElement>() as React.MutableRefObject<HTMLElement \| null>;\n const classes = usePortalMountNodeStylesStyles();\n const themeClassName = useThemeClassName();\n\n const className = mergeClasses(themeClassName, classes.root, options.className);\n const targetNode: HTMLElement \| ShadowRoot \| undefined = mountNode ?? targetDocument?.body;\n\n const element = useDisposable(() => {\n if (targetNode === undefined \|\| options.disabled) {\n return [null, () => null];\n }\n\n const newElement = targetNode.ownerDocument.createElement('div');\n targetNode.appendChild(newElement);\n return [newElement, () => newElement.remove()];\n }, [targetNode]);\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 element.setAttribute('data-portal-node', 'true');\n\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 element.setAttribute('data-portal-node', 'true');\n\n focusVisibleRef.current = element;\n }, [className, dir, element, focusVisibleRef]);\n }\n\n return element;\n};\n"],"names":["usePortalMountNode","useInsertionEffect","React","options","targetDocument","dir","useFluent","mountNode","usePortalMountNodeContext","focusVisibleRef","useFocusVisible","classes","usePortalMountNodeStylesStyles","themeClassName","useThemeClassName","className","mergeClasses","root","targetNode","body","element","useDisposable","undefined","disabled","newElement","ownerDocument","createElement","appendChild","remove","classesToApply","split","filter","Boolean","classList","add","setAttribute","current","removeAttribute","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA0BaA;;;eAAAA;;;;iEA1BU;qCAKhB;wBACsB;8BACG;+BACF;gDAEiB;AAE/C,MAAMC,qBAAqBC,MAAgB,CAAC,iBAAiB,SAAS;AAc/D,MAAMF,qBAAqB,CAACG;IACjC;IAEA,MAAM,EAAEC,cAAc,EAAEC,GAAG,EAAE,GAAGC,IAAAA,uCAAAA;IAChC,MAAMC,YAAYC,IAAAA,uCAAAA;IAElB,MAAMC,kBAAkBC,IAAAA,6BAAAA;IACxB,MAAMC,UAAUC,IAAAA,8DAAAA;IAChB,MAAMC,iBAAiBC,IAAAA,+CAAAA;IAEvB,MAAMC,YAAYC,IAAAA,oBAAAA,EAAaH,gBAAgBF,QAAQM,IAAI,EAAEd,QAAQY,SAAS;IAC9E,MAAMG,aAAmDX,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAaH,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBe,IAAI;IAE1F,MAAMC,UAAUC,IAAAA,4BAAAA,EAAc;QAC5B,IAAIH,eAAeI,aAAanB,QAAQoB,QAAQ,EAAE;YAChD,OAAO;gBAAC;gBAAM,IAAM;aAAK;QAC3B;QAEA,MAAMC,aAAaN,WAAWO,aAAa,CAACC,aAAa,CAAC;QAC1DR,WAAWS,WAAW,CAACH;QACvB,OAAO;YAACA;YAAY,IAAMA,WAAWI,MAAM;SAAG;IAChD,GAAG;QAACV;KAAW;IAEf,IAAIjB,oBAAoB;QACtB,sDAAsD;QACtDA,mBAAmB;YACjB,IAAI,CAACmB,SAAS;gBACZ;YACF;YAEA,MAAMS,iBAAiBd,UAAUe,KAAK,CAAC,KAAKC,MAAM,CAACC;YAEnDZ,QAAQa,SAAS,CAACC,GAAG,IAAIL;YACzBT,QAAQe,YAAY,CAAC,OAAO9B;YAC5Be,QAAQe,YAAY,CAAC,oBAAoB;YAEzC1B,gBAAgB2B,OAAO,GAAGhB;YAE1B,OAAO;gBACLA,QAAQa,SAAS,CAACL,MAAM,IAAIC;gBAC5BT,QAAQiB,eAAe,CAAC;YAC1B;QACF,GAAG;YAACtB;YAAWV;YAAKe;YAASX;SAAgB;IAC/C,OAAO;QACL,gDAAgD;QAChD,4EAA4E;QAC5E,yFAAyF;QACzF,iFAAiF;QACjF,sDAAsD;QACtDP,OAAMoC,OAAO,CAAC;YACZ,IAAI,CAAClB,SAAS;gBACZ;YACF;YAEA,4BAA4B;YAC5BA,QAAQL,SAAS,GAAGA;YACpBK,QAAQe,YAAY,CAAC,OAAO9B;YAC5Be,QAAQe,YAAY,CAAC,oBAAoB;YAEzC1B,gBAAgB2B,OAAO,GAAGhB;QAC5B,GAAG;YAACL;YAAWV;YAAKe;YAASX;SAAgB;IAC/C;IAEA,OAAOW;AACT"}

package/lib-commonjs/components/Portal/usePortalMountNodeStyles.styles.raw.js ADDED Viewed

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "usePortalMountNodeStylesStyles", {
+    enumerable: true,
+    get: function() {
+        return usePortalMountNodeStylesStyles;
+    }
+});
+const _react = require("@griffel/react");
+const usePortalMountNodeStylesStyles = (0, _react.makeStyles)({
+    root: {
+        // Creates new stacking context to prevent z-index issues
+        // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context
+        //
+        // Also keeps a portal on top of a page to prevent scrollbars from appearing
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        zIndex: 1000000
+    }
+});

package/lib-commonjs/components/Portal/usePortalMountNodeStyles.styles.raw.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../src/components/Portal/usePortalMountNodeStyles.styles.ts"],"sourcesContent":["import { makeStyles } from '@griffel/react';\n\nexport const usePortalMountNodeStylesStyles = makeStyles({\n root: {\n // Creates new stacking context to prevent z-index issues\n // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context\n //\n // Also keeps a portal on top of a page to prevent scrollbars from appearing\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n\n zIndex: 1000000,\n },\n});\n"],"names":["usePortalMountNodeStylesStyles","makeStyles","root","position","top","left","right","zIndex"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAEaA;;;eAAAA;;;uBAFc;AAEpB,MAAMA,iCAAiCC,IAAAA,iBAAAA,EAAW;IACvDC,MAAM;QACJ,yDAAyD;QACzD,gHAAgH;QAChH,EAAE;QACF,4EAA4E;QAC5EC,UAAU;QACVC,KAAK;QACLC,MAAM;QACNC,OAAO;QAEPC,QAAQ;IACV;AACF"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-portal",
-  "version": "9.6.3",
+  "version": "9.7.0",
   "description": "A utility component that creates portals compatible with Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,10 +19,11 @@
   },
   "dependencies": {
     "@fluentui/react-shared-contexts": "^9.24.0",
-    "@fluentui/react-tabster": "^9.25.3",
+    "@fluentui/react-tabster": "^9.26.0",
     "@fluentui/react-utilities": "^9.22.0",
     "@griffel/react": "^1.5.22",
-    "@swc/helpers": "^0.5.1"
+    "@swc/helpers": "^0.5.1",
+    "use-disposable": "^1.0.1"
   },
   "peerDependencies": {
     "@types/react": ">=16.14.0 <19.0.0",