@react-md/core 1.0.0-next.7 → 1.0.0-next.8

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 (60) hide show
  1. package/.turbo/turbo-build.log +6 -6
  2. package/CHANGELOG.md +6 -0
  3. package/coverage/clover.xml +264 -389
  4. package/coverage/coverage-final.json +2 -3
  5. package/coverage/lcov-report/MenuItemCheckbox.tsx.html +223 -0
  6. package/coverage/lcov-report/MenuItemInputToggle.tsx.html +178 -232
  7. package/coverage/lcov-report/MenuItemRadio.tsx.html +436 -0
  8. package/coverage/lcov-report/SrOnly.tsx.html +328 -0
  9. package/coverage/lcov-report/Typography.tsx.html +1027 -0
  10. package/coverage/lcov-report/index.html +15 -30
  11. package/coverage/lcov-report/menuItemInputToggleStyles.ts.html +319 -0
  12. package/coverage/lcov.info +304 -436
  13. package/dist/_core.scss +49 -43
  14. package/dist/badge/_badge.scss +23 -19
  15. package/dist/form/MenuItemInputToggle.d.ts +2 -15
  16. package/dist/form/MenuItemInputToggle.js +26 -37
  17. package/dist/form/MenuItemInputToggle.js.map +1 -1
  18. package/dist/form/_form.scss +39 -16
  19. package/dist/form/menuItemInputToggleStyles.d.ts +39 -0
  20. package/dist/form/menuItemInputToggleStyles.js +31 -0
  21. package/dist/form/menuItemInputToggleStyles.js.map +1 -0
  22. package/dist/icon/_icon.scss +7 -5
  23. package/dist/index.d.ts +1 -0
  24. package/dist/index.js +1 -0
  25. package/dist/index.js.map +1 -1
  26. package/dist/interaction/_interaction.scss +56 -44
  27. package/dist/list/types.d.ts +10 -1
  28. package/dist/list/types.js.map +1 -1
  29. package/dist/menu/_menu.scss +1 -0
  30. package/dist/theme/_theme.scss +192 -34
  31. package/dist/typography/SrOnly.d.ts +3 -3
  32. package/dist/typography/SrOnly.js +4 -4
  33. package/dist/typography/SrOnly.js.map +1 -1
  34. package/dist/typography/Typography.d.ts +19 -19
  35. package/dist/typography/Typography.js +19 -19
  36. package/dist/typography/Typography.js.map +1 -1
  37. package/dist/typography/_typography.scss +65 -25
  38. package/package.json +11 -11
  39. package/src/_core.scss +49 -43
  40. package/src/badge/_badge.scss +23 -19
  41. package/src/button/__tests__/__snapshots__/Button.tsx.snap +1 -1
  42. package/src/form/MenuItemInputToggle.tsx +46 -64
  43. package/src/form/__tests__/MenuItemCheckbox.tsx +53 -0
  44. package/src/form/__tests__/MenuItemRadio.tsx +53 -0
  45. package/src/form/__tests__/__snapshots__/FileInput.tsx.snap +23 -23
  46. package/src/form/__tests__/__snapshots__/MenuItemCheckbox.tsx.snap +96 -0
  47. package/src/form/__tests__/__snapshots__/MenuItemRadio.tsx.snap +96 -0
  48. package/src/form/_form.scss +39 -16
  49. package/src/form/menuItemInputToggleStyles.ts +78 -0
  50. package/src/icon/_icon.scss +7 -5
  51. package/src/index.ts +1 -0
  52. package/src/interaction/_interaction.scss +56 -44
  53. package/src/list/types.ts +12 -1
  54. package/src/menu/_menu.scss +1 -0
  55. package/src/theme/_theme.scss +192 -34
  56. package/src/typography/SrOnly.tsx +9 -9
  57. package/src/typography/Typography.tsx +19 -19
  58. package/src/typography/__tests__/__snapshots__/SrOnly.tsx.snap +5 -5
  59. package/src/typography/_typography.scss +65 -25
  60. package/.turbo/turbo-lint.log +0 -12
