@fluentui/react-provider 0.0.0-nightly-20220715-0418.1 → 0.0.0-nightly-20221007-1237.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 +146 -14
  2. package/CHANGELOG.md +58 -10
  3. package/lib/FluentProvider.js.map +1 -1
  4. package/lib/components/FluentProvider/FluentProvider.js.map +1 -1
  5. package/lib/components/FluentProvider/FluentProvider.types.js.map +1 -1
  6. package/lib/components/FluentProvider/index.js.map +1 -1
  7. package/lib/components/FluentProvider/renderFluentProvider.js.map +1 -1
  8. package/lib/components/FluentProvider/useFluentProvider.js +2 -2
  9. package/lib/components/FluentProvider/useFluentProvider.js.map +1 -1
  10. package/lib/components/FluentProvider/useFluentProviderContextValues.js.map +1 -1
  11. package/lib/components/FluentProvider/useFluentProviderStyles.js.map +1 -1
  12. package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js +46 -40
  13. package/lib/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
  14. package/lib/index.js.map +1 -1
  15. package/lib-commonjs/FluentProvider.js.map +1 -1
  16. package/lib-commonjs/components/FluentProvider/FluentProvider.js.map +1 -1
  17. package/lib-commonjs/components/FluentProvider/FluentProvider.types.js.map +1 -1
  18. package/lib-commonjs/components/FluentProvider/index.js.map +1 -1
  19. package/lib-commonjs/components/FluentProvider/renderFluentProvider.js.map +1 -1
  20. package/lib-commonjs/components/FluentProvider/useFluentProvider.js +1 -1
  21. package/lib-commonjs/components/FluentProvider/useFluentProvider.js.map +1 -1
  22. package/lib-commonjs/components/FluentProvider/useFluentProviderContextValues.js.map +1 -1
  23. package/lib-commonjs/components/FluentProvider/useFluentProviderStyles.js.map +1 -1
  24. package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js +45 -39
  25. package/lib-commonjs/components/FluentProvider/useFluentProviderThemeStyleTag.js.map +1 -1
  26. package/lib-commonjs/index.js.map +1 -1
  27. package/package.json +11 -15
  28. package/dist/tsdoc-metadata.json +0 -11
package/CHANGELOG.json CHANGED
@@ -2,13 +2,13 @@
2
2
  "name": "@fluentui/react-provider",
3
3
  "entries": [
4
4
  {
5
- "date": "Fri, 15 Jul 2022 04:31:44 GMT",
6
- "tag": "@fluentui/react-provider_v0.0.0-nightly-20220715-0418.1",
7
- "version": "0.0.0-nightly-20220715-0418.1",
5
+ "date": "Fri, 07 Oct 2022 12:44:24 GMT",
6
+ "tag": "@fluentui/react-provider_v0.0.0-nightly-20221007-1237.1",
7
+ "version": "0.0.0-nightly-20221007-1237.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
11
- "author": "email not defined",
11
+ "author": "fluentui-internal@service.microsoft.com",
12
12
  "package": "@fluentui/react-provider",
13
13
  "commit": "not available",
14
14
  "comment": "Release nightly v9"
@@ -16,32 +16,164 @@
16
16
  {
17
17
  "author": "beachball",
18
18
  "package": "@fluentui/react-provider",
19
- "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20220715-0418.1",
20
- "commit": "e1949f7a18e758e415b4740eda5f84bb8ae19e02"
19
+ "comment": "Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221007-1237.1",
20
+ "commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
21
21
  },
22
22
  {
23
23
  "author": "beachball",
24
24
  "package": "@fluentui/react-provider",
25
- "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20220715-0418.1",
26
- "commit": "e1949f7a18e758e415b4740eda5f84bb8ae19e02"
25
+ "comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20221007-1237.1",
26
+ "commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
27
27
  },
28
28
  {
29
29
  "author": "beachball",
30
30
  "package": "@fluentui/react-provider",
31
- "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220715-0418.1",
32
- "commit": "e1949f7a18e758e415b4740eda5f84bb8ae19e02"
31
+ "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221007-1237.1",
32
+ "commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
33
33
  },
34
34
  {
35
35
  "author": "beachball",
36
36
  "package": "@fluentui/react-provider",
37
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220715-0418.1",
38
- "commit": "e1949f7a18e758e415b4740eda5f84bb8ae19e02"
37
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221007-1237.1",
38
+ "commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
39
39
  },
40
40
  {
41
41
  "author": "beachball",
42
42
  "package": "@fluentui/react-provider",
43
- "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220715-0418.1",
44
- "commit": "e1949f7a18e758e415b4740eda5f84bb8ae19e02"
43
+ "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221007-1237.1",
44
+ "commit": "cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec"
45
+ }
46
+ ]
47
+ }
48
+ },
49
+ {
50
+ "date": "Mon, 03 Oct 2022 22:24:42 GMT",
51
+ "tag": "@fluentui/react-provider_v9.1.3",
52
+ "version": "9.1.3",
53
+ "comments": {
54
+ "patch": [
55
+ {
56
+ "author": "beachball",
57
+ "package": "@fluentui/react-provider",
58
+ "comment": "Bump @fluentui/react-tabster to v9.1.2",
59
+ "commit": "67a8c98b8d53cd2fa14d668cf639b867b68ad18a"
60
+ }
61
+ ]
62
+ }
63
+ },
64
+ {
65
+ "date": "Tue, 20 Sep 2022 20:55:45 GMT",
66
+ "tag": "@fluentui/react-provider_v9.1.2",
67
+ "version": "9.1.2",
68
+ "comments": {
69
+ "patch": [
70
+ {
71
+ "author": "beachball",
72
+ "package": "@fluentui/react-provider",
73
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14",
74
+ "commit": "4ceba844c804a2f49b0465389100e7a3dabf116e"
75
+ }
76
+ ]
77
+ }
78
+ },
79
+ {
80
+ "date": "Thu, 15 Sep 2022 09:49:18 GMT",
81
+ "tag": "@fluentui/react-provider_v9.1.1",
82
+ "version": "9.1.1",
83
+ "comments": {
84
+ "patch": [
85
+ {
86
+ "author": "olfedias@microsoft.com",
87
+ "package": "@fluentui/react-provider",
88
+ "commit": "e610024474cfe5d45f61501a8b6a21daf4c794a2",
89
+ "comment": "chore: Update Griffel to latest version"
90
+ },
91
+ {
92
+ "author": "beachball",
93
+ "package": "@fluentui/react-provider",
94
+ "comment": "Bump @fluentui/react-shared-contexts to v9.0.1",
95
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
96
+ },
97
+ {
98
+ "author": "beachball",
99
+ "package": "@fluentui/react-provider",
100
+ "comment": "Bump @fluentui/react-tabster to v9.1.1",
101
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
102
+ },
103
+ {
104
+ "author": "beachball",
105
+ "package": "@fluentui/react-provider",
106
+ "comment": "Bump @fluentui/react-theme to v9.1.0",
107
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
108
+ },
109
+ {
110
+ "author": "beachball",
111
+ "package": "@fluentui/react-provider",
112
+ "comment": "Bump @fluentui/react-utilities to v9.1.0",
113
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
114
+ },
115
+ {
116
+ "author": "beachball",
117
+ "package": "@fluentui/react-provider",
118
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13",
119
+ "commit": "a33448fe4a0f4117686c378f80b893d1406d95a8"
120
+ }
121
+ ],
122
+ "none": [
123
+ {
124
+ "author": "martinhochel@microsoft.com",
125
+ "package": "@fluentui/react-provider",
126
+ "commit": "e6cf183695d6d67a24e038c49a876224e5ed35e5",
127
+ "comment": "chore: update package scaffold"
128
+ }
129
+ ]
130
+ }
131
+ },
132
+ {
133
+ "date": "Wed, 03 Aug 2022 16:03:56 GMT",
134
+ "tag": "@fluentui/react-provider_v9.1.0",
135
+ "version": "9.1.0",
136
+ "comments": {
137
+ "none": [
138
+ {
139
+ "author": "lingfangao@hotmail.com",
140
+ "package": "@fluentui/react-provider",
141
+ "commit": "99cc385631d04a76ee10ebc143cb9fecd99640b6",
142
+ "comment": "chore: Add `prerelease` as disallowed changetype for 9.0.0 packages"
143
+ }
144
+ ],
145
+ "patch": [
146
+ {
147
+ "author": "lingfangao@hotmail.com",
148
+ "package": "@fluentui/react-provider",
149
+ "commit": "71590ea6aeab8ce24d8c8e50e0ee80ece81a4392",
150
+ "comment": "fix: use `useFocusVisible` hook for :focus-visible styles"
151
+ },
152
+ {
153
+ "author": "miroslav.stastny@microsoft.com",
154
+ "package": "@fluentui/react-provider",
155
+ "commit": "08563664778fd80284561d3c9d254307a0a32362",
156
+ "comment": "chore: Bump Griffel dependencies"
157
+ }
158
+ ],
159
+ "minor": [
160
+ {
161
+ "author": "mgodbolt@microsoft.com",
162
+ "package": "@fluentui/react-provider",
163
+ "commit": "76f5c61c1bce0d606264f6a10dfa523de98b937e",
164
+ "comment": "fix: Move to useLayoutEffect or useInsertionEffect for Theme Provider theme insertion."
165
+ },
166
+ {
167
+ "author": "beachball",
168
+ "package": "@fluentui/react-provider",
169
+ "comment": "Bump @fluentui/react-tabster to v9.1.0",
170
+ "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
171
+ },
172
+ {
173
+ "author": "beachball",
174
+ "package": "@fluentui/react-provider",
175
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12",
176
+ "commit": "ee4a8be0d0831a6615f878f98db6a97cc61a802d"
45
177
  }
46
178
  ]
47
179
  }
package/CHANGELOG.md CHANGED
@@ -1,22 +1,70 @@
1
1
  # Change Log - @fluentui/react-provider
2
2
 
3
- This log was last generated on Fri, 15 Jul 2022 04:31:44 GMT and should not be manually modified.
3
+ This log was last generated on Fri, 07 Oct 2022 12:44:24 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20220715-0418.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v0.0.0-nightly-20220715-0418.1)
7
+ ## [0.0.0-nightly-20221007-1237.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v0.0.0-nightly-20221007-1237.1)
8
8
 
