@fluentui/react-provider 0.0.0-nightly-20220503-0421.1 → 0.0.0-nightly-20220504-0420.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.
Files changed (28) hide show
  1. package/CHANGELOG.json +25 -13
  2. package/CHANGELOG.md +11 -9
  3. package/{lib → dist}/tsdoc-metadata.json +0 -0
  4. package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js +9 -4
  5. package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
  6. package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js +9 -4
  7. package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
  8. package/package.json +7 -7
  9. package/lib/FluentProvider.d.ts +0 -1
  10. package/lib/components/FluentProvider/FluentProvider.d.ts +0 -3
  11. package/lib/components/FluentProvider/FluentProvider.types.d.ts +0 -26
  12. package/lib/components/FluentProvider/index.d.ts +0 -7
  13. package/lib/components/FluentProvider/renderFluentProvider.d.ts +0 -5
  14. package/lib/components/FluentProvider/useFluentProvider.d.ts +0 -12
  15. package/lib/components/FluentProvider/useFluentProviderContextValues.d.ts +0 -2
  16. package/lib/components/FluentProvider/useFluentProviderStyles.d.ts +0 -9
  17. package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.d.ts +0 -7
  18. package/lib/index.d.ts +0 -3
  19. package/lib-commonjs/FluentProvider.d.ts +0 -1
  20. package/lib-commonjs/components/FluentProvider/FluentProvider.d.ts +0 -3
  21. package/lib-commonjs/components/FluentProvider/FluentProvider.types.d.ts +0 -26
  22. package/lib-commonjs/components/FluentProvider/index.d.ts +0 -7
  23. package/lib-commonjs/components/FluentProvider/renderFluentProvider.d.ts +0 -5
  24. package/lib-commonjs/components/FluentProvider/useFluentProvider.d.ts +0 -12
  25. package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.d.ts +0 -2
  26. package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.d.ts +0 -9
  27. package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.d.ts +0 -7
  28. package/lib-commonjs/index.d.ts +0 -3
package/CHANGELOG.json CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@fluentui/react-provider",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 03 May 2022 04:34:45 GMT",
6
- "tag": "@fluentui/react-provider_v0.0.0-nightly-20220503-0421.1",
7
- "version": "0.0.0-nightly-20220503-0421.1",
5
+ "date": "Wed, 04 May 2022 04:33:35 GMT",
6
+ "tag": "@fluentui/react-provider_v0.0.0-nightly-20220504-0420.1",
7
+ "version": "0.0.0-nightly-20220504-0420.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
@@ -13,35 +13,47 @@
13
13
  "commit": "not available",
14
14
  "comment": "Release nightly v9"
15
15
  },
16
+ {
17
+ "author": "mgodbolt@microsoft.com",
18
+ "package": "@fluentui/react-provider",
19
+ "commit": "c45f4a6c3dd09c77ce5f5f5e2926ce9494169e99",
20
+ "comment": "check for styleTag.sheet before performing actions on the sheet"
21
+ },
22
+ {
23
+ "author": "martinhochel@microsoft.com",
24
+ "package": "@fluentui/react-provider",
25
+ "commit": "773b889cd09d46934feeabdbbc389c678b80f7a0",
26
+ "comment": "feat: ship rolluped only dts"
27
+ },
16
28
  {
17
29
  "author": "beachball",
18
30
  "package": "@fluentui/react-provider",
19
- "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20220503-0421.1",
20
- "commit": "0a280b0835179cafee6022280911ba42ab7baeac"
31
+ "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20220504-0420.1",
32
+ "commit": "158bbd218038e21eb173d3fa7efa00c595be789c"
21
33
  },
22
34
  {
23
35
  "author": "beachball",
24
36
  "package": "@fluentui/react-provider",
25
- "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220503-0421.1",
26
- "commit": "0a280b0835179cafee6022280911ba42ab7baeac"
37
+ "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220504-0420.1",
38
+ "commit": "158bbd218038e21eb173d3fa7efa00c595be789c"
27
39
  },
