@fluentui/react-portal 9.8.1 → 9.8.3

package/CHANGELOG.md

@@ -1,19 +1,43 @@
 # Change Log - @fluentui/react-portal
 
-This log was last generated on Thu, 21 Aug 2025 12:20:43 GMT and should not be manually modified.
+This log was last generated on Thu, 02 Oct 2025 15:07:19 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.8.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.8.3)
+
+Thu, 02 Oct 2025 15:07:19 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.8.2..@fluentui/react-portal_v9.8.3)
+
+### Patches
+
+- feat: enforce usage of use client directive for files with client-only features ([PR #35173](https://github.com/microsoft/fluentui/pull/35173) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.25.2 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-tabster to v9.26.6 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+- Bump @fluentui/react-utilities to v9.25.0 ([PR #35133](https://github.com/microsoft/fluentui/pull/35133) by beachball)
+
+## [9.8.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.8.2)
+
+Mon, 08 Sep 2025 12:51:15 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.8.1..@fluentui/react-portal_v9.8.2)
+
+### Patches
+
+- chore: extend peer dependencies versions to support React 19 ([PR #35145](https://github.com/microsoft/fluentui/pull/35145) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-shared-contexts to v9.25.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-tabster to v9.26.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+- Bump @fluentui/react-utilities to v9.24.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
+
 ## [9.8.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.8.1)
 
-Thu, 21 Aug 2025 12:20:43 GMT 
+Thu, 21 Aug 2025 12:25:39 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.8.0..@fluentui/react-portal_v9.8.1)
 
 ### Patches
 
-- Bump @fluentui/react-shared-contexts to v9.25.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-tabster to v9.26.4 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
-- Bump @fluentui/react-utilities to v9.24.0 ([PR #35055](https://github.com/microsoft/fluentui/pull/35055) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.25.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-tabster to v9.26.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
+- Bump @fluentui/react-utilities to v9.24.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
 
 ## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.8.0)
 

package/lib/components/Portal/Portal.js

@@ -1,3 +1,4 @@
+'use client';
 import * as React from 'react';
 import { usePortal_unstable } from './usePortal';
 import { renderPortal_unstable } from './renderPortal';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Portal/Portal.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { usePortal_unstable } from './usePortal';\nimport { renderPortal_unstable } from './renderPortal';\nimport type { PortalProps } from './Portal.types';\n\n/**\n * A portal provides a way to render children into a DOM node\n * that exists outside the DOM hierarchy of the parent component.\n */\nexport const Portal: React.FC<PortalProps> = props => {\n  const state = usePortal_unstable(props);\n\n  return renderPortal_unstable(state);\n};\n\nPortal.displayName = 'Portal';\n"],"names":["React","usePortal_unstable","renderPortal_unstable","Portal","props","state","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AAGvD;;;CAGC,GACD,OAAO,MAAMC,SAAgCC,CAAAA;IAC3C,MAAMC,QAAQJ,mBAAmBG;IAEjC,OAAOF,sBAAsBG;AAC/B,EAAE;AAEFF,OAAOG,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Portal/Portal.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { usePortal_unstable } from './usePortal';\nimport { renderPortal_unstable } from './renderPortal';\nimport type { PortalProps } from './Portal.types';\n\n/**\n * A portal provides a way to render children into a DOM node\n * that exists outside the DOM hierarchy of the parent component.\n */\nexport const Portal: React.FC<PortalProps> = props => {\n  const state = usePortal_unstable(props);\n\n  return renderPortal_unstable(state);\n};\n\nPortal.displayName = 'Portal';\n"],"names":["React","usePortal_unstable","renderPortal_unstable","Portal","props","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,qBAAqB,QAAQ,iBAAiB;AAGvD;;;CAGC,GACD,OAAO,MAAMC,SAAgCC,CAAAA;IAC3C,MAAMC,QAAQJ,mBAAmBG;IAEjC,OAAOF,sBAAsBG;AAC/B,EAAE;AAEFF,OAAOG,WAAW,GAAG"}

package/lib/components/Portal/usePortal.js

@@ -1,3 +1,4 @@
+'use client';
 import { setVirtualParent } from '@fluentui/react-utilities';
 import * as React from 'react';
 import { toMountNodeProps } from '../../utils/toMountNodeProps';

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

@@ -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  }, [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"],"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"}
+{"version":3,"sources":["../src/components/Portal/usePortal.ts"],"sourcesContent":["'use client';\n\nimport { 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"],"mappings":"AAAA;AAEA,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

@@ -1,3 +1,4 @@
+'use client';
 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';

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';\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":"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;AAE1D,SAASC,8BAA8B,QAAQ,oCAAoC;AAEnF,MAAMC,qBAAqB,AAACV,KAAe,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,MAAMkB,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,MAAMkB,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,MAAM2B,SAAS,CAAC;QACd,OAAO;YACLV,0BAAAA,oCAAAA,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,MAAMqC,QAAQ,CAACR;IAExC,MAAMS,eAAetC,MAAMkB,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,MAAM2B,SAAS,CAAC;QACd,OAAO;YACLW,yBAAAA,mCAAAA,aAAcV,MAAM;QACtB;IACF,GAAG;QAACU;KAAa;IAEjB,OAAOA;AACT;AAEA;;;;;;;;CAQC,GACD,MAAMuB,oBAAoBnD,qBAAqByB,0BAA0BxB;AAEzE;;CAEC,GACD,OAAO,MAAMN,qBAAqB,CAACO;IACjC;IAEA,MAAM,EAAEkD,cAAc,EAAEhD,GAAG,EAAE,GAAGV;IAChC,MAAM2D,YAAYzD;IAElB,MAAMS,kBAAkBP;IACxB,MAAMwD,UAAUvD;IAChB,MAAMwD,iBAAiB/D;IAEvB,MAAMgE,iBAA2C;QAC/CpD;QACAM,UAAUR,QAAQQ,QAAQ;QAC1BL;QAEAF,WAAWN,aAAa0D,gBAAgBD,QAAQG,IAAI,EAAEvD,QAAQC,SAAS;QACvEG,YAAY+C,sBAAAA,uBAAAA,YAAaD,2BAAAA,qCAAAA,eAAgBM,IAAI;IAC/C;IAEA,OAAOP,kBAAkBK;AAC3B,EAAE"}
+{"version":3,"sources":["../src/components/Portal/usePortalMountNode.ts"],"sourcesContent":["'use client';\n\nimport * 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/Portal.js

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Portal/Portal.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { usePortal_unstable } from './usePortal';\nimport { renderPortal_unstable } from './renderPortal';\nimport type { PortalProps } from './Portal.types';\n\n/**\n * A portal provides a way to render children into a DOM node\n * that exists outside the DOM hierarchy of the parent component.\n */\nexport const Portal: React.FC<PortalProps> = props => {\n  const state = usePortal_unstable(props);\n\n  return renderPortal_unstable(state);\n};\n\nPortal.displayName = 'Portal';\n"],"names":["React","usePortal_unstable","renderPortal_unstable","Portal","props","state","displayName"],"mappings":";;;;;;;;;;;iEAAuB,QAAQ;2BAEI,cAAc;8BACX,iBAAiB;AAOhD,MAAMG,SAAgCC,CAAAA;IAC3C,MAAMC,YAAQJ,6BAAAA,EAAmBG;IAEjC,WAAOF,mCAAAA,EAAsBG;AAC/B,EAAE;AAEFF,OAAOG,WAAW,GAAG"}
+{"version":3,"sources":["../src/components/Portal/Portal.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { usePortal_unstable } from './usePortal';\nimport { renderPortal_unstable } from './renderPortal';\nimport type { PortalProps } from './Portal.types';\n\n/**\n * A portal provides a way to render children into a DOM node\n * that exists outside the DOM hierarchy of the parent component.\n */\nexport const Portal: React.FC<PortalProps> = props => {\n  const state = usePortal_unstable(props);\n\n  return renderPortal_unstable(state);\n};\n\nPortal.displayName = 'Portal';\n"],"names":["React","usePortal_unstable","renderPortal_unstable","Portal","props","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;2BAEI,cAAc;8BACX,iBAAiB;AAOhD,MAAMG,SAAgCC,CAAAA;IAC3C,MAAMC,YAAQJ,6BAAAA,EAAmBG;IAEjC,WAAOF,mCAAAA,EAAsBG;AAC/B,EAAE;AAEFF,OAAOG,WAAW,GAAG"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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

@@ -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  }, [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"],"mappings":";;;;+BAcaI;;;;;;;gCAdoB,4BAA4B;iEACtC,QAAQ;kCAEE,+BAA+B;oCAC7B,uBAAuB;AAUnD,2BAA2B,CAACC;IACjC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,OAAGL,kCAAAA,EAAiBG,MAAMG,SAAS;IAE/D,MAAMC,uBAAuBR,OAAMS,MAAM,CAAkB;IAC3D,MAAMC,sBAAkBR,sCAAAA,EAAmB;QAAES,UAAU,CAAC,CAACN;QAASC;IAAU;IAE5E,MAAMC,YAAYF,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,UAAWK;IAC7B,MAAME,QAAqB;QACzBC,UAAUT,MAAMS,QAAQ;QACxBN;QACAC;IACF;IAEAR,OAAMc,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;gBAChDlB,gCAAAA,EAAiBQ,WAAWQ;YAE5B,OAAO;oBACLhB,gCAAAA,EAAiBQ,WAAWY;YAC9B;QACF;IACF,GAAG;QAACX;QAAsBD;KAAU;IAEpC,OAAOK;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Portal/usePortal.ts"],"sourcesContent":["'use client';\n\nimport { 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"],"mappings":"AAAA;;;;;+BAgBaI;;;;;;;gCAdoB,4BAA4B;iEACtC,QAAQ;kCAEE,+BAA+B;oCAC7B,uBAAuB;AAUnD,2BAA2B,CAACC;IACjC,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,OAAGL,kCAAAA,EAAiBG,MAAMG,SAAS;IAE/D,MAAMC,uBAAuBR,OAAMS,MAAM,CAAkB;IAC3D,MAAMC,sBAAkBR,sCAAAA,EAAmB;QAAES,UAAU,CAAC,CAACN;QAASC;IAAU;IAE5E,MAAMC,YAAYF,YAAAA,QAAAA,YAAAA,KAAAA,IAAAA,UAAWK;IAC7B,MAAME,QAAqB;QACzBC,UAAUT,MAAMS,QAAQ;QACxBN;QACAC;IACF;IAEAR,OAAMc,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,oCAAAA,EAAiBQ,WAAWQ;YAE5B,OAAO;oBACLhB,gCAAAA,EAAiBQ,WAAWY;YAC9B;QACF;IACF,GAAG;QAACX;QAAsBD;KAAU;IAEpC,OAAOK;AACT,EAAE"}

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

@@ -1,3 +1,4 @@
+'use client';
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true

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';\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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"}
+{"version":3,"sources":["../src/components/Portal/usePortalMountNode.ts"],"sourcesContent":["'use client';\n\nimport * 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-portal",
-  "version": "9.8.1",
+  "version": "9.8.3",
   "description": "A utility component that creates portals compatible with Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -18,17 +18,17 @@
     "@fluentui/scripts-api-extractor": "*"
   },
   "dependencies": {
-    "@fluentui/react-shared-contexts": "^9.25.0",
-    "@fluentui/react-tabster": "^9.26.4",
-    "@fluentui/react-utilities": "^9.24.0",
+    "@fluentui/react-shared-contexts": "^9.25.2",
+    "@fluentui/react-tabster": "^9.26.6",
+    "@fluentui/react-utilities": "^9.25.0",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },
   "peerDependencies": {
-    "@types/react": ">=16.14.0 <19.0.0",
-    "@types/react-dom": ">=16.9.0 <19.0.0",
-    "react": ">=16.14.0 <19.0.0",
-    "react-dom": ">=16.14.0 <19.0.0"
+    "@types/react": ">=16.14.0 <20.0.0",
+    "@types/react-dom": ">=16.9.0 <20.0.0",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.14.0 <20.0.0"
   },
   "beachball": {
     "disallowedChangeTypes": [