@fluentui/react-radio 9.0.0-beta.5 → 9.0.0-rc.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (65) hide show
  1. package/CHANGELOG.json +192 -1
  2. package/CHANGELOG.md +61 -11
  3. package/README.md +4 -0
  4. package/dist/index.d.ts +11 -17
  5. package/{lib → dist}/tsdoc-metadata.json +0 -0
  6. package/lib/components/Radio/useRadio.js +1 -1
  7. package/lib/components/Radio/useRadio.js.map +1 -1
  8. package/lib/components/Radio/useRadioStyles.js +15 -23
  9. package/lib/components/Radio/useRadioStyles.js.map +1 -1
  10. package/lib/components/RadioGroup/RadioGroup.types.js.map +1 -1
  11. package/lib/components/RadioGroup/useRadioGroupStyles.js +0 -5
  12. package/lib/components/RadioGroup/useRadioGroupStyles.js.map +1 -1
  13. package/lib/contexts/RadioGroupContext.js +3 -1
  14. package/lib/contexts/RadioGroupContext.js.map +1 -1
  15. package/lib/contexts/index.js +3 -0
  16. package/lib/contexts/index.js.map +1 -0
  17. package/lib/index.js +3 -7
  18. package/lib/index.js.map +1 -1
  19. package/lib-commonjs/components/Radio/useRadio.js +1 -1
  20. package/lib-commonjs/components/Radio/useRadio.js.map +1 -1
  21. package/lib-commonjs/components/Radio/useRadioStyles.js +16 -24
  22. package/lib-commonjs/components/Radio/useRadioStyles.js.map +1 -1
  23. package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.js +1 -6
  24. package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.js.map +1 -1
  25. package/lib-commonjs/contexts/RadioGroupContext.js +6 -1
  26. package/lib-commonjs/contexts/RadioGroupContext.js.map +1 -1
  27. package/lib-commonjs/contexts/index.js +12 -0
  28. package/lib-commonjs/contexts/index.js.map +1 -0
  29. package/lib-commonjs/index.js +16 -20
  30. package/lib-commonjs/index.js.map +1 -1
  31. package/package.json +11 -11
  32. package/lib/Radio.d.ts +0 -1
  33. package/lib/RadioGroup.d.ts +0 -1
  34. package/lib/components/Radio/Radio.d.ts +0 -6
  35. package/lib/components/Radio/Radio.types.d.ts +0 -69
  36. package/lib/components/Radio/index.d.ts +0 -5
  37. package/lib/components/Radio/renderRadio.d.ts +0 -5
  38. package/lib/components/Radio/useRadio.d.ts +0 -12
  39. package/lib/components/Radio/useRadioStyles.d.ts +0 -11
  40. package/lib/components/RadioGroup/RadioGroup.d.ts +0 -6
  41. package/lib/components/RadioGroup/RadioGroup.types.d.ts +0 -63
  42. package/lib/components/RadioGroup/index.d.ts +0 -5
  43. package/lib/components/RadioGroup/renderRadioGroup.d.ts +0 -5
  44. package/lib/components/RadioGroup/useRadioGroup.d.ts +0 -12
  45. package/lib/components/RadioGroup/useRadioGroupStyles.d.ts +0 -11
  46. package/lib/contexts/RadioGroupContext.d.ts +0 -6
  47. package/lib/contexts/useRadioGroupContextValues.d.ts +0 -2
  48. package/lib/index.d.ts +0 -5
  49. package/lib-commonjs/Radio.d.ts +0 -1
  50. package/lib-commonjs/RadioGroup.d.ts +0 -1
  51. package/lib-commonjs/components/Radio/Radio.d.ts +0 -6
  52. package/lib-commonjs/components/Radio/Radio.types.d.ts +0 -69
  53. package/lib-commonjs/components/Radio/index.d.ts +0 -5
  54. package/lib-commonjs/components/Radio/renderRadio.d.ts +0 -5
  55. package/lib-commonjs/components/Radio/useRadio.d.ts +0 -12
  56. package/lib-commonjs/components/Radio/useRadioStyles.d.ts +0 -11
  57. package/lib-commonjs/components/RadioGroup/RadioGroup.d.ts +0 -6
  58. package/lib-commonjs/components/RadioGroup/RadioGroup.types.d.ts +0 -63
  59. package/lib-commonjs/components/RadioGroup/index.d.ts +0 -5
  60. package/lib-commonjs/components/RadioGroup/renderRadioGroup.d.ts +0 -5
  61. package/lib-commonjs/components/RadioGroup/useRadioGroup.d.ts +0 -12
  62. package/lib-commonjs/components/RadioGroup/useRadioGroupStyles.d.ts +0 -11
  63. package/lib-commonjs/contexts/RadioGroupContext.d.ts +0 -6
  64. package/lib-commonjs/contexts/useRadioGroupContextValues.d.ts +0 -2
  65. package/lib-commonjs/index.d.ts +0 -5
package/CHANGELOG.json CHANGED
@@ -2,7 +2,198 @@
2
2
  "name": "@fluentui/react-radio",
