@fluentui/react-portal 9.2.16 → 9.3.1

Sign up to get free protection for your applications and to get access to all the features.
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"