@fluentui/react-provider 9.1.11 → 9.2.0

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 (36) hide show
  1. package/CHANGELOG.json +56 -1
  2. package/CHANGELOG.md +18 -2
  3. package/lib/components/FluentProvider/FluentProvider.js.map +1 -1
  4. package/lib/components/FluentProvider/renderFluentProvider.js +2 -2
  5. package/lib/components/FluentProvider/renderFluentProvider.js.map +1 -1
  6. package/lib/components/FluentProvider/useFluentProvider.js +6 -10
  7. package/lib/components/FluentProvider/useFluentProvider.js.map +1 -1
  8. package/lib/components/FluentProvider/useFluentProviderContextValues.js +2 -2
  9. package/lib/components/FluentProvider/useFluentProviderContextValues.js.map +1 -1
  10. package/lib/components/FluentProvider/useFluentProviderStyles.js +9 -12
  11. package/lib/components/FluentProvider/useFluentProviderStyles.js.map +1 -1
  12. package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js +14 -15
  13. package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
  14. package/lib/index.js.map +1 -1
  15. package/lib-amd/components/FluentProvider/useFluentProviderThemeStyleTag.js +9 -5
  16. package/lib-amd/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
  17. package/lib-commonjs/FluentProvider.js +0 -2
  18. package/lib-commonjs/FluentProvider.js.map +1 -1
  19. package/lib-commonjs/components/FluentProvider/FluentProvider.js +0 -6
  20. package/lib-commonjs/components/FluentProvider/FluentProvider.js.map +1 -1
  21. package/lib-commonjs/components/FluentProvider/FluentProvider.types.js.map +1 -1
  22. package/lib-commonjs/components/FluentProvider/index.js +0 -8
  23. package/lib-commonjs/components/FluentProvider/index.js.map +1 -1
  24. package/lib-commonjs/components/FluentProvider/renderFluentProvider.js +2 -8
  25. package/lib-commonjs/components/FluentProvider/renderFluentProvider.js.map +1 -1
  26. package/lib-commonjs/components/FluentProvider/useFluentProvider.js +6 -17
  27. package/lib-commonjs/components/FluentProvider/useFluentProvider.js.map +1 -1
  28. package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.js +2 -5
  29. package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.js.map +1 -1
  30. package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.js +9 -17
  31. package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.js.map +1 -1
  32. package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js +14 -20
  33. package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
  34. package/lib-commonjs/index.js +0 -2
  35. package/lib-commonjs/index.js.map +1 -1
  36. package/package.json +7 -7
package/CHANGELOG.json CHANGED
@@ -2,7 +2,62 @@
2
2
  "name": "@fluentui/react-provider",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 21 Dec 2022 10:17:12 GMT",
5
+ "date": "Wed, 04 Jan 2023 01:35:44 GMT",
6
+ "tag": "@fluentui/react-provider_v9.2.0",
7
+ "version": "9.2.0",
8
+ "comments": {
9
+ "minor": [
10
+ {
11
+ "author": "olfedias@microsoft.com",
12
+ "package": "@fluentui/react-provider",
13
+ "commit": "5b9042fea309185404fb2c8b8986d46381af8241",
14
+ "comment": "feat: FluentProvider applies style attributes defined by a renderer from Griffel"
15
+ },
16
+ {
17
+ "author": "beachball",
18
+ "package": "@fluentui/react-provider",
19
+ "comment": "Bump @fluentui/react-tabster to v9.3.5",
20
+ "commit": "3e322d15529451be153e97298873253e21af4082"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-provider",
25
+ "comment": "Bump @fluentui/react-utilities to v9.3.1",
26
+ "commit": "3e322d15529451be153e97298873253e21af4082"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-provider",
31
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19",
32
+ "commit": "3e322d15529451be153e97298873253e21af4082"
33
+ }
34
+ ],
35
+ "none": [
36
+ {
37
+ "author": "martinhochel@microsoft.com",
38
+ "package": "@fluentui/react-provider",
39
+ "commit": "4ec2b998b294d6d9c3196d3d82893bdd97d0c105",
40
+ "comment": "chore(scripts): move index.ts to to follow sub-folder domain packaging"
41
+ },
42
+ {
43
+ "author": "martinhochel@microsoft.com",
44
+ "package": "@fluentui/react-provider",
45
+ "commit": "194b0cf0cc27c1c1233aa945f09b3ad29778d8ca",
46
+ "comment": "chore(scripts): use for @fluentui/scripts version within all package.json"
47
+ }
48
+ ],
49
+ "patch": [
50
+ {
51
+ "author": "olfedias@microsoft.com",
52
+ "package": "@fluentui/react-provider",
53
+ "commit": "2c38f1e4ae07b2b60df596efe11015a68f166dbf",
54
+ "comment": "chore: Update Griffel to latest version"
55
+ }
56
+ ]
57
+ }
58
+ },
59
+ {
60
+ "date": "Wed, 21 Dec 2022 10:20:30 GMT",
6
61
  "tag": "@fluentui/react-provider_v9.1.11",
7
62
  "version": "9.1.11",
8
63
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,28 @@
1
1
  # Change Log - @fluentui/react-provider
2
2
 
3
- This log was last generated on Wed, 21 Dec 2022 10:17:12 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 04 Jan 2023 01:35:44 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.2.0)
8
+
9
+ Wed, 04 Jan 2023 01:35:44 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.1.11..@fluentui/react-provider_v9.2.0)
11
+
12
+ ### Minor changes
13
+
14
+ - feat: FluentProvider applies style attributes defined by a renderer from Griffel ([PR #26046](https://github.com/microsoft/fluentui/pull/26046) by olfedias@microsoft.com)
15
+ - Bump @fluentui/react-tabster to v9.3.5 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
16
+ - Bump @fluentui/react-utilities to v9.3.1 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
17
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.19 ([PR #26114](https://github.com/microsoft/fluentui/pull/26114) by beachball)
18
+
19
+ ### Patches
20
+
21
+ - chore: Update Griffel to latest version ([PR #26045](https://github.com/microsoft/fluentui/pull/26045) by olfedias@microsoft.com)
22
+
7
23
  ## [9.1.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.1.11)
8
24
 
9
- Wed, 21 Dec 2022 10:17:12 GMT
25
+ Wed, 21 Dec 2022 10:20:30 GMT
10
26
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.1.10..@fluentui/react-provider_v9.1.11)
11
27
 
12
28
  ### Patches
package/lib/components/FluentProvider/FluentProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,gCAAT,QAAiD,2BAAjD;AACA,SAAS,uCAAT,QAAwD,kCAAxD;AAGA,OAAO,MAAM,cAAc,gBAAG,KAAK,CAAC,UAAN,CAAmD,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,0BAA0B,CAAC,KAAD,EAAQ,GAAR,CAAxC;EACA,gCAAgC,CAAC,KAAD,CAAhC;EAEA,MAAM,aAAa,GAAG,uCAAuC,CAAC,KAAD,CAA7D;EAEA,OAAO,6BAA6B,CAAC,KAAD,EAAQ,aAAR,CAApC;AACD,CAP6B,CAAvB;AASP,cAAc,CAAC,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { renderFluentProvider_unstable } from './renderFluentProvider';\nimport { useFluentProvider_unstable } from './useFluentProvider';\nimport { useFluentProviderStyles_unstable } from './useFluentProviderStyles';\nimport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nimport type { FluentProviderProps } from './FluentProvider.types';\n\nexport const FluentProvider = React.forwardRef<HTMLElement, FluentProviderProps>((props, ref) => {\n const state = useFluentProvider_unstable(props, ref);\n useFluentProviderStyles_unstable(state);\n\n const contextValues = useFluentProviderContextValues_unstable(state);\n\n return renderFluentProvider_unstable(state, contextValues);\n});\n\nFluentProvider.displayName = 'FluentProvider';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,gCAAgC,QAAQ,2BAA2B;AAC5E,SAASC,uCAAuC,QAAQ,kCAAkC;AAG1F,OAAO,MAAMC,cAAc,gBAAGL,KAAK,CAACM,UAAU,CAAmC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGP,0BAA0B,CAACK,KAAK,EAAEC,GAAG,CAAC;EACpDL,gCAAgC,CAACM,KAAK,CAAC;EAEvC,MAAMC,aAAa,GAAGN,uCAAuC,CAACK,KAAK,CAAC;EAEpE,OAAOR,6BAA6B,CAACQ,KAAK,EAAEC,aAAa,CAAC;AAC5D,CAAC,CAAC;AAEFL,cAAc,CAACM,WAAW,GAAG,gBAAgB","names":["React","renderFluentProvider_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderContextValues_unstable","FluentProvider","forwardRef","props","ref","state","contextValues","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderFluentProvider_unstable } from './renderFluentProvider';\nimport { useFluentProvider_unstable } from './useFluentProvider';\nimport { useFluentProviderStyles_unstable } from './useFluentProviderStyles';\nimport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nimport type { FluentProviderProps } from './FluentProvider.types';\n\nexport const FluentProvider = React.forwardRef<HTMLElement, FluentProviderProps>((props, ref) => {\n const state = useFluentProvider_unstable(props, ref);\n useFluentProviderStyles_unstable(state);\n\n const contextValues = useFluentProviderContextValues_unstable(state);\n\n return renderFluentProvider_unstable(state, contextValues);\n});\n\nFluentProvider.displayName = 'FluentProvider';\n"]}
package/lib/components/FluentProvider/renderFluentProvider.js CHANGED
@@ -5,7 +5,6 @@ import { getSlots } from '@fluentui/react-utilities';
5
5
  /**
6
6
  * Render the final JSX of FluentProvider
7
7
  */
8
-
9
8
  export const renderFluentProvider_unstable = (state, contextValues) => {
10
9
  const {
11
10
  slots,
@@ -21,7 +20,8 @@ export const renderFluentProvider_unstable = (state, contextValues) => {
21
20
  value: contextValues.tooltip
22
21
  }, /*#__PURE__*/React.createElement(TextDirectionProvider, {
23
22
  dir: contextValues.textDirection
24
- }, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
23
+ }, /*#__PURE__*/React.createElement(slots.root, {
24
+ ...slotProps.root
25
25
  }, state.root.children))))));
26
26
  };
27
27
  //# sourceMappingURL=renderFluentProvider.js.map
package/lib/components/FluentProvider/renderFluentProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SACE,iBAAiB,IAAI,QADvB,EAEE,kCAAkC,IAAI,yBAFxC,EAGE,sBAAsB,IAAI,aAH5B,EAIE,+BAA+B,IAAI,sBAJrC,QAKO,iCALP;AAMA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,6BAA6B,GAAG,CAC3C,KAD2C,EAE3C,aAF2C,KAGzC;EACF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAsB,KAAtB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,QAAD,EAAS;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAT,eACE,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAd,eACE,KAAA,CAAA,aAAA,CAAC,sBAAD,EAAuB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAvB,eACE,KAAA,CAAA,aAAA,CAAC,yBAAD,EAA0B;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAA1B,eACE,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB;IAAC,GAAG,EAAE,aAAa,CAAC;EAApB,CAAtB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,KAAK,CAAC,IAAN,CAAW,QAA5C,CADF,CADF,CADF,CADF,CADF,CADF;AAaD,CAnBM","sourcesContent":["import * as React from 'react';\nimport { TextDirectionProvider } from '@griffel/react';\nimport {\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n} from '@fluentui/react-shared-contexts';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n) => {\n const { slots, slotProps } = getSlots<FluentProviderSlots>(state);\n\n return (\n <Provider value={contextValues.provider}>\n <ThemeProvider value={contextValues.theme}>\n <ThemeClassNameProvider value={contextValues.themeClassName}>\n <TooltipVisibilityProvider value={contextValues.tooltip}>\n <TextDirectionProvider dir={contextValues.textDirection}>\n <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,QAAQ,gBAAgB;AACtD,SACEC,iBAAiB,IAAIC,QAAQ,EAC7BC,kCAAkC,IAAIC,yBAAyB,EAC/DC,sBAAsB,IAAIC,aAAa,EACvCC,+BAA+B,IAAIC,sBAAsB,QACpD,iCAAiC;AACxC,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,6BAA6B,GAAG,CAC3CC,KAA0B,EAC1BC,aAA0C,KACxC;EACF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,QAAQ,CAAsBE,KAAK,CAAC;EAEjE,oBACEZ,oBAACG,QAAQ;IAACa,KAAK,EAAEH,aAAa,CAACI;EAAQ,gBACrCjB,oBAACO,aAAa;IAACS,KAAK,EAAEH,aAAa,CAACK;EAAK,gBACvClB,oBAACS,sBAAsB;IAACO,KAAK,EAAEH,aAAa,CAACM;EAAc,gBACzDnB,oBAACK,yBAAyB;IAACW,KAAK,EAAEH,aAAa,CAACO;EAAO,gBACrDpB,oBAACC,qBAAqB;IAACoB,GAAG,EAAER,aAAa,CAACS;EAAa,gBACrDtB,oBAACc,KAAK,CAACS,IAAI;IAAA,GAAKR,SAAS,CAACQ;EAAI,GAAGX,KAAK,CAACW,IAAI,CAACC,QAAQ,CAAc,CAC5C,CACE,CACL,CACX,CACP;AAEf,CAAC","names":["React","TextDirectionProvider","Provider_unstable","Provider","TooltipVisibilityProvider_unstable","TooltipVisibilityProvider","ThemeProvider_unstable","ThemeProvider","ThemeClassNameProvider_unstable","ThemeClassNameProvider","getSlots","renderFluentProvider_unstable","state","contextValues","slots","slotProps","value","provider","theme","themeClassName","tooltip","dir","textDirection","root","children"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TextDirectionProvider } from '@griffel/react';\nimport {\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n} from '@fluentui/react-shared-contexts';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n) => {\n const { slots, slotProps } = getSlots<FluentProviderSlots>(state);\n\n return (\n <Provider value={contextValues.provider}>\n <ThemeProvider value={contextValues.theme}>\n <ThemeClassNameProvider value={contextValues.themeClassName}>\n <TooltipVisibilityProvider value={contextValues.tooltip}>\n <TextDirectionProvider dir={contextValues.textDirection}>\n <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"]}
package/lib/components/FluentProvider/useFluentProvider.js CHANGED
@@ -12,7 +12,6 @@ import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag
12
12
  * @param props - props from this instance of FluentProvider