28
40
  {
29
41
  "author": "beachball",
30
42
  "package": "@fluentui/react-provider",
31
- "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220503-0421.1",
32
- "commit": "0a280b0835179cafee6022280911ba42ab7baeac"
43
+ "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220504-0420.1",
44
+ "commit": "158bbd218038e21eb173d3fa7efa00c595be789c"
33
45
  },
34
46
  {
35
47
  "author": "beachball",
36
48
  "package": "@fluentui/react-provider",
37
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220503-0421.1",
38
- "commit": "0a280b0835179cafee6022280911ba42ab7baeac"
49
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220504-0420.1",
50
+ "commit": "158bbd218038e21eb173d3fa7efa00c595be789c"
39
51
  },
40
52
  {
41
53
  "author": "beachball",
42
54
  "package": "@fluentui/react-provider",
43
- "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220503-0421.1",
44
- "commit": "0a280b0835179cafee6022280911ba42ab7baeac"
55
+ "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220504-0420.1",
56
+ "commit": "158bbd218038e21eb173d3fa7efa00c595be789c"
45
57
  }
46
58
  ],
47
59
  "none": [
package/CHANGELOG.md CHANGED
@@ -1,22 +1,24 @@
1
1
  # Change Log - @fluentui/react-provider
2
2
 
3
- This log was last generated on Tue, 03 May 2022 04:34:45 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 04 May 2022 04:33:35 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20220503-0421.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v0.0.0-nightly-20220503-0421.1)
7
+ ## [0.0.0-nightly-20220504-0420.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v0.0.0-nightly-20220504-0420.1)
8
8
 
9
- Tue, 03 May 2022 04:34:45 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.0.0-rc.7..@fluentui/react-provider_v0.0.0-nightly-20220503-0421.1)
9
+ Wed, 04 May 2022 04:33:35 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.0.0-rc.7..@fluentui/react-provider_v0.0.0-nightly-20220504-0420.1)
11
11
 
12
12
  ### Changes
13
13
 
14
14
  - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
15
- - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20220503-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/0a280b0835179cafee6022280911ba42ab7baeac) by beachball)
16
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20220503-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/0a280b0835179cafee6022280911ba42ab7baeac) by beachball)
17
- - Bump @fluentui/react-theme to v0.0.0-nightly-20220503-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/0a280b0835179cafee6022280911ba42ab7baeac) by beachball)
18
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20220503-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/0a280b0835179cafee6022280911ba42ab7baeac) by beachball)
19
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220503-0421.1 ([commit](https://github.com/microsoft/fluentui/commit/0a280b0835179cafee6022280911ba42ab7baeac) by beachball)
15
+ - check for styleTag.sheet before performing actions on the sheet ([PR #22684](https://github.com/microsoft/fluentui/pull/22684) by mgodbolt@microsoft.com)
16
+ - feat: ship rolluped only dts ([PR #22791](https://github.com/microsoft/fluentui/pull/22791) by martinhochel@microsoft.com)
17
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20220504-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/158bbd218038e21eb173d3fa7efa00c595be789c) by beachball)
18
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20220504-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/158bbd218038e21eb173d3fa7efa00c595be789c) by beachball)
19
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20220504-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/158bbd218038e21eb173d3fa7efa00c595be789c) by beachball)
20
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20220504-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/158bbd218038e21eb173d3fa7efa00c595be789c) by beachball)
21
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220504-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/158bbd218038e21eb173d3fa7efa00c595be789c) by beachball)
20
22
 
21
23
  ## [9.0.0-rc.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.0.0-rc.7)
22
24
 
