@fluentui/react-portal 9.2.16 → 9.3.1

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.
package/CHANGELOG.json CHANGED
@@ -2,7 +2,55 @@
2
2
  "name": "@fluentui/react-portal",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 28 Jun 2023 11:08:31 GMT",
5
+ "date": "Mon, 03 Jul 2023 13:32:38 GMT",
6
+ "tag": "@fluentui/react-portal_v9.3.1",
7
+ "version": "9.3.1",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "beachball",
12
+ "package": "@fluentui/react-portal",
13
+ "comment": "Bump @fluentui/react-tabster to v9.10.0",
14
+ "commit": "d2c95969c67521ea1df57e1339f8743b09b68772"
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Mon, 03 Jul 2023 11:57:13 GMT",
21
+ "tag": "@fluentui/react-portal_v9.3.0",
22
+ "version": "9.3.0",
23
+ "comments": {
24
+ "minor": [
25
+ {
26
+ "author": "olfedias@microsoft.com",
27
+ "package": "@fluentui/react-portal",
28
+ "commit": "3deadf5e6ab264e0be12a31092ca5e172d721241",
29
+ "comment": "feat: support rendering to a mountNode from PortalMountNodeContext"
30
+ },
31
+ {
32
+ "author": "beachball",
33
+ "package": "@fluentui/react-portal",
34
+ "comment": "Bump @fluentui/react-shared-contexts to v9.6.0",
35
+ "commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
36
+ },
37
+ {
38
+ "author": "beachball",
39
+ "package": "@fluentui/react-portal",
40
+ "comment": "Bump @fluentui/react-tabster to v9.9.2",
41
+ "commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
42
+ },
43
+ {
44
+ "author": "beachball",
45
+ "package": "@fluentui/react-portal",
46
+ "comment": "Bump @fluentui/react-utilities to v9.10.1",
47
+ "commit": "61633ba5de03e0ddf4839dba6da325e30c7ce9bd"
48
+ }
49
+ ]
50
+ }
51
+ },
52
+ {
53
+ "date": "Wed, 28 Jun 2023 11:12:29 GMT",
6
54
  "tag": "@fluentui/react-portal_v9.2.16",
7
55
  "version": "9.2.16",
8
56
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,33 @@
1
1
  # Change Log - @fluentui/react-portal
2
2
 
3
- This log was last generated on Wed, 28 Jun 2023 11:08:31 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 03 Jul 2023 13:32:38 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.3.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.3.1)
8
+
9
+ Mon, 03 Jul 2023 13:32:38 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.3.0..@fluentui/react-portal_v9.3.1)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-tabster to v9.10.0 ([PR #28394](https://github.com/microsoft/fluentui/pull/28394) by beachball)
15
+
16
+ ## [9.3.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.3.0)
17
+
18
+ Mon, 03 Jul 2023 11:57:13 GMT
19
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.2.16..@fluentui/react-portal_v9.3.0)
20
+
21
+ ### Minor changes
22
+
23
+ - feat: support rendering to a mountNode from PortalMountNodeContext ([PR #28395](https://github.com/microsoft/fluentui/pull/28395) by olfedias@microsoft.com)
24
+ - Bump @fluentui/react-shared-contexts to v9.6.0 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
25
+ - Bump @fluentui/react-tabster to v9.9.2 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
26
+ - Bump @fluentui/react-utilities to v9.10.1 ([PR #28412](https://github.com/microsoft/fluentui/pull/28412) by beachball)
27
+
7
28
  ## [9.2.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.2.16)
8
29
 
9
- Wed, 28 Jun 2023 11:08:31 GMT
30
+ Wed, 28 Jun 2023 11:12:29 GMT
10
31
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.2.15..@fluentui/react-portal_v9.2.16)
11
32
 
12
33
  ### Patches
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { useThemeClassName_unstable as useThemeClassName, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
2
+ import { useThemeClassName_unstable as useThemeClassName, useFluent_unstable as useFluent, usePortalMountNode as usePortalMountNodeContext } from '@fluentui/react-shared-contexts';
3
3
  import { mergeClasses } from '@griffel/react';
4
4
  import { useFocusVisible } from '@fluentui/react-tabster';
5
5
  import { useDisposable } from 'use-disposable';
@@ -9,25 +9,27 @@ const useInsertionEffect = React['useInsertion' + 'Effect'];
9
9
  * Creates a new element on a "document.body" to mount portals.
10
10
  */ export const usePortalMountNode = (options)=>{
11
11
  const { targetDocument , dir } = useFluent();
12
+ const mountNode = usePortalMountNodeContext();
12
13
  const focusVisibleRef = useFocusVisible();
13
14
  const classes = usePortalMountNodeStylesStyles();
14
15
  const themeClassName = useThemeClassName();
15
16
  const className = mergeClasses(themeClassName, classes.root, options.className);
17
+ const targetNode = mountNode !== null && mountNode !== void 0 ? mountNode : targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body;
16
18
  const element = useDisposable(()=>{
17
- if (targetDocument === undefined || options.disabled) {
19
+ if (targetNode === undefined || options.disabled) {
18
20
  return [
19
21
  null,
20
22
  ()=>null
21
23
  ];
22
24
  }
23
- const newElement = targetDocument.createElement('div');
24
- targetDocument.body.appendChild(newElement);
25
+ const newElement = targetNode.ownerDocument.createElement('div');
26
+ targetNode.appendChild(newElement);
25
27
  return [
26
28
  newElement,
27
29
  ()=>newElement.remove()
28
30
  ];
29
31
  }, [
30
- targetDocument
32
+ targetNode
31
33
  ]);
32
34
  if (useInsertionEffect) {
33
35
  // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -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} 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 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\n const element = useDisposable(() => {\n if (targetDocument === undefined || options.disabled) {\n return [null, () => null];\n }\n\n const newElement = targetDocument.createElement('div');\n targetDocument.body.appendChild(newElement);\n return [newElement, () => newElement.remove()];\n }, [targetDocument]);\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","mergeClasses","useFocusVisible","useDisposable","usePortalMountNodeStylesStyles","useInsertionEffect","usePortalMountNode","options","targetDocument","dir","focusVisibleRef","classes","themeClassName","className","root","element","undefined","disabled","newElement","createElement","body","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,QAC1B,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,AAACT,KAAe,CAAC,iBAAiB,SAAS;AAWtE;;CAEC,GACD,OAAO,MAAMU,qBAAqB,CAACC,UAA2D;IAC5F,MAAM,EAAEC,eAAc,EAAEC,IAAG,EAAE,GAAGT;IAChC,MAAMU,kBAAkBR;IACxB,MAAMS,UAAUP;IAChB,MAAMQ,iBAAiBd;IAEvB,MAAMe,YAAYZ,aAAaW,gBAAgBD,QAAQG,IAAI,EAAEP,QAAQM,SAAS;IAE9E,MAAME,UAAUZ,cAAc,IAAM;QAClC,IAAIK,mBAAmBQ,aAAaT,QAAQU,QAAQ,EAAE;YACpD,OAAO;gBAAC,IAAI;gBAAE,IAAM,IAAI;aAAC;QAC3B,CAAC;QAED,MAAMC,aAAaV,eAAeW,aAAa,CAAC;QAChDX,eAAeY,IAAI,CAACC,WAAW,CAACH;QAChC,OAAO;YAACA;YAAY,IAAMA,WAAWI,MAAM;SAAG;IAChD,GAAG;QAACd;KAAe;IAEnB,IAAIH,oBAAoB;QACtB,sDAAsD;QACtDA,mBAAmB,IAAM;YACvB,IAAI,CAACU,SAAS;gBACZ;YACF,CAAC;YAED,MAAMQ,iBAAiBV,UAAUW,KAAK,CAAC,KAAKC,MAAM,CAACC;YAEnDX,QAAQY,SAAS,CAACC,GAAG,IAAIL;YACzBR,QAAQc,YAAY,CAAC,OAAOpB;YAC5BC,gBAAgBoB,OAAO,GAAGf;YAE1B,OAAO,IAAM;gBACXA,QAAQY,SAAS,CAACL,MAAM,IAAIC;gBAC5BR,QAAQgB,eAAe,CAAC;YAC1B;QACF,GAAG;YAAClB;YAAWJ;YAAKM;YAASL;SAAgB;IAC/C,OAAO;QACL,gDAAgD;QAChD,4EAA4E;QAC5E,yFAAyF;QACzF,iFAAiF;QACjF,sDAAsD;QACtDd,MAAMoC,OAAO,CAAC,IAAM;YAClB,IAAI,CAACjB,SAAS;gBACZ;YACF,CAAC;YAED,4BAA4B;YAC5BA,QAAQF,SAAS,GAAGA;YACpBE,QAAQc,YAAY,CAAC,OAAOpB;YAC5BC,gBAAgBoB,OAAO,GAAGf;QAC5B,GAAG;YAACF;YAAWJ;YAAKM;YAASL;SAAgB;IAC/C,CAAC;IAED,OAAOK;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 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,UAA2D;IAC5F,MAAM,EAAEC,eAAc,EAAEC,IAAG,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,4BAAAA,KAAAA,IAAAA,eAAgBS,IAAI;IAE1F,MAAMC,UAAUd,cAAc,IAAM;QAClC,IAAIY,eAAeG,aAAaZ,QAAQa,QAAQ,EAAE;YAChD,OAAO;gBAAC,IAAI;gBAAE,IAAM,IAAI;aAAC;QAC3B,CAAC;QAED,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,IAAM;YACvB,IAAI,CAACY,SAAS;gBACZ;YACF,CAAC;YAED,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,IAAM;gBACXA,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,IAAM;YAClB,IAAI,CAACjB,SAAS;gBACZ;YACF,CAAC;YAED,4BAA4B;YAC5BA,QAAQJ,SAAS,GAAGA;YACpBI,QAAQc,YAAY,CAAC,OAAOvB;YAC5BE,gBAAgBsB,OAAO,GAAGf;QAC5B,GAAG;YAACJ;YAAWL;YAAKS;YAASP;SAAgB;IAC/C,CAAC;IAED,OAAOO;AACT,EAAE"}
@@ -16,25 +16,27 @@ const _usePortalMountNodeStylesStyles = require("./usePortalMountNodeStyles.styl
16
16
  const useInsertionEffect = _react['useInsertion' + 'Effect'];
17
17
  const usePortalMountNode = (options)=>{
18
18
  const { targetDocument , dir } = (0, _reactSharedContexts.useFluent_unstable)();
19
+ const mountNode = (0, _reactSharedContexts.usePortalMountNode)();
19
20
  const focusVisibleRef = (0, _reactTabster.useFocusVisible)();
20
21
  const classes = (0, _usePortalMountNodeStylesStyles.usePortalMountNodeStylesStyles)();
21
22
  const themeClassName = (0, _reactSharedContexts.useThemeClassName_unstable)();
22
23
  const className = (0, _react1.mergeClasses)(themeClassName, classes.root, options.className);
24
+ const targetNode = mountNode !== null && mountNode !== void 0 ? mountNode : targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body;
23
25
  const element = (0, _useDisposable.useDisposable)(()=>{
24
- if (targetDocument === undefined || options.disabled) {
26
+ if (targetNode === undefined || options.disabled) {
25
27
  return [
26
28
  null,
27
29
  ()=>null
28
30
  ];
29
31
  }
30
- const newElement = targetDocument.createElement('div');
31
- targetDocument.body.appendChild(newElement);
32
+ const newElement = targetNode.ownerDocument.createElement('div');
33
+ targetNode.appendChild(newElement);
32
34
  return [
33
35
  newElement,
34
36
  ()=>newElement.remove()
35
37
  ];
36
38
  }, [
37
- targetDocument
39
+ targetNode
38
40
  ]);
39
41
  if (useInsertionEffect) {
40
42
  // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -1 +1 @@
1
- {"version":3,"sources":["usePortalMountNode.js"],"sourcesContent":["import * as React from 'react';\nimport { useThemeClassName_unstable as useThemeClassName, useFluent_unstable as useFluent } 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 focusVisibleRef = useFocusVisible();\n const classes = usePortalMountNodeStylesStyles();\n const themeClassName = useThemeClassName();\n const className = mergeClasses(themeClassName, classes.root, options.className);\n const element = useDisposable(()=>{\n if (targetDocument === undefined || options.disabled) {\n return [\n null,\n ()=>null\n ];\n }\n const newElement = targetDocument.createElement('div');\n targetDocument.body.appendChild(newElement);\n return [\n newElement,\n ()=>newElement.remove()\n ];\n }, [\n targetDocument\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","focusVisibleRef","useFocusVisible","classes","usePortalMountNodeStylesStyles","themeClassName","useThemeClassName","className","mergeClasses","root","element","useDisposable","undefined","disabled","newElement","createElement","body","appendChild","remove","classesToApply","split","filter","Boolean","classList","add","setAttribute","current","removeAttribute","useMemo"],"mappings":";;;;+BASiBA;;aAAAA;;;6DATM;qCAC0E;wBACpE;8BACG;+BACF;gDACiB;AAC/C,MAAMC,qBAAqBC,MAAK,CAAC,iBAAiB,SAAS;AAGhD,MAAMF,qBAAqB,CAACG,UAAU;IAC7C,MAAM,EAAEC,eAAc,EAAGC,IAAG,EAAG,GAAGC,IAAAA,uCAAS;IAC3C,MAAMC,kBAAkBC,IAAAA,6BAAe;IACvC,MAAMC,UAAUC,IAAAA,8DAA8B;IAC9C,MAAMC,iBAAiBC,IAAAA,+CAAiB;IACxC,MAAMC,YAAYC,IAAAA,oBAAY,EAACH,gBAAgBF,QAAQM,IAAI,EAAEZ,QAAQU,SAAS;IAC9E,MAAMG,UAAUC,IAAAA,4BAAa,EAAC,IAAI;QAC9B,IAAIb,mBAAmBc,aAAaf,QAAQgB,QAAQ,EAAE;YAClD,OAAO;gBACH,IAAI;gBACJ,IAAI,IAAI;aACX;QACL,CAAC;QACD,MAAMC,aAAahB,eAAeiB,aAAa,CAAC;QAChDjB,eAAekB,IAAI,CAACC,WAAW,CAACH;QAChC,OAAO;YACHA;YACA,IAAIA,WAAWI,MAAM;SACxB;IACL,GAAG;QACCpB;KACH;IACD,IAAIH,oBAAoB;QACpB,sDAAsD;QACtDA,mBAAmB,IAAI;YACnB,IAAI,CAACe,SAAS;gBACV;YACJ,CAAC;YACD,MAAMS,iBAAiBZ,UAAUa,KAAK,CAAC,KAAKC,MAAM,CAACC;YACnDZ,QAAQa,SAAS,CAACC,GAAG,IAAIL;YACzBT,QAAQe,YAAY,CAAC,OAAO1B;YAC5BE,gBAAgByB,OAAO,GAAGhB;YAC1B,OAAO,IAAI;gBACPA,QAAQa,SAAS,CAACL,MAAM,IAAIC;gBAC5BT,QAAQiB,eAAe,CAAC;YAC5B;QACJ,GAAG;YACCpB;YACAR;YACAW;YACAT;SACH;IACL,OAAO;QACH,gDAAgD;QAChD,4EAA4E;QAC5E,yFAAyF;QACzF,iFAAiF;QACjF,sDAAsD;QACtDL,OAAMgC,OAAO,CAAC,IAAI;YACd,IAAI,CAAClB,SAAS;gBACV;YACJ,CAAC;YACD,4BAA4B;YAC5BA,QAAQH,SAAS,GAAGA;YACpBG,QAAQe,YAAY,CAAC,OAAO1B;YAC5BE,gBAAgByB,OAAO,GAAGhB;QAC9B,GAAG;YACCH;YACAR;YACAW;YACAT;SACH;IACL,CAAC;IACD,OAAOS;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 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;;aAAAA;;;6DATM;qCAC2H;wBACrH;8BACG;+BACF;gDACiB;AAC/C,MAAMC,qBAAqBC,MAAK,CAAC,iBAAiB,SAAS;AAGhD,MAAMF,qBAAqB,CAACG,UAAU;IAC7C,MAAM,EAAEC,eAAc,EAAGC,IAAG,EAAG,GAAGC,IAAAA,uCAAS;IAC3C,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,IAAI,IAAIA,cAAc,KAAK,IAAIA,YAAYH,mBAAmB,IAAI,IAAIA,mBAAmB,KAAK,IAAI,KAAK,IAAIA,eAAee,IAAI;IAC/J,MAAMC,UAAUC,IAAAA,4BAAa,EAAC,IAAI;QAC9B,IAAIH,eAAeI,aAAanB,QAAQoB,QAAQ,EAAE;YAC9C,OAAO;gBACH,IAAI;gBACJ,IAAI,IAAI;aACX;QACL,CAAC;QACD,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,IAAI;YACnB,IAAI,CAACmB,SAAS;gBACV;YACJ,CAAC;YACD,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,IAAI;gBACPA,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,IAAI;YACd,IAAI,CAAClB,SAAS;gBACV;YACJ,CAAC;YACD,4BAA4B;YAC5BA,QAAQL,SAAS,GAAGA;YACpBK,QAAQe,YAAY,CAAC,OAAO9B;YAC5BI,gBAAgB2B,OAAO,GAAGhB;QAC9B,GAAG;YACCL;YACAV;YACAe;YACAX;SACH;IACL,CAAC;IACD,OAAOW;AACX"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-portal",
3
- "version": "9.2.16",
3
+ "version": "9.3.1",
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.5.1",
36
- "@fluentui/react-tabster": "^9.9.1",
37
- "@fluentui/react-utilities": "^9.10.0",
35
+ "@fluentui/react-shared-contexts": "^9.6.0",
36
+ "@fluentui/react-tabster": "^9.10.0",
37
+ "@fluentui/react-utilities": "^9.10.1",
38
38
  "@griffel/react": "^1.5.7",
39
39
  "@swc/helpers": "^0.4.14",
40
40
  "use-disposable": "^1.0.1"