@fluentui/react-portal 9.7.2 → 9.8.0

package/CHANGELOG.md

@@ -1,12 +1,23 @@
 # Change Log - @fluentui/react-portal
 
-This log was last generated on Wed, 30 Jul 2025 08:41:07 GMT and should not be manually modified.
+This log was last generated on Thu, 07 Aug 2025 09:59:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.8.0)
+
+Thu, 07 Aug 2025 09:59:06 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.7.2..@fluentui/react-portal_v9.8.0)
+
+### Minor changes
+
+- feat: support for react 19 ([PR #34916](https://github.com/microsoft/fluentui/pull/34916) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-tabster to v9.26.3 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
+- Bump @fluentui/react-utilities to v9.23.2 ([PR #34980](https://github.com/microsoft/fluentui/pull/34980) by beachball)
+
 ## [9.7.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.7.2)
 
-Wed, 30 Jul 2025 08:41:07 GMT 
+Wed, 30 Jul 2025 13:10:57 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.7.1..@fluentui/react-portal_v9.7.2)
 
 ### Patches

package/lib/components/Portal/renderPortal.js

@@ -6,5 +6,7 @@ import * as React from 'react';
     return /*#__PURE__*/ React.createElement("span", {
         hidden: true,
         ref: state.virtualParentRootRef
-    }, state.mountNode && /*#__PURE__*/ ReactDOM.createPortal(state.children, state.mountNode));
+    }, state.mountNode && /*#__PURE__*/ ReactDOM.createPortal(/*#__PURE__*/ React.createElement(React.Fragment, null, state.children, /*#__PURE__*/ React.createElement("span", {
+        hidden: true
+    })), state.mountNode));
 };

package/lib/components/Portal/renderPortal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Portal/renderPortal.tsx"],"sourcesContent":["import * as ReactDOM from 'react-dom';\nimport * as React from 'react';\nimport type { PortalState } from './Portal.types';\n\n/**\n * Render the final JSX of Portal\n */\nexport const renderPortal_unstable = (state: PortalState): React.ReactElement => {\n  return (\n    <span hidden ref={state.virtualParentRootRef}>\n      {state.mountNode && ReactDOM.createPortal(state.children, state.mountNode)}\n    </span>\n  );\n};\n"],"names":["ReactDOM","React","renderPortal_unstable","state","span","hidden","ref","virtualParentRootRef","mountNode","createPortal","children"],"mappings":"AAAA,YAAYA,cAAc,YAAY;AACtC,YAAYC,WAAW,QAAQ;AAG/B;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpC,qBACE,oBAACC;QAAKC,QAAAA;QAAOC,KAAKH,MAAMI,oBAAoB;OACzCJ,MAAMK,SAAS,kBAAIR,SAASS,YAAY,CAACN,MAAMO,QAAQ,EAAEP,MAAMK,SAAS;AAG/E,EAAE"}
+{"version":3,"sources":["../src/components/Portal/renderPortal.tsx"],"sourcesContent":["import * as ReactDOM from 'react-dom';\nimport * as React from 'react';\nimport type { PortalState } from './Portal.types';\n\n/**\n * Render the final JSX of Portal\n */\nexport const renderPortal_unstable = (state: PortalState): React.ReactElement => {\n  return (\n    <span hidden ref={state.virtualParentRootRef}>\n      {state.mountNode &&\n        ReactDOM.createPortal(\n          <>\n            {state.children}\n            {/* Heads up!\n             *  This node exists only to ensure that the portal is not empty as we rely on that in `usePortalMountNode`\n             *  hook for React 18+.\n             */}\n            <span hidden />\n          </>,\n          state.mountNode,\n        )}\n    </span>\n  );\n};\n"],"names":["ReactDOM","React","renderPortal_unstable","state","span","hidden","ref","virtualParentRootRef","mountNode","createPortal","children"],"mappings":"AAAA,YAAYA,cAAc,YAAY;AACtC,YAAYC,WAAW,QAAQ;AAG/B;;CAEC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpC,qBACE,oBAACC;QAAKC,QAAAA;QAAOC,KAAKH,MAAMI,oBAAoB;OACzCJ,MAAMK,SAAS,kBACdR,SAASS,YAAY,eACnB,0CACGN,MAAMO,QAAQ,gBAKf,oBAACN;QAAKC,QAAAA;SAERF,MAAMK,SAAS;AAIzB,EAAE"}