package/coverage/lcov-report/MenuItemRadio.tsx.html ADDED
@@ -0,0 +1,436 @@
1
+
2
+ <!doctype html>
3
+ <html lang="en">
4
+
5
+ <head>
6
+ <title>Code coverage report for MenuItemRadio.tsx</title>
7
+ <meta charset="utf-8" />
8
+ <link rel="stylesheet" href="prettify.css" />
9
+ <link rel="stylesheet" href="base.css" />
10
+ <link rel="shortcut icon" type="image/x-icon" href="favicon.png" />
11
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
12
+ <style type='text/css'>
13
+ .coverage-summary .sorter {
14
+ background-image: url(sort-arrow-sprite.png);
15
+ }
16
+ </style>
17
+ </head>
18
+
19
+ <body>
20
+ <div class='wrapper'>
21
+ <div class='pad1'>
22
+ <h1><a href="index.html">All files</a> MenuItemRadio.tsx</h1>
23
+ <div class='clearfix'>
24
+
25
+ <div class='fl pad1y space-right2'>
26
+ <span class="strong">100% </span>
27
+ <span class="quiet">Statements</span>
28
+ <span class='fraction'>117/117</span>
29
+ </div>
30
+
31
+
32
+ <div class='fl pad1y space-right2'>
33
+ <span class="strong">100% </span>
34
+ <span class="quiet">Branches</span>
35
+ <span class='fraction'>1/1</span>
36
+ </div>
37
+
38
+
39
+ <div class='fl pad1y space-right2'>
40
+ <span class="strong">100% </span>
41
+ <span class="quiet">Functions</span>
42
+ <span class='fraction'>1/1</span>
43
+ </div>
44
+
45
+
46
+ <div class='fl pad1y space-right2'>
47
+ <span class="strong">100% </span>
48
+ <span class="quiet">Lines</span>
49
+ <span class='fraction'>117/117</span>
50
+ </div>
51
+
52
+
53
+ </div>
54
+ <p class="quiet">
55
+ Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56
+ </p>
57
+ <template id="filterTemplate">
58
+ <div class="quiet">
59
+ Filter:
60
+ <input oninput="onInput()" type="search" id="fileSearch">
61
+ </div>
62
+ </template>
63
+ </div>
64
+ <div class='status-line high'></div>
65
+ <pre><table class="coverage">
66
+ <tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
67
+ <a name='L2'></a><a href='#L2'>2</a>
68
+ <a name='L3'></a><a href='#L3'>3</a>
69
+ <a name='L4'></a><a href='#L4'>4</a>
70
+ <a name='L5'></a><a href='#L5'>5</a>
71
+ <a name='L6'></a><a href='#L6'>6</a>
72
+ <a name='L7'></a><a href='#L7'>7</a>
73
+ <a name='L8'></a><a href='#L8'>8</a>
74
+ <a name='L9'></a><a href='#L9'>9</a>
75
+ <a name='L10'></a><a href='#L10'>10</a>
76
+ <a name='L11'></a><a href='#L11'>11</a>
77
+ <a name='L12'></a><a href='#L12'>12</a>
78
+ <a name='L13'></a><a href='#L13'>13</a>
79
+ <a name='L14'></a><a href='#L14'>14</a>
80
+ <a name='L15'></a><a href='#L15'>15</a>
81
+ <a name='L16'></a><a href='#L16'>16</a>
82
+ <a name='L17'></a><a href='#L17'>17</a>
83
+ <a name='L18'></a><a href='#L18'>18</a>
84
+ <a name='L19'></a><a href='#L19'>19</a>
85
+ <a name='L20'></a><a href='#L20'>20</a>
86
+ <a name='L21'></a><a href='#L21'>21</a>
87
+ <a name='L22'></a><a href='#L22'>22</a>
88
+ <a name='L23'></a><a href='#L23'>23</a>
89
+ <a name='L24'></a><a href='#L24'>24</a>
90
+ <a name='L25'></a><a href='#L25'>25</a>
91
+ <a name='L26'></a><a href='#L26'>26</a>
92
+ <a name='L27'></a><a href='#L27'>27</a>
93
+ <a name='L28'></a><a href='#L28'>28</a>
94
+ <a name='L29'></a><a href='#L29'>29</a>
95
+ <a name='L30'></a><a href='#L30'>30</a>
96
+ <a name='L31'></a><a href='#L31'>31</a>
97
+ <a name='L32'></a><a href='#L32'>32</a>
98
+ <a name='L33'></a><a href='#L33'>33</a>
99
+ <a name='L34'></a><a href='#L34'>34</a>
100
+ <a name='L35'></a><a href='#L35'>35</a>
101
+ <a name='L36'></a><a href='#L36'>36</a>
102
+ <a name='L37'></a><a href='#L37'>37</a>
103
+ <a name='L38'></a><a href='#L38'>38</a>
104
+ <a name='L39'></a><a href='#L39'>39</a>
105
+ <a name='L40'></a><a href='#L40'>40</a>
106
+ <a name='L41'></a><a href='#L41'>41</a>
107
+ <a name='L42'></a><a href='#L42'>42</a>
108
+ <a name='L43'></a><a href='#L43'>43</a>
109
+ <a name='L44'></a><a href='#L44'>44</a>
110
+ <a name='L45'></a><a href='#L45'>45</a>
111
+ <a name='L46'></a><a href='#L46'>46</a>
112
+ <a name='L47'></a><a href='#L47'>47</a>
113
+ <a name='L48'></a><a href='#L48'>48</a>
114
+ <a name='L49'></a><a href='#L49'>49</a>
115
+ <a name='L50'></a><a href='#L50'>50</a>
116
+ <a name='L51'></a><a href='#L51'>51</a>
117
+ <a name='L52'></a><a href='#L52'>52</a>
118
+ <a name='L53'></a><a href='#L53'>53</a>
119
+ <a name='L54'></a><a href='#L54'>54</a>
120
+ <a name='L55'></a><a href='#L55'>55</a>
121
+ <a name='L56'></a><a href='#L56'>56</a>
122
+ <a name='L57'></a><a href='#L57'>57</a>
123
+ <a name='L58'></a><a href='#L58'>58</a>
124
+ <a name='L59'></a><a href='#L59'>59</a>
125
+ <a name='L60'></a><a href='#L60'>60</a>
126
+ <a name='L61'></a><a href='#L61'>61</a>
127
+ <a name='L62'></a><a href='#L62'>62</a>
128
+ <a name='L63'></a><a href='#L63'>63</a>
129
+ <a name='L64'></a><a href='#L64'>64</a>
130
+ <a name='L65'></a><a href='#L65'>65</a>
131
+ <a name='L66'></a><a href='#L66'>66</a>
132
+ <a name='L67'></a><a href='#L67'>67</a>
133
+ <a name='L68'></a><a href='#L68'>68</a>
134
+ <a name='L69'></a><a href='#L69'>69</a>
135
+ <a name='L70'></a><a href='#L70'>70</a>
136
+ <a name='L71'></a><a href='#L71'>71</a>
137
+ <a name='L72'></a><a href='#L72'>72</a>
138
+ <a name='L73'></a><a href='#L73'>73</a>
139
+ <a name='L74'></a><a href='#L74'>74</a>
140
+ <a name='L75'></a><a href='#L75'>75</a>
141
+ <a name='L76'></a><a href='#L76'>76</a>
142
+ <a name='L77'></a><a href='#L77'>77</a>
143
+ <a name='L78'></a><a href='#L78'>78</a>
144
+ <a name='L79'></a><a href='#L79'>79</a>
145
+ <a name='L80'></a><a href='#L80'>80</a>
146
+ <a name='L81'></a><a href='#L81'>81</a>
147
+ <a name='L82'></a><a href='#L82'>82</a>
148
+ <a name='L83'></a><a href='#L83'>83</a>
149
+ <a name='L84'></a><a href='#L84'>84</a>
150
+ <a name='L85'></a><a href='#L85'>85</a>
151
+ <a name='L86'></a><a href='#L86'>86</a>
152
+ <a name='L87'></a><a href='#L87'>87</a>
153
+ <a name='L88'></a><a href='#L88'>88</a>
154
+ <a name='L89'></a><a href='#L89'>89</a>
155
+ <a name='L90'></a><a href='#L90'>90</a>
156
+ <a name='L91'></a><a href='#L91'>91</a>
157
+ <a name='L92'></a><a href='#L92'>92</a>
158
+ <a name='L93'></a><a href='#L93'>93</a>
159
+ <a name='L94'></a><a href='#L94'>94</a>
160
+ <a name='L95'></a><a href='#L95'>95</a>
161
+ <a name='L96'></a><a href='#L96'>96</a>
162
+ <a name='L97'></a><a href='#L97'>97</a>
163
+ <a name='L98'></a><a href='#L98'>98</a>
164
+ <a name='L99'></a><a href='#L99'>99</a>
165
+ <a name='L100'></a><a href='#L100'>100</a>
166
+ <a name='L101'></a><a href='#L101'>101</a>
167
+ <a name='L102'></a><a href='#L102'>102</a>
168
+ <a name='L103'></a><a href='#L103'>103</a>
169
+ <a name='L104'></a><a href='#L104'>104</a>
170
+ <a name='L105'></a><a href='#L105'>105</a>
171
+ <a name='L106'></a><a href='#L106'>106</a>
172
+ <a name='L107'></a><a href='#L107'>107</a>
173
+ <a name='L108'></a><a href='#L108'>108</a>
174
+ <a name='L109'></a><a href='#L109'>109</a>
175
+ <a name='L110'></a><a href='#L110'>110</a>
176
+ <a name='L111'></a><a href='#L111'>111</a>
177
+ <a name='L112'></a><a href='#L112'>112</a>
178
+ <a name='L113'></a><a href='#L113'>113</a>
179
+ <a name='L114'></a><a href='#L114'>114</a>
180
+ <a name='L115'></a><a href='#L115'>115</a>
181
+ <a name='L116'></a><a href='#L116'>116</a>
182
+ <a name='L117'></a><a href='#L117'>117</a>
183
+ <a name='L118'></a><a href='#L118'>118</a></td><td class="line-coverage quiet"><span class="cline-any cline-yes">1x</span>
184
+ <span class="cline-any cline-yes">1x</span>
185
+ <span class="cline-any cline-yes">1x</span>
186
+ <span class="cline-any cline-yes">1x</span>
187
+ <span class="cline-any cline-yes">1x</span>
188
+ <span class="cline-any cline-yes">1x</span>
189
+ <span class="cline-any cline-yes">1x</span>
190
+ <span class="cline-any cline-yes">1x</span>
191
+ <span class="cline-any cline-yes">1x</span>
192
+ <span class="cline-any cline-yes">1x</span>
193
+ <span class="cline-any cline-yes">1x</span>
194
+ <span class="cline-any cline-yes">1x</span>
195
+ <span class="cline-any cline-yes">1x</span>
196
+ <span class="cline-any cline-yes">1x</span>
197
+ <span class="cline-any cline-yes">1x</span>
198
+ <span class="cline-any cline-yes">1x</span>
199
+ <span class="cline-any cline-yes">1x</span>
200
+ <span class="cline-any cline-yes">1x</span>
201
+ <span class="cline-any cline-yes">1x</span>
202
+ <span class="cline-any cline-yes">1x</span>
203
+ <span class="cline-any cline-yes">1x</span>
204
+ <span class="cline-any cline-yes">1x</span>
205
+ <span class="cline-any cline-yes">1x</span>
206
+ <span class="cline-any cline-yes">1x</span>
207
+ <span class="cline-any cline-yes">1x</span>
208
+ <span class="cline-any cline-yes">1x</span>
209
+ <span class="cline-any cline-yes">1x</span>
210
+ <span class="cline-any cline-yes">1x</span>
211
+ <span class="cline-any cline-yes">1x</span>
212
+ <span class="cline-any cline-yes">1x</span>
213
+ <span class="cline-any cline-yes">1x</span>
214
+ <span class="cline-any cline-yes">1x</span>
215
+ <span class="cline-any cline-yes">1x</span>
216
+ <span class="cline-any cline-yes">1x</span>
217
+ <span class="cline-any cline-yes">1x</span>
218
+ <span class="cline-any cline-yes">1x</span>
219
+ <span class="cline-any cline-yes">1x</span>
220
+ <span class="cline-any cline-yes">1x</span>
221
+ <span class="cline-any cline-yes">1x</span>
222
+ <span class="cline-any cline-yes">1x</span>
223
+ <span class="cline-any cline-yes">1x</span>
224
+ <span class="cline-any cline-yes">1x</span>
225
+ <span class="cline-any cline-yes">1x</span>
226
+ <span class="cline-any cline-yes">1x</span>
227
+ <span class="cline-any cline-yes">1x</span>
228
+ <span class="cline-any cline-yes">1x</span>
229
+ <span class="cline-any cline-yes">1x</span>
230
+ <span class="cline-any cline-yes">1x</span>
231
+ <span class="cline-any cline-yes">1x</span>
232
+ <span class="cline-any cline-yes">1x</span>
233
+ <span class="cline-any cline-yes">1x</span>
234
+ <span class="cline-any cline-yes">1x</span>
235
+ <span class="cline-any cline-yes">1x</span>
236
+ <span class="cline-any cline-yes">1x</span>
237
+ <span class="cline-any cline-yes">1x</span>
238
+ <span class="cline-any cline-yes">1x</span>
239
+ <span class="cline-any cline-yes">1x</span>
240
+ <span class="cline-any cline-yes">1x</span>
241
+ <span class="cline-any cline-yes">1x</span>
242
+ <span class="cline-any cline-yes">1x</span>
243
+ <span class="cline-any cline-yes">1x</span>
244
+ <span class="cline-any cline-yes">1x</span>
245
+ <span class="cline-any cline-yes">1x</span>
246
+ <span class="cline-any cline-yes">1x</span>
247
+ <span class="cline-any cline-yes">1x</span>
248
+ <span class="cline-any cline-yes">1x</span>
249
+ <span class="cline-any cline-yes">1x</span>
250
+ <span class="cline-any cline-yes">1x</span>
251
+ <span class="cline-any cline-yes">1x</span>
252
+ <span class="cline-any cline-yes">1x</span>
253
+ <span class="cline-any cline-yes">1x</span>
254
+ <span class="cline-any cline-yes">1x</span>
255
+ <span class="cline-any cline-yes">1x</span>
256
+ <span class="cline-any cline-yes">1x</span>
257
+ <span class="cline-any cline-yes">1x</span>
258
+ <span class="cline-any cline-yes">1x</span>
259
+ <span class="cline-any cline-yes">1x</span>
260
+ <span class="cline-any cline-yes">1x</span>
261
+ <span class="cline-any cline-yes">1x</span>
262
+ <span class="cline-any cline-yes">1x</span>
263
+ <span class="cline-any cline-yes">1x</span>
264
+ <span class="cline-any cline-yes">1x</span>
265
+ <span class="cline-any cline-yes">1x</span>
266
+ <span class="cline-any cline-yes">1x</span>
267
+ <span class="cline-any cline-yes">1x</span>
268
+ <span class="cline-any cline-yes">1x</span>
269
+ <span class="cline-any cline-yes">1x</span>
270
+ <span class="cline-any cline-yes">1x</span>
271
+ <span class="cline-any cline-yes">1x</span>
272
+ <span class="cline-any cline-yes">1x</span>
273
+ <span class="cline-any cline-yes">1x</span>
274
+ <span class="cline-any cline-yes">1x</span>
275
+ <span class="cline-any cline-yes">1x</span>
276
+ <span class="cline-any cline-yes">1x</span>
277
+ <span class="cline-any cline-yes">1x</span>
278
+ <span class="cline-any cline-yes">1x</span>
279
+ <span class="cline-any cline-yes">1x</span>
280
+ <span class="cline-any cline-yes">1x</span>
281
+ <span class="cline-any cline-yes">1x</span>
282
+ <span class="cline-any cline-yes">1x</span>
283
+ <span class="cline-any cline-yes">1x</span>
284
+ <span class="cline-any cline-yes">1x</span>
285
+ <span class="cline-any cline-yes">1x</span>
286
+ <span class="cline-any cline-yes">1x</span>
287
+ <span class="cline-any cline-yes">1x</span>
288
+ <span class="cline-any cline-yes">1x</span>
289
+ <span class="cline-any cline-yes">1x</span>
290
+ <span class="cline-any cline-yes">1x</span>
291
+ <span class="cline-any cline-yes">1x</span>
292
+ <span class="cline-any cline-yes">1x</span>
293
+ <span class="cline-any cline-yes">1x</span>
294
+ <span class="cline-any cline-yes">1x</span>
295
+ <span class="cline-any cline-yes">1x</span>
296
+ <span class="cline-any cline-yes">1x</span>
297
+ <span class="cline-any cline-yes">12x</span>
298
+ <span class="cline-any cline-yes">12x</span>
299
+ <span class="cline-any cline-yes">1x</span>
300
+ <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">"use client";
301
+ import { forwardRef } from "react";
302
+ import {
303
+ MenuItemInputToggle,
304
+ type MenuItemRadioProps,
305
+ } from "./MenuItemInputToggle.js";
306
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
307
+ import { type ICON_CONFIG } from "../icon/iconConfig.js";
308
+ &nbsp;
309
+ /**
310
+ * **Client Component**
311
+ *
312
+ * This is a simple wrapper for the {@link MenuItemInputToggle} component to
313
+ * render it as a radio and pulling the radio icon from the
314
+ * {@link ICON_CONFIG}.
315
+ *
316
+ * If a menu or menubar contains more than one group of menuitemradio elements,
317
+ * or if the menu contains one group and other, unrelated menu items, authors
318
+ * SHOULD nest each set of related menuitemradio elements in an element using
319
+ * the group role, and authors SHOULD delimit the group from other menu items
320
+ * with an element using the separator role.
321
+ * @see {@link https://www.w3.org/TR/wai-aria-1.1/#menuitemradio}
322
+ *
323
+ * @example
324
+ * Only Radio Items
325
+ * ```tsx
326
+ * import { ReactElement, useState } from "react";
327
+ * import { DropdownMenu, MenuItemRadio } from "@react-md/core";
328
+ *
329
+ * function Example(): ReactElement {
330
+ * const [value, setValue] = useState("value1");
331
+ *
332
+ * return (
333
+ * &lt;DropdownMenu id="dropdown-menu-id" buttonChildren="Button"&gt;
334
+ * &lt;MenuItemRadio
335
+ * id="radio-1"
336
+ * checked={value === "value1"}
337
+ * onCheckedChange={() =&gt; setValue("value1")}
338
+ * &gt;
339
+ * Radio 1
340
+ * &lt;/MenuItemRadio&gt;
341
+ * &lt;MenuItemRadio
342
+ * id="radio-2"
343
+ * checked={value === "value2"}
344
+ * onCheckedChange={() =&gt; setValue("value2")}
345
+ * &gt;
346
+ * Radio 2
347
+ * &lt;/MenuItemRadio&gt;
348
+ * &lt;MenuItemRadio
349
+ * id="radio-3"
350
+ * checked={value === "value3"}
351
+ * onCheckedChange={() =&gt; setValue("value3")}
352
+ * &gt;
353
+ * Radio 3
354
+ * &lt;/MenuItemRadio&gt;
355
+ * &lt;/DropdownMenu&gt;
356
+ * );
357
+ * }
358
+ * ```
359
+ *
360
+ * @example
361
+ * With Other Items
362
+ * ```tsx
363
+ * import {
364
+ * DropdownMenu,
365
+ * MenuItemGroup,
366
+ * MenuItemRadio,
367
+ * MenuItemSwitch,
368
+ * MenuItemSeparator,
369
+ * } from "@react-md/core";
370
+ * import type { ReactElement } from "react";
371
+ * import { useState } from "react";
372
+ *
373
+ * function Example(): ReactElement {
374
+ * const [value, setValue] = useState("value1");
375
+ *
376
+ * return (
377
+ * &lt;DropdownMenu buttonChildren="Button"&gt;
378
+ * &lt;MenuItemSwitch
379
+ * checked={checked}
380
+ * onCheckedChange={nextChecked =&gt; setChecked(nextChecked)}
381
+ * &gt;
382
+ * Light mode
383
+ * &lt;/MenuItemSwitch&gt;
384
+ * &lt;MenuItemSeparator /&gt;
385
+ * &lt;MenuItemGroup aria-label="My Group Label"&gt;
386
+ * &lt;MenuItemRadio
387
+ * checked={value === "value1"}
388
+ * onCheckedChange={() =&gt; setValue("value1")}
389
+ * &gt;
390
+ * Radio 1
391
+ * &lt;/MenuItemRadio&gt;
392
+ * &lt;MenuItemRadio
393
+ * checked={value === "value2"}
394
+ * onCheckedChange={() =&gt; setValue("value2")}
395
+ * &gt;
396
+ * Radio 2
397
+ * &lt;/MenuItemRadio&gt;
398
+ * &lt;MenuItemRadio
399
+ * checked={value === "value3"}
400
+ * onCheckedChange={() =&gt; setValue("value3")}
401
+ * &gt;
402
+ * Radio 3
403
+ * &lt;/MenuItemRadio&gt;
404
+ * &lt;/MenuItemGroup&gt;
405
+ * &lt;/DropdownMenu&gt;
406
+ * );
407
+ * }
408
+ * ```
409
+ *
410
+ * @remarks \@since 2.8.0
411
+ */
412
+ export const MenuItemRadio = forwardRef&lt;HTMLLIElement, MenuItemRadioProps&gt;(
413
+ function MenuItemRadio(props, ref) {
414
+ return &lt;MenuItemInputToggle {...props} ref={ref} type="radio" /&gt;;
415
+ }
416
+ );
417
+ &nbsp;</pre></td></tr></table></pre>
418
+
419
+ <div class='push'></div><!-- for sticky footer -->
420
+ </div><!-- /wrapper -->
421
+ <div class='footer quiet pad2 space-top1 center small'>
422
+ Code coverage generated by
423
+ <a href="https://istanbul.js.org/" target="_blank" rel="noopener noreferrer">istanbul</a>
424
+ at 2024-01-26T22:08:58.185Z
425
+ </div>
426
+ <script src="prettify.js"></script>
427
+ <script>
428
+ window.onload = function () {
429
+ prettyPrint();
430
+ };
431
+ </script>
432
+ <script src="sorter.js"></script>
433
+ <script src="block-navigation.js"></script>
434
+ </body>
435
+ </html>
436
+