3
3
  "entries": [
4
4
  {
5
- "date": "Wed, 04 May 2022 13:24:16 GMT",
5
+ "date": "Mon, 23 May 2022 18:54:53 GMT",
6
+ "tag": "@fluentui/react-radio_v9.0.0-rc.4",
7
+ "version": "9.0.0-rc.4",
8
+ "comments": {
9
+ "prerelease": [
10
+ {
11
+ "author": "esteban.230@hotmail.com",
12
+ "package": "@fluentui/react-radio",
13
+ "commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
14
+ "comment": "Removing <componentName>ClassName exports."
15
+ },
16
+ {
17
+ "author": "lingfangao@hotmail.com",
18
+ "package": "@fluentui/react-radio",
19
+ "commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
20
+ "comment": "BREAKING: stop exporting RadioGroupContext"
21
+ },
22
+ {
23
+ "author": "seanmonahan@microsoft.com",
24
+ "package": "@fluentui/react-radio",
25
+ "commit": "5ed22515a7542b432ed694f22606ac3718d501cb",
26
+ "comment": "BREAKING: update string unions to use spinal-case"
27
+ },
28
+ {
29
+ "author": "beachball",
30
+ "package": "@fluentui/react-radio",
31
+ "comment": "Bump @fluentui/react-label to v9.0.0-rc.3",
32
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
33
+ },
34
+ {
35
+ "author": "beachball",
36
+ "package": "@fluentui/react-radio",
37
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.11",
38
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
39
+ },
40
+ {
41
+ "author": "beachball",
42
+ "package": "@fluentui/react-radio",
43
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.9",
44
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
45
+ },
46
+ {
47
+ "author": "beachball",
48
+ "package": "@fluentui/react-radio",
49
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7",
50
+ "commit": "d4f80b17690e962d6a24e68959608d1ffe84aef6"
51
+ }
52
+ ]
53
+ }
54
+ },
55
+ {
56
+ "date": "Mon, 23 May 2022 12:13:36 GMT",
57
+ "tag": "@fluentui/react-radio_v9.0.0-rc.3",
58
+ "version": "9.0.0-rc.3",
59
+ "comments": {
60
+ "prerelease": [
61
+ {
62
+ "author": "martinhochel@microsoft.com",
63
+ "package": "@fluentui/react-radio",
64
+ "commit": "eb1084fd607c0d1086f9d465168be5822daa5e40",
65
+ "comment": "feat: ship rolluped only dts"
66
+ },
67
+ {
68
+ "author": "olfedias@microsoft.com",
69
+ "package": "@fluentui/react-radio",
70
+ "commit": "60804cec07a495b8a5d1fc66338bf0443b212144",
71
+ "comment": "chore: Update Griffel to latest version"
72
+ },
73
+ {
74
+ "author": "behowell@microsoft.com",
75
+ "package": "@fluentui/react-radio",
76
+ "commit": "c0b27cce0d29122e4488ff431689b966076a728b",
77
+ "comment": "Replace hardcoded padding with spacing tokens"
78
+ },
79
+ {
80
+ "author": "olfedias@microsoft.com",
81
+ "package": "@fluentui/react-radio",
82
+ "commit": "f120fe9160ad7311a87af0cfacd8d2fb26275e34",
83
+ "comment": "chore: Update Griffel to latest version"
84
+ },
85
+ {
86
+ "author": "behowell@microsoft.com",
87
+ "package": "@fluentui/react-radio",
88
+ "commit": "2ea15d322e01dc6055378f4f0f5f3febf7910f80",
89
+ "comment": "Refactor styles to remove usage of flex gap"
90
+ },
91
+ {
92
+ "author": "esteban.230@hotmail.com",
93
+ "package": "@fluentui/react-radio",
94
+ "commit": "0fac2d7a6f35c5fcebaf30da68b9604410fe0eb9",
95
+ "comment": "Updated react-label package version to RC."
96
+ },
97
+ {
98
+ "author": "beachball",
99
+ "package": "@fluentui/react-radio",
100
+ "comment": "Bump @fluentui/react-context-selector to v9.0.0-rc.9",
101
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
102
+ },
103
+ {
104
+ "author": "beachball",
105
+ "package": "@fluentui/react-radio",
106
+ "comment": "Bump @fluentui/react-label to v9.0.0-rc.2",
107
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
108
+ },
109
+ {
110
+ "author": "beachball",
111
+ "package": "@fluentui/react-radio",
112
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.10",
113
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
114
+ },
115
+ {
116
+ "author": "beachball",
117
+ "package": "@fluentui/react-radio",
118
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.8",
119
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
120
+ },
121
+ {
122
+ "author": "beachball",
123
+ "package": "@fluentui/react-radio",
124
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.9",
125
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
126
+ },
127
+ {
128
+ "author": "beachball",
129
+ "package": "@fluentui/react-radio",
130
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6",
131
+ "commit": "8d58f08997acf595e3eb7f628123e7fa7830c394"
132
+ }
133
+ ]
134
+ }
135
+ },
136
+ {
137
+ "date": "Thu, 05 May 2022 18:26:25 GMT",
138
+ "tag": "@fluentui/react-radio_v9.0.0-rc.2",
139
+ "version": "9.0.0-rc.2",
140
+ "comments": {
141
+ "none": [
142
+ {
143
+ "author": "tristan.watanabe@gmail.com",
144
+ "package": "@fluentui/react-radio",
145
+ "commit": "ad3dfcc6d85a8dba3c183612fe552280cd33c20e",
146
+ "comment": "react-radio: Move to new common folder."
147
+ }
148
+ ],
149
+ "prerelease": [
150
+ {
151
+ "author": "seanmonahan@microsoft.com",
152
+ "package": "@fluentui/react-radio",
153
+ "commit": "f628da463f8a12f39e32785e086ef7a2687275f6",
154
+ "comment": "update README"
155
+ },
156
+ {
157
+ "author": "beachball",
158
+ "package": "@fluentui/react-radio",
159
+ "comment": "Bump @fluentui/react-context-selector to v9.0.0-rc.8",
160
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
161
+ },
162
+ {
163
+ "author": "beachball",
164
+ "package": "@fluentui/react-radio",
165
+ "comment": "Bump @fluentui/react-label to v9.0.0-beta.12",
166
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
167
+ },
168
+ {
169
+ "author": "beachball",
170
+ "package": "@fluentui/react-radio",
171
+ "comment": "Bump @fluentui/react-tabster to v9.0.0-rc.9",
172
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
173
+ },
174
+ {
175
+ "author": "beachball",
176
+ "package": "@fluentui/react-radio",
177
+ "comment": "Bump @fluentui/react-theme to v9.0.0-rc.7",
178
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
179
+ },
180
+ {
181
+ "author": "beachball",
182
+ "package": "@fluentui/react-radio",
183
+ "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.8",
184
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
185
+ },
186
+ {
187
+ "author": "beachball",
188
+ "package": "@fluentui/react-radio",
189
+ "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5",
190
+ "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
191
+ }
192
+ ]
193
+ }
194
+ },
195
+ {
196
+ "date": "Wed, 04 May 2022 13:26:48 GMT",
6
197
  "tag": "@fluentui/react-radio_v9.0.0-beta.5",
7
198
  "version": "9.0.0-beta.5",
8
199
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,62 @@
1
1
  # Change Log - @fluentui/react-radio
2
2
 
3
- This log was last generated on Wed, 04 May 2022 13:24:16 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 23 May 2022 18:54:53 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.0-rc.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-rc.4)
8
+
9
+ Mon, 23 May 2022 18:54:53 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-rc.3..@fluentui/react-radio_v9.0.0-rc.4)
11
+
12
+ ### Changes
13
+
14
+ - Removing <componentName>ClassName exports. ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by esteban.230@hotmail.com)
15
+ - BREAKING: stop exporting RadioGroupContext ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by lingfangao@hotmail.com)
16
+ - BREAKING: update string unions to use spinal-case ([PR #23092](https://github.com/microsoft/fluentui/pull/23092) by seanmonahan@microsoft.com)
17
+ - Bump @fluentui/react-label to v9.0.0-rc.3 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
18
+ - Bump @fluentui/react-tabster to v9.0.0-rc.11 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
19
+ - Bump @fluentui/react-theme to v9.0.0-rc.9 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
20
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.7 ([PR #23146](https://github.com/microsoft/fluentui/pull/23146) by beachball)
21
+
22
+ ## [9.0.0-rc.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-rc.3)
23
+
24
+ Mon, 23 May 2022 12:13:36 GMT
25
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-rc.2..@fluentui/react-radio_v9.0.0-rc.3)
26
+
27
+ ### Changes
28
+
29
+ - feat: ship rolluped only dts ([PR #22874](https://github.com/microsoft/fluentui/pull/22874) by martinhochel@microsoft.com)
30
+ - chore: Update Griffel to latest version ([PR #23029](https://github.com/microsoft/fluentui/pull/23029) by olfedias@microsoft.com)
31
+ - Replace hardcoded padding with spacing tokens ([PR #22982](https://github.com/microsoft/fluentui/pull/22982) by behowell@microsoft.com)
32
+ - chore: Update Griffel to latest version ([PR #22894](https://github.com/microsoft/fluentui/pull/22894) by olfedias@microsoft.com)
33
+ - Refactor styles to remove usage of flex gap ([PR #22975](https://github.com/microsoft/fluentui/pull/22975) by behowell@microsoft.com)
34
+ - Updated react-label package version to RC. ([PR #22865](https://github.com/microsoft/fluentui/pull/22865) by esteban.230@hotmail.com)
35
+ - Bump @fluentui/react-context-selector to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
36
+ - Bump @fluentui/react-label to v9.0.0-rc.2 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
37
+ - Bump @fluentui/react-tabster to v9.0.0-rc.10 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
38
+ - Bump @fluentui/react-theme to v9.0.0-rc.8 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
39
+ - Bump @fluentui/react-utilities to v9.0.0-rc.9 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
40
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.6 ([PR #23030](https://github.com/microsoft/fluentui/pull/23030) by beachball)
41
+
42
+ ## [9.0.0-rc.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-rc.2)
43
+
44
+ Thu, 05 May 2022 18:26:25 GMT
45
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-beta.5..@fluentui/react-radio_v9.0.0-rc.2)
46
+
47
+ ### Changes
48
+
49
+ - update README ([PR #22819](https://github.com/microsoft/fluentui/pull/22819) by seanmonahan@microsoft.com)
50
+ - Bump @fluentui/react-context-selector to v9.0.0-rc.8 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
51
+ - Bump @fluentui/react-label to v9.0.0-beta.12 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
52
+ - Bump @fluentui/react-tabster to v9.0.0-rc.9 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
53
+ - Bump @fluentui/react-theme to v9.0.0-rc.7 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
54
+ - Bump @fluentui/react-utilities to v9.0.0-rc.8 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
55
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.5 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
56
+
7
57
  ## [9.0.0-beta.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-beta.5)
8
58
 
9
- Wed, 04 May 2022 13:24:16 GMT
59
+ Wed, 04 May 2022 13:26:48 GMT
10
60
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-beta.4..@fluentui/react-radio_v9.0.0-beta.5)
11
61
 
12
62
  ### Changes
@@ -25,7 +75,7 @@ Wed, 04 May 2022 13:24:16 GMT
25
75
 
26
76
  ## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-beta.4)
27
77
 
28
- Mon, 25 Apr 2022 09:32:19 GMT
78
+ Mon, 25 Apr 2022 09:32:19 GMT
29
79
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-beta.3..@fluentui/react-radio_v9.0.0-beta.4)
30
80
 
31
81
  ### Changes
@@ -34,7 +84,7 @@ Mon, 25 Apr 2022 09:32:19 GMT
34
84
 
35
85
  ## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-beta.3)
36
86
 
37
- Tue, 19 Apr 2022 19:16:50 GMT
87
+ Tue, 19 Apr 2022 19:16:50 GMT
38
88
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-beta.2..@fluentui/react-radio_v9.0.0-beta.3)
39
89
 
40
90
  ### Changes
@@ -53,7 +103,7 @@ Tue, 19 Apr 2022 19:16:50 GMT
53
103
 
54
104
  ## [9.0.0-beta.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-beta.2)
55
105
 
56
- Fri, 04 Mar 2022 05:17:40 GMT
106
+ Fri, 04 Mar 2022 05:17:40 GMT
57
107
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-beta.1..@fluentui/react-radio_v9.0.0-beta.2)
58
108
 
59
109
  ### Changes
@@ -67,7 +117,7 @@ Fri, 04 Mar 2022 05:17:40 GMT
67
117
 
68
118
  ## [9.0.0-beta.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-beta.1)
69
119
 
70
- Tue, 01 Mar 2022 02:17:40 GMT
120
+ Tue, 01 Mar 2022 02:17:40 GMT
71
121
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-beta.1..@fluentui/react-radio_v9.0.0-beta.1)
72
122
 
73
123
  ### Changes
@@ -78,7 +128,7 @@ Tue, 01 Mar 2022 02:17:40 GMT
78
128
 
79
129
  ## [9.0.0-beta.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-beta.1)
80
130
 
81
- Fri, 18 Feb 2022 13:35:38 GMT
131
+ Fri, 18 Feb 2022 13:35:38 GMT
82
132
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-beta.0..@fluentui/react-radio_v9.0.0-beta.1)
83
133
 
84
134
  ### Changes
@@ -90,7 +140,7 @@ Fri, 18 Feb 2022 13:35:38 GMT
90
140
 
91
141
  ## [9.0.0-beta.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-beta.0)
92
142
 
93
- Thu, 10 Feb 2022 08:52:26 GMT
143
+ Thu, 10 Feb 2022 08:52:26 GMT
94
144
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-beta.0..@fluentui/react-radio_v9.0.0-beta.0)
95
145
 
96
146
  ### Changes
@@ -102,7 +152,7 @@ Thu, 10 Feb 2022 08:52:26 GMT
102
152
 
103
153
  ## [9.0.0-beta.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-beta.0)
104
154
 
105
- Thu, 25 Nov 2021 08:34:17 GMT
155
+ Thu, 25 Nov 2021 08:34:17 GMT
106
156
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-beta.0..@fluentui/react-radio_v9.0.0-beta.0)
107
157
 
108
158
  ### Changes
@@ -115,7 +165,7 @@ Thu, 25 Nov 2021 08:34:17 GMT
115
165
 
116
166
  ## [9.0.0-beta.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-beta.0)
117
167
 
118
- Fri, 12 Nov 2021 13:25:34 GMT
168
+ Fri, 12 Nov 2021 13:25:34 GMT
119
169
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-beta.0..@fluentui/react-radio_v9.0.0-beta.0)
120
170
 
121
171
  ### Changes
@@ -128,7 +178,7 @@ Fri, 12 Nov 2021 13:25:34 GMT
128
178
 
129
179
  ## [9.0.0-beta.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.0-beta.0)
130
180
 
131
- Wed, 27 Oct 2021 12:14:24 GMT
181
+ Wed, 27 Oct 2021 12:14:24 GMT
132
182
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.0-beta.0..@fluentui/react-radio_v9.0.0-beta.0)
133
183
 
134
184
  ### Changes
package/README.md CHANGED
@@ -11,6 +11,10 @@ A Radio allows a user to select a single value from two or more options. All Rad
11
11
  Import `Radio` and `RadioGroup`:
12
12
 
13
13
  ```js
14
+ // From @fluentui/react-components
15
+ import { Radio, RadioGroup } from '@fluentui/react-components';
16
+
17
+ // Directly from @fluentui/react-radio
14
18
  import { Radio, RadioGroup } from '@fluentui/react-radio';
15
19
  ```
16
20
 
package/dist/index.d.ts CHANGED
@@ -1,8 +1,11 @@
1
1
  import type { ComponentProps } from '@fluentui/react-utilities';
2
2
  import type { ComponentState } from '@fluentui/react-utilities';
3
- import type { Context } from '@fluentui/react-context-selector';
3
+ import { ContextSelector } from '@fluentui/react-context-selector';
4
+ import { FC } from 'react';
4
5
  import type { ForwardRefComponent } from '@fluentui/react-utilities';
5
6
  import { Label } from '@fluentui/react-label';
7
+ import { Provider } from 'react';
8
+ import { ProviderProps } from 'react';
6
9
  import * as React_2 from 'react';
7
10
  import type { Slot } from '@fluentui/react-utilities';
8
11
  import type { SlotClassNames } from '@fluentui/react-utilities';
@@ -12,11 +15,6 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
12
15
  */
13
16
  export declare const Radio: ForwardRefComponent<RadioProps>;
14
17
 
15
- /**
16
- * @deprecated Use `radioClassNames.root` instead.
17
- */
18
- export declare const radioClassName = "fui-Radio";
19
-
20
18
  export declare const radioClassNames: SlotClassNames<RadioSlots>;
21
19
 
22
20
  /**
@@ -24,18 +22,8 @@ export declare const radioClassNames: SlotClassNames<RadioSlots>;
24
22
  */
25
23
  export declare const RadioGroup: ForwardRefComponent<RadioGroupProps>;
26
24
 
27
- /**
28
- * @deprecated Use `radioGroupClassNames.root` instead.
29
- */
30
- export declare const radioGroupClassName = "fui-RadioGroup";
31
-
32
25
  export declare const radioGroupClassNames: SlotClassNames<RadioGroupSlots>;
33
26
 
34
- /**
35
- * RadioGroupContext is provided by RadioGroup, and is consumed by Radio to determine default values of some props.
36
- */
37
- export declare const RadioGroupContext: Context<RadioGroupContextValue>;
38
-
39
27
  export declare type RadioGroupContextValue = Pick<RadioGroupProps, 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required'>;
40
28
 
41
29
  export declare type RadioGroupContextValues = {
@@ -80,7 +68,7 @@ export declare type RadioGroupProps = Omit<ComponentProps<Partial<RadioGroupSlot
80
68
  *
81
69
  * @default vertical
82
70
  */
83
- layout?: 'vertical' | 'horizontal' | 'horizontalStacked';
71
+ layout?: 'vertical' | 'horizontal' | 'horizontal-stacked';
84
72
  /**
85
73
  * Disable all Radio items in this group.
86
74
  */
@@ -91,6 +79,8 @@ export declare type RadioGroupProps = Omit<ComponentProps<Partial<RadioGroupSlot
91
79
  required?: boolean;
92
80
  };
93
81
 
82
+ export declare const RadioGroupProvider: Provider<RadioGroupContextValue> & FC<ProviderProps<RadioGroupContextValue>>;
83
+
94
84
  export declare type RadioGroupSlots = {
95
85
  /**
96
86
  * The radio group root.
@@ -205,6 +195,10 @@ export declare const useRadio_unstable: (props: RadioProps, ref: React_2.Ref<HTM
205
195
  */
206
196
  export declare const useRadioGroup_unstable: (props: RadioGroupProps, ref: React_2.Ref<HTMLDivElement>) => RadioGroupState;
207
197
 
198
+ export declare const useRadioGroupContext_unstable: <T>(selector: ContextSelector<RadioGroupContextValue, T>) => T;
199
+
200
+ export declare const useRadioGroupContextValues: (state: RadioGroupState) => RadioGroupContextValues;
201
+
208
202
  /**
209
203
  * Apply styling to the RadioGroup slots based on the state
210
204
  */
File without changes
@@ -25,7 +25,7 @@ export const useRadio_unstable = (props, ref) => {
25
25
  name = nameGroup,
26
26
  checked = value !== undefined ? value === props.value : undefined,
27
27
  defaultChecked = defaultValue !== undefined ? defaultValue === props.value : undefined,
28
- labelPosition = layout === 'horizontalStacked' ? 'below' : 'after',
28
+ labelPosition = layout === 'horizontal-stacked' ? 'below' : 'after',
29
29
  disabled = disabledGroup,
30
30
  required = requiredGroup,
31
31
  onChange
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Radio/useRadio.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, resolveShorthand, useId, useMergedEventCallbacks } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport type { RadioProps, RadioState } from './Radio.types';\n\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */\nexport const useRadio_unstable = (props: RadioProps, ref: React.Ref<HTMLInputElement>): RadioState => {\n const nameGroup = useContextSelector(RadioGroupContext, ctx => ctx.name);\n const value = useContextSelector(RadioGroupContext, ctx => ctx.value);\n const defaultValue = useContextSelector(RadioGroupContext, ctx => ctx.defaultValue);\n const disabledGroup = useContextSelector(RadioGroupContext, ctx => ctx.disabled);\n const layout = useContextSelector(RadioGroupContext, ctx => ctx.layout);\n const requiredGroup = useContextSelector(RadioGroupContext, ctx => ctx.required);\n\n const {\n name = nameGroup,\n checked = value !== undefined ? value === props.value : undefined,\n defaultChecked = defaultValue !== undefined ? defaultValue === props.value : undefined,\n labelPosition = layout === 'horizontalStacked' ? 'below' : 'after',\n disabled = disabledGroup,\n required = requiredGroup,\n onChange,\n } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const root = resolveShorthand(props.root, {\n required: true,\n defaultProps: nativeProps.root,\n });\n\n const input = resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n ref,\n type: 'radio',\n id: useId('radio-', nativeProps.primary.id),\n name,\n checked,\n defaultChecked,\n disabled,\n required,\n ...nativeProps.primary,\n },\n });\n\n input.onChange = useMergedEventCallbacks(input.onChange, ev => onChange?.(ev, { value: ev.currentTarget.value }));\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n htmlFor: input.id,\n disabled,\n },\n });\n\n const indicator = resolveShorthand(props.indicator, {\n required: true,\n defaultProps: {\n 'aria-hidden': true,\n children: <CircleFilled />,\n },\n });\n\n return {\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n label: Label,\n indicator: 'div',\n },\n root,\n input,\n label,\n indicator,\n };\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Radio/useRadio.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CircleFilled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getPartitionedNativeProps, resolveShorthand, useId, useMergedEventCallbacks } from '@fluentui/react-utilities';\nimport { RadioGroupContext } from '../../contexts/RadioGroupContext';\nimport { useContextSelector } from '@fluentui/react-context-selector';\nimport type { RadioProps, RadioState } from './Radio.types';\n\n/**\n * Create the state required to render Radio.\n *\n * The returned state can be modified with hooks such as useRadioStyles_unstable,\n * before being passed to renderRadio_unstable.\n *\n * @param props - props from this instance of Radio\n * @param ref - reference to `<input>` element of Radio\n */\nexport const useRadio_unstable = (props: RadioProps, ref: React.Ref<HTMLInputElement>): RadioState => {\n const nameGroup = useContextSelector(RadioGroupContext, ctx => ctx.name);\n const value = useContextSelector(RadioGroupContext, ctx => ctx.value);\n const defaultValue = useContextSelector(RadioGroupContext, ctx => ctx.defaultValue);\n const disabledGroup = useContextSelector(RadioGroupContext, ctx => ctx.disabled);\n const layout = useContextSelector(RadioGroupContext, ctx => ctx.layout);\n const requiredGroup = useContextSelector(RadioGroupContext, ctx => ctx.required);\n\n const {\n name = nameGroup,\n checked = value !== undefined ? value === props.value : undefined,\n defaultChecked = defaultValue !== undefined ? defaultValue === props.value : undefined,\n labelPosition = layout === 'horizontal-stacked' ? 'below' : 'after',\n disabled = disabledGroup,\n required = requiredGroup,\n onChange,\n } = props;\n\n const nativeProps = getPartitionedNativeProps({\n props,\n primarySlotTagName: 'input',\n excludedPropNames: ['checked', 'defaultChecked', 'onChange'],\n });\n\n const root = resolveShorthand(props.root, {\n required: true,\n defaultProps: nativeProps.root,\n });\n\n const input = resolveShorthand(props.input, {\n required: true,\n defaultProps: {\n ref,\n type: 'radio',\n id: useId('radio-', nativeProps.primary.id),\n name,\n checked,\n defaultChecked,\n disabled,\n required,\n ...nativeProps.primary,\n },\n });\n\n input.onChange = useMergedEventCallbacks(input.onChange, ev => onChange?.(ev, { value: ev.currentTarget.value }));\n\n const label = resolveShorthand(props.label, {\n defaultProps: {\n htmlFor: input.id,\n disabled,\n },\n });\n\n const indicator = resolveShorthand(props.indicator, {\n required: true,\n defaultProps: {\n 'aria-hidden': true,\n children: <CircleFilled />,\n },\n });\n\n return {\n labelPosition,\n components: {\n root: 'span',\n input: 'input',\n label: Label,\n indicator: 'div',\n },\n root,\n input,\n label,\n indicator,\n };\n};\n"],"sourceRoot":"../src/"}
@@ -1,20 +1,12 @@
1
1
  import { createFocusOutlineStyle } from '@fluentui/react-tabster';
2
2
  import { tokens } from '@fluentui/react-theme';
3
3
  import { __styles, mergeClasses, shorthands } from '@griffel/react';
4
- /**
5
- * @deprecated Use `radioClassNames.root` instead.
6
- */
7
-
8
- export const radioClassName = 'fui-Radio';
9
4
  export const radioClassNames = {
10
5
  root: 'fui-Radio',
11
6
  indicator: 'fui-Radio__indicator',
12
7
  input: 'fui-Radio__input',
13
8
  label: 'fui-Radio__label'
14
- }; // TODO replace these spacing constants with theme values once they're on the theme
15
-
16
- const spacingHorizontalS = '8px';
17
- const spacingHorizontalM = '12px'; // The indicator size is used by the indicator and label styles
9
+ }; // The indicator size is used by the indicator and label styles
18
10
 
19
11
  const indicatorSize = '16px';
20
12
  /**
@@ -25,16 +17,14 @@ const useRootStyles = /*#__PURE__*/__styles({
25
17
  "base": {
26
18
  "mc9l5x": "ftuwxu6",
27
19
  "qhf8xq": "f10pi13n",
28
- "i8kkvl": "f4akndk",
29
- "z8tnut": "fp9bwmr",
30
- "z189sj": ["f19lj068", "f177v4lu"],
31
- "Byoj8tv": "f150uoa4",
32
- "uwmqm3": ["f177v4lu", "f19lj068"]
20
+ "z8tnut": "f1kwiid1",
21
+ "z189sj": ["f1vdfbxk", "f1f5gg8d"],
22
+ "Byoj8tv": "f5b47ha",
23
+ "uwmqm3": ["f1f5gg8d", "f1vdfbxk"]
33
24
  },
34
25
  "vertical": {
35
26
  "Beiy3e4": "f1vx9l62",
36
- "Bt984gj": "f122n59",
37
- "Belr9w4": "fe5j3v"
27
+ "Bt984gj": "f122n59"
38
28
  },
39
29
  "focusIndicator": {
40
30
  "B486eqv": "f2hkw1w",
@@ -68,7 +58,7 @@ const useRootStyles = /*#__PURE__*/__styles({
68
58
  "Bj23z95": ["f8l10fm", "fxfgh6q"]
69
59
  }
70
60
  }, {
71
- "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f4akndk{-webkit-column-gap:12px;column-gap:12px;}", ".fp9bwmr{padding-top:8px;}", ".f19lj068{padding-right:8px;}", ".f177v4lu{padding-left:8px;}", ".f150uoa4{padding-bottom:8px;}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".fe5j3v{row-gap:12px;}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f1kbdjx9:focus-within:after{border-top-style:solid;}", "[data-keyboard-nav] .fw1d893:focus-within:after{border-right-style:solid;}", "[data-keyboard-nav] .fpuz8dn:focus-within:after{border-left-style:solid;}", "[data-keyboard-nav] .f14hlsw1:focus-within:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f1bkt4b4:focus-within:after{border-top-width:2px;}", "[data-keyboard-nav] .f16hf5f2:focus-within:after{border-right-width:2px;}", "[data-keyboard-nav] .f1qhqcal:focus-within:after{border-left-width:2px;}", "[data-keyboard-nav] .fyyqeim:focus-within:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1aneyfs:focus-within:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f15nmyc0:focus-within:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f3cpy5b:focus-within:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f13v6kgv:focus-within:after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .filx0we:focus-within:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1horip2:focus-within:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgnx9ah:focus-within:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fkii2tb:focus-within:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}"],
61
+ "d": [".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f10pi13n{position:relative;}", ".f1kwiid1{padding-top:var(--spacingVerticalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", "[data-keyboard-nav] .fbiesyy:focus-within{border-top-color:transparent;}", "[data-keyboard-nav] .fq2kn9:focus-within{border-right-color:transparent;}", "[data-keyboard-nav] .f1jxwnad:focus-within{border-left-color:transparent;}", "[data-keyboard-nav] .f1il7mou:focus-within{border-bottom-color:transparent;}", "[data-keyboard-nav] .f12sql3b:focus-within:after{content:\"\";}", "[data-keyboard-nav] .f1i4q40k:focus-within:after{position:absolute;}", "[data-keyboard-nav] .fcrbge9:focus-within:after{pointer-events:none;}", "[data-keyboard-nav] .fskqmiq:focus-within:after{z-index:1;}", "[data-keyboard-nav] .f1kbdjx9:focus-within:after{border-top-style:solid;}", "[data-keyboard-nav] .fw1d893:focus-within:after{border-right-style:solid;}", "[data-keyboard-nav] .fpuz8dn:focus-within:after{border-left-style:solid;}", "[data-keyboard-nav] .f14hlsw1:focus-within:after{border-bottom-style:solid;}", "[data-keyboard-nav] .f1bkt4b4:focus-within:after{border-top-width:2px;}", "[data-keyboard-nav] .f16hf5f2:focus-within:after{border-right-width:2px;}", "[data-keyboard-nav] .f1qhqcal:focus-within:after{border-left-width:2px;}", "[data-keyboard-nav] .fyyqeim:focus-within:after{border-bottom-width:2px;}", "[data-keyboard-nav] .f1aneyfs:focus-within:after{border-bottom-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f15nmyc0:focus-within:after{border-bottom-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f3cpy5b:focus-within:after{border-top-right-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .f13v6kgv:focus-within:after{border-top-left-radius:var(--borderRadiusMedium);}", "[data-keyboard-nav] .filx0we:focus-within:after{border-top-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1horip2:focus-within:after{border-right-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fgnx9ah:focus-within:after{border-left-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fkii2tb:focus-within:after{border-bottom-color:var(--colorStrokeFocus2);}", "[data-keyboard-nav] .f1unftzx:focus-within:after{top:-2px;}", "[data-keyboard-nav] .f8rjbh6:focus-within:after{bottom:-2px;}", "[data-keyboard-nav] .fxfgh6q:focus-within:after{left:-2px;}", "[data-keyboard-nav] .f8l10fm:focus-within:after{right:-2px;}"],
72
62
  "i": [".f2hkw1w:focus-visible{outline-style:none;}"]
73
63
  });
74
64
 
@@ -163,17 +153,19 @@ const useIndicatorStyles = /*#__PURE__*/__styles({
163
153
  const useLabelStyles = /*#__PURE__*/__styles({
164
154
  "base": {
165
155
  "qb2dma": "f7nlbp4",
166
- "famaaq": "f1xqy1su",
156
+ "famaaq": "f1xqy1su"
157
+ },
158
+ "after": {
159
+ "Frg6f3": ["f199hnxi", "fkujibs"],
167
160
  "B6of3ja": "fjzwpt6",
168
- "t21cq0": ["f11qmguv", "f1tyq0we"],
169
- "jrapky": "fh6j2fo",
170
- "Frg6f3": ["f1tyq0we", "f11qmguv"]
161
+ "jrapky": "fh6j2fo"
171
162
  },
172
163
  "below": {
164
+ "B6of3ja": "f1mevb6",
173
165
  "fsow6f": "f17mccla"
174
166
  }
175
167
  }, {
176
- "d": [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}", ".f11qmguv{margin-right:0;}", ".f1tyq0we{margin-left:0;}", ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}", ".f17mccla{text-align:center;}"]
168
+ "d": [".f7nlbp4{-webkit-align-self:center;-ms-flex-item-align:center;align-self:center;}", ".f1xqy1su{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".fjzwpt6{margin-top:calc((16px - var(--lineHeightBase300)) / 2);}", ".fh6j2fo{margin-bottom:calc((16px - var(--lineHeightBase300)) / 2);}", ".f1mevb6{margin-top:var(--spacingVerticalM);}", ".f17mccla{text-align:center;}"]
177
169
  });
178
170
  /**
179
171
  * Apply styling to the Radio slots based on the state
@@ -190,7 +182,7 @@ export const useRadioStyles_unstable = state => {
190
182
  const labelStyles = useLabelStyles();
191
183
 
192
184
  if (state.label) {
193
- state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, state.labelPosition === 'below' && labelStyles.below, state.label.className);
185
+ state.label.className = mergeClasses(radioClassNames.label, labelStyles.base, labelStyles[state.labelPosition], state.label.className);
194
186
  }
195
187
  };
196
188
  //# sourceMappingURL=useRadioStyles.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\n/**\n * @deprecated Use `radioClassNames.root` instead.\n */\nexport const radioClassName = 'fui-Radio';\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label',\n};\n\n// TODO replace these spacing constants with theme values once they're on the theme\nconst spacingHorizontalS = '8px';\nconst spacingHorizontalM = '12px';\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n columnGap: spacingHorizontalM,\n ...shorthands.padding(spacingHorizontalS),\n },\n\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\n rowGap: spacingHorizontalM,\n },\n\n focusIndicator: createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputStyles = makeStyles({\n base: {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n ...shorthands.margin(0),\n opacity: 0,\n\n ':enabled': {\n cursor: 'pointer',\n },\n\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n opacity: '0',\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n width: indicatorSize,\n height: indicatorSize,\n fontSize: '12px',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n\n ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n userSelect: 'none',\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n ...shorthands.margin(`calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`, 0),\n },\n\n below: {\n textAlign: 'center',\n },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootStyles.base,\n rootStyles.focusIndicator,\n state.labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(radioClassNames.input, inputStyles.base, state.input.className);\n\n const indicatorStyles = useIndicatorStyles();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n radioClassNames.label,\n labelStyles.base,\n state.labelPosition === 'below' && labelStyles.below,\n state.label.className,\n );\n }\n};\n"],"sourceRoot":"../src/"}
1
+ {"version":3,"sources":["components/Radio/useRadioStyles.ts"],"names":[],"mappings":"AAAA,SAAS,uBAAT,QAAwC,yBAAxC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AAIA,OAAO,MAAM,eAAe,GAA+B;AACzD,EAAA,IAAI,EAAE,WADmD;AAEzD,EAAA,SAAS,EAAE,sBAF8C;AAGzD,EAAA,KAAK,EAAE,kBAHkD;AAIzD,EAAA,KAAK,EAAE;AAJkD,CAApD,C,CAOP;;AACA,MAAM,aAAa,GAAG,MAAtB;AAEA;;AAEG;;AACH,MAAM,aAAa,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAtB;;AAeA,MAAM,cAAc,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;;AAsFA,MAAM,kBAAkB,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAA3B;;AAoBA,MAAM,cAAc,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAvB;AAqBA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAsB;AAC3D,QAAM,UAAU,GAAG,aAAa,EAAhC;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,eAAe,CAAC,IADiB,EAEjC,UAAU,CAAC,IAFsB,EAGjC,UAAU,CAAC,cAHsB,EAIjC,KAAK,CAAC,aAAN,KAAwB,OAAxB,IAAmC,UAAU,CAAC,QAJb,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;AAQA,QAAM,WAAW,GAAG,cAAc,EAAlC;AACA,EAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAAC,eAAe,CAAC,KAAjB,EAAwB,WAAW,CAAC,IAApC,EAA0C,KAAK,CAAC,KAAN,CAAY,SAAtD,CAApC;AAEA,QAAM,eAAe,GAAG,kBAAkB,EAA1C;AACA,EAAA,KAAK,CAAC,SAAN,CAAgB,SAAhB,GAA4B,YAAY,CAAC,eAAe,CAAC,SAAjB,EAA4B,eAAe,CAAC,IAA5C,EAAkD,KAAK,CAAC,SAAN,CAAgB,SAAlE,CAAxC;AAEA,QAAM,WAAW,GAAG,cAAc,EAAlC;;AACA,MAAI,KAAK,CAAC,KAAV,EAAiB;AACf,IAAA,KAAK,CAAC,KAAN,CAAY,SAAZ,GAAwB,YAAY,CAClC,eAAe,CAAC,KADkB,EAElC,WAAW,CAAC,IAFsB,EAGlC,WAAW,CAAC,KAAK,CAAC,aAAP,CAHuB,EAIlC,KAAK,CAAC,KAAN,CAAY,SAJsB,CAApC;AAMD;AACF,CAzBM","sourcesContent":["import { createFocusOutlineStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { RadioSlots, RadioState } from './Radio.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const radioClassNames: SlotClassNames<RadioSlots> = {\n root: 'fui-Radio',\n indicator: 'fui-Radio__indicator',\n input: 'fui-Radio__input',\n label: 'fui-Radio__label',\n};\n\n// The indicator size is used by the indicator and label styles\nconst indicatorSize = '16px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n base: {\n display: 'inline-flex',\n position: 'relative',\n ...shorthands.padding(tokens.spacingVerticalS, tokens.spacingHorizontalS),\n },\n\n vertical: {\n flexDirection: 'column',\n alignItems: 'center',\n },\n\n focusIndicator: createFocusOutlineStyle({ style: {}, selector: 'focus-within' }),\n});\n\nconst useInputStyles = makeStyles({\n base: {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n boxSizing: 'border-box',\n ...shorthands.margin(0),\n opacity: 0,\n\n ':enabled': {\n cursor: 'pointer',\n },\n\n // When unchecked, hide the circle icon (child of the indicator)\n [`:not(:checked) ~ .${radioClassNames.indicator} > *`]: {\n opacity: '0',\n },\n\n // Colors for the unchecked state\n ':enabled:not(:checked)': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground3,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessible),\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground2,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessibleHover),\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeAccessiblePressed),\n },\n },\n },\n\n // Colors for the checked state\n ':enabled:checked': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForeground1,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStroke),\n color: tokens.colorCompoundBrandForeground1,\n },\n\n ':hover': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokeHover),\n color: tokens.colorCompoundBrandForeground1Hover,\n },\n },\n\n ':hover:active': {\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorCompoundBrandStrokePressed),\n color: tokens.colorCompoundBrandForeground1Pressed,\n },\n },\n },\n\n // Colors for the disabled state\n ':disabled': {\n [`& ~ .${radioClassNames.label}`]: {\n color: tokens.colorNeutralForegroundDisabled,\n },\n [`& ~ .${radioClassNames.indicator}`]: {\n ...shorthands.borderColor(tokens.colorNeutralStrokeDisabled),\n color: tokens.colorNeutralForegroundDisabled,\n },\n },\n },\n});\n\nconst useIndicatorStyles = makeStyles({\n base: {\n width: indicatorSize,\n height: indicatorSize,\n fontSize: '12px',\n boxSizing: 'border-box',\n flexShrink: 0,\n\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n ...shorthands.overflow('hidden'),\n\n ...shorthands.border(tokens.strokeWidthThin, 'solid'),\n ...shorthands.borderRadius(tokens.borderRadiusCircular),\n fill: 'currentColor',\n pointerEvents: 'none',\n },\n});\n\nconst useLabelStyles = makeStyles({\n base: {\n alignSelf: 'center',\n userSelect: 'none',\n },\n\n after: {\n marginLeft: tokens.spacingHorizontalM,\n\n // Use a (negative) margin to account for the difference between the indicator's height and the label's line height.\n // This prevents the label from expanding the height of the Radio, but preserves line height if the label wraps.\n marginTop: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n marginBottom: `calc((${indicatorSize} - ${tokens.lineHeightBase300}) / 2)`,\n },\n\n below: {\n marginTop: tokens.spacingVerticalM,\n textAlign: 'center',\n },\n});\n\n/**\n * Apply styling to the Radio slots based on the state\n */\nexport const useRadioStyles_unstable = (state: RadioState) => {\n const rootStyles = useRootStyles();\n state.root.className = mergeClasses(\n radioClassNames.root,\n rootStyles.base,\n rootStyles.focusIndicator,\n state.labelPosition === 'below' && rootStyles.vertical,\n state.root.className,\n );\n\n const inputStyles = useInputStyles();\n state.input.className = mergeClasses(radioClassNames.input, inputStyles.base, state.input.className);\n\n const indicatorStyles = useIndicatorStyles();\n state.indicator.className = mergeClasses(radioClassNames.indicator, indicatorStyles.base, state.indicator.className);\n\n const labelStyles = useLabelStyles();\n if (state.label) {\n state.label.className = mergeClasses(\n radioClassNames.label,\n labelStyles.base,\n labelStyles[state.labelPosition],\n state.label.className,\n );\n }\n};\n"],"sourceRoot":"../src/"}
@@ -1 +1 @@
1
- {"version":3,"file":"RadioGroup.types.js","sourceRoot":"../src/","sources":["components/RadioGroup/RadioGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type RadioGroupSlots = {\n /**\n * The radio group root.\n */\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type RadioGroupProps = Omit<ComponentProps<Partial<RadioGroupSlots>>, 'onChange'> & {\n /**\n * The name of this radio group. This name is applied to all Radio items inside this group.\n *\n * If no name is provided, one will be generated so that all of the Radio items have the same name.\n */\n name?: string;\n\n /**\n * The selected Radio item in this group.\n *\n * This should be the `value` prop of one of the Radio items inside this group.\n */\n value?: string;\n\n /**\n * The default selected Radio item in this group.\n *\n * This should be the `value` prop of one of the Radio items inside this group.\n */\n defaultValue?: string;\n\n /**\n * Callback when the selected Radio item changes.\n */\n onChange?: (ev: React.FormEvent<HTMLDivElement>, data: RadioGroupOnChangeData) => void;\n\n /**\n * How the radio items are laid out in the group.\n *\n * @default vertical\n */\n layout?: 'vertical' | 'horizontal' | 'horizontalStacked';\n\n /**\n * Disable all Radio items in this group.\n */\n disabled?: boolean;\n\n /**\n * Require all Radio items in this group.\n */\n required?: boolean;\n};\n\n/**\n * Data for the onChange event for RadioGroup.\n */\nexport type RadioGroupOnChangeData = {\n /**\n * The value of the newly selected Radio item.\n */\n value: string;\n};\n\n/**\n * State used in rendering RadioGroup\n */\nexport type RadioGroupState = ComponentState<RadioGroupSlots> &\n Required<Pick<RadioGroupProps, 'layout'>> &\n Partial<Exclude<RadioGroupProps, 'onChange' | 'layout'>>;\n\nexport type RadioGroupContextValue = Pick<\n RadioGroupProps,\n 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required'\n>;\n\nexport type RadioGroupContextValues = {\n radioGroup: RadioGroupContextValue;\n};\n"]}
1
+ {"version":3,"file":"RadioGroup.types.js","sourceRoot":"../src/","sources":["components/RadioGroup/RadioGroup.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type RadioGroupSlots = {\n /**\n * The radio group root.\n */\n root: NonNullable<Slot<'div'>>;\n};\n\nexport type RadioGroupProps = Omit<ComponentProps<Partial<RadioGroupSlots>>, 'onChange'> & {\n /**\n * The name of this radio group. This name is applied to all Radio items inside this group.\n *\n * If no name is provided, one will be generated so that all of the Radio items have the same name.\n */\n name?: string;\n\n /**\n * The selected Radio item in this group.\n *\n * This should be the `value` prop of one of the Radio items inside this group.\n */\n value?: string;\n\n /**\n * The default selected Radio item in this group.\n *\n * This should be the `value` prop of one of the Radio items inside this group.\n */\n defaultValue?: string;\n\n /**\n * Callback when the selected Radio item changes.\n */\n onChange?: (ev: React.FormEvent<HTMLDivElement>, data: RadioGroupOnChangeData) => void;\n\n /**\n * How the radio items are laid out in the group.\n *\n * @default vertical\n */\n layout?: 'vertical' | 'horizontal' | 'horizontal-stacked';\n\n /**\n * Disable all Radio items in this group.\n */\n disabled?: boolean;\n\n /**\n * Require all Radio items in this group.\n */\n required?: boolean;\n};\n\n/**\n * Data for the onChange event for RadioGroup.\n */\nexport type RadioGroupOnChangeData = {\n /**\n * The value of the newly selected Radio item.\n */\n value: string;\n};\n\n/**\n * State used in rendering RadioGroup\n */\nexport type RadioGroupState = ComponentState<RadioGroupSlots> &\n Required<Pick<RadioGroupProps, 'layout'>> &\n Partial<Exclude<RadioGroupProps, 'onChange' | 'layout'>>;\n\nexport type RadioGroupContextValue = Pick<\n RadioGroupProps,\n 'name' | 'value' | 'defaultValue' | 'disabled' | 'layout' | 'required'\n>;\n\nexport type RadioGroupContextValues = {\n radioGroup: RadioGroupContextValue;\n};\n"]}
@@ -1,9 +1,4 @@
1
1
  import { __styles, mergeClasses } from '@griffel/react';
2
- /**
3
- * @deprecated Use `radioGroupClassNames.root` instead.
4
- */
5
-
6
- export const radioGroupClassName = 'fui-RadioGroup';
7
2
  export const radioGroupClassNames = {
8
3
  root: 'fui-RadioGroup'
9
4
  };