package/lib/components/Portal/usePortalMountNode.js

@@ -2,9 +2,184 @@ 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)=>{
+    'use no memo';
+    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');
+        focusVisibleRef.current = targetElement;
+    }, [
+        className,
+        dir,
+        targetElement,
+        focusVisibleRef
+    ]);
+    React.useEffect(()=>{
+        return ()=>{
+            targetElement === null || targetElement === void 0 ? void 0 : targetElement.remove();
+        };
+    }, [
+        targetElement
+    ]);
+    return targetElement;
+};
+const initializeElementFactory = ()=>{
+    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
+    };
+};
+/**
+ * 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)=>{
+    'use no memo';
+    const { className, dir, focusVisibleRef, targetNode } = options;
+    const [elementFactory] = React.useState(initializeElementFactory);
+    const elementProxy = React.useMemo(()=>{
+        if (targetNode === undefined || options.disabled) {
+            return null;
+        }
+        return new Proxy({}, {
+            get (_, property) {
+                // Heads up!
+                // `createPortal()` performs a check for `nodeType` property to determine if the mount node is a valid DOM node
+                // before mounting the portal. We hardcode the value to `Node.ELEMENT_NODE` to pass this check and avoid
+                // premature node creation
+                if (property === 'nodeType') {
+                    return Node.ELEMENT_NODE;
+                }
+                // 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, otherwise we can dispose of it
+                        const portalHasNoChildren = targetElement.childNodes.length === 0;
+                        if (portalHasNoChildren) {
+                            elementFactory.dispose();
+                        }
+                    }
+                    return ()=>{
+                    // Always return a no-op function to avoid errors in the code
+                    };
+                }
+                const targetElement = elementFactory.get(targetNode, true);
+                const targetProperty = targetElement ? targetElement[property] : undefined;
+                if (typeof targetProperty === 'function') {
+                    return targetProperty.bind(targetElement);
+                }
+                return targetProperty;
+            },
+            set (_, property, value) {
+                const ignoredProperty = property === '_virtual' || property === 'focusVisible';
+                // We should use the `elementFactory.get(targetNode, !ignoredProperty)`,
+                // but TypeScript requires a literal `true` or `false` for the overload signature.
+                // This workaround ensures the correct overload is called and avoids TypeScript errors.
+                const targetElement = ignoredProperty ? elementFactory.get(targetNode, false) : elementFactory.get(targetNode, true);
+                if (ignoredProperty && !targetElement) {
+                    // We ignore the `_virtual` and `focusVisible` properties to avoid conflicts with the proxy
+                    return true;
+                }
+                if (targetElement) {
+                    Object.assign(targetElement, {
+                        [property]: value
+                    });
+                    return true;
+                }
+                return false;
+            }
+        });
+    }, [
+        elementFactory,
+        targetNode,
+        options.disabled
+    ]);
+    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
+    ]);
+    React.useEffect(()=>{
+        return ()=>{
+            elementProxy === null || elementProxy === void 0 ? void 0 : elementProxy.remove();
+        };
+    }, [
+        elementProxy
+    ]);
+    return elementProxy;
+};
+/**
+ * Element factory based on the React version.
+ *
+ * React 17 and below:
+ * - useLegacyElementFactory
+ *
+ * React 18 and above:
+ * - useModernElementFactory
+ */ const useElementFactory = useInsertionEffect ? useModernElementFactory : useLegacyElementFactory;
 /**
  * Creates a new element on a "document.body" to mount portals.
  */ export const usePortalMountNode = (options)=>{
@@ -14,66 +189,12 @@ const useInsertionEffect = React['useInsertion' + 'Effect'];
     const focusVisibleRef = useFocusVisible();
     const classes = usePortalMountNodeStylesStyles();
     const themeClassName = useThemeClassName();
-    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
-        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
-        ]);
-    }
-    return element;
+    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
+    };
+    return useElementFactory(factoryOptions);
 };

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

