@fluentui/react-portal 9.8.4 → 9.8.6

package/CHANGELOG.md

@@ -1,12 +1,23 @@
 # Change Log - @fluentui/react-portal
 
-This log was last generated on Wed, 08 Oct 2025 12:00:20 GMT and should not be manually modified.
+This log was last generated on Fri, 31 Oct 2025 16:17:32 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.8.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.8.6)
+
+Fri, 31 Oct 2025 16:17:32 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.8.4..@fluentui/react-portal_v9.8.6)
+
+### Patches
+
+- fix: replace Node.ELEMENT_NODE with hardcoded value for SSR compatibility ([PR #35350](https://github.com/microsoft/fluentui/pull/35350) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-tabster to v9.26.8 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
+- Bump @fluentui/react-utilities to v9.25.2 ([PR #35402](https://github.com/microsoft/fluentui/pull/35402) by beachball)
+
 ## [9.8.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.8.4)
 
-Wed, 08 Oct 2025 12:00:20 GMT 
+Wed, 08 Oct 2025 12:04:53 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.8.3..@fluentui/react-portal_v9.8.4)
 
 ### Patches

package/lib/components/Portal/usePortalMountNode.js

@@ -96,7 +96,8 @@ const initializeElementFactory = ()=>{
                 // 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;
+                    // Can't use the `Node.ELEMENT_NODE` as it's a browser API and  not available in all environments, e.g SSR
+                    return 1; // `Node.ELEMENT_NODE`
                 }
                 // Heads up!
                 // We intercept the `remove()` method to remove the mount node only when portal has been unmounted already.

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

@@ -1 +1 @@
-{"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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"}
+{"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          // Can't use the `Node.ELEMENT_NODE` as it's a browser API and  not available in all environments, e.g SSR\n          return 1; // `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","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/usePortalMountNode.js

@@ -107,7 +107,8 @@ const initializeElementFactory = ()=>{
                 // 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;
+                    // Can't use the `Node.ELEMENT_NODE` as it's a browser API and  not available in all environments, e.g SSR
+                    return 1; // `Node.ELEMENT_NODE`
                 }
                 // Heads up!
                 // We intercept the `remove()` method to remove the mount node only when portal has been unmounted already.

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

@@ -1 +1 @@
-{"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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"}
+{"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          // Can't use the `Node.ELEMENT_NODE` as it's a browser API and  not available in all environments, e.g SSR\n          return 1; // `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","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.4",
+  "version": "9.8.6",
   "description": "A utility component that creates portals compatible with Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -19,8 +19,8 @@
   },
   "dependencies": {
     "@fluentui/react-shared-contexts": "^9.25.2",
-    "@fluentui/react-tabster": "^9.26.7",
-    "@fluentui/react-utilities": "^9.25.1",
+    "@fluentui/react-tabster": "^9.26.8",
+    "@fluentui/react-utilities": "^9.25.2",
     "@griffel/react": "^1.5.22",
     "@swc/helpers": "^0.5.1"
   },