@fluentui/react-provider 0.0.0-nightly-20230317-1454.1 → 0.0.0-nightly-20230321-0440.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 +13 -13
- package/CHANGELOG.md +9 -9
- package/lib/FluentProvider.js +1 -1
- package/lib/FluentProvider.js.map +1 -1
- package/lib/components/FluentProvider/FluentProvider.js +6 -6
- package/lib/components/FluentProvider/FluentProvider.js.map +1 -1
- package/lib/components/FluentProvider/FluentProvider.types.js.map +1 -1
- package/lib/components/FluentProvider/index.js +7 -7
- package/lib/components/FluentProvider/index.js.map +1 -1
- package/lib/components/FluentProvider/renderFluentProvider.js +7 -5
- package/lib/components/FluentProvider/renderFluentProvider.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProvider.js +12 -12
- package/lib/components/FluentProvider/useFluentProvider.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProviderContextValues.js +1 -1
- package/lib/components/FluentProvider/useFluentProviderContextValues.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProviderStyles.js +4 -4
- package/lib/components/FluentProvider/useFluentProviderStyles.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js +11 -10
- package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/FluentProvider.js +4 -5
- package/lib-commonjs/FluentProvider.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/FluentProvider.js +14 -18
- package/lib-commonjs/components/FluentProvider/FluentProvider.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/FluentProvider.types.js +2 -3
- package/lib-commonjs/components/FluentProvider/FluentProvider.types.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/index.js +10 -11
- package/lib-commonjs/components/FluentProvider/index.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/renderFluentProvider.js +37 -32
- package/lib-commonjs/components/FluentProvider/renderFluentProvider.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProvider.js +84 -70
- package/lib-commonjs/components/FluentProvider/useFluentProvider.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.js +35 -32
- package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.js +30 -48
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js +64 -65
- package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
- package/lib-commonjs/index.js +47 -20
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +9 -8
- package/.swcrc +0 -39
@@ -1,15 +1,14 @@
|
|
1
1
|
"use strict";
|
2
|
+
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
3
|
-
|
4
|
+
value: true
|
4
5
|
});
|
5
|
-
const
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
//# sourceMappingURL=index.js.map
|
14
|
-
|
6
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
7
|
+
tslib_1.__exportStar(require("./FluentProvider"), exports);
|
8
|
+
tslib_1.__exportStar(require("./FluentProvider.types"), exports);
|
9
|
+
tslib_1.__exportStar(require("./renderFluentProvider"), exports);
|
10
|
+
tslib_1.__exportStar(require("./useFluentProvider"), exports);
|
11
|
+
tslib_1.__exportStar(require("./useFluentProviderStyles"), exports);
|
12
|
+
tslib_1.__exportStar(require("./useFluentProviderContextValues"), exports);
|
13
|
+
tslib_1.__exportStar(require("./useFluentProviderThemeStyleTag"), exports);
|
15
14
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"names":["tslib_1","__exportStar","require","exports"],"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"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,sBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,4BAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,4BAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,yBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,+BAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,sCAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,sCAAAC,OAAA"}
|
@@ -1,36 +1,41 @@
|
|
1
1
|
"use strict";
|
2
|
+
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
3
|
-
|
4
|
-
});
|
5
|
-
Object.defineProperty(exports, "renderFluentProvider_unstable", {
|
6
|
-
enumerable: true,
|
7
|
-
get: ()=>renderFluentProvider_unstable
|
4
|
+
value: true
|
8
5
|
});
|
9
|
-
|
10
|
-
const
|
11
|
-
const
|
12
|
-
const
|
13
|
-
const
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
6
|
+
exports.renderFluentProvider_unstable = void 0;
|
7
|
+
const React = /*#__PURE__*/require("react");
|
8
|
+
const react_1 = /*#__PURE__*/require("@griffel/react");
|
9
|
+
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
10
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
11
|
+
/**
|
12
|
+
* Render the final JSX of FluentProvider
|
13
|
+
*/
|
14
|
+
const renderFluentProvider_unstable = (state, contextValues) => {
|
15
|
+
const {
|
16
|
+
slots,
|
17
|
+
slotProps
|
18
|
+
} = react_utilities_1.getSlots(state);
|
19
|
+
// Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable
|
20
|
+
// instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is
|
21
|
+
// Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>
|
22
|
+
return React.createElement(react_shared_contexts_1.Provider_unstable, {
|
23
|
+
value: contextValues.provider
|
24
|
+
}, React.createElement(react_shared_contexts_1.ThemeProvider_unstable, {
|
25
|
+
value: contextValues.theme
|
26
|
+
}, React.createElement(react_shared_contexts_1.ThemeClassNameProvider_unstable, {
|
27
|
+
value: contextValues.themeClassName
|
28
|
+
}, React.createElement(react_shared_contexts_1.CustomStyleHooksProvider_unstable, {
|
29
|
+
value: contextValues.customStyleHooks_unstable
|
30
|
+
}, React.createElement(react_shared_contexts_1.TooltipVisibilityProvider_unstable, {
|
31
|
+
value: contextValues.tooltip
|
32
|
+
}, React.createElement(react_1.TextDirectionProvider, {
|
33
|
+
dir: contextValues.textDirection
|
34
|
+
}, React.createElement(react_shared_contexts_1.OverridesProvider_unstable, {
|
35
|
+
value: contextValues.overrides_unstable
|
36
|
+
}, React.createElement(slots.root, {
|
37
|
+
...slotProps.root
|
38
|
+
}, state.root.children))))))));
|
39
|
+
};
|
40
|
+
exports.renderFluentProvider_unstable = renderFluentProvider_unstable;
|
36
41
|
//# sourceMappingURL=renderFluentProvider.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"names":["React","require","react_1","react_shared_contexts_1","react_utilities_1","renderFluentProvider_unstable","state","contextValues","slots","slotProps","getSlots","createElement","Provider_unstable","value","provider","ThemeProvider_unstable","theme","ThemeClassNameProvider_unstable","themeClassName","CustomStyleHooksProvider_unstable","customStyleHooks_unstable","TooltipVisibilityProvider_unstable","tooltip","TextDirectionProvider","dir","textDirection","OverridesProvider_unstable","overrides_unstable","root","children","exports"],"sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TextDirectionProvider } from '@griffel/react';\nimport {\n OverridesProvider_unstable as OverridesProvider,\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n CustomStyleHooksProvider_unstable as CustomStyleHooksProvider,\n CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\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 // Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable\n // instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is\n // Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>\n\n return (\n <Provider value={contextValues.provider}>\n <ThemeProvider value={contextValues.theme}>\n <ThemeClassNameProvider value={contextValues.themeClassName}>\n <CustomStyleHooksProvider\n value={contextValues.customStyleHooks_unstable as Required<CustomStyleHooksContextValue>}\n >\n <TooltipVisibilityProvider value={contextValues.tooltip}>\n <TextDirectionProvider dir={contextValues.textDirection}>\n <OverridesProvider value={contextValues.overrides_unstable}>\n <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n </OverridesProvider>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </CustomStyleHooksProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,OAAA,gBAAAD,OAAA;AACA,MAAAE,uBAAA,gBAAAF,OAAA;AASA,MAAAG,iBAAA,gBAAAH,OAAA;AAGA;;;AAGO,MAAMI,6BAA6B,GAAGA,CAC3CC,KAA0B,EAC1BC,aAA0C,KACxC;EACF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,iBAAA,CAAAM,QAAQ,CAAsBJ,KAAK,CAAC;EAEjE;EACA;EACA;EAEA,OACEN,KAAA,CAAAW,aAAA,CAACR,uBAAA,CAAAS,iBAAQ;IAACC,KAAK,EAAEN,aAAa,CAACO;EAAQ,GACrCd,KAAA,CAAAW,aAAA,CAACR,uBAAA,CAAAY,sBAAa;IAACF,KAAK,EAAEN,aAAa,CAACS;EAAK,GACvChB,KAAA,CAAAW,aAAA,CAACR,uBAAA,CAAAc,+BAAsB;IAACJ,KAAK,EAAEN,aAAa,CAACW;EAAc,GACzDlB,KAAA,CAAAW,aAAA,CAACR,uBAAA,CAAAgB,iCAAwB;IACvBN,KAAK,EAAEN,aAAa,CAACa;EAAmE,GAExFpB,KAAA,CAAAW,aAAA,CAACR,uBAAA,CAAAkB,kCAAyB;IAACR,KAAK,EAAEN,aAAa,CAACe;EAAO,GACrDtB,KAAA,CAAAW,aAAA,CAACT,OAAA,CAAAqB,qBAAqB;IAACC,GAAG,EAAEjB,aAAa,CAACkB;EAAa,GACrDzB,KAAA,CAAAW,aAAA,CAACR,uBAAA,CAAAuB,0BAAiB;IAACb,KAAK,EAAEN,aAAa,CAACoB;EAAkB,GACxD3B,KAAA,CAAAW,aAAA,CAACH,KAAK,CAACoB,IAAI;IAAA,GAAKnB,SAAS,CAACmB;EAAI,GAAGtB,KAAK,CAACsB,IAAI,CAACC,QAAQ,CAAc,CAChD,CACE,CACE,CACH,CACJ,CACX,CACP;AAEf,CAAC;AA7BYC,OAAA,CAAAzB,6BAA6B,GAAAA,6BAAA"}
|
@@ -1,83 +1,97 @@
|
|
1
1
|
"use strict";
|
2
|
+
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
3
|
-
|
4
|
-
});
|
5
|
-
Object.defineProperty(exports, "useFluentProvider_unstable", {
|
6
|
-
enumerable: true,
|
7
|
-
get: ()=>useFluentProvider_unstable
|
4
|
+
value: true
|
8
5
|
});
|
9
|
-
|
10
|
-
const
|
11
|
-
const
|
12
|
-
const
|
13
|
-
const
|
14
|
-
const
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
6
|
+
exports.useFluentProvider_unstable = void 0;
|
7
|
+
const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
|
8
|
+
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
9
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
10
|
+
const React = /*#__PURE__*/require("react");
|
11
|
+
const useFluentProviderThemeStyleTag_1 = /*#__PURE__*/require("./useFluentProviderThemeStyleTag");
|
12
|
+
/**
|
13
|
+
* Create the state required to render FluentProvider.
|
14
|
+
*
|
15
|
+
* The returned state can be modified with hooks such as useFluentProviderStyles_unstable,
|
16
|
+
* before being passed to renderFluentProvider_unstable.
|
17
|
+
*
|
18
|
+
* @param props - props from this instance of FluentProvider
|
19
|
+
* @param ref - reference to root HTMLElement of FluentProvider
|
20
|
+
*/
|
21
|
+
const useFluentProvider_unstable = (props, ref) => {
|
22
|
+
const parentContext = react_shared_contexts_1.useFluent_unstable();
|
23
|
+
const parentTheme = useTheme();
|
24
|
+
const parentOverrides = react_shared_contexts_1.useOverrides_unstable();
|
25
|
+
const parentCustomStyleHooks = react_shared_contexts_1.useCustomStyleHooks_unstable();
|
26
|
+
/**
|
27
|
+
* TODO: add merge functions to "dir" merge,
|
28
|
+
* nesting providers with the same "dir" should not add additional attributes to DOM
|
29
|
+
* see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93
|
30
|
+
*/
|
31
|
+
const {
|
32
|
+
applyStylesToPortals = true,
|
33
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
34
|
+
customStyleHooks_unstable,
|
35
|
+
dir = parentContext.dir,
|
36
|
+
targetDocument = parentContext.targetDocument,
|
37
|
+
theme,
|
38
|
+
overrides_unstable: overrides = {}
|
39
|
+
} = props;
|
40
|
+
const mergedTheme = shallowMerge(parentTheme, theme);
|
41
|
+
const mergedOverrides = shallowMerge(parentOverrides, overrides);
|
42
|
+
// parentCustomStyleHooks will not be a partial
|
43
|
+
const mergedCustomStyleHooks = shallowMerge(parentCustomStyleHooks, customStyleHooks_unstable);
|
44
|
+
React.useEffect(() => {
|
45
|
+
if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {
|
46
|
+
// eslint-disable-next-line no-console
|
47
|
+
console.warn(`
|
34
48
|
FluentProvider: your "theme" is not defined !
|
35
49
|
=============================================
|
36
50
|
Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.
|
37
51
|
`);
|
38
|
-
|
52
|
+
}
|
39
53
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
54
|
+
}, []);
|
55
|
+
return {
|
56
|
+
applyStylesToPortals,
|
57
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
58
|
+
customStyleHooks_unstable: mergedCustomStyleHooks,
|
59
|
+
dir,
|
60
|
+
targetDocument,
|
61
|
+
theme: mergedTheme,
|
62
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
63
|
+
overrides_unstable: mergedOverrides,
|
64
|
+
themeClassName: useFluentProviderThemeStyleTag_1.useFluentProviderThemeStyleTag({
|
65
|
+
theme: mergedTheme,
|
66
|
+
targetDocument
|
67
|
+
}),
|
68
|
+
components: {
|
69
|
+
root: 'div'
|
70
|
+
},
|
71
|
+
root: react_utilities_1.getNativeElementProps('div', {
|
72
|
+
...props,
|
73
|
+
dir,
|
74
|
+
ref: react_utilities_1.useMergedRefs(ref, react_tabster_1.useFocusVisible({
|
75
|
+
targetDocument
|
76
|
+
}))
|
77
|
+
})
|
78
|
+
};
|
65
79
|
};
|
80
|
+
exports.useFluentProvider_unstable = useFluentProvider_unstable;
|
66
81
|
function shallowMerge(a, b) {
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
82
|
+
// Merge impacts perf: we should like to avoid it if it's possible
|
83
|
+
if (a && b) {
|
84
|
+
return {
|
85
|
+
...a,
|
86
|
+
...b
|
87
|
+
};
|
88
|
+
}
|
89
|
+
if (a) {
|
90
|
+
return a;
|
91
|
+
}
|
92
|
+
return b;
|
78
93
|
}
|
79
94
|
function useTheme() {
|
80
|
-
|
81
|
-
}
|
82
|
-
|
95
|
+
return React.useContext(react_shared_contexts_1.ThemeContext_unstable);
|
96
|
+
}
|
83
97
|
//# sourceMappingURL=useFluentProvider.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"names":["react_tabster_1","require","react_shared_contexts_1","react_utilities_1","React","useFluentProviderThemeStyleTag_1","useFluentProvider_unstable","props","ref","parentContext","useFluent_unstable","parentTheme","useTheme","parentOverrides","useOverrides_unstable","parentCustomStyleHooks","useCustomStyleHooks_unstable","applyStylesToPortals","customStyleHooks_unstable","dir","targetDocument","theme","overrides_unstable","overrides","mergedTheme","shallowMerge","mergedOverrides","mergedCustomStyleHooks","useEffect","process","env","NODE_ENV","undefined","console","warn","themeClassName","useFluentProviderThemeStyleTag","components","root","getNativeElementProps","useMergedRefs","useFocusVisible","exports","a","b","useContext","ThemeContext_unstable"],"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 useOverrides_unstable as useOverrides,\n useCustomStyleHooks_unstable as useCustomStyleHooks,\n} from '@fluentui/react-shared-contexts';\nimport type {\n CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\n ThemeContextValue_unstable as ThemeContextValue,\n} from '@fluentui/react-shared-contexts';\n\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 const parentOverrides = useOverrides();\n const parentCustomStyleHooks = useCustomStyleHooks();\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 // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable,\n dir = parentContext.dir,\n targetDocument = parentContext.targetDocument,\n theme,\n overrides_unstable: overrides = {},\n } = props;\n const mergedTheme = shallowMerge(parentTheme, theme);\n\n const mergedOverrides = shallowMerge(parentOverrides, overrides);\n\n // parentCustomStyleHooks will not be a partial\n const mergedCustomStyleHooks = shallowMerge(\n parentCustomStyleHooks,\n customStyleHooks_unstable,\n ) as CustomStyleHooksContextValue;\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 // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable: mergedCustomStyleHooks,\n dir,\n targetDocument,\n theme: mergedTheme,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable: mergedOverrides,\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>({ targetDocument })),\n }),\n };\n};\n\nfunction shallowMerge<T>(a: T, b: T): T {\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"],"mappings":";;;;;;AAAA,MAAAA,eAAA,gBAAAC,OAAA;AACA,MAAAC,uBAAA,gBAAAD,OAAA;AAWA,MAAAE,iBAAA,gBAAAF,OAAA;AACA,MAAAG,KAAA,gBAAAH,OAAA;AACA,MAAAI,gCAAA,gBAAAJ,OAAA;AAGA;;;;;;;;;AASO,MAAMK,0BAA0B,GAAGA,CACxCC,KAA0B,EAC1BC,GAA2B,KACJ;EACvB,MAAMC,aAAa,GAAGP,uBAAA,CAAAQ,kBAAS,EAAE;EACjC,MAAMC,WAAW,GAAGC,QAAQ,EAAE;EAC9B,MAAMC,eAAe,GAAGX,uBAAA,CAAAY,qBAAY,EAAE;EACtC,MAAMC,sBAAsB,GAAGb,uBAAA,CAAAc,4BAAmB,EAAE;EAEpD;;;;;EAKA,MAAM;IACJC,oBAAoB,GAAG,IAAI;IAC3B;IACAC,yBAAyB;IACzBC,GAAG,GAAGV,aAAa,CAACU,GAAG;IACvBC,cAAc,GAAGX,aAAa,CAACW,cAAc;IAC7CC,KAAK;IACLC,kBAAkB,EAAEC,SAAS,GAAG;EAAE,CACnC,GAAGhB,KAAK;EACT,MAAMiB,WAAW,GAAGC,YAAY,CAACd,WAAW,EAAEU,KAAK,CAAC;EAEpD,MAAMK,eAAe,GAAGD,YAAY,CAACZ,eAAe,EAAEU,SAAS,CAAC;EAEhE;EACA,MAAMI,sBAAsB,GAAGF,YAAY,CACzCV,sBAAsB,EACtBG,yBAAyB,CACM;EAEjCd,KAAK,CAACwB,SAAS,CAAC,MAAK;IACnB,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,IAAIP,WAAW,KAAKQ,SAAS,EAAE;MACtE;MACAC,OAAO,CAACC,IAAI,CAAC;;;;OAIZ,CAAC;;IAEJ;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACLjB,oBAAoB;IACpB;IACAC,yBAAyB,EAAES,sBAAsB;IACjDR,GAAG;IACHC,cAAc;IACdC,KAAK,EAAEG,WAAW;IAClB;IACAF,kBAAkB,EAAEI,eAAe;IACnCS,cAAc,EAAE9B,gCAAA,CAAA+B,8BAA8B,CAAC;MAAEf,KAAK,EAAEG,WAAW;MAAEJ;IAAc,CAAE,CAAC;IAEtFiB,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IAEDA,IAAI,EAAEnC,iBAAA,CAAAoC,qBAAqB,CAAC,KAAK,EAAE;MACjC,GAAGhC,KAAK;MACRY,GAAG;MACHX,GAAG,EAAEL,iBAAA,CAAAqC,aAAa,CAAChC,GAAG,EAAER,eAAA,CAAAyC,eAAe,CAAiB;QAAErB;MAAc,CAAE,CAAC;KAC5E;GACF;AACH,CAAC;AAlEYsB,OAAA,CAAApC,0BAA0B,GAAAA,0BAAA;AAoEvC,SAASmB,YAAYA,CAAIkB,CAAI,EAAEC,CAAI;EACjC;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,SAAShC,QAAQA,CAAA;EACf,OAAOR,KAAK,CAACyC,UAAU,CAAC3C,uBAAA,CAAA4C,qBAAY,CAAC;AACvC"}
|
@@ -1,38 +1,41 @@
|
|
1
1
|
"use strict";
|
2
|
+
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
3
|
-
|
4
|
-
});
|
5
|
-
Object.defineProperty(exports, "useFluentProviderContextValues_unstable", {
|
6
|
-
enumerable: true,
|
7
|
-
get: ()=>useFluentProviderContextValues_unstable
|
4
|
+
value: true
|
8
5
|
});
|
9
|
-
|
10
|
-
const
|
6
|
+
exports.useFluentProviderContextValues_unstable = void 0;
|
7
|
+
const React = /*#__PURE__*/require("react");
|
11
8
|
function useFluentProviderContextValues_unstable(state) {
|
9
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
10
|
+
const {
|
11
|
+
applyStylesToPortals,
|
12
12
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
13
|
+
customStyleHooks_unstable,
|
14
|
+
dir,
|
15
|
+
root,
|
16
|
+
targetDocument,
|
17
|
+
theme,
|
18
|
+
themeClassName,
|
19
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
20
|
+
overrides_unstable
|
21
|
+
} = state;
|
22
|
+
const provider = React.useMemo(() => ({
|
23
|
+
dir,
|
24
|
+
targetDocument
|
25
|
+
}), [dir, targetDocument]);
|
26
|
+
// "Tooltip" component mutates an object in this context, instance should be stable
|
27
|
+
const [tooltip] = React.useState(() => ({}));
|
28
|
+
return {
|
29
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
30
|
+
customStyleHooks_unstable,
|
31
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
32
|
+
overrides_unstable,
|
33
|
+
provider,
|
34
|
+
textDirection: dir,
|
35
|
+
tooltip,
|
36
|
+
theme,
|
37
|
+
themeClassName: applyStylesToPortals ? root.className : themeClassName
|
38
|
+
};
|
39
|
+
}
|
40
|
+
exports.useFluentProviderContextValues_unstable = useFluentProviderContextValues_unstable;
|
38
41
|
//# sourceMappingURL=useFluentProviderContextValues.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"names":["React","require","useFluentProviderContextValues_unstable","state","applyStylesToPortals","customStyleHooks_unstable","dir","root","targetDocument","theme","themeClassName","overrides_unstable","provider","useMemo","tooltip","useState","textDirection","className","exports"],"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 // eslint-disable-next-line @typescript-eslint/naming-convention\n const {\n applyStylesToPortals,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable,\n dir,\n root,\n targetDocument,\n theme,\n themeClassName,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable,\n } = 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 // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable,\n provider,\n textDirection: dir,\n tooltip,\n theme,\n themeClassName: applyStylesToPortals ? root.className! : themeClassName,\n };\n}\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AAGA,SAAgBC,uCAAuCA,CAACC,KAA0B;EAChF;EACA,MAAM;IACJC,oBAAoB;IACpB;IACAC,yBAAyB;IACzBC,GAAG;IACHC,IAAI;IACJC,cAAc;IACdC,KAAK;IACLC,cAAc;IACd;IACAC;EAAkB,CACnB,GAAGR,KAAK;EAET,MAAMS,QAAQ,GAAGZ,KAAK,CAACa,OAAO,CAAC,OAAO;IAAEP,GAAG;IAAEE;EAAc,CAAE,CAAC,EAAE,CAACF,GAAG,EAAEE,cAAc,CAAC,CAAC;EACtF;EACA,MAAM,CAACM,OAAO,CAAC,GAAGd,KAAK,CAACe,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;EAE5C,OAAO;IACL;IACAV,yBAAyB;IACzB;IACAM,kBAAkB;IAClBC,QAAQ;IACRI,aAAa,EAAEV,GAAG;IAClBQ,OAAO;IACPL,KAAK;IACLC,cAAc,EAAEN,oBAAoB,GAAGG,IAAI,CAACU,SAAU,GAAGP;GAC1D;AACH;AA9BAQ,OAAA,CAAAhB,uCAAA,GAAAA,uCAAA"}
|
@@ -1,55 +1,37 @@
|
|
1
1
|
"use strict";
|
2
|
+
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
3
|
-
|
4
|
-
});
|
5
|
-
function _export(target, all) {
|
6
|
-
for(var name in all)Object.defineProperty(target, name, {
|
7
|
-
enumerable: true,
|
8
|
-
get: all[name]
|
9
|
-
});
|
10
|
-
}
|
11
|
-
_export(exports, {
|
12
|
-
fluentProviderClassNames: ()=>fluentProviderClassNames,
|
13
|
-
useFluentProviderStyles_unstable: ()=>useFluentProviderStyles_unstable
|
4
|
+
value: true
|
14
5
|
});
|
15
|
-
|
16
|
-
const
|
17
|
-
const
|
18
|
-
|
6
|
+
exports.useFluentProviderStyles_unstable = exports.fluentProviderClassNames = void 0;
|
7
|
+
const core_1 = /*#__PURE__*/require("@griffel/core");
|
8
|
+
const react_1 = /*#__PURE__*/require("@griffel/react");
|
9
|
+
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
10
|
+
exports.fluentProviderClassNames = {
|
11
|
+
root: 'fui-FluentProvider'
|
19
12
|
};
|
20
|
-
const useStyles = /*#__PURE__*/
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
Bhrd7zp: "figsok6",
|
31
|
-
Bg96gwp: "f1i3iumi"
|
32
|
-
}
|
13
|
+
const useStyles = /*#__PURE__*/core_1.__styles({
|
14
|
+
root: {
|
15
|
+
sj55zd: "f19n0e5",
|
16
|
+
De3pzq: "fxugw4r",
|
17
|
+
fsow6f: ["f1o700av", "fes3tcz"],
|
18
|
+
Bahqtrf: "fk6fouc",
|
19
|
+
Be2twd7: "fkhj508",
|
20
|
+
Bhrd7zp: "figsok6",
|
21
|
+
Bg96gwp: "f1i3iumi"
|
22
|
+
}
|
33
23
|
}, {
|
34
|
-
|
35
|
-
".f19n0e5{color:var(--colorNeutralForeground1);}",
|
36
|
-
".fxugw4r{background-color:var(--colorNeutralBackground1);}",
|
37
|
-
".f1o700av{text-align:left;}",
|
38
|
-
".fes3tcz{text-align:right;}",
|
39
|
-
".fk6fouc{font-family:var(--fontFamilyBase);}",
|
40
|
-
".fkhj508{font-size:var(--fontSizeBase300);}",
|
41
|
-
".figsok6{font-weight:var(--fontWeightRegular);}",
|
42
|
-
".f1i3iumi{line-height:var(--lineHeightBase300);}"
|
43
|
-
]
|
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);}"]
|
44
25
|
});
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
|
54
|
-
|
26
|
+
/** Applies style classnames to slots */
|
27
|
+
const useFluentProviderStyles_unstable = state => {
|
28
|
+
const renderer = react_1.useRenderer_unstable();
|
29
|
+
const styles = useStyles({
|
30
|
+
dir: state.dir,
|
31
|
+
renderer
|
32
|
+
});
|
33
|
+
state.root.className = core_1.mergeClasses(exports.fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);
|
34
|
+
return state;
|
35
|
+
};
|
36
|
+
exports.useFluentProviderStyles_unstable = useFluentProviderStyles_unstable;
|
55
37
|
//# sourceMappingURL=useFluentProviderStyles.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"names":["core_1","require","react_1","react_theme_1","exports","fluentProviderClassNames","root","useStyles","__styles","sj55zd","De3pzq","fsow6f","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useFluentProviderStyles_unstable","state","renderer","useRenderer_unstable","styles","dir","className","mergeClasses","themeClassName"],"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"],"mappings":";;;;;;AAAA,MAAAA,MAAA,gBAAAC,OAAA;AACA,MAAAC,OAAA,gBAAAD,OAAA;AACA,MAAAE,aAAA,gBAAAF,OAAA;AAIaG,OAAA,CAAAC,wBAAwB,GAAwC;EAC3EC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGP,MAAA,CAAAQ,QAAU;EAAAF,IAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAO1B;AAEF;AACO,MAAMC,gCAAgC,GAAIC,KAA0B,IAAI;EAC7E,MAAMC,QAAQ,GAAGjB,OAAA,CAAAkB,oBAAoB,EAAE;EACvC,MAAMC,MAAM,GAAGd,SAAS,CAAC;IAAEe,GAAG,EAAEJ,KAAK,CAACI,GAAG;IAAEH;EAAQ,CAAE,CAAC;EAEtDD,KAAK,CAACZ,IAAI,CAACiB,SAAS,GAAGvB,MAAA,CAAAwB,YAAY,CACjCpB,OAAA,CAAAC,wBAAwB,CAACC,IAAI,EAC7BY,KAAK,CAACO,cAAc,EACpBJ,MAAM,CAACf,IAAI,EACXY,KAAK,CAACZ,IAAI,CAACiB,SAAS,CACrB;EAED,OAAOL,KAAK;AACd,CAAC;AAZYd,OAAA,CAAAa,gCAAgC,GAAAA,gCAAA"}
|