@fluentui/react-provider 9.0.3 → 9.1.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 +105 -3
- package/CHANGELOG.md +34 -4
- package/lib/components/FluentProvider/useFluentProvider.js +2 -2
- package/lib/components/FluentProvider/useFluentProvider.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js +46 -40
- package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProvider.js +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProvider.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js +45 -39
- package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
- package/package.json +12 -11
- package/dist/tsdoc-metadata.json +0 -11
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,109 @@
|
|
|
2
2
|
"name": "@fluentui/react-provider",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "Thu,
|
|
5
|
+
"date": "Thu, 15 Sep 2022 09:44:39 GMT",
|
|
6
|
+
"tag": "@fluentui/react-provider_v9.1.1",
|
|
7
|
+
"version": "9.1.1",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "olfedias@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-provider",
|
|
13
|
+
"commit": "e610024474cfe5d45f61501a8b6a21daf4c794a2",
|
|
14
|
+
"comment": "chore: Update Griffel to latest version"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-provider",
|
|
19
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.1",
|
|
20
|
+
"commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-provider",
|
|
25
|
+
"comment": "Bump @fluentui/react-tabster to v9.1.1",
|
|
26
|
+
"commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-provider",
|
|
31
|
+
"comment": "Bump @fluentui/react-theme to v9.1.0",
|
|
32
|
+
"commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-provider",
|
|
37
|
+
"comment": "Bump @fluentui/react-utilities to v9.1.0",
|
|
38
|
+
"commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-provider",
|
|
43
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13",
|
|
44
|
+
"commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
|
|
45
|
+
}
|
|
46
|
+
],
|
|
47
|
+
"none": [
|
|
48
|
+
{
|
|
49
|
+
"author": "martinhochel@microsoft.com",
|
|
50
|
+
"package": "@fluentui/react-provider",
|
|
51
|
+
"commit": "e6cf183695d6d67a24e038c49a876224e5ed35e5",
|
|
52
|
+
"comment": "chore: update package scaffold"
|
|
53
|
+
}
|
|
54
|
+
]
|
|
55
|
+
}
|
|
56
|
+
},
|
|
57
|
+
{
|
|
58
|
+
"date": "Wed, 03 Aug 2022 16:03:56 GMT",
|
|
59
|
+
"tag": "@fluentui/react-provider_v9.1.0",
|
|
60
|
+
"version": "9.1.0",
|
|
61
|
+
"comments": {
|
|
62
|
+
"none": [
|
|
63
|
+
{
|
|
64
|
+
"author": "lingfangao@hotmail.com",
|
|
65
|
+
"package": "@fluentui/react-provider",
|
|
66
|
+
"commit": "99cc385631d04a76ee10ebc143cb9fecd99640b6",
|
|
67
|
+
"comment": "chore: Add `prerelease` as disallowed changetype for 9.0.0 packages"
|
|
68
|
+
}
|
|
69
|
+
],
|
|
70
|
+
"patch": [
|
|
71
|
+
{
|
|
72
|
+
"author": "lingfangao@hotmail.com",
|
|
73
|
+
"package": "@fluentui/react-provider",
|
|
74
|
+
"commit": "71590ea6aeab8ce24d8c8e50e0ee80ece81a4392",
|
|
75
|
+
"comment": "fix: use `useFocusVisible` hook for :focus-visible styles"
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
"author": "miroslav.stastny@microsoft.com",
|
|
79
|
+
"package": "@fluentui/react-provider",
|
|
80
|
+
"commit": "08563664778fd80284561d3c9d254307a0a32362",
|
|
81
|
+
"comment": "chore: Bump Griffel dependencies"
|
|
82
|
+
}
|
|
83
|
+
],
|
|
84
|
+
"minor": [
|
|
85
|
+
{
|
|
86
|
+
"author": "mgodbolt@microsoft.com",
|
|
87
|
+
"package": "@fluentui/react-provider",
|
|
88
|
+
"commit": "76f5c61c1bce0d606264f6a10dfa523de98b937e",
|
|
89
|
+
"comment": "fix: Move to useLayoutEffect or useInsertionEffect for Theme Provider theme insertion."
|
|
90
|
+
},
|
|
91
|
+
{
|
|
92
|
+
"author": "beachball",
|
|
93
|
+
"package": "@fluentui/react-provider",
|
|
94
|
+
"comment": "Bump @fluentui/react-tabster to v9.1.0",
|
|
95
|
+
"commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"author": "beachball",
|
|
99
|
+
"package": "@fluentui/react-provider",
|
|
100
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
|
|
101
|
+
"commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
|
|
102
|
+
}
|
|
103
|
+
]
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
"date": "Thu, 14 Jul 2022 21:21:03 GMT",
|
|
6
108
|
"tag": "@fluentui/react-provider_v9.0.3",
|
|
7
109
|
"version": "9.0.3",
|
|
8
110
|
"comments": {
|
|
@@ -17,13 +119,13 @@
|
|
|
17
119
|
"author": "beachball",
|
|
18
120
|
"package": "@fluentui/react-provider",
|
|
19
121
|
"comment": "Bump @fluentui/react-tabster to v9.0.3",
|
|
20
|
-
"commit": "
|
|
122
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
|
21
123
|
},
|
|
22
124
|
{
|
|
23
125
|
"author": "beachball",
|
|
24
126
|
"package": "@fluentui/react-provider",
|
|
25
127
|
"comment": "Bump @fluentui/react-utilities to v9.0.2",
|
|
26
|
-
"commit": "
|
|
128
|
+
"commit": "79b513146194367544160f364b0a7dd749ed93e4"
|
|
27
129
|
}
|
|
28
130
|
]
|
|
29
131
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,19 +1,49 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-provider
|
|
2
2
|
|
|
3
|
-
This log was last generated on Thu,
|
|
3
|
+
This log was last generated on Thu, 15 Sep 2022 09:44:39 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.1.1)
|
|
8
|
+
|
|
9
|
+
Thu, 15 Sep 2022 09:44:39 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.1.0..@fluentui/react-provider_v9.1.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- chore: Update Griffel to latest version ([PR #24221](https://github.com/microsoft/fluentui/pull/24221) by olfedias@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-shared-contexts to v9.0.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
|
16
|
+
- Bump @fluentui/react-tabster to v9.1.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
|
19
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
|
|
20
|
+
|
|
21
|
+
## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.1.0)
|
|
22
|
+
|
|
23
|
+
Wed, 03 Aug 2022 16:03:56 GMT
|
|
24
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.0.3..@fluentui/react-provider_v9.1.0)
|
|
25
|
+
|
|
26
|
+
### Minor changes
|
|
27
|
+
|
|
28
|
+
- fix: Move to useLayoutEffect or useInsertionEffect for Theme Provider theme insertion. ([PR #24061](https://github.com/microsoft/fluentui/pull/24061) by mgodbolt@microsoft.com)
|
|
29
|
+
- Bump @fluentui/react-tabster to v9.1.0 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
|
|
30
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
|
|
31
|
+
|
|
32
|
+
### Patches
|
|
33
|
+
|
|
34
|
+
- fix: use `useFocusVisible` hook for :focus-visible styles ([PR #24154](https://github.com/microsoft/fluentui/pull/24154) by lingfangao@hotmail.com)
|
|
35
|
+
- chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
|
|
36
|
+
|
|
7
37
|
## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.0.3)
|
|
8
38
|
|
|
9
|
-
Thu, 14 Jul 2022 21:
|
|
39
|
+
Thu, 14 Jul 2022 21:21:03 GMT
|
|
10
40
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.0.2..@fluentui/react-provider_v9.0.3)
|
|
11
41
|
|
|
12
42
|
### Patches
|
|
13
43
|
|
|
14
44
|
- fix: Fixing bad version bump of @fluentui/react-utilities. ([PR #23920](https://github.com/microsoft/fluentui/pull/23920) by Humberto.Morimoto@microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-tabster to v9.0.3 ([PR #
|
|
16
|
-
- Bump @fluentui/react-utilities to v9.0.2 ([PR #
|
|
45
|
+
- Bump @fluentui/react-tabster to v9.0.3 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
46
|
+
- Bump @fluentui/react-utilities to v9.0.2 ([PR #23918](https://github.com/microsoft/fluentui/pull/23918) by beachball)
|
|
17
47
|
|
|
18
48
|
## [9.0.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.0.2)
|
|
19
49
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { useFocusVisible } from '@fluentui/react-tabster';
|
|
2
2
|
import { ThemeContext_unstable as ThemeContext, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
3
3
|
import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
|
|
4
4
|
import * as React from 'react';
|
|
@@ -52,7 +52,7 @@ export const useFluentProvider_unstable = (props, ref) => {
|
|
|
52
52
|
},
|
|
53
53
|
root: getNativeElementProps('div', { ...props,
|
|
54
54
|
dir,
|
|
55
|
-
ref: useMergedRefs(ref,
|
|
55
|
+
ref: useMergedRefs(ref, useFocusVisible())
|
|
56
56
|
})
|
|
57
57
|
};
|
|
58
58
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":"AAAA,SAAS,
|
|
1
|
+
{"version":3,"sources":["components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":"AAAA,SAAS,eAAT,QAAgC,yBAAhC;AACA,SACE,qBAAqB,IAAI,YAD3B,EAEE,kBAAkB,IAAI,SAFxB,QAGO,iCAHP;AAKA,SAAS,qBAAT,EAAgC,aAAhC,QAAqD,2BAArD;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,8BAAT,QAA+C,kCAA/C;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;EACvB,MAAM,aAAa,GAAG,SAAS,EAA/B;EACA,MAAM,WAAW,GAAG,QAAQ,EAA5B;EAEA;;;;AAIG;;EACH,MAAM;IAAE,GAAG,GAAG,aAAa,CAAC,GAAtB;IAA2B,cAAc,GAAG,aAAa,CAAC,cAA1D;IAA0E;EAA1E,IAAoF,KAA1F;EACA,MAAM,WAAW,GAAG,WAAW,CAAC,WAAD,EAAc,KAAd,CAA/B;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,IAAyC,WAAW,KAAK,SAA7D,EAAwE;MACtE;MACA,OAAO,CAAC,IAAR,CAAa;;;;AAIZ,OAJD;IAKD,CARkB,CASnB;;EACD,CAVD,EAUG,EAVH;EAYA,OAAO;IACL,GADK;IAEL,cAFK;IAGL,KAAK,EAAE,WAHF;IAIL,cAAc,EAAE,8BAA8B,CAAC;MAAE,KAAK,EAAE,WAAT;MAAsB;IAAtB,CAAD,CAJzC;IAML,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CANP;IAUL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ,EACjC,GAAG,KAD8B;MAEjC,GAFiC;MAGjC,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,eAAe,EAArB;IAHe,CAAR;EAVtB,CAAP;AAgBD,CA3CM;;AA6CP,SAAS,WAAT,CAAqB,CAArB,EAA2C,CAA3C,EAA+D;EAC7D;EACA,IAAI,CAAC,IAAI,CAAT,EAAY;IACV,OAAO,EAAE,GAAG,CAAL;MAAQ,GAAG;IAAX,CAAP;EACD;;EAED,IAAI,CAAJ,EAAO;IACL,OAAO,CAAP;EACD;;EAED,OAAO,CAAP;AACD;;AAED,SAAS,QAAT,GAAiB;EACf,OAAO,KAAK,CAAC,UAAN,CAAiB,YAAjB,CAAP;AACD","sourcesContent":["import { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n ThemeContext_unstable as ThemeContext,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport type { ThemeContextValue_unstable as ThemeContextValue } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */\nexport const useFluentProvider_unstable = (\n props: FluentProviderProps,\n ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n const parentContext = useFluent();\n const parentTheme = useTheme();\n\n /**\n * TODO: add merge functions to \"dir\" merge,\n * nesting providers with the same \"dir\" should not add additional attributes to DOM\n * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93\n */\n const { dir = parentContext.dir, targetDocument = parentContext.targetDocument, theme } = props;\n const mergedTheme = mergeThemes(parentTheme, theme);\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {\n // eslint-disable-next-line no-console\n console.warn(`\n FluentProvider: your \"theme\" is not defined !\n =============================================\n Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.\n `);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return {\n dir,\n targetDocument,\n theme: mergedTheme,\n themeClassName: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),\n\n components: {\n root: 'div',\n },\n\n root: getNativeElementProps('div', {\n ...props,\n dir,\n ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>()),\n }),\n };\n};\n\nfunction mergeThemes(a: ThemeContextValue, b: ThemeContextValue): ThemeContextValue {\n // Merge impacts perf: we should like to avoid it if it's possible\n if (a && b) {\n return { ...a, ...b };\n }\n\n if (a) {\n return a;\n }\n\n return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n return React.useContext(ThemeContext);\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -1,61 +1,67 @@
|
|
|
1
|
-
import { useId,
|
|
1
|
+
import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { fluentProviderClassNames } from './useFluentProviderStyles';
|
|
3
|
+
import { fluentProviderClassNames } from './useFluentProviderStyles'; // String concatenation is used to prevent bundlers to complain with older versions of React
|
|
4
|
+
|
|
5
|
+
const useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : useIsomorphicLayoutEffect;
|
|
6
|
+
|
|
7
|
+
const createStyleTag = (target, id) => {
|
|
8
|
+
if (!target) {
|
|
9
|
+
return undefined;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
const tag = target.createElement('style');
|
|
13
|
+
tag.setAttribute('id', id);
|
|
14
|
+
target.head.appendChild(tag);
|
|
15
|
+
return tag;
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
const insertSheet = (tag, rule) => {
|
|
19
|
+
const sheet = tag.sheet;
|
|
20
|
+
|
|
21
|
+
if (sheet) {
|
|
22
|
+
if (sheet.cssRules.length > 0) {
|
|
23
|
+
sheet.deleteRule(0);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
sheet.insertRule(rule, 0);
|
|
27
|
+
} else if (process.env.NODE_ENV !== 'production') {
|
|
28
|
+
// eslint-disable-next-line no-console
|
|
29
|
+
console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');
|
|
30
|
+
}
|
|
31
|
+
};
|
|
4
32
|
/**
|
|
5
33
|
* Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
|
|
6
34
|
*
|
|
7
35
|
* @returns CSS class to apply the rule
|
|
8
36
|
*/
|
|
9
37
|
|
|
38
|
+
|
|
10
39
|
export const useFluentProviderThemeStyleTag = options => {
|
|
11
40
|
const {
|
|
12
41
|
targetDocument,
|
|
13
42
|
theme
|
|
14
43
|
} = options;
|
|
44
|
+
const styleTag = React.useRef();
|
|
15
45
|
const styleTagId = useId(fluentProviderClassNames.root);
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
return null;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
const tag = targetDocument.createElement('style');
|
|
22
|
-
tag.setAttribute('id', styleTagId);
|
|
23
|
-
targetDocument.head.appendChild(tag);
|
|
24
|
-
return tag;
|
|
25
|
-
}, [styleTagId, targetDocument]);
|
|
26
|
-
const cssRule = React.useMemo(() => {
|
|
27
|
-
const cssVarsAsString = theme ? Object.keys(theme).reduce((cssVarRule, cssVar) => {
|
|
46
|
+
const cssVarsAsString = React.useMemo(() => {
|
|
47
|
+
return theme ? Object.keys(theme).reduce((cssVarRule, cssVar) => {
|
|
28
48
|
cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;
|
|
29
49
|
return cssVarRule;
|
|
30
|
-
}, '') : '';
|
|
50
|
+
}, '') : '';
|
|
51
|
+
}, [theme]);
|
|
52
|
+
const rule = `.${styleTagId} { ${cssVarsAsString} }`;
|
|
53
|
+
useInsertionEffect(() => {
|
|
54
|
+
styleTag.current = createStyleTag(targetDocument, styleTagId);
|
|
31
55
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
56
|
+
if (styleTag.current) {
|
|
57
|
+
insertSheet(styleTag.current, rule);
|
|
58
|
+
return () => {
|
|
59
|
+
var _a;
|
|
35
60
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
if (sheet) {
|
|
40
|
-
if (sheet.cssRules.length > 0) {
|
|
41
|
-
sheet.deleteRule(0);
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
sheet.insertRule(cssRule, 0);
|
|
45
|
-
} else if (process.env.NODE_ENV !== 'production') {
|
|
46
|
-
// eslint-disable-next-line no-console
|
|
47
|
-
console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');
|
|
61
|
+
(_a = styleTag.current) === null || _a === void 0 ? void 0 : _a.remove();
|
|
62
|
+
};
|
|
48
63
|
}
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
React.useEffect(() => {
|
|
53
|
-
return () => {
|
|
54
|
-
if (styleTag) {
|
|
55
|
-
styleTag.remove();
|
|
56
|
-
}
|
|
57
|
-
};
|
|
58
|
-
}, [styleTag]);
|
|
64
|
+
}, [styleTagId, targetDocument, rule]);
|
|
59
65
|
return styleTagId;
|
|
60
66
|
};
|
|
61
67
|
//# sourceMappingURL=useFluentProviderThemeStyleTag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,
|
|
1
|
+
{"version":3,"sources":["components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,yBAAhB,QAAiD,2BAAjD;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,wBAAT,QAAyC,2BAAzC,C,CAEA;;AACA,MAAM,kBAAkB,GAAI,KAAe,CAAC,iBAAiB,QAAlB,CAAf,GACvB,KAAe,CAAC,iBAAiB,QAAlB,CADQ,GAExB,yBAFJ;;AAIA,MAAM,cAAc,GAAG,CAAC,MAAD,EAA+B,EAA/B,KAA6C;EAClE,IAAI,CAAC,MAAL,EAAa;IACX,OAAO,SAAP;EACD;;EACD,MAAM,GAAG,GAAG,MAAM,CAAC,aAAP,CAAqB,OAArB,CAAZ;EACA,GAAG,CAAC,YAAJ,CAAiB,IAAjB,EAAuB,EAAvB;EACA,MAAM,CAAC,IAAP,CAAY,WAAZ,CAAwB,GAAxB;EACA,OAAO,GAAP;AACD,CARD;;AAUA,MAAM,WAAW,GAAG,CAAC,GAAD,EAAwB,IAAxB,KAAwC;EAC1D,MAAM,KAAK,GAAG,GAAG,CAAC,KAAlB;;EAEA,IAAI,KAAJ,EAAW;IACT,IAAI,KAAK,CAAC,QAAN,CAAe,MAAf,GAAwB,CAA5B,EAA+B;MAC7B,KAAK,CAAC,UAAN,CAAiB,CAAjB;IACD;;IACD,KAAK,CAAC,UAAN,CAAiB,IAAjB,EAAuB,CAAvB;EACD,CALD,MAKO,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;IAChD;IACA,OAAO,CAAC,KAAR,CAAc,uFAAd;EACD;AACF,CAZD;AAcA;;;;AAIG;;;AACH,OAAO,MAAM,8BAA8B,GAAI,OAAD,IAAmE;EAC/G,MAAM;IAAE,cAAF;IAAkB;EAAlB,IAA4B,OAAlC;EACA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,EAAjB;EAEA,MAAM,UAAU,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAA1B,CAAxB;EAEA,MAAM,eAAe,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IACzC,OAAO,KAAK,GACP,MAAM,CAAC,IAAP,CAAY,KAAZ,EAA8C,MAA9C,CAAqD,CAAC,UAAD,EAAa,MAAb,KAAuB;MAC3E,UAAU,IAAI,KAAK,MAAM,KAAK,KAAK,CAAC,MAAD,CAAQ,IAA3C;MACA,OAAO,UAAP;IACD,CAHA,EAGE,EAHF,CADO,GAKR,EALJ;EAMD,CAPuB,EAOrB,CAAC,KAAD,CAPqB,CAAxB;EASA,MAAM,IAAI,GAAG,IAAI,UAAU,MAAM,eAAe,IAAhD;EAEA,kBAAkB,CAAC,MAAK;IACtB,QAAQ,CAAC,OAAT,GAAmB,cAAc,CAAC,cAAD,EAAiB,UAAjB,CAAjC;;IAEA,IAAI,QAAQ,CAAC,OAAb,EAAsB;MACpB,WAAW,CAAC,QAAQ,CAAC,OAAV,EAAmB,IAAnB,CAAX;MAEA,OAAO,MAAK;;;QACV,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAT,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAE,MAAF,EAAhB;MACD,CAFD;IAGD;EACF,CAViB,EAUf,CAAC,UAAD,EAAa,cAAb,EAA6B,IAA7B,CAVe,CAAlB;EAYA,OAAO,UAAP;AACD,CA9BM","sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\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, id: string) => {\n if (!target) {\n return undefined;\n }\n const tag = target.createElement('style');\n tag.setAttribute('id', id);\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 const styleTag = React.useRef<HTMLStyleElement>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\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, styleTagId);\n\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n\n return () => {\n styleTag.current?.remove();\n };\n }\n }, [styleTagId, targetDocument, rule]);\n\n return styleTagId;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -64,7 +64,7 @@ const useFluentProvider_unstable = (props, ref) => {
|
|
|
64
64
|
},
|
|
65
65
|
root: react_utilities_1.getNativeElementProps('div', { ...props,
|
|
66
66
|
dir,
|
|
67
|
-
ref: react_utilities_1.useMergedRefs(ref, react_tabster_1.
|
|
67
|
+
ref: react_utilities_1.useMergedRefs(ref, react_tabster_1.useFocusVisible())
|
|
68
68
|
})
|
|
69
69
|
};
|
|
70
70
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAKA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gCAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;EACvB,MAAM,aAAa,GAAG,uBAAA,CAAA,kBAAA,EAAtB;EACA,MAAM,WAAW,GAAG,QAAQ,EAA5B;EAEA;;;;AAIG;;EACH,MAAM;IAAE,GAAG,GAAG,aAAa,CAAC,GAAtB;IAA2B,cAAc,GAAG,aAAa,CAAC,cAA1D;IAA0E;EAA1E,IAAoF,KAA1F;EACA,MAAM,WAAW,GAAG,WAAW,CAAC,WAAD,EAAc,KAAd,CAA/B;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,IAAyC,WAAW,KAAK,SAA7D,EAAwE;MACtE;MACA,OAAO,CAAC,IAAR,CAAa;;;;AAIZ,OAJD;IAKD,CARkB,CASnB;;EACD,CAVD,EAUG,EAVH;EAYA,OAAO;IACL,GADK;IAEL,cAFK;IAGL,KAAK,EAAE,WAHF;IAIL,cAAc,EAAE,gCAAA,CAAA,8BAAA,CAA+B;MAAE,KAAK,EAAE,WAAT;MAAsB;IAAtB,CAA/B,CAJX;IAML,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CANP;IAUL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,EACjC,GAAG,KAD8B;MAEjC,GAFiC;MAGjC,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,eAAA,CAAA,
|
|
1
|
+
{"version":3,"sources":["components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAKA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gCAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;EACvB,MAAM,aAAa,GAAG,uBAAA,CAAA,kBAAA,EAAtB;EACA,MAAM,WAAW,GAAG,QAAQ,EAA5B;EAEA;;;;AAIG;;EACH,MAAM;IAAE,GAAG,GAAG,aAAa,CAAC,GAAtB;IAA2B,cAAc,GAAG,aAAa,CAAC,cAA1D;IAA0E;EAA1E,IAAoF,KAA1F;EACA,MAAM,WAAW,GAAG,WAAW,CAAC,WAAD,EAAc,KAAd,CAA/B;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,IAAyC,WAAW,KAAK,SAA7D,EAAwE;MACtE;MACA,OAAO,CAAC,IAAR,CAAa;;;;AAIZ,OAJD;IAKD,CARkB,CASnB;;EACD,CAVD,EAUG,EAVH;EAYA,OAAO;IACL,GADK;IAEL,cAFK;IAGL,KAAK,EAAE,WAHF;IAIL,cAAc,EAAE,gCAAA,CAAA,8BAAA,CAA+B;MAAE,KAAK,EAAE,WAAT;MAAsB;IAAtB,CAA/B,CAJX;IAML,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CANP;IAUL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,EACjC,GAAG,KAD8B;MAEjC,GAFiC;MAGjC,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,eAAA,CAAA,eAAA,EAAnB;IAH4B,CAA7B;EAVD,CAAP;AAgBD,CA3CM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B;;AA6Cb,SAAS,WAAT,CAAqB,CAArB,EAA2C,CAA3C,EAA+D;EAC7D;EACA,IAAI,CAAC,IAAI,CAAT,EAAY;IACV,OAAO,EAAE,GAAG,CAAL;MAAQ,GAAG;IAAX,CAAP;EACD;;EAED,IAAI,CAAJ,EAAO;IACL,OAAO,CAAP;EACD;;EAED,OAAO,CAAP;AACD;;AAED,SAAS,QAAT,GAAiB;EACf,OAAO,KAAK,CAAC,UAAN,CAAiB,uBAAA,CAAA,qBAAjB,CAAP;AACD","sourcesContent":["import { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n ThemeContext_unstable as ThemeContext,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport type { ThemeContextValue_unstable as ThemeContextValue } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */\nexport const useFluentProvider_unstable = (\n props: FluentProviderProps,\n ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n const parentContext = useFluent();\n const parentTheme = useTheme();\n\n /**\n * TODO: add merge functions to \"dir\" merge,\n * nesting providers with the same \"dir\" should not add additional attributes to DOM\n * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93\n */\n const { dir = parentContext.dir, targetDocument = parentContext.targetDocument, theme } = props;\n const mergedTheme = mergeThemes(parentTheme, theme);\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {\n // eslint-disable-next-line no-console\n console.warn(`\n FluentProvider: your \"theme\" is not defined !\n =============================================\n Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.\n `);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return {\n dir,\n targetDocument,\n theme: mergedTheme,\n themeClassName: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),\n\n components: {\n root: 'div',\n },\n\n root: getNativeElementProps('div', {\n ...props,\n dir,\n ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>()),\n }),\n };\n};\n\nfunction mergeThemes(a: ThemeContextValue, b: ThemeContextValue): ThemeContextValue {\n // Merge impacts perf: we should like to avoid it if it's possible\n if (a && b) {\n return { ...a, ...b };\n }\n\n if (a) {\n return a;\n }\n\n return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n return React.useContext(ThemeContext);\n}\n"],"sourceRoot":"../src/"}
|
|
@@ -9,7 +9,36 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
|
9
9
|
|
|
10
10
|
const React = /*#__PURE__*/require("react");
|
|
11
11
|
|
|
12
|
-
const useFluentProviderStyles_1 = /*#__PURE__*/require("./useFluentProviderStyles");
|
|
12
|
+
const useFluentProviderStyles_1 = /*#__PURE__*/require("./useFluentProviderStyles"); // String concatenation is used to prevent bundlers to complain with older versions of React
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
const useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : react_utilities_1.useIsomorphicLayoutEffect;
|
|
16
|
+
|
|
17
|
+
const createStyleTag = (target, id) => {
|
|
18
|
+
if (!target) {
|
|
19
|
+
return undefined;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
const tag = target.createElement('style');
|
|
23
|
+
tag.setAttribute('id', id);
|
|
24
|
+
target.head.appendChild(tag);
|
|
25
|
+
return tag;
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
const insertSheet = (tag, rule) => {
|
|
29
|
+
const sheet = tag.sheet;
|
|
30
|
+
|
|
31
|
+
if (sheet) {
|
|
32
|
+
if (sheet.cssRules.length > 0) {
|
|
33
|
+
sheet.deleteRule(0);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
sheet.insertRule(rule, 0);
|
|
37
|
+
} else if (process.env.NODE_ENV !== 'production') {
|
|
38
|
+
// eslint-disable-next-line no-console
|
|
39
|
+
console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');
|
|
40
|
+
}
|
|
41
|
+
};
|
|
13
42
|
/**
|
|
14
43
|
* Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
|
|
15
44
|
*
|
|
@@ -22,50 +51,27 @@ const useFluentProviderThemeStyleTag = options => {
|
|
|
22
51
|
targetDocument,
|
|
23
52
|
theme
|
|
24
53
|
} = options;
|
|
54
|
+
const styleTag = React.useRef();
|
|
25
55
|
const styleTagId = react_utilities_1.useId(useFluentProviderStyles_1.fluentProviderClassNames.root);
|
|
26
|
-
const
|
|
27
|
-
|
|
28
|
-
return null;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
const tag = targetDocument.createElement('style');
|
|
32
|
-
tag.setAttribute('id', styleTagId);
|
|
33
|
-
targetDocument.head.appendChild(tag);
|
|
34
|
-
return tag;
|
|
35
|
-
}, [styleTagId, targetDocument]);
|
|
36
|
-
const cssRule = React.useMemo(() => {
|
|
37
|
-
const cssVarsAsString = theme ? Object.keys(theme).reduce((cssVarRule, cssVar) => {
|
|
56
|
+
const cssVarsAsString = React.useMemo(() => {
|
|
57
|
+
return theme ? Object.keys(theme).reduce((cssVarRule, cssVar) => {
|
|
38
58
|
cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;
|
|
39
59
|
return cssVarRule;
|
|
40
|
-
}, '') : '';
|
|
60
|
+
}, '') : '';
|
|
61
|
+
}, [theme]);
|
|
62
|
+
const rule = `.${styleTagId} { ${cssVarsAsString} }`;
|
|
63
|
+
useInsertionEffect(() => {
|
|
64
|
+
styleTag.current = createStyleTag(targetDocument, styleTagId);
|
|
41
65
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
66
|
+
if (styleTag.current) {
|
|
67
|
+
insertSheet(styleTag.current, rule);
|
|
68
|
+
return () => {
|
|
69
|
+
var _a;
|
|
45
70
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
if (sheet) {
|
|
50
|
-
if (sheet.cssRules.length > 0) {
|
|
51
|
-
sheet.deleteRule(0);
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
sheet.insertRule(cssRule, 0);
|
|
55
|
-
} else if (process.env.NODE_ENV !== 'production') {
|
|
56
|
-
// eslint-disable-next-line no-console
|
|
57
|
-
console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');
|
|
71
|
+
(_a = styleTag.current) === null || _a === void 0 ? void 0 : _a.remove();
|
|
72
|
+
};
|
|
58
73
|
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
React.useEffect(() => {
|
|
63
|
-
return () => {
|
|
64
|
-
if (styleTag) {
|
|
65
|
-
styleTag.remove();
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
}, [styleTag]);
|
|
74
|
+
}, [styleTagId, targetDocument, rule]);
|
|
69
75
|
return styleTagId;
|
|
70
76
|
};
|
|
71
77
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA
|
|
1
|
+
{"version":3,"sources":["components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA,C,CAEA;;;AACA,MAAM,kBAAkB,GAAI,KAAe,CAAC,iBAAiB,QAAlB,CAAf,GACvB,KAAe,CAAC,iBAAiB,QAAlB,CADQ,GAExB,iBAAA,CAAA,yBAFJ;;AAIA,MAAM,cAAc,GAAG,CAAC,MAAD,EAA+B,EAA/B,KAA6C;EAClE,IAAI,CAAC,MAAL,EAAa;IACX,OAAO,SAAP;EACD;;EACD,MAAM,GAAG,GAAG,MAAM,CAAC,aAAP,CAAqB,OAArB,CAAZ;EACA,GAAG,CAAC,YAAJ,CAAiB,IAAjB,EAAuB,EAAvB;EACA,MAAM,CAAC,IAAP,CAAY,WAAZ,CAAwB,GAAxB;EACA,OAAO,GAAP;AACD,CARD;;AAUA,MAAM,WAAW,GAAG,CAAC,GAAD,EAAwB,IAAxB,KAAwC;EAC1D,MAAM,KAAK,GAAG,GAAG,CAAC,KAAlB;;EAEA,IAAI,KAAJ,EAAW;IACT,IAAI,KAAK,CAAC,QAAN,CAAe,MAAf,GAAwB,CAA5B,EAA+B;MAC7B,KAAK,CAAC,UAAN,CAAiB,CAAjB;IACD;;IACD,KAAK,CAAC,UAAN,CAAiB,IAAjB,EAAuB,CAAvB;EACD,CALD,MAKO,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;IAChD;IACA,OAAO,CAAC,KAAR,CAAc,uFAAd;EACD;AACF,CAZD;AAcA;;;;AAIG;;;AACI,MAAM,8BAA8B,GAAI,OAAD,IAAmE;EAC/G,MAAM;IAAE,cAAF;IAAkB;EAAlB,IAA4B,OAAlC;EACA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,EAAjB;EAEA,MAAM,UAAU,GAAG,iBAAA,CAAA,KAAA,CAAM,yBAAA,CAAA,wBAAA,CAAyB,IAA/B,CAAnB;EAEA,MAAM,eAAe,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IACzC,OAAO,KAAK,GACP,MAAM,CAAC,IAAP,CAAY,KAAZ,EAA8C,MAA9C,CAAqD,CAAC,UAAD,EAAa,MAAb,KAAuB;MAC3E,UAAU,IAAI,KAAK,MAAM,KAAK,KAAK,CAAC,MAAD,CAAQ,IAA3C;MACA,OAAO,UAAP;IACD,CAHA,EAGE,EAHF,CADO,GAKR,EALJ;EAMD,CAPuB,EAOrB,CAAC,KAAD,CAPqB,CAAxB;EASA,MAAM,IAAI,GAAG,IAAI,UAAU,MAAM,eAAe,IAAhD;EAEA,kBAAkB,CAAC,MAAK;IACtB,QAAQ,CAAC,OAAT,GAAmB,cAAc,CAAC,cAAD,EAAiB,UAAjB,CAAjC;;IAEA,IAAI,QAAQ,CAAC,OAAb,EAAsB;MACpB,WAAW,CAAC,QAAQ,CAAC,OAAV,EAAmB,IAAnB,CAAX;MAEA,OAAO,MAAK;;;QACV,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAT,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAE,MAAF,EAAhB;MACD,CAFD;IAGD;EACF,CAViB,EAUf,CAAC,UAAD,EAAa,cAAb,EAA6B,IAA7B,CAVe,CAAlB;EAYA,OAAO,UAAP;AACD,CA9BM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\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, id: string) => {\n if (!target) {\n return undefined;\n }\n const tag = target.createElement('style');\n tag.setAttribute('id', id);\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 const styleTag = React.useRef<HTMLStyleElement>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\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, styleTagId);\n\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n\n return () => {\n styleTag.current?.remove();\n };\n }\n }, [styleTagId, targetDocument, rule]);\n\n return styleTagId;\n};\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-provider",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.1.1",
|
|
4
4
|
"description": "Fluent UI React provider component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -20,24 +20,24 @@
|
|
|
20
20
|
"just": "just-scripts",
|
|
21
21
|
"lint": "just-scripts lint",
|
|
22
22
|
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
|
23
|
-
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-provider/src && yarn docs",
|
|
24
|
-
"storybook": "
|
|
23
|
+
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-provider/src && yarn docs",
|
|
24
|
+
"storybook": "start-storybook",
|
|
25
25
|
"start": "yarn storybook",
|
|
26
26
|
"type-check": "tsc -b tsconfig.json"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.13",
|
|
32
32
|
"@fluentui/scripts": "^1.0.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@griffel/core": "^1.
|
|
36
|
-
"@griffel/react": "^1.
|
|
37
|
-
"@fluentui/react-shared-contexts": "^9.0.
|
|
38
|
-
"@fluentui/react-tabster": "^9.
|
|
39
|
-
"@fluentui/react-theme": "^9.
|
|
40
|
-
"@fluentui/react-utilities": "^9.0
|
|
35
|
+
"@griffel/core": "^1.5.1",
|
|
36
|
+
"@griffel/react": "^1.3.0",
|
|
37
|
+
"@fluentui/react-shared-contexts": "^9.0.1",
|
|
38
|
+
"@fluentui/react-tabster": "^9.1.1",
|
|
39
|
+
"@fluentui/react-theme": "^9.1.0",
|
|
40
|
+
"@fluentui/react-utilities": "^9.1.0",
|
|
41
41
|
"tslib": "^2.1.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
@@ -48,7 +48,8 @@
|
|
|
48
48
|
},
|
|
49
49
|
"beachball": {
|
|
50
50
|
"disallowedChangeTypes": [
|
|
51
|
-
"major"
|
|
51
|
+
"major",
|
|
52
|
+
"prerelease"
|
|
52
53
|
]
|
|
53
54
|
},
|
|
54
55
|
"exports": {
|
package/dist/tsdoc-metadata.json
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
|
|
2
|
-
// It should be published with your NPM package. It should not be tracked by Git.
|
|
3
|
-
{
|
|
4
|
-
"tsdocVersion": "0.12",
|
|
5
|
-
"toolPackages": [
|
|
6
|
-
{
|
|
7
|
-
"packageName": "@microsoft/api-extractor",
|
|
8
|
-
"packageVersion": "7.18.1"
|
|
9
|
-
}
|
|
10
|
-
]
|
|
11
|
-
}
|