@fluentui/react-provider 9.8.5 → 9.9.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.
package/CHANGELOG.json CHANGED
@@ -2,7 +2,46 @@
2
2
  "name": "@fluentui/react-provider",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 14 Sep 2023 16:40:23 GMT",
5
+ "date": "Wed, 20 Sep 2023 14:13:57 GMT",
6
+ "tag": "@fluentui/react-provider_v9.9.0",
7
+ "version": "9.9.0",
8
+ "comments": {
9
+ "minor": [
10
+ {
11
+ "author": "marcosvmmoura@gmail.com",
12
+ "package": "@fluentui/react-provider",
13
+ "commit": "921694374c78c37ecf18d7bb99000bb0bb67551b",
14
+ "comment": "feat: add custom styling hooks for Drawer subcomponents"
15
+ },
16
+ {
17
+ "author": "olfedias@microsoft.com",
18
+ "package": "@fluentui/react-provider",
19
+ "commit": "48153fef6aa6ba63abfdfad25fb76dea13395b94",
20
+ "comment": "feat: add createCSSRuleFromTheme() to create CSS from themes"
21
+ },
22
+ {
23
+ "author": "beachball",
24
+ "package": "@fluentui/react-provider",
25
+ "comment": "Bump @fluentui/react-shared-contexts to v9.8.0",
26
+ "commit": "c60d4e7169457535c8d23701f6b951d1fff478ab"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-provider",
31
+ "comment": "Bump @fluentui/react-tabster to v9.12.10",
32
+ "commit": "c60d4e7169457535c8d23701f6b951d1fff478ab"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-provider",
37
+ "comment": "Bump @fluentui/react-jsx-runtime to v9.0.9",
38
+ "commit": "c60d4e7169457535c8d23701f6b951d1fff478ab"
39
+ }
40
+ ]
41
+ }
42
+ },
43
+ {
44
+ "date": "Thu, 14 Sep 2023 16:44:47 GMT",
6
45
  "tag": "@fluentui/react-provider_v9.8.5",
7
46
  "version": "9.8.5",
8
47
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,25 @@
1
1
  # Change Log - @fluentui/react-provider
2
2
 
3
- This log was last generated on Thu, 14 Sep 2023 16:40:23 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 20 Sep 2023 14:13:57 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.9.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.9.0)
8
+
9
+ Wed, 20 Sep 2023 14:13:57 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.8.5..@fluentui/react-provider_v9.9.0)
11
+
12
+ ### Minor changes
13
+
14
+ - feat: add custom styling hooks for Drawer subcomponents ([PR #29041](https://github.com/microsoft/fluentui/pull/29041) by marcosvmmoura@gmail.com)
15
+ - feat: add createCSSRuleFromTheme() to create CSS from themes ([PR #29052](https://github.com/microsoft/fluentui/pull/29052) by olfedias@microsoft.com)
16
+ - Bump @fluentui/react-shared-contexts to v9.8.0 ([PR #29193](https://github.com/microsoft/fluentui/pull/29193) by beachball)
17
+ - Bump @fluentui/react-tabster to v9.12.10 ([PR #29193](https://github.com/microsoft/fluentui/pull/29193) by beachball)
18
+ - Bump @fluentui/react-jsx-runtime to v9.0.9 ([PR #29193](https://github.com/microsoft/fluentui/pull/29193) by beachball)
19
+
7
20
  ## [9.8.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.8.5)
8
21
 
9
- Thu, 14 Sep 2023 16:40:23 GMT
22
+ Thu, 14 Sep 2023 16:44:47 GMT
10
23
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.8.4..@fluentui/react-provider_v9.8.5)
11
24
 
12
25
  ### Patches
package/dist/index.d.ts CHANGED
@@ -15,6 +15,13 @@ import type { ThemeClassNameContextValue_unstable } from '@fluentui/react-shared
15
15
  import type { ThemeContextValue_unstable } from '@fluentui/react-shared-contexts';
16
16
  import type { TooltipVisibilityContextValue_unstable } from '@fluentui/react-shared-contexts';
17
17
 
18
+ /**
19
+ * Creates a CSS rule from a theme object.
20
+ *
21
+ * Useful for scenarios when you want to apply theming statically to a top level elements like `body`.
22
+ */
23
+ export declare function createCSSRuleFromTheme(selector: string, theme: PartialTheme | undefined): string;
24
+
18
25
  export declare const FluentProvider: React_2.ForwardRefExoticComponent<Omit<ComponentProps<FluentProviderSlots, "root">, "dir"> & {
19
26
  applyStylesToPortals?: boolean | undefined;
20
27
  customStyleHooks_unstable?: Partial<{
@@ -102,10 +109,13 @@ export declare const FluentProvider: React_2.ForwardRefExoticComponent<Omit<Comp
102
109
  useDataGridHeaderCellStyles_unstable: (state: unknown) => void;
103
110
  useDataGridSelectionCellStyles_unstable: (state: unknown) => void;
104
111
  useDrawerStyles_unstable: (state: unknown) => void;
105
- useDrawerBodyStyles_unstable: (state: unknown) => void;
112
+ useDrawerInlineStyles_unstable: (state: unknown) => void;
113
+ useDrawerOverlayStyles_unstable: (state: unknown) => void;
106
114
  useDrawerHeaderStyles_unstable: (state: unknown) => void;
107
- useDrawerHeaderTitleStyles_unstable: (state: unknown) => void;
108
115
  useDrawerHeaderNavigationStyles_unstable: (state: unknown) => void;
116
+ useDrawerHeaderTitleStyles_unstable: (state: unknown) => void;
117
+ useDrawerBodyStyles_unstable: (state: unknown) => void;
118
+ useDrawerFooterStyles_unstable: (state: unknown) => void;
109
119
  }> | undefined;
110
120
  dir?: "ltr" | "rtl" | undefined;
111
121
  targetDocument?: Document | undefined;
@@ -0,0 +1,13 @@
1
+ /**
2
+ * Creates a CSS rule from a theme object.
3
+ *
4
+ * Useful for scenarios when you want to apply theming statically to a top level elements like `body`.
5
+ */ export function createCSSRuleFromTheme(selector, theme) {
6
+ if (theme) {
7
+ const cssVarsAsString = Object.keys(theme).reduce((cssVarRule, cssVar)=>{
8
+ return `${cssVarRule}--${cssVar}: ${theme[cssVar]}; `;
9
+ }, '');
10
+ return `${selector} { ${cssVarsAsString} }`;
11
+ }
12
+ return `${selector} {}`;
13
+ }
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["createCSSRuleFromTheme.ts"],"sourcesContent":["import type { PartialTheme } from '@fluentui/react-theme';\n\n/**\n * Creates a CSS rule from a theme object.\n *\n * Useful for scenarios when you want to apply theming statically to a top level elements like `body`.\n */\nexport function createCSSRuleFromTheme(selector: string, theme: PartialTheme | undefined): string {\n if (theme) {\n const cssVarsAsString = (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n return `${cssVarRule}--${cssVar}: ${theme[cssVar]}; `;\n }, '');\n\n return `${selector} { ${cssVarsAsString} }`;\n }\n\n return `${selector} {}`;\n}\n"],"names":["createCSSRuleFromTheme","selector","theme","cssVarsAsString","Object","keys","reduce","cssVarRule","cssVar"],"mappings":"AAEA;;;;CAIC,GACD,OAAO,SAASA,uBAAuBC,QAAgB,EAAEC,KAA+B;IACtF,IAAIA,OAAO;QACT,MAAMC,kBAAkB,AAACC,OAAOC,IAAI,CAACH,OAAkCI,MAAM,CAAC,CAACC,YAAYC;YACzF,OAAO,CAAC,EAAED,WAAW,EAAE,EAAEC,OAAO,EAAE,EAAEN,KAAK,CAACM,OAAO,CAAC,EAAE,CAAC;QACvD,GAAG;QAEH,OAAO,CAAC,EAAEP,SAAS,GAAG,EAAEE,gBAAgB,EAAE,CAAC;IAC7C;IAEA,OAAO,CAAC,EAAEF,SAAS,GAAG,CAAC;AACzB"}
@@ -1,3 +1,4 @@
1
+ export { createCSSRuleFromTheme } from './createCSSRuleFromTheme';
1
2
  export * from './FluentProvider';
2
3
  export * from './FluentProvider.types';
3
4
  export * from './renderFluentProvider';
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"sourcesContent":["export * from './FluentProvider';\nexport * from './FluentProvider.types';\nexport * from './renderFluentProvider';\nexport * from './useFluentProvider';\nexport * from './useFluentProviderStyles.styles';\nexport * from './useFluentProviderContextValues';\nexport * from './useFluentProviderThemeStyleTag';\n"],"names":[],"mappings":"AAAA,cAAc,mBAAmB;AACjC,cAAc,yBAAyB;AACvC,cAAc,yBAAyB;AACvC,cAAc,sBAAsB;AACpC,cAAc,mCAAmC;AACjD,cAAc,mCAAmC;AACjD,cAAc,mCAAmC"}
1
+ {"version":3,"sources":["index.ts"],"sourcesContent":["export { createCSSRuleFromTheme } from './createCSSRuleFromTheme';\nexport * from './FluentProvider';\nexport * from './FluentProvider.types';\nexport * from './renderFluentProvider';\nexport * from './useFluentProvider';\nexport * from './useFluentProviderStyles.styles';\nexport * from './useFluentProviderContextValues';\nexport * from './useFluentProviderThemeStyleTag';\n"],"names":["createCSSRuleFromTheme"],"mappings":"AAAA,SAASA,sBAAsB,QAAQ,2BAA2B;AAClE,cAAc,mBAAmB;AACjC,cAAc,yBAAyB;AACvC,cAAc,yBAAyB;AACvC,cAAc,sBAAsB;AACpC,cAAc,mCAAmC;AACjD,cAAc,mCAAmC;AACjD,cAAc,mCAAmC"}
@@ -1,5 +1,6 @@
1
1
  import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
2
2
  import * as React from 'react';
3
+ import { createCSSRuleFromTheme } from './createCSSRuleFromTheme';
3
4
  import { fluentProviderClassNames } from './useFluentProviderStyles.styles';
4
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;
@@ -35,15 +36,10 @@ const insertSheet = (tag, rule)=>{
35
36
  const styleTag = React.useRef();
36
37
  const styleTagId = useId(fluentProviderClassNames.root);
37
38
  const styleElementAttributes = rendererAttributes;
38
- const cssVarsAsString = React.useMemo(()=>{
39
- return theme ? Object.keys(theme).reduce((cssVarRule, cssVar)=>{
40
- cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;
41
- return cssVarRule;
42
- }, '') : '';
43
- }, [
44
- theme
39
+ const rule = React.useMemo(()=>createCSSRuleFromTheme(`.${styleTagId}`, theme), [
40
+ theme,
41
+ styleTagId
45
42
  ]);
46
- const rule = `.${styleTagId} { ${cssVarsAsString} }`;
47
43
  if (process.env.NODE_ENV !== 'production') {
48
44
  // eslint-disable-next-line react-hooks/rules-of-hooks
49
45
  React.useMemo(()=>{
@@ -1 +1 @@
1
- {"version":3,"sources":["useFluentProviderThemeStyleTag.ts"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles.styles';\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 * @internal\n * @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (\n options: Pick<FluentProviderState, 'theme' | 'targetDocument'> & { rendererAttributes: Record<string, string> },\n) => {\n const { targetDocument, theme, rendererAttributes } = options;\n\n const styleTag = React.useRef<HTMLStyleElement | undefined | null>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\n const styleElementAttributes = rendererAttributes;\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 if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useMemo(() => {\n // Heads up!\n // .useMemo() is used because it is called during render and DOM for _current_ component is not mounted yet. Also,\n // this allows to do checks with strict mode enabled as .useEffect() will be called with incremented IDs because\n // of double render.\n\n if (targetDocument) {\n const providerSelector = `.${fluentProviderClassNames.root}.${styleTagId}`;\n const providerElements = targetDocument.querySelectorAll(providerSelector);\n\n // In SSR, we will have DOM upfront. To avoid false positives the check on nested style tag is performed\n const isSSR = targetDocument.querySelector(`${providerSelector} > style[id=\"${styleTagId}\"]`) !== null;\n const elementsCount = isSSR ? 1 : 0;\n\n if (providerElements.length > elementsCount) {\n // eslint-disable-next-line no-console\n console.error(\n [\n '@fluentui/react-provider: There are conflicting ids in your DOM.',\n 'Please make sure that you configured your application properly.',\n '\\n',\n '\\n',\n 'Configuration guide: https://aka.ms/fluentui-conflicting-ids',\n ].join(' '),\n );\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n }\n\n useHandleSSRStyleElements(targetDocument, styleTagId);\n useInsertionEffect(() => {\n // The style element could already have been created during SSR - no need to recreate it\n const ssrStyleElement = targetDocument?.getElementById(styleTagId);\n if (ssrStyleElement) {\n styleTag.current = ssrStyleElement as HTMLStyleElement;\n } else {\n styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n }\n }\n\n return () => {\n styleTag.current?.remove();\n };\n }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n return { styleTagId, rule };\n};\n\nfunction useHandleSSRStyleElements(targetDocument: Document | undefined | null, styleTagId: string) {\n // Using a state factory so that this logic only runs once per render\n // Each FluentProvider can create its own style element during SSR as a slot\n // Moves all theme style elements to document head during render to avoid hydration errors.\n // Should be strict mode safe since the logic is idempotent.\n React.useState(() => {\n if (!targetDocument) {\n return;\n }\n\n const themeStyleElement = targetDocument.getElementById(styleTagId);\n if (themeStyleElement) {\n targetDocument.head.append(themeStyleElement);\n }\n });\n}\n"],"names":["useId","useIsomorphicLayoutEffect","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","rendererAttributes","styleTag","useRef","styleTagId","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","providerSelector","providerElements","querySelectorAll","isSSR","querySelector","elementsCount","join","useHandleSSRStyleElements","ssrStyleElement","getElementById","current","id","remove","useState","themeStyleElement","append"],"mappings":"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"}
1
+ {"version":3,"sources":["useFluentProviderThemeStyleTag.ts"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { createCSSRuleFromTheme } from './createCSSRuleFromTheme';\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles.styles';\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 * @internal\n * @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (\n options: Pick<FluentProviderState, 'theme' | 'targetDocument'> & { rendererAttributes: Record<string, string> },\n) => {\n const { targetDocument, theme, rendererAttributes } = options;\n\n const styleTag = React.useRef<HTMLStyleElement | undefined | null>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\n const styleElementAttributes = rendererAttributes;\n\n const rule = React.useMemo(() => createCSSRuleFromTheme(`.${styleTagId}`, theme), [theme, styleTagId]);\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useMemo(() => {\n // Heads up!\n // .useMemo() is used because it is called during render and DOM for _current_ component is not mounted yet. Also,\n // this allows to do checks with strict mode enabled as .useEffect() will be called with incremented IDs because\n // of double render.\n\n if (targetDocument) {\n const providerSelector = `.${fluentProviderClassNames.root}.${styleTagId}`;\n const providerElements = targetDocument.querySelectorAll(providerSelector);\n\n // In SSR, we will have DOM upfront. To avoid false positives the check on nested style tag is performed\n const isSSR = targetDocument.querySelector(`${providerSelector} > style[id=\"${styleTagId}\"]`) !== null;\n const elementsCount = isSSR ? 1 : 0;\n\n if (providerElements.length > elementsCount) {\n // eslint-disable-next-line no-console\n console.error(\n [\n '@fluentui/react-provider: There are conflicting ids in your DOM.',\n 'Please make sure that you configured your application properly.',\n '\\n',\n '\\n',\n 'Configuration guide: https://aka.ms/fluentui-conflicting-ids',\n ].join(' '),\n );\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n }\n\n useHandleSSRStyleElements(targetDocument, styleTagId);\n useInsertionEffect(() => {\n // The style element could already have been created during SSR - no need to recreate it\n const ssrStyleElement = targetDocument?.getElementById(styleTagId);\n if (ssrStyleElement) {\n styleTag.current = ssrStyleElement as HTMLStyleElement;\n } else {\n styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n }\n }\n\n return () => {\n styleTag.current?.remove();\n };\n }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n return { styleTagId, rule };\n};\n\nfunction useHandleSSRStyleElements(targetDocument: Document | undefined | null, styleTagId: string) {\n // Using a state factory so that this logic only runs once per render\n // Each FluentProvider can create its own style element during SSR as a slot\n // Moves all theme style elements to document head during render to avoid hydration errors.\n // Should be strict mode safe since the logic is idempotent.\n React.useState(() => {\n if (!targetDocument) {\n return;\n }\n\n const themeStyleElement = targetDocument.getElementById(styleTagId);\n if (themeStyleElement) {\n targetDocument.head.append(themeStyleElement);\n }\n });\n}\n"],"names":["useId","useIsomorphicLayoutEffect","React","createCSSRuleFromTheme","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","rendererAttributes","styleTag","useRef","styleTagId","root","styleElementAttributes","useMemo","providerSelector","providerElements","querySelectorAll","isSSR","querySelector","elementsCount","join","useHandleSSRStyleElements","ssrStyleElement","getElementById","current","id","remove","useState","themeStyleElement","append"],"mappings":"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"}
package/lib/index.js CHANGED
@@ -1 +1 @@
1
- export { fluentProviderClassNames, FluentProvider, renderFluentProvider_unstable, useFluentProviderContextValues_unstable, useFluentProvider_unstable, useFluentProviderStyles_unstable, useFluentProviderThemeStyleTag } from './FluentProvider';
1
+ export { createCSSRuleFromTheme, fluentProviderClassNames, FluentProvider, renderFluentProvider_unstable, useFluentProviderContextValues_unstable, useFluentProvider_unstable, useFluentProviderStyles_unstable, useFluentProviderThemeStyleTag } from './FluentProvider';
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["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 FluentProviderCustomStyleHooks,\n FluentProviderProps,\n FluentProviderState,\n FluentProviderSlots,\n} from './FluentProvider';\n"],"names":["fluentProviderClassNames","FluentProvider","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag"],"mappings":"AAAA,SACEA,wBAAwB,EACxBC,cAAc,EACdC,6BAA6B,EAC7BC,uCAAuC,EACvCC,0BAA0B,EAC1BC,gCAAgC,EAChCC,8BAA8B,QACzB,mBAAmB"}
1
+ {"version":3,"sources":["index.ts"],"sourcesContent":["export {\n createCSSRuleFromTheme,\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 FluentProviderCustomStyleHooks,\n FluentProviderProps,\n FluentProviderState,\n FluentProviderSlots,\n} from './FluentProvider';\n"],"names":["createCSSRuleFromTheme","fluentProviderClassNames","FluentProvider","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag"],"mappings":"AAAA,SACEA,sBAAsB,EACtBC,wBAAwB,EACxBC,cAAc,EACdC,6BAA6B,EAC7BC,uCAAuC,EACvCC,0BAA0B,EAC1BC,gCAAgC,EAChCC,8BAA8B,QACzB,mBAAmB"}
@@ -0,0 +1,23 @@
1
+ /**
2
+ * Creates a CSS rule from a theme object.
3
+ *
4
+ * Useful for scenarios when you want to apply theming statically to a top level elements like `body`.
5
+ */ "use strict";
6
+ Object.defineProperty(exports, "__esModule", {
7
+ value: true
8
+ });
9
+ Object.defineProperty(exports, "createCSSRuleFromTheme", {
10
+ enumerable: true,
11
+ get: function() {
12
+ return createCSSRuleFromTheme;
13
+ }
14
+ });
15
+ function createCSSRuleFromTheme(selector, theme) {
16
+ if (theme) {
17
+ const cssVarsAsString = Object.keys(theme).reduce((cssVarRule, cssVar)=>{
18
+ return `${cssVarRule}--${cssVar}: ${theme[cssVar]}; `;
19
+ }, '');
20
+ return `${selector} { ${cssVarsAsString} }`;
21
+ }
22
+ return `${selector} {}`;
23
+ }
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["createCSSRuleFromTheme.js"],"sourcesContent":["/**\n * Creates a CSS rule from a theme object.\n *\n * Useful for scenarios when you want to apply theming statically to a top level elements like `body`.\n */ export function createCSSRuleFromTheme(selector, theme) {\n if (theme) {\n const cssVarsAsString = Object.keys(theme).reduce((cssVarRule, cssVar)=>{\n return `${cssVarRule}--${cssVar}: ${theme[cssVar]}; `;\n }, '');\n return `${selector} { ${cssVarsAsString} }`;\n }\n return `${selector} {}`;\n}\n"],"names":["createCSSRuleFromTheme","selector","theme","cssVarsAsString","Object","keys","reduce","cssVarRule","cssVar"],"mappings":"AAAA;;;;CAIC;;;;+BAAmBA;;;eAAAA;;;AAAT,SAASA,uBAAuBC,QAAQ,EAAEC,KAAK;IACtD,IAAIA,OAAO;QACP,MAAMC,kBAAkBC,OAAOC,IAAI,CAACH,OAAOI,MAAM,CAAC,CAACC,YAAYC;YAC3D,OAAO,CAAC,EAAED,WAAW,EAAE,EAAEC,OAAO,EAAE,EAAEN,KAAK,CAACM,OAAO,CAAC,EAAE,CAAC;QACzD,GAAG;QACH,OAAO,CAAC,EAAEP,SAAS,GAAG,EAAEE,gBAAgB,EAAE,CAAC;IAC/C;IACA,OAAO,CAAC,EAAEF,SAAS,GAAG,CAAC;AAC3B"}
@@ -2,7 +2,14 @@
2
2
  Object.defineProperty(exports, "__esModule", {
3
3
  value: true
4
4
  });
5
+ Object.defineProperty(exports, "createCSSRuleFromTheme", {
6
+ enumerable: true,
7
+ get: function() {
8
+ return _createCSSRuleFromTheme.createCSSRuleFromTheme;
9
+ }
10
+ });
5
11
  const _export_star = require("@swc/helpers/_/_export_star");
12
+ const _createCSSRuleFromTheme = require("./createCSSRuleFromTheme");
6
13
  _export_star._(require("./FluentProvider"), exports);
7
14
  _export_star._(require("./FluentProvider.types"), exports);
8
15
  _export_star._(require("./renderFluentProvider"), exports);
@@ -1 +1 @@
1
- {"version":3,"sources":["index.js"],"sourcesContent":["export * from './FluentProvider';\nexport * from './FluentProvider.types';\nexport * from './renderFluentProvider';\nexport * from './useFluentProvider';\nexport * from './useFluentProviderStyles.styles';\nexport * from './useFluentProviderContextValues';\nexport * from './useFluentProviderThemeStyleTag';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA"}
1
+ {"version":3,"sources":["index.js"],"sourcesContent":["export { createCSSRuleFromTheme } from './createCSSRuleFromTheme';\nexport * from './FluentProvider';\nexport * from './FluentProvider.types';\nexport * from './renderFluentProvider';\nexport * from './useFluentProvider';\nexport * from './useFluentProviderStyles.styles';\nexport * from './useFluentProviderContextValues';\nexport * from './useFluentProviderThemeStyleTag';\n"],"names":["createCSSRuleFromTheme"],"mappings":";;;;+BAASA;;;eAAAA,8CAAsB;;;;wCAAQ;uBACzB;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA"}
@@ -11,6 +11,7 @@ Object.defineProperty(exports, "useFluentProviderThemeStyleTag", {
11
11
  const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
12
  const _reactutilities = require("@fluentui/react-utilities");
13
13
  const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
14
+ const _createCSSRuleFromTheme = require("./createCSSRuleFromTheme");
14
15
  const _useFluentProviderStylesstyles = require("./useFluentProviderStyles.styles");
15
16
  // String concatenation is used to prevent bundlers to complain with older versions of React
16
17
  const useInsertionEffect = _react['useInsertion' + 'Effect'] ? _react['useInsertion' + 'Effect'] : _reactutilities.useIsomorphicLayoutEffect;
@@ -42,15 +43,10 @@ const useFluentProviderThemeStyleTag = (options)=>{
42
43
  const styleTag = _react.useRef();
43
44
  const styleTagId = (0, _reactutilities.useId)(_useFluentProviderStylesstyles.fluentProviderClassNames.root);
44
45
  const styleElementAttributes = rendererAttributes;
45
- const cssVarsAsString = _react.useMemo(()=>{
46
- return theme ? Object.keys(theme).reduce((cssVarRule, cssVar)=>{
47
- cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;
48
- return cssVarRule;
49
- }, '') : '';
50
- }, [
51
- theme
46
+ const rule = _react.useMemo(()=>(0, _createCSSRuleFromTheme.createCSSRuleFromTheme)(`.${styleTagId}`, theme), [
47
+ theme,
48
+ styleTagId
52
49
  ]);
53
- const rule = `.${styleTagId} { ${cssVarsAsString} }`;
54
50
  if (process.env.NODE_ENV !== 'production') {
55
51
  // eslint-disable-next-line react-hooks/rules-of-hooks
56
52
  _react.useMemo(()=>{
@@ -1 +1 @@
1
- {"version":3,"sources":["useFluentProviderThemeStyleTag.js"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { fluentProviderClassNames } from './useFluentProviderStyles.styles';\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : useIsomorphicLayoutEffect;\nconst createStyleTag = (target, elementAttributes)=>{\n if (!target) {\n return undefined;\n }\n const tag = target.createElement('style');\n Object.keys(elementAttributes).forEach((attrName)=>{\n tag.setAttribute(attrName, elementAttributes[attrName]);\n });\n target.head.appendChild(tag);\n return tag;\n};\nconst insertSheet = (tag, rule)=>{\n const sheet = tag.sheet;\n if (sheet) {\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n sheet.insertRule(rule, 0);\n } else if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n }\n};\n/**\n * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n * @internal\n * @returns CSS class to apply the rule\n */ export const useFluentProviderThemeStyleTag = (options)=>{\n const { targetDocument, theme, rendererAttributes } = options;\n const styleTag = React.useRef();\n const styleTagId = useId(fluentProviderClassNames.root);\n const styleElementAttributes = rendererAttributes;\n const cssVarsAsString = React.useMemo(()=>{\n return theme ? Object.keys(theme).reduce((cssVarRule, cssVar)=>{\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '') : '';\n }, [\n theme\n ]);\n const rule = `.${styleTagId} { ${cssVarsAsString} }`;\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useMemo(()=>{\n // Heads up!\n // .useMemo() is used because it is called during render and DOM for _current_ component is not mounted yet. Also,\n // this allows to do checks with strict mode enabled as .useEffect() will be called with incremented IDs because\n // of double render.\n if (targetDocument) {\n const providerSelector = `.${fluentProviderClassNames.root}.${styleTagId}`;\n const providerElements = targetDocument.querySelectorAll(providerSelector);\n // In SSR, we will have DOM upfront. To avoid false positives the check on nested style tag is performed\n const isSSR = targetDocument.querySelector(`${providerSelector} > style[id=\"${styleTagId}\"]`) !== null;\n const elementsCount = isSSR ? 1 : 0;\n if (providerElements.length > elementsCount) {\n // eslint-disable-next-line no-console\n console.error([\n '@fluentui/react-provider: There are conflicting ids in your DOM.',\n 'Please make sure that you configured your application properly.',\n '\\n',\n '\\n',\n 'Configuration guide: https://aka.ms/fluentui-conflicting-ids'\n ].join(' '));\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n }\n useHandleSSRStyleElements(targetDocument, styleTagId);\n useInsertionEffect(()=>{\n var _targetDocument;\n // The style element could already have been created during SSR - no need to recreate it\n const ssrStyleElement = (_targetDocument = targetDocument) === null || _targetDocument === void 0 ? void 0 : _targetDocument.getElementById(styleTagId);\n if (ssrStyleElement) {\n styleTag.current = ssrStyleElement;\n } else {\n styleTag.current = createStyleTag(targetDocument, {\n ...styleElementAttributes,\n id: styleTagId\n });\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n }\n }\n return ()=>{\n var _styleTag_current;\n (_styleTag_current = styleTag.current) === null || _styleTag_current === void 0 ? void 0 : _styleTag_current.remove();\n };\n }, [\n styleTagId,\n targetDocument,\n rule,\n styleElementAttributes\n ]);\n return {\n styleTagId,\n rule\n };\n};\nfunction useHandleSSRStyleElements(targetDocument, styleTagId) {\n // Using a state factory so that this logic only runs once per render\n // Each FluentProvider can create its own style element during SSR as a slot\n // Moves all theme style elements to document head during render to avoid hydration errors.\n // Should be strict mode safe since the logic is idempotent.\n React.useState(()=>{\n if (!targetDocument) {\n return;\n }\n const themeStyleElement = targetDocument.getElementById(styleTagId);\n if (themeStyleElement) {\n targetDocument.head.append(themeStyleElement);\n }\n });\n}\n"],"names":["useFluentProviderThemeStyleTag","useInsertionEffect","React","useIsomorphicLayoutEffect","createStyleTag","target","elementAttributes","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","head","appendChild","insertSheet","rule","sheet","cssRules","length","deleteRule","insertRule","process","env","NODE_ENV","console","error","options","targetDocument","theme","rendererAttributes","styleTag","useRef","styleTagId","useId","fluentProviderClassNames","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","providerSelector","providerElements","querySelectorAll","isSSR","querySelector","elementsCount","join","useHandleSSRStyleElements","_targetDocument","ssrStyleElement","getElementById","current","id","_styleTag_current","remove","useState","themeStyleElement","append"],"mappings":";;;;+BAgCiBA;;;eAAAA;;;;gCAhCgC;iEAC1B;+CACkB;AACzC,4FAA4F;AAC5F,MAAMC,qBAAqBC,MAAK,CAAC,iBAAiB,SAAS,GAAGA,MAAK,CAAC,iBAAiB,SAAS,GAAGC,yCAAyB;AAC1H,MAAMC,iBAAiB,CAACC,QAAQC;IAC5B,IAAI,CAACD,QAAQ;QACT,OAAOE;IACX;IACA,MAAMC,MAAMH,OAAOI,aAAa,CAAC;IACjCC,OAAOC,IAAI,CAACL,mBAAmBM,OAAO,CAAC,CAACC;QACpCL,IAAIM,YAAY,CAACD,UAAUP,iBAAiB,CAACO,SAAS;IAC1D;IACAR,OAAOU,IAAI,CAACC,WAAW,CAACR;IACxB,OAAOA;AACX;AACA,MAAMS,cAAc,CAACT,KAAKU;IACtB,MAAMC,QAAQX,IAAIW,KAAK;IACvB,IAAIA,OAAO;QACP,IAAIA,MAAMC,QAAQ,CAACC,MAAM,GAAG,GAAG;YAC3BF,MAAMG,UAAU,CAAC;QACrB;QACAH,MAAMI,UAAU,CAACL,MAAM;IAC3B,OAAO,IAAIM,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QAC9C,sCAAsC;QACtCC,QAAQC,KAAK,CAAC;IAClB;AACJ;AAKW,MAAM5B,iCAAiC,CAAC6B;IAC/C,MAAM,EAAEC,cAAc,EAAEC,KAAK,EAAEC,kBAAkB,EAAE,GAAGH;IACtD,MAAMI,WAAW/B,OAAMgC,MAAM;IAC7B,MAAMC,aAAaC,IAAAA,qBAAK,EAACC,uDAAwB,CAACC,IAAI;IACtD,MAAMC,yBAAyBP;IAC/B,MAAMQ,kBAAkBtC,OAAMuC,OAAO,CAAC;QAClC,OAAOV,QAAQrB,OAAOC,IAAI,CAACoB,OAAOW,MAAM,CAAC,CAACC,YAAYC;YAClDD,cAAc,CAAC,EAAE,EAAEC,OAAO,EAAE,EAAEb,KAAK,CAACa,OAAO,CAAC,EAAE,CAAC;YAC/C,OAAOD;QACX,GAAG,MAAM;IACb,GAAG;QACCZ;KACH;IACD,MAAMb,OAAO,CAAC,CAAC,EAAEiB,WAAW,GAAG,EAAEK,gBAAgB,EAAE,CAAC;IACpD,IAAIhB,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACvC,sDAAsD;QACtDxB,OAAMuC,OAAO,CAAC;YACV,YAAY;YACZ,kHAAkH;YAClH,gHAAgH;YAChH,oBAAoB;YACpB,IAAIX,gBAAgB;gBAChB,MAAMe,mBAAmB,CAAC,CAAC,EAAER,uDAAwB,CAACC,IAAI,CAAC,CAAC,EAAEH,WAAW,CAAC;gBAC1E,MAAMW,mBAAmBhB,eAAeiB,gBAAgB,CAACF;gBACzD,wGAAwG;gBACxG,MAAMG,QAAQlB,eAAemB,aAAa,CAAC,CAAC,EAAEJ,iBAAiB,aAAa,EAAEV,WAAW,EAAE,CAAC,MAAM;gBAClG,MAAMe,gBAAgBF,QAAQ,IAAI;gBAClC,IAAIF,iBAAiBzB,MAAM,GAAG6B,eAAe;oBACzC,sCAAsC;oBACtCvB,QAAQC,KAAK,CAAC;wBACV;wBACA;wBACA;wBACA;wBACA;qBACH,CAACuB,IAAI,CAAC;gBACX;YACJ;QACJ,uDAAuD;QACvD,GAAG,EAAE;IACT;IACAC,0BAA0BtB,gBAAgBK;IAC1ClC,mBAAmB;QACf,IAAIoD;QACJ,wFAAwF;QACxF,MAAMC,kBAAkB,AAACD,CAAAA,kBAAkBvB,cAAa,MAAO,QAAQuB,oBAAoB,KAAK,IAAI,KAAK,IAAIA,gBAAgBE,cAAc,CAACpB;QAC5I,IAAImB,iBAAiB;YACjBrB,SAASuB,OAAO,GAAGF;QACvB,OAAO;YACHrB,SAASuB,OAAO,GAAGpD,eAAe0B,gBAAgB;gBAC9C,GAAGS,sBAAsB;gBACzBkB,IAAItB;YACR;YACA,IAAIF,SAASuB,OAAO,EAAE;gBAClBvC,YAAYgB,SAASuB,OAAO,EAAEtC;YAClC;QACJ;QACA,OAAO;YACH,IAAIwC;YACHA,CAAAA,oBAAoBzB,SAASuB,OAAO,AAAD,MAAO,QAAQE,sBAAsB,KAAK,IAAI,KAAK,IAAIA,kBAAkBC,MAAM;QACvH;IACJ,GAAG;QACCxB;QACAL;QACAZ;QACAqB;KACH;IACD,OAAO;QACHJ;QACAjB;IACJ;AACJ;AACA,SAASkC,0BAA0BtB,cAAc,EAAEK,UAAU;IACzD,qEAAqE;IACrE,4EAA4E;IAC5E,2FAA2F;IAC3F,4DAA4D;IAC5DjC,OAAM0D,QAAQ,CAAC;QACX,IAAI,CAAC9B,gBAAgB;YACjB;QACJ;QACA,MAAM+B,oBAAoB/B,eAAeyB,cAAc,CAACpB;QACxD,IAAI0B,mBAAmB;YACnB/B,eAAef,IAAI,CAAC+C,MAAM,CAACD;QAC/B;IACJ;AACJ"}
1
+ {"version":3,"sources":["useFluentProviderThemeStyleTag.js"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { createCSSRuleFromTheme } from './createCSSRuleFromTheme';\nimport { fluentProviderClassNames } from './useFluentProviderStyles.styles';\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : useIsomorphicLayoutEffect;\nconst createStyleTag = (target, elementAttributes)=>{\n if (!target) {\n return undefined;\n }\n const tag = target.createElement('style');\n Object.keys(elementAttributes).forEach((attrName)=>{\n tag.setAttribute(attrName, elementAttributes[attrName]);\n });\n target.head.appendChild(tag);\n return tag;\n};\nconst insertSheet = (tag, rule)=>{\n const sheet = tag.sheet;\n if (sheet) {\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n sheet.insertRule(rule, 0);\n } else if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n }\n};\n/**\n * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n * @internal\n * @returns CSS class to apply the rule\n */ export const useFluentProviderThemeStyleTag = (options)=>{\n const { targetDocument, theme, rendererAttributes } = options;\n const styleTag = React.useRef();\n const styleTagId = useId(fluentProviderClassNames.root);\n const styleElementAttributes = rendererAttributes;\n const rule = React.useMemo(()=>createCSSRuleFromTheme(`.${styleTagId}`, theme), [\n theme,\n styleTagId\n ]);\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useMemo(()=>{\n // Heads up!\n // .useMemo() is used because it is called during render and DOM for _current_ component is not mounted yet. Also,\n // this allows to do checks with strict mode enabled as .useEffect() will be called with incremented IDs because\n // of double render.\n if (targetDocument) {\n const providerSelector = `.${fluentProviderClassNames.root}.${styleTagId}`;\n const providerElements = targetDocument.querySelectorAll(providerSelector);\n // In SSR, we will have DOM upfront. To avoid false positives the check on nested style tag is performed\n const isSSR = targetDocument.querySelector(`${providerSelector} > style[id=\"${styleTagId}\"]`) !== null;\n const elementsCount = isSSR ? 1 : 0;\n if (providerElements.length > elementsCount) {\n // eslint-disable-next-line no-console\n console.error([\n '@fluentui/react-provider: There are conflicting ids in your DOM.',\n 'Please make sure that you configured your application properly.',\n '\\n',\n '\\n',\n 'Configuration guide: https://aka.ms/fluentui-conflicting-ids'\n ].join(' '));\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n }\n useHandleSSRStyleElements(targetDocument, styleTagId);\n useInsertionEffect(()=>{\n var _targetDocument;\n // The style element could already have been created during SSR - no need to recreate it\n const ssrStyleElement = (_targetDocument = targetDocument) === null || _targetDocument === void 0 ? void 0 : _targetDocument.getElementById(styleTagId);\n if (ssrStyleElement) {\n styleTag.current = ssrStyleElement;\n } else {\n styleTag.current = createStyleTag(targetDocument, {\n ...styleElementAttributes,\n id: styleTagId\n });\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n }\n }\n return ()=>{\n var _styleTag_current;\n (_styleTag_current = styleTag.current) === null || _styleTag_current === void 0 ? void 0 : _styleTag_current.remove();\n };\n }, [\n styleTagId,\n targetDocument,\n rule,\n styleElementAttributes\n ]);\n return {\n styleTagId,\n rule\n };\n};\nfunction useHandleSSRStyleElements(targetDocument, styleTagId) {\n // Using a state factory so that this logic only runs once per render\n // Each FluentProvider can create its own style element during SSR as a slot\n // Moves all theme style elements to document head during render to avoid hydration errors.\n // Should be strict mode safe since the logic is idempotent.\n React.useState(()=>{\n if (!targetDocument) {\n return;\n }\n const themeStyleElement = targetDocument.getElementById(styleTagId);\n if (themeStyleElement) {\n targetDocument.head.append(themeStyleElement);\n }\n });\n}\n"],"names":["useFluentProviderThemeStyleTag","useInsertionEffect","React","useIsomorphicLayoutEffect","createStyleTag","target","elementAttributes","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","head","appendChild","insertSheet","rule","sheet","cssRules","length","deleteRule","insertRule","process","env","NODE_ENV","console","error","options","targetDocument","theme","rendererAttributes","styleTag","useRef","styleTagId","useId","fluentProviderClassNames","root","styleElementAttributes","useMemo","createCSSRuleFromTheme","providerSelector","providerElements","querySelectorAll","isSSR","querySelector","elementsCount","join","useHandleSSRStyleElements","_targetDocument","ssrStyleElement","getElementById","current","id","_styleTag_current","remove","useState","themeStyleElement","append"],"mappings":"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"}
@@ -9,6 +9,9 @@ function _export(target, all) {
9
9
  });
10
10
  }
11
11
  _export(exports, {
12
+ createCSSRuleFromTheme: function() {
13
+ return _FluentProvider.createCSSRuleFromTheme;
14
+ },
12
15
  fluentProviderClassNames: function() {
13
16
  return _FluentProvider.fluentProviderClassNames;
14
17
  },
@@ -1 +1 @@
1
- {"version":3,"sources":["index.js"],"sourcesContent":["export { fluentProviderClassNames, FluentProvider, renderFluentProvider_unstable, useFluentProviderContextValues_unstable, useFluentProvider_unstable, useFluentProviderStyles_unstable, useFluentProviderThemeStyleTag } from './FluentProvider';\n"],"names":["fluentProviderClassNames","FluentProvider","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag"],"mappings":";;;;;;;;;;;IAASA,wBAAwB;eAAxBA,wCAAwB;;IAAEC,cAAc;eAAdA,8BAAc;;IAAEC,6BAA6B;eAA7BA,6CAA6B;;IAAEC,uCAAuC;eAAvCA,uDAAuC;;IAAEC,0BAA0B;eAA1BA,0CAA0B;;IAAEC,gCAAgC;eAAhCA,gDAAgC;;IAAEC,8BAA8B;eAA9BA,8CAA8B;;;gCAAQ"}
1
+ {"version":3,"sources":["index.js"],"sourcesContent":["export { createCSSRuleFromTheme, fluentProviderClassNames, FluentProvider, renderFluentProvider_unstable, useFluentProviderContextValues_unstable, useFluentProvider_unstable, useFluentProviderStyles_unstable, useFluentProviderThemeStyleTag } from './FluentProvider';\n"],"names":["createCSSRuleFromTheme","fluentProviderClassNames","FluentProvider","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag"],"mappings":";;;;;;;;;;;IAASA,sBAAsB;eAAtBA,sCAAsB;;IAAEC,wBAAwB;eAAxBA,wCAAwB;;IAAEC,cAAc;eAAdA,8BAAc;;IAAEC,6BAA6B;eAA7BA,6CAA6B;;IAAEC,uCAAuC;eAAvCA,uDAAuC;;IAAEC,0BAA0B;eAA1BA,0CAA0B;;IAAEC,gCAAgC;eAAhCA,gDAAgC;;IAAEC,8BAA8B;eAA9BA,8CAA8B;;;gCAAQ"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-provider",
3
- "version": "9.8.5",
3
+ "version": "9.9.0",
4
4
  "description": "Fluent UI React provider component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -34,11 +34,11 @@
34
34
  },
35
35
  "dependencies": {
36
36
  "@fluentui/react-icons": "^2.0.207",
37
- "@fluentui/react-shared-contexts": "^9.7.3",
38
- "@fluentui/react-tabster": "^9.12.9",
37
+ "@fluentui/react-shared-contexts": "^9.8.0",
38
+ "@fluentui/react-tabster": "^9.12.10",
39
39
  "@fluentui/react-theme": "^9.1.12",
40
40
  "@fluentui/react-utilities": "^9.13.3",
41
- "@fluentui/react-jsx-runtime": "^9.0.8",
41
+ "@fluentui/react-jsx-runtime": "^9.0.9",
42
42
  "@griffel/core": "^1.14.1",
43
43
  "@griffel/react": "^1.5.14",
44
44
  "@swc/helpers": "^0.5.1"