@rescui/menu 0.13.6-RUI-293-Update-menu-component-6ca9d26d3.22 → 0.13.6-RUI-293-Update-menu-component-hover-icon-d8a5b0551.33

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 (10) hide show
  1. package/lib/_virtual/index.css.js +12 -12
  2. package/lib/index.css +79 -63
  3. package/lib/menu.p.module.css.js +34 -28
  4. package/lib/parts/menu-item.d.ts +2 -0
  5. package/lib/parts/menu-item.js +24 -5
  6. package/lib/public-api.p.css +0 -24
  7. package/lib/public-api.pcss +0 -24
  8. package/lib/types.d.ts +4 -0
  9. package/llm/components/menu.md +95 -94
  10. package/package.json +4 -4
package/lib/_virtual/index.css.js CHANGED
@@ -1,15 +1,15 @@
1
1
  var styles = {
2
- "icon": "_icon_7dcaqk_4",
3
- "sizeXS": "_sizeXS_7dcaqk_14",
4
- "sizeS": "_sizeS_7dcaqk_18",
5
- "sizeM": "_sizeM_7dcaqk_22",
6
- "sizeL": "_sizeL_7dcaqk_26",
7
- "light": "_light_7dcaqk_30",
8
- "dark": "_dark_7dcaqk_34",
9
- "allVariants": "_allVariants_7dcaqk_48",
10
- "variant16": "_variant16_7dcaqk_53",
11
- "variant20": "_variant20_7dcaqk_54",
12
- "variant24": "_variant24_7dcaqk_55",
13
- "variant28": "_variant28_7dcaqk_58"
2
+ "icon": "_icon_selttq_4",
3
+ "sizeXS": "_sizeXS_selttq_14",
4
+ "sizeS": "_sizeS_selttq_18",
5
+ "sizeM": "_sizeM_selttq_22",
6
+ "sizeL": "_sizeL_selttq_26",
7
+ "light": "_light_selttq_30",
8
+ "dark": "_dark_selttq_34",
9
+ "allVariants": "_allVariants_selttq_48",
10
+ "variant16": "_variant16_selttq_53",
11
+ "variant20": "_variant20_selttq_54",
12
+ "variant24": "_variant24_selttq_55",
13
+ "variant28": "_variant28_selttq_58"
14
14
  };
15
15
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- ._icon_7dcaqk_4{
1
+ ._icon_selttq_4{
2
2
  --_rs-theme-dark:var(
3
3
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
4
4
  var(--rs-theme-dark, 0)
@@ -8,7 +8,7 @@
8
8
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
9
9
  }
10
10
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
11
- ._icon_7dcaqk_4{
11
+ ._icon_selttq_4{
12
12
  --_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)));
13
13
  --_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)));
14
14
  --_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)));
@@ -17,7 +17,7 @@
17
17
  }
18
18
  }
19
19
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
20
- ._icon_7dcaqk_4{
20
+ ._icon_selttq_4{
21
21
  --_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);
22
22
  --_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));
23
23
  --_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));
@@ -25,30 +25,30 @@
25
25
  --_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));
26
26
  }
27
27
  }
