@fluentui/react-portal 0.0.0-nightly-20230425-0423.1 → 0.0.0-nightly-20230427-0418.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,9 +2,9 @@
2
2
  "name": "@fluentui/react-portal",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 25 Apr 2023 04:31:28 GMT",
6
- "tag": "@fluentui/react-portal_v0.0.0-nightly-20230425-0423.1",
7
- "version": "0.0.0-nightly-20230425-0423.1",
5
+ "date": "Thu, 27 Apr 2023 04:23:10 GMT",
6
+ "tag": "@fluentui/react-portal_v0.0.0-nightly-20230427-0418.1",
7
+ "version": "0.0.0-nightly-20230427-0418.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
@@ -16,20 +16,20 @@
16
16
  {
17
17
  "author": "beachball",
18
18
  "package": "@fluentui/react-portal",
19
- "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230425-0423.1",
20
- "commit": "1d8dc5de94f261d4780c66b3ecb6529c67f53cbd"
19
+ "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230427-0418.1",
20
+ "commit": "a9e0a4f587386948c891437cdbe3b10437aa9485"
21
21
  },
22
22
  {
23
23
  "author": "beachball",
24
24
  "package": "@fluentui/react-portal",
25
- "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230425-0423.1",
26
- "commit": "1d8dc5de94f261d4780c66b3ecb6529c67f53cbd"
25
+ "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230427-0418.1",
26
+ "commit": "a9e0a4f587386948c891437cdbe3b10437aa9485"
27
27
  },
28
28
  {
29
29
  "author": "beachball",
30
30
  "package": "@fluentui/react-portal",
31
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230425-0423.1",
32
- "commit": "1d8dc5de94f261d4780c66b3ecb6529c67f53cbd"
31
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230427-0418.1",
32
+ "commit": "a9e0a4f587386948c891437cdbe3b10437aa9485"
33
33
  }
34
34
  ]
35
35
  }
package/CHANGELOG.md CHANGED
@@ -1,20 +1,20 @@
1
1
  # Change Log - @fluentui/react-portal
2
2
 
3
- This log was last generated on Tue, 25 Apr 2023 04:31:28 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 27 Apr 2023 04:23:10 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20230425-0423.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v0.0.0-nightly-20230425-0423.1)
7
+ ## [0.0.0-nightly-20230427-0418.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v0.0.0-nightly-20230427-0418.1)
8
8
 
9
- Tue, 25 Apr 2023 04:31:28 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.2.6..@fluentui/react-portal_v0.0.0-nightly-20230425-0423.1)
9
+ Thu, 27 Apr 2023 04:23:10 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.2.6..@fluentui/react-portal_v0.0.0-nightly-20230427-0418.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230425-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/1d8dc5de94f261d4780c66b3ecb6529c67f53cbd) by beachball)
16
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20230425-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/1d8dc5de94f261d4780c66b3ecb6529c67f53cbd) by beachball)
17
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20230425-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/1d8dc5de94f261d4780c66b3ecb6529c67f53cbd) by beachball)
15
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230427-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/a9e0a4f587386948c891437cdbe3b10437aa9485) by beachball)
16
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20230427-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/a9e0a4f587386948c891437cdbe3b10437aa9485) by beachball)
17
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20230427-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/a9e0a4f587386948c891437cdbe3b10437aa9485) by beachball)
18
18
 
19
19
  ## [9.2.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.2.6)
20
20
 
@@ -1,17 +1,10 @@
1
1
  import * as React from 'react';
