@fluentui/react-provider 0.0.0-nightly-20230103-0425.1 → 0.0.0-nightly-20230104-0423.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 +68 -13
- package/CHANGELOG.md +25 -9
- package/lib/components/FluentProvider/useFluentProviderStyles.js +9 -9
- package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js +12 -4
- package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.js +9 -9
- package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js +12 -4
- package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
- package/package.json +8 -8
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-provider",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-provider_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Wed, 04 Jan 2023 04:30:35 GMT",
|
|
6
|
+
"tag": "@fluentui/react-provider_v0.0.0-nightly-20230104-0423.1",
|
|
7
|
+
"version": "0.0.0-nightly-20230104-0423.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,32 +16,87 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-provider",
|
|
19
|
-
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230104-0423.1",
|
|
20
|
+
"commit": "2ba3617659ed1c7b46bf319505d49c1b6947d115"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-provider",
|
|
25
|
-
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20230104-0423.1",
|
|
26
|
+
"commit": "2ba3617659ed1c7b46bf319505d49c1b6947d115"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-provider",
|
|
31
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230104-0423.1",
|
|
32
|
+
"commit": "2ba3617659ed1c7b46bf319505d49c1b6947d115"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-provider",
|
|
37
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230104-0423.1",
|
|
38
|
+
"commit": "2ba3617659ed1c7b46bf319505d49c1b6947d115"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-provider",
|
|
43
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230104-0423.1",
|
|
44
|
+
"commit": "2ba3617659ed1c7b46bf319505d49c1b6947d115"
|
|
45
|
+
}
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"date": "Wed, 04 Jan 2023 01:40:23 GMT",
|
|
51
|
+
"tag": "@fluentui/react-provider_v9.2.0",
|
|
52
|
+
"version": "9.2.0",
|
|
53
|
+
"comments": {
|
|
54
|
+
"minor": [
|
|
55
|
+
{
|
|
56
|
+
"author": "olfedias@microsoft.com",
|
|
57
|
+
"package": "@fluentui/react-provider",
|
|
58
|
+
"commit": "5b9042fea309185404fb2c8b8986d46381af8241",
|
|
59
|
+
"comment": "feat: FluentProvider applies style attributes defined by a renderer from Griffel"
|
|
60
|
+
},
|
|
61
|
+
{
|
|
62
|
+
"author": "beachball",
|
|
63
|
+
"package": "@fluentui/react-provider",
|
|
64
|
+
"comment": "Bump @fluentui/react-tabster to v9.3.5",
|
|
65
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
"author": "beachball",
|
|
69
|
+
"package": "@fluentui/react-provider",
|
|
70
|
+
"comment": "Bump @fluentui/react-utilities to v9.3.1",
|
|
71
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
"author": "beachball",
|
|
75
|
+
"package": "@fluentui/react-provider",
|
|
76
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19",
|
|
77
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
78
|
+
}
|
|
79
|
+
],
|
|
80
|
+
"none": [
|
|
81
|
+
{
|
|
82
|
+
"author": "martinhochel@microsoft.com",
|
|
83
|
+
"package": "@fluentui/react-provider",
|
|
84
|
+
"commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
|
|
85
|
+
"comment": "chore(scripts): move index.ts to to follow sub-folder domain packaging"
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
"author": "martinhochel@microsoft.com",
|
|
89
|
+
"package": "@fluentui/react-provider",
|
|
90
|
+
"commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
|
|
91
|
+
"comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
|
|
92
|
+
}
|
|
93
|
+
],
|
|
94
|
+
"patch": [
|
|
95
|
+
{
|
|
96
|
+
"author": "olfedias@microsoft.com",
|
|
97
|
+
"package": "@fluentui/react-provider",
|
|
98
|
+
"commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
|
|
99
|
+
"comment": "chore: Update Griffel to latest version"
|
|
45
100
|
}
|
|
46
101
|
]
|
|
47
102
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,22 +1,38 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-provider
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 04 Jan 2023 04:30:35 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20230104-0423.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v0.0.0-nightly-20230104-0423.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.
|
|
9
|
+
Wed, 04 Jan 2023 04:30:35 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.2.0..@fluentui/react-provider_v0.0.0-nightly-20230104-0423.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-
|
|
16
|
-
- Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20230104-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/2ba3617659ed1c7b46bf319505d49c1b6947d115) by beachball)
|
|
16
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20230104-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/2ba3617659ed1c7b46bf319505d49c1b6947d115) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20230104-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/2ba3617659ed1c7b46bf319505d49c1b6947d115) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20230104-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/2ba3617659ed1c7b46bf319505d49c1b6947d115) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20230104-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/2ba3617659ed1c7b46bf319505d49c1b6947d115) by beachball)
|
|
20
|
+
|
|
21
|
+
## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.2.0)
|
|
22
|
+
|
|
23
|
+
Wed, 04 Jan 2023 01:40:23 GMT
|
|
24
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.1.11..@fluentui/react-provider_v9.2.0)
|
|
25
|
+
|
|
26
|
+
### Minor changes
|
|
27
|
+
|
|
28
|
+
- feat: FluentProvider applies style attributes defined by a renderer from Griffel ([PR #26046](https://github.com/microsoft/fluentui/pull/26046) by olfedias@microsoft.com)
|
|
29
|
+
- Bump @fluentui/react-tabster to v9.3.5 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
30
|
+
- Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
31
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
32
|
+
|
|
33
|
+
### Patches
|
|
34
|
+
|
|
35
|
+
- chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
|
|
20
36
|
|
|
21
37
|
## [9.1.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.1.11)
|
|
22
38
|
|
|
@@ -5,17 +5,17 @@ export const fluentProviderClassNames = {
|
|
|
5
5
|
root: 'fui-FluentProvider'
|
|
6
6
|
};
|
|
7
7
|
const useStyles = /*#__PURE__*/__styles({
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
8
|
+
root: {
|
|
9
|
+
sj55zd: "f19n0e5",
|
|
10
|
+
De3pzq: "fxugw4r",
|
|
11
|
+
fsow6f: ["f1o700av", "fes3tcz"],
|
|
12
|
+
Bahqtrf: "fk6fouc",
|
|
13
|
+
Be2twd7: "fkhj508",
|
|
14
|
+
Bhrd7zp: "figsok6",
|
|
15
|
+
Bg96gwp: "f1i3iumi"
|
|
16
16
|
}
|
|
17
17
|
}, {
|
|
18
|
-
|
|
18
|
+
d: [".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
|
|
19
19
|
});
|
|
20
20
|
/** Applies style classnames to slots */
|
|
21
21
|
export const useFluentProviderStyles_unstable = state => {
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
|
2
|
+
import { useRenderer_unstable } from '@griffel/react';
|
|
2
3
|
import * as React from 'react';
|
|
3
4
|
import { fluentProviderClassNames } from './useFluentProviderStyles';
|
|
4
5
|
// String concatenation is used to prevent bundlers to complain with older versions of React
|
|
5
6
|
const useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : useIsomorphicLayoutEffect;
|
|
6
|
-
const createStyleTag = (target,
|
|
7
|
+
const createStyleTag = (target, elementAttributes) => {
|
|
7
8
|
if (!target) {
|
|
8
9
|
return undefined;
|
|
9
10
|
}
|
|
10
11
|
const tag = target.createElement('style');
|
|
11
|
-
|
|
12
|
+
Object.keys(elementAttributes).forEach(attrName => {
|
|
13
|
+
tag.setAttribute(attrName, elementAttributes[attrName]);
|
|
14
|
+
});
|
|
12
15
|
target.head.appendChild(tag);
|
|
13
16
|
return tag;
|
|
14
17
|
};
|
|
@@ -34,8 +37,10 @@ export const useFluentProviderThemeStyleTag = options => {
|
|
|
34
37
|
targetDocument,
|
|
35
38
|
theme
|
|
36
39
|
} = options;
|
|
40
|
+
const renderer = useRenderer_unstable();
|
|
37
41
|
const styleTag = React.useRef();
|
|
38
42
|
const styleTagId = useId(fluentProviderClassNames.root);
|
|
43
|
+
const styleElementAttributes = renderer.styleElementAttributes;
|
|
39
44
|
const cssVarsAsString = React.useMemo(() => {
|
|
40
45
|
return theme ? Object.keys(theme).reduce((cssVarRule, cssVar) => {
|
|
41
46
|
cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;
|
|
@@ -44,7 +49,10 @@ export const useFluentProviderThemeStyleTag = options => {
|
|
|
44
49
|
}, [theme]);
|
|
45
50
|
const rule = `.${styleTagId} { ${cssVarsAsString} }`;
|
|
46
51
|
useInsertionEffect(() => {
|
|
47
|
-
styleTag.current = createStyleTag(targetDocument,
|
|
52
|
+
styleTag.current = createStyleTag(targetDocument, {
|
|
53
|
+
...styleElementAttributes,
|
|
54
|
+
id: styleTagId
|
|
55
|
+
});
|
|
48
56
|
if (styleTag.current) {
|
|
49
57
|
insertSheet(styleTag.current, rule);
|
|
50
58
|
return () => {
|
|
@@ -52,7 +60,7 @@ export const useFluentProviderThemeStyleTag = options => {
|
|
|
52
60
|
(_a = styleTag.current) === null || _a === void 0 ? void 0 : _a.remove();
|
|
53
61
|
};
|
|
54
62
|
}
|
|
55
|
-
}, [styleTagId, targetDocument, rule]);
|
|
63
|
+
}, [styleTagId, targetDocument, rule, styleElementAttributes]);
|
|
56
64
|
return styleTagId;
|
|
57
65
|
};
|
|
58
66
|
//# sourceMappingURL=useFluentProviderThemeStyleTag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,SAASA,KAAK,EAAEC,yBAAyB,QAAQ,2BAA2B;AAC5E,OAAO,KAAKC,KAAK,MAAM,OAAO;
|
|
1
|
+
{"version":3,"mappings":"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","names":["useId","useIsomorphicLayoutEffect","useRenderer_unstable","React","fluentProviderClassNames","useInsertionEffect","createStyleTag","target","elementAttributes","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","head","appendChild","insertSheet","rule","sheet","cssRules","length","deleteRule","insertRule","process","env","NODE_ENV","console","error","useFluentProviderThemeStyleTag","options","targetDocument","theme","renderer","styleTag","useRef","styleTagId","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","current","id","remove"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useRenderer_unstable } from '@griffel/react';\nimport * as React from 'react';\n\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n ? (React as never)['useInsertion' + 'Effect']\n : useIsomorphicLayoutEffect;\n\nconst createStyleTag = (target: Document | undefined, elementAttributes: Record<string, string>) => {\n if (!target) {\n return undefined;\n }\n\n const tag = target.createElement('style');\n\n Object.keys(elementAttributes).forEach(attrName => {\n tag.setAttribute(attrName, elementAttributes[attrName]);\n });\n\n target.head.appendChild(tag);\n return tag;\n};\n\nconst insertSheet = (tag: HTMLStyleElement, rule: string) => {\n const sheet = tag.sheet;\n\n if (sheet) {\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n sheet.insertRule(rule, 0);\n } else if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n }\n};\n\n/**\n * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n *\n * @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {\n const { targetDocument, theme } = options;\n\n const renderer = useRenderer_unstable();\n const styleTag = React.useRef<HTMLStyleElement>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\n const styleElementAttributes = renderer.styleElementAttributes;\n\n const cssVarsAsString = React.useMemo(() => {\n return theme\n ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '')\n : '';\n }, [theme]);\n\n const rule = `.${styleTagId} { ${cssVarsAsString} }`;\n\n useInsertionEffect(() => {\n styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n\n return () => {\n styleTag.current?.remove();\n };\n }\n }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n return styleTagId;\n};\n"]}
|
|
@@ -11,17 +11,17 @@ exports.fluentProviderClassNames = {
|
|
|
11
11
|
root: 'fui-FluentProvider'
|
|
12
12
|
};
|
|
13
13
|
const useStyles = /*#__PURE__*/core_1.__styles({
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
14
|
+
root: {
|
|
15
|
+
sj55zd: "f19n0e5",
|
|
16
|
+
De3pzq: "fxugw4r",
|
|
17
|
+
fsow6f: ["f1o700av", "fes3tcz"],
|
|
18
|
+
Bahqtrf: "fk6fouc",
|
|
19
|
+
Be2twd7: "fkhj508",
|
|
20
|
+
Bhrd7zp: "figsok6",
|
|
21
|
+
Bg96gwp: "f1i3iumi"
|
|
22
22
|
}
|
|
23
23
|
}, {
|
|
24
|
-
|
|
24
|
+
d: [".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
|
|
25
25
|
});
|
|
26
26
|
/** Applies style classnames to slots */
|
|
27
27
|
const useFluentProviderStyles_unstable = state => {
|
|
@@ -5,16 +5,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.useFluentProviderThemeStyleTag = void 0;
|
|
7
7
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
8
|
+
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
8
9
|
const React = /*#__PURE__*/require("react");
|
|
9
10
|
const useFluentProviderStyles_1 = /*#__PURE__*/require("./useFluentProviderStyles");
|
|
10
11
|
// String concatenation is used to prevent bundlers to complain with older versions of React
|
|
11
12
|
const useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : react_utilities_1.useIsomorphicLayoutEffect;
|
|
12
|
-
const createStyleTag = (target,
|
|
13
|
+
const createStyleTag = (target, elementAttributes) => {
|
|
13
14
|
if (!target) {
|
|
14
15
|
return undefined;
|
|
15
16
|
}
|
|
16
17
|
const tag = target.createElement('style');
|
|
17
|
-
|
|
18
|
+
Object.keys(elementAttributes).forEach(attrName => {
|
|
19
|
+
tag.setAttribute(attrName, elementAttributes[attrName]);
|
|
20
|
+
});
|
|
18
21
|
target.head.appendChild(tag);
|
|
19
22
|
return tag;
|
|
20
23
|
};
|
|
@@ -40,8 +43,10 @@ const useFluentProviderThemeStyleTag = options => {
|
|
|
40
43
|
targetDocument,
|
|
41
44
|
theme
|
|
42
45
|
} = options;
|
|
46
|
+
const renderer = react_1.useRenderer_unstable();
|
|
43
47
|
const styleTag = React.useRef();
|
|
44
48
|
const styleTagId = react_utilities_1.useId(useFluentProviderStyles_1.fluentProviderClassNames.root);
|
|
49
|
+
const styleElementAttributes = renderer.styleElementAttributes;
|
|
45
50
|
const cssVarsAsString = React.useMemo(() => {
|
|
46
51
|
return theme ? Object.keys(theme).reduce((cssVarRule, cssVar) => {
|
|
47
52
|
cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;
|
|
@@ -50,7 +55,10 @@ const useFluentProviderThemeStyleTag = options => {
|
|
|
50
55
|
}, [theme]);
|
|
51
56
|
const rule = `.${styleTagId} { ${cssVarsAsString} }`;
|
|
52
57
|
useInsertionEffect(() => {
|
|
53
|
-
styleTag.current = createStyleTag(targetDocument,
|
|
58
|
+
styleTag.current = createStyleTag(targetDocument, {
|
|
59
|
+
...styleElementAttributes,
|
|
60
|
+
id: styleTagId
|
|
61
|
+
});
|
|
54
62
|
if (styleTag.current) {
|
|
55
63
|
insertSheet(styleTag.current, rule);
|
|
56
64
|
return () => {
|
|
@@ -58,7 +66,7 @@ const useFluentProviderThemeStyleTag = options => {
|
|
|
58
66
|
(_a = styleTag.current) === null || _a === void 0 ? void 0 : _a.remove();
|
|
59
67
|
};
|
|
60
68
|
}
|
|
61
|
-
}, [styleTagId, targetDocument, rule]);
|
|
69
|
+
}, [styleTagId, targetDocument, rule, styleElementAttributes]);
|
|
62
70
|
return styleTagId;
|
|
63
71
|
};
|
|
64
72
|
exports.useFluentProviderThemeStyleTag = useFluentProviderThemeStyleTag;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAGA;AAEA;AACA,MAAMA,kBAAkB,GAAIC,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC,GACjEA,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC,GAC3CC,2CAAyB;AAE7B,MAAMC,cAAc,GAAG,CAACC,MAA4B,EAAEC,iBAAyC,KAAI;EACjG,IAAI,CAACD,MAAM,EAAE;IACX,OAAOE,SAAS;;EAGlB,MAAMC,GAAG,GAAGH,MAAM,CAACI,aAAa,CAAC,OAAO,CAAC;EAEzCC,MAAM,CAACC,IAAI,CAACL,iBAAiB,CAAC,CAACM,OAAO,CAACC,QAAQ,IAAG;IAChDL,GAAG,CAACM,YAAY,CAACD,QAAQ,EAAEP,iBAAiB,CAACO,QAAQ,CAAC,CAAC;EACzD,CAAC,CAAC;EAEFR,MAAM,CAACU,IAAI,CAACC,WAAW,CAACR,GAAG,CAAC;EAC5B,OAAOA,GAAG;AACZ,CAAC;AAED,MAAMS,WAAW,GAAG,CAACT,GAAqB,EAAEU,IAAY,KAAI;EAC1D,MAAMC,KAAK,GAAGX,GAAG,CAACW,KAAK;EAEvB,IAAIA,KAAK,EAAE;IACT,IAAIA,KAAK,CAACC,QAAQ,CAACC,MAAM,GAAG,CAAC,EAAE;MAC7BF,KAAK,CAACG,UAAU,CAAC,CAAC,CAAC;;IAErBH,KAAK,CAACI,UAAU,CAACL,IAAI,EAAE,CAAC,CAAC;GAC1B,MAAM,IAAIM,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IAChD;IACAC,OAAO,CAACC,KAAK,CAAC,uFAAuF,CAAC;;AAE1G,CAAC;AAED;;;;;AAKO,MAAMC,8BAA8B,GAAIC,OAA8D,IAAI;EAC/G,MAAM;IAAEC,cAAc;IAAEC;EAAK,CAAE,GAAGF,OAAO;EAEzC,MAAMG,QAAQ,GAAGC,4BAAoB,EAAE;EACvC,MAAMC,QAAQ,GAAGjC,KAAK,CAACkC,MAAM,EAAoB;EAEjD,MAAMC,UAAU,GAAGlC,uBAAK,CAACmC,kDAAwB,CAACC,IAAI,CAAC;EACvD,MAAMC,sBAAsB,GAAGP,QAAQ,CAACO,sBAAsB;EAE9D,MAAMC,eAAe,GAAGvC,KAAK,CAACwC,OAAO,CAAC,MAAK;IACzC,OAAOV,KAAK,GACPtB,MAAM,CAACC,IAAI,CAACqB,KAAK,CAA4B,CAACW,MAAM,CAAC,CAACC,UAAU,EAAEC,MAAM,KAAI;MAC3ED,UAAU,IAAI,KAAKC,MAAM,KAAKb,KAAK,CAACa,MAAM,CAAC,IAAI;MAC/C,OAAOD,UAAU;IACnB,CAAC,EAAE,EAAE,CAAC,GACN,EAAE;EACR,CAAC,EAAE,CAACZ,KAAK,CAAC,CAAC;EAEX,MAAMd,IAAI,GAAG,IAAImB,UAAU,MAAMI,eAAe,IAAI;EAEpDxC,kBAAkB,CAAC,MAAK;IACtBkC,QAAQ,CAACW,OAAO,GAAG1C,cAAc,CAAC2B,cAAc,EAAE;MAAE,GAAGS,sBAAsB;MAAEO,EAAE,EAAEV;IAAU,CAAE,CAAC;IAEhG,IAAIF,QAAQ,CAACW,OAAO,EAAE;MACpB7B,WAAW,CAACkB,QAAQ,CAACW,OAAO,EAAE5B,IAAI,CAAC;MAEnC,OAAO,MAAK;;QACV,cAAQ,CAAC4B,OAAO,0CAAEE,MAAM,EAAE;MAC5B,CAAC;;EAEL,CAAC,EAAE,CAACX,UAAU,EAAEN,cAAc,EAAEb,IAAI,EAAEsB,sBAAsB,CAAC,CAAC;EAE9D,OAAOH,UAAU;AACnB,CAAC;AAjCYY,sCAA8B","names":["useInsertionEffect","React","react_utilities_1","createStyleTag","target","elementAttributes","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","head","appendChild","insertSheet","rule","sheet","cssRules","length","deleteRule","insertRule","process","env","NODE_ENV","console","error","useFluentProviderThemeStyleTag","options","targetDocument","theme","renderer","react_1","styleTag","useRef","styleTagId","useFluentProviderStyles_1","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","current","id","remove","exports"],"sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useRenderer_unstable } from '@griffel/react';\nimport * as React from 'react';\n\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n ? (React as never)['useInsertion' + 'Effect']\n : useIsomorphicLayoutEffect;\n\nconst createStyleTag = (target: Document | undefined, elementAttributes: Record<string, string>) => {\n if (!target) {\n return undefined;\n }\n\n const tag = target.createElement('style');\n\n Object.keys(elementAttributes).forEach(attrName => {\n tag.setAttribute(attrName, elementAttributes[attrName]);\n });\n\n target.head.appendChild(tag);\n return tag;\n};\n\nconst insertSheet = (tag: HTMLStyleElement, rule: string) => {\n const sheet = tag.sheet;\n\n if (sheet) {\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n sheet.insertRule(rule, 0);\n } else if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n }\n};\n\n/**\n * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n *\n * @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {\n const { targetDocument, theme } = options;\n\n const renderer = useRenderer_unstable();\n const styleTag = React.useRef<HTMLStyleElement>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\n const styleElementAttributes = renderer.styleElementAttributes;\n\n const cssVarsAsString = React.useMemo(() => {\n return theme\n ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '')\n : '';\n }, [theme]);\n\n const rule = `.${styleTagId} { ${cssVarsAsString} }`;\n\n useInsertionEffect(() => {\n styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n\n return () => {\n styleTag.current?.remove();\n };\n }\n }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n return styleTagId;\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-provider",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20230104-0423.1",
|
|
4
4
|
"description": "Fluent UI React provider component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,16 +27,16 @@
|
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
|
29
29
|
"@fluentui/react-conformance": "*",
|
|
30
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
30
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20230104-0423.1",
|
|
31
31
|
"@fluentui/scripts": "*"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@griffel/core": "^1.
|
|
35
|
-
"@griffel/react": "^1.
|
|
36
|
-
"@fluentui/react-shared-contexts": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
34
|
+
"@griffel/core": "^1.9.0",
|
|
35
|
+
"@griffel/react": "^1.5.2",
|
|
36
|
+
"@fluentui/react-shared-contexts": "0.0.0-nightly-20230104-0423.1",
|
|
37
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20230104-0423.1",
|
|
38
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230104-0423.1",
|
|
39
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230104-0423.1",
|
|
40
40
|
"tslib": "^2.1.0"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|