@@ -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';\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"],"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"}
+{"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  'use no memo';\n\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    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\nconst initializeElementFactory = () => {\n  let currentElement: HTMLDivElement | undefined = undefined;\n\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/**\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  'use no memo';\n\n  const { className, dir, focusVisibleRef, targetNode } = options;\n\n  const [elementFactory] = React.useState(initializeElementFactory);\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        // `createPortal()` performs a check for `nodeType` property to determine if the mount node is a valid DOM node\n        // before mounting the portal. We hardcode the value to `Node.ELEMENT_NODE` to pass this check and avoid\n        // premature node creation\n        if (property === 'nodeType') {\n          return Node.ELEMENT_NODE;\n        }\n\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, otherwise we can dispose of it\n            const portalHasNoChildren = targetElement.childNodes.length === 0;\n\n            if (portalHasNoChildren) {\n              elementFactory.dispose();\n            }\n          }\n\n          return () => {\n            // Always return a no-op function to avoid errors in the code\n          };\n        }\n\n        const targetElement = elementFactory.get(targetNode, true);\n        const targetProperty = targetElement ? targetElement[property] : undefined;\n\n        if (typeof targetProperty === 'function') {\n          return targetProperty.bind(targetElement);\n        }\n\n        return targetProperty;\n      },\n\n      set(_, property: keyof HTMLDivElement | '_virtual' | 'focusVisible', value) {\n        const ignoredProperty = property === '_virtual' || property === 'focusVisible';\n\n        // We should use the `elementFactory.get(targetNode, !ignoredProperty)`,\n        // but TypeScript requires a literal `true` or `false` for the overload signature.\n        // This workaround ensures the correct overload is called and avoids TypeScript errors.\n        const targetElement = ignoredProperty\n          ? elementFactory.get(targetNode, false)\n          : elementFactory.get(targetNode, true);\n\n        if (ignoredProperty && !targetElement) {\n          // We ignore the `_virtual` and `focusVisible` properties to avoid conflicts with the proxy\n          return true;\n        }\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  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  React.useEffect(() => {\n    return () => {\n      elementProxy?.remove();\n    };\n  }, [elementProxy]);\n\n  return elementProxy;\n};\n\n/**\n * Element factory based on the React version.\n *\n * React 17 and below:\n * - useLegacyElementFactory\n *\n * React 18 and above:\n * - useModernElementFactory\n */\nconst useElementFactory = useInsertionEffect ? useModernElementFactory : useLegacyElementFactory;\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  return useElementFactory(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","initializeElementFactory","currentElement","get","targetRoot","forceCreation","dispose","useModernElementFactory","elementFactory","useState","elementProxy","Proxy","_","property","Node","ELEMENT_NODE","portalHasNoChildren","childNodes","length","targetProperty","bind","set","value","ignoredProperty","Object","assign","classesToApply","split","filter","Boolean","classList","add","removeAttribute","useElementFactory","targetDocument","mountNode","classes","themeClassName","factoryOptions","root","body"],"mappings":"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"}

package/lib-commonjs/components/Portal/renderPortal.js

@@ -15,5 +15,7 @@ const renderPortal_unstable = (state)=>{
     return /*#__PURE__*/ _react.createElement("span", {
         hidden: true,
         ref: state.virtualParentRootRef
-    }, state.mountNode && /*#__PURE__*/ _reactdom.createPortal(state.children, state.mountNode));
+    }, state.mountNode && /*#__PURE__*/ _reactdom.createPortal(/*#__PURE__*/ _react.createElement(_react.Fragment, null, state.children, /*#__PURE__*/ _react.createElement("span", {
+        hidden: true
+    })), state.mountNode));
 };

