@fluentui/react-portal 9.4.18 → 9.4.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +26 -5
  2. package/lib/components/Portal/usePortalMountNode.js +2 -0
  3. package/lib/components/Portal/usePortalMountNode.js.map +1 -1
  4. package/lib-commonjs/components/Portal/usePortalMountNode.js +2 -0
  5. package/lib-commonjs/components/Portal/usePortalMountNode.js.map +1 -1
  6. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,19 +1,40 @@
1
1
  # Change Log - @fluentui/react-portal
2
2
 
3
- This log was last generated on Mon, 18 Mar 2024 19:44:52 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 17 Apr 2024 21:47:24 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.4.20](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.4.20)
8
+
9
+ Wed, 17 Apr 2024 21:47:24 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.4.19..@fluentui/react-portal_v9.4.20)
11
+
12
+ ### Patches
13
+
14
+ - chore: add "data-portal-node" attr in usePortalMountNode() ([PR #31002](https://github.com/microsoft/fluentui/pull/31002) by olfedias@microsoft.com)
15
+ - Bump @fluentui/react-tabster to v9.20.0 ([PR #31100](https://github.com/microsoft/fluentui/pull/31100) by beachball)
16
+
17
+ ## [9.4.19](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.4.19)
18
+
19
+ Tue, 02 Apr 2024 09:48:01 GMT
20
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.4.18..@fluentui/react-portal_v9.4.19)
21
+
22
+ ### Patches
23
+
24
+ - Bump @fluentui/react-shared-contexts to v9.16.0 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
25
+ - Bump @fluentui/react-tabster to v9.19.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
26
+ - Bump @fluentui/react-utilities to v9.18.6 ([PR #30644](https://github.com/microsoft/fluentui/pull/30644) by beachball)
27
+
7
28
  ## [9.4.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.4.18)
8
29
 
9
- Mon, 18 Mar 2024 19:44:52 GMT
30
+ Mon, 18 Mar 2024 19:50:46 GMT
10
31
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.4.17..@fluentui/react-portal_v9.4.18)
11
32
 
12
33
  ### Patches
13
34
 
14
- - Bump @fluentui/react-shared-contexts to v9.15.2 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
15
- - Bump @fluentui/react-tabster to v9.19.5 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
16
- - Bump @fluentui/react-utilities to v9.18.5 ([PR #30803](https://github.com/microsoft/fluentui/pull/30803) by beachball)
35
+ - Bump @fluentui/react-shared-contexts to v9.15.2 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
36
+ - Bump @fluentui/react-tabster to v9.19.5 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
37
+ - Bump @fluentui/react-utilities to v9.18.5 ([PR #30600](https://github.com/microsoft/fluentui/pull/30600) by beachball)
17
38
 
18
39
  ## [9.4.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.4.17)
19
40
 
package/lib/components/Portal/usePortalMountNode.js CHANGED
@@ -40,6 +40,7 @@ const useInsertionEffect = React['useInsertion' + 'Effect'];
40
40
  const classesToApply = className.split(' ').filter(Boolean);
41
41
  element.classList.add(...classesToApply);
42
42
  element.setAttribute('dir', dir);
43
+ element.setAttribute('data-portal-node', 'true');
43
44
  focusVisibleRef.current = element;
44
45
  return ()=>{
45
46
  element.classList.remove(...classesToApply);
@@ -64,6 +65,7 @@ const useInsertionEffect = React['useInsertion' + 'Effect'];
64
65
  // Force replace all classes
65
66
  element.className = className;
66
67
  element.setAttribute('dir', dir);
68
+ element.setAttribute('data-portal-node', 'true');
67
69
  focusVisibleRef.current = element;
68
70
  }, [
69
71
  className,
package/lib/components/Portal/usePortalMountNode.js.map CHANGED
@@ -1 +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"}
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 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 CHANGED
@@ -49,6 +49,7 @@ const usePortalMountNode = (options)=>{
49
49
  const classesToApply = className.split(' ').filter(Boolean);
50
50
  element.classList.add(...classesToApply);
51
51
  element.setAttribute('dir', dir);
52
+ element.setAttribute('data-portal-node', 'true');
52
53
  focusVisibleRef.current = element;
53
54
  return ()=>{
54
55
  element.classList.remove(...classesToApply);
@@ -73,6 +74,7 @@ const usePortalMountNode = (options)=>{
73
74
  // Force replace all classes
74
75
  element.className = className;
75
76
  element.setAttribute('dir', dir);
77
+ element.setAttribute('data-portal-node', 'true');
76
78
  focusVisibleRef.current = element;
77
79
  }, [
78
80
  className,
package/lib-commonjs/components/Portal/usePortalMountNode.js.map CHANGED
@@ -1 +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"}
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 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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-portal",
3
- "version": "9.4.18",
3
+ "version": "9.4.20",
4
4
  "description": "A utility component that creates portals compatible with Fluent UI",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -32,9 +32,9 @@
32
32
  "@fluentui/scripts-tasks": "*"
33
33
  },
34
34
  "dependencies": {
35
- "@fluentui/react-shared-contexts": "^9.15.2",
36
- "@fluentui/react-tabster": "^9.19.5",
37
- "@fluentui/react-utilities": "^9.18.5",
35
+ "@fluentui/react-shared-contexts": "^9.16.0",
36
+ "@fluentui/react-tabster": "^9.20.0",
37
+ "@fluentui/react-utilities": "^9.18.6",
38
38
  "@griffel/react": "^1.5.14",
39
39
  "@swc/helpers": "^0.5.1",
40
40
  "use-disposable": "^1.0.1"