@fluentui/react-portal 9.0.8 → 9.0.9

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,61 @@
2
2
  "name": "@fluentui/react-portal",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 20 Oct 2022 08:35:17 GMT",
5
+ "date": "Wed, 02 Nov 2022 11:54:58 GMT",
6
+ "tag": "@fluentui/react-portal_v9.0.9",
7
+ "version": "9.0.9",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "lingfangao@hotmail.com",
12
+ "package": "@fluentui/react-portal",
13
+ "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b",
14
+ "comment": "refactor: usePortalMount node updates mount node attributes in memo"
15
+ },
16
+ {
17
+ "author": "olfedias@microsoft.com",
18
+ "package": "@fluentui/react-portal",
19
+ "commit": "c619ba066f11a8654e95375314824ba6b81b003e",
20
+ "comment": "chore: Update Griffel to latest version"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-portal",
25
+ "comment": "Bump @fluentui/react-shared-contexts to v9.1.0",
26
+ "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-portal",
31
+ "comment": "Bump @fluentui/react-tabster to v9.2.1",
32
+ "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-portal",
37
+ "comment": "Bump @fluentui/react-utilities to v9.2.0",
38
+ "commit": "393a7b169155997a97a6ce1ad36ee3eafc6f461b"
39
+ }
40
+ ]
41
+ }
42
+ },
43
+ {
44
+ "date": "Tue, 25 Oct 2022 00:35:34 GMT",
45
+ "tag": "@fluentui/react-portal_v9.0.8",
46
+ "version": "9.0.8",
47
+ "comments": {
48
+ "none": [
49
+ {
50
+ "author": "miroslav.stastny@microsoft.com",
51
+ "package": "@fluentui/react-portal",
52
+ "commit": "6ced976a8d0e6a0e2e207da8fe0eb810e2bd19bc",
53
+ "comment": "Update package readme"
54
+ }
55
+ ]
56
+ }
57
+ },
58
+ {
59
+ "date": "Thu, 20 Oct 2022 08:39:40 GMT",
6
60
  "tag": "@fluentui/react-portal_v9.0.8",
7
61
  "version": "9.0.8",
8
62
  "comments": {
@@ -23,19 +77,19 @@
23
77
  "author": "beachball",
24
78
  "package": "@fluentui/react-portal",
25
79
  "comment": "Bump @fluentui/react-shared-contexts to v9.0.2",
26
- "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
80
+ "commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
27
81
  },
28
82
  {
29
83
  "author": "beachball",
30
84
  "package": "@fluentui/react-portal",
31
85
  "comment": "Bump @fluentui/react-tabster to v9.2.0",
32
- "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
86
+ "commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
33
87
  },
34
88
  {
35
89
  "author": "beachball",
36
90
  "package": "@fluentui/react-portal",
37
91
  "comment": "Bump @fluentui/react-utilities to v9.1.2",
38
- "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
92
+ "commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
39
93
  }
40
94
  ]
41
95
  }
package/CHANGELOG.md CHANGED
@@ -1,21 +1,34 @@
1
1
  # Change Log - @fluentui/react-portal
2
2
 
