@rescui/menu 0.13.6-RUI-293-Update-menu-component-6ca9d26d3.22 → 0.13.6-RUI-293-Update-menu-component-0e65dd41c.30

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 +25 -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 +93 -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_mf6s7n_4",
3
+ "sizeXS": "_sizeXS_mf6s7n_14",
4
+ "sizeS": "_sizeS_mf6s7n_18",
5
+ "sizeM": "_sizeM_mf6s7n_22",
6
+ "sizeL": "_sizeL_mf6s7n_26",
7
+ "light": "_light_mf6s7n_30",
8
+ "dark": "_dark_mf6s7n_34",
9
+ "allVariants": "_allVariants_mf6s7n_48",
10
+ "variant16": "_variant16_mf6s7n_53",
11
+ "variant20": "_variant20_mf6s7n_54",
12
+ "variant24": "_variant24_mf6s7n_55",
13
+ "variant28": "_variant28_mf6s7n_58"
14
14
  };
15
15
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- ._icon_7dcaqk_4{
1
+ ._icon_mf6s7n_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_mf6s7n_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_mf6s7n_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_mf6s7n_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_mf6s7n_14{
36
36
  --_rs-icons-height:16px;
37
37
  }
38
- ._sizeS_7dcaqk_18{
38
+ ._sizeS_mf6s7n_18{
39
39
  --_rs-icons-height:20px;
40
40
  }
41
- ._sizeM_7dcaqk_22{
41
+ ._sizeM_mf6s7n_22{
42
42
  --_rs-icons-height:24px;
43
43
  }
44
- ._sizeL_7dcaqk_26{
44
+ ._sizeL_mf6s7n_26{
45
45
  --_rs-icons-height:28px;
46
46
  }
47
- ._light_7dcaqk_30{
47
+ ._light_mf6s7n_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_mf6s7n_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_mf6s7n_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_mf6s7n_53,
68
+ ._variant20_mf6s7n_54,
69
+ ._variant24_mf6s7n_55{
70
70
  display:none;
71
71
  }
72
- ._variant28_7dcaqk_58{
72
+ ._variant28_mf6s7n_58{
73
73
  display:block;
74
74
  }
75
75
  @container rs-icon (max-height: 24px){
76
- ._variant24_7dcaqk_55{
76
+ ._variant24_mf6s7n_55{
77
77
  display:block;
78
78
  }
79
- ._variant28_7dcaqk_58{
79
+ ._variant28_mf6s7n_58{
80
80
  display:none;
81
81
  }
82
82
  }
83
83
  @container rs-icon (max-height: 20px){
84
- ._variant20_7dcaqk_54{
84
+ ._variant20_mf6s7n_54{
85
85
  display:block;
86
86
  }
87
- ._variant24_7dcaqk_55{
87
+ ._variant24_mf6s7n_55{
88
88
  display:none;
89
89
  }
90
90
  }
91
91
  @container rs-icon (max-height: 16px){
92
- ._variant16_7dcaqk_53{
92
+ ._variant16_mf6s7n_53{
93
93
  display:block;
94
94
  }
95
- ._variant20_7dcaqk_54{
95
+ ._variant20_mf6s7n_54{
96
96
  display:none;
97
97
  }
98
98
  }
99
- ._themeLight_2x3bw5_8{
99
+ ._themeLight_1hp9le7_8{
100
100
  --rs-theme-dark:0;
101
101
  }
102
- ._themeDark_2x3bw5_11{
102
+ ._themeDark_1hp9le7_11{
103
103
  --rs-theme-dark:1;
104
104
  }
105
- ._menu_2x3bw5_15:focus{
105
+ ._menu_1hp9le7_15:focus{
106
106
  outline:none;
107
107
  }
108
- ._sizeS_2x3bw5_21{
108
+ ._sizeS_1hp9le7_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_1hp9le7_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_1hp9le7_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_1hp9le7_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_1hp9le7_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_1hp9le7_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_1hp9le7_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_1hp9le7_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_1hp9le7_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_1hp9le7_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_1hp9le7_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_1hp9le7_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_1hp9le7_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_1hp9le7_49{
291
291
  display:flex;
292
292
  }
293
- ._menuItem_2x3bw5_53{
293
+ ._hoverIcon_1hp9le7_53{
294
+ visibility:hidden;
295
+ }
296
+ ._hoverIcon_1hp9le7_53._hoverIconNoReserve_1hp9le7_56{
297
+ display:none;
298
+ }
299
+ ._menuItem_1hp9le7_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_1hp9le7_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_1hp9le7_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_1hp9le7_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_1hp9le7_61:focus{
362
368
  outline:none;
363
369
  }
364
- ._keyboardNavigationDisabled_2x3bw5_90 ._menuItem_2x3bw5_53:focus[data-focus-method='key']{
370
+ ._keyboardNavigationDisabled_1hp9le7_98 ._menuItem_1hp9le7_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_1hp9le7_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_1hp9le7_61._selected_1hp9le7_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_1hp9le7_119 ._menuItem_1hp9le7_61:focus,
382
+ ._keyboardNavigationDisabled_1hp9le7_98 ._menuItem_1hp9le7_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_1hp9le7_119 ._menuItem_1hp9le7_61:focus ._hoverIcon_1hp9le7_53, ._keyboardNavigationDisabled_1hp9le7_98 ._menuItem_1hp9le7_61:hover ._hoverIcon_1hp9le7_53{
387
+ display:block;
388
+ visibility:visible;
389
+ }
390
+ ._keyboardNavigationEnabled_1hp9le7_119 ._menuItem_1hp9le7_61._hideCustomIconOnHover_1hp9le7_130:focus ._customIcon_1hp9le7_132, ._keyboardNavigationDisabled_1hp9le7_98 ._menuItem_1hp9le7_61._hideCustomIconOnHover_1hp9le7_130:hover ._customIcon_1hp9le7_132{
391
+ display:none;
392
+ }
393
+ ._keyboardNavigationEnabled_1hp9le7_119 ._menuItem_1hp9le7_61._hideSelectedIconOnHover_1hp9le7_137:focus ._selectedIcon_1hp9le7_139, ._keyboardNavigationDisabled_1hp9le7_98 ._menuItem_1hp9le7_61._hideSelectedIconOnHover_1hp9le7_137:hover ._selectedIcon_1hp9le7_139{
394
+ display:none;
395
+ }
396
+ ._menuItem_1hp9le7_61._disabled_1hp9le7_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_1hp9le7_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_1hp9le7_151{
393
409
  flex-grow:1;
394
410
 
395
411
  font-size:inherit;
396
412
  }
397
- ._icon_2x3bw5_41{
413
+ ._icon_1hp9le7_41{
398
414
  flex:0 0;
399
415
  flex-basis:auto;
400
416
  }
401
- ._icon_2x3bw5_41._resizedIcon_2x3bw5_142{
417
+ ._icon_1hp9le7_41._resizedIcon_1hp9le7_169{
402
418
  width:auto;
403
419
  height:var(--_rs-menu-mi-icon-size);
404
420
  }
405
- ._divider_2x3bw5_150{
421
+ ._divider_1hp9le7_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_1hp9le7_191{
417
433
  --rs-theme-dark:0;
418
434
  }
419
- ._groupHeaderThemeDark_2x3bw5_167{
435
+ ._groupHeaderThemeDark_1hp9le7_194{
420
436
  --rs-theme-dark:1;
421
437
  }
422
- ._groupHeaderSizeL_2x3bw5_171{
438
+ ._groupHeaderSizeL_1hp9le7_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_1hp9le7_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_1hp9le7_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_1hp9le7_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_1hp9le7_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_1hp9le7_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_1hp9le7_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_1hp9le7_8",
3
+ "themeDark": "_themeDark_1hp9le7_11",
4
+ "menu": "_menu_1hp9le7_15",
5
+ "sizeS": "_sizeS_1hp9le7_21",
6
+ "sizeM": "_sizeM_1hp9le7_24",
7
+ "sizeL": "_sizeL_1hp9le7_27",
8
+ "modeClassic": "_modeClassic_1hp9le7_31",
9
+ "modeRock": "_modeRock_1hp9le7_34",
10
+ "modeClear": "_modeClear_1hp9le7_37",
11
+ "iconPlacementLeft": "_iconPlacementLeft_1hp9le7_41",
12
+ "iconPlacementRight": "_iconPlacementRight_1hp9le7_45",
13
+ "wrapper": "_wrapper_1hp9le7_49",
14
+ "hoverIcon": "_hoverIcon_1hp9le7_53",
15
+ "hoverIconNoReserve": "_hoverIconNoReserve_1hp9le7_56",
16
+ "menuItem": "_menuItem_1hp9le7_61",
17
+ "keyboardNavigationDisabled": "_keyboardNavigationDisabled_1hp9le7_98",
18
+ "selected": "_selected_1hp9le7_112",
19
+ "keyboardNavigationEnabled": "_keyboardNavigationEnabled_1hp9le7_119",
20
+ "hideCustomIconOnHover": "_hideCustomIconOnHover_1hp9le7_130",
21
+ "customIcon": "_customIcon_1hp9le7_132",
22
+ "hideSelectedIconOnHover": "_hideSelectedIconOnHover_1hp9le7_137",
23
+ "selectedIcon": "_selectedIcon_1hp9le7_139",
24
+ "disabled": "_disabled_1hp9le7_144",
25
+ "contentWrapper": "_contentWrapper_1hp9le7_151",
26
+ "content": "_content_1hp9le7_151",
27
+ "icon": "_icon_1hp9le7_41",
28
+ "resizedIcon": "_resizedIcon_1hp9le7_169",
29
+ "divider": "_divider_1hp9le7_177",
30
+ "groupHeaderThemeLight": "_groupHeaderThemeLight_1hp9le7_191",
31
+ "groupHeaderThemeDark": "_groupHeaderThemeDark_1hp9le7_194",
32
+ "groupHeaderSizeL": "_groupHeaderSizeL_1hp9le7_198",
33
+ "groupHeaderSizeM": "_groupHeaderSizeM_1hp9le7_201",
34
+ "groupHeaderSizeS": "_groupHeaderSizeS_1hp9le7_204",
35
+ "groupHeader": "_groupHeader_1hp9le7_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,12 @@ 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),
168
+ "data-test": 'menu-item__selected-icon',
153
169
  "data-render-all-sizes": true
170
+ }), hasHoverIcon && /*#__PURE__*/React.cloneElement(hoverIcon, {
171
+ className: cn(hoverIcon.props.className, styles.icon, styles.hoverIcon, resizeIcons && styles.resizedIcon, hoverIconWillReplace !== 'none' && styles.hoverIconNoReserve),
172
+ 'data-render-all-sizes': true
154
173
  }))));
155
174
  };
156
175
 
@@ -163,6 +182,7 @@ MenuItem.propTypes = {
163
182
  selected: PropTypes.bool,
164
183
  icon: PropTypes.element,
165
184
  iconPlacement: PropTypes.oneOf(['left', 'right']),
166
- tag: PropTypes.elementType
185
+ tag: PropTypes.elementType,
186
+ hoverIcon: PropTypes.element
167
187
  };
168
188
  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,35 @@ 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
+ <Menu size="s" resizeIcons style={{ maxWidth: 200 }}>
106
+ <MenuItem hoverIcon={<DownloadOutlineIcon />}>Cart</MenuItem>
107
+ <MenuItem hoverIcon={<CloseOutlineIcon />} selected>
108
+ Bug
109
+ </MenuItem>
110
+ <MenuItem hoverIcon={<DownloadOutlineIcon />}>Person</MenuItem>
111
+ <MenuItem
112
+ icon={<LeftOutlineIcon />}
113
+ iconPlacement="right"
114
+ hoverIcon={<CloseOutlineIcon />}
115
+ >
116
+ Team
117
+ </MenuItem>
118
+ <MenuItem hoverIcon={<DownloadOutlineIcon />}>Success</MenuItem>
119
+ </Menu>;
120
+ ```
121
+
91
122
  #### Contrast primary color
92
123
 
93
124
  If your primary color background requires dark text color, use `--rs-menu-contrast-primary` CSS variable.
@@ -140,12 +171,10 @@ render(<Demo />);
140
171
  | `rs-menu-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
141
172
  | `rs-menu-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
142
173
  | `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
174
 
146
175
  ##### Demo
147
176
 
148
- Instead of separate classes, it may be a single class with `@media` queries inside:
177
+ Use the controls to see the effect at different viewport widths.
149
178
 
150
179
  ```tsx
151
180
  import { Menu, MenuItem } from '@rescui/menu';
@@ -157,68 +186,57 @@ import {
157
186
  SuccessOutlineIcon
158
187
  } from '@rescui/icons';
159
188
 
160
- const MyMenu = ({ className }) => {
189
+ const MyMenu = () => {
161
190
  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>
191
+ <Menu
192
+ mode="rock"
193
+ size="l"
194
+ iconPlacement={'left'}
195
+ style={{ maxWidth: 300 }}
196
+ className="my-menu"
197
+ >
198
+ <MenuItem icon={<CartOutlineIcon size="l" className="icon" />}>
199
+ Cart
200
+ </MenuItem>
201
+ <MenuItem icon={<BugOutlineIcon size="l" className="icon" />}>
202
+ Bug
203
+ </MenuItem>
204
+ <MenuItem icon={<PersonOutlineIcon size="l" className="icon" />}>
205
+ Person
206
+ </MenuItem>
207
+ <MenuItem icon={<TeamOutlineIcon size="l" className="icon" />}>
208
+ Team
209
+ </MenuItem>
210
+ <MenuItem icon={<SuccessOutlineIcon size="l" className="icon" />}>
211
+ Success
212
+ </MenuItem>
213
+ </Menu>
181
214
  );
182
215
  };
183
216
 
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
- );
217
+ render(<MyMenu />);
200
218
  ```
201
219
 
202
220
  ```postcss attached
203
221
  @import '@rescui/menu/lib/public-api.p.css';
204
222
  @import '@rescui/icons/lib/public-api.p.css';
205
223
 
206
- .my-menu-var-1 {
207
- @mixin rs-menu-size-s;
208
- @mixin rs-menu-mode-classic;
209
- @mixin rs-menu-icon-placement-right;
224
+ .my-menu {
225
+ @media (max-width: 640px) {
226
+ @mixin rs-menu-size-s;
227
+ @mixin rs-menu-mode-classic;
210
228
 
211
- .icon {
212
- @mixin rs-icon-size-s;
229
+ .icon {
230
+ @mixin rs-icon-size-s;
231
+ }
213
232
  }
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;
233
+ @media (max-width: 500px) {
234
+ @mixin rs-menu-size-m;
235
+ @mixin rs-menu-mode-clear;
219
236
 
220
- .icon {
221
- @mixin rs-icon-size-m;
237
+ .icon {
238
+ @mixin rs-icon-size-m;
239
+ }
222
240
  }
223
241
  }
224
242
  ```
@@ -241,69 +259,50 @@ Check out [this example](/components/menu/#contrast-primary-color) for contrast
241
259
  | `rs-menu-item-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
242
260
  | `rs-menu-item-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
243
261
  | `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
262
 
247
263
  ##### Demo
248
264
 
249
- Instead of separate classes, it may be a single class with `@media` queries inside:
265
+ Use the controls to see the effect at different viewport widths.
250
266
 
251
267
  ```tsx
252
268
  import { MenuItem } from '@rescui/menu';
253
269
  import { PersonOutlineIcon } from '@rescui/icons';
254
270
 
255
- const MyMenuItem = ({ className }) => {
271
+ const MyMenuItem = () => {
256
272
  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>
273
+ <MenuItem
274
+ icon={<PersonOutlineIcon size="l" className="icon" />}
275
+ className="my-menu-item"
276
+ style={{ maxWidth: 300 }}
277
+ >
278
+ Item
279
+ </MenuItem>
266
280
  );
267
281
  };
268
282
 
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
- );
283
+ render(<MyMenuItem />);
285
284
  ```
286
285
 
287
286
  ```postcss
288
287
  @import '@rescui/menu/lib/public-api.p.css';
289
288
  @import '@rescui/icons/lib/public-api.p.css';
290
289
 
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;
290
+ .my-menu-item {
291
+ @media (max-width: 640px) {
292
+ @mixin rs-menu-item-size-s;
293
+ @mixin rs-menu-item-mode-classic;
295
294
 
296
- .icon {
297
- @mixin rs-icon-size-s;
295
+ .icon {
296
+ @mixin rs-icon-size-s;
297
+ }
298
298
  }
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;
299
+ @media (max-width: 500px) {
300
+ @mixin rs-menu-item-size-m;
301
+ @mixin rs-menu-item-mode-clear;
304
302
 
305
- .icon {
306
- @mixin rs-icon-size-m;
303
+ .icon {
304
+ @mixin rs-icon-size-m;
305
+ }
307
306
  }
308
307
  }
309
308
  ```
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-0e65dd41c.30+0e65dd41c",
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-0e65dd41c.65+0e65dd41c",
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-0e65dd41c.30+0e65dd41c",
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": "0e65dd41c5b827cd8e09582ea9f5ad24f61b1d96"
42
42
  }