2
2
  import { useThemeClassName_unstable as useThemeClassName, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
3
- import { __styles, mergeClasses } from '@griffel/react';
3
+ import { mergeClasses } from '@griffel/react';
4
4
  import { useFocusVisible } from '@fluentui/react-tabster';
5
5
  import { useDisposable } from 'use-disposable';
6
+ import { usePortalMountNodeStylesStyles } from './usePortalMountNodeStyles.styles';
6
7
  const useInsertionEffect = React['useInsertion' + 'Effect'];
7
- const useStyles = /*#__PURE__*/__styles({
8
- root: {
9
- qhf8xq: "f10pi13n",
10
- Bj3rh1h: "f494woh"
11
- }
12
- }, {
13
- d: [".f10pi13n{position:relative;}", ".f494woh{z-index:1000000;}"]
14
- });
15
8
  /**
16
9
  * Creates a new element on a "document.body" to mount portals.
17
10
  */
@@ -21,7 +14,7 @@ export const usePortalMountNode = options => {
21
14
  dir
22
15
  } = useFluent();
23
16
  const focusVisibleRef = useFocusVisible();
24
- const classes = useStyles();
17
+ const classes = usePortalMountNodeStylesStyles();
25
18
  const themeClassName = useThemeClassName();
26
19
  const className = mergeClasses(themeClassName, classes.root, options.className);
27
20
  const element = useDisposable(() => {
@@ -1 +1 @@
1
- {"version":3,"names":["React","useThemeClassName_unstable","useThemeClassName","useFluent_unstable","useFluent","__styles","mergeClasses","useFocusVisible","useDisposable","useInsertionEffect","useStyles","root","qhf8xq","Bj3rh1h","d","usePortalMountNode","options","targetDocument","dir","focusVisibleRef","classes","themeClassName","className","element","undefined","disabled","newElement","createElement","body","appendChild","remove","classesToApply","split","filter","Boolean","classList","add","setAttribute","current","removeAttribute","useMemo"],"sources":["../../../src/components/Portal/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 { makeStyles, mergeClasses } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\nimport { useDisposable } from 'use-disposable';\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\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 const classes = useStyles();\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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SACEC,0BAAA,IAA8BC,iBAAiB,EAC/CC,kBAAA,IAAsBC,SAAS,QAC1B;AACP,SAAAC,QAAA,EAAqBC,YAAY,QAAQ;AACzC,SAASC,eAAe,QAAQ;AAChC,SAASC,aAAa,QAAQ;AAE9B,MAAMC,kBAAA,GAAqBT,KAAgB,CAAC,iBAAiB,SAAS;AAWtE,MAAMU,SAAA,gBAAYL,QAAA;EAAAM,IAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAKlB;AAEA;;;AAGA,OAAO,MAAMC,kBAAA,GAAsBC,OAAA,IAA2D;EAC5F,MAAM;IAAEC,cAAA;IAAgBC;EAAG,CAAE,GAAGd,SAAA;EAChC,MAAMe,eAAA,GAAkBZ,eAAA;EACxB,MAAMa,OAAA,GAAUV,SAAA;EAChB,MAAMW,cAAA,GAAiBnB,iBAAA;EAEvB,MAAMoB,SAAA,GAAYhB,YAAA,CAAae,cAAA,EAAgBD,OAAA,CAAQT,IAAI,EAAEK,OAAA,CAAQM,SAAS;EAE9E,MAAMC,OAAA,GAAUf,aAAA,CAAc,MAAM;IAClC,IAAIS,cAAA,KAAmBO,SAAA,IAAaR,OAAA,CAAQS,QAAQ,EAAE;MACpD,OAAO,CAAC,IAAI,EAAE,MAAM,IAAI,CAAC;IAC3B;IAEA,MAAMC,UAAA,GAAaT,cAAA,CAAeU,aAAa,CAAC;IAChDV,cAAA,CAAeW,IAAI,CAACC,WAAW,CAACH,UAAA;IAChC,OAAO,CAACA,UAAA,EAAY,MAAMA,UAAA,CAAWI,MAAM,GAAG;EAChD,GAAG,CAACb,cAAA,CAAe;EAEnB,IAAIR,kBAAA,EAAoB;IACtB;IACAA,kBAAA,CAAmB,MAAM;MACvB,IAAI,CAACc,OAAA,EAAS;QACZ;MACF;MAEA,MAAMQ,cAAA,GAAiBT,SAAA,CAAUU,KAAK,CAAC,KAAKC,MAAM,CAACC,OAAA;MAEnDX,OAAA,CAAQY,SAAS,CAACC,GAAG,IAAIL,cAAA;MACzBR,OAAA,CAAQc,YAAY,CAAC,OAAOnB,GAAA;MAC5BC,eAAA,CAAgBmB,OAAO,GAAGf,OAAA;MAE1B,OAAO,MAAM;QACXA,OAAA,CAAQY,SAAS,CAACL,MAAM,IAAIC,cAAA;QAC5BR,OAAA,CAAQgB,eAAe,CAAC;MAC1B;IACF,GAAG,CAACjB,SAAA,EAAWJ,GAAA,EAAKK,OAAA,EAASJ,eAAA,CAAgB;EAC/C,OAAO;IACL;IACA;IACA;IACA;IACA;IACAnB,KAAA,CAAMwC,OAAO,CAAC,MAAM;MAClB,IAAI,CAACjB,OAAA,EAAS;QACZ;MACF;MAEA;MACAA,OAAA,CAAQD,SAAS,GAAGA,SAAA;MACpBC,OAAA,CAAQc,YAAY,CAAC,OAAOnB,GAAA;MAC5BC,eAAA,CAAgBmB,OAAO,GAAGf,OAAA;IAC5B,GAAG,CAACD,SAAA,EAAWJ,GAAA,EAAKK,OAAA,EAASJ,eAAA,CAAgB;EAC/C;EAEA,OAAOI,OAAA;AACT"}
1
+ {"version":3,"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"],"sources":["../../../src/components/Portal/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"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SACEC,0BAAA,IAA8BC,iBAAiB,EAC/CC,kBAAA,IAAsBC,SAAS,QAC1B;AACP,SAASC,YAAY,QAAQ;AAC7B,SAASC,eAAe,QAAQ;AAChC,SAASC,aAAa,QAAQ;AAE9B,SAASC,8BAA8B,QAAQ;AAE/C,MAAMC,kBAAA,GAAqBT,KAAgB,CAAC,iBAAiB,SAAS;AAWtE;;;AAGA,OAAO,MAAMU,kBAAA,GAAsBC,OAAA,IAA2D;EAC5F,MAAM;IAAEC,cAAA;IAAgBC;EAAG,CAAE,GAAGT,SAAA;EAChC,MAAMU,eAAA,GAAkBR,eAAA;EACxB,MAAMS,OAAA,GAAUP,8BAAA;EAChB,MAAMQ,cAAA,GAAiBd,iBAAA;EAEvB,MAAMe,SAAA,GAAYZ,YAAA,CAAaW,cAAA,EAAgBD,OAAA,CAAQG,IAAI,EAAEP,OAAA,CAAQM,SAAS;EAE9E,MAAME,OAAA,GAAUZ,aAAA,CAAc,MAAM;IAClC,IAAIK,cAAA,KAAmBQ,SAAA,IAAaT,OAAA,CAAQU,QAAQ,EAAE;MACpD,OAAO,CAAC,IAAI,EAAE,MAAM,IAAI,CAAC;IAC3B;IAEA,MAAMC,UAAA,GAAaV,cAAA,CAAeW,aAAa,CAAC;IAChDX,cAAA,CAAeY,IAAI,CAACC,WAAW,CAACH,UAAA;IAChC,OAAO,CAACA,UAAA,EAAY,MAAMA,UAAA,CAAWI,MAAM,GAAG;EAChD,GAAG,CAACd,cAAA,CAAe;EAEnB,IAAIH,kBAAA,EAAoB;IACtB;IACAA,kBAAA,CAAmB,MAAM;MACvB,IAAI,CAACU,OAAA,EAAS;QACZ;MACF;MAEA,MAAMQ,cAAA,GAAiBV,SAAA,CAAUW,KAAK,CAAC,KAAKC,MAAM,CAACC,OAAA;MAEnDX,OAAA,CAAQY,SAAS,CAACC,GAAG,IAAIL,cAAA;MACzBR,OAAA,CAAQc,YAAY,CAAC,OAAOpB,GAAA;MAC5BC,eAAA,CAAgBoB,OAAO,GAAGf,OAAA;MAE1B,OAAO,MAAM;QACXA,OAAA,CAAQY,SAAS,CAACL,MAAM,IAAIC,cAAA;QAC5BR,OAAA,CAAQgB,eAAe,CAAC;MAC1B;IACF,GAAG,CAAClB,SAAA,EAAWJ,GAAA,EAAKM,OAAA,EAASL,eAAA,CAAgB;EAC/C,OAAO;IACL;IACA;IACA;IACA;IACA;IACAd,KAAA,CAAMoC,OAAO,CAAC,MAAM;MAClB,IAAI,CAACjB,OAAA,EAAS;QACZ;MACF;MAEA;MACAA,OAAA,CAAQF,SAAS,GAAGA,SAAA;MACpBE,OAAA,CAAQc,YAAY,CAAC,OAAOpB,GAAA;MAC5BC,eAAA,CAAgBoB,OAAO,GAAGf,OAAA;IAC5B,GAAG,CAACF,SAAA,EAAWJ,GAAA,EAAKM,OAAA,EAASL,eAAA,CAAgB;EAC/C;EAEA,OAAOK,OAAA;AACT"}
@@ -0,0 +1,10 @@
1
+ import { __styles } from '@griffel/react';
2
+ export const usePortalMountNodeStylesStyles = /*#__PURE__*/__styles({
3
+ root: {
4
+ qhf8xq: "f10pi13n",
5
+ Bj3rh1h: "f494woh"
6
+ }
7
+ }, {
8
+ d: [".f10pi13n{position:relative;}", ".f494woh{z-index:1000000;}"]
9
+ });
10
+ //# sourceMappingURL=usePortalMountNodeStyles.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"names":["__styles","usePortalMountNodeStylesStyles","root","qhf8xq","Bj3rh1h","d"],"sources":["../../../src/components/Portal/usePortalMountNodeStyles.styles.ts"],"sourcesContent":["import { makeStyles } from '@griffel/react';\n\nexport const usePortalMountNodeStylesStyles = makeStyles({\n root: {\n position: 'relative',\n zIndex: 1000000,\n },\n});\n"],"mappings":"AAAA,SAAAA,QAAA,QAA2B;AAE3B,OAAO,MAAMC,8BAAA,gBAAiCD,QAAA;EAAAE,IAAA;IAAAC,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAK9C"}
@@ -12,22 +12,12 @@ const _reactSharedContexts = require("@fluentui/react-shared-contexts");
12
12
  const _react1 = require("@griffel/react");
13
13
  const _reactTabster = require("@fluentui/react-tabster");
14
14
  const _useDisposable = require("use-disposable");
15
+ const _usePortalMountNodeStylesStyles = require("./usePortalMountNodeStyles.styles");
15
16
  const useInsertionEffect = _react['useInsertion' + 'Effect'];
16
- const useStyles = /*#__PURE__*/ (0, _react1["__styles"])({
17
- root: {
18
- qhf8xq: "f10pi13n",
19
- Bj3rh1h: "f494woh"
20
- }
21
- }, {
22
- d: [
23
- ".f10pi13n{position:relative;}",
24
- ".f494woh{z-index:1000000;}"
25
- ]
26
- });
27
17
  const usePortalMountNode = (options)=>{
28
18
  const { targetDocument , dir } = (0, _reactSharedContexts.useFluent_unstable)();
29
19
  const focusVisibleRef = (0, _reactTabster.useFocusVisible)();
30
- const classes = useStyles();
20
+ const classes = (0, _usePortalMountNodeStylesStyles.usePortalMountNodeStylesStyles)();
31
21
  const themeClassName = (0, _reactSharedContexts.useThemeClassName_unstable)();
32
22
  const className = (0, _react1.mergeClasses)(themeClassName, classes.root, options.className);
33
23
  const element = (0, _useDisposable.useDisposable)(()=>{
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../lib/components/Portal/usePortalMountNode.js"],"sourcesContent":["import * as React from 'react';\nimport { useThemeClassName_unstable as useThemeClassName, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { __styles, mergeClasses } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\nimport { useDisposable } from 'use-disposable';\nconst useInsertionEffect = React['useInsertion' + 'Effect'];\nconst useStyles = /*#__PURE__*/__styles({\n root: {\n qhf8xq: \"f10pi13n\",\n Bj3rh1h: \"f494woh\"\n }\n}, {\n d: [\".f10pi13n{position:relative;}\", \".f494woh{z-index:1000000;}\"]\n});\n/**\n * Creates a new element on a \"document.body\" to mount portals.\n */\nexport const usePortalMountNode = options => {\n const {\n targetDocument,\n dir\n } = useFluent();\n const focusVisibleRef = useFocusVisible();\n const classes = useStyles();\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 [null, () => null];\n }\n const newElement = targetDocument.createElement('div');\n targetDocument.body.appendChild(newElement);\n return [newElement, () => newElement.remove()];\n }, [targetDocument]);\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 }, [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 // Force replace all classes\n element.className = className;\n element.setAttribute('dir', dir);\n focusVisibleRef.current = element;\n }, [className, dir, element, focusVisibleRef]);\n }\n return element;\n};\n//# sourceMappingURL=usePortalMountNode.js.map"],"names":["usePortalMountNode","useInsertionEffect","React","useStyles","__styles","root","qhf8xq","Bj3rh1h","d","options","targetDocument","dir","useFluent","focusVisibleRef","useFocusVisible","classes","themeClassName","useThemeClassName","className","mergeClasses","element","useDisposable","undefined","disabled","newElement","createElement","body","appendChild","remove","classesToApply","split","filter","Boolean","classList","add","setAttribute","current","removeAttribute","useMemo"],"mappings":";;;;+BAiBaA;;aAAAA;;;6DAjBU;qCAC0E;wBAC1D;8BACP;+BACF;AAC9B,MAAMC,qBAAqBC,MAAK,CAAC,iBAAiB,SAAS;AAC3D,MAAMC,YAAY,WAAW,GAAEC,IAAAA,mBAAQ,EAAC;IACtCC,MAAM;QACJC,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAiC;KAA6B;AACpE;AAIO,MAAMR,qBAAqBS,CAAAA,UAAW;IAC3C,MAAM,EACJC,eAAc,EACdC,IAAG,EACJ,GAAGC,IAAAA,uCAAS;IACb,MAAMC,kBAAkBC,IAAAA,6BAAe;IACvC,MAAMC,UAAUZ;IAChB,MAAMa,iBAAiBC,IAAAA,+CAAiB;IACxC,MAAMC,YAAYC,IAAAA,oBAAY,EAACH,gBAAgBD,QAAQV,IAAI,EAAEI,QAAQS,SAAS;IAC9E,MAAME,UAAUC,IAAAA,4BAAa,EAAC,IAAM;QAClC,IAAIX,mBAAmBY,aAAab,QAAQc,QAAQ,EAAE;YACpD,OAAO;gBAAC,IAAI;gBAAE,IAAM,IAAI;aAAC;QAC3B,CAAC;QACD,MAAMC,aAAad,eAAee,aAAa,CAAC;QAChDf,eAAegB,IAAI,CAACC,WAAW,CAACH;QAChC,OAAO;YAACA;YAAY,IAAMA,WAAWI,MAAM;SAAG;IAChD,GAAG;QAAClB;KAAe;IACnB,IAAIT,oBAAoB;QACtB,sDAAsD;QACtDA,mBAAmB,IAAM;YACvB,IAAI,CAACmB,SAAS;gBACZ;YACF,CAAC;YACD,MAAMS,iBAAiBX,UAAUY,KAAK,CAAC,KAAKC,MAAM,CAACC;YACnDZ,QAAQa,SAAS,CAACC,GAAG,IAAIL;YACzBT,QAAQe,YAAY,CAAC,OAAOxB;YAC5BE,gBAAgBuB,OAAO,GAAGhB;YAC1B,OAAO,IAAM;gBACXA,QAAQa,SAAS,CAACL,MAAM,IAAIC;gBAC5BT,QAAQiB,eAAe,CAAC;YAC1B;QACF,GAAG;YAACnB;YAAWP;YAAKS;YAASP;SAAgB;IAC/C,OAAO;QACL,gDAAgD;QAChD,4EAA4E;QAC5E,yFAAyF;QACzF,iFAAiF;QACjF,sDAAsD;QACtDX,OAAMoC,OAAO,CAAC,IAAM;YAClB,IAAI,CAAClB,SAAS;gBACZ;YACF,CAAC;YACD,4BAA4B;YAC5BA,QAAQF,SAAS,GAAGA;YACpBE,QAAQe,YAAY,CAAC,OAAOxB;YAC5BE,gBAAgBuB,OAAO,GAAGhB;QAC5B,GAAG;YAACF;YAAWP;YAAKS;YAASP;SAAgB;IAC/C,CAAC;IACD,OAAOO;AACT,GACA,8CAA8C"}
1
+ {"version":3,"sources":["../../../lib/components/Portal/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 */\nexport const usePortalMountNode = options => {\n const {\n targetDocument,\n dir\n } = 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 [null, () => null];\n }\n const newElement = targetDocument.createElement('div');\n targetDocument.body.appendChild(newElement);\n return [newElement, () => newElement.remove()];\n }, [targetDocument]);\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 }, [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 // Force replace all classes\n element.className = className;\n element.setAttribute('dir', dir);\n focusVisibleRef.current = element;\n }, [className, dir, element, focusVisibleRef]);\n }\n return element;\n};\n//# sourceMappingURL=usePortalMountNode.js.map"],"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":";;;;+BAUaA;;aAAAA;;;6DAVU;qCAC0E;wBACpE;8BACG;+BACF;gDACiB;AAC/C,MAAMC,qBAAqBC,MAAK,CAAC,iBAAiB,SAAS;AAIpD,MAAMF,qBAAqBG,CAAAA,UAAW;IAC3C,MAAM,EACJC,eAAc,EACdC,IAAG,EACJ,GAAGC,IAAAA,uCAAS;IACb,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,IAAM;QAClC,IAAIb,mBAAmBc,aAAaf,QAAQgB,QAAQ,EAAE;YACpD,OAAO;gBAAC,IAAI;gBAAE,IAAM,IAAI;aAAC;QAC3B,CAAC;QACD,MAAMC,aAAahB,eAAeiB,aAAa,CAAC;QAChDjB,eAAekB,IAAI,CAACC,WAAW,CAACH;QAChC,OAAO;YAACA;YAAY,IAAMA,WAAWI,MAAM;SAAG;IAChD,GAAG;QAACpB;KAAe;IACnB,IAAIH,oBAAoB;QACtB,sDAAsD;QACtDA,mBAAmB,IAAM;YACvB,IAAI,CAACe,SAAS;gBACZ;YACF,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,IAAM;gBACXA,QAAQa,SAAS,CAACL,MAAM,IAAIC;gBAC5BT,QAAQiB,eAAe,CAAC;YAC1B;QACF,GAAG;YAACpB;YAAWR;YAAKW;YAAST;SAAgB;IAC/C,OAAO;QACL,gDAAgD;QAChD,4EAA4E;QAC5E,yFAAyF;QACzF,iFAAiF;QACjF,sDAAsD;QACtDL,OAAMgC,OAAO,CAAC,IAAM;YAClB,IAAI,CAAClB,SAAS;gBACZ;YACF,CAAC;YACD,4BAA4B;YAC5BA,QAAQH,SAAS,GAAGA;YACpBG,QAAQe,YAAY,CAAC,OAAO1B;YAC5BE,gBAAgByB,OAAO,GAAGhB;QAC5B,GAAG;YAACH;YAAWR;YAAKW;YAAST;SAAgB;IAC/C,CAAC;IACD,OAAOS;AACT,GACA,8CAA8C"}
@@ -0,0 +1,22 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", {
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "usePortalMountNodeStylesStyles", {
6
+ enumerable: true,
7
+ get: ()=>usePortalMountNodeStylesStyles
8
+ });
9
+ const _react = require("@griffel/react");
10
+ const usePortalMountNodeStylesStyles = /*#__PURE__*/ (0, _react["__styles"])({
11
+ root: {
12
+ qhf8xq: "f10pi13n",
13
+ Bj3rh1h: "f494woh"
14
+ }
15
+ }, {
16
+ d: [
17
+ ".f10pi13n{position:relative;}",
18
+ ".f494woh{z-index:1000000;}"
19
+ ]
20
+ }); //# sourceMappingURL=usePortalMountNodeStyles.styles.js.map
21
+
22
+ //# sourceMappingURL=usePortalMountNodeStyles.styles.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../../lib/components/Portal/usePortalMountNodeStyles.styles.js"],"sourcesContent":["import { __styles } from '@griffel/react';\nexport const usePortalMountNodeStylesStyles = /*#__PURE__*/__styles({\n root: {\n qhf8xq: \"f10pi13n\",\n Bj3rh1h: \"f494woh\"\n }\n}, {\n d: [\".f10pi13n{position:relative;}\", \".f494woh{z-index:1000000;}\"]\n});\n//# sourceMappingURL=usePortalMountNodeStyles.styles.js.map"],"names":["usePortalMountNodeStylesStyles","__styles","root","qhf8xq","Bj3rh1h","d"],"mappings":";;;;+BACaA;;aAAAA;;uBADY;AAClB,MAAMA,iCAAiC,WAAW,GAAEC,IAAAA,kBAAQ,EAAC;IAClEC,MAAM;QACJC,QAAQ;QACRC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAiC;KAA6B;AACpE,IACA,2DAA2D"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-portal",
3
- "version": "0.0.0-nightly-20230425-0423.1",
3
+ "version": "0.0.0-nightly-20230427-0418.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",
@@ -31,9 +31,9 @@
31
31
  "@fluentui/scripts-tasks": "*"
32
32
  },
33
33
  "dependencies": {
34
- "@fluentui/react-shared-contexts": "0.0.0-nightly-20230425-0423.1",
35
- "@fluentui/react-tabster": "0.0.0-nightly-20230425-0423.1",
36
- "@fluentui/react-utilities": "0.0.0-nightly-20230425-0423.1",
34
+ "@fluentui/react-shared-contexts": "0.0.0-nightly-20230427-0418.1",
35
+ "@fluentui/react-tabster": "0.0.0-nightly-20230427-0418.1",
36
+ "@fluentui/react-utilities": "0.0.0-nightly-20230427-0418.1",
37
37
  "@griffel/react": "^1.5.2",
38
38
  "@swc/helpers": "^0.4.14",
39
39
  "use-disposable": "^1.0.1"