@fluentui/react-provider 9.3.5 → 9.4.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 +55 -1
- package/CHANGELOG.md +24 -2
- package/dist/index.d.ts +8 -2
- 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 +7 -2
- package/lib/components/FluentProvider/renderFluentProvider.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProvider.js +8 -1
- package/lib/components/FluentProvider/useFluentProvider.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProviderContextValues.js +5 -0
- package/lib/components/FluentProvider/useFluentProviderContextValues.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProviderStyles.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-amd/components/FluentProvider/FluentProvider.types.js.map +1 -1
- package/lib-amd/components/FluentProvider/renderFluentProvider.js +8 -4
- package/lib-amd/components/FluentProvider/renderFluentProvider.js.map +1 -1
- package/lib-amd/components/FluentProvider/useFluentProvider.js +8 -1
- package/lib-amd/components/FluentProvider/useFluentProvider.js.map +1 -1
- package/lib-amd/components/FluentProvider/useFluentProviderContextValues.js +7 -1
- package/lib-amd/components/FluentProvider/useFluentProviderContextValues.js.map +1 -1
- package/lib-amd/index.js.map +1 -1
- package/lib-commonjs/FluentProvider.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/FluentProvider.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/FluentProvider.types.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/index.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/renderFluentProvider.js +6 -1
- package/lib-commonjs/components/FluentProvider/renderFluentProvider.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProvider.js +7 -0
- package/lib-commonjs/components/FluentProvider/useFluentProvider.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.js +5 -0
- package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.json
CHANGED
|
@@ -2,7 +2,61 @@
|
|
|
2
2
|
"name": "@fluentui/react-provider",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
5
|
+
"date": "Fri, 10 Mar 2023 07:11:11 GMT",
|
|
6
|
+
"tag": "@fluentui/react-provider_v9.4.1",
|
|
7
|
+
"version": "9.4.1",
|
|
8
|
+
"comments": {
|
|
9
|
+
"patch": [
|
|
10
|
+
{
|
|
11
|
+
"author": "beachball",
|
|
12
|
+
"package": "@fluentui/react-provider",
|
|
13
|
+
"comment": "Bump @fluentui/react-tabster to v9.5.5",
|
|
14
|
+
"commit": "3cefc38eed17e3f37cd38fca9099cc9d700cd584"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-provider",
|
|
19
|
+
"comment": "Bump @fluentui/react-utilities to v9.6.2",
|
|
20
|
+
"commit": "3cefc38eed17e3f37cd38fca9099cc9d700cd584"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Wed, 08 Mar 2023 17:42:40 GMT",
|
|
27
|
+
"tag": "@fluentui/react-provider_v9.4.0",
|
|
28
|
+
"version": "9.4.0",
|
|
29
|
+
"comments": {
|
|
30
|
+
"minor": [
|
|
31
|
+
{
|
|
32
|
+
"author": "gcox@microsoft.com",
|
|
33
|
+
"package": "@fluentui/react-provider",
|
|
34
|
+
"commit": "27c3cfe8a95bd26541c7c47ad2fd7fbc8ea332df",
|
|
35
|
+
"comment": "feat: Added customstylehooks property"
|
|
36
|
+
},
|
|
37
|
+
{
|
|
38
|
+
"author": "beachball",
|
|
39
|
+
"package": "@fluentui/react-provider",
|
|
40
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.3.0",
|
|
41
|
+
"commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"author": "beachball",
|
|
45
|
+
"package": "@fluentui/react-provider",
|
|
46
|
+
"comment": "Bump @fluentui/react-tabster to v9.5.4",
|
|
47
|
+
"commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"author": "beachball",
|
|
51
|
+
"package": "@fluentui/react-provider",
|
|
52
|
+
"comment": "Bump @fluentui/react-utilities to v9.6.1",
|
|
53
|
+
"commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
|
|
54
|
+
}
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"date": "Wed, 15 Feb 2023 11:44:52 GMT",
|
|
6
60
|
"tag": "@fluentui/react-provider_v9.3.5",
|
|
7
61
|
"version": "9.3.5",
|
|
8
62
|
"comments": {
|
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,34 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-provider
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Fri, 10 Mar 2023 07:11:11 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.4.1)
|
|
8
|
+
|
|
9
|
+
Fri, 10 Mar 2023 07:11:11 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.4.0..@fluentui/react-provider_v9.4.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-tabster to v9.5.5 ([PR #27157](https://github.com/microsoft/fluentui/pull/27157) by beachball)
|
|
15
|
+
- Bump @fluentui/react-utilities to v9.6.2 ([PR #27157](https://github.com/microsoft/fluentui/pull/27157) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.4.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.4.0)
|
|
18
|
+
|
|
19
|
+
Wed, 08 Mar 2023 17:42:40 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.3.5..@fluentui/react-provider_v9.4.0)
|
|
21
|
+
|
|
22
|
+
### Minor changes
|
|
23
|
+
|
|
24
|
+
- feat: Added customstylehooks property ([PR #26943](https://github.com/microsoft/fluentui/pull/26943) by gcox@microsoft.com)
|
|
25
|
+
- Bump @fluentui/react-shared-contexts to v9.3.0 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
|
|
26
|
+
- Bump @fluentui/react-tabster to v9.5.4 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
|
|
27
|
+
- Bump @fluentui/react-utilities to v9.6.1 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
|
|
28
|
+
|
|
7
29
|
## [9.3.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.3.5)
|
|
8
30
|
|
|
9
|
-
Wed, 15 Feb 2023 11:
|
|
31
|
+
Wed, 15 Feb 2023 11:44:52 GMT
|
|
10
32
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.3.4..@fluentui/react-provider_v9.3.5)
|
|
11
33
|
|
|
12
34
|
### Patches
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ComponentProps } from '@fluentui/react-utilities';
|
|
2
2
|
import type { ComponentState } from '@fluentui/react-utilities';
|
|
3
|
+
import { CustomStyleHooksContextValue_unstable } from '@fluentui/react-shared-contexts';
|
|
3
4
|
import { OverridesContextValue_unstable } from '@fluentui/react-shared-contexts';
|
|
4
5
|
import type { PartialTheme } from '@fluentui/react-theme';
|
|
5
6
|
import type { ProviderContextValue_unstable } from '@fluentui/react-shared-contexts';
|
|
@@ -13,6 +14,7 @@ import type { TooltipVisibilityContextValue_unstable } from '@fluentui/react-sha
|
|
|
13
14
|
|
|
14
15
|
export declare const FluentProvider: React_2.ForwardRefExoticComponent<Omit<ComponentProps<FluentProviderSlots, "root">, "dir"> & {
|
|
15
16
|
applyStylesToPortals?: boolean | undefined;
|
|
17
|
+
customStyleHooks_unstable?: Partial<CustomStyleHooksContextValue_unstable> | undefined;
|
|
16
18
|
dir?: "ltr" | "rtl" | undefined;
|
|
17
19
|
targetDocument?: Document | undefined;
|
|
18
20
|
theme?: Partial<Theme> | undefined;
|
|
@@ -21,19 +23,23 @@ export declare const FluentProvider: React_2.ForwardRefExoticComponent<Omit<Comp
|
|
|
21
23
|
|
|
22
24
|
export declare const fluentProviderClassNames: SlotClassNames<FluentProviderSlots>;
|
|
23
25
|
|
|
24
|
-
export declare type FluentProviderContextValues = Pick<FluentProviderState, 'theme' | 'overrides_unstable'> & {
|
|
26
|
+
export declare type FluentProviderContextValues = Pick<FluentProviderState, 'customStyleHooks_unstable' | 'theme' | 'overrides_unstable'> & {
|
|
25
27
|
provider: ProviderContextValue_unstable;
|
|
26
28
|
themeClassName: ThemeClassNameContextValue_unstable;
|
|
27
29
|
textDirection: 'ltr' | 'rtl';
|
|
28
30
|
tooltip: TooltipVisibilityContextValue_unstable;
|
|
29
31
|
};
|
|
30
32
|
|
|
33
|
+
export declare type FluentProviderCustomStyleHooks = Partial<CustomStyleHooksContextValue_unstable>;
|
|
34
|
+
|
|
31
35
|
export declare type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir'> & {
|
|
32
36
|
/**
|
|
33
37
|
* Passes styles applied to a component down to portals if enabled.
|
|
34
38
|
* @default true
|
|
35
39
|
*/
|
|
36
40
|
applyStylesToPortals?: boolean;
|
|
41
|
+
/** Sets the hooks for custom styling components. */
|
|
42
|
+
customStyleHooks_unstable?: FluentProviderCustomStyleHooks;
|
|
37
43
|
/** Sets the direction of text & generated styles. */
|
|
38
44
|
dir?: 'ltr' | 'rtl';
|
|
39
45
|
/** Provides the document, can be undefined during SSR render. */
|
|
@@ -47,7 +53,7 @@ export declare type FluentProviderSlots = {
|
|
|
47
53
|
root: Slot<'div'>;
|
|
48
54
|
};
|
|
49
55
|
|
|
50
|
-
export declare type FluentProviderState = ComponentState<FluentProviderSlots> & Pick<FluentProviderProps, 'targetDocument'> & Required<Pick<FluentProviderProps, 'applyStylesToPortals' | 'dir' | 'overrides_unstable'>> & {
|
|
56
|
+
export declare type FluentProviderState = ComponentState<FluentProviderSlots> & Pick<FluentProviderProps, 'targetDocument'> & Required<Pick<FluentProviderProps, 'applyStylesToPortals' | 'customStyleHooks_unstable' | 'dir' | 'overrides_unstable'>> & {
|
|
51
57
|
theme: ThemeContextValue_unstable;
|
|
52
58
|
themeClassName: string;
|
|
53
59
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","renderFluentProvider_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderContextValues_unstable","FluentProvider","forwardRef","props","ref","state","contextValues","displayName"],"sources":["../src/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderFluentProvider_unstable } from './renderFluentProvider';\nimport { useFluentProvider_unstable } from './useFluentProvider';\nimport { useFluentProviderStyles_unstable } from './useFluentProviderStyles';\nimport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nimport type { FluentProviderProps } from './FluentProvider.types';\n\nexport const FluentProvider = React.forwardRef<HTMLElement, FluentProviderProps>((props, ref) => {\n const state = useFluentProvider_unstable(props, ref);\n useFluentProviderStyles_unstable(state);\n\n const contextValues = useFluentProviderContextValues_unstable(state);\n\n return renderFluentProvider_unstable(state, contextValues);\n});\n\nFluentProvider.displayName = 'FluentProvider';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,gCAAgC,QAAQ,2BAA2B;AAC5E,SAASC,uCAAuC,QAAQ,kCAAkC;AAG1F,OAAO,MAAMC,cAAc,gBAAGL,KAAK,CAACM,UAAU,CAAmC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGP,0BAA0B,CAACK,KAAK,EAAEC,GAAG,CAAC;EACpDL,gCAAgC,CAACM,KAAK,CAAC;EAEvC,MAAMC,aAAa,GAAGN,uCAAuC,CAACK,KAAK,CAAC;EAEpE,OAAOR,6BAA6B,CAACQ,KAAK,EAAEC,aAAa,CAAC;AAC5D,CAAC,CAAC;AAEFL,cAAc,CAACM,WAAW,GAAG,gBAAgB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FluentProvider.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts"],"names":[],"mappings":"","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} 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\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 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
|
|
1
|
+
{"version":3,"file":"FluentProvider.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts"],"names":[],"mappings":"","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 = Partial<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\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"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { TextDirectionProvider } from '@griffel/react';
|
|
3
|
-
import { OverridesProvider_unstable as OverridesProvider, Provider_unstable as Provider, TooltipVisibilityProvider_unstable as TooltipVisibilityProvider, ThemeProvider_unstable as ThemeProvider, ThemeClassNameProvider_unstable as ThemeClassNameProvider } from '@fluentui/react-shared-contexts';
|
|
3
|
+
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';
|
|
4
4
|
import { getSlots } from '@fluentui/react-utilities';
|
|
5
5
|
/**
|
|
6
6
|
* Render the final JSX of FluentProvider
|
|
@@ -10,12 +10,17 @@ export const renderFluentProvider_unstable = (state, contextValues) => {
|
|
|
10
10
|
slots,
|
|
11
11
|
slotProps
|
|
12
12
|
} = getSlots(state);
|
|
13
|
+
// Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable
|
|
14
|
+
// instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is
|
|
15
|
+
// Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>
|
|
13
16
|
return /*#__PURE__*/React.createElement(Provider, {
|
|
14
17
|
value: contextValues.provider
|
|
15
18
|
}, /*#__PURE__*/React.createElement(ThemeProvider, {
|
|
16
19
|
value: contextValues.theme
|
|
17
20
|
}, /*#__PURE__*/React.createElement(ThemeClassNameProvider, {
|
|
18
21
|
value: contextValues.themeClassName
|
|
22
|
+
}, /*#__PURE__*/React.createElement(CustomStyleHooksProvider, {
|
|
23
|
+
value: contextValues.customStyleHooks_unstable
|
|
19
24
|
}, /*#__PURE__*/React.createElement(TooltipVisibilityProvider, {
|
|
20
25
|
value: contextValues.tooltip
|
|
21
26
|
}, /*#__PURE__*/React.createElement(TextDirectionProvider, {
|
|
@@ -24,6 +29,6 @@ export const renderFluentProvider_unstable = (state, contextValues) => {
|
|
|
24
29
|
value: contextValues.overrides_unstable
|
|
25
30
|
}, /*#__PURE__*/React.createElement(slots.root, {
|
|
26
31
|
...slotProps.root
|
|
27
|
-
}, state.root.children)))))));
|
|
32
|
+
}, state.root.children))))))));
|
|
28
33
|
};
|
|
29
34
|
//# sourceMappingURL=renderFluentProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","TextDirectionProvider","OverridesProvider_unstable","OverridesProvider","Provider_unstable","Provider","TooltipVisibilityProvider_unstable","TooltipVisibilityProvider","ThemeProvider_unstable","ThemeProvider","ThemeClassNameProvider_unstable","ThemeClassNameProvider","CustomStyleHooksProvider_unstable","CustomStyleHooksProvider","getSlots","renderFluentProvider_unstable","state","contextValues","slots","slotProps","createElement","value","provider","theme","themeClassName","customStyleHooks_unstable","tooltip","dir","textDirection","overrides_unstable","root","children"],"sources":["../src/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\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 { getSlots } from '@fluentui/react-utilities';\nimport type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n) => {\n const { slots, slotProps } = getSlots<FluentProviderSlots>(state);\n\n // 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 <OverridesProvider value={contextValues.overrides_unstable}>\n <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n </OverridesProvider>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </CustomStyleHooksProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,qBAAqB,QAAQ,gBAAgB;AACtD,SACEC,0BAA0B,IAAIC,iBAAiB,EAC/CC,iBAAiB,IAAIC,QAAQ,EAC7BC,kCAAkC,IAAIC,yBAAyB,EAC/DC,sBAAsB,IAAIC,aAAa,EACvCC,+BAA+B,IAAIC,sBAAsB,EACzDC,iCAAiC,IAAIC,wBAAwB,QAExD,iCAAiC;AACxC,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,6BAA6B,GAAGA,CAC3CC,KAA0B,EAC1BC,aAA0C,KACxC;EACF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,QAAQ,CAAsBE,KAAK,CAAC;EAEjE;EACA;EACA;EAEA,oBACEhB,KAAA,CAAAoB,aAAA,CAACf,QAAQ;IAACgB,KAAK,EAAEJ,aAAa,CAACK;EAAQ,gBACrCtB,KAAA,CAAAoB,aAAA,CAACX,aAAa;IAACY,KAAK,EAAEJ,aAAa,CAACM;EAAK,gBACvCvB,KAAA,CAAAoB,aAAA,CAACT,sBAAsB;IAACU,KAAK,EAAEJ,aAAa,CAACO;EAAc,gBACzDxB,KAAA,CAAAoB,aAAA,CAACP,wBAAwB;IACvBQ,KAAK,EAAEJ,aAAa,CAACQ;EAAmE,gBAExFzB,KAAA,CAAAoB,aAAA,CAACb,yBAAyB;IAACc,KAAK,EAAEJ,aAAa,CAACS;EAAO,gBACrD1B,KAAA,CAAAoB,aAAA,CAACnB,qBAAqB;IAAC0B,GAAG,EAAEV,aAAa,CAACW;EAAa,gBACrD5B,KAAA,CAAAoB,aAAA,CAACjB,iBAAiB;IAACkB,KAAK,EAAEJ,aAAa,CAACY;EAAkB,gBACxD7B,KAAA,CAAAoB,aAAA,CAACF,KAAK,CAACY,IAAI;IAAA,GAAKX,SAAS,CAACW;EAAI,GAAGd,KAAK,CAACc,IAAI,CAACC,QAAQ,CAAc,CAChD,CACE,CACE,CACH,CACJ,CACX,CACP;AAEf,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { useFocusVisible } from '@fluentui/react-tabster';
|
|
2
|
-
import { ThemeContext_unstable as ThemeContext, useFluent_unstable as useFluent, useOverrides_unstable as useOverrides } from '@fluentui/react-shared-contexts';
|
|
2
|
+
import { ThemeContext_unstable as ThemeContext, useFluent_unstable as useFluent, useOverrides_unstable as useOverrides, useCustomStyleHooks_unstable as useCustomStyleHooks } from '@fluentui/react-shared-contexts';
|
|
3
3
|
import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
|
|
4
4
|
import * as React from 'react';
|
|
5
5
|
import { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';
|
|
@@ -16,6 +16,7 @@ export const useFluentProvider_unstable = (props, ref) => {
|
|
|
16
16
|
const parentContext = useFluent();
|
|
17
17
|
const parentTheme = useTheme();
|
|
18
18
|
const parentOverrides = useOverrides();
|
|
19
|
+
const parentCustomStyleHooks = useCustomStyleHooks();
|
|
19
20
|
/**
|
|
20
21
|
* TODO: add merge functions to "dir" merge,
|
|
21
22
|
* nesting providers with the same "dir" should not add additional attributes to DOM
|
|
@@ -23,6 +24,8 @@ export const useFluentProvider_unstable = (props, ref) => {
|
|
|
23
24
|
*/
|
|
24
25
|
const {
|
|
25
26
|
applyStylesToPortals = true,
|
|
27
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
28
|
+
customStyleHooks_unstable,
|
|
26
29
|
dir = parentContext.dir,
|
|
27
30
|
targetDocument = parentContext.targetDocument,
|
|
28
31
|
theme,
|
|
@@ -30,6 +33,8 @@ export const useFluentProvider_unstable = (props, ref) => {
|
|
|
30
33
|
} = props;
|
|
31
34
|
const mergedTheme = shallowMerge(parentTheme, theme);
|
|
32
35
|
const mergedOverrides = shallowMerge(parentOverrides, overrides);
|
|
36
|
+
// parentCustomStyleHooks will not be a partial
|
|
37
|
+
const mergedCustomStyleHooks = shallowMerge(parentCustomStyleHooks, customStyleHooks_unstable);
|
|
33
38
|
React.useEffect(() => {
|
|
34
39
|
if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {
|
|
35
40
|
// eslint-disable-next-line no-console
|
|
@@ -43,6 +48,8 @@ export const useFluentProvider_unstable = (props, ref) => {
|
|
|
43
48
|
}, []);
|
|
44
49
|
return {
|
|
45
50
|
applyStylesToPortals,
|
|
51
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
52
|
+
customStyleHooks_unstable: mergedCustomStyleHooks,
|
|
46
53
|
dir,
|
|
47
54
|
targetDocument,
|
|
48
55
|
theme: mergedTheme,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["useFocusVisible","ThemeContext_unstable","ThemeContext","useFluent_unstable","useFluent","useOverrides_unstable","useOverrides","useCustomStyleHooks_unstable","useCustomStyleHooks","getNativeElementProps","useMergedRefs","React","useFluentProviderThemeStyleTag","useFluentProvider_unstable","props","ref","parentContext","parentTheme","useTheme","parentOverrides","parentCustomStyleHooks","applyStylesToPortals","customStyleHooks_unstable","dir","targetDocument","theme","overrides_unstable","overrides","mergedTheme","shallowMerge","mergedOverrides","mergedCustomStyleHooks","useEffect","process","env","NODE_ENV","undefined","console","warn","themeClassName","components","root","a","b","useContext"],"sources":["../src/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts"],"sourcesContent":["import { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n ThemeContext_unstable as ThemeContext,\n useFluent_unstable as useFluent,\n useOverrides_unstable as useOverrides,\n useCustomStyleHooks_unstable as useCustomStyleHooks,\n} from '@fluentui/react-shared-contexts';\nimport type {\n CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\n ThemeContextValue_unstable as ThemeContextValue,\n} from '@fluentui/react-shared-contexts';\n\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */\nexport const useFluentProvider_unstable = (\n props: FluentProviderProps,\n ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n const parentContext = useFluent();\n const parentTheme = useTheme();\n const parentOverrides = useOverrides();\n const parentCustomStyleHooks = useCustomStyleHooks();\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 const mergedTheme = shallowMerge(parentTheme, theme);\n\n const mergedOverrides = shallowMerge(parentOverrides, overrides);\n\n // parentCustomStyleHooks will not be a partial\n const mergedCustomStyleHooks = shallowMerge(\n parentCustomStyleHooks,\n customStyleHooks_unstable,\n ) as CustomStyleHooksContextValue;\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {\n // eslint-disable-next-line no-console\n console.warn(`\n FluentProvider: your \"theme\" is not defined !\n =============================================\n Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.\n `);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return {\n applyStylesToPortals,\n // 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: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),\n\n components: {\n root: 'div',\n },\n\n root: getNativeElementProps('div', {\n ...props,\n dir,\n ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>()),\n }),\n };\n};\n\nfunction 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"],"mappings":"AAAA,SAASA,eAAe,QAAQ,yBAAyB;AACzD,SACEC,qBAAqB,IAAIC,YAAY,EACrCC,kBAAkB,IAAIC,SAAS,EAC/BC,qBAAqB,IAAIC,YAAY,EACrCC,4BAA4B,IAAIC,mBAAmB,QAC9C,iCAAiC;AAMxC,SAASC,qBAAqB,EAAEC,aAAa,QAAQ,2BAA2B;AAChF,OAAO,KAAKC,KAAK,MAAM,OAAO;AAC9B,SAASC,8BAA8B,QAAQ,kCAAkC;AAGjF;;;;;;;;;AASA,OAAO,MAAMC,0BAA0B,GAAGA,CACxCC,KAA0B,EAC1BC,GAA2B,KACJ;EACvB,MAAMC,aAAa,GAAGZ,SAAS,EAAE;EACjC,MAAMa,WAAW,GAAGC,QAAQ,EAAE;EAC9B,MAAMC,eAAe,GAAGb,YAAY,EAAE;EACtC,MAAMc,sBAAsB,GAAGZ,mBAAmB,EAAE;EAEpD;;;;;EAKA,MAAM;IACJa,oBAAoB,GAAG,IAAI;IAC3B;IACAC,yBAAyB;IACzBC,GAAG,GAAGP,aAAa,CAACO,GAAG;IACvBC,cAAc,GAAGR,aAAa,CAACQ,cAAc;IAC7CC,KAAK;IACLC,kBAAkB,EAAEC,SAAS,GAAG;EAAE,CACnC,GAAGb,KAAK;EACT,MAAMc,WAAW,GAAGC,YAAY,CAACZ,WAAW,EAAEQ,KAAK,CAAC;EAEpD,MAAMK,eAAe,GAAGD,YAAY,CAACV,eAAe,EAAEQ,SAAS,CAAC;EAEhE;EACA,MAAMI,sBAAsB,GAAGF,YAAY,CACzCT,sBAAsB,EACtBE,yBAAyB,CACM;EAEjCX,KAAK,CAACqB,SAAS,CAAC,MAAK;IACnB,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,IAAIP,WAAW,KAAKQ,SAAS,EAAE;MACtE;MACAC,OAAO,CAACC,IAAI,CAAC;;;;OAIZ,CAAC;;IAEJ;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACLjB,oBAAoB;IACpB;IACAC,yBAAyB,EAAES,sBAAsB;IACjDR,GAAG;IACHC,cAAc;IACdC,KAAK,EAAEG,WAAW;IAClB;IACAF,kBAAkB,EAAEI,eAAe;IACnCS,cAAc,EAAE3B,8BAA8B,CAAC;MAAEa,KAAK,EAAEG,WAAW;MAAEJ;IAAc,CAAE,CAAC;IAEtFgB,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IAEDA,IAAI,EAAEhC,qBAAqB,CAAC,KAAK,EAAE;MACjC,GAAGK,KAAK;MACRS,GAAG;MACHR,GAAG,EAAEL,aAAa,CAACK,GAAG,EAAEf,eAAe,EAAkB;KAC1D;GACF;AACH,CAAC;AAED,SAAS6B,YAAYA,CAAIa,CAAI,EAAEC,CAAI;EACjC;EACA,IAAID,CAAC,IAAIC,CAAC,EAAE;IACV,OAAO;MAAE,GAAGD,CAAC;MAAE,GAAGC;IAAC,CAAE;;EAGvB,IAAID,CAAC,EAAE;IACL,OAAOA,CAAC;;EAGV,OAAOC,CAAC;AACV;AAEA,SAASzB,QAAQA,CAAA;EACf,OAAOP,KAAK,CAACiC,UAAU,CAAC1C,YAAY,CAAC;AACvC"}
|
|
@@ -3,11 +3,14 @@ export function useFluentProviderContextValues_unstable(state) {
|
|
|
3
3
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
4
4
|
const {
|
|
5
5
|
applyStylesToPortals,
|
|
6
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
7
|
+
customStyleHooks_unstable,
|
|
6
8
|
dir,
|
|
7
9
|
root,
|
|
8
10
|
targetDocument,
|
|
9
11
|
theme,
|
|
10
12
|
themeClassName,
|
|
13
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
11
14
|
overrides_unstable
|
|
12
15
|
} = state;
|
|
13
16
|
const provider = React.useMemo(() => ({
|
|
@@ -17,6 +20,8 @@ export function useFluentProviderContextValues_unstable(state) {
|
|
|
17
20
|
// "Tooltip" component mutates an object in this context, instance should be stable
|
|
18
21
|
const [tooltip] = React.useState(() => ({}));
|
|
19
22
|
return {
|
|
23
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
24
|
+
customStyleHooks_unstable,
|
|
20
25
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
21
26
|
overrides_unstable,
|
|
22
27
|
provider,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","useFluentProviderContextValues_unstable","state","applyStylesToPortals","customStyleHooks_unstable","dir","root","targetDocument","theme","themeClassName","overrides_unstable","provider","useMemo","tooltip","useState","textDirection","className"],"sources":["../src/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n // eslint-disable-next-line @typescript-eslint/naming-convention\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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAG9B,OAAM,SAAUC,uCAAuCA,CAACC,KAA0B;EAChF;EACA,MAAM;IACJC,oBAAoB;IACpB;IACAC,yBAAyB;IACzBC,GAAG;IACHC,IAAI;IACJC,cAAc;IACdC,KAAK;IACLC,cAAc;IACd;IACAC;EAAkB,CACnB,GAAGR,KAAK;EAET,MAAMS,QAAQ,GAAGX,KAAK,CAACY,OAAO,CAAC,OAAO;IAAEP,GAAG;IAAEE;EAAc,CAAE,CAAC,EAAE,CAACF,GAAG,EAAEE,cAAc,CAAC,CAAC;EACtF;EACA,MAAM,CAACM,OAAO,CAAC,GAAGb,KAAK,CAACc,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;EAE5C,OAAO;IACL;IACAV,yBAAyB;IACzB;IACAM,kBAAkB;IAClBC,QAAQ;IACRI,aAAa,EAAEV,GAAG;IAClBQ,OAAO;IACPL,KAAK;IACLC,cAAc,EAAEN,oBAAoB,GAAGG,IAAI,CAACU,SAAU,GAAGP;GAC1D;AACH"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["__styles","mergeClasses","useRenderer_unstable","tokens","typographyStyles","fluentProviderClassNames","root","useStyles","sj55zd","De3pzq","fsow6f","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useFluentProviderStyles_unstable","state","renderer","styles","dir","className","themeClassName"],"sources":["../src/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {\n root: 'fui-FluentProvider',\n};\n\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n textAlign: 'left',\n ...typographyStyles.body1,\n },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState) => {\n const renderer = useRenderer_unstable();\n const styles = useStyles({ dir: state.dir, renderer });\n\n state.root.className = mergeClasses(\n fluentProviderClassNames.root,\n state.themeClassName,\n styles.root,\n state.root.className,\n );\n\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,eAAe;AACxD,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAIhE,OAAO,MAAMC,wBAAwB,GAAwC;EAC3EC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAOhB;AAEF;AACA,OAAO,MAAMC,gCAAgC,GAAIC,KAA0B,IAAI;EAC7E,MAAMC,QAAQ,GAAGhB,oBAAoB,EAAE;EACvC,MAAMiB,MAAM,GAAGZ,SAAS,CAAC;IAAEa,GAAG,EAAEH,KAAK,CAACG,GAAG;IAAEF;EAAQ,CAAE,CAAC;EAEtDD,KAAK,CAACX,IAAI,CAACe,SAAS,GAAGpB,YAAY,CACjCI,wBAAwB,CAACC,IAAI,EAC7BW,KAAK,CAACK,cAAc,EACpBH,MAAM,CAACb,IAAI,EACXW,KAAK,CAACX,IAAI,CAACe,SAAS,CACrB;EAED,OAAOJ,KAAK;AACd,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["useId","useIsomorphicLayoutEffect","useRenderer_unstable","React","fluentProviderClassNames","useInsertionEffect","createStyleTag","target","elementAttributes","undefined","tag","createElement","Object","keys","forEach","attrName","setAttribute","head","appendChild","insertSheet","rule","sheet","cssRules","length","deleteRule","insertRule","process","env","NODE_ENV","console","error","useFluentProviderThemeStyleTag","options","targetDocument","theme","renderer","styleTag","useRef","styleTagId","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","current","id","_a","remove"],"sources":["../src/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useRenderer_unstable } from '@griffel/react';\nimport * as React from 'react';\n\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n ? (React as never)['useInsertion' + 'Effect']\n : useIsomorphicLayoutEffect;\n\nconst createStyleTag = (target: Document | undefined, elementAttributes: Record<string, string>) => {\n if (!target) {\n return undefined;\n }\n\n const tag = target.createElement('style');\n\n Object.keys(elementAttributes).forEach(attrName => {\n tag.setAttribute(attrName, elementAttributes[attrName]);\n });\n\n target.head.appendChild(tag);\n return tag;\n};\n\nconst insertSheet = (tag: HTMLStyleElement, rule: string) => {\n const sheet = tag.sheet;\n\n if (sheet) {\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n sheet.insertRule(rule, 0);\n } else if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n }\n};\n\n/**\n * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n *\n * @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {\n const { targetDocument, theme } = options;\n\n const renderer = useRenderer_unstable();\n const styleTag = React.useRef<HTMLStyleElement>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\n const styleElementAttributes = renderer.styleElementAttributes;\n\n const cssVarsAsString = React.useMemo(() => {\n return theme\n ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '')\n : '';\n }, [theme]);\n\n const rule = `.${styleTagId} { ${cssVarsAsString} }`;\n\n useInsertionEffect(() => {\n styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n\n return () => {\n styleTag.current?.remove();\n };\n }\n }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n return styleTagId;\n};\n"],"mappings":"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"}
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["fluentProviderClassNames","FluentProvider","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag"],"sources":["../src/packages/react-components/react-provider/src/index.ts"],"sourcesContent":["export {\n fluentProviderClassNames,\n FluentProvider,\n renderFluentProvider_unstable,\n useFluentProviderContextValues_unstable,\n useFluentProvider_unstable,\n useFluentProviderStyles_unstable,\n useFluentProviderThemeStyleTag,\n} from './FluentProvider';\nexport type {\n FluentProviderContextValues,\n FluentProviderCustomStyleHooks,\n FluentProviderProps,\n FluentProviderState,\n FluentProviderSlots,\n} from './FluentProvider';\n"],"mappings":"AAAA,SACEA,wBAAwB,EACxBC,cAAc,EACdC,6BAA6B,EAC7BC,uCAAuC,EACvCC,0BAA0B,EAC1BC,gCAAgC,EAChCC,8BAA8B,QACzB,kBAAkB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FluentProvider.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts"],"names":[],"mappings":"","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} 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\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 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
|
|
1
|
+
{"version":3,"file":"FluentProvider.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.types.ts"],"names":[],"mappings":"","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 = Partial<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\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"]}
|
|
@@ -7,13 +7,17 @@ define(["require", "exports", "tslib", "react", "@griffel/react", "@fluentui/rea
|
|
|
7
7
|
*/
|
|
8
8
|
var renderFluentProvider_unstable = function (state, contextValues) {
|
|
9
9
|
var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
|
|
10
|
+
// Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable
|
|
11
|
+
// instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is
|
|
12
|
+
// Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>
|
|
10
13
|
return (React.createElement(react_shared_contexts_1.Provider_unstable, { value: contextValues.provider },
|
|
11
14
|
React.createElement(react_shared_contexts_1.ThemeProvider_unstable, { value: contextValues.theme },
|
|
12
15
|
React.createElement(react_shared_contexts_1.ThemeClassNameProvider_unstable, { value: contextValues.themeClassName },
|
|
13
|
-
React.createElement(react_shared_contexts_1.
|
|
14
|
-
React.createElement(
|
|
15
|
-
React.createElement(
|
|
16
|
-
React.createElement(
|
|
16
|
+
React.createElement(react_shared_contexts_1.CustomStyleHooksProvider_unstable, { value: contextValues.customStyleHooks_unstable },
|
|
17
|
+
React.createElement(react_shared_contexts_1.TooltipVisibilityProvider_unstable, { value: contextValues.tooltip },
|
|
18
|
+
React.createElement(react_1.TextDirectionProvider, { dir: contextValues.textDirection },
|
|
19
|
+
React.createElement(react_shared_contexts_1.OverridesProvider_unstable, { value: contextValues.overrides_unstable },
|
|
20
|
+
React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), state.root.children)))))))));
|
|
17
21
|
};
|
|
18
22
|
exports.renderFluentProvider_unstable = renderFluentProvider_unstable;
|
|
19
23
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"renderFluentProvider.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"renderFluentProvider.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx"],"names":[],"mappings":";;;;IAcA;;OAEG;IACI,IAAM,6BAA6B,GAAG,UAC3C,KAA0B,EAC1B,aAA0C;QAEpC,IAAA,KAAuB,0BAAQ,CAAsB,KAAK,CAAC,EAAzD,KAAK,WAAA,EAAE,SAAS,eAAyC,CAAC;QAElE,+FAA+F;QAC/F,oFAAoF;QACpF,0GAA0G;QAE1G,OAAO,CACL,oBAAC,yCAAQ,IAAC,KAAK,EAAE,aAAa,CAAC,QAAQ;YACrC,oBAAC,8CAAa,IAAC,KAAK,EAAE,aAAa,CAAC,KAAK;gBACvC,oBAAC,uDAAsB,IAAC,KAAK,EAAE,aAAa,CAAC,cAAc;oBACzD,oBAAC,yDAAwB,IACvB,KAAK,EAAE,aAAa,CAAC,yBAAmE;wBAExF,oBAAC,0DAAyB,IAAC,KAAK,EAAE,aAAa,CAAC,OAAO;4BACrD,oBAAC,6BAAqB,IAAC,GAAG,EAAE,aAAa,CAAC,aAAa;gCACrD,oBAAC,kDAAiB,IAAC,KAAK,EAAE,aAAa,CAAC,kBAAkB;oCACxD,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAc,CAChD,CACE,CACE,CACH,CACJ,CACX,CACP,CACZ,CAAC;IACJ,CAAC,CAAC;IA7BW,QAAA,6BAA6B,iCA6BxC","sourcesContent":["import * as React from 'react';\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 { getSlots } from '@fluentui/react-utilities';\nimport type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n) => {\n const { slots, slotProps } = getSlots<FluentProviderSlots>(state);\n\n // 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 <OverridesProvider value={contextValues.overrides_unstable}>\n <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n </OverridesProvider>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </CustomStyleHooksProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"]}
|
|
@@ -15,14 +15,19 @@ define(["require", "exports", "tslib", "@fluentui/react-tabster", "@fluentui/rea
|
|
|
15
15
|
var parentContext = react_shared_contexts_1.useFluent_unstable();
|
|
16
16
|
var parentTheme = useTheme();
|
|
17
17
|
var parentOverrides = react_shared_contexts_1.useOverrides_unstable();
|
|
18
|
+
var parentCustomStyleHooks = react_shared_contexts_1.useCustomStyleHooks_unstable();
|
|
18
19
|
/**
|
|
19
20
|
* TODO: add merge functions to "dir" merge,
|
|
20
21
|
* nesting providers with the same "dir" should not add additional attributes to DOM
|
|
21
22
|
* see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93
|
|
22
23
|
*/
|
|
23
|
-
var _a = props.applyStylesToPortals, applyStylesToPortals = _a === void 0 ? true : _a,
|
|
24
|
+
var _a = props.applyStylesToPortals, applyStylesToPortals = _a === void 0 ? true : _a,
|
|
25
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
26
|
+
customStyleHooks_unstable = props.customStyleHooks_unstable, _b = props.dir, dir = _b === void 0 ? parentContext.dir : _b, _c = props.targetDocument, targetDocument = _c === void 0 ? parentContext.targetDocument : _c, theme = props.theme, _d = props.overrides_unstable, overrides = _d === void 0 ? {} : _d;
|
|
24
27
|
var mergedTheme = shallowMerge(parentTheme, theme);
|
|
25
28
|
var mergedOverrides = shallowMerge(parentOverrides, overrides);
|
|
29
|
+
// parentCustomStyleHooks will not be a partial
|
|
30
|
+
var mergedCustomStyleHooks = shallowMerge(parentCustomStyleHooks, customStyleHooks_unstable);
|
|
26
31
|
React.useEffect(function () {
|
|
27
32
|
if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {
|
|
28
33
|
// eslint-disable-next-line no-console
|
|
@@ -32,6 +37,8 @@ define(["require", "exports", "tslib", "@fluentui/react-tabster", "@fluentui/rea
|
|
|
32
37
|
}, []);
|
|
33
38
|
return {
|
|
34
39
|
applyStylesToPortals: applyStylesToPortals,
|
|
40
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
41
|
+
customStyleHooks_unstable: mergedCustomStyleHooks,
|
|
35
42
|
dir: dir,
|
|
36
43
|
targetDocument: targetDocument,
|
|
37
44
|
theme: mergedTheme,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFluentProvider.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"useFluentProvider.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":";;;;IAiBA;;;;;;;;OAQG;IACI,IAAM,0BAA0B,GAAG,UACxC,KAA0B,EAC1B,GAA2B;QAE3B,IAAM,aAAa,GAAG,0CAAS,EAAE,CAAC;QAClC,IAAM,WAAW,GAAG,QAAQ,EAAE,CAAC;QAC/B,IAAM,eAAe,GAAG,6CAAY,EAAE,CAAC;QACvC,IAAM,sBAAsB,GAAG,oDAAmB,EAAE,CAAC;QAErD;;;;WAIG;QAED,IAAA,KAOE,KAAK,qBAPoB,EAA3B,oBAAoB,mBAAG,IAAI,KAAA;QAC3B,gEAAgE;QAChE,yBAAyB,GAKvB,KAAK,0BALkB,EACzB,KAIE,KAAK,IAJgB,EAAvB,GAAG,mBAAG,aAAa,CAAC,GAAG,KAAA,EACvB,KAGE,KAAK,eAHsC,EAA7C,cAAc,mBAAG,aAAa,CAAC,cAAc,KAAA,EAC7C,KAAK,GAEH,KAAK,MAFF,EACL,KACE,KAAK,mBAD2B,EAAd,SAAS,mBAAG,EAAE,KAAA,CAC1B;QACV,IAAM,WAAW,GAAG,YAAY,CAAC,WAAW,EAAE,KAAK,CAAC,CAAC;QAErD,IAAM,eAAe,GAAG,YAAY,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;QAEjE,+CAA+C;QAC/C,IAAM,sBAAsB,GAAG,YAAY,CACzC,sBAAsB,EACtB,yBAAyB,CACM,CAAC;QAElC,KAAK,CAAC,SAAS,CAAC;YACd,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,IAAI,WAAW,KAAK,SAAS,EAAE;gBACtE,sCAAsC;gBACtC,OAAO,CAAC,IAAI,CAAC,0OAIZ,CAAC,CAAC;aACJ;YACD,uDAAuD;QACzD,CAAC,EAAE,EAAE,CAAC,CAAC;QAEP,OAAO;YACL,oBAAoB,sBAAA;YACpB,gEAAgE;YAChE,yBAAyB,EAAE,sBAAsB;YACjD,GAAG,KAAA;YACH,cAAc,gBAAA;YACd,KAAK,EAAE,WAAW;YAClB,gEAAgE;YAChE,kBAAkB,EAAE,eAAe;YACnC,cAAc,EAAE,+DAA8B,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,cAAc,gBAAA,EAAE,CAAC;YAEtF,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;aACZ;YAED,IAAI,EAAE,uCAAqB,CAAC,KAAK,wCAC5B,KAAK,KACR,GAAG,KAAA,EACH,GAAG,EAAE,+BAAa,CAAC,GAAG,EAAE,+BAAe,EAAkB,CAAC,IAC1D;SACH,CAAC;IACJ,CAAC,CAAC;IAlEW,QAAA,0BAA0B,8BAkErC;IAEF,SAAS,YAAY,CAAI,CAAI,EAAE,CAAI;QACjC,kEAAkE;QAClE,IAAI,CAAC,IAAI,CAAC,EAAE;YACV,6CAAY,CAAC,GAAK,CAAC,EAAG;SACvB;QAED,IAAI,CAAC,EAAE;YACL,OAAO,CAAC,CAAC;SACV;QAED,OAAO,CAAC,CAAC;IACX,CAAC;IAED,SAAS,QAAQ;QACf,OAAO,KAAK,CAAC,UAAU,CAAC,6CAAY,CAAC,CAAC;IACxC,CAAC","sourcesContent":["import { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n ThemeContext_unstable as ThemeContext,\n useFluent_unstable as useFluent,\n useOverrides_unstable as useOverrides,\n useCustomStyleHooks_unstable as useCustomStyleHooks,\n} from '@fluentui/react-shared-contexts';\nimport type {\n CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\n ThemeContextValue_unstable as ThemeContextValue,\n} from '@fluentui/react-shared-contexts';\n\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */\nexport const useFluentProvider_unstable = (\n props: FluentProviderProps,\n ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n const parentContext = useFluent();\n const parentTheme = useTheme();\n const parentOverrides = useOverrides();\n const parentCustomStyleHooks = useCustomStyleHooks();\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 const mergedTheme = shallowMerge(parentTheme, theme);\n\n const mergedOverrides = shallowMerge(parentOverrides, overrides);\n\n // parentCustomStyleHooks will not be a partial\n const mergedCustomStyleHooks = shallowMerge(\n parentCustomStyleHooks,\n customStyleHooks_unstable,\n ) as CustomStyleHooksContextValue;\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {\n // eslint-disable-next-line no-console\n console.warn(`\n FluentProvider: your \"theme\" is not defined !\n =============================================\n Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.\n `);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return {\n applyStylesToPortals,\n // 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: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),\n\n components: {\n root: 'div',\n },\n\n root: getNativeElementProps('div', {\n ...props,\n dir,\n ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>()),\n }),\n };\n};\n\nfunction 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"]}
|
|
@@ -4,11 +4,17 @@ define(["require", "exports", "react"], function (require, exports, React) {
|
|
|
4
4
|
exports.useFluentProviderContextValues_unstable = void 0;
|
|
5
5
|
function useFluentProviderContextValues_unstable(state) {
|
|
6
6
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
7
|
-
var applyStylesToPortals = state.applyStylesToPortals,
|
|
7
|
+
var applyStylesToPortals = state.applyStylesToPortals,
|
|
8
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
9
|
+
customStyleHooks_unstable = state.customStyleHooks_unstable, dir = state.dir, root = state.root, targetDocument = state.targetDocument, theme = state.theme, themeClassName = state.themeClassName,
|
|
10
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
11
|
+
overrides_unstable = state.overrides_unstable;
|
|
8
12
|
var provider = React.useMemo(function () { return ({ dir: dir, targetDocument: targetDocument }); }, [dir, targetDocument]);
|
|
9
13
|
// "Tooltip" component mutates an object in this context, instance should be stable
|
|
10
14
|
var tooltip = React.useState(function () { return ({}); })[0];
|
|
11
15
|
return {
|
|
16
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
17
|
+
customStyleHooks_unstable: customStyleHooks_unstable,
|
|
12
18
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
13
19
|
overrides_unstable: overrides_unstable,
|
|
14
20
|
provider: provider,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useFluentProviderContextValues.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderContextValues.ts"],"names":[],"mappings":";;;;IAGA,SAAgB,uCAAuC,CAAC,KAA0B;QAChF,gEAAgE;
|
|
1
|
+
{"version":3,"file":"useFluentProviderContextValues.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderContextValues.ts"],"names":[],"mappings":";;;;IAGA,SAAgB,uCAAuC,CAAC,KAA0B;QAChF,gEAAgE;QAE9D,IAAA,oBAAoB,GAUlB,KAAK,qBAVa;QACpB,gEAAgE;QAChE,yBAAyB,GAQvB,KAAK,0BARkB,EACzB,GAAG,GAOD,KAAK,IAPJ,EACH,IAAI,GAMF,KAAK,KANH,EACJ,cAAc,GAKZ,KAAK,eALO,EACd,KAAK,GAIH,KAAK,MAJF,EACL,cAAc,GAGZ,KAAK,eAHO;QACd,gEAAgE;QAChE,kBAAkB,GAChB,KAAK,mBADW,CACV;QAEV,IAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,cAAM,OAAA,CAAC,EAAE,GAAG,KAAA,EAAE,cAAc,gBAAA,EAAE,CAAC,EAAzB,CAAyB,EAAE,CAAC,GAAG,EAAE,cAAc,CAAC,CAAC,CAAC;QACvF,mFAAmF;QAC5E,IAAA,OAAO,GAAI,KAAK,CAAC,QAAQ,CAAC,cAAM,OAAA,CAAC,EAAE,CAAC,EAAJ,CAAI,CAAC,GAA9B,CAA+B;QAE7C,OAAO;YACL,gEAAgE;YAChE,yBAAyB,2BAAA;YACzB,gEAAgE;YAChE,kBAAkB,oBAAA;YAClB,QAAQ,UAAA;YACR,aAAa,EAAE,GAAG;YAClB,OAAO,SAAA;YACP,KAAK,OAAA;YACL,cAAc,EAAE,oBAAoB,CAAC,CAAC,CAAC,IAAI,CAAC,SAAU,CAAC,CAAC,CAAC,cAAc;SACxE,CAAC;IACJ,CAAC;IA9BD,0FA8BC","sourcesContent":["import * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n // eslint-disable-next-line @typescript-eslint/naming-convention\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"]}
|
package/lib-amd/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-provider/src/index.ts"],"names":[],"mappings":";;;;IACE,0HAAA,wBAAwB,OAAA;IACxB,gHAAA,cAAc,OAAA;IACd,+HAAA,6BAA6B,OAAA;IAC7B,yIAAA,uCAAuC,OAAA;IACvC,4HAAA,0BAA0B,OAAA;IAC1B,kIAAA,gCAAgC,OAAA;IAChC,gIAAA,8BAA8B,OAAA","sourcesContent":["export {\n fluentProviderClassNames,\n FluentProvider,\n renderFluentProvider_unstable,\n useFluentProviderContextValues_unstable,\n useFluentProvider_unstable,\n useFluentProviderStyles_unstable,\n useFluentProviderThemeStyleTag,\n} from './FluentProvider';\nexport type {\n FluentProviderContextValues,\n FluentProviderProps,\n FluentProviderState,\n FluentProviderSlots,\n} from './FluentProvider';\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-provider/src/index.ts"],"names":[],"mappings":";;;;IACE,0HAAA,wBAAwB,OAAA;IACxB,gHAAA,cAAc,OAAA;IACd,+HAAA,6BAA6B,OAAA;IAC7B,yIAAA,uCAAuC,OAAA;IACvC,4HAAA,0BAA0B,OAAA;IAC1B,kIAAA,gCAAgC,OAAA;IAChC,gIAAA,8BAA8B,OAAA","sourcesContent":["export {\n fluentProviderClassNames,\n FluentProvider,\n renderFluentProvider_unstable,\n useFluentProviderContextValues_unstable,\n useFluentProvider_unstable,\n useFluentProviderStyles_unstable,\n useFluentProviderThemeStyleTag,\n} from './FluentProvider';\nexport type {\n FluentProviderContextValues,\n FluentProviderCustomStyleHooks,\n FluentProviderProps,\n FluentProviderState,\n FluentProviderSlots,\n} from './FluentProvider';\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-provider/src/FluentProvider.ts"],"sourcesContent":["export * from './components/FluentProvider/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,uCAAAC,OAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","require","renderFluentProvider_1","useFluentProvider_1","useFluentProviderStyles_1","useFluentProviderContextValues_1","exports","FluentProvider","forwardRef","props","ref","state","useFluentProvider_unstable","useFluentProviderStyles_unstable","contextValues","useFluentProviderContextValues_unstable","renderFluentProvider_unstable","displayName"],"sources":["../src/packages/react-components/react-provider/src/components/FluentProvider/FluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { renderFluentProvider_unstable } from './renderFluentProvider';\nimport { useFluentProvider_unstable } from './useFluentProvider';\nimport { useFluentProviderStyles_unstable } from './useFluentProviderStyles';\nimport { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';\nimport type { FluentProviderProps } from './FluentProvider.types';\n\nexport const FluentProvider = React.forwardRef<HTMLElement, FluentProviderProps>((props, ref) => {\n const state = useFluentProvider_unstable(props, ref);\n useFluentProviderStyles_unstable(state);\n\n const contextValues = useFluentProviderContextValues_unstable(state);\n\n return renderFluentProvider_unstable(state, contextValues);\n});\n\nFluentProvider.displayName = 'FluentProvider';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,sBAAA,gBAAAD,OAAA;AACA,MAAAE,mBAAA,gBAAAF,OAAA;AACA,MAAAG,yBAAA,gBAAAH,OAAA;AACA,MAAAI,gCAAA,gBAAAJ,OAAA;AAGaK,OAAA,CAAAC,cAAc,gBAAGP,KAAK,CAACQ,UAAU,CAAmC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAC9F,MAAMC,KAAK,GAAGR,mBAAA,CAAAS,0BAA0B,CAACH,KAAK,EAAEC,GAAG,CAAC;EACpDN,yBAAA,CAAAS,gCAAgC,CAACF,KAAK,CAAC;EAEvC,MAAMG,aAAa,GAAGT,gCAAA,CAAAU,uCAAuC,CAACJ,KAAK,CAAC;EAEpE,OAAOT,sBAAA,CAAAc,6BAA6B,CAACL,KAAK,EAAEG,aAAa,CAAC;AAC5D,CAAC,CAAC;AAEFR,OAAA,CAAAC,cAAc,CAACU,WAAW,GAAG,gBAAgB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":[],"sources":["../src/packages/react-components/react-provider/src/components/FluentProvider/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 = Partial<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\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"],"mappings":""}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-provider/src/components/FluentProvider/index.ts"],"sourcesContent":["export * from './FluentProvider';\nexport * from './FluentProvider.types';\nexport * from './renderFluentProvider';\nexport * from './useFluentProvider';\nexport * from './useFluentProviderStyles';\nexport * from './useFluentProviderContextValues';\nexport * from './useFluentProviderThemeStyleTag';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,sBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,4BAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,4BAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,yBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,+BAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,sCAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,sCAAAC,OAAA"}
|
|
@@ -16,12 +16,17 @@ const renderFluentProvider_unstable = (state, contextValues) => {
|
|
|
16
16
|
slots,
|
|
17
17
|
slotProps
|
|
18
18
|
} = react_utilities_1.getSlots(state);
|
|
19
|
+
// Typescript (vscode) incorrectly references the FluentProviderProps.customStyleHooks_unstable
|
|
20
|
+
// instead of FluentProviderContextValues.customStyleHooks_unstable and thinks it is
|
|
21
|
+
// Partial<CustomStyleHooksContextValue>, so it needs to be cast to Required<CustomStyleHooksContextValue>
|
|
19
22
|
return React.createElement(react_shared_contexts_1.Provider_unstable, {
|
|
20
23
|
value: contextValues.provider
|
|
21
24
|
}, React.createElement(react_shared_contexts_1.ThemeProvider_unstable, {
|
|
22
25
|
value: contextValues.theme
|
|
23
26
|
}, React.createElement(react_shared_contexts_1.ThemeClassNameProvider_unstable, {
|
|
24
27
|
value: contextValues.themeClassName
|
|
28
|
+
}, React.createElement(react_shared_contexts_1.CustomStyleHooksProvider_unstable, {
|
|
29
|
+
value: contextValues.customStyleHooks_unstable
|
|
25
30
|
}, React.createElement(react_shared_contexts_1.TooltipVisibilityProvider_unstable, {
|
|
26
31
|
value: contextValues.tooltip
|
|
27
32
|
}, React.createElement(react_1.TextDirectionProvider, {
|
|
@@ -30,7 +35,7 @@ const renderFluentProvider_unstable = (state, contextValues) => {
|
|
|
30
35
|
value: contextValues.overrides_unstable
|
|
31
36
|
}, React.createElement(slots.root, {
|
|
32
37
|
...slotProps.root
|
|
33
|
-
}, state.root.children)))))));
|
|
38
|
+
}, state.root.children))))))));
|
|
34
39
|
};
|
|
35
40
|
exports.renderFluentProvider_unstable = renderFluentProvider_unstable;
|
|
36
41
|
//# sourceMappingURL=renderFluentProvider.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","require","react_1","react_shared_contexts_1","react_utilities_1","renderFluentProvider_unstable","state","contextValues","slots","slotProps","getSlots","createElement","Provider_unstable","value","provider","ThemeProvider_unstable","theme","ThemeClassNameProvider_unstable","themeClassName","CustomStyleHooksProvider_unstable","customStyleHooks_unstable","TooltipVisibilityProvider_unstable","tooltip","TextDirectionProvider","dir","textDirection","OverridesProvider_unstable","overrides_unstable","root","children","exports"],"sources":["../src/packages/react-components/react-provider/src/components/FluentProvider/renderFluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\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 { getSlots } from '@fluentui/react-utilities';\nimport type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n) => {\n const { slots, slotProps } = getSlots<FluentProviderSlots>(state);\n\n // 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 <OverridesProvider value={contextValues.overrides_unstable}>\n <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n </OverridesProvider>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </CustomStyleHooksProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,OAAA,gBAAAD,OAAA;AACA,MAAAE,uBAAA,gBAAAF,OAAA;AASA,MAAAG,iBAAA,gBAAAH,OAAA;AAGA;;;AAGO,MAAMI,6BAA6B,GAAGA,CAC3CC,KAA0B,EAC1BC,aAA0C,KACxC;EACF,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGL,iBAAA,CAAAM,QAAQ,CAAsBJ,KAAK,CAAC;EAEjE;EACA;EACA;EAEA,OACEN,KAAA,CAAAW,aAAA,CAACR,uBAAA,CAAAS,iBAAQ;IAACC,KAAK,EAAEN,aAAa,CAACO;EAAQ,GACrCd,KAAA,CAAAW,aAAA,CAACR,uBAAA,CAAAY,sBAAa;IAACF,KAAK,EAAEN,aAAa,CAACS;EAAK,GACvChB,KAAA,CAAAW,aAAA,CAACR,uBAAA,CAAAc,+BAAsB;IAACJ,KAAK,EAAEN,aAAa,CAACW;EAAc,GACzDlB,KAAA,CAAAW,aAAA,CAACR,uBAAA,CAAAgB,iCAAwB;IACvBN,KAAK,EAAEN,aAAa,CAACa;EAAmE,GAExFpB,KAAA,CAAAW,aAAA,CAACR,uBAAA,CAAAkB,kCAAyB;IAACR,KAAK,EAAEN,aAAa,CAACe;EAAO,GACrDtB,KAAA,CAAAW,aAAA,CAACT,OAAA,CAAAqB,qBAAqB;IAACC,GAAG,EAAEjB,aAAa,CAACkB;EAAa,GACrDzB,KAAA,CAAAW,aAAA,CAACR,uBAAA,CAAAuB,0BAAiB;IAACb,KAAK,EAAEN,aAAa,CAACoB;EAAkB,GACxD3B,KAAA,CAAAW,aAAA,CAACH,KAAK,CAACoB,IAAI;IAAA,GAAKnB,SAAS,CAACmB;EAAI,GAAGtB,KAAK,CAACsB,IAAI,CAACC,QAAQ,CAAc,CAChD,CACE,CACE,CACH,CACJ,CACX,CACP;AAEf,CAAC;AA7BYC,OAAA,CAAAzB,6BAA6B,GAAAA,6BAAA"}
|
|
@@ -22,6 +22,7 @@ const useFluentProvider_unstable = (props, ref) => {
|
|
|
22
22
|
const parentContext = react_shared_contexts_1.useFluent_unstable();
|
|
23
23
|
const parentTheme = useTheme();
|
|
24
24
|
const parentOverrides = react_shared_contexts_1.useOverrides_unstable();
|
|
25
|
+
const parentCustomStyleHooks = react_shared_contexts_1.useCustomStyleHooks_unstable();
|
|
25
26
|
/**
|
|
26
27
|
* TODO: add merge functions to "dir" merge,
|
|
27
28
|
* nesting providers with the same "dir" should not add additional attributes to DOM
|
|
@@ -29,6 +30,8 @@ const useFluentProvider_unstable = (props, ref) => {
|
|
|
29
30
|
*/
|
|
30
31
|
const {
|
|
31
32
|
applyStylesToPortals = true,
|
|
33
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
34
|
+
customStyleHooks_unstable,
|
|
32
35
|
dir = parentContext.dir,
|
|
33
36
|
targetDocument = parentContext.targetDocument,
|
|
34
37
|
theme,
|
|
@@ -36,6 +39,8 @@ const useFluentProvider_unstable = (props, ref) => {
|
|
|
36
39
|
} = props;
|
|
37
40
|
const mergedTheme = shallowMerge(parentTheme, theme);
|
|
38
41
|
const mergedOverrides = shallowMerge(parentOverrides, overrides);
|
|
42
|
+
// parentCustomStyleHooks will not be a partial
|
|
43
|
+
const mergedCustomStyleHooks = shallowMerge(parentCustomStyleHooks, customStyleHooks_unstable);
|
|
39
44
|
React.useEffect(() => {
|
|
40
45
|
if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {
|
|
41
46
|
// eslint-disable-next-line no-console
|
|
@@ -49,6 +54,8 @@ const useFluentProvider_unstable = (props, ref) => {
|
|
|
49
54
|
}, []);
|
|
50
55
|
return {
|
|
51
56
|
applyStylesToPortals,
|
|
57
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
58
|
+
customStyleHooks_unstable: mergedCustomStyleHooks,
|
|
52
59
|
dir,
|
|
53
60
|
targetDocument,
|
|
54
61
|
theme: mergedTheme,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["react_tabster_1","require","react_shared_contexts_1","react_utilities_1","React","useFluentProviderThemeStyleTag_1","useFluentProvider_unstable","props","ref","parentContext","useFluent_unstable","parentTheme","useTheme","parentOverrides","useOverrides_unstable","parentCustomStyleHooks","useCustomStyleHooks_unstable","applyStylesToPortals","customStyleHooks_unstable","dir","targetDocument","theme","overrides_unstable","overrides","mergedTheme","shallowMerge","mergedOverrides","mergedCustomStyleHooks","useEffect","process","env","NODE_ENV","undefined","console","warn","themeClassName","useFluentProviderThemeStyleTag","components","root","getNativeElementProps","useMergedRefs","useFocusVisible","exports","a","b","useContext","ThemeContext_unstable"],"sources":["../src/packages/react-components/react-provider/src/components/FluentProvider/useFluentProvider.ts"],"sourcesContent":["import { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n ThemeContext_unstable as ThemeContext,\n useFluent_unstable as useFluent,\n useOverrides_unstable as useOverrides,\n useCustomStyleHooks_unstable as useCustomStyleHooks,\n} from '@fluentui/react-shared-contexts';\nimport type {\n CustomStyleHooksContextValue_unstable as CustomStyleHooksContextValue,\n ThemeContextValue_unstable as ThemeContextValue,\n} from '@fluentui/react-shared-contexts';\n\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */\nexport const useFluentProvider_unstable = (\n props: FluentProviderProps,\n ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n const parentContext = useFluent();\n const parentTheme = useTheme();\n const parentOverrides = useOverrides();\n const parentCustomStyleHooks = useCustomStyleHooks();\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 const mergedTheme = shallowMerge(parentTheme, theme);\n\n const mergedOverrides = shallowMerge(parentOverrides, overrides);\n\n // parentCustomStyleHooks will not be a partial\n const mergedCustomStyleHooks = shallowMerge(\n parentCustomStyleHooks,\n customStyleHooks_unstable,\n ) as CustomStyleHooksContextValue;\n\n React.useEffect(() => {\n if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {\n // eslint-disable-next-line no-console\n console.warn(`\n FluentProvider: your \"theme\" is not defined !\n =============================================\n Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.\n `);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return {\n applyStylesToPortals,\n // 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: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),\n\n components: {\n root: 'div',\n },\n\n root: getNativeElementProps('div', {\n ...props,\n dir,\n ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>()),\n }),\n };\n};\n\nfunction 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"],"mappings":";;;;;;AAAA,MAAAA,eAAA,gBAAAC,OAAA;AACA,MAAAC,uBAAA,gBAAAD,OAAA;AAWA,MAAAE,iBAAA,gBAAAF,OAAA;AACA,MAAAG,KAAA,gBAAAH,OAAA;AACA,MAAAI,gCAAA,gBAAAJ,OAAA;AAGA;;;;;;;;;AASO,MAAMK,0BAA0B,GAAGA,CACxCC,KAA0B,EAC1BC,GAA2B,KACJ;EACvB,MAAMC,aAAa,GAAGP,uBAAA,CAAAQ,kBAAS,EAAE;EACjC,MAAMC,WAAW,GAAGC,QAAQ,EAAE;EAC9B,MAAMC,eAAe,GAAGX,uBAAA,CAAAY,qBAAY,EAAE;EACtC,MAAMC,sBAAsB,GAAGb,uBAAA,CAAAc,4BAAmB,EAAE;EAEpD;;;;;EAKA,MAAM;IACJC,oBAAoB,GAAG,IAAI;IAC3B;IACAC,yBAAyB;IACzBC,GAAG,GAAGV,aAAa,CAACU,GAAG;IACvBC,cAAc,GAAGX,aAAa,CAACW,cAAc;IAC7CC,KAAK;IACLC,kBAAkB,EAAEC,SAAS,GAAG;EAAE,CACnC,GAAGhB,KAAK;EACT,MAAMiB,WAAW,GAAGC,YAAY,CAACd,WAAW,EAAEU,KAAK,CAAC;EAEpD,MAAMK,eAAe,GAAGD,YAAY,CAACZ,eAAe,EAAEU,SAAS,CAAC;EAEhE;EACA,MAAMI,sBAAsB,GAAGF,YAAY,CACzCV,sBAAsB,EACtBG,yBAAyB,CACM;EAEjCd,KAAK,CAACwB,SAAS,CAAC,MAAK;IACnB,IAAIC,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,IAAIP,WAAW,KAAKQ,SAAS,EAAE;MACtE;MACAC,OAAO,CAACC,IAAI,CAAC;;;;OAIZ,CAAC;;IAEJ;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO;IACLjB,oBAAoB;IACpB;IACAC,yBAAyB,EAAES,sBAAsB;IACjDR,GAAG;IACHC,cAAc;IACdC,KAAK,EAAEG,WAAW;IAClB;IACAF,kBAAkB,EAAEI,eAAe;IACnCS,cAAc,EAAE9B,gCAAA,CAAA+B,8BAA8B,CAAC;MAAEf,KAAK,EAAEG,WAAW;MAAEJ;IAAc,CAAE,CAAC;IAEtFiB,UAAU,EAAE;MACVC,IAAI,EAAE;KACP;IAEDA,IAAI,EAAEnC,iBAAA,CAAAoC,qBAAqB,CAAC,KAAK,EAAE;MACjC,GAAGhC,KAAK;MACRY,GAAG;MACHX,GAAG,EAAEL,iBAAA,CAAAqC,aAAa,CAAChC,GAAG,EAAER,eAAA,CAAAyC,eAAe,EAAkB;KAC1D;GACF;AACH,CAAC;AAlEYC,OAAA,CAAApC,0BAA0B,GAAAA,0BAAA;AAoEvC,SAASmB,YAAYA,CAAIkB,CAAI,EAAEC,CAAI;EACjC;EACA,IAAID,CAAC,IAAIC,CAAC,EAAE;IACV,OAAO;MAAE,GAAGD,CAAC;MAAE,GAAGC;IAAC,CAAE;;EAGvB,IAAID,CAAC,EAAE;IACL,OAAOA,CAAC;;EAGV,OAAOC,CAAC;AACV;AAEA,SAAShC,QAAQA,CAAA;EACf,OAAOR,KAAK,CAACyC,UAAU,CAAC3C,uBAAA,CAAA4C,qBAAY,CAAC;AACvC"}
|
|
@@ -9,11 +9,14 @@ function useFluentProviderContextValues_unstable(state) {
|
|
|
9
9
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
10
10
|
const {
|
|
11
11
|
applyStylesToPortals,
|
|
12
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
13
|
+
customStyleHooks_unstable,
|
|
12
14
|
dir,
|
|
13
15
|
root,
|
|
14
16
|
targetDocument,
|
|
15
17
|
theme,
|
|
16
18
|
themeClassName,
|
|
19
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
17
20
|
overrides_unstable
|
|
18
21
|
} = state;
|
|
19
22
|
const provider = React.useMemo(() => ({
|
|
@@ -23,6 +26,8 @@ function useFluentProviderContextValues_unstable(state) {
|
|
|
23
26
|
// "Tooltip" component mutates an object in this context, instance should be stable
|
|
24
27
|
const [tooltip] = React.useState(() => ({}));
|
|
25
28
|
return {
|
|
29
|
+
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
30
|
+
customStyleHooks_unstable,
|
|
26
31
|
// eslint-disable-next-line @typescript-eslint/naming-convention
|
|
27
32
|
overrides_unstable,
|
|
28
33
|
provider,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["React","require","useFluentProviderContextValues_unstable","state","applyStylesToPortals","customStyleHooks_unstable","dir","root","targetDocument","theme","themeClassName","overrides_unstable","provider","useMemo","tooltip","useState","textDirection","className","exports"],"sources":["../src/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderContextValues.ts"],"sourcesContent":["import * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n // eslint-disable-next-line @typescript-eslint/naming-convention\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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AAGA,SAAgBC,uCAAuCA,CAACC,KAA0B;EAChF;EACA,MAAM;IACJC,oBAAoB;IACpB;IACAC,yBAAyB;IACzBC,GAAG;IACHC,IAAI;IACJC,cAAc;IACdC,KAAK;IACLC,cAAc;IACd;IACAC;EAAkB,CACnB,GAAGR,KAAK;EAET,MAAMS,QAAQ,GAAGZ,KAAK,CAACa,OAAO,CAAC,OAAO;IAAEP,GAAG;IAAEE;EAAc,CAAE,CAAC,EAAE,CAACF,GAAG,EAAEE,cAAc,CAAC,CAAC;EACtF;EACA,MAAM,CAACM,OAAO,CAAC,GAAGd,KAAK,CAACe,QAAQ,CAAC,OAAO,EAAE,CAAC,CAAC;EAE5C,OAAO;IACL;IACAV,yBAAyB;IACzB;IACAM,kBAAkB;IAClBC,QAAQ;IACRI,aAAa,EAAEV,GAAG;IAClBQ,OAAO;IACPL,KAAK;IACLC,cAAc,EAAEN,oBAAoB,GAAGG,IAAI,CAACU,SAAU,GAAGP;GAC1D;AACH;AA9BAQ,OAAA,CAAAhB,uCAAA,GAAAA,uCAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["core_1","require","react_1","react_theme_1","exports","fluentProviderClassNames","root","useStyles","__styles","sj55zd","De3pzq","fsow6f","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","d","useFluentProviderStyles_unstable","state","renderer","useRenderer_unstable","styles","dir","className","mergeClasses","themeClassName"],"sources":["../src/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {\n root: 'fui-FluentProvider',\n};\n\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n textAlign: 'left',\n ...typographyStyles.body1,\n },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState) => {\n const renderer = useRenderer_unstable();\n const styles = useStyles({ dir: state.dir, renderer });\n\n state.root.className = mergeClasses(\n fluentProviderClassNames.root,\n state.themeClassName,\n styles.root,\n state.root.className,\n );\n\n return state;\n};\n"],"mappings":";;;;;;AAAA,MAAAA,MAAA,gBAAAC,OAAA;AACA,MAAAC,OAAA,gBAAAD,OAAA;AACA,MAAAE,aAAA,gBAAAF,OAAA;AAIaG,OAAA,CAAAC,wBAAwB,GAAwC;EAC3EC,IAAI,EAAE;CACP;AAED,MAAMC,SAAS,gBAAGP,MAAA,CAAAQ,QAAU;EAAAF,IAAA;IAAAG,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,EAO1B;AAEF;AACO,MAAMC,gCAAgC,GAAIC,KAA0B,IAAI;EAC7E,MAAMC,QAAQ,GAAGjB,OAAA,CAAAkB,oBAAoB,EAAE;EACvC,MAAMC,MAAM,GAAGd,SAAS,CAAC;IAAEe,GAAG,EAAEJ,KAAK,CAACI,GAAG;IAAEH;EAAQ,CAAE,CAAC;EAEtDD,KAAK,CAACZ,IAAI,CAACiB,SAAS,GAAGvB,MAAA,CAAAwB,YAAY,CACjCpB,OAAA,CAAAC,wBAAwB,CAACC,IAAI,EAC7BY,KAAK,CAACO,cAAc,EACpBJ,MAAM,CAACf,IAAI,EACXY,KAAK,CAACZ,IAAI,CAACiB,SAAS,CACrB;EAED,OAAOL,KAAK;AACd,CAAC;AAZYd,OAAA,CAAAa,gCAAgC,GAAAA,gCAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["react_utilities_1","require","react_1","React","useFluentProviderStyles_1","useInsertionEffect","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","useFluentProviderThemeStyleTag","options","targetDocument","theme","renderer","useRenderer_unstable","styleTag","useRef","styleTagId","useId","fluentProviderClassNames","root","styleElementAttributes","cssVarsAsString","useMemo","reduce","cssVarRule","cssVar","current","id","_a","remove","exports"],"sources":["../src/packages/react-components/react-provider/src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useRenderer_unstable } from '@griffel/react';\nimport * as React from 'react';\n\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n ? (React as never)['useInsertion' + 'Effect']\n : useIsomorphicLayoutEffect;\n\nconst createStyleTag = (target: Document | undefined, elementAttributes: Record<string, string>) => {\n if (!target) {\n return undefined;\n }\n\n const tag = target.createElement('style');\n\n Object.keys(elementAttributes).forEach(attrName => {\n tag.setAttribute(attrName, elementAttributes[attrName]);\n });\n\n target.head.appendChild(tag);\n return tag;\n};\n\nconst insertSheet = (tag: HTMLStyleElement, rule: string) => {\n const sheet = tag.sheet;\n\n if (sheet) {\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n sheet.insertRule(rule, 0);\n } else if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n }\n};\n\n/**\n * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n *\n * @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {\n const { targetDocument, theme } = options;\n\n const renderer = useRenderer_unstable();\n const styleTag = React.useRef<HTMLStyleElement>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\n const styleElementAttributes = renderer.styleElementAttributes;\n\n const cssVarsAsString = React.useMemo(() => {\n return theme\n ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '')\n : '';\n }, [theme]);\n\n const rule = `.${styleTagId} { ${cssVarsAsString} }`;\n\n useInsertionEffect(() => {\n styleTag.current = createStyleTag(targetDocument, { ...styleElementAttributes, id: styleTagId });\n\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n\n return () => {\n styleTag.current?.remove();\n };\n }\n }, [styleTagId, targetDocument, rule, styleElementAttributes]);\n\n return styleTagId;\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["FluentProvider_1","require","Object","defineProperty","exports","enumerable","get","fluentProviderClassNames","FluentProvider","renderFluentProvider_unstable","useFluentProviderContextValues_unstable","useFluentProvider_unstable","useFluentProviderStyles_unstable","useFluentProviderThemeStyleTag"],"sources":["../src/packages/react-components/react-provider/src/index.ts"],"sourcesContent":["export {\n fluentProviderClassNames,\n FluentProvider,\n renderFluentProvider_unstable,\n useFluentProviderContextValues_unstable,\n useFluentProvider_unstable,\n useFluentProviderStyles_unstable,\n useFluentProviderThemeStyleTag,\n} from './FluentProvider';\nexport type {\n FluentProviderContextValues,\n FluentProviderCustomStyleHooks,\n FluentProviderProps,\n FluentProviderState,\n FluentProviderSlots,\n} from './FluentProvider';\n"],"mappings":";;;;;;AAAA,IAAAA,gBAAA,gBAAAC,OAAA;AACEC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,gBAAA,CAAAO,wBAAwB;EAAA;AAAA;AACxBL,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,gBAAA,CAAAQ,cAAc;EAAA;AAAA;AACdN,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,gBAAA,CAAAS,6BAA6B;EAAA;AAAA;AAC7BP,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,gBAAA,CAAAU,uCAAuC;EAAA;AAAA;AACvCR,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,gBAAA,CAAAW,0BAA0B;EAAA;AAAA;AAC1BT,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,gBAAA,CAAAY,gCAAgC;EAAA;AAAA;AAChCV,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,gBAAA,CAAAa,8BAA8B;EAAA;AAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-provider",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.4.1",
|
|
4
4
|
"description": "Fluent UI React provider component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -34,10 +34,10 @@
|
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@griffel/core": "^1.9.0",
|
|
36
36
|
"@griffel/react": "^1.5.2",
|
|
37
|
-
"@fluentui/react-shared-contexts": "^9.
|
|
38
|
-
"@fluentui/react-tabster": "^9.5.
|
|
37
|
+
"@fluentui/react-shared-contexts": "^9.3.0",
|
|
38
|
+
"@fluentui/react-tabster": "^9.5.5",
|
|
39
39
|
"@fluentui/react-theme": "^9.1.5",
|
|
40
|
-
"@fluentui/react-utilities": "^9.6.
|
|
40
|
+
"@fluentui/react-utilities": "^9.6.2",
|
|
41
41
|
"tslib": "^2.1.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|