@rescui/menu 0.13.8-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.14 → 0.13.8-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.43

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 (23) hide show
  1. package/lib/_virtual/check-outline.js +337 -0
  2. package/lib/_virtual/index.css.js +15 -0
  3. package/lib/index.css +201 -76
  4. package/lib/index.d.ts +1 -5
  5. package/lib/menu.d.ts +17 -11
  6. package/lib/menu.js +385 -46
  7. package/lib/menu.p.module.css.js +34 -27
  8. package/lib/parts/divider.d.ts +3 -6
  9. package/lib/parts/divider.js +53 -10
  10. package/lib/parts/group-header.d.ts +2 -8
  11. package/lib/parts/group-header.js +43 -10
  12. package/lib/parts/menu-context.d.ts +2 -19
  13. package/lib/parts/menu-context.js +79 -23
  14. package/lib/parts/menu-item.d.ts +25 -13
  15. package/lib/parts/menu-item.js +348 -71
  16. package/lib/parts/navigation-utils.d.ts +2 -2
  17. package/lib/parts/use-menu-keyboard-navigation.d.ts +7 -5
  18. package/lib/parts/use-menu-keyboard-navigation.js +224 -110
  19. package/lib/public-api.p.css +57 -76
  20. package/lib/public-api.pcss +57 -76
  21. package/lib/types.d.ts +87 -0
  22. package/llm/components/menu.md +79 -8
  23. package/package.json +6 -6
package/lib/index.css CHANGED
@@ -1,10 +1,121 @@
1
- ._themeLight_1be69r7_8{
1
+ @property --_rs-theme-dark-coefficient{
2
+ syntax:'<number>';
3
+ inherits:true;
4
+ initial-value:0;
5
+ }
6
+ ._icon_wwfcil_4{
7
+ --_rs-theme-dark:var(
8
+ --_rs-internal-force-theme-dark-consult-rescui-before-using,
9
+ var(--rs-theme-dark, 0)
10
+ );
11
+ --_rs-theme-flip:var(--rs-theme-flip, 0);
12
+ --_rs-theme-dark-coefficient:calc(var(--_rs-theme-dark)*(1 - var(--_rs-theme-flip)) + var(--_rs-theme-flip)*(1 - var(--_rs-theme-dark)));
13
+ --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
14
+ }
15
+ @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
16
+ ._icon_wwfcil_4{
17
+ --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
18
+ --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
19
+ --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
20
+ --_rs-color-primary-t-dim:color-mix(in srgb, var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8)) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-dim-dark-theme, rgba(132, 115, 255,0.8)) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
21
+ --_rs-color-primary-t-fog:color-mix(in srgb, var(--rs-color-primary-t-fog-light-theme, rgba(107, 87, 255,0.2)) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-t-fog-dark-theme, rgba(132, 115, 255,0.3)) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
22
+ }
23
+ }
24
+ @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
25
+ ._icon_wwfcil_4{
26
+ --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
27
+ --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
28
+ --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
29
+ --_rs-color-primary-t-dim:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, 0.8);
30
+ --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
31
+ }
32
+ }
33
+ ._icon_wwfcil_4{
34
+
35
+ fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
36
+
37
+ width:var(--rs-icons-width, auto);
38
+ height:var(--rs-icons-height, var(--_rs-icons-height));
39
+ }
40
+ ._sizeXS_wwfcil_14{
41
+ --_rs-icons-height:16px;
42
+ }
43
+ ._sizeS_wwfcil_18{
44
+ --_rs-icons-height:20px;
45
+ }
46
+ ._sizeM_wwfcil_22{
47
+ --_rs-icons-height:24px;
48
+ }
49
+ ._sizeL_wwfcil_26{
50
+ --_rs-icons-height:28px;
51
+ }
52
+ ._light_wwfcil_30{
2
53
  --rs-theme-dark:0;
54
+ --_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
3
55
  }