28
- ._icon_7dcaqk_4{
28
+ ._icon_selttq_4{
29
29
 
30
30
  fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
31
31
 
32
32
  width:var(--rs-icons-width, auto);
33
33
  height:var(--rs-icons-height, var(--_rs-icons-height));
34
34
  }
35
- ._sizeXS_7dcaqk_14{
35
+ ._sizeXS_selttq_14{
36
36
  --_rs-icons-height:16px;
37
37
  }
38
- ._sizeS_7dcaqk_18{
38
+ ._sizeS_selttq_18{
39
39
  --_rs-icons-height:20px;
40
40
  }
41
- ._sizeM_7dcaqk_22{
41
+ ._sizeM_selttq_22{
42
42
  --_rs-icons-height:24px;
43
43
  }
44
- ._sizeL_7dcaqk_26{
44
+ ._sizeL_selttq_26{
45
45
  --_rs-icons-height:28px;
46
46
  }
47
- ._light_7dcaqk_30{
47
+ ._light_selttq_30{
48
48
  --rs-theme-dark:0;
49
49
  --_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));
50
50
  }
51
- ._dark_7dcaqk_34{
51
+ ._dark_selttq_34{
52
52
  --rs-theme-dark:1;
53
53
  --_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));
54
54
  }
@@ -60,52 +60,52 @@
60
60
  transform:rotate(360deg);
61
61
  }
62
62
  }
63
- ._allVariants_7dcaqk_48{
63
+ ._allVariants_selttq_48{
64
64
  aspect-ratio:var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);
65
65
  container:rs-icon / size;
66
66
  }
67
- ._variant16_7dcaqk_53,
68
- ._variant20_7dcaqk_54,
69
- ._variant24_7dcaqk_55{
67
+ ._variant16_selttq_53,
68
+ ._variant20_selttq_54,
69
+ ._variant24_selttq_55{
70
70
  display:none;
71
71
  }
72
- ._variant28_7dcaqk_58{
72
+ ._variant28_selttq_58{
73
73
  display:block;
74
74
  }
75
75
  @container rs-icon (max-height: 24px){
76
- ._variant24_7dcaqk_55{
76
+ ._variant24_selttq_55{
77
77
  display:block;
78
78
  }
79
- ._variant28_7dcaqk_58{
79
+ ._variant28_selttq_58{
80
80
  display:none;
81
81
  }
82
82
  }
83
83
  @container rs-icon (max-height: 20px){
84
- ._variant20_7dcaqk_54{
84
+ ._variant20_selttq_54{
85
85
  display:block;
86
86
  }
87
- ._variant24_7dcaqk_55{
87
+ ._variant24_selttq_55{
88
88
  display:none;
89
89
  }
90
90
  }
91
91
  @container rs-icon (max-height: 16px){
92
- ._variant16_7dcaqk_53{
92
+ ._variant16_selttq_53{
93
93
  display:block;
94
94
  }
95
- ._variant20_7dcaqk_54{
95
+ ._variant20_selttq_54{
96
96
  display:none;
97
97
  }
98
98
  }
99
- ._themeLight_2x3bw5_8{
99
+ ._themeLight_1khtdmq_8{
100
100
  --rs-theme-dark:0;
101
101
  }
102
- ._themeDark_2x3bw5_11{
102
+ ._themeDark_1khtdmq_11{
103
103
  --rs-theme-dark:1;
104
104
  }
105
- ._menu_2x3bw5_15:focus{
105
+ ._menu_1khtdmq_15:focus{
106
106
  outline:none;
107
107
  }
108
- ._sizeS_2x3bw5_21{
108
+ ._sizeS_1khtdmq_21{
109
109
  --_rs-menu-mi-icon-offset:8px;
110
110
  --_rs-menu-mi-icon-size:20px;
111
111
  --_rs-menu-mi-vertical-padding:6px;
@@ -144,7 +144,7 @@
144
144
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
145
145
  --_rs-typography-link-border-bottom-width-from-text:1px;
146
146
  }
147
- ._sizeM_2x3bw5_24{
147
+ ._sizeM_1khtdmq_24{
148
148
  --_rs-menu-mi-icon-offset:8px;
149
149
  --_rs-menu-mi-icon-size:24px;
150
150
  --_rs-menu-mi-vertical-padding:8px;
@@ -187,11 +187,11 @@
187
187
  --_rs-typography-link-border-bottom-width-from-text:1px;
188
188
  }
189
189
  @media screen and (max-width: 640px){
190
- ._sizeM_2x3bw5_24{
190
+ ._sizeM_1khtdmq_24{
191
191
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
192
192
  }
193
193
  }
194
- ._sizeL_2x3bw5_27{
194
+ ._sizeL_1khtdmq_27{
195
195
  --_rs-menu-mi-icon-offset:16px;
196
196
  --_rs-menu-mi-icon-size:28px;
197
197
  --_rs-menu-mi-vertical-padding:12px;
@@ -234,16 +234,16 @@
234
234
  --_rs-typography-link-border-bottom-width-from-text:1px;
235
235
  }
236
236
  @media screen and (max-width: 640px){
237
- ._sizeL_2x3bw5_27{
237
+ ._sizeL_1khtdmq_27{
238
238
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
239
239
  }
240
240
  }
241
- ._modeClassic_2x3bw5_31{
241
+ ._modeClassic_1khtdmq_31{
242
242
  --_rs-menu-mi-horizontal-padding-with-mode:var(
243
243
  --_rs-menu-mi-horizontal-padding
244
244
  );
245
245
  }
246
- ._modeClassic_2x3bw5_31 [data-rs-internal="menu__menu-item__inner"]{
246
+ ._modeClassic_1khtdmq_31 [data-rs-internal="menu__menu-item__inner"]{
247
247
  --_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);
248
248
  --_rs-menu-mi-active-background:var(--_rs-color-primary-t-fog);
249
249
  --_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));
@@ -255,12 +255,12 @@
255
255
  );
256
256
  --_rs-menu-mi-hover-background:var(--_rs-color-primary);
257
257
  }
258
- ._modeRock_2x3bw5_34{
258
+ ._modeRock_1khtdmq_34{
259
259
  --_rs-menu-mi-horizontal-padding-with-mode:var(
260
260
  --_rs-menu-mi-horizontal-padding
261
261
  );
262
262
  }
263
- ._modeRock_2x3bw5_34 [data-rs-internal="menu__menu-item__inner"]{
263
+ ._modeRock_1khtdmq_34 [data-rs-internal="menu__menu-item__inner"]{
264
264
  --_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);
265
265
  --_rs-menu-mi-active-background:transparent;
266
266
  --_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));
@@ -268,10 +268,10 @@
268
268
  --_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));
269
269
  --_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));
270
270
  }
271
- ._modeClear_2x3bw5_37{
271
+ ._modeClear_1khtdmq_37{
272
272
  --_rs-menu-mi-horizontal-padding-with-mode:0;
273
273
  }
274
- ._modeClear_2x3bw5_37 [data-rs-internal="menu__menu-item__inner"]{
274
+ ._modeClear_1khtdmq_37 [data-rs-internal="menu__menu-item__inner"]{
275
275
  --_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));
276
276
  --_rs-menu-mi-active-background:transparent;
277
277
  --_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));
@@ -279,18 +279,24 @@
279
279
  --_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));
280
280
  --_rs-menu-mi-hover-background:transparent;
281
281
  }
282
- ._iconPlacementLeft_2x3bw5_41{
282
+ ._iconPlacementLeft_1khtdmq_41{
283
283
  --_rs-menu-mi-flex-direction:row;
284
284
  --_rs-menu-mi-justify-content:initial;
285
285
  }
286
- ._iconPlacementRight_2x3bw5_45{
286
+ ._iconPlacementRight_1khtdmq_45{
287
287
  --_rs-menu-mi-flex-direction:row-reverse;
288
288
  --_rs-menu-mi-justify-content:space-between;
289
289
  }
290
- ._wrapper_2x3bw5_49{
290
+ ._wrapper_1khtdmq_49{
291
291
  display:flex;
292
292
  }
293
- ._menuItem_2x3bw5_53{
293
+ ._hoverIcon_1khtdmq_53{
294
+ visibility:hidden;
295
+ }
296
+ ._hoverIcon_1khtdmq_53._hoverIconNoReserve_1khtdmq_56{
297
+ display:none;
298
+ }
299
+ ._menuItem_1khtdmq_61{
294
300
  --_rs-theme-dark:var(
295
301
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
296
302
  var(--rs-theme-dark, 0)
@@ -300,7 +306,7 @@
300
306
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
301
307
  }
302
308
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
303
- ._menuItem_2x3bw5_53{
309
+ ._menuItem_1khtdmq_61{
304
310
  --_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)));
305
311
  --_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)));
306
312
  --_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)));
@@ -309,7 +315,7 @@
309
315
  }
310
316
  }
311
317
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
312
- ._menuItem_2x3bw5_53{
318
+ ._menuItem_1khtdmq_61{
313
319
  --_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);
314
320
  --_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));
315
321
  --_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));
