@fluentui/react-provider 9.22.21 → 9.22.23
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 +21 -2
- package/lib/components/FluentProvider/FluentProvider.js.map +1 -1
- package/lib/components/FluentProvider/FluentProvider.types.js.map +1 -1
- package/lib/components/FluentProvider/createCSSRuleFromTheme.js +34 -11
- package/lib/components/FluentProvider/createCSSRuleFromTheme.js.map +1 -1
- package/lib/components/FluentProvider/index.js.map +1 -1
- package/lib/components/FluentProvider/renderFluentProvider.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProvider.js +1 -1
- package/lib/components/FluentProvider/useFluentProvider.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProviderContextValues.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProviderStyles.styles.raw.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js +2 -2
- package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
- package/lib-commonjs/FluentProvider.cjs +9 -9
- package/lib-commonjs/FluentProvider.cjs.map +1 -1
- package/lib-commonjs/components/FluentProvider/FluentProvider.cjs.map +1 -1
- package/lib-commonjs/components/FluentProvider/FluentProvider.types.cjs.map +1 -1
- package/lib-commonjs/components/FluentProvider/createCSSRuleFromTheme.cjs +34 -11
- package/lib-commonjs/components/FluentProvider/createCSSRuleFromTheme.cjs.map +1 -1
- package/lib-commonjs/components/FluentProvider/index.cjs +9 -9
- package/lib-commonjs/components/FluentProvider/index.cjs.map +1 -1
- package/lib-commonjs/components/FluentProvider/renderFluentProvider.cjs.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProvider.cjs +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProvider.cjs.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.cjs.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.styles.cjs +3 -3
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.styles.cjs.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.styles.raw.cjs +3 -3
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.styles.raw.cjs.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.cjs +2 -2
- package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.cjs.map +1 -1
- package/lib-commonjs/index.cjs +9 -9
- package/lib-commonjs/index.cjs.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,31 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-provider
|
|
2
2
|
|
|
3
|
-
<!-- This log was last generated on
|
|
3
|
+
<!-- This log was last generated on Tue, 27 Oct 2026 16:42:32 GMT and should not be manually modified. -->
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.22.23](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.22.23)
|
|
8
|
+
|
|
9
|
+
Tue, 27 Oct 2026 16:42:32 GMT
|
|
10
|
+
|
|
11
|
+
### Patches
|
|
12
|
+
|
|
13
|
+
- fix: escape theme style delimiters instead of omitting valid nested theme values ([PR #36985](https://github.com/microsoft/fluentui/pull/36985) by vgenaev@gmail.com)
|
|
14
|
+
|
|
15
|
+
## [9.22.22](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.22.22)
|
|
16
|
+
|
|
17
|
+
Mon, 19 Oct 2026 16:49:00 GMT
|
|
18
|
+
|
|
19
|
+
### Patches
|
|
20
|
+
|
|
21
|
+
- fix: block unsafe theme token syntax without a value-format allowlist ([PR #36830](https://github.com/microsoft/fluentui/pull/36830) by paliprandi@microsoft.com)
|
|
22
|
+
- Bump @fluentui/react-jsx-runtime to v9.4.7 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
23
|
+
- Bump @fluentui/react-tabster to v9.26.19 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
24
|
+
- Bump @fluentui/react-utilities to v9.27.0 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
|
|
25
|
+
|
|
7
26
|
## [9.22.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.22.21)
|
|
8
27
|
|
|
9
|
-
|
|
28
|
+
Tue, 22 Sep 2026 11:25:39 GMT
|
|
10
29
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.22.20..@fluentui/react-provider_v9.22.21)
|
|
11
30
|
|
|
12
31
|
### Patches
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/FluentProvider/FluentProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nimport { renderFluentProvider_unstable } from './renderFluentProvider';\nimport { useFluentProvider_unstable } from './useFluentProvider';\nimport { useFluentProviderStyles_unstable } from './useFluentProviderStyles.styles';\nimport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nimport type { FluentProviderProps } from './FluentProvider.types';\n\nexport const FluentProvider: ForwardRefComponent<FluentProviderProps> = React.forwardRef((props, ref) => {\n const state = useFluentProvider_unstable(props, ref);\n useFluentProviderStyles_unstable(state);\n\n const contextValues = useFluentProviderContextValues_unstable(state);\n\n return renderFluentProvider_unstable(state, contextValues);\n});\n\nFluentProvider.displayName = 'FluentProvider';\n"],"names":["React","renderFluentProvider_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderContextValues_unstable","FluentProvider","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAI/B,SAASC,6BAA6B,QAAQ,4BAAyB;AACvE,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,gCAAgC,QAAQ,sCAAmC;AACpF,SAASC,uCAAuC,QAAQ,sCAAmC;AAG3F,OAAO,MAAMC,+BAA2DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQP,2BAA2BK,OAAOC;IAChDL,iCAAiCM;IAEjC,MAAMC,gBAAgBN,wCAAwCK;IAE9D,OAAOR,8BAA8BQ,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/FluentProvider/FluentProvider.types.ts"],"sourcesContent":["/*\n IconDirectionContextValue is being imported as a leaf node import in order to prevent extra icons froms being\n downloaded when trying to use the FluentProvider.\n This issue has more context: https://github.com/microsoft/fluentui/issues/30909\n*/\nimport type { IconDirectionContextValue } from '@fluentui/react-icons/lib/providers';\nimport type {\n OverridesContextValue_unstable as OverridesContextValue,\n ProviderContextValue_unstable as ProviderContextValue,\n TooltipVisibilityContextValue_unstable as TooltipVisibilityContextValue,\n ThemeClassNameContextValue_unstable as ThemeClassNameContextValue,\n ThemeContextValue_unstable as ThemeContextValue,\n CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\n} from '@fluentui/react-shared-contexts';\nimport type { PartialTheme } from '@fluentui/react-theme';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type FluentProviderSlots = {\n root: Slot<'div'>;\n};\n\n// exported for callers to avoid referencing react-shared-context\n// and applying Partial<> when passing custom style hooks.\nexport type FluentProviderCustomStyleHooks = CustomStyleHooksContextValue;\n\nexport type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir'> & {\n /**\n * Passes styles applied to a component down to portals if enabled.\n * @default true\n */\n applyStylesToPortals?: boolean;\n\n /** Sets the hooks for custom styling components. */\n // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable?: FluentProviderCustomStyleHooks;\n\n /** Sets the direction of text & generated styles. */\n dir?: 'ltr' | 'rtl';\n\n /** Provides the document, can be undefined during SSR render. */\n targetDocument?: Document;\n\n /** Sets the theme used in a scope. */\n theme?: PartialTheme;\n\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable?: OverridesContextValue;\n};\n\nexport type FluentProviderState = ComponentState<FluentProviderSlots> &\n Pick<FluentProviderProps, 'targetDocument'> &\n Required<\n Pick<FluentProviderProps, 'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable'>\n > & {\n theme: ThemeContextValue;\n themeClassName: string;\n /**\n * Props used to render SSR theme variables style element\n */\n serverStyleProps: {\n /**\n * CSS rule containing CSS variables\n */\n cssRule: string;\n /**\n * Additional attributes applied to the style element\n */\n attributes: Record<string, string>;\n };\n };\n\nexport type FluentProviderContextValues = Pick<\n FluentProviderState,\n 'customStyleHooks_unstable' | 'theme' | 'overrides_unstable'\n> & {\n provider: ProviderContextValue;\n themeClassName: ThemeClassNameContextValue;\n textDirection: 'ltr' | 'rtl';\n iconDirection: IconDirectionContextValue;\n tooltip: TooltipVisibilityContextValue;\n};\n"],"names":[],"mappings":"AAAA;;;;AAIA,GAmEA,WASE"}
|
|
@@ -1,28 +1,51 @@
|
|
|
1
1
|
const CSS_ESCAPE_MAP = {
|
|
2
|
+
'\\': '\\5C ',
|
|
2
3
|
'<': '\\3C ',
|
|
3
|
-
'>': '\\3E '
|
|
4
|
+
'>': '\\3E ',
|
|
5
|
+
'{': '\\7B ',
|
|
6
|
+
'}': '\\7D ',
|
|
7
|
+
';': '\\3B '
|
|
4
8
|
};
|
|
9
|
+
const CSS_ESCAPE_PATTERN = /[\\<>{};]/g;
|
|
10
|
+
function escapeCharacter(character) {
|
|
11
|
+
return `\\${character.charCodeAt(0).toString(16).toUpperCase()} `;
|
|
12
|
+
}
|
|
13
|
+
function escapeSelector(value) {
|
|
14
|
+
// Consume whole backslash runs so escaping preserves their parity and does not retry overlapping suffixes.
|
|
15
|
+
return value.replace(/\\+[<{}]?|[<{}]/g, (match)=>{
|
|
16
|
+
const character = match[match.length - 1];
|
|
17
|
+
if (!'<{}'.includes(character)) {
|
|
18
|
+
return match;
|
|
19
|
+
}
|
|
20
|
+
const backslashes = match.length - 1;
|
|
21
|
+
return match.slice(0, backslashes - backslashes % 2) + escapeCharacter(character);
|
|
22
|
+
});
|
|
23
|
+
}
|
|
5
24
|
/**
|
|
6
|
-
* Escapes characters that could
|
|
25
|
+
* Escapes characters that could end the declaration, the rule or the surrounding <style> tag.
|
|
7
26
|
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
return value.replace(/[<>]/g, (match)=>CSS_ESCAPE_MAP[match]);
|
|
27
|
+
* Backslashes are escaped too, so a value cannot escape the declaration separator that follows it.
|
|
28
|
+
* Other characters, including quotes and parentheses, are kept as-is: theme values legitimately contain quoted
|
|
29
|
+
* font families and nested CSS functions such as `oklch(from var(--token) l c h / 0.5)`.
|
|
30
|
+
*/ function escapeThemeText(value) {
|
|
31
|
+
return value.replace(CSS_ESCAPE_PATTERN, (match)=>CSS_ESCAPE_MAP[match]);
|
|
14
32
|
}
|
|
15
33
|
/**
|
|
16
34
|
* Creates a CSS rule from a theme object.
|
|
17
35
|
*
|
|
18
36
|
* Useful for scenarios when you want to apply theming statically to a top level elements like `body`.
|
|
19
37
|
*/ export function createCSSRuleFromTheme(selector, theme) {
|
|
20
|
-
const escapedSelector =
|
|
38
|
+
const escapedSelector = escapeSelector(selector);
|
|
21
39
|
if (theme) {
|
|
22
40
|
const cssVarsAsString = Object.keys(theme).reduce((cssVarRule, cssVar)=>{
|
|
23
|
-
|
|
41
|
+
const tokenValue = theme[cssVar];
|
|
42
|
+
// Skip unset values (e.g. `undefined` from a nested provider) so they don't shadow inherited tokens.
|
|
43
|
+
if (typeof tokenValue !== 'string' && (typeof tokenValue !== 'number' || !Number.isFinite(tokenValue))) {
|
|
44
|
+
return cssVarRule;
|
|
45
|
+
}
|
|
46
|
+
return `${cssVarRule}--${escapeThemeText(cssVar)}: ${escapeThemeText(String(tokenValue))}; `;
|
|
24
47
|
}, '');
|
|
25
|
-
return `${escapedSelector} { ${
|
|
48
|
+
return `${escapedSelector} { ${cssVarsAsString} }`;
|
|
26
49
|
}
|
|
27
50
|
return `${escapedSelector} {}`;
|
|
28
51
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/FluentProvider/createCSSRuleFromTheme.ts"],"sourcesContent":["import type { PartialTheme } from '@fluentui/react-theme';\n\nconst CSS_ESCAPE_MAP: Record<string, string> = {\n '\\\\': '\\\\5C ',\n '<': '\\\\3C ',\n '>': '\\\\3E ',\n '{': '\\\\7B ',\n '}': '\\\\7D ',\n ';': '\\\\3B ',\n};\nconst CSS_ESCAPE_PATTERN = /[\\\\<>{};]/g;\n\nfunction escapeCharacter(character: string): string {\n return `\\\\${character.charCodeAt(0).toString(16).toUpperCase()} `;\n}\n\nfunction escapeSelector(value: string): string {\n // Consume whole backslash runs so escaping preserves their parity and does not retry overlapping suffixes.\n return value.replace(/\\\\+[<{}]?|[<{}]/g, match => {\n const character = match[match.length - 1];\n if (!'<{}'.includes(character)) {\n return match;\n }\n\n const backslashes = match.length - 1;\n return match.slice(0, backslashes - (backslashes % 2)) + escapeCharacter(character);\n });\n}\n\n/**\n * Escapes characters that could end the declaration, the rule or the surrounding <style> tag.\n *\n * Backslashes are escaped too, so a value cannot escape the declaration separator that follows it.\n * Other characters, including quotes and parentheses, are kept as-is: theme values legitimately contain quoted\n * font families and nested CSS functions such as `oklch(from var(--token) l c h / 0.5)`.\n */\nfunction escapeThemeText(value: string): string {\n return value.replace(CSS_ESCAPE_PATTERN, match => CSS_ESCAPE_MAP[match]);\n}\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 const escapedSelector = escapeSelector(selector);\n\n if (theme) {\n const cssVarsAsString = (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n const tokenValue: unknown = theme[cssVar];\n // Skip unset values (e.g. `undefined` from a nested provider) so they don't shadow inherited tokens.\n if (typeof tokenValue !== 'string' && (typeof tokenValue !== 'number' || !Number.isFinite(tokenValue))) {\n return cssVarRule;\n }\n\n return `${cssVarRule}--${escapeThemeText(cssVar)}: ${escapeThemeText(String(tokenValue))}; `;\n }, '');\n\n return `${escapedSelector} { ${cssVarsAsString} }`;\n }\n\n return `${escapedSelector} {}`;\n}\n"],"names":["CSS_ESCAPE_MAP","CSS_ESCAPE_PATTERN","escapeCharacter","character","charCodeAt","toString","toUpperCase","escapeSelector","value","replace","match","length","includes","backslashes","slice","escapeThemeText","createCSSRuleFromTheme","selector","theme","escapedSelector","cssVarsAsString","Object","keys","reduce","cssVarRule","cssVar","tokenValue","Number","isFinite","String"],"mappings":"AAEA,MAAMA,iBAAyC;IAC7C,MAAM;IACN,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;AACP;AACA,MAAMC,qBAAqB;AAE3B,SAASC,gBAAgBC,SAAiB;IACxC,OAAO,CAAC,EAAE,EAAEA,UAAUC,UAAU,CAAC,GAAGC,QAAQ,CAAC,IAAIC,WAAW,GAAG,CAAC,CAAC;AACnE;AAEA,SAASC,eAAeC,KAAa;IACnC,2GAA2G;IAC3G,OAAOA,MAAMC,OAAO,CAAC,oBAAoBC,CAAAA;QACvC,MAAMP,YAAYO,KAAK,CAACA,MAAMC,MAAM,GAAG,EAAE;QACzC,IAAI,CAAC,MAAMC,QAAQ,CAACT,YAAY;YAC9B,OAAOO;QACT;QAEA,MAAMG,cAAcH,MAAMC,MAAM,GAAG;QACnC,OAAOD,MAAMI,KAAK,CAAC,GAAGD,cAAeA,cAAc,KAAMX,gBAAgBC;IAC3E;AACF;AAEA;;;;;;CAMC,GACD,SAASY,gBAAgBP,KAAa;IACpC,OAAOA,MAAMC,OAAO,CAACR,oBAAoBS,CAAAA,QAASV,cAAc,CAACU,MAAM;AACzE;AAEA;;;;CAIC,GACD,OAAO,SAASM,uBAAuBC,QAAgB,EAAEC,KAA+B;IACtF,MAAMC,kBAAkBZ,eAAeU;IAEvC,IAAIC,OAAO;QACT,MAAME,kBAAkB,AAACC,OAAOC,IAAI,CAACJ,OAAkCK,MAAM,CAAC,CAACC,YAAYC;YACzF,MAAMC,aAAsBR,KAAK,CAACO,OAAO;YACzC,qGAAqG;YACrG,IAAI,OAAOC,eAAe,YAAa,CAAA,OAAOA,eAAe,YAAY,CAACC,OAAOC,QAAQ,CAACF,WAAU,GAAI;gBACtG,OAAOF;YACT;YAEA,OAAO,GAAGA,WAAW,EAAE,EAAET,gBAAgBU,QAAQ,EAAE,EAAEV,gBAAgBc,OAAOH,aAAa,EAAE,CAAC;QAC9F,GAAG;QAEH,OAAO,GAAGP,gBAAgB,GAAG,EAAEC,gBAAgB,EAAE,CAAC;IACpD;IAEA,OAAO,GAAGD,gBAAgB,GAAG,CAAC;AAChC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/FluentProvider/index.ts"],"sourcesContent":["export { createCSSRuleFromTheme } from './createCSSRuleFromTheme';\nexport { FluentProvider } from './FluentProvider';\nexport type {\n FluentProviderContextValues,\n FluentProviderCustomStyleHooks,\n FluentProviderProps,\n FluentProviderSlots,\n FluentProviderState,\n} from './FluentProvider.types';\nexport { renderFluentProvider_unstable } from './renderFluentProvider';\nexport { useFluentProvider_unstable } from './useFluentProvider';\nexport { fluentProviderClassNames, useFluentProviderStyles_unstable } from './useFluentProviderStyles.styles';\nexport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nexport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\n"],"names":["createCSSRuleFromTheme","FluentProvider","renderFluentProvider_unstable","useFluentProvider_unstable","fluentProviderClassNames","useFluentProviderStyles_unstable","useFluentProviderContextValues_unstable","useFluentProviderThemeStyleTag"],"mappings":"AAAA,SAASA,sBAAsB,QAAQ,8BAA2B;AAClE,SAASC,cAAc,QAAQ,sBAAmB;AAQlD,SAASC,6BAA6B,QAAQ,4BAAyB;AACvE,SAASC,0BAA0B,QAAQ,yBAAsB;AACjE,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,sCAAmC;AAC9G,SAASC,uCAAuC,QAAQ,sCAAmC;AAC3F,SAASC,8BAA8B,QAAQ,sCAAmC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
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"}
|
|
@@ -17,6 +17,7 @@ const DEFAULT_RENDERER_ATTRIBUTES = {};
|
|
|
17
17
|
* @param props - props from this instance of FluentProvider
|
|
18
18
|
* @param ref - reference to root HTMLElement of FluentProvider
|
|
19
19
|
*/ export const useFluentProvider_unstable = (props, ref)=>{
|
|
20
|
+
var _renderer_styleElementAttributes;
|
|
20
21
|
const parentContext = useFluent();
|
|
21
22
|
const parentTheme = useTheme();
|
|
22
23
|
const parentOverrides = useOverrides();
|
|
@@ -31,7 +32,6 @@ const DEFAULT_RENDERER_ATTRIBUTES = {};
|
|
|
31
32
|
const mergedOverrides = shallowMerge(parentOverrides, overrides);
|
|
32
33
|
const mergedCustomStyleHooks = shallowMerge(parentCustomStyleHooks, customStyleHooks_unstable);
|
|
33
34
|
const renderer = useRenderer_unstable();
|
|
34
|
-
var _renderer_styleElementAttributes;
|
|
35
35
|
const { styleTagId, rule } = useFluentProviderThemeStyleTag({
|
|
36
36
|
theme: mergedTheme,
|
|
37
37
|
targetDocument,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProvider.ts"],"sourcesContent":["'use client';\n\nimport { useRenderer_unstable } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n ThemeContext_unstable as ThemeContext,\n useFluent_unstable as useFluent,\n useOverrides_unstable as useOverrides,\n CustomStyleHooksContext_unstable as CustomStyleHooksContext,\n} from '@fluentui/react-shared-contexts';\nimport type {\n CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\n ThemeContextValue_unstable as ThemeContextValue,\n} from '@fluentui/react-shared-contexts';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n// Meomizing empty objects to avoid unnecessary rerenders.\nconst DEFAULT_STYLE_HOOKS = {};\nconst DEFAULT_RENDERER_ATTRIBUTES = {};\n\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */\nexport const useFluentProvider_unstable = (\n props: FluentProviderProps,\n ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n const parentContext = useFluent();\n const parentTheme = useTheme();\n const parentOverrides = useOverrides();\n const parentCustomStyleHooks: CustomStyleHooksContextValue =\n React.useContext(CustomStyleHooksContext) || DEFAULT_STYLE_HOOKS;\n\n /**\n * TODO: add merge functions to \"dir\" merge,\n * nesting providers with the same \"dir\" should not add additional attributes to DOM\n * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93\n */\n const {\n applyStylesToPortals = true,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable,\n dir = parentContext.dir,\n targetDocument = parentContext.targetDocument,\n theme,\n overrides_unstable: overrides = {},\n } = props;\n\n const mergedTheme = shallowMerge(parentTheme, theme);\n const mergedOverrides = shallowMerge(parentOverrides, overrides);\n\n const mergedCustomStyleHooks = shallowMerge(\n parentCustomStyleHooks,\n customStyleHooks_unstable,\n ) as CustomStyleHooksContextValue;\n\n const renderer = useRenderer_unstable();\n const { styleTagId, rule } = useFluentProviderThemeStyleTag({\n theme: mergedTheme,\n targetDocument,\n rendererAttributes: renderer.styleElementAttributes ?? DEFAULT_RENDERER_ATTRIBUTES,\n });\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (mergedTheme === undefined) {\n // eslint-disable-next-line no-console\n console.warn(\n [\n '@fluentui/react-provider: FluentProvider does not have your \"theme\" defined.',\n \"Make sure that your top-level FluentProvider has set a `theme` prop or you're setting the theme in your child FluentProvider.\",\n ].join(' '),\n );\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n }\n\n return {\n applyStylesToPortals,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable: mergedCustomStyleHooks,\n dir,\n targetDocument,\n theme: mergedTheme,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable: mergedOverrides,\n themeClassName: styleTagId,\n\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ...props,\n dir,\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>({ targetDocument })) as React.Ref<HTMLDivElement>,\n }),\n { elementType: 'div' },\n ),\n\n serverStyleProps: {\n cssRule: rule,\n attributes: {\n ...renderer.styleElementAttributes,\n id: styleTagId,\n },\n },\n };\n};\n\nfunction shallowMerge<T>(a: T, b: T): T {\n // Merge impacts perf: we should like to avoid it if it's possible\n if (a && b) {\n return { ...a, ...b };\n }\n\n if (a) {\n return a;\n }\n\n return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n return React.useContext(ThemeContext);\n}\n"],"names":["useRenderer_unstable","useFocusVisible","ThemeContext_unstable","ThemeContext","useFluent_unstable","useFluent","useOverrides_unstable","useOverrides","CustomStyleHooksContext_unstable","CustomStyleHooksContext","getIntrinsicElementProps","useMergedRefs","slot","React","useFluentProviderThemeStyleTag","DEFAULT_STYLE_HOOKS","DEFAULT_RENDERER_ATTRIBUTES","useFluentProvider_unstable","props","ref","renderer","parentContext","parentTheme","useTheme","parentOverrides","parentCustomStyleHooks","useContext","applyStylesToPortals","customStyleHooks_unstable","dir","targetDocument","theme","overrides_unstable","overrides","mergedTheme","shallowMerge","mergedOverrides","mergedCustomStyleHooks","styleTagId","rule","rendererAttributes","styleElementAttributes","process","env","NODE_ENV","useEffect","undefined","console","warn","join","themeClassName","components","root","always","elementType","serverStyleProps","cssRule","attributes","id","a","b"],"mappings":"AAAA;AAEA,SAASA,oBAAoB,QAAQ,iBAAiB;AACtD,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SACEC,yBAAyBC,YAAY,EACrCC,sBAAsBC,SAAS,EAC/BC,yBAAyBC,YAAY,EACrCC,oCAAoCC,uBAAuB,QACtD,kCAAkC;AAKzC,SAASC,wBAAwB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AAC1F,YAAYC,WAAW,QAAQ;AAE/B,SAASC,8BAA8B,QAAQ,sCAAmC;AAGlF,0DAA0D;AAC1D,MAAMC,sBAAsB,CAAC;AAC7B,MAAMC,8BAA8B,CAAC;AAErC;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;QAmCsBC;IAjCtB,MAAMC,gBAAgBhB;IACtB,MAAMiB,cAAcC;IACpB,MAAMC,kBAAkBjB;IACxB,MAAMkB,yBACJZ,MAAMa,UAAU,CAACjB,4BAA4BM;IAE/C;;;;GAIC,GACD,MAAM,EACJY,uBAAuB,IAAI,EAC3B,gEAAgE;IAChEC,yBAAyB,EACzBC,MAAMR,cAAcQ,GAAG,EACvBC,iBAAiBT,cAAcS,cAAc,EAC7CC,KAAK,EACLC,oBAAoBC,YAAY,CAAC,CAAC,EACnC,GAAGf;IAEJ,MAAMgB,cAAcC,aAAab,aAAaS;IAC9C,MAAMK,kBAAkBD,aAAaX,iBAAiBS;IAEtD,MAAMI,yBAAyBF,aAC7BV,wBACAG;IAGF,MAAMR,WAAWpB;IACjB,MAAM,EAAEsC,UAAU,EAAEC,IAAI,EAAE,GAAGzB,+BAA+B;QAC1DiB,OAAOG;QACPJ;QACAU,kBAAkB,GAAEpB,mCAAAA,SAASqB,sBAAsB,cAA/BrB,8CAAAA,mCAAmCJ;IACzD;IAEA,IAAI0B,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sDAAsD;QACtD/B,MAAMgC,SAAS,CAAC;YACd,IAAIX,gBAAgBY,WAAW;gBAC7B,sCAAsC;gBACtCC,QAAQC,IAAI,CACV;oBACE;oBACA;iBACD,CAACC,IAAI,CAAC;YAEX;QACA,uDAAuD;QACzD,GAAG,EAAE;IACP;IAEA,OAAO;QACLtB;QACA,gEAAgE;QAChEC,2BAA2BS;QAC3BR;QACAC;QACAC,OAAOG;QACP,gEAAgE;QAChEF,oBAAoBI;QACpBc,gBAAgBZ;QAEhBa,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMxC,KAAKyC,MAAM,CACf3C,yBAAyB,OAAO;YAC9B,GAAGQ,KAAK;YACRW;YACA,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FV,KAAKR,cAAcQ,KAAKlB,gBAAgC;gBAAE6B;YAAe;QAC3E,IACA;YAAEwB,aAAa;QAAM;QAGvBC,kBAAkB;YAChBC,SAASjB;YACTkB,YAAY;gBACV,GAAGrC,SAASqB,sBAAsB;gBAClCiB,IAAIpB;YACN;QACF;IACF;AACF,EAAE;AAEF,SAASH,aAAgBwB,CAAI,EAAEC,CAAI;IACjC,kEAAkE;IAClE,IAAID,KAAKC,GAAG;QACV,OAAO;YAAE,GAAGD,CAAC;YAAE,GAAGC,CAAC;QAAC;IACtB;IAEA,IAAID,GAAG;QACL,OAAOA;IACT;IAEA,OAAOC;AACT;AAEA,SAASrC;IACP,OAAOV,MAAMa,UAAU,CAACvB;AAC1B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProviderContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n const {\n applyStylesToPortals,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable,\n dir,\n root,\n targetDocument,\n theme,\n themeClassName,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable,\n } = state;\n\n const provider = React.useMemo(() => ({ dir, targetDocument }), [dir, targetDocument]);\n // \"Tooltip\" component mutates an object in this context, instance should be stable\n const [tooltip] = React.useState(() => ({}));\n const iconDirection = React.useMemo(() => ({ textDirection: dir }), [dir]);\n\n return {\n // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable,\n provider,\n textDirection: dir,\n iconDirection,\n tooltip,\n theme,\n themeClassName: applyStylesToPortals ? root.className! : themeClassName,\n };\n}\n"],"names":["React","useFluentProviderContextValues_unstable","state","applyStylesToPortals","customStyleHooks_unstable","dir","root","targetDocument","theme","themeClassName","overrides_unstable","provider","useMemo","tooltip","useState","iconDirection","textDirection","className"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,wCAAwCC,KAA0B;IAChF,MAAM,EACJC,oBAAoB,EACpB,gEAAgE;IAChEC,yBAAyB,EACzBC,GAAG,EACHC,IAAI,EACJC,cAAc,EACdC,KAAK,EACLC,cAAc,EACd,gEAAgE;IAChEC,kBAAkB,EACnB,GAAGR;IAEJ,MAAMS,WAAWX,MAAMY,OAAO,CAAC,IAAO,CAAA;YAAEP;YAAKE;QAAe,CAAA,GAAI;QAACF;QAAKE;KAAe;IACrF,mFAAmF;IACnF,MAAM,CAACM,QAAQ,GAAGb,MAAMc,QAAQ,CAAC,IAAO,CAAA,CAAC,CAAA;IACzC,MAAMC,gBAAgBf,MAAMY,OAAO,CAAC,IAAO,CAAA;YAAEI,eAAeX;QAAI,CAAA,GAAI;QAACA;KAAI;IAEzE,OAAO;QACL,gEAAgE;QAChED;QACA,gEAAgE;QAChEM;QACAC;QACAK,eAAeX;QACfU;QACAF;QACAL;QACAC,gBAAgBN,uBAAuBG,KAAKW,SAAS,GAAIR;IAC3D;AACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
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 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,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"}
|
|
@@ -51,6 +51,7 @@ const insertSheet = (tag, rule)=>{
|
|
|
51
51
|
// this allows to do checks with strict mode enabled as .useEffect() will be called with incremented IDs because
|
|
52
52
|
// of double render.
|
|
53
53
|
if (targetDocument) {
|
|
54
|
+
var _ref;
|
|
54
55
|
var _styleElement_textContent;
|
|
55
56
|
const providerElementSelector = `.${fluentProviderClassNames.root}.${styleTagId}`;
|
|
56
57
|
const providerElements = targetDocument.querySelectorAll(providerElementSelector);
|
|
@@ -68,11 +69,10 @@ const insertSheet = (tag, rule)=>{
|
|
|
68
69
|
return;
|
|
69
70
|
}
|
|
70
71
|
const styleElement = styleElements.item(0);
|
|
71
|
-
var _styleElement_textContent_length;
|
|
72
72
|
// Heads up!
|
|
73
73
|
//
|
|
74
74
|
// In SSR, we will have DOM upfront & style tags will have CSS rules defined in `.textContent`
|
|
75
|
-
const isSSR = ((
|
|
75
|
+
const isSSR = ((_ref = styleElement === null || styleElement === void 0 ? void 0 : (_styleElement_textContent = styleElement.textContent) === null || _styleElement_textContent === void 0 ? void 0 : _styleElement_textContent.length) !== null && _ref !== void 0 ? _ref : 0) > 0;
|
|
76
76
|
const elementsCount = isSSR ? 1 : 0;
|
|
77
77
|
if (providerElements.length > elementsCount) {
|
|
78
78
|
// eslint-disable-next-line no-console
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
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 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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"}
|
|
@@ -5,32 +5,32 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
function _export(target, all) {
|
|
6
6
|
for(var name in all)Object.defineProperty(target, name, {
|
|
7
7
|
enumerable: true,
|
|
8
|
-
get: all
|
|
8
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
9
9
|
});
|
|
10
10
|
}
|
|
11
11
|
_export(exports, {
|
|
12
|
-
FluentProvider
|
|
12
|
+
get FluentProvider () {
|
|
13
13
|
return _index.FluentProvider;
|
|
14
14
|
},
|
|
15
|
-
createCSSRuleFromTheme
|
|
15
|
+
get createCSSRuleFromTheme () {
|
|
16
16
|
return _index.createCSSRuleFromTheme;
|
|
17
17
|
},
|
|
18
|
-
fluentProviderClassNames
|
|
18
|
+
get fluentProviderClassNames () {
|
|
19
19
|
return _index.fluentProviderClassNames;
|
|
20
20
|
},
|
|
21
|
-
renderFluentProvider_unstable
|
|
21
|
+
get renderFluentProvider_unstable () {
|
|
22
22
|
return _index.renderFluentProvider_unstable;
|
|
23
23
|
},
|
|
24
|
-
useFluentProviderContextValues_unstable
|
|
24
|
+
get useFluentProviderContextValues_unstable () {
|
|
25
25
|
return _index.useFluentProviderContextValues_unstable;
|
|
26
26
|
},
|
|
27
|
-
useFluentProviderStyles_unstable
|
|
27
|
+
get useFluentProviderStyles_unstable () {
|
|
28
28
|
return _index.useFluentProviderStyles_unstable;
|
|
29
29
|
},
|
|
30
|
-
useFluentProviderThemeStyleTag
|
|
30
|
+
get useFluentProviderThemeStyleTag () {
|
|
31
31
|
return _index.useFluentProviderThemeStyleTag;
|
|
32
32
|
},
|
|
33
|
-
useFluentProvider_unstable
|
|
33
|
+
get useFluentProvider_unstable () {
|
|
34
34
|
return _index.useFluentProvider_unstable;
|
|
35
35
|
}
|
|
36
36
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/FluentProvider.ts"],"sourcesContent":["export type {\n FluentProviderContextValues,\n FluentProviderCustomStyleHooks,\n FluentProviderProps,\n FluentProviderSlots,\n FluentProviderState,\n} from './components/FluentProvider/index';\nexport {\n FluentProvider,\n createCSSRuleFromTheme,\n fluentProviderClassNames,\n renderFluentProvider_unstable,\n useFluentProviderContextValues_unstable,\n useFluentProviderStyles_unstable,\n useFluentProviderThemeStyleTag,\n useFluentProvider_unstable,\n} from './components/FluentProvider/index';\n"],"names":["FluentProvider","createCSSRuleFromTheme","fluentProviderClassNames","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag","useFluentProvider_unstable"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../src/FluentProvider.ts"],"sourcesContent":["export type {\n FluentProviderContextValues,\n FluentProviderCustomStyleHooks,\n FluentProviderProps,\n FluentProviderSlots,\n FluentProviderState,\n} from './components/FluentProvider/index';\nexport {\n FluentProvider,\n createCSSRuleFromTheme,\n fluentProviderClassNames,\n renderFluentProvider_unstable,\n useFluentProviderContextValues_unstable,\n useFluentProviderStyles_unstable,\n useFluentProviderThemeStyleTag,\n useFluentProvider_unstable,\n} from './components/FluentProvider/index';\n"],"names":["FluentProvider","createCSSRuleFromTheme","fluentProviderClassNames","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag","useFluentProvider_unstable"],"mappings":";;;;;;;;;;;;eAQEA,qBAAc;;;eACdC,6BAAsB;;;eACtBC,+BAAwB;;;eACxBC,oCAA6B;;;eAC7BC,8CAAuC;;;eACvCC,uCAAgC;;;eAChCC,qCAA8B;;;eAC9BC,iCAA0B;;;uBACrB,uCAAoC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/FluentProvider/FluentProvider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\nimport { renderFluentProvider_unstable } from './renderFluentProvider';\nimport { useFluentProvider_unstable } from './useFluentProvider';\nimport { useFluentProviderStyles_unstable } from './useFluentProviderStyles.styles';\nimport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nimport type { FluentProviderProps } from './FluentProvider.types';\n\nexport const FluentProvider: ForwardRefComponent<FluentProviderProps> = React.forwardRef((props, ref) => {\n const state = useFluentProvider_unstable(props, ref);\n useFluentProviderStyles_unstable(state);\n\n const contextValues = useFluentProviderContextValues_unstable(state);\n\n return renderFluentProvider_unstable(state, contextValues);\n});\n\nFluentProvider.displayName = 'FluentProvider';\n"],"names":["React","renderFluentProvider_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderContextValues_unstable","FluentProvider","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;sCAIe,4BAAyB;mCAC5B,yBAAsB;+CAChB,sCAAmC;gDAC5B,sCAAmC;AAGpF,MAAMK,iBAAAA,WAAAA,GAA2DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,YAAQP,6CAAAA,EAA2BK,OAAOC;QAChDL,+DAAAA,EAAiCM;IAEjC,MAAMC,oBAAgBN,uEAAAA,EAAwCK;IAE9D,WAAOR,mDAAAA,EAA8BQ,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/FluentProvider/FluentProvider.types.ts"],"sourcesContent":["/*\n IconDirectionContextValue is being imported as a leaf node import in order to prevent extra icons froms being\n downloaded when trying to use the FluentProvider.\n This issue has more context: https://github.com/microsoft/fluentui/issues/30909\n*/\nimport type { IconDirectionContextValue } from '@fluentui/react-icons/lib/providers';\nimport type {\n OverridesContextValue_unstable as OverridesContextValue,\n ProviderContextValue_unstable as ProviderContextValue,\n TooltipVisibilityContextValue_unstable as TooltipVisibilityContextValue,\n ThemeClassNameContextValue_unstable as ThemeClassNameContextValue,\n ThemeContextValue_unstable as ThemeContextValue,\n CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\n} from '@fluentui/react-shared-contexts';\nimport type { PartialTheme } from '@fluentui/react-theme';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type FluentProviderSlots = {\n root: Slot<'div'>;\n};\n\n// exported for callers to avoid referencing react-shared-context\n// and applying Partial<> when passing custom style hooks.\nexport type FluentProviderCustomStyleHooks = CustomStyleHooksContextValue;\n\nexport type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir'> & {\n /**\n * Passes styles applied to a component down to portals if enabled.\n * @default true\n */\n applyStylesToPortals?: boolean;\n\n /** Sets the hooks for custom styling components. */\n // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable?: FluentProviderCustomStyleHooks;\n\n /** Sets the direction of text & generated styles. */\n dir?: 'ltr' | 'rtl';\n\n /** Provides the document, can be undefined during SSR render. */\n targetDocument?: Document;\n\n /** Sets the theme used in a scope. */\n theme?: PartialTheme;\n\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable?: OverridesContextValue;\n};\n\nexport type FluentProviderState = ComponentState<FluentProviderSlots> &\n Pick<FluentProviderProps, 'targetDocument'> &\n Required<\n Pick<FluentProviderProps, 'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable'>\n > & {\n theme: ThemeContextValue;\n themeClassName: string;\n /**\n * Props used to render SSR theme variables style element\n */\n serverStyleProps: {\n /**\n * CSS rule containing CSS variables\n */\n cssRule: string;\n /**\n * Additional attributes applied to the style element\n */\n attributes: Record<string, string>;\n };\n };\n\nexport type FluentProviderContextValues = Pick<\n FluentProviderState,\n 'customStyleHooks_unstable' | 'theme' | 'overrides_unstable'\n> & {\n provider: ProviderContextValue;\n themeClassName: ThemeClassNameContextValue;\n textDirection: 'ltr' | 'rtl';\n iconDirection: IconDirectionContextValue;\n tooltip: TooltipVisibilityContextValue;\n};\n"],"names":[],"mappings":"AAAA;;;;AAIA,GAmEA,WASE"}
|
|
@@ -9,26 +9,49 @@ Object.defineProperty(exports, "createCSSRuleFromTheme", {
|
|
|
9
9
|
}
|
|
10
10
|
});
|
|
11
11
|
const CSS_ESCAPE_MAP = {
|
|
12
|
+
'\\': '\\5C ',
|
|
12
13
|
'<': '\\3C ',
|
|
13
|
-
'>': '\\3E '
|
|
14
|
+
'>': '\\3E ',
|
|
15
|
+
'{': '\\7B ',
|
|
16
|
+
'}': '\\7D ',
|
|
17
|
+
';': '\\3B '
|
|
14
18
|
};
|
|
19
|
+
const CSS_ESCAPE_PATTERN = /[\\<>{};]/g;
|
|
20
|
+
function escapeCharacter(character) {
|
|
21
|
+
return `\\${character.charCodeAt(0).toString(16).toUpperCase()} `;
|
|
22
|
+
}
|
|
23
|
+
function escapeSelector(value) {
|
|
24
|
+
// Consume whole backslash runs so escaping preserves their parity and does not retry overlapping suffixes.
|
|
25
|
+
return value.replace(/\\+[<{}]?|[<{}]/g, (match)=>{
|
|
26
|
+
const character = match[match.length - 1];
|
|
27
|
+
if (!'<{}'.includes(character)) {
|
|
28
|
+
return match;
|
|
29
|
+
}
|
|
30
|
+
const backslashes = match.length - 1;
|
|
31
|
+
return match.slice(0, backslashes - backslashes % 2) + escapeCharacter(character);
|
|
32
|
+
});
|
|
33
|
+
}
|
|
15
34
|
/**
|
|
16
|
-
* Escapes characters that could
|
|
35
|
+
* Escapes characters that could end the declaration, the rule or the surrounding <style> tag.
|
|
17
36
|
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
return value.replace(/[<>]/g, (match)=>CSS_ESCAPE_MAP[match]);
|
|
37
|
+
* Backslashes are escaped too, so a value cannot escape the declaration separator that follows it.
|
|
38
|
+
* Other characters, including quotes and parentheses, are kept as-is: theme values legitimately contain quoted
|
|
39
|
+
* font families and nested CSS functions such as `oklch(from var(--token) l c h / 0.5)`.
|
|
40
|
+
*/ function escapeThemeText(value) {
|
|
41
|
+
return value.replace(CSS_ESCAPE_PATTERN, (match)=>CSS_ESCAPE_MAP[match]);
|
|
24
42
|
}
|
|
25
43
|
function createCSSRuleFromTheme(selector, theme) {
|
|
26
|
-
const escapedSelector =
|
|
44
|
+
const escapedSelector = escapeSelector(selector);
|
|
27
45
|
if (theme) {
|
|
28
46
|
const cssVarsAsString = Object.keys(theme).reduce((cssVarRule, cssVar)=>{
|
|
29
|
-
|
|
47
|
+
const tokenValue = theme[cssVar];
|
|
48
|
+
// Skip unset values (e.g. `undefined` from a nested provider) so they don't shadow inherited tokens.
|
|
49
|
+
if (typeof tokenValue !== 'string' && (typeof tokenValue !== 'number' || !Number.isFinite(tokenValue))) {
|
|
50
|
+
return cssVarRule;
|
|
51
|
+
}
|
|
52
|
+
return `${cssVarRule}--${escapeThemeText(cssVar)}: ${escapeThemeText(String(tokenValue))}; `;
|
|
30
53
|
}, '');
|
|
31
|
-
return `${escapedSelector} { ${
|
|
54
|
+
return `${escapedSelector} { ${cssVarsAsString} }`;
|
|
32
55
|
}
|
|
33
56
|
return `${escapedSelector} {}`;
|
|
34
57
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/FluentProvider/createCSSRuleFromTheme.ts"],"sourcesContent":["import type { PartialTheme } from '@fluentui/react-theme';\n\nconst CSS_ESCAPE_MAP: Record<string, string> = {\n '\\\\': '\\\\5C ',\n '<': '\\\\3C ',\n '>': '\\\\3E ',\n '{': '\\\\7B ',\n '}': '\\\\7D ',\n ';': '\\\\3B ',\n};\nconst CSS_ESCAPE_PATTERN = /[\\\\<>{};]/g;\n\nfunction escapeCharacter(character: string): string {\n return `\\\\${character.charCodeAt(0).toString(16).toUpperCase()} `;\n}\n\nfunction escapeSelector(value: string): string {\n // Consume whole backslash runs so escaping preserves their parity and does not retry overlapping suffixes.\n return value.replace(/\\\\+[<{}]?|[<{}]/g, match => {\n const character = match[match.length - 1];\n if (!'<{}'.includes(character)) {\n return match;\n }\n\n const backslashes = match.length - 1;\n return match.slice(0, backslashes - (backslashes % 2)) + escapeCharacter(character);\n });\n}\n\n/**\n * Escapes characters that could end the declaration, the rule or the surrounding <style> tag.\n *\n * Backslashes are escaped too, so a value cannot escape the declaration separator that follows it.\n * Other characters, including quotes and parentheses, are kept as-is: theme values legitimately contain quoted\n * font families and nested CSS functions such as `oklch(from var(--token) l c h / 0.5)`.\n */\nfunction escapeThemeText(value: string): string {\n return value.replace(CSS_ESCAPE_PATTERN, match => CSS_ESCAPE_MAP[match]);\n}\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 const escapedSelector = escapeSelector(selector);\n\n if (theme) {\n const cssVarsAsString = (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n const tokenValue: unknown = theme[cssVar];\n // Skip unset values (e.g. `undefined` from a nested provider) so they don't shadow inherited tokens.\n if (typeof tokenValue !== 'string' && (typeof tokenValue !== 'number' || !Number.isFinite(tokenValue))) {\n return cssVarRule;\n }\n\n return `${cssVarRule}--${escapeThemeText(cssVar)}: ${escapeThemeText(String(tokenValue))}; `;\n }, '');\n\n return `${escapedSelector} { ${cssVarsAsString} }`;\n }\n\n return `${escapedSelector} {}`;\n}\n"],"names":["CSS_ESCAPE_MAP","CSS_ESCAPE_PATTERN","escapeCharacter","character","charCodeAt","toString","toUpperCase","escapeSelector","value","replace","match","length","includes","backslashes","slice","escapeThemeText","createCSSRuleFromTheme","selector","theme","escapedSelector","cssVarsAsString","Object","keys","reduce","cssVarRule","cssVar","tokenValue","Number","isFinite","String"],"mappings":";;;;;;;eA6CgBgB;;;AA3ChB,MAAMhB,iBAAyC;IAC7C,MAAM;IACN,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;IACL,KAAK;AACP;AACA,MAAMC,qBAAqB;AAE3B,SAASC,gBAAgBC,SAAiB;IACxC,OAAO,CAAC,EAAE,EAAEA,UAAUC,UAAU,CAAC,GAAGC,QAAQ,CAAC,IAAIC,WAAW,GAAG,CAAC,CAAC;AACnE;AAEA,SAASC,eAAeC,KAAa;IACnC,2GAA2G;IAC3G,OAAOA,MAAMC,OAAO,CAAC,oBAAoBC,CAAAA;QACvC,MAAMP,YAAYO,KAAK,CAACA,MAAMC,MAAM,GAAG,EAAE;QACzC,IAAI,CAAC,MAAMC,QAAQ,CAACT,YAAY;YAC9B,OAAOO;QACT;QAEA,MAAMG,cAAcH,MAAMC,MAAM,GAAG;QACnC,OAAOD,MAAMI,KAAK,CAAC,GAAGD,cAAeA,cAAc,KAAMX,gBAAgBC;IAC3E;AACF;AAEA;;;;;;CAMC,GACD,SAASY,gBAAgBP,KAAa;IACpC,OAAOA,MAAMC,OAAO,CAACR,oBAAoBS,CAAAA,QAASV,cAAc,CAACU,MAAM;AACzE;AAOO,gCAAgCO,QAAgB,EAAEC,KAA+B;IACtF,MAAMC,kBAAkBZ,eAAeU;IAEvC,IAAIC,OAAO;QACT,MAAME,kBAAmBC,OAAOC,IAAI,CAACJ,OAAkCK,MAAM,CAAC,CAACC,YAAYC;YACzF,MAAMC,aAAsBR,KAAK,CAACO,OAAO;YACzC,qGAAqG;YACrG,IAAI,OAAOC,eAAe,YAAa,CAAA,OAAOA,eAAe,YAAY,CAACC,OAAOC,QAAQ,CAACF,WAAAA,CAAU,EAAI;gBACtG,OAAOF;YACT;YAEA,OAAO,GAAGA,WAAW,EAAE,EAAET,gBAAgBU,QAAQ,EAAE,EAAEV,gBAAgBc,OAAOH,aAAa,EAAE,CAAC;QAC9F,GAAG;QAEH,OAAO,GAAGP,gBAAgB,GAAG,EAAEC,gBAAgB,EAAE,CAAC;IACpD;IAEA,OAAO,GAAGD,gBAAgB,GAAG,CAAC;AAChC"}
|
|
@@ -5,32 +5,32 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
function _export(target, all) {
|
|
6
6
|
for(var name in all)Object.defineProperty(target, name, {
|
|
7
7
|
enumerable: true,
|
|
8
|
-
get: all
|
|
8
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
9
9
|
});
|
|
10
10
|
}
|
|
11
11
|
_export(exports, {
|
|
12
|
-
FluentProvider
|
|
12
|
+
get FluentProvider () {
|
|
13
13
|
return _FluentProvider.FluentProvider;
|
|
14
14
|
},
|
|
15
|
-
createCSSRuleFromTheme
|
|
15
|
+
get createCSSRuleFromTheme () {
|
|
16
16
|
return _createCSSRuleFromTheme.createCSSRuleFromTheme;
|
|
17
17
|
},
|
|
18
|
-
fluentProviderClassNames
|
|
18
|
+
get fluentProviderClassNames () {
|
|
19
19
|
return _useFluentProviderStylesstyles.fluentProviderClassNames;
|
|
20
20
|
},
|
|
21
|
-
renderFluentProvider_unstable
|
|
21
|
+
get renderFluentProvider_unstable () {
|
|
22
22
|
return _renderFluentProvider.renderFluentProvider_unstable;
|
|
23
23
|
},
|
|
24
|
-
useFluentProviderContextValues_unstable
|
|
24
|
+
get useFluentProviderContextValues_unstable () {
|
|
25
25
|
return _useFluentProviderContextValues.useFluentProviderContextValues_unstable;
|
|
26
26
|
},
|
|
27
|
-
useFluentProviderStyles_unstable
|
|
27
|
+
get useFluentProviderStyles_unstable () {
|
|
28
28
|
return _useFluentProviderStylesstyles.useFluentProviderStyles_unstable;
|
|
29
29
|
},
|
|
30
|
-
useFluentProviderThemeStyleTag
|
|
30
|
+
get useFluentProviderThemeStyleTag () {
|
|
31
31
|
return _useFluentProviderThemeStyleTag.useFluentProviderThemeStyleTag;
|
|
32
32
|
},
|
|
33
|
-
useFluentProvider_unstable
|
|
33
|
+
get useFluentProvider_unstable () {
|
|
34
34
|
return _useFluentProvider.useFluentProvider_unstable;
|
|
35
35
|
}
|
|
36
36
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/FluentProvider/index.ts"],"sourcesContent":["export { createCSSRuleFromTheme } from './createCSSRuleFromTheme';\nexport { FluentProvider } from './FluentProvider';\nexport type {\n FluentProviderContextValues,\n FluentProviderCustomStyleHooks,\n FluentProviderProps,\n FluentProviderSlots,\n FluentProviderState,\n} from './FluentProvider.types';\nexport { renderFluentProvider_unstable } from './renderFluentProvider';\nexport { useFluentProvider_unstable } from './useFluentProvider';\nexport { fluentProviderClassNames, useFluentProviderStyles_unstable } from './useFluentProviderStyles.styles';\nexport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nexport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\n"],"names":["createCSSRuleFromTheme","FluentProvider","renderFluentProvider_unstable","useFluentProvider_unstable","fluentProviderClassNames","useFluentProviderStyles_unstable","useFluentProviderContextValues_unstable","useFluentProviderThemeStyleTag"],"mappings":";;;;;;;;;;;;eACSC,8BAAc;;;eADdD,8CAAsB;;;eAWtBI,uDAAwB;;;eAFxBF,mDAA6B;;;eAG7BI,uEAAuC;;;eADbD,+DAAgC;;;eAE1DE,8DAA8B;;;eAH9BJ,6CAA0B;;;wCAVI,8BAA2B;gCACnC,sBAAmB;sCAQJ,4BAAyB;mCAC5B,yBAAsB;+CACU,sCAAmC;gDACtD,sCAAmC;gDAC5C,sCAAmC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
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"}
|
|
@@ -20,6 +20,7 @@ const _useFluentProviderThemeStyleTag = require("./useFluentProviderThemeStyleTa
|
|
|
20
20
|
const DEFAULT_STYLE_HOOKS = {};
|
|
21
21
|
const DEFAULT_RENDERER_ATTRIBUTES = {};
|
|
22
22
|
const useFluentProvider_unstable = (props, ref)=>{
|
|
23
|
+
var _renderer_styleElementAttributes;
|
|
23
24
|
const parentContext = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
24
25
|
const parentTheme = useTheme();
|
|
25
26
|
const parentOverrides = (0, _reactsharedcontexts.useOverrides_unstable)();
|
|
@@ -33,7 +34,6 @@ const useFluentProvider_unstable = (props, ref)=>{
|
|
|
33
34
|
const mergedOverrides = shallowMerge(parentOverrides, overrides);
|
|
34
35
|
const mergedCustomStyleHooks = shallowMerge(parentCustomStyleHooks, customStyleHooks_unstable);
|
|
35
36
|
const renderer = (0, _react.useRenderer_unstable)();
|
|
36
|
-
var _renderer_styleElementAttributes;
|
|
37
37
|
const { styleTagId, rule } = (0, _useFluentProviderThemeStyleTag.useFluentProviderThemeStyleTag)({
|
|
38
38
|
theme: mergedTheme,
|
|
39
39
|
targetDocument,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProvider.ts"],"sourcesContent":["'use client';\n\nimport { useRenderer_unstable } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n ThemeContext_unstable as ThemeContext,\n useFluent_unstable as useFluent,\n useOverrides_unstable as useOverrides,\n CustomStyleHooksContext_unstable as CustomStyleHooksContext,\n} from '@fluentui/react-shared-contexts';\nimport type {\n CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\n ThemeContextValue_unstable as ThemeContextValue,\n} from '@fluentui/react-shared-contexts';\nimport { getIntrinsicElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n// Meomizing empty objects to avoid unnecessary rerenders.\nconst DEFAULT_STYLE_HOOKS = {};\nconst DEFAULT_RENDERER_ATTRIBUTES = {};\n\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */\nexport const useFluentProvider_unstable = (\n props: FluentProviderProps,\n ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n const parentContext = useFluent();\n const parentTheme = useTheme();\n const parentOverrides = useOverrides();\n const parentCustomStyleHooks: CustomStyleHooksContextValue =\n React.useContext(CustomStyleHooksContext) || DEFAULT_STYLE_HOOKS;\n\n /**\n * TODO: add merge functions to \"dir\" merge,\n * nesting providers with the same \"dir\" should not add additional attributes to DOM\n * see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93\n */\n const {\n applyStylesToPortals = true,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable,\n dir = parentContext.dir,\n targetDocument = parentContext.targetDocument,\n theme,\n overrides_unstable: overrides = {},\n } = props;\n\n const mergedTheme = shallowMerge(parentTheme, theme);\n const mergedOverrides = shallowMerge(parentOverrides, overrides);\n\n const mergedCustomStyleHooks = shallowMerge(\n parentCustomStyleHooks,\n customStyleHooks_unstable,\n ) as CustomStyleHooksContextValue;\n\n const renderer = useRenderer_unstable();\n const { styleTagId, rule } = useFluentProviderThemeStyleTag({\n theme: mergedTheme,\n targetDocument,\n rendererAttributes: renderer.styleElementAttributes ?? DEFAULT_RENDERER_ATTRIBUTES,\n });\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useEffect(() => {\n if (mergedTheme === undefined) {\n // eslint-disable-next-line no-console\n console.warn(\n [\n '@fluentui/react-provider: FluentProvider does not have your \"theme\" defined.',\n \"Make sure that your top-level FluentProvider has set a `theme` prop or you're setting the theme in your child FluentProvider.\",\n ].join(' '),\n );\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n }\n\n return {\n applyStylesToPortals,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable: mergedCustomStyleHooks,\n dir,\n targetDocument,\n theme: mergedTheme,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable: mergedOverrides,\n themeClassName: styleTagId,\n\n components: {\n root: 'div',\n },\n\n root: slot.always(\n getIntrinsicElementProps('div', {\n ...props,\n dir,\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>({ targetDocument })) as React.Ref<HTMLDivElement>,\n }),\n { elementType: 'div' },\n ),\n\n serverStyleProps: {\n cssRule: rule,\n attributes: {\n ...renderer.styleElementAttributes,\n id: styleTagId,\n },\n },\n };\n};\n\nfunction shallowMerge<T>(a: T, b: T): T {\n // Merge impacts perf: we should like to avoid it if it's possible\n if (a && b) {\n return { ...a, ...b };\n }\n\n if (a) {\n return a;\n }\n\n return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n return React.useContext(ThemeContext);\n}\n"],"names":["useRenderer_unstable","useFocusVisible","ThemeContext_unstable","ThemeContext","useFluent_unstable","useFluent","useOverrides_unstable","useOverrides","CustomStyleHooksContext_unstable","CustomStyleHooksContext","getIntrinsicElementProps","useMergedRefs","slot","React","useFluentProviderThemeStyleTag","DEFAULT_STYLE_HOOKS","DEFAULT_RENDERER_ATTRIBUTES","useFluentProvider_unstable","props","ref","renderer","parentContext","parentTheme","useTheme","parentOverrides","parentCustomStyleHooks","useContext","applyStylesToPortals","customStyleHooks_unstable","dir","targetDocument","theme","overrides_unstable","overrides","mergedTheme","shallowMerge","mergedOverrides","mergedCustomStyleHooks","styleTagId","rule","rendererAttributes","styleElementAttributes","process","env","NODE_ENV","useEffect","undefined","console","warn","join","themeClassName","components","root","always","elementType","serverStyleProps","cssRule","attributes","id","a","b"],"mappings":"AAAA;;;;;+BAiCaiB;;;;;;;uBA/BwB,iBAAiB;8BACtB,0BAA0B;qCAMnD,kCAAkC;gCAKqB,4BAA4B;kEACnE,QAAQ;gDAEgB,sCAAmC;AAGlF,0DAA0D;AAC1D,MAAMF,sBAAsB,CAAC;AAC7B,MAAMC,8BAA8B,CAAC;AAW9B,mCAAmC,CACxCE,OACAC;QAmCsBC;IAjCtB,MAAMC,oBAAgBhB,uCAAAA;IACtB,MAAMiB,cAAcC;IACpB,MAAMC,sBAAkBjB,0CAAAA;IACxB,MAAMkB,yBACJZ,QAAMa,UAAU,CAACjB,qDAAAA,KAA4BM;IAE/C;;;;GAIC,GACD,MAAM,EACJY,uBAAuB,IAAI,EAC3B,AACAC,yBAAyB,EACzBC,MAAMR,cAAcQ,GAAG,EACvBC,YAHgE,KAG/CT,cAAcS,cAAc,EAC7CC,KAAK,EACLC,oBAAoBC,YAAY,CAAC,CAAC,EACnC,GAAGf;IAEJ,MAAMgB,cAAcC,aAAab,aAAaS;IAC9C,MAAMK,kBAAkBD,aAAaX,iBAAiBS;IAEtD,MAAMI,yBAAyBF,aAC7BV,wBACAG;IAGF,MAAMR,eAAWpB,2BAAAA;IACjB,MAAM,EAAEsC,UAAU,EAAEC,IAAI,EAAE,OAAGzB,8DAAAA,EAA+B;QAC1DiB,OAAOG;QACPJ;QACAU,kBAAkB,EAAA,CAAEpB,mCAAAA,SAASqB,sBAAAA,AAAsB,MAAA,QAA/BrB,qCAAAA,KAAAA,IAAAA,mCAAmCJ;IACzD;IAEA,IAAI0B,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sDAAsD;QACtD/B,QAAMgC,SAAS,CAAC;YACd,IAAIX,gBAAgBY,WAAW;gBAC7B,sCAAsC;gBACtCC,QAAQC,IAAI,CACV;oBACE;oBACA;iBACD,CAACC,IAAI,CAAC;YAEX;QACA,uDAAuD;QACzD,GAAG,EAAE;IACP;IAEA,OAAO;QACLtB;QACA,gEAAgE;QAChEC,2BAA2BS;QAC3BR;QACAC;QACAC,OAAOG;QACP,gEAAgE;QAChEF,oBAAoBI;QACpBc,gBAAgBZ;QAEhBa,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMxC,oBAAAA,CAAKyC,MAAM,KACf3C,wCAAAA,EAAyB,OAAO;YAC9B,GAAGQ,KAAK;YACRW;YACA,SAAS;YACT,4EAA4E;YAC5E,4FAA4F;YAC5FV,SAAKR,6BAAAA,EAAcQ,SAAKlB,6BAAAA,EAAgC;gBAAE6B;YAAe;QAC3E,IACA;YAAEwB,aAAa;QAAM;QAGvBC,kBAAkB;YAChBC,SAASjB;YACTkB,YAAY;gBACV,GAAGrC,SAASqB,sBAAsB;gBAClCiB,IAAIpB;YACN;QACF;IACF;AACF,EAAE;AAEF,SAASH,aAAgBwB,CAAI,EAAEC,CAAI;IACjC,kEAAkE;IAClE,IAAID,KAAKC,GAAG;QACV,OAAO;YAAE,GAAGD,CAAC;YAAE,GAAGC,CAAC;QAAC;IACtB;IAEA,IAAID,GAAG;QACL,OAAOA;IACT;IAEA,OAAOC;AACT;AAEA,SAASrC;IACP,OAAOV,QAAMa,UAAU,CAACvB,0CAAAA;AAC1B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
1
|
+
{"version":3,"sources":["../../../src/components/FluentProvider/useFluentProviderContextValues.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n const {\n applyStylesToPortals,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable,\n dir,\n root,\n targetDocument,\n theme,\n themeClassName,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable,\n } = state;\n\n const provider = React.useMemo(() => ({ dir, targetDocument }), [dir, targetDocument]);\n // \"Tooltip\" component mutates an object in this context, instance should be stable\n const [tooltip] = React.useState(() => ({}));\n const iconDirection = React.useMemo(() => ({ textDirection: dir }), [dir]);\n\n return {\n // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable,\n provider,\n textDirection: dir,\n iconDirection,\n tooltip,\n theme,\n themeClassName: applyStylesToPortals ? root.className! : themeClassName,\n };\n}\n"],"names":["React","useFluentProviderContextValues_unstable","state","applyStylesToPortals","customStyleHooks_unstable","dir","root","targetDocument","theme","themeClassName","overrides_unstable","provider","useMemo","tooltip","useState","iconDirection","textDirection","className"],"mappings":"AAAA;;;;;+BAKgBC;;;;;;;iEAHO,QAAQ;AAGxB,iDAAiDC,KAA0B;IAChF,MAAM,EACJC,oBAAoB,EACpB,AACAC,yBAAyB,EACzBC,GAAG,EACHC,IAAI,EACJC,cAAc,EACdC,KAAK,EACLC,GANgE,WAMlD,EACd,AACAC,kBAAkB,EACnB,GAAGR,yCAF8D;IAIlE,MAAMS,WAAWX,OAAMY,OAAO,CAAC,IAAO,CAAA;YAAEP;YAAKE;SAAe,CAAA,EAAI;QAACF;QAAKE;KAAe;IACrF,mFAAmF;IACnF,MAAM,CAACM,QAAQ,GAAGb,OAAMc,QAAQ,CAAC,IAAO,CAAA,EAAC,CAAA;IACzC,MAAMC,gBAAgBf,OAAMY,OAAO,CAAC,IAAO,CAAA;YAAEI,eAAeX;QAAI,CAAA,GAAI;QAACA;KAAI;IAEzE,OAAO;QACL,gEAAgE;QAChED;QACA,gEAAgE;QAChEM;QACAC;QACAK,eAAeX;QACfU;QACAF;QACAL;QACAC,gBAAgBN,uBAAuBG,KAAKW,SAAS,GAAIR;IAC3D;AACF"}
|
|
@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
function _export(target, all) {
|
|
7
7
|
for(var name in all)Object.defineProperty(target, name, {
|
|
8
8
|
enumerable: true,
|
|
9
|
-
get: all
|
|
9
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
10
10
|
});
|
|
11
11
|
}
|
|
12
12
|
_export(exports, {
|
|
13
|
-
fluentProviderClassNames
|
|
13
|
+
get fluentProviderClassNames () {
|
|
14
14
|
return fluentProviderClassNames;
|
|
15
15
|
},
|
|
16
|
-
useFluentProviderStyles_unstable
|
|
16
|
+
get useFluentProviderStyles_unstable () {
|
|
17
17
|
return useFluentProviderStyles_unstable;
|
|
18
18
|
}
|
|
19
19
|
});
|
|
@@ -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 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;;;;;;;;;;;;
|
|
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 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;;;;;;;;;;;;QAICK,wBAAwB;;;QAWiBW,gCAAgC;;;;sBAd7C,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,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"}
|
|
@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
function _export(target, all) {
|
|
7
7
|
for(var name in all)Object.defineProperty(target, name, {
|
|
8
8
|
enumerable: true,
|
|
9
|
-
get: all
|
|
9
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
10
10
|
});
|
|
11
11
|
}
|
|
12
12
|
_export(exports, {
|
|
13
|
-
fluentProviderClassNames
|
|
13
|
+
get fluentProviderClassNames () {
|
|
14
14
|
return fluentProviderClassNames;
|
|
15
15
|
},
|
|
16
|
-
useFluentProviderStyles_unstable
|
|
16
|
+
get useFluentProviderStyles_unstable () {
|
|
17
17
|
return useFluentProviderStyles_unstable;
|
|
18
18
|
}
|
|
19
19
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
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 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;;;;;;;;;;;;QAQaK;;;;eAcAS;;;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,yCAAyC,CAACE;IAC/C,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"}
|
|
@@ -58,6 +58,7 @@ const useFluentProviderThemeStyleTag = (options)=>{
|
|
|
58
58
|
// this allows to do checks with strict mode enabled as .useEffect() will be called with incremented IDs because
|
|
59
59
|
// of double render.
|
|
60
60
|
if (targetDocument) {
|
|
61
|
+
var _ref;
|
|
61
62
|
var _styleElement_textContent;
|
|
62
63
|
const providerElementSelector = `.${_useFluentProviderStylesstyles.fluentProviderClassNames.root}.${styleTagId}`;
|
|
63
64
|
const providerElements = targetDocument.querySelectorAll(providerElementSelector);
|
|
@@ -75,11 +76,10 @@ const useFluentProviderThemeStyleTag = (options)=>{
|
|
|
75
76
|
return;
|
|
76
77
|
}
|
|
77
78
|
const styleElement = styleElements.item(0);
|
|
78
|
-
var _styleElement_textContent_length;
|
|
79
79
|
// Heads up!
|
|
80
80
|
//
|
|
81
81
|
// In SSR, we will have DOM upfront & style tags will have CSS rules defined in `.textContent`
|
|
82
|
-
const isSSR = ((
|
|
82
|
+
const isSSR = ((_ref = styleElement === null || styleElement === void 0 ? void 0 : (_styleElement_textContent = styleElement.textContent) === null || _styleElement_textContent === void 0 ? void 0 : _styleElement_textContent.length) !== null && _ref !== void 0 ? _ref : 0) > 0;
|
|
83
83
|
const elementsCount = isSSR ? 1 : 0;
|
|
84
84
|
if (providerElements.length > elementsCount) {
|
|
85
85
|
// eslint-disable-next-line no-console
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["
|
|
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 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/lib-commonjs/index.cjs
CHANGED
|
@@ -5,32 +5,32 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
function _export(target, all) {
|
|
6
6
|
for(var name in all)Object.defineProperty(target, name, {
|
|
7
7
|
enumerable: true,
|
|
8
|
-
get: all
|
|
8
|
+
get: Object.getOwnPropertyDescriptor(all, name).get
|
|
9
9
|
});
|
|
10
10
|
}
|
|
11
11
|
_export(exports, {
|
|
12
|
-
FluentProvider
|
|
12
|
+
get FluentProvider () {
|
|
13
13
|
return _FluentProvider.FluentProvider;
|
|
14
14
|
},
|
|
15
|
-
createCSSRuleFromTheme
|
|
15
|
+
get createCSSRuleFromTheme () {
|
|
16
16
|
return _FluentProvider.createCSSRuleFromTheme;
|
|
17
17
|
},
|
|
18
|
-
fluentProviderClassNames
|
|
18
|
+
get fluentProviderClassNames () {
|
|
19
19
|
return _FluentProvider.fluentProviderClassNames;
|
|
20
20
|
},
|
|
21
|
-
renderFluentProvider_unstable
|
|
21
|
+
get renderFluentProvider_unstable () {
|
|
22
22
|
return _FluentProvider.renderFluentProvider_unstable;
|
|
23
23
|
},
|
|
24
|
-
useFluentProviderContextValues_unstable
|
|
24
|
+
get useFluentProviderContextValues_unstable () {
|
|
25
25
|
return _FluentProvider.useFluentProviderContextValues_unstable;
|
|
26
26
|
},
|
|
27
|
-
useFluentProviderStyles_unstable
|
|
27
|
+
get useFluentProviderStyles_unstable () {
|
|
28
28
|
return _FluentProvider.useFluentProviderStyles_unstable;
|
|
29
29
|
},
|
|
30
|
-
useFluentProviderThemeStyleTag
|
|
30
|
+
get useFluentProviderThemeStyleTag () {
|
|
31
31
|
return _FluentProvider.useFluentProviderThemeStyleTag;
|
|
32
32
|
},
|
|
33
|
-
useFluentProvider_unstable
|
|
33
|
+
get useFluentProvider_unstable () {
|
|
34
34
|
return _FluentProvider.useFluentProvider_unstable;
|
|
35
35
|
}
|
|
36
36
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/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":"
|
|
1
|
+
{"version":3,"sources":["../src/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":";;;;;;;;;;;;eAGEE,8BAAc;;;eAFdF,sCAAsB;;;eACtBC,wCAAwB;;;eAExBE,6CAA6B;;;eAC7BC,uDAAuC;;;eAEvCE,gDAAgC;;;eAChCC,8CAA8B;;;eAF9BF,0CAA0B;;;gCAGrB,sBAAmB"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-provider",
|
|
3
|
-
"version": "9.22.
|
|
3
|
+
"version": "9.22.23",
|
|
4
4
|
"description": "Fluent UI React provider component",
|
|
5
5
|
"main": "lib-commonjs/index.cjs",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -13,11 +13,11 @@
|
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"@fluentui/react-icons": "^2.0.245",
|
|
16
|
-
"@fluentui/react-jsx-runtime": "^9.4.
|
|
16
|
+
"@fluentui/react-jsx-runtime": "^9.4.7",
|
|
17
17
|
"@fluentui/react-shared-contexts": "^9.26.4",
|
|
18
|
-
"@fluentui/react-tabster": "^9.26.
|
|
18
|
+
"@fluentui/react-tabster": "^9.26.19",
|
|
19
19
|
"@fluentui/react-theme": "^9.2.2",
|
|
20
|
-
"@fluentui/react-utilities": "^9.
|
|
20
|
+
"@fluentui/react-utilities": "^9.27.0",
|
|
21
21
|
"@griffel/core": "^1.16.0",
|
|
22
22
|
"@griffel/react": "^1.5.32",
|
|
23
23
|
"@swc/helpers": "^0.5.1"
|