@fluentui/react-provider 9.22.15 → 9.22.17
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.md +24 -2
- package/dist/index.d.ts +1 -1
- package/lib/components/FluentProvider/renderFluentProvider.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProviderStyles.styles.js +1 -0
- package/lib/components/FluentProvider/useFluentProviderStyles.styles.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProviderStyles.styles.raw.js +1 -0
- package/lib/components/FluentProvider/useFluentProviderStyles.styles.raw.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js +1 -1
- package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/renderFluentProvider.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.styles.js +1 -0
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.styles.raw.js +1 -0
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.styles.raw.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,34 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-provider
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 26 May 2026 09:33:56 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.22.17](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.22.17)
|
|
8
|
+
|
|
9
|
+
Tue, 26 May 2026 09:33:56 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.22.16..@fluentui/react-provider_v9.22.17)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-tabster to v9.26.15 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
15
|
+
- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
16
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
|
|
17
|
+
|
|
18
|
+
## [9.22.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.22.16)
|
|
19
|
+
|
|
20
|
+
Thu, 23 Apr 2026 14:21:10 GMT
|
|
21
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.22.15..@fluentui/react-provider_v9.22.16)
|
|
22
|
+
|
|
23
|
+
### Patches
|
|
24
|
+
|
|
25
|
+
- Bump @fluentui/react-tabster to v9.26.14 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
26
|
+
- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
27
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
|
|
28
|
+
|
|
7
29
|
## [9.22.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.22.15)
|
|
8
30
|
|
|
9
|
-
Wed, 25 Feb 2026 13:
|
|
31
|
+
Wed, 25 Feb 2026 13:32:25 GMT
|
|
10
32
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.22.14..@fluentui/react-provider_v9.22.15)
|
|
11
33
|
|
|
12
34
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ import type { PartialTheme } from '@fluentui/react-theme';
|
|
|
9
9
|
import type { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts';
|
|
10
10
|
import * as React_2 from 'react';
|
|
11
11
|
import type { Slot } from '@fluentui/react-utilities';
|
|
12
|
-
import { SlotClassNames } from '@fluentui/react-utilities';
|
|
12
|
+
import type { SlotClassNames } from '@fluentui/react-utilities';
|
|
13
13
|
import type { ThemeClassNameContextValue_unstable } from '@fluentui/react-shared-contexts';
|
|
14
14
|
import type { ThemeContextValue_unstable } from '@fluentui/react-shared-contexts';
|
|
15
15
|
import type { TooltipVisibilityContextValue_unstable } from '@fluentui/react-shared-contexts';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/FluentProvider/renderFluentProvider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\n'use client';\n\nimport { canUseDOM, assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { TextDirectionProvider } from '@griffel/react';\nimport {\n OverridesProvider_unstable as OverridesProvider,\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n CustomStyleHooksProvider_unstable as CustomStyleHooksProvider,\n
|
|
1
|
+
{"version":3,"sources":["../src/components/FluentProvider/renderFluentProvider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\n'use client';\n\nimport { canUseDOM, assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { TextDirectionProvider } from '@griffel/react';\nimport type { CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue } from '@fluentui/react-shared-contexts';\nimport {\n OverridesProvider_unstable as OverridesProvider,\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n CustomStyleHooksProvider_unstable as CustomStyleHooksProvider,\n} from '@fluentui/react-shared-contexts';\nimport type { FluentProviderContextValues, FluentProviderState, FluentProviderSlots } from './FluentProvider.types';\nimport { IconDirectionContextProvider } from '@fluentui/react-icons/lib/providers';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n): JSXElement => {\n assertSlots<FluentProviderSlots>(state);\n\n // Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable\n // instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is\n // Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>\n\n return (\n <Provider value={contextValues.provider}>\n <ThemeProvider value={contextValues.theme}>\n <ThemeClassNameProvider value={contextValues.themeClassName}>\n <CustomStyleHooksProvider\n value={contextValues.customStyleHooks_unstable as Required<CustomStyleHooksContextValue>}\n >\n <TooltipVisibilityProvider value={contextValues.tooltip}>\n <TextDirectionProvider dir={contextValues.textDirection}>\n <IconDirectionContextProvider value={contextValues.iconDirection}>\n <OverridesProvider value={contextValues.overrides_unstable}>\n <state.root>\n {canUseDOM() ? null : (\n <style\n // Using dangerous HTML because react can escape characters\n // which can lead to invalid CSS.\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{ __html: state.serverStyleProps.cssRule }}\n {...state.serverStyleProps.attributes}\n />\n )}\n\n {state.root.children}\n </state.root>\n </OverridesProvider>\n </IconDirectionContextProvider>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </CustomStyleHooksProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"],"names":["canUseDOM","assertSlots","TextDirectionProvider","OverridesProvider_unstable","OverridesProvider","Provider_unstable","Provider","TooltipVisibilityProvider_unstable","TooltipVisibilityProvider","ThemeProvider_unstable","ThemeProvider","ThemeClassNameProvider_unstable","ThemeClassNameProvider","CustomStyleHooksProvider_unstable","CustomStyleHooksProvider","IconDirectionContextProvider","renderFluentProvider_unstable","state","contextValues","value","provider","theme","themeClassName","customStyleHooks_unstable","tooltip","dir","textDirection","iconDirection","overrides_unstable","root","style","dangerouslySetInnerHTML","__html","serverStyleProps","cssRule","attributes","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD,GAEjD;;AAEA,SAASA,SAAS,EAAEC,WAAW,QAAQ,4BAA4B;AAEnE,SAASC,qBAAqB,QAAQ,iBAAiB;AAEvD,SACEC,8BAA8BC,iBAAiB,EAC/CC,qBAAqBC,QAAQ,EAC7BC,sCAAsCC,yBAAyB,EAC/DC,0BAA0BC,aAAa,EACvCC,mCAAmCC,sBAAsB,EACzDC,qCAAqCC,wBAAwB,QACxD,kCAAkC;AAEzC,SAASC,4BAA4B,QAAQ,sCAAsC;AAEnF;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEAjB,YAAiCgB;IAEjC,+FAA+F;IAC/F,oFAAoF;IACpF,0GAA0G;IAE1G,qBACE,KAACX;QAASa,OAAOD,cAAcE,QAAQ;kBACrC,cAAA,KAACV;YAAcS,OAAOD,cAAcG,KAAK;sBACvC,cAAA,KAACT;gBAAuBO,OAAOD,cAAcI,cAAc;0BACzD,cAAA,KAACR;oBACCK,OAAOD,cAAcK,yBAAyB;8BAE9C,cAAA,KAACf;wBAA0BW,OAAOD,cAAcM,OAAO;kCACrD,cAAA,KAACtB;4BAAsBuB,KAAKP,cAAcQ,aAAa;sCACrD,cAAA,KAACX;gCAA6BI,OAAOD,cAAcS,aAAa;0CAC9D,cAAA,KAACvB;oCAAkBe,OAAOD,cAAcU,kBAAkB;8CACxD,cAAA,MAACX,MAAMY,IAAI;;4CACR7B,cAAc,qBACb,KAAC8B;gDACC,2DAA2D;gDAC3D,iCAAiC;gDACjC,2CAA2C;gDAC3CC,yBAAyB;oDAAEC,QAAQf,MAAMgB,gBAAgB,CAACC,OAAO;gDAAC;gDACjE,GAAGjB,MAAMgB,gBAAgB,CAACE,UAAU;;4CAIxClB,MAAMY,IAAI,CAACO,QAAQ;;;;;;;;;;;AAW1C,EAAE"}
|
|
@@ -28,6 +28,7 @@ export const useFluentProviderStyles_unstable = state => {
|
|
|
28
28
|
dir: state.dir,
|
|
29
29
|
renderer
|
|
30
30
|
});
|
|
31
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
31
32
|
state.root.className = mergeClasses(fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);
|
|
32
33
|
return state;
|
|
33
34
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","useRenderer_unstable","tokens","typographyStyles","fluentProviderClassNames","root","useStyles","sj55zd","De3pzq","fsow6f","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useFluentProviderStyles_unstable","state","renderer","styles","dir","className","themeClassName"],"sources":["useFluentProviderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const fluentProviderClassNames = {\n root: 'fui-FluentProvider'\n};\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n textAlign: 'left',\n ...typographyStyles.body1\n }\n});\n/** Applies style classnames to slots */ export const useFluentProviderStyles_unstable = (state)=>{\n 'use no memo';\n const renderer = useRenderer_unstable();\n const styles = useStyles({\n dir: state.dir,\n renderer\n });\n state.root.className = mergeClasses(fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,eAAe;AACxD,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAOjB,CAAC;AACF;AAAyC,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EAC9F,aAAa;;EACb,MAAMC,QAAQ,GAAGhB,oBAAoB,CAAC,CAAC;EACvC,MAAMiB,MAAM,GAAGZ,SAAS,CAAC;IACrBa,GAAG,EAAEH,KAAK,CAACG,GAAG;IACdF;EACJ,CAAC,CAAC;
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","useRenderer_unstable","tokens","typographyStyles","fluentProviderClassNames","root","useStyles","sj55zd","De3pzq","fsow6f","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useFluentProviderStyles_unstable","state","renderer","styles","dir","className","themeClassName"],"sources":["useFluentProviderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const fluentProviderClassNames = {\n root: 'fui-FluentProvider'\n};\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n textAlign: 'left',\n ...typographyStyles.body1\n }\n});\n/** Applies style classnames to slots */ export const useFluentProviderStyles_unstable = (state)=>{\n 'use no memo';\n const renderer = useRenderer_unstable();\n const styles = useStyles({\n dir: state.dir,\n renderer\n });\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,eAAe;AACxD,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAOjB,CAAC;AACF;AAAyC,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EAC9F,aAAa;;EACb,MAAMC,QAAQ,GAAGhB,oBAAoB,CAAC,CAAC;EACvC,MAAMiB,MAAM,GAAGZ,SAAS,CAAC;IACrBa,GAAG,EAAEH,KAAK,CAACG,GAAG;IACdF;EACJ,CAAC,CAAC;EACF;EACAD,KAAK,CAACX,IAAI,CAACe,SAAS,GAAGpB,YAAY,CAACI,wBAAwB,CAACC,IAAI,EAAEW,KAAK,CAACK,cAAc,EAAEH,MAAM,CAACb,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACe,SAAS,CAAC;EAC3H,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}
|
|
@@ -20,6 +20,7 @@ const useStyles = makeStyles({
|
|
|
20
20
|
dir: state.dir,
|
|
21
21
|
renderer
|
|
22
22
|
});
|
|
23
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
23
24
|
state.root.className = mergeClasses(fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);
|
|
24
25
|
return state;
|
|
25
26
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/FluentProvider/useFluentProviderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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): FluentProviderState => {\n 'use no memo';\n\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"],"names":["makeStyles","mergeClasses","useRenderer_unstable","tokens","typographyStyles","fluentProviderClassNames","root","useStyles","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","textAlign","body1","useFluentProviderStyles_unstable","state","renderer","styles","dir","className","themeClassName"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,oBAAoB,QAAQ,iBAAiB;AACtD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAIjE,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,OAAOL,OAAOM,uBAAuB;QACrCC,iBAAiBP,OAAOQ,uBAAuB;QAC/CC,WAAW;QACX,GAAGR,iBAAiBS,KAAK;IAC3B;AACF;AAEA,sCAAsC,GACtC,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,WAAWd;IACjB,MAAMe,SAASV,UAAU;QAAEW,KAAKH,MAAMG,GAAG;QAAEF;IAAS;
|
|
1
|
+
{"version":3,"sources":["../src/components/FluentProvider/useFluentProviderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 type { 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): FluentProviderState => {\n 'use no memo';\n\n const renderer = useRenderer_unstable();\n const styles = useStyles({ dir: state.dir, renderer });\n\n // eslint-disable-next-line react-hooks/immutability\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"],"names":["makeStyles","mergeClasses","useRenderer_unstable","tokens","typographyStyles","fluentProviderClassNames","root","useStyles","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","textAlign","body1","useFluentProviderStyles_unstable","state","renderer","styles","dir","className","themeClassName"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,oBAAoB,QAAQ,iBAAiB;AACtD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAIjE,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,OAAOL,OAAOM,uBAAuB;QACrCC,iBAAiBP,OAAOQ,uBAAuB;QAC/CC,WAAW;QACX,GAAGR,iBAAiBS,KAAK;IAC3B;AACF;AAEA,sCAAsC,GACtC,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,WAAWd;IACjB,MAAMe,SAASV,UAAU;QAAEW,KAAKH,MAAMG,GAAG;QAAEF;IAAS;IAEpD,oDAAoD;IACpDD,MAAMT,IAAI,CAACa,SAAS,GAAGlB,aACrBI,yBAAyBC,IAAI,EAC7BS,MAAMK,cAAc,EACpBH,OAAOX,IAAI,EACXS,MAAMT,IAAI,CAACa,SAAS;IAGtB,OAAOJ;AACT,EAAE"}
|
|
@@ -45,7 +45,7 @@ const insertSheet = (tag, rule)=>{
|
|
|
45
45
|
styleTagId
|
|
46
46
|
]);
|
|
47
47
|
if (process.env.NODE_ENV !== 'production') {
|
|
48
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
48
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks, react-hooks/void-use-memo
|
|
49
49
|
React.useMemo(()=>{
|
|
50
50
|
// Heads up!
|
|
51
51
|
// .useMemo() is used because it is called during render and DOM for _current_ component is not mounted yet. Also,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"sourcesContent":["'use client';\n\nimport { 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 // Document might exist but not be ready yet (e.g. during SSR)\n // In that case, we should not create a style tag\n if (!target?.head) {\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): { styleTagId: string; rule: string } => {\n 'use no memo';\n\n const { targetDocument, theme, rendererAttributes } = options;\n\n const styleTag = React.useRef<HTMLStyleElement | undefined | null>(undefined);\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 providerElementSelector = `.${fluentProviderClassNames.root}.${styleTagId}`;\n const providerElements = targetDocument.querySelectorAll(providerElementSelector);\n\n const styleElementSelector = `style[id=\"${styleTagId}\"]`;\n const styleElements = targetDocument.querySelectorAll<HTMLStyleElement>(styleElementSelector);\n\n if (styleElements.length > 1) {\n // eslint-disable-next-line no-console\n console.error(\n [\n '@fluentui/react-provider: We found multiple <style> elements with same 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 return;\n }\n\n const styleElement = styleElements.item(0) as HTMLStyleElement | null;\n\n // Heads up!\n //\n // In SSR, we will have DOM upfront & style tags will have CSS rules defined in `.textContent`\n const isSSR = (styleElement?.textContent?.length ?? 0) > 0;\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","head","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","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","styleElement","providerElementSelector","providerElements","querySelectorAll","styleElementSelector","styleElements","join","item","isSSR","textContent","elementsCount","useHandleSSRStyleElements","ssrStyleElement","getElementById","current","id","remove","useState","themeStyleElement","append"],"mappings":"AAAA;AAEA,SAASA,KAAK,EAAEC,yBAAyB,QAAQ,4BAA4B;AAC7E,YAAYC,WAAW,QAAQ;AAE/B,SAASC,sBAAsB,QAAQ,2BAA2B;AAElE,SAASC,wBAAwB,QAAQ,mCAAmC;AAE5E,4FAA4F;AAC5F,MAAMC,qBAAqB,AAACH,KAAe,CAAC,iBAAiB,SAAS,GAClE,AAACA,KAAe,CAAC,iBAAiB,SAAS,GAC3CD;AAEJ,MAAMK,iBAAiB,CAACC,QAA8BC;IACpD,8DAA8D;IAC9D,iDAAiD;IACjD,IAAI,EAACD,mBAAAA,6BAAAA,OAAQE,IAAI,GAAE;QACjB,OAAOC;IACT;IAEA,MAAMC,MAAMJ,OAAOK,aAAa,CAAC;IAEjCC,OAAOC,IAAI,CAACN,mBAAmBO,OAAO,CAACC,CAAAA;QACrCL,IAAIM,YAAY,CAACD,UAAUR,iBAAiB,CAACQ,SAAS;IACxD;IAEAT,OAAOE,IAAI,CAACS,WAAW,CAACP;IACxB,OAAOA;AACT;AAEA,MAAMQ,cAAc,CAACR,KAAuBS;IAC1C,MAAMC,QAAQV,IAAIU,KAAK;IAEvB,IAAIA,OAAO;QACT,IAAIA,MAAMC,QAAQ,CAACC,MAAM,GAAG,GAAG;YAC7BF,MAAMG,UAAU,CAAC;QACnB;QACAH,MAAMI,UAAU,CAACL,MAAM;IACzB,OAAO,IAAIM,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QAChD,sCAAsC;QACtCC,QAAQC,KAAK,CAAC;IAChB;AACF;AAEA;;;;CAIC,GACD,OAAO,MAAMC,iCAAiC,CAC5CC;IAEA;IAEA,MAAM,EAAEC,cAAc,EAAEC,KAAK,EAAEC,kBAAkB,EAAE,GAAGH;IAEtD,MAAMI,WAAWlC,MAAMmC,MAAM,CAAsC3B;IAEnE,MAAM4B,aAAatC,MAAMI,yBAAyBmC,IAAI;IACtD,MAAMC,yBAAyBL;IAE/B,MAAMf,OAAOlB,MAAMuC,OAAO,CAAC,IAAMtC,uBAAuB,CAAC,CAAC,EAAEmC,YAAY,EAAEJ,QAAQ;QAACA;QAAOI;KAAW;IAErG,IAAIZ,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,
|
|
1
|
+
{"version":3,"sources":["../src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"sourcesContent":["'use client';\n\nimport { 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 // Document might exist but not be ready yet (e.g. during SSR)\n // In that case, we should not create a style tag\n if (!target?.head) {\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): { styleTagId: string; rule: string } => {\n 'use no memo';\n\n const { targetDocument, theme, rendererAttributes } = options;\n\n const styleTag = React.useRef<HTMLStyleElement | undefined | null>(undefined);\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, react-hooks/void-use-memo\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 providerElementSelector = `.${fluentProviderClassNames.root}.${styleTagId}`;\n const providerElements = targetDocument.querySelectorAll(providerElementSelector);\n\n const styleElementSelector = `style[id=\"${styleTagId}\"]`;\n const styleElements = targetDocument.querySelectorAll<HTMLStyleElement>(styleElementSelector);\n\n if (styleElements.length > 1) {\n // eslint-disable-next-line no-console\n console.error(\n [\n '@fluentui/react-provider: We found multiple <style> elements with same 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 return;\n }\n\n const styleElement = styleElements.item(0) as HTMLStyleElement | null;\n\n // Heads up!\n //\n // In SSR, we will have DOM upfront & style tags will have CSS rules defined in `.textContent`\n const isSSR = (styleElement?.textContent?.length ?? 0) > 0;\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","head","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","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","styleElement","providerElementSelector","providerElements","querySelectorAll","styleElementSelector","styleElements","join","item","isSSR","textContent","elementsCount","useHandleSSRStyleElements","ssrStyleElement","getElementById","current","id","remove","useState","themeStyleElement","append"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/FluentProvider/renderFluentProvider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\n'use client';\n\nimport { canUseDOM, assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { TextDirectionProvider } from '@griffel/react';\nimport {\n OverridesProvider_unstable as OverridesProvider,\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n CustomStyleHooksProvider_unstable as CustomStyleHooksProvider,\n
|
|
1
|
+
{"version":3,"sources":["../src/components/FluentProvider/renderFluentProvider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\n'use client';\n\nimport { canUseDOM, assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { TextDirectionProvider } from '@griffel/react';\nimport type { CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue } from '@fluentui/react-shared-contexts';\nimport {\n OverridesProvider_unstable as OverridesProvider,\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n CustomStyleHooksProvider_unstable as CustomStyleHooksProvider,\n} from '@fluentui/react-shared-contexts';\nimport type { FluentProviderContextValues, FluentProviderState, FluentProviderSlots } from './FluentProvider.types';\nimport { IconDirectionContextProvider } from '@fluentui/react-icons/lib/providers';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n): JSXElement => {\n assertSlots<FluentProviderSlots>(state);\n\n // Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable\n // instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is\n // Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>\n\n return (\n <Provider value={contextValues.provider}>\n <ThemeProvider value={contextValues.theme}>\n <ThemeClassNameProvider value={contextValues.themeClassName}>\n <CustomStyleHooksProvider\n value={contextValues.customStyleHooks_unstable as Required<CustomStyleHooksContextValue>}\n >\n <TooltipVisibilityProvider value={contextValues.tooltip}>\n <TextDirectionProvider dir={contextValues.textDirection}>\n <IconDirectionContextProvider value={contextValues.iconDirection}>\n <OverridesProvider value={contextValues.overrides_unstable}>\n <state.root>\n {canUseDOM() ? null : (\n <style\n // Using dangerous HTML because react can escape characters\n // which can lead to invalid CSS.\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{ __html: state.serverStyleProps.cssRule }}\n {...state.serverStyleProps.attributes}\n />\n )}\n\n {state.root.children}\n </state.root>\n </OverridesProvider>\n </IconDirectionContextProvider>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </CustomStyleHooksProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"],"names":["canUseDOM","assertSlots","TextDirectionProvider","OverridesProvider_unstable","OverridesProvider","Provider_unstable","Provider","TooltipVisibilityProvider_unstable","TooltipVisibilityProvider","ThemeProvider_unstable","ThemeProvider","ThemeClassNameProvider_unstable","ThemeClassNameProvider","CustomStyleHooksProvider_unstable","CustomStyleHooksProvider","IconDirectionContextProvider","renderFluentProvider_unstable","state","contextValues","value","provider","theme","themeClassName","customStyleHooks_unstable","tooltip","dir","textDirection","iconDirection","overrides_unstable","root","style","dangerouslySetInnerHTML","__html","serverStyleProps","cssRule","attributes","children"],"mappings":"AAAA,wBAA0B,GAC1B,iDAAiD,GAEjD;;;;;+BAoBagB;;;;;;;gCAlB0B,4BAA4B;uBAE7B,iBAAiB;qCAShD,kCAAkC;2BAEI,sCAAsC;AAK5E,sCAAsC,CAC3CC,OACAC;QAEAjB,2BAAAA,EAAiCgB;IAEjC,+FAA+F;IAC/F,oFAAoF;IACpF,0GAA0G;IAE1G,OAAA,WAAA,OACE,eAAA,EAACX,sCAAAA,EAAAA;QAASa,OAAOD,cAAcE,QAAQ;kBACrC,WAAA,OAAA,eAAA,EAACV,2CAAAA,EAAAA;YAAcS,OAAOD,cAAcG,KAAK;sBACvC,WAAA,GAAA,mBAAA,EAACT,oDAAAA,EAAAA;gBAAuBO,OAAOD,cAAcI,cAAc;0BACzD,WAAA,OAAA,eAAA,EAACR,sDAAAA,EAAAA;oBACCK,OAAOD,cAAcK,yBAAyB;8BAE9C,WAAA,OAAA,eAAA,EAACf,uDAAAA,EAAAA;wBAA0BW,OAAOD,cAAcM,OAAO;kCACrD,WAAA,OAAA,eAAA,EAACtB,4BAAAA,EAAAA;4BAAsBuB,KAAKP,cAAcQ,aAAa;sCACrD,WAAA,OAAA,eAAA,EAACX,uCAAAA,EAAAA;gCAA6BI,OAAOD,cAAcS,aAAa;0CAC9D,WAAA,OAAA,eAAA,EAACvB,+CAAAA,EAAAA;oCAAkBe,OAAOD,cAAcU,kBAAkB;8CACxD,WAAA,OAAA,gBAAA,EAACX,MAAMY,IAAI,EAAA;;gDACR7B,yBAAAA,MAAc,OAAA,WAAA,OACb,eAAA,EAAC8B,SAAAA;gDACC,2DAA2D;gDAC3D,iCAAiC;gDACjC,2CAA2C;gDAC3CC,yBAAyB;oDAAEC,QAAQf,MAAMgB,gBAAgB,CAACC,OAAO;gDAAC;gDACjE,GAAGjB,MAAMgB,gBAAgB,CAACE,UAAU;;4CAIxClB,MAAMY,IAAI,CAACO,QAAQ;;;;;;;;;;;AAW1C,EAAE"}
|
|
@@ -54,6 +54,7 @@ const useFluentProviderStyles_unstable = (state)=>{
|
|
|
54
54
|
dir: state.dir,
|
|
55
55
|
renderer
|
|
56
56
|
});
|
|
57
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
57
58
|
state.root.className = (0, _core.mergeClasses)(fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);
|
|
58
59
|
return state;
|
|
59
60
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useFluentProviderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const fluentProviderClassNames = {\n root: 'fui-FluentProvider'\n};\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n textAlign: 'left',\n ...typographyStyles.body1\n }\n});\n/** Applies style classnames to slots */ export const useFluentProviderStyles_unstable = (state)=>{\n 'use no memo';\n const renderer = useRenderer_unstable();\n const styles = useStyles({\n dir: state.dir,\n renderer\n });\n state.root.className = mergeClasses(fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","useRenderer_unstable","tokens","typographyStyles","fluentProviderClassNames","root","useStyles","sj55zd","De3pzq","fsow6f","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useFluentProviderStyles_unstable","state","renderer","styles","dir","className","themeClassName"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,wBAAwB;;;oCAWiD
|
|
1
|
+
{"version":3,"sources":["useFluentProviderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const fluentProviderClassNames = {\n root: 'fui-FluentProvider'\n};\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n textAlign: 'left',\n ...typographyStyles.body1\n }\n});\n/** Applies style classnames to slots */ export const useFluentProviderStyles_unstable = (state)=>{\n 'use no memo';\n const renderer = useRenderer_unstable();\n const styles = useStyles({\n dir: state.dir,\n renderer\n });\n // eslint-disable-next-line react-hooks/immutability\n state.root.className = mergeClasses(fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);\n return state;\n};\n"],"names":["__styles","mergeClasses","useRenderer_unstable","tokens","typographyStyles","fluentProviderClassNames","root","useStyles","sj55zd","De3pzq","fsow6f","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useFluentProviderStyles_unstable","state","renderer","styles","dir","className","themeClassName"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,wBAAwB;;;oCAWiD;eAAhCW;;;sBAdb,eAAe;uBACnB,gBAAgB;AAE9C,iCAAiC;IACpCV,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,GAAA,WAAA,OAAGP,cAAA,EAAA;IAAAM,IAAA,EAAA;QAAAE,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;YAAA;YAAA;SAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;QAAA;KAAA;AAAA,CAOjB,CAAC;AAC8C,0CAA0CE,KAAK,IAAG;IAC9F,aAAa;IACb,MAAMC,QAAQ,OAAGhB,2BAAoB,CAAC,CAAC;IACvC,MAAMiB,MAAM,GAAGZ,SAAS,CAAC;QACrBa,GAAG,EAAEH,KAAK,CAACG,GAAG;QACdF;IACJ,CAAC,CAAC;IACF,oDAAA;IACAD,KAAK,CAACX,IAAI,CAACe,SAAS,OAAGpB,kBAAY,EAACI,wBAAwB,CAACC,IAAI,EAAEW,KAAK,CAACK,cAAc,EAAEH,MAAM,CAACb,IAAI,EAAEW,KAAK,CAACX,IAAI,CAACe,SAAS,CAAC;IAC3H,OAAOJ,KAAK;AAChB,CAAC"}
|
|
@@ -38,6 +38,7 @@ const useFluentProviderStyles_unstable = (state)=>{
|
|
|
38
38
|
dir: state.dir,
|
|
39
39
|
renderer
|
|
40
40
|
});
|
|
41
|
+
// eslint-disable-next-line react-hooks/immutability
|
|
41
42
|
state.root.className = (0, _core.mergeClasses)(fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);
|
|
42
43
|
return state;
|
|
43
44
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/FluentProvider/useFluentProviderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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): FluentProviderState => {\n 'use no memo';\n\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"],"names":["makeStyles","mergeClasses","useRenderer_unstable","tokens","typographyStyles","fluentProviderClassNames","root","useStyles","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","textAlign","body1","useFluentProviderStyles_unstable","state","renderer","styles","dir","className","themeClassName"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,wBAAAA;;;oCAcAS;;;;sBApB4B,gBAAgB;uBACpB,iBAAiB;4BACb,wBAAwB;AAI1D,iCAAsE;IAC3ER,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYP,gBAAAA,EAAW;IAC3BM,MAAM;QACJE,OAAOL,kBAAAA,CAAOM,uBAAuB;QACrCC,iBAAiBP,kBAAAA,CAAOQ,uBAAuB;QAC/CC,WAAW;QACX,GAAGR,4BAAAA,CAAiBS,KAAK;IAC3B;AACF;AAGO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,eAAWd,2BAAAA;IACjB,MAAMe,SAASV,UAAU;QAAEW,KAAKH,MAAMG,GAAG;QAAEF;IAAS;
|
|
1
|
+
{"version":3,"sources":["../src/components/FluentProvider/useFluentProviderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { 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 type { 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): FluentProviderState => {\n 'use no memo';\n\n const renderer = useRenderer_unstable();\n const styles = useStyles({ dir: state.dir, renderer });\n\n // eslint-disable-next-line react-hooks/immutability\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"],"names":["makeStyles","mergeClasses","useRenderer_unstable","tokens","typographyStyles","fluentProviderClassNames","root","useStyles","color","colorNeutralForeground1","backgroundColor","colorNeutralBackground1","textAlign","body1","useFluentProviderStyles_unstable","state","renderer","styles","dir","className","themeClassName"],"mappings":"AAAA;;;;;;;;;;;;IAQaK,wBAAAA;;;oCAcAS;;;;sBApB4B,gBAAgB;uBACpB,iBAAiB;4BACb,wBAAwB;AAI1D,iCAAsE;IAC3ER,MAAM;AACR,EAAE;AAEF,MAAMC,gBAAYP,gBAAAA,EAAW;IAC3BM,MAAM;QACJE,OAAOL,kBAAAA,CAAOM,uBAAuB;QACrCC,iBAAiBP,kBAAAA,CAAOQ,uBAAuB;QAC/CC,WAAW;QACX,GAAGR,4BAAAA,CAAiBS,KAAK;IAC3B;AACF;AAGO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,eAAWd,2BAAAA;IACjB,MAAMe,SAASV,UAAU;QAAEW,KAAKH,MAAMG,GAAG;QAAEF;IAAS;IAEpD,oDAAoD;IACpDD,MAAMT,IAAI,CAACa,SAAS,OAAGlB,kBAAAA,EACrBI,yBAAyBC,IAAI,EAC7BS,MAAMK,cAAc,EACpBH,OAAOX,IAAI,EACXS,MAAMT,IAAI,CAACa,SAAS;IAGtB,OAAOJ;AACT,EAAE"}
|
|
@@ -52,7 +52,7 @@ const useFluentProviderThemeStyleTag = (options)=>{
|
|
|
52
52
|
styleTagId
|
|
53
53
|
]);
|
|
54
54
|
if (process.env.NODE_ENV !== 'production') {
|
|
55
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
55
|
+
// eslint-disable-next-line react-hooks/rules-of-hooks, react-hooks/void-use-memo
|
|
56
56
|
_react.useMemo(()=>{
|
|
57
57
|
// Heads up!
|
|
58
58
|
// .useMemo() is used because it is called during render and DOM for _current_ component is not mounted yet. Also,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"sourcesContent":["'use client';\n\nimport { 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 // Document might exist but not be ready yet (e.g. during SSR)\n // In that case, we should not create a style tag\n if (!target?.head) {\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): { styleTagId: string; rule: string } => {\n 'use no memo';\n\n const { targetDocument, theme, rendererAttributes } = options;\n\n const styleTag = React.useRef<HTMLStyleElement | undefined | null>(undefined);\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 providerElementSelector = `.${fluentProviderClassNames.root}.${styleTagId}`;\n const providerElements = targetDocument.querySelectorAll(providerElementSelector);\n\n const styleElementSelector = `style[id=\"${styleTagId}\"]`;\n const styleElements = targetDocument.querySelectorAll<HTMLStyleElement>(styleElementSelector);\n\n if (styleElements.length > 1) {\n // eslint-disable-next-line no-console\n console.error(\n [\n '@fluentui/react-provider: We found multiple <style> elements with same 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 return;\n }\n\n const styleElement = styleElements.item(0) as HTMLStyleElement | null;\n\n // Heads up!\n //\n // In SSR, we will have DOM upfront & style tags will have CSS rules defined in `.textContent`\n const isSSR = (styleElement?.textContent?.length ?? 0) > 0;\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","head","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","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","styleElement","providerElementSelector","providerElements","querySelectorAll","styleElementSelector","styleElements","join","item","isSSR","textContent","elementsCount","useHandleSSRStyleElements","ssrStyleElement","getElementById","current","id","remove","useState","themeStyleElement","append"],"mappings":"AAAA;;;;;;;;eAkDa+B;;;;gCAhDoC,4BAA4B;iEACtD,QAAQ;wCAEQ,2BAA2B;+CAEzB,mCAAmC;AAE5E,4FAA4F;AAC5F,MAAM1B,qBAAsBH,MAAe,CAAC,iBAAiB,SAAS,GACjEA,MAAe,CAAC,iBAAiB,SAAS,GAC3CD,yCAAAA;AAEJ,MAAMK,iBAAiB,CAACC,QAA8BC;IACpD,8DAA8D;IAC9D,iDAAiD;IACjD,IAAI,EAACD,WAAAA,QAAAA,WAAAA,KAAAA,IAAAA,KAAAA,IAAAA,OAAQE,IAAAA,AAAI,GAAE;QACjB,OAAOC;IACT;IAEA,MAAMC,MAAMJ,OAAOK,aAAa,CAAC;IAEjCC,OAAOC,IAAI,CAACN,mBAAmBO,OAAO,CAACC,CAAAA;QACrCL,IAAIM,YAAY,CAACD,UAAUR,iBAAiB,CAACQ,SAAS;IACxD;IAEAT,OAAOE,IAAI,CAACS,WAAW,CAACP;IACxB,OAAOA;AACT;AAEA,MAAMQ,cAAc,CAACR,KAAuBS;IAC1C,MAAMC,QAAQV,IAAIU,KAAK;IAEvB,IAAIA,OAAO;QACT,IAAIA,MAAMC,QAAQ,CAACC,MAAM,GAAG,GAAG;YAC7BF,MAAMG,UAAU,CAAC;QACnB;QACAH,MAAMI,UAAU,CAACL,MAAM;IACzB,OAAO,IAAIM,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QAChD,sCAAsC;QACtCC,QAAQC,KAAK,CAAC;IAChB;AACF;AAOO,uCAAuC,CAC5CE;IAEA;IAEA,MAAM,EAAEC,cAAc,EAAEC,KAAK,EAAEC,kBAAkB,EAAE,GAAGH;IAEtD,MAAMI,WAAWlC,OAAMmC,MAAM,CAAsC3B;IAEnE,MAAM4B,iBAAatC,qBAAAA,EAAMI,uDAAAA,CAAyBmC,IAAI;IACtD,MAAMC,yBAAyBL;IAE/B,MAAMf,OAAOlB,OAAMuC,OAAO,CAAC,QAAMtC,8CAAAA,EAAuB,CAAC,CAAC,EAAEmC,YAAY,EAAEJ,QAAQ;QAACA;QAAOI;KAAW;IAErG,IAAIZ,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,
|
|
1
|
+
{"version":3,"sources":["../src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"sourcesContent":["'use client';\n\nimport { 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 // Document might exist but not be ready yet (e.g. during SSR)\n // In that case, we should not create a style tag\n if (!target?.head) {\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): { styleTagId: string; rule: string } => {\n 'use no memo';\n\n const { targetDocument, theme, rendererAttributes } = options;\n\n const styleTag = React.useRef<HTMLStyleElement | undefined | null>(undefined);\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, react-hooks/void-use-memo\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 providerElementSelector = `.${fluentProviderClassNames.root}.${styleTagId}`;\n const providerElements = targetDocument.querySelectorAll(providerElementSelector);\n\n const styleElementSelector = `style[id=\"${styleTagId}\"]`;\n const styleElements = targetDocument.querySelectorAll<HTMLStyleElement>(styleElementSelector);\n\n if (styleElements.length > 1) {\n // eslint-disable-next-line no-console\n console.error(\n [\n '@fluentui/react-provider: We found multiple <style> elements with same 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 return;\n }\n\n const styleElement = styleElements.item(0) as HTMLStyleElement | null;\n\n // Heads up!\n //\n // In SSR, we will have DOM upfront & style tags will have CSS rules defined in `.textContent`\n const isSSR = (styleElement?.textContent?.length ?? 0) > 0;\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","head","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","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","styleElement","providerElementSelector","providerElements","querySelectorAll","styleElementSelector","styleElements","join","item","isSSR","textContent","elementsCount","useHandleSSRStyleElements","ssrStyleElement","getElementById","current","id","remove","useState","themeStyleElement","append"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-provider",
|
|
3
|
-
"version": "9.22.
|
|
3
|
+
"version": "9.22.17",
|
|
4
4
|
"description": "Fluent UI React provider component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -14,10 +14,10 @@
|
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@fluentui/react-icons": "^2.0.245",
|
|
16
16
|
"@fluentui/react-shared-contexts": "^9.26.2",
|
|
17
|
-
"@fluentui/react-tabster": "^9.26.
|
|
17
|
+
"@fluentui/react-tabster": "^9.26.15",
|
|
18
18
|
"@fluentui/react-theme": "^9.2.1",
|
|
19
|
-
"@fluentui/react-utilities": "^9.26.
|
|
20
|
-
"@fluentui/react-jsx-runtime": "^9.4.
|
|
19
|
+
"@fluentui/react-utilities": "^9.26.4",
|
|
20
|
+
"@fluentui/react-jsx-runtime": "^9.4.3",
|
|
21
21
|
"@griffel/core": "^1.16.0",
|
|
22
22
|
"@griffel/react": "^1.5.32",
|
|
23
23
|
"@swc/helpers": "^0.5.1"
|