@@ -317,7 +323,7 @@
317
323
  --_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));
318
324
  }
319
325
  }
320
- ._menuItem_2x3bw5_53 {
326
+ ._menuItem_1khtdmq_61 {
321
327
  letter-spacing:var(
322
328
  --rs-text-base-letter-spacing,
323
329
  var(--_rs-typography-letter-spacing)
@@ -358,51 +364,61 @@
358
364
  -webkit-font-smoothing:inherit;
359
365
  -moz-osx-font-smoothing:inherit;
360
366
  }
361
- ._menuItem_2x3bw5_53:focus{
367
+ ._menuItem_1khtdmq_61:focus{
362
368
  outline:none;
363
369
  }
364
- ._keyboardNavigationDisabled_2x3bw5_90 ._menuItem_2x3bw5_53:focus[data-focus-method='key']{
370
+ ._keyboardNavigationDisabled_1khtdmq_98 ._menuItem_1khtdmq_61:focus[data-focus-method='key']{
365
371
  box-shadow:0 0 0 2px var(--_rs-color-primary-dim), inset 0 0 0 2px var(--_rs-color-primary-dim);
366
372
  }
367
- ._menuItem_2x3bw5_53:active{
373
+ ._menuItem_1khtdmq_61:active{
368
374
  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
375
  background:var(--_rs-menu-mi-active-background);
370
376
  }
371
- ._menuItem_2x3bw5_53._selected_2x3bw5_104{
377
+ ._menuItem_1khtdmq_61._selected_1khtdmq_112{
372
378
  color:var(--_rs-menu-mi-selected-color);
373
379
  background:var(--_rs-menu-mi-selected-background);
374
380
  }
375
- ._keyboardNavigationEnabled_2x3bw5_111 ._menuItem_2x3bw5_53:focus,
376
- ._keyboardNavigationDisabled_2x3bw5_90 ._menuItem_2x3bw5_53:hover{
381
+ ._keyboardNavigationEnabled_1khtdmq_119 ._menuItem_1khtdmq_61:focus,
382
+ ._keyboardNavigationDisabled_1khtdmq_98 ._menuItem_1khtdmq_61:hover{
377
383
  color:var(--_rs-menu-mi-hover-color);
378
384
  background:var(--_rs-menu-mi-hover-background);
379
385
  }
380
- ._menuItem_2x3bw5_53._disabled_2x3bw5_117{
386
+ ._keyboardNavigationEnabled_1khtdmq_119 ._menuItem_1khtdmq_61:focus ._hoverIcon_1khtdmq_53, ._keyboardNavigationDisabled_1khtdmq_98 ._menuItem_1khtdmq_61:hover ._hoverIcon_1khtdmq_53{
387
+ display:block;
388
+ visibility:visible;
389
+ }
390
+ ._keyboardNavigationEnabled_1khtdmq_119 ._menuItem_1khtdmq_61._hideCustomIconOnHover_1khtdmq_130:focus ._customIcon_1khtdmq_132, ._keyboardNavigationDisabled_1khtdmq_98 ._menuItem_1khtdmq_61._hideCustomIconOnHover_1khtdmq_130:hover ._customIcon_1khtdmq_132{
391
+ display:none;
392
+ }
393
+ ._keyboardNavigationEnabled_1khtdmq_119 ._menuItem_1khtdmq_61._hideSelectedIconOnHover_1khtdmq_137:focus ._selectedIcon_1khtdmq_139, ._keyboardNavigationDisabled_1khtdmq_98 ._menuItem_1khtdmq_61._hideSelectedIconOnHover_1khtdmq_137:hover ._selectedIcon_1khtdmq_139{
394
+ display:none;
395
+ }
396
+ ._menuItem_1khtdmq_61._disabled_1khtdmq_144{
381
397
  pointer-events:none;
382
398
 
383
399
  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);
384
400
  }
385
- ._contentWrapper_2x3bw5_124{
401
+ ._contentWrapper_1khtdmq_151{
386
402
  display:flex;
387
403
  flex-grow:1;
388
404
 
389
405
  justify-content:space-between;
390
406
  gap:var(--_rs-menu-mi-icon-offset);
391
407
  }
392
- ._content_2x3bw5_124{
408
+ ._content_1khtdmq_151{
393
409
  flex-grow:1;
394
410
 
395
411
  font-size:inherit;
396
412
  }
397
- ._icon_2x3bw5_41{
413
+ ._icon_1khtdmq_41{
398
414
  flex:0 0;
399
415
  flex-basis:auto;
400
416
  }
401
- ._icon_2x3bw5_41._resizedIcon_2x3bw5_142{
417
+ ._icon_1khtdmq_41._resizedIcon_1khtdmq_169{
402
418
  width:auto;
403
419
  height:var(--_rs-menu-mi-icon-size);
404
420
  }
405
- ._divider_2x3bw5_150{
421
+ ._divider_1khtdmq_177{
406
422
  flex-shrink:0;
407
423
 
408
424
  width:100%;
@@ -413,13 +429,13 @@
413
429
 
414
430
  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);
415
431
  }
416
- ._groupHeaderThemeLight_2x3bw5_164{
432
+ ._groupHeaderThemeLight_1khtdmq_191{
417
433
  --rs-theme-dark:0;
418
434
  }
419
- ._groupHeaderThemeDark_2x3bw5_167{
435
+ ._groupHeaderThemeDark_1khtdmq_194{
420
436
  --rs-theme-dark:1;
421
437
  }
422
- ._groupHeaderSizeL_2x3bw5_171{
438
+ ._groupHeaderSizeL_1khtdmq_198{
423
439
  --_rs-menu-gh-vertical-padding:12px;
424
440
  --_rs-menu-gh-horizontal-padding:16px;
425
441
  --_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
@@ -453,7 +469,7 @@
453
469
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
454
470
  --_rs-typography-link-border-bottom-width-from-text:2px;
455
471
  }
456
- ._groupHeaderSizeM_2x3bw5_174{
472
+ ._groupHeaderSizeM_1khtdmq_201{
457
473
  --_rs-menu-gh-vertical-padding:8px;
458
474
  --_rs-menu-gh-horizontal-padding:16px;
459
475
  --_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
@@ -487,7 +503,7 @@
487
503
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
488
504
  --_rs-typography-link-border-bottom-width-from-text:2px;
489
505
  }
490
- ._groupHeaderSizeS_2x3bw5_177{
506
+ ._groupHeaderSizeS_1khtdmq_204{
491
507
  --_rs-menu-gh-vertical-padding:6px;
492
508
  --_rs-menu-gh-horizontal-padding:8px;
493
509
  --_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
@@ -521,7 +537,7 @@
521
537
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
522
538
  --_rs-typography-link-border-bottom-width-from-text:2px;
523
539
  }
524
- ._groupHeader_2x3bw5_164{
540
+ ._groupHeader_1khtdmq_191{
525
541
  --_rs-theme-dark:var(
526
542
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
527
543
  var(--rs-theme-dark, 0)
@@ -531,7 +547,7 @@
531
547
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
532
548
  }
533
549
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
534
- ._groupHeader_2x3bw5_164{
550
+ ._groupHeader_1khtdmq_191{
535
551
  --_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)));
536
552
  --_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)));
537
553
  --_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)));
@@ -540,7 +556,7 @@
540
556
  }
541
557
  }
542
558
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
543
- ._groupHeader_2x3bw5_164{
559
+ ._groupHeader_1khtdmq_191{
544
560
  --_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);
545
561
  --_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));
546
562
  --_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));
@@ -548,7 +564,7 @@
548
564
  --_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));
549
565
  }
550
566
  }
551
- ._groupHeader_2x3bw5_164 {
567
+ ._groupHeader_1khtdmq_191 {
552
568
  letter-spacing:var(
553
569
  --rs-text-base-letter-spacing,
554
570
  var(--_rs-typography-letter-spacing)
package/lib/menu.p.module.css.js CHANGED
@@ -1,31 +1,37 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_2x3bw5_8",
3
- "themeDark": "_themeDark_2x3bw5_11",
4
- "menu": "_menu_2x3bw5_15",
5
- "sizeS": "_sizeS_2x3bw5_21",
6
- "sizeM": "_sizeM_2x3bw5_24",
7
- "sizeL": "_sizeL_2x3bw5_27",
8
- "modeClassic": "_modeClassic_2x3bw5_31",
9
- "modeRock": "_modeRock_2x3bw5_34",
10
- "modeClear": "_modeClear_2x3bw5_37",
11
- "iconPlacementLeft": "_iconPlacementLeft_2x3bw5_41",
12
- "iconPlacementRight": "_iconPlacementRight_2x3bw5_45",
13
- "wrapper": "_wrapper_2x3bw5_49",
14
- "menuItem": "_menuItem_2x3bw5_53",
15
- "keyboardNavigationDisabled": "_keyboardNavigationDisabled_2x3bw5_90",
16
- "selected": "_selected_2x3bw5_104",
17
- "keyboardNavigationEnabled": "_keyboardNavigationEnabled_2x3bw5_111",
18
- "disabled": "_disabled_2x3bw5_117",
19
- "contentWrapper": "_contentWrapper_2x3bw5_124",
20
- "content": "_content_2x3bw5_124",
21
- "icon": "_icon_2x3bw5_41",
22
- "resizedIcon": "_resizedIcon_2x3bw5_142",
23
- "divider": "_divider_2x3bw5_150",
24
- "groupHeaderThemeLight": "_groupHeaderThemeLight_2x3bw5_164",
25
- "groupHeaderThemeDark": "_groupHeaderThemeDark_2x3bw5_167",
26
- "groupHeaderSizeL": "_groupHeaderSizeL_2x3bw5_171",
27
- "groupHeaderSizeM": "_groupHeaderSizeM_2x3bw5_174",
28
- "groupHeaderSizeS": "_groupHeaderSizeS_2x3bw5_177",
29
- "groupHeader": "_groupHeader_2x3bw5_164"
2
+ "themeLight": "_themeLight_1khtdmq_8",
3
+ "themeDark": "_themeDark_1khtdmq_11",
4
+ "menu": "_menu_1khtdmq_15",
5
+ "sizeS": "_sizeS_1khtdmq_21",
6
+ "sizeM": "_sizeM_1khtdmq_24",
7
+ "sizeL": "_sizeL_1khtdmq_27",
8
+ "modeClassic": "_modeClassic_1khtdmq_31",
9
+ "modeRock": "_modeRock_1khtdmq_34",
10
+ "modeClear": "_modeClear_1khtdmq_37",
11
+ "iconPlacementLeft": "_iconPlacementLeft_1khtdmq_41",
12
+ "iconPlacementRight": "_iconPlacementRight_1khtdmq_45",
13
+ "wrapper": "_wrapper_1khtdmq_49",
14
+ "hoverIcon": "_hoverIcon_1khtdmq_53",
15
+ "hoverIconNoReserve": "_hoverIconNoReserve_1khtdmq_56",
16
+ "menuItem": "_menuItem_1khtdmq_61",
17
+ "keyboardNavigationDisabled": "_keyboardNavigationDisabled_1khtdmq_98",
18
+ "selected": "_selected_1khtdmq_112",
19
+ "keyboardNavigationEnabled": "_keyboardNavigationEnabled_1khtdmq_119",
20
+ "hideCustomIconOnHover": "_hideCustomIconOnHover_1khtdmq_130",
21
+ "customIcon": "_customIcon_1khtdmq_132",
22
+ "hideSelectedIconOnHover": "_hideSelectedIconOnHover_1khtdmq_137",
23
+ "selectedIcon": "_selectedIcon_1khtdmq_139",
24
+ "disabled": "_disabled_1khtdmq_144",
25
+ "contentWrapper": "_contentWrapper_1khtdmq_151",
26
+ "content": "_content_1khtdmq_151",
27
+ "icon": "_icon_1khtdmq_41",
28
+ "resizedIcon": "_resizedIcon_1khtdmq_169",
29
+ "divider": "_divider_1khtdmq_177",
30
+ "groupHeaderThemeLight": "_groupHeaderThemeLight_1khtdmq_191",
31
+ "groupHeaderThemeDark": "_groupHeaderThemeDark_1khtdmq_194",
32
+ "groupHeaderSizeL": "_groupHeaderSizeL_1khtdmq_198",
33
+ "groupHeaderSizeM": "_groupHeaderSizeM_1khtdmq_201",
34
+ "groupHeaderSizeS": "_groupHeaderSizeS_1khtdmq_204",
35
+ "groupHeader": "_groupHeader_1khtdmq_191"
30
36
  };
31
37
  export { styles as default };
package/lib/parts/menu-item.d.ts CHANGED
@@ -14,6 +14,7 @@ export declare const MenuItem: React.ForwardRefExoticComponent<{
14
14
  children?: React.ReactNode;
15
15
  key?: string;
16
16
  'data-test'?: string;
17
+ hoverIcon?: JSX.Element;
17
18
  } & Omit<React.AllHTMLAttributes<Element>, keyof {
18
19
  className?: string;
19
20
  tag?: React.ElementType;
@@ -27,5 +28,6 @@ export declare const MenuItem: React.ForwardRefExoticComponent<{
27
28
  children?: React.ReactNode;
28
29
  key?: string;
29
30
  'data-test'?: string;
31
+ hoverIcon?: JSX.Element;
30
32
  }> & React.RefAttributes<HTMLElement>>;
31
33
  export default MenuItem;
package/lib/parts/menu-item.js CHANGED
@@ -23,6 +23,11 @@ const SIZE_STYLES = {
23
23
  const THEME_STYLES = {
24
24
  light: styles.themeLight,
25
25
  dark: styles.themeDark
26
+ };
27
+ const HOVER_ICON_WILL_REPLACE_STYLES = {
28
+ custom: styles.hideCustomIconOnHover,
29
+ selected: styles.hideSelectedIconOnHover,
30
+ none: ''
26
31
  }; // eslint-disable-next-line complexity
27
32
 
28
33
  const MenuItemInner = (_ref, ref) => {
@@ -42,6 +47,7 @@ const MenuItemInner = (_ref, ref) => {
42
47
  onMouseEnter,
43
48
  role,
44
49
  tabIndex,
50
+ hoverIcon,
45
51
  ...restProps
46
52
  } = _ref;
47
53
  const {
@@ -78,10 +84,11 @@ const MenuItemInner = (_ref, ref) => {
78
84
  const actualSize = menuContext.size ?? size;
79
85
  const resizeIcons = menuContext.resizeIcons ?? false;
80
86
  const actualDisabled = menuContext.disabled || disabled;
81
- const iconElement = icon ? /*#__PURE__*/cloneElement(icon, {
82
- className: cn(icon.props.className, styles.icon, resizeIcons && styles.resizedIcon),
87
+ const iconElement = /*#__PURE__*/React.isValidElement(icon) ? /*#__PURE__*/cloneElement(icon, {
88
+ className: cn(icon.props.className, styles.icon, styles.customIcon, resizeIcons && styles.resizedIcon),
83
89
  'data-render-all-sizes': true
84
90
  }) : null;
91
+ const hasHoverIcon = /*#__PURE__*/React.isValidElement(hoverIcon);
85
92
  const rovingTabIndex = currentActiveItemEl === thisRef ? 0 : -1;
86
93
  const resolvedTabIndex = keyboardNavigationEnabled ? rovingTabIndex : tabIndex ?? 0;
87
94
 
@@ -126,6 +133,14 @@ const MenuItemInner = (_ref, ref) => {
126
133
  }
127
134
  };
128
135
 
136
+ let hoverIconWillReplace = 'none';
137
+
138
+ if (hasHoverIcon && iconElement && actualIconPlacement === 'right') {
139
+ hoverIconWillReplace = 'custom';
140
+ } else if (hasHoverIcon && selected) {
141
+ hoverIconWillReplace = 'selected';
142
+ }
143
+
129
144
  const Wrapper = wrapWithLi ? 'li' : 'div';
130
145
  return /*#__PURE__*/React.createElement(Wrapper, {
131
146
  className: cn(styles.wrapper, className, ICON_PLACEMENT_STYLES[actualIconPlacement], MODE_STYLES[actualMode], SIZE_STYLES[actualSize], THEME_STYLES[actualTheme]),
@@ -137,7 +152,7 @@ const MenuItemInner = (_ref, ref) => {
137
152
  onKeyDown: handleKeyDown,
138
153
  onMouseEnter: handleMouseEnter,
139
154
  ref: handleRef,
140
- className: cn(styles.menuItem, actualDisabled && styles.disabled, selected && styles.selected),
155
+ className: cn(styles.menuItem, actualDisabled && styles.disabled, selected && styles.selected, HOVER_ICON_WILL_REPLACE_STYLES[hoverIconWillReplace]),
141
156
  "data-test": restProps['data-test'] ?? 'menu-item',
142
157
  "data-rs-internal": 'menu__menu-item__inner',
143
158
  role: role ?? (keyboardNavigationEnabled ? 'option' : undefined),
@@ -149,8 +164,11 @@ const MenuItemInner = (_ref, ref) => {
149
164
  }, /*#__PURE__*/React.createElement("span", {
150
165
  className: styles.content
151
166
  }, children), selected && /*#__PURE__*/React.createElement(CheckOutlineIcon, {
152
- className: cn(styles.icon, resizeIcons && styles.resizedIcon),
167
+ className: cn(styles.icon, styles.selectedIcon, resizeIcons && styles.resizedIcon),
153
168
  "data-render-all-sizes": true
169
+ }), hasHoverIcon && /*#__PURE__*/React.cloneElement(hoverIcon, {
170
+ className: cn(hoverIcon.props.className, styles.icon, styles.hoverIcon, resizeIcons && styles.resizedIcon, hoverIconWillReplace !== 'none' && styles.hoverIconNoReserve),
171
+ 'data-render-all-sizes': true
154
172
  }))));
155
173
  };
156
174
 
@@ -163,6 +181,7 @@ MenuItem.propTypes = {
163
181
  selected: PropTypes.bool,
164
182
  icon: PropTypes.element,
165
183
  iconPlacement: PropTypes.oneOf(['left', 'right']),
166
- tag: PropTypes.elementType
184
+ tag: PropTypes.elementType,
185
+ hoverIcon: PropTypes.element
167
186
  };
168
187
  export { MenuItem, MenuItem as default };
package/lib/public-api.p.css CHANGED
@@ -286,18 +286,6 @@
286
286
  --_rs-menu-mi-hover-background:transparent;
287
287
  }
288
288
  }
289
- @define-mixin rs-menu-icon-placement-left{
290
- & [data-rs-internal="menu__menu-item"]{
291
- --_rs-menu-mi-flex-direction:row;
292
- --_rs-menu-mi-justify-content:initial;
293
- }
294
- }
295
- @define-mixin rs-menu-icon-placement-right{
296
- & [data-rs-internal="menu__menu-item"]{
297
- --_rs-menu-mi-flex-direction:row-reverse;
298
- --_rs-menu-mi-justify-content:space-between;
299
- }
300
- }
301
289
  @define-mixin rs-menu-item-size-s{
302
290
  &[class]{
303
291
  --_rs-menu-mi-icon-offset:8px;
@@ -484,18 +472,6 @@
484
472
  --_rs-menu-mi-hover-background:transparent;
485
473
  }
486
474
  }
487
- @define-mixin rs-menu-item-icon-placement-left{
488
- &[class]{
489
- --_rs-menu-mi-flex-direction:row;
490
- --_rs-menu-mi-justify-content:initial;
491
- }
492
- }
493
- @define-mixin rs-menu-item-icon-placement-right{
494
- &[class]{
495
- --_rs-menu-mi-flex-direction:row-reverse;
496
- --_rs-menu-mi-justify-content:space-between;
497
- }
498
- }
499
475
  @define-mixin rs-group-header-size-s{
500
476
  &[class]{
501
477
  --_rs-menu-gh-vertical-padding:6px;
package/lib/public-api.pcss CHANGED
@@ -286,18 +286,6 @@
286
286
  --_rs-menu-mi-hover-background:transparent;
287
287
  }
288
288
  }
289
- @define-mixin rs-menu-icon-placement-left{
290
- & [data-rs-internal="menu__menu-item"]{
291
- --_rs-menu-mi-flex-direction:row;
292
- --_rs-menu-mi-justify-content:initial;
293
- }
294
- }
295
- @define-mixin rs-menu-icon-placement-right{
296
- & [data-rs-internal="menu__menu-item"]{
297
- --_rs-menu-mi-flex-direction:row-reverse;
298
- --_rs-menu-mi-justify-content:space-between;
299
- }
300
- }
301
289
  @define-mixin rs-menu-item-size-s{
302
290
  &[class]{
303
291
  --_rs-menu-mi-icon-offset:8px;
@@ -484,18 +472,6 @@
484
472
  --_rs-menu-mi-hover-background:transparent;
485
473
  }
486
474
  }
487
- @define-mixin rs-menu-item-icon-placement-left{
488
- &[class]{
489
- --_rs-menu-mi-flex-direction:row;
490
- --_rs-menu-mi-justify-content:initial;
491
- }
492
- }
493
- @define-mixin rs-menu-item-icon-placement-right{
494
- &[class]{
495
- --_rs-menu-mi-flex-direction:row-reverse;
496
- --_rs-menu-mi-justify-content:space-between;
497
- }
498
- }
499
475
  @define-mixin rs-group-header-size-s{
500
476
  &[class]{
501
477
  --_rs-menu-gh-vertical-padding:6px;
package/lib/types.d.ts CHANGED
@@ -68,6 +68,10 @@ type MenuItemSpecificProps = {
68
68
  children?: React.ReactNode;
69
69
  key?: string;
70
70
  'data-test'?: string;
71
+ /**
72
+ * Set the icon to be displayed when hovering over the menu item.
73
+ */
74
+ hoverIcon?: JSX.Element;
71
75
  };
72
76
  export type MenuItemProps = MenuItemSpecificProps & Omit<React.AllHTMLAttributes<Element>, keyof MenuItemSpecificProps>;
73
77
  export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
package/llm/components/menu.md CHANGED
@@ -8,6 +8,8 @@ A menu is a group of elements consisting of actions and links, represented by co
8
8
 
9
9
  ### Features showcase
10
10
 
11
+ Do not combine `iconPlacement="right"` with `selected` prop.
12
+
11
13
  #### Example
12
14
 
13
15
  ```tsx
@@ -88,6 +90,37 @@ import {
88
90
  </Menu>;
89
91
  ```
90
92
 
93
+ #### With hover icon
94
+
95
+ You can use `hoverIcon` prop to set the icon for the hovered items.
96
+
97
+ ```tsx
98
+ import { Menu, MenuItem } from '@rescui/menu';
99
+ import {
100
+ DownloadOutlineIcon,
101
+ CloseOutlineIcon,
102
+ LeftOutlineIcon
103
+ } from '@rescui/icons';
104
+
105
+ <div>
106
+ <Menu size="s" resizeIcons style={{ maxWidth: 200 }}>
107
+ <MenuItem hoverIcon={<DownloadOutlineIcon />}>Cart</MenuItem>
108
+ <MenuItem hoverIcon={<CloseOutlineIcon />} selected>
109
+ Bug
110
+ </MenuItem>
111
+ <MenuItem hoverIcon={<DownloadOutlineIcon />}>Person</MenuItem>
112
+ <MenuItem
113
+ icon={<LeftOutlineIcon />}
114
+ iconPlacement="right"
115
+ hoverIcon={<CloseOutlineIcon />}
116
+ >
117
+ Team
118
+ </MenuItem>
119
+ <MenuItem hoverIcon={<DownloadOutlineIcon />}>Success</MenuItem>
120
+ </Menu>
121
+ </div>;
122
+ ```
123
+
91
124
  #### Contrast primary color
92
125
 
93
126
  If your primary color background requires dark text color, use `--rs-menu-contrast-primary` CSS variable.
@@ -140,12 +173,10 @@ render(<Demo />);
140
173
  | `rs-menu-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
141
174
  | `rs-menu-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
142
175
  | `rs-menu-mode-clear` | prop: `mode`<br><br>value: `"clear"` |
143
- | `rs-menu-icon-placement-left` | prop: `iconPlacement`<br><br>value: `"left"` |
144
- | `rs-menu-icon-placement-right` | prop: `iconPlacement`<br><br>value: `"right"` |
145
176
 
146
177
  ##### Demo
147
178
 
148
- Instead of separate classes, it may be a single class with `@media` queries inside:
179
+ Use the controls to see the effect at different viewport widths.
149
180
 
150
181
  ```tsx
151
182
  import { Menu, MenuItem } from '@rescui/menu';
@@ -157,68 +188,57 @@ import {
157
188
  SuccessOutlineIcon
158
189
  } from '@rescui/icons';
159
190
 
160
- const MyMenu = ({ className }) => {
191
+ const MyMenu = () => {
161
192
  return (
162
- <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
163
- <Menu
164
- mode="rock"
165
- size="l"
166
- iconPlacement={'left'}
167
- style={{ maxWidth: 300 }}
168
- className={className}
169
- >
170
- <MenuItem icon={<CartOutlineIcon size="l" className="icon" />}>Cart</MenuItem>
171
- <MenuItem icon={<BugOutlineIcon size="l" className="icon" />}>Bug</MenuItem>
172
- <MenuItem icon={<PersonOutlineIcon size="l" className="icon" />}>
173
- Person
174
- </MenuItem>
175
- <MenuItem icon={<TeamOutlineIcon size="l" className="icon" />}>Team</MenuItem>
176
- <MenuItem icon={<SuccessOutlineIcon size="l" className="icon" />}>
177
- Success
178
- </MenuItem>
179
- </Menu>
180
- </div>
193
+ <Menu
194
+ mode="rock"
195
+ size="l"
196
+ iconPlacement={'left'}
197
+ style={{ maxWidth: 300 }}
198
+ className="my-menu"
199
+ >
200
+ <MenuItem icon={<CartOutlineIcon size="l" className="icon" />}>
201
+ Cart
202
+ </MenuItem>
203
+ <MenuItem icon={<BugOutlineIcon size="l" className="icon" />}>
204
+ Bug
205
+ </MenuItem>
206
+ <MenuItem icon={<PersonOutlineIcon size="l" className="icon" />}>
207
+ Person
208
+ </MenuItem>
209
+ <MenuItem icon={<TeamOutlineIcon size="l" className="icon" />}>
210
+ Team
211
+ </MenuItem>
212
+ <MenuItem icon={<SuccessOutlineIcon size="l" className="icon" />}>
213
+ Success
214
+ </MenuItem>
215
+ </Menu>
181
216
  );
182
217
  };
183
218
 
184
- render(
185
- <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
186
- <div>
187
- <p>Default:</p>
188
- <MyMenu />
189
- </div>
190
- <div>
191
- <p>Var1:</p>
192
- <MyMenu className={`my-menu-var-1`} />
193
- </div>
194
- <div>
195
- <p>Var1 & Var2 combined:</p>
196
- <MyMenu className={`my-menu-var-1 my-menu-var-2`} />
197
- </div>
198
- </div>
199
- );
219
+ render(<MyMenu />);
200
220
  ```
201
221
 
202
222
  ```postcss attached
203
223
  @import '@rescui/menu/lib/public-api.p.css';
204
224
  @import '@rescui/icons/lib/public-api.p.css';
205
225
 
206
- .my-menu-var-1 {
207
- @mixin rs-menu-size-s;
208
- @mixin rs-menu-mode-classic;
209
- @mixin rs-menu-icon-placement-right;
226
+ .my-menu {
227
+ @media (max-width: 640px) {
228
+ @mixin rs-menu-size-s;
229
+ @mixin rs-menu-mode-classic;
210
230
 
211
- .icon {
212
- @mixin rs-icon-size-s;
231
+ .icon {
232
+ @mixin rs-icon-size-s;
233
+ }
213
234
  }
214
- }
215
- .my-menu-var-2 {
216
- @mixin rs-menu-size-m;
217
- @mixin rs-menu-mode-clear;
218
- @mixin rs-menu-icon-placement-left;
235
+ @media (max-width: 500px) {
236
+ @mixin rs-menu-size-m;
237
+ @mixin rs-menu-mode-clear;
219
238
 
220
- .icon {
221
- @mixin rs-icon-size-m;
239
+ .icon {
240
+ @mixin rs-icon-size-m;
241
+ }
222
242
  }
223
243
  }
224
244
  ```
@@ -241,69 +261,50 @@ Check out [this example](/components/menu/#contrast-primary-color) for contrast
241
261
  | `rs-menu-item-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
242
262
  | `rs-menu-item-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
243
263
  | `rs-menu-item-mode-clear` | prop: `mode`<br><br>value: `"clear"` |
244
- | `rs-menu-item-icon-placement-left` | prop: `iconPlacement`<br><br>value: `"right"` |
245
- | `rs-menu-item-icon-placement-right` | prop: `iconPlacement`<br><br>value: `"left"` |
246
264
 
247
265
  ##### Demo
248
266
 
249
- Instead of separate classes, it may be a single class with `@media` queries inside:
267
+ Use the controls to see the effect at different viewport widths.
250
268
 
251
269
  ```tsx
252
270
  import { MenuItem } from '@rescui/menu';
253
271
  import { PersonOutlineIcon } from '@rescui/icons';
254
272
 
255
- const MyMenuItem = ({ className }) => {
273
+ const MyMenuItem = () => {
256
274
  return (
257
- <div style={{ padding: 12, backgroundColor: 'var(--rs-color-black-t5)' }}>
258
- <MenuItem
259
- icon={<PersonOutlineIcon size="l" className="icon" />}
260
- className={className}
261
- style={{ maxWidth: 300 }}
262
- >
263
- Item
264
- </MenuItem>
265
- </div>
275
+ <MenuItem
276
+ icon={<PersonOutlineIcon size="l" className="icon" />}
277
+ className="my-menu-item"
278
+ style={{ maxWidth: 300 }}
279
+ >
280
+ Item
281
+ </MenuItem>
266
282
  );
267
283
  };
268
284
 
269
- render(
270
- <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
271
- <div>
272
- <p>Default:</p>
273
- <MyMenuItem />
274
- </div>
275
- <div>
276
- <p>Var1:</p>
277
- <MyMenuItem className={`my-menu-item-var-1`} />
278
- </div>
279
- <div>
280
- <p>Var1 & Var2 combined:</p>
281
- <MyMenuItem className={`my-menu-item-var-1 my-menu-item-var-2`} />
282
- </div>
283
- </div>
284
- );
285
+ render(<MyMenuItem />);
285
286
  ```
286
287
 
287
288
  ```postcss
288
289
  @import '@rescui/menu/lib/public-api.p.css';
289
290
  @import '@rescui/icons/lib/public-api.p.css';
290
291
 
291
- .my-menu-item-var-1 {
292
- @mixin rs-menu-item-size-s;
293
- @mixin rs-menu-item-mode-classic;
294
- @mixin rs-menu-item-icon-placement-right;
292
+ .my-menu-item {
293
+ @media (max-width: 640px) {
294
+ @mixin rs-menu-item-size-s;
295
+ @mixin rs-menu-item-mode-classic;
295
296
 
296
- .icon {
297
- @mixin rs-icon-size-s;
297
+ .icon {
298
+ @mixin rs-icon-size-s;
299
+ }
298
300
  }
299
- }
300
- .my-menu-item-var-2 {
301
- @mixin rs-menu-item-size-m;
302
- @mixin rs-menu-item-mode-clear;
303
- @mixin rs-menu-item-icon-placement-left;
301
+ @media (max-width: 500px) {
302
+ @mixin rs-menu-item-size-m;
303
+ @mixin rs-menu-item-mode-clear;
304
304
 
305
- .icon {
306
- @mixin rs-icon-size-m;
305
+ .icon {
306
+ @mixin rs-icon-size-m;
307
+ }
307
308
  }
308
309
  }
309
310
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/menu",
3
- "version": "0.13.6-RUI-293-Update-menu-component-6ca9d26d3.22+6ca9d26d3",
3
+ "version": "0.13.6-RUI-293-Update-menu-component-hover-icon-d8a5b0551.33+d8a5b0551",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -26,10 +26,10 @@
26
26
  "react": ">=16.8.0 <20"
27
27
  },
28
28
  "devDependencies": {
29
- "@rescui/colors": "0.3.1-RUI-293-Update-menu-component-6ca9d26d3.57+6ca9d26d3",
29
+ "@rescui/colors": "0.3.1-RUI-293-Update-menu-component-hover-icon-d8a5b0551.68+d8a5b0551",
30
30
  "@rescui/postcss-preset-library": "0.2.2",
31
31
  "@rescui/scripts": "0.5.2",
32
- "@rescui/typography": "0.27.1-RUI-293-Update-menu-component-6ca9d26d3.22+6ca9d26d3",
32
+ "@rescui/typography": "0.27.1-RUI-293-Update-menu-component-hover-icon-d8a5b0551.33+d8a5b0551",
33
33
  "@rescui/visual-regression": "0.1.4",
34
34
  "postcss": "^8.3.0"
35
35
  },
@@ -38,5 +38,5 @@
38
38
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
39
39
  },
40
40
  "nx": {},
41
- "gitHead": "6ca9d26d30da536dc5a10fdd86222129e2832efa"
41
+ "gitHead": "d8a5b055167d8b1ea55c32621655b8e0acc98a1a"
42
42
  }