@fluentui/react-provider 9.4.4 → 9.4.5

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.
Files changed (57) hide show
  1. package/.swcrc +30 -0
  2. package/CHANGELOG.json +52 -1
  3. package/CHANGELOG.md +17 -2
  4. package/lib/FluentProvider.js.map +1 -1
  5. package/lib/components/FluentProvider/FluentProvider.js.map +1 -1
  6. package/lib/components/FluentProvider/FluentProvider.types.js.map +1 -1
  7. package/lib/components/FluentProvider/index.js.map +1 -1
  8. package/lib/components/FluentProvider/renderFluentProvider.js +1 -3
  9. package/lib/components/FluentProvider/renderFluentProvider.js.map +1 -1
  10. package/lib/components/FluentProvider/useFluentProvider.js +4 -4
  11. package/lib/components/FluentProvider/useFluentProvider.js.map +1 -1
  12. package/lib/components/FluentProvider/useFluentProviderContextValues.js.map +1 -1
  13. package/lib/components/FluentProvider/useFluentProviderStyles.js.map +1 -1
  14. package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js +2 -2
  15. package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
  16. package/lib/index.js.map +1 -1
  17. package/lib-commonjs/FluentProvider.js +5 -4
  18. package/lib-commonjs/FluentProvider.js.map +1 -1
  19. package/lib-commonjs/components/FluentProvider/FluentProvider.js +18 -14
  20. package/lib-commonjs/components/FluentProvider/FluentProvider.js.map +1 -1
  21. package/lib-commonjs/components/FluentProvider/FluentProvider.types.js +3 -2
  22. package/lib-commonjs/components/FluentProvider/FluentProvider.types.js.map +1 -1
  23. package/lib-commonjs/components/FluentProvider/index.js +11 -10
  24. package/lib-commonjs/components/FluentProvider/index.js.map +1 -1
  25. package/lib-commonjs/components/FluentProvider/renderFluentProvider.js +32 -37
  26. package/lib-commonjs/components/FluentProvider/renderFluentProvider.js.map +1 -1
  27. package/lib-commonjs/components/FluentProvider/useFluentProvider.js +70 -84
  28. package/lib-commonjs/components/FluentProvider/useFluentProvider.js.map +1 -1
  29. package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.js +32 -35
  30. package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.js.map +1 -1
  31. package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.js +48 -30
  32. package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.js.map +1 -1
  33. package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js +66 -64
  34. package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
  35. package/lib-commonjs/index.js +20 -47
  36. package/lib-commonjs/index.js.map +1 -1
  37. package/package.json +9 -8
  38. package/lib-amd/FluentProvider.js +0 -6
  39. package/lib-amd/FluentProvider.js.map +0 -1
  40. package/lib-amd/components/FluentProvider/FluentProvider.js +0 -13
  41. package/lib-amd/components/FluentProvider/FluentProvider.js.map +0 -1
  42. package/lib-amd/components/FluentProvider/FluentProvider.types.js +0 -5
  43. package/lib-amd/components/FluentProvider/FluentProvider.types.js.map +0 -1
  44. package/lib-amd/components/FluentProvider/index.js +0 -12
  45. package/lib-amd/components/FluentProvider/index.js.map +0 -1
  46. package/lib-amd/components/FluentProvider/renderFluentProvider.js +0 -24
  47. package/lib-amd/components/FluentProvider/renderFluentProvider.js.map +0 -1
  48. package/lib-amd/components/FluentProvider/useFluentProvider.js +0 -69
  49. package/lib-amd/components/FluentProvider/useFluentProvider.js.map +0 -1
  50. package/lib-amd/components/FluentProvider/useFluentProviderContextValues.js +0 -29
  51. package/lib-amd/components/FluentProvider/useFluentProviderContextValues.js.map +0 -1
  52. package/lib-amd/components/FluentProvider/useFluentProviderStyles.js +0 -20
  53. package/lib-amd/components/FluentProvider/useFluentProviderStyles.js.map +0 -1
  54. package/lib-amd/components/FluentProvider/useFluentProviderThemeStyleTag.js +0 -67
  55. package/lib-amd/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +0 -1
  56. package/lib-amd/index.js +0 -13
  57. package/lib-amd/index.js.map +0 -1
