@rescui/menu 0.14.2-RUI-308-Fix-select-issues-405b9fa40.12 → 0.15.1
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 +294 -63
- package/lib/_virtual/index.css.js +12 -12
- package/lib/index.css +68 -68
- package/lib/menu.js +374 -119
- package/lib/menu.p.module.css.js +34 -34
- package/lib/parts/divider.js +53 -11
- package/lib/parts/group-header.js +43 -11
- package/lib/parts/menu-context.js +72 -15
- package/lib/parts/menu-item.js +305 -92
- package/lib/parts/use-menu-keyboard-navigation.js +225 -110
- package/package.json +10 -10
package/lib/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, { useRef } from 'react';
|
|
3
5
|
import PropTypes from 'prop-types';
|
|
4
6
|
import cn from 'classnames';
|
|
@@ -6,26 +8,93 @@ import { MenuProvider } from './parts/menu-context.js';
|
|
|
6
8
|
import styles from './menu.p.module.css.js';
|
|
7
9
|
import { useMenuKeyboardNavigation } from './parts/use-menu-keyboard-navigation.js';
|
|
8
10
|
|
|
9
|
-
const MenuListbox =
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
11
|
+
const MenuListbox = t0 => {
|
|
12
|
+
const $ = c(52);
|
|
13
|
+
let Tag;
|
|
14
|
+
let activateFirstItem;
|
|
15
|
+
let className;
|
|
16
|
+
let disabled;
|
|
17
|
+
let iconPlacement;
|
|
18
|
+
let itemTag;
|
|
19
|
+
let mode;
|
|
20
|
+
let onKeyDown;
|
|
21
|
+
let onMouseLeave;
|
|
22
|
+
let props;
|
|
23
|
+
let resizeIcons;
|
|
24
|
+
let role;
|
|
25
|
+
let size;
|
|
26
|
+
let tabIndex;
|
|
27
|
+
let theme;
|
|
28
|
+
let wrapItemsWithLi;
|
|
29
|
+
|
|
30
|
+
if ($[0] !== t0) {
|
|
31
|
+
({
|
|
32
|
+
activateFirstItem,
|
|
33
|
+
tag: Tag,
|
|
34
|
+
itemTag,
|
|
35
|
+
iconPlacement,
|
|
36
|
+
disabled,
|
|
37
|
+
size,
|
|
38
|
+
mode,
|
|
39
|
+
theme,
|
|
40
|
+
className,
|
|
41
|
+
wrapItemsWithLi,
|
|
42
|
+
resizeIcons,
|
|
43
|
+
role,
|
|
44
|
+
onKeyDown,
|
|
45
|
+
onMouseLeave,
|
|
46
|
+
tabIndex,
|
|
47
|
+
...props
|
|
48
|
+
} = t0);
|
|
49
|
+
$[0] = t0;
|
|
50
|
+
$[1] = Tag;
|
|
51
|
+
$[2] = activateFirstItem;
|
|
52
|
+
$[3] = className;
|
|
53
|
+
$[4] = disabled;
|
|
54
|
+
$[5] = iconPlacement;
|
|
55
|
+
$[6] = itemTag;
|
|
56
|
+
$[7] = mode;
|
|
57
|
+
$[8] = onKeyDown;
|
|
58
|
+
$[9] = onMouseLeave;
|
|
59
|
+
$[10] = props;
|
|
60
|
+
$[11] = resizeIcons;
|
|
61
|
+
$[12] = role;
|
|
62
|
+
$[13] = size;
|
|
63
|
+
$[14] = tabIndex;
|
|
64
|
+
$[15] = theme;
|
|
65
|
+
$[16] = wrapItemsWithLi;
|
|
66
|
+
} else {
|
|
67
|
+
Tag = $[1];
|
|
68
|
+
activateFirstItem = $[2];
|
|
69
|
+
className = $[3];
|
|
70
|
+
disabled = $[4];
|
|
71
|
+
iconPlacement = $[5];
|
|
72
|
+
itemTag = $[6];
|
|
73
|
+
mode = $[7];
|
|
74
|
+
onKeyDown = $[8];
|
|
75
|
+
onMouseLeave = $[9];
|
|
76
|
+
props = $[10];
|
|
77
|
+
resizeIcons = $[11];
|
|
78
|
+
role = $[12];
|
|
79
|
+
size = $[13];
|
|
80
|
+
tabIndex = $[14];
|
|
81
|
+
theme = $[15];
|
|
82
|
+
wrapItemsWithLi = $[16];
|
|
83
|
+
}
|
|
84
|
+
|
|
28
85
|
const menuRef = useRef(null);
|
|
86
|
+
let t1;
|
|
87
|
+
|
|
88
|
+
if ($[17] !== activateFirstItem) {
|
|
89
|
+
t1 = {
|
|
90
|
+
activateFirstItem
|
|
91
|
+
};
|
|
92
|
+
$[17] = activateFirstItem;
|
|
93
|
+
$[18] = t1;
|
|
94
|
+
} else {
|
|
95
|
+
t1 = $[18];
|
|
96
|
+
}
|
|
97
|
+
|
|
29
98
|
const {
|
|
30
99
|
currentActiveItemEl,
|
|
31
100
|
setCurrentActiveItemEl,
|
|
@@ -34,110 +103,296 @@ const MenuListbox = _ref => {
|
|
|
34
103
|
handleItemFocus,
|
|
35
104
|
handleItemKeyDown,
|
|
36
105
|
handleItemMouseEnter
|
|
37
|
-
} = useMenuKeyboardNavigation(
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
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
|
-
|
|
106
|
+
} = useMenuKeyboardNavigation(t1);
|
|
107
|
+
let t2;
|
|
108
|
+
|
|
109
|
+
if ($[19] !== currentActiveItemEl || $[20] !== handleItemKeyDown || $[21] !== onKeyDown) {
|
|
110
|
+
t2 = e => {
|
|
111
|
+
onKeyDown?.(e);
|
|
112
|
+
|
|
113
|
+
if (e.defaultPrevented || e.target !== e.currentTarget) {
|
|
114
|
+
return;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
handleItemKeyDown(e, currentActiveItemEl ?? undefined);
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
$[19] = currentActiveItemEl;
|
|
121
|
+
$[20] = handleItemKeyDown;
|
|
122
|
+
$[21] = onKeyDown;
|
|
123
|
+
$[22] = t2;
|
|
124
|
+
} else {
|
|
125
|
+
t2 = $[22];
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
const handleMenuKeyDown = t2;
|
|
129
|
+
let t3;
|
|
130
|
+
|
|
131
|
+
if ($[23] !== onMouseLeave || $[24] !== setCurrentActiveItemEl) {
|
|
132
|
+
t3 = e_0 => {
|
|
133
|
+
onMouseLeave?.(e_0);
|
|
134
|
+
|
|
135
|
+
if (e_0.defaultPrevented) {
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
setCurrentActiveItemEl(null);
|
|
140
|
+
menuRef.current?.focus({
|
|
141
|
+
preventScroll: true
|
|
142
|
+
});
|
|
143
|
+
};
|
|
144
|
+
|
|
145
|
+
$[23] = onMouseLeave;
|
|
146
|
+
$[24] = setCurrentActiveItemEl;
|
|
147
|
+
$[25] = t3;
|
|
148
|
+
} else {
|
|
149
|
+
t3 = $[25];
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
const handleMenuMouseLeave = t3;
|
|
153
|
+
const t4 = wrapItemsWithLi ?? Tag === "ul";
|
|
154
|
+
let t5;
|
|
155
|
+
|
|
156
|
+
if ($[26] !== className) {
|
|
157
|
+
t5 = cn(styles.keyboardNavigationEnabled, styles.menu, className);
|
|
158
|
+
$[26] = className;
|
|
159
|
+
$[27] = t5;
|
|
160
|
+
} else {
|
|
161
|
+
t5 = $[27];
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
const t6 = role ?? "listbox";
|
|
165
|
+
const t7 = currentActiveItemEl ? -1 : tabIndex ?? 0;
|
|
166
|
+
let t8;
|
|
167
|
+
|
|
168
|
+
if ($[28] !== Tag || $[29] !== handleMenuKeyDown || $[30] !== handleMenuMouseLeave || $[31] !== props || $[32] !== t5 || $[33] !== t6 || $[34] !== t7) {
|
|
169
|
+
t8 = /*#__PURE__*/React.createElement(Tag, _extends({}, props, {
|
|
170
|
+
className: t5,
|
|
171
|
+
onKeyDown: handleMenuKeyDown,
|
|
172
|
+
onMouseLeave: handleMenuMouseLeave,
|
|
173
|
+
role: t6,
|
|
174
|
+
tabIndex: t7,
|
|
175
|
+
ref: menuRef
|
|
176
|
+
}));
|
|
177
|
+
$[28] = Tag;
|
|
178
|
+
$[29] = handleMenuKeyDown;
|
|
179
|
+
$[30] = handleMenuMouseLeave;
|
|
180
|
+
$[31] = props;
|
|
181
|
+
$[32] = t5;
|
|
182
|
+
$[33] = t6;
|
|
183
|
+
$[34] = t7;
|
|
184
|
+
$[35] = t8;
|
|
185
|
+
} else {
|
|
186
|
+
t8 = $[35];
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
let t9;
|
|
190
|
+
|
|
191
|
+
if ($[36] !== currentActiveItemEl || $[37] !== disabled || $[38] !== handleItemFocus || $[39] !== handleItemKeyDown || $[40] !== handleItemMouseEnter || $[41] !== iconPlacement || $[42] !== itemTag || $[43] !== mode || $[44] !== registerItem || $[45] !== resizeIcons || $[46] !== size || $[47] !== t4 || $[48] !== t8 || $[49] !== theme || $[50] !== unregisterItem) {
|
|
192
|
+
t9 = /*#__PURE__*/React.createElement(MenuProvider, {
|
|
193
|
+
itemTag: itemTag,
|
|
194
|
+
iconPlacement: iconPlacement,
|
|
195
|
+
disabled: disabled,
|
|
196
|
+
size: size,
|
|
197
|
+
mode: mode,
|
|
198
|
+
theme: theme,
|
|
199
|
+
wrapWithLi: t4,
|
|
200
|
+
resizeIcons: resizeIcons,
|
|
201
|
+
keyboardNavigationEnabled: true,
|
|
202
|
+
currentActiveItemEl: currentActiveItemEl,
|
|
203
|
+
registerItem: registerItem,
|
|
204
|
+
unregisterItem: unregisterItem,
|
|
205
|
+
onItemFocus: handleItemFocus,
|
|
206
|
+
onItemKeyDown: handleItemKeyDown,
|
|
207
|
+
onItemMouseEnter: handleItemMouseEnter
|
|
208
|
+
}, t8);
|
|
209
|
+
$[36] = currentActiveItemEl;
|
|
210
|
+
$[37] = disabled;
|
|
211
|
+
$[38] = handleItemFocus;
|
|
212
|
+
$[39] = handleItemKeyDown;
|
|
213
|
+
$[40] = handleItemMouseEnter;
|
|
214
|
+
$[41] = iconPlacement;
|
|
215
|
+
$[42] = itemTag;
|
|
216
|
+
$[43] = mode;
|
|
217
|
+
$[44] = registerItem;
|
|
218
|
+
$[45] = resizeIcons;
|
|
219
|
+
$[46] = size;
|
|
220
|
+
$[47] = t4;
|
|
221
|
+
$[48] = t8;
|
|
222
|
+
$[49] = theme;
|
|
223
|
+
$[50] = unregisterItem;
|
|
224
|
+
$[51] = t9;
|
|
225
|
+
} else {
|
|
226
|
+
t9 = $[51];
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
return t9;
|
|
88
230
|
};
|
|
89
231
|
|
|
90
|
-
const MenuRegular =
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
232
|
+
const MenuRegular = t0 => {
|
|
233
|
+
const $ = c(28);
|
|
234
|
+
let Tag;
|
|
235
|
+
let className;
|
|
236
|
+
let disabled;
|
|
237
|
+
let iconPlacement;
|
|
238
|
+
let itemTag;
|
|
239
|
+
let mode;
|
|
240
|
+
let props;
|
|
241
|
+
let resizeIcons;
|
|
242
|
+
let size;
|
|
243
|
+
let theme;
|
|
244
|
+
let wrapItemsWithLi;
|
|
245
|
+
|
|
246
|
+
if ($[0] !== t0) {
|
|
247
|
+
({
|
|
248
|
+
tag: Tag,
|
|
249
|
+
itemTag,
|
|
250
|
+
iconPlacement,
|
|
251
|
+
disabled,
|
|
252
|
+
size,
|
|
253
|
+
mode,
|
|
254
|
+
theme,
|
|
255
|
+
className,
|
|
256
|
+
wrapItemsWithLi,
|
|
257
|
+
resizeIcons,
|
|
258
|
+
...props
|
|
259
|
+
} = t0);
|
|
260
|
+
$[0] = t0;
|
|
261
|
+
$[1] = Tag;
|
|
262
|
+
$[2] = className;
|
|
263
|
+
$[3] = disabled;
|
|
264
|
+
$[4] = iconPlacement;
|
|
265
|
+
$[5] = itemTag;
|
|
266
|
+
$[6] = mode;
|
|
267
|
+
$[7] = props;
|
|
268
|
+
$[8] = resizeIcons;
|
|
269
|
+
$[9] = size;
|
|
270
|
+
$[10] = theme;
|
|
271
|
+
$[11] = wrapItemsWithLi;
|
|
272
|
+
} else {
|
|
273
|
+
Tag = $[1];
|
|
274
|
+
className = $[2];
|
|
275
|
+
disabled = $[3];
|
|
276
|
+
iconPlacement = $[4];
|
|
277
|
+
itemTag = $[5];
|
|
278
|
+
mode = $[6];
|
|
279
|
+
props = $[7];
|
|
280
|
+
resizeIcons = $[8];
|
|
281
|
+
size = $[9];
|
|
282
|
+
theme = $[10];
|
|
283
|
+
wrapItemsWithLi = $[11];
|
|
284
|
+
}
|
|
285
|
+
|
|
286
|
+
const t1 = wrapItemsWithLi ?? Tag === "ul";
|
|
287
|
+
let t2;
|
|
288
|
+
|
|
289
|
+
if ($[12] !== className) {
|
|
290
|
+
t2 = cn(styles.keyboardNavigationDisabled, styles.menu, className);
|
|
291
|
+
$[12] = className;
|
|
292
|
+
$[13] = t2;
|
|
293
|
+
} else {
|
|
294
|
+
t2 = $[13];
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
let t3;
|
|
298
|
+
|
|
299
|
+
if ($[14] !== Tag || $[15] !== props || $[16] !== t2) {
|
|
300
|
+
t3 = /*#__PURE__*/React.createElement(Tag, _extends({
|
|
301
|
+
className: t2
|
|
302
|
+
}, props));
|
|
303
|
+
$[14] = Tag;
|
|
304
|
+
$[15] = props;
|
|
305
|
+
$[16] = t2;
|
|
306
|
+
$[17] = t3;
|
|
307
|
+
} else {
|
|
308
|
+
t3 = $[17];
|
|
309
|
+
}
|
|
310
|
+
|
|
311
|
+
let t4;
|
|
312
|
+
|
|
313
|
+
if ($[18] !== disabled || $[19] !== iconPlacement || $[20] !== itemTag || $[21] !== mode || $[22] !== resizeIcons || $[23] !== size || $[24] !== t1 || $[25] !== t3 || $[26] !== theme) {
|
|
314
|
+
t4 = /*#__PURE__*/React.createElement(MenuProvider, {
|
|
315
|
+
itemTag: itemTag,
|
|
316
|
+
iconPlacement: iconPlacement,
|
|
317
|
+
disabled: disabled,
|
|
318
|
+
size: size,
|
|
319
|
+
mode: mode,
|
|
320
|
+
theme: theme,
|
|
321
|
+
wrapWithLi: t1,
|
|
322
|
+
resizeIcons: resizeIcons,
|
|
323
|
+
keyboardNavigationEnabled: false,
|
|
324
|
+
currentActiveItemEl: null,
|
|
325
|
+
registerItem: null,
|
|
326
|
+
unregisterItem: null,
|
|
327
|
+
onItemFocus: null,
|
|
328
|
+
onItemKeyDown: null,
|
|
329
|
+
onItemMouseEnter: null
|
|
330
|
+
}, t3);
|
|
331
|
+
$[18] = disabled;
|
|
332
|
+
$[19] = iconPlacement;
|
|
333
|
+
$[20] = itemTag;
|
|
334
|
+
$[21] = mode;
|
|
335
|
+
$[22] = resizeIcons;
|
|
336
|
+
$[23] = size;
|
|
337
|
+
$[24] = t1;
|
|
338
|
+
$[25] = t3;
|
|
339
|
+
$[26] = theme;
|
|
340
|
+
$[27] = t4;
|
|
341
|
+
} else {
|
|
342
|
+
t4 = $[27];
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
return t4;
|
|
124
346
|
};
|
|
125
347
|
|
|
126
|
-
const Menu =
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
348
|
+
const Menu = t0 => {
|
|
349
|
+
const $ = c(10);
|
|
350
|
+
let props;
|
|
351
|
+
let t1;
|
|
352
|
+
let t2;
|
|
353
|
+
let t3;
|
|
354
|
+
|
|
355
|
+
if ($[0] !== t0) {
|
|
356
|
+
({
|
|
357
|
+
enableKeyboardNavigation: t1,
|
|
358
|
+
activateFirstItem: t2,
|
|
359
|
+
tag: t3,
|
|
360
|
+
...props
|
|
361
|
+
} = t0);
|
|
362
|
+
$[0] = t0;
|
|
363
|
+
$[1] = props;
|
|
364
|
+
$[2] = t1;
|
|
365
|
+
$[3] = t2;
|
|
366
|
+
$[4] = t3;
|
|
367
|
+
} else {
|
|
368
|
+
props = $[1];
|
|
369
|
+
t1 = $[2];
|
|
370
|
+
t2 = $[3];
|
|
371
|
+
t3 = $[4];
|
|
372
|
+
}
|
|
373
|
+
|
|
374
|
+
const enableKeyboardNavigation = t1 === undefined ? false : t1;
|
|
375
|
+
const activateFirstItem = t2 === undefined ? false : t2;
|
|
376
|
+
const tag = t3 === undefined ? "ul" : t3;
|
|
377
|
+
let t4;
|
|
378
|
+
|
|
379
|
+
if ($[5] !== activateFirstItem || $[6] !== enableKeyboardNavigation || $[7] !== props || $[8] !== tag) {
|
|
380
|
+
t4 = enableKeyboardNavigation ? /*#__PURE__*/React.createElement(MenuListbox, _extends({
|
|
381
|
+
activateFirstItem: activateFirstItem,
|
|
382
|
+
tag: tag
|
|
383
|
+
}, props)) : /*#__PURE__*/React.createElement(MenuRegular, _extends({
|
|
384
|
+
tag: tag
|
|
385
|
+
}, props));
|
|
386
|
+
$[5] = activateFirstItem;
|
|
387
|
+
$[6] = enableKeyboardNavigation;
|
|
388
|
+
$[7] = props;
|
|
389
|
+
$[8] = tag;
|
|
390
|
+
$[9] = t4;
|
|
391
|
+
} else {
|
|
392
|
+
t4 = $[9];
|
|
393
|
+
}
|
|
394
|
+
|
|
395
|
+
return t4;
|
|
141
396
|
};
|
|
142
397
|
|
|
143
398
|
Menu.propTypes = {
|
package/lib/menu.p.module.css.js
CHANGED
|
@@ -1,37 +1,37 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"themeLight": "
|
|
3
|
-
"themeDark": "
|
|
4
|
-
"menu": "
|
|
5
|
-
"sizeS": "
|
|
6
|
-
"sizeM": "
|
|
7
|
-
"sizeL": "
|
|
8
|
-
"modeClassic": "
|
|
9
|
-
"modeRock": "
|
|
10
|
-
"modeClear": "
|
|
11
|
-
"iconPlacementLeft": "
|
|
12
|
-
"iconPlacementRight": "
|
|
13
|
-
"wrapper": "
|
|
14
|
-
"hoverIcon": "
|
|
15
|
-
"hoverIconNoReserve": "
|
|
16
|
-
"menuItem": "
|
|
17
|
-
"keyboardNavigationDisabled": "
|
|
18
|
-
"selected": "
|
|
19
|
-
"keyboardNavigationEnabled": "
|
|
20
|
-
"hideCustomIconOnHover": "
|
|
21
|
-
"customIcon": "
|
|
22
|
-
"hideSelectedIconOnHover": "
|
|
23
|
-
"selectedIcon": "
|
|
24
|
-
"disabled": "
|
|
25
|
-
"contentWrapper": "
|
|
26
|
-
"content": "
|
|
27
|
-
"icon": "
|
|
28
|
-
"resizedIcon": "
|
|
29
|
-
"divider": "
|
|
30
|
-
"groupHeaderThemeLight": "
|
|
31
|
-
"groupHeaderThemeDark": "
|
|
32
|
-
"groupHeaderSizeL": "
|
|
33
|
-
"groupHeaderSizeM": "
|
|
34
|
-
"groupHeaderSizeS": "
|
|
35
|
-
"groupHeader": "
|
|
2
|
+
"themeLight": "_themeLight_2eg6os_8",
|
|
3
|
+
"themeDark": "_themeDark_2eg6os_11",
|
|
4
|
+
"menu": "_menu_2eg6os_15",
|
|
5
|
+
"sizeS": "_sizeS_2eg6os_21",
|
|
6
|
+
"sizeM": "_sizeM_2eg6os_24",
|
|
7
|
+
"sizeL": "_sizeL_2eg6os_27",
|
|
8
|
+
"modeClassic": "_modeClassic_2eg6os_31",
|
|
9
|
+
"modeRock": "_modeRock_2eg6os_34",
|
|
10
|
+
"modeClear": "_modeClear_2eg6os_37",
|
|
11
|
+
"iconPlacementLeft": "_iconPlacementLeft_2eg6os_41",
|
|
12
|
+
"iconPlacementRight": "_iconPlacementRight_2eg6os_45",
|
|
13
|
+
"wrapper": "_wrapper_2eg6os_49",
|
|
14
|
+
"hoverIcon": "_hoverIcon_2eg6os_53",
|
|
15
|
+
"hoverIconNoReserve": "_hoverIconNoReserve_2eg6os_56",
|
|
16
|
+
"menuItem": "_menuItem_2eg6os_61",
|
|
17
|
+
"keyboardNavigationDisabled": "_keyboardNavigationDisabled_2eg6os_98",
|
|
18
|
+
"selected": "_selected_2eg6os_112",
|
|
19
|
+
"keyboardNavigationEnabled": "_keyboardNavigationEnabled_2eg6os_119",
|
|
20
|
+
"hideCustomIconOnHover": "_hideCustomIconOnHover_2eg6os_130",
|
|
21
|
+
"customIcon": "_customIcon_2eg6os_132",
|
|
22
|
+
"hideSelectedIconOnHover": "_hideSelectedIconOnHover_2eg6os_137",
|
|
23
|
+
"selectedIcon": "_selectedIcon_2eg6os_139",
|
|
24
|
+
"disabled": "_disabled_2eg6os_144",
|
|
25
|
+
"contentWrapper": "_contentWrapper_2eg6os_151",
|
|
26
|
+
"content": "_content_2eg6os_151",
|
|
27
|
+
"icon": "_icon_2eg6os_41",
|
|
28
|
+
"resizedIcon": "_resizedIcon_2eg6os_169",
|
|
29
|
+
"divider": "_divider_2eg6os_177",
|
|
30
|
+
"groupHeaderThemeLight": "_groupHeaderThemeLight_2eg6os_191",
|
|
31
|
+
"groupHeaderThemeDark": "_groupHeaderThemeDark_2eg6os_194",
|
|
32
|
+
"groupHeaderSizeL": "_groupHeaderSizeL_2eg6os_198",
|
|
33
|
+
"groupHeaderSizeM": "_groupHeaderSizeM_2eg6os_201",
|
|
34
|
+
"groupHeaderSizeS": "_groupHeaderSizeS_2eg6os_204",
|
|
35
|
+
"groupHeader": "_groupHeader_2eg6os_191"
|
|
36
36
|
};
|
|
37
37
|
export { styles as default };
|
package/lib/parts/divider.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 from 'react';
|
|
3
5
|
import cn from 'classnames';
|
|
4
6
|
import PropTypes from 'prop-types';
|
|
@@ -10,19 +12,59 @@ const THEME_CLASS = {
|
|
|
10
12
|
dark: styles.themeDark
|
|
11
13
|
};
|
|
12
14
|
|
|
13
|
-
const Divider =
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
const Divider = t0 => {
|
|
16
|
+
const $ = c(11);
|
|
17
|
+
let className;
|
|
18
|
+
let restProps;
|
|
19
|
+
let theme;
|
|
20
|
+
|
|
21
|
+
if ($[0] !== t0) {
|
|
22
|
+
({
|
|
23
|
+
className,
|
|
24
|
+
theme,
|
|
25
|
+
...restProps
|
|
26
|
+
} = t0);
|
|
27
|
+
$[0] = t0;
|
|
28
|
+
$[1] = className;
|
|
29
|
+
$[2] = restProps;
|
|
30
|
+
$[3] = theme;
|
|
31
|
+
} else {
|
|
32
|
+
className = $[1];
|
|
33
|
+
restProps = $[2];
|
|
34
|
+
theme = $[3];
|
|
35
|
+
}
|
|
36
|
+
|
|
19
37
|
const menuContext = useMenuContext();
|
|
20
38
|
const actualTheme = useThemeWithUndefined(menuContext.theme ?? theme);
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
39
|
+
const t1 = THEME_CLASS[actualTheme];
|
|
40
|
+
let t2;
|
|
41
|
+
|
|
42
|
+
if ($[4] !== className || $[5] !== t1) {
|
|
43
|
+
t2 = cn(styles.divider, t1, className);
|
|
44
|
+
$[4] = className;
|
|
45
|
+
$[5] = t1;
|
|
46
|
+
$[6] = t2;
|
|
47
|
+
} else {
|
|
48
|
+
t2 = $[6];
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
const t3 = menuContext.keyboardNavigationEnabled ? "presentation" : undefined;
|
|
52
|
+
let t4;
|
|
53
|
+
|
|
54
|
+
if ($[7] !== restProps || $[8] !== t2 || $[9] !== t3) {
|
|
55
|
+
t4 = /*#__PURE__*/React.createElement("hr", _extends({
|
|
56
|
+
className: t2,
|
|
57
|
+
role: t3
|
|
58
|
+
}, restProps));
|
|
59
|
+
$[7] = restProps;
|
|
60
|
+
$[8] = t2;
|
|
61
|
+
$[9] = t3;
|
|
62
|
+
$[10] = t4;
|
|
63
|
+
} else {
|
|
64
|
+
t4 = $[10];
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
return t4;
|
|
26
68
|
};
|
|
27
69
|
|
|
28
70
|
Divider.propTypes = {
|