9
- Fri, 15 Jul 2022 04:31:44 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.0.3..@fluentui/react-provider_v0.0.0-nightly-20220715-0418.1)
9
+ Fri, 07 Oct 2022 12:44:24 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.1.3..@fluentui/react-provider_v0.0.0-nightly-20221007-1237.1)
11
11
 
12
12
  ### Changes
13
13
 
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-20220715-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/e1949f7a18e758e415b4740eda5f84bb8ae19e02) by beachball)
16
- - Bump @fluentui/react-tabster to v0.0.0-nightly-20220715-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/e1949f7a18e758e415b4740eda5f84bb8ae19e02) by beachball)
17
- - Bump @fluentui/react-theme to v0.0.0-nightly-20220715-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/e1949f7a18e758e415b4740eda5f84bb8ae19e02) by beachball)
18
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20220715-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/e1949f7a18e758e415b4740eda5f84bb8ae19e02) by beachball)
19
- - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20220715-0418.1 ([commit](https://github.com/microsoft/fluentui/commit/e1949f7a18e758e415b4740eda5f84bb8ae19e02) by beachball)
14
+ - Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
15
+ - Bump @fluentui/react-shared-contexts to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
16
+ - Bump @fluentui/react-tabster to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
17
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
18
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
19
+ - Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221007-1237.1 ([commit](https://github.com/microsoft/fluentui/commit/cb80d71825ddb9ebe5d06bb14b1c970f8633c4ec) by beachball)
20
+
21
+ ## [9.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.1.3)
22
+
23
+ Mon, 03 Oct 2022 22:24:42 GMT
24
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.1.2..@fluentui/react-provider_v9.1.3)
25
+
26
+ ### Patches
27
+
28
+ - Bump @fluentui/react-tabster to v9.1.2 ([PR #25055](https://github.com/microsoft/fluentui/pull/25055) by beachball)
29
+
30
+ ## [9.1.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.1.2)
31
+
32
+ Tue, 20 Sep 2022 20:55:45 GMT
33
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.1.1..@fluentui/react-provider_v9.1.2)
34
+
35
+ ### Patches
36
+
37
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.14 ([PR #24869](https://github.com/microsoft/fluentui/pull/24869) by beachball)
38
+
39
+ ## [9.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.1.1)
40
+
41
+ Thu, 15 Sep 2022 09:49:18 GMT
42
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.1.0..@fluentui/react-provider_v9.1.1)
43
+
44
+ ### Patches
45
+
46
+ - chore: Update Griffel to latest version ([PR #24221](https://github.com/microsoft/fluentui/pull/24221) by olfedias@microsoft.com)
47
+ - Bump @fluentui/react-shared-contexts to v9.0.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
48
+ - Bump @fluentui/react-tabster to v9.1.1 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
49
+ - Bump @fluentui/react-theme to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
50
+ - Bump @fluentui/react-utilities to v9.1.0 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
51
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.13 ([PR #24808](https://github.com/microsoft/fluentui/pull/24808) by beachball)
52
+
53
+ ## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.1.0)
54
+
55
+ Wed, 03 Aug 2022 16:03:56 GMT
56
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-provider_v9.0.3..@fluentui/react-provider_v9.1.0)
57
+
58
+ ### Minor changes
59
+
60
+ - fix: Move to useLayoutEffect or useInsertionEffect for Theme Provider theme insertion. ([PR #24061](https://github.com/microsoft/fluentui/pull/24061) by mgodbolt@microsoft.com)
61
+ - Bump @fluentui/react-tabster to v9.1.0 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
62
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.12 ([PR #24131](https://github.com/microsoft/fluentui/pull/24131) by beachball)
63
+
64
+ ### Patches
65
+
66
+ - fix: use `useFocusVisible` hook for :focus-visible styles ([PR #24154](https://github.com/microsoft/fluentui/pull/24154) by lingfangao@hotmail.com)
67
+ - chore: Bump Griffel dependencies ([PR #24114](https://github.com/microsoft/fluentui/pull/24114) by miroslav.stastny@microsoft.com)
20
68
 
21
69
  ## [9.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-provider_v9.0.3)
22
70
 
@@ -1 +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"]}
1
+ {"version":3,"file":"FluentProvider.js","sourceRoot":"","sources":["../src/FluentProvider.ts"],"names":[],"mappings":"AAAA,cAAc,mCAAmC,CAAC","sourcesContent":["export * from './components/FluentProvider/index';\n"]}
@@ -1 +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;EAC9F,MAAM,KAAK,GAAG,0BAA0B,CAAC,KAAD,EAAQ,GAAR,CAAxC;EACA,gCAAgC,CAAC,KAAD,CAAhC;EAEA,MAAM,aAAa,GAAG,uCAAuC,CAAC,KAAD,CAA7D;EAEA,OAAO,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/"}
1
+ {"version":3,"sources":["../../../src/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;EAC9F,MAAM,KAAK,GAAG,0BAA0B,CAAC,KAAD,EAAQ,GAAR,CAAxC;EACA,gCAAgC,CAAC,KAAD,CAAhC;EAEA,MAAM,aAAa,GAAG,uCAAuC,CAAC,KAAD,CAA7D;EAEA,OAAO,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":""}
@@ -1 +1 @@
1
- {"version":3,"file":"FluentProvider.types.js","sourceRoot":"../src/","sources":["components/FluentProvider/FluentProvider.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n ProviderContextValue_unstable as ProviderContextValue,\n TooltipVisibilityContextValue_unstable as TooltipVisibilityContextValue,\n ThemeClassNameContextValue_unstable as ThemeClassNameContextValue,\n ThemeContextValue_unstable as ThemeContextValue,\n} from '@fluentui/react-shared-contexts';\nimport type { PartialTheme } from '@fluentui/react-theme';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type FluentProviderSlots = {\n root: Slot<'div'>;\n};\n\nexport type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir'> & {\n /** Sets the direction of text & generated styles. */\n dir?: 'ltr' | 'rtl';\n\n /** Provides the document, can be undefined during SSR render. */\n targetDocument?: Document;\n\n theme?: PartialTheme;\n};\n\nexport type FluentProviderState = ComponentState<FluentProviderSlots> &\n Pick<FluentProviderProps, 'targetDocument'> &\n Required<Pick<FluentProviderProps, 'dir'>> & {\n theme: ThemeContextValue;\n themeClassName: string;\n };\n\nexport type FluentProviderContextValues = Pick<FluentProviderState, 'theme'> & {\n provider: ProviderContextValue;\n themeClassName: ThemeClassNameContextValue;\n textDirection: 'ltr' | 'rtl';\n tooltip: TooltipVisibilityContextValue;\n};\n"]}
1
+ {"version":3,"file":"FluentProvider.types.js","sourceRoot":"","sources":["../../../src/components/FluentProvider/FluentProvider.types.ts"],"names":[],"mappings":"","sourcesContent":["import type {\n ProviderContextValue_unstable as ProviderContextValue,\n TooltipVisibilityContextValue_unstable as TooltipVisibilityContextValue,\n ThemeClassNameContextValue_unstable as ThemeClassNameContextValue,\n ThemeContextValue_unstable as ThemeContextValue,\n} from '@fluentui/react-shared-contexts';\nimport type { PartialTheme } from '@fluentui/react-theme';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type FluentProviderSlots = {\n root: Slot<'div'>;\n};\n\nexport type FluentProviderProps = Omit<ComponentProps<FluentProviderSlots>, 'dir'> & {\n /** Sets the direction of text & generated styles. */\n dir?: 'ltr' | 'rtl';\n\n /** Provides the document, can be undefined during SSR render. */\n targetDocument?: Document;\n\n theme?: PartialTheme;\n};\n\nexport type FluentProviderState = ComponentState<FluentProviderSlots> &\n Pick<FluentProviderProps, 'targetDocument'> &\n Required<Pick<FluentProviderProps, 'dir'>> & {\n theme: ThemeContextValue;\n themeClassName: string;\n };\n\nexport type FluentProviderContextValues = Pick<FluentProviderState, 'theme'> & {\n provider: ProviderContextValue;\n themeClassName: ThemeClassNameContextValue;\n textDirection: 'ltr' | 'rtl';\n tooltip: TooltipVisibilityContextValue;\n};\n"]}
@@ -1 +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;AACjD,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './FluentProvider';\nexport * from './FluentProvider.types';\nexport * from './renderFluentProvider';\nexport * from './useFluentProvider';\nexport * from './useFluentProviderStyles';\nexport * from './useFluentProviderContextValues';\nexport * from './useFluentProviderThemeStyleTag';\n"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/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;AACjD,cAAc,kCAAkC,CAAC","sourcesContent":["export * from './FluentProvider';\nexport * from './FluentProvider.types';\nexport * from './renderFluentProvider';\nexport * from './useFluentProvider';\nexport * from './useFluentProviderStyles';\nexport * from './useFluentProviderContextValues';\nexport * from './useFluentProviderThemeStyleTag';\n"]}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/FluentProvider/renderFluentProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SACE,iBAAiB,IAAI,QADvB,EAEE,kCAAkC,IAAI,yBAFxC,EAGE,sBAAsB,IAAI,aAH5B,EAIE,+BAA+B,IAAI,sBAJrC,QAKO,iCALP;AAMA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,6BAA6B,GAAG,CAC3C,KAD2C,EAE3C,aAF2C,KAGzC;EACF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAsB,KAAtB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,QAAD,EAAS;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAT,eACE,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAd,eACE,KAAA,CAAA,aAAA,CAAC,sBAAD,EAAuB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAvB,eACE,KAAA,CAAA,aAAA,CAAC,yBAAD,EAA0B;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAA1B,eACE,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB;IAAC,GAAG,EAAE,aAAa,CAAC;EAApB,CAAtB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,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 {\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n} from '@fluentui/react-shared-contexts';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n) => {\n const { slots, slotProps } = getSlots<FluentProviderSlots>(state);\n\n return (\n <Provider value={contextValues.provider}>\n <ThemeProvider value={contextValues.theme}>\n <ThemeClassNameProvider value={contextValues.themeClassName}>\n <TooltipVisibilityProvider value={contextValues.tooltip}>\n <TextDirectionProvider dir={contextValues.textDirection}>\n <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["../../../src/components/FluentProvider/renderFluentProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,gBAAtC;AACA,SACE,iBAAiB,IAAI,QADvB,EAEE,kCAAkC,IAAI,yBAFxC,EAGE,sBAAsB,IAAI,aAH5B,EAIE,+BAA+B,IAAI,sBAJrC,QAKO,iCALP;AAMA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,6BAA6B,GAAG,CAC3C,KAD2C,EAE3C,aAF2C,KAGzC;EACF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAsB,KAAtB,CAArC;EAEA,oBACE,KAAA,CAAA,aAAA,CAAC,QAAD,EAAS;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAT,eACE,KAAA,CAAA,aAAA,CAAC,aAAD,EAAc;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAd,eACE,KAAA,CAAA,aAAA,CAAC,sBAAD,EAAuB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAvB,eACE,KAAA,CAAA,aAAA,CAAC,yBAAD,EAA0B;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAA1B,eACE,KAAA,CAAA,aAAA,CAAC,qBAAD,EAAsB;IAAC,GAAG,EAAE,aAAa,CAAC;EAApB,CAAtB,eACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,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 {\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n} from '@fluentui/react-shared-contexts';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n) => {\n const { slots, slotProps } = getSlots<FluentProviderSlots>(state);\n\n return (\n <Provider value={contextValues.provider}>\n <ThemeProvider value={contextValues.theme}>\n <ThemeClassNameProvider value={contextValues.themeClassName}>\n <TooltipVisibilityProvider value={contextValues.tooltip}>\n <TextDirectionProvider dir={contextValues.textDirection}>\n <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"],"sourceRoot":""}
@@ -1,4 +1,4 @@
1
- import { useKeyboardNavAttribute } from '@fluentui/react-tabster';
1
+ import { useFocusVisible } from '@fluentui/react-tabster';
2
2
  import { ThemeContext_unstable as ThemeContext, useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
3
3
  import { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';
4
4
  import * as React from 'react';
@@ -52,7 +52,7 @@ export const useFluentProvider_unstable = (props, ref) => {
52
52
  },
53
53
  root: getNativeElementProps('div', { ...props,
54
54
  dir,
55
- ref: useMergedRefs(ref, useKeyboardNavAttribute())
55
+ ref: useMergedRefs(ref, useFocusVisible())
56
56
  })
57
57
  };
58
58
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":"AAAA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SACE,qBAAqB,IAAI,YAD3B,EAEE,kBAAkB,IAAI,SAFxB,QAGO,iCAHP;AAKA,SAAS,qBAAT,EAAgC,aAAhC,QAAqD,2BAArD;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,8BAAT,QAA+C,kCAA/C;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;EACvB,MAAM,aAAa,GAAG,SAAS,EAA/B;EACA,MAAM,WAAW,GAAG,QAAQ,EAA5B;EAEA;;;;AAIG;;EACH,MAAM;IAAE,GAAG,GAAG,aAAa,CAAC,GAAtB;IAA2B,cAAc,GAAG,aAAa,CAAC,cAA1D;IAA0E;EAA1E,IAAoF,KAA1F;EACA,MAAM,WAAW,GAAG,WAAW,CAAC,WAAD,EAAc,KAAd,CAA/B;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,IAAyC,WAAW,KAAK,SAA7D,EAAwE;MACtE;MACA,OAAO,CAAC,IAAR,CAAa;;;;AAIZ,OAJD;IAKD,CARkB,CASnB;;EACD,CAVD,EAUG,EAVH;EAYA,OAAO;IACL,GADK;IAEL,cAFK;IAGL,KAAK,EAAE,WAHF;IAIL,cAAc,EAAE,8BAA8B,CAAC;MAAE,KAAK,EAAE,WAAT;MAAsB;IAAtB,CAAD,CAJzC;IAML,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CANP;IAUL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ,EACjC,GAAG,KAD8B;MAEjC,GAFiC;MAGjC,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,uBAAuB,EAA7B;IAHe,CAAR;EAVtB,CAAP;AAgBD,CA3CM;;AA6CP,SAAS,WAAT,CAAqB,CAArB,EAA2C,CAA3C,EAA+D;EAC7D;EACA,IAAI,CAAC,IAAI,CAAT,EAAY;IACV,OAAO,EAAE,GAAG,CAAL;MAAQ,GAAG;IAAX,CAAP;EACD;;EAED,IAAI,CAAJ,EAAO;IACL,OAAO,CAAP;EACD;;EAED,OAAO,CAAP;AACD;;AAED,SAAS,QAAT,GAAiB;EACf,OAAO,KAAK,CAAC,UAAN,CAAiB,YAAjB,CAAP;AACD","sourcesContent":["import { useKeyboardNavAttribute } from '@fluentui/react-tabster';\nimport {\n ThemeContext_unstable as ThemeContext,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport type { ThemeContextValue_unstable as ThemeContextValue } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */\nexport const useFluentProvider_unstable = (\n props: FluentProviderProps,\n ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n const parentContext = useFluent();\n const parentTheme = useTheme();\n\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: useFluentProviderThemeStyleTag({ 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: ThemeContextValue, b: ThemeContextValue): ThemeContextValue {\n // Merge impacts perf: we should like to avoid it if it's possible\n if (a && b) {\n return { ...a, ...b };\n }\n\n if (a) {\n return a;\n }\n\n return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n return React.useContext(ThemeContext);\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["../../../src/components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":"AAAA,SAAS,eAAT,QAAgC,yBAAhC;AACA,SACE,qBAAqB,IAAI,YAD3B,EAEE,kBAAkB,IAAI,SAFxB,QAGO,iCAHP;AAKA,SAAS,qBAAT,EAAgC,aAAhC,QAAqD,2BAArD;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,8BAAT,QAA+C,kCAA/C;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;EACvB,MAAM,aAAa,GAAG,SAAS,EAA/B;EACA,MAAM,WAAW,GAAG,QAAQ,EAA5B;EAEA;;;;AAIG;;EACH,MAAM;IAAE,GAAG,GAAG,aAAa,CAAC,GAAtB;IAA2B,cAAc,GAAG,aAAa,CAAC,cAA1D;IAA0E;EAA1E,IAAoF,KAA1F;EACA,MAAM,WAAW,GAAG,WAAW,CAAC,WAAD,EAAc,KAAd,CAA/B;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,IAAyC,WAAW,KAAK,SAA7D,EAAwE;MACtE;MACA,OAAO,CAAC,IAAR,CAAa;;;;AAIZ,OAJD;IAKD,CARkB,CASnB;;EACD,CAVD,EAUG,EAVH;EAYA,OAAO;IACL,GADK;IAEL,cAFK;IAGL,KAAK,EAAE,WAHF;IAIL,cAAc,EAAE,8BAA8B,CAAC;MAAE,KAAK,EAAE,WAAT;MAAsB;IAAtB,CAAD,CAJzC;IAML,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CANP;IAUL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ,EACjC,GAAG,KAD8B;MAEjC,GAFiC;MAGjC,GAAG,EAAE,aAAa,CAAC,GAAD,EAAM,eAAe,EAArB;IAHe,CAAR;EAVtB,CAAP;AAgBD,CA3CM;;AA6CP,SAAS,WAAT,CAAqB,CAArB,EAA2C,CAA3C,EAA+D;EAC7D;EACA,IAAI,CAAC,IAAI,CAAT,EAAY;IACV,OAAO,EAAE,GAAG,CAAL;MAAQ,GAAG;IAAX,CAAP;EACD;;EAED,IAAI,CAAJ,EAAO;IACL,OAAO,CAAP;EACD;;EAED,OAAO,CAAP;AACD;;AAED,SAAS,QAAT,GAAiB;EACf,OAAO,KAAK,CAAC,UAAN,CAAiB,YAAjB,CAAP;AACD","sourcesContent":["import { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n ThemeContext_unstable as ThemeContext,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport type { ThemeContextValue_unstable as ThemeContextValue } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */\nexport const useFluentProvider_unstable = (\n props: FluentProviderProps,\n ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n const parentContext = useFluent();\n const parentTheme = useTheme();\n\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: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),\n\n components: {\n root: 'div',\n },\n\n root: getNativeElementProps('div', {\n ...props,\n dir,\n ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>()),\n }),\n };\n};\n\nfunction mergeThemes(a: ThemeContextValue, b: ThemeContextValue): ThemeContextValue {\n // Merge impacts perf: we should like to avoid it if it's possible\n if (a && b) {\n return { ...a, ...b };\n }\n\n if (a) {\n return a;\n }\n\n return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n return React.useContext(ThemeContext);\n}\n"],"sourceRoot":""}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/FluentProvider/useFluentProviderContextValues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,OAAM,SAAU,uCAAV,CAAkD,KAAlD,EAA4E;EAChF,MAAM;IAAE,IAAF;IAAQ,GAAR;IAAa,cAAb;IAA6B;EAA7B,IAAuC,KAA7C;EAEA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,OAAO;IAAE,GAAF;IAAO;EAAP,CAAP,CAAd,EAA+C,CAAC,GAAD,EAAM,cAAN,CAA/C,CAAjB,CAHgF,CAIhF;;EACA,MAAM,CAAC,OAAD,IAAY,KAAK,CAAC,QAAN,CAAe,OAAO,EAAP,CAAf,CAAlB;EAEA,OAAO;IACL,QADK;IAEL,aAAa,EAAE,GAFV;IAGL,OAHK;IAIL,KAJK;IAKL,cAAc,EAAE,IAAI,CAAC;EALhB,CAAP;AAOD","sourcesContent":["import * 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] = React.useState(() => ({}));\n\n return {\n provider,\n textDirection: dir,\n tooltip,\n theme,\n themeClassName: root.className!,\n };\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["../../../src/components/FluentProvider/useFluentProviderContextValues.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAGA,OAAM,SAAU,uCAAV,CAAkD,KAAlD,EAA4E;EAChF,MAAM;IAAE,IAAF;IAAQ,GAAR;IAAa,cAAb;IAA6B;EAA7B,IAAuC,KAA7C;EAEA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,OAAO;IAAE,GAAF;IAAO;EAAP,CAAP,CAAd,EAA+C,CAAC,GAAD,EAAM,cAAN,CAA/C,CAAjB,CAHgF,CAIhF;;EACA,MAAM,CAAC,OAAD,IAAY,KAAK,CAAC,QAAN,CAAe,OAAO,EAAP,CAAf,CAAlB;EAEA,OAAO;IACL,QADK;IAEL,aAAa,EAAE,GAFV;IAGL,OAHK;IAIL,KAJK;IAKL,cAAc,EAAE,IAAI,CAAC;EALhB,CAAP;AAOD","sourcesContent":["import * 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] = React.useState(() => ({}));\n\n return {\n provider,\n textDirection: dir,\n tooltip,\n theme,\n themeClassName: root.className!,\n };\n}\n"],"sourceRoot":""}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/FluentProvider/useFluentProviderStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,eAAzC;AACA,SAAS,oBAAT,QAAqC,gBAArC;AACA,SAAS,MAAT,EAAiB,gBAAjB,QAAyC,uBAAzC;AAIA,OAAO,MAAM,wBAAwB,GAAwC;EAC3E,IAAI,EAAE;AADqE,CAAtE;;AAIP,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AASA;;;AACA,OAAO,MAAM,gCAAgC,GAAI,KAAD,IAA+B;EAC7E,MAAM,QAAQ,GAAG,oBAAoB,EAArC;EACA,MAAM,MAAM,GAAG,SAAS,CAAC;IAAE,GAAG,EAAE,KAAK,CAAC,GAAb;IAAkB;EAAlB,CAAD,CAAxB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,wBAAwB,CAAC,IADQ,EAEjC,KAAK,CAAC,cAF2B,EAGjC,MAAM,CAAC,IAH0B,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;EAOA,OAAO,KAAP;AACD,CAZM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {\n root: 'fui-FluentProvider',\n};\n\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n textAlign: 'left',\n ...typographyStyles.body1,\n },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState) => {\n const renderer = useRenderer_unstable();\n const styles = useStyles({ dir: state.dir, renderer });\n\n state.root.className = mergeClasses(\n fluentProviderClassNames.root,\n state.themeClassName,\n styles.root,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["../../../src/components/FluentProvider/useFluentProviderStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,eAAzC;AACA,SAAS,oBAAT,QAAqC,gBAArC;AACA,SAAS,MAAT,EAAiB,gBAAjB,QAAyC,uBAAzC;AAIA,OAAO,MAAM,wBAAwB,GAAwC;EAC3E,IAAI,EAAE;AADqE,CAAtE;;AAIP,MAAM,SAAS,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AASA;;;AACA,OAAO,MAAM,gCAAgC,GAAI,KAAD,IAA+B;EAC7E,MAAM,QAAQ,GAAG,oBAAoB,EAArC;EACA,MAAM,MAAM,GAAG,SAAS,CAAC;IAAE,GAAG,EAAE,KAAK,CAAC,GAAb;IAAkB;EAAlB,CAAD,CAAxB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,wBAAwB,CAAC,IADQ,EAEjC,KAAK,CAAC,cAF2B,EAGjC,MAAM,CAAC,IAH0B,EAIjC,KAAK,CAAC,IAAN,CAAW,SAJsB,CAAnC;EAOA,OAAO,KAAP;AACD,CAZM","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {\n root: 'fui-FluentProvider',\n};\n\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n textAlign: 'left',\n ...typographyStyles.body1,\n },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState) => {\n const renderer = useRenderer_unstable();\n const styles = useStyles({ dir: state.dir, renderer });\n\n state.root.className = mergeClasses(\n fluentProviderClassNames.root,\n state.themeClassName,\n styles.root,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":""}
@@ -1,61 +1,67 @@
1
- import { useId, usePrevious } from '@fluentui/react-utilities';
1
+ import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
2
2
  import * as React from 'react';
3
- import { fluentProviderClassNames } from './useFluentProviderStyles';
3
+ import { fluentProviderClassNames } from './useFluentProviderStyles'; // String concatenation is used to prevent bundlers to complain with older versions of React
4
+
5
+ const useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : useIsomorphicLayoutEffect;
6
+
7
+ const createStyleTag = (target, id) => {
8
+ if (!target) {
9
+ return undefined;
10
+ }
11
+
12
+ const tag = target.createElement('style');
13
+ tag.setAttribute('id', id);
14
+ target.head.appendChild(tag);
15
+ return tag;
16
+ };
17
+
18
+ const insertSheet = (tag, rule) => {
19
+ const sheet = tag.sheet;
20
+
21
+ if (sheet) {
22
+ if (sheet.cssRules.length > 0) {
23
+ sheet.deleteRule(0);
24
+ }
25
+
26
+ sheet.insertRule(rule, 0);
27
+ } else if (process.env.NODE_ENV !== 'production') {
28
+ // eslint-disable-next-line no-console
29
+ console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');
30
+ }
31
+ };
4
32
  /**
5
33
  * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
6
34
  *
7
35
  * @returns CSS class to apply the rule
8
36
  */
9
37
 
38
+
10
39
  export const useFluentProviderThemeStyleTag = options => {
11
40
  const {
12
41
  targetDocument,
13
42
  theme
14
43
  } = options;
44
+ const styleTag = React.useRef();
15
45
  const styleTagId = useId(fluentProviderClassNames.root);
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) => {
46
+ const cssVarsAsString = React.useMemo(() => {
47
+ return theme ? Object.keys(theme).reduce((cssVarRule, cssVar) => {
28
48
  cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;
29
49
  return cssVarRule;
30
- }, '') : ''; // result: .fluent-provider1 { --css-var: '#fff' }
50
+ }, '') : '';
51
+ }, [theme]);
52
+ const rule = `.${styleTagId} { ${cssVarsAsString} }`;
53
+ useInsertionEffect(() => {
54
+ styleTag.current = createStyleTag(targetDocument, styleTagId);
31
55
 
32
- return `.${styleTagId} { ${cssVarsAsString} }`;
33
- }, [theme, styleTagId]);
34
- const previousCssRule = usePrevious(cssRule);
56
+ if (styleTag.current) {
57
+ insertSheet(styleTag.current, rule);
58
+ return () => {
59
+ var _a;
35
60
 
36
- if (styleTag && previousCssRule !== cssRule) {
37
- const sheet = styleTag.sheet;
38
-
39
- if (sheet) {
40
- if (sheet.cssRules.length > 0) {
41
- sheet.deleteRule(0);
42
- }
43
-
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.');
61
+ (_a = styleTag.current) === null || _a === void 0 ? void 0 : _a.remove();
62
+ };
48
63
  }
49
- } // Removes the style tag from the targetDocument on unmount or change
50
-
51
-
52
- React.useEffect(() => {
53
- return () => {
54
- if (styleTag) {
55
- styleTag.remove();
56
- }
57
- };
58
- }, [styleTag]);
64
+ }, [styleTagId, targetDocument, rule]);
59
65
  return styleTagId;
60
66
  };
61
67
  //# sourceMappingURL=useFluentProviderThemeStyleTag.js.map
@@ -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;EAC/G,MAAM;IAAE,cAAF;IAAkB;EAAlB,IAA4B,OAAlC;EAEA,MAAM,UAAU,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAA1B,CAAxB;EACA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IAClC,IAAI,CAAC,cAAL,EAAqB;MACnB,OAAO,IAAP;IACD;;IAED,MAAM,GAAG,GAAG,cAAc,CAAC,aAAf,CAA6B,OAA7B,CAAZ;IACA,GAAG,CAAC,YAAJ,CAAiB,IAAjB,EAAuB,UAAvB;IACA,cAAc,CAAC,IAAf,CAAoB,WAApB,CAAgC,GAAhC;IACA,OAAO,GAAP;EACD,CATgB,EASd,CAAC,UAAD,EAAa,cAAb,CATc,CAAjB;EAWA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IACjC,MAAM,eAAe,GAAG,KAAK,GACxB,MAAM,CAAC,IAAP,CAAY,KAAZ,EAA8C,MAA9C,CAAqD,CAAC,UAAD,EAAa,MAAb,KAAuB;MAC3E,UAAU,IAAI,KAAK,MAAM,KAAK,KAAK,CAAC,MAAD,CAAQ,IAA3C;MACA,OAAO,UAAP;IACD,CAHA,EAGE,EAHF,CADwB,GAKzB,EALJ,CADiC,CAQjC;;IACA,OAAO,IAAI,UAAU,MAAM,eAAe,IAA1C;EACD,CAVe,EAUb,CAAC,KAAD,EAAQ,UAAR,CAVa,CAAhB;EAWA,MAAM,eAAe,GAAG,WAAW,CAAC,OAAD,CAAnC;;EAEA,IAAI,QAAQ,IAAI,eAAe,KAAK,OAApC,EAA6C;IAC3C,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAvB;;IAEA,IAAI,KAAJ,EAAW;MACT,IAAI,KAAK,CAAC,QAAN,CAAe,MAAf,GAAwB,CAA5B,EAA+B;QAC7B,KAAK,CAAC,UAAN,CAAiB,CAAjB;MACD;;MACD,KAAK,CAAC,UAAN,CAAiB,OAAjB,EAA0B,CAA1B;IACD,CALD,MAKO,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;MAChD;MACA,OAAO,CAAC,KAAR,CAAc,uFAAd;IACD;EACF,CAxC8G,CA0C/G;;;EACA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,OAAO,MAAK;MACV,IAAI,QAAJ,EAAc;QACZ,QAAQ,CAAC,MAAT;MACD;IACF,CAJD;EAKD,CAND,EAMG,CAAC,QAAD,CANH;EAQA,OAAO,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/"}
1
+ {"version":3,"sources":["../../../src/components/FluentProvider/useFluentProviderThemeStyleTag.ts"],"names":[],"mappings":"AAAA,SAAS,KAAT,EAAgB,yBAAhB,QAAiD,2BAAjD;AACA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SAAS,wBAAT,QAAyC,2BAAzC,C,CAEA;;AACA,MAAM,kBAAkB,GAAI,KAAe,CAAC,iBAAiB,QAAlB,CAAf,GACvB,KAAe,CAAC,iBAAiB,QAAlB,CADQ,GAExB,yBAFJ;;AAIA,MAAM,cAAc,GAAG,CAAC,MAAD,EAA+B,EAA/B,KAA6C;EAClE,IAAI,CAAC,MAAL,EAAa;IACX,OAAO,SAAP;EACD;;EACD,MAAM,GAAG,GAAG,MAAM,CAAC,aAAP,CAAqB,OAArB,CAAZ;EACA,GAAG,CAAC,YAAJ,CAAiB,IAAjB,EAAuB,EAAvB;EACA,MAAM,CAAC,IAAP,CAAY,WAAZ,CAAwB,GAAxB;EACA,OAAO,GAAP;AACD,CARD;;AAUA,MAAM,WAAW,GAAG,CAAC,GAAD,EAAwB,IAAxB,KAAwC;EAC1D,MAAM,KAAK,GAAG,GAAG,CAAC,KAAlB;;EAEA,IAAI,KAAJ,EAAW;IACT,IAAI,KAAK,CAAC,QAAN,CAAe,MAAf,GAAwB,CAA5B,EAA+B;MAC7B,KAAK,CAAC,UAAN,CAAiB,CAAjB;IACD;;IACD,KAAK,CAAC,UAAN,CAAiB,IAAjB,EAAuB,CAAvB;EACD,CALD,MAKO,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;IAChD;IACA,OAAO,CAAC,KAAR,CAAc,uFAAd;EACD;AACF,CAZD;AAcA;;;;AAIG;;;AACH,OAAO,MAAM,8BAA8B,GAAI,OAAD,IAAmE;EAC/G,MAAM;IAAE,cAAF;IAAkB;EAAlB,IAA4B,OAAlC;EACA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,EAAjB;EAEA,MAAM,UAAU,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAA1B,CAAxB;EAEA,MAAM,eAAe,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IACzC,OAAO,KAAK,GACP,MAAM,CAAC,IAAP,CAAY,KAAZ,EAA8C,MAA9C,CAAqD,CAAC,UAAD,EAAa,MAAb,KAAuB;MAC3E,UAAU,IAAI,KAAK,MAAM,KAAK,KAAK,CAAC,MAAD,CAAQ,IAA3C;MACA,OAAO,UAAP;IACD,CAHA,EAGE,EAHF,CADO,GAKR,EALJ;EAMD,CAPuB,EAOrB,CAAC,KAAD,CAPqB,CAAxB;EASA,MAAM,IAAI,GAAG,IAAI,UAAU,MAAM,eAAe,IAAhD;EAEA,kBAAkB,CAAC,MAAK;IACtB,QAAQ,CAAC,OAAT,GAAmB,cAAc,CAAC,cAAD,EAAiB,UAAjB,CAAjC;;IAEA,IAAI,QAAQ,CAAC,OAAb,EAAsB;MACpB,WAAW,CAAC,QAAQ,CAAC,OAAV,EAAmB,IAAnB,CAAX;MAEA,OAAO,MAAK;;;QACV,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAT,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAE,MAAF,EAAhB;MACD,CAFD;IAGD;EACF,CAViB,EAUf,CAAC,UAAD,EAAa,cAAb,EAA6B,IAA7B,CAVe,CAAlB;EAYA,OAAO,UAAP;AACD,CA9BM","sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n ? (React as never)['useInsertion' + 'Effect']\n : useIsomorphicLayoutEffect;\n\nconst createStyleTag = (target: Document | undefined, id: string) => {\n if (!target) {\n return undefined;\n }\n const tag = target.createElement('style');\n tag.setAttribute('id', id);\n target.head.appendChild(tag);\n return tag;\n};\n\nconst insertSheet = (tag: HTMLStyleElement, rule: string) => {\n const sheet = tag.sheet;\n\n if (sheet) {\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n sheet.insertRule(rule, 0);\n } else if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n }\n};\n\n/**\n * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n *\n * @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {\n const { targetDocument, theme } = options;\n const styleTag = React.useRef<HTMLStyleElement>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\n\n const cssVarsAsString = React.useMemo(() => {\n return theme\n ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '')\n : '';\n }, [theme]);\n\n const rule = `.${styleTagId} { ${cssVarsAsString} }`;\n\n useInsertionEffect(() => {\n styleTag.current = createStyleTag(targetDocument, styleTagId);\n\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n\n return () => {\n styleTag.current?.remove();\n };\n }\n }, [styleTagId, targetDocument, rule]);\n\n return styleTagId;\n};\n"],"sourceRoot":""}
package/lib/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,wBADF,EAEE,cAFF,EAGE,6BAHF,EAIE,uCAJF,EAKE,0BALF,EAME,gCANF,EAOE,8BAPF,QAQO,kBARP","sourcesContent":["export {\n fluentProviderClassNames,\n FluentProvider,\n renderFluentProvider_unstable,\n useFluentProviderContextValues_unstable,\n useFluentProvider_unstable,\n useFluentProviderStyles_unstable,\n useFluentProviderThemeStyleTag,\n} from './FluentProvider';\nexport type {\n FluentProviderContextValues,\n FluentProviderProps,\n FluentProviderState,\n FluentProviderSlots,\n} from './FluentProvider';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,SACE,wBADF,EAEE,cAFF,EAGE,6BAHF,EAIE,uCAJF,EAKE,0BALF,EAME,gCANF,EAOE,8BAPF,QAQO,kBARP","sourcesContent":["export {\n fluentProviderClassNames,\n FluentProvider,\n renderFluentProvider_unstable,\n useFluentProviderContextValues_unstable,\n useFluentProvider_unstable,\n useFluentProviderStyles_unstable,\n useFluentProviderThemeStyleTag,\n} from './FluentProvider';\nexport type {\n FluentProviderContextValues,\n FluentProviderProps,\n FluentProviderState,\n FluentProviderSlots,\n} from './FluentProvider';\n"],"sourceRoot":""}
@@ -1 +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/"}
1
+ {"version":3,"sources":["../src/FluentProvider.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,mCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/FluentProvider/index';\n"],"sourceRoot":""}
@@ -1 +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;EAC9F,MAAM,KAAK,GAAG,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,EAAkC,GAAlC,CAAd;EACA,yBAAA,CAAA,gCAAA,CAAiC,KAAjC;EAEA,MAAM,aAAa,GAAG,gCAAA,CAAA,uCAAA,CAAwC,KAAxC,CAAtB;EAEA,OAAO,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/"}
1
+ {"version":3,"sources":["../../../src/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;EAC9F,MAAM,KAAK,GAAG,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,EAAkC,GAAlC,CAAd;EACA,yBAAA,CAAA,gCAAA,CAAiC,KAAjC;EAEA,MAAM,aAAa,GAAG,gCAAA,CAAA,uCAAA,CAAwC,KAAxC,CAAtB;EAEA,OAAO,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":""}
@@ -1 +1 @@
1
- {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
1
+ {"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":""}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/FluentProvider/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './FluentProvider';\nexport * from './FluentProvider.types';\nexport * from './renderFluentProvider';\nexport * from './useFluentProvider';\nexport * from './useFluentProviderStyles';\nexport * from './useFluentProviderContextValues';\nexport * from './useFluentProviderThemeStyleTag';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["../../../src/components/FluentProvider/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,2BAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './FluentProvider';\nexport * from './FluentProvider.types';\nexport * from './renderFluentProvider';\nexport * from './useFluentProvider';\nexport * from './useFluentProviderStyles';\nexport * from './useFluentProviderContextValues';\nexport * from './useFluentProviderThemeStyleTag';\n"],"sourceRoot":""}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/FluentProvider/renderFluentProvider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAMA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,6BAA6B,GAAG,CAC3C,KAD2C,EAE3C,aAF2C,KAGzC;EACF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA8B,KAA9B,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,iBAAD,EAAS;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAT,EACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,sBAAD,EAAc;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAd,EACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,+BAAD,EAAuB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAvB,EACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,kCAAD,EAA0B;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAA1B,EACE,KAAA,CAAA,aAAA,CAAC,OAAA,CAAA,qBAAD,EAAsB;IAAC,GAAG,EAAE,aAAa,CAAC;EAApB,CAAtB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,KAAK,CAAC,IAAN,CAAW,QAA5C,CADF,CADF,CADF,CADF,CADF,CADF;AAaD,CAnBM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import * as React from 'react';\nimport { TextDirectionProvider } from '@griffel/react';\nimport {\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n} from '@fluentui/react-shared-contexts';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n) => {\n const { slots, slotProps } = getSlots<FluentProviderSlots>(state);\n\n return (\n <Provider value={contextValues.provider}>\n <ThemeProvider value={contextValues.theme}>\n <ThemeClassNameProvider value={contextValues.themeClassName}>\n <TooltipVisibilityProvider value={contextValues.tooltip}>\n <TextDirectionProvider dir={contextValues.textDirection}>\n <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["../../../src/components/FluentProvider/renderFluentProvider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAMA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,6BAA6B,GAAG,CAC3C,KAD2C,EAE3C,aAF2C,KAGzC;EACF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAA8B,KAA9B,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,iBAAD,EAAS;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAT,EACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,sBAAD,EAAc;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAd,EACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,+BAAD,EAAuB;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAAvB,EACE,KAAA,CAAA,aAAA,CAAC,uBAAA,CAAA,kCAAD,EAA0B;IAAC,KAAK,EAAE,aAAa,CAAC;EAAtB,CAA1B,EACE,KAAA,CAAA,aAAA,CAAC,OAAA,CAAA,qBAAD,EAAsB;IAAC,GAAG,EAAE,aAAa,CAAC;EAApB,CAAtB,EACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,KAAK,CAAC,IAAN,CAAW,QAA5C,CADF,CADF,CADF,CADF,CADF,CADF;AAaD,CAnBM;;AAAM,OAAA,CAAA,6BAAA,GAA6B,6BAA7B","sourcesContent":["import * as React from 'react';\nimport { TextDirectionProvider } from '@griffel/react';\nimport {\n Provider_unstable as Provider,\n TooltipVisibilityProvider_unstable as TooltipVisibilityProvider,\n ThemeProvider_unstable as ThemeProvider,\n ThemeClassNameProvider_unstable as ThemeClassNameProvider,\n} from '@fluentui/react-shared-contexts';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FluentProviderSlots, FluentProviderContextValues, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Render the final JSX of FluentProvider\n */\nexport const renderFluentProvider_unstable = (\n state: FluentProviderState,\n contextValues: FluentProviderContextValues,\n) => {\n const { slots, slotProps } = getSlots<FluentProviderSlots>(state);\n\n return (\n <Provider value={contextValues.provider}>\n <ThemeProvider value={contextValues.theme}>\n <ThemeClassNameProvider value={contextValues.themeClassName}>\n <TooltipVisibilityProvider value={contextValues.tooltip}>\n <TextDirectionProvider dir={contextValues.textDirection}>\n <slots.root {...slotProps.root}>{state.root.children}</slots.root>\n </TextDirectionProvider>\n </TooltipVisibilityProvider>\n </ThemeClassNameProvider>\n </ThemeProvider>\n </Provider>\n );\n};\n"],"sourceRoot":""}
@@ -64,7 +64,7 @@ const useFluentProvider_unstable = (props, ref) => {
64
64
  },
65
65
  root: react_utilities_1.getNativeElementProps('div', { ...props,
66
66
  dir,
67
- ref: react_utilities_1.useMergedRefs(ref, react_tabster_1.useKeyboardNavAttribute())
67
+ ref: react_utilities_1.useMergedRefs(ref, react_tabster_1.useFocusVisible())
68
68
  })
69
69
  };
70
70
  };
@@ -1 +1 @@
1
- {"version":3,"sources":["components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAKA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gCAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;EACvB,MAAM,aAAa,GAAG,uBAAA,CAAA,kBAAA,EAAtB;EACA,MAAM,WAAW,GAAG,QAAQ,EAA5B;EAEA;;;;AAIG;;EACH,MAAM;IAAE,GAAG,GAAG,aAAa,CAAC,GAAtB;IAA2B,cAAc,GAAG,aAAa,CAAC,cAA1D;IAA0E;EAA1E,IAAoF,KAA1F;EACA,MAAM,WAAW,GAAG,WAAW,CAAC,WAAD,EAAc,KAAd,CAA/B;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,IAAyC,WAAW,KAAK,SAA7D,EAAwE;MACtE;MACA,OAAO,CAAC,IAAR,CAAa;;;;AAIZ,OAJD;IAKD,CARkB,CASnB;;EACD,CAVD,EAUG,EAVH;EAYA,OAAO;IACL,GADK;IAEL,cAFK;IAGL,KAAK,EAAE,WAHF;IAIL,cAAc,EAAE,gCAAA,CAAA,8BAAA,CAA+B;MAAE,KAAK,EAAE,WAAT;MAAsB;IAAtB,CAA/B,CAJX;IAML,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CANP;IAUL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,EACjC,GAAG,KAD8B;MAEjC,GAFiC;MAGjC,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,eAAA,CAAA,uBAAA,EAAnB;IAH4B,CAA7B;EAVD,CAAP;AAgBD,CA3CM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B;;AA6Cb,SAAS,WAAT,CAAqB,CAArB,EAA2C,CAA3C,EAA+D;EAC7D;EACA,IAAI,CAAC,IAAI,CAAT,EAAY;IACV,OAAO,EAAE,GAAG,CAAL;MAAQ,GAAG;IAAX,CAAP;EACD;;EAED,IAAI,CAAJ,EAAO;IACL,OAAO,CAAP;EACD;;EAED,OAAO,CAAP;AACD;;AAED,SAAS,QAAT,GAAiB;EACf,OAAO,KAAK,CAAC,UAAN,CAAiB,uBAAA,CAAA,qBAAjB,CAAP;AACD","sourcesContent":["import { useKeyboardNavAttribute } from '@fluentui/react-tabster';\nimport {\n ThemeContext_unstable as ThemeContext,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport type { ThemeContextValue_unstable as ThemeContextValue } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */\nexport const useFluentProvider_unstable = (\n props: FluentProviderProps,\n ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n const parentContext = useFluent();\n const parentTheme = useTheme();\n\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: useFluentProviderThemeStyleTag({ 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: ThemeContextValue, b: ThemeContextValue): ThemeContextValue {\n // Merge impacts perf: we should like to avoid it if it's possible\n if (a && b) {\n return { ...a, ...b };\n }\n\n if (a) {\n return a;\n }\n\n return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n return React.useContext(ThemeContext);\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["../../../src/components/FluentProvider/useFluentProvider.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,eAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,uBAAA,gBAAA,OAAA,CAAA,iCAAA,CAAA;;AAKA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gCAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;AAGA;;;;;;;;AAQG;;;AACI,MAAM,0BAA0B,GAAG,CACxC,KADwC,EAExC,GAFwC,KAGjB;EACvB,MAAM,aAAa,GAAG,uBAAA,CAAA,kBAAA,EAAtB;EACA,MAAM,WAAW,GAAG,QAAQ,EAA5B;EAEA;;;;AAIG;;EACH,MAAM;IAAE,GAAG,GAAG,aAAa,CAAC,GAAtB;IAA2B,cAAc,GAAG,aAAa,CAAC,cAA1D;IAA0E;EAA1E,IAAoF,KAA1F;EACA,MAAM,WAAW,GAAG,WAAW,CAAC,WAAD,EAAc,KAAd,CAA/B;EAEA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAAzB,IAAyC,WAAW,KAAK,SAA7D,EAAwE;MACtE;MACA,OAAO,CAAC,IAAR,CAAa;;;;AAIZ,OAJD;IAKD,CARkB,CASnB;;EACD,CAVD,EAUG,EAVH;EAYA,OAAO;IACL,GADK;IAEL,cAFK;IAGL,KAAK,EAAE,WAHF;IAIL,cAAc,EAAE,gCAAA,CAAA,8BAAA,CAA+B;MAAE,KAAK,EAAE,WAAT;MAAsB;IAAtB,CAA/B,CAJX;IAML,UAAU,EAAE;MACV,IAAI,EAAE;IADI,CANP;IAUL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,EACjC,GAAG,KAD8B;MAEjC,GAFiC;MAGjC,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,GAAd,EAAmB,eAAA,CAAA,eAAA,EAAnB;IAH4B,CAA7B;EAVD,CAAP;AAgBD,CA3CM;;AAAM,OAAA,CAAA,0BAAA,GAA0B,0BAA1B;;AA6Cb,SAAS,WAAT,CAAqB,CAArB,EAA2C,CAA3C,EAA+D;EAC7D;EACA,IAAI,CAAC,IAAI,CAAT,EAAY;IACV,OAAO,EAAE,GAAG,CAAL;MAAQ,GAAG;IAAX,CAAP;EACD;;EAED,IAAI,CAAJ,EAAO;IACL,OAAO,CAAP;EACD;;EAED,OAAO,CAAP;AACD;;AAED,SAAS,QAAT,GAAiB;EACf,OAAO,KAAK,CAAC,UAAN,CAAiB,uBAAA,CAAA,qBAAjB,CAAP;AACD","sourcesContent":["import { useFocusVisible } from '@fluentui/react-tabster';\nimport {\n ThemeContext_unstable as ThemeContext,\n useFluent_unstable as useFluent,\n} from '@fluentui/react-shared-contexts';\nimport type { ThemeContextValue_unstable as ThemeContextValue } from '@fluentui/react-shared-contexts';\nimport { getNativeElementProps, useMergedRefs } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport { useFluentProviderThemeStyleTag } from './useFluentProviderThemeStyleTag';\nimport type { FluentProviderProps, FluentProviderState } from './FluentProvider.types';\n\n/**\n * Create the state required to render FluentProvider.\n *\n * The returned state can be modified with hooks such as useFluentProviderStyles_unstable,\n * before being passed to renderFluentProvider_unstable.\n *\n * @param props - props from this instance of FluentProvider\n * @param ref - reference to root HTMLElement of FluentProvider\n */\nexport const useFluentProvider_unstable = (\n props: FluentProviderProps,\n ref: React.Ref<HTMLElement>,\n): FluentProviderState => {\n const parentContext = useFluent();\n const parentTheme = useTheme();\n\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: useFluentProviderThemeStyleTag({ theme: mergedTheme, targetDocument }),\n\n components: {\n root: 'div',\n },\n\n root: getNativeElementProps('div', {\n ...props,\n dir,\n ref: useMergedRefs(ref, useFocusVisible<HTMLDivElement>()),\n }),\n };\n};\n\nfunction mergeThemes(a: ThemeContextValue, b: ThemeContextValue): ThemeContextValue {\n // Merge impacts perf: we should like to avoid it if it's possible\n if (a && b) {\n return { ...a, ...b };\n }\n\n if (a) {\n return a;\n }\n\n return b;\n}\n\nfunction useTheme(): ThemeContextValue {\n return React.useContext(ThemeContext);\n}\n"],"sourceRoot":""}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/FluentProvider/useFluentProviderContextValues.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,SAAgB,uCAAhB,CAAwD,KAAxD,EAAkF;EAChF,MAAM;IAAE,IAAF;IAAQ,GAAR;IAAa,cAAb;IAA6B;EAA7B,IAAuC,KAA7C;EAEA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,OAAO;IAAE,GAAF;IAAO;EAAP,CAAP,CAAd,EAA+C,CAAC,GAAD,EAAM,cAAN,CAA/C,CAAjB,CAHgF,CAIhF;;EACA,MAAM,CAAC,OAAD,IAAY,KAAK,CAAC,QAAN,CAAe,OAAO,EAAP,CAAf,CAAlB;EAEA,OAAO;IACL,QADK;IAEL,aAAa,EAAE,GAFV;IAGL,OAHK;IAIL,KAJK;IAKL,cAAc,EAAE,IAAI,CAAC;EALhB,CAAP;AAOD;;AAdD,OAAA,CAAA,uCAAA,GAAA,uCAAA","sourcesContent":["import * 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] = React.useState(() => ({}));\n\n return {\n provider,\n textDirection: dir,\n tooltip,\n theme,\n themeClassName: root.className!,\n };\n}\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["../../../src/components/FluentProvider/useFluentProviderContextValues.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AAGA,SAAgB,uCAAhB,CAAwD,KAAxD,EAAkF;EAChF,MAAM;IAAE,IAAF;IAAQ,GAAR;IAAa,cAAb;IAA6B;EAA7B,IAAuC,KAA7C;EAEA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,OAAO;IAAE,GAAF;IAAO;EAAP,CAAP,CAAd,EAA+C,CAAC,GAAD,EAAM,cAAN,CAA/C,CAAjB,CAHgF,CAIhF;;EACA,MAAM,CAAC,OAAD,IAAY,KAAK,CAAC,QAAN,CAAe,OAAO,EAAP,CAAf,CAAlB;EAEA,OAAO;IACL,QADK;IAEL,aAAa,EAAE,GAFV;IAGL,OAHK;IAIL,KAJK;IAKL,cAAc,EAAE,IAAI,CAAC;EALhB,CAAP;AAOD;;AAdD,OAAA,CAAA,uCAAA,GAAA,uCAAA","sourcesContent":["import * 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] = React.useState(() => ({}));\n\n return {\n provider,\n textDirection: dir,\n tooltip,\n theme,\n themeClassName: root.className!,\n };\n}\n"],"sourceRoot":""}
@@ -1 +1 @@
1
- {"version":3,"sources":["components/FluentProvider/useFluentProviderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,MAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,wBAAA,GAAgE;EAC3E,IAAI,EAAE;AADqE,CAAhE;;AAIb,MAAM,SAAS,gBAAG,MAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AASA;;;AACO,MAAM,gCAAgC,GAAI,KAAD,IAA+B;EAC7E,MAAM,QAAQ,GAAG,OAAA,CAAA,oBAAA,EAAjB;EACA,MAAM,MAAM,GAAG,SAAS,CAAC;IAAE,GAAG,EAAE,KAAK,CAAC,GAAb;IAAkB;EAAlB,CAAD,CAAxB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,MAAA,CAAA,YAAA,CACrB,OAAA,CAAA,wBAAA,CAAyB,IADJ,EAErB,KAAK,CAAC,cAFe,EAGrB,MAAM,CAAC,IAHc,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAOA,OAAO,KAAP;AACD,CAZM;;AAAM,OAAA,CAAA,gCAAA,GAAgC,gCAAhC","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {\n root: 'fui-FluentProvider',\n};\n\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n textAlign: 'left',\n ...typographyStyles.body1,\n },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState) => {\n const renderer = useRenderer_unstable();\n const styles = useStyles({ dir: state.dir, renderer });\n\n state.root.className = mergeClasses(\n fluentProviderClassNames.root,\n state.themeClassName,\n styles.root,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["../../../src/components/FluentProvider/useFluentProviderStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,MAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,wBAAA,GAAgE;EAC3E,IAAI,EAAE;AADqE,CAAhE;;AAIb,MAAM,SAAS,gBAAG,MAAA,SAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAAlB;AASA;;;AACO,MAAM,gCAAgC,GAAI,KAAD,IAA+B;EAC7E,MAAM,QAAQ,GAAG,OAAA,CAAA,oBAAA,EAAjB;EACA,MAAM,MAAM,GAAG,SAAS,CAAC;IAAE,GAAG,EAAE,KAAK,CAAC,GAAb;IAAkB;EAAlB,CAAD,CAAxB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,MAAA,CAAA,YAAA,CACrB,OAAA,CAAA,wBAAA,CAAyB,IADJ,EAErB,KAAK,CAAC,cAFe,EAGrB,MAAM,CAAC,IAHc,EAIrB,KAAK,CAAC,IAAN,CAAW,SAJU,CAAvB;EAOA,OAAO,KAAP;AACD,CAZM;;AAAM,OAAA,CAAA,gCAAA,GAAgC,gCAAhC","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/core';\nimport { useRenderer_unstable } from '@griffel/react';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { FluentProviderSlots, FluentProviderState } from './FluentProvider.types';\nimport { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const fluentProviderClassNames: SlotClassNames<FluentProviderSlots> = {\n root: 'fui-FluentProvider',\n};\n\nconst useStyles = makeStyles({\n root: {\n color: tokens.colorNeutralForeground1,\n backgroundColor: tokens.colorNeutralBackground1,\n textAlign: 'left',\n ...typographyStyles.body1,\n },\n});\n\n/** Applies style classnames to slots */\nexport const useFluentProviderStyles_unstable = (state: FluentProviderState) => {\n const renderer = useRenderer_unstable();\n const styles = useStyles({ dir: state.dir, renderer });\n\n state.root.className = mergeClasses(\n fluentProviderClassNames.root,\n state.themeClassName,\n styles.root,\n state.root.className,\n );\n\n return state;\n};\n"],"sourceRoot":""}
@@ -9,7 +9,36 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
9
9
 
10
10
  const React = /*#__PURE__*/require("react");
11
11
 
12
- const useFluentProviderStyles_1 = /*#__PURE__*/require("./useFluentProviderStyles");
12
+ const useFluentProviderStyles_1 = /*#__PURE__*/require("./useFluentProviderStyles"); // String concatenation is used to prevent bundlers to complain with older versions of React
13
+
14
+
15
+ const useInsertionEffect = React['useInsertion' + 'Effect'] ? React['useInsertion' + 'Effect'] : react_utilities_1.useIsomorphicLayoutEffect;
16
+
17
+ const createStyleTag = (target, id) => {
18
+ if (!target) {
19
+ return undefined;
20
+ }
21
+
22
+ const tag = target.createElement('style');
23
+ tag.setAttribute('id', id);
24
+ target.head.appendChild(tag);
25
+ return tag;
26
+ };
27
+
28
+ const insertSheet = (tag, rule) => {
29
+ const sheet = tag.sheet;
30
+
31
+ if (sheet) {
32
+ if (sheet.cssRules.length > 0) {
33
+ sheet.deleteRule(0);
34
+ }
35
+
36
+ sheet.insertRule(rule, 0);
37
+ } else if (process.env.NODE_ENV !== 'production') {
38
+ // eslint-disable-next-line no-console
39
+ console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');
40
+ }
41
+ };
13
42
  /**
14
43
  * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class
15
44
  *
@@ -22,50 +51,27 @@ const useFluentProviderThemeStyleTag = options => {
22
51
  targetDocument,
23
52
  theme
24
53
  } = options;
54
+ const styleTag = React.useRef();
25
55
  const styleTagId = react_utilities_1.useId(useFluentProviderStyles_1.fluentProviderClassNames.root);
26
- const styleTag = React.useMemo(() => {
27
- if (!targetDocument) {
28
- return null;
29
- }
30
-
31
- const tag = targetDocument.createElement('style');
32
- tag.setAttribute('id', styleTagId);
33
- targetDocument.head.appendChild(tag);
34
- return tag;
35
- }, [styleTagId, targetDocument]);
36
- const cssRule = React.useMemo(() => {
37
- const cssVarsAsString = theme ? Object.keys(theme).reduce((cssVarRule, cssVar) => {
56
+ const cssVarsAsString = React.useMemo(() => {
57
+ return theme ? Object.keys(theme).reduce((cssVarRule, cssVar) => {
38
58
  cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;
39
59
  return cssVarRule;
40
- }, '') : ''; // result: .fluent-provider1 { --css-var: '#fff' }
60
+ }, '') : '';
61
+ }, [theme]);
62
+ const rule = `.${styleTagId} { ${cssVarsAsString} }`;
63
+ useInsertionEffect(() => {
64
+ styleTag.current = createStyleTag(targetDocument, styleTagId);
41
65
 
42
- return `.${styleTagId} { ${cssVarsAsString} }`;
43
- }, [theme, styleTagId]);
44
- const previousCssRule = react_utilities_1.usePrevious(cssRule);
66
+ if (styleTag.current) {
67
+ insertSheet(styleTag.current, rule);
68
+ return () => {
69
+ var _a;
45
70
 
46
- if (styleTag && previousCssRule !== cssRule) {
47
- const sheet = styleTag.sheet;
48
-
49
- if (sheet) {
50
- if (sheet.cssRules.length > 0) {
51
- sheet.deleteRule(0);
52
- }
53
-
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.');
71
+ (_a = styleTag.current) === null || _a === void 0 ? void 0 : _a.remove();
72
+ };
58
73
  }
59
- } // Removes the style tag from the targetDocument on unmount or change
60
-
61
-
62
- React.useEffect(() => {
63
- return () => {
64
- if (styleTag) {
65
- styleTag.remove();
66
- }
67
- };
68
- }, [styleTag]);
74
+ }, [styleTagId, targetDocument, rule]);
69
75
  return styleTagId;
70
76
  };
71
77
 
@@ -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;EAC/G,MAAM;IAAE,cAAF;IAAkB;EAAlB,IAA4B,OAAlC;EAEA,MAAM,UAAU,GAAG,iBAAA,CAAA,KAAA,CAAM,yBAAA,CAAA,wBAAA,CAAyB,IAA/B,CAAnB;EACA,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IAClC,IAAI,CAAC,cAAL,EAAqB;MACnB,OAAO,IAAP;IACD;;IAED,MAAM,GAAG,GAAG,cAAc,CAAC,aAAf,CAA6B,OAA7B,CAAZ;IACA,GAAG,CAAC,YAAJ,CAAiB,IAAjB,EAAuB,UAAvB;IACA,cAAc,CAAC,IAAf,CAAoB,WAApB,CAAgC,GAAhC;IACA,OAAO,GAAP;EACD,CATgB,EASd,CAAC,UAAD,EAAa,cAAb,CATc,CAAjB;EAWA,MAAM,OAAO,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IACjC,MAAM,eAAe,GAAG,KAAK,GACxB,MAAM,CAAC,IAAP,CAAY,KAAZ,EAA8C,MAA9C,CAAqD,CAAC,UAAD,EAAa,MAAb,KAAuB;MAC3E,UAAU,IAAI,KAAK,MAAM,KAAK,KAAK,CAAC,MAAD,CAAQ,IAA3C;MACA,OAAO,UAAP;IACD,CAHA,EAGE,EAHF,CADwB,GAKzB,EALJ,CADiC,CAQjC;;IACA,OAAO,IAAI,UAAU,MAAM,eAAe,IAA1C;EACD,CAVe,EAUb,CAAC,KAAD,EAAQ,UAAR,CAVa,CAAhB;EAWA,MAAM,eAAe,GAAG,iBAAA,CAAA,WAAA,CAAY,OAAZ,CAAxB;;EAEA,IAAI,QAAQ,IAAI,eAAe,KAAK,OAApC,EAA6C;IAC3C,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAvB;;IAEA,IAAI,KAAJ,EAAW;MACT,IAAI,KAAK,CAAC,QAAN,CAAe,MAAf,GAAwB,CAA5B,EAA+B;QAC7B,KAAK,CAAC,UAAN,CAAiB,CAAjB;MACD;;MACD,KAAK,CAAC,UAAN,CAAiB,OAAjB,EAA0B,CAA1B;IACD,CALD,MAKO,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;MAChD;MACA,OAAO,CAAC,KAAR,CAAc,uFAAd;IACD;EACF,CAxC8G,CA0C/G;;;EACA,KAAK,CAAC,SAAN,CAAgB,MAAK;IACnB,OAAO,MAAK;MACV,IAAI,QAAJ,EAAc;QACZ,QAAQ,CAAC,MAAT;MACD;IACF,CAJD;EAKD,CAND,EAMG,CAAC,QAAD,CANH;EAQA,OAAO,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/"}
1
+ {"version":3,"sources":["../../../src/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,C,CAEA;;;AACA,MAAM,kBAAkB,GAAI,KAAe,CAAC,iBAAiB,QAAlB,CAAf,GACvB,KAAe,CAAC,iBAAiB,QAAlB,CADQ,GAExB,iBAAA,CAAA,yBAFJ;;AAIA,MAAM,cAAc,GAAG,CAAC,MAAD,EAA+B,EAA/B,KAA6C;EAClE,IAAI,CAAC,MAAL,EAAa;IACX,OAAO,SAAP;EACD;;EACD,MAAM,GAAG,GAAG,MAAM,CAAC,aAAP,CAAqB,OAArB,CAAZ;EACA,GAAG,CAAC,YAAJ,CAAiB,IAAjB,EAAuB,EAAvB;EACA,MAAM,CAAC,IAAP,CAAY,WAAZ,CAAwB,GAAxB;EACA,OAAO,GAAP;AACD,CARD;;AAUA,MAAM,WAAW,GAAG,CAAC,GAAD,EAAwB,IAAxB,KAAwC;EAC1D,MAAM,KAAK,GAAG,GAAG,CAAC,KAAlB;;EAEA,IAAI,KAAJ,EAAW;IACT,IAAI,KAAK,CAAC,QAAN,CAAe,MAAf,GAAwB,CAA5B,EAA+B;MAC7B,KAAK,CAAC,UAAN,CAAiB,CAAjB;IACD;;IACD,KAAK,CAAC,UAAN,CAAiB,IAAjB,EAAuB,CAAvB;EACD,CALD,MAKO,IAAI,OAAO,CAAC,GAAR,CAAY,QAAZ,KAAyB,YAA7B,EAA2C;IAChD;IACA,OAAO,CAAC,KAAR,CAAc,uFAAd;EACD;AACF,CAZD;AAcA;;;;AAIG;;;AACI,MAAM,8BAA8B,GAAI,OAAD,IAAmE;EAC/G,MAAM;IAAE,cAAF;IAAkB;EAAlB,IAA4B,OAAlC;EACA,MAAM,QAAQ,GAAG,KAAK,CAAC,MAAN,EAAjB;EAEA,MAAM,UAAU,GAAG,iBAAA,CAAA,KAAA,CAAM,yBAAA,CAAA,wBAAA,CAAyB,IAA/B,CAAnB;EAEA,MAAM,eAAe,GAAG,KAAK,CAAC,OAAN,CAAc,MAAK;IACzC,OAAO,KAAK,GACP,MAAM,CAAC,IAAP,CAAY,KAAZ,EAA8C,MAA9C,CAAqD,CAAC,UAAD,EAAa,MAAb,KAAuB;MAC3E,UAAU,IAAI,KAAK,MAAM,KAAK,KAAK,CAAC,MAAD,CAAQ,IAA3C;MACA,OAAO,UAAP;IACD,CAHA,EAGE,EAHF,CADO,GAKR,EALJ;EAMD,CAPuB,EAOrB,CAAC,KAAD,CAPqB,CAAxB;EASA,MAAM,IAAI,GAAG,IAAI,UAAU,MAAM,eAAe,IAAhD;EAEA,kBAAkB,CAAC,MAAK;IACtB,QAAQ,CAAC,OAAT,GAAmB,cAAc,CAAC,cAAD,EAAiB,UAAjB,CAAjC;;IAEA,IAAI,QAAQ,CAAC,OAAb,EAAsB;MACpB,WAAW,CAAC,QAAQ,CAAC,OAAV,EAAmB,IAAnB,CAAX;MAEA,OAAO,MAAK;;;QACV,CAAA,EAAA,GAAA,QAAQ,CAAC,OAAT,MAAgB,IAAhB,IAAgB,EAAA,KAAA,KAAA,CAAhB,GAAgB,KAAA,CAAhB,GAAgB,EAAA,CAAE,MAAF,EAAhB;MACD,CAFD;IAGD;EACF,CAViB,EAUf,CAAC,UAAD,EAAa,cAAb,EAA6B,IAA7B,CAVe,CAAlB;EAYA,OAAO,UAAP;AACD,CA9BM;;AAAM,OAAA,CAAA,8BAAA,GAA8B,8BAA9B","sourcesContent":["import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport * as React from 'react';\nimport type { FluentProviderState } from './FluentProvider.types';\nimport { fluentProviderClassNames } from './useFluentProviderStyles';\n\n// String concatenation is used to prevent bundlers to complain with older versions of React\nconst useInsertionEffect = (React as never)['useInsertion' + 'Effect']\n ? (React as never)['useInsertion' + 'Effect']\n : useIsomorphicLayoutEffect;\n\nconst createStyleTag = (target: Document | undefined, id: string) => {\n if (!target) {\n return undefined;\n }\n const tag = target.createElement('style');\n tag.setAttribute('id', id);\n target.head.appendChild(tag);\n return tag;\n};\n\nconst insertSheet = (tag: HTMLStyleElement, rule: string) => {\n const sheet = tag.sheet;\n\n if (sheet) {\n if (sheet.cssRules.length > 0) {\n sheet.deleteRule(0);\n }\n sheet.insertRule(rule, 0);\n } else if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line no-console\n console.error('FluentProvider: No sheet available on styleTag, styles will not be inserted into DOM.');\n }\n};\n\n/**\n * Writes a theme as css variables in a style tag on the provided targetDocument as a rule applied to a CSS class\n *\n * @returns CSS class to apply the rule\n */\nexport const useFluentProviderThemeStyleTag = (options: Pick<FluentProviderState, 'theme' | 'targetDocument'>) => {\n const { targetDocument, theme } = options;\n const styleTag = React.useRef<HTMLStyleElement>();\n\n const styleTagId = useId(fluentProviderClassNames.root);\n\n const cssVarsAsString = React.useMemo(() => {\n return theme\n ? (Object.keys(theme) as (keyof typeof theme)[]).reduce((cssVarRule, cssVar) => {\n cssVarRule += `--${cssVar}: ${theme[cssVar]}; `;\n return cssVarRule;\n }, '')\n : '';\n }, [theme]);\n\n const rule = `.${styleTagId} { ${cssVarsAsString} }`;\n\n useInsertionEffect(() => {\n styleTag.current = createStyleTag(targetDocument, styleTagId);\n\n if (styleTag.current) {\n insertSheet(styleTag.current, rule);\n\n return () => {\n styleTag.current?.remove();\n };\n }\n }, [styleTagId, targetDocument, rule]);\n\n return styleTagId;\n};\n"],"sourceRoot":""}
@@ -1 +1 @@
1
- {"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,wBAAA;EAAwB;AAAxB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,cAAA;EAAc;AAAd,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,6BAAA;EAA6B;AAA7B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yCAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,uCAAA;EAAuC;AAAvC,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,0BAAA;EAA0B;AAA1B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kCAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,gCAAA;EAAgC;AAAhC,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gCAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,8BAAA;EAA8B;AAA9B,CAAA","sourcesContent":["export {\n fluentProviderClassNames,\n FluentProvider,\n renderFluentProvider_unstable,\n useFluentProviderContextValues_unstable,\n useFluentProvider_unstable,\n useFluentProviderStyles_unstable,\n useFluentProviderThemeStyleTag,\n} from './FluentProvider';\nexport type {\n FluentProviderContextValues,\n FluentProviderProps,\n FluentProviderState,\n FluentProviderSlots,\n} from './FluentProvider';\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,wBAAA;EAAwB;AAAxB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,cAAA;EAAc;AAAd,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,+BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,6BAAA;EAA6B;AAA7B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yCAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,uCAAA;EAAuC;AAAvC,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,4BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,0BAAA;EAA0B;AAA1B,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kCAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,gCAAA;EAAgC;AAAhC,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,gCAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,gBAAA,CAAA,8BAAA;EAA8B;AAA9B,CAAA","sourcesContent":["export {\n fluentProviderClassNames,\n FluentProvider,\n renderFluentProvider_unstable,\n useFluentProviderContextValues_unstable,\n useFluentProvider_unstable,\n useFluentProviderStyles_unstable,\n useFluentProviderThemeStyleTag,\n} from './FluentProvider';\nexport type {\n FluentProviderContextValues,\n FluentProviderProps,\n FluentProviderState,\n FluentProviderSlots,\n} from './FluentProvider';\n"],"sourceRoot":""}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-provider",
3
- "version": "0.0.0-nightly-20220715-0418.1",
3
+ "version": "0.0.0-nightly-20221007-1237.1",
4
4
  "description": "Fluent UI React provider component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -20,24 +20,24 @@
20
20
  "just": "just-scripts",
21
21
  "lint": "just-scripts lint",
22
22
  "docs": "api-extractor run --config=config/api-extractor.local.json --local",
23
- "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-provider/src && yarn docs",
24
- "storybook": "node ../../../scripts/storybook/runner",
23
+ "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-provider/src && yarn docs",
24
+ "storybook": "start-storybook",
25
25
  "start": "yarn storybook",
26
26
  "type-check": "tsc -b tsconfig.json"
27
27
  },
28
28
  "devDependencies": {
29
29
  "@fluentui/eslint-plugin": "*",
30
30
  "@fluentui/react-conformance": "*",
31
- "@fluentui/react-conformance-griffel": "0.0.0-nightly-20220715-0418.1",
31
+ "@fluentui/react-conformance-griffel": "0.0.0-nightly-20221007-1237.1",
32
32
  "@fluentui/scripts": "^1.0.0"
33
33
  },
34
34
  "dependencies": {
35
- "@griffel/core": "^1.4.1",
36
- "@griffel/react": "^1.2.0",
37
- "@fluentui/react-shared-contexts": "^0.0.0-nightly-20220715-0418.1",
38
- "@fluentui/react-tabster": "^0.0.0-nightly-20220715-0418.1",
39
- "@fluentui/react-theme": "^0.0.0-nightly-20220715-0418.1",
40
- "@fluentui/react-utilities": "^0.0.0-nightly-20220715-0418.1",
35
+ "@griffel/core": "^1.5.1",
36
+ "@griffel/react": "^1.3.0",
37
+ "@fluentui/react-shared-contexts": "^0.0.0-nightly-20221007-1237.1",
38
+ "@fluentui/react-tabster": "^0.0.0-nightly-20221007-1237.1",
39
+ "@fluentui/react-theme": "^0.0.0-nightly-20221007-1237.1",
40
+ "@fluentui/react-utilities": "^0.0.0-nightly-20221007-1237.1",
41
41
  "tslib": "^2.1.0"
42
42
  },
43
43
  "peerDependencies": {
@@ -46,11 +46,7 @@
46
46
  "react": ">=16.8.0 <18.0.0",
47
47
  "react-dom": ">=16.8.0 <18.0.0"
48
48
  },
49
- "beachball": {
50
- "disallowedChangeTypes": [
51
- "major"
52
- ]
53
- },
49
+ "beachball": {},
54
50
  "exports": {
55
51
  ".": {
56
52
  "types": "./lib/index.d.ts",
@@ -1,11 +0,0 @@
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
- }