@@ -1 +1 @@
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":["../src/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
+ {"version":3,"sources":["../../../lib/components/FluentProvider/renderFluentProvider.js"],"sourcesContent":["import * as React from 'react';\nimport { TextDirectionProvider } from '@griffel/react';\nimport { OverridesProvider_unstable as OverridesProvider, Provider_unstable as Provider, TooltipVisibilityProvider_unstable as TooltipVisibilityProvider, ThemeProvider_unstable as ThemeProvider, ThemeClassNameProvider_unstable as ThemeClassNameProvider, CustomStyleHooksProvider_unstable as CustomStyleHooksProvider } from '@fluentui/react-shared-contexts';\nimport { getSlots } from '@fluentui/react-utilities';\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (state, contextValues) => {\n const {\n slots,\n slotProps\n } = getSlots(state);\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 return /*#__PURE__*/React.createElement(Provider, {\n value: contextValues.provider\n }, /*#__PURE__*/React.createElement(ThemeProvider, {\n value: contextValues.theme\n }, /*#__PURE__*/React.createElement(ThemeClassNameProvider, {\n value: contextValues.themeClassName\n }, /*#__PURE__*/React.createElement(CustomStyleHooksProvider, {\n value: contextValues.customStyleHooks_unstable\n }, /*#__PURE__*/React.createElement(TooltipVisibilityProvider, {\n value: contextValues.tooltip\n }, /*#__PURE__*/React.createElement(TextDirectionProvider, {\n dir: contextValues.textDirection\n }, /*#__PURE__*/React.createElement(OverridesProvider, {\n value: contextValues.overrides_unstable\n }, /*#__PURE__*/React.createElement(slots.root, slotProps.root, state.root.children))))))));\n};\n//# sourceMappingURL=renderFluentProvider.js.map"],"names":["renderFluentProvider_unstable","state","contextValues","slots","slotProps","getSlots","React","createElement","Provider","value","provider","ThemeProvider","theme","ThemeClassNameProvider","themeClassName","CustomStyleHooksProvider","customStyleHooks_unstable","TooltipVisibilityProvider","tooltip","TextDirectionProvider","dir","textDirection","OverridesProvider","overrides_unstable","root","children"],"mappings":";;;;+BAOaA;;aAAAA;;;6DAPU;wBACe;qCAC6R;gCAC1S;AAIlB,MAAMA,gCAAgC,CAACC,OAAOC,gBAAkB;IACrE,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACJ;IACb,+FAA+F;IAC/F,oFAAoF;IACpF,0GAA0G;IAC1G,OAAO,WAAW,GAAEK,OAAMC,aAAa,CAACC,sCAAQ,EAAE;QAChDC,OAAOP,cAAcQ,QAAQ;IAC/B,GAAG,WAAW,GAAEJ,OAAMC,aAAa,CAACI,2CAAa,EAAE;QACjDF,OAAOP,cAAcU,KAAK;IAC5B,GAAG,WAAW,GAAEN,OAAMC,aAAa,CAACM,oDAAsB,EAAE;QAC1DJ,OAAOP,cAAcY,cAAc;IACrC,GAAG,WAAW,GAAER,OAAMC,aAAa,CAACQ,sDAAwB,EAAE;QAC5DN,OAAOP,cAAcc,yBAAyB;IAChD,GAAG,WAAW,GAAEV,OAAMC,aAAa,CAACU,uDAAyB,EAAE;QAC7DR,OAAOP,cAAcgB,OAAO;IAC9B,GAAG,WAAW,GAAEZ,OAAMC,aAAa,CAACY,6BAAqB,EAAE;QACzDC,KAAKlB,cAAcmB,aAAa;IAClC,GAAG,WAAW,GAAEf,OAAMC,aAAa,CAACe,+CAAiB,EAAE;QACrDb,OAAOP,cAAcqB,kBAAkB;IACzC,GAAG,WAAW,GAAEjB,OAAMC,aAAa,CAACJ,MAAMqB,IAAI,EAAEpB,UAAUoB,IAAI,EAAEvB,MAAMuB,IAAI,CAACC,QAAQ;AACrF,GACA,gDAAgD"}
@@ -1,97 +1,83 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useFluentProvider_unstable", {
6
+ enumerable: true,
7
+ get: ()=>useFluentProvider_unstable
5
8
  });
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(`
9
+ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
10
+ const _reactTabster = require("@fluentui/react-tabster");
11
+ const _reactSharedContexts = require("@fluentui/react-shared-contexts");
12
+ const _reactUtilities = require("@fluentui/react-utilities");
13
+ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
14
+ const _useFluentProviderThemeStyleTag = require("./useFluentProviderThemeStyleTag");
15
+ const useFluentProvider_unstable = (props, ref)=>{
16
+ const parentContext = (0, _reactSharedContexts.useFluent_unstable)();
17
+ const parentTheme = useTheme();
18
+ const parentOverrides = (0, _reactSharedContexts.useOverrides_unstable)();
19
+ const parentCustomStyleHooks = (0, _reactSharedContexts.useCustomStyleHooks_unstable)();
20
+ /**
21
+ * TODO: add merge functions to "dir" merge,
22
+ * nesting providers with the same "dir" should not add additional attributes to DOM
23
+ * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93
24
+ */ const { applyStylesToPortals =true , // eslint-disable-next-line @typescript-eslint/naming-convention
25
+ customStyleHooks_unstable , dir =parentContext.dir , targetDocument =parentContext.targetDocument , theme , overrides_unstable: overrides = {} } = props;
26
+ const mergedTheme = shallowMerge(parentTheme, theme);
27
+ const mergedOverrides = shallowMerge(parentOverrides, overrides);
28
+ // parentCustomStyleHooks will not be a partial
29
+ const mergedCustomStyleHooks = shallowMerge(parentCustomStyleHooks, customStyleHooks_unstable);
30
+ _react.useEffect(()=>{
31
+ if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {
32
+ // eslint-disable-next-line no-console
33
+ console.warn(`
48
34
  FluentProvider: your "theme" is not defined !
49
35
  =============================================
50
36
  Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.
51
37
  `);
52
- }
38
+ }
53
39
  // eslint-disable-next-line react-hooks/exhaustive-deps
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
- };
79
- };
80
- exports.useFluentProvider_unstable = useFluentProvider_unstable;
81
- function shallowMerge(a, b) {
82
- // Merge impacts perf: we should like to avoid it if it's possible
83
- if (a && b) {
40
+ }, []);
84
41
  return {
85
- ...a,
86
- ...b
42
+ applyStylesToPortals,
43
+ // eslint-disable-next-line @typescript-eslint/naming-convention
44
+ customStyleHooks_unstable: mergedCustomStyleHooks,
45
+ dir,
46
+ targetDocument,
47
+ theme: mergedTheme,
48
+ // eslint-disable-next-line @typescript-eslint/naming-convention
49
+ overrides_unstable: mergedOverrides,
50
+ themeClassName: (0, _useFluentProviderThemeStyleTag.useFluentProviderThemeStyleTag)({
51
+ theme: mergedTheme,
52
+ targetDocument
53
+ }),
54
+ components: {
55
+ root: 'div'
56
+ },
57
+ root: (0, _reactUtilities.getNativeElementProps)('div', {
58
+ ...props,
59
+ dir,
60
+ ref: (0, _reactUtilities.useMergedRefs)(ref, (0, _reactTabster.useFocusVisible)({
61
+ targetDocument
62
+ }))
63
+ })
87
64
  };
88
- }
89
- if (a) {
90
- return a;
91
- }
92
- return b;
65
+ };
66
+ function shallowMerge(a, b) {
67
+ // Merge impacts perf: we should like to avoid it if it's possible
68
+ if (a && b) {
69
+ return {
70
+ ...a,
71
+ ...b
72
+ };
73
+ }
74
+ if (a) {
75
+ return a;
76
+ }
77
+ return b;
93
78
  }
94
79
  function useTheme() {
95
- return React.useContext(react_shared_contexts_1.ThemeContext_unstable);
96
- }
80
+ return _react.useContext(_reactSharedContexts.ThemeContext_unstable);
81
+ } //# sourceMappingURL=useFluentProvider.js.map
82
+
97
83
  //# sourceMappingURL=useFluentProvider.js.map
@@ -1 +1 @@
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":["../src/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
+ {"version":3,"sources":["../../../lib/components/FluentProvider/useFluentProvider.js"],"sourcesContent":["import { useFocusVisible } from '@fluentui/react-tabster';\nimport { ThemeContext_unstable as ThemeContext, useFluent_unstable as useFluent, useOverrides_unstable as useOverrides, useCustomStyleHooks_unstable as useCustomStyleHooks } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\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 = (props, ref) => {\n const parentContext = useFluent();\n const parentTheme = useTheme();\n const parentOverrides = useOverrides();\n const parentCustomStyleHooks = useCustomStyleHooks();\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 const mergedOverrides = shallowMerge(parentOverrides, overrides);\n // parentCustomStyleHooks will not be a partial\n const mergedCustomStyleHooks = shallowMerge(parentCustomStyleHooks, customStyleHooks_unstable);\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 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({\n theme: mergedTheme,\n targetDocument\n }),\n components: {\n root: 'div'\n },\n root: getNativeElementProps('div', {\n ...props,\n dir,\n ref: useMergedRefs(ref, useFocusVisible({\n targetDocument\n }))\n })\n };\n};\nfunction shallowMerge(a, b) {\n // Merge impacts perf: we should like to avoid it if it's possible\n if (a && b) {\n return {\n ...a,\n ...b\n };\n }\n if (a) {\n return a;\n }\n return b;\n}\nfunction useTheme() {\n return React.useContext(ThemeContext);\n}\n//# sourceMappingURL=useFluentProvider.js.map"],"names":["useFluentProvider_unstable","props","ref","parentContext","useFluent","parentTheme","useTheme","parentOverrides","useOverrides","parentCustomStyleHooks","useCustomStyleHooks","applyStylesToPortals","customStyleHooks_unstable","dir","targetDocument","theme","overrides_unstable","overrides","mergedTheme","shallowMerge","mergedOverrides","mergedCustomStyleHooks","React","useEffect","process","env","NODE_ENV","undefined","console","warn","themeClassName","useFluentProviderThemeStyleTag","components","root","getNativeElementProps","useMergedRefs","useFocusVisible","a","b","useContext","ThemeContext"],"mappings":";;;;+BAcaA;;aAAAA;;;8BAdmB;qCACmJ;gCAC9H;6DAC9B;gDACwB;AAUxC,MAAMA,6BAA6B,CAACC,OAAOC,MAAQ;IACxD,MAAMC,gBAAgBC,IAAAA,uCAAS;IAC/B,MAAMC,cAAcC;IACpB,MAAMC,kBAAkBC,IAAAA,0CAAY;IACpC,MAAMC,yBAAyBC,IAAAA,iDAAmB;IAClD;;;;EAIA,GACA,MAAM,EACJC,sBAAuB,IAAI,CAAA,EAC3B,gEAAgE;IAChEC,0BAAyB,EACzBC,KAAMV,cAAcU,GAAG,CAAA,EACvBC,gBAAiBX,cAAcW,cAAc,CAAA,EAC7CC,MAAK,EACLC,oBAAoBC,YAAY,CAAC,CAAC,CAAA,EACnC,GAAGhB;IACJ,MAAMiB,cAAcC,aAAad,aAAaU;IAC9C,MAAMK,kBAAkBD,aAAaZ,iBAAiBU;IACtD,+CAA+C;IAC/C,MAAMI,yBAAyBF,aAAaV,wBAAwBG;IACpEU,OAAMC,SAAS,CAAC,IAAM;QACpB,IAAIC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBAAgBR,gBAAgBS,WAAW;YACtE,sCAAsC;YACtCC,QAAQC,IAAI,CAAC,CAAC;;;;MAId,CAAC;QACH,CAAC;IACD,uDAAuD;IACzD,GAAG,EAAE;IACL,OAAO;QACLlB;QACA,gEAAgE;QAChEC,2BAA2BS;QAC3BR;QACAC;QACAC,OAAOG;QACP,gEAAgE;QAChEF,oBAAoBI;QACpBU,gBAAgBC,IAAAA,8DAA8B,EAAC;YAC7ChB,OAAOG;YACPJ;QACF;QACAkB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMC,IAAAA,qCAAqB,EAAC,OAAO;YACjC,GAAGjC,KAAK;YACRY;YACAX,KAAKiC,IAAAA,6BAAa,EAACjC,KAAKkC,IAAAA,6BAAe,EAAC;gBACtCtB;YACF;QACF;IACF;AACF;AACA,SAASK,aAAakB,CAAC,EAAEC,CAAC,EAAE;IAC1B,kEAAkE;IAClE,IAAID,KAAKC,GAAG;QACV,OAAO;YACL,GAAGD,CAAC;YACJ,GAAGC,CAAC;QACN;IACF,CAAC;IACD,IAAID,GAAG;QACL,OAAOA;IACT,CAAC;IACD,OAAOC;AACT;AACA,SAAShC,WAAW;IAClB,OAAOgB,OAAMiB,UAAU,CAACC,0CAAY;AACtC,EACA,6CAA6C"}
@@ -1,41 +1,38 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useFluentProviderContextValues_unstable", {
6
+ enumerable: true,
7
+ get: ()=>useFluentProviderContextValues_unstable
5
8
  });
6
- exports.useFluentProviderContextValues_unstable = void 0;
7
- const React = /*#__PURE__*/require("react");
9
+ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
10
+ const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
8
11
  function useFluentProviderContextValues_unstable(state) {
9
- // eslint-disable-next-line @typescript-eslint/naming-convention
10
- const {
11
- applyStylesToPortals,
12
- // eslint-disable-next-line @typescript-eslint/naming-convention
13
- customStyleHooks_unstable,
14
- dir,
15
- root,
16
- targetDocument,
17
- theme,
18
- themeClassName,
19
12
  // 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;
13
+ const { applyStylesToPortals , // eslint-disable-next-line @typescript-eslint/naming-convention
14
+ customStyleHooks_unstable , dir , root , targetDocument , theme , themeClassName , // eslint-disable-next-line @typescript-eslint/naming-convention
15
+ overrides_unstable } = state;
16
+ const provider = _react.useMemo(()=>({
17
+ dir,
18
+ targetDocument
19
+ }), [
20
+ dir,
21
+ targetDocument
22
+ ]);
23
+ // "Tooltip" component mutates an object in this context, instance should be stable
24
+ const [tooltip] = _react.useState(()=>({}));
25
+ return {
26
+ // eslint-disable-next-line @typescript-eslint/naming-convention
27
+ customStyleHooks_unstable,
28
+ // eslint-disable-next-line @typescript-eslint/naming-convention
29
+ overrides_unstable,
30
+ provider,
31
+ textDirection: dir,
32
+ tooltip,
33
+ theme,
34
+ themeClassName: applyStylesToPortals ? root.className : themeClassName
35
+ };
36
+ } //# sourceMappingURL=useFluentProviderContextValues.js.map
37
+
41
38
  //# sourceMappingURL=useFluentProviderContextValues.js.map
@@ -1 +1 @@
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":["../src/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
+ {"version":3,"sources":["../../../lib/components/FluentProvider/useFluentProviderContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useFluentProviderContextValues_unstable(state) {\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 const provider = React.useMemo(() => ({\n dir,\n targetDocument\n }), [dir, targetDocument]);\n // \"Tooltip\" component mutates an object in this context, instance should be stable\n const [tooltip] = React.useState(() => ({}));\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//# sourceMappingURL=useFluentProviderContextValues.js.map"],"names":["useFluentProviderContextValues_unstable","state","applyStylesToPortals","customStyleHooks_unstable","dir","root","targetDocument","theme","themeClassName","overrides_unstable","provider","React","useMemo","tooltip","useState","textDirection","className"],"mappings":";;;;+BACgBA;;aAAAA;;;6DADO;AAChB,SAASA,wCAAwCC,KAAK,EAAE;IAC7D,gEAAgE;IAChE,MAAM,EACJC,qBAAoB,EACpB,gEAAgE;IAChEC,0BAAyB,EACzBC,IAAG,EACHC,KAAI,EACJC,eAAc,EACdC,MAAK,EACLC,eAAc,EACd,gEAAgE;IAChEC,mBAAkB,EACnB,GAAGR;IACJ,MAAMS,WAAWC,OAAMC,OAAO,CAAC,IAAO,CAAA;YACpCR;YACAE;QACF,CAAA,GAAI;QAACF;QAAKE;KAAe;IACzB,mFAAmF;IACnF,MAAM,CAACO,QAAQ,GAAGF,OAAMG,QAAQ,CAAC,IAAO,CAAA,CAAC,CAAA;IACzC,OAAO;QACL,gEAAgE;QAChEX;QACA,gEAAgE;QAChEM;QACAC;QACAK,eAAeX;QACfS;QACAN;QACAC,gBAAgBN,uBAAuBG,KAAKW,SAAS,GAAGR,cAAc;IACxE;AACF,EACA,0DAA0D"}
@@ -1,37 +1,55 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
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
5
14
  });
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'
15
+ const _core = require("@griffel/core");
16
+ const _react = require("@griffel/react");
17
+ const fluentProviderClassNames = {
18
+ root: 'fui-FluentProvider'
12
19
  };
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
- }
20
+ const useStyles = /*#__PURE__*/ (0, _core["__styles"])({
21
+ root: {
22
+ sj55zd: "f19n0e5",
23
+ De3pzq: "fxugw4r",
24
+ fsow6f: [
25
+ "f1o700av",
26
+ "fes3tcz"
27
+ ],
28
+ Bahqtrf: "fk6fouc",
29
+ Be2twd7: "fkhj508",
30
+ Bhrd7zp: "figsok6",
31
+ Bg96gwp: "f1i3iumi"
32
+ }
23
33
  }, {
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);}"]
34
+ d: [
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
+ ]
25
44
  });
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;
45
+ const useFluentProviderStyles_unstable = (state)=>{
46
+ const renderer = (0, _react.useRenderer_unstable)();
47
+ const styles = useStyles({
48
+ dir: state.dir,
49
+ renderer
50
+ });
51
+ state.root.className = (0, _core.mergeClasses)(fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);
52
+ return state;
53
+ }; //# sourceMappingURL=useFluentProviderStyles.js.map
54
+
37
55
  //# sourceMappingURL=useFluentProviderStyles.js.map
@@ -1 +1 @@
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":["../src/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"}
1
+ {"version":3,"sources":["../../../lib/components/FluentProvider/useFluentProviderStyles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const fluentProviderClassNames = {\n root: 'fui-FluentProvider'\n};\nconst useStyles = /*#__PURE__*/__styles({\n root: {\n sj55zd: \"f19n0e5\",\n De3pzq: \"fxugw4r\",\n fsow6f: [\"f1o700av\", \"fes3tcz\"],\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fkhj508\",\n Bhrd7zp: \"figsok6\",\n Bg96gwp: \"f1i3iumi\"\n }\n}, {\n 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);}\"]\n});\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = state => {\n const renderer = useRenderer_unstable();\n const styles = useStyles({\n dir: state.dir,\n renderer\n });\n state.root.className = mergeClasses(fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);\n return state;\n};\n//# sourceMappingURL=useFluentProviderStyles.js.map"],"names":["fluentProviderClassNames","useFluentProviderStyles_unstable","root","useStyles","__styles","sj55zd","De3pzq","fsow6f","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","state","renderer","useRenderer_unstable","styles","dir","className","mergeClasses","themeClassName"],"mappings":";;;;;;;;;;;IAGaA,wBAAwB,MAAxBA;IAiBAC,gCAAgC,MAAhCA;;sBApB0B;uBACF;AAE9B,MAAMD,2BAA2B;IACtCE,MAAM;AACR;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,iBAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAmD;QAA8D;QAA+B;QAA+B;QAAgD;QAA+C;QAAmD;KAAmD;AAC1X;AAEO,MAAMX,mCAAmCY,CAAAA,QAAS;IACvD,MAAMC,WAAWC,IAAAA,2BAAoB;IACrC,MAAMC,SAASb,UAAU;QACvBc,KAAKJ,MAAMI,GAAG;QACdH;IACF;IACAD,MAAMX,IAAI,CAACgB,SAAS,GAAGC,IAAAA,kBAAY,EAACnB,yBAAyBE,IAAI,EAAEW,MAAMO,cAAc,EAAEJ,OAAOd,IAAI,EAAEW,MAAMX,IAAI,CAACgB,SAAS;IAC1H,OAAOL;AACT,GACA,mDAAmD"}
@@ -1,73 +1,75 @@
1
1
  "use strict";
2
-
3
2
  Object.defineProperty(exports, "__esModule", {
4
- value: true
3
+ value: true
4
+ });
5
+ Object.defineProperty(exports, "useFluentProviderThemeStyleTag", {
6
+ enumerable: true,
7
+ get: ()=>useFluentProviderThemeStyleTag
5
8
  });
6
- exports.useFluentProviderThemeStyleTag = void 0;
7
- const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
8
- const react_1 = /*#__PURE__*/require("@griffel/react");
9
- const React = /*#__PURE__*/require("react");
10
- const useFluentProviderStyles_1 = /*#__PURE__*/require("./useFluentProviderStyles");
9
+ const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
10
+ const _reactUtilities = require("@fluentui/react-utilities");
11
+ const _react = require("@griffel/react");
12
+ const _react1 = /*#__PURE__*/ _interopRequireWildcard(require("react"));
13
+ const _useFluentProviderStyles = require("./useFluentProviderStyles");
11
14
  // String concatenation is used to prevent bundlers to complain with older versions of React
12
- const useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : react_utilities_1.useIsomorphicLayoutEffect;
13
- const createStyleTag = (target, elementAttributes) => {
14
- if (!target) {
15
- return undefined;
16
- }
17
- const tag = target.createElement('style');
18
- Object.keys(elementAttributes).forEach(attrName => {
19
- tag.setAttribute(attrName, elementAttributes[attrName]);
20
- });
21
- target.head.appendChild(tag);
22
- return tag;
23
- };
24
- const insertSheet = (tag, rule) => {
25
- const sheet = tag.sheet;
26
- if (sheet) {
27
- if (sheet.cssRules.length > 0) {
28
- sheet.deleteRule(0);
15
+ const useInsertionEffect = _react1['useInsertion' + 'Effect'] ? _react1['useInsertion' + 'Effect'] : _reactUtilities.useIsomorphicLayoutEffect;
16
+ const createStyleTag = (target, elementAttributes)=>{
17
+ if (!target) {
18
+ return undefined;
29
19
  }
30
- sheet.insertRule(rule, 0);
31
- } else if (process.env.NODE_ENV !== 'production') {
32
- // eslint-disable-next-line no-console
33
- console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');
34
- }
35
- };
36
- /**
37
- * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
38
- *
39
- * @returns CSS class to apply the rule
40
- */
41
- const useFluentProviderThemeStyleTag = options => {
42
- const {
43
- targetDocument,
44
- theme
45
- } = options;
46
- const renderer = react_1.useRenderer_unstable();
47
- const styleTag = React.useRef();
48
- const styleTagId = react_utilities_1.useId(useFluentProviderStyles_1.fluentProviderClassNames.root);
49
- const styleElementAttributes = renderer.styleElementAttributes;
50
- const cssVarsAsString = React.useMemo(() => {
51
- return theme ? Object.keys(theme).reduce((cssVarRule, cssVar) => {
52
- cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;
53
- return cssVarRule;
54
- }, '') : '';
55
- }, [theme]);
56
- const rule = `.${styleTagId} { ${cssVarsAsString} }`;
57
- useInsertionEffect(() => {
58
- styleTag.current = createStyleTag(targetDocument, {
59
- ...styleElementAttributes,
60
- id: styleTagId
20
+ const tag = target.createElement('style');
21
+ Object.keys(elementAttributes).forEach((attrName)=>{
22
+ tag.setAttribute(attrName, elementAttributes[attrName]);
61
23
  });
62
- if (styleTag.current) {
63
- insertSheet(styleTag.current, rule);
64
- return () => {
65
- var _a;
66
- (_a = styleTag.current) === null || _a === void 0 ? void 0 : _a.remove();
67
- };
24
+ target.head.appendChild(tag);
25
+ return tag;
26
+ };
27
+ const insertSheet = (tag, rule)=>{
28
+ const sheet = tag.sheet;
29
+ if (sheet) {
30
+ if (sheet.cssRules.length > 0) {
31
+ sheet.deleteRule(0);
32
+ }
33
+ sheet.insertRule(rule, 0);
34
+ } else if (process.env.NODE_ENV !== 'production') {
35
+ // eslint-disable-next-line no-console
36
+ console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');
68
37
  }
69
- }, [styleTagId, targetDocument, rule, styleElementAttributes]);
70
- return styleTagId;
71
38
  };
72
- exports.useFluentProviderThemeStyleTag = useFluentProviderThemeStyleTag;
39
+ const useFluentProviderThemeStyleTag = (options)=>{
40
+ const { targetDocument , theme } = options;
41
+ const renderer = (0, _react.useRenderer_unstable)();
42
+ const styleTag = _react1.useRef();
43
+ const styleTagId = (0, _reactUtilities.useId)(_useFluentProviderStyles.fluentProviderClassNames.root);
44
+ const styleElementAttributes = renderer.styleElementAttributes;
45
+ const cssVarsAsString = _react1.useMemo(()=>{
46
+ return theme ? Object.keys(theme).reduce((cssVarRule, cssVar)=>{
47
+ cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;
48
+ return cssVarRule;
49
+ }, '') : '';
50
+ }, [
51
+ theme
52
+ ]);
53
+ const rule = `.${styleTagId} { ${cssVarsAsString} }`;
54
+ useInsertionEffect(()=>{
55
+ styleTag.current = createStyleTag(targetDocument, {
56
+ ...styleElementAttributes,
57
+ id: styleTagId
58
+ });
59
+ if (styleTag.current) {
60
+ insertSheet(styleTag.current, rule);
61
+ return ()=>{
62
+ var _styleTag_current;
63
+ (_styleTag_current = styleTag.current) === null || _styleTag_current === void 0 ? void 0 : _styleTag_current.remove();
64
+ };
65
+ }
66
+ }, [
67
+ styleTagId,
68
+ targetDocument,
69
+ rule,
70
+ styleElementAttributes
71
+ ]);
72
+ return styleTagId;
73
+ }; //# sourceMappingURL=useFluentProviderThemeStyleTag.js.map
74
+
73
75
  //# sourceMappingURL=useFluentProviderThemeStyleTag.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["react_utilities_1","require","react_1","React","useFluentProviderStyles_1","useInsertionEffect","useIsomorphicLayoutEffect","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","useRenderer_unstable","styleTag","useRef","styleTagId","useId","fluentProviderClassNames","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","current","id","_a","remove","exports"],"sources":["../src/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"],"mappings":";;;;;;AAAA,MAAAA,iBAAA,gBAAAC,OAAA;AACA,MAAAC,OAAA,gBAAAD,OAAA;AACA,MAAAE,KAAA,gBAAAF,OAAA;AAGA,MAAAG,yBAAA,gBAAAH,OAAA;AAEA;AACA,MAAMI,kBAAkB,GAAIF,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC,GACjEA,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC,GAC3CH,iBAAA,CAAAM,yBAAyB;AAE7B,MAAMC,cAAc,GAAGA,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,GAAGA,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,GAAGlC,OAAA,CAAAmC,oBAAoB,EAAE;EACvC,MAAMC,QAAQ,GAAGnC,KAAK,CAACoC,MAAM,EAAoB;EAEjD,MAAMC,UAAU,GAAGxC,iBAAA,CAAAyC,KAAK,CAACrC,yBAAA,CAAAsC,wBAAwB,CAACC,IAAI,CAAC;EACvD,MAAMC,sBAAsB,GAAGR,QAAQ,CAACQ,sBAAsB;EAE9D,MAAMC,eAAe,GAAG1C,KAAK,CAAC2C,OAAO,CAAC,MAAK;IACzC,OAAOX,KAAK,GACPtB,MAAM,CAACC,IAAI,CAACqB,KAAK,CAA4B,CAACY,MAAM,CAAC,CAACC,UAAU,EAAEC,MAAM,KAAI;MAC3ED,UAAU,IAAI,KAAKC,MAAM,KAAKd,KAAK,CAACc,MAAM,CAAC,IAAI;MAC/C,OAAOD,UAAU;IACnB,CAAC,EAAE,EAAE,CAAC,GACN,EAAE;EACR,CAAC,EAAE,CAACb,KAAK,CAAC,CAAC;EAEX,MAAMd,IAAI,GAAG,IAAImB,UAAU,MAAMK,eAAe,IAAI;EAEpDxC,kBAAkB,CAAC,MAAK;IACtBiC,QAAQ,CAACY,OAAO,GAAG3C,cAAc,CAAC2B,cAAc,EAAE;MAAE,GAAGU,sBAAsB;MAAEO,EAAE,EAAEX;IAAU,CAAE,CAAC;IAEhG,IAAIF,QAAQ,CAACY,OAAO,EAAE;MACpB9B,WAAW,CAACkB,QAAQ,CAACY,OAAO,EAAE7B,IAAI,CAAC;MAEnC,OAAO,MAAK;;QACV,CAAA+B,EAAA,GAAAd,QAAQ,CAACY,OAAO,cAAAE,EAAA,uBAAAA,EAAA,CAAEC,MAAM,EAAE;MAC5B,CAAC;;EAEL,CAAC,EAAE,CAACb,UAAU,EAAEN,cAAc,EAAEb,IAAI,EAAEuB,sBAAsB,CAAC,CAAC;EAE9D,OAAOJ,UAAU;AACnB,CAAC;AAjCYc,OAAA,CAAAtB,8BAA8B,GAAAA,8BAAA"}
1
+ {"version":3,"sources":["../../../lib/components/FluentProvider/useFluentProviderThemeStyleTag.js"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useRenderer_unstable } from '@griffel/react';\nimport * as React from 'react';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : useIsomorphicLayoutEffect;\nconst createStyleTag = (target, elementAttributes) => {\n if (!target) {\n return undefined;\n }\n const tag = target.createElement('style');\n Object.keys(elementAttributes).forEach(attrName => {\n tag.setAttribute(attrName, elementAttributes[attrName]);\n });\n target.head.appendChild(tag);\n return tag;\n};\nconst insertSheet = (tag, rule) => {\n const sheet = tag.sheet;\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 * 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 => {\n const {\n targetDocument,\n theme\n } = options;\n const renderer = useRenderer_unstable();\n const styleTag = React.useRef();\n const styleTagId = useId(fluentProviderClassNames.root);\n const styleElementAttributes = renderer.styleElementAttributes;\n const cssVarsAsString = React.useMemo(() => {\n return theme ? Object.keys(theme).reduce((cssVarRule, cssVar) => {\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '') : '';\n }, [theme]);\n const rule = `.${styleTagId} { ${cssVarsAsString} }`;\n useInsertionEffect(() => {\n styleTag.current = createStyleTag(targetDocument, {\n ...styleElementAttributes,\n id: styleTagId\n });\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n return () => {\n var _styleTag_current;\n (_styleTag_current = styleTag.current) === null || _styleTag_current === void 0 ? void 0 : _styleTag_current.remove();\n };\n }\n }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n return styleTagId;\n};\n//# sourceMappingURL=useFluentProviderThemeStyleTag.js.map"],"names":["useFluentProviderThemeStyleTag","useInsertionEffect","React","useIsomorphicLayoutEffect","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","options","targetDocument","theme","renderer","useRenderer_unstable","styleTag","useRef","styleTagId","useId","fluentProviderClassNames","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","current","id","_styleTag_current","remove"],"mappings":";;;;+BAkCaA;;aAAAA;;;gCAlCoC;uBACZ;8DACd;yCACkB;AACzC,4FAA4F;AAC5F,MAAMC,qBAAqBC,OAAK,CAAC,iBAAiB,SAAS,GAAGA,OAAK,CAAC,iBAAiB,SAAS,GAAGC,yCAAyB;AAC1H,MAAMC,iBAAiB,CAACC,QAAQC,oBAAsB;IACpD,IAAI,CAACD,QAAQ;QACX,OAAOE;IACT,CAAC;IACD,MAAMC,MAAMH,OAAOI,aAAa,CAAC;IACjCC,OAAOC,IAAI,CAACL,mBAAmBM,OAAO,CAACC,CAAAA,WAAY;QACjDL,IAAIM,YAAY,CAACD,UAAUP,iBAAiB,CAACO,SAAS;IACxD;IACAR,OAAOU,IAAI,CAACC,WAAW,CAACR;IACxB,OAAOA;AACT;AACA,MAAMS,cAAc,CAACT,KAAKU,OAAS;IACjC,MAAMC,QAAQX,IAAIW,KAAK;IACvB,IAAIA,OAAO;QACT,IAAIA,MAAMC,QAAQ,CAACC,MAAM,GAAG,GAAG;YAC7BF,MAAMG,UAAU,CAAC;QACnB,CAAC;QACDH,MAAMI,UAAU,CAACL,MAAM;IACzB,OAAO,IAAIM,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QAChD,sCAAsC;QACtCC,QAAQC,KAAK,CAAC;IAChB,CAAC;AACH;AAMO,MAAM5B,iCAAiC6B,CAAAA,UAAW;IACvD,MAAM,EACJC,eAAc,EACdC,MAAK,EACN,GAAGF;IACJ,MAAMG,WAAWC,IAAAA,2BAAoB;IACrC,MAAMC,WAAWhC,QAAMiC,MAAM;IAC7B,MAAMC,aAAaC,IAAAA,qBAAK,EAACC,iDAAwB,CAACC,IAAI;IACtD,MAAMC,yBAAyBR,SAASQ,sBAAsB;IAC9D,MAAMC,kBAAkBvC,QAAMwC,OAAO,CAAC,IAAM;QAC1C,OAAOX,QAAQrB,OAAOC,IAAI,CAACoB,OAAOY,MAAM,CAAC,CAACC,YAAYC,SAAW;YAC/DD,cAAc,CAAC,EAAE,EAAEC,OAAO,EAAE,EAAEd,KAAK,CAACc,OAAO,CAAC,EAAE,CAAC;YAC/C,OAAOD;QACT,GAAG,MAAM,EAAE;IACb,GAAG;QAACb;KAAM;IACV,MAAMb,OAAO,CAAC,CAAC,EAAEkB,WAAW,GAAG,EAAEK,gBAAgB,EAAE,CAAC;IACpDxC,mBAAmB,IAAM;QACvBiC,SAASY,OAAO,GAAG1C,eAAe0B,gBAAgB;YAChD,GAAGU,sBAAsB;YACzBO,IAAIX;QACN;QACA,IAAIF,SAASY,OAAO,EAAE;YACpB7B,YAAYiB,SAASY,OAAO,EAAE5B;YAC9B,OAAO,IAAM;gBACX,IAAI8B;gBACHA,CAAAA,oBAAoBd,SAASY,OAAO,AAAD,MAAO,IAAI,IAAIE,sBAAsB,KAAK,IAAI,KAAK,IAAIA,kBAAkBC,MAAM,EAAE;YACvH;QACF,CAAC;IACH,GAAG;QAACb;QAAYN;QAAgBZ;QAAMsB;KAAuB;IAC7D,OAAOJ;AACT,GACA,0DAA0D"}