package/lib-commonjs/components/Portal/renderPortal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Portal/renderPortal.tsx"],"sourcesContent":["import * as ReactDOM from 'react-dom';\nimport * as React from 'react';\nimport type { PortalState } from './Portal.types';\n\n/**\n * Render the final JSX of Portal\n */\nexport const renderPortal_unstable = (state: PortalState): React.ReactElement => {\n  return (\n    <span hidden ref={state.virtualParentRootRef}>\n      {state.mountNode && ReactDOM.createPortal(state.children, state.mountNode)}\n    </span>\n  );\n};\n"],"names":["ReactDOM","React","renderPortal_unstable","state","span","hidden","ref","virtualParentRootRef","mountNode","createPortal","children"],"mappings":";;;;+BAOaE;;;;;;;oEAPa,YAAY;iEACf,QAAQ;AAMxB,8BAA8B,CAACC;IACpC,OAAA,WAAA,GACE,OAAA,aAAA,CAACC,QAAAA;QAAKC,QAAAA;QAAOC,KAAKH,MAAMI,oBAAoB;OACzCJ,MAAMK,SAAS,IAAA,WAAA,GAAIR,UAASS,YAAY,CAACN,MAAMO,QAAQ,EAAEP,MAAMK,SAAS;AAG/E,EAAE"}
+{"version":3,"sources":["../src/components/Portal/renderPortal.tsx"],"sourcesContent":["import * as ReactDOM from 'react-dom';\nimport * as React from 'react';\nimport type { PortalState } from './Portal.types';\n\n/**\n * Render the final JSX of Portal\n */\nexport const renderPortal_unstable = (state: PortalState): React.ReactElement => {\n  return (\n    <span hidden ref={state.virtualParentRootRef}>\n      {state.mountNode &&\n        ReactDOM.createPortal(\n          <>\n            {state.children}\n            {/* Heads up!\n             *  This node exists only to ensure that the portal is not empty as we rely on that in `usePortalMountNode`\n             *  hook for React 18+.\n             */}\n            <span hidden />\n          </>,\n          state.mountNode,\n        )}\n    </span>\n  );\n};\n"],"names":["ReactDOM","React","renderPortal_unstable","state","span","hidden","ref","virtualParentRootRef","mountNode","createPortal","children"],"mappings":";;;;+BAOaE;;;;;;;oEAPa,YAAY;iEACf,QAAQ;AAMxB,8BAA8B,CAACC;IACpC,OAAA,WAAA,GACE,OAAA,aAAA,CAACC,QAAAA;QAAKC,QAAAA;QAAOC,KAAKH,MAAMI,oBAAoB;OACzCJ,MAAMK,SAAS,IAAA,WAAA,GACdR,UAASS,YAAY,CAAA,WAAA,GACnB,OAAA,aAAA,CAAA,OAAA,QAAA,EAAA,MACGN,MAAMO,QAAQ,EAAA,WAAA,GAKf,OAAA,aAAA,CAACN,QAAAA;QAAKC,QAAAA;SAERF,MAAMK,SAAS;AAIzB,EAAE"}

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

