@fluentui/react-provider 9.0.0-nightly.d730088d7f.0 → 9.0.0-rc.10
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 +661 -24
- package/CHANGELOG.md +277 -113
- package/dist/index.d.ts +83 -0
- package/{lib → dist}/tsdoc-metadata.json +0 -0
- package/lib/FluentProvider.js.map +1 -1
- package/lib/components/FluentProvider/FluentProvider.js +9 -9
- package/lib/components/FluentProvider/FluentProvider.js.map +1 -1
- package/lib/components/FluentProvider/FluentProvider.types.js.map +1 -1
- package/lib/components/FluentProvider/index.js +2 -0
- package/lib/components/FluentProvider/index.js.map +1 -1
- package/lib/components/FluentProvider/renderFluentProvider.js +10 -8
- package/lib/components/FluentProvider/renderFluentProvider.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProvider.js +46 -23
- package/lib/components/FluentProvider/useFluentProvider.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProviderContextValues.js +16 -15
- package/lib/components/FluentProvider/useFluentProviderContextValues.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProviderStyles.js +14 -5
- package/lib/components/FluentProvider/useFluentProviderStyles.js.map +1 -1
- package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js +61 -0
- package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -0
- package/lib/index.js +2 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/FluentProvider.js +1 -1
- package/lib-commonjs/FluentProvider.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/FluentProvider.js +10 -10
- 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 +5 -1
- package/lib-commonjs/components/FluentProvider/index.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/renderFluentProvider.js +15 -14
- package/lib-commonjs/components/FluentProvider/renderFluentProvider.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProvider.js +52 -30
- package/lib-commonjs/components/FluentProvider/useFluentProvider.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.js +20 -19
- package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.js +18 -7
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.js.map +1 -1
- package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js +73 -0
- package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -0
- package/lib-commonjs/index.js +51 -3
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +21 -26
- package/dist/react-provider.d.ts +0 -67
- package/lib/FluentProvider.d.ts +0 -1
- package/lib/common/isConformant.d.ts +0 -4
- package/lib/common/isConformant.js +0 -12
- package/lib/common/isConformant.js.map +0 -1
- package/lib/components/FluentProvider/FluentProvider.d.ts +0 -3
- package/lib/components/FluentProvider/FluentProvider.types.d.ts +0 -25
- package/lib/components/FluentProvider/index.d.ts +0 -5
- package/lib/components/FluentProvider/renderFluentProvider.d.ts +0 -5
- package/lib/components/FluentProvider/useFluentProvider.d.ts +0 -13
- package/lib/components/FluentProvider/useFluentProviderContextValues.d.ts +0 -2
- package/lib/components/FluentProvider/useFluentProviderStyles.d.ts +0 -3
- package/lib/components/FluentProvider/useThemeStyleTag.d.ts +0 -7
- package/lib/components/FluentProvider/useThemeStyleTag.js +0 -58
- package/lib/components/FluentProvider/useThemeStyleTag.js.map +0 -1
- package/lib/index.d.ts +0 -2
- package/lib-commonjs/FluentProvider.d.ts +0 -1
- package/lib-commonjs/common/isConformant.d.ts +0 -4
- package/lib-commonjs/common/isConformant.js +0 -23
- package/lib-commonjs/common/isConformant.js.map +0 -1
- package/lib-commonjs/components/FluentProvider/FluentProvider.d.ts +0 -3
- package/lib-commonjs/components/FluentProvider/FluentProvider.types.d.ts +0 -25
- package/lib-commonjs/components/FluentProvider/index.d.ts +0 -5
- package/lib-commonjs/components/FluentProvider/renderFluentProvider.d.ts +0 -5
- package/lib-commonjs/components/FluentProvider/useFluentProvider.d.ts +0 -13
- package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.d.ts +0 -2
- package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.d.ts +0 -3
- package/lib-commonjs/components/FluentProvider/useThemeStyleTag.d.ts +0 -7
- package/lib-commonjs/components/FluentProvider/useThemeStyleTag.js +0 -70
- package/lib-commonjs/components/FluentProvider/useThemeStyleTag.js.map +0 -1
- package/lib-commonjs/index.d.ts +0 -2
@@ -1,12 +0,0 @@
|
|
1
|
-
import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
|
2
|
-
import makeStylesTests from '@fluentui/react-conformance-make-styles';
|
3
|
-
export function isConformant(testInfo) {
|
4
|
-
var defaultOptions = {
|
5
|
-
disabledTests: ['has-docblock'],
|
6
|
-
asPropHandlesRef: true,
|
7
|
-
componentPath: module.parent.filename.replace('.test', ''),
|
8
|
-
extraTests: makeStylesTests
|
9
|
-
};
|
10
|
-
baseIsConformant(defaultOptions, testInfo);
|
11
|
-
}
|
12
|
-
//# sourceMappingURL=isConformant.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY,IAAI,gBAAzB,QAAiD,6BAAjD;AAEA,OAAO,eAAP,MAA4B,yCAA5B;AAEA,OAAM,SAAU,YAAV,CACJ,QADI,EACqF;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,aAAa,EAAE,CAAC,cAAD,CAD4C;AAE3D,IAAA,gBAAgB,EAAE,IAFyC;AAG3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAH4C;AAI3D,IAAA,UAAU,EAAE;AAJ+C,GAA7D;AAOA,EAAA,gBAAgB,CAAC,cAAD,EAAiB,QAAjB,CAAhB;AACD","sourceRoot":""}
|
@@ -1,25 +0,0 @@
|
|
1
|
-
import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
|
2
|
-
import type { PartialTheme, Theme } from '@fluentui/react-theme';
|
3
|
-
import type { ProviderContextValue, TooltipContextType, ThemeContextValue, ThemeClassNameContextValue } from '@fluentui/react-shared-contexts';
|
4
|
-
export declare type FluentProviderSlots = {
|
5
|
-
root: IntrinsicShorthandProps<'div'>;
|
6
|
-
};
|
7
|
-
export 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;
|
18
|
-
themeClassName: string;
|
19
|
-
}
|
20
|
-
export interface FluentProviderContextValues {
|
21
|
-
provider: ProviderContextValue;
|
22
|
-
theme: ThemeContextValue;
|
23
|
-
themeClassName: ThemeClassNameContextValue;
|
24
|
-
tooltip: TooltipContextType;
|
25
|
-
}
|
@@ -1,5 +0,0 @@
|
|
1
|
-
import type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';
|
2
|
-
/**
|
3
|
-
* Render the final JSX of FluentProvider
|
4
|
-
*/
|
5
|
-
export declare const renderFluentProvider: (state: FluentProviderState, contextValues: FluentProviderContextValues) => JSX.Element;
|
@@ -1,13 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { FluentProviderProps, FluentProviderSlots, FluentProviderState } from './FluentProvider.types';
|
3
|
-
export declare const fluentProviderShorthandProps: (keyof FluentProviderSlots)[];
|
4
|
-
/**
|
5
|
-
* Create the state required to render FluentProvider.
|
6
|
-
*
|
7
|
-
* The returned state can be modified with hooks such as useFluentProviderStyles,
|
8
|
-
* before being passed to renderFluentProvider.
|
9
|
-
*
|
10
|
-
* @param props - props from this instance of FluentProvider
|
11
|
-
* @param ref - reference to root HTMLElement of FluentProvider
|
12
|
-
*/
|
13
|
-
export declare const useFluentProvider: (props: FluentProviderProps, ref: React.Ref<HTMLElement>) => FluentProviderState;
|
@@ -1,7 +0,0 @@
|
|
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;
|
@@ -1,58 +0,0 @@
|
|
1
|
-
import { useId, usePrevious } from '@fluentui/react-utilities';
|
2
|
-
import { themeToCSSVariables } from '@fluentui/react-theme';
|
3
|
-
import * as React from 'react';
|
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 var useThemeStyleTag = function (options) {
|
11
|
-
var targetDocument = options.targetDocument,
|
12
|
-
theme = options.theme;
|
13
|
-
var styleTagId = useId('fluent-provider');
|
14
|
-
var styleTag = React.useMemo(function () {
|
15
|
-
if (!targetDocument) {
|
16
|
-
return null;
|
17
|
-
}
|
18
|
-
|
19
|
-
var tag = targetDocument.createElement('style');
|
20
|
-
tag.setAttribute('id', styleTagId);
|
21
|
-
targetDocument.head.appendChild(tag);
|
22
|
-
return tag;
|
23
|
-
}, [styleTagId, targetDocument]);
|
24
|
-
var cssRule = React.useMemo(function () {
|
25
|
-
var cssVars = themeToCSSVariables(theme);
|
26
|
-
var cssVarsAsString = Object.keys(cssVars).reduce(function (cssVarRule, cssVar) {
|
27
|
-
cssVarRule += cssVar + ": " + cssVars[cssVar] + "; ";
|
28
|
-
return cssVarRule;
|
29
|
-
}, ''); // result: .fluent-provider1 { --css-var: '#fff' }
|
30
|
-
|
31
|
-
return "." + styleTagId + " { " + cssVarsAsString + " }";
|
32
|
-
}, [theme, styleTagId]);
|
33
|
-
var previousCssRule = usePrevious(cssRule);
|
34
|
-
|
35
|
-
if (styleTag && previousCssRule !== cssRule) {
|
36
|
-
var sheet = styleTag.sheet;
|
37
|
-
|
38
|
-
if (sheet.cssRules.length > 0) {
|
39
|
-
sheet.deleteRule(0);
|
40
|
-
}
|
41
|
-
|
42
|
-
sheet.insertRule(cssRule, 0);
|
43
|
-
} // Removes the style tag from the targetDocument on unmount or change
|
44
|
-
|
45
|
-
|
46
|
-
React.useEffect(function () {
|
47
|
-
return function () {
|
48
|
-
var _a;
|
49
|
-
|
50
|
-
if (styleTag) {
|
51
|
-
// IE11 safe node removal, otherwise use node.remove()
|
52
|
-
(_a = styleTag.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(styleTag);
|
53
|
-
}
|
54
|
-
};
|
55
|
-
}, [styleTag]);
|
56
|
-
return styleTagId;
|
57
|
-
};
|
58
|
-
//# sourceMappingURL=useThemeStyleTag.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/FluentProvider/useThemeStyleTag.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,WAAhB,QAAmC,2BAAnC;AACA,SAAS,mBAAT,QAAoC,uBAApC;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA;;;;AAIG;;AACH,OAAO,IAAM,gBAAgB,GAAG,UAAC,OAAD,EAA+D;AACrF,MAAA,cAAc,GAAY,OAAO,CAAnB,cAAd;AAAA,MAAgB,KAAK,GAAK,OAAO,CAAZ,KAArB;AAER,MAAM,UAAU,GAAG,KAAK,CAAC,iBAAD,CAAxB;AACA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,YAAA;AAC7B,QAAI,CAAC,cAAL,EAAqB;AACnB,aAAO,IAAP;AACD;;AAED,QAAM,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,MAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,YAAA;AAC5B,QAAM,OAAO,GAAG,mBAAmB,CAAC,KAAD,CAAnC;AACA,QAAM,eAAe,GAAG,MAAM,CAAC,IAAP,CAAY,OAAZ,EAAqB,MAArB,CAA4B,UAAC,UAAD,EAAa,MAAb,EAAmB;AACrE,MAAA,UAAU,IAAO,MAAM,GAAA,IAAN,GAAW,OAAO,CAAC,MAAD,CAAlB,GAA0B,IAA3C;AACA,aAAO,UAAP;AACD,KAHuB,EAGrB,EAHqB,CAAxB,CAF4B,CAO5B;;AACA,WAAO,MAAI,UAAJ,GAAc,KAAd,GAAoB,eAApB,GAAmC,IAA1C;AACD,GATe,EASb,CAAC,KAAD,EAAQ,UAAR,CATa,CAAhB;AAUA,MAAM,eAAe,GAAG,WAAW,CAAC,OAAD,CAAnC;;AAEA,MAAI,QAAQ,IAAI,eAAe,KAAK,OAApC,EAA6C;AAC3C,QAAM,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,GAnC4F,CAqC7F;;;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,YAAA;AACd,WAAO,YAAA;;;AACL,UAAI,QAAJ,EAAc;AACZ;AACA,SAAA,EAAA,GAAA,QAAQ,CAAC,aAAT,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,KAAA,CAAtB,GAAsB,EAAA,CAAE,WAAF,CAAc,QAAd,CAAtB;AACD;AACF,KALD;AAMD,GAPD,EAOG,CAAC,QAAD,CAPH;AASA,SAAO,UAAP;AACD,CAhDM","sourceRoot":""}
|
package/lib/index.d.ts
DELETED
@@ -1 +0,0 @@
|
|
1
|
-
export * from './components/FluentProvider/index';
|
@@ -1,23 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.isConformant = void 0;
|
7
|
-
|
8
|
-
var react_conformance_1 = /*#__PURE__*/require("@fluentui/react-conformance");
|
9
|
-
|
10
|
-
var react_conformance_make_styles_1 = /*#__PURE__*/require("@fluentui/react-conformance-make-styles");
|
11
|
-
|
12
|
-
function isConformant(testInfo) {
|
13
|
-
var defaultOptions = {
|
14
|
-
disabledTests: ['has-docblock'],
|
15
|
-
asPropHandlesRef: true,
|
16
|
-
componentPath: module.parent.filename.replace('.test', ''),
|
17
|
-
extraTests: react_conformance_make_styles_1.default
|
18
|
-
};
|
19
|
-
react_conformance_1.isConformant(defaultOptions, testInfo);
|
20
|
-
}
|
21
|
-
|
22
|
-
exports.isConformant = isConformant;
|
23
|
-
//# sourceMappingURL=isConformant.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAEA,IAAA,+BAAA,gBAAA,OAAA,CAAA,yCAAA,CAAA;;AAEA,SAAgB,YAAhB,CACE,QADF,EAC2F;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,aAAa,EAAE,CAAC,cAAD,CAD4C;AAE3D,IAAA,gBAAgB,EAAE,IAFyC;AAG3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAH4C;AAI3D,IAAA,UAAU,EAAE,+BAAA,CAAA;AAJ+C,GAA7D;AAOA,EAAA,mBAAA,CAAA,YAAA,CAAiB,cAAjB,EAAiC,QAAjC;AACD;;AAXD,OAAA,CAAA,YAAA,GAAA,YAAA","sourceRoot":""}
|
@@ -1,25 +0,0 @@
|
|
1
|
-
import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
|
2
|
-
import type { PartialTheme, Theme } from '@fluentui/react-theme';
|
3
|
-
import type { ProviderContextValue, TooltipContextType, ThemeContextValue, ThemeClassNameContextValue } from '@fluentui/react-shared-contexts';
|
4
|
-
export declare type FluentProviderSlots = {
|
5
|
-
root: IntrinsicShorthandProps<'div'>;
|
6
|
-
};
|
7
|
-
export 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;
|
18
|
-
themeClassName: string;
|
19
|
-
}
|
20
|
-
export interface FluentProviderContextValues {
|
21
|
-
provider: ProviderContextValue;
|
22
|
-
theme: ThemeContextValue;
|
23
|
-
themeClassName: ThemeClassNameContextValue;
|
24
|
-
tooltip: TooltipContextType;
|
25
|
-
}
|
@@ -1,5 +0,0 @@
|
|
1
|
-
import type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';
|
2
|
-
/**
|
3
|
-
* Render the final JSX of FluentProvider
|
4
|
-
*/
|
5
|
-
export declare const renderFluentProvider: (state: FluentProviderState, contextValues: FluentProviderContextValues) => JSX.Element;
|
@@ -1,13 +0,0 @@
|
|
1
|
-
import * as React from 'react';
|
2
|
-
import type { FluentProviderProps, FluentProviderSlots, FluentProviderState } from './FluentProvider.types';
|
3
|
-
export declare const fluentProviderShorthandProps: (keyof FluentProviderSlots)[];
|
4
|
-
/**
|
5
|
-
* Create the state required to render FluentProvider.
|
6
|
-
*
|
7
|
-
* The returned state can be modified with hooks such as useFluentProviderStyles,
|
8
|
-
* before being passed to renderFluentProvider.
|
9
|
-
*
|
10
|
-
* @param props - props from this instance of FluentProvider
|
11
|
-
* @param ref - reference to root HTMLElement of FluentProvider
|
12
|
-
*/
|
13
|
-
export declare const useFluentProvider: (props: FluentProviderProps, ref: React.Ref<HTMLElement>) => FluentProviderState;
|
@@ -1,7 +0,0 @@
|
|
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;
|
@@ -1,70 +0,0 @@
|
|
1
|
-
"use strict";
|
2
|
-
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
4
|
-
value: true
|
5
|
-
});
|
6
|
-
exports.useThemeStyleTag = void 0;
|
7
|
-
|
8
|
-
var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
9
|
-
|
10
|
-
var react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
11
|
-
|
12
|
-
var React = /*#__PURE__*/require("react");
|
13
|
-
/**
|
14
|
-
* Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
|
15
|
-
*
|
16
|
-
* @returns CSS class to apply the rule
|
17
|
-
*/
|
18
|
-
|
19
|
-
|
20
|
-
var useThemeStyleTag = function (options) {
|
21
|
-
var targetDocument = options.targetDocument,
|
22
|
-
theme = options.theme;
|
23
|
-
var styleTagId = react_utilities_1.useId('fluent-provider');
|
24
|
-
var styleTag = React.useMemo(function () {
|
25
|
-
if (!targetDocument) {
|
26
|
-
return null;
|
27
|
-
}
|
28
|
-
|
29
|
-
var tag = targetDocument.createElement('style');
|
30
|
-
tag.setAttribute('id', styleTagId);
|
31
|
-
targetDocument.head.appendChild(tag);
|
32
|
-
return tag;
|
33
|
-
}, [styleTagId, targetDocument]);
|
34
|
-
var cssRule = React.useMemo(function () {
|
35
|
-
var cssVars = react_theme_1.themeToCSSVariables(theme);
|
36
|
-
var cssVarsAsString = Object.keys(cssVars).reduce(function (cssVarRule, cssVar) {
|
37
|
-
cssVarRule += cssVar + ": " + cssVars[cssVar] + "; ";
|
38
|
-
return cssVarRule;
|
39
|
-
}, ''); // result: .fluent-provider1 { --css-var: '#fff' }
|
40
|
-
|
41
|
-
return "." + styleTagId + " { " + cssVarsAsString + " }";
|
42
|
-
}, [theme, styleTagId]);
|
43
|
-
var previousCssRule = react_utilities_1.usePrevious(cssRule);
|
44
|
-
|
45
|
-
if (styleTag && previousCssRule !== cssRule) {
|
46
|
-
var sheet = styleTag.sheet;
|
47
|
-
|
48
|
-
if (sheet.cssRules.length > 0) {
|
49
|
-
sheet.deleteRule(0);
|
50
|
-
}
|
51
|
-
|
52
|
-
sheet.insertRule(cssRule, 0);
|
53
|
-
} // Removes the style tag from the targetDocument on unmount or change
|
54
|
-
|
55
|
-
|
56
|
-
React.useEffect(function () {
|
57
|
-
return function () {
|
58
|
-
var _a;
|
59
|
-
|
60
|
-
if (styleTag) {
|
61
|
-
// IE11 safe node removal, otherwise use node.remove()
|
62
|
-
(_a = styleTag.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(styleTag);
|
63
|
-
}
|
64
|
-
};
|
65
|
-
}, [styleTag]);
|
66
|
-
return styleTagId;
|
67
|
-
};
|
68
|
-
|
69
|
-
exports.useThemeStyleTag = useThemeStyleTag;
|
70
|
-
//# sourceMappingURL=useThemeStyleTag.js.map
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["../../../src/components/FluentProvider/useThemeStyleTag.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AACA,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;AAGA;;;;AAIG;;;AACI,IAAM,gBAAgB,GAAG,UAAC,OAAD,EAA+D;AACrF,MAAA,cAAc,GAAY,OAAO,CAAnB,cAAd;AAAA,MAAgB,KAAK,GAAK,OAAO,CAAZ,KAArB;AAER,MAAM,UAAU,GAAG,iBAAA,CAAA,KAAA,CAAM,iBAAN,CAAnB;AACA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,YAAA;AAC7B,QAAI,CAAC,cAAL,EAAqB;AACnB,aAAO,IAAP;AACD;;AAED,QAAM,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,MAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,YAAA;AAC5B,QAAM,OAAO,GAAG,aAAA,CAAA,mBAAA,CAAoB,KAApB,CAAhB;AACA,QAAM,eAAe,GAAG,MAAM,CAAC,IAAP,CAAY,OAAZ,EAAqB,MAArB,CAA4B,UAAC,UAAD,EAAa,MAAb,EAAmB;AACrE,MAAA,UAAU,IAAO,MAAM,GAAA,IAAN,GAAW,OAAO,CAAC,MAAD,CAAlB,GAA0B,IAA3C;AACA,aAAO,UAAP;AACD,KAHuB,EAGrB,EAHqB,CAAxB,CAF4B,CAO5B;;AACA,WAAO,MAAI,UAAJ,GAAc,KAAd,GAAoB,eAApB,GAAmC,IAA1C;AACD,GATe,EASb,CAAC,KAAD,EAAQ,UAAR,CATa,CAAhB;AAUA,MAAM,eAAe,GAAG,iBAAA,CAAA,WAAA,CAAY,OAAZ,CAAxB;;AAEA,MAAI,QAAQ,IAAI,eAAe,KAAK,OAApC,EAA6C;AAC3C,QAAM,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,GAnC4F,CAqC7F;;;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,YAAA;AACd,WAAO,YAAA;;;AACL,UAAI,QAAJ,EAAc;AACZ;AACA,SAAA,EAAA,GAAA,QAAQ,CAAC,aAAT,MAAsB,IAAtB,IAAsB,EAAA,KAAA,KAAA,CAAtB,GAAsB,KAAA,CAAtB,GAAsB,EAAA,CAAE,WAAF,CAAc,QAAd,CAAtB;AACD;AACF,KALD;AAMD,GAPD,EAOG,CAAC,QAAD,CAPH;AASA,SAAO,UAAP;AACD,CAhDM;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","sourceRoot":""}
|
package/lib-commonjs/index.d.ts
DELETED