@fluentui/react-provider 9.7.21 → 9.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +85 -1
- package/CHANGELOG.md +29 -2
- package/dist/index.d.ts +4 -0
- package/lib/components/FluentProvider/FluentProvider.js.map +1 -1
- package/lib/components/FluentProvider/FluentProvider.types.js.map +1 -1
- package/lib/components/FluentProvider/renderFluentProvider.js +40 -24
- package/lib/components/FluentProvider/renderFluentProvider.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProvider.js +3 -3
- package/lib/components/FluentProvider/useFluentProvider.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProviderContextValues.js +9 -3
- package/lib/components/FluentProvider/useFluentProviderContextValues.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js +3 -2
- package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
- package/lib-commonjs/FluentProvider.js +2 -2
- package/lib-commonjs/FluentProvider.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/FluentProvider.js +7 -5
- package/lib-commonjs/components/FluentProvider/FluentProvider.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/index.js +8 -8
- package/lib-commonjs/components/FluentProvider/index.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/renderFluentProvider.js +47 -29
- package/lib-commonjs/components/FluentProvider/renderFluentProvider.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProvider.js +16 -14
- package/lib-commonjs/components/FluentProvider/useFluentProvider.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.js +12 -4
- package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.styles.js +7 -3
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.styles.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js +13 -10
- package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
- package/lib-commonjs/index.js +22 -8
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +12 -11
package/CHANGELOG.json
CHANGED
@@ -2,7 +2,91 @@
|
|
2
2
|
"name": "@fluentui/react-provider",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
5
|
+
"date": "Tue, 05 Sep 2023 13:23:05 GMT",
|
6
|
+
"tag": "@fluentui/react-provider_v9.8.1",
|
7
|
+
"version": "9.8.1",
|
8
|
+
"comments": {
|
9
|
+
"patch": [
|
10
|
+
{
|
11
|
+
"author": "bernardo.sunderhus@gmail.com",
|
12
|
+
"package": "@fluentui/react-provider",
|
13
|
+
"commit": "eea6d93a62249ba4fba3347fb291c67ee1a3fb24",
|
14
|
+
"comment": "chore: migrate package to use JSX importSource"
|
15
|
+
},
|
16
|
+
{
|
17
|
+
"author": "bernardo.sunderhus@gmail.com",
|
18
|
+
"package": "@fluentui/react-provider",
|
19
|
+
"commit": "b93c2ac22355b6cb6f33dd509c6cd9c21f4fffc8",
|
20
|
+
"comment": "bumps @swc/helpers version to 0.5.1"
|
21
|
+
},
|
22
|
+
{
|
23
|
+
"author": "beachball",
|
24
|
+
"package": "@fluentui/react-provider",
|
25
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.7.3",
|
26
|
+
"commit": "0bf811dbcaaa6b78743537d142fe4d348b457045"
|
27
|
+
},
|
28
|
+
{
|
29
|
+
"author": "beachball",
|
30
|
+
"package": "@fluentui/react-provider",
|
31
|
+
"comment": "Bump @fluentui/react-tabster to v9.12.6",
|
32
|
+
"commit": "0bf811dbcaaa6b78743537d142fe4d348b457045"
|
33
|
+
},
|
34
|
+
{
|
35
|
+
"author": "beachball",
|
36
|
+
"package": "@fluentui/react-provider",
|
37
|
+
"comment": "Bump @fluentui/react-theme to v9.1.12",
|
38
|
+
"commit": "0bf811dbcaaa6b78743537d142fe4d348b457045"
|
39
|
+
},
|
40
|
+
{
|
41
|
+
"author": "beachball",
|
42
|
+
"package": "@fluentui/react-provider",
|
43
|
+
"comment": "Bump @fluentui/react-utilities to v9.13.1",
|
44
|
+
"commit": "0bf811dbcaaa6b78743537d142fe4d348b457045"
|
45
|
+
},
|
46
|
+
{
|
47
|
+
"author": "beachball",
|
48
|
+
"package": "@fluentui/react-provider",
|
49
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.4",
|
50
|
+
"commit": "0bf811dbcaaa6b78743537d142fe4d348b457045"
|
51
|
+
}
|
52
|
+
]
|
53
|
+
}
|
54
|
+
},
|
55
|
+
{
|
56
|
+
"date": "Tue, 29 Aug 2023 12:57:35 GMT",
|
57
|
+
"tag": "@fluentui/react-provider_v9.8.0",
|
58
|
+
"version": "9.8.0",
|
59
|
+
"comments": {
|
60
|
+
"minor": [
|
61
|
+
{
|
62
|
+
"author": "ololubek@microsoft.com",
|
63
|
+
"package": "@fluentui/react-provider",
|
64
|
+
"commit": "ecaa08385bb0e25eafe87e3fb4424cb9139eea2d",
|
65
|
+
"comment": "feat: Add IconDirectionProvider to FluentProvider"
|
66
|
+
},
|
67
|
+
{
|
68
|
+
"author": "beachball",
|
69
|
+
"package": "@fluentui/react-provider",
|
70
|
+
"comment": "Bump @fluentui/react-tabster to v9.12.5",
|
71
|
+
"commit": "f40ca42c8392904750bf1ef24826d273d1a5b4d5"
|
72
|
+
},
|
73
|
+
{
|
74
|
+
"author": "beachball",
|
75
|
+
"package": "@fluentui/react-provider",
|
76
|
+
"comment": "Bump @fluentui/react-utilities to v9.13.0",
|
77
|
+
"commit": "f40ca42c8392904750bf1ef24826d273d1a5b4d5"
|
78
|
+
},
|
79
|
+
{
|
80
|
+
"author": "beachball",
|
81
|
+
"package": "@fluentui/react-provider",
|
82
|
+
"comment": "Bump @fluentui/react-jsx-runtime to v9.0.3",
|
83
|
+
"commit": "f40ca42c8392904750bf1ef24826d273d1a5b4d5"
|
84
|
+
}
|
85
|
+
]
|
86
|
+
}
|
87
|
+
},
|
88
|
+
{
|
89
|
+
"date": "Thu, 24 Aug 2023 10:26:35 GMT",
|
6
90
|
"tag": "@fluentui/react-provider_v9.7.21",
|
7
91
|
"version": "9.7.21",
|
8
92
|
"comments": {
|
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,39 @@
|
|
1
1
|
# Change Log - @fluentui/react-provider
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Tue, 05 Sep 2023 13:23:05 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.8.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.8.1)
|
8
|
+
|
9
|
+
Tue, 05 Sep 2023 13:23:05 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.8.0..@fluentui/react-provider_v9.8.1)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- chore: migrate package to use JSX importSource ([PR #28959](https://github.com/microsoft/fluentui/pull/28959) by bernardo.sunderhus@gmail.com)
|
15
|
+
- bumps @swc/helpers version to 0.5.1 ([PR #28989](https://github.com/microsoft/fluentui/pull/28989) by bernardo.sunderhus@gmail.com)
|
16
|
+
- Bump @fluentui/react-shared-contexts to v9.7.3 ([PR #27840](https://github.com/microsoft/fluentui/pull/27840) by beachball)
|
17
|
+
- Bump @fluentui/react-tabster to v9.12.6 ([PR #27840](https://github.com/microsoft/fluentui/pull/27840) by beachball)
|
18
|
+
- Bump @fluentui/react-theme to v9.1.12 ([PR #27840](https://github.com/microsoft/fluentui/pull/27840) by beachball)
|
19
|
+
- Bump @fluentui/react-utilities to v9.13.1 ([PR #27840](https://github.com/microsoft/fluentui/pull/27840) by beachball)
|
20
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.4 ([PR #27840](https://github.com/microsoft/fluentui/pull/27840) by beachball)
|
21
|
+
|
22
|
+
## [9.8.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.8.0)
|
23
|
+
|
24
|
+
Tue, 29 Aug 2023 12:57:35 GMT
|
25
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.7.21..@fluentui/react-provider_v9.8.0)
|
26
|
+
|
27
|
+
### Minor changes
|
28
|
+
|
29
|
+
- feat: Add IconDirectionProvider to FluentProvider ([PR #28803](https://github.com/microsoft/fluentui/pull/28803) by ololubek@microsoft.com)
|
30
|
+
- Bump @fluentui/react-tabster to v9.12.5 ([PR #29005](https://github.com/microsoft/fluentui/pull/29005) by beachball)
|
31
|
+
- Bump @fluentui/react-utilities to v9.13.0 ([PR #29005](https://github.com/microsoft/fluentui/pull/29005) by beachball)
|
32
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.3 ([PR #29005](https://github.com/microsoft/fluentui/pull/29005) by beachball)
|
33
|
+
|
7
34
|
## [9.7.21](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.7.21)
|
8
35
|
|
9
|
-
Thu, 24 Aug 2023 10:
|
36
|
+
Thu, 24 Aug 2023 10:26:35 GMT
|
10
37
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.7.20..@fluentui/react-provider_v9.7.21)
|
11
38
|
|
12
39
|
### Patches
|
package/dist/index.d.ts
CHANGED
@@ -1,6 +1,9 @@
|
|
1
|
+
/// <reference types="react" />
|
2
|
+
|
1
3
|
import { ComponentProps } from '@fluentui/react-utilities';
|
2
4
|
import type { ComponentState } from '@fluentui/react-utilities';
|
3
5
|
import type { CustomStyleHooksContextValue_unstable } from '@fluentui/react-shared-contexts';
|
6
|
+
import type { IconDirectionContextValue } from '@fluentui/react-icons';
|
4
7
|
import { OverridesContextValue_unstable } from '@fluentui/react-shared-contexts';
|
5
8
|
import type { PartialTheme } from '@fluentui/react-theme';
|
6
9
|
import type { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts';
|
@@ -116,6 +119,7 @@ export declare type FluentProviderContextValues = Pick<FluentProviderState, 'cus
|
|
116
119
|
provider: ProviderContextValue_unstable;
|
117
120
|
themeClassName: ThemeClassNameContextValue_unstable;
|
118
121
|
textDirection: 'ltr' | 'rtl';
|
122
|
+
iconDirection: IconDirectionContextValue;
|
119
123
|
tooltip: TooltipVisibilityContextValue_unstable;
|
120
124
|
};
|
121
125
|
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["FluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\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 = React.forwardRef<HTMLElement, FluentProviderProps>((props, ref) => {\n const state = useFluentProvider_unstable(props, ref);\n useFluentProviderStyles_unstable(state);\n\n const contextValues = useFluentProviderContextValues_unstable(state);\n\n return renderFluentProvider_unstable(state, contextValues);\n});\n\nFluentProvider.displayName = 'FluentProvider';\n"],"names":["React","renderFluentProvider_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderContextValues_unstable","FluentProvider","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,gCAAgC,QAAQ,mCAAmC;AACpF,SAASC,uCAAuC,QAAQ,mCAAmC;AAG3F,OAAO,MAAMC,+BAAiBL,MAAMM,UAAU,CAAmC,CAACC,OAAOC
|
1
|
+
{"version":3,"sources":["FluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\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 = React.forwardRef<HTMLElement, FluentProviderProps>((props, ref) => {\n const state = useFluentProvider_unstable(props, ref);\n useFluentProviderStyles_unstable(state);\n\n const contextValues = useFluentProviderContextValues_unstable(state);\n\n return renderFluentProvider_unstable(state, contextValues);\n});\n\nFluentProvider.displayName = 'FluentProvider';\n"],"names":["React","renderFluentProvider_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderContextValues_unstable","FluentProvider","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,gCAAgC,QAAQ,mCAAmC;AACpF,SAASC,uCAAuC,QAAQ,mCAAmC;AAG3F,OAAO,MAAMC,+BAAiBL,MAAMM,UAAU,CAAmC,CAACC,OAAOC;IACvF,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":["FluentProvider.types.ts"],"sourcesContent":["import 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 tooltip: TooltipVisibilityContextValue;\n};\n"],"names":[],"mappings":"AAAA,
|
1
|
+
{"version":3,"sources":["FluentProvider.types.ts"],"sourcesContent":["import type { IconDirectionContextValue } from '@fluentui/react-icons';\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,WA2EE"}
|
@@ -1,7 +1,8 @@
|
|
1
|
-
/** @jsxRuntime
|
1
|
+
/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
|
2
2
|
import { canUseDOM, assertSlots } from '@fluentui/react-utilities';
|
3
3
|
import { TextDirectionProvider } from '@griffel/react';
|
4
4
|
import { OverridesProvider_unstable as OverridesProvider, Provider_unstable as Provider, TooltipVisibilityProvider_unstable as TooltipVisibilityProvider, ThemeProvider_unstable as ThemeProvider, ThemeClassNameProvider_unstable as ThemeClassNameProvider, CustomStyleHooksProvider_unstable as CustomStyleHooksProvider } from '@fluentui/react-shared-contexts';
|
5
|
+
import { IconDirectionContextProvider } from '@fluentui/react-icons';
|
5
6
|
/**
|
6
7
|
* Render the final JSX of FluentProvider
|
7
8
|
*/ export const renderFluentProvider_unstable = (state, contextValues)=>{
|
@@ -9,27 +10,42 @@ import { OverridesProvider_unstable as OverridesProvider, Provider_unstable as P
|
|
9
10
|
// Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable
|
10
11
|
// instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is
|
11
12
|
// Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>
|
12
|
-
return /*#__PURE__*/
|
13
|
-
value: contextValues.provider
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
13
|
+
return /*#__PURE__*/ _jsx(Provider, {
|
14
|
+
value: contextValues.provider,
|
15
|
+
children: /*#__PURE__*/ _jsx(ThemeProvider, {
|
16
|
+
value: contextValues.theme,
|
17
|
+
children: /*#__PURE__*/ _jsx(ThemeClassNameProvider, {
|
18
|
+
value: contextValues.themeClassName,
|
19
|
+
children: /*#__PURE__*/ _jsx(CustomStyleHooksProvider, {
|
20
|
+
value: contextValues.customStyleHooks_unstable,
|
21
|
+
children: /*#__PURE__*/ _jsx(TooltipVisibilityProvider, {
|
22
|
+
value: contextValues.tooltip,
|
23
|
+
children: /*#__PURE__*/ _jsx(TextDirectionProvider, {
|
24
|
+
dir: contextValues.textDirection,
|
25
|
+
children: /*#__PURE__*/ _jsx(IconDirectionContextProvider, {
|
26
|
+
value: contextValues.iconDirection,
|
27
|
+
children: /*#__PURE__*/ _jsx(OverridesProvider, {
|
28
|
+
value: contextValues.overrides_unstable,
|
29
|
+
children: /*#__PURE__*/ _jsxs(state.root, {
|
30
|
+
children: [
|
31
|
+
canUseDOM() ? null : /*#__PURE__*/ _jsx("style", {
|
32
|
+
// Using dangerous HTML because react can escape characters
|
33
|
+
// which can lead to invalid CSS.
|
34
|
+
// eslint-disable-next-line react/no-danger
|
35
|
+
dangerouslySetInnerHTML: {
|
36
|
+
__html: state.serverStyleProps.cssRule
|
37
|
+
},
|
38
|
+
...state.serverStyleProps.attributes
|
39
|
+
}),
|
40
|
+
state.root.children
|
41
|
+
]
|
42
|
+
})
|
43
|
+
})
|
44
|
+
})
|
45
|
+
})
|
46
|
+
})
|
47
|
+
})
|
48
|
+
})
|
49
|
+
})
|
50
|
+
});
|
35
51
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["renderFluentProvider.tsx"],"sourcesContent":["/** @jsxRuntime
|
1
|
+
{"version":3,"sources":["renderFluentProvider.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { canUseDOM, assertSlots } from '@fluentui/react-utilities';\nimport { TextDirectionProvider } from '@griffel/react';\nimport {\n OverridesProvider_unstable as OverridesProvider,\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n CustomStyleHooksProvider_unstable as CustomStyleHooksProvider,\n CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\n} from '@fluentui/react-shared-contexts';\nimport type { FluentProviderContextValues, FluentProviderState, FluentProviderSlots } from './FluentProvider.types';\nimport { IconDirectionContextProvider } from '@fluentui/react-icons';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n) => {\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;AACjD,SAASA,SAAS,EAAEC,WAAW,QAAQ,4BAA4B;AACnE,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SACEC,8BAA8BC,iBAAiB,EAC/CC,qBAAqBC,QAAQ,EAC7BC,sCAAsCC,yBAAyB,EAC/DC,0BAA0BC,aAAa,EACvCC,mCAAmCC,sBAAsB,EACzDC,qCAAqCC,wBAAwB,QAExD,kCAAkC;AAEzC,SAASC,4BAA4B,QAAQ,wBAAwB;AAErE;;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"}
|
@@ -21,14 +21,14 @@ import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag
|
|
21
21
|
* TODO: add merge functions to "dir" merge,
|
22
22
|
* nesting providers with the same "dir" should not add additional attributes to DOM
|
23
23
|
* see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93
|
24
|
-
*/ const { applyStylesToPortals =true
|
25
|
-
customStyleHooks_unstable
|
24
|
+
*/ const { applyStylesToPortals = true, // eslint-disable-next-line @typescript-eslint/naming-convention
|
25
|
+
customStyleHooks_unstable, dir = parentContext.dir, targetDocument = parentContext.targetDocument, theme, overrides_unstable: overrides = {} } = props;
|
26
26
|
const mergedTheme = shallowMerge(parentTheme, theme);
|
27
27
|
const mergedOverrides = shallowMerge(parentOverrides, overrides);
|
28
28
|
const mergedCustomStyleHooks = shallowMerge(parentCustomStyleHooks, customStyleHooks_unstable);
|
29
29
|
const renderer = useRenderer_unstable();
|
30
30
|
var _renderer_styleElementAttributes;
|
31
|
-
const { styleTagId
|
31
|
+
const { styleTagId, rule } = useFluentProviderThemeStyleTag({
|
32
32
|
theme: mergedTheme,
|
33
33
|
targetDocument,
|
34
34
|
rendererAttributes: (_renderer_styleElementAttributes = renderer.styleElementAttributes) !== null && _renderer_styleElementAttributes !== void 0 ? _renderer_styleElementAttributes : {}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useFluentProvider.ts"],"sourcesContent":["import { 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 { getNativeElementProps, 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/**\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 = React.useContext(CustomStyleHooksContext) || {};\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 ?? {},\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 getNativeElementProps('div', {\n ...props,\n dir,\n ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>({ targetDocument })),\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","getNativeElementProps","useMergedRefs","slot","React","useFluentProviderThemeStyleTag","useFluentProvider_unstable","props","ref","parentContext","parentTheme","useTheme","parentOverrides","parentCustomStyleHooks","useContext","applyStylesToPortals","customStyleHooks_unstable","dir","targetDocument","theme","overrides_unstable","overrides","mergedTheme","shallowMerge","mergedOverrides","mergedCustomStyleHooks","renderer","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,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,qBAAqB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AACvF,YAAYC,WAAW,QAAQ;AAE/B,SAASC,8BAA8B,QAAQ,mCAAmC;AAGlF;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC
|
1
|
+
{"version":3,"sources":["useFluentProvider.ts"],"sourcesContent":["import { 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 { getNativeElementProps, 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/**\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 = React.useContext(CustomStyleHooksContext) || {};\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 ?? {},\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 getNativeElementProps('div', {\n ...props,\n dir,\n ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>({ targetDocument })),\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","getNativeElementProps","useMergedRefs","slot","React","useFluentProviderThemeStyleTag","useFluentProvider_unstable","props","ref","parentContext","parentTheme","useTheme","parentOverrides","parentCustomStyleHooks","useContext","applyStylesToPortals","customStyleHooks_unstable","dir","targetDocument","theme","overrides_unstable","overrides","mergedTheme","shallowMerge","mergedOverrides","mergedCustomStyleHooks","renderer","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,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,qBAAqB,EAAEC,aAAa,EAAEC,IAAI,QAAQ,4BAA4B;AACvF,YAAYC,WAAW,QAAQ;AAE/B,SAASC,8BAA8B,QAAQ,mCAAmC;AAGlF;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAMC,gBAAgBb;IACtB,MAAMc,cAAcC;IACpB,MAAMC,kBAAkBd;IACxB,MAAMe,yBAAuDT,MAAMU,UAAU,CAACd,4BAA4B,CAAC;IAE3G;;;;GAIC,GACD,MAAM,EACJe,uBAAuB,IAAI,EAC3B,gEAAgE;IAChEC,yBAAyB,EACzBC,MAAMR,cAAcQ,GAAG,EACvBC,iBAAiBT,cAAcS,cAAc,EAC7CC,KAAK,EACLC,oBAAoBC,YAAY,CAAC,CAAC,EACnC,GAAGd;IAEJ,MAAMe,cAAcC,aAAab,aAAaS;IAC9C,MAAMK,kBAAkBD,aAAaX,iBAAiBS;IAEtD,MAAMI,yBAAyBF,aAC7BV,wBACAG;IAGF,MAAMU,WAAWnC;QAIKmC;IAHtB,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGvB,+BAA+B;QAC1Dc,OAAOG;QACPJ;QACAW,oBAAoBH,CAAAA,mCAAAA,SAASI,sBAAsB,cAA/BJ,8CAAAA,mCAAmC,CAAC;IAC1D;IAEA,IAAIK,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACzC,sDAAsD;QACtD7B,MAAM8B,SAAS,CAAC;YACd,IAAIZ,gBAAgBa,WAAW;gBAC7B,sCAAsC;gBACtCC,QAAQC,IAAI,CACV;oBACE;oBACA;iBACD,CAACC,IAAI,CAAC;YAEX;QACA,uDAAuD;QACzD,GAAG,EAAE;IACP;IAEA,OAAO;QACLvB;QACA,gEAAgE;QAChEC,2BAA2BS;QAC3BR;QACAC;QACAC,OAAOG;QACP,gEAAgE;QAChEF,oBAAoBI;QACpBe,gBAAgBZ;QAEhBa,YAAY;YACVC,MAAM;QACR;QAEAA,MAAMtC,KAAKuC,MAAM,CACfzC,sBAAsB,OAAO;YAC3B,GAAGM,KAAK;YACRU;YACAT,KAAKN,cAAcM,KAAKhB,gBAAgC;gBAAE0B;YAAe;QAC3E,IACA;YAAEyB,aAAa;QAAM;QAGvBC,kBAAkB;YAChBC,SAASjB;YACTkB,YAAY;gBACV,GAAGpB,SAASI,sBAAsB;gBAClCiB,IAAIpB;YACN;QACF;IACF;AACF,EAAE;AAEF,SAASJ,aAAgByB,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,SAAStC;IACP,OAAOP,MAAMU,UAAU,CAACpB;AAC1B"}
|
@@ -1,8 +1,8 @@
|
|
1
1
|
import * as React from 'react';
|
2
2
|
export function useFluentProviderContextValues_unstable(state) {
|
3
|
-
const { applyStylesToPortals
|
4
|
-
customStyleHooks_unstable
|
5
|
-
overrides_unstable
|
3
|
+
const { applyStylesToPortals, // eslint-disable-next-line @typescript-eslint/naming-convention
|
4
|
+
customStyleHooks_unstable, dir, root, targetDocument, theme, themeClassName, // eslint-disable-next-line @typescript-eslint/naming-convention
|
5
|
+
overrides_unstable } = state;
|
6
6
|
const provider = React.useMemo(()=>({
|
7
7
|
dir,
|
8
8
|
targetDocument
|
@@ -12,6 +12,11 @@ export function useFluentProviderContextValues_unstable(state) {
|
|
12
12
|
]);
|
13
13
|
// "Tooltip" component mutates an object in this context, instance should be stable
|
14
14
|
const [tooltip] = React.useState(()=>({}));
|
15
|
+
const iconDirection = React.useMemo(()=>({
|
16
|
+
textDirection: dir
|
17
|
+
}), [
|
18
|
+
dir
|
19
|
+
]);
|
15
20
|
return {
|
16
21
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
17
22
|
customStyleHooks_unstable,
|
@@ -19,6 +24,7 @@ export function useFluentProviderContextValues_unstable(state) {
|
|
19
24
|
overrides_unstable,
|
20
25
|
provider,
|
21
26
|
textDirection: dir,
|
27
|
+
iconDirection,
|
22
28
|
tooltip,
|
23
29
|
theme,
|
24
30
|
themeClassName: applyStylesToPortals ? root.className : themeClassName
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useFluentProviderContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n const {\n applyStylesToPortals,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable,\n dir,\n root,\n targetDocument,\n theme,\n themeClassName,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable,\n } = state;\n\n const provider = React.useMemo(() => ({ dir, targetDocument }), [dir, targetDocument]);\n // \"Tooltip\" component mutates an object in this context, instance should be stable\n const [tooltip] = React.useState(() => ({}));\n\n return {\n // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable,\n provider,\n textDirection: dir,\n tooltip,\n theme,\n themeClassName: applyStylesToPortals ? root.className! : themeClassName,\n };\n}\n"],"names":["React","useFluentProviderContextValues_unstable","state","applyStylesToPortals","customStyleHooks_unstable","dir","root","targetDocument","theme","themeClassName","overrides_unstable","provider","useMemo","tooltip","useState","textDirection","className"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,OAAO,SAASC,wCAAwCC,KAA0B
|
1
|
+
{"version":3,"sources":["useFluentProviderContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n const {\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,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"}
|
@@ -31,7 +31,7 @@ const insertSheet = (tag, rule)=>{
|
|
31
31
|
* @internal
|
32
32
|
* @returns CSS class to apply the rule
|
33
33
|
*/ export const useFluentProviderThemeStyleTag = (options)=>{
|
34
|
-
const { targetDocument
|
34
|
+
const { targetDocument, theme, rendererAttributes } = options;
|
35
35
|
const styleTag = React.useRef();
|
36
36
|
const styleTagId = useId(fluentProviderClassNames.root);
|
37
37
|
const styleElementAttributes = rendererAttributes;
|
@@ -73,8 +73,9 @@ const insertSheet = (tag, rule)=>{
|
|
73
73
|
}
|
74
74
|
useHandleSSRStyleElements(targetDocument, styleTagId);
|
75
75
|
useInsertionEffect(()=>{
|
76
|
+
var _targetDocument;
|
76
77
|
// The style element could already have been created during SSR - no need to recreate it
|
77
|
-
const ssrStyleElement = targetDocument === null ||
|
78
|
+
const ssrStyleElement = (_targetDocument = targetDocument) === null || _targetDocument === void 0 ? void 0 : _targetDocument.getElementById(styleTagId);
|
78
79
|
if (ssrStyleElement) {
|
79
80
|
styleTag.current = ssrStyleElement;
|
80
81
|
} else {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useFluentProviderThemeStyleTag.ts"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles.styles';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n ? (React as never)['useInsertion' + 'Effect']\n : useIsomorphicLayoutEffect;\n\nconst createStyleTag = (target: Document | undefined, elementAttributes: Record<string, string>) => {\n if (!target) {\n return undefined;\n }\n\n const tag = target.createElement('style');\n\n Object.keys(elementAttributes).forEach(attrName => {\n tag.setAttribute(attrName, elementAttributes[attrName]);\n });\n\n target.head.appendChild(tag);\n return tag;\n};\n\nconst insertSheet = (tag: HTMLStyleElement, rule: string) => {\n const sheet = tag.sheet;\n\n if (sheet) {\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n sheet.insertRule(rule, 0);\n } else if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n }\n};\n\n/**\n * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n * @internal\n * @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (\n options: Pick<FluentProviderState, 'theme' | 'targetDocument'> & { rendererAttributes: Record<string, string> },\n) => {\n const { targetDocument, theme, rendererAttributes } = options;\n\n const styleTag = React.useRef<HTMLStyleElement | undefined | null>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\n const styleElementAttributes = rendererAttributes;\n\n const cssVarsAsString = React.useMemo(() => {\n return theme\n ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '')\n : '';\n }, [theme]);\n\n const rule = `.${styleTagId} { ${cssVarsAsString} }`;\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useMemo(() => {\n // Heads up!\n // .useMemo() is used because it is called during render and DOM for _current_ component is not mounted yet. Also,\n // this allows to do checks with strict mode enabled as .useEffect() will be called with incremented IDs because\n // of double render.\n\n if (targetDocument) {\n const providerSelector = `.${fluentProviderClassNames.root}.${styleTagId}`;\n const providerElements = targetDocument.querySelectorAll(providerSelector);\n\n // In SSR, we will have DOM upfront. To avoid false positives the check on nested style tag is performed\n const isSSR = targetDocument.querySelector(`${providerSelector} > style[id=\"${styleTagId}\"]`) !== null;\n const elementsCount = isSSR ? 1 : 0;\n\n if (providerElements.length > elementsCount) {\n // eslint-disable-next-line no-console\n console.error(\n [\n '@fluentui/react-provider: There are conflicting ids in your DOM.',\n 'Please make sure that you configured your application properly.',\n '\\n',\n '\\n',\n 'Configuration guide: https://aka.ms/fluentui-conflicting-ids',\n ].join(' '),\n );\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n }\n\n useHandleSSRStyleElements(targetDocument, styleTagId);\n useInsertionEffect(() => {\n // The style element could already have been created during SSR - no need to recreate it\n const ssrStyleElement = targetDocument?.getElementById(styleTagId);\n if (ssrStyleElement) {\n styleTag.current = ssrStyleElement as HTMLStyleElement;\n } else {\n styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n }\n }\n\n return () => {\n styleTag.current?.remove();\n };\n }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n return { styleTagId, rule };\n};\n\nfunction useHandleSSRStyleElements(targetDocument: Document | undefined | null, styleTagId: string) {\n // Using a state factory so that this logic only runs once per render\n // Each FluentProvider can create its own style element during SSR as a slot\n // Moves all theme style elements to document head during render to avoid hydration errors.\n // Should be strict mode safe since the logic is idempotent.\n React.useState(() => {\n if (!targetDocument) {\n return;\n }\n\n const themeStyleElement = targetDocument.getElementById(styleTagId);\n if (themeStyleElement) {\n targetDocument.head.append(themeStyleElement);\n }\n });\n}\n"],"names":["useId","useIsomorphicLayoutEffect","React","fluentProviderClassNames","useInsertionEffect","createStyleTag","target","elementAttributes","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","head","appendChild","insertSheet","rule","sheet","cssRules","length","deleteRule","insertRule","process","env","NODE_ENV","console","error","useFluentProviderThemeStyleTag","options","targetDocument","theme","rendererAttributes","styleTag","useRef","styleTagId","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","providerSelector","providerElements","querySelectorAll","isSSR","querySelector","elementsCount","join","useHandleSSRStyleElements","ssrStyleElement","getElementById","current","id","remove","useState","themeStyleElement","append"],"mappings":"AAAA,SAASA,KAAK,EAAEC,yBAAyB,QAAQ,4BAA4B;AAC7E,YAAYC,WAAW,QAAQ;AAG/B,SAASC,wBAAwB,QAAQ,mCAAmC;AAE5E,4FAA4F;AAC5F,MAAMC,qBAAqB,AAACF,KAAe,CAAC,iBAAiB,SAAS,GAClE,AAACA,KAAe,CAAC,iBAAiB,SAAS,GAC3CD
|
1
|
+
{"version":3,"sources":["useFluentProviderThemeStyleTag.ts"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles.styles';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n ? (React as never)['useInsertion' + 'Effect']\n : useIsomorphicLayoutEffect;\n\nconst createStyleTag = (target: Document | undefined, elementAttributes: Record<string, string>) => {\n if (!target) {\n return undefined;\n }\n\n const tag = target.createElement('style');\n\n Object.keys(elementAttributes).forEach(attrName => {\n tag.setAttribute(attrName, elementAttributes[attrName]);\n });\n\n target.head.appendChild(tag);\n return tag;\n};\n\nconst insertSheet = (tag: HTMLStyleElement, rule: string) => {\n const sheet = tag.sheet;\n\n if (sheet) {\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n sheet.insertRule(rule, 0);\n } else if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n }\n};\n\n/**\n * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n * @internal\n * @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (\n options: Pick<FluentProviderState, 'theme' | 'targetDocument'> & { rendererAttributes: Record<string, string> },\n) => {\n const { targetDocument, theme, rendererAttributes } = options;\n\n const styleTag = React.useRef<HTMLStyleElement | undefined | null>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\n const styleElementAttributes = rendererAttributes;\n\n const cssVarsAsString = React.useMemo(() => {\n return theme\n ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '')\n : '';\n }, [theme]);\n\n const rule = `.${styleTagId} { ${cssVarsAsString} }`;\n\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useMemo(() => {\n // Heads up!\n // .useMemo() is used because it is called during render and DOM for _current_ component is not mounted yet. Also,\n // this allows to do checks with strict mode enabled as .useEffect() will be called with incremented IDs because\n // of double render.\n\n if (targetDocument) {\n const providerSelector = `.${fluentProviderClassNames.root}.${styleTagId}`;\n const providerElements = targetDocument.querySelectorAll(providerSelector);\n\n // In SSR, we will have DOM upfront. To avoid false positives the check on nested style tag is performed\n const isSSR = targetDocument.querySelector(`${providerSelector} > style[id=\"${styleTagId}\"]`) !== null;\n const elementsCount = isSSR ? 1 : 0;\n\n if (providerElements.length > elementsCount) {\n // eslint-disable-next-line no-console\n console.error(\n [\n '@fluentui/react-provider: There are conflicting ids in your DOM.',\n 'Please make sure that you configured your application properly.',\n '\\n',\n '\\n',\n 'Configuration guide: https://aka.ms/fluentui-conflicting-ids',\n ].join(' '),\n );\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n }\n\n useHandleSSRStyleElements(targetDocument, styleTagId);\n useInsertionEffect(() => {\n // The style element could already have been created during SSR - no need to recreate it\n const ssrStyleElement = targetDocument?.getElementById(styleTagId);\n if (ssrStyleElement) {\n styleTag.current = ssrStyleElement as HTMLStyleElement;\n } else {\n styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n }\n }\n\n return () => {\n styleTag.current?.remove();\n };\n }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n return { styleTagId, rule };\n};\n\nfunction useHandleSSRStyleElements(targetDocument: Document | undefined | null, styleTagId: string) {\n // Using a state factory so that this logic only runs once per render\n // Each FluentProvider can create its own style element during SSR as a slot\n // Moves all theme style elements to document head during render to avoid hydration errors.\n // Should be strict mode safe since the logic is idempotent.\n React.useState(() => {\n if (!targetDocument) {\n return;\n }\n\n const themeStyleElement = targetDocument.getElementById(styleTagId);\n if (themeStyleElement) {\n targetDocument.head.append(themeStyleElement);\n }\n });\n}\n"],"names":["useId","useIsomorphicLayoutEffect","React","fluentProviderClassNames","useInsertionEffect","createStyleTag","target","elementAttributes","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","head","appendChild","insertSheet","rule","sheet","cssRules","length","deleteRule","insertRule","process","env","NODE_ENV","console","error","useFluentProviderThemeStyleTag","options","targetDocument","theme","rendererAttributes","styleTag","useRef","styleTagId","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","providerSelector","providerElements","querySelectorAll","isSSR","querySelector","elementsCount","join","useHandleSSRStyleElements","ssrStyleElement","getElementById","current","id","remove","useState","themeStyleElement","append"],"mappings":"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"}
|
@@ -2,5 +2,5 @@
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
3
3
|
value: true
|
4
4
|
});
|
5
|
-
const
|
6
|
-
|
5
|
+
const _export_star = require("@swc/helpers/_/_export_star");
|
6
|
+
_export_star._(require("./components/FluentProvider/index"), exports);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["FluentProvider.js"],"sourcesContent":["export * from './components/FluentProvider/index';\n"],"names":[],"mappings":";;;;;
|
1
|
+
{"version":3,"sources":["FluentProvider.js"],"sourcesContent":["export * from './components/FluentProvider/index';\n"],"names":[],"mappings":";;;;;uBAAc"}
|
@@ -4,17 +4,19 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
Object.defineProperty(exports, "FluentProvider", {
|
6
6
|
enumerable: true,
|
7
|
-
get: ()
|
7
|
+
get: function() {
|
8
|
+
return FluentProvider;
|
9
|
+
}
|
8
10
|
});
|
9
|
-
const
|
10
|
-
const _react = /*#__PURE__*/
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
11
13
|
const _renderFluentProvider = require("./renderFluentProvider");
|
12
14
|
const _useFluentProvider = require("./useFluentProvider");
|
13
|
-
const
|
15
|
+
const _useFluentProviderStylesstyles = require("./useFluentProviderStyles.styles");
|
14
16
|
const _useFluentProviderContextValues = require("./useFluentProviderContextValues");
|
15
17
|
const FluentProvider = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
16
18
|
const state = (0, _useFluentProvider.useFluentProvider_unstable)(props, ref);
|
17
|
-
(0,
|
19
|
+
(0, _useFluentProviderStylesstyles.useFluentProviderStyles_unstable)(state);
|
18
20
|
const contextValues = (0, _useFluentProviderContextValues.useFluentProviderContextValues_unstable)(state);
|
19
21
|
return (0, _renderFluentProvider.renderFluentProvider_unstable)(state, contextValues);
|
20
22
|
});
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["FluentProvider.js"],"sourcesContent":["import * as React from 'react';\nimport { renderFluentProvider_unstable } from './renderFluentProvider';\nimport { useFluentProvider_unstable } from './useFluentProvider';\nimport { useFluentProviderStyles_unstable } from './useFluentProviderStyles.styles';\nimport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nexport const FluentProvider = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const state = useFluentProvider_unstable(props, ref);\n useFluentProviderStyles_unstable(state);\n const contextValues = useFluentProviderContextValues_unstable(state);\n return renderFluentProvider_unstable(state, contextValues);\n});\nFluentProvider.displayName = 'FluentProvider';\n"],"names":["FluentProvider","React","forwardRef","props","ref","state","useFluentProvider_unstable","useFluentProviderStyles_unstable","contextValues","useFluentProviderContextValues_unstable","renderFluentProvider_unstable","displayName"],"mappings":";;;;+BAKaA
|
1
|
+
{"version":3,"sources":["FluentProvider.js"],"sourcesContent":["import * as React from 'react';\nimport { renderFluentProvider_unstable } from './renderFluentProvider';\nimport { useFluentProvider_unstable } from './useFluentProvider';\nimport { useFluentProviderStyles_unstable } from './useFluentProviderStyles.styles';\nimport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nexport const FluentProvider = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const state = useFluentProvider_unstable(props, ref);\n useFluentProviderStyles_unstable(state);\n const contextValues = useFluentProviderContextValues_unstable(state);\n return renderFluentProvider_unstable(state, contextValues);\n});\nFluentProvider.displayName = 'FluentProvider';\n"],"names":["FluentProvider","React","forwardRef","props","ref","state","useFluentProvider_unstable","useFluentProviderStyles_unstable","contextValues","useFluentProviderContextValues_unstable","renderFluentProvider_unstable","displayName"],"mappings":";;;;+BAKaA;;;eAAAA;;;;iEALU;sCACuB;mCACH;+CACM;gDACO;AACjD,MAAMA,iBAAiB,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACjE,MAAMC,QAAQC,IAAAA,6CAA0B,EAACH,OAAOC;IAChDG,IAAAA,+DAAgC,EAACF;IACjC,MAAMG,gBAAgBC,IAAAA,uEAAuC,EAACJ;IAC9D,OAAOK,IAAAA,mDAA6B,EAACL,OAAOG;AAChD;AACAR,eAAeW,WAAW,GAAG"}
|
@@ -2,11 +2,11 @@
|
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
3
3
|
value: true
|
4
4
|
});
|
5
|
-
const
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
5
|
+
const _export_star = require("@swc/helpers/_/_export_star");
|
6
|
+
_export_star._(require("./FluentProvider"), exports);
|
7
|
+
_export_star._(require("./FluentProvider.types"), exports);
|
8
|
+
_export_star._(require("./renderFluentProvider"), exports);
|
9
|
+
_export_star._(require("./useFluentProvider"), exports);
|
10
|
+
_export_star._(require("./useFluentProviderStyles.styles"), exports);
|
11
|
+
_export_star._(require("./useFluentProviderContextValues"), exports);
|
12
|
+
_export_star._(require("./useFluentProviderThemeStyleTag"), exports);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './FluentProvider';\nexport * from './FluentProvider.types';\nexport * from './renderFluentProvider';\nexport * from './useFluentProvider';\nexport * from './useFluentProviderStyles.styles';\nexport * from './useFluentProviderContextValues';\nexport * from './useFluentProviderThemeStyleTag';\n"],"names":[],"mappings":";;;;;
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export * from './FluentProvider';\nexport * from './FluentProvider.types';\nexport * from './renderFluentProvider';\nexport * from './useFluentProvider';\nexport * from './useFluentProviderStyles.styles';\nexport * from './useFluentProviderContextValues';\nexport * from './useFluentProviderThemeStyleTag';\n"],"names":[],"mappings":";;;;;uBAAc;uBACA;uBACA;uBACA;uBACA;uBACA;uBACA"}
|
@@ -1,41 +1,59 @@
|
|
1
|
-
/** @jsxRuntime
|
1
|
+
/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ "use strict";
|
2
2
|
Object.defineProperty(exports, "__esModule", {
|
3
3
|
value: true
|
4
4
|
});
|
5
5
|
Object.defineProperty(exports, "renderFluentProvider_unstable", {
|
6
6
|
enumerable: true,
|
7
|
-
get: ()
|
7
|
+
get: function() {
|
8
|
+
return renderFluentProvider_unstable;
|
9
|
+
}
|
8
10
|
});
|
9
|
-
const
|
10
|
-
const
|
11
|
+
const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
|
12
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
11
13
|
const _react = require("@griffel/react");
|
12
|
-
const
|
14
|
+
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
15
|
+
const _reacticons = require("@fluentui/react-icons");
|
13
16
|
const renderFluentProvider_unstable = (state, contextValues)=>{
|
14
|
-
(0,
|
17
|
+
(0, _reactutilities.assertSlots)(state);
|
15
18
|
// Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable
|
16
19
|
// instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is
|
17
20
|
// Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>
|
18
|
-
return /*#__PURE__*/ (0,
|
19
|
-
value: contextValues.provider
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
21
|
+
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactsharedcontexts.Provider_unstable, {
|
22
|
+
value: contextValues.provider,
|
23
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactsharedcontexts.ThemeProvider_unstable, {
|
24
|
+
value: contextValues.theme,
|
25
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactsharedcontexts.ThemeClassNameProvider_unstable, {
|
26
|
+
value: contextValues.themeClassName,
|
27
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactsharedcontexts.CustomStyleHooksProvider_unstable, {
|
28
|
+
value: contextValues.customStyleHooks_unstable,
|
29
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactsharedcontexts.TooltipVisibilityProvider_unstable, {
|
30
|
+
value: contextValues.tooltip,
|
31
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_react.TextDirectionProvider, {
|
32
|
+
dir: contextValues.textDirection,
|
33
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reacticons.IconDirectionContextProvider, {
|
34
|
+
value: contextValues.iconDirection,
|
35
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactsharedcontexts.OverridesProvider_unstable, {
|
36
|
+
value: contextValues.overrides_unstable,
|
37
|
+
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
|
38
|
+
children: [
|
39
|
+
(0, _reactutilities.canUseDOM)() ? null : /*#__PURE__*/ (0, _jsxruntime.jsx)("style", {
|
40
|
+
// Using dangerous HTML because react can escape characters
|
41
|
+
// which can lead to invalid CSS.
|
42
|
+
// eslint-disable-next-line react/no-danger
|
43
|
+
dangerouslySetInnerHTML: {
|
44
|
+
__html: state.serverStyleProps.cssRule
|
45
|
+
},
|
46
|
+
...state.serverStyleProps.attributes
|
47
|
+
}),
|
48
|
+
state.root.children
|
49
|
+
]
|
50
|
+
})
|
51
|
+
})
|
52
|
+
})
|
53
|
+
})
|
54
|
+
})
|
55
|
+
})
|
56
|
+
})
|
57
|
+
})
|
58
|
+
});
|
41
59
|
};
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["renderFluentProvider.js"],"sourcesContent":["/** @jsxRuntime
|
1
|
+
{"version":3,"sources":["renderFluentProvider.js"],"sourcesContent":["/** @jsxRuntime automatic */ /** @jsxImportSource @fluentui/react-jsx-runtime */ import { jsx as _jsx, jsxs as _jsxs } from \"@fluentui/react-jsx-runtime/jsx-runtime\";\nimport { canUseDOM, assertSlots } from '@fluentui/react-utilities';\nimport { TextDirectionProvider } from '@griffel/react';\nimport { OverridesProvider_unstable as OverridesProvider, Provider_unstable as Provider, TooltipVisibilityProvider_unstable as TooltipVisibilityProvider, ThemeProvider_unstable as ThemeProvider, ThemeClassNameProvider_unstable as ThemeClassNameProvider, CustomStyleHooksProvider_unstable as CustomStyleHooksProvider } from '@fluentui/react-shared-contexts';\nimport { IconDirectionContextProvider } from '@fluentui/react-icons';\n/**\n * Render the final JSX of FluentProvider\n */ export const renderFluentProvider_unstable = (state, contextValues)=>{\n assertSlots(state);\n // Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable\n // instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is\n // Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>\n return /*#__PURE__*/ _jsx(Provider, {\n value: contextValues.provider,\n children: /*#__PURE__*/ _jsx(ThemeProvider, {\n value: contextValues.theme,\n children: /*#__PURE__*/ _jsx(ThemeClassNameProvider, {\n value: contextValues.themeClassName,\n children: /*#__PURE__*/ _jsx(CustomStyleHooksProvider, {\n value: contextValues.customStyleHooks_unstable,\n children: /*#__PURE__*/ _jsx(TooltipVisibilityProvider, {\n value: contextValues.tooltip,\n children: /*#__PURE__*/ _jsx(TextDirectionProvider, {\n dir: contextValues.textDirection,\n children: /*#__PURE__*/ _jsx(IconDirectionContextProvider, {\n value: contextValues.iconDirection,\n children: /*#__PURE__*/ _jsx(OverridesProvider, {\n value: contextValues.overrides_unstable,\n children: /*#__PURE__*/ _jsxs(state.root, {\n children: [\n canUseDOM() ? null : /*#__PURE__*/ _jsx(\"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: {\n __html: state.serverStyleProps.cssRule\n },\n ...state.serverStyleProps.attributes\n }),\n state.root.children\n ]\n })\n })\n })\n })\n })\n })\n })\n })\n });\n};\n"],"names":["renderFluentProvider_unstable","state","contextValues","assertSlots","_jsx","Provider","value","provider","children","ThemeProvider","theme","ThemeClassNameProvider","themeClassName","CustomStyleHooksProvider","customStyleHooks_unstable","TooltipVisibilityProvider","tooltip","TextDirectionProvider","dir","textDirection","IconDirectionContextProvider","iconDirection","OverridesProvider","overrides_unstable","_jsxs","root","canUseDOM","dangerouslySetInnerHTML","__html","serverStyleProps","cssRule","attributes"],"mappings":"AAAA,0BAA0B,GAAG,iDAAiD;;;;+BAO7DA;;;eAAAA;;;4BAP2G;gCACrF;uBACD;qCAC6R;4BACtR;AAGlC,MAAMA,gCAAgC,CAACC,OAAOC;IACrDC,IAAAA,2BAAW,EAACF;IACZ,+FAA+F;IAC/F,oFAAoF;IACpF,0GAA0G;IAC1G,OAAO,WAAW,GAAGG,IAAAA,eAAI,EAACC,sCAAQ,EAAE;QAChCC,OAAOJ,cAAcK,QAAQ;QAC7BC,UAAU,WAAW,GAAGJ,IAAAA,eAAI,EAACK,2CAAa,EAAE;YACxCH,OAAOJ,cAAcQ,KAAK;YAC1BF,UAAU,WAAW,GAAGJ,IAAAA,eAAI,EAACO,oDAAsB,EAAE;gBACjDL,OAAOJ,cAAcU,cAAc;gBACnCJ,UAAU,WAAW,GAAGJ,IAAAA,eAAI,EAACS,sDAAwB,EAAE;oBACnDP,OAAOJ,cAAcY,yBAAyB;oBAC9CN,UAAU,WAAW,GAAGJ,IAAAA,eAAI,EAACW,uDAAyB,EAAE;wBACpDT,OAAOJ,cAAcc,OAAO;wBAC5BR,UAAU,WAAW,GAAGJ,IAAAA,eAAI,EAACa,4BAAqB,EAAE;4BAChDC,KAAKhB,cAAciB,aAAa;4BAChCX,UAAU,WAAW,GAAGJ,IAAAA,eAAI,EAACgB,wCAA4B,EAAE;gCACvDd,OAAOJ,cAAcmB,aAAa;gCAClCb,UAAU,WAAW,GAAGJ,IAAAA,eAAI,EAACkB,+CAAiB,EAAE;oCAC5ChB,OAAOJ,cAAcqB,kBAAkB;oCACvCf,UAAU,WAAW,GAAGgB,IAAAA,gBAAK,EAACvB,MAAMwB,IAAI,EAAE;wCACtCjB,UAAU;4CACNkB,IAAAA,yBAAS,MAAK,OAAO,WAAW,GAAGtB,IAAAA,eAAI,EAAC,SAAS;gDAC7C,2DAA2D;gDAC3D,iCAAiC;gDACjC,2CAA2C;gDAC3CuB,yBAAyB;oDACrBC,QAAQ3B,MAAM4B,gBAAgB,CAACC,OAAO;gDAC1C;gDACA,GAAG7B,MAAM4B,gBAAgB,CAACE,UAAU;4CACxC;4CACA9B,MAAMwB,IAAI,CAACjB,QAAQ;yCACtB;oCACL;gCACJ;4BACJ;wBACJ;oBACJ;gBACJ;YACJ;QACJ;IACJ;AACJ"}
|
@@ -4,31 +4,33 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
Object.defineProperty(exports, "useFluentProvider_unstable", {
|
6
6
|
enumerable: true,
|
7
|
-
get: ()
|
7
|
+
get: function() {
|
8
|
+
return useFluentProvider_unstable;
|
9
|
+
}
|
8
10
|
});
|
9
|
-
const
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
10
12
|
const _react = require("@griffel/react");
|
11
|
-
const
|
12
|
-
const
|
13
|
-
const
|
14
|
-
const _react1 = /*#__PURE__*/
|
13
|
+
const _reacttabster = require("@fluentui/react-tabster");
|
14
|
+
const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
15
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
16
|
+
const _react1 = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
15
17
|
const _useFluentProviderThemeStyleTag = require("./useFluentProviderThemeStyleTag");
|
16
18
|
const useFluentProvider_unstable = (props, ref)=>{
|
17
|
-
const parentContext = (0,
|
19
|
+
const parentContext = (0, _reactsharedcontexts.useFluent_unstable)();
|
18
20
|
const parentTheme = useTheme();
|
19
|
-
const parentOverrides = (0,
|
20
|
-
const parentCustomStyleHooks = _react1.useContext(
|
21
|
+
const parentOverrides = (0, _reactsharedcontexts.useOverrides_unstable)();
|
22
|
+
const parentCustomStyleHooks = _react1.useContext(_reactsharedcontexts.CustomStyleHooksContext_unstable) || {};
|
21
23
|
/**
|
22
24
|
* TODO: add merge functions to "dir" merge,
|
23
25
|
* nesting providers with the same "dir" should not add additional attributes to DOM
|
24
26
|
* see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93
|
25
|
-
*/ const { applyStylesToPortals =true
|
27
|
+
*/ const { applyStylesToPortals = true, customStyleHooks_unstable, dir = parentContext.dir, targetDocument = parentContext.targetDocument, theme, overrides_unstable: overrides = {} } = props;
|
26
28
|
const mergedTheme = shallowMerge(parentTheme, theme);
|
27
29
|
const mergedOverrides = shallowMerge(parentOverrides, overrides);
|
28
30
|
const mergedCustomStyleHooks = shallowMerge(parentCustomStyleHooks, customStyleHooks_unstable);
|
29
31
|
const renderer = (0, _react.useRenderer_unstable)();
|
30
32
|
var _renderer_styleElementAttributes;
|
31
|
-
const { styleTagId
|
33
|
+
const { styleTagId, rule } = (0, _useFluentProviderThemeStyleTag.useFluentProviderThemeStyleTag)({
|
32
34
|
theme: mergedTheme,
|
33
35
|
targetDocument,
|
34
36
|
rendererAttributes: (_renderer_styleElementAttributes = renderer.styleElementAttributes) !== null && _renderer_styleElementAttributes !== void 0 ? _renderer_styleElementAttributes : {}
|
@@ -59,10 +61,10 @@ const useFluentProvider_unstable = (props, ref)=>{
|
|
59
61
|
components: {
|
60
62
|
root: 'div'
|
61
63
|
},
|
62
|
-
root:
|
64
|
+
root: _reactutilities.slot.always((0, _reactutilities.getNativeElementProps)('div', {
|
63
65
|
...props,
|
64
66
|
dir,
|
65
|
-
ref: (0,
|
67
|
+
ref: (0, _reactutilities.useMergedRefs)(ref, (0, _reacttabster.useFocusVisible)({
|
66
68
|
targetDocument
|
67
69
|
}))
|
68
70
|
}), {
|
@@ -91,5 +93,5 @@ function shallowMerge(a, b) {
|
|
91
93
|
return b;
|
92
94
|
}
|
93
95
|
function useTheme() {
|
94
|
-
return _react1.useContext(
|
96
|
+
return _react1.useContext(_reactsharedcontexts.ThemeContext_unstable);
|
95
97
|
}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useFluentProvider.js"],"sourcesContent":["import { useRenderer_unstable } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\nimport { ThemeContext_unstable as ThemeContext, useFluent_unstable as useFluent, useOverrides_unstable as useOverrides, CustomStyleHooksContext_unstable as CustomStyleHooksContext } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */ export const useFluentProvider_unstable = (props, ref)=>{\n const parentContext = useFluent();\n const parentTheme = useTheme();\n const parentOverrides = useOverrides();\n const parentCustomStyleHooks = React.useContext(CustomStyleHooksContext) || {};\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 */ const { applyStylesToPortals =true
|
1
|
+
{"version":3,"sources":["useFluentProvider.js"],"sourcesContent":["import { useRenderer_unstable } from '@griffel/react';\nimport { useFocusVisible } from '@fluentui/react-tabster';\nimport { ThemeContext_unstable as ThemeContext, useFluent_unstable as useFluent, useOverrides_unstable as useOverrides, CustomStyleHooksContext_unstable as CustomStyleHooksContext } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */ export const useFluentProvider_unstable = (props, ref)=>{\n const parentContext = useFluent();\n const parentTheme = useTheme();\n const parentOverrides = useOverrides();\n const parentCustomStyleHooks = React.useContext(CustomStyleHooksContext) || {};\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 */ const { applyStylesToPortals = true, // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable, dir = parentContext.dir, targetDocument = parentContext.targetDocument, theme, overrides_unstable: overrides = {} } = props;\n const mergedTheme = shallowMerge(parentTheme, theme);\n const mergedOverrides = shallowMerge(parentOverrides, overrides);\n const mergedCustomStyleHooks = shallowMerge(parentCustomStyleHooks, customStyleHooks_unstable);\n const renderer = useRenderer_unstable();\n var _renderer_styleElementAttributes;\n const { styleTagId, rule } = useFluentProviderThemeStyleTag({\n theme: mergedTheme,\n targetDocument,\n rendererAttributes: (_renderer_styleElementAttributes = renderer.styleElementAttributes) !== null && _renderer_styleElementAttributes !== void 0 ? _renderer_styleElementAttributes : {}\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 '@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 // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n }\n return {\n applyStylesToPortals,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable: mergedCustomStyleHooks,\n dir,\n targetDocument,\n theme: mergedTheme,\n // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable: mergedOverrides,\n themeClassName: styleTagId,\n components: {\n root: 'div'\n },\n root: slot.always(getNativeElementProps('div', {\n ...props,\n dir,\n ref: useMergedRefs(ref, useFocusVisible({\n targetDocument\n }))\n }), {\n elementType: 'div'\n }),\n serverStyleProps: {\n cssRule: rule,\n attributes: {\n ...renderer.styleElementAttributes,\n id: styleTagId\n }\n }\n };\n};\nfunction shallowMerge(a, b) {\n // Merge impacts perf: we should like to avoid it if it's possible\n if (a && b) {\n return {\n ...a,\n ...b\n };\n }\n if (a) {\n return a;\n }\n return b;\n}\nfunction useTheme() {\n return React.useContext(ThemeContext);\n}\n"],"names":["useFluentProvider_unstable","props","ref","parentContext","useFluent","parentTheme","useTheme","parentOverrides","useOverrides","parentCustomStyleHooks","React","useContext","CustomStyleHooksContext","applyStylesToPortals","customStyleHooks_unstable","dir","targetDocument","theme","overrides_unstable","overrides","mergedTheme","shallowMerge","mergedOverrides","mergedCustomStyleHooks","renderer","useRenderer_unstable","_renderer_styleElementAttributes","styleTagId","rule","useFluentProviderThemeStyleTag","rendererAttributes","styleElementAttributes","process","env","NODE_ENV","useEffect","undefined","console","warn","join","themeClassName","components","root","slot","always","getNativeElementProps","useMergedRefs","useFocusVisible","elementType","serverStyleProps","cssRule","attributes","id","a","b","ThemeContext"],"mappings":";;;;+BAciBA;;;eAAAA;;;;uBAdoB;8BACL;qCAC2J;gCAChI;kEACpC;gDACwB;AASpC,MAAMA,6BAA6B,CAACC,OAAOC;IAClD,MAAMC,gBAAgBC,IAAAA,uCAAS;IAC/B,MAAMC,cAAcC;IACpB,MAAMC,kBAAkBC,IAAAA,0CAAY;IACpC,MAAMC,yBAAyBC,QAAMC,UAAU,CAACC,qDAAuB,KAAK,CAAC;IAC7E;;;;GAID,GAAG,MAAM,EAAEC,uBAAuB,IAAI,EACrCC,yBAAyB,EAAEC,MAAMZ,cAAcY,GAAG,EAAEC,iBAAiBb,cAAca,cAAc,EAAEC,KAAK,EAAEC,oBAAoBC,YAAY,CAAC,CAAC,EAAE,GAAGlB;IACjJ,MAAMmB,cAAcC,aAAahB,aAAaY;IAC9C,MAAMK,kBAAkBD,aAAad,iBAAiBY;IACtD,MAAMI,yBAAyBF,aAAaZ,wBAAwBK;IACpE,MAAMU,WAAWC,IAAAA,2BAAoB;IACrC,IAAIC;IACJ,MAAM,EAAEC,UAAU,EAAEC,IAAI,EAAE,GAAGC,IAAAA,8DAA8B,EAAC;QACxDZ,OAAOG;QACPJ;QACAc,oBAAoB,AAACJ,CAAAA,mCAAmCF,SAASO,sBAAsB,AAAD,MAAO,QAAQL,qCAAqC,KAAK,IAAIA,mCAAmC,CAAC;IAC3L;IACA,IAAIM,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;QACvC,sDAAsD;QACtDxB,QAAMyB,SAAS,CAAC;YACZ,IAAIf,gBAAgBgB,WAAW;gBAC3B,sCAAsC;gBACtCC,QAAQC,IAAI,CAAC;oBACT;oBACA;iBACH,CAACC,IAAI,CAAC;YACX;QACJ,uDAAuD;QACvD,GAAG,EAAE;IACT;IACA,OAAO;QACH1B;QACA,gEAAgE;QAChEC,2BAA2BS;QAC3BR;QACAC;QACAC,OAAOG;QACP,gEAAgE;QAChEF,oBAAoBI;QACpBkB,gBAAgBb;QAChBc,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;YAC3C,GAAG5C,KAAK;YACRc;YACAb,KAAK4C,IAAAA,6BAAa,EAAC5C,KAAK6C,IAAAA,6BAAe,EAAC;gBACpC/B;YACJ;QACJ,IAAI;YACAgC,aAAa;QACjB;QACAC,kBAAkB;YACdC,SAAStB;YACTuB,YAAY;gBACR,GAAG3B,SAASO,sBAAsB;gBAClCqB,IAAIzB;YACR;QACJ;IACJ;AACJ;AACA,SAASN,aAAagC,CAAC,EAAEC,CAAC;IACtB,kEAAkE;IAClE,IAAID,KAAKC,GAAG;QACR,OAAO;YACH,GAAGD,CAAC;YACJ,GAAGC,CAAC;QACR;IACJ;IACA,IAAID,GAAG;QACH,OAAOA;IACX;IACA,OAAOC;AACX;AACA,SAAShD;IACL,OAAOI,QAAMC,UAAU,CAAC4C,0CAAY;AACxC"}
|
@@ -4,12 +4,14 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
Object.defineProperty(exports, "useFluentProviderContextValues_unstable", {
|
6
6
|
enumerable: true,
|
7
|
-
get: ()
|
7
|
+
get: function() {
|
8
|
+
return useFluentProviderContextValues_unstable;
|
9
|
+
}
|
8
10
|
});
|
9
|
-
const
|
10
|
-
const _react = /*#__PURE__*/
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
12
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
11
13
|
function useFluentProviderContextValues_unstable(state) {
|
12
|
-
const { applyStylesToPortals
|
14
|
+
const { applyStylesToPortals, customStyleHooks_unstable, dir, root, targetDocument, theme, themeClassName, overrides_unstable } = state;
|
13
15
|
const provider = _react.useMemo(()=>({
|
14
16
|
dir,
|
15
17
|
targetDocument
|
@@ -19,6 +21,11 @@ function useFluentProviderContextValues_unstable(state) {
|
|
19
21
|
]);
|
20
22
|
// "Tooltip" component mutates an object in this context, instance should be stable
|
21
23
|
const [tooltip] = _react.useState(()=>({}));
|
24
|
+
const iconDirection = _react.useMemo(()=>({
|
25
|
+
textDirection: dir
|
26
|
+
}), [
|
27
|
+
dir
|
28
|
+
]);
|
22
29
|
return {
|
23
30
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
24
31
|
customStyleHooks_unstable,
|
@@ -26,6 +33,7 @@ function useFluentProviderContextValues_unstable(state) {
|
|
26
33
|
overrides_unstable,
|
27
34
|
provider,
|
28
35
|
textDirection: dir,
|
36
|
+
iconDirection,
|
29
37
|
tooltip,
|
30
38
|
theme,
|
31
39
|
themeClassName: applyStylesToPortals ? root.className : themeClassName
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useFluentProviderContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useFluentProviderContextValues_unstable(state) {\n const { applyStylesToPortals
|
1
|
+
{"version":3,"sources":["useFluentProviderContextValues.js"],"sourcesContent":["import * as React from 'react';\nexport function useFluentProviderContextValues_unstable(state) {\n const { applyStylesToPortals, // eslint-disable-next-line @typescript-eslint/naming-convention\n customStyleHooks_unstable, dir, root, targetDocument, theme, themeClassName, // eslint-disable-next-line @typescript-eslint/naming-convention\n overrides_unstable } = state;\n const provider = React.useMemo(()=>({\n dir,\n targetDocument\n }), [\n dir,\n targetDocument\n ]);\n // \"Tooltip\" component mutates an object in this context, instance should be stable\n const [tooltip] = React.useState(()=>({}));\n const iconDirection = React.useMemo(()=>({\n textDirection: dir\n }), [\n 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":["useFluentProviderContextValues_unstable","state","applyStylesToPortals","customStyleHooks_unstable","dir","root","targetDocument","theme","themeClassName","overrides_unstable","provider","React","useMemo","tooltip","useState","iconDirection","textDirection","className"],"mappings":";;;;+BACgBA;;;eAAAA;;;;iEADO;AAChB,SAASA,wCAAwCC,KAAK;IACzD,MAAM,EAAEC,oBAAoB,EAC5BC,yBAAyB,EAAEC,GAAG,EAAEC,IAAI,EAAEC,cAAc,EAAEC,KAAK,EAAEC,cAAc,EAC3EC,kBAAkB,EAAE,GAAGR;IACvB,MAAMS,WAAWC,OAAMC,OAAO,CAAC,IAAK,CAAA;YAC5BR;YACAE;QACJ,CAAA,GAAI;QACJF;QACAE;KACH;IACD,mFAAmF;IACnF,MAAM,CAACO,QAAQ,GAAGF,OAAMG,QAAQ,CAAC,IAAK,CAAA,CAAC,CAAA;IACvC,MAAMC,gBAAgBJ,OAAMC,OAAO,CAAC,IAAK,CAAA;YACjCI,eAAeZ;QACnB,CAAA,GAAI;QACJA;KACH;IACD,OAAO;QACH,gEAAgE;QAChED;QACA,gEAAgE;QAChEM;QACAC;QACAM,eAAeZ;QACfW;QACAF;QACAN;QACAC,gBAAgBN,uBAAuBG,KAAKY,SAAS,GAAGT;IAC5D;AACJ"}
|
@@ -9,15 +9,19 @@ function _export(target, all) {
|
|
9
9
|
});
|
10
10
|
}
|
11
11
|
_export(exports, {
|
12
|
-
fluentProviderClassNames: ()
|
13
|
-
|
12
|
+
fluentProviderClassNames: function() {
|
13
|
+
return fluentProviderClassNames;
|
14
|
+
},
|
15
|
+
useFluentProviderStyles_unstable: function() {
|
16
|
+
return useFluentProviderStyles_unstable;
|
17
|
+
}
|
14
18
|
});
|
15
19
|
const _core = require("@griffel/core");
|
16
20
|
const _react = require("@griffel/react");
|
17
21
|
const fluentProviderClassNames = {
|
18
22
|
root: 'fui-FluentProvider'
|
19
23
|
};
|
20
|
-
const useStyles = /*#__PURE__*/ (0, _core
|
24
|
+
const useStyles = /*#__PURE__*/ (0, _core.__styles)({
|
21
25
|
root: {
|
22
26
|
sj55zd: "f19n0e5",
|
23
27
|
De3pzq: "fxugw4r",
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useFluentProviderStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const fluentProviderClassNames = {\n root: 'fui-FluentProvider'\n};\nconst useStyles = /*#__PURE__*/__styles({\n root: {\n sj55zd: \"f19n0e5\",\n De3pzq: \"fxugw4r\",\n fsow6f: [\"f1o700av\", \"fes3tcz\"],\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fkhj508\",\n Bhrd7zp: \"figsok6\",\n Bg96gwp: \"f1i3iumi\"\n }\n}, {\n d: [\".f19n0e5{color:var(--colorNeutralForeground1);}\", \".fxugw4r{background-color:var(--colorNeutralBackground1);}\", \".f1o700av{text-align:left;}\", \".fes3tcz{text-align:right;}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\"]\n});\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = state => {\n const renderer = useRenderer_unstable();\n const styles = useStyles({\n dir: state.dir,\n renderer\n });\n state.root.className = mergeClasses(fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);\n return state;\n};\n//# sourceMappingURL=useFluentProviderStyles.styles.js.map"],"names":["fluentProviderClassNames","useFluentProviderStyles_unstable","root","useStyles","__styles","sj55zd","De3pzq","fsow6f","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","state","renderer","useRenderer_unstable","styles","dir","className","mergeClasses","themeClassName"],"mappings":";;;;;;;;;;;IAGaA,wBAAwB
|
1
|
+
{"version":3,"sources":["useFluentProviderStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const fluentProviderClassNames = {\n root: 'fui-FluentProvider'\n};\nconst useStyles = /*#__PURE__*/__styles({\n root: {\n sj55zd: \"f19n0e5\",\n De3pzq: \"fxugw4r\",\n fsow6f: [\"f1o700av\", \"fes3tcz\"],\n Bahqtrf: \"fk6fouc\",\n Be2twd7: \"fkhj508\",\n Bhrd7zp: \"figsok6\",\n Bg96gwp: \"f1i3iumi\"\n }\n}, {\n d: [\".f19n0e5{color:var(--colorNeutralForeground1);}\", \".fxugw4r{background-color:var(--colorNeutralBackground1);}\", \".f1o700av{text-align:left;}\", \".fes3tcz{text-align:right;}\", \".fk6fouc{font-family:var(--fontFamilyBase);}\", \".fkhj508{font-size:var(--fontSizeBase300);}\", \".figsok6{font-weight:var(--fontWeightRegular);}\", \".f1i3iumi{line-height:var(--lineHeightBase300);}\"]\n});\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = state => {\n const renderer = useRenderer_unstable();\n const styles = useStyles({\n dir: state.dir,\n renderer\n });\n state.root.className = mergeClasses(fluentProviderClassNames.root, state.themeClassName, styles.root, state.root.className);\n return state;\n};\n//# sourceMappingURL=useFluentProviderStyles.styles.js.map"],"names":["fluentProviderClassNames","useFluentProviderStyles_unstable","root","useStyles","__styles","sj55zd","De3pzq","fsow6f","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","state","renderer","useRenderer_unstable","styles","dir","className","mergeClasses","themeClassName"],"mappings":";;;;;;;;;;;IAGaA,wBAAwB;eAAxBA;;IAiBAC,gCAAgC;eAAhCA;;;sBApB0B;uBACF;AAE9B,MAAMD,2BAA2B;IACtCE,MAAM;AACR;AACA,MAAMC,YAAY,WAAW,GAAEC,IAAAA,cAAQ,EAAC;IACtCF,MAAM;QACJG,QAAQ;QACRC,QAAQ;QACRC,QAAQ;YAAC;YAAY;SAAU;QAC/BC,SAAS;QACTC,SAAS;QACTC,SAAS;QACTC,SAAS;IACX;AACF,GAAG;IACDC,GAAG;QAAC;QAAmD;QAA8D;QAA+B;QAA+B;QAAgD;QAA+C;QAAmD;KAAmD;AAC1X;AAEO,MAAMX,mCAAmCY,CAAAA;IAC9C,MAAMC,WAAWC,IAAAA,2BAAoB;IACrC,MAAMC,SAASb,UAAU;QACvBc,KAAKJ,MAAMI,GAAG;QACdH;IACF;IACAD,MAAMX,IAAI,CAACgB,SAAS,GAAGC,IAAAA,kBAAY,EAACnB,yBAAyBE,IAAI,EAAEW,MAAMO,cAAc,EAAEJ,OAAOd,IAAI,EAAEW,MAAMX,IAAI,CAACgB,SAAS;IAC1H,OAAOL;AACT,GACA,0DAA0D"}
|
@@ -4,14 +4,16 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
});
|
5
5
|
Object.defineProperty(exports, "useFluentProviderThemeStyleTag", {
|
6
6
|
enumerable: true,
|
7
|
-
get: ()
|
7
|
+
get: function() {
|
8
|
+
return useFluentProviderThemeStyleTag;
|
9
|
+
}
|
8
10
|
});
|
9
|
-
const
|
10
|
-
const
|
11
|
-
const _react = /*#__PURE__*/
|
12
|
-
const
|
11
|
+
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
12
|
+
const _reactutilities = require("@fluentui/react-utilities");
|
13
|
+
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
14
|
+
const _useFluentProviderStylesstyles = require("./useFluentProviderStyles.styles");
|
13
15
|
// String concatenation is used to prevent bundlers to complain with older versions of React
|
14
|
-
const useInsertionEffect = _react['useInsertion' + 'Effect'] ? _react['useInsertion' + 'Effect'] :
|
16
|
+
const useInsertionEffect = _react['useInsertion' + 'Effect'] ? _react['useInsertion' + 'Effect'] : _reactutilities.useIsomorphicLayoutEffect;
|
15
17
|
const createStyleTag = (target, elementAttributes)=>{
|
16
18
|
if (!target) {
|
17
19
|
return undefined;
|
@@ -36,9 +38,9 @@ const insertSheet = (tag, rule)=>{
|
|
36
38
|
}
|
37
39
|
};
|
38
40
|
const useFluentProviderThemeStyleTag = (options)=>{
|
39
|
-
const { targetDocument
|
41
|
+
const { targetDocument, theme, rendererAttributes } = options;
|
40
42
|
const styleTag = _react.useRef();
|
41
|
-
const styleTagId = (0,
|
43
|
+
const styleTagId = (0, _reactutilities.useId)(_useFluentProviderStylesstyles.fluentProviderClassNames.root);
|
42
44
|
const styleElementAttributes = rendererAttributes;
|
43
45
|
const cssVarsAsString = _react.useMemo(()=>{
|
44
46
|
return theme ? Object.keys(theme).reduce((cssVarRule, cssVar)=>{
|
@@ -57,7 +59,7 @@ const useFluentProviderThemeStyleTag = (options)=>{
|
|
57
59
|
// this allows to do checks with strict mode enabled as .useEffect() will be called with incremented IDs because
|
58
60
|
// of double render.
|
59
61
|
if (targetDocument) {
|
60
|
-
const providerSelector = `.${
|
62
|
+
const providerSelector = `.${_useFluentProviderStylesstyles.fluentProviderClassNames.root}.${styleTagId}`;
|
61
63
|
const providerElements = targetDocument.querySelectorAll(providerSelector);
|
62
64
|
// In SSR, we will have DOM upfront. To avoid false positives the check on nested style tag is performed
|
63
65
|
const isSSR = targetDocument.querySelector(`${providerSelector} > style[id="${styleTagId}"]`) !== null;
|
@@ -78,8 +80,9 @@ const useFluentProviderThemeStyleTag = (options)=>{
|
|
78
80
|
}
|
79
81
|
useHandleSSRStyleElements(targetDocument, styleTagId);
|
80
82
|
useInsertionEffect(()=>{
|
83
|
+
var _targetDocument;
|
81
84
|
// The style element could already have been created during SSR - no need to recreate it
|
82
|
-
const ssrStyleElement = targetDocument === null ||
|
85
|
+
const ssrStyleElement = (_targetDocument = targetDocument) === null || _targetDocument === void 0 ? void 0 : _targetDocument.getElementById(styleTagId);
|
83
86
|
if (ssrStyleElement) {
|
84
87
|
styleTag.current = ssrStyleElement;
|
85
88
|
} else {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["useFluentProviderThemeStyleTag.js"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { fluentProviderClassNames } from './useFluentProviderStyles.styles';\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : useIsomorphicLayoutEffect;\nconst createStyleTag = (target, elementAttributes)=>{\n if (!target) {\n return undefined;\n }\n const tag = target.createElement('style');\n Object.keys(elementAttributes).forEach((attrName)=>{\n tag.setAttribute(attrName, elementAttributes[attrName]);\n });\n target.head.appendChild(tag);\n return tag;\n};\nconst insertSheet = (tag, rule)=>{\n const sheet = tag.sheet;\n if (sheet) {\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n sheet.insertRule(rule, 0);\n } else if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n }\n};\n/**\n * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n * @internal\n * @returns CSS class to apply the rule\n */ export const useFluentProviderThemeStyleTag = (options)=>{\n const { targetDocument
|
1
|
+
{"version":3,"sources":["useFluentProviderThemeStyleTag.js"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { fluentProviderClassNames } from './useFluentProviderStyles.styles';\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : useIsomorphicLayoutEffect;\nconst createStyleTag = (target, elementAttributes)=>{\n if (!target) {\n return undefined;\n }\n const tag = target.createElement('style');\n Object.keys(elementAttributes).forEach((attrName)=>{\n tag.setAttribute(attrName, elementAttributes[attrName]);\n });\n target.head.appendChild(tag);\n return tag;\n};\nconst insertSheet = (tag, rule)=>{\n const sheet = tag.sheet;\n if (sheet) {\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n sheet.insertRule(rule, 0);\n } else if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n }\n};\n/**\n * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n * @internal\n * @returns CSS class to apply the rule\n */ export const useFluentProviderThemeStyleTag = (options)=>{\n const { targetDocument, theme, rendererAttributes } = options;\n const styleTag = React.useRef();\n const styleTagId = useId(fluentProviderClassNames.root);\n const styleElementAttributes = rendererAttributes;\n const cssVarsAsString = React.useMemo(()=>{\n return theme ? Object.keys(theme).reduce((cssVarRule, cssVar)=>{\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '') : '';\n }, [\n theme\n ]);\n const rule = `.${styleTagId} { ${cssVarsAsString} }`;\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n React.useMemo(()=>{\n // Heads up!\n // .useMemo() is used because it is called during render and DOM for _current_ component is not mounted yet. Also,\n // this allows to do checks with strict mode enabled as .useEffect() will be called with incremented IDs because\n // of double render.\n if (targetDocument) {\n const providerSelector = `.${fluentProviderClassNames.root}.${styleTagId}`;\n const providerElements = targetDocument.querySelectorAll(providerSelector);\n // In SSR, we will have DOM upfront. To avoid false positives the check on nested style tag is performed\n const isSSR = targetDocument.querySelector(`${providerSelector} > style[id=\"${styleTagId}\"]`) !== null;\n const elementsCount = isSSR ? 1 : 0;\n if (providerElements.length > elementsCount) {\n // eslint-disable-next-line no-console\n console.error([\n '@fluentui/react-provider: There are conflicting ids in your DOM.',\n 'Please make sure that you configured your application properly.',\n '\\n',\n '\\n',\n 'Configuration guide: https://aka.ms/fluentui-conflicting-ids'\n ].join(' '));\n }\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n }\n useHandleSSRStyleElements(targetDocument, styleTagId);\n useInsertionEffect(()=>{\n var _targetDocument;\n // The style element could already have been created during SSR - no need to recreate it\n const ssrStyleElement = (_targetDocument = targetDocument) === null || _targetDocument === void 0 ? void 0 : _targetDocument.getElementById(styleTagId);\n if (ssrStyleElement) {\n styleTag.current = ssrStyleElement;\n } else {\n styleTag.current = createStyleTag(targetDocument, {\n ...styleElementAttributes,\n id: styleTagId\n });\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n }\n }\n return ()=>{\n var _styleTag_current;\n (_styleTag_current = styleTag.current) === null || _styleTag_current === void 0 ? void 0 : _styleTag_current.remove();\n };\n }, [\n styleTagId,\n targetDocument,\n rule,\n styleElementAttributes\n ]);\n return {\n styleTagId,\n rule\n };\n};\nfunction useHandleSSRStyleElements(targetDocument, styleTagId) {\n // Using a state factory so that this logic only runs once per render\n // Each FluentProvider can create its own style element during SSR as a slot\n // Moves all theme style elements to document head during render to avoid hydration errors.\n // Should be strict mode safe since the logic is idempotent.\n React.useState(()=>{\n if (!targetDocument) {\n return;\n }\n const themeStyleElement = targetDocument.getElementById(styleTagId);\n if (themeStyleElement) {\n targetDocument.head.append(themeStyleElement);\n }\n });\n}\n"],"names":["useFluentProviderThemeStyleTag","useInsertionEffect","React","useIsomorphicLayoutEffect","createStyleTag","target","elementAttributes","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","head","appendChild","insertSheet","rule","sheet","cssRules","length","deleteRule","insertRule","process","env","NODE_ENV","console","error","options","targetDocument","theme","rendererAttributes","styleTag","useRef","styleTagId","useId","fluentProviderClassNames","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","providerSelector","providerElements","querySelectorAll","isSSR","querySelector","elementsCount","join","useHandleSSRStyleElements","_targetDocument","ssrStyleElement","getElementById","current","id","_styleTag_current","remove","useState","themeStyleElement","append"],"mappings":"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"}
|
package/lib-commonjs/index.js
CHANGED
@@ -9,12 +9,26 @@ function _export(target, all) {
|
|
9
9
|
});
|
10
10
|
}
|
11
11
|
_export(exports, {
|
12
|
-
fluentProviderClassNames: ()
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
12
|
+
fluentProviderClassNames: function() {
|
13
|
+
return _FluentProvider.fluentProviderClassNames;
|
14
|
+
},
|
15
|
+
FluentProvider: function() {
|
16
|
+
return _FluentProvider.FluentProvider;
|
17
|
+
},
|
18
|
+
renderFluentProvider_unstable: function() {
|
19
|
+
return _FluentProvider.renderFluentProvider_unstable;
|
20
|
+
},
|
21
|
+
useFluentProviderContextValues_unstable: function() {
|
22
|
+
return _FluentProvider.useFluentProviderContextValues_unstable;
|
23
|
+
},
|
24
|
+
useFluentProvider_unstable: function() {
|
25
|
+
return _FluentProvider.useFluentProvider_unstable;
|
26
|
+
},
|
27
|
+
useFluentProviderStyles_unstable: function() {
|
28
|
+
return _FluentProvider.useFluentProviderStyles_unstable;
|
29
|
+
},
|
30
|
+
useFluentProviderThemeStyleTag: function() {
|
31
|
+
return _FluentProvider.useFluentProviderThemeStyleTag;
|
32
|
+
}
|
19
33
|
});
|
20
|
-
const
|
34
|
+
const _FluentProvider = require("./FluentProvider");
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.js"],"sourcesContent":["export { fluentProviderClassNames, FluentProvider, renderFluentProvider_unstable, useFluentProviderContextValues_unstable, useFluentProvider_unstable, useFluentProviderStyles_unstable, useFluentProviderThemeStyleTag } from './FluentProvider';\n"],"names":["fluentProviderClassNames","FluentProvider","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag"],"mappings":";;;;;;;;;;;IAASA,wBAAwB,
|
1
|
+
{"version":3,"sources":["index.js"],"sourcesContent":["export { fluentProviderClassNames, FluentProvider, renderFluentProvider_unstable, useFluentProviderContextValues_unstable, useFluentProvider_unstable, useFluentProviderStyles_unstable, useFluentProviderThemeStyleTag } from './FluentProvider';\n"],"names":["fluentProviderClassNames","FluentProvider","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag"],"mappings":";;;;;;;;;;;IAASA,wBAAwB;eAAxBA,wCAAwB;;IAAEC,cAAc;eAAdA,8BAAc;;IAAEC,6BAA6B;eAA7BA,6CAA6B;;IAAEC,uCAAuC;eAAvCA,uDAAuC;;IAAEC,0BAA0B;eAA1BA,0CAA0B;;IAAEC,gCAAgC;eAAhCA,gDAAgC;;IAAEC,8BAA8B;eAA9BA,8CAA8B;;;gCAAQ"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-provider",
|
3
|
-
"version": "9.
|
3
|
+
"version": "9.8.1",
|
4
4
|
"description": "Fluent UI React provider component",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -33,20 +33,21 @@
|
|
33
33
|
"@fluentui/scripts-tasks": "*"
|
34
34
|
},
|
35
35
|
"dependencies": {
|
36
|
-
"@fluentui/react-
|
37
|
-
"@fluentui/react-
|
38
|
-
"@fluentui/react-
|
39
|
-
"@fluentui/react-
|
40
|
-
"@fluentui/react-
|
36
|
+
"@fluentui/react-icons": "^2.0.207",
|
37
|
+
"@fluentui/react-shared-contexts": "^9.7.3",
|
38
|
+
"@fluentui/react-tabster": "^9.12.6",
|
39
|
+
"@fluentui/react-theme": "^9.1.12",
|
40
|
+
"@fluentui/react-utilities": "^9.13.1",
|
41
|
+
"@fluentui/react-jsx-runtime": "^9.0.4",
|
41
42
|
"@griffel/core": "^1.14.1",
|
42
43
|
"@griffel/react": "^1.5.14",
|
43
|
-
"@swc/helpers": "^0.
|
44
|
+
"@swc/helpers": "^0.5.1"
|
44
45
|
},
|
45
46
|
"peerDependencies": {
|
46
|
-
"@types/react": ">=16.
|
47
|
-
"@types/react-dom": ">=16.
|
48
|
-
"react": ">=16.
|
49
|
-
"react-dom": ">=16.
|
47
|
+
"@types/react": ">=16.14.0 <19.0.0",
|
48
|
+
"@types/react-dom": ">=16.14.0 <19.0.0",
|
49
|
+
"react": ">=16.14.0 <19.0.0",
|
50
|
+
"react-dom": ">=16.14.0 <19.0.0"
|
50
51
|
},
|
51
52
|
"beachball": {
|
52
53
|
"disallowedChangeTypes": [
|