@@ -13,9 +13,184 @@ 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)=>{
+    'use no memo';
+    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');
+        focusVisibleRef.current = targetElement;
+    }, [
+        className,
+        dir,
+        targetElement,
+        focusVisibleRef
+    ]);
+    _react.useEffect(()=>{
+        return ()=>{
+            targetElement === null || targetElement === void 0 ? void 0 : targetElement.remove();
+        };
+    }, [
+        targetElement
+    ]);
+    return targetElement;
+};
+const initializeElementFactory = ()=>{
+    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
+    };
+};
+/**
+ * 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)=>{
+    'use no memo';
+    const { className, dir, focusVisibleRef, targetNode } = options;
+    const [elementFactory] = _react.useState(initializeElementFactory);
+    const elementProxy = _react.useMemo(()=>{
+        if (targetNode === undefined || options.disabled) {
+            return null;
+        }
+        return new Proxy({}, {
+            get (_, property) {
+                // Heads up!
+                // `createPortal()` performs a check for `nodeType` property to determine if the mount node is a valid DOM node
+                // before mounting the portal. We hardcode the value to `Node.ELEMENT_NODE` to pass this check and avoid
+                // premature node creation
+                if (property === 'nodeType') {
+                    return Node.ELEMENT_NODE;
+                }
+                // 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, otherwise we can dispose of it
+                        const portalHasNoChildren = targetElement.childNodes.length === 0;
+                        if (portalHasNoChildren) {
+                            elementFactory.dispose();
+                        }
+                    }
+                    return ()=>{
+                    // Always return a no-op function to avoid errors in the code
+                    };
+                }
+                const targetElement = elementFactory.get(targetNode, true);
+                const targetProperty = targetElement ? targetElement[property] : undefined;
+                if (typeof targetProperty === 'function') {
+                    return targetProperty.bind(targetElement);
+                }
+                return targetProperty;
+            },
+            set (_, property, value) {
+                const ignoredProperty = property === '_virtual' || property === 'focusVisible';
+                // We should use the `elementFactory.get(targetNode, !ignoredProperty)`,
+                // but TypeScript requires a literal `true` or `false` for the overload signature.
+                // This workaround ensures the correct overload is called and avoids TypeScript errors.
+                const targetElement = ignoredProperty ? elementFactory.get(targetNode, false) : elementFactory.get(targetNode, true);
+                if (ignoredProperty && !targetElement) {
+                    // We ignore the `_virtual` and `focusVisible` properties to avoid conflicts with the proxy
+                    return true;
+                }
+                if (targetElement) {
+                    Object.assign(targetElement, {
+                        [property]: value
+                    });
+                    return true;
+                }
+                return false;
+            }
+        });
+    }, [
+        elementFactory,
+        targetNode,
+        options.disabled
+    ]);
+    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
+    ]);
+    _react.useEffect(()=>{
+        return ()=>{
+            elementProxy === null || elementProxy === void 0 ? void 0 : elementProxy.remove();
+        };
+    }, [
+        elementProxy
+    ]);
+    return elementProxy;
+};
+/**
+ * Element factory based on the React version.
+ *
+ * React 17 and below:
+ * - useLegacyElementFactory
+ *
+ * React 18 and above:
+ * - useModernElementFactory
+ */ const useElementFactory = useInsertionEffect ? useModernElementFactory : useLegacyElementFactory;
 const usePortalMountNode = (options)=>{
     'use no memo';
     const { targetDocument, dir } = (0, _reactsharedcontexts.useFluent_unstable)();
@@ -23,66 +198,12 @@ const usePortalMountNode = (options)=>{
     const focusVisibleRef = (0, _reacttabster.useFocusVisible)();
     const classes = (0, _usePortalMountNodeStylesstyles.usePortalMountNodeStylesStyles)();
     const themeClassName = (0, _reactsharedcontexts.useThemeClassName_unstable)();
-    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
-        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
-        ]);
-    }
-    return element;
+    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
+    };
+    return useElementFactory(factoryOptions);
 };

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