4
- ._themeDark_1be69r7_11{
56
+ ._dark_wwfcil_34{
5
57
  --rs-theme-dark:1;
58
+ --_rs-icons-themed-fill-or-initial:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
59
+ }
60
+ @keyframes rs-icon-rotate{
61
+ from{
62
+ transform:rotate(0deg);
63
+ }
64
+ to{
65
+ transform:rotate(360deg);
66
+ }
67
+ }
68
+ ._allVariants_wwfcil_48{
69
+ aspect-ratio:var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);
70
+ container:rs-icon / size;
71
+ }
72
+ ._variant16_wwfcil_53,
73
+ ._variant20_wwfcil_54,
74
+ ._variant24_wwfcil_55{
75
+ display:none;
6
76
  }
7
- ._sizeS_1be69r7_15{
77
+ ._variant28_wwfcil_58{
78
+ display:block;
79
+ }
80
+ @container rs-icon (max-height: 24px){
81
+ ._variant24_wwfcil_55{
82
+ display:block;
83
+ }
84
+ ._variant28_wwfcil_58{
85
+ display:none;
86
+ }
87
+ }
88
+ @container rs-icon (max-height: 20px){
89
+ ._variant20_wwfcil_54{
90
+ display:block;
91
+ }
92
+ ._variant24_wwfcil_55{
93
+ display:none;
94
+ }
95
+ }
96
+ @container rs-icon (max-height: 16px){
97
+ ._variant16_wwfcil_53{
98
+ display:block;
99
+ }
100
+ ._variant20_wwfcil_54{
101
+ display:none;
102
+ }
103
+ }
104
+ @property --_rs-theme-dark-coefficient{
105
+ syntax:'<number>';
106
+ inherits:true;
107
+ initial-value:0;
108
+ }
109
+ ._themeLight_wrwry9_8{
110
+ --rs-theme-dark:0;
111
+ }
112
+ ._themeDark_wrwry9_11{
113
+ --rs-theme-dark:1;
114
+ }
115
+ ._menu_wrwry9_15:focus{
116
+ outline:none;
117
+ }
118
+ ._sizeS_wrwry9_21{
8
119
  --_rs-menu-mi-icon-offset:8px;
9
120
  --_rs-menu-mi-icon-size:20px;
10
121
  --_rs-menu-mi-vertical-padding:6px;
@@ -43,7 +154,7 @@
43
154
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
44
155
  --_rs-typography-link-border-bottom-width-from-text:1px;
45
156
  }
46
- ._sizeM_1be69r7_18{
157
+ ._sizeM_wrwry9_24{
47
158
  --_rs-menu-mi-icon-offset:8px;
48
159
  --_rs-menu-mi-icon-size:24px;
49
160
  --_rs-menu-mi-vertical-padding:8px;
@@ -86,11 +197,11 @@
86
197
  --_rs-typography-link-border-bottom-width-from-text:1px;
87
198
  }
88
199
  @media screen and (max-width: 640px){
89
- ._sizeM_1be69r7_18{
200
+ ._sizeM_wrwry9_24{
90
201
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
91
202
  }
92
203
  }
93
- ._sizeL_1be69r7_21{
204
+ ._sizeL_wrwry9_27{
94
205
  --_rs-menu-mi-icon-offset:16px;
95
206
  --_rs-menu-mi-icon-size:28px;
96
207
  --_rs-menu-mi-vertical-padding:12px;
@@ -133,60 +244,69 @@
133
244
  --_rs-typography-link-border-bottom-width-from-text:1px;
134
245
  }
135
246
  @media screen and (max-width: 640px){
136
- ._sizeL_1be69r7_21{
247
+ ._sizeL_wrwry9_27{
137
248
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
138
249
  }
139
250
  }
140
- ._modeClassic_1be69r7_25{
251
+ ._modeClassic_wrwry9_31{
141
252
  --_rs-menu-mi-horizontal-padding-with-mode:var(
142
253
  --_rs-menu-mi-horizontal-padding
143
254
  );
144
- --_rs-menu-mi-active-background:var(--_rs-color-primary-t-fog);
145
- --_rs-menu-mi-selected-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
146
- --_rs-menu-mi-selected-background:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
147
- --_rs-menu-mi-hover-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
148
- --_rs-menu-mi-hover-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.1);
149
- --_rs-menu-mi-selected-hover-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
150
- --_rs-menu-mi-selected-hover-background:rgb(
151
- calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(51 + var(--_rs-theme-dark-coefficient, 0)*181)
152
- );
153
255
  }
154
- ._modeRock_1be69r7_28{
256
+ ._modeClassic_wrwry9_31 [data-rs-internal="menu__menu-item__inner"]{
257
+ --_rs-menu-mi-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7);
258
+ --_rs-menu-mi-active-background:var(--_rs-color-primary-t-fog);
259
+ --_rs-menu-mi-selected-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
260
+ --_rs-menu-mi-selected-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.1);
261
+ --_rs-menu-mi-hover-color:rgb(
262
+ calc(255 - var(--rs-menu-contrast-primary, 0)*230),
263
+ calc(255 - var(--rs-menu-contrast-primary, 0)*230),
264
+ calc(255 - var(--rs-menu-contrast-primary, 0)*227)
265
+ );
266
+ --_rs-menu-mi-hover-background:var(--_rs-color-primary);
267
+ }
268
+ ._modeRock_wrwry9_34{
155
269
  --_rs-menu-mi-horizontal-padding-with-mode:var(
156
270
  --_rs-menu-mi-horizontal-padding
157
271
  );
158
- --_rs-menu-mi-active-background:none;
159
- --_rs-menu-mi-selected-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
160
- --_rs-menu-mi-selected-background:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
161
- --_rs-menu-mi-hover-color:#FFFFFF;
162
- --_rs-menu-mi-hover-background:var(--_rs-color-primary);
163
- --_rs-menu-mi-selected-hover-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
164
- --_rs-menu-mi-selected-hover-background:rgb(
165
- calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(48 + var(--_rs-theme-dark-coefficient, 0)*184), calc(51 + var(--_rs-theme-dark-coefficient, 0)*181)
166
- );
167
272
  }
168
- ._modeClear_1be69r7_31{
273
+ ._modeRock_wrwry9_34 [data-rs-internal="menu__menu-item__inner"]{
274
+ --_rs-menu-mi-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.7);
275
+ --_rs-menu-mi-active-background:transparent;
276
+ --_rs-menu-mi-selected-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
277
+ --_rs-menu-mi-selected-background:rgb(calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*184), calc(232 - var(--_rs-theme-dark-coefficient, 0)*181));
278
+ --_rs-menu-mi-hover-color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
279
+ --_rs-menu-mi-hover-background:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
280
+ }
281
+ ._modeClear_wrwry9_37{
169
282
  --_rs-menu-mi-horizontal-padding-with-mode:0;
170
- --_rs-menu-mi-active-background:none;
171
- --_rs-menu-mi-selected-color:var(--_rs-color-primary);
172
- --_rs-menu-mi-selected-background:none;
173
- --_rs-menu-mi-hover-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
174
- --_rs-menu-mi-hover-background:none;
175
- --_rs-menu-mi-selected-hover-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
176
- --_rs-menu-mi-selected-hover-background:rgba(
177
- calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
178
- 0.1
179
- );
180
283
  }
181
- ._iconPlacementLeft_1be69r7_35{
284
+ ._modeClear_wrwry9_37 [data-rs-internal="menu__menu-item__inner"]{
285
+ --_rs-menu-mi-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
286
+ --_rs-menu-mi-active-background:transparent;
287
+ --_rs-menu-mi-selected-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
288
+ --_rs-menu-mi-selected-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.1);
289
+ --_rs-menu-mi-hover-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
290
+ --_rs-menu-mi-hover-background:transparent;
291
+ }
292
+ ._iconPlacementLeft_wrwry9_41{
182
293
  --_rs-menu-mi-flex-direction:row;
183
294
  --_rs-menu-mi-justify-content:initial;
184
295
  }
185
- ._iconPlacementRight_1be69r7_39{
296
+ ._iconPlacementRight_wrwry9_45{
186
297
  --_rs-menu-mi-flex-direction:row-reverse;
187
298
  --_rs-menu-mi-justify-content:space-between;
188
299
  }
189
- ._wrapper_1be69r7_43{
300
+ ._wrapper_wrwry9_49{
301
+ display:flex;
302
+ }
303
+ ._hoverIcon_wrwry9_53{
304
+ visibility:hidden;
305
+ }
306
+ ._hoverIcon_wrwry9_53._hoverIconNoReserve_wrwry9_56{
307
+ display:none;
308
+ }
309
+ ._menuItem_wrwry9_61{
190
310
  --_rs-theme-dark:var(
191
311
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
192
312
  var(--rs-theme-dark, 0)
@@ -196,7 +316,7 @@
196
316
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
197
317
  }
198
318
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
199
- ._wrapper_1be69r7_43{
319
+ ._menuItem_wrwry9_61{
200
320
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
201
321
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
202
322
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -205,7 +325,7 @@
205
325
  }
206
326
  }
207
327
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
208
- ._wrapper_1be69r7_43{
328
+ ._menuItem_wrwry9_61{
209
329
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
210
330
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
211
331
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -213,11 +333,7 @@
213
333
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
214
334
  }
215
335
  }
216
- ._wrapper_1be69r7_43 {
217
-
218
- display:flex;
219
- }
220
- ._menuItem_1be69r7_50{
336
+ ._menuItem_wrwry9_61 {
221
337
  letter-spacing:var(
222
338
  --rs-text-base-letter-spacing,
223
339
  var(--_rs-typography-letter-spacing)
@@ -250,7 +366,7 @@
250
366
  text-align:start;
251
367
  text-decoration:none;
252
368
 
253
- color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
369
+ color:var(--_rs-menu-mi-color);
254
370
  background:none;
255
371
  -webkit-appearance:none;
256
372
  -moz-appearance:none;
@@ -258,52 +374,61 @@
258
374
  -webkit-font-smoothing:inherit;
259
375
  -moz-osx-font-smoothing:inherit;
260
376
  }
261
- ._menuItem_1be69r7_50:focus{
377
+ ._menuItem_wrwry9_61:focus{
262
378
  outline:none;
263
379
  }
264
- ._keyboardNavigationDisabled_1be69r7_85 ._menuItem_1be69r7_50:focus[data-focus-method='key']{
380
+ ._keyboardNavigationDisabled_wrwry9_98 ._menuItem_wrwry9_61:focus[data-focus-method='key']{
265
381
  box-shadow:0 0 0 2px var(--_rs-color-primary-dim), inset 0 0 0 2px var(--_rs-color-primary-dim);
266
382
  }
267
- ._menuItem_1be69r7_50:active{
383
+ ._menuItem_wrwry9_61:active{
268
384
  color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
269
385
  background:var(--_rs-menu-mi-active-background);
270
386
  }
271
- ._menuItem_1be69r7_50._selected_1be69r7_99{
387
+ ._menuItem_wrwry9_61._selected_wrwry9_112{
272
388
  color:var(--_rs-menu-mi-selected-color);
273
389
  background:var(--_rs-menu-mi-selected-background);
274
390
  }
275
- ._menuItem_1be69r7_50._highlighted_1be69r7_106,
276
- ._menuItem_1be69r7_50:not(._disableCursor_1be69r7_107):hover{
391
+ ._keyboardNavigationEnabled_wrwry9_119 ._menuItem_wrwry9_61:focus,
392
+ ._keyboardNavigationDisabled_wrwry9_98 ._menuItem_wrwry9_61:hover{
277
393
  color:var(--_rs-menu-mi-hover-color);
278
394
  background:var(--_rs-menu-mi-hover-background);
279
395
  }
280
- ._menuItem_1be69r7_50._highlighted_1be69r7_106._selected_1be69r7_99,
281
- ._menuItem_1be69r7_50._selected_1be69r7_99:not(._disableCursor_1be69r7_107):hover{
282
- color:var(--_rs-menu-mi-selected-hover-color);
283
- background-color:var(--_rs-menu-mi-selected-hover-background);
284
- }
285
- ._menuItem_1be69r7_50._disabled_1be69r7_120{
396
+ ._keyboardNavigationEnabled_wrwry9_119 ._menuItem_wrwry9_61:focus ._hoverIcon_wrwry9_53, ._keyboardNavigationDisabled_wrwry9_98 ._menuItem_wrwry9_61:hover ._hoverIcon_wrwry9_53{
397
+ display:block;
398
+ visibility:visible;
399
+ }
400
+ ._keyboardNavigationEnabled_wrwry9_119 ._menuItem_wrwry9_61._hideCustomIconOnHover_wrwry9_130:focus ._customIcon_wrwry9_132, ._keyboardNavigationDisabled_wrwry9_98 ._menuItem_wrwry9_61._hideCustomIconOnHover_wrwry9_130:hover ._customIcon_wrwry9_132{
401
+ display:none;
402
+ }
403
+ ._keyboardNavigationEnabled_wrwry9_119 ._menuItem_wrwry9_61._hideSelectedIconOnHover_wrwry9_137:focus ._selectedIcon_wrwry9_139, ._keyboardNavigationDisabled_wrwry9_98 ._menuItem_wrwry9_61._hideSelectedIconOnHover_wrwry9_137:hover ._selectedIcon_wrwry9_139{
404
+ display:none;
405
+ }
406
+ ._menuItem_wrwry9_61._disabled_wrwry9_144{
286
407
  pointer-events:none;
287
408
 
288
409
  color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.5);
289
410
  }
290
- ._disableCursor_1be69r7_107{
291
- pointer-events:none;
411
+ ._contentWrapper_wrwry9_151{
412
+ display:flex;
413
+ flex-grow:1;
414
+
415
+ justify-content:space-between;
416
+ gap:var(--_rs-menu-mi-icon-offset);
292
417
  }
293
- ._content_1be69r7_131{
418
+ ._content_wrwry9_151{
294
419
  flex-grow:1;
295
420
 
296
421
  font-size:inherit;
297
422
  }
298
- ._icon_1be69r7_35{
423
+ ._icon_wrwry9_41{
299
424
  flex:0 0;
300
425
  flex-basis:auto;
301
426
  }
302
- ._icon_1be69r7_35._resizedIcon_1be69r7_141{
427
+ ._icon_wrwry9_41._resizedIcon_wrwry9_169{
303
428
  width:auto;
304
429
  height:var(--_rs-menu-mi-icon-size);
305
430
  }
306
- ._divider_1be69r7_149{
431
+ ._divider_wrwry9_177{
307
432
  flex-shrink:0;
308
433
 
309
434
  width:100%;
@@ -314,13 +439,13 @@
314
439
 
315
440
  background-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
316
441
  }
317
- ._groupHeaderThemeLight_1be69r7_163{
442
+ ._groupHeaderThemeLight_wrwry9_191{
318
443
  --rs-theme-dark:0;
319
444
  }
320
- ._groupHeaderThemeDark_1be69r7_166{
445
+ ._groupHeaderThemeDark_wrwry9_194{
321
446
  --rs-theme-dark:1;
322
447
  }
323
- ._groupHeaderSizeL_1be69r7_170{
448
+ ._groupHeaderSizeL_wrwry9_198{
324
449
  --_rs-menu-gh-vertical-padding:12px;
325
450
  --_rs-menu-gh-horizontal-padding:16px;
326
451
  --_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
@@ -354,7 +479,7 @@
354
479
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
355
480
  --_rs-typography-link-border-bottom-width-from-text:2px;
356
481
  }
357
- ._groupHeaderSizeM_1be69r7_173{
482
+ ._groupHeaderSizeM_wrwry9_201{
358
483
  --_rs-menu-gh-vertical-padding:8px;
359
484
  --_rs-menu-gh-horizontal-padding:16px;
360
485
  --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
@@ -388,7 +513,7 @@
388
513
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
389
514
  --_rs-typography-link-border-bottom-width-from-text:2px;
390
515
  }
391
- ._groupHeaderSizeS_1be69r7_176{
516
+ ._groupHeaderSizeS_wrwry9_204{
392
517
  --_rs-menu-gh-vertical-padding:6px;
393
518
  --_rs-menu-gh-horizontal-padding:8px;
394
519
  --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
@@ -422,7 +547,7 @@
422
547
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
423
548
  --_rs-typography-link-border-bottom-width-from-text:2px;
424
549
  }
425
- ._groupHeader_1be69r7_163{
550
+ ._groupHeader_wrwry9_191{
426
551
  --_rs-theme-dark:var(
427
552
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
428
553
  var(--rs-theme-dark, 0)
@@ -432,7 +557,7 @@
432
557
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
433
558
  }
434
559
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
435
- ._groupHeader_1be69r7_163{
560
+ ._groupHeader_wrwry9_191{
436
561
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
437
562
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
438
563
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -441,7 +566,7 @@
441
566
  }
442
567
  }
443
568
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
444
- ._groupHeader_1be69r7_163{
569
+ ._groupHeader_wrwry9_191{
445
570
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
446
571
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
447
572
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -449,7 +574,7 @@
449
574
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
450
575
  }
451
576
  }
452
- ._groupHeader_1be69r7_163 {
577
+ ._groupHeader_wrwry9_191 {
453
578
  letter-spacing:var(
454
579
  --rs-text-base-letter-spacing,
455
580
  var(--_rs-typography-letter-spacing)
package/lib/index.d.ts CHANGED
@@ -1,10 +1,6 @@
1
1
  export { default as Menu } from './menu';
2
- export type { MenuProps } from './menu';
3
2
  export { MenuContext } from './parts/menu-context';
4
- export type { MenuContextValue, MenuItemIconPlacement } from './parts/menu-context';
5
3
  export { default as MenuItem } from './parts/menu-item';
6
- export type { MenuItemProps } from './parts/menu-item';
7
4
  export { default as Divider } from './parts/divider';
8
- export type { DividerProps } from './parts/divider';
9
5
  export { default as GroupHeader } from './parts/group-header';
10
- export type { GroupHeaderProps } from './parts/group-header';
6
+ export type { GroupHeaderProps, DividerProps, MenuItemProps, MenuProps, MenuContextValue, MenuItemIconPlacement } from './types';
package/lib/menu.d.ts CHANGED
@@ -1,12 +1,18 @@
1
- import React, { HTMLAttributes, ReactNode } from 'react';
2
- import { MenuContextValue } from './parts/menu-context';
3
- export interface MenuProps extends HTMLAttributes<HTMLElement>, Omit<MenuContextValue, 'isKeyboardNavigating' | 'activeItemRef' | 'wrapWithLi'> {
4
- children?: ReactNode;
5
- tag?: React.ElementType;
6
- enableKeyboardNavigation?: boolean;
7
- activateFirstItem?: boolean;
8
- returnFocusOnUnmount?: boolean;
9
- wrapItemsWithLi?: boolean;
10
- }
11
- export declare const Menu: React.FC<MenuProps>;
1
+ import React from 'react';
2
+ import PropTypes from 'prop-types';
3
+ import type { MenuProps } from './types';
4
+ export type { MenuProps } from './types';
5
+ export declare const Menu: {
6
+ ({ enableKeyboardNavigation, activateFirstItem, tag, ...props }: MenuProps): React.JSX.Element;
7
+ propTypes: {
8
+ size: PropTypes.Requireable<string>;
9
+ mode: PropTypes.Requireable<string>;
10
+ theme: PropTypes.Requireable<string>;
11
+ disabled: PropTypes.Requireable<boolean>;
12
+ resizeIcons: PropTypes.Requireable<boolean>;
13
+ iconPlacement: PropTypes.Requireable<string>;
14
+ itemTag: PropTypes.Validator<React.ElementType>;
15
+ tag: PropTypes.Validator<React.ElementType>;
16
+ };
17
+ };
12
18
  export default Menu;