@fluentui/react-provider 9.1.11 → 9.2.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 +77 -1
- package/CHANGELOG.md +28 -2
- package/lib/components/FluentProvider/FluentProvider.js.map +1 -1
- package/lib/components/FluentProvider/renderFluentProvider.js +2 -2
- package/lib/components/FluentProvider/renderFluentProvider.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProvider.js +6 -10
- package/lib/components/FluentProvider/useFluentProvider.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProviderContextValues.js +2 -2
- package/lib/components/FluentProvider/useFluentProviderContextValues.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProviderStyles.js +9 -12
- package/lib/components/FluentProvider/useFluentProviderStyles.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js +14 -15
- package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-amd/components/FluentProvider/useFluentProviderThemeStyleTag.js +9 -5
- package/lib-amd/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
- package/lib-commonjs/FluentProvider.js +0 -2
- package/lib-commonjs/FluentProvider.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/FluentProvider.js +0 -6
- package/lib-commonjs/components/FluentProvider/FluentProvider.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/FluentProvider.types.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/index.js +0 -8
- package/lib-commonjs/components/FluentProvider/index.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/renderFluentProvider.js +2 -8
- package/lib-commonjs/components/FluentProvider/renderFluentProvider.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProvider.js +6 -17
- package/lib-commonjs/components/FluentProvider/useFluentProvider.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.js +2 -5
- package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.js +9 -17
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js +14 -20
- package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
- package/lib-commonjs/index.js +0 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +7 -7
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,83 @@
|
|
|
2
2
|
"name": "@fluentui/react-provider",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Mon, 09 Jan 2023 14:31:49 GMT",
|
|
6
|
+
"tag": "@fluentui/react-provider_v9.2.1",
|
|
7
|
+
"version": "9.2.1",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-provider",
|
|
13
|
+
"comment": "Bump @fluentui/react-tabster to v9.3.6",
|
|
14
|
+
"commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-provider",
|
|
19
|
+
"comment": "Bump @fluentui/react-utilities to v9.4.0",
|
|
20
|
+
"commit": "26f0364b3837056ee8e0df42a7932c298c68290e"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Wed, 04 Jan 2023 01:40:23 GMT",
|
|
27
|
+
"tag": "@fluentui/react-provider_v9.2.0",
|
|
28
|
+
"version": "9.2.0",
|
|
29
|
+
"comments": {
|
|
30
|
+
"minor": [
|
|
31
|
+
{
|
|
32
|
+
"author": "olfedias@microsoft.com",
|
|
33
|
+
"package": "@fluentui/react-provider",
|
|
34
|
+
"commit": "5b9042fea309185404fb2c8b8986d46381af8241",
|
|
35
|
+
"comment": "feat: FluentProvider applies style attributes defined by a renderer from Griffel"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"author": "beachball",
|
|
39
|
+
"package": "@fluentui/react-provider",
|
|
40
|
+
"comment": "Bump @fluentui/react-tabster to v9.3.5",
|
|
41
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"author": "beachball",
|
|
45
|
+
"package": "@fluentui/react-provider",
|
|
46
|
+
"comment": "Bump @fluentui/react-utilities to v9.3.1",
|
|
47
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui/react-provider",
|
|
52
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19",
|
|
53
|
+
"commit": "3e322d15529451be153e97298873253e21af4082"
|
|
54
|
+
}
|
|
55
|
+
],
|
|
56
|
+
"none": [
|
|
57
|
+
{
|
|
58
|
+
"author": "martinhochel@microsoft.com",
|
|
59
|
+
"package": "@fluentui/react-provider",
|
|
60
|
+
"commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
|
|
61
|
+
"comment": "chore(scripts): move index.ts to to follow sub-folder domain packaging"
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
"author": "martinhochel@microsoft.com",
|
|
65
|
+
"package": "@fluentui/react-provider",
|
|
66
|
+
"commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
|
|
67
|
+
"comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
|
|
68
|
+
}
|
|
69
|
+
],
|
|
70
|
+
"patch": [
|
|
71
|
+
{
|
|
72
|
+
"author": "olfedias@microsoft.com",
|
|
73
|
+
"package": "@fluentui/react-provider",
|
|
74
|
+
"commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
|
|
75
|
+
"comment": "chore: Update Griffel to latest version"
|
|
76
|
+
}
|
|
77
|
+
]
|
|
78
|
+
}
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"date": "Wed, 21 Dec 2022 10:20:30 GMT",
|
|
6
82
|
"tag": "@fluentui/react-provider_v9.1.11",
|
|
7
83
|
"version": "9.1.11",
|
|
8
84
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +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 Mon, 09 Jan 2023 14:31:49 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.2.1)
|
|
8
|
+
|
|
9
|
+
Mon, 09 Jan 2023 14:31:49 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.2.0..@fluentui/react-provider_v9.2.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-tabster to v9.3.6 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
|
|
15
|
+
- Bump @fluentui/react-utilities to v9.4.0 ([PR #26257](https://github.com/microsoft/fluentui/pull/26257) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.2.0)
|
|
18
|
+
|
|
19
|
+
Wed, 04 Jan 2023 01:40:23 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.1.11..@fluentui/react-provider_v9.2.0)
|
|
21
|
+
|
|
22
|
+
### Minor changes
|
|
23
|
+
|
|
24
|
+
- feat: FluentProvider applies style attributes defined by a renderer from Griffel ([PR #26046](https://github.com/microsoft/fluentui/pull/26046) by olfedias@microsoft.com)
|
|
25
|
+
- Bump @fluentui/react-tabster to v9.3.5 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
26
|
+
- Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
27
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
|
|
28
|
+
|
|
29
|
+
### Patches
|
|
30
|
+
|
|
31
|
+
- chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
|
|
32
|
+
|
|
7
33
|
## [9.1.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.1.11)
|
|
8
34
|
|
|
9
|
-
Wed, 21 Dec 2022 10:
|
|
35
|
+
Wed, 21 Dec 2022 10:20:30 GMT
|
|
10
36
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.1.10..@fluentui/react-provider_v9.1.11)
|
|
11
37
|
|
|
12
38
|
### Patches
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,gCAAgC,QAAQ,2BAA2B;AAC5E,SAASC,uCAAuC,QAAQ,kCAAkC;AAG1F,OAAO,MAAMC,cAAc,gBAAGL,KAAK,CAACM,UAAU,CAAmC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGP,0BAA0B,CAACK,KAAK,EAAEC,GAAG,CAAC;EACpDL,gCAAgC,CAACM,KAAK,CAAC;EAEvC,MAAMC,aAAa,GAAGN,uCAAuC,CAACK,KAAK,CAAC;EAEpE,OAAOR,6BAA6B,CAACQ,KAAK,EAAEC,aAAa,CAAC;AAC5D,CAAC,CAAC;AAEFL,cAAc,CAACM,WAAW,GAAG,gBAAgB","names":["React","renderFluentProvider_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderContextValues_unstable","FluentProvider","forwardRef","props","ref","state","contextValues","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderFluentProvider_unstable } from './renderFluentProvider';\nimport { useFluentProvider_unstable } from './useFluentProvider';\nimport { useFluentProviderStyles_unstable } from './useFluentProviderStyles';\nimport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nimport type { FluentProviderProps } from './FluentProvider.types';\n\nexport const FluentProvider = React.forwardRef<HTMLElement, FluentProviderProps>((props, ref) => {\n const state = useFluentProvider_unstable(props, ref);\n useFluentProviderStyles_unstable(state);\n\n const contextValues = useFluentProviderContextValues_unstable(state);\n\n return renderFluentProvider_unstable(state, contextValues);\n});\n\nFluentProvider.displayName = 'FluentProvider';\n"]}
|
|
@@ -5,7 +5,6 @@ import { getSlots } from '@fluentui/react-utilities';
|
|
|
5
5
|
/**
|
|
6
6
|
* Render the final JSX of FluentProvider
|
|
7
7
|
*/
|
|
8
|
-
|
|
9
8
|
export const renderFluentProvider_unstable = (state, contextValues) => {
|
|
10
9
|
const {
|
|
11
10
|
slots,
|
|
@@ -21,7 +20,8 @@ export const renderFluentProvider_unstable = (state, contextValues) => {
|
|
|
21
20
|
value: contextValues.tooltip
|
|
22
21
|
}, /*#__PURE__*/React.createElement(TextDirectionProvider, {
|
|
23
22
|
dir: contextValues.textDirection
|
|
24
|
-
}, /*#__PURE__*/React.createElement(slots.root, {
|
|
23
|
+
}, /*#__PURE__*/React.createElement(slots.root, {
|
|
24
|
+
...slotProps.root
|
|
25
25
|
}, state.root.children))))));
|
|
26
26
|
};
|
|
27
27
|
//# sourceMappingURL=renderFluentProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,QAAQ,gBAAgB;AACtD,SACEC,iBAAiB,IAAIC,QAAQ,EAC7BC,kCAAkC,IAAIC,yBAAyB,EAC/DC,sBAAsB,IAAIC,aAAa,EACvCC,+BAA+B,IAAIC,sBAAsB,QACpD,iCAAiC;AACxC,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,6BAA6B,GAAG,CAC3CC,KAA0B,EAC1BC,aAA0C,KACxC;EACF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,QAAQ,CAAsBE,KAAK,CAAC;EAEjE,oBACEZ,oBAACG,QAAQ;IAACa,KAAK,EAAEH,aAAa,CAACI;EAAQ,gBACrCjB,oBAACO,aAAa;IAACS,KAAK,EAAEH,aAAa,CAACK;EAAK,gBACvClB,oBAACS,sBAAsB;IAACO,KAAK,EAAEH,aAAa,CAACM;EAAc,gBACzDnB,oBAACK,yBAAyB;IAACW,KAAK,EAAEH,aAAa,CAACO;EAAO,gBACrDpB,oBAACC,qBAAqB;IAACoB,GAAG,EAAER,aAAa,CAACS;EAAa,gBACrDtB,oBAACc,KAAK,CAACS,IAAI;IAAA,GAAKR,SAAS,CAACQ;EAAI,GAAGX,KAAK,CAACW,IAAI,CAACC,QAAQ,CAAc,CAC5C,CACE,CACL,CACX,CACP;AAEf,CAAC","names":["React","TextDirectionProvider","Provider_unstable","Provider","TooltipVisibilityProvider_unstable","TooltipVisibilityProvider","ThemeProvider_unstable","ThemeProvider","ThemeClassNameProvider_unstable","ThemeClassNameProvider","getSlots","renderFluentProvider_unstable","state","contextValues","slots","slotProps","value","provider","theme","themeClassName","tooltip","dir","textDirection","root","children"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TextDirectionProvider } from '@griffel/react';\nimport {\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n} from '@fluentui/react-shared-contexts';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n) => {\n const { slots, slotProps } = getSlots<FluentProviderSlots>(state);\n\n return (\n <Provider value={contextValues.provider}>\n <ThemeProvider value={contextValues.theme}>\n <ThemeClassNameProvider value={contextValues.themeClassName}>\n <TooltipVisibilityProvider value={contextValues.tooltip}>\n <TextDirectionProvider dir={contextValues.textDirection}>\n <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"]}
|
|
@@ -12,7 +12,6 @@ import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag
|
|
|
12
12
|
* @param props - props from this instance of FluentProvider
|
|
13
13
|
* @param ref - reference to root HTMLElement of FluentProvider
|
|
14
14
|
*/
|
|
15
|
-
|
|
16
15
|
export const useFluentProvider_unstable = (props, ref) => {
|
|
17
16
|
const parentContext = useFluent();
|
|
18
17
|
const parentTheme = useTheme();
|
|
@@ -21,7 +20,6 @@ export const useFluentProvider_unstable = (props, ref) => {
|
|
|
21
20
|
* nesting providers with the same "dir" should not add additional attributes to DOM
|
|
22
21
|
* see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93
|
|
23
22
|
*/
|
|
24
|
-
|
|
25
23
|
const {
|
|
26
24
|
applyStylesToPortals = true,
|
|
27
25
|
dir = parentContext.dir,
|
|
@@ -37,8 +35,8 @@ export const useFluentProvider_unstable = (props, ref) => {
|
|
|
37
35
|
=============================================
|
|
38
36
|
Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.
|
|
39
37
|
`);
|
|
40
|
-
}
|
|
41
|
-
|
|
38
|
+
}
|
|
39
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
42
40
|
}, []);
|
|
43
41
|
return {
|
|
44
42
|
applyStylesToPortals,
|
|
@@ -52,28 +50,26 @@ export const useFluentProvider_unstable = (props, ref) => {
|
|
|
52
50
|
components: {
|
|
53
51
|
root: 'div'
|
|
54
52
|
},
|
|
55
|
-
root: getNativeElementProps('div', {
|
|
53
|
+
root: getNativeElementProps('div', {
|
|
54
|
+
...props,
|
|
56
55
|
dir,
|
|
57
56
|
ref: useMergedRefs(ref, useFocusVisible())
|
|
58
57
|
})
|
|
59
58
|
};
|
|
60
59
|
};
|
|
61
|
-
|
|
62
60
|
function mergeThemes(a, b) {
|
|
63
61
|
// Merge impacts perf: we should like to avoid it if it's possible
|
|
64
62
|
if (a && b) {
|
|
65
|
-
return {
|
|
63
|
+
return {
|
|
64
|
+
...a,
|
|
66
65
|
...b
|
|
67
66
|
};
|
|
68
67
|
}
|
|
69
|
-
|
|
70
68
|
if (a) {
|
|
71
69
|
return a;
|
|
72
70
|
}
|
|
73
|
-
|
|
74
71
|
return b;
|
|
75
72
|
}
|
|
76
|
-
|
|
77
73
|
function useTheme() {
|
|
78
74
|
return React.useContext(ThemeContext);
|
|
79
75
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"AAAA,SAASA,eAAe,QAAQ,yBAAyB;AACzD,SACEC,qBAAqB,IAAIC,YAAY,EACrCC,kBAAkB,IAAIC,SAAS,QAC1B,iCAAiC;AAExC,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,2BAA2B;AAChF,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SAASC,8BAA8B,QAAQ,kCAAkC;AAGjF;;;;;;;;;AASA,OAAO,MAAMC,0BAA0B,GAAG,CACxCC,KAA0B,EAC1BC,GAA2B,KACJ;EACvB,MAAMC,aAAa,GAAGR,SAAS,EAAE;EACjC,MAAMS,WAAW,GAAGC,QAAQ,EAAE;EAE9B;;;;;EAKA,MAAM;IACJC,oBAAoB,GAAG,IAAI;IAC3BC,GAAG,GAAGJ,aAAa,CAACI,GAAG;IACvBC,cAAc,GAAGL,aAAa,CAACK,cAAc;IAC7CC;EAAK,CACN,GAAGR,KAAK;EACT,MAAMS,WAAW,GAAGC,WAAW,CAACP,WAAW,EAAEK,KAAK,CAAC;EAEnDX,KAAK,CAACc,SAAS,CAAC,MAAK;IACnB,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,IAAIL,WAAW,KAAKM,SAAS,EAAE;MACtE;MACAC,OAAO,CAACC,IAAI,CAAC;;;;OAIZ,CAAC;;IAEJ;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACLZ,oBAAoB;IACpBC,GAAG;IACHC,cAAc;IACdC,KAAK,EAAEC,WAAW;IAClBS,cAAc,EAAEpB,8BAA8B,CAAC;MAAEU,KAAK,EAAEC,WAAW;MAAEF;IAAc,CAAE,CAAC;IAEtFY,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IAEDA,IAAI,EAAEzB,qBAAqB,CAAC,KAAK,EAAE;MACjC,GAAGK,KAAK;MACRM,GAAG;MACHL,GAAG,EAAEL,aAAa,CAACK,GAAG,EAAEX,eAAe,EAAkB;KAC1D;GACF;AACH,CAAC;AAED,SAASoB,WAAW,CAACW,CAAoB,EAAEC,CAAoB;EAC7D;EACA,IAAID,CAAC,IAAIC,CAAC,EAAE;IACV,OAAO;MAAE,GAAGD,CAAC;MAAE,GAAGC;IAAC,CAAE;;EAGvB,IAAID,CAAC,EAAE;IACL,OAAOA,CAAC;;EAGV,OAAOC,CAAC;AACV;AAEA,SAASlB,QAAQ;EACf,OAAOP,KAAK,CAAC0B,UAAU,CAAC/B,YAAY,CAAC;AACvC","names":["useFocusVisible","ThemeContext_unstable","ThemeContext","useFluent_unstable","useFluent","getNativeElementProps","useMergedRefs","React","useFluentProviderThemeStyleTag","useFluentProvider_unstable","props","ref","parentContext","parentTheme","useTheme","applyStylesToPortals","dir","targetDocument","theme","mergedTheme","mergeThemes","useEffect","process","env","NODE_ENV","undefined","console","warn","themeClassName","components","root","a","b","useContext"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts"],"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 {\n applyStylesToPortals = true,\n dir = parentContext.dir,\n targetDocument = parentContext.targetDocument,\n theme,\n } = 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 applyStylesToPortals,\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"]}
|
|
@@ -11,8 +11,8 @@ export function useFluentProviderContextValues_unstable(state) {
|
|
|
11
11
|
const provider = React.useMemo(() => ({
|
|
12
12
|
dir,
|
|
13
13
|
targetDocument
|
|
14
|
-
}), [dir, targetDocument]);
|
|
15
|
-
|
|
14
|
+
}), [dir, targetDocument]);
|
|
15
|
+
// "Tooltip" component mutates an object in this context, instance should be stable
|
|
16
16
|
const [tooltip] = React.useState(() => ({}));
|
|
17
17
|
return {
|
|
18
18
|
provider,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,OAAM,SAAUC,uCAAuC,CAACC,KAA0B;EAChF,MAAM;IAAEC,oBAAoB;IAAEC,GAAG;IAAEC,IAAI;IAAEC,cAAc;IAAEC,KAAK;IAAEC;EAAc,CAAE,GAAGN,KAAK;EAExF,MAAMO,QAAQ,GAAGT,KAAK,CAACU,OAAO,CAAC,OAAO;IAAEN,GAAG;IAAEE;EAAc,CAAE,CAAC,EAAE,CAACF,GAAG,EAAEE,cAAc,CAAC,CAAC;EACtF;EACA,MAAM,CAACK,OAAO,CAAC,GAAGX,KAAK,CAACY,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;EAE5C,OAAO;IACLH,QAAQ;IACRI,aAAa,EAAET,GAAG;IAClBO,OAAO;IACPJ,KAAK;IACLC,cAAc,EAAEL,oBAAoB,GAAGE,IAAI,CAACS,SAAU,GAAGN;GAC1D;AACH","names":["React","useFluentProviderContextValues_unstable","state","applyStylesToPortals","dir","root","targetDocument","theme","themeClassName","provider","useMemo","tooltip","useState","textDirection","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n const { applyStylesToPortals, dir, root, targetDocument, theme, themeClassName } = state;\n\n const provider = React.useMemo(() => ({ dir, targetDocument }), [dir, targetDocument]);\n // \"Tooltip\" component mutates an object in this context, instance should be stable\n const [tooltip] = React.useState(() => ({}));\n\n return {\n provider,\n textDirection: dir,\n tooltip,\n theme,\n themeClassName: applyStylesToPortals ? root.className! : themeClassName,\n };\n}\n"]}
|
|
@@ -4,23 +4,20 @@ import { tokens, typographyStyles } from '@fluentui/react-theme';
|
|
|
4
4
|
export const fluentProviderClassNames = {
|
|
5
5
|
root: 'fui-FluentProvider'
|
|
6
6
|
};
|
|
7
|
-
|
|
8
7
|
const useStyles = /*#__PURE__*/__styles({
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
8
|
+
root: {
|
|
9
|
+
sj55zd: "f19n0e5",
|
|
10
|
+
De3pzq: "fxugw4r",
|
|
11
|
+
fsow6f: ["f1o700av", "fes3tcz"],
|
|
12
|
+
Bahqtrf: "fk6fouc",
|
|
13
|
+
Be2twd7: "fkhj508",
|
|
14
|
+
Bhrd7zp: "figsok6",
|
|
15
|
+
Bg96gwp: "f1i3iumi"
|
|
17
16
|
}
|
|
18
17
|
}, {
|
|
19
|
-
|
|
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);}"]
|
|
20
19
|
});
|
|
21
20
|
/** Applies style classnames to slots */
|
|
22
|
-
|
|
23
|
-
|
|
24
21
|
export const useFluentProviderStyles_unstable = state => {
|
|
25
22
|
const renderer = useRenderer_unstable();
|
|
26
23
|
const styles = useStyles({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"AAAA,mBAAqBA,YAAY,QAAQ,eAAe;AACxD,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAIhE,OAAO,MAAMC,wBAAwB,GAAwC;EAC3EC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAOhB;AAEF;AACA,OAAO,MAAMC,gCAAgC,GAAIC,KAA0B,IAAI;EAC7E,MAAMC,QAAQ,GAAGR,oBAAoB,EAAE;EACvC,MAAMS,MAAM,GAAGJ,SAAS,CAAC;IAAEK,GAAG,EAAEH,KAAK,CAACG,GAAG;IAAEF;EAAQ,CAAE,CAAC;EAEtDD,KAAK,CAACH,IAAI,CAACO,SAAS,GAAGZ,YAAY,CACjCI,wBAAwB,CAACC,IAAI,EAC7BG,KAAK,CAACK,cAAc,EACpBH,MAAM,CAACL,IAAI,EACXG,KAAK,CAACH,IAAI,CAACO,SAAS,CACrB;EAED,OAAOJ,KAAK;AACd,CAAC","names":["mergeClasses","useRenderer_unstable","tokens","typographyStyles","fluentProviderClassNames","root","useStyles","useFluentProviderStyles_unstable","state","renderer","styles","dir","className","themeClassName"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {\n root: 'fui-FluentProvider',\n};\n\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n textAlign: 'left',\n ...typographyStyles.body1,\n },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState) => {\n const renderer = useRenderer_unstable();\n const styles = useStyles({ dir: state.dir, renderer });\n\n state.root.className = mergeClasses(\n fluentProviderClassNames.root,\n state.themeClassName,\n styles.root,\n state.root.className,\n );\n\n return state;\n};\n"]}
|
|
@@ -1,28 +1,26 @@
|
|
|
1
1
|
import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
|
2
|
+
import { useRenderer_unstable } from '@griffel/react';
|
|
2
3
|
import * as React from 'react';
|
|
3
|
-
import { fluentProviderClassNames } from './useFluentProviderStyles';
|
|
4
|
-
|
|
4
|
+
import { fluentProviderClassNames } from './useFluentProviderStyles';
|
|
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
|
-
|
|
7
|
-
const createStyleTag = (target, id) => {
|
|
7
|
+
const createStyleTag = (target, elementAttributes) => {
|
|
8
8
|
if (!target) {
|
|
9
9
|
return undefined;
|
|
10
10
|
}
|
|
11
|
-
|
|
12
11
|
const tag = target.createElement('style');
|
|
13
|
-
|
|
12
|
+
Object.keys(elementAttributes).forEach(attrName => {
|
|
13
|
+
tag.setAttribute(attrName, elementAttributes[attrName]);
|
|
14
|
+
});
|
|
14
15
|
target.head.appendChild(tag);
|
|
15
16
|
return tag;
|
|
16
17
|
};
|
|
17
|
-
|
|
18
18
|
const insertSheet = (tag, rule) => {
|
|
19
19
|
const sheet = tag.sheet;
|
|
20
|
-
|
|
21
20
|
if (sheet) {
|
|
22
21
|
if (sheet.cssRules.length > 0) {
|
|
23
22
|
sheet.deleteRule(0);
|
|
24
23
|
}
|
|
25
|
-
|
|
26
24
|
sheet.insertRule(rule, 0);
|
|
27
25
|
} else if (process.env.NODE_ENV !== 'production') {
|
|
28
26
|
// eslint-disable-next-line no-console
|
|
@@ -34,15 +32,15 @@ const insertSheet = (tag, rule) => {
|
|
|
34
32
|
*
|
|
35
33
|
* @returns CSS class to apply the rule
|
|
36
34
|
*/
|
|
37
|
-
|
|
38
|
-
|
|
39
35
|
export const useFluentProviderThemeStyleTag = options => {
|
|
40
36
|
const {
|
|
41
37
|
targetDocument,
|
|
42
38
|
theme
|
|
43
39
|
} = options;
|
|
40
|
+
const renderer = useRenderer_unstable();
|
|
44
41
|
const styleTag = React.useRef();
|
|
45
42
|
const styleTagId = useId(fluentProviderClassNames.root);
|
|
43
|
+
const styleElementAttributes = renderer.styleElementAttributes;
|
|
46
44
|
const cssVarsAsString = React.useMemo(() => {
|
|
47
45
|
return theme ? Object.keys(theme).reduce((cssVarRule, cssVar) => {
|
|
48
46
|
cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;
|
|
@@ -51,17 +49,18 @@ export const useFluentProviderThemeStyleTag = options => {
|
|
|
51
49
|
}, [theme]);
|
|
52
50
|
const rule = `.${styleTagId} { ${cssVarsAsString} }`;
|
|
53
51
|
useInsertionEffect(() => {
|
|
54
|
-
styleTag.current = createStyleTag(targetDocument,
|
|
55
|
-
|
|
52
|
+
styleTag.current = createStyleTag(targetDocument, {
|
|
53
|
+
...styleElementAttributes,
|
|
54
|
+
id: styleTagId
|
|
55
|
+
});
|
|
56
56
|
if (styleTag.current) {
|
|
57
57
|
insertSheet(styleTag.current, rule);
|
|
58
58
|
return () => {
|
|
59
59
|
var _a;
|
|
60
|
-
|
|
61
60
|
(_a = styleTag.current) === null || _a === void 0 ? void 0 : _a.remove();
|
|
62
61
|
};
|
|
63
62
|
}
|
|
64
|
-
}, [styleTagId, targetDocument, rule]);
|
|
63
|
+
}, [styleTagId, targetDocument, rule, styleElementAttributes]);
|
|
65
64
|
return styleTagId;
|
|
66
65
|
};
|
|
67
66
|
//# sourceMappingURL=useFluentProviderThemeStyleTag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"AAAA,SAASA,KAAK,EAAEC,yBAAyB,QAAQ,2BAA2B;AAC5E,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,OAAO,KAAKC,KAAK,MAAM,OAAO;AAG9B,SAASC,wBAAwB,QAAQ,2BAA2B;AAEpE;AACA,MAAMC,kBAAkB,GAAIF,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC,GACjEA,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC,GAC3CF,yBAAyB;AAE7B,MAAMK,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;;;;;AAKA,OAAO,MAAMC,8BAA8B,GAAIC,OAA8D,IAAI;EAC/G,MAAM;IAAEC,cAAc;IAAEC;EAAK,CAAE,GAAGF,OAAO;EAEzC,MAAMG,QAAQ,GAAGjC,oBAAoB,EAAE;EACvC,MAAMkC,QAAQ,GAAGjC,KAAK,CAACkC,MAAM,EAAoB;EAEjD,MAAMC,UAAU,GAAGtC,KAAK,CAACI,wBAAwB,CAACmC,IAAI,CAAC;EACvD,MAAMC,sBAAsB,GAAGL,QAAQ,CAACK,sBAAsB;EAE9D,MAAMC,eAAe,GAAGtC,KAAK,CAACuC,OAAO,CAAC,MAAK;IACzC,OAAOR,KAAK,GACPtB,MAAM,CAACC,IAAI,CAACqB,KAAK,CAA4B,CAACS,MAAM,CAAC,CAACC,UAAU,EAAEC,MAAM,KAAI;MAC3ED,UAAU,IAAI,KAAKC,MAAM,KAAKX,KAAK,CAACW,MAAM,CAAC,IAAI;MAC/C,OAAOD,UAAU;IACnB,CAAC,EAAE,EAAE,CAAC,GACN,EAAE;EACR,CAAC,EAAE,CAACV,KAAK,CAAC,CAAC;EAEX,MAAMd,IAAI,GAAG,IAAIkB,UAAU,MAAMG,eAAe,IAAI;EAEpDpC,kBAAkB,CAAC,MAAK;IACtB+B,QAAQ,CAACU,OAAO,GAAGxC,cAAc,CAAC2B,cAAc,EAAE;MAAE,GAAGO,sBAAsB;MAAEO,EAAE,EAAET;IAAU,CAAE,CAAC;IAEhG,IAAIF,QAAQ,CAACU,OAAO,EAAE;MACpB3B,WAAW,CAACiB,QAAQ,CAACU,OAAO,EAAE1B,IAAI,CAAC;MAEnC,OAAO,MAAK;;QACV,cAAQ,CAAC0B,OAAO,0CAAEE,MAAM,EAAE;MAC5B,CAAC;;EAEL,CAAC,EAAE,CAACV,UAAU,EAAEL,cAAc,EAAEb,IAAI,EAAEoB,sBAAsB,CAAC,CAAC;EAE9D,OAAOF,UAAU;AACnB,CAAC","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":"../src/","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/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-provider/src/index.ts"],"
|
|
1
|
+
{"version":3,"mappings":"AAAA,SACEA,wBAAwB,EACxBC,cAAc,EACdC,6BAA6B,EAC7BC,uCAAuC,EACvCC,0BAA0B,EAC1BC,gCAAgC,EAChCC,8BAA8B,QACzB,kBAAkB","names":["fluentProviderClassNames","FluentProvider","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/index.ts"],"sourcesContent":["export {\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"]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
define(["require", "exports", "@fluentui/react-utilities", "react", "./useFluentProviderStyles"], function (require, exports, react_utilities_1, React, useFluentProviderStyles_1) {
|
|
1
|
+
define(["require", "exports", "tslib", "@fluentui/react-utilities", "@griffel/react", "react", "./useFluentProviderStyles"], function (require, exports, tslib_1, react_utilities_1, react_1, React, useFluentProviderStyles_1) {
|
|
2
2
|
"use strict";
|
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
4
|
exports.useFluentProviderThemeStyleTag = void 0;
|
|
@@ -6,12 +6,14 @@ define(["require", "exports", "@fluentui/react-utilities", "react", "./useFluent
|
|
|
6
6
|
var useInsertionEffect = React['useInsertion' + 'Effect']
|
|
7
7
|
? React['useInsertion' + 'Effect']
|
|
8
8
|
: react_utilities_1.useIsomorphicLayoutEffect;
|
|
9
|
-
var createStyleTag = function (target,
|
|
9
|
+
var createStyleTag = function (target, elementAttributes) {
|
|
10
10
|
if (!target) {
|
|
11
11
|
return undefined;
|
|
12
12
|
}
|
|
13
13
|
var tag = target.createElement('style');
|
|
14
|
-
|
|
14
|
+
Object.keys(elementAttributes).forEach(function (attrName) {
|
|
15
|
+
tag.setAttribute(attrName, elementAttributes[attrName]);
|
|
16
|
+
});
|
|
15
17
|
target.head.appendChild(tag);
|
|
16
18
|
return tag;
|
|
17
19
|
};
|
|
@@ -35,8 +37,10 @@ define(["require", "exports", "@fluentui/react-utilities", "react", "./useFluent
|
|
|
35
37
|
*/
|
|
36
38
|
var useFluentProviderThemeStyleTag = function (options) {
|
|
37
39
|
var targetDocument = options.targetDocument, theme = options.theme;
|
|
40
|
+
var renderer = react_1.useRenderer_unstable();
|
|
38
41
|
var styleTag = React.useRef();
|
|
39
42
|
var styleTagId = react_utilities_1.useId(useFluentProviderStyles_1.fluentProviderClassNames.root);
|
|
43
|
+
var styleElementAttributes = renderer.styleElementAttributes;
|
|
40
44
|
var cssVarsAsString = React.useMemo(function () {
|
|
41
45
|
return theme
|
|
42
46
|
? Object.keys(theme).reduce(function (cssVarRule, cssVar) {
|
|
@@ -47,7 +51,7 @@ define(["require", "exports", "@fluentui/react-utilities", "react", "./useFluent
|
|
|
47
51
|
}, [theme]);
|
|
48
52
|
var rule = "." + styleTagId + " { " + cssVarsAsString + " }";
|
|
49
53
|
useInsertionEffect(function () {
|
|
50
|
-
styleTag.current = createStyleTag(targetDocument, styleTagId);
|
|
54
|
+
styleTag.current = createStyleTag(targetDocument, tslib_1.__assign(tslib_1.__assign({}, styleElementAttributes), { id: styleTagId }));
|
|
51
55
|
if (styleTag.current) {
|
|
52
56
|
insertSheet(styleTag.current, rule);
|
|
53
57
|
return function () {
|
|
@@ -55,7 +59,7 @@ define(["require", "exports", "@fluentui/react-utilities", "react", "./useFluent
|
|
|
55
59
|
(_a = styleTag.current) === null || _a === void 0 ? void 0 : _a.remove();
|
|
56
60
|
};
|
|
57
61
|
}
|
|
58
|
-
}, [styleTagId, targetDocument, rule]);
|
|
62
|
+
}, [styleTagId, targetDocument, rule, styleElementAttributes]);
|
|
59
63
|
return styleTagId;
|
|
60
64
|
};
|
|
61
65
|
exports.useFluentProviderThemeStyleTag = useFluentProviderThemeStyleTag;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFluentProviderThemeStyleTag.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"useFluentProviderThemeStyleTag.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"names":[],"mappings":";;;;IAOA,4FAA4F;IAC5F,IAAM,kBAAkB,GAAI,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC;QACpE,CAAC,CAAE,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC;QAC7C,CAAC,CAAC,2CAAyB,CAAC;IAE9B,IAAM,cAAc,GAAG,UAAC,MAA4B,EAAE,iBAAyC;QAC7F,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,SAAS,CAAC;SAClB;QAED,IAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE1C,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,UAAA,QAAQ;YAC7C,GAAG,CAAC,YAAY,CAAC,QAAQ,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC1D,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QAC7B,OAAO,GAAG,CAAC;IACb,CAAC,CAAC;IAEF,IAAM,WAAW,GAAG,UAAC,GAAqB,EAAE,IAAY;QACtD,IAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC;QAExB,IAAI,KAAK,EAAE;YACT,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC7B,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;aACrB;YACD,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;SAC3B;aAAM,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;YAChD,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,uFAAuF,CAAC,CAAC;SACxG;IACH,CAAC,CAAC;IAEF;;;;OAIG;IACI,IAAM,8BAA8B,GAAG,UAAC,OAA8D;QACnG,IAAA,cAAc,GAAY,OAAO,eAAnB,EAAE,KAAK,GAAK,OAAO,MAAZ,CAAa;QAE1C,IAAM,QAAQ,GAAG,4BAAoB,EAAE,CAAC;QACxC,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,EAAoB,CAAC;QAElD,IAAM,UAAU,GAAG,uBAAK,CAAC,kDAAwB,CAAC,IAAI,CAAC,CAAC;QACxD,IAAM,sBAAsB,GAAG,QAAQ,CAAC,sBAAsB,CAAC;QAE/D,IAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC;YACpC,OAAO,KAAK;gBACV,CAAC,CAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAA4B,CAAC,MAAM,CAAC,UAAC,UAAU,EAAE,MAAM;oBACvE,UAAU,IAAI,OAAK,MAAM,UAAK,KAAK,CAAC,MAAM,CAAC,OAAI,CAAC;oBAChD,OAAO,UAAU,CAAC;gBACpB,CAAC,EAAE,EAAE,CAAC;gBACR,CAAC,CAAC,EAAE,CAAC;QACT,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;QAEZ,IAAM,IAAI,GAAG,MAAI,UAAU,WAAM,eAAe,OAAI,CAAC;QAErD,kBAAkB,CAAC;YACjB,QAAQ,CAAC,OAAO,GAAG,cAAc,CAAC,cAAc,wCAAO,sBAAsB,KAAE,EAAE,EAAE,UAAU,IAAG,CAAC;YAEjG,IAAI,QAAQ,CAAC,OAAO,EAAE;gBACpB,WAAW,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;gBAEpC,OAAO;;oBACL,MAAA,QAAQ,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAC;gBAC7B,CAAC,CAAC;aACH;QACH,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,IAAI,EAAE,sBAAsB,CAAC,CAAC,CAAC;QAE/D,OAAO,UAAU,CAAC;IACpB,CAAC,CAAC;IAjCW,QAAA,8BAA8B,kCAiCzC","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"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-provider/src/FluentProvider.ts"],"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/FluentProvider.ts"],"sourcesContent":["export * from './components/FluentProvider/index';\n"]}
|
|
@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.FluentProvider = void 0;
|
|
7
|
-
|
|
8
7
|
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
8
|
const renderFluentProvider_1 = /*#__PURE__*/require("./renderFluentProvider");
|
|
11
|
-
|
|
12
9
|
const useFluentProvider_1 = /*#__PURE__*/require("./useFluentProvider");
|
|
13
|
-
|
|
14
10
|
const useFluentProviderStyles_1 = /*#__PURE__*/require("./useFluentProviderStyles");
|
|
15
|
-
|
|
16
11
|
const useFluentProviderContextValues_1 = /*#__PURE__*/require("./useFluentProviderContextValues");
|
|
17
|
-
|
|
18
12
|
exports.FluentProvider = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
19
13
|
const state = useFluentProvider_1.useFluentProvider_unstable(props, ref);
|
|
20
14
|
useFluentProviderStyles_1.useFluentProviderStyles_unstable(state);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AAGaA,sBAAc,gBAAGC,KAAK,CAACC,UAAU,CAAmC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGC,8CAA0B,CAACH,KAAK,EAAEC,GAAG,CAAC;EACpDG,0DAAgC,CAACF,KAAK,CAAC;EAEvC,MAAMG,aAAa,GAAGC,wEAAuC,CAACJ,KAAK,CAAC;EAEpE,OAAOK,oDAA6B,CAACL,KAAK,EAAEG,aAAa,CAAC;AAC5D,CAAC,CAAC;AAEFR,sBAAc,CAACW,WAAW,GAAG,gBAAgB","names":["exports","React","forwardRef","props","ref","state","useFluentProvider_1","useFluentProviderStyles_1","contextValues","useFluentProviderContextValues_1","renderFluentProvider_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderFluentProvider_unstable } from './renderFluentProvider';\nimport { useFluentProvider_unstable } from './useFluentProvider';\nimport { useFluentProviderStyles_unstable } from './useFluentProviderStyles';\nimport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nimport type { FluentProviderProps } from './FluentProvider.types';\n\nexport const FluentProvider = React.forwardRef<HTMLElement, FluentProviderProps>((props, ref) => {\n const state = useFluentProvider_unstable(props, ref);\n useFluentProviderStyles_unstable(state);\n\n const contextValues = useFluentProviderContextValues_unstable(state);\n\n return renderFluentProvider_unstable(state, contextValues);\n});\n\nFluentProvider.displayName = 'FluentProvider';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
|
|
@@ -3,20 +3,12 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
|
|
7
6
|
const tslib_1 = /*#__PURE__*/require("tslib");
|
|
8
|
-
|
|
9
7
|
tslib_1.__exportStar(require("./FluentProvider"), exports);
|
|
10
|
-
|
|
11
8
|
tslib_1.__exportStar(require("./FluentProvider.types"), exports);
|
|
12
|
-
|
|
13
9
|
tslib_1.__exportStar(require("./renderFluentProvider"), exports);
|
|
14
|
-
|
|
15
10
|
tslib_1.__exportStar(require("./useFluentProvider"), exports);
|
|
16
|
-
|
|
17
11
|
tslib_1.__exportStar(require("./useFluentProviderStyles"), exports);
|
|
18
|
-
|
|
19
12
|
tslib_1.__exportStar(require("./useFluentProviderContextValues"), exports);
|
|
20
|
-
|
|
21
13
|
tslib_1.__exportStar(require("./useFluentProviderThemeStyleTag"), exports);
|
|
22
14
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-provider/src/components/FluentProvider/index.ts"],"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/index.ts"],"sourcesContent":["export * from './FluentProvider';\nexport * from './FluentProvider.types';\nexport * from './renderFluentProvider';\nexport * from './useFluentProvider';\nexport * from './useFluentProviderStyles';\nexport * from './useFluentProviderContextValues';\nexport * from './useFluentProviderThemeStyleTag';\n"]}
|
|
@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.renderFluentProvider_unstable = void 0;
|
|
7
|
-
|
|
8
7
|
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
11
|
-
|
|
12
9
|
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
|
13
|
-
|
|
14
10
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
15
11
|
/**
|
|
16
12
|
* Render the final JSX of FluentProvider
|
|
17
13
|
*/
|
|
18
|
-
|
|
19
|
-
|
|
20
14
|
const renderFluentProvider_unstable = (state, contextValues) => {
|
|
21
15
|
const {
|
|
22
16
|
slots,
|
|
@@ -32,9 +26,9 @@ const renderFluentProvider_unstable = (state, contextValues) => {
|
|
|
32
26
|
value: contextValues.tooltip
|
|
33
27
|
}, React.createElement(react_1.TextDirectionProvider, {
|
|
34
28
|
dir: contextValues.textDirection
|
|
35
|
-
}, React.createElement(slots.root, {
|
|
29
|
+
}, React.createElement(slots.root, {
|
|
30
|
+
...slotProps.root
|
|
36
31
|
}, state.root.children))))));
|
|
37
32
|
};
|
|
38
|
-
|
|
39
33
|
exports.renderFluentProvider_unstable = renderFluentProvider_unstable;
|
|
40
34
|
//# sourceMappingURL=renderFluentProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAMA;AAGA;;;AAGO,MAAMA,6BAA6B,GAAG,CAC3CC,KAA0B,EAC1BC,aAA0C,KACxC;EACF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAsBJ,KAAK,CAAC;EAEjE,OACEK,oBAACC,yCAAQ;IAACC,KAAK,EAAEN,aAAa,CAACO;EAAQ,GACrCH,oBAACC,8CAAa;IAACC,KAAK,EAAEN,aAAa,CAACQ;EAAK,GACvCJ,oBAACC,uDAAsB;IAACC,KAAK,EAAEN,aAAa,CAACS;EAAc,GACzDL,oBAACC,0DAAyB;IAACC,KAAK,EAAEN,aAAa,CAACU;EAAO,GACrDN,oBAACO,6BAAqB;IAACC,GAAG,EAAEZ,aAAa,CAACa;EAAa,GACrDT,oBAACH,KAAK,CAACa,IAAI;IAAA,GAAKZ,SAAS,CAACY;EAAI,GAAGf,KAAK,CAACe,IAAI,CAACC,QAAQ,CAAc,CAC5C,CACE,CACL,CACX,CACP;AAEf,CAAC;AAnBYC,qCAA6B","names":["renderFluentProvider_unstable","state","contextValues","slots","slotProps","react_utilities_1","React","react_shared_contexts_1","value","provider","theme","themeClassName","tooltip","react_1","dir","textDirection","root","children","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TextDirectionProvider } from '@griffel/react';\nimport {\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n} from '@fluentui/react-shared-contexts';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n) => {\n const { slots, slotProps } = getSlots<FluentProviderSlots>(state);\n\n return (\n <Provider value={contextValues.provider}>\n <ThemeProvider value={contextValues.theme}>\n <ThemeClassNameProvider value={contextValues.themeClassName}>\n <TooltipVisibilityProvider value={contextValues.tooltip}>\n <TextDirectionProvider dir={contextValues.textDirection}>\n <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"]}
|
|
@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useFluentProvider_unstable = void 0;
|
|
7
|
-
|
|
8
7
|
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
|
9
|
-
|
|
10
8
|
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
|
11
|
-
|
|
12
9
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
13
|
-
|
|
14
10
|
const React = /*#__PURE__*/require("react");
|
|
15
|
-
|
|
16
11
|
const useFluentProviderThemeStyleTag_1 = /*#__PURE__*/require("./useFluentProviderThemeStyleTag");
|
|
17
12
|
/**
|
|
18
13
|
* Create the state required to render FluentProvider.
|
|
@@ -23,8 +18,6 @@ const useFluentProviderThemeStyleTag_1 = /*#__PURE__*/require("./useFluentProvid
|
|
|
23
18
|
* @param props - props from this instance of FluentProvider
|
|
24
19
|
* @param ref - reference to root HTMLElement of FluentProvider
|
|
25
20
|
*/
|
|
26
|
-
|
|
27
|
-
|
|
28
21
|
const useFluentProvider_unstable = (props, ref) => {
|
|
29
22
|
const parentContext = react_shared_contexts_1.useFluent_unstable();
|
|
30
23
|
const parentTheme = useTheme();
|
|
@@ -33,7 +26,6 @@ const useFluentProvider_unstable = (props, ref) => {
|
|
|
33
26
|
* nesting providers with the same "dir" should not add additional attributes to DOM
|
|
34
27
|
* see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93
|
|
35
28
|
*/
|
|
36
|
-
|
|
37
29
|
const {
|
|
38
30
|
applyStylesToPortals = true,
|
|
39
31
|
dir = parentContext.dir,
|
|
@@ -49,8 +41,8 @@ const useFluentProvider_unstable = (props, ref) => {
|
|
|
49
41
|
=============================================
|
|
50
42
|
Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.
|
|
51
43
|
`);
|
|
52
|
-
}
|
|
53
|
-
|
|
44
|
+
}
|
|
45
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
54
46
|
}, []);
|
|
55
47
|
return {
|
|
56
48
|
applyStylesToPortals,
|
|
@@ -64,30 +56,27 @@ const useFluentProvider_unstable = (props, ref) => {
|
|
|
64
56
|
components: {
|
|
65
57
|
root: 'div'
|
|
66
58
|
},
|
|
67
|
-
root: react_utilities_1.getNativeElementProps('div', {
|
|
59
|
+
root: react_utilities_1.getNativeElementProps('div', {
|
|
60
|
+
...props,
|
|
68
61
|
dir,
|
|
69
62
|
ref: react_utilities_1.useMergedRefs(ref, react_tabster_1.useFocusVisible())
|
|
70
63
|
})
|
|
71
64
|
};
|
|
72
65
|
};
|
|
73
|
-
|
|
74
66
|
exports.useFluentProvider_unstable = useFluentProvider_unstable;
|
|
75
|
-
|
|
76
67
|
function mergeThemes(a, b) {
|
|
77
68
|
// Merge impacts perf: we should like to avoid it if it's possible
|
|
78
69
|
if (a && b) {
|
|
79
|
-
return {
|
|
70
|
+
return {
|
|
71
|
+
...a,
|
|
80
72
|
...b
|
|
81
73
|
};
|
|
82
74
|
}
|
|
83
|
-
|
|
84
75
|
if (a) {
|
|
85
76
|
return a;
|
|
86
77
|
}
|
|
87
|
-
|
|
88
78
|
return b;
|
|
89
79
|
}
|
|
90
|
-
|
|
91
80
|
function useTheme() {
|
|
92
81
|
return React.useContext(react_shared_contexts_1.ThemeContext_unstable);
|
|
93
82
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AAKA;AACA;AACA;AAGA;;;;;;;;;AASO,MAAMA,0BAA0B,GAAG,CACxCC,KAA0B,EAC1BC,GAA2B,KACJ;EACvB,MAAMC,aAAa,GAAGC,0CAAS,EAAE;EACjC,MAAMC,WAAW,GAAGC,QAAQ,EAAE;EAE9B;;;;;EAKA,MAAM;IACJC,oBAAoB,GAAG,IAAI;IAC3BC,GAAG,GAAGL,aAAa,CAACK,GAAG;IACvBC,cAAc,GAAGN,aAAa,CAACM,cAAc;IAC7CC;EAAK,CACN,GAAGT,KAAK;EACT,MAAMU,WAAW,GAAGC,WAAW,CAACP,WAAW,EAAEK,KAAK,CAAC;EAEnDG,KAAK,CAACC,SAAS,CAAC,MAAK;IACnB,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,IAAIN,WAAW,KAAKO,SAAS,EAAE;MACtE;MACAC,OAAO,CAACC,IAAI,CAAC;;;;OAIZ,CAAC;;IAEJ;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACLb,oBAAoB;IACpBC,GAAG;IACHC,cAAc;IACdC,KAAK,EAAEC,WAAW;IAClBU,cAAc,EAAEC,+DAA8B,CAAC;MAAEZ,KAAK,EAAEC,WAAW;MAAEF;IAAc,CAAE,CAAC;IAEtFc,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IAEDA,IAAI,EAAEC,uCAAqB,CAAC,KAAK,EAAE;MACjC,GAAGxB,KAAK;MACRO,GAAG;MACHN,GAAG,EAAEuB,+BAAa,CAACvB,GAAG,EAAEwB,+BAAe,EAAkB;KAC1D;GACF;AACH,CAAC;AAjDYC,kCAA0B;AAmDvC,SAASf,WAAW,CAACgB,CAAoB,EAAEC,CAAoB;EAC7D;EACA,IAAID,CAAC,IAAIC,CAAC,EAAE;IACV,OAAO;MAAE,GAAGD,CAAC;MAAE,GAAGC;IAAC,CAAE;;EAGvB,IAAID,CAAC,EAAE;IACL,OAAOA,CAAC;;EAGV,OAAOC,CAAC;AACV;AAEA,SAASvB,QAAQ;EACf,OAAOO,KAAK,CAACiB,UAAU,CAAC1B,6CAAY,CAAC;AACvC","names":["useFluentProvider_unstable","props","ref","parentContext","react_shared_contexts_1","parentTheme","useTheme","applyStylesToPortals","dir","targetDocument","theme","mergedTheme","mergeThemes","React","useEffect","process","env","NODE_ENV","undefined","console","warn","themeClassName","useFluentProviderThemeStyleTag_1","components","root","react_utilities_1","react_tabster_1","exports","a","b","useContext"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts"],"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 {\n applyStylesToPortals = true,\n dir = parentContext.dir,\n targetDocument = parentContext.targetDocument,\n theme,\n } = 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 applyStylesToPortals,\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"]}
|
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useFluentProviderContextValues_unstable = void 0;
|
|
7
|
-
|
|
8
7
|
const React = /*#__PURE__*/require("react");
|
|
9
|
-
|
|
10
8
|
function useFluentProviderContextValues_unstable(state) {
|
|
11
9
|
const {
|
|
12
10
|
applyStylesToPortals,
|
|
@@ -19,8 +17,8 @@ function useFluentProviderContextValues_unstable(state) {
|
|
|
19
17
|
const provider = React.useMemo(() => ({
|
|
20
18
|
dir,
|
|
21
19
|
targetDocument
|
|
22
|
-
}), [dir, targetDocument]);
|
|
23
|
-
|
|
20
|
+
}), [dir, targetDocument]);
|
|
21
|
+
// "Tooltip" component mutates an object in this context, instance should be stable
|
|
24
22
|
const [tooltip] = React.useState(() => ({}));
|
|
25
23
|
return {
|
|
26
24
|
provider,
|
|
@@ -30,6 +28,5 @@ function useFluentProviderContextValues_unstable(state) {
|
|
|
30
28
|
themeClassName: applyStylesToPortals ? root.className : themeClassName
|
|
31
29
|
};
|
|
32
30
|
}
|
|
33
|
-
|
|
34
31
|
exports.useFluentProviderContextValues_unstable = useFluentProviderContextValues_unstable;
|
|
35
32
|
//# sourceMappingURL=useFluentProviderContextValues.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AAGA,SAAgBA,uCAAuC,CAACC,KAA0B;EAChF,MAAM;IAAEC,oBAAoB;IAAEC,GAAG;IAAEC,IAAI;IAAEC,cAAc;IAAEC,KAAK;IAAEC;EAAc,CAAE,GAAGN,KAAK;EAExF,MAAMO,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAAC,OAAO;IAAEP,GAAG;IAAEE;EAAc,CAAE,CAAC,EAAE,CAACF,GAAG,EAAEE,cAAc,CAAC,CAAC;EACtF;EACA,MAAM,CAACM,OAAO,CAAC,GAAGF,KAAK,CAACG,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;EAE5C,OAAO;IACLJ,QAAQ;IACRK,aAAa,EAAEV,GAAG;IAClBQ,OAAO;IACPL,KAAK;IACLC,cAAc,EAAEL,oBAAoB,GAAGE,IAAI,CAACU,SAAU,GAAGP;GAC1D;AACH;AAdAQ","names":["useFluentProviderContextValues_unstable","state","applyStylesToPortals","dir","root","targetDocument","theme","themeClassName","provider","React","useMemo","tooltip","useState","textDirection","className","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n const { applyStylesToPortals, dir, root, targetDocument, theme, themeClassName } = state;\n\n const provider = React.useMemo(() => ({ dir, targetDocument }), [dir, targetDocument]);\n // \"Tooltip\" component mutates an object in this context, instance should be stable\n const [tooltip] = React.useState(() => ({}));\n\n return {\n provider,\n textDirection: dir,\n tooltip,\n theme,\n themeClassName: applyStylesToPortals ? root.className! : themeClassName,\n };\n}\n"]}
|
|
@@ -4,33 +4,26 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useFluentProviderStyles_unstable = exports.fluentProviderClassNames = void 0;
|
|
7
|
-
|
|
8
7
|
const core_1 = /*#__PURE__*/require("@griffel/core");
|
|
9
|
-
|
|
10
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
11
|
-
|
|
12
9
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
13
|
-
|
|
14
10
|
exports.fluentProviderClassNames = {
|
|
15
11
|
root: 'fui-FluentProvider'
|
|
16
12
|
};
|
|
17
|
-
|
|
18
13
|
const useStyles = /*#__PURE__*/core_1.__styles({
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
14
|
+
root: {
|
|
15
|
+
sj55zd: "f19n0e5",
|
|
16
|
+
De3pzq: "fxugw4r",
|
|
17
|
+
fsow6f: ["f1o700av", "fes3tcz"],
|
|
18
|
+
Bahqtrf: "fk6fouc",
|
|
19
|
+
Be2twd7: "fkhj508",
|
|
20
|
+
Bhrd7zp: "figsok6",
|
|
21
|
+
Bg96gwp: "f1i3iumi"
|
|
27
22
|
}
|
|
28
23
|
}, {
|
|
29
|
-
|
|
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);}"]
|
|
30
25
|
});
|
|
31
26
|
/** Applies style classnames to slots */
|
|
32
|
-
|
|
33
|
-
|
|
34
27
|
const useFluentProviderStyles_unstable = state => {
|
|
35
28
|
const renderer = react_1.useRenderer_unstable();
|
|
36
29
|
const styles = useStyles({
|
|
@@ -40,6 +33,5 @@ const useFluentProviderStyles_unstable = state => {
|
|
|
40
33
|
state.root.className = core_1.mergeClasses(exports.fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);
|
|
41
34
|
return state;
|
|
42
35
|
};
|
|
43
|
-
|
|
44
36
|
exports.useFluentProviderStyles_unstable = useFluentProviderStyles_unstable;
|
|
45
37
|
//# sourceMappingURL=useFluentProviderStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAIaA,gCAAwB,GAAwC;EAC3EC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGC,eAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAO1B;AAEF;AACO,MAAMC,gCAAgC,GAAIC,KAA0B,IAAI;EAC7E,MAAMC,QAAQ,GAAGC,4BAAoB,EAAE;EACvC,MAAMC,MAAM,GAAGN,SAAS,CAAC;IAAEO,GAAG,EAAEJ,KAAK,CAACI,GAAG;IAAEH;EAAQ,CAAE,CAAC;EAEtDD,KAAK,CAACJ,IAAI,CAACS,SAAS,GAAGP,mBAAY,CACjCH,gCAAwB,CAACC,IAAI,EAC7BI,KAAK,CAACM,cAAc,EACpBH,MAAM,CAACP,IAAI,EACXI,KAAK,CAACJ,IAAI,CAACS,SAAS,CACrB;EAED,OAAOL,KAAK;AACd,CAAC;AAZYL,wCAAgC","names":["exports","root","useStyles","core_1","useFluentProviderStyles_unstable","state","renderer","react_1","styles","dir","className","themeClassName"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {\n root: 'fui-FluentProvider',\n};\n\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n textAlign: 'left',\n ...typographyStyles.body1,\n },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState) => {\n const renderer = useRenderer_unstable();\n const styles = useStyles({ dir: state.dir, renderer });\n\n state.root.className = mergeClasses(\n fluentProviderClassNames.root,\n state.themeClassName,\n styles.root,\n state.root.className,\n );\n\n return state;\n};\n"]}
|
|
@@ -4,35 +4,29 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useFluentProviderThemeStyleTag = void 0;
|
|
7
|
-
|
|
8
7
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
9
|
-
|
|
8
|
+
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
10
9
|
const React = /*#__PURE__*/require("react");
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
10
|
+
const useFluentProviderStyles_1 = /*#__PURE__*/require("./useFluentProviderStyles");
|
|
11
|
+
// String concatenation is used to prevent bundlers to complain with older versions of React
|
|
15
12
|
const useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : react_utilities_1.useIsomorphicLayoutEffect;
|
|
16
|
-
|
|
17
|
-
const createStyleTag = (target, id) => {
|
|
13
|
+
const createStyleTag = (target, elementAttributes) => {
|
|
18
14
|
if (!target) {
|
|
19
15
|
return undefined;
|
|
20
16
|
}
|
|
21
|
-
|
|
22
17
|
const tag = target.createElement('style');
|
|
23
|
-
|
|
18
|
+
Object.keys(elementAttributes).forEach(attrName => {
|
|
19
|
+
tag.setAttribute(attrName, elementAttributes[attrName]);
|
|
20
|
+
});
|
|
24
21
|
target.head.appendChild(tag);
|
|
25
22
|
return tag;
|
|
26
23
|
};
|
|
27
|
-
|
|
28
24
|
const insertSheet = (tag, rule) => {
|
|
29
25
|
const sheet = tag.sheet;
|
|
30
|
-
|
|
31
26
|
if (sheet) {
|
|
32
27
|
if (sheet.cssRules.length > 0) {
|
|
33
28
|
sheet.deleteRule(0);
|
|
34
29
|
}
|
|
35
|
-
|
|
36
30
|
sheet.insertRule(rule, 0);
|
|
37
31
|
} else if (process.env.NODE_ENV !== 'production') {
|
|
38
32
|
// eslint-disable-next-line no-console
|
|
@@ -44,15 +38,15 @@ const insertSheet = (tag, rule) => {
|
|
|
44
38
|
*
|
|
45
39
|
* @returns CSS class to apply the rule
|
|
46
40
|
*/
|
|
47
|
-
|
|
48
|
-
|
|
49
41
|
const useFluentProviderThemeStyleTag = options => {
|
|
50
42
|
const {
|
|
51
43
|
targetDocument,
|
|
52
44
|
theme
|
|
53
45
|
} = options;
|
|
46
|
+
const renderer = react_1.useRenderer_unstable();
|
|
54
47
|
const styleTag = React.useRef();
|
|
55
48
|
const styleTagId = react_utilities_1.useId(useFluentProviderStyles_1.fluentProviderClassNames.root);
|
|
49
|
+
const styleElementAttributes = renderer.styleElementAttributes;
|
|
56
50
|
const cssVarsAsString = React.useMemo(() => {
|
|
57
51
|
return theme ? Object.keys(theme).reduce((cssVarRule, cssVar) => {
|
|
58
52
|
cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;
|
|
@@ -61,19 +55,19 @@ const useFluentProviderThemeStyleTag = options => {
|
|
|
61
55
|
}, [theme]);
|
|
62
56
|
const rule = `.${styleTagId} { ${cssVarsAsString} }`;
|
|
63
57
|
useInsertionEffect(() => {
|
|
64
|
-
styleTag.current = createStyleTag(targetDocument,
|
|
65
|
-
|
|
58
|
+
styleTag.current = createStyleTag(targetDocument, {
|
|
59
|
+
...styleElementAttributes,
|
|
60
|
+
id: styleTagId
|
|
61
|
+
});
|
|
66
62
|
if (styleTag.current) {
|
|
67
63
|
insertSheet(styleTag.current, rule);
|
|
68
64
|
return () => {
|
|
69
65
|
var _a;
|
|
70
|
-
|
|
71
66
|
(_a = styleTag.current) === null || _a === void 0 ? void 0 : _a.remove();
|
|
72
67
|
};
|
|
73
68
|
}
|
|
74
|
-
}, [styleTagId, targetDocument, rule]);
|
|
69
|
+
}, [styleTagId, targetDocument, rule, styleElementAttributes]);
|
|
75
70
|
return styleTagId;
|
|
76
71
|
};
|
|
77
|
-
|
|
78
72
|
exports.useFluentProviderThemeStyleTag = useFluentProviderThemeStyleTag;
|
|
79
73
|
//# sourceMappingURL=useFluentProviderThemeStyleTag.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
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":"../src/","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/lib-commonjs/index.js
CHANGED
|
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.useFluentProviderThemeStyleTag = exports.useFluentProviderStyles_unstable = exports.useFluentProvider_unstable = exports.useFluentProviderContextValues_unstable = exports.renderFluentProvider_unstable = exports.FluentProvider = exports.fluentProviderClassNames = void 0;
|
|
7
|
-
|
|
8
7
|
var FluentProvider_1 = /*#__PURE__*/require("./FluentProvider");
|
|
9
|
-
|
|
10
8
|
Object.defineProperty(exports, "fluentProviderClassNames", {
|
|
11
9
|
enumerable: true,
|
|
12
10
|
get: function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACEA;EAAAC;EAAAC;IAAA,gDAAwB;EAAA;AAAA;AACxBF;EAAAC;EAAAC;IAAA,sCAAc;EAAA;AAAA;AACdF;EAAAC;EAAAC;IAAA,qDAA6B;EAAA;AAAA;AAC7BF;EAAAC;EAAAC;IAAA,+DAAuC;EAAA;AAAA;AACvCF;EAAAC;EAAAC;IAAA,kDAA0B;EAAA;AAAA;AAC1BF;EAAAC;EAAAC;IAAA,wDAAgC;EAAA;AAAA;AAChCF;EAAAC;EAAAC;IAAA,sDAA8B;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/index.ts"],"sourcesContent":["export {\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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-provider",
|
|
3
|
-
"version": "9.1
|
|
3
|
+
"version": "9.2.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": "9.0.0-beta.
|
|
31
|
-
"@fluentui/scripts": "
|
|
30
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.19",
|
|
31
|
+
"@fluentui/scripts": "*"
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@griffel/core": "^1.
|
|
35
|
-
"@griffel/react": "^1.
|
|
34
|
+
"@griffel/core": "^1.9.0",
|
|
35
|
+
"@griffel/react": "^1.5.2",
|
|
36
36
|
"@fluentui/react-shared-contexts": "^9.1.4",
|
|
37
|
-
"@fluentui/react-tabster": "^9.3.
|
|
37
|
+
"@fluentui/react-tabster": "^9.3.6",
|
|
38
38
|
"@fluentui/react-theme": "^9.1.5",
|
|
39
|
-
"@fluentui/react-utilities": "^9.
|
|
39
|
+
"@fluentui/react-utilities": "^9.4.0",
|
|
40
40
|
"tslib": "^2.1.0"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|