13
13
  * @param ref - reference to root HTMLElement of FluentProvider
14
14
  */
15
-
16
15
  export const useFluentProvider_unstable = (props, ref) => {
17
16
  const parentContext = useFluent();
18
17
  const parentTheme = useTheme();
@@ -21,7 +20,6 @@ export const useFluentProvider_unstable = (props, ref) => {
21
20
  * nesting providers with the same "dir" should not add additional attributes to DOM
22
21
  * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93
23
22
  */
24
-
25
23
  const {
26
24
  applyStylesToPortals = true,
27
25
  dir = parentContext.dir,
@@ -37,8 +35,8 @@ export const useFluentProvider_unstable = (props, ref) => {
37
35
  =============================================
38
36
  Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.
39
37
  `);
40
- } // eslint-disable-next-line react-hooks/exhaustive-deps
41
-
38
+ }
39
+ // eslint-disable-next-line react-hooks/exhaustive-deps
42
40
  }, []);
43
41
  return {
44
42
  applyStylesToPortals,
@@ -52,28 +50,26 @@ export const useFluentProvider_unstable = (props, ref) => {
52
50
  components: {
53
51
  root: 'div'
54
52
  },
55
- root: getNativeElementProps('div', { ...props,
53
+ root: getNativeElementProps('div', {
54
+ ...props,
56
55
  dir,
57
56
  ref: useMergedRefs(ref, useFocusVisible())
58
57
  })
59
58
  };
60
59
  };
61
-
62
60
  function mergeThemes(a, b) {
63
61
  // Merge impacts perf: we should like to avoid it if it's possible
64
62
  if (a && b) {
65
- return { ...a,
63
+ return {
64
+ ...a,
66
65
  ...b
67
66
  };
68
67
  }
69
-
70
68
  if (a) {
71
69
  return a;
72
70
  }
73
-
74
71
  return b;
75
72
  }
76
-
77
73
  function useTheme() {
78
74
  return React.useContext(ThemeContext);
79
75
  }
package/lib/components/FluentProvider/useFluentProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":"AAAA,SAAS,eAAT,QAAgC,yBAAhC;AACA,SACE,qBAAqB,IAAI,YAD3B,EAEE,kBAAkB,IAAI,SAFxB,QAGO,iCAHP;AAKA,SAAS,qBAAT,EAAgC,aAAhC,QAAqD,2BAArD;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,8BAAT,QAA+C,kCAA/C;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;EACvB,MAAM,aAAa,GAAG,SAAS,EAA/B;EACA,MAAM,WAAW,GAAG,QAAQ,EAA5B;EAEA;;;;AAIG;;EACH,MAAM;IACJ,oBAAoB,GAAG,IADnB;IAEJ,GAAG,GAAG,aAAa,CAAC,GAFhB;IAGJ,cAAc,GAAG,aAAa,CAAC,cAH3B;IAIJ;EAJI,IAKF,KALJ;EAMA,MAAM,WAAW,GAAG,WAAW,CAAC,WAAD,EAAc,KAAd,CAA/B;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,IAAyC,WAAW,KAAK,SAA7D,EAAwE;MACtE;MACA,OAAO,CAAC,IAAR,CAAa;;;;AAIZ,OAJD;IAKD,CARkB,CASnB;;EACD,CAVD,EAUG,EAVH;EAYA,OAAO;IACL,oBADK;IAEL,GAFK;IAGL,cAHK;IAIL,KAAK,EAAE,WAJF;IAKL,cAAc,EAAE,8BAA8B,CAAC;MAAE,KAAK,EAAE,WAAT;MAAsB;IAAtB,CAAD,CALzC;IAOL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CAPP;IAWL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ,EACjC,GAAG,KAD8B;MAEjC,GAFiC;MAGjC,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,eAAe,EAArB;IAHe,CAAR;EAXtB,CAAP;AAiBD,CAjDM;;AAmDP,SAAS,WAAT,CAAqB,CAArB,EAA2C,CAA3C,EAA+D;EAC7D;EACA,IAAI,CAAC,IAAI,CAAT,EAAY;IACV,OAAO,EAAE,GAAG,CAAL;MAAQ,GAAG;IAAX,CAAP;EACD;;EAED,IAAI,CAAJ,EAAO;IACL,OAAO,CAAP;EACD;;EAED,OAAO,CAAP;AACD;;AAED,SAAS,QAAT,GAAiB;EACf,OAAO,KAAK,CAAC,UAAN,CAAiB,YAAjB,CAAP;AACD","sourcesContent":["import { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n ThemeContext_unstable as ThemeContext,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport type { ThemeContextValue_unstable as ThemeContextValue } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */\nexport const useFluentProvider_unstable = (\n props: FluentProviderProps,\n ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n const parentContext = useFluent();\n const parentTheme = useTheme();\n\n /**\n * TODO: add merge functions to \"dir\" merge,\n * nesting providers with the same \"dir\" should not add additional attributes to DOM\n * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93\n */\n const {\n applyStylesToPortals = true,\n dir = parentContext.dir,\n targetDocument = parentContext.targetDocument,\n theme,\n } = props;\n const mergedTheme = mergeThemes(parentTheme, theme);\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {\n // eslint-disable-next-line no-console\n console.warn(`\n FluentProvider: your \"theme\" is not defined !\n =============================================\n Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.\n `);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return {\n applyStylesToPortals,\n dir,\n targetDocument,\n theme: mergedTheme,\n themeClassName: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),\n\n components: {\n root: 'div',\n },\n\n root: getNativeElementProps('div', {\n ...props,\n dir,\n ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>()),\n }),\n };\n};\n\nfunction mergeThemes(a: ThemeContextValue, b: ThemeContextValue): ThemeContextValue {\n // Merge impacts perf: we should like to avoid it if it's possible\n if (a && b) {\n return { ...a, ...b };\n }\n\n if (a) {\n return a;\n }\n\n return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n return React.useContext(ThemeContext);\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,SAASA,eAAe,QAAQ,yBAAyB;AACzD,SACEC,qBAAqB,IAAIC,YAAY,EACrCC,kBAAkB,IAAIC,SAAS,QAC1B,iCAAiC;AAExC,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,2BAA2B;AAChF,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SAASC,8BAA8B,QAAQ,kCAAkC;AAGjF;;;;;;;;;AASA,OAAO,MAAMC,0BAA0B,GAAG,CACxCC,KAA0B,EAC1BC,GAA2B,KACJ;EACvB,MAAMC,aAAa,GAAGR,SAAS,EAAE;EACjC,MAAMS,WAAW,GAAGC,QAAQ,EAAE;EAE9B;;;;;EAKA,MAAM;IACJC,oBAAoB,GAAG,IAAI;IAC3BC,GAAG,GAAGJ,aAAa,CAACI,GAAG;IACvBC,cAAc,GAAGL,aAAa,CAACK,cAAc;IAC7CC;EAAK,CACN,GAAGR,KAAK;EACT,MAAMS,WAAW,GAAGC,WAAW,CAACP,WAAW,EAAEK,KAAK,CAAC;EAEnDX,KAAK,CAACc,SAAS,CAAC,MAAK;IACnB,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,IAAIL,WAAW,KAAKM,SAAS,EAAE;MACtE;MACAC,OAAO,CAACC,IAAI,CAAC;;;;OAIZ,CAAC;;IAEJ;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACLZ,oBAAoB;IACpBC,GAAG;IACHC,cAAc;IACdC,KAAK,EAAEC,WAAW;IAClBS,cAAc,EAAEpB,8BAA8B,CAAC;MAAEU,KAAK,EAAEC,WAAW;MAAEF;IAAc,CAAE,CAAC;IAEtFY,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IAEDA,IAAI,EAAEzB,qBAAqB,CAAC,KAAK,EAAE;MACjC,GAAGK,KAAK;MACRM,GAAG;MACHL,GAAG,EAAEL,aAAa,CAACK,GAAG,EAAEX,eAAe,EAAkB;KAC1D;GACF;AACH,CAAC;AAED,SAASoB,WAAW,CAACW,CAAoB,EAAEC,CAAoB;EAC7D;EACA,IAAID,CAAC,IAAIC,CAAC,EAAE;IACV,OAAO;MAAE,GAAGD,CAAC;MAAE,GAAGC;IAAC,CAAE;;EAGvB,IAAID,CAAC,EAAE;IACL,OAAOA,CAAC;;EAGV,OAAOC,CAAC;AACV;AAEA,SAASlB,QAAQ;EACf,OAAOP,KAAK,CAAC0B,UAAU,CAAC/B,YAAY,CAAC;AACvC","names":["useFocusVisible","ThemeContext_unstable","ThemeContext","useFluent_unstable","useFluent","getNativeElementProps","useMergedRefs","React","useFluentProviderThemeStyleTag","useFluentProvider_unstable","props","ref","parentContext","parentTheme","useTheme","applyStylesToPortals","dir","targetDocument","theme","mergedTheme","mergeThemes","useEffect","process","env","NODE_ENV","undefined","console","warn","themeClassName","components","root","a","b","useContext"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts"],"sourcesContent":["import { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n ThemeContext_unstable as ThemeContext,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport type { ThemeContextValue_unstable as ThemeContextValue } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */\nexport const useFluentProvider_unstable = (\n props: FluentProviderProps,\n ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n const parentContext = useFluent();\n const parentTheme = useTheme();\n\n /**\n * TODO: add merge functions to \"dir\" merge,\n * nesting providers with the same \"dir\" should not add additional attributes to DOM\n * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93\n */\n const {\n applyStylesToPortals = true,\n dir = parentContext.dir,\n targetDocument = parentContext.targetDocument,\n theme,\n } = props;\n const mergedTheme = mergeThemes(parentTheme, theme);\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {\n // eslint-disable-next-line no-console\n console.warn(`\n FluentProvider: your \"theme\" is not defined !\n =============================================\n Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.\n `);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return {\n applyStylesToPortals,\n dir,\n targetDocument,\n theme: mergedTheme,\n themeClassName: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),\n\n components: {\n root: 'div',\n },\n\n root: getNativeElementProps('div', {\n ...props,\n dir,\n ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>()),\n }),\n };\n};\n\nfunction mergeThemes(a: ThemeContextValue, b: ThemeContextValue): ThemeContextValue {\n // Merge impacts perf: we should like to avoid it if it's possible\n if (a && b) {\n return { ...a, ...b };\n }\n\n if (a) {\n return a;\n }\n\n return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n return React.useContext(ThemeContext);\n}\n"]}
package/lib/components/FluentProvider/useFluentProviderContextValues.js CHANGED
@@ -11,8 +11,8 @@ export function useFluentProviderContextValues_unstable(state) {
11
11
  const provider = React.useMemo(() => ({
12
12
  dir,
13
13
  targetDocument
14
- }), [dir, targetDocument]); // "Tooltip" component mutates an object in this context, instance should be stable
15
-
14
+ }), [dir, targetDocument]);
15
+ // "Tooltip" component mutates an object in this context, instance should be stable
16
16
  const [tooltip] = React.useState(() => ({}));
17
17
  return {
18
18
  provider,
package/lib/components/FluentProvider/useFluentProviderContextValues.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderContextValues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,OAAM,SAAU,uCAAV,CAAkD,KAAlD,EAA4E;EAChF,MAAM;IAAE,oBAAF;IAAwB,GAAxB;IAA6B,IAA7B;IAAmC,cAAnC;IAAmD,KAAnD;IAA0D;EAA1D,IAA6E,KAAnF;EAEA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,OAAO;IAAE,GAAF;IAAO;EAAP,CAAP,CAAd,EAA+C,CAAC,GAAD,EAAM,cAAN,CAA/C,CAAjB,CAHgF,CAIhF;;EACA,MAAM,CAAC,OAAD,IAAY,KAAK,CAAC,QAAN,CAAe,OAAO,EAAP,CAAf,CAAlB;EAEA,OAAO;IACL,QADK;IAEL,aAAa,EAAE,GAFV;IAGL,OAHK;IAIL,KAJK;IAKL,cAAc,EAAE,oBAAoB,GAAG,IAAI,CAAC,SAAR,GAAqB;EALpD,CAAP;AAOD","sourcesContent":["import * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n const { applyStylesToPortals, dir, root, targetDocument, theme, themeClassName } = state;\n\n const provider = React.useMemo(() => ({ dir, targetDocument }), [dir, targetDocument]);\n // \"Tooltip\" component mutates an object in this context, instance should be stable\n const [tooltip] = React.useState(() => ({}));\n\n return {\n provider,\n textDirection: dir,\n tooltip,\n theme,\n themeClassName: applyStylesToPortals ? root.className! : themeClassName,\n };\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,OAAM,SAAUC,uCAAuC,CAACC,KAA0B;EAChF,MAAM;IAAEC,oBAAoB;IAAEC,GAAG;IAAEC,IAAI;IAAEC,cAAc;IAAEC,KAAK;IAAEC;EAAc,CAAE,GAAGN,KAAK;EAExF,MAAMO,QAAQ,GAAGT,KAAK,CAACU,OAAO,CAAC,OAAO;IAAEN,GAAG;IAAEE;EAAc,CAAE,CAAC,EAAE,CAACF,GAAG,EAAEE,cAAc,CAAC,CAAC;EACtF;EACA,MAAM,CAACK,OAAO,CAAC,GAAGX,KAAK,CAACY,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;EAE5C,OAAO;IACLH,QAAQ;IACRI,aAAa,EAAET,GAAG;IAClBO,OAAO;IACPJ,KAAK;IACLC,cAAc,EAAEL,oBAAoB,GAAGE,IAAI,CAACS,SAAU,GAAGN;GAC1D;AACH","names":["React","useFluentProviderContextValues_unstable","state","applyStylesToPortals","dir","root","targetDocument","theme","themeClassName","provider","useMemo","tooltip","useState","textDirection","className"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n const { applyStylesToPortals, dir, root, targetDocument, theme, themeClassName } = state;\n\n const provider = React.useMemo(() => ({ dir, targetDocument }), [dir, targetDocument]);\n // \"Tooltip\" component mutates an object in this context, instance should be stable\n const [tooltip] = React.useState(() => ({}));\n\n return {\n provider,\n textDirection: dir,\n tooltip,\n theme,\n themeClassName: applyStylesToPortals ? root.className! : themeClassName,\n };\n}\n"]}
package/lib/components/FluentProvider/useFluentProviderStyles.js CHANGED
@@ -4,23 +4,20 @@ import { tokens, typographyStyles } from '@fluentui/react-theme';
4
4
  export const fluentProviderClassNames = {
5
5
  root: 'fui-FluentProvider'
6
6
  };
7
-
8
7
  const useStyles = /*#__PURE__*/__styles({
9
- "root": {
10
- "sj55zd": "f19n0e5",
11
- "De3pzq": "fxugw4r",
12
- "fsow6f": ["f1o700av", "fes3tcz"],
13
- "Bahqtrf": "fk6fouc",
14
- "Be2twd7": "fkhj508",
15
- "Bhrd7zp": "figsok6",
16
- "Bg96gwp": "f1i3iumi"
8
+ root: {
9
+ sj55zd: "f19n0e5",
10
+ De3pzq: "fxugw4r",
11
+ fsow6f: ["f1o700av", "fes3tcz"],
12
+ Bahqtrf: "fk6fouc",
13
+ Be2twd7: "fkhj508",
14
+ Bhrd7zp: "figsok6",
15
+ Bg96gwp: "f1i3iumi"
17
16
  }
18
17
  }, {
19
- "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);}"]
18
+ d: [".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
20
19
  });
21
20
  /** Applies style classnames to slots */
22
-
23
-
24
21
  export const useFluentProviderStyles_unstable = state => {
25
22
  const renderer = useRenderer_unstable();
26
23
  const styles = useStyles({
package/lib/components/FluentProvider/useFluentProviderStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,eAAzC;AACA,SAAS,oBAAT,QAAqC,gBAArC;AACA,SAAS,MAAT,EAAiB,gBAAjB,QAAyC,uBAAzC;AAIA,OAAO,MAAM,wBAAwB,GAAwC;EAC3E,IAAI,EAAE;AADqE,CAAtE;;AAIP,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AASA;;;AACA,OAAO,MAAM,gCAAgC,GAAI,KAAD,IAA+B;EAC7E,MAAM,QAAQ,GAAG,oBAAoB,EAArC;EACA,MAAM,MAAM,GAAG,SAAS,CAAC;IAAE,GAAG,EAAE,KAAK,CAAC,GAAb;IAAkB;EAAlB,CAAD,CAAxB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,wBAAwB,CAAC,IADQ,EAEjC,KAAK,CAAC,cAF2B,EAGjC,MAAM,CAAC,IAH0B,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;EAOA,OAAO,KAAP;AACD,CAZM","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"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,mBAAqBA,YAAY,QAAQ,eAAe;AACxD,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAIhE,OAAO,MAAMC,wBAAwB,GAAwC;EAC3EC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAOhB;AAEF;AACA,OAAO,MAAMC,gCAAgC,GAAIC,KAA0B,IAAI;EAC7E,MAAMC,QAAQ,GAAGR,oBAAoB,EAAE;EACvC,MAAMS,MAAM,GAAGJ,SAAS,CAAC;IAAEK,GAAG,EAAEH,KAAK,CAACG,GAAG;IAAEF;EAAQ,CAAE,CAAC;EAEtDD,KAAK,CAACH,IAAI,CAACO,SAAS,GAAGZ,YAAY,CACjCI,wBAAwB,CAACC,IAAI,EAC7BG,KAAK,CAACK,cAAc,EACpBH,MAAM,CAACL,IAAI,EACXG,KAAK,CAACH,IAAI,CAACO,SAAS,CACrB;EAED,OAAOJ,KAAK;AACd,CAAC","names":["mergeClasses","useRenderer_unstable","tokens","typographyStyles","fluentProviderClassNames","root","useStyles","useFluentProviderStyles_unstable","state","renderer","styles","dir","className","themeClassName"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {\n root: 'fui-FluentProvider',\n};\n\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n textAlign: 'left',\n ...typographyStyles.body1,\n },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState) => {\n const renderer = useRenderer_unstable();\n const styles = useStyles({ dir: state.dir, renderer });\n\n state.root.className = mergeClasses(\n fluentProviderClassNames.root,\n state.themeClassName,\n styles.root,\n state.root.className,\n );\n\n return state;\n};\n"]}
package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js CHANGED
@@ -1,28 +1,26 @@
1
1
  import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
2
+ import { useRenderer_unstable } from '@griffel/react';
2
3
  import * as React from 'react';
3
- import { fluentProviderClassNames } from './useFluentProviderStyles'; // String concatenation is used to prevent bundlers to complain with older versions of React
4
-
4
+ import { fluentProviderClassNames } from './useFluentProviderStyles';
5
+ // String concatenation is used to prevent bundlers to complain with older versions of React
5
6
  const useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : useIsomorphicLayoutEffect;
6
-
7
- const createStyleTag = (target, id) => {
7
+ const createStyleTag = (target, elementAttributes) => {
8
8
  if (!target) {
9
9
  return undefined;
10
10
  }
11
-
12
11
  const tag = target.createElement('style');
13
- tag.setAttribute('id', id);
12
+ Object.keys(elementAttributes).forEach(attrName => {
13
+ tag.setAttribute(attrName, elementAttributes[attrName]);
14
+ });
14
15
  target.head.appendChild(tag);
15
16
  return tag;
16
17
  };
17
-
18
18
  const insertSheet = (tag, rule) => {
19
19
  const sheet = tag.sheet;
20
-
21
20
  if (sheet) {
22
21
  if (sheet.cssRules.length > 0) {
23
22
  sheet.deleteRule(0);
24
23
  }
25
-
26
24
  sheet.insertRule(rule, 0);
27
25
  } else if (process.env.NODE_ENV !== 'production') {
28
26
  // eslint-disable-next-line no-console
@@ -34,15 +32,15 @@ const insertSheet = (tag, rule) => {
34
32
  *
35
33
  * @returns CSS class to apply the rule
36
34
  */
37
-
38
-
39
35
  export const useFluentProviderThemeStyleTag = options => {
40
36
  const {
41
37
  targetDocument,
42
38
  theme
43
39
  } = options;
40
+ const renderer = useRenderer_unstable();
44
41
  const styleTag = React.useRef();
45
42
  const styleTagId = useId(fluentProviderClassNames.root);
43
+ const styleElementAttributes = renderer.styleElementAttributes;
46
44
  const cssVarsAsString = React.useMemo(() => {
47
45
  return theme ? Object.keys(theme).reduce((cssVarRule, cssVar) => {
48
46
  cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;
@@ -51,17 +49,18 @@ export const useFluentProviderThemeStyleTag = options => {
51
49
  }, [theme]);
52
50
  const rule = `.${styleTagId} { ${cssVarsAsString} }`;
53
51
  useInsertionEffect(() => {
54
- styleTag.current = createStyleTag(targetDocument, styleTagId);
55
-
52
+ styleTag.current = createStyleTag(targetDocument, {
53
+ ...styleElementAttributes,
54
+ id: styleTagId
55
+ });
56
56
  if (styleTag.current) {
57
57
  insertSheet(styleTag.current, rule);
58
58
  return () => {
59
59
  var _a;
60
-
61
60
  (_a = styleTag.current) === null || _a === void 0 ? void 0 : _a.remove();
62
61
  };
63
62
  }
64
- }, [styleTagId, targetDocument, rule]);
63
+ }, [styleTagId, targetDocument, rule, styleElementAttributes]);
65
64
  return styleTagId;
66
65
  };
67
66
  //# sourceMappingURL=useFluentProviderThemeStyleTag.js.map
package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,yBAAhB,QAAiD,2BAAjD;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,wBAAT,QAAyC,2BAAzC,C,CAEA;;AACA,MAAM,kBAAkB,GAAI,KAAe,CAAC,iBAAiB,QAAlB,CAAf,GACvB,KAAe,CAAC,iBAAiB,QAAlB,CADQ,GAExB,yBAFJ;;AAIA,MAAM,cAAc,GAAG,CAAC,MAAD,EAA+B,EAA/B,KAA6C;EAClE,IAAI,CAAC,MAAL,EAAa;IACX,OAAO,SAAP;EACD;;EACD,MAAM,GAAG,GAAG,MAAM,CAAC,aAAP,CAAqB,OAArB,CAAZ;EACA,GAAG,CAAC,YAAJ,CAAiB,IAAjB,EAAuB,EAAvB;EACA,MAAM,CAAC,IAAP,CAAY,WAAZ,CAAwB,GAAxB;EACA,OAAO,GAAP;AACD,CARD;;AAUA,MAAM,WAAW,GAAG,CAAC,GAAD,EAAwB,IAAxB,KAAwC;EAC1D,MAAM,KAAK,GAAG,GAAG,CAAC,KAAlB;;EAEA,IAAI,KAAJ,EAAW;IACT,IAAI,KAAK,CAAC,QAAN,CAAe,MAAf,GAAwB,CAA5B,EAA+B;MAC7B,KAAK,CAAC,UAAN,CAAiB,CAAjB;IACD;;IACD,KAAK,CAAC,UAAN,CAAiB,IAAjB,EAAuB,CAAvB;EACD,CALD,MAKO,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;IAChD;IACA,OAAO,CAAC,KAAR,CAAc,uFAAd;EACD;AACF,CAZD;AAcA;;;;AAIG;;;AACH,OAAO,MAAM,8BAA8B,GAAI,OAAD,IAAmE;EAC/G,MAAM;IAAE,cAAF;IAAkB;EAAlB,IAA4B,OAAlC;EACA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,EAAjB;EAEA,MAAM,UAAU,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAA1B,CAAxB;EAEA,MAAM,eAAe,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IACzC,OAAO,KAAK,GACP,MAAM,CAAC,IAAP,CAAY,KAAZ,EAA8C,MAA9C,CAAqD,CAAC,UAAD,EAAa,MAAb,KAAuB;MAC3E,UAAU,IAAI,KAAK,MAAM,KAAK,KAAK,CAAC,MAAD,CAAQ,IAA3C;MACA,OAAO,UAAP;IACD,CAHA,EAGE,EAHF,CADO,GAKR,EALJ;EAMD,CAPuB,EAOrB,CAAC,KAAD,CAPqB,CAAxB;EASA,MAAM,IAAI,GAAG,IAAI,UAAU,MAAM,eAAe,IAAhD;EAEA,kBAAkB,CAAC,MAAK;IACtB,QAAQ,CAAC,OAAT,GAAmB,cAAc,CAAC,cAAD,EAAiB,UAAjB,CAAjC;;IAEA,IAAI,QAAQ,CAAC,OAAb,EAAsB;MACpB,WAAW,CAAC,QAAQ,CAAC,OAAV,EAAmB,IAAnB,CAAX;MAEA,OAAO,MAAK;;;QACV,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAT,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAE,MAAF,EAAhB;MACD,CAFD;IAGD;EACF,CAViB,EAUf,CAAC,UAAD,EAAa,cAAb,EAA6B,IAA7B,CAVe,CAAlB;EAYA,OAAO,UAAP;AACD,CA9BM","sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\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, id: string) => {\n if (!target) {\n return undefined;\n }\n const tag = target.createElement('style');\n tag.setAttribute('id', id);\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 const styleTag = React.useRef<HTMLStyleElement>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\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, styleTagId);\n\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n\n return () => {\n styleTag.current?.remove();\n };\n }\n }, [styleTagId, targetDocument, rule]);\n\n return styleTagId;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,SAASA,KAAK,EAAEC,yBAAyB,QAAQ,2BAA2B;AAC5E,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,OAAO,KAAKC,KAAK,MAAM,OAAO;AAG9B,SAASC,wBAAwB,QAAQ,2BAA2B;AAEpE;AACA,MAAMC,kBAAkB,GAAIF,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC,GACjEA,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC,GAC3CF,yBAAyB;AAE7B,MAAMK,cAAc,GAAG,CAACC,MAA4B,EAAEC,iBAAyC,KAAI;EACjG,IAAI,CAACD,MAAM,EAAE;IACX,OAAOE,SAAS;;EAGlB,MAAMC,GAAG,GAAGH,MAAM,CAACI,aAAa,CAAC,OAAO,CAAC;EAEzCC,MAAM,CAACC,IAAI,CAACL,iBAAiB,CAAC,CAACM,OAAO,CAACC,QAAQ,IAAG;IAChDL,GAAG,CAACM,YAAY,CAACD,QAAQ,EAAEP,iBAAiB,CAACO,QAAQ,CAAC,CAAC;EACzD,CAAC,CAAC;EAEFR,MAAM,CAACU,IAAI,CAACC,WAAW,CAACR,GAAG,CAAC;EAC5B,OAAOA,GAAG;AACZ,CAAC;AAED,MAAMS,WAAW,GAAG,CAACT,GAAqB,EAAEU,IAAY,KAAI;EAC1D,MAAMC,KAAK,GAAGX,GAAG,CAACW,KAAK;EAEvB,IAAIA,KAAK,EAAE;IACT,IAAIA,KAAK,CAACC,QAAQ,CAACC,MAAM,GAAG,CAAC,EAAE;MAC7BF,KAAK,CAACG,UAAU,CAAC,CAAC,CAAC;;IAErBH,KAAK,CAACI,UAAU,CAACL,IAAI,EAAE,CAAC,CAAC;GAC1B,MAAM,IAAIM,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IAChD;IACAC,OAAO,CAACC,KAAK,CAAC,uFAAuF,CAAC;;AAE1G,CAAC;AAED;;;;;AAKA,OAAO,MAAMC,8BAA8B,GAAIC,OAA8D,IAAI;EAC/G,MAAM;IAAEC,cAAc;IAAEC;EAAK,CAAE,GAAGF,OAAO;EAEzC,MAAMG,QAAQ,GAAGjC,oBAAoB,EAAE;EACvC,MAAMkC,QAAQ,GAAGjC,KAAK,CAACkC,MAAM,EAAoB;EAEjD,MAAMC,UAAU,GAAGtC,KAAK,CAACI,wBAAwB,CAACmC,IAAI,CAAC;EACvD,MAAMC,sBAAsB,GAAGL,QAAQ,CAACK,sBAAsB;EAE9D,MAAMC,eAAe,GAAGtC,KAAK,CAACuC,OAAO,CAAC,MAAK;IACzC,OAAOR,KAAK,GACPtB,MAAM,CAACC,IAAI,CAACqB,KAAK,CAA4B,CAACS,MAAM,CAAC,CAACC,UAAU,EAAEC,MAAM,KAAI;MAC3ED,UAAU,IAAI,KAAKC,MAAM,KAAKX,KAAK,CAACW,MAAM,CAAC,IAAI;MAC/C,OAAOD,UAAU;IACnB,CAAC,EAAE,EAAE,CAAC,GACN,EAAE;EACR,CAAC,EAAE,CAACV,KAAK,CAAC,CAAC;EAEX,MAAMd,IAAI,GAAG,IAAIkB,UAAU,MAAMG,eAAe,IAAI;EAEpDpC,kBAAkB,CAAC,MAAK;IACtB+B,QAAQ,CAACU,OAAO,GAAGxC,cAAc,CAAC2B,cAAc,EAAE;MAAE,GAAGO,sBAAsB;MAAEO,EAAE,EAAET;IAAU,CAAE,CAAC;IAEhG,IAAIF,QAAQ,CAACU,OAAO,EAAE;MACpB3B,WAAW,CAACiB,QAAQ,CAACU,OAAO,EAAE1B,IAAI,CAAC;MAEnC,OAAO,MAAK;;QACV,cAAQ,CAAC0B,OAAO,0CAAEE,MAAM,EAAE;MAC5B,CAAC;;EAEL,CAAC,EAAE,CAACV,UAAU,EAAEL,cAAc,EAAEb,IAAI,EAAEoB,sBAAsB,CAAC,CAAC;EAE9D,OAAOF,UAAU;AACnB,CAAC","names":["useId","useIsomorphicLayoutEffect","useRenderer_unstable","React","fluentProviderClassNames","useInsertionEffect","createStyleTag","target","elementAttributes","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","head","appendChild","insertSheet","rule","sheet","cssRules","length","deleteRule","insertRule","process","env","NODE_ENV","console","error","useFluentProviderThemeStyleTag","options","targetDocument","theme","renderer","styleTag","useRef","styleTagId","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","current","id","remove"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useRenderer_unstable } from '@griffel/react';\nimport * as React from 'react';\n\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n ? (React as never)['useInsertion' + 'Effect']\n : useIsomorphicLayoutEffect;\n\nconst createStyleTag = (target: Document | undefined, elementAttributes: Record<string, string>) => {\n if (!target) {\n return undefined;\n }\n\n const tag = target.createElement('style');\n\n Object.keys(elementAttributes).forEach(attrName => {\n tag.setAttribute(attrName, elementAttributes[attrName]);\n });\n\n target.head.appendChild(tag);\n return tag;\n};\n\nconst insertSheet = (tag: HTMLStyleElement, rule: string) => {\n const sheet = tag.sheet;\n\n if (sheet) {\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n sheet.insertRule(rule, 0);\n } else if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n }\n};\n\n/**\n * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n *\n * @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {\n const { targetDocument, theme } = options;\n\n const renderer = useRenderer_unstable();\n const styleTag = React.useRef<HTMLStyleElement>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\n const styleElementAttributes = renderer.styleElementAttributes;\n\n const cssVarsAsString = React.useMemo(() => {\n return theme\n ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '')\n : '';\n }, [theme]);\n\n const rule = `.${styleTagId} { ${cssVarsAsString} }`;\n\n useInsertionEffect(() => {\n styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n\n return () => {\n styleTag.current?.remove();\n };\n }\n }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n return styleTagId;\n};\n"]}
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-provider/src/index.ts"],"names":[],"mappings":"AAAA,SACE,wBADF,EAEE,cAFF,EAGE,6BAHF,EAIE,uCAJF,EAKE,0BALF,EAME,gCANF,EAOE,8BAPF,QAQO,kBARP","sourcesContent":["export {\n fluentProviderClassNames,\n FluentProvider,\n renderFluentProvider_unstable,\n useFluentProviderContextValues_unstable,\n useFluentProvider_unstable,\n useFluentProviderStyles_unstable,\n useFluentProviderThemeStyleTag,\n} from './FluentProvider';\nexport type {\n FluentProviderContextValues,\n FluentProviderProps,\n FluentProviderState,\n FluentProviderSlots,\n} from './FluentProvider';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"AAAA,SACEA,wBAAwB,EACxBC,cAAc,EACdC,6BAA6B,EAC7BC,uCAAuC,EACvCC,0BAA0B,EAC1BC,gCAAgC,EAChCC,8BAA8B,QACzB,kBAAkB","names":["fluentProviderClassNames","FluentProvider","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/index.ts"],"sourcesContent":["export {\n fluentProviderClassNames,\n FluentProvider,\n renderFluentProvider_unstable,\n useFluentProviderContextValues_unstable,\n useFluentProvider_unstable,\n useFluentProviderStyles_unstable,\n useFluentProviderThemeStyleTag,\n} from './FluentProvider';\nexport type {\n FluentProviderContextValues,\n FluentProviderProps,\n FluentProviderState,\n FluentProviderSlots,\n} from './FluentProvider';\n"]}
package/lib-amd/components/FluentProvider/useFluentProviderThemeStyleTag.js CHANGED
@@ -1,4 +1,4 @@
1
- define(["require", "exports", "@fluentui/react-utilities", "react", "./useFluentProviderStyles"], function (require, exports, react_utilities_1, React, useFluentProviderStyles_1) {
1
+ define(["require", "exports", "tslib", "@fluentui/react-utilities", "@griffel/react", "react", "./useFluentProviderStyles"], function (require, exports, tslib_1, react_utilities_1, react_1, React, useFluentProviderStyles_1) {
2
2
  "use strict";
3
3
  Object.defineProperty(exports, "__esModule", { value: true });
4
4
  exports.useFluentProviderThemeStyleTag = void 0;
@@ -6,12 +6,14 @@ define(["require", "exports", "@fluentui/react-utilities", "react", "./useFluent
6
6
  var useInsertionEffect = React['useInsertion' + 'Effect']
7
7
  ? React['useInsertion' + 'Effect']
8
8
  : react_utilities_1.useIsomorphicLayoutEffect;
9
- var createStyleTag = function (target, id) {
9
+ var createStyleTag = function (target, elementAttributes) {
10
10
  if (!target) {
11
11
  return undefined;
12
12
  }
13
13
  var tag = target.createElement('style');
14
- tag.setAttribute('id', id);
14
+ Object.keys(elementAttributes).forEach(function (attrName) {
15
+ tag.setAttribute(attrName, elementAttributes[attrName]);
16
+ });
15
17
  target.head.appendChild(tag);
16
18
  return tag;
17
19
  };
@@ -35,8 +37,10 @@ define(["require", "exports", "@fluentui/react-utilities", "react", "./useFluent
35
37
  */
36
38
  var useFluentProviderThemeStyleTag = function (options) {
37
39
  var targetDocument = options.targetDocument, theme = options.theme;
40
+ var renderer = react_1.useRenderer_unstable();
38
41
  var styleTag = React.useRef();
39
42
  var styleTagId = react_utilities_1.useId(useFluentProviderStyles_1.fluentProviderClassNames.root);
43
+ var styleElementAttributes = renderer.styleElementAttributes;
40
44
  var cssVarsAsString = React.useMemo(function () {
41
45
  return theme
42
46
  ? Object.keys(theme).reduce(function (cssVarRule, cssVar) {
@@ -47,7 +51,7 @@ define(["require", "exports", "@fluentui/react-utilities", "react", "./useFluent
47
51
  }, [theme]);
48
52
  var rule = "." + styleTagId + " { " + cssVarsAsString + " }";
49
53
  useInsertionEffect(function () {
50
- styleTag.current = createStyleTag(targetDocument, styleTagId);
54
+ styleTag.current = createStyleTag(targetDocument, tslib_1.__assign(tslib_1.__assign({}, styleElementAttributes), { id: styleTagId }));
51
55
  if (styleTag.current) {
52
56
  insertSheet(styleTag.current, rule);
53
57
  return function () {
@@ -55,7 +59,7 @@ define(["require", "exports", "@fluentui/react-utilities", "react", "./useFluent
55
59
  (_a = styleTag.current) === null || _a === void 0 ? void 0 : _a.remove();
56
60
  };
57
61
  }
58
- }, [styleTagId, targetDocument, rule]);
62
+ }, [styleTagId, targetDocument, rule, styleElementAttributes]);
59
63
  return styleTagId;
60
64
  };
61
65
  exports.useFluentProviderThemeStyleTag = useFluentProviderThemeStyleTag;
package/lib-amd/components/FluentProvider/useFluentProviderThemeStyleTag.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"useFluentProviderThemeStyleTag.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"names":[],"mappings":";;;;IAKA,4FAA4F;IAC5F,IAAM,kBAAkB,GAAI,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC;QACpE,CAAC,CAAE,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC;QAC7C,CAAC,CAAC,2CAAyB,CAAC;IAE9B,IAAM,cAAc,GAAG,UAAC,MAA4B,EAAE,EAAU;QAC9D,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,SAAS,CAAC;SAClB;QACD,IAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAC1C,GAAG,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;QAC3B,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QAC7B,OAAO,GAAG,CAAC;IACb,CAAC,CAAC;IAEF,IAAM,WAAW,GAAG,UAAC,GAAqB,EAAE,IAAY;QACtD,IAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC;QAExB,IAAI,KAAK,EAAE;YACT,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC7B,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;aACrB;YACD,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;SAC3B;aAAM,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;YAChD,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,uFAAuF,CAAC,CAAC;SACxG;IACH,CAAC,CAAC;IAEF;;;;OAIG;IACI,IAAM,8BAA8B,GAAG,UAAC,OAA8D;QACnG,IAAA,cAAc,GAAY,OAAO,eAAnB,EAAE,KAAK,GAAK,OAAO,MAAZ,CAAa;QAC1C,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,EAAoB,CAAC;QAElD,IAAM,UAAU,GAAG,uBAAK,CAAC,kDAAwB,CAAC,IAAI,CAAC,CAAC;QAExD,IAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC;YACpC,OAAO,KAAK;gBACV,CAAC,CAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAA4B,CAAC,MAAM,CAAC,UAAC,UAAU,EAAE,MAAM;oBACvE,UAAU,IAAI,OAAK,MAAM,UAAK,KAAK,CAAC,MAAM,CAAC,OAAI,CAAC;oBAChD,OAAO,UAAU,CAAC;gBACpB,CAAC,EAAE,EAAE,CAAC;gBACR,CAAC,CAAC,EAAE,CAAC;QACT,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;QAEZ,IAAM,IAAI,GAAG,MAAI,UAAU,WAAM,eAAe,OAAI,CAAC;QAErD,kBAAkB,CAAC;YACjB,QAAQ,CAAC,OAAO,GAAG,cAAc,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;YAE9D,IAAI,QAAQ,CAAC,OAAO,EAAE;gBACpB,WAAW,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;gBAEpC,OAAO;;oBACL,MAAA,QAAQ,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAC;gBAC7B,CAAC,CAAC;aACH;QACH,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,IAAI,CAAC,CAAC,CAAC;QAEvC,OAAO,UAAU,CAAC;IACpB,CAAC,CAAC;IA9BW,QAAA,8BAA8B,kCA8BzC","sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\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, id: string) => {\n if (!target) {\n return undefined;\n }\n const tag = target.createElement('style');\n tag.setAttribute('id', id);\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 const styleTag = React.useRef<HTMLStyleElement>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\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, styleTagId);\n\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n\n return () => {\n styleTag.current?.remove();\n };\n }\n }, [styleTagId, targetDocument, rule]);\n\n return styleTagId;\n};\n"]}
1
+ {"version":3,"file":"useFluentProviderThemeStyleTag.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"names":[],"mappings":";;;;IAOA,4FAA4F;IAC5F,IAAM,kBAAkB,GAAI,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC;QACpE,CAAC,CAAE,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC;QAC7C,CAAC,CAAC,2CAAyB,CAAC;IAE9B,IAAM,cAAc,GAAG,UAAC,MAA4B,EAAE,iBAAyC;QAC7F,IAAI,CAAC,MAAM,EAAE;YACX,OAAO,SAAS,CAAC;SAClB;QAED,IAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE1C,MAAM,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,UAAA,QAAQ;YAC7C,GAAG,CAAC,YAAY,CAAC,QAAQ,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAC,CAAC;QAC1D,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QAC7B,OAAO,GAAG,CAAC;IACb,CAAC,CAAC;IAEF,IAAM,WAAW,GAAG,UAAC,GAAqB,EAAE,IAAY;QACtD,IAAM,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC;QAExB,IAAI,KAAK,EAAE;YACT,IAAI,KAAK,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,EAAE;gBAC7B,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;aACrB;YACD,KAAK,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;SAC3B;aAAM,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;YAChD,sCAAsC;YACtC,OAAO,CAAC,KAAK,CAAC,uFAAuF,CAAC,CAAC;SACxG;IACH,CAAC,CAAC;IAEF;;;;OAIG;IACI,IAAM,8BAA8B,GAAG,UAAC,OAA8D;QACnG,IAAA,cAAc,GAAY,OAAO,eAAnB,EAAE,KAAK,GAAK,OAAO,MAAZ,CAAa;QAE1C,IAAM,QAAQ,GAAG,4BAAoB,EAAE,CAAC;QACxC,IAAM,QAAQ,GAAG,KAAK,CAAC,MAAM,EAAoB,CAAC;QAElD,IAAM,UAAU,GAAG,uBAAK,CAAC,kDAAwB,CAAC,IAAI,CAAC,CAAC;QACxD,IAAM,sBAAsB,GAAG,QAAQ,CAAC,sBAAsB,CAAC;QAE/D,IAAM,eAAe,GAAG,KAAK,CAAC,OAAO,CAAC;YACpC,OAAO,KAAK;gBACV,CAAC,CAAE,MAAM,CAAC,IAAI,CAAC,KAAK,CAA4B,CAAC,MAAM,CAAC,UAAC,UAAU,EAAE,MAAM;oBACvE,UAAU,IAAI,OAAK,MAAM,UAAK,KAAK,CAAC,MAAM,CAAC,OAAI,CAAC;oBAChD,OAAO,UAAU,CAAC;gBACpB,CAAC,EAAE,EAAE,CAAC;gBACR,CAAC,CAAC,EAAE,CAAC;QACT,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;QAEZ,IAAM,IAAI,GAAG,MAAI,UAAU,WAAM,eAAe,OAAI,CAAC;QAErD,kBAAkB,CAAC;YACjB,QAAQ,CAAC,OAAO,GAAG,cAAc,CAAC,cAAc,wCAAO,sBAAsB,KAAE,EAAE,EAAE,UAAU,IAAG,CAAC;YAEjG,IAAI,QAAQ,CAAC,OAAO,EAAE;gBACpB,WAAW,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;gBAEpC,OAAO;;oBACL,MAAA,QAAQ,CAAC,OAAO,0CAAE,MAAM,EAAE,CAAC;gBAC7B,CAAC,CAAC;aACH;QACH,CAAC,EAAE,CAAC,UAAU,EAAE,cAAc,EAAE,IAAI,EAAE,sBAAsB,CAAC,CAAC,CAAC;QAE/D,OAAO,UAAU,CAAC;IACpB,CAAC,CAAC;IAjCW,QAAA,8BAA8B,kCAiCzC","sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useRenderer_unstable } from '@griffel/react';\nimport * as React from 'react';\n\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n ? (React as never)['useInsertion' + 'Effect']\n : useIsomorphicLayoutEffect;\n\nconst createStyleTag = (target: Document | undefined, elementAttributes: Record<string, string>) => {\n if (!target) {\n return undefined;\n }\n\n const tag = target.createElement('style');\n\n Object.keys(elementAttributes).forEach(attrName => {\n tag.setAttribute(attrName, elementAttributes[attrName]);\n });\n\n target.head.appendChild(tag);\n return tag;\n};\n\nconst insertSheet = (tag: HTMLStyleElement, rule: string) => {\n const sheet = tag.sheet;\n\n if (sheet) {\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n sheet.insertRule(rule, 0);\n } else if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n }\n};\n\n/**\n * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n *\n * @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {\n const { targetDocument, theme } = options;\n\n const renderer = useRenderer_unstable();\n const styleTag = React.useRef<HTMLStyleElement>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\n const styleElementAttributes = renderer.styleElementAttributes;\n\n const cssVarsAsString = React.useMemo(() => {\n return theme\n ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '')\n : '';\n }, [theme]);\n\n const rule = `.${styleTagId} { ${cssVarsAsString} }`;\n\n useInsertionEffect(() => {\n styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n\n return () => {\n styleTag.current?.remove();\n };\n }\n }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n return styleTagId;\n};\n"]}
package/lib-commonjs/FluentProvider.js CHANGED
@@ -3,8 +3,6 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
-
7
6
  const tslib_1 = /*#__PURE__*/require("tslib");
8
-
9
7
  tslib_1.__exportStar(require("./components/FluentProvider/index"), exports);
10
8
  //# sourceMappingURL=FluentProvider.js.map
package/lib-commonjs/FluentProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-provider/src/FluentProvider.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/FluentProvider/index';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/FluentProvider.ts"],"sourcesContent":["export * from './components/FluentProvider/index';\n"]}
package/lib-commonjs/components/FluentProvider/FluentProvider.js CHANGED
@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.FluentProvider = void 0;
7
-
8
7
  const React = /*#__PURE__*/require("react");
9
-
10
8
  const renderFluentProvider_1 = /*#__PURE__*/require("./renderFluentProvider");
11
-
12
9
  const useFluentProvider_1 = /*#__PURE__*/require("./useFluentProvider");
13
-
14
10
  const useFluentProviderStyles_1 = /*#__PURE__*/require("./useFluentProviderStyles");
15
-
16
11
  const useFluentProviderContextValues_1 = /*#__PURE__*/require("./useFluentProviderContextValues");
17
-
18
12
  exports.FluentProvider = /*#__PURE__*/React.forwardRef((props, ref) => {
19
13
  const state = useFluentProvider_1.useFluentProvider_unstable(props, ref);
20
14
  useFluentProviderStyles_1.useFluentProviderStyles_unstable(state);
package/lib-commonjs/components/FluentProvider/FluentProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,gCAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAGa,OAAA,CAAA,cAAA,gBAAiB,KAAK,CAAC,UAAN,CAAmD,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,EAAkC,GAAlC,CAAd;EACA,yBAAA,CAAA,gCAAA,CAAiC,KAAjC;EAEA,MAAM,aAAa,GAAG,gCAAA,CAAA,uCAAA,CAAwC,KAAxC,CAAtB;EAEA,OAAO,sBAAA,CAAA,6BAAA,CAA8B,KAA9B,EAAqC,aAArC,CAAP;AACD,CAP6B,CAAjB;AASb,OAAA,CAAA,cAAA,CAAe,WAAf,GAA6B,gBAA7B","sourcesContent":["import * as React from 'react';\nimport { renderFluentProvider_unstable } from './renderFluentProvider';\nimport { useFluentProvider_unstable } from './useFluentProvider';\nimport { useFluentProviderStyles_unstable } from './useFluentProviderStyles';\nimport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nimport type { FluentProviderProps } from './FluentProvider.types';\n\nexport const FluentProvider = React.forwardRef<HTMLElement, FluentProviderProps>((props, ref) => {\n const state = useFluentProvider_unstable(props, ref);\n useFluentProviderStyles_unstable(state);\n\n const contextValues = useFluentProviderContextValues_unstable(state);\n\n return renderFluentProvider_unstable(state, contextValues);\n});\n\nFluentProvider.displayName = 'FluentProvider';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AACA;AAGaA,sBAAc,gBAAGC,KAAK,CAACC,UAAU,CAAmC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGC,8CAA0B,CAACH,KAAK,EAAEC,GAAG,CAAC;EACpDG,0DAAgC,CAACF,KAAK,CAAC;EAEvC,MAAMG,aAAa,GAAGC,wEAAuC,CAACJ,KAAK,CAAC;EAEpE,OAAOK,oDAA6B,CAACL,KAAK,EAAEG,aAAa,CAAC;AAC5D,CAAC,CAAC;AAEFR,sBAAc,CAACW,WAAW,GAAG,gBAAgB","names":["exports","React","forwardRef","props","ref","state","useFluentProvider_1","useFluentProviderStyles_1","contextValues","useFluentProviderContextValues_1","renderFluentProvider_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderFluentProvider_unstable } from './renderFluentProvider';\nimport { useFluentProvider_unstable } from './useFluentProvider';\nimport { useFluentProviderStyles_unstable } from './useFluentProviderStyles';\nimport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nimport type { FluentProviderProps } from './FluentProvider.types';\n\nexport const FluentProvider = React.forwardRef<HTMLElement, FluentProviderProps>((props, ref) => {\n const state = useFluentProvider_unstable(props, ref);\n useFluentProviderStyles_unstable(state);\n\n const contextValues = useFluentProviderContextValues_unstable(state);\n\n return renderFluentProvider_unstable(state, contextValues);\n});\n\nFluentProvider.displayName = 'FluentProvider';\n"]}
package/lib-commonjs/components/FluentProvider/FluentProvider.types.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
1
+ {"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
package/lib-commonjs/components/FluentProvider/index.js CHANGED
@@ -3,20 +3,12 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
-
7
6
  const tslib_1 = /*#__PURE__*/require("tslib");
8
-
9
7
  tslib_1.__exportStar(require("./FluentProvider"), exports);
10
-
11
8
  tslib_1.__exportStar(require("./FluentProvider.types"), exports);
12
-
13
9
  tslib_1.__exportStar(require("./renderFluentProvider"), exports);
14
-
15
10
  tslib_1.__exportStar(require("./useFluentProvider"), exports);
16
-
17
11
  tslib_1.__exportStar(require("./useFluentProviderStyles"), exports);
18
-
19
12
  tslib_1.__exportStar(require("./useFluentProviderContextValues"), exports);
20
-
21
13
  tslib_1.__exportStar(require("./useFluentProviderThemeStyleTag"), exports);
22
14
  //# sourceMappingURL=index.js.map
package/lib-commonjs/components/FluentProvider/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-provider/src/components/FluentProvider/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './FluentProvider';\nexport * from './FluentProvider.types';\nexport * from './renderFluentProvider';\nexport * from './useFluentProvider';\nexport * from './useFluentProviderStyles';\nexport * from './useFluentProviderContextValues';\nexport * from './useFluentProviderThemeStyleTag';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/index.ts"],"sourcesContent":["export * from './FluentProvider';\nexport * from './FluentProvider.types';\nexport * from './renderFluentProvider';\nexport * from './useFluentProvider';\nexport * from './useFluentProviderStyles';\nexport * from './useFluentProviderContextValues';\nexport * from './useFluentProviderThemeStyleTag';\n"]}
package/lib-commonjs/components/FluentProvider/renderFluentProvider.js CHANGED
@@ -4,19 +4,13 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.renderFluentProvider_unstable = void 0;
7
-
8
7
  const React = /*#__PURE__*/require("react");
9
-
10
8
  const react_1 = /*#__PURE__*/require("@griffel/react");
11
-
12
9
  const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
13
-
14
10
  const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
15
11
  /**
16
12
  * Render the final JSX of FluentProvider
17
13
  */
18
-
19
-
20
14
  const renderFluentProvider_unstable = (state, contextValues) => {
21
15
  const {
22
16
  slots,
@@ -32,9 +26,9 @@ const renderFluentProvider_unstable = (state, contextValues) => {
32
26
  value: contextValues.tooltip
33
27
  }, React.createElement(react_1.TextDirectionProvider, {
34
28
  dir: contextValues.textDirection
35
- }, React.createElement(slots.root, { ...slotProps.root
29
+ }, React.createElement(slots.root, {
30
+ ...slotProps.root
36
31
  }, state.root.children))))));
37
32
  };
38
-
39
33
  exports.renderFluentProvider_unstable = renderFluentProvider_unstable;
40
34
  //# sourceMappingURL=renderFluentProvider.js.map
package/lib-commonjs/components/FluentProvider/renderFluentProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAMA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,6BAA6B,GAAG,CAC3C,KAD2C,EAE3C,aAF2C,KAGzC;EACF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA8B,KAA9B,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,iBAAD,EAAS;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAT,EACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,sBAAD,EAAc;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAd,EACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,+BAAD,EAAuB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAvB,EACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,kCAAD,EAA0B;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAA1B,EACE,KAAA,CAAA,aAAA,CAAC,OAAA,CAAA,qBAAD,EAAsB;IAAC,GAAG,EAAE,aAAa,CAAC;EAApB,CAAtB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,KAAK,CAAC,IAAN,CAAW,QAA5C,CADF,CADF,CADF,CADF,CADF,CADF;AAaD,CAnBM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import * as React from 'react';\nimport { TextDirectionProvider } from '@griffel/react';\nimport {\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n} from '@fluentui/react-shared-contexts';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n) => {\n const { slots, slotProps } = getSlots<FluentProviderSlots>(state);\n\n return (\n <Provider value={contextValues.provider}>\n <ThemeProvider value={contextValues.theme}>\n <ThemeClassNameProvider value={contextValues.themeClassName}>\n <TooltipVisibilityProvider value={contextValues.tooltip}>\n <TextDirectionProvider dir={contextValues.textDirection}>\n <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAMA;AAGA;;;AAGO,MAAMA,6BAA6B,GAAG,CAC3CC,KAA0B,EAC1BC,aAA0C,KACxC;EACF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAsBJ,KAAK,CAAC;EAEjE,OACEK,oBAACC,yCAAQ;IAACC,KAAK,EAAEN,aAAa,CAACO;EAAQ,GACrCH,oBAACC,8CAAa;IAACC,KAAK,EAAEN,aAAa,CAACQ;EAAK,GACvCJ,oBAACC,uDAAsB;IAACC,KAAK,EAAEN,aAAa,CAACS;EAAc,GACzDL,oBAACC,0DAAyB;IAACC,KAAK,EAAEN,aAAa,CAACU;EAAO,GACrDN,oBAACO,6BAAqB;IAACC,GAAG,EAAEZ,aAAa,CAACa;EAAa,GACrDT,oBAACH,KAAK,CAACa,IAAI;IAAA,GAAKZ,SAAS,CAACY;EAAI,GAAGf,KAAK,CAACe,IAAI,CAACC,QAAQ,CAAc,CAC5C,CACE,CACL,CACX,CACP;AAEf,CAAC;AAnBYC,qCAA6B","names":["renderFluentProvider_unstable","state","contextValues","slots","slotProps","react_utilities_1","React","react_shared_contexts_1","value","provider","theme","themeClassName","tooltip","react_1","dir","textDirection","root","children","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { TextDirectionProvider } from '@griffel/react';\nimport {\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n} from '@fluentui/react-shared-contexts';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n) => {\n const { slots, slotProps } = getSlots<FluentProviderSlots>(state);\n\n return (\n <Provider value={contextValues.provider}>\n <ThemeProvider value={contextValues.theme}>\n <ThemeClassNameProvider value={contextValues.themeClassName}>\n <TooltipVisibilityProvider value={contextValues.tooltip}>\n <TextDirectionProvider dir={contextValues.textDirection}>\n <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"]}
package/lib-commonjs/components/FluentProvider/useFluentProvider.js CHANGED
@@ -4,15 +4,10 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useFluentProvider_unstable = void 0;
7
-
8
7
  const react_tabster_1 = /*#__PURE__*/require("@fluentui/react-tabster");
9
-
10
8
  const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
11
-
12
9
  const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
13
-
14
10
  const React = /*#__PURE__*/require("react");
15
-
16
11
  const useFluentProviderThemeStyleTag_1 = /*#__PURE__*/require("./useFluentProviderThemeStyleTag");
17
12
  /**
18
13
  * Create the state required to render FluentProvider.
@@ -23,8 +18,6 @@ const useFluentProviderThemeStyleTag_1 = /*#__PURE__*/require("./useFluentProvid
23
18
  * @param props - props from this instance of FluentProvider
24
19
  * @param ref - reference to root HTMLElement of FluentProvider
25
20
  */
26
-
27
-
28
21
  const useFluentProvider_unstable = (props, ref) => {
29
22
  const parentContext = react_shared_contexts_1.useFluent_unstable();
30
23
  const parentTheme = useTheme();
@@ -33,7 +26,6 @@ const useFluentProvider_unstable = (props, ref) => {
33
26
  * nesting providers with the same "dir" should not add additional attributes to DOM
34
27
  * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93
35
28
  */
36
-
37
29
  const {
38
30
  applyStylesToPortals = true,
39
31
  dir = parentContext.dir,
@@ -49,8 +41,8 @@ const useFluentProvider_unstable = (props, ref) => {
49
41
  =============================================
50
42
  Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.
51
43
  `);
52
- } // eslint-disable-next-line react-hooks/exhaustive-deps
53
-
44
+ }
45
+ // eslint-disable-next-line react-hooks/exhaustive-deps
54
46
  }, []);
55
47
  return {
56
48
  applyStylesToPortals,
@@ -64,30 +56,27 @@ const useFluentProvider_unstable = (props, ref) => {
64
56
  components: {
65
57
  root: 'div'
66
58
  },
67
- root: react_utilities_1.getNativeElementProps('div', { ...props,
59
+ root: react_utilities_1.getNativeElementProps('div', {
60
+ ...props,
68
61
  dir,
69
62
  ref: react_utilities_1.useMergedRefs(ref, react_tabster_1.useFocusVisible())
70
63
  })
71
64
  };
72
65
  };
73
-
74
66
  exports.useFluentProvider_unstable = useFluentProvider_unstable;
75
-
76
67
  function mergeThemes(a, b) {
77
68
  // Merge impacts perf: we should like to avoid it if it's possible
78
69
  if (a && b) {
79
- return { ...a,
70
+ return {
71
+ ...a,
80
72
  ...b
81
73
  };
82
74
  }
83
-
84
75
  if (a) {
85
76
  return a;
86
77
  }
87
-
88
78
  return b;
89
79
  }
90
-
91
80
  function useTheme() {
92
81
  return React.useContext(react_shared_contexts_1.ThemeContext_unstable);
93
82
  }
package/lib-commonjs/components/FluentProvider/useFluentProvider.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAKA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gCAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;EACvB,MAAM,aAAa,GAAG,uBAAA,CAAA,kBAAA,EAAtB;EACA,MAAM,WAAW,GAAG,QAAQ,EAA5B;EAEA;;;;AAIG;;EACH,MAAM;IACJ,oBAAoB,GAAG,IADnB;IAEJ,GAAG,GAAG,aAAa,CAAC,GAFhB;IAGJ,cAAc,GAAG,aAAa,CAAC,cAH3B;IAIJ;EAJI,IAKF,KALJ;EAMA,MAAM,WAAW,GAAG,WAAW,CAAC,WAAD,EAAc,KAAd,CAA/B;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,IAAyC,WAAW,KAAK,SAA7D,EAAwE;MACtE;MACA,OAAO,CAAC,IAAR,CAAa;;;;AAIZ,OAJD;IAKD,CARkB,CASnB;;EACD,CAVD,EAUG,EAVH;EAYA,OAAO;IACL,oBADK;IAEL,GAFK;IAGL,cAHK;IAIL,KAAK,EAAE,WAJF;IAKL,cAAc,EAAE,gCAAA,CAAA,8BAAA,CAA+B;MAAE,KAAK,EAAE,WAAT;MAAsB;IAAtB,CAA/B,CALX;IAOL,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CAPP;IAWL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,EACjC,GAAG,KAD8B;MAEjC,GAFiC;MAGjC,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,eAAA,CAAA,eAAA,EAAnB;IAH4B,CAA7B;EAXD,CAAP;AAiBD,CAjDM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B;;AAmDb,SAAS,WAAT,CAAqB,CAArB,EAA2C,CAA3C,EAA+D;EAC7D;EACA,IAAI,CAAC,IAAI,CAAT,EAAY;IACV,OAAO,EAAE,GAAG,CAAL;MAAQ,GAAG;IAAX,CAAP;EACD;;EAED,IAAI,CAAJ,EAAO;IACL,OAAO,CAAP;EACD;;EAED,OAAO,CAAP;AACD;;AAED,SAAS,QAAT,GAAiB;EACf,OAAO,KAAK,CAAC,UAAN,CAAiB,uBAAA,CAAA,qBAAjB,CAAP;AACD","sourcesContent":["import { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n ThemeContext_unstable as ThemeContext,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport type { ThemeContextValue_unstable as ThemeContextValue } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */\nexport const useFluentProvider_unstable = (\n props: FluentProviderProps,\n ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n const parentContext = useFluent();\n const parentTheme = useTheme();\n\n /**\n * TODO: add merge functions to \"dir\" merge,\n * nesting providers with the same \"dir\" should not add additional attributes to DOM\n * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93\n */\n const {\n applyStylesToPortals = true,\n dir = parentContext.dir,\n targetDocument = parentContext.targetDocument,\n theme,\n } = props;\n const mergedTheme = mergeThemes(parentTheme, theme);\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {\n // eslint-disable-next-line no-console\n console.warn(`\n FluentProvider: your \"theme\" is not defined !\n =============================================\n Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.\n `);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return {\n applyStylesToPortals,\n dir,\n targetDocument,\n theme: mergedTheme,\n themeClassName: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),\n\n components: {\n root: 'div',\n },\n\n root: getNativeElementProps('div', {\n ...props,\n dir,\n ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>()),\n }),\n };\n};\n\nfunction mergeThemes(a: ThemeContextValue, b: ThemeContextValue): ThemeContextValue {\n // Merge impacts perf: we should like to avoid it if it's possible\n if (a && b) {\n return { ...a, ...b };\n }\n\n if (a) {\n return a;\n }\n\n return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n return React.useContext(ThemeContext);\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAA;AACA;AAKA;AACA;AACA;AAGA;;;;;;;;;AASO,MAAMA,0BAA0B,GAAG,CACxCC,KAA0B,EAC1BC,GAA2B,KACJ;EACvB,MAAMC,aAAa,GAAGC,0CAAS,EAAE;EACjC,MAAMC,WAAW,GAAGC,QAAQ,EAAE;EAE9B;;;;;EAKA,MAAM;IACJC,oBAAoB,GAAG,IAAI;IAC3BC,GAAG,GAAGL,aAAa,CAACK,GAAG;IACvBC,cAAc,GAAGN,aAAa,CAACM,cAAc;IAC7CC;EAAK,CACN,GAAGT,KAAK;EACT,MAAMU,WAAW,GAAGC,WAAW,CAACP,WAAW,EAAEK,KAAK,CAAC;EAEnDG,KAAK,CAACC,SAAS,CAAC,MAAK;IACnB,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,IAAIN,WAAW,KAAKO,SAAS,EAAE;MACtE;MACAC,OAAO,CAACC,IAAI,CAAC;;;;OAIZ,CAAC;;IAEJ;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACLb,oBAAoB;IACpBC,GAAG;IACHC,cAAc;IACdC,KAAK,EAAEC,WAAW;IAClBU,cAAc,EAAEC,+DAA8B,CAAC;MAAEZ,KAAK,EAAEC,WAAW;MAAEF;IAAc,CAAE,CAAC;IAEtFc,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IAEDA,IAAI,EAAEC,uCAAqB,CAAC,KAAK,EAAE;MACjC,GAAGxB,KAAK;MACRO,GAAG;MACHN,GAAG,EAAEuB,+BAAa,CAACvB,GAAG,EAAEwB,+BAAe,EAAkB;KAC1D;GACF;AACH,CAAC;AAjDYC,kCAA0B;AAmDvC,SAASf,WAAW,CAACgB,CAAoB,EAAEC,CAAoB;EAC7D;EACA,IAAID,CAAC,IAAIC,CAAC,EAAE;IACV,OAAO;MAAE,GAAGD,CAAC;MAAE,GAAGC;IAAC,CAAE;;EAGvB,IAAID,CAAC,EAAE;IACL,OAAOA,CAAC;;EAGV,OAAOC,CAAC;AACV;AAEA,SAASvB,QAAQ;EACf,OAAOO,KAAK,CAACiB,UAAU,CAAC1B,6CAAY,CAAC;AACvC","names":["useFluentProvider_unstable","props","ref","parentContext","react_shared_contexts_1","parentTheme","useTheme","applyStylesToPortals","dir","targetDocument","theme","mergedTheme","mergeThemes","React","useEffect","process","env","NODE_ENV","undefined","console","warn","themeClassName","useFluentProviderThemeStyleTag_1","components","root","react_utilities_1","react_tabster_1","exports","a","b","useContext"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts"],"sourcesContent":["import { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n ThemeContext_unstable as ThemeContext,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport type { ThemeContextValue_unstable as ThemeContextValue } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */\nexport const useFluentProvider_unstable = (\n props: FluentProviderProps,\n ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n const parentContext = useFluent();\n const parentTheme = useTheme();\n\n /**\n * TODO: add merge functions to \"dir\" merge,\n * nesting providers with the same \"dir\" should not add additional attributes to DOM\n * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93\n */\n const {\n applyStylesToPortals = true,\n dir = parentContext.dir,\n targetDocument = parentContext.targetDocument,\n theme,\n } = props;\n const mergedTheme = mergeThemes(parentTheme, theme);\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {\n // eslint-disable-next-line no-console\n console.warn(`\n FluentProvider: your \"theme\" is not defined !\n =============================================\n Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.\n `);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return {\n applyStylesToPortals,\n dir,\n targetDocument,\n theme: mergedTheme,\n themeClassName: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),\n\n components: {\n root: 'div',\n },\n\n root: getNativeElementProps('div', {\n ...props,\n dir,\n ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>()),\n }),\n };\n};\n\nfunction mergeThemes(a: ThemeContextValue, b: ThemeContextValue): ThemeContextValue {\n // Merge impacts perf: we should like to avoid it if it's possible\n if (a && b) {\n return { ...a, ...b };\n }\n\n if (a) {\n return a;\n }\n\n return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n return React.useContext(ThemeContext);\n}\n"]}
package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.js CHANGED
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useFluentProviderContextValues_unstable = void 0;
7
-
8
7
  const React = /*#__PURE__*/require("react");
9
-
10
8
  function useFluentProviderContextValues_unstable(state) {
11
9
  const {
12
10
  applyStylesToPortals,
@@ -19,8 +17,8 @@ function useFluentProviderContextValues_unstable(state) {
19
17
  const provider = React.useMemo(() => ({
20
18
  dir,
21
19
  targetDocument
22
- }), [dir, targetDocument]); // "Tooltip" component mutates an object in this context, instance should be stable
23
-
20
+ }), [dir, targetDocument]);
21
+ // "Tooltip" component mutates an object in this context, instance should be stable
24
22
  const [tooltip] = React.useState(() => ({}));
25
23
  return {
26
24
  provider,
@@ -30,6 +28,5 @@ function useFluentProviderContextValues_unstable(state) {
30
28
  themeClassName: applyStylesToPortals ? root.className : themeClassName
31
29
  };
32
30
  }
33
-
34
31
  exports.useFluentProviderContextValues_unstable = useFluentProviderContextValues_unstable;
35
32
  //# sourceMappingURL=useFluentProviderContextValues.js.map
package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderContextValues.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,SAAgB,uCAAhB,CAAwD,KAAxD,EAAkF;EAChF,MAAM;IAAE,oBAAF;IAAwB,GAAxB;IAA6B,IAA7B;IAAmC,cAAnC;IAAmD,KAAnD;IAA0D;EAA1D,IAA6E,KAAnF;EAEA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,OAAO;IAAE,GAAF;IAAO;EAAP,CAAP,CAAd,EAA+C,CAAC,GAAD,EAAM,cAAN,CAA/C,CAAjB,CAHgF,CAIhF;;EACA,MAAM,CAAC,OAAD,IAAY,KAAK,CAAC,QAAN,CAAe,OAAO,EAAP,CAAf,CAAlB;EAEA,OAAO;IACL,QADK;IAEL,aAAa,EAAE,GAFV;IAGL,OAHK;IAIL,KAJK;IAKL,cAAc,EAAE,oBAAoB,GAAG,IAAI,CAAC,SAAR,GAAqB;EALpD,CAAP;AAOD;;AAdD,OAAA,CAAA,uCAAA,GAAA,uCAAA","sourcesContent":["import * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n const { applyStylesToPortals, dir, root, targetDocument, theme, themeClassName } = state;\n\n const provider = React.useMemo(() => ({ dir, targetDocument }), [dir, targetDocument]);\n // \"Tooltip\" component mutates an object in this context, instance should be stable\n const [tooltip] = React.useState(() => ({}));\n\n return {\n provider,\n textDirection: dir,\n tooltip,\n theme,\n themeClassName: applyStylesToPortals ? root.className! : themeClassName,\n };\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAA;AAGA,SAAgBA,uCAAuC,CAACC,KAA0B;EAChF,MAAM;IAAEC,oBAAoB;IAAEC,GAAG;IAAEC,IAAI;IAAEC,cAAc;IAAEC,KAAK;IAAEC;EAAc,CAAE,GAAGN,KAAK;EAExF,MAAMO,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAAC,OAAO;IAAEP,GAAG;IAAEE;EAAc,CAAE,CAAC,EAAE,CAACF,GAAG,EAAEE,cAAc,CAAC,CAAC;EACtF;EACA,MAAM,CAACM,OAAO,CAAC,GAAGF,KAAK,CAACG,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;EAE5C,OAAO;IACLJ,QAAQ;IACRK,aAAa,EAAEV,GAAG;IAClBQ,OAAO;IACPL,KAAK;IACLC,cAAc,EAAEL,oBAAoB,GAAGE,IAAI,CAACU,SAAU,GAAGP;GAC1D;AACH;AAdAQ","names":["useFluentProviderContextValues_unstable","state","applyStylesToPortals","dir","root","targetDocument","theme","themeClassName","provider","React","useMemo","tooltip","useState","textDirection","className","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n const { applyStylesToPortals, dir, root, targetDocument, theme, themeClassName } = state;\n\n const provider = React.useMemo(() => ({ dir, targetDocument }), [dir, targetDocument]);\n // \"Tooltip\" component mutates an object in this context, instance should be stable\n const [tooltip] = React.useState(() => ({}));\n\n return {\n provider,\n textDirection: dir,\n tooltip,\n theme,\n themeClassName: applyStylesToPortals ? root.className! : themeClassName,\n };\n}\n"]}
package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.js CHANGED
@@ -4,33 +4,26 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useFluentProviderStyles_unstable = exports.fluentProviderClassNames = void 0;
7
-
8
7
  const core_1 = /*#__PURE__*/require("@griffel/core");
9
-
10
8
  const react_1 = /*#__PURE__*/require("@griffel/react");
11
-
12
9
  const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
13
-
14
10
  exports.fluentProviderClassNames = {
15
11
  root: 'fui-FluentProvider'
16
12
  };
17
-
18
13
  const useStyles = /*#__PURE__*/core_1.__styles({
19
- "root": {
20
- "sj55zd": "f19n0e5",
21
- "De3pzq": "fxugw4r",
22
- "fsow6f": ["f1o700av", "fes3tcz"],
23
- "Bahqtrf": "fk6fouc",
24
- "Be2twd7": "fkhj508",
25
- "Bhrd7zp": "figsok6",
26
- "Bg96gwp": "f1i3iumi"
14
+ root: {
15
+ sj55zd: "f19n0e5",
16
+ De3pzq: "fxugw4r",
17
+ fsow6f: ["f1o700av", "fes3tcz"],
18
+ Bahqtrf: "fk6fouc",
19
+ Be2twd7: "fkhj508",
20
+ Bhrd7zp: "figsok6",
21
+ Bg96gwp: "f1i3iumi"
27
22
  }
28
23
  }, {
29
- "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);}"]
24
+ d: [".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}"]
30
25
  });
31
26
  /** Applies style classnames to slots */
32
-
33
-
34
27
  const useFluentProviderStyles_unstable = state => {
35
28
  const renderer = react_1.useRenderer_unstable();
36
29
  const styles = useStyles({
@@ -40,6 +33,5 @@ const useFluentProviderStyles_unstable = state => {
40
33
  state.root.className = core_1.mergeClasses(exports.fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);
41
34
  return state;
42
35
  };
43
-
44
36
  exports.useFluentProviderStyles_unstable = useFluentProviderStyles_unstable;
45
37
  //# sourceMappingURL=useFluentProviderStyles.js.map
package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,MAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,wBAAA,GAAgE;EAC3E,IAAI,EAAE;AADqE,CAAhE;;AAIb,MAAM,SAAS,gBAAG,MAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AASA;;;AACO,MAAM,gCAAgC,GAAI,KAAD,IAA+B;EAC7E,MAAM,QAAQ,GAAG,OAAA,CAAA,oBAAA,EAAjB;EACA,MAAM,MAAM,GAAG,SAAS,CAAC;IAAE,GAAG,EAAE,KAAK,CAAC,GAAb;IAAkB;EAAlB,CAAD,CAAxB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,MAAA,CAAA,YAAA,CACrB,OAAA,CAAA,wBAAA,CAAyB,IADJ,EAErB,KAAK,CAAC,cAFe,EAGrB,MAAM,CAAC,IAHc,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAOA,OAAO,KAAP;AACD,CAZM;;AAAM,OAAA,CAAA,gCAAA,GAAgC,gCAAhC","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"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAIaA,gCAAwB,GAAwC;EAC3EC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGC,eAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAO1B;AAEF;AACO,MAAMC,gCAAgC,GAAIC,KAA0B,IAAI;EAC7E,MAAMC,QAAQ,GAAGC,4BAAoB,EAAE;EACvC,MAAMC,MAAM,GAAGN,SAAS,CAAC;IAAEO,GAAG,EAAEJ,KAAK,CAACI,GAAG;IAAEH;EAAQ,CAAE,CAAC;EAEtDD,KAAK,CAACJ,IAAI,CAACS,SAAS,GAAGP,mBAAY,CACjCH,gCAAwB,CAACC,IAAI,EAC7BI,KAAK,CAACM,cAAc,EACpBH,MAAM,CAACP,IAAI,EACXI,KAAK,CAACJ,IAAI,CAACS,SAAS,CACrB;EAED,OAAOL,KAAK;AACd,CAAC;AAZYL,wCAAgC","names":["exports","root","useStyles","core_1","useFluentProviderStyles_unstable","state","renderer","react_1","styles","dir","className","themeClassName"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {\n root: 'fui-FluentProvider',\n};\n\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n textAlign: 'left',\n ...typographyStyles.body1,\n },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState) => {\n const renderer = useRenderer_unstable();\n const styles = useStyles({ dir: state.dir, renderer });\n\n state.root.className = mergeClasses(\n fluentProviderClassNames.root,\n state.themeClassName,\n styles.root,\n state.root.className,\n );\n\n return state;\n};\n"]}
package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js CHANGED
@@ -4,35 +4,29 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useFluentProviderThemeStyleTag = void 0;
7
-
8
7
  const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
9
-
8
+ const react_1 = /*#__PURE__*/require("@griffel/react");
10
9
  const React = /*#__PURE__*/require("react");
11
-
12
- const useFluentProviderStyles_1 = /*#__PURE__*/require("./useFluentProviderStyles"); // String concatenation is used to prevent bundlers to complain with older versions of React
13
-
14
-
10
+ const useFluentProviderStyles_1 = /*#__PURE__*/require("./useFluentProviderStyles");
11
+ // String concatenation is used to prevent bundlers to complain with older versions of React
15
12
  const useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : react_utilities_1.useIsomorphicLayoutEffect;
16
-
17
- const createStyleTag = (target, id) => {
13
+ const createStyleTag = (target, elementAttributes) => {
18
14
  if (!target) {
19
15
  return undefined;
20
16
  }
21
-
22
17
  const tag = target.createElement('style');
23
- tag.setAttribute('id', id);
18
+ Object.keys(elementAttributes).forEach(attrName => {
19
+ tag.setAttribute(attrName, elementAttributes[attrName]);
20
+ });
24
21
  target.head.appendChild(tag);
25
22
  return tag;
26
23
  };
27
-
28
24
  const insertSheet = (tag, rule) => {
29
25
  const sheet = tag.sheet;
30
-
31
26
  if (sheet) {
32
27
  if (sheet.cssRules.length > 0) {
33
28
  sheet.deleteRule(0);
34
29
  }
35
-
36
30
  sheet.insertRule(rule, 0);
37
31
  } else if (process.env.NODE_ENV !== 'production') {
38
32
  // eslint-disable-next-line no-console
@@ -44,15 +38,15 @@ const insertSheet = (tag, rule) => {
44
38
  *
45
39
  * @returns CSS class to apply the rule
46
40
  */
47
-
48
-
49
41
  const useFluentProviderThemeStyleTag = options => {
50
42
  const {
51
43
  targetDocument,
52
44
  theme
53
45
  } = options;
46
+ const renderer = react_1.useRenderer_unstable();
54
47
  const styleTag = React.useRef();
55
48
  const styleTagId = react_utilities_1.useId(useFluentProviderStyles_1.fluentProviderClassNames.root);
49
+ const styleElementAttributes = renderer.styleElementAttributes;
56
50
  const cssVarsAsString = React.useMemo(() => {
57
51
  return theme ? Object.keys(theme).reduce((cssVarRule, cssVar) => {
58
52
  cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;
@@ -61,19 +55,19 @@ const useFluentProviderThemeStyleTag = options => {
61
55
  }, [theme]);
62
56
  const rule = `.${styleTagId} { ${cssVarsAsString} }`;
63
57
  useInsertionEffect(() => {
64
- styleTag.current = createStyleTag(targetDocument, styleTagId);
65
-
58
+ styleTag.current = createStyleTag(targetDocument, {
59
+ ...styleElementAttributes,
60
+ id: styleTagId
61
+ });
66
62
  if (styleTag.current) {
67
63
  insertSheet(styleTag.current, rule);
68
64
  return () => {
69
65
  var _a;
70
-
71
66
  (_a = styleTag.current) === null || _a === void 0 ? void 0 : _a.remove();
72
67
  };
73
68
  }
74
- }, [styleTagId, targetDocument, rule]);
69
+ }, [styleTagId, targetDocument, rule, styleElementAttributes]);
75
70
  return styleTagId;
76
71
  };
77
-
78
72
  exports.useFluentProviderThemeStyleTag = useFluentProviderThemeStyleTag;
79
73
  //# sourceMappingURL=useFluentProviderThemeStyleTag.js.map
package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA,C,CAEA;;;AACA,MAAM,kBAAkB,GAAI,KAAe,CAAC,iBAAiB,QAAlB,CAAf,GACvB,KAAe,CAAC,iBAAiB,QAAlB,CADQ,GAExB,iBAAA,CAAA,yBAFJ;;AAIA,MAAM,cAAc,GAAG,CAAC,MAAD,EAA+B,EAA/B,KAA6C;EAClE,IAAI,CAAC,MAAL,EAAa;IACX,OAAO,SAAP;EACD;;EACD,MAAM,GAAG,GAAG,MAAM,CAAC,aAAP,CAAqB,OAArB,CAAZ;EACA,GAAG,CAAC,YAAJ,CAAiB,IAAjB,EAAuB,EAAvB;EACA,MAAM,CAAC,IAAP,CAAY,WAAZ,CAAwB,GAAxB;EACA,OAAO,GAAP;AACD,CARD;;AAUA,MAAM,WAAW,GAAG,CAAC,GAAD,EAAwB,IAAxB,KAAwC;EAC1D,MAAM,KAAK,GAAG,GAAG,CAAC,KAAlB;;EAEA,IAAI,KAAJ,EAAW;IACT,IAAI,KAAK,CAAC,QAAN,CAAe,MAAf,GAAwB,CAA5B,EAA+B;MAC7B,KAAK,CAAC,UAAN,CAAiB,CAAjB;IACD;;IACD,KAAK,CAAC,UAAN,CAAiB,IAAjB,EAAuB,CAAvB;EACD,CALD,MAKO,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;IAChD;IACA,OAAO,CAAC,KAAR,CAAc,uFAAd;EACD;AACF,CAZD;AAcA;;;;AAIG;;;AACI,MAAM,8BAA8B,GAAI,OAAD,IAAmE;EAC/G,MAAM;IAAE,cAAF;IAAkB;EAAlB,IAA4B,OAAlC;EACA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,EAAjB;EAEA,MAAM,UAAU,GAAG,iBAAA,CAAA,KAAA,CAAM,yBAAA,CAAA,wBAAA,CAAyB,IAA/B,CAAnB;EAEA,MAAM,eAAe,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IACzC,OAAO,KAAK,GACP,MAAM,CAAC,IAAP,CAAY,KAAZ,EAA8C,MAA9C,CAAqD,CAAC,UAAD,EAAa,MAAb,KAAuB;MAC3E,UAAU,IAAI,KAAK,MAAM,KAAK,KAAK,CAAC,MAAD,CAAQ,IAA3C;MACA,OAAO,UAAP;IACD,CAHA,EAGE,EAHF,CADO,GAKR,EALJ;EAMD,CAPuB,EAOrB,CAAC,KAAD,CAPqB,CAAxB;EASA,MAAM,IAAI,GAAG,IAAI,UAAU,MAAM,eAAe,IAAhD;EAEA,kBAAkB,CAAC,MAAK;IACtB,QAAQ,CAAC,OAAT,GAAmB,cAAc,CAAC,cAAD,EAAiB,UAAjB,CAAjC;;IAEA,IAAI,QAAQ,CAAC,OAAb,EAAsB;MACpB,WAAW,CAAC,QAAQ,CAAC,OAAV,EAAmB,IAAnB,CAAX;MAEA,OAAO,MAAK;;;QACV,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAT,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAE,MAAF,EAAhB;MACD,CAFD;IAGD;EACF,CAViB,EAUf,CAAC,UAAD,EAAa,cAAb,EAA6B,IAA7B,CAVe,CAAlB;EAYA,OAAO,UAAP;AACD,CA9BM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\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, id: string) => {\n if (!target) {\n return undefined;\n }\n const tag = target.createElement('style');\n tag.setAttribute('id', id);\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 const styleTag = React.useRef<HTMLStyleElement>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\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, styleTagId);\n\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n\n return () => {\n styleTag.current?.remove();\n };\n }\n }, [styleTagId, targetDocument, rule]);\n\n return styleTagId;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAGA;AAEA;AACA,MAAMA,kBAAkB,GAAIC,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC,GACjEA,KAAe,CAAC,cAAc,GAAG,QAAQ,CAAC,GAC3CC,2CAAyB;AAE7B,MAAMC,cAAc,GAAG,CAACC,MAA4B,EAAEC,iBAAyC,KAAI;EACjG,IAAI,CAACD,MAAM,EAAE;IACX,OAAOE,SAAS;;EAGlB,MAAMC,GAAG,GAAGH,MAAM,CAACI,aAAa,CAAC,OAAO,CAAC;EAEzCC,MAAM,CAACC,IAAI,CAACL,iBAAiB,CAAC,CAACM,OAAO,CAACC,QAAQ,IAAG;IAChDL,GAAG,CAACM,YAAY,CAACD,QAAQ,EAAEP,iBAAiB,CAACO,QAAQ,CAAC,CAAC;EACzD,CAAC,CAAC;EAEFR,MAAM,CAACU,IAAI,CAACC,WAAW,CAACR,GAAG,CAAC;EAC5B,OAAOA,GAAG;AACZ,CAAC;AAED,MAAMS,WAAW,GAAG,CAACT,GAAqB,EAAEU,IAAY,KAAI;EAC1D,MAAMC,KAAK,GAAGX,GAAG,CAACW,KAAK;EAEvB,IAAIA,KAAK,EAAE;IACT,IAAIA,KAAK,CAACC,QAAQ,CAACC,MAAM,GAAG,CAAC,EAAE;MAC7BF,KAAK,CAACG,UAAU,CAAC,CAAC,CAAC;;IAErBH,KAAK,CAACI,UAAU,CAACL,IAAI,EAAE,CAAC,CAAC;GAC1B,MAAM,IAAIM,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IAChD;IACAC,OAAO,CAACC,KAAK,CAAC,uFAAuF,CAAC;;AAE1G,CAAC;AAED;;;;;AAKO,MAAMC,8BAA8B,GAAIC,OAA8D,IAAI;EAC/G,MAAM;IAAEC,cAAc;IAAEC;EAAK,CAAE,GAAGF,OAAO;EAEzC,MAAMG,QAAQ,GAAGC,4BAAoB,EAAE;EACvC,MAAMC,QAAQ,GAAGjC,KAAK,CAACkC,MAAM,EAAoB;EAEjD,MAAMC,UAAU,GAAGlC,uBAAK,CAACmC,kDAAwB,CAACC,IAAI,CAAC;EACvD,MAAMC,sBAAsB,GAAGP,QAAQ,CAACO,sBAAsB;EAE9D,MAAMC,eAAe,GAAGvC,KAAK,CAACwC,OAAO,CAAC,MAAK;IACzC,OAAOV,KAAK,GACPtB,MAAM,CAACC,IAAI,CAACqB,KAAK,CAA4B,CAACW,MAAM,CAAC,CAACC,UAAU,EAAEC,MAAM,KAAI;MAC3ED,UAAU,IAAI,KAAKC,MAAM,KAAKb,KAAK,CAACa,MAAM,CAAC,IAAI;MAC/C,OAAOD,UAAU;IACnB,CAAC,EAAE,EAAE,CAAC,GACN,EAAE;EACR,CAAC,EAAE,CAACZ,KAAK,CAAC,CAAC;EAEX,MAAMd,IAAI,GAAG,IAAImB,UAAU,MAAMI,eAAe,IAAI;EAEpDxC,kBAAkB,CAAC,MAAK;IACtBkC,QAAQ,CAACW,OAAO,GAAG1C,cAAc,CAAC2B,cAAc,EAAE;MAAE,GAAGS,sBAAsB;MAAEO,EAAE,EAAEV;IAAU,CAAE,CAAC;IAEhG,IAAIF,QAAQ,CAACW,OAAO,EAAE;MACpB7B,WAAW,CAACkB,QAAQ,CAACW,OAAO,EAAE5B,IAAI,CAAC;MAEnC,OAAO,MAAK;;QACV,cAAQ,CAAC4B,OAAO,0CAAEE,MAAM,EAAE;MAC5B,CAAC;;EAEL,CAAC,EAAE,CAACX,UAAU,EAAEN,cAAc,EAAEb,IAAI,EAAEsB,sBAAsB,CAAC,CAAC;EAE9D,OAAOH,UAAU;AACnB,CAAC;AAjCYY,sCAA8B","names":["useInsertionEffect","React","react_utilities_1","createStyleTag","target","elementAttributes","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","head","appendChild","insertSheet","rule","sheet","cssRules","length","deleteRule","insertRule","process","env","NODE_ENV","console","error","useFluentProviderThemeStyleTag","options","targetDocument","theme","renderer","react_1","styleTag","useRef","styleTagId","useFluentProviderStyles_1","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","current","id","remove","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useRenderer_unstable } from '@griffel/react';\nimport * as React from 'react';\n\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n ? (React as never)['useInsertion' + 'Effect']\n : useIsomorphicLayoutEffect;\n\nconst createStyleTag = (target: Document | undefined, elementAttributes: Record<string, string>) => {\n if (!target) {\n return undefined;\n }\n\n const tag = target.createElement('style');\n\n Object.keys(elementAttributes).forEach(attrName => {\n tag.setAttribute(attrName, elementAttributes[attrName]);\n });\n\n target.head.appendChild(tag);\n return tag;\n};\n\nconst insertSheet = (tag: HTMLStyleElement, rule: string) => {\n const sheet = tag.sheet;\n\n if (sheet) {\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n sheet.insertRule(rule, 0);\n } else if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n }\n};\n\n/**\n * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n *\n * @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {\n const { targetDocument, theme } = options;\n\n const renderer = useRenderer_unstable();\n const styleTag = React.useRef<HTMLStyleElement>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\n const styleElementAttributes = renderer.styleElementAttributes;\n\n const cssVarsAsString = React.useMemo(() => {\n return theme\n ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '')\n : '';\n }, [theme]);\n\n const rule = `.${styleTagId} { ${cssVarsAsString} }`;\n\n useInsertionEffect(() => {\n styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n\n return () => {\n styleTag.current?.remove();\n };\n }\n }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n return styleTagId;\n};\n"]}
package/lib-commonjs/index.js CHANGED
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.useFluentProviderThemeStyleTag = exports.useFluentProviderStyles_unstable = exports.useFluentProvider_unstable = exports.useFluentProviderContextValues_unstable = exports.renderFluentProvider_unstable = exports.FluentProvider = exports.fluentProviderClassNames = void 0;
7
-
8
7
  var FluentProvider_1 = /*#__PURE__*/require("./FluentProvider");
9
-
10
8
  Object.defineProperty(exports, "fluentProviderClassNames", {
11
9
  enumerable: true,
12
10
  get: function () {
package/lib-commonjs/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["packages/react-components/react-provider/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,wBAAA;EAAwB;AAAxB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,cAAA;EAAc;AAAd,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,6BAAA;EAA6B;AAA7B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yCAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,uCAAA;EAAuC;AAAvC,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,0BAAA;EAA0B;AAA1B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kCAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,gCAAA;EAAgC;AAAhC,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gCAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,8BAAA;EAA8B;AAA9B,CAAA","sourcesContent":["export {\n fluentProviderClassNames,\n FluentProvider,\n renderFluentProvider_unstable,\n useFluentProviderContextValues_unstable,\n useFluentProvider_unstable,\n useFluentProviderStyles_unstable,\n useFluentProviderThemeStyleTag,\n} from './FluentProvider';\nexport type {\n FluentProviderContextValues,\n FluentProviderProps,\n FluentProviderState,\n FluentProviderSlots,\n} from './FluentProvider';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"mappings":";;;;;;AAAA;AACEA;EAAAC;EAAAC;IAAA,gDAAwB;EAAA;AAAA;AACxBF;EAAAC;EAAAC;IAAA,sCAAc;EAAA;AAAA;AACdF;EAAAC;EAAAC;IAAA,qDAA6B;EAAA;AAAA;AAC7BF;EAAAC;EAAAC;IAAA,+DAAuC;EAAA;AAAA;AACvCF;EAAAC;EAAAC;IAAA,kDAA0B;EAAA;AAAA;AAC1BF;EAAAC;EAAAC;IAAA,wDAAgC;EAAA;AAAA;AAChCF;EAAAC;EAAAC;IAAA,sDAA8B;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/index.ts"],"sourcesContent":["export {\n fluentProviderClassNames,\n FluentProvider,\n renderFluentProvider_unstable,\n useFluentProviderContextValues_unstable,\n useFluentProvider_unstable,\n useFluentProviderStyles_unstable,\n useFluentProviderThemeStyleTag,\n} from './FluentProvider';\nexport type {\n FluentProviderContextValues,\n FluentProviderProps,\n FluentProviderState,\n FluentProviderSlots,\n} from './FluentProvider';\n"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-provider",
3
- "version": "9.1.11",
3
+ "version": "9.2.0",
4
4
  "description": "Fluent UI React provider component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -27,16 +27,16 @@
27
27
  "devDependencies": {
28
28
  "@fluentui/eslint-plugin": "*",
29
29
  "@fluentui/react-conformance": "*",
30
- "@fluentui/react-conformance-griffel": "9.0.0-beta.18",
31
- "@fluentui/scripts": "^1.0.0"
30
+ "@fluentui/react-conformance-griffel": "9.0.0-beta.19",
31
+ "@fluentui/scripts": "*"
32
32
  },
33
33
  "dependencies": {
34
- "@griffel/core": "^1.8.1",
35
- "@griffel/react": "^1.4.2",
34
+ "@griffel/core": "^1.9.0",
35
+ "@griffel/react": "^1.5.2",
36
36
  "@fluentui/react-shared-contexts": "^9.1.4",
37
- "@fluentui/react-tabster": "^9.3.4",
37
+ "@fluentui/react-tabster": "^9.3.5",
38
38
  "@fluentui/react-theme": "^9.1.5",
39
- "@fluentui/react-utilities": "^9.3.0",
39
+ "@fluentui/react-utilities": "^9.3.1",
40
40
  "tslib": "^2.1.0"
41
41
  },
42
42
  "peerDependencies": {