@fluentui/react-portal 9.4.19 → 9.4.20

package/CHANGELOG.md

@@ -1,19 +1,29 @@
 # Change Log - @fluentui/react-portal
 
-This log was last generated on Tue, 02 Apr 2024 09:41:20 GMT and should not be manually modified.
+This log was last generated on Wed, 17 Apr 2024 21:47:24 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.4.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.4.20)
+
+Wed, 17 Apr 2024 21:47:24 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.4.19..@fluentui/react-portal_v9.4.20)
+
+### Patches
+
+- chore: add "data-portal-node" attr in usePortalMountNode() ([PR #31002](https://github.com/microsoft/fluentui/pull/31002) by olfedias@microsoft.com)
+- Bump @fluentui/react-tabster to v9.20.0 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
+
 ## [9.4.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.4.19)
 
-Tue, 02 Apr 2024 09:41:20 GMT 
+Tue, 02 Apr 2024 09:48:01 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.4.18..@fluentui/react-portal_v9.4.19)
 
 ### Patches
 
-- Bump @fluentui/react-shared-contexts to v9.16.0 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
-- Bump @fluentui/react-tabster to v9.19.6 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
-- Bump @fluentui/react-utilities to v9.18.6 ([PR #30926](https://github.com/microsoft/fluentui/pull/30926) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.16.0 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-tabster to v9.19.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
+- Bump @fluentui/react-utilities to v9.18.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
 
 ## [9.4.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.4.18)
 

package/lib/components/Portal/usePortalMountNode.js

@@ -40,6 +40,7 @@ const useInsertionEffect = React['useInsertion' + 'Effect'];
             const classesToApply = className.split(' ').filter(Boolean);
             element.classList.add(...classesToApply);
             element.setAttribute('dir', dir);
+            element.setAttribute('data-portal-node', 'true');
             focusVisibleRef.current = element;
             return ()=>{
                 element.classList.remove(...classesToApply);
@@ -64,6 +65,7 @@ const useInsertionEffect = React['useInsertion' + 'Effect'];
             // Force replace all classes
             element.className = className;
             element.setAttribute('dir', dir);
+            element.setAttribute('data-portal-node', 'true');
             focusVisibleRef.current = element;
         }, [
             className,

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

@@ -1 +1 @@
-{"version":3,"sources":["usePortalMountNode.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  useThemeClassName_unstable as useThemeClassName,\n  useFluent_unstable as useFluent,\n  usePortalMountNode as usePortalMountNodeContext,\n} from '@fluentui/react-shared-contexts';\nimport { mergeClasses } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\nimport { useDisposable } from 'use-disposable';\n\nimport { usePortalMountNodeStylesStyles } from './usePortalMountNodeStyles.styles';\n\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect'] as typeof React.useLayoutEffect | undefined;\n\nexport type UsePortalMountNodeOptions = {\n  /**\n   * Since hooks cannot be called conditionally use this flag to disable creating the node\n   */\n  disabled?: boolean;\n\n  className?: string;\n};\n\n/**\n * Creates a new element on a \"document.body\" to mount portals.\n */\nexport const usePortalMountNode = (options: UsePortalMountNodeOptions): HTMLElement | null => {\n  const { targetDocument, dir } = useFluent();\n  const mountNode = usePortalMountNodeContext();\n\n  const focusVisibleRef = useFocusVisible<HTMLDivElement>() as React.MutableRefObject<HTMLElement | null>;\n  const classes = usePortalMountNodeStylesStyles();\n  const themeClassName = useThemeClassName();\n\n  const className = mergeClasses(themeClassName, classes.root, options.className);\n  const targetNode: HTMLElement | ShadowRoot | undefined = mountNode ?? targetDocument?.body;\n\n  const element = useDisposable(() => {\n    if (targetNode === undefined || options.disabled) {\n      return [null, () => null];\n    }\n\n    const newElement = targetNode.ownerDocument.createElement('div');\n    targetNode.appendChild(newElement);\n    return [newElement, () => newElement.remove()];\n  }, [targetNode]);\n\n  if (useInsertionEffect) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useInsertionEffect(() => {\n      if (!element) {\n        return;\n      }\n\n      const classesToApply = className.split(' ').filter(Boolean);\n\n      element.classList.add(...classesToApply);\n      element.setAttribute('dir', dir);\n      focusVisibleRef.current = element;\n\n      return () => {\n        element.classList.remove(...classesToApply);\n        element.removeAttribute('dir');\n      };\n    }, [className, dir, element, focusVisibleRef]);\n  } else {\n    // This useMemo call is intentional for React 17\n    // We don't want to re-create the portal element when its attributes change.\n    // This also should not be done in an effect because, changing the value of css variables\n    // after initial mount can trigger interesting CSS side effects like transitions.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useMemo(() => {\n      if (!element) {\n        return;\n      }\n\n      // Force replace all classes\n      element.className = className;\n      element.setAttribute('dir', dir);\n      focusVisibleRef.current = element;\n    }, [className, dir, element, focusVisibleRef]);\n  }\n\n  return element;\n};\n"],"names":["React","useThemeClassName_unstable","useThemeClassName","useFluent_unstable","useFluent","usePortalMountNode","usePortalMountNodeContext","mergeClasses","useFocusVisible","useDisposable","usePortalMountNodeStylesStyles","useInsertionEffect","options","targetDocument","dir","mountNode","focusVisibleRef","classes","themeClassName","className","root","targetNode","body","element","undefined","disabled","newElement","ownerDocument","createElement","appendChild","remove","classesToApply","split","filter","Boolean","classList","add","setAttribute","current","removeAttribute","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,8BAA8BC,iBAAiB,EAC/CC,sBAAsBC,SAAS,EAC/BC,sBAAsBC,yBAAyB,QAC1C,kCAAkC;AACzC,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,aAAa,QAAQ,iBAAiB;AAE/C,SAASC,8BAA8B,QAAQ,oCAAoC;AAEnF,MAAMC,qBAAqB,AAACX,KAAe,CAAC,iBAAiB,SAAS;AAWtE;;CAEC,GACD,OAAO,MAAMK,qBAAqB,CAACO;IACjC,MAAM,EAAEC,cAAc,EAAEC,GAAG,EAAE,GAAGV;IAChC,MAAMW,YAAYT;IAElB,MAAMU,kBAAkBR;IACxB,MAAMS,UAAUP;IAChB,MAAMQ,iBAAiBhB;IAEvB,MAAMiB,YAAYZ,aAAaW,gBAAgBD,QAAQG,IAAI,EAAER,QAAQO,SAAS;IAC9E,MAAME,aAAmDN,sBAAAA,uBAAAA,YAAaF,2BAAAA,qCAAAA,eAAgBS,IAAI;IAE1F,MAAMC,UAAUd,cAAc;QAC5B,IAAIY,eAAeG,aAAaZ,QAAQa,QAAQ,EAAE;YAChD,OAAO;gBAAC;gBAAM,IAAM;aAAK;QAC3B;QAEA,MAAMC,aAAaL,WAAWM,aAAa,CAACC,aAAa,CAAC;QAC1DP,WAAWQ,WAAW,CAACH;QACvB,OAAO;YAACA;YAAY,IAAMA,WAAWI,MAAM;SAAG;IAChD,GAAG;QAACT;KAAW;IAEf,IAAIV,oBAAoB;QACtB,sDAAsD;QACtDA,mBAAmB;YACjB,IAAI,CAACY,SAAS;gBACZ;YACF;YAEA,MAAMQ,iBAAiBZ,UAAUa,KAAK,CAAC,KAAKC,MAAM,CAACC;YAEnDX,QAAQY,SAAS,CAACC,GAAG,IAAIL;YACzBR,QAAQc,YAAY,CAAC,OAAOvB;YAC5BE,gBAAgBsB,OAAO,GAAGf;YAE1B,OAAO;gBACLA,QAAQY,SAAS,CAACL,MAAM,IAAIC;gBAC5BR,QAAQgB,eAAe,CAAC;YAC1B;QACF,GAAG;YAACpB;YAAWL;YAAKS;YAASP;SAAgB;IAC/C,OAAO;QACL,gDAAgD;QAChD,4EAA4E;QAC5E,yFAAyF;QACzF,iFAAiF;QACjF,sDAAsD;QACtDhB,MAAMwC,OAAO,CAAC;YACZ,IAAI,CAACjB,SAAS;gBACZ;YACF;YAEA,4BAA4B;YAC5BA,QAAQJ,SAAS,GAAGA;YACpBI,QAAQc,YAAY,CAAC,OAAOvB;YAC5BE,gBAAgBsB,OAAO,GAAGf;QAC5B,GAAG;YAACJ;YAAWL;YAAKS;YAASP;SAAgB;IAC/C;IAEA,OAAOO;AACT,EAAE"}
+{"version":3,"sources":["usePortalMountNode.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n  useThemeClassName_unstable as useThemeClassName,\n  useFluent_unstable as useFluent,\n  usePortalMountNode as usePortalMountNodeContext,\n} from '@fluentui/react-shared-contexts';\nimport { mergeClasses } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\nimport { useDisposable } from 'use-disposable';\n\nimport { usePortalMountNodeStylesStyles } from './usePortalMountNodeStyles.styles';\n\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect'] as typeof React.useLayoutEffect | undefined;\n\nexport type UsePortalMountNodeOptions = {\n  /**\n   * Since hooks cannot be called conditionally use this flag to disable creating the node\n   */\n  disabled?: boolean;\n\n  className?: string;\n};\n\n/**\n * Creates a new element on a \"document.body\" to mount portals.\n */\nexport const usePortalMountNode = (options: UsePortalMountNodeOptions): HTMLElement | null => {\n  const { targetDocument, dir } = useFluent();\n  const mountNode = usePortalMountNodeContext();\n\n  const focusVisibleRef = useFocusVisible<HTMLDivElement>() as React.MutableRefObject<HTMLElement | null>;\n  const classes = usePortalMountNodeStylesStyles();\n  const themeClassName = useThemeClassName();\n\n  const className = mergeClasses(themeClassName, classes.root, options.className);\n  const targetNode: HTMLElement | ShadowRoot | undefined = mountNode ?? targetDocument?.body;\n\n  const element = useDisposable(() => {\n    if (targetNode === undefined || options.disabled) {\n      return [null, () => null];\n    }\n\n    const newElement = targetNode.ownerDocument.createElement('div');\n    targetNode.appendChild(newElement);\n    return [newElement, () => newElement.remove()];\n  }, [targetNode]);\n\n  if (useInsertionEffect) {\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    useInsertionEffect(() => {\n      if (!element) {\n        return;\n      }\n\n      const classesToApply = className.split(' ').filter(Boolean);\n\n      element.classList.add(...classesToApply);\n      element.setAttribute('dir', dir);\n      element.setAttribute('data-portal-node', 'true');\n\n      focusVisibleRef.current = element;\n\n      return () => {\n        element.classList.remove(...classesToApply);\n        element.removeAttribute('dir');\n      };\n    }, [className, dir, element, focusVisibleRef]);\n  } else {\n    // This useMemo call is intentional for React 17\n    // We don't want to re-create the portal element when its attributes change.\n    // This also should not be done in an effect because, changing the value of css variables\n    // after initial mount can trigger interesting CSS side effects like transitions.\n    // eslint-disable-next-line react-hooks/rules-of-hooks\n    React.useMemo(() => {\n      if (!element) {\n        return;\n      }\n\n      // Force replace all classes\n      element.className = className;\n      element.setAttribute('dir', dir);\n      element.setAttribute('data-portal-node', 'true');\n\n      focusVisibleRef.current = element;\n    }, [className, dir, element, focusVisibleRef]);\n  }\n\n  return element;\n};\n"],"names":["React","useThemeClassName_unstable","useThemeClassName","useFluent_unstable","useFluent","usePortalMountNode","usePortalMountNodeContext","mergeClasses","useFocusVisible","useDisposable","usePortalMountNodeStylesStyles","useInsertionEffect","options","targetDocument","dir","mountNode","focusVisibleRef","classes","themeClassName","className","root","targetNode","body","element","undefined","disabled","newElement","ownerDocument","createElement","appendChild","remove","classesToApply","split","filter","Boolean","classList","add","setAttribute","current","removeAttribute","useMemo"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,8BAA8BC,iBAAiB,EAC/CC,sBAAsBC,SAAS,EAC/BC,sBAAsBC,yBAAyB,QAC1C,kCAAkC;AACzC,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,aAAa,QAAQ,iBAAiB;AAE/C,SAASC,8BAA8B,QAAQ,oCAAoC;AAEnF,MAAMC,qBAAqB,AAACX,KAAe,CAAC,iBAAiB,SAAS;AAWtE;;CAEC,GACD,OAAO,MAAMK,qBAAqB,CAACO;IACjC,MAAM,EAAEC,cAAc,EAAEC,GAAG,EAAE,GAAGV;IAChC,MAAMW,YAAYT;IAElB,MAAMU,kBAAkBR;IACxB,MAAMS,UAAUP;IAChB,MAAMQ,iBAAiBhB;IAEvB,MAAMiB,YAAYZ,aAAaW,gBAAgBD,QAAQG,IAAI,EAAER,QAAQO,SAAS;IAC9E,MAAME,aAAmDN,sBAAAA,uBAAAA,YAAaF,2BAAAA,qCAAAA,eAAgBS,IAAI;IAE1F,MAAMC,UAAUd,cAAc;QAC5B,IAAIY,eAAeG,aAAaZ,QAAQa,QAAQ,EAAE;YAChD,OAAO;gBAAC;gBAAM,IAAM;aAAK;QAC3B;QAEA,MAAMC,aAAaL,WAAWM,aAAa,CAACC,aAAa,CAAC;QAC1DP,WAAWQ,WAAW,CAACH;QACvB,OAAO;YAACA;YAAY,IAAMA,WAAWI,MAAM;SAAG;IAChD,GAAG;QAACT;KAAW;IAEf,IAAIV,oBAAoB;QACtB,sDAAsD;QACtDA,mBAAmB;YACjB,IAAI,CAACY,SAAS;gBACZ;YACF;YAEA,MAAMQ,iBAAiBZ,UAAUa,KAAK,CAAC,KAAKC,MAAM,CAACC;YAEnDX,QAAQY,SAAS,CAACC,GAAG,IAAIL;YACzBR,QAAQc,YAAY,CAAC,OAAOvB;YAC5BS,QAAQc,YAAY,CAAC,oBAAoB;YAEzCrB,gBAAgBsB,OAAO,GAAGf;YAE1B,OAAO;gBACLA,QAAQY,SAAS,CAACL,MAAM,IAAIC;gBAC5BR,QAAQgB,eAAe,CAAC;YAC1B;QACF,GAAG;YAACpB;YAAWL;YAAKS;YAASP;SAAgB;IAC/C,OAAO;QACL,gDAAgD;QAChD,4EAA4E;QAC5E,yFAAyF;QACzF,iFAAiF;QACjF,sDAAsD;QACtDhB,MAAMwC,OAAO,CAAC;YACZ,IAAI,CAACjB,SAAS;gBACZ;YACF;YAEA,4BAA4B;YAC5BA,QAAQJ,SAAS,GAAGA;YACpBI,QAAQc,YAAY,CAAC,OAAOvB;YAC5BS,QAAQc,YAAY,CAAC,oBAAoB;YAEzCrB,gBAAgBsB,OAAO,GAAGf;QAC5B,GAAG;YAACJ;YAAWL;YAAKS;YAASP;SAAgB;IAC/C;IAEA,OAAOO;AACT,EAAE"}

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

@@ -49,6 +49,7 @@ const usePortalMountNode = (options)=>{
             const classesToApply = className.split(' ').filter(Boolean);
             element.classList.add(...classesToApply);
             element.setAttribute('dir', dir);
+            element.setAttribute('data-portal-node', 'true');
             focusVisibleRef.current = element;
             return ()=>{
                 element.classList.remove(...classesToApply);
@@ -73,6 +74,7 @@ const usePortalMountNode = (options)=>{
             // Force replace all classes
             element.className = className;
             element.setAttribute('dir', dir);
+            element.setAttribute('data-portal-node', 'true');
             focusVisibleRef.current = element;
         }, [
             className,

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

@@ -1 +1 @@
-{"version":3,"sources":["usePortalMountNode.js"],"sourcesContent":["import * as React from 'react';\nimport { useThemeClassName_unstable as useThemeClassName, useFluent_unstable as useFluent, usePortalMountNode as usePortalMountNodeContext } from '@fluentui/react-shared-contexts';\nimport { mergeClasses } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\nimport { useDisposable } from 'use-disposable';\nimport { usePortalMountNodeStylesStyles } from './usePortalMountNodeStyles.styles';\nconst useInsertionEffect = React['useInsertion' + 'Effect'];\n/**\n * Creates a new element on a \"document.body\" to mount portals.\n */ export const usePortalMountNode = (options)=>{\n    const { targetDocument, dir } = useFluent();\n    const mountNode = usePortalMountNodeContext();\n    const focusVisibleRef = useFocusVisible();\n    const classes = usePortalMountNodeStylesStyles();\n    const themeClassName = useThemeClassName();\n    const className = mergeClasses(themeClassName, classes.root, options.className);\n    const targetNode = mountNode !== null && mountNode !== void 0 ? mountNode : targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body;\n    const element = useDisposable(()=>{\n        if (targetNode === undefined || options.disabled) {\n            return [\n                null,\n                ()=>null\n            ];\n        }\n        const newElement = targetNode.ownerDocument.createElement('div');\n        targetNode.appendChild(newElement);\n        return [\n            newElement,\n            ()=>newElement.remove()\n        ];\n    }, [\n        targetNode\n    ]);\n    if (useInsertionEffect) {\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useInsertionEffect(()=>{\n            if (!element) {\n                return;\n            }\n            const classesToApply = className.split(' ').filter(Boolean);\n            element.classList.add(...classesToApply);\n            element.setAttribute('dir', dir);\n            focusVisibleRef.current = element;\n            return ()=>{\n                element.classList.remove(...classesToApply);\n                element.removeAttribute('dir');\n            };\n        }, [\n            className,\n            dir,\n            element,\n            focusVisibleRef\n        ]);\n    } else {\n        // This useMemo call is intentional for React 17\n        // We don't want to re-create the portal element when its attributes change.\n        // This also should not be done in an effect because, changing the value of css variables\n        // after initial mount can trigger interesting CSS side effects like transitions.\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        React.useMemo(()=>{\n            if (!element) {\n                return;\n            }\n            // Force replace all classes\n            element.className = className;\n            element.setAttribute('dir', dir);\n            focusVisibleRef.current = element;\n        }, [\n            className,\n            dir,\n            element,\n            focusVisibleRef\n        ]);\n    }\n    return element;\n};\n"],"names":["usePortalMountNode","useInsertionEffect","React","options","targetDocument","dir","useFluent","mountNode","usePortalMountNodeContext","focusVisibleRef","useFocusVisible","classes","usePortalMountNodeStylesStyles","themeClassName","useThemeClassName","className","mergeClasses","root","targetNode","body","element","useDisposable","undefined","disabled","newElement","ownerDocument","createElement","appendChild","remove","classesToApply","split","filter","Boolean","classList","add","setAttribute","current","removeAttribute","useMemo"],"mappings":";;;;+BASiBA;;;eAAAA;;;;iEATM;qCAC2H;wBACrH;8BACG;+BACF;gDACiB;AAC/C,MAAMC,qBAAqBC,MAAK,CAAC,iBAAiB,SAAS;AAGhD,MAAMF,qBAAqB,CAACG;IACnC,MAAM,EAAEC,cAAc,EAAEC,GAAG,EAAE,GAAGC,IAAAA,uCAAS;IACzC,MAAMC,YAAYC,IAAAA,uCAAyB;IAC3C,MAAMC,kBAAkBC,IAAAA,6BAAe;IACvC,MAAMC,UAAUC,IAAAA,8DAA8B;IAC9C,MAAMC,iBAAiBC,IAAAA,+CAAiB;IACxC,MAAMC,YAAYC,IAAAA,oBAAY,EAACH,gBAAgBF,QAAQM,IAAI,EAAEd,QAAQY,SAAS;IAC9E,MAAMG,aAAaX,cAAc,QAAQA,cAAc,KAAK,IAAIA,YAAYH,mBAAmB,QAAQA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAee,IAAI;IAC/J,MAAMC,UAAUC,IAAAA,4BAAa,EAAC;QAC1B,IAAIH,eAAeI,aAAanB,QAAQoB,QAAQ,EAAE;YAC9C,OAAO;gBACH;gBACA,IAAI;aACP;QACL;QACA,MAAMC,aAAaN,WAAWO,aAAa,CAACC,aAAa,CAAC;QAC1DR,WAAWS,WAAW,CAACH;QACvB,OAAO;YACHA;YACA,IAAIA,WAAWI,MAAM;SACxB;IACL,GAAG;QACCV;KACH;IACD,IAAIjB,oBAAoB;QACpB,sDAAsD;QACtDA,mBAAmB;YACf,IAAI,CAACmB,SAAS;gBACV;YACJ;YACA,MAAMS,iBAAiBd,UAAUe,KAAK,CAAC,KAAKC,MAAM,CAACC;YACnDZ,QAAQa,SAAS,CAACC,GAAG,IAAIL;YACzBT,QAAQe,YAAY,CAAC,OAAO9B;YAC5BI,gBAAgB2B,OAAO,GAAGhB;YAC1B,OAAO;gBACHA,QAAQa,SAAS,CAACL,MAAM,IAAIC;gBAC5BT,QAAQiB,eAAe,CAAC;YAC5B;QACJ,GAAG;YACCtB;YACAV;YACAe;YACAX;SACH;IACL,OAAO;QACH,gDAAgD;QAChD,4EAA4E;QAC5E,yFAAyF;QACzF,iFAAiF;QACjF,sDAAsD;QACtDP,OAAMoC,OAAO,CAAC;YACV,IAAI,CAAClB,SAAS;gBACV;YACJ;YACA,4BAA4B;YAC5BA,QAAQL,SAAS,GAAGA;YACpBK,QAAQe,YAAY,CAAC,OAAO9B;YAC5BI,gBAAgB2B,OAAO,GAAGhB;QAC9B,GAAG;YACCL;YACAV;YACAe;YACAX;SACH;IACL;IACA,OAAOW;AACX"}
+{"version":3,"sources":["usePortalMountNode.js"],"sourcesContent":["import * as React from 'react';\nimport { useThemeClassName_unstable as useThemeClassName, useFluent_unstable as useFluent, usePortalMountNode as usePortalMountNodeContext } from '@fluentui/react-shared-contexts';\nimport { mergeClasses } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\nimport { useDisposable } from 'use-disposable';\nimport { usePortalMountNodeStylesStyles } from './usePortalMountNodeStyles.styles';\nconst useInsertionEffect = React['useInsertion' + 'Effect'];\n/**\n * Creates a new element on a \"document.body\" to mount portals.\n */ export const usePortalMountNode = (options)=>{\n    const { targetDocument, dir } = useFluent();\n    const mountNode = usePortalMountNodeContext();\n    const focusVisibleRef = useFocusVisible();\n    const classes = usePortalMountNodeStylesStyles();\n    const themeClassName = useThemeClassName();\n    const className = mergeClasses(themeClassName, classes.root, options.className);\n    const targetNode = mountNode !== null && mountNode !== void 0 ? mountNode : targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body;\n    const element = useDisposable(()=>{\n        if (targetNode === undefined || options.disabled) {\n            return [\n                null,\n                ()=>null\n            ];\n        }\n        const newElement = targetNode.ownerDocument.createElement('div');\n        targetNode.appendChild(newElement);\n        return [\n            newElement,\n            ()=>newElement.remove()\n        ];\n    }, [\n        targetNode\n    ]);\n    if (useInsertionEffect) {\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        useInsertionEffect(()=>{\n            if (!element) {\n                return;\n            }\n            const classesToApply = className.split(' ').filter(Boolean);\n            element.classList.add(...classesToApply);\n            element.setAttribute('dir', dir);\n            element.setAttribute('data-portal-node', 'true');\n            focusVisibleRef.current = element;\n            return ()=>{\n                element.classList.remove(...classesToApply);\n                element.removeAttribute('dir');\n            };\n        }, [\n            className,\n            dir,\n            element,\n            focusVisibleRef\n        ]);\n    } else {\n        // This useMemo call is intentional for React 17\n        // We don't want to re-create the portal element when its attributes change.\n        // This also should not be done in an effect because, changing the value of css variables\n        // after initial mount can trigger interesting CSS side effects like transitions.\n        // eslint-disable-next-line react-hooks/rules-of-hooks\n        React.useMemo(()=>{\n            if (!element) {\n                return;\n            }\n            // Force replace all classes\n            element.className = className;\n            element.setAttribute('dir', dir);\n            element.setAttribute('data-portal-node', 'true');\n            focusVisibleRef.current = element;\n        }, [\n            className,\n            dir,\n            element,\n            focusVisibleRef\n        ]);\n    }\n    return element;\n};\n"],"names":["usePortalMountNode","useInsertionEffect","React","options","targetDocument","dir","useFluent","mountNode","usePortalMountNodeContext","focusVisibleRef","useFocusVisible","classes","usePortalMountNodeStylesStyles","themeClassName","useThemeClassName","className","mergeClasses","root","targetNode","body","element","useDisposable","undefined","disabled","newElement","ownerDocument","createElement","appendChild","remove","classesToApply","split","filter","Boolean","classList","add","setAttribute","current","removeAttribute","useMemo"],"mappings":";;;;+BASiBA;;;eAAAA;;;;iEATM;qCAC2H;wBACrH;8BACG;+BACF;gDACiB;AAC/C,MAAMC,qBAAqBC,MAAK,CAAC,iBAAiB,SAAS;AAGhD,MAAMF,qBAAqB,CAACG;IACnC,MAAM,EAAEC,cAAc,EAAEC,GAAG,EAAE,GAAGC,IAAAA,uCAAS;IACzC,MAAMC,YAAYC,IAAAA,uCAAyB;IAC3C,MAAMC,kBAAkBC,IAAAA,6BAAe;IACvC,MAAMC,UAAUC,IAAAA,8DAA8B;IAC9C,MAAMC,iBAAiBC,IAAAA,+CAAiB;IACxC,MAAMC,YAAYC,IAAAA,oBAAY,EAACH,gBAAgBF,QAAQM,IAAI,EAAEd,QAAQY,SAAS;IAC9E,MAAMG,aAAaX,cAAc,QAAQA,cAAc,KAAK,IAAIA,YAAYH,mBAAmB,QAAQA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAee,IAAI;IAC/J,MAAMC,UAAUC,IAAAA,4BAAa,EAAC;QAC1B,IAAIH,eAAeI,aAAanB,QAAQoB,QAAQ,EAAE;YAC9C,OAAO;gBACH;gBACA,IAAI;aACP;QACL;QACA,MAAMC,aAAaN,WAAWO,aAAa,CAACC,aAAa,CAAC;QAC1DR,WAAWS,WAAW,CAACH;QACvB,OAAO;YACHA;YACA,IAAIA,WAAWI,MAAM;SACxB;IACL,GAAG;QACCV;KACH;IACD,IAAIjB,oBAAoB;QACpB,sDAAsD;QACtDA,mBAAmB;YACf,IAAI,CAACmB,SAAS;gBACV;YACJ;YACA,MAAMS,iBAAiBd,UAAUe,KAAK,CAAC,KAAKC,MAAM,CAACC;YACnDZ,QAAQa,SAAS,CAACC,GAAG,IAAIL;YACzBT,QAAQe,YAAY,CAAC,OAAO9B;YAC5Be,QAAQe,YAAY,CAAC,oBAAoB;YACzC1B,gBAAgB2B,OAAO,GAAGhB;YAC1B,OAAO;gBACHA,QAAQa,SAAS,CAACL,MAAM,IAAIC;gBAC5BT,QAAQiB,eAAe,CAAC;YAC5B;QACJ,GAAG;YACCtB;YACAV;YACAe;YACAX;SACH;IACL,OAAO;QACH,gDAAgD;QAChD,4EAA4E;QAC5E,yFAAyF;QACzF,iFAAiF;QACjF,sDAAsD;QACtDP,OAAMoC,OAAO,CAAC;YACV,IAAI,CAAClB,SAAS;gBACV;YACJ;YACA,4BAA4B;YAC5BA,QAAQL,SAAS,GAAGA;YACpBK,QAAQe,YAAY,CAAC,OAAO9B;YAC5Be,QAAQe,YAAY,CAAC,oBAAoB;YACzC1B,gBAAgB2B,OAAO,GAAGhB;QAC9B,GAAG;YACCL;YACAV;YACAe;YACAX;SACH;IACL;IACA,OAAOW;AACX"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-portal",
-  "version": "9.4.19",
+  "version": "9.4.20",
   "description": "A utility component that creates portals compatible with Fluent UI",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@fluentui/react-shared-contexts": "^9.16.0",
-    "@fluentui/react-tabster": "^9.19.6",
+    "@fluentui/react-tabster": "^9.20.0",
     "@fluentui/react-utilities": "^9.18.6",
     "@griffel/react": "^1.5.14",
     "@swc/helpers": "^0.5.1",