@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.
- package/lib/_virtual/check-outline.js +337 -0
- package/lib/_virtual/index.css.js +15 -0
- package/lib/index.css +201 -76
- package/lib/index.d.ts +1 -5
- package/lib/menu.d.ts +17 -11
- package/lib/menu.js +385 -46
- package/lib/menu.p.module.css.js +34 -27
- package/lib/parts/divider.d.ts +3 -6
- package/lib/parts/divider.js +53 -10
- package/lib/parts/group-header.d.ts +2 -8
- package/lib/parts/group-header.js +43 -10
- package/lib/parts/menu-context.d.ts +2 -19
- package/lib/parts/menu-context.js +79 -23
- package/lib/parts/menu-item.d.ts +25 -13
- package/lib/parts/menu-item.js +348 -71
- package/lib/parts/navigation-utils.d.ts +2 -2
- package/lib/parts/use-menu-keyboard-navigation.d.ts +7 -5
- package/lib/parts/use-menu-keyboard-navigation.js +224 -110
- package/lib/public-api.p.css +57 -76
- package/lib/public-api.pcss +57 -76
- package/lib/types.d.ts +87 -0
- package/llm/components/menu.md +79 -8
- package/package.json +6 -6
package/lib/public-api.pcss
CHANGED
|
@@ -1,3 +1,8 @@
|
|
|
1
|
+
@property --_rs-theme-dark-coefficient{
|
|
2
|
+
syntax:'<number>';
|
|
3
|
+
inherits:true;
|
|
4
|
+
initial-value:0;
|
|
5
|
+
}
|
|
1
6
|
@define-mixin rs-menu-size-s{
|
|
2
7
|
& [data-rs-internal="menu__menu-item"]{
|
|
3
8
|
--_rs-menu-mi-icon-offset:8px;
|
|
@@ -244,15 +249,18 @@
|
|
|
244
249
|
--_rs-menu-mi-horizontal-padding-with-mode:var(
|
|
245
250
|
--_rs-menu-mi-horizontal-padding
|
|
246
251
|
);
|
|
252
|
+
}
|
|
253
|
+
& [data-rs-internal="menu__menu-item"] [data-rs-internal="menu__menu-item__inner"]{
|
|
254
|
+
--_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);
|
|
247
255
|
--_rs-menu-mi-active-background:var(--_rs-color-primary-t-fog);
|
|
248
|
-
--_rs-menu-mi-selected-color:rgb(calc(
|
|
249
|
-
--_rs-menu-mi-selected-background:
|
|
250
|
-
--_rs-menu-mi-hover-color:rgb(
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
+
--_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));
|
|
257
|
+
--_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);
|
|
258
|
+
--_rs-menu-mi-hover-color:rgb(
|
|
259
|
+
calc(255 - var(--rs-menu-contrast-primary, 0)*230),
|
|
260
|
+
calc(255 - var(--rs-menu-contrast-primary, 0)*230),
|
|
261
|
+
calc(255 - var(--rs-menu-contrast-primary, 0)*227)
|
|
262
|
+
);
|
|
263
|
+
--_rs-menu-mi-hover-background:var(--_rs-color-primary);
|
|
256
264
|
}
|
|
257
265
|
}
|
|
258
266
|
@define-mixin rs-menu-mode-rock{
|
|
@@ -260,42 +268,27 @@
|
|
|
260
268
|
--_rs-menu-mi-horizontal-padding-with-mode:var(
|
|
261
269
|
--_rs-menu-mi-horizontal-padding
|
|
262
270
|
);
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
--_rs-menu-mi-
|
|
266
|
-
--_rs-menu-mi-
|
|
267
|
-
--_rs-menu-mi-
|
|
268
|
-
--_rs-menu-mi-selected-
|
|
269
|
-
--_rs-menu-mi-
|
|
270
|
-
calc(
|
|
271
|
-
);
|
|
271
|
+
}
|
|
272
|
+
& [data-rs-internal="menu__menu-item"] [data-rs-internal="menu__menu-item__inner"]{
|
|
273
|
+
--_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);
|
|
274
|
+
--_rs-menu-mi-active-background:transparent;
|
|
275
|
+
--_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));
|
|
276
|
+
--_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));
|
|
277
|
+
--_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));
|
|
278
|
+
--_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));
|
|
272
279
|
}
|
|
273
280
|
}
|
|
274
281
|
@define-mixin rs-menu-mode-clear{
|
|
275
282
|
& [data-rs-internal="menu__menu-item"]{
|
|
276
283
|
--_rs-menu-mi-horizontal-padding-with-mode:0;
|
|
277
|
-
--_rs-menu-mi-active-background:none;
|
|
278
|
-
--_rs-menu-mi-selected-color:var(--_rs-color-primary);
|
|
279
|
-
--_rs-menu-mi-selected-background:none;
|
|
280
|
-
--_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));
|
|
281
|
-
--_rs-menu-mi-hover-background:none;
|
|
282
|
-
--_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));
|
|
283
|
-
--_rs-menu-mi-selected-hover-background:rgba(
|
|
284
|
-
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),
|
|
285
|
-
0.1
|
|
286
|
-
);
|
|
287
|
-
}
|
|
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
284
|
}
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
--_rs-menu-mi-
|
|
298
|
-
--_rs-menu-mi-
|
|
285
|
+
& [data-rs-internal="menu__menu-item"] [data-rs-internal="menu__menu-item__inner"]{
|
|
286
|
+
--_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));
|
|
287
|
+
--_rs-menu-mi-active-background:transparent;
|
|
288
|
+
--_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));
|
|
289
|
+
--_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);
|
|
290
|
+
--_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));
|
|
291
|
+
--_rs-menu-mi-hover-background:transparent;
|
|
299
292
|
}
|
|
300
293
|
}
|
|
301
294
|
@define-mixin rs-menu-item-size-s{
|
|
@@ -442,58 +435,46 @@
|
|
|
442
435
|
--_rs-menu-mi-horizontal-padding-with-mode:var(
|
|
443
436
|
--_rs-menu-mi-horizontal-padding
|
|
444
437
|
);
|
|
438
|
+
}
|
|
439
|
+
&[class] [data-rs-internal="menu__menu-item__inner"]{
|
|
440
|
+
--_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);
|
|
445
441
|
--_rs-menu-mi-active-background:var(--_rs-color-primary-t-fog);
|
|
446
|
-
--_rs-menu-mi-selected-color:rgb(calc(
|
|
447
|
-
--_rs-menu-mi-selected-background:
|
|
448
|
-
--_rs-menu-mi-hover-color:rgb(
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
442
|
+
--_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));
|
|
443
|
+
--_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);
|
|
444
|
+
--_rs-menu-mi-hover-color:rgb(
|
|
445
|
+
calc(255 - var(--rs-menu-contrast-primary, 0)*230),
|
|
446
|
+
calc(255 - var(--rs-menu-contrast-primary, 0)*230),
|
|
447
|
+
calc(255 - var(--rs-menu-contrast-primary, 0)*227)
|
|
448
|
+
);
|
|
449
|
+
--_rs-menu-mi-hover-background:var(--_rs-color-primary);
|
|
454
450
|
}
|
|
455
451
|
}
|
|
456
452
|
@define-mixin rs-menu-item-mode-rock{
|
|
457
453
|
&[class]{
|
|
458
454
|
--_rs-menu-mi-horizontal-padding-with-mode:var(
|
|
459
455
|
--_rs-menu-mi-horizontal-padding
|
|
460
|
-
);
|
|
461
|
-
--_rs-menu-mi-active-background:none;
|
|
462
|
-
--_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));
|
|
463
|
-
--_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));
|
|
464
|
-
--_rs-menu-mi-hover-color:#FFFFFF;
|
|
465
|
-
--_rs-menu-mi-hover-background:var(--_rs-color-primary);
|
|
466
|
-
--_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));
|
|
467
|
-
--_rs-menu-mi-selected-hover-background:rgb(
|
|
468
|
-
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)
|
|
469
456
|
);
|
|
470
457
|
}
|
|
458
|
+
&[class] [data-rs-internal="menu__menu-item__inner"]{
|
|
459
|
+
--_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);
|
|
460
|
+
--_rs-menu-mi-active-background:transparent;
|
|
461
|
+
--_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));
|
|
462
|
+
--_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));
|
|
463
|
+
--_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));
|
|
464
|
+
--_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));
|
|
465
|
+
}
|
|
471
466
|
}
|
|
472
467
|
@define-mixin rs-menu-item-mode-clear{
|
|
473
468
|
&[class]{
|
|
474
469
|
--_rs-menu-mi-horizontal-padding-with-mode:0;
|
|
475
|
-
--_rs-menu-mi-active-background:none;
|
|
476
|
-
--_rs-menu-mi-selected-color:var(--_rs-color-primary);
|
|
477
|
-
--_rs-menu-mi-selected-background:none;
|
|
478
|
-
--_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));
|
|
479
|
-
--_rs-menu-mi-hover-background:none;
|
|
480
|
-
--_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));
|
|
481
|
-
--_rs-menu-mi-selected-hover-background:rgba(
|
|
482
|
-
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),
|
|
483
|
-
0.1
|
|
484
|
-
);
|
|
485
|
-
}
|
|
486
|
-
}
|
|
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
470
|
}
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
--_rs-menu-mi-
|
|
496
|
-
--_rs-menu-mi-
|
|
471
|
+
&[class] [data-rs-internal="menu__menu-item__inner"]{
|
|
472
|
+
--_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));
|
|
473
|
+
--_rs-menu-mi-active-background:transparent;
|
|
474
|
+
--_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));
|
|
475
|
+
--_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);
|
|
476
|
+
--_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));
|
|
477
|
+
--_rs-menu-mi-hover-background:transparent;
|
|
497
478
|
}
|
|
498
479
|
}
|
|
499
480
|
@define-mixin rs-group-header-size-s{
|
package/lib/types.d.ts
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { JSX } from 'react';
|
|
3
|
+
import type { Theme } from '@rescui/ui-contexts';
|
|
4
|
+
export type MenuItemSize = 's' | 'm' | 'l';
|
|
5
|
+
export type MenuItemIconPlacement = 'left' | 'right';
|
|
6
|
+
export type MenuItemMode = 'clear' | 'classic' | 'rock';
|
|
7
|
+
export type MenuContextValue = {
|
|
8
|
+
iconPlacement?: MenuItemIconPlacement;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
size?: MenuItemSize;
|
|
11
|
+
mode?: MenuItemMode;
|
|
12
|
+
theme?: Theme;
|
|
13
|
+
itemTag?: React.ElementType;
|
|
14
|
+
wrapWithLi: boolean;
|
|
15
|
+
registerItem?: ((ref: HTMLElement) => void) | null;
|
|
16
|
+
unregisterItem?: ((ref: HTMLElement) => void) | null;
|
|
17
|
+
currentActiveItemEl?: HTMLElement | null;
|
|
18
|
+
keyboardNavigationEnabled?: boolean;
|
|
19
|
+
onItemFocus?: ((ref: HTMLElement) => void) | null;
|
|
20
|
+
onItemKeyDown?: ((e: React.KeyboardEvent<HTMLElement>, ref?: HTMLElement) => void) | null;
|
|
21
|
+
onItemMouseEnter?: ((ref: HTMLElement) => void) | null;
|
|
22
|
+
resizeIcons?: boolean;
|
|
23
|
+
};
|
|
24
|
+
type MenuSpecificProps = {
|
|
25
|
+
/**
|
|
26
|
+
* Icon placement relative to the menu item text
|
|
27
|
+
* @default left
|
|
28
|
+
*/
|
|
29
|
+
iconPlacement?: MenuItemIconPlacement;
|
|
30
|
+
/**
|
|
31
|
+
* @default false
|
|
32
|
+
* @rawDefaultValue
|
|
33
|
+
*/
|
|
34
|
+
disabled?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* @default m
|
|
37
|
+
*/
|
|
38
|
+
size?: MenuItemSize;
|
|
39
|
+
/**
|
|
40
|
+
* @default classic
|
|
41
|
+
*/
|
|
42
|
+
mode?: MenuItemMode;
|
|
43
|
+
theme?: Theme;
|
|
44
|
+
tag?: React.ElementType;
|
|
45
|
+
itemTag?: React.ElementType;
|
|
46
|
+
/**
|
|
47
|
+
* Enable icons resizing in tandem with menu size
|
|
48
|
+
* @default false
|
|
49
|
+
* @rawDefaultValue
|
|
50
|
+
*/
|
|
51
|
+
resizeIcons?: boolean;
|
|
52
|
+
children?: React.ReactNode;
|
|
53
|
+
enableKeyboardNavigation?: boolean;
|
|
54
|
+
activateFirstItem?: boolean;
|
|
55
|
+
wrapItemsWithLi?: boolean;
|
|
56
|
+
};
|
|
57
|
+
export type MenuProps = MenuSpecificProps & Omit<React.HTMLAttributes<HTMLElement>, keyof MenuSpecificProps>;
|
|
58
|
+
type MenuItemSpecificProps = {
|
|
59
|
+
className?: string;
|
|
60
|
+
tag?: React.ElementType;
|
|
61
|
+
icon?: JSX.Element;
|
|
62
|
+
size?: MenuItemSize;
|
|
63
|
+
mode?: MenuItemMode;
|
|
64
|
+
theme?: Theme;
|
|
65
|
+
disabled?: boolean;
|
|
66
|
+
selected?: boolean;
|
|
67
|
+
iconPlacement?: MenuItemIconPlacement;
|
|
68
|
+
children?: React.ReactNode;
|
|
69
|
+
key?: string;
|
|
70
|
+
'data-test'?: string;
|
|
71
|
+
/**
|
|
72
|
+
* Set the icon to be displayed when hovering over the menu item.
|
|
73
|
+
*/
|
|
74
|
+
hoverIcon?: JSX.Element;
|
|
75
|
+
};
|
|
76
|
+
export type MenuItemProps = MenuItemSpecificProps & Omit<React.AllHTMLAttributes<Element>, keyof MenuItemSpecificProps>;
|
|
77
|
+
export interface DividerProps extends React.HTMLAttributes<HTMLHRElement> {
|
|
78
|
+
theme?: Theme;
|
|
79
|
+
className?: string;
|
|
80
|
+
}
|
|
81
|
+
export interface GroupHeaderProps {
|
|
82
|
+
theme?: Theme;
|
|
83
|
+
size?: MenuItemSize;
|
|
84
|
+
text?: React.ReactNode;
|
|
85
|
+
className?: string;
|
|
86
|
+
}
|
|
87
|
+
export {};
|
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,75 @@ 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
|
+
|
|
122
|
+
#### Contrast primary color
|
|
123
|
+
|
|
124
|
+
If your primary color background requires dark text color, use `--rs-menu-contrast-primary` CSS variable.
|
|
125
|
+
|
|
126
|
+
```tsx
|
|
127
|
+
import { Menu, MenuItem } from '@rescui/menu';
|
|
128
|
+
|
|
129
|
+
const Demo = () => {
|
|
130
|
+
return (
|
|
131
|
+
<div className="light-green-primary">
|
|
132
|
+
<Menu className="menu-with-contrast-primary" style={{ maxWidth: 200 }}>
|
|
133
|
+
<MenuItem>Some text 1</MenuItem>
|
|
134
|
+
<MenuItem>Some text 2</MenuItem>
|
|
135
|
+
<MenuItem>Some text 3</MenuItem>
|
|
136
|
+
<MenuItem>Some text 4</MenuItem>
|
|
137
|
+
<MenuItem>Some text 5</MenuItem>
|
|
138
|
+
</Menu>
|
|
139
|
+
</div>
|
|
140
|
+
);
|
|
141
|
+
};
|
|
142
|
+
|
|
143
|
+
render(<Demo />);
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
```postcss
|
|
147
|
+
.menu-with-contrast-primary {
|
|
148
|
+
--rs-menu-contrast-primary: 1;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.light-green-primary {
|
|
152
|
+
--rs-color-primary-light-theme: rgb(71, 224, 84);
|
|
153
|
+
--rs-color-primary-t-dim-light-theme: rgba(71, 224, 84, 0.8);
|
|
154
|
+
--rs-color-primary-t-fog-light-theme: rgba(71, 224, 84, 0.2);
|
|
155
|
+
|
|
156
|
+
--rs-color-primary-dark-theme: rgb(71, 224, 84);
|
|
157
|
+
--rs-color-primary-t-dim-dark-theme: rgba(71, 224, 84, 0.8);
|
|
158
|
+
--rs-color-primary-t-fog-dark-theme: rgba(71, 224, 84, 0.2);
|
|
159
|
+
}
|
|
160
|
+
```
|
|
161
|
+
|
|
91
162
|
## CSS Mixins API
|
|
92
163
|
|
|
93
164
|
#### `Menu` mixins
|
|
@@ -100,8 +171,6 @@ import {
|
|
|
100
171
|
| `rs-menu-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
|
|
101
172
|
| `rs-menu-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
|
|
102
173
|
| `rs-menu-mode-clear` | prop: `mode`<br><br>value: `"clear"` |
|
|
103
|
-
| `rs-menu-icon-placement-left` | prop: `iconPlacement`<br><br>value: `"left"` |
|
|
104
|
-
| `rs-menu-icon-placement-right` | prop: `iconPlacement`<br><br>value: `"right"` |
|
|
105
174
|
|
|
106
175
|
##### Demo
|
|
107
176
|
|
|
@@ -156,7 +225,6 @@ render(<MyMenu />);
|
|
|
156
225
|
@media (max-width: 640px) {
|
|
157
226
|
@mixin rs-menu-size-s;
|
|
158
227
|
@mixin rs-menu-mode-classic;
|
|
159
|
-
@mixin rs-menu-icon-placement-right;
|
|
160
228
|
|
|
161
229
|
.icon {
|
|
162
230
|
@mixin rs-icon-size-s;
|
|
@@ -165,7 +233,6 @@ render(<MyMenu />);
|
|
|
165
233
|
@media (max-width: 500px) {
|
|
166
234
|
@mixin rs-menu-size-m;
|
|
167
235
|
@mixin rs-menu-mode-clear;
|
|
168
|
-
@mixin rs-menu-icon-placement-left;
|
|
169
236
|
|
|
170
237
|
.icon {
|
|
171
238
|
@mixin rs-icon-size-m;
|
|
@@ -174,6 +241,14 @@ render(<MyMenu />);
|
|
|
174
241
|
}
|
|
175
242
|
```
|
|
176
243
|
|
|
244
|
+
#### `Menu` CSS Vars
|
|
245
|
+
|
|
246
|
+
| Variable | Syntax | Description |
|
|
247
|
+
| --- | --- | --- |
|
|
248
|
+
| `--rs-menu-contrast-primary` | `0 \| 1` | The flag whenever the current primary is contrast enough and highlighted text color should be inverted |
|
|
249
|
+
|
|
250
|
+
Check out [this example](/components/menu/#contrast-primary-color) for contrast primary.
|
|
251
|
+
|
|
177
252
|
#### `MenuItem` mixins
|
|
178
253
|
|
|
179
254
|
| Mixin name | Details |
|
|
@@ -184,8 +259,6 @@ render(<MyMenu />);
|
|
|
184
259
|
| `rs-menu-item-mode-classic` | prop: `mode`<br><br>value: `"classic"` |
|
|
185
260
|
| `rs-menu-item-mode-rock` | prop: `mode`<br><br>value: `"rock"` |
|
|
186
261
|
| `rs-menu-item-mode-clear` | prop: `mode`<br><br>value: `"clear"` |
|
|
187
|
-
| `rs-menu-item-icon-placement-left` | prop: `iconPlacement`<br><br>value: `"right"` |
|
|
188
|
-
| `rs-menu-item-icon-placement-right` | prop: `iconPlacement`<br><br>value: `"left"` |
|
|
189
262
|
|
|
190
263
|
##### Demo
|
|
191
264
|
|
|
@@ -218,7 +291,6 @@ render(<MyMenuItem />);
|
|
|
218
291
|
@media (max-width: 640px) {
|
|
219
292
|
@mixin rs-menu-item-size-s;
|
|
220
293
|
@mixin rs-menu-item-mode-classic;
|
|
221
|
-
@mixin rs-menu-item-icon-placement-right;
|
|
222
294
|
|
|
223
295
|
.icon {
|
|
224
296
|
@mixin rs-icon-size-s;
|
|
@@ -227,7 +299,6 @@ render(<MyMenuItem />);
|
|
|
227
299
|
@media (max-width: 500px) {
|
|
228
300
|
@mixin rs-menu-item-size-m;
|
|
229
301
|
@mixin rs-menu-item-mode-clear;
|
|
230
|
-
@mixin rs-menu-item-icon-placement-left;
|
|
231
302
|
|
|
232
303
|
.icon {
|
|
233
304
|
@mixin rs-icon-size-m;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rescui/menu",
|
|
3
|
-
"version": "0.13.8-RUI-297-Add-react-compiler-to-the-packages-build-
|
|
3
|
+
"version": "0.13.8-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.43+8aaaed4be",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "JetBrains",
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"@babel/runtime-corejs3": "^7.26.0",
|
|
20
20
|
"classnames": "^2.2.6",
|
|
21
|
-
"
|
|
21
|
+
"react-compiler-runtime": "^1.0.0"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
|
24
24
|
"@rescui/ui-contexts": "^0.6.0",
|
|
@@ -26,10 +26,10 @@
|
|
|
26
26
|
"react": ">=17.0.0 <20"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@rescui/colors": "0.3.3-RUI-297-Add-react-compiler-to-the-packages-build-
|
|
30
|
-
"@rescui/postcss-preset-library": "0.2.
|
|
29
|
+
"@rescui/colors": "0.3.3-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.43+8aaaed4be",
|
|
30
|
+
"@rescui/postcss-preset-library": "0.2.3",
|
|
31
31
|
"@rescui/scripts": "0.5.2",
|
|
32
|
-
"@rescui/typography": "0.27.3-RUI-297-Add-react-compiler-to-the-packages-build-
|
|
32
|
+
"@rescui/typography": "0.27.3-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.43+8aaaed4be",
|
|
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": "
|
|
41
|
+
"gitHead": "8aaaed4bee650c002b7f195438380b70c31cc5a4"
|
|
42
42
|
}
|