@fluentui/react-provider 9.0.0-rc.5 → 9.0.0-rc.6
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 +66 -1
- package/CHANGELOG.md +17 -2
- package/dist/react-provider.d.ts +6 -0
- package/lib/components/FluentProvider/useFluentProviderStyles.d.ts +6 -1
- package/lib/components/FluentProvider/useFluentProviderStyles.js +8 -1
- package/lib/components/FluentProvider/useFluentProviderStyles.js.map +1 -1
- package/lib/components/FluentProvider/useThemeStyleTag.js +2 -2
- package/lib/components/FluentProvider/useThemeStyleTag.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.d.ts +6 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.js +9 -2
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useThemeStyleTag.js +1 -1
- package/lib-commonjs/components/FluentProvider/useThemeStyleTag.js.map +1 -1
- package/package.json +8 -18
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,72 @@
|
|
|
2
2
|
"name": "@fluentui/react-provider",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Tue, 19 Apr 2022 19:13:59 GMT",
|
|
6
|
+
"tag": "@fluentui/react-provider_v9.0.0-rc.6",
|
|
7
|
+
"version": "9.0.0-rc.6",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "seanmonahan@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-provider",
|
|
13
|
+
"commit": "086a675fd0c648944ff4048450190a0a13467de3",
|
|
14
|
+
"comment": "Add static classnames to Provider"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "olfedias@microsoft.com",
|
|
18
|
+
"package": "@fluentui/react-provider",
|
|
19
|
+
"commit": "e569d6e04d83cbcc6225e61db52ff81d2addd363",
|
|
20
|
+
"comment": "chore: Update Griffel to latest version"
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
"author": "beachball",
|
|
24
|
+
"package": "@fluentui/react-provider",
|
|
25
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.0.0-rc.5",
|
|
26
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "beachball",
|
|
30
|
+
"package": "@fluentui/react-provider",
|
|
31
|
+
"comment": "Bump @fluentui/react-tabster to v9.0.0-rc.6",
|
|
32
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "beachball",
|
|
36
|
+
"package": "@fluentui/react-provider",
|
|
37
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
|
|
38
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-provider",
|
|
43
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
|
|
44
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
"author": "beachball",
|
|
48
|
+
"package": "@fluentui/react-provider",
|
|
49
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4",
|
|
50
|
+
"commit": "9c8592decacb9f7b1dc608a03c9f991918806008"
|
|
51
|
+
}
|
|
52
|
+
],
|
|
53
|
+
"none": [
|
|
54
|
+
{
|
|
55
|
+
"author": "mgodbolt@microsoft.com",
|
|
56
|
+
"package": "@fluentui/react-provider",
|
|
57
|
+
"commit": "905e46db07ada986fd7885531f72a71b7bbaabdc",
|
|
58
|
+
"comment": "create v9 api extractor config and set all v9 packags to use it, suppress forgotten export"
|
|
59
|
+
},
|
|
60
|
+
{
|
|
61
|
+
"author": "elcraig@microsoft.com",
|
|
62
|
+
"package": "@fluentui/react-provider",
|
|
63
|
+
"commit": "b7f17e976f9e058f39c9fce4f0f9bb6eb4dfa577",
|
|
64
|
+
"comment": "Update React dev deps and hoist them to the repo root"
|
|
65
|
+
}
|
|
66
|
+
]
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"date": "Fri, 04 Mar 2022 05:17:39 GMT",
|
|
6
71
|
"tag": "@fluentui/react-provider_v9.0.0-rc.5",
|
|
7
72
|
"version": "9.0.0-rc.5",
|
|
8
73
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,27 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-provider
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 19 Apr 2022 19:13:59 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.0-rc.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.0.0-rc.6)
|
|
8
|
+
|
|
9
|
+
Tue, 19 Apr 2022 19:13:59 GMT
|
|
10
|
+
[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
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- Add static classnames to Provider ([PR #21960](https://github.com/microsoft/fluentui/pull/21960) by seanmonahan@microsoft.com)
|
|
15
|
+
- 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 #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
17
|
+
- Bump @fluentui/react-tabster to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
18
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
19
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
20
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.4 ([PR #22367](https://github.com/microsoft/fluentui/pull/22367) by beachball)
|
|
21
|
+
|
|
7
22
|
## [9.0.0-rc.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.0.0-rc.5)
|
|
8
23
|
|
|
9
|
-
Fri, 04 Mar 2022 05:
|
|
24
|
+
Fri, 04 Mar 2022 05:17:39 GMT
|
|
10
25
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.0.0-rc.4..@fluentui/react-provider_v9.0.0-rc.5)
|
|
11
26
|
|
|
12
27
|
### Changes
|
package/dist/react-provider.d.ts
CHANGED
|
@@ -4,6 +4,7 @@ import type { PartialTheme } from '@fluentui/react-theme';
|
|
|
4
4
|
import type { ProviderContextValue } from '@fluentui/react-shared-contexts';
|
|
5
5
|
import * as React_2 from 'react';
|
|
6
6
|
import type { Slot } from '@fluentui/react-utilities';
|
|
7
|
+
import { SlotClassNames } from '@fluentui/react-utilities';
|
|
7
8
|
import type { Theme } from '@fluentui/react-theme';
|
|
8
9
|
import type { ThemeClassNameContextValue } from '@fluentui/react-shared-contexts';
|
|
9
10
|
import type { TooltipContextType } from '@fluentui/react-shared-contexts';
|
|
@@ -12,8 +13,13 @@ import { useTheme } from '@fluentui/react-shared-contexts';
|
|
|
12
13
|
|
|
13
14
|
export declare const FluentProvider: React_2.ForwardRefExoticComponent<FluentProviderProps & React_2.RefAttributes<HTMLElement>>;
|
|
14
15
|
|
|
16
|
+
/**
|
|
17
|
+
* @deprecated Use `fluentProviderClassNames.root` instead.
|
|
18
|
+
*/
|
|
15
19
|
export declare const fluentProviderClassName = "fui-FluentProvider";
|
|
16
20
|
|
|
21
|
+
export declare const fluentProviderClassNames: SlotClassNames<FluentProviderSlots>;
|
|
22
|
+
|
|
17
23
|
declare interface FluentProviderCommons {
|
|
18
24
|
/** Sets the direction of text & generated styles. */
|
|
19
25
|
dir: 'ltr' | 'rtl';
|
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
import type { FluentProviderState } from './FluentProvider.types';
|
|
1
|
+
import type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';
|
|
2
|
+
import { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `fluentProviderClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const fluentProviderClassName = "fui-FluentProvider";
|
|
7
|
+
export declare const fluentProviderClassNames: SlotClassNames<FluentProviderSlots>;
|
|
3
8
|
/** Applies style classnames to slots */
|
|
4
9
|
export declare const useFluentProviderStyles_unstable: (state: FluentProviderState) => FluentProviderState;
|
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
import { __styles, mergeClasses } from '@griffel/react';
|
|
2
2
|
import { tokens } from '@fluentui/react-theme';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `fluentProviderClassNames.root` instead.
|
|
5
|
+
*/
|
|
6
|
+
|
|
3
7
|
export const fluentProviderClassName = 'fui-FluentProvider';
|
|
8
|
+
export const fluentProviderClassNames = {
|
|
9
|
+
root: 'fui-FluentProvider'
|
|
10
|
+
};
|
|
4
11
|
|
|
5
12
|
const useStyles = /*#__PURE__*/__styles({
|
|
6
13
|
"root": {
|
|
@@ -18,7 +25,7 @@ const useStyles = /*#__PURE__*/__styles({
|
|
|
18
25
|
|
|
19
26
|
export const useFluentProviderStyles_unstable = state => {
|
|
20
27
|
const styles = useStyles();
|
|
21
|
-
state.root.className = mergeClasses(
|
|
28
|
+
state.root.className = mergeClasses(fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);
|
|
22
29
|
return state;
|
|
23
30
|
};
|
|
24
31
|
//# sourceMappingURL=useFluentProviderStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/FluentProvider/useFluentProviderStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,MAAT,QAAuB,uBAAvB;
|
|
1
|
+
{"version":3,"sources":["components/FluentProvider/useFluentProviderStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA;;AAEG;;AACH,OAAO,MAAM,uBAAuB,GAAG,oBAAhC;AACP,OAAO,MAAM,wBAAwB,GAAwC;AAC3E,EAAA,IAAI,EAAE;AADqE,CAAtE;;AAIP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAUA;;;AACA,OAAO,MAAM,gCAAgC,GAAI,KAAD,IAA+B;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,wBAAwB,CAAC,IADQ,EAEjC,KAAK,CAAC,cAF2B,EAGjC,MAAM,CAAC,IAH0B,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;AAOA,SAAO,KAAP;AACD,CAXM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `fluentProviderClassNames.root` instead.\n */\nexport const fluentProviderClassName = 'fui-FluentProvider';\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 fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState) => {\n const styles = useStyles();\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"],"sourceRoot":"../src/"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useId, usePrevious } from '@fluentui/react-utilities';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import {
|
|
3
|
+
import { fluentProviderClassNames } from './useFluentProviderStyles';
|
|
4
4
|
/**
|
|
5
5
|
* Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
|
|
6
6
|
*
|
|
@@ -12,7 +12,7 @@ export const useThemeStyleTag = options => {
|
|
|
12
12
|
targetDocument,
|
|
13
13
|
theme
|
|
14
14
|
} = options;
|
|
15
|
-
const styleTagId = useId(
|
|
15
|
+
const styleTagId = useId(fluentProviderClassNames.root);
|
|
16
16
|
const styleTag = React.useMemo(() => {
|
|
17
17
|
if (!targetDocument) {
|
|
18
18
|
return null;
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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,4 +1,9 @@
|
|
|
1
|
-
import type { FluentProviderState } from './FluentProvider.types';
|
|
1
|
+
import type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';
|
|
2
|
+
import { SlotClassNames } from '@fluentui/react-utilities';
|
|
3
|
+
/**
|
|
4
|
+
* @deprecated Use `fluentProviderClassNames.root` instead.
|
|
5
|
+
*/
|
|
2
6
|
export declare const fluentProviderClassName = "fui-FluentProvider";
|
|
7
|
+
export declare const fluentProviderClassNames: SlotClassNames<FluentProviderSlots>;
|
|
3
8
|
/** Applies style classnames to slots */
|
|
4
9
|
export declare const useFluentProviderStyles_unstable: (state: FluentProviderState) => FluentProviderState;
|
|
@@ -3,13 +3,20 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.useFluentProviderStyles_unstable = exports.fluentProviderClassName = void 0;
|
|
6
|
+
exports.useFluentProviderStyles_unstable = exports.fluentProviderClassNames = exports.fluentProviderClassName = void 0;
|
|
7
7
|
|
|
8
8
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
|
9
9
|
|
|
10
10
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
|
11
|
+
/**
|
|
12
|
+
* @deprecated Use `fluentProviderClassNames.root` instead.
|
|
13
|
+
*/
|
|
14
|
+
|
|
11
15
|
|
|
12
16
|
exports.fluentProviderClassName = 'fui-FluentProvider';
|
|
17
|
+
exports.fluentProviderClassNames = {
|
|
18
|
+
root: 'fui-FluentProvider'
|
|
19
|
+
};
|
|
13
20
|
|
|
14
21
|
const useStyles = /*#__PURE__*/react_1.__styles({
|
|
15
22
|
"root": {
|
|
@@ -27,7 +34,7 @@ const useStyles = /*#__PURE__*/react_1.__styles({
|
|
|
27
34
|
|
|
28
35
|
const useFluentProviderStyles_unstable = state => {
|
|
29
36
|
const styles = useStyles();
|
|
30
|
-
state.root.className = react_1.mergeClasses(exports.
|
|
37
|
+
state.root.className = react_1.mergeClasses(exports.fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);
|
|
31
38
|
return state;
|
|
32
39
|
};
|
|
33
40
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/FluentProvider/useFluentProviderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;
|
|
1
|
+
{"version":3,"sources":["components/FluentProvider/useFluentProviderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,uBAAA,GAA0B,oBAA1B;AACA,OAAA,CAAA,wBAAA,GAAgE;AAC3E,EAAA,IAAI,EAAE;AADqE,CAAhE;;AAIb,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAUA;;;AACO,MAAM,gCAAgC,GAAI,KAAD,IAA+B;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,wBAAA,CAAyB,IADJ,EAErB,KAAK,CAAC,cAFe,EAGrB,MAAM,CAAC,IAHc,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;AAOA,SAAO,KAAP;AACD,CAXM;;AAAM,OAAA,CAAA,gCAAA,GAAgC,gCAAhC","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `fluentProviderClassNames.root` instead.\n */\nexport const fluentProviderClassName = 'fui-FluentProvider';\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 fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState) => {\n const styles = useStyles();\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"],"sourceRoot":"../src/"}
|
|
@@ -22,7 +22,7 @@ const useThemeStyleTag = options => {
|
|
|
22
22
|
targetDocument,
|
|
23
23
|
theme
|
|
24
24
|
} = options;
|
|
25
|
-
const styleTagId = react_utilities_1.useId(useFluentProviderStyles_1.
|
|
25
|
+
const styleTagId = react_utilities_1.useId(useFluentProviderStyles_1.fluentProviderClassNames.root);
|
|
26
26
|
const styleTag = React.useMemo(() => {
|
|
27
27
|
if (!targetDocument) {
|
|
28
28
|
return null;
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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/"}
|
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.6",
|
|
4
4
|
"description": "Fluent UI React provider component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -28,25 +28,15 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
|
32
|
-
"@fluentui/scripts": "^1.0.0"
|
|
33
|
-
"@types/enzyme": "3.10.3",
|
|
34
|
-
"@types/enzyme-adapter-react-16": "1.0.3",
|
|
35
|
-
"@types/react": "16.9.42",
|
|
36
|
-
"@types/react-dom": "16.9.10",
|
|
37
|
-
"@types/react-test-renderer": "^16.0.0",
|
|
38
|
-
"enzyme": "~3.10.0",
|
|
39
|
-
"enzyme-adapter-react-16": "^1.15.0",
|
|
40
|
-
"react": "16.8.6",
|
|
41
|
-
"react-dom": "16.8.6",
|
|
42
|
-
"react-test-renderer": "^16.3.0"
|
|
31
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.4",
|
|
32
|
+
"@fluentui/scripts": "^1.0.0"
|
|
43
33
|
},
|
|
44
34
|
"dependencies": {
|
|
45
|
-
"@griffel/react": "1.0.
|
|
46
|
-
"@fluentui/react-shared-contexts": "9.0.0-rc.
|
|
47
|
-
"@fluentui/react-tabster": "9.0.0-rc.
|
|
48
|
-
"@fluentui/react-theme": "9.0.0-rc.
|
|
49
|
-
"@fluentui/react-utilities": "9.0.0-rc.
|
|
35
|
+
"@griffel/react": "1.0.3",
|
|
36
|
+
"@fluentui/react-shared-contexts": "9.0.0-rc.5",
|
|
37
|
+
"@fluentui/react-tabster": "9.0.0-rc.6",
|
|
38
|
+
"@fluentui/react-theme": "9.0.0-rc.5",
|
|
39
|
+
"@fluentui/react-utilities": "9.0.0-rc.6",
|
|
50
40
|
"tslib": "^2.1.0"
|
|
51
41
|
},
|
|
52
42
|
"peerDependencies": {
|