@@ -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';\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"],"mappings":";;;;+BA0BaK;;;;;;;iEA1BU,QAAQ;qCAKxB,kCAAkC;wBACZ,iBAAiB;8BACd,0BAA0B;+BAC5B,iBAAiB;gDAEA,oCAAoC;AAEnF,MAAMM,qBAAsBX,MAAe,CAAC,iBAAiB,SAAS;AAc/D,2BAA2B,CAACY;IACjC;IAEA,MAAM,EAAEC,cAAc,EAAEC,GAAG,EAAE,OAAGV,uCAAAA;IAChC,MAAMW,gBAAYT,uCAAAA;IAElB,MAAMU,sBAAkBR,6BAAAA;IACxB,MAAMS,cAAUP,8DAAAA;IAChB,MAAMQ,qBAAiBhB,+CAAAA;IAEvB,MAAMiB,gBAAYZ,oBAAAA,EAAaW,gBAAgBD,QAAQG,IAAI,EAAER,QAAQO,SAAS;IAC9E,MAAME,aAAmDN,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAaF,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBS,IAAI;IAE1F,MAAMC,cAAUd,4BAAAA,EAAc;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,OAAMwC,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"}
+{"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  'use no memo';\n\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    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\nconst initializeElementFactory = () => {\n  let currentElement: HTMLDivElement | undefined = undefined;\n\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/**\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  'use no memo';\n\n  const { className, dir, focusVisibleRef, targetNode } = options;\n\n  const [elementFactory] = React.useState(initializeElementFactory);\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        // `createPortal()` performs a check for `nodeType` property to determine if the mount node is a valid DOM node\n        // before mounting the portal. We hardcode the value to `Node.ELEMENT_NODE` to pass this check and avoid\n        // premature node creation\n        if (property === 'nodeType') {\n          return Node.ELEMENT_NODE;\n        }\n\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, otherwise we can dispose of it\n            const portalHasNoChildren = targetElement.childNodes.length === 0;\n\n            if (portalHasNoChildren) {\n              elementFactory.dispose();\n            }\n          }\n\n          return () => {\n            // Always return a no-op function to avoid errors in the code\n          };\n        }\n\n        const targetElement = elementFactory.get(targetNode, true);\n        const targetProperty = targetElement ? targetElement[property] : undefined;\n\n        if (typeof targetProperty === 'function') {\n          return targetProperty.bind(targetElement);\n        }\n\n        return targetProperty;\n      },\n\n      set(_, property: keyof HTMLDivElement | '_virtual' | 'focusVisible', value) {\n        const ignoredProperty = property === '_virtual' || property === 'focusVisible';\n\n        // We should use the `elementFactory.get(targetNode, !ignoredProperty)`,\n        // but TypeScript requires a literal `true` or `false` for the overload signature.\n        // This workaround ensures the correct overload is called and avoids TypeScript errors.\n        const targetElement = ignoredProperty\n          ? elementFactory.get(targetNode, false)\n          : elementFactory.get(targetNode, true);\n\n        if (ignoredProperty && !targetElement) {\n          // We ignore the `_virtual` and `focusVisible` properties to avoid conflicts with the proxy\n          return true;\n        }\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  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  React.useEffect(() => {\n    return () => {\n      elementProxy?.remove();\n    };\n  }, [elementProxy]);\n\n  return elementProxy;\n};\n\n/**\n * Element factory based on the React version.\n *\n * React 17 and below:\n * - useLegacyElementFactory\n *\n * React 18 and above:\n * - useModernElementFactory\n */\nconst useElementFactory = useInsertionEffect ? useModernElementFactory : useLegacyElementFactory;\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  return useElementFactory(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","initializeElementFactory","currentElement","get","targetRoot","forceCreation","dispose","useModernElementFactory","elementFactory","useState","elementProxy","Proxy","_","property","Node","ELEMENT_NODE","portalHasNoChildren","childNodes","length","targetProperty","bind","set","value","ignoredProperty","Object","assign","classesToApply","split","filter","Boolean","classList","add","removeAttribute","useElementFactory","targetDocument","mountNode","classes","themeClassName","factoryOptions","root","body"],"mappings":";;;;+BAyOaK;;;;;;;iEAzOU,QAAQ;qCAKxB,kCAAkC;wBACZ,iBAAiB;8BACd,0BAA0B;gDAEX,oCAAoC;AAEnF,MAAMK,qBAAsBV,MAAe,CAAC,iBAAiB,SAAS;AAoBtE;;;;CAIC,GACD,MAAMW,0BAA6CC,CAAAA;IACjD;IAEA,MAAM,EAAEC,SAAS,EAAEC,GAAG,EAAEC,eAAe,EAAEC,UAAU,EAAE,GAAGJ;IAExD,MAAMK,gBAAgBjB,OAAMkB,OAAO,CAAC;QAClC,IAAIF,eAAeG,aAAaP,QAAQQ,QAAQ,EAAE;YAChD,OAAO;QACT;QAEA,MAAMC,UAAUL,WAAWM,aAAa,CAACC,aAAa,CAAC;QACvDP,WAAWQ,WAAW,CAACH;QAEvB,OAAOA;IACT,GAAG;QAACL;QAAYJ,QAAQQ,QAAQ;KAAC;IAEjC,YAAY;IACZ,2DAA2D;IAC3D,EAAE;IACF,sHAAsH;IACtH,qHAAqH;IACrH,eAAe;IACfpB,OAAMkB,OAAO,CAAC;QACZ,IAAI,CAACD,eAAe;YAClB;QACF;QAEAA,cAAcJ,SAAS,GAAGA;QAC1BI,cAAcQ,YAAY,CAAC,OAAOX;QAClCG,cAAcQ,YAAY,CAAC,oBAAoB;QAE/CV,gBAAgBW,OAAO,GAAGT;IAC5B,GAAG;QAACJ;QAAWC;QAAKG;QAAeF;KAAgB;IAEnDf,OAAM2B,SAAS,CAAC;QACd,OAAO;YACLV,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAeW,MAAM;QACvB;IACF,GAAG;QAACX;KAAc;IAElB,OAAOA;AACT;AAEA,MAAMY,2BAA2B;IAC/B,IAAIC,iBAA6CX;IAEjD,SAASY,IAAIC,UAAoC,EAAEC,aAAsB;QACvE,IAAIH,gBAAgB;YAClB,OAAOA;QACT;QAEA,IAAIG,eAAe;YACjBH,iBAAiBE,WAAWV,aAAa,CAACC,aAAa,CAAC;YACxDS,WAAWR,WAAW,CAACM;QACzB;QAEA,OAAOA;IACT;IAEA,SAASI;QACP,IAAIJ,gBAAgB;YAClBA,eAAeF,MAAM;YACrBE,iBAAiBX;QACnB;IACF;IAEA,OAAO;QACLY;QACAG;IACF;AACF;AAEA;;;;;;CAMC,GACD,MAAMC,0BAA6CvB,CAAAA;IACjD;IAEA,MAAM,EAAEC,SAAS,EAAEC,GAAG,EAAEC,eAAe,EAAEC,UAAU,EAAE,GAAGJ;IAExD,MAAM,CAACwB,eAAe,GAAGpC,OAAMqC,QAAQ,CAACR;IAExC,MAAMS,eAAetC,OAAMkB,OAAO,CAAC;QACjC,IAAIF,eAAeG,aAAaP,QAAQQ,QAAQ,EAAE;YAChD,OAAO;QACT;QAEA,OAAO,IAAImB,MAAM,CAAC,GAAqB;YACrCR,KAAIS,CAAC,EAAEC,QAA8B;gBACnC,YAAY;gBACZ,+GAA+G;gBAC/G,wGAAwG;gBACxG,0BAA0B;gBAC1B,IAAIA,aAAa,YAAY;oBAC3B,OAAOC,KAAKC,YAAY;gBAC1B;gBAEA,YAAY;gBACZ,2GAA2G;gBAC3G,IAAIF,aAAa,UAAU;oBACzB,MAAMxB,gBAAgBmB,eAAeL,GAAG,CAACf,YAAY;oBAErD,IAAIC,eAAe;wBACjB,gGAAgG;wBAChG,MAAM2B,sBAAsB3B,cAAc4B,UAAU,CAACC,MAAM,KAAK;wBAEhE,IAAIF,qBAAqB;4BACvBR,eAAeF,OAAO;wBACxB;oBACF;oBAEA,OAAO;oBACL,6DAA6D;oBAC/D;gBACF;gBAEA,MAAMjB,gBAAgBmB,eAAeL,GAAG,CAACf,YAAY;gBACrD,MAAM+B,iBAAiB9B,gBAAgBA,aAAa,CAACwB,SAAS,GAAGtB;gBAEjE,IAAI,OAAO4B,mBAAmB,YAAY;oBACxC,OAAOA,eAAeC,IAAI,CAAC/B;gBAC7B;gBAEA,OAAO8B;YACT;YAEAE,KAAIT,CAAC,EAAEC,QAA4D,EAAES,KAAK;gBACxE,MAAMC,kBAAkBV,aAAa,cAAcA,aAAa;gBAEhE,wEAAwE;gBACxE,kFAAkF;gBAClF,uFAAuF;gBACvF,MAAMxB,gBAAgBkC,kBAClBf,eAAeL,GAAG,CAACf,YAAY,SAC/BoB,eAAeL,GAAG,CAACf,YAAY;gBAEnC,IAAImC,mBAAmB,CAAClC,eAAe;oBACrC,2FAA2F;oBAC3F,OAAO;gBACT;gBAEA,IAAIA,eAAe;oBACjBmC,OAAOC,MAAM,CAACpC,eAAe;wBAAE,CAACwB,SAAS,EAAES;oBAAM;oBACjD,OAAO;gBACT;gBAEA,OAAO;YACT;QACF;IACF,GAAG;QAACd;QAAgBpB;QAAYJ,QAAQQ,QAAQ;KAAC;IAEjDV,mBAAoB;QAClB,IAAI,CAAC4B,cAAc;YACjB;QACF;QAEA,MAAMgB,iBAAiBzC,UAAU0C,KAAK,CAAC,KAAKC,MAAM,CAACC;QAEnDnB,aAAaoB,SAAS,CAACC,GAAG,IAAIL;QAC9BhB,aAAab,YAAY,CAAC,OAAOX;QACjCwB,aAAab,YAAY,CAAC,oBAAoB;QAE9CV,gBAAgBW,OAAO,GAAGY;QAE1B,OAAO;YACLA,aAAaoB,SAAS,CAAC9B,MAAM,IAAI0B;YACjChB,aAAasB,eAAe,CAAC;QAC/B;IACF,GAAG;QAAC/C;QAAWC;QAAKwB;QAAcvB;KAAgB;IAElDf,OAAM2B,SAAS,CAAC;QACd,OAAO;YACLW,iBAAAA,QAAAA,iBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,aAAcV,MAAM;QACtB;IACF,GAAG;QAACU;KAAa;IAEjB,OAAOA;AACT;AAEA;;;;;;;;CAQC,GACD,MAAMuB,oBAAoBnD,qBAAqByB,0BAA0BxB;AAKlE,2BAA2B,CAACC;IACjC;IAEA,MAAM,EAAEkD,cAAc,EAAEhD,GAAG,EAAE,OAAGV,uCAAAA;IAChC,MAAM2D,gBAAYzD,uCAAAA;IAElB,MAAMS,sBAAkBP,6BAAAA;IACxB,MAAMwD,cAAUvD,8DAAAA;IAChB,MAAMwD,qBAAiB/D,+CAAAA;IAEvB,MAAMgE,iBAA2C;QAC/CpD;QACAM,UAAUR,QAAQQ,QAAQ;QAC1BL;QAEAF,eAAWN,oBAAAA,EAAa0D,gBAAgBD,QAAQG,IAAI,EAAEvD,QAAQC,SAAS;QACvEG,YAAY+C,cAAAA,QAAAA,cAAAA,KAAAA,IAAAA,YAAaD,mBAAAA,QAAAA,mBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,eAAgBM,IAAI;IAC/C;IAEA,OAAOP,kBAAkBK;AAC3B,EAAE"}

package/package.json

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