@fluentui/react-provider 0.0.0-nightly-20220302-0405.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 +3190 -0
- package/CHANGELOG.md +1174 -0
- package/LICENSE +15 -0
- package/README.md +5 -0
- package/dist/react-provider.d.ts +69 -0
- package/lib/FluentProvider.d.ts +1 -0
- package/lib/FluentProvider.js +2 -0
- package/lib/FluentProvider.js.map +1 -0
- package/lib/components/FluentProvider/FluentProvider.d.ts +3 -0
- package/lib/components/FluentProvider/FluentProvider.js +13 -0
- package/lib/components/FluentProvider/FluentProvider.js.map +1 -0
- package/lib/components/FluentProvider/FluentProvider.types.d.ts +26 -0
- package/lib/components/FluentProvider/FluentProvider.types.js +2 -0
- package/lib/components/FluentProvider/FluentProvider.types.js.map +1 -0
- package/lib/components/FluentProvider/index.d.ts +6 -0
- package/lib/components/FluentProvider/index.js +7 -0
- package/lib/components/FluentProvider/index.js.map +1 -0
- package/lib/components/FluentProvider/renderFluentProvider.d.ts +5 -0
- package/lib/components/FluentProvider/renderFluentProvider.js +27 -0
- package/lib/components/FluentProvider/renderFluentProvider.js.map +1 -0
- package/lib/components/FluentProvider/useFluentProvider.d.ts +12 -0
- package/lib/components/FluentProvider/useFluentProvider.js +74 -0
- package/lib/components/FluentProvider/useFluentProvider.js.map +1 -0
- package/lib/components/FluentProvider/useFluentProviderContextValues.d.ts +2 -0
- package/lib/components/FluentProvider/useFluentProviderContextValues.js +24 -0
- package/lib/components/FluentProvider/useFluentProviderContextValues.js.map +1 -0
- package/lib/components/FluentProvider/useFluentProviderStyles.d.ts +4 -0
- package/lib/components/FluentProvider/useFluentProviderStyles.js +24 -0
- package/lib/components/FluentProvider/useFluentProviderStyles.js.map +1 -0
- package/lib/components/FluentProvider/useThemeStyleTag.d.ts +7 -0
- package/lib/components/FluentProvider/useThemeStyleTag.js +56 -0
- package/lib/components/FluentProvider/useThemeStyleTag.js.map +1 -0
- package/lib/index.d.ts +2 -0
- package/lib/index.js +3 -0
- package/lib/index.js.map +1 -0
- package/lib/tsdoc-metadata.json +11 -0
- package/lib-commonjs/FluentProvider.d.ts +1 -0
- package/lib-commonjs/FluentProvider.js +10 -0
- package/lib-commonjs/FluentProvider.js.map +1 -0
- package/lib-commonjs/components/FluentProvider/FluentProvider.d.ts +3 -0
- package/lib-commonjs/components/FluentProvider/FluentProvider.js +25 -0
- package/lib-commonjs/components/FluentProvider/FluentProvider.js.map +1 -0
- package/lib-commonjs/components/FluentProvider/FluentProvider.types.d.ts +26 -0
- package/lib-commonjs/components/FluentProvider/FluentProvider.types.js +6 -0
- package/lib-commonjs/components/FluentProvider/FluentProvider.types.js.map +1 -0
- package/lib-commonjs/components/FluentProvider/index.d.ts +6 -0
- package/lib-commonjs/components/FluentProvider/index.js +20 -0
- package/lib-commonjs/components/FluentProvider/index.js.map +1 -0
- package/lib-commonjs/components/FluentProvider/renderFluentProvider.d.ts +5 -0
- package/lib-commonjs/components/FluentProvider/renderFluentProvider.js +40 -0
- package/lib-commonjs/components/FluentProvider/renderFluentProvider.js.map +1 -0
- package/lib-commonjs/components/FluentProvider/useFluentProvider.d.ts +12 -0
- package/lib-commonjs/components/FluentProvider/useFluentProvider.js +88 -0
- package/lib-commonjs/components/FluentProvider/useFluentProvider.js.map +1 -0
- package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.d.ts +2 -0
- package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.js +35 -0
- package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.js.map +1 -0
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.d.ts +4 -0
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.js +35 -0
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.js.map +1 -0
- package/lib-commonjs/components/FluentProvider/useThemeStyleTag.d.ts +7 -0
- package/lib-commonjs/components/FluentProvider/useThemeStyleTag.js +68 -0
- package/lib-commonjs/components/FluentProvider/useThemeStyleTag.js.map +1 -0
- package/lib-commonjs/index.d.ts +2 -0
- package/lib-commonjs/index.js +26 -0
- package/lib-commonjs/index.js.map +1 -0
- package/package.json +65 -0
package/LICENSE
ADDED
@@ -0,0 +1,15 @@
|
|
1
|
+
@fluentui/react-provider
|
2
|
+
|
3
|
+
Copyright (c) Microsoft Corporation
|
4
|
+
|
5
|
+
All rights reserved.
|
6
|
+
|
7
|
+
MIT License
|
8
|
+
|
9
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
10
|
+
|
11
|
+
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
12
|
+
|
13
|
+
THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
14
|
+
|
15
|
+
Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license
|
package/README.md
ADDED
@@ -0,0 +1,5 @@
|
|
1
|
+
# @fluentui/react-provider
|
2
|
+
|
3
|
+
**React Provider component for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
|
4
|
+
|
5
|
+
These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
|
@@ -0,0 +1,69 @@
|
|
1
|
+
import type { ComponentProps } from '@fluentui/react-utilities';
|
2
|
+
import type { ComponentState } from '@fluentui/react-utilities';
|
3
|
+
import type { PartialTheme } from '@fluentui/react-theme';
|
4
|
+
import type { ProviderContextValue } from '@fluentui/react-shared-contexts';
|
5
|
+
import * as React_2 from 'react';
|
6
|
+
import type { Slot } from '@fluentui/react-utilities';
|
7
|
+
import type { Theme } from '@fluentui/react-theme';
|
8
|
+
import type { ThemeClassNameContextValue } from '@fluentui/react-shared-contexts';
|
9
|
+
import type { TooltipContextType } from '@fluentui/react-shared-contexts';
|
10
|
+
import { useFluent } from '@fluentui/react-shared-contexts';
|
11
|
+
import { useTheme } from '@fluentui/react-shared-contexts';
|
12
|
+
|
13
|
+
export declare const FluentProvider: React_2.ForwardRefExoticComponent<FluentProviderProps & React_2.RefAttributes<HTMLElement>>;
|
14
|
+
|
15
|
+
export declare const fluentProviderClassName = "fui-FluentProvider";
|
16
|
+
|
17
|
+
declare interface FluentProviderCommons {
|
18
|
+
/** Sets the direction of text & generated styles. */
|
19
|
+
dir: 'ltr' | 'rtl';
|
20
|
+
/** Provides the document, can be undefined during SSR render. */
|
21
|
+
targetDocument: Document | undefined;
|
22
|
+
}
|
23
|
+
|
24
|
+
export declare interface FluentProviderContextValues extends Pick<FluentProviderState, 'theme'> {
|
25
|
+
provider: ProviderContextValue;
|
26
|
+
themeClassName: ThemeClassNameContextValue;
|
27
|
+
textDirection: 'ltr' | 'rtl';
|
28
|
+
tooltip: TooltipContextType;
|
29
|
+
}
|
30
|
+
|
31
|
+
export declare interface FluentProviderProps extends Omit<ComponentProps<FluentProviderSlots>, 'dir'>, Partial<FluentProviderCommons> {
|
32
|
+
theme?: PartialTheme;
|
33
|
+
}
|
34
|
+
|
35
|
+
export declare type FluentProviderSlots = {
|
36
|
+
root: Slot<'div'>;
|
37
|
+
};
|
38
|
+
|
39
|
+
export declare interface FluentProviderState extends ComponentState<FluentProviderSlots>, FluentProviderCommons {
|
40
|
+
theme: Theme | Partial<Theme> | undefined;
|
41
|
+
themeClassName: string;
|
42
|
+
}
|
43
|
+
|
44
|
+
/**
|
45
|
+
* Render the final JSX of FluentProvider
|
46
|
+
*/
|
47
|
+
export declare const renderFluentProvider_unstable: (state: FluentProviderState, contextValues: FluentProviderContextValues) => JSX.Element;
|
48
|
+
|
49
|
+
export { useFluent }
|
50
|
+
|
51
|
+
/**
|
52
|
+
* Create the state required to render FluentProvider.
|
53
|
+
*
|
54
|
+
* The returned state can be modified with hooks such as useFluentProviderStyles_unstable,
|
55
|
+
* before being passed to renderFluentProvider_unstable.
|
56
|
+
*
|
57
|
+
* @param props - props from this instance of FluentProvider
|
58
|
+
* @param ref - reference to root HTMLElement of FluentProvider
|
59
|
+
*/
|
60
|
+
export declare const useFluentProvider_unstable: (props: FluentProviderProps, ref: React_2.Ref<HTMLElement>) => FluentProviderState;
|
61
|
+
|
62
|
+
export declare function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues;
|
63
|
+
|
64
|
+
/** Applies style classnames to slots */
|
65
|
+
export declare const useFluentProviderStyles_unstable: (state: FluentProviderState) => FluentProviderState;
|
66
|
+
|
67
|
+
export { useTheme }
|
68
|
+
|
69
|
+
export { }
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './components/FluentProvider/index';
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"FluentProvider.js","sourceRoot":"../src/","sources":["FluentProvider.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC","sourcesContent":["export * from './components/FluentProvider/index';\n"]}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { renderFluentProvider_unstable } from './renderFluentProvider';
|
3
|
+
import { useFluentProvider_unstable } from './useFluentProvider';
|
4
|
+
import { useFluentProviderStyles_unstable } from './useFluentProviderStyles';
|
5
|
+
import { useFluentProviderContextValues_unstable } from './useFluentProviderContextValues';
|
6
|
+
export const FluentProvider = /*#__PURE__*/React.forwardRef((props, ref) => {
|
7
|
+
const state = useFluentProvider_unstable(props, ref);
|
8
|
+
useFluentProviderStyles_unstable(state);
|
9
|
+
const contextValues = useFluentProviderContextValues_unstable(state);
|
10
|
+
return renderFluentProvider_unstable(state, contextValues);
|
11
|
+
});
|
12
|
+
FluentProvider.displayName = 'FluentProvider';
|
13
|
+
//# sourceMappingURL=FluentProvider.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/FluentProvider/FluentProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,gCAAT,QAAiD,2BAAjD;AACA,SAAS,uCAAT,QAAwD,kCAAxD;AAGA,OAAO,MAAM,cAAc,gBAAG,KAAK,CAAC,UAAN,CAAmD,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,0BAA0B,CAAC,KAAD,EAAQ,GAAR,CAAxC;AACA,EAAA,gCAAgC,CAAC,KAAD,CAAhC;AAEA,QAAM,aAAa,GAAG,uCAAuC,CAAC,KAAD,CAA7D;AAEA,SAAO,6BAA6B,CAAC,KAAD,EAAQ,aAAR,CAApC;AACD,CAP6B,CAAvB;AASP,cAAc,CAAC,WAAf,GAA6B,gBAA7B","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"],"sourceRoot":"../src/"}
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import type { ProviderContextValue, TooltipContextType, ThemeClassNameContextValue } from '@fluentui/react-shared-contexts';
|
2
|
+
import type { PartialTheme, Theme } from '@fluentui/react-theme';
|
3
|
+
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
4
|
+
export declare type FluentProviderSlots = {
|
5
|
+
root: Slot<'div'>;
|
6
|
+
};
|
7
|
+
interface FluentProviderCommons {
|
8
|
+
/** Sets the direction of text & generated styles. */
|
9
|
+
dir: 'ltr' | 'rtl';
|
10
|
+
/** Provides the document, can be undefined during SSR render. */
|
11
|
+
targetDocument: Document | undefined;
|
12
|
+
}
|
13
|
+
export interface FluentProviderProps extends Omit<ComponentProps<FluentProviderSlots>, 'dir'>, Partial<FluentProviderCommons> {
|
14
|
+
theme?: PartialTheme;
|
15
|
+
}
|
16
|
+
export interface FluentProviderState extends ComponentState<FluentProviderSlots>, FluentProviderCommons {
|
17
|
+
theme: Theme | Partial<Theme> | undefined;
|
18
|
+
themeClassName: string;
|
19
|
+
}
|
20
|
+
export interface FluentProviderContextValues extends Pick<FluentProviderState, 'theme'> {
|
21
|
+
provider: ProviderContextValue;
|
22
|
+
themeClassName: ThemeClassNameContextValue;
|
23
|
+
textDirection: 'ltr' | 'rtl';
|
24
|
+
tooltip: TooltipContextType;
|
25
|
+
}
|
26
|
+
export {};
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"FluentProvider.types.js","sourceRoot":"../src/","sources":["components/FluentProvider/FluentProvider.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n ProviderContextValue,\n TooltipContextType,\n ThemeClassNameContextValue,\n} from '@fluentui/react-shared-contexts';\nimport type { PartialTheme, Theme } from '@fluentui/react-theme';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type FluentProviderSlots = {\n root: Slot<'div'>;\n};\n\ninterface FluentProviderCommons {\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 | undefined;\n}\n\nexport interface FluentProviderProps\n extends Omit<ComponentProps<FluentProviderSlots>, 'dir'>,\n Partial<FluentProviderCommons> {\n theme?: PartialTheme;\n}\n\nexport interface FluentProviderState extends ComponentState<FluentProviderSlots>, FluentProviderCommons {\n theme: Theme | Partial<Theme> | undefined;\n themeClassName: string;\n}\n\nexport interface FluentProviderContextValues extends Pick<FluentProviderState, 'theme'> {\n provider: ProviderContextValue;\n themeClassName: ThemeClassNameContextValue;\n textDirection: 'ltr' | 'rtl';\n tooltip: TooltipContextType;\n}\n"]}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
export * from './FluentProvider';
|
2
|
+
export * from './FluentProvider.types';
|
3
|
+
export * from './renderFluentProvider';
|
4
|
+
export * from './useFluentProvider';
|
5
|
+
export * from './useFluentProviderStyles';
|
6
|
+
export * from './useFluentProviderContextValues';
|
7
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/FluentProvider/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './FluentProvider';\nexport * from './FluentProvider.types';\nexport * from './renderFluentProvider';\nexport * from './useFluentProvider';\nexport * from './useFluentProviderStyles';\nexport * from './useFluentProviderContextValues';\n"]}
|
@@ -0,0 +1,5 @@
|
|
1
|
+
import type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';
|
2
|
+
/**
|
3
|
+
* Render the final JSX of FluentProvider
|
4
|
+
*/
|
5
|
+
export declare const renderFluentProvider_unstable: (state: FluentProviderState, contextValues: FluentProviderContextValues) => JSX.Element;
|
@@ -0,0 +1,27 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import { TextDirectionProvider } from '@griffel/react';
|
3
|
+
import { ProviderContext, TooltipContext, ThemeContext, ThemeClassNameContext } from '@fluentui/react-shared-contexts';
|
4
|
+
import { getSlots } from '@fluentui/react-utilities';
|
5
|
+
/**
|
6
|
+
* Render the final JSX of FluentProvider
|
7
|
+
*/
|
8
|
+
|
9
|
+
export const renderFluentProvider_unstable = (state, contextValues) => {
|
10
|
+
const {
|
11
|
+
slots,
|
12
|
+
slotProps
|
13
|
+
} = getSlots(state);
|
14
|
+
return /*#__PURE__*/React.createElement(ProviderContext.Provider, {
|
15
|
+
value: contextValues.provider
|
16
|
+
}, /*#__PURE__*/React.createElement(ThemeContext.Provider, {
|
17
|
+
value: contextValues.theme
|
18
|
+
}, /*#__PURE__*/React.createElement(ThemeClassNameContext.Provider, {
|
19
|
+
value: contextValues.themeClassName
|
20
|
+
}, /*#__PURE__*/React.createElement(TooltipContext.Provider, {
|
21
|
+
value: contextValues.tooltip
|
22
|
+
}, /*#__PURE__*/React.createElement(TextDirectionProvider, {
|
23
|
+
dir: contextValues.textDirection
|
24
|
+
}, /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
|
25
|
+
}, state.root.children))))));
|
26
|
+
};
|
27
|
+
//# sourceMappingURL=renderFluentProvider.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/FluentProvider/renderFluentProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SAAS,eAAT,EAA0B,cAA1B,EAA0C,YAA1C,EAAwD,qBAAxD,QAAqF,iCAArF;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,6BAA6B,GAAG,CAC3C,KAD2C,EAE3C,aAF2C,KAGzC;AACF,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAsB,KAAtB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,eAAe,CAAC,QAAjB,EAAyB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAzB,eACE,KAAA,CAAA,aAAA,CAAC,YAAY,CAAC,QAAd,EAAsB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAtB,eACE,KAAA,CAAA,aAAA,CAAC,qBAAqB,CAAC,QAAvB,EAA+B;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAA/B,eACE,KAAA,CAAA,aAAA,CAAC,cAAc,CAAC,QAAhB,EAAwB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAxB,eACE,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB;AAAC,IAAA,GAAG,EAAE,aAAa,CAAC;AAApB,GAAtB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EAAiC,KAAK,CAAC,IAAN,CAAW,QAA5C,CADF,CADF,CADF,CADF,CADF,CADF;AAaD,CAnBM","sourcesContent":["import * as React from 'react';\nimport { TextDirectionProvider } from '@griffel/react';\nimport { ProviderContext, TooltipContext, ThemeContext, ThemeClassNameContext } 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 return (\n <ProviderContext.Provider value={contextValues.provider}>\n <ThemeContext.Provider value={contextValues.theme}>\n <ThemeClassNameContext.Provider value={contextValues.themeClassName}>\n <TooltipContext.Provider value={contextValues.tooltip}>\n <TextDirectionProvider dir={contextValues.textDirection}>\n <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n </TextDirectionProvider>\n </TooltipContext.Provider>\n </ThemeClassNameContext.Provider>\n </ThemeContext.Provider>\n </ProviderContext.Provider>\n );\n};\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1,12 @@
|
|
1
|
+
import * as React from 'react';
|
2
|
+
import type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';
|
3
|
+
/**
|
4
|
+
* Create the state required to render FluentProvider.
|
5
|
+
*
|
6
|
+
* The returned state can be modified with hooks such as useFluentProviderStyles_unstable,
|
7
|
+
* before being passed to renderFluentProvider_unstable.
|
8
|
+
*
|
9
|
+
* @param props - props from this instance of FluentProvider
|
10
|
+
* @param ref - reference to root HTMLElement of FluentProvider
|
11
|
+
*/
|
12
|
+
export declare const useFluentProvider_unstable: (props: FluentProviderProps, ref: React.Ref<HTMLElement>) => FluentProviderState;
|
@@ -0,0 +1,74 @@
|
|
1
|
+
import { useKeyboardNavAttribute } from '@fluentui/react-tabster';
|
2
|
+
import { useFluent, useTheme } from '@fluentui/react-shared-contexts';
|
3
|
+
import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
|
4
|
+
import * as React from 'react';
|
5
|
+
import { useThemeStyleTag } from './useThemeStyleTag';
|
6
|
+
/**
|
7
|
+
* Create the state required to render FluentProvider.
|
8
|
+
*
|
9
|
+
* The returned state can be modified with hooks such as useFluentProviderStyles_unstable,
|
10
|
+
* before being passed to renderFluentProvider_unstable.
|
11
|
+
*
|
12
|
+
* @param props - props from this instance of FluentProvider
|
13
|
+
* @param ref - reference to root HTMLElement of FluentProvider
|
14
|
+
*/
|
15
|
+
|
16
|
+
export const useFluentProvider_unstable = (props, ref) => {
|
17
|
+
const parentContext = useFluent();
|
18
|
+
const parentTheme = useTheme();
|
19
|
+
/**
|
20
|
+
* TODO: add merge functions to "dir" merge,
|
21
|
+
* nesting providers with the same "dir" should not add additional attributes to DOM
|
22
|
+
* see https://github.com/microsoft/fluentui/blob/0dc74a19f3aa5a058224c20505016fbdb84db172/packages/fluentui/react-northstar/src/utils/mergeProviderContexts.ts#L89-L93
|
23
|
+
*/
|
24
|
+
|
25
|
+
const {
|
26
|
+
dir = parentContext.dir,
|
27
|
+
targetDocument = parentContext.targetDocument,
|
28
|
+
theme
|
29
|
+
} = props;
|
30
|
+
const mergedTheme = mergeThemes(parentTheme, theme);
|
31
|
+
React.useEffect(() => {
|
32
|
+
if (process.env.NODE_ENV !== 'production' && mergedTheme === undefined) {
|
33
|
+
// eslint-disable-next-line no-console
|
34
|
+
console.warn(`
|
35
|
+
FluentProvider: your "theme" is not defined !
|
36
|
+
=============================================
|
37
|
+
Make sure your root FluentProvider has set a theme or you're setting the theme in your child FluentProvider.
|
38
|
+
`);
|
39
|
+
} // eslint-disable-next-line react-hooks/exhaustive-deps
|
40
|
+
|
41
|
+
}, []);
|
42
|
+
return {
|
43
|
+
dir,
|
44
|
+
targetDocument,
|
45
|
+
theme: mergedTheme,
|
46
|
+
themeClassName: useThemeStyleTag({
|
47
|
+
theme: mergedTheme,
|
48
|
+
targetDocument
|
49
|
+
}),
|
50
|
+
components: {
|
51
|
+
root: 'div'
|
52
|
+
},
|
53
|
+
root: getNativeElementProps('div', { ...props,
|
54
|
+
dir,
|
55
|
+
ref: useMergedRefs(ref, useKeyboardNavAttribute())
|
56
|
+
})
|
57
|
+
};
|
58
|
+
};
|
59
|
+
|
60
|
+
function mergeThemes(a, b) {
|
61
|
+
// Merge impacts perf: we should like to avoid it if it's possible
|
62
|
+
if (a && b) {
|
63
|
+
return { ...a,
|
64
|
+
...b
|
65
|
+
};
|
66
|
+
}
|
67
|
+
|
68
|
+
if (a) {
|
69
|
+
return a;
|
70
|
+
}
|
71
|
+
|
72
|
+
return b;
|
73
|
+
}
|
74
|
+
//# sourceMappingURL=useFluentProvider.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":"AAAA,SAAS,uBAAT,QAAwC,yBAAxC;AAEA,SAAS,SAAT,EAAoB,QAApB,QAAoC,iCAApC;AACA,SAAS,qBAAT,EAAgC,aAAhC,QAAqD,2BAArD;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;AACvB,QAAM,aAAa,GAAG,SAAS,EAA/B;AACA,QAAM,WAAW,GAAG,QAAQ,EAA5B;AAEA;;;;AAIG;;AACH,QAAM;AAAE,IAAA,GAAG,GAAG,aAAa,CAAC,GAAtB;AAA2B,IAAA,cAAc,GAAG,aAAa,CAAC,cAA1D;AAA0E,IAAA;AAA1E,MAAoF,KAA1F;AACA,QAAM,WAAW,GAAG,WAAW,CAAC,WAAD,EAAc,KAAd,CAA/B;AAEA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,QAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,IAAyC,WAAW,KAAK,SAA7D,EAAwE;AACtE;AACA,MAAA,OAAO,CAAC,IAAR,CAAa;;;;AAIZ,OAJD;AAKD,KARkB,CASnB;;AACD,GAVD,EAUG,EAVH;AAYA,SAAO;AACL,IAAA,GADK;AAEL,IAAA,cAFK;AAGL,IAAA,KAAK,EAAE,WAHF;AAIL,IAAA,cAAc,EAAE,gBAAgB,CAAC;AAAE,MAAA,KAAK,EAAE,WAAT;AAAsB,MAAA;AAAtB,KAAD,CAJ3B;AAML,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE;AADI,KANP;AAUL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ,EACjC,GAAG,KAD8B;AAEjC,MAAA,GAFiC;AAGjC,MAAA,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,uBAAuB,EAA7B;AAHe,KAAR;AAVtB,GAAP;AAgBD,CA3CM;;AA6CP,SAAS,WAAT,CAAqB,CAArB,EAA4D,CAA5D,EAAuE;AACrE;AACA,MAAI,CAAC,IAAI,CAAT,EAAY;AACV,WAAO,EAAE,GAAG,CAAL;AAAQ,SAAG;AAAX,KAAP;AACD;;AAED,MAAI,CAAJ,EAAO;AACL,WAAO,CAAP;AACD;;AAED,SAAO,CAAP;AACD","sourcesContent":["import { useKeyboardNavAttribute } from '@fluentui/react-tabster';\nimport type { Theme } from '@fluentui/react-theme';\nimport { useFluent, useTheme } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useThemeStyleTag } from './useThemeStyleTag';\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\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 { dir = parentContext.dir, targetDocument = parentContext.targetDocument, theme } = props;\n const mergedTheme = mergeThemes(parentTheme, theme);\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 dir,\n targetDocument,\n theme: mergedTheme,\n themeClassName: useThemeStyleTag({ theme: mergedTheme, targetDocument }),\n\n components: {\n root: 'div',\n },\n\n root: getNativeElementProps('div', {\n ...props,\n dir,\n ref: useMergedRefs(ref, useKeyboardNavAttribute()),\n }),\n };\n};\n\nfunction mergeThemes(a: Theme | Partial<Theme> | undefined, b: typeof a): Theme | Partial<Theme> | undefined {\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"],"sourceRoot":"../src/"}
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import { useConst } from '@fluentui/react-utilities';
|
2
|
+
import * as React from 'react';
|
3
|
+
export function useFluentProviderContextValues_unstable(state) {
|
4
|
+
const {
|
5
|
+
root,
|
6
|
+
dir,
|
7
|
+
targetDocument,
|
8
|
+
theme
|
9
|
+
} = state;
|
10
|
+
const provider = React.useMemo(() => ({
|
11
|
+
dir,
|
12
|
+
targetDocument
|
13
|
+
}), [dir, targetDocument]); // "Tooltip" component mutates an object in this context, instance should be stable
|
14
|
+
|
15
|
+
const tooltip = useConst({});
|
16
|
+
return {
|
17
|
+
provider,
|
18
|
+
textDirection: dir,
|
19
|
+
tooltip,
|
20
|
+
theme,
|
21
|
+
themeClassName: root.className
|
22
|
+
};
|
23
|
+
}
|
24
|
+
//# sourceMappingURL=useFluentProviderContextValues.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/FluentProvider/useFluentProviderContextValues.ts"],"names":[],"mappings":"AAAA,SAAS,QAAT,QAAyB,2BAAzB;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,OAAM,SAAU,uCAAV,CAAkD,KAAlD,EAA4E;AAChF,QAAM;AAAE,IAAA,IAAF;AAAQ,IAAA,GAAR;AAAa,IAAA,cAAb;AAA6B,IAAA;AAA7B,MAAuC,KAA7C;AAEA,QAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,OAAO;AAAE,IAAA,GAAF;AAAO,IAAA;AAAP,GAAP,CAAd,EAA+C,CAAC,GAAD,EAAM,cAAN,CAA/C,CAAjB,CAHgF,CAIhF;;AACA,QAAM,OAAO,GAAG,QAAQ,CAAC,EAAD,CAAxB;AAEA,SAAO;AACL,IAAA,QADK;AAEL,IAAA,aAAa,EAAE,GAFV;AAGL,IAAA,OAHK;AAIL,IAAA,KAJK;AAKL,IAAA,cAAc,EAAE,IAAI,CAAC;AALhB,GAAP;AAOD","sourcesContent":["import { useConst } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\nexport function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues {\n const { root, dir, targetDocument, theme } = 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 = useConst({});\n\n return {\n provider,\n textDirection: dir,\n tooltip,\n theme,\n themeClassName: root.className!,\n };\n}\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1,4 @@
|
|
1
|
+
import type { FluentProviderState } from './FluentProvider.types';
|
2
|
+
export declare const fluentProviderClassName = "fui-FluentProvider";
|
3
|
+
/** Applies style classnames to slots */
|
4
|
+
export declare const useFluentProviderStyles_unstable: (state: FluentProviderState) => FluentProviderState;
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import { __styles, mergeClasses } from '@griffel/react';
|
2
|
+
import { tokens } from '@fluentui/react-theme';
|
3
|
+
export const fluentProviderClassName = 'fui-FluentProvider';
|
4
|
+
|
5
|
+
const useStyles = /*#__PURE__*/__styles({
|
6
|
+
"root": {
|
7
|
+
"sj55zd": "f19n0e5",
|
8
|
+
"De3pzq": "fxugw4r",
|
9
|
+
"Bahqtrf": "fk6fouc",
|
10
|
+
"Be2twd7": "fkhj508",
|
11
|
+
"Bhrd7zp": "figsok6"
|
12
|
+
}
|
13
|
+
}, {
|
14
|
+
"d": [".f19n0e5{color:var(--colorNeutralForeground1);}", ".fxugw4r{background-color:var(--colorNeutralBackground1);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}"]
|
15
|
+
});
|
16
|
+
/** Applies style classnames to slots */
|
17
|
+
|
18
|
+
|
19
|
+
export const useFluentProviderStyles_unstable = state => {
|
20
|
+
const styles = useStyles();
|
21
|
+
state.root.className = mergeClasses(fluentProviderClassName, state.themeClassName, styles.root, state.root.className);
|
22
|
+
return state;
|
23
|
+
};
|
24
|
+
//# sourceMappingURL=useFluentProviderStyles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/FluentProvider/useFluentProviderStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,uBAAuB,GAAG,oBAAhC;;AAEP,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAUA;;;AACA,OAAO,MAAM,gCAAgC,GAAI,KAAD,IAA+B;AAC7E,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CAAC,uBAAD,EAA0B,KAAK,CAAC,cAAhC,EAAgD,MAAM,CAAC,IAAvD,EAA6D,KAAK,CAAC,IAAN,CAAW,SAAxE,CAAnC;AAEA,SAAO,KAAP;AACD,CANM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport type { FluentProviderState } from './FluentProvider.types';\n\nexport const fluentProviderClassName = 'fui-FluentProvider';\n\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase300,\n fontWeight: tokens.fontWeightRegular,\n },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState) => {\n const styles = useStyles();\n\n state.root.className = mergeClasses(fluentProviderClassName, state.themeClassName, styles.root, state.root.className);\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
import type { FluentProviderState } from './FluentProvider.types';
|
2
|
+
/**
|
3
|
+
* Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
|
4
|
+
*
|
5
|
+
* @returns CSS class to apply the rule
|
6
|
+
*/
|
7
|
+
export declare const useThemeStyleTag: (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => string;
|
@@ -0,0 +1,56 @@
|
|
1
|
+
import { useId, usePrevious } from '@fluentui/react-utilities';
|
2
|
+
import * as React from 'react';
|
3
|
+
import { fluentProviderClassName } from './useFluentProviderStyles';
|
4
|
+
/**
|
5
|
+
* Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
|
6
|
+
*
|
7
|
+
* @returns CSS class to apply the rule
|
8
|
+
*/
|
9
|
+
|
10
|
+
export const useThemeStyleTag = options => {
|
11
|
+
const {
|
12
|
+
targetDocument,
|
13
|
+
theme
|
14
|
+
} = options;
|
15
|
+
const styleTagId = useId(fluentProviderClassName);
|
16
|
+
const styleTag = React.useMemo(() => {
|
17
|
+
if (!targetDocument) {
|
18
|
+
return null;
|
19
|
+
}
|
20
|
+
|
21
|
+
const tag = targetDocument.createElement('style');
|
22
|
+
tag.setAttribute('id', styleTagId);
|
23
|
+
targetDocument.head.appendChild(tag);
|
24
|
+
return tag;
|
25
|
+
}, [styleTagId, targetDocument]);
|
26
|
+
const cssRule = React.useMemo(() => {
|
27
|
+
const cssVarsAsString = theme ? Object.keys(theme).reduce((cssVarRule, cssVar) => {
|
28
|
+
cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;
|
29
|
+
return cssVarRule;
|
30
|
+
}, '') : ''; // result: .fluent-provider1 { --css-var: '#fff' }
|
31
|
+
|
32
|
+
return `.${styleTagId} { ${cssVarsAsString} }`;
|
33
|
+
}, [theme, styleTagId]);
|
34
|
+
const previousCssRule = usePrevious(cssRule);
|
35
|
+
|
36
|
+
if (styleTag && previousCssRule !== cssRule) {
|
37
|
+
const sheet = styleTag.sheet;
|
38
|
+
|
39
|
+
if (sheet.cssRules.length > 0) {
|
40
|
+
sheet.deleteRule(0);
|
41
|
+
}
|
42
|
+
|
43
|
+
sheet.insertRule(cssRule, 0);
|
44
|
+
} // Removes the style tag from the targetDocument on unmount or change
|
45
|
+
|
46
|
+
|
47
|
+
React.useEffect(() => {
|
48
|
+
return () => {
|
49
|
+
if (styleTag) {
|
50
|
+
styleTag.remove();
|
51
|
+
}
|
52
|
+
};
|
53
|
+
}, [styleTag]);
|
54
|
+
return styleTagId;
|
55
|
+
};
|
56
|
+
//# sourceMappingURL=useThemeStyleTag.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/FluentProvider/useThemeStyleTag.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,WAAhB,QAAmC,2BAAnC;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,uBAAT,QAAwC,2BAAxC;AAEA;;;;AAIG;;AACH,OAAO,MAAM,gBAAgB,GAAI,OAAD,IAAmE;AACjG,QAAM;AAAE,IAAA,cAAF;AAAkB,IAAA;AAAlB,MAA4B,OAAlC;AAEA,QAAM,UAAU,GAAG,KAAK,CAAC,uBAAD,CAAxB;AACA,QAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;AAClC,QAAI,CAAC,cAAL,EAAqB;AACnB,aAAO,IAAP;AACD;;AAED,UAAM,GAAG,GAAG,cAAc,CAAC,aAAf,CAA6B,OAA7B,CAAZ;AACA,IAAA,GAAG,CAAC,YAAJ,CAAiB,IAAjB,EAAuB,UAAvB;AACA,IAAA,cAAc,CAAC,IAAf,CAAoB,WAApB,CAAgC,GAAhC;AACA,WAAO,GAAP;AACD,GATgB,EASd,CAAC,UAAD,EAAa,cAAb,CATc,CAAjB;AAWA,QAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;AACjC,UAAM,eAAe,GAAG,KAAK,GACxB,MAAM,CAAC,IAAP,CAAY,KAAZ,EAA8C,MAA9C,CAAqD,CAAC,UAAD,EAAa,MAAb,KAAuB;AAC3E,MAAA,UAAU,IAAI,KAAK,MAAM,KAAK,KAAK,CAAC,MAAD,CAAQ,IAA3C;AACA,aAAO,UAAP;AACD,KAHA,EAGE,EAHF,CADwB,GAKzB,EALJ,CADiC,CAQjC;;AACA,WAAO,IAAI,UAAU,MAAM,eAAe,IAA1C;AACD,GAVe,EAUb,CAAC,KAAD,EAAQ,UAAR,CAVa,CAAhB;AAWA,QAAM,eAAe,GAAG,WAAW,CAAC,OAAD,CAAnC;;AAEA,MAAI,QAAQ,IAAI,eAAe,KAAK,OAApC,EAA6C;AAC3C,UAAM,KAAK,GAAG,QAAQ,CAAC,KAAvB;;AAEA,QAAI,KAAK,CAAC,QAAN,CAAe,MAAf,GAAwB,CAA5B,EAA+B;AAC7B,MAAA,KAAK,CAAC,UAAN,CAAiB,CAAjB;AACD;;AAED,IAAA,KAAK,CAAC,UAAN,CAAiB,OAAjB,EAA0B,CAA1B;AACD,GApCgG,CAsCjG;;;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,MAAK;AACnB,WAAO,MAAK;AACV,UAAI,QAAJ,EAAc;AACZ,QAAA,QAAQ,CAAC,MAAT;AACD;AACF,KAJD;AAKD,GAND,EAMG,CAAC,QAAD,CANH;AAQA,SAAO,UAAP;AACD,CAhDM","sourcesContent":["import { useId, usePrevious } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassName } from './useFluentProviderStyles';\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 useThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {\n const { targetDocument, theme } = options;\n\n const styleTagId = useId(fluentProviderClassName);\n const styleTag = React.useMemo(() => {\n if (!targetDocument) {\n return null;\n }\n\n const tag = targetDocument.createElement('style');\n tag.setAttribute('id', styleTagId);\n targetDocument.head.appendChild(tag);\n return tag;\n }, [styleTagId, targetDocument]);\n\n const cssRule = React.useMemo(() => {\n const cssVarsAsString = theme\n ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '')\n : '';\n\n // result: .fluent-provider1 { --css-var: '#fff' }\n return `.${styleTagId} { ${cssVarsAsString} }`;\n }, [theme, styleTagId]);\n const previousCssRule = usePrevious(cssRule);\n\n if (styleTag && previousCssRule !== cssRule) {\n const sheet = styleTag.sheet as CSSStyleSheet;\n\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n\n sheet.insertRule(cssRule, 0);\n }\n\n // Removes the style tag from the targetDocument on unmount or change\n React.useEffect(() => {\n return () => {\n if (styleTag) {\n styleTag.remove();\n }\n };\n }, [styleTag]);\n\n return styleTagId;\n};\n"],"sourceRoot":"../src/"}
|
package/lib/index.d.ts
ADDED
package/lib/index.js
ADDED
package/lib/index.js.map
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC","sourcesContent":["export * from './FluentProvider';\nexport { useFluent, useTheme } from '@fluentui/react-shared-contexts';\n"]}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
|
2
|
+
// It should be published with your NPM package. It should not be tracked by Git.
|
3
|
+
{
|
4
|
+
"tsdocVersion": "0.12",
|
5
|
+
"toolPackages": [
|
6
|
+
{
|
7
|
+
"packageName": "@microsoft/api-extractor",
|
8
|
+
"packageVersion": "7.18.1"
|
9
|
+
}
|
10
|
+
]
|
11
|
+
}
|
@@ -0,0 +1 @@
|
|
1
|
+
export * from './components/FluentProvider/index';
|
@@ -0,0 +1,10 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
|
7
|
+
const tslib_1 = /*#__PURE__*/require("tslib");
|
8
|
+
|
9
|
+
tslib_1.__exportStar(require("./components/FluentProvider/index"), exports);
|
10
|
+
//# sourceMappingURL=FluentProvider.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["FluentProvider.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/FluentProvider/index';\n"],"sourceRoot":"../src/"}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.FluentProvider = void 0;
|
7
|
+
|
8
|
+
const React = /*#__PURE__*/require("react");
|
9
|
+
|
10
|
+
const renderFluentProvider_1 = /*#__PURE__*/require("./renderFluentProvider");
|
11
|
+
|
12
|
+
const useFluentProvider_1 = /*#__PURE__*/require("./useFluentProvider");
|
13
|
+
|
14
|
+
const useFluentProviderStyles_1 = /*#__PURE__*/require("./useFluentProviderStyles");
|
15
|
+
|
16
|
+
const useFluentProviderContextValues_1 = /*#__PURE__*/require("./useFluentProviderContextValues");
|
17
|
+
|
18
|
+
exports.FluentProvider = /*#__PURE__*/React.forwardRef((props, ref) => {
|
19
|
+
const state = useFluentProvider_1.useFluentProvider_unstable(props, ref);
|
20
|
+
useFluentProviderStyles_1.useFluentProviderStyles_unstable(state);
|
21
|
+
const contextValues = useFluentProviderContextValues_1.useFluentProviderContextValues_unstable(state);
|
22
|
+
return renderFluentProvider_1.renderFluentProvider_unstable(state, contextValues);
|
23
|
+
});
|
24
|
+
exports.FluentProvider.displayName = 'FluentProvider';
|
25
|
+
//# sourceMappingURL=FluentProvider.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":["components/FluentProvider/FluentProvider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,gCAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAGa,OAAA,CAAA,cAAA,gBAAiB,KAAK,CAAC,UAAN,CAAmD,CAAC,KAAD,EAAQ,GAAR,KAAe;AAC9F,QAAM,KAAK,GAAG,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,EAAkC,GAAlC,CAAd;AACA,EAAA,yBAAA,CAAA,gCAAA,CAAiC,KAAjC;AAEA,QAAM,aAAa,GAAG,gCAAA,CAAA,uCAAA,CAAwC,KAAxC,CAAtB;AAEA,SAAO,sBAAA,CAAA,6BAAA,CAA8B,KAA9B,EAAqC,aAArC,CAAP;AACD,CAP6B,CAAjB;AASb,OAAA,CAAA,cAAA,CAAe,WAAf,GAA6B,gBAA7B","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"],"sourceRoot":"../src/"}
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import type { ProviderContextValue, TooltipContextType, ThemeClassNameContextValue } from '@fluentui/react-shared-contexts';
|
2
|
+
import type { PartialTheme, Theme } from '@fluentui/react-theme';
|
3
|
+
import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
|
4
|
+
export declare type FluentProviderSlots = {
|
5
|
+
root: Slot<'div'>;
|
6
|
+
};
|
7
|
+
interface FluentProviderCommons {
|
8
|
+
/** Sets the direction of text & generated styles. */
|
9
|
+
dir: 'ltr' | 'rtl';
|
10
|
+
/** Provides the document, can be undefined during SSR render. */
|
11
|
+
targetDocument: Document | undefined;
|
12
|
+
}
|
13
|
+
export interface FluentProviderProps extends Omit<ComponentProps<FluentProviderSlots>, 'dir'>, Partial<FluentProviderCommons> {
|
14
|
+
theme?: PartialTheme;
|
15
|
+
}
|
16
|
+
export interface FluentProviderState extends ComponentState<FluentProviderSlots>, FluentProviderCommons {
|
17
|
+
theme: Theme | Partial<Theme> | undefined;
|
18
|
+
themeClassName: string;
|
19
|
+
}
|
20
|
+
export interface FluentProviderContextValues extends Pick<FluentProviderState, 'theme'> {
|
21
|
+
provider: ProviderContextValue;
|
22
|
+
themeClassName: ThemeClassNameContextValue;
|
23
|
+
textDirection: 'ltr' | 'rtl';
|
24
|
+
tooltip: TooltipContextType;
|
25
|
+
}
|
26
|
+
export {};
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
|