@fluentui/react-provider 9.0.0-rc.6 → 9.0.0-rc.7
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 +27 -6
- package/CHANGELOG.md +17 -7
- package/dist/react-provider.d.ts +7 -0
- package/lib/components/FluentProvider/index.d.ts +1 -0
- package/lib/components/FluentProvider/index.js +1 -0
- package/lib/components/FluentProvider/index.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProvider.js +2 -2
- package/lib/components/FluentProvider/useFluentProvider.js.map +1 -1
- package/lib/components/FluentProvider/{useThemeStyleTag.d.ts → useFluentProviderThemeStyleTag.d.ts} +1 -1
- package/lib/components/FluentProvider/{useThemeStyleTag.js → useFluentProviderThemeStyleTag.js} +2 -2
- package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -0
- package/lib/index.d.ts +2 -1
- package/lib/index.js +2 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/index.d.ts +1 -0
- package/lib-commonjs/components/FluentProvider/index.js +2 -0
- package/lib-commonjs/components/FluentProvider/index.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProvider.js +2 -2
- package/lib-commonjs/components/FluentProvider/useFluentProvider.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/{useThemeStyleTag.d.ts → useFluentProviderThemeStyleTag.d.ts} +1 -1
- package/lib-commonjs/components/FluentProvider/{useThemeStyleTag.js → useFluentProviderThemeStyleTag.js} +4 -4
- package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -0
- package/lib-commonjs/index.d.ts +2 -1
- package/lib-commonjs/index.js +51 -3
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +2 -2
- package/lib/components/FluentProvider/useThemeStyleTag.js.map +0 -1
- package/lib-commonjs/components/FluentProvider/useThemeStyleTag.js.map +0 -1
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,28 @@
|
|
|
2
2
|
"name": "@fluentui/react-provider",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 25 Apr 2022 09:31:20 GMT",
|
|
6
|
+
"tag": "@fluentui/react-provider_v9.0.0-rc.7",
|
|
7
|
+
"version": "9.0.0-rc.7",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "olfedias@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-provider",
|
|
13
|
+
"commit": "02ca1d3c198452c1693067f5f18bd01b2ed5d6e6",
|
|
14
|
+
"comment": "feat: export useFluentProviderThemeStyleTag from @fluentui/react-provider"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-provider",
|
|
19
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.7",
|
|
20
|
+
"commit": "02ca1d3c198452c1693067f5f18bd01b2ed5d6e6"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Tue, 19 Apr 2022 19:16:49 GMT",
|
|
6
27
|
"tag": "@fluentui/react-provider_v9.0.0-rc.6",
|
|
7
28
|
"version": "9.0.0-rc.6",
|
|
8
29
|
"comments": {
|
|
@@ -23,31 +44,31 @@
|
|
|
23
44
|
"author": "beachball",
|
|
24
45
|
"package": "@fluentui/react-provider",
|
|
25
46
|
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.5",
|
|
26
|
-
"commit": "
|
|
47
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
|
|
27
48
|
},
|
|
28
49
|
{
|
|
29
50
|
"author": "beachball",
|
|
30
51
|
"package": "@fluentui/react-provider",
|
|
31
52
|
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.6",
|
|
32
|
-
"commit": "
|
|
53
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
|
|
33
54
|
},
|
|
34
55
|
{
|
|
35
56
|
"author": "beachball",
|
|
36
57
|
"package": "@fluentui/react-provider",
|
|
37
58
|
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
|
|
38
|
-
"commit": "
|
|
59
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
|
|
39
60
|
},
|
|
40
61
|
{
|
|
41
62
|
"author": "beachball",
|
|
42
63
|
"package": "@fluentui/react-provider",
|
|
43
64
|
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
|
|
44
|
-
"commit": "
|
|
65
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
|
|
45
66
|
},
|
|
46
67
|
{
|
|
47
68
|
"author": "beachball",
|
|
48
69
|
"package": "@fluentui/react-provider",
|
|
49
70
|
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4",
|
|
50
|
-
"commit": "
|
|
71
|
+
"commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
|
|
51
72
|
}
|
|
52
73
|
],
|
|
53
74
|
"none": [
|
package/CHANGELOG.md
CHANGED
|
@@ -1,23 +1,33 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-provider
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 25 Apr 2022 09:31:20 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-rc.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.0.0-rc.7)
|
|
8
|
+
|
|
9
|
+
Mon, 25 Apr 2022 09:31:20 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.0.0-rc.6..@fluentui/react-provider_v9.0.0-rc.7)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- feat: export useFluentProviderThemeStyleTag from @fluentui/react-provider ([PR #22601](https://github.com/microsoft/fluentui/pull/22601) by olfedias@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.7 ([PR #22601](https://github.com/microsoft/fluentui/pull/22601) by beachball)
|
|
16
|
+
|
|
7
17
|
## [9.0.0-rc.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.0.0-rc.6)
|
|
8
18
|
|
|
9
|
-
Tue, 19 Apr 2022 19:
|
|
19
|
+
Tue, 19 Apr 2022 19:16:49 GMT
|
|
10
20
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.0.0-rc.5..@fluentui/react-provider_v9.0.0-rc.6)
|
|
11
21
|
|
|
12
22
|
### Changes
|
|
13
23
|
|
|
14
24
|
- Add static classnames to Provider ([PR #21960](https://github.com/microsoft/fluentui/pull/21960) by seanmonahan@microsoft.com)
|
|
15
25
|
- chore: Update Griffel to latest version ([PR #21976](https://github.com/microsoft/fluentui/pull/21976) by olfedias@microsoft.com)
|
|
16
|
-
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.5 ([PR #
|
|
17
|
-
- Bump @fluentui/react-tabster to v9.0.0-rc.6 ([PR #
|
|
18
|
-
- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #
|
|
19
|
-
- Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #
|
|
20
|
-
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #
|
|
26
|
+
- Bump @fluentui/react-shared-contexts to v9.0.0-rc.5 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
27
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
28
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
29
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
30
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
|
|
21
31
|
|
|
22
32
|
## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.0.0-rc.5)
|
|
23
33
|
|
package/dist/react-provider.d.ts
CHANGED
|
@@ -70,6 +70,13 @@ export declare function useFluentProviderContextValues_unstable(state: FluentPro
|
|
|
70
70
|
/** Applies style classnames to slots */
|
|
71
71
|
export declare const useFluentProviderStyles_unstable: (state: FluentProviderState) => FluentProviderState;
|
|
72
72
|
|
|
73
|
+
/**
|
|
74
|
+
* Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
|
|
75
|
+
*
|
|
76
|
+
* @returns CSS class to apply the rule
|
|
77
|
+
*/
|
|
78
|
+
export declare const useFluentProviderThemeStyleTag: (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => string;
|
|
79
|
+
|
|
73
80
|
export { useTheme }
|
|
74
81
|
|
|
75
82
|
export { }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/FluentProvider/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './FluentProvider';\nexport * from './FluentProvider.types';\nexport * from './renderFluentProvider';\nexport * from './useFluentProvider';\nexport * from './useFluentProviderStyles';\nexport * from './useFluentProviderContextValues';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/FluentProvider/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './FluentProvider';\nexport * from './FluentProvider.types';\nexport * from './renderFluentProvider';\nexport * from './useFluentProvider';\nexport * from './useFluentProviderStyles';\nexport * from './useFluentProviderContextValues';\nexport * from './useFluentProviderThemeStyleTag';\n"]}
|
|
@@ -2,7 +2,7 @@ import { useKeyboardNavAttribute } from '@fluentui/react-tabster';
|
|
|
2
2
|
import { useFluent, useTheme } from '@fluentui/react-shared-contexts';
|
|
3
3
|
import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
|
|
4
4
|
import * as React from 'react';
|
|
5
|
-
import {
|
|
5
|
+
import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';
|
|
6
6
|
/**
|
|
7
7
|
* Create the state required to render FluentProvider.
|
|
8
8
|
*
|
|
@@ -43,7 +43,7 @@ export const useFluentProvider_unstable = (props, ref) => {
|
|
|
43
43
|
dir,
|
|
44
44
|
targetDocument,
|
|
45
45
|
theme: mergedTheme,
|
|
46
|
-
themeClassName:
|
|
46
|
+
themeClassName: useFluentProviderThemeStyleTag({
|
|
47
47
|
theme: mergedTheme,
|
|
48
48
|
targetDocument
|
|
49
49
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":"AAAA,SAAS,uBAAT,QAAwC,yBAAxC;AAEA,SAAS,SAAT,EAAoB,QAApB,QAAoC,iCAApC;AACA,SAAS,qBAAT,EAAgC,aAAhC,QAAqD,2BAArD;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,
|
|
1
|
+
{"version":3,"sources":["components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":"AAAA,SAAS,uBAAT,QAAwC,yBAAxC;AAEA,SAAS,SAAT,EAAoB,QAApB,QAAoC,iCAApC;AACA,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;AACvB,QAAM,aAAa,GAAG,SAAS,EAA/B;AACA,QAAM,WAAW,GAAG,QAAQ,EAA5B;AAEA;;;;AAIG;;AACH,QAAM;AAAE,IAAA,GAAG,GAAG,aAAa,CAAC,GAAtB;AAA2B,IAAA,cAAc,GAAG,aAAa,CAAC,cAA1D;AAA0E,IAAA;AAA1E,MAAoF,KAA1F;AACA,QAAM,WAAW,GAAG,WAAW,CAAC,WAAD,EAAc,KAAd,CAA/B;AAEA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,QAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,IAAyC,WAAW,KAAK,SAA7D,EAAwE;AACtE;AACA,MAAA,OAAO,CAAC,IAAR,CAAa;;;;AAIZ,OAJD;AAKD,KARkB,CASnB;;AACD,GAVD,EAUG,EAVH;AAYA,SAAO;AACL,IAAA,GADK;AAEL,IAAA,cAFK;AAGL,IAAA,KAAK,EAAE,WAHF;AAIL,IAAA,cAAc,EAAE,8BAA8B,CAAC;AAAE,MAAA,KAAK,EAAE,WAAT;AAAsB,MAAA;AAAtB,KAAD,CAJzC;AAML,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KANP;AAUL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ,EACjC,GAAG,KAD8B;AAEjC,MAAA,GAFiC;AAGjC,MAAA,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,uBAAuB,EAA7B;AAHe,KAAR;AAVtB,GAAP;AAgBD,CA3CM;;AA6CP,SAAS,WAAT,CAAqB,CAArB,EAA4D,CAA5D,EAAuE;AACrE;AACA,MAAI,CAAC,IAAI,CAAT,EAAY;AACV,WAAO,EAAE,GAAG,CAAL;AAAQ,SAAG;AAAX,KAAP;AACD;;AAED,MAAI,CAAJ,EAAO;AACL,WAAO,CAAP;AACD;;AAED,SAAO,CAAP;AACD","sourcesContent":["import { useKeyboardNavAttribute } from '@fluentui/react-tabster';\nimport type { Theme } from '@fluentui/react-theme';\nimport { useFluent, useTheme } 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, useKeyboardNavAttribute()),\n }),\n };\n};\n\nfunction mergeThemes(a: Theme | Partial<Theme> | undefined, b: typeof a): Theme | Partial<Theme> | undefined {\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"],"sourceRoot":"../src/"}
|
package/lib/components/FluentProvider/{useThemeStyleTag.d.ts → useFluentProviderThemeStyleTag.d.ts}
RENAMED
|
@@ -4,4 +4,4 @@ import type { FluentProviderState } from './FluentProvider.types';
|
|
|
4
4
|
*
|
|
5
5
|
* @returns CSS class to apply the rule
|
|
6
6
|
*/
|
|
7
|
-
export declare const
|
|
7
|
+
export declare const useFluentProviderThemeStyleTag: (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => string;
|
package/lib/components/FluentProvider/{useThemeStyleTag.js → useFluentProviderThemeStyleTag.js}
RENAMED
|
@@ -7,7 +7,7 @@ import { fluentProviderClassNames } from './useFluentProviderStyles';
|
|
|
7
7
|
* @returns CSS class to apply the rule
|
|
8
8
|
*/
|
|
9
9
|
|
|
10
|
-
export const
|
|
10
|
+
export const useFluentProviderThemeStyleTag = options => {
|
|
11
11
|
const {
|
|
12
12
|
targetDocument,
|
|
13
13
|
theme
|
|
@@ -53,4 +53,4 @@ export const useThemeStyleTag = options => {
|
|
|
53
53
|
}, [styleTag]);
|
|
54
54
|
return styleTagId;
|
|
55
55
|
};
|
|
56
|
-
//# sourceMappingURL=
|
|
56
|
+
//# sourceMappingURL=useFluentProviderThemeStyleTag.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,WAAhB,QAAmC,2BAAnC;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,wBAAT,QAAyC,2BAAzC;AAEA;;;;AAIG;;AACH,OAAO,MAAM,8BAA8B,GAAI,OAAD,IAAmE;AAC/G,QAAM;AAAE,IAAA,cAAF;AAAkB,IAAA;AAAlB,MAA4B,OAAlC;AAEA,QAAM,UAAU,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAA1B,CAAxB;AACA,QAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;AAClC,QAAI,CAAC,cAAL,EAAqB;AACnB,aAAO,IAAP;AACD;;AAED,UAAM,GAAG,GAAG,cAAc,CAAC,aAAf,CAA6B,OAA7B,CAAZ;AACA,IAAA,GAAG,CAAC,YAAJ,CAAiB,IAAjB,EAAuB,UAAvB;AACA,IAAA,cAAc,CAAC,IAAf,CAAoB,WAApB,CAAgC,GAAhC;AACA,WAAO,GAAP;AACD,GATgB,EASd,CAAC,UAAD,EAAa,cAAb,CATc,CAAjB;AAWA,QAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;AACjC,UAAM,eAAe,GAAG,KAAK,GACxB,MAAM,CAAC,IAAP,CAAY,KAAZ,EAA8C,MAA9C,CAAqD,CAAC,UAAD,EAAa,MAAb,KAAuB;AAC3E,MAAA,UAAU,IAAI,KAAK,MAAM,KAAK,KAAK,CAAC,MAAD,CAAQ,IAA3C;AACA,aAAO,UAAP;AACD,KAHA,EAGE,EAHF,CADwB,GAKzB,EALJ,CADiC,CAQjC;;AACA,WAAO,IAAI,UAAU,MAAM,eAAe,IAA1C;AACD,GAVe,EAUb,CAAC,KAAD,EAAQ,UAAR,CAVa,CAAhB;AAWA,QAAM,eAAe,GAAG,WAAW,CAAC,OAAD,CAAnC;;AAEA,MAAI,QAAQ,IAAI,eAAe,KAAK,OAApC,EAA6C;AAC3C,UAAM,KAAK,GAAG,QAAQ,CAAC,KAAvB;;AAEA,QAAI,KAAK,CAAC,QAAN,CAAe,MAAf,GAAwB,CAA5B,EAA+B;AAC7B,MAAA,KAAK,CAAC,UAAN,CAAiB,CAAjB;AACD;;AAED,IAAA,KAAK,CAAC,UAAN,CAAiB,OAAjB,EAA0B,CAA1B;AACD,GApC8G,CAsC/G;;;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,WAAO,MAAK;AACV,UAAI,QAAJ,EAAc;AACZ,QAAA,QAAQ,CAAC,MAAT;AACD;AACF,KAJD;AAKD,GAND,EAMG,CAAC,QAAD,CANH;AAQA,SAAO,UAAP;AACD,CAhDM","sourcesContent":["import { useId, usePrevious } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\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 styleTagId = useId(fluentProviderClassNames.root);\n const styleTag = React.useMemo(() => {\n if (!targetDocument) {\n return null;\n }\n\n const tag = targetDocument.createElement('style');\n tag.setAttribute('id', styleTagId);\n targetDocument.head.appendChild(tag);\n return tag;\n }, [styleTagId, targetDocument]);\n\n const cssRule = React.useMemo(() => {\n const cssVarsAsString = theme\n ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '')\n : '';\n\n // result: .fluent-provider1 { --css-var: '#fff' }\n return `.${styleTagId} { ${cssVarsAsString} }`;\n }, [theme, styleTagId]);\n const previousCssRule = usePrevious(cssRule);\n\n if (styleTag && previousCssRule !== cssRule) {\n const sheet = styleTag.sheet as CSSStyleSheet;\n\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n\n sheet.insertRule(cssRule, 0);\n }\n\n // Removes the style tag from the targetDocument on unmount or change\n React.useEffect(() => {\n return () => {\n if (styleTag) {\n styleTag.remove();\n }\n };\n }, [styleTag]);\n\n return styleTagId;\n};\n"],"sourceRoot":"../src/"}
|
package/lib/index.d.ts
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
export
|
|
1
|
+
export { fluentProviderClassName, fluentProviderClassNames, FluentProvider, renderFluentProvider_unstable, useFluentProviderContextValues_unstable, useFluentProvider_unstable, useFluentProviderStyles_unstable, useFluentProviderThemeStyleTag, } from './FluentProvider';
|
|
2
|
+
export type { FluentProviderContextValues, FluentProviderProps, FluentProviderState, FluentProviderSlots, } from './FluentProvider';
|
|
2
3
|
export { useFluent, useTheme } from '@fluentui/react-shared-contexts';
|
package/lib/index.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
export
|
|
1
|
+
export { // eslint-disable-next-line deprecation/deprecation
|
|
2
|
+
fluentProviderClassName, fluentProviderClassNames, FluentProvider, renderFluentProvider_unstable, useFluentProviderContextValues_unstable, useFluentProvider_unstable, useFluentProviderStyles_unstable, useFluentProviderThemeStyleTag } from './FluentProvider';
|
|
2
3
|
export { useFluent, useTheme } from '@fluentui/react-shared-contexts';
|
|
3
4
|
//# sourceMappingURL=index.js.map
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE;AACA,uBAFF,EAGE,wBAHF,EAIE,cAJF,EAKE,6BALF,EAME,uCANF,EAOE,0BAPF,EAQE,gCARF,EASE,8BATF,QAUO,kBAVP;AAkBA,SAAS,SAAT,EAAoB,QAApB,QAAoC,iCAApC","sourcesContent":["export {\n // eslint-disable-next-line deprecation/deprecation\n fluentProviderClassName,\n fluentProviderClassNames,\n FluentProvider,\n renderFluentProvider_unstable,\n useFluentProviderContextValues_unstable,\n useFluentProvider_unstable,\n useFluentProviderStyles_unstable,\n useFluentProviderThemeStyleTag,\n} from './FluentProvider';\nexport type {\n FluentProviderContextValues,\n FluentProviderProps,\n FluentProviderState,\n FluentProviderSlots,\n} from './FluentProvider';\n\nexport { useFluent, useTheme } from '@fluentui/react-shared-contexts';\n"],"sourceRoot":"../src/"}
|
|
@@ -17,4 +17,6 @@ tslib_1.__exportStar(require("./useFluentProvider"), exports);
|
|
|
17
17
|
tslib_1.__exportStar(require("./useFluentProviderStyles"), exports);
|
|
18
18
|
|
|
19
19
|
tslib_1.__exportStar(require("./useFluentProviderContextValues"), exports);
|
|
20
|
+
|
|
21
|
+
tslib_1.__exportStar(require("./useFluentProviderThemeStyleTag"), exports);
|
|
20
22
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/FluentProvider/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './FluentProvider';\nexport * from './FluentProvider.types';\nexport * from './renderFluentProvider';\nexport * from './useFluentProvider';\nexport * from './useFluentProviderStyles';\nexport * from './useFluentProviderContextValues';\n"],"sourceRoot":"../src/"}
|
|
1
|
+
{"version":3,"sources":["components/FluentProvider/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './FluentProvider';\nexport * from './FluentProvider.types';\nexport * from './renderFluentProvider';\nexport * from './useFluentProvider';\nexport * from './useFluentProviderStyles';\nexport * from './useFluentProviderContextValues';\nexport * from './useFluentProviderThemeStyleTag';\n"],"sourceRoot":"../src/"}
|
|
@@ -13,7 +13,7 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
|
13
13
|
|
|
14
14
|
const React = /*#__PURE__*/require("react");
|
|
15
15
|
|
|
16
|
-
const
|
|
16
|
+
const useFluentProviderThemeStyleTag_1 = /*#__PURE__*/require("./useFluentProviderThemeStyleTag");
|
|
17
17
|
/**
|
|
18
18
|
* Create the state required to render FluentProvider.
|
|
19
19
|
*
|
|
@@ -55,7 +55,7 @@ const useFluentProvider_unstable = (props, ref) => {
|
|
|
55
55
|
dir,
|
|
56
56
|
targetDocument,
|
|
57
57
|
theme: mergedTheme,
|
|
58
|
-
themeClassName:
|
|
58
|
+
themeClassName: useFluentProviderThemeStyleTag_1.useFluentProviderThemeStyleTag({
|
|
59
59
|
theme: mergedTheme,
|
|
60
60
|
targetDocument
|
|
61
61
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAEA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,
|
|
1
|
+
{"version":3,"sources":["components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AAEA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AACA,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;AACvB,QAAM,aAAa,GAAG,uBAAA,CAAA,SAAA,EAAtB;AACA,QAAM,WAAW,GAAG,uBAAA,CAAA,QAAA,EAApB;AAEA;;;;AAIG;;AACH,QAAM;AAAE,IAAA,GAAG,GAAG,aAAa,CAAC,GAAtB;AAA2B,IAAA,cAAc,GAAG,aAAa,CAAC,cAA1D;AAA0E,IAAA;AAA1E,MAAoF,KAA1F;AACA,QAAM,WAAW,GAAG,WAAW,CAAC,WAAD,EAAc,KAAd,CAA/B;AAEA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,QAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,IAAyC,WAAW,KAAK,SAA7D,EAAwE;AACtE;AACA,MAAA,OAAO,CAAC,IAAR,CAAa;;;;AAIZ,OAJD;AAKD,KARkB,CASnB;;AACD,GAVD,EAUG,EAVH;AAYA,SAAO;AACL,IAAA,GADK;AAEL,IAAA,cAFK;AAGL,IAAA,KAAK,EAAE,WAHF;AAIL,IAAA,cAAc,EAAE,gCAAA,CAAA,8BAAA,CAA+B;AAAE,MAAA,KAAK,EAAE,WAAT;AAAsB,MAAA;AAAtB,KAA/B,CAJX;AAML,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KANP;AAUL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,EACjC,GAAG,KAD8B;AAEjC,MAAA,GAFiC;AAGjC,MAAA,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,eAAA,CAAA,uBAAA,EAAnB;AAH4B,KAA7B;AAVD,GAAP;AAgBD,CA3CM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B;;AA6Cb,SAAS,WAAT,CAAqB,CAArB,EAA4D,CAA5D,EAAuE;AACrE;AACA,MAAI,CAAC,IAAI,CAAT,EAAY;AACV,WAAO,EAAE,GAAG,CAAL;AAAQ,SAAG;AAAX,KAAP;AACD;;AAED,MAAI,CAAJ,EAAO;AACL,WAAO,CAAP;AACD;;AAED,SAAO,CAAP;AACD","sourcesContent":["import { useKeyboardNavAttribute } from '@fluentui/react-tabster';\nimport type { Theme } from '@fluentui/react-theme';\nimport { useFluent, useTheme } 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, useKeyboardNavAttribute()),\n }),\n };\n};\n\nfunction mergeThemes(a: Theme | Partial<Theme> | undefined, b: typeof a): Theme | Partial<Theme> | undefined {\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"],"sourceRoot":"../src/"}
|
|
@@ -4,4 +4,4 @@ import type { FluentProviderState } from './FluentProvider.types';
|
|
|
4
4
|
*
|
|
5
5
|
* @returns CSS class to apply the rule
|
|
6
6
|
*/
|
|
7
|
-
export declare const
|
|
7
|
+
export declare const useFluentProviderThemeStyleTag: (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => string;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.useFluentProviderThemeStyleTag = void 0;
|
|
7
7
|
|
|
8
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
9
|
|
|
@@ -17,7 +17,7 @@ const useFluentProviderStyles_1 = /*#__PURE__*/require("./useFluentProviderStyle
|
|
|
17
17
|
*/
|
|
18
18
|
|
|
19
19
|
|
|
20
|
-
const
|
|
20
|
+
const useFluentProviderThemeStyleTag = options => {
|
|
21
21
|
const {
|
|
22
22
|
targetDocument,
|
|
23
23
|
theme
|
|
@@ -64,5 +64,5 @@ const useThemeStyleTag = options => {
|
|
|
64
64
|
return styleTagId;
|
|
65
65
|
};
|
|
66
66
|
|
|
67
|
-
exports.
|
|
68
|
-
//# sourceMappingURL=
|
|
67
|
+
exports.useFluentProviderThemeStyleTag = useFluentProviderThemeStyleTag;
|
|
68
|
+
//# sourceMappingURL=useFluentProviderThemeStyleTag.js.map
|
|
@@ -0,0 +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;AAEA;;;;AAIG;;;AACI,MAAM,8BAA8B,GAAI,OAAD,IAAmE;AAC/G,QAAM;AAAE,IAAA,cAAF;AAAkB,IAAA;AAAlB,MAA4B,OAAlC;AAEA,QAAM,UAAU,GAAG,iBAAA,CAAA,KAAA,CAAM,yBAAA,CAAA,wBAAA,CAAyB,IAA/B,CAAnB;AACA,QAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;AAClC,QAAI,CAAC,cAAL,EAAqB;AACnB,aAAO,IAAP;AACD;;AAED,UAAM,GAAG,GAAG,cAAc,CAAC,aAAf,CAA6B,OAA7B,CAAZ;AACA,IAAA,GAAG,CAAC,YAAJ,CAAiB,IAAjB,EAAuB,UAAvB;AACA,IAAA,cAAc,CAAC,IAAf,CAAoB,WAApB,CAAgC,GAAhC;AACA,WAAO,GAAP;AACD,GATgB,EASd,CAAC,UAAD,EAAa,cAAb,CATc,CAAjB;AAWA,QAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;AACjC,UAAM,eAAe,GAAG,KAAK,GACxB,MAAM,CAAC,IAAP,CAAY,KAAZ,EAA8C,MAA9C,CAAqD,CAAC,UAAD,EAAa,MAAb,KAAuB;AAC3E,MAAA,UAAU,IAAI,KAAK,MAAM,KAAK,KAAK,CAAC,MAAD,CAAQ,IAA3C;AACA,aAAO,UAAP;AACD,KAHA,EAGE,EAHF,CADwB,GAKzB,EALJ,CADiC,CAQjC;;AACA,WAAO,IAAI,UAAU,MAAM,eAAe,IAA1C;AACD,GAVe,EAUb,CAAC,KAAD,EAAQ,UAAR,CAVa,CAAhB;AAWA,QAAM,eAAe,GAAG,iBAAA,CAAA,WAAA,CAAY,OAAZ,CAAxB;;AAEA,MAAI,QAAQ,IAAI,eAAe,KAAK,OAApC,EAA6C;AAC3C,UAAM,KAAK,GAAG,QAAQ,CAAC,KAAvB;;AAEA,QAAI,KAAK,CAAC,QAAN,CAAe,MAAf,GAAwB,CAA5B,EAA+B;AAC7B,MAAA,KAAK,CAAC,UAAN,CAAiB,CAAjB;AACD;;AAED,IAAA,KAAK,CAAC,UAAN,CAAiB,OAAjB,EAA0B,CAA1B;AACD,GApC8G,CAsC/G;;;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,WAAO,MAAK;AACV,UAAI,QAAJ,EAAc;AACZ,QAAA,QAAQ,CAAC,MAAT;AACD;AACF,KAJD;AAKD,GAND,EAMG,CAAC,QAAD,CANH;AAQA,SAAO,UAAP;AACD,CAhDM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import { useId, usePrevious } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\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 styleTagId = useId(fluentProviderClassNames.root);\n const styleTag = React.useMemo(() => {\n if (!targetDocument) {\n return null;\n }\n\n const tag = targetDocument.createElement('style');\n tag.setAttribute('id', styleTagId);\n targetDocument.head.appendChild(tag);\n return tag;\n }, [styleTagId, targetDocument]);\n\n const cssRule = React.useMemo(() => {\n const cssVarsAsString = theme\n ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '')\n : '';\n\n // result: .fluent-provider1 { --css-var: '#fff' }\n return `.${styleTagId} { ${cssVarsAsString} }`;\n }, [theme, styleTagId]);\n const previousCssRule = usePrevious(cssRule);\n\n if (styleTag && previousCssRule !== cssRule) {\n const sheet = styleTag.sheet as CSSStyleSheet;\n\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n\n sheet.insertRule(cssRule, 0);\n }\n\n // Removes the style tag from the targetDocument on unmount or change\n React.useEffect(() => {\n return () => {\n if (styleTag) {\n styleTag.remove();\n }\n };\n }, [styleTag]);\n\n return styleTagId;\n};\n"],"sourceRoot":"../src/"}
|
package/lib-commonjs/index.d.ts
CHANGED
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
export
|
|
1
|
+
export { fluentProviderClassName, fluentProviderClassNames, FluentProvider, renderFluentProvider_unstable, useFluentProviderContextValues_unstable, useFluentProvider_unstable, useFluentProviderStyles_unstable, useFluentProviderThemeStyleTag, } from './FluentProvider';
|
|
2
|
+
export type { FluentProviderContextValues, FluentProviderProps, FluentProviderState, FluentProviderSlots, } from './FluentProvider';
|
|
2
3
|
export { useFluent, useTheme } from '@fluentui/react-shared-contexts';
|
package/lib-commonjs/index.js
CHANGED
|
@@ -3,11 +3,59 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useTheme = exports.useFluent = void 0;
|
|
6
|
+
exports.useTheme = exports.useFluent = exports.useFluentProviderThemeStyleTag = exports.useFluentProviderStyles_unstable = exports.useFluentProvider_unstable = exports.useFluentProviderContextValues_unstable = exports.renderFluentProvider_unstable = exports.FluentProvider = exports.fluentProviderClassNames = exports.fluentProviderClassName = void 0;
|
|
7
7
|
|
|
8
|
-
|
|
8
|
+
var FluentProvider_1 = /*#__PURE__*/require("./FluentProvider"); // eslint-disable-next-line deprecation/deprecation
|
|
9
9
|
|
|
10
|
-
|
|
10
|
+
|
|
11
|
+
Object.defineProperty(exports, "fluentProviderClassName", {
|
|
12
|
+
enumerable: true,
|
|
13
|
+
get: function () {
|
|
14
|
+
return FluentProvider_1.fluentProviderClassName;
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
Object.defineProperty(exports, "fluentProviderClassNames", {
|
|
18
|
+
enumerable: true,
|
|
19
|
+
get: function () {
|
|
20
|
+
return FluentProvider_1.fluentProviderClassNames;
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
Object.defineProperty(exports, "FluentProvider", {
|
|
24
|
+
enumerable: true,
|
|
25
|
+
get: function () {
|
|
26
|
+
return FluentProvider_1.FluentProvider;
|
|
27
|
+
}
|
|
28
|
+
});
|
|
29
|
+
Object.defineProperty(exports, "renderFluentProvider_unstable", {
|
|
30
|
+
enumerable: true,
|
|
31
|
+
get: function () {
|
|
32
|
+
return FluentProvider_1.renderFluentProvider_unstable;
|
|
33
|
+
}
|
|
34
|
+
});
|
|
35
|
+
Object.defineProperty(exports, "useFluentProviderContextValues_unstable", {
|
|
36
|
+
enumerable: true,
|
|
37
|
+
get: function () {
|
|
38
|
+
return FluentProvider_1.useFluentProviderContextValues_unstable;
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
Object.defineProperty(exports, "useFluentProvider_unstable", {
|
|
42
|
+
enumerable: true,
|
|
43
|
+
get: function () {
|
|
44
|
+
return FluentProvider_1.useFluentProvider_unstable;
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
Object.defineProperty(exports, "useFluentProviderStyles_unstable", {
|
|
48
|
+
enumerable: true,
|
|
49
|
+
get: function () {
|
|
50
|
+
return FluentProvider_1.useFluentProviderStyles_unstable;
|
|
51
|
+
}
|
|
52
|
+
});
|
|
53
|
+
Object.defineProperty(exports, "useFluentProviderThemeStyleTag", {
|
|
54
|
+
enumerable: true,
|
|
55
|
+
get: function () {
|
|
56
|
+
return FluentProvider_1.useFluentProviderThemeStyleTag;
|
|
57
|
+
}
|
|
58
|
+
});
|
|
11
59
|
|
|
12
60
|
var react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
|
13
61
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA,C,CACE;;;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,uBAAA;AAAuB;AAAvB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,wBAAA;AAAwB;AAAxB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,cAAA;AAAc;AAAd,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,6BAAA;AAA6B;AAA7B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yCAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,uCAAA;AAAuC;AAAvC,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,0BAAA;AAA0B;AAA1B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kCAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,gCAAA;AAAgC;AAAhC,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gCAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,gBAAA,CAAA,8BAAA;AAA8B;AAA9B,CAAA;;AASF,IAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,WAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,uBAAA,CAAA,SAAA;AAAS;AAAT,CAAA;AAAW,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,uBAAA,CAAA,QAAA;AAAQ;AAAR,CAAA","sourcesContent":["export {\n // eslint-disable-next-line deprecation/deprecation\n fluentProviderClassName,\n fluentProviderClassNames,\n FluentProvider,\n renderFluentProvider_unstable,\n useFluentProviderContextValues_unstable,\n useFluentProvider_unstable,\n useFluentProviderStyles_unstable,\n useFluentProviderThemeStyleTag,\n} from './FluentProvider';\nexport type {\n FluentProviderContextValues,\n FluentProviderProps,\n FluentProviderState,\n FluentProviderSlots,\n} from './FluentProvider';\n\nexport { useFluent, useTheme } from '@fluentui/react-shared-contexts';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-provider",
|
|
3
|
-
"version": "9.0.0-rc.
|
|
3
|
+
"version": "9.0.0-rc.7",
|
|
4
4
|
"description": "Fluent UI React provider component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@griffel/react": "1.0.3",
|
|
36
36
|
"@fluentui/react-shared-contexts": "9.0.0-rc.5",
|
|
37
|
-
"@fluentui/react-tabster": "9.0.0-rc.
|
|
37
|
+
"@fluentui/react-tabster": "9.0.0-rc.7",
|
|
38
38
|
"@fluentui/react-theme": "9.0.0-rc.5",
|
|
39
39
|
"@fluentui/react-utilities": "9.0.0-rc.6",
|
|
40
40
|
"tslib": "^2.1.0"
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["components/FluentProvider/useThemeStyleTag.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,WAAhB,QAAmC,2BAAnC;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,wBAAT,QAAyC,2BAAzC;AAEA;;;;AAIG;;AACH,OAAO,MAAM,gBAAgB,GAAI,OAAD,IAAmE;AACjG,QAAM;AAAE,IAAA,cAAF;AAAkB,IAAA;AAAlB,MAA4B,OAAlC;AAEA,QAAM,UAAU,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAA1B,CAAxB;AACA,QAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;AAClC,QAAI,CAAC,cAAL,EAAqB;AACnB,aAAO,IAAP;AACD;;AAED,UAAM,GAAG,GAAG,cAAc,CAAC,aAAf,CAA6B,OAA7B,CAAZ;AACA,IAAA,GAAG,CAAC,YAAJ,CAAiB,IAAjB,EAAuB,UAAvB;AACA,IAAA,cAAc,CAAC,IAAf,CAAoB,WAApB,CAAgC,GAAhC;AACA,WAAO,GAAP;AACD,GATgB,EASd,CAAC,UAAD,EAAa,cAAb,CATc,CAAjB;AAWA,QAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;AACjC,UAAM,eAAe,GAAG,KAAK,GACxB,MAAM,CAAC,IAAP,CAAY,KAAZ,EAA8C,MAA9C,CAAqD,CAAC,UAAD,EAAa,MAAb,KAAuB;AAC3E,MAAA,UAAU,IAAI,KAAK,MAAM,KAAK,KAAK,CAAC,MAAD,CAAQ,IAA3C;AACA,aAAO,UAAP;AACD,KAHA,EAGE,EAHF,CADwB,GAKzB,EALJ,CADiC,CAQjC;;AACA,WAAO,IAAI,UAAU,MAAM,eAAe,IAA1C;AACD,GAVe,EAUb,CAAC,KAAD,EAAQ,UAAR,CAVa,CAAhB;AAWA,QAAM,eAAe,GAAG,WAAW,CAAC,OAAD,CAAnC;;AAEA,MAAI,QAAQ,IAAI,eAAe,KAAK,OAApC,EAA6C;AAC3C,UAAM,KAAK,GAAG,QAAQ,CAAC,KAAvB;;AAEA,QAAI,KAAK,CAAC,QAAN,CAAe,MAAf,GAAwB,CAA5B,EAA+B;AAC7B,MAAA,KAAK,CAAC,UAAN,CAAiB,CAAjB;AACD;;AAED,IAAA,KAAK,CAAC,UAAN,CAAiB,OAAjB,EAA0B,CAA1B;AACD,GApCgG,CAsCjG;;;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,WAAO,MAAK;AACV,UAAI,QAAJ,EAAc;AACZ,QAAA,QAAQ,CAAC,MAAT;AACD;AACF,KAJD;AAKD,GAND,EAMG,CAAC,QAAD,CANH;AAQA,SAAO,UAAP;AACD,CAhDM","sourcesContent":["import { useId, usePrevious } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\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 useThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {\n const { targetDocument, theme } = options;\n\n const styleTagId = useId(fluentProviderClassNames.root);\n const styleTag = React.useMemo(() => {\n if (!targetDocument) {\n return null;\n }\n\n const tag = targetDocument.createElement('style');\n tag.setAttribute('id', styleTagId);\n targetDocument.head.appendChild(tag);\n return tag;\n }, [styleTagId, targetDocument]);\n\n const cssRule = React.useMemo(() => {\n const cssVarsAsString = theme\n ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '')\n : '';\n\n // result: .fluent-provider1 { --css-var: '#fff' }\n return `.${styleTagId} { ${cssVarsAsString} }`;\n }, [theme, styleTagId]);\n const previousCssRule = usePrevious(cssRule);\n\n if (styleTag && previousCssRule !== cssRule) {\n const sheet = styleTag.sheet as CSSStyleSheet;\n\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n\n sheet.insertRule(cssRule, 0);\n }\n\n // Removes the style tag from the targetDocument on unmount or change\n React.useEffect(() => {\n return () => {\n if (styleTag) {\n styleTag.remove();\n }\n };\n }, [styleTag]);\n\n return styleTagId;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["components/FluentProvider/useThemeStyleTag.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;AAEA;;;;AAIG;;;AACI,MAAM,gBAAgB,GAAI,OAAD,IAAmE;AACjG,QAAM;AAAE,IAAA,cAAF;AAAkB,IAAA;AAAlB,MAA4B,OAAlC;AAEA,QAAM,UAAU,GAAG,iBAAA,CAAA,KAAA,CAAM,yBAAA,CAAA,wBAAA,CAAyB,IAA/B,CAAnB;AACA,QAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;AAClC,QAAI,CAAC,cAAL,EAAqB;AACnB,aAAO,IAAP;AACD;;AAED,UAAM,GAAG,GAAG,cAAc,CAAC,aAAf,CAA6B,OAA7B,CAAZ;AACA,IAAA,GAAG,CAAC,YAAJ,CAAiB,IAAjB,EAAuB,UAAvB;AACA,IAAA,cAAc,CAAC,IAAf,CAAoB,WAApB,CAAgC,GAAhC;AACA,WAAO,GAAP;AACD,GATgB,EASd,CAAC,UAAD,EAAa,cAAb,CATc,CAAjB;AAWA,QAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;AACjC,UAAM,eAAe,GAAG,KAAK,GACxB,MAAM,CAAC,IAAP,CAAY,KAAZ,EAA8C,MAA9C,CAAqD,CAAC,UAAD,EAAa,MAAb,KAAuB;AAC3E,MAAA,UAAU,IAAI,KAAK,MAAM,KAAK,KAAK,CAAC,MAAD,CAAQ,IAA3C;AACA,aAAO,UAAP;AACD,KAHA,EAGE,EAHF,CADwB,GAKzB,EALJ,CADiC,CAQjC;;AACA,WAAO,IAAI,UAAU,MAAM,eAAe,IAA1C;AACD,GAVe,EAUb,CAAC,KAAD,EAAQ,UAAR,CAVa,CAAhB;AAWA,QAAM,eAAe,GAAG,iBAAA,CAAA,WAAA,CAAY,OAAZ,CAAxB;;AAEA,MAAI,QAAQ,IAAI,eAAe,KAAK,OAApC,EAA6C;AAC3C,UAAM,KAAK,GAAG,QAAQ,CAAC,KAAvB;;AAEA,QAAI,KAAK,CAAC,QAAN,CAAe,MAAf,GAAwB,CAA5B,EAA+B;AAC7B,MAAA,KAAK,CAAC,UAAN,CAAiB,CAAjB;AACD;;AAED,IAAA,KAAK,CAAC,UAAN,CAAiB,OAAjB,EAA0B,CAA1B;AACD,GApCgG,CAsCjG;;;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,WAAO,MAAK;AACV,UAAI,QAAJ,EAAc;AACZ,QAAA,QAAQ,CAAC,MAAT;AACD;AACF,KAJD;AAKD,GAND,EAMG,CAAC,QAAD,CANH;AAQA,SAAO,UAAP;AACD,CAhDM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourcesContent":["import { useId, usePrevious } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\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 useThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {\n const { targetDocument, theme } = options;\n\n const styleTagId = useId(fluentProviderClassNames.root);\n const styleTag = React.useMemo(() => {\n if (!targetDocument) {\n return null;\n }\n\n const tag = targetDocument.createElement('style');\n tag.setAttribute('id', styleTagId);\n targetDocument.head.appendChild(tag);\n return tag;\n }, [styleTagId, targetDocument]);\n\n const cssRule = React.useMemo(() => {\n const cssVarsAsString = theme\n ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '')\n : '';\n\n // result: .fluent-provider1 { --css-var: '#fff' }\n return `.${styleTagId} { ${cssVarsAsString} }`;\n }, [theme, styleTagId]);\n const previousCssRule = usePrevious(cssRule);\n\n if (styleTag && previousCssRule !== cssRule) {\n const sheet = styleTag.sheet as CSSStyleSheet;\n\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n\n sheet.insertRule(cssRule, 0);\n }\n\n // Removes the style tag from the targetDocument on unmount or change\n React.useEffect(() => {\n return () => {\n if (styleTag) {\n styleTag.remove();\n }\n };\n }, [styleTag]);\n\n return styleTagId;\n};\n"],"sourceRoot":"../src/"}
|