@rescui/dropdown-menu 0.11.19-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.10 → 0.11.19-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.39
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/dropdown-menu.js +185 -63
- package/lib/dropdown-menu.p.module.css.js +5 -5
- package/lib/index.css +8 -8
- package/lib/menu-wrapper.js +32 -8
- package/lib/public-api.p.css +5 -0
- package/lib/public-api.pcss +5 -0
- package/lib/use-extract-css-values.d.ts +6 -0
- package/lib/use-extract-css-values.js +51 -0
- package/llm/components/dropdown-menu.md +133 -22
- package/package.json +10 -9
package/lib/dropdown-menu.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
|
|
3
|
+
import { c } from 'react-compiler-runtime';
|
|
2
4
|
import React, { useState } from 'react';
|
|
3
5
|
import { useThemeWithUndefined } from '@rescui/ui-contexts';
|
|
4
6
|
import { Dropdown } from '@rescui/dropdown';
|
|
@@ -6,6 +8,7 @@ import { Menu } from '@rescui/menu';
|
|
|
6
8
|
import cn from 'classnames';
|
|
7
9
|
import { MenuWrapper } from './menu-wrapper.js';
|
|
8
10
|
import styles from './dropdown-menu.p.module.css.js';
|
|
11
|
+
import { useExtractCssValues } from './use-extract-css-values.js';
|
|
9
12
|
const ITEM_HEIGHT_BY_SIZE = {
|
|
10
13
|
s: 32,
|
|
11
14
|
m: 40,
|
|
@@ -17,76 +20,195 @@ const SIZE_TO_CLASS = {
|
|
|
17
20
|
l: styles.sizeL
|
|
18
21
|
};
|
|
19
22
|
|
|
20
|
-
const DropdownMenu =
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
23
|
+
const DropdownMenu = t0 => {
|
|
24
|
+
const $ = c(43);
|
|
25
|
+
let children;
|
|
26
|
+
let className;
|
|
27
|
+
let iconPlacement;
|
|
28
|
+
let itemTag;
|
|
29
|
+
let restProps;
|
|
30
|
+
let t1;
|
|
31
|
+
let t2;
|
|
32
|
+
let t3;
|
|
33
|
+
let t4;
|
|
34
|
+
let t5;
|
|
35
|
+
let tag;
|
|
36
|
+
let themeFromProps;
|
|
37
|
+
let wrapItemsWithLi;
|
|
38
|
+
|
|
39
|
+
if ($[0] !== t0) {
|
|
40
|
+
({
|
|
41
|
+
maxVisibleItems: t1,
|
|
42
|
+
size: t2,
|
|
43
|
+
children,
|
|
44
|
+
iconPlacement,
|
|
45
|
+
itemTag,
|
|
46
|
+
tag,
|
|
47
|
+
theme: themeFromProps,
|
|
48
|
+
mode: t3,
|
|
49
|
+
activateFirstItemOnOpen: t4,
|
|
50
|
+
resizeIcons: t5,
|
|
51
|
+
wrapItemsWithLi,
|
|
52
|
+
className,
|
|
53
|
+
...restProps
|
|
54
|
+
} = t0);
|
|
55
|
+
$[0] = t0;
|
|
56
|
+
$[1] = children;
|
|
57
|
+
$[2] = className;
|
|
58
|
+
$[3] = iconPlacement;
|
|
59
|
+
$[4] = itemTag;
|
|
60
|
+
$[5] = restProps;
|
|
61
|
+
$[6] = t1;
|
|
62
|
+
$[7] = t2;
|
|
63
|
+
$[8] = t3;
|
|
64
|
+
$[9] = t4;
|
|
65
|
+
$[10] = t5;
|
|
66
|
+
$[11] = tag;
|
|
67
|
+
$[12] = themeFromProps;
|
|
68
|
+
$[13] = wrapItemsWithLi;
|
|
69
|
+
} else {
|
|
70
|
+
children = $[1];
|
|
71
|
+
className = $[2];
|
|
72
|
+
iconPlacement = $[3];
|
|
73
|
+
itemTag = $[4];
|
|
74
|
+
restProps = $[5];
|
|
75
|
+
t1 = $[6];
|
|
76
|
+
t2 = $[7];
|
|
77
|
+
t3 = $[8];
|
|
78
|
+
t4 = $[9];
|
|
79
|
+
t5 = $[10];
|
|
80
|
+
tag = $[11];
|
|
81
|
+
themeFromProps = $[12];
|
|
82
|
+
wrapItemsWithLi = $[13];
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
const maxVisibleItems = t1 === undefined ? 5 : t1;
|
|
86
|
+
const size = t2 === undefined ? "m" : t2;
|
|
87
|
+
const mode = t3 === undefined ? "classic" : t3;
|
|
88
|
+
const activateFirstItemOnOpen = t4 === undefined ? false : t4;
|
|
89
|
+
const resizeIcons = t5 === undefined ? true : t5;
|
|
36
90
|
const [menuWrapperEl, setMenuWrapperEl] = useState(null);
|
|
37
91
|
const [height, setHeight] = useState(0);
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
92
|
+
const {
|
|
93
|
+
itemHeightFromCss,
|
|
94
|
+
contrastPrimaryFromCss
|
|
95
|
+
} = useExtractCssValues(menuWrapperEl);
|
|
96
|
+
const itemHeight = itemHeightFromCss || ITEM_HEIGHT_BY_SIZE[size];
|
|
97
|
+
const isMoreThanPlusOne = height > (Math.ceil(maxVisibleItems) + 1.1) * itemHeight;
|
|
98
|
+
const maxHeight = (Math.ceil(maxVisibleItems) + (isMoreThanPlusOne ? 0.5 : 1.5)) * itemHeight;
|
|
99
|
+
let cleanedRestProps;
|
|
100
|
+
|
|
101
|
+
if ($[14] !== restProps) {
|
|
102
|
+
const {
|
|
103
|
+
maxHeight: cleanMaxHeight,
|
|
104
|
+
leastMaxHeight,
|
|
105
|
+
...t6
|
|
106
|
+
} = restProps;
|
|
107
|
+
cleanedRestProps = t6;
|
|
108
|
+
$[14] = restProps;
|
|
109
|
+
$[15] = cleanedRestProps;
|
|
110
|
+
} else {
|
|
111
|
+
cleanedRestProps = $[15];
|
|
49
112
|
}
|
|
50
113
|
|
|
51
|
-
const
|
|
114
|
+
const theme = useThemeWithUndefined(themeFromProps);
|
|
115
|
+
const t6 = SIZE_TO_CLASS[size];
|
|
116
|
+
let t7;
|
|
52
117
|
|
|
53
|
-
|
|
54
|
-
|
|
118
|
+
if ($[16] !== className || $[17] !== t6) {
|
|
119
|
+
t7 = cn(t6, styles.dropdownMenu, className);
|
|
120
|
+
$[16] = className;
|
|
121
|
+
$[17] = t6;
|
|
122
|
+
$[18] = t7;
|
|
123
|
+
} else {
|
|
124
|
+
t7 = $[18];
|
|
125
|
+
}
|
|
55
126
|
|
|
56
|
-
const
|
|
57
|
-
|
|
58
|
-
maxHeight: cleanMaxHeight,
|
|
59
|
-
leastMaxHeight,
|
|
60
|
-
...cleanedRestProps
|
|
61
|
-
} = restProps; // cast to make runtime omit
|
|
127
|
+
const t8 = mode === "rock" ? "rock" : "classic";
|
|
128
|
+
let t9;
|
|
62
129
|
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
}
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
130
|
+
if ($[19] !== contrastPrimaryFromCss) {
|
|
131
|
+
t9 = {
|
|
132
|
+
"--rs-menu-contrast-primary": contrastPrimaryFromCss
|
|
133
|
+
};
|
|
134
|
+
$[19] = contrastPrimaryFromCss;
|
|
135
|
+
$[20] = t9;
|
|
136
|
+
} else {
|
|
137
|
+
t9 = $[20];
|
|
138
|
+
}
|
|
139
|
+
|
|
140
|
+
let t10;
|
|
141
|
+
|
|
142
|
+
if ($[21] !== activateFirstItemOnOpen || $[22] !== children || $[23] !== iconPlacement || $[24] !== itemTag || $[25] !== resizeIcons || $[26] !== size || $[27] !== t8 || $[28] !== t9 || $[29] !== tag || $[30] !== wrapItemsWithLi) {
|
|
143
|
+
t10 = /*#__PURE__*/React.createElement(Menu, {
|
|
144
|
+
size: size,
|
|
145
|
+
iconPlacement: iconPlacement,
|
|
146
|
+
itemTag: itemTag,
|
|
147
|
+
tag: tag,
|
|
148
|
+
mode: t8,
|
|
149
|
+
"data-test": "dropdown-menu",
|
|
150
|
+
"data-rs-internal": "dropdown-menu__menu",
|
|
151
|
+
className: styles.menu,
|
|
152
|
+
style: t9,
|
|
153
|
+
enableKeyboardNavigation: true,
|
|
154
|
+
activateFirstItem: activateFirstItemOnOpen,
|
|
155
|
+
wrapItemsWithLi: wrapItemsWithLi,
|
|
156
|
+
resizeIcons: resizeIcons
|
|
157
|
+
}, children);
|
|
158
|
+
$[21] = activateFirstItemOnOpen;
|
|
159
|
+
$[22] = children;
|
|
160
|
+
$[23] = iconPlacement;
|
|
161
|
+
$[24] = itemTag;
|
|
162
|
+
$[25] = resizeIcons;
|
|
163
|
+
$[26] = size;
|
|
164
|
+
$[27] = t8;
|
|
165
|
+
$[28] = t9;
|
|
166
|
+
$[29] = tag;
|
|
167
|
+
$[30] = wrapItemsWithLi;
|
|
168
|
+
$[31] = t10;
|
|
169
|
+
} else {
|
|
170
|
+
t10 = $[31];
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
let t11;
|
|
174
|
+
|
|
175
|
+
if ($[32] !== menuWrapperEl || $[33] !== t10) {
|
|
176
|
+
t11 = /*#__PURE__*/React.createElement(MenuWrapper, {
|
|
177
|
+
el: menuWrapperEl,
|
|
178
|
+
setEl: setMenuWrapperEl,
|
|
179
|
+
onHeightUpdate: setHeight
|
|
180
|
+
}, t10);
|
|
181
|
+
$[32] = menuWrapperEl;
|
|
182
|
+
$[33] = t10;
|
|
183
|
+
$[34] = t11;
|
|
184
|
+
} else {
|
|
185
|
+
t11 = $[34];
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
let t12;
|
|
189
|
+
|
|
190
|
+
if ($[35] !== cleanedRestProps || $[36] !== itemHeight || $[37] !== maxHeight || $[38] !== mode || $[39] !== t11 || $[40] !== t7 || $[41] !== theme) {
|
|
191
|
+
t12 = /*#__PURE__*/React.createElement(Dropdown, _extends({}, cleanedRestProps, {
|
|
192
|
+
closeOnTab: true,
|
|
193
|
+
mode: mode,
|
|
194
|
+
theme: theme,
|
|
195
|
+
leastMaxHeight: itemHeight,
|
|
196
|
+
maxHeight: maxHeight,
|
|
197
|
+
className: t7
|
|
198
|
+
}), t11);
|
|
199
|
+
$[35] = cleanedRestProps;
|
|
200
|
+
$[36] = itemHeight;
|
|
201
|
+
$[37] = maxHeight;
|
|
202
|
+
$[38] = mode;
|
|
203
|
+
$[39] = t11;
|
|
204
|
+
$[40] = t7;
|
|
205
|
+
$[41] = theme;
|
|
206
|
+
$[42] = t12;
|
|
207
|
+
} else {
|
|
208
|
+
t12 = $[42];
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
return t12;
|
|
90
212
|
};
|
|
91
213
|
|
|
92
214
|
export { DropdownMenu, DropdownMenu as default };
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"sizeS": "
|
|
3
|
-
"sizeM": "
|
|
4
|
-
"sizeL": "
|
|
5
|
-
"dropdownMenu": "
|
|
6
|
-
"menu": "
|
|
2
|
+
"sizeS": "_sizeS_10ftboi_8",
|
|
3
|
+
"sizeM": "_sizeM_10ftboi_11",
|
|
4
|
+
"sizeL": "_sizeL_10ftboi_14",
|
|
5
|
+
"dropdownMenu": "_dropdownMenu_10ftboi_18",
|
|
6
|
+
"menu": "_menu_10ftboi_23"
|
|
7
7
|
};
|
|
8
8
|
export { styles as default };
|
package/lib/index.css
CHANGED
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
.
|
|
1
|
+
._sizeS_10ftboi_8{
|
|
2
2
|
--_rs-dropdown-menu-min-width:316px;
|
|
3
3
|
--_rs-dropdown-menu-max-width:389px;
|
|
4
4
|
}
|
|
5
|
-
.
|
|
5
|
+
._sizeS_10ftboi_8 [data-rs-internal='dropdown-menu__menu-wrapper']{
|
|
6
6
|
--_rs-dropdown-menu-item-height:32px;
|
|
7
7
|
}
|
|
8
|
-
.
|
|
8
|
+
._sizeM_10ftboi_11{
|
|
9
9
|
--_rs-dropdown-menu-min-width:316px;
|
|
10
10
|
--_rs-dropdown-menu-max-width:494px;
|
|
11
11
|
}
|
|
12
|
-
.
|
|
12
|
+
._sizeM_10ftboi_11 [data-rs-internal='dropdown-menu__menu-wrapper']{
|
|
13
13
|
--_rs-dropdown-menu-item-height:40px;
|
|
14
14
|
}
|
|
15
|
-
.
|
|
15
|
+
._sizeL_10ftboi_14{
|
|
16
16
|
--_rs-dropdown-menu-min-width:316px;
|
|
17
17
|
--_rs-dropdown-menu-max-width:494px;
|
|
18
18
|
}
|
|
19
|
-
.
|
|
19
|
+
._sizeL_10ftboi_14 [data-rs-internal='dropdown-menu__menu-wrapper']{
|
|
20
20
|
--_rs-dropdown-menu-item-height:52px;
|
|
21
21
|
}
|
|
22
|
-
.
|
|
22
|
+
._dropdownMenu_10ftboi_18{
|
|
23
23
|
min-width:var(--_rs-dropdown-menu-min-width);
|
|
24
24
|
max-width:var(--_rs-dropdown-menu-max-width);
|
|
25
25
|
}
|
|
26
|
-
.
|
|
26
|
+
._menu_10ftboi_23{
|
|
27
27
|
margin:0;
|
|
28
28
|
padding:0;
|
|
29
29
|
|
package/lib/menu-wrapper.js
CHANGED
|
@@ -1,18 +1,42 @@
|
|
|
1
|
+
import { c } from 'react-compiler-runtime';
|
|
1
2
|
import React from 'react';
|
|
2
3
|
import { useResizeObserver } from '@rescui/use-resize-observer';
|
|
3
4
|
|
|
4
|
-
const MenuWrapper =
|
|
5
|
-
|
|
5
|
+
const MenuWrapper = t0 => {
|
|
6
|
+
const $ = c(5);
|
|
7
|
+
const {
|
|
6
8
|
children,
|
|
7
9
|
onHeightUpdate,
|
|
8
10
|
setEl,
|
|
9
11
|
el
|
|
10
|
-
} =
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
} = t0;
|
|
13
|
+
let t1;
|
|
14
|
+
|
|
15
|
+
if ($[0] !== onHeightUpdate) {
|
|
16
|
+
t1 = entry => onHeightUpdate(entry.target.offsetHeight);
|
|
17
|
+
|
|
18
|
+
$[0] = onHeightUpdate;
|
|
19
|
+
$[1] = t1;
|
|
20
|
+
} else {
|
|
21
|
+
t1 = $[1];
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
useResizeObserver(el, t1);
|
|
25
|
+
let t2;
|
|
26
|
+
|
|
27
|
+
if ($[2] !== children || $[3] !== setEl) {
|
|
28
|
+
t2 = /*#__PURE__*/React.createElement("div", {
|
|
29
|
+
ref: setEl,
|
|
30
|
+
"data-rs-internal": "dropdown-menu__menu-wrapper"
|
|
31
|
+
}, children);
|
|
32
|
+
$[2] = children;
|
|
33
|
+
$[3] = setEl;
|
|
34
|
+
$[4] = t2;
|
|
35
|
+
} else {
|
|
36
|
+
t2 = $[4];
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
return t2;
|
|
16
40
|
};
|
|
17
41
|
|
|
18
42
|
MenuWrapper.displayName = 'MenuWrapper';
|
package/lib/public-api.p.css
CHANGED
package/lib/public-api.pcss
CHANGED
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { c } from 'react-compiler-runtime';
|
|
2
|
+
import { useState, useEffect, useLayoutEffect } from 'react';
|
|
3
|
+
const useIsomorphicLayoutEffect = typeof window === 'undefined' ? useEffect : useLayoutEffect;
|
|
4
|
+
|
|
5
|
+
const useExtractCssValues = menuWrapperEl => {
|
|
6
|
+
const $ = c(4);
|
|
7
|
+
let t0;
|
|
8
|
+
|
|
9
|
+
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
|
|
10
|
+
t0 = {
|
|
11
|
+
itemHeightFromCss: null,
|
|
12
|
+
contrastPrimaryFromCss: null
|
|
13
|
+
};
|
|
14
|
+
$[0] = t0;
|
|
15
|
+
} else {
|
|
16
|
+
t0 = $[0];
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
const [cssValues, setCssValues] = useState(t0);
|
|
20
|
+
let t1;
|
|
21
|
+
let t2;
|
|
22
|
+
|
|
23
|
+
if ($[1] !== menuWrapperEl) {
|
|
24
|
+
t1 = () => {
|
|
25
|
+
const menuWrapperStyles = menuWrapperEl?.ownerDocument?.defaultView?.getComputedStyle(menuWrapperEl);
|
|
26
|
+
|
|
27
|
+
if (!menuWrapperStyles) {
|
|
28
|
+
return;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
const nextCssValues = {
|
|
32
|
+
itemHeightFromCss: parseInt(menuWrapperStyles.getPropertyValue("--_rs-dropdown-menu-item-height"), 10) || null,
|
|
33
|
+
contrastPrimaryFromCss: parseInt(menuWrapperStyles.getPropertyValue("--rs-dropdown-menu-contrast-primary"), 10) || null
|
|
34
|
+
};
|
|
35
|
+
setCssValues(previousCssValues => previousCssValues.itemHeightFromCss === nextCssValues.itemHeightFromCss && previousCssValues.contrastPrimaryFromCss === nextCssValues.contrastPrimaryFromCss ? previousCssValues : nextCssValues);
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
t2 = [menuWrapperEl];
|
|
39
|
+
$[1] = menuWrapperEl;
|
|
40
|
+
$[2] = t1;
|
|
41
|
+
$[3] = t2;
|
|
42
|
+
} else {
|
|
43
|
+
t1 = $[2];
|
|
44
|
+
t2 = $[3];
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
useIsomorphicLayoutEffect(t1, t2);
|
|
48
|
+
return cssValues;
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
export { useExtractCssValues };
|
|
@@ -6,6 +6,8 @@ DropdownMenu is a special type of Dropdown component with predefined dimensions
|
|
|
6
6
|
|
|
7
7
|
### Features showcase
|
|
8
8
|
|
|
9
|
+
Do not combine `iconPlacement="right"` with `selected` prop.
|
|
10
|
+
|
|
9
11
|
#### Basic example
|
|
10
12
|
|
|
11
13
|
```tsx
|
|
@@ -139,7 +141,8 @@ const GlowMenuItem = ({ theme, ...restProps }) => {
|
|
|
139
141
|
lightSizeEnterAnimationTime: 0,
|
|
140
142
|
lightSizeLeaveAnimationTime: 0,
|
|
141
143
|
preset: 'bright-pink',
|
|
142
|
-
enableBurst: true
|
|
144
|
+
enableBurst: true,
|
|
145
|
+
forceTheme: 'light'
|
|
143
146
|
});
|
|
144
147
|
return <MenuItem {...restProps} ref={ref} />;
|
|
145
148
|
};
|
|
@@ -171,45 +174,45 @@ const Demo = () => {
|
|
|
171
174
|
render(<Demo />);
|
|
172
175
|
```
|
|
173
176
|
|
|
174
|
-
#### With
|
|
177
|
+
#### With selected support
|
|
175
178
|
|
|
176
179
|
```tsx
|
|
177
180
|
import { useState } from 'react';
|
|
178
181
|
import { DropdownMenu, MenuItem } from '@rescui/dropdown-menu';
|
|
179
182
|
import { Button } from '@rescui/button';
|
|
180
|
-
import { useGlowHover } from '@rescui/use-glow-hover';
|
|
181
183
|
|
|
182
|
-
const
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
184
|
+
const OPTIONS = [
|
|
185
|
+
'Some text 1',
|
|
186
|
+
'Some text 2',
|
|
187
|
+
'Some text 3',
|
|
188
|
+
'Some text 4',
|
|
189
|
+
'Some text 5',
|
|
190
|
+
'Some text 6',
|
|
191
|
+
'Some text 7',
|
|
192
|
+
'Some text 8'
|
|
193
|
+
];
|
|
192
194
|
|
|
193
195
|
const Demo = () => {
|
|
194
196
|
const [isOpen, setIsOpen] = useState(false);
|
|
197
|
+
const [selected, setSelected] = useState(OPTIONS[2]);
|
|
195
198
|
|
|
196
199
|
const toggleIsOpen = () => setIsOpen(s => !s);
|
|
197
200
|
|
|
198
201
|
return (
|
|
199
202
|
<DropdownMenu
|
|
200
|
-
mode={'rock'}
|
|
201
203
|
isOpen={isOpen}
|
|
202
204
|
onRequestClose={() => setIsOpen(false)}
|
|
203
205
|
trigger={<Button onClick={toggleIsOpen}>Open Menu</Button>}
|
|
204
206
|
>
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
207
|
+
{OPTIONS.map(option => (
|
|
208
|
+
<MenuItem
|
|
209
|
+
key={option}
|
|
210
|
+
selected={selected === option}
|
|
211
|
+
onClick={() => setSelected(option)}
|
|
212
|
+
>
|
|
213
|
+
{option}
|
|
214
|
+
</MenuItem>
|
|
215
|
+
))}
|
|
213
216
|
</DropdownMenu>
|
|
214
217
|
);
|
|
215
218
|
};
|
|
@@ -283,6 +286,106 @@ const Demo = () => {
|
|
|
283
286
|
render(<Demo />);
|
|
284
287
|
```
|
|
285
288
|
|
|
289
|
+
#### With hover icon
|
|
290
|
+
|
|
291
|
+
```tsx
|
|
292
|
+
import { useState } from 'react';
|
|
293
|
+
import { DropdownMenu, MenuItem } from '@rescui/dropdown-menu';
|
|
294
|
+
import { Button } from '@rescui/button';
|
|
295
|
+
import {
|
|
296
|
+
LeftOutlineIcon,
|
|
297
|
+
DownloadOutlineIcon,
|
|
298
|
+
CloseOutlineIcon
|
|
299
|
+
} from '@rescui/icons';
|
|
300
|
+
|
|
301
|
+
const Demo = () => {
|
|
302
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
303
|
+
|
|
304
|
+
const toggleIsOpen = () => setIsOpen(s => !s);
|
|
305
|
+
|
|
306
|
+
return (
|
|
307
|
+
<DropdownMenu
|
|
308
|
+
isOpen={isOpen}
|
|
309
|
+
onRequestClose={() => setIsOpen(false)}
|
|
310
|
+
trigger={<Button onClick={toggleIsOpen}>With hover icons</Button>}
|
|
311
|
+
size="l"
|
|
312
|
+
>
|
|
313
|
+
<MenuItem hoverIcon={<DownloadOutlineIcon />}>Some text 1</MenuItem>
|
|
314
|
+
<MenuItem hoverIcon={<CloseOutlineIcon />} selected>
|
|
315
|
+
Some text 2
|
|
316
|
+
</MenuItem>
|
|
317
|
+
<MenuItem hoverIcon={<DownloadOutlineIcon />}>Some text 3</MenuItem>
|
|
318
|
+
<MenuItem
|
|
319
|
+
icon={<LeftOutlineIcon />}
|
|
320
|
+
iconPlacement="right"
|
|
321
|
+
hoverIcon={<CloseOutlineIcon />}
|
|
322
|
+
>
|
|
323
|
+
Some text 4
|
|
324
|
+
</MenuItem>
|
|
325
|
+
<MenuItem hoverIcon={<DownloadOutlineIcon />}>Some text 5</MenuItem>
|
|
326
|
+
</DropdownMenu>
|
|
327
|
+
);
|
|
328
|
+
};
|
|
329
|
+
|
|
330
|
+
render(<Demo />);
|
|
331
|
+
```
|
|
332
|
+
|
|
333
|
+
#### Contrast primary color
|
|
334
|
+
|
|
335
|
+
If your primary color background requires dark text color, use `--rs-dropdown-menu-contrast-primary` CSS variable.
|
|
336
|
+
|
|
337
|
+
```tsx
|
|
338
|
+
import { useState } from 'react';
|
|
339
|
+
import { DropdownMenu, MenuItem } from '@rescui/dropdown-menu';
|
|
340
|
+
import { Button } from '@rescui/button';
|
|
341
|
+
|
|
342
|
+
const Demo = () => {
|
|
343
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
344
|
+
|
|
345
|
+
const toggleIsOpen = () => setIsOpen(s => !s);
|
|
346
|
+
|
|
347
|
+
return (
|
|
348
|
+
<div className="light-green-primary">
|
|
349
|
+
<DropdownMenu
|
|
350
|
+
isOpen={isOpen}
|
|
351
|
+
onRequestClose={() => setIsOpen(false)}
|
|
352
|
+
trigger={
|
|
353
|
+
<Button onClick={toggleIsOpen} mode="rock">
|
|
354
|
+
Open Menu
|
|
355
|
+
</Button>
|
|
356
|
+
}
|
|
357
|
+
size="l"
|
|
358
|
+
className="dropdown-menu-with-contrast-primary"
|
|
359
|
+
>
|
|
360
|
+
<MenuItem>Some text 1</MenuItem>
|
|
361
|
+
<MenuItem>Some text 2</MenuItem>
|
|
362
|
+
<MenuItem>Some text 3</MenuItem>
|
|
363
|
+
<MenuItem>Some text 4</MenuItem>
|
|
364
|
+
<MenuItem>Some text 5</MenuItem>
|
|
365
|
+
</DropdownMenu>
|
|
366
|
+
</div>
|
|
367
|
+
);
|
|
368
|
+
};
|
|
369
|
+
|
|
370
|
+
render(<Demo />);
|
|
371
|
+
```
|
|
372
|
+
|
|
373
|
+
```postcss
|
|
374
|
+
.dropdown-menu-with-contrast-primary {
|
|
375
|
+
--rs-dropdown-menu-contrast-primary: 1;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
.light-green-primary {
|
|
379
|
+
--rs-color-primary-light-theme: rgb(71, 224, 84);
|
|
380
|
+
--rs-color-primary-t-dim-light-theme: rgba(71, 224, 84, 0.8);
|
|
381
|
+
--rs-color-primary-t-fog-light-theme: rgba(71, 224, 84, 0.2);
|
|
382
|
+
|
|
383
|
+
--rs-color-primary-dark-theme: rgb(71, 224, 84);
|
|
384
|
+
--rs-color-primary-t-dim-dark-theme: rgba(71, 224, 84, 0.8);
|
|
385
|
+
--rs-color-primary-t-fog-dark-theme: rgba(71, 224, 84, 0.2);
|
|
386
|
+
}
|
|
387
|
+
```
|
|
388
|
+
|
|
286
389
|
## CSS Mixins API
|
|
287
390
|
|
|
288
391
|
#### `DropdownMenu` mixins
|
|
@@ -342,3 +445,11 @@ render(<MyDropdownMenu />);
|
|
|
342
445
|
}
|
|
343
446
|
}
|
|
344
447
|
```
|
|
448
|
+
|
|
449
|
+
#### `Menu` CSS Vars
|
|
450
|
+
|
|
451
|
+
| Variable | Syntax | Description |
|
|
452
|
+
| --- | --- | --- |
|
|
453
|
+
| `--rs-dropdown-menu-contrast-primary` | `0 \| 1` | The flag whenever the current primary is contrast enough and highlighted text color should be inverted |
|
|
454
|
+
|
|
455
|
+
Check out [this example](/components/dropdown-menu/#contrast-primary-color) for contrast primary.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rescui/dropdown-menu",
|
|
3
|
-
"version": "0.11.19-RUI-297-Add-react-compiler-to-the-packages-build-
|
|
3
|
+
"version": "0.11.19-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.39+8aaaed4be",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "JetBrains",
|
|
@@ -17,10 +17,11 @@
|
|
|
17
17
|
},
|
|
18
18
|
"dependencies": {
|
|
19
19
|
"@babel/runtime-corejs3": "^7.26.0",
|
|
20
|
-
"@rescui/dropdown": "0.11.1-RUI-297-Add-react-compiler-to-the-packages-build-
|
|
21
|
-
"@rescui/menu": "0.13.8-RUI-297-Add-react-compiler-to-the-packages-build-
|
|
22
|
-
"@rescui/use-resize-observer": "0.3.4-RUI-297-Add-react-compiler-to-the-packages-build-
|
|
23
|
-
"classnames": "^2.2.6"
|
|
20
|
+
"@rescui/dropdown": "0.11.1-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.39+8aaaed4be",
|
|
21
|
+
"@rescui/menu": "0.13.8-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.43+8aaaed4be",
|
|
22
|
+
"@rescui/use-resize-observer": "0.3.4-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.39+8aaaed4be",
|
|
23
|
+
"classnames": "^2.2.6",
|
|
24
|
+
"react-compiler-runtime": "^1.0.0"
|
|
24
25
|
},
|
|
25
26
|
"peerDependencies": {
|
|
26
27
|
"@rescui/ui-contexts": "^0.6.0",
|
|
@@ -28,10 +29,10 @@
|
|
|
28
29
|
"react": ">=17.0.0 <20"
|
|
29
30
|
},
|
|
30
31
|
"devDependencies": {
|
|
31
|
-
"@rescui/colors": "0.3.3-RUI-297-Add-react-compiler-to-the-packages-build-
|
|
32
|
-
"@rescui/icons": "1.8.3-RUI-297-Add-react-compiler-to-the-packages-build-
|
|
32
|
+
"@rescui/colors": "0.3.3-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.43+8aaaed4be",
|
|
33
|
+
"@rescui/icons": "1.8.3-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.43+8aaaed4be",
|
|
33
34
|
"@rescui/scripts": "0.5.2",
|
|
34
|
-
"@rescui/typography": "0.27.3-RUI-297-Add-react-compiler-to-the-packages-build-
|
|
35
|
+
"@rescui/typography": "0.27.3-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.43+8aaaed4be",
|
|
35
36
|
"@rescui/visual-regression": "0.1.4"
|
|
36
37
|
},
|
|
37
38
|
"scripts": {
|
|
@@ -39,5 +40,5 @@
|
|
|
39
40
|
"build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
|
|
40
41
|
},
|
|
41
42
|
"nx": {},
|
|
42
|
-
"gitHead": "
|
|
43
|
+
"gitHead": "8aaaed4bee650c002b7f195438380b70c31cc5a4"
|
|
43
44
|
}
|