@fluentui/react-portal 9.1.1 → 9.1.2
Sign up to get free protection for your applications and to get access to all the features.
- package/CHANGELOG.json +22 -1
- package/CHANGELOG.md +12 -2
- package/lib/components/Portal/usePortalMountNode.js +33 -20
- package/lib/components/Portal/usePortalMountNode.js.map +1 -1
- package/lib-amd/components/Portal/usePortalMountNode.js +36 -23
- package/lib-amd/components/Portal/usePortalMountNode.js.map +1 -1
- package/lib-commonjs/components/Portal/usePortalMountNode.js +33 -20
- package/lib-commonjs/components/Portal/usePortalMountNode.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,28 @@
|
|
|
2
2
|
"name": "@fluentui/react-portal",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Wed, 18 Jan 2023 16:30:57 GMT",
|
|
6
|
+
"tag": "@fluentui/react-portal_v9.1.2",
|
|
7
|
+
"version": "9.1.2",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "lingfangao@hotmail.com",
|
|
12
|
+
"package": "@fluentui/react-portal",
|
|
13
|
+
"commit": "13cf1d07a6df4617106c731ba0379b6102a08104",
|
|
14
|
+
"comment": "fix: Insert css variables class at render time"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-portal",
|
|
19
|
+
"comment": "Bump @fluentui/react-tabster to v9.4.0",
|
|
20
|
+
"commit": "13cf1d07a6df4617106c731ba0379b6102a08104"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Mon, 16 Jan 2023 08:39:07 GMT",
|
|
6
27
|
"tag": "@fluentui/react-portal_v9.1.1",
|
|
7
28
|
"version": "9.1.1",
|
|
8
29
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,22 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-portal
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 18 Jan 2023 16:30:57 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.1.2)
|
|
8
|
+
|
|
9
|
+
Wed, 18 Jan 2023 16:30:57 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.1.1..@fluentui/react-portal_v9.1.2)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: Insert css variables class at render time ([PR #26377](https://github.com/microsoft/fluentui/pull/26377) by lingfangao@hotmail.com)
|
|
15
|
+
- Bump @fluentui/react-tabster to v9.4.0 ([PR #26377](https://github.com/microsoft/fluentui/pull/26377) by beachball)
|
|
16
|
+
|
|
7
17
|
## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-portal_v9.1.1)
|
|
8
18
|
|
|
9
|
-
Mon, 16 Jan 2023 08:
|
|
19
|
+
Mon, 16 Jan 2023 08:39:07 GMT
|
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-portal_v9.1.0..@fluentui/react-portal_v9.1.1)
|
|
11
21
|
|
|
12
22
|
### Patches
|
|
@@ -3,9 +3,7 @@ import { useThemeClassName_unstable as useThemeClassName, useFluent_unstable as
|
|
|
3
3
|
import { __styles, mergeClasses } from '@griffel/react';
|
|
4
4
|
import { useFocusVisible } from '@fluentui/react-tabster';
|
|
5
5
|
import { useDisposable } from 'use-disposable';
|
|
6
|
-
|
|
7
|
-
// String concatenation is used to prevent bundlers to complain with older versions of React
|
|
8
|
-
const useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : useIsomorphicLayoutEffect;
|
|
6
|
+
const useInsertionEffect = React['useInsertion' + 'Effect'];
|
|
9
7
|
const useStyles = /*#__PURE__*/__styles({
|
|
10
8
|
root: {
|
|
11
9
|
qhf8xq: "f10pi13n",
|
|
@@ -14,6 +12,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
14
12
|
}, {
|
|
15
13
|
d: [".f10pi13n{position:relative;}", ".f494woh{z-index:1000000;}"]
|
|
16
14
|
});
|
|
15
|
+
const reactMajorVersion = /*#__PURE__*/Number( /*#__PURE__*/React.version.split('.')[0]);
|
|
17
16
|
/**
|
|
18
17
|
* Creates a new element on a document.body to mount portals
|
|
19
18
|
*/
|
|
@@ -34,23 +33,37 @@ export const usePortalMountNode = options => {
|
|
|
34
33
|
targetDocument.body.appendChild(newElement);
|
|
35
34
|
return [newElement, () => newElement.remove()];
|
|
36
35
|
}, [targetDocument]);
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
36
|
+
if (reactMajorVersion >= 18) {
|
|
37
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
38
|
+
useInsertionEffect(() => {
|
|
39
|
+
if (!element) {
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
const classesToApply = className.split(' ').filter(Boolean);
|
|
43
|
+
element.classList.add(...classesToApply);
|
|
44
|
+
element.setAttribute('dir', dir);
|
|
45
|
+
focusVisibleRef.current = element;
|
|
46
|
+
return () => {
|
|
47
|
+
element.classList.remove(...classesToApply);
|
|
48
|
+
element.removeAttribute('dir');
|
|
49
|
+
};
|
|
50
|
+
}, [className, dir, element, focusVisibleRef]);
|
|
51
|
+
} else {
|
|
52
|
+
// This useMemo call is intentional for React 17
|
|
53
|
+
// We don't want to re-create the portal element when its attributes change.
|
|
54
|
+
// This also should not be done in an effect because, changing the value of css variables
|
|
55
|
+
// after initial mount can trigger interesting CSS side effects like transitions.
|
|
56
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
57
|
+
React.useMemo(() => {
|
|
58
|
+
if (!element) {
|
|
59
|
+
return;
|
|
60
|
+
}
|
|
61
|
+
// Force replace all classes
|
|
62
|
+
element.className = className;
|
|
63
|
+
element.setAttribute('dir', dir);
|
|
64
|
+
focusVisibleRef.current = element;
|
|
65
|
+
}, [className, dir, element, focusVisibleRef]);
|
|
66
|
+
}
|
|
54
67
|
return element;
|
|
55
68
|
};
|
|
56
69
|
//# sourceMappingURL=usePortalMountNode.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,0BAA0B,IAAIC,iBAAiB,EAC/CC,kBAAkB,IAAIC,SAAS,QAC1B,iCAAiC;AACxC,mBAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,eAAe,QAAQ,yBAAyB;AACzD,SAASC,aAAa,QAAQ,gBAAgB;
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,0BAA0B,IAAIC,iBAAiB,EAC/CC,kBAAkB,IAAIC,SAAS,QAC1B,iCAAiC;AACxC,mBAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,eAAe,QAAQ,yBAAyB;AACzD,SAASC,aAAa,QAAQ,gBAAgB;AAE9C,MAAMC,kBAAkB,GAAIR,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAiC;AAStG,MAAMS,SAAS,gBAAG;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAKhB;AAEF,MAAMC,iBAAiB,gBAAGC,MAAM,CAAC,mBAAK,CAACC,OAAO,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AAE7D;;;AAGA,OAAO,MAAMC,kBAAkB,GAAIC,OAAkC,IAAwB;EAC3F,MAAM;IAAEC,cAAc;IAAEC;EAAG,CAAE,GAAGb,SAAS,EAAE;EAC3C,MAAMc,eAAe,GAAGZ,eAAe,EAAgE;EACvG,MAAMa,OAAO,GAAGV,SAAS,EAAE;EAC3B,MAAMW,cAAc,GAAGlB,iBAAiB,EAAE;EAE1C,MAAMmB,SAAS,GAAGhB,YAAY,CAACe,cAAc,EAAED,OAAO,CAACG,IAAI,CAAC;EAE5D,MAAMC,OAAO,GAAGhB,aAAa,CAAC,MAAK;IACjC,IAAIS,cAAc,KAAKQ,SAAS,IAAIT,OAAO,CAACU,QAAQ,EAAE;MACpD,OAAO,CAAC,IAAI,EAAE,MAAM,IAAI,CAAC;;IAG3B,MAAMC,UAAU,GAAGV,cAAc,CAACW,aAAa,CAAC,KAAK,CAAC;IACtDX,cAAc,CAACY,IAAI,CAACC,WAAW,CAACH,UAAU,CAAC;IAC3C,OAAO,CAACA,UAAU,EAAE,MAAMA,UAAU,CAACI,MAAM,EAAE,CAAC;EAChD,CAAC,EAAE,CAACd,cAAc,CAAC,CAAC;EAEpB,IAAIN,iBAAiB,IAAI,EAAE,EAAE;IAC3B;IACAF,kBAAkB,CAAC,MAAK;MACtB,IAAI,CAACe,OAAO,EAAE;QACZ;;MAGF,MAAMQ,cAAc,GAAGV,SAAS,CAACR,KAAK,CAAC,GAAG,CAAC,CAACmB,MAAM,CAACC,OAAO,CAAC;MAE3DV,OAAO,CAACW,SAAS,CAACC,GAAG,CAAC,GAAGJ,cAAc,CAAC;MACxCR,OAAO,CAACa,YAAY,CAAC,KAAK,EAAEnB,GAAG,CAAC;MAChCC,eAAe,CAACmB,OAAO,GAAGd,OAAO;MAEjC,OAAO,MAAK;QACVA,OAAO,CAACW,SAAS,CAACJ,MAAM,CAAC,GAAGC,cAAc,CAAC;QAC3CR,OAAO,CAACe,eAAe,CAAC,KAAK,CAAC;MAChC,CAAC;IACH,CAAC,EAAE,CAACjB,SAAS,EAAEJ,GAAG,EAAEM,OAAO,EAAEL,eAAe,CAAC,CAAC;GAC/C,MAAM;IACL;IACA;IACA;IACA;IACA;IACAlB,KAAK,CAACuC,OAAO,CAAC,MAAK;MACjB,IAAI,CAAChB,OAAO,EAAE;QACZ;;MAGF;MACAA,OAAO,CAACF,SAAS,GAAGA,SAAS;MAC7BE,OAAO,CAACa,YAAY,CAAC,KAAK,EAAEnB,GAAG,CAAC;MAChCC,eAAe,CAACmB,OAAO,GAAGd,OAAO;IACnC,CAAC,EAAE,CAACF,SAAS,EAAEJ,GAAG,EAAEM,OAAO,EAAEL,eAAe,CAAC,CAAC;;EAGhD,OAAOK,OAAO;AAChB,CAAC","names":["React","useThemeClassName_unstable","useThemeClassName","useFluent_unstable","useFluent","mergeClasses","useFocusVisible","useDisposable","useInsertionEffect","useStyles","reactMajorVersion","Number","version","split","usePortalMountNode","options","targetDocument","dir","focusVisibleRef","classes","themeClassName","className","root","element","undefined","disabled","newElement","createElement","body","appendChild","remove","classesToApply","filter","Boolean","classList","add","setAttribute","current","removeAttribute","useMemo"],"sourceRoot":"../src/","sources":["packages/react-components/react-portal/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;\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\nconst reactMajorVersion = Number(React.version.split('.')[0]);\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);\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 (reactMajorVersion >= 18) {\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"]}
|
|
@@ -1,17 +1,15 @@
|
|
|
1
|
-
define(["require", "exports", "react", "@fluentui/react-shared-contexts", "@griffel/react", "@fluentui/react-tabster", "use-disposable"
|
|
1
|
+
define(["require", "exports", "react", "@fluentui/react-shared-contexts", "@griffel/react", "@fluentui/react-tabster", "use-disposable"], function (require, exports, React, react_shared_contexts_1, react_1, react_tabster_1, use_disposable_1) {
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.usePortalMountNode = void 0;
|
|
5
|
-
|
|
6
|
-
var useInsertionEffect = React['useInsertion' + 'Effect']
|
|
7
|
-
? React['useInsertion' + 'Effect']
|
|
8
|
-
: react_utilities_1.useIsomorphicLayoutEffect;
|
|
5
|
+
var useInsertionEffect = React['useInsertion' + 'Effect'];
|
|
9
6
|
var useStyles = react_1.makeStyles({
|
|
10
7
|
root: {
|
|
11
8
|
position: 'relative',
|
|
12
9
|
zIndex: 1000000,
|
|
13
10
|
},
|
|
14
11
|
});
|
|
12
|
+
var reactMajorVersion = Number(React.version.split('.')[0]);
|
|
15
13
|
/**
|
|
16
14
|
* Creates a new element on a document.body to mount portals
|
|
17
15
|
*/
|
|
@@ -29,25 +27,40 @@ define(["require", "exports", "react", "@fluentui/react-shared-contexts", "@grif
|
|
|
29
27
|
targetDocument.body.appendChild(newElement);
|
|
30
28
|
return [newElement, function () { return newElement.remove(); }];
|
|
31
29
|
}, [targetDocument]);
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
// after initial mount can trigger interesting CSS side effects like transitions.
|
|
36
|
-
useInsertionEffect(function () {
|
|
37
|
-
var _a;
|
|
38
|
-
if (!element) {
|
|
39
|
-
return;
|
|
40
|
-
}
|
|
41
|
-
var classesToApply = className.split(' ').filter(Boolean);
|
|
42
|
-
(_a = element.classList).add.apply(_a, classesToApply);
|
|
43
|
-
element.setAttribute('dir', dir);
|
|
44
|
-
focusVisibleRef.current = element;
|
|
45
|
-
return function () {
|
|
30
|
+
if (reactMajorVersion >= 18) {
|
|
31
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
32
|
+
useInsertionEffect(function () {
|
|
46
33
|
var _a;
|
|
47
|
-
(
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
34
|
+
if (!element) {
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
var classesToApply = className.split(' ').filter(Boolean);
|
|
38
|
+
(_a = element.classList).add.apply(_a, classesToApply);
|
|
39
|
+
element.setAttribute('dir', dir);
|
|
40
|
+
focusVisibleRef.current = element;
|
|
41
|
+
return function () {
|
|
42
|
+
var _a;
|
|
43
|
+
(_a = element.classList).remove.apply(_a, classesToApply);
|
|
44
|
+
element.removeAttribute('dir');
|
|
45
|
+
};
|
|
46
|
+
}, [className, dir, element, focusVisibleRef]);
|
|
47
|
+
}
|
|
48
|
+
else {
|
|
49
|
+
// This useMemo call is intentional for React 17
|
|
50
|
+
// We don't want to re-create the portal element when its attributes change.
|
|
51
|
+
// This also should not be done in an effect because, changing the value of css variables
|
|
52
|
+
// after initial mount can trigger interesting CSS side effects like transitions.
|
|
53
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
54
|
+
React.useMemo(function () {
|
|
55
|
+
if (!element) {
|
|
56
|
+
return;
|
|
57
|
+
}
|
|
58
|
+
// Force replace all classes
|
|
59
|
+
element.className = className;
|
|
60
|
+
element.setAttribute('dir', dir);
|
|
61
|
+
focusVisibleRef.current = element;
|
|
62
|
+
}, [className, dir, element, focusVisibleRef]);
|
|
63
|
+
}
|
|
51
64
|
return element;
|
|
52
65
|
};
|
|
53
66
|
exports.usePortalMountNode = usePortalMountNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"usePortalMountNode.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-portal/src/components/Portal/usePortalMountNode.ts"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"usePortalMountNode.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-portal/src/components/Portal/usePortalMountNode.ts"],"names":[],"mappings":";;;;IASA,IAAM,kBAAkB,GAAI,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAiC,CAAC;IASvG,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,MAAM,EAAE,OAAO;SAChB;KACF,CAAC,CAAC;IAEH,IAAM,iBAAiB,GAAG,MAAM,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAE9D;;OAEG;IACI,IAAM,kBAAkB,GAAG,UAAC,OAAkC;QAC7D,IAAA,KAA0B,0CAAS,EAAE,EAAnC,cAAc,oBAAA,EAAE,GAAG,SAAgB,CAAC;QAC5C,IAAM,eAAe,GAAG,+BAAe,EAAgE,CAAC;QACxG,IAAM,OAAO,GAAG,SAAS,EAAE,CAAC;QAC5B,IAAM,cAAc,GAAG,kDAAiB,EAAE,CAAC;QAE3C,IAAM,SAAS,GAAG,oBAAY,CAAC,cAAc,EAAE,OAAO,CAAC,IAAI,CAAC,CAAC;QAE7D,IAAM,OAAO,GAAG,8BAAa,CAAC;YAC5B,IAAI,cAAc,KAAK,SAAS,IAAI,OAAO,CAAC,QAAQ,EAAE;gBACpD,OAAO,CAAC,IAAI,EAAE,cAAM,OAAA,IAAI,EAAJ,CAAI,CAAC,CAAC;aAC3B;YAED,IAAM,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;YACvD,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;YAC5C,OAAO,CAAC,UAAU,EAAE,cAAM,OAAA,UAAU,CAAC,MAAM,EAAE,EAAnB,CAAmB,CAAC,CAAC;QACjD,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;QAErB,IAAI,iBAAiB,IAAI,EAAE,EAAE;YAC3B,sDAAsD;YACtD,kBAAkB,CAAC;;gBACjB,IAAI,CAAC,OAAO,EAAE;oBACZ,OAAO;iBACR;gBAED,IAAM,cAAc,GAAG,SAAS,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;gBAE5D,CAAA,KAAA,OAAO,CAAC,SAAS,CAAA,CAAC,GAAG,WAAI,cAAc,EAAE;gBACzC,OAAO,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;gBACjC,eAAe,CAAC,OAAO,GAAG,OAAO,CAAC;gBAElC,OAAO;;oBACL,CAAA,KAAA,OAAO,CAAC,SAAS,CAAA,CAAC,MAAM,WAAI,cAAc,EAAE;oBAC5C,OAAO,CAAC,eAAe,CAAC,KAAK,CAAC,CAAC;gBACjC,CAAC,CAAC;YACJ,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC;SAChD;aAAM;YACL,gDAAgD;YAChD,4EAA4E;YAC5E,yFAAyF;YACzF,iFAAiF;YACjF,sDAAsD;YACtD,KAAK,CAAC,OAAO,CAAC;gBACZ,IAAI,CAAC,OAAO,EAAE;oBACZ,OAAO;iBACR;gBAED,4BAA4B;gBAC5B,OAAO,CAAC,SAAS,GAAG,SAAS,CAAC;gBAC9B,OAAO,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;gBACjC,eAAe,CAAC,OAAO,GAAG,OAAO,CAAC;YACpC,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC;SAChD;QAED,OAAO,OAAO,CAAC;IACjB,CAAC,CAAC;IAvDW,QAAA,kBAAkB,sBAuD7B","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;\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\nconst reactMajorVersion = Number(React.version.split('.')[0]);\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);\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 (reactMajorVersion >= 18) {\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"]}
|
|
@@ -9,9 +9,7 @@ const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-con
|
|
|
9
9
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
10
10
|
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
11
11
|
const use_disposable_1 = /*#__PURE__*/require("use-disposable");
|
|
12
|
-
const
|
|
13
|
-
// String concatenation is used to prevent bundlers to complain with older versions of React
|
|
14
|
-
const useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : react_utilities_1.useIsomorphicLayoutEffect;
|
|
12
|
+
const useInsertionEffect = React['useInsertion' + 'Effect'];
|
|
15
13
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
16
14
|
root: {
|
|
17
15
|
qhf8xq: "f10pi13n",
|
|
@@ -20,6 +18,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
20
18
|
}, {
|
|
21
19
|
d: [".f10pi13n{position:relative;}", ".f494woh{z-index:1000000;}"]
|
|
22
20
|
});
|
|
21
|
+
const reactMajorVersion = /*#__PURE__*/Number( /*#__PURE__*/React.version.split('.')[0]);
|
|
23
22
|
/**
|
|
24
23
|
* Creates a new element on a document.body to mount portals
|
|
25
24
|
*/
|
|
@@ -40,23 +39,37 @@ const usePortalMountNode = options => {
|
|
|
40
39
|
targetDocument.body.appendChild(newElement);
|
|
41
40
|
return [newElement, () => newElement.remove()];
|
|
42
41
|
}, [targetDocument]);
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
42
|
+
if (reactMajorVersion >= 18) {
|
|
43
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
44
|
+
useInsertionEffect(() => {
|
|
45
|
+
if (!element) {
|
|
46
|
+
return;
|
|
47
|
+
}
|
|
48
|
+
const classesToApply = className.split(' ').filter(Boolean);
|
|
49
|
+
element.classList.add(...classesToApply);
|
|
50
|
+
element.setAttribute('dir', dir);
|
|
51
|
+
focusVisibleRef.current = element;
|
|
52
|
+
return () => {
|
|
53
|
+
element.classList.remove(...classesToApply);
|
|
54
|
+
element.removeAttribute('dir');
|
|
55
|
+
};
|
|
56
|
+
}, [className, dir, element, focusVisibleRef]);
|
|
57
|
+
} else {
|
|
58
|
+
// This useMemo call is intentional for React 17
|
|
59
|
+
// We don't want to re-create the portal element when its attributes change.
|
|
60
|
+
// This also should not be done in an effect because, changing the value of css variables
|
|
61
|
+
// after initial mount can trigger interesting CSS side effects like transitions.
|
|
62
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
63
|
+
React.useMemo(() => {
|
|
64
|
+
if (!element) {
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
// Force replace all classes
|
|
68
|
+
element.className = className;
|
|
69
|
+
element.setAttribute('dir', dir);
|
|
70
|
+
focusVisibleRef.current = element;
|
|
71
|
+
}, [className, dir, element, focusVisibleRef]);
|
|
72
|
+
}
|
|
60
73
|
return element;
|
|
61
74
|
};
|
|
62
75
|
exports.usePortalMountNode = usePortalMountNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;AAIA;AACA;AACA;
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AAIA;AACA;AACA;AAEA,MAAMA,kBAAkB,GAAIC,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAiC;AAStG,MAAMC,SAAS,gBAAGC,gBAAU;EAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAK1B;AAEF,MAAMC,iBAAiB,gBAAGC,MAAM,CAAC,mBAAK,CAACC,OAAO,CAACC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC;AAE7D;;;AAGO,MAAMC,kBAAkB,GAAIC,OAAkC,IAAwB;EAC3F,MAAM;IAAEC,cAAc;IAAEC;EAAG,CAAE,GAAGC,0CAAS,EAAE;EAC3C,MAAMC,eAAe,GAAGC,+BAAe,EAAgE;EACvG,MAAMC,OAAO,GAAGb,SAAS,EAAE;EAC3B,MAAMc,cAAc,GAAGJ,kDAAiB,EAAE;EAE1C,MAAMK,SAAS,GAAGd,oBAAY,CAACa,cAAc,EAAED,OAAO,CAACG,IAAI,CAAC;EAE5D,MAAMC,OAAO,GAAGC,8BAAa,CAAC,MAAK;IACjC,IAAIV,cAAc,KAAKW,SAAS,IAAIZ,OAAO,CAACa,QAAQ,EAAE;MACpD,OAAO,CAAC,IAAI,EAAE,MAAM,IAAI,CAAC;;IAG3B,MAAMC,UAAU,GAAGb,cAAc,CAACc,aAAa,CAAC,KAAK,CAAC;IACtDd,cAAc,CAACe,IAAI,CAACC,WAAW,CAACH,UAAU,CAAC;IAC3C,OAAO,CAACA,UAAU,EAAE,MAAMA,UAAU,CAACI,MAAM,EAAE,CAAC;EAChD,CAAC,EAAE,CAACjB,cAAc,CAAC,CAAC;EAEpB,IAAIN,iBAAiB,IAAI,EAAE,EAAE;IAC3B;IACAJ,kBAAkB,CAAC,MAAK;MACtB,IAAI,CAACmB,OAAO,EAAE;QACZ;;MAGF,MAAMS,cAAc,GAAGX,SAAS,CAACV,KAAK,CAAC,GAAG,CAAC,CAACsB,MAAM,CAACC,OAAO,CAAC;MAE3DX,OAAO,CAACY,SAAS,CAACC,GAAG,CAAC,GAAGJ,cAAc,CAAC;MACxCT,OAAO,CAACc,YAAY,CAAC,KAAK,EAAEtB,GAAG,CAAC;MAChCE,eAAe,CAACqB,OAAO,GAAGf,OAAO;MAEjC,OAAO,MAAK;QACVA,OAAO,CAACY,SAAS,CAACJ,MAAM,CAAC,GAAGC,cAAc,CAAC;QAC3CT,OAAO,CAACgB,eAAe,CAAC,KAAK,CAAC;MAChC,CAAC;IACH,CAAC,EAAE,CAAClB,SAAS,EAAEN,GAAG,EAAEQ,OAAO,EAAEN,eAAe,CAAC,CAAC;GAC/C,MAAM;IACL;IACA;IACA;IACA;IACA;IACAZ,KAAK,CAACmC,OAAO,CAAC,MAAK;MACjB,IAAI,CAACjB,OAAO,EAAE;QACZ;;MAGF;MACAA,OAAO,CAACF,SAAS,GAAGA,SAAS;MAC7BE,OAAO,CAACc,YAAY,CAAC,KAAK,EAAEtB,GAAG,CAAC;MAChCE,eAAe,CAACqB,OAAO,GAAGf,OAAO;IACnC,CAAC,EAAE,CAACF,SAAS,EAAEN,GAAG,EAAEQ,OAAO,EAAEN,eAAe,CAAC,CAAC;;EAGhD,OAAOM,OAAO;AAChB,CAAC;AAvDYkB,0BAAkB","names":["useInsertionEffect","React","useStyles","react_1","reactMajorVersion","Number","version","split","usePortalMountNode","options","targetDocument","dir","react_shared_contexts_1","focusVisibleRef","react_tabster_1","classes","themeClassName","className","root","element","use_disposable_1","undefined","disabled","newElement","createElement","body","appendChild","remove","classesToApply","filter","Boolean","classList","add","setAttribute","current","removeAttribute","useMemo","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-portal/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;\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\nconst reactMajorVersion = Number(React.version.split('.')[0]);\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);\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 (reactMajorVersion >= 18) {\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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-portal",
|
|
3
|
-
"version": "9.1.
|
|
3
|
+
"version": "9.1.2",
|
|
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,7 +32,7 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@fluentui/react-shared-contexts": "^9.1.5",
|
|
35
|
-
"@fluentui/react-tabster": "^9.
|
|
35
|
+
"@fluentui/react-tabster": "^9.4.0",
|
|
36
36
|
"@fluentui/react-utilities": "^9.4.0",
|
|
37
37
|
"@griffel/react": "^1.5.2",
|
|
38
38
|
"tslib": "^2.1.0",
|