File without changes
@@ -36,11 +36,16 @@ export const useFluentProviderThemeStyleTag = options => {
36
36
  if (styleTag && previousCssRule !== cssRule) {
37
37
  const sheet = styleTag.sheet;
38
38
 
39
- if (sheet.cssRules.length > 0) {
40
- sheet.deleteRule(0);
41
- }
39
+ if (sheet) {
40
+ if (sheet.cssRules.length > 0) {
41
+ sheet.deleteRule(0);
42
+ }
42
43
 
43
- sheet.insertRule(cssRule, 0);
44
+ sheet.insertRule(cssRule, 0);
45
+ } else if (process.env.NODE_ENV !== 'production') {
46
+ // eslint-disable-next-line no-console
47
+ console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');
48
+ }
44
49
  } // Removes the style tag from the targetDocument on unmount or change
45
50
 
46
51
 
@@ -1 +1 @@
1
- {"version":3,"sources":["components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,WAAhB,QAAmC,2BAAnC;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,wBAAT,QAAyC,2BAAzC;AAEA;;;;AAIG;;AACH,OAAO,MAAM,8BAA8B,GAAI,OAAD,IAAmE;AAC/G,QAAM;AAAE,IAAA,cAAF;AAAkB,IAAA;AAAlB,MAA4B,OAAlC;AAEA,QAAM,UAAU,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAA1B,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,GApC8G,CAsC/G;;;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 { fluentProviderClassNames } 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 useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {\n const { targetDocument, theme } = options;\n\n const styleTagId = useId(fluentProviderClassNames.root);\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/"}
1
+ {"version":3,"sources":["components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,WAAhB,QAAmC,2BAAnC;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,wBAAT,QAAyC,2BAAzC;AAEA;;;;AAIG;;AACH,OAAO,MAAM,8BAA8B,GAAI,OAAD,IAAmE;AAC/G,QAAM;AAAE,IAAA,cAAF;AAAkB,IAAA;AAAlB,MAA4B,OAAlC;AAEA,QAAM,UAAU,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAA1B,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,KAAJ,EAAW;AACT,UAAI,KAAK,CAAC,QAAN,CAAe,MAAf,GAAwB,CAA5B,EAA+B;AAC7B,QAAA,KAAK,CAAC,UAAN,CAAiB,CAAjB;AACD;;AACD,MAAA,KAAK,CAAC,UAAN,CAAiB,OAAjB,EAA0B,CAA1B;AACD,KALD,MAKO,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;AAChD;AACA,MAAA,OAAO,CAAC,KAAR,CAAc,uFAAd;AACD;AACF,GAxC8G,CA0C/G;;;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,CApDM","sourcesContent":["import { useId, usePrevious } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } 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 useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {\n const { targetDocument, theme } = options;\n\n const styleTagId = useId(fluentProviderClassNames.root);\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;\n\n if (sheet) {\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n sheet.insertRule(cssRule, 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 // 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/"}
@@ -46,11 +46,16 @@ const useFluentProviderThemeStyleTag = options => {
46
46
  if (styleTag && previousCssRule !== cssRule) {
47
47
  const sheet = styleTag.sheet;
48
48
 
49
- if (sheet.cssRules.length > 0) {
50
- sheet.deleteRule(0);
51
- }
49
+ if (sheet) {
50
+ if (sheet.cssRules.length > 0) {
51
+ sheet.deleteRule(0);
52
+ }
52
53
 
53
- sheet.insertRule(cssRule, 0);
54
+ sheet.insertRule(cssRule, 0);
55
+ } else if (process.env.NODE_ENV !== 'production') {
56
+ // eslint-disable-next-line no-console
57
+ console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');
58
+ }
54
59
  } // Removes the style tag from the targetDocument on unmount or change
55
60
 
56
61
 
@@ -1 +1 @@
1
- {"version":3,"sources":["components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;AAIG;;;AACI,MAAM,8BAA8B,GAAI,OAAD,IAAmE;AAC/G,QAAM;AAAE,IAAA,cAAF;AAAkB,IAAA;AAAlB,MAA4B,OAAlC;AAEA,QAAM,UAAU,GAAG,iBAAA,CAAA,KAAA,CAAM,yBAAA,CAAA,wBAAA,CAAyB,IAA/B,CAAnB;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,iBAAA,CAAA,WAAA,CAAY,OAAZ,CAAxB;;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,GApC8G,CAsC/G;;;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;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import { useId, usePrevious } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } 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 useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {\n const { targetDocument, theme } = options;\n\n const styleTagId = useId(fluentProviderClassNames.root);\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/"}
1
+ {"version":3,"sources":["components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAEA,MAAA,yBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;AAIG;;;AACI,MAAM,8BAA8B,GAAI,OAAD,IAAmE;AAC/G,QAAM;AAAE,IAAA,cAAF;AAAkB,IAAA;AAAlB,MAA4B,OAAlC;AAEA,QAAM,UAAU,GAAG,iBAAA,CAAA,KAAA,CAAM,yBAAA,CAAA,wBAAA,CAAyB,IAA/B,CAAnB;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,iBAAA,CAAA,WAAA,CAAY,OAAZ,CAAxB;;AAEA,MAAI,QAAQ,IAAI,eAAe,KAAK,OAApC,EAA6C;AAC3C,UAAM,KAAK,GAAG,QAAQ,CAAC,KAAvB;;AAEA,QAAI,KAAJ,EAAW;AACT,UAAI,KAAK,CAAC,QAAN,CAAe,MAAf,GAAwB,CAA5B,EAA+B;AAC7B,QAAA,KAAK,CAAC,UAAN,CAAiB,CAAjB;AACD;;AACD,MAAA,KAAK,CAAC,UAAN,CAAiB,OAAjB,EAA0B,CAA1B;AACD,KALD,MAKO,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;AAChD;AACA,MAAA,OAAO,CAAC,KAAR,CAAc,uFAAd;AACD;AACF,GAxC8G,CA0C/G;;;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,CApDM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import { useId, usePrevious } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } 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 useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {\n const { targetDocument, theme } = options;\n\n const styleTagId = useId(fluentProviderClassNames.root);\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;\n\n if (sheet) {\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n sheet.insertRule(cssRule, 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 // 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/package.json CHANGED
@@ -1,10 +1,10 @@
1
1
  {
2
2
  "name": "@fluentui/react-provider",
3
- "version": "0.0.0-nightly-20220503-0421.1",
3
+ "version": "0.0.0-nightly-20220504-0420.1",
4
4
  "description": "Fluent UI React provider component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
7
- "typings": "lib/index.d.ts",
7
+ "typings": "dist/index.d.ts",
8
8
  "sideEffects": false,
9
9
  "repository": {
10
10
  "type": "git",
@@ -28,15 +28,15 @@
28
28
  "devDependencies": {
29
29
  "@fluentui/eslint-plugin": "*",
30
30
  "@fluentui/react-conformance": "*",
31
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220503-0421.1",
31
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220504-0420.1",
32
32
  "@fluentui/scripts": "^1.0.0"
33
33
  },
34
34
  "dependencies": {
35
35
  "@griffel/react": "1.0.3",
36
- "@fluentui/react-shared-contexts": "0.0.0-nightly-20220503-0421.1",
37
- "@fluentui/react-tabster": "0.0.0-nightly-20220503-0421.1",
38
- "@fluentui/react-theme": "0.0.0-nightly-20220503-0421.1",
39
- "@fluentui/react-utilities": "0.0.0-nightly-20220503-0421.1",
36
+ "@fluentui/react-shared-contexts": "0.0.0-nightly-20220504-0420.1",
37
+ "@fluentui/react-tabster": "0.0.0-nightly-20220504-0420.1",
38
+ "@fluentui/react-theme": "0.0.0-nightly-20220504-0420.1",
39
+ "@fluentui/react-utilities": "0.0.0-nightly-20220504-0420.1",
40
40
  "tslib": "^2.1.0"
41
41
  },
42
42
  "peerDependencies": {
@@ -1 +0,0 @@
1
- export * from './components/FluentProvider/index';
@@ -1,3 +0,0 @@
1
- import * as React from 'react';
2
- import type { FluentProviderProps } from './FluentProvider.types';
3
- export declare const FluentProvider: React.ForwardRefExoticComponent<FluentProviderProps & React.RefAttributes<HTMLElement>>;
@@ -1,26 +0,0 @@
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 {};
@@ -1,7 +0,0 @@
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
- export * from './useFluentProviderThemeStyleTag';
@@ -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_unstable: (state: FluentProviderState, contextValues: FluentProviderContextValues) => JSX.Element;
@@ -1,12 +0,0 @@
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;
@@ -1,2 +0,0 @@
1
- import type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';
2
- export declare function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues;
@@ -1,9 +0,0 @@
1
- import type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';
2
- import { SlotClassNames } from '@fluentui/react-utilities';
3
- /**
4
- * @deprecated Use `fluentProviderClassNames.root` instead.
5
- */
6
- export declare const fluentProviderClassName = "fui-FluentProvider";
7
- export declare const fluentProviderClassNames: SlotClassNames<FluentProviderSlots>;
8
- /** Applies style classnames to slots */
9
- export declare const useFluentProviderStyles_unstable: (state: FluentProviderState) => 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 useFluentProviderThemeStyleTag: (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => string;
package/lib/index.d.ts DELETED
@@ -1,3 +0,0 @@
1
- export { fluentProviderClassName, fluentProviderClassNames, FluentProvider, renderFluentProvider_unstable, useFluentProviderContextValues_unstable, useFluentProvider_unstable, useFluentProviderStyles_unstable, useFluentProviderThemeStyleTag, } from './FluentProvider';
2
- export type { FluentProviderContextValues, FluentProviderProps, FluentProviderState, FluentProviderSlots, } from './FluentProvider';
3
- export { useFluent, useTheme } from '@fluentui/react-shared-contexts';
@@ -1 +0,0 @@
1
- export * from './components/FluentProvider/index';
@@ -1,3 +0,0 @@
1
- import * as React from 'react';
2
- import type { FluentProviderProps } from './FluentProvider.types';
3
- export declare const FluentProvider: React.ForwardRefExoticComponent<FluentProviderProps & React.RefAttributes<HTMLElement>>;
@@ -1,26 +0,0 @@
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 {};
@@ -1,7 +0,0 @@
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
- export * from './useFluentProviderThemeStyleTag';
@@ -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_unstable: (state: FluentProviderState, contextValues: FluentProviderContextValues) => JSX.Element;
@@ -1,12 +0,0 @@
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;
@@ -1,2 +0,0 @@
1
- import type { FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';
2
- export declare function useFluentProviderContextValues_unstable(state: FluentProviderState): FluentProviderContextValues;
@@ -1,9 +0,0 @@
1
- import type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';
2
- import { SlotClassNames } from '@fluentui/react-utilities';
3
- /**
4
- * @deprecated Use `fluentProviderClassNames.root` instead.
5
- */
6
- export declare const fluentProviderClassName = "fui-FluentProvider";
7
- export declare const fluentProviderClassNames: SlotClassNames<FluentProviderSlots>;
8
- /** Applies style classnames to slots */
9
- export declare const useFluentProviderStyles_unstable: (state: FluentProviderState) => 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 useFluentProviderThemeStyleTag: (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => string;
@@ -1,3 +0,0 @@
1
- export { fluentProviderClassName, fluentProviderClassNames, FluentProvider, renderFluentProvider_unstable, useFluentProviderContextValues_unstable, useFluentProvider_unstable, useFluentProviderStyles_unstable, useFluentProviderThemeStyleTag, } from './FluentProvider';
2
- export type { FluentProviderContextValues, FluentProviderProps, FluentProviderState, FluentProviderSlots, } from './FluentProvider';
3
- export { useFluent, useTheme } from '@fluentui/react-shared-contexts';