3
- This log was last generated on Thu, 20 Oct 2022 08:35:17 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 02 Nov 2022 11:54:58 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.0.9)
8
+
9
+ Wed, 02 Nov 2022 11:54:58 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.0.8..@fluentui/react-portal_v9.0.9)
11
+
12
+ ### Patches
13
+
14
+ - refactor: usePortalMount node updates mount node attributes in memo ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by lingfangao@hotmail.com)
15
+ - chore: Update Griffel to latest version ([PR #25412](https://github.com/microsoft/fluentui/pull/25412) by olfedias@microsoft.com)
16
+ - Bump @fluentui/react-shared-contexts to v9.1.0 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
17
+ - Bump @fluentui/react-tabster to v9.2.1 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
18
+ - Bump @fluentui/react-utilities to v9.2.0 ([PR #25456](https://github.com/microsoft/fluentui/pull/25456) by beachball)
19
+
7
20
  ## [9.0.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.0.8)
8
21
 
9
- Thu, 20 Oct 2022 08:35:17 GMT
22
+ Thu, 20 Oct 2022 08:39:40 GMT
10
23
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.0.7..@fluentui/react-portal_v9.0.8)
11
24
 
12
25
  ### Patches
13
26
 
14
27
  - chore: Update Griffel to latest version ([PR #25212](https://github.com/microsoft/fluentui/pull/25212) by olfedias@microsoft.com)
15
28
  - chore: Bump peer deps to support React 18 ([PR #24972](https://github.com/microsoft/fluentui/pull/24972) by mgodbolt@microsoft.com)
16
- - Bump @fluentui/react-shared-contexts to v9.0.2 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
17
- - Bump @fluentui/react-tabster to v9.2.0 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
18
- - Bump @fluentui/react-utilities to v9.1.2 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
29
+ - Bump @fluentui/react-shared-contexts to v9.0.2 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
30
+ - Bump @fluentui/react-tabster to v9.2.0 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
31
+ - Bump @fluentui/react-utilities to v9.1.2 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
19
32
 
20
33
  ## [9.0.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.0.7)
21
34
 
package/README.md CHANGED
@@ -1,8 +1,6 @@
1
1
  # @fluentui/react-portal
2
2
 
3
- **React Portal components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
4
-
5
- These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
3
+ **React Portal components for [Fluent UI React](https://react.fluentui.dev)**
6
4
 
7
5
  This package contains the `Portal` component, which allow consumers to render [React portals](https://reactjs.org/docs/portals.html) with Fluent styling and RTL awareness.
8
6
 
@@ -1,5 +1,4 @@
1
1
  import * as React from 'react';
2
- import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
3
2
  import { useThemeClassName_unstable as useThemeClassName, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
4
3
  import { __styles, mergeClasses } from '@griffel/react';
5
4
  import { useFocusVisible } from '@fluentui/react-tabster';
@@ -34,8 +33,12 @@ export const usePortalMountNode = options => {
34
33
  const newElement = targetDocument.createElement('div');
35
34
  targetDocument.body.appendChild(newElement);
36
35
  return newElement;
37
- }, [targetDocument, options.disabled]);
38
- useIsomorphicLayoutEffect(() => {
36
+ }, [targetDocument, options.disabled]); // This useMemo call is intentional
37
+ // We don't want to re-create the portal element when its attributes change.
38
+ // This also should not be done in an effect because, changing the value of css variables
39
+ // after initial mount can trigger interesting CSS side effects like transitions.
40
+
41
+ React.useMemo(() => {
39
42
  if (element) {
40
43
  const classesToApply = className.split(' ').filter(Boolean);
41
44
  element.classList.add(...classesToApply);
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Portal/usePortalMountNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,2BAA1C;AACA,SACE,0BAA0B,IAAI,iBADhC,EAEE,kBAAkB,IAAI,SAFxB,QAGO,iCAHP;AAIA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,eAAT,QAAgC,yBAAhC;;AASA,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAOA;;AAEG;;;AACH,OAAO,MAAM,kBAAkB,GAAI,OAAD,IAA2D;EAC3F,MAAM;IAAE,cAAF;IAAkB;EAAlB,IAA0B,SAAS,EAAzC;EACA,MAAM,eAAe,GAAG,eAAe,EAAvC;EAEA,MAAM,OAAO,GAAG,SAAS,EAAzB;EACA,MAAM,cAAc,GAAG,iBAAiB,EAAxC;EAEA,MAAM,SAAS,GAAG,YAAY,CAAC,cAAD,EAAiB,OAAO,CAAC,IAAzB,CAA9B;EAEA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IACjC,IAAI,cAAc,KAAK,SAAnB,IAAgC,OAAO,CAAC,QAA5C,EAAsD;MACpD,OAAO,IAAP;IACD;;IAED,MAAM,UAAU,GAAG,cAAc,CAAC,aAAf,CAA6B,KAA7B,CAAnB;IACA,cAAc,CAAC,IAAf,CAAoB,WAApB,CAAgC,UAAhC;IAEA,OAAO,UAAP;EACD,CATe,EASb,CAAC,cAAD,EAAiB,OAAO,CAAC,QAAzB,CATa,CAAhB;EAWA,yBAAyB,CAAC,MAAK;IAC7B,IAAI,OAAJ,EAAa;MACX,MAAM,cAAc,GAAG,SAAS,CAAC,KAAV,CAAgB,GAAhB,EAAqB,MAArB,CAA4B,OAA5B,CAAvB;MAEA,OAAO,CAAC,SAAR,CAAkB,GAAlB,CAAsB,GAAG,cAAzB;MACA,OAAO,CAAC,YAAR,CAAqB,KAArB,EAA4B,GAA5B;MACA,eAAe,CAAC,OAAhB,GAA0B,OAA1B;MAEA,OAAO,MAAK;QACV,OAAO,CAAC,SAAR,CAAkB,MAAlB,CAAyB,GAAG,cAA5B;QACA,OAAO,CAAC,eAAR,CAAwB,KAAxB;MACD,CAHD;IAID;EACF,CAbwB,EAatB,CAAC,SAAD,EAAY,GAAZ,EAAiB,OAAjB,EAA0B,eAA1B,CAbsB,CAAzB;EAeA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,OAAO,MAAK;;;MACV,CAAA,EAAA,GAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,aAAT,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,KAAA,CAAtB,GAAsB,EAAA,CAAE,WAAF,CAAc,OAAd,CAAtB;IACD,CAFD;EAGD,CAJD,EAIG,CAAC,OAAD,CAJH;EAMA,OAAO,OAAP;AACD,CA1CM","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport {\n useThemeClassName_unstable as useThemeClassName,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\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\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n zIndex: 1000000,\n },\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\n const classes = useStyles();\n const themeClassName = useThemeClassName();\n\n const className = mergeClasses(themeClassName, classes.root);\n\n const element = React.useMemo(() => {\n if (targetDocument === undefined || options.disabled) {\n return null;\n }\n\n const newElement = targetDocument.createElement('div');\n targetDocument.body.appendChild(newElement);\n\n return newElement;\n }, [targetDocument, options.disabled]);\n\n useIsomorphicLayoutEffect(() => {\n if (element) {\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 }\n }, [className, dir, element, focusVisibleRef]);\n\n React.useEffect(() => {\n return () => {\n element?.parentElement?.removeChild(element);\n };\n }, [element]);\n\n return element;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Portal/usePortalMountNode.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SACE,0BAA0B,IAAI,iBADhC,EAEE,kBAAkB,IAAI,SAFxB,QAGO,iCAHP;AAIA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,eAAT,QAAgC,yBAAhC;;AASA,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAOA;;AAEG;;;AACH,OAAO,MAAM,kBAAkB,GAAI,OAAD,IAA2D;EAC3F,MAAM;IAAE,cAAF;IAAkB;EAAlB,IAA0B,SAAS,EAAzC;EACA,MAAM,eAAe,GAAG,eAAe,EAAvC;EAEA,MAAM,OAAO,GAAG,SAAS,EAAzB;EACA,MAAM,cAAc,GAAG,iBAAiB,EAAxC;EAEA,MAAM,SAAS,GAAG,YAAY,CAAC,cAAD,EAAiB,OAAO,CAAC,IAAzB,CAA9B;EAEA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IACjC,IAAI,cAAc,KAAK,SAAnB,IAAgC,OAAO,CAAC,QAA5C,EAAsD;MACpD,OAAO,IAAP;IACD;;IAED,MAAM,UAAU,GAAG,cAAc,CAAC,aAAf,CAA6B,KAA7B,CAAnB;IACA,cAAc,CAAC,IAAf,CAAoB,WAApB,CAAgC,UAAhC;IAEA,OAAO,UAAP;EACD,CATe,EASb,CAAC,cAAD,EAAiB,OAAO,CAAC,QAAzB,CATa,CAAhB,CAT2F,CAoB3F;EACA;EACA;EACA;;EACA,KAAK,CAAC,OAAN,CAAc,MAAK;IACjB,IAAI,OAAJ,EAAa;MACX,MAAM,cAAc,GAAG,SAAS,CAAC,KAAV,CAAgB,GAAhB,EAAqB,MAArB,CAA4B,OAA5B,CAAvB;MAEA,OAAO,CAAC,SAAR,CAAkB,GAAlB,CAAsB,GAAG,cAAzB;MACA,OAAO,CAAC,YAAR,CAAqB,KAArB,EAA4B,GAA5B;MACA,eAAe,CAAC,OAAhB,GAA0B,OAA1B;MAEA,OAAO,MAAK;QACV,OAAO,CAAC,SAAR,CAAkB,MAAlB,CAAyB,GAAG,cAA5B;QACA,OAAO,CAAC,eAAR,CAAwB,KAAxB;MACD,CAHD;IAID;EACF,CAbD,EAaG,CAAC,SAAD,EAAY,GAAZ,EAAiB,OAAjB,EAA0B,eAA1B,CAbH;EAeA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,OAAO,MAAK;;;MACV,CAAA,EAAA,GAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,aAAT,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,KAAA,CAAtB,GAAsB,EAAA,CAAE,WAAF,CAAc,OAAd,CAAtB;IACD,CAFD;EAGD,CAJD,EAIG,CAAC,OAAD,CAJH;EAMA,OAAO,OAAP;AACD,CA9CM","sourcesContent":["import * as React from 'react';\nimport {\n useThemeClassName_unstable as useThemeClassName,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\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\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n zIndex: 1000000,\n },\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\n const classes = useStyles();\n const themeClassName = useThemeClassName();\n\n const className = mergeClasses(themeClassName, classes.root);\n\n const element = React.useMemo(() => {\n if (targetDocument === undefined || options.disabled) {\n return null;\n }\n\n const newElement = targetDocument.createElement('div');\n targetDocument.body.appendChild(newElement);\n\n return newElement;\n }, [targetDocument, options.disabled]);\n\n // This useMemo call is intentional\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 React.useMemo(() => {\n if (element) {\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 }\n }, [className, dir, element, focusVisibleRef]);\n\n React.useEffect(() => {\n return () => {\n element?.parentElement?.removeChild(element);\n };\n }, [element]);\n\n return element;\n};\n"],"sourceRoot":"../src/"}
@@ -7,8 +7,6 @@ exports.usePortalMountNode = void 0;
7
7
 
8
8
  const React = /*#__PURE__*/require("react");
9
9
 
10
- const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
11
-
12
10
  const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
13
11
 
14
12
  const react_1 = /*#__PURE__*/require("@griffel/react");
@@ -45,8 +43,12 @@ const usePortalMountNode = options => {
45
43
  const newElement = targetDocument.createElement('div');
46
44
  targetDocument.body.appendChild(newElement);
47
45
  return newElement;
48
- }, [targetDocument, options.disabled]);
49
- react_utilities_1.useIsomorphicLayoutEffect(() => {
46
+ }, [targetDocument, options.disabled]); // This useMemo call is intentional
47
+ // We don't want to re-create the portal element when its attributes change.
48
+ // This also should not be done in an effect because, changing the value of css variables
49
+ // after initial mount can trigger interesting CSS side effects like transitions.
50
+
51
+ React.useMemo(() => {
50
52
  if (element) {
51
53
  const classesToApply = className.split(' ').filter(Boolean);
52
54
  element.classList.add(...classesToApply);
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Portal/usePortalMountNode.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAIA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AASA,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAOA;;AAEG;;;AACI,MAAM,kBAAkB,GAAI,OAAD,IAA2D;EAC3F,MAAM;IAAE,cAAF;IAAkB;EAAlB,IAA0B,uBAAA,CAAA,kBAAA,EAAhC;EACA,MAAM,eAAe,GAAG,eAAA,CAAA,eAAA,EAAxB;EAEA,MAAM,OAAO,GAAG,SAAS,EAAzB;EACA,MAAM,cAAc,GAAG,uBAAA,CAAA,0BAAA,EAAvB;EAEA,MAAM,SAAS,GAAG,OAAA,CAAA,YAAA,CAAa,cAAb,EAA6B,OAAO,CAAC,IAArC,CAAlB;EAEA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IACjC,IAAI,cAAc,KAAK,SAAnB,IAAgC,OAAO,CAAC,QAA5C,EAAsD;MACpD,OAAO,IAAP;IACD;;IAED,MAAM,UAAU,GAAG,cAAc,CAAC,aAAf,CAA6B,KAA7B,CAAnB;IACA,cAAc,CAAC,IAAf,CAAoB,WAApB,CAAgC,UAAhC;IAEA,OAAO,UAAP;EACD,CATe,EASb,CAAC,cAAD,EAAiB,OAAO,CAAC,QAAzB,CATa,CAAhB;EAWA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;IAC7B,IAAI,OAAJ,EAAa;MACX,MAAM,cAAc,GAAG,SAAS,CAAC,KAAV,CAAgB,GAAhB,EAAqB,MAArB,CAA4B,OAA5B,CAAvB;MAEA,OAAO,CAAC,SAAR,CAAkB,GAAlB,CAAsB,GAAG,cAAzB;MACA,OAAO,CAAC,YAAR,CAAqB,KAArB,EAA4B,GAA5B;MACA,eAAe,CAAC,OAAhB,GAA0B,OAA1B;MAEA,OAAO,MAAK;QACV,OAAO,CAAC,SAAR,CAAkB,MAAlB,CAAyB,GAAG,cAA5B;QACA,OAAO,CAAC,eAAR,CAAwB,KAAxB;MACD,CAHD;IAID;EACF,CAbD,EAaG,CAAC,SAAD,EAAY,GAAZ,EAAiB,OAAjB,EAA0B,eAA1B,CAbH;EAeA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,OAAO,MAAK;;;MACV,CAAA,EAAA,GAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,aAAT,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,KAAA,CAAtB,GAAsB,EAAA,CAAE,WAAF,CAAc,OAAd,CAAtB;IACD,CAFD;EAGD,CAJD,EAIG,CAAC,OAAD,CAJH;EAMA,OAAO,OAAP;AACD,CA1CM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport {\n useThemeClassName_unstable as useThemeClassName,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\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\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n zIndex: 1000000,\n },\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\n const classes = useStyles();\n const themeClassName = useThemeClassName();\n\n const className = mergeClasses(themeClassName, classes.root);\n\n const element = React.useMemo(() => {\n if (targetDocument === undefined || options.disabled) {\n return null;\n }\n\n const newElement = targetDocument.createElement('div');\n targetDocument.body.appendChild(newElement);\n\n return newElement;\n }, [targetDocument, options.disabled]);\n\n useIsomorphicLayoutEffect(() => {\n if (element) {\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 }\n }, [className, dir, element, focusVisibleRef]);\n\n React.useEffect(() => {\n return () => {\n element?.parentElement?.removeChild(element);\n };\n }, [element]);\n\n return element;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Portal/usePortalMountNode.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAIA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AASA,MAAM,SAAS,gBAAG,OAAA,SAAA;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AAOA;;AAEG;;;AACI,MAAM,kBAAkB,GAAI,OAAD,IAA2D;EAC3F,MAAM;IAAE,cAAF;IAAkB;EAAlB,IAA0B,uBAAA,CAAA,kBAAA,EAAhC;EACA,MAAM,eAAe,GAAG,eAAA,CAAA,eAAA,EAAxB;EAEA,MAAM,OAAO,GAAG,SAAS,EAAzB;EACA,MAAM,cAAc,GAAG,uBAAA,CAAA,0BAAA,EAAvB;EAEA,MAAM,SAAS,GAAG,OAAA,CAAA,YAAA,CAAa,cAAb,EAA6B,OAAO,CAAC,IAArC,CAAlB;EAEA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IACjC,IAAI,cAAc,KAAK,SAAnB,IAAgC,OAAO,CAAC,QAA5C,EAAsD;MACpD,OAAO,IAAP;IACD;;IAED,MAAM,UAAU,GAAG,cAAc,CAAC,aAAf,CAA6B,KAA7B,CAAnB;IACA,cAAc,CAAC,IAAf,CAAoB,WAApB,CAAgC,UAAhC;IAEA,OAAO,UAAP;EACD,CATe,EASb,CAAC,cAAD,EAAiB,OAAO,CAAC,QAAzB,CATa,CAAhB,CAT2F,CAoB3F;EACA;EACA;EACA;;EACA,KAAK,CAAC,OAAN,CAAc,MAAK;IACjB,IAAI,OAAJ,EAAa;MACX,MAAM,cAAc,GAAG,SAAS,CAAC,KAAV,CAAgB,GAAhB,EAAqB,MAArB,CAA4B,OAA5B,CAAvB;MAEA,OAAO,CAAC,SAAR,CAAkB,GAAlB,CAAsB,GAAG,cAAzB;MACA,OAAO,CAAC,YAAR,CAAqB,KAArB,EAA4B,GAA5B;MACA,eAAe,CAAC,OAAhB,GAA0B,OAA1B;MAEA,OAAO,MAAK;QACV,OAAO,CAAC,SAAR,CAAkB,MAAlB,CAAyB,GAAG,cAA5B;QACA,OAAO,CAAC,eAAR,CAAwB,KAAxB;MACD,CAHD;IAID;EACF,CAbD,EAaG,CAAC,SAAD,EAAY,GAAZ,EAAiB,OAAjB,EAA0B,eAA1B,CAbH;EAeA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,OAAO,MAAK;;;MACV,CAAA,EAAA,GAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,aAAT,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,KAAA,CAAtB,GAAsB,EAAA,CAAE,WAAF,CAAc,OAAd,CAAtB;IACD,CAFD;EAGD,CAJD,EAIG,CAAC,OAAD,CAJH;EAMA,OAAO,OAAP;AACD,CA9CM;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import * as React from 'react';\nimport {\n useThemeClassName_unstable as useThemeClassName,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\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\nconst useStyles = makeStyles({\n root: {\n position: 'relative',\n zIndex: 1000000,\n },\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\n const classes = useStyles();\n const themeClassName = useThemeClassName();\n\n const className = mergeClasses(themeClassName, classes.root);\n\n const element = React.useMemo(() => {\n if (targetDocument === undefined || options.disabled) {\n return null;\n }\n\n const newElement = targetDocument.createElement('div');\n targetDocument.body.appendChild(newElement);\n\n return newElement;\n }, [targetDocument, options.disabled]);\n\n // This useMemo call is intentional\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 React.useMemo(() => {\n if (element) {\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 }\n }, [className, dir, element, focusVisibleRef]);\n\n React.useEffect(() => {\n return () => {\n element?.parentElement?.removeChild(element);\n };\n }, [element]);\n\n return element;\n};\n"],"sourceRoot":"../src/"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-portal",
3
- "version": "9.0.8",
3
+ "version": "9.0.9",
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",
@@ -31,10 +31,10 @@
31
31
  "@fluentui/scripts": "^1.0.0"
32
32
  },
33
33
  "dependencies": {
34
- "@fluentui/react-shared-contexts": "^9.0.2",
35
- "@fluentui/react-tabster": "^9.2.0",
36
- "@fluentui/react-utilities": "^9.1.2",
37
- "@griffel/react": "^1.4.1",
34
+ "@fluentui/react-shared-contexts": "^9.1.0",
35
+ "@fluentui/react-tabster": "^9.2.1",
36
+ "@fluentui/react-utilities": "^9.2.0",
37
+ "@griffel/react": "^1.4.2",
38
38
  "tslib": "^2.1.0"
39
39
  },
40
40
  "peerDependencies": {