@rescui/menu 0.10.9 → 0.10.11-RUI-226-Update-card-cn-6e43cc89.60
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/index.css +63 -81
- package/lib/index.p.module.css.js +26 -26
- package/lib/menu.js +33 -53
- package/lib/parts/divider.js +13 -28
- package/lib/parts/group-header.js +12 -14
- package/lib/parts/menu-context.js +10 -13
- package/lib/parts/menu-item.js +53 -78
- package/lib/parts/navigation-utils.js +4 -12
- package/lib/parts/use-menu-keyboard-navigation.js +32 -52
- package/lib/public-api.p.css +32 -20
- package/lib/public-api.pcss +32 -20
- package/package.json +9 -9
package/lib/index.css
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
.
|
|
1
|
+
._themeLight_zsk0nr_8{
|
|
2
2
|
--rs-theme-dark:0;
|
|
3
3
|
}
|
|
4
|
-
.
|
|
4
|
+
._themeDark_zsk0nr_11{
|
|
5
5
|
--rs-theme-dark:1;
|
|
6
6
|
}
|
|
7
|
-
.
|
|
7
|
+
._sizeS_zsk0nr_15{
|
|
8
8
|
--_rs-menu-mi-icon-offset:8px;
|
|
9
9
|
--_rs-menu-mi-vertical-padding:6px;
|
|
10
10
|
--_rs-menu-mi-horizontal-padding:8px;
|
|
11
|
-
--_rs-typography-letter-spacing:0.0045em;
|
|
11
|
+
--_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
|
|
12
12
|
--_rs-typography-text-transform:initial;
|
|
13
13
|
--_rs-typography-font-variant-numeric:initial;
|
|
14
14
|
--_rs-typography-font-family:var(
|
|
@@ -41,11 +41,11 @@
|
|
|
41
41
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
42
42
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
43
43
|
}
|
|
44
|
-
.
|
|
44
|
+
._sizeM_zsk0nr_18{
|
|
45
45
|
--_rs-menu-mi-icon-offset:8px;
|
|
46
46
|
--_rs-menu-mi-vertical-padding:8px;
|
|
47
47
|
--_rs-menu-mi-horizontal-padding:16px;
|
|
48
|
-
--_rs-typography-letter-spacing:0.0015em;
|
|
48
|
+
--_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
|
|
49
49
|
--_rs-typography-text-transform:initial;
|
|
50
50
|
--_rs-typography-font-variant-numeric:initial;
|
|
51
51
|
--_rs-typography-font-family:var(
|
|
@@ -73,21 +73,24 @@
|
|
|
73
73
|
--_rs-typography-text-auto-offset:16px;
|
|
74
74
|
--_rs-typography-ul-list-li-padding-left:22px;
|
|
75
75
|
--_rs-typography-ol-list-li-padding-left:26px;
|
|
76
|
-
--_rs-typography-list-li-margin-top-from-text:
|
|
76
|
+
--_rs-typography-list-li-margin-top-from-text:var(
|
|
77
|
+
--_rs-typography-text-2-sm-list-li-margin-top-from-text,
|
|
78
|
+
16px
|
|
79
|
+
);
|
|
77
80
|
--_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
|
|
78
81
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
79
82
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
80
83
|
}
|
|
81
84
|
@media screen and (max-width: 640px){
|
|
82
|
-
.
|
|
83
|
-
--_rs-typography-list-li-margin-top-from-text:12px;
|
|
85
|
+
._sizeM_zsk0nr_18{
|
|
86
|
+
--_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
|
|
84
87
|
}
|
|
85
88
|
}
|
|
86
|
-
.
|
|
89
|
+
._sizeL_zsk0nr_21{
|
|
87
90
|
--_rs-menu-mi-icon-offset:16px;
|
|
88
91
|
--_rs-menu-mi-vertical-padding:12px;
|
|
89
92
|
--_rs-menu-mi-horizontal-padding:16px;
|
|
90
|
-
--_rs-typography-letter-spacing:normal;
|
|
93
|
+
--_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
|
|
91
94
|
--_rs-typography-text-transform:initial;
|
|
92
95
|
--_rs-typography-font-variant-numeric:initial;
|
|
93
96
|
--_rs-typography-font-family:var(
|
|
@@ -115,17 +118,20 @@
|
|
|
115
118
|
--_rs-typography-text-auto-offset:32px;
|
|
116
119
|
--_rs-typography-ul-list-li-padding-left:26px;
|
|
117
120
|
--_rs-typography-ol-list-li-padding-left:32px;
|
|
118
|
-
--_rs-typography-list-li-margin-top-from-text:
|
|
121
|
+
--_rs-typography-list-li-margin-top-from-text:var(
|
|
122
|
+
--_rs-typography-text-1-sm-list-li-margin-top-from-text,
|
|
123
|
+
24px
|
|
124
|
+
);
|
|
119
125
|
--_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
|
|
120
126
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
121
127
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
122
128
|
}
|
|
123
129
|
@media screen and (max-width: 640px){
|
|
124
|
-
.
|
|
125
|
-
--_rs-typography-list-li-margin-top-from-text:16px;
|
|
130
|
+
._sizeL_zsk0nr_21{
|
|
131
|
+
--_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
|
|
126
132
|
}
|
|
127
133
|
}
|
|
128
|
-
.
|
|
134
|
+
._modeClassic_zsk0nr_25{
|
|
129
135
|
--_rs-menu-mi-horizontal-padding-with-mode:var(
|
|
130
136
|
--_rs-menu-mi-horizontal-padding
|
|
131
137
|
);
|
|
@@ -139,7 +145,7 @@
|
|
|
139
145
|
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)
|
|
140
146
|
);
|
|
141
147
|
}
|
|
142
|
-
.
|
|
148
|
+
._modeRock_zsk0nr_28{
|
|
143
149
|
--_rs-menu-mi-horizontal-padding-with-mode:var(
|
|
144
150
|
--_rs-menu-mi-horizontal-padding
|
|
145
151
|
);
|
|
@@ -153,7 +159,7 @@
|
|
|
153
159
|
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)
|
|
154
160
|
);
|
|
155
161
|
}
|
|
156
|
-
.
|
|
162
|
+
._modeClear_zsk0nr_31{
|
|
157
163
|
--_rs-menu-mi-horizontal-padding-with-mode:0;
|
|
158
164
|
--_rs-menu-mi-active-background:none;
|
|
159
165
|
--_rs-menu-mi-selected-color:var(--_rs-color-primary);
|
|
@@ -166,15 +172,15 @@
|
|
|
166
172
|
0.1
|
|
167
173
|
);
|
|
168
174
|
}
|
|
169
|
-
.
|
|
175
|
+
._iconPlacementLeft_zsk0nr_35{
|
|
170
176
|
--_rs-menu-mi-flex-direction:row;
|
|
171
177
|
--_rs-menu-mi-justify-content:initial;
|
|
172
178
|
}
|
|
173
|
-
.
|
|
179
|
+
._iconPlacementRight_zsk0nr_39{
|
|
174
180
|
--_rs-menu-mi-flex-direction:row-reverse;
|
|
175
181
|
--_rs-menu-mi-justify-content:space-between;
|
|
176
182
|
}
|
|
177
|
-
.
|
|
183
|
+
._wrapper_zsk0nr_43{
|
|
178
184
|
--_rs-theme-dark:var(
|
|
179
185
|
--_rs-internal-force-theme-dark-consult-rescui-before-using,
|
|
180
186
|
var(--rs-theme-dark, 0)
|
|
@@ -184,7 +190,7 @@
|
|
|
184
190
|
--_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
|
|
185
191
|
}
|
|
186
192
|
@supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
187
|
-
.
|
|
193
|
+
._wrapper_zsk0nr_43{
|
|
188
194
|
--_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)));
|
|
189
195
|
--_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)));
|
|
190
196
|
--_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)));
|
|
@@ -193,7 +199,7 @@
|
|
|
193
199
|
}
|
|
194
200
|
}
|
|
195
201
|
@supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
196
|
-
.
|
|
202
|
+
._wrapper_zsk0nr_43{
|
|
197
203
|
--_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);
|
|
198
204
|
--_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));
|
|
199
205
|
--_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));
|
|
@@ -201,15 +207,11 @@
|
|
|
201
207
|
--_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));
|
|
202
208
|
}
|
|
203
209
|
}
|
|
204
|
-
.
|
|
205
|
-
|
|
206
|
-
display:-webkit-box;
|
|
207
|
-
|
|
208
|
-
display:-ms-flexbox;
|
|
210
|
+
._wrapper_zsk0nr_43 {
|
|
209
211
|
|
|
210
212
|
display:flex;
|
|
211
213
|
}
|
|
212
|
-
.
|
|
214
|
+
._menuItem_zsk0nr_50{
|
|
213
215
|
letter-spacing:var(
|
|
214
216
|
--rs-text-base-letter-spacing,
|
|
215
217
|
var(--_rs-typography-letter-spacing)
|
|
@@ -220,26 +222,14 @@
|
|
|
220
222
|
font-weight:var(--_rs-typography-font-weight);
|
|
221
223
|
line-height:var(--_rs-typography-line-height);
|
|
222
224
|
font-variant-numeric:var(--_rs-typography-font-variant-numeric);
|
|
223
|
-
-webkit-font-feature-settings:'kern', 'liga', 'calt';
|
|
224
225
|
font-feature-settings:'kern', 'liga', 'calt';
|
|
225
226
|
|
|
226
|
-
display:-webkit-box;
|
|
227
|
-
|
|
228
|
-
display:-ms-flexbox;
|
|
229
|
-
|
|
230
227
|
display:flex;
|
|
231
228
|
overflow:auto;
|
|
232
|
-
-
|
|
233
|
-
-
|
|
234
|
-
-ms-flex-direction:var(--_rs-menu-mi-flex-direction);
|
|
235
|
-
flex-direction:var(--_rs-menu-mi-flex-direction);
|
|
236
|
-
-webkit-box-flex:1;
|
|
237
|
-
-ms-flex-positive:1;
|
|
238
|
-
flex-grow:1;
|
|
229
|
+
flex-direction:var(--_rs-menu-mi-flex-direction);
|
|
230
|
+
flex-grow:1;
|
|
239
231
|
gap:var(--_rs-menu-mi-icon-offset);
|
|
240
|
-
-
|
|
241
|
-
-ms-flex-pack:var(--_rs-menu-mi-justify-content);
|
|
242
|
-
justify-content:var(--_rs-menu-mi-justify-content);
|
|
232
|
+
justify-content:var(--_rs-menu-mi-justify-content);
|
|
243
233
|
|
|
244
234
|
width:auto;
|
|
245
235
|
|
|
@@ -262,56 +252,49 @@
|
|
|
262
252
|
-webkit-font-smoothing:inherit;
|
|
263
253
|
-moz-osx-font-smoothing:inherit;
|
|
264
254
|
}
|
|
265
|
-
.
|
|
255
|
+
._menuItem_zsk0nr_50:focus{
|
|
266
256
|
outline:none;
|
|
267
257
|
}
|
|
268
|
-
.
|
|
269
|
-
|
|
270
|
-
box-shadow:0 0 0 2px var(--_rs-color-primary-dim), inset 0 0 0 2px var(--_rs-color-primary-dim);
|
|
258
|
+
._keyboardNavigationDisabled_zsk0nr_85 ._menuItem_zsk0nr_50:focus[data-focus-method='key']{
|
|
259
|
+
box-shadow:0 0 0 2px var(--_rs-color-primary-dim), inset 0 0 0 2px var(--_rs-color-primary-dim);
|
|
271
260
|
}
|
|
272
|
-
.
|
|
261
|
+
._menuItem_zsk0nr_50:active{
|
|
273
262
|
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));
|
|
274
263
|
background:var(--_rs-menu-mi-active-background);
|
|
275
264
|
}
|
|
276
|
-
.
|
|
265
|
+
._menuItem_zsk0nr_50._selected_zsk0nr_99{
|
|
277
266
|
color:var(--_rs-menu-mi-selected-color);
|
|
278
267
|
background:var(--_rs-menu-mi-selected-background);
|
|
279
268
|
}
|
|
280
|
-
.
|
|
281
|
-
.
|
|
269
|
+
._menuItem_zsk0nr_50._highlighted_zsk0nr_106,
|
|
270
|
+
._menuItem_zsk0nr_50:not(._disableCursor_zsk0nr_107):hover{
|
|
282
271
|
color:var(--_rs-menu-mi-hover-color);
|
|
283
272
|
background:var(--_rs-menu-mi-hover-background);
|
|
284
273
|
}
|
|
285
|
-
.
|
|
286
|
-
.
|
|
274
|
+
._menuItem_zsk0nr_50._highlighted_zsk0nr_106._selected_zsk0nr_99,
|
|
275
|
+
._menuItem_zsk0nr_50._selected_zsk0nr_99:not(._disableCursor_zsk0nr_107):hover{
|
|
287
276
|
color:var(--_rs-menu-mi-selected-hover-color);
|
|
288
277
|
background-color:var(--_rs-menu-mi-selected-hover-background);
|
|
289
278
|
}
|
|
290
|
-
.
|
|
279
|
+
._menuItem_zsk0nr_50._disabled_zsk0nr_120{
|
|
291
280
|
pointer-events:none;
|
|
292
281
|
|
|
293
282
|
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);
|
|
294
283
|
}
|
|
295
|
-
.
|
|
284
|
+
._disableCursor_zsk0nr_107{
|
|
296
285
|
pointer-events:none;
|
|
297
286
|
}
|
|
298
|
-
.
|
|
299
|
-
-
|
|
300
|
-
-ms-flex-positive:1;
|
|
301
|
-
flex-grow:1;
|
|
287
|
+
._content_zsk0nr_131{
|
|
288
|
+
flex-grow:1;
|
|
302
289
|
|
|
303
290
|
font-size:inherit;
|
|
304
291
|
}
|
|
305
|
-
.
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
flex:0 0;
|
|
309
|
-
-ms-flex-preferred-size:auto;
|
|
310
|
-
flex-basis:auto;
|
|
292
|
+
._icon_zsk0nr_35{
|
|
293
|
+
flex:0 0;
|
|
294
|
+
flex-basis:auto;
|
|
311
295
|
}
|
|
312
|
-
.
|
|
313
|
-
|
|
314
|
-
flex-shrink:0;
|
|
296
|
+
._divider_zsk0nr_144{
|
|
297
|
+
flex-shrink:0;
|
|
315
298
|
|
|
316
299
|
width:100%;
|
|
317
300
|
height:1px;
|
|
@@ -321,16 +304,16 @@
|
|
|
321
304
|
|
|
322
305
|
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);
|
|
323
306
|
}
|
|
324
|
-
.
|
|
307
|
+
._groupHeaderThemeLight_zsk0nr_158{
|
|
325
308
|
--rs-theme-dark:0;
|
|
326
309
|
}
|
|
327
|
-
.
|
|
310
|
+
._groupHeaderThemeDark_zsk0nr_161{
|
|
328
311
|
--rs-theme-dark:1;
|
|
329
312
|
}
|
|
330
|
-
.
|
|
313
|
+
._groupHeaderSizeL_zsk0nr_165{
|
|
331
314
|
--_rs-menu-gh-vertical-padding:12px;
|
|
332
315
|
--_rs-menu-gh-horizontal-padding:16px;
|
|
333
|
-
--_rs-typography-letter-spacing:normal;
|
|
316
|
+
--_rs-typography-letter-spacing:var(--rs-h3-letter-spacing, normal);
|
|
334
317
|
--_rs-typography-text-transform:initial;
|
|
335
318
|
--_rs-typography-font-variant-numeric:initial;
|
|
336
319
|
--_rs-typography-font-family:var(
|
|
@@ -360,10 +343,10 @@
|
|
|
360
343
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
361
344
|
--_rs-typography-link-border-bottom-width-from-text:2px;
|
|
362
345
|
}
|
|
363
|
-
.
|
|
346
|
+
._groupHeaderSizeM_zsk0nr_168{
|
|
364
347
|
--_rs-menu-gh-vertical-padding:8px;
|
|
365
348
|
--_rs-menu-gh-horizontal-padding:16px;
|
|
366
|
-
--_rs-typography-letter-spacing:normal;
|
|
349
|
+
--_rs-typography-letter-spacing:var(--rs-h4-letter-spacing, normal);
|
|
367
350
|
--_rs-typography-text-transform:initial;
|
|
368
351
|
--_rs-typography-font-variant-numeric:initial;
|
|
369
352
|
--_rs-typography-font-family:var(
|
|
@@ -393,10 +376,10 @@
|
|
|
393
376
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
394
377
|
--_rs-typography-link-border-bottom-width-from-text:2px;
|
|
395
378
|
}
|
|
396
|
-
.
|
|
379
|
+
._groupHeaderSizeS_zsk0nr_171{
|
|
397
380
|
--_rs-menu-gh-vertical-padding:6px;
|
|
398
381
|
--_rs-menu-gh-horizontal-padding:8px;
|
|
399
|
-
--_rs-typography-letter-spacing:normal;
|
|
382
|
+
--_rs-typography-letter-spacing:var(--rs-h5-letter-spacing, normal);
|
|
400
383
|
--_rs-typography-text-transform:initial;
|
|
401
384
|
--_rs-typography-font-variant-numeric:initial;
|
|
402
385
|
--_rs-typography-font-family:var(
|
|
@@ -426,7 +409,7 @@
|
|
|
426
409
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
427
410
|
--_rs-typography-link-border-bottom-width-from-text:2px;
|
|
428
411
|
}
|
|
429
|
-
.
|
|
412
|
+
._groupHeader_zsk0nr_158{
|
|
430
413
|
--_rs-theme-dark:var(
|
|
431
414
|
--_rs-internal-force-theme-dark-consult-rescui-before-using,
|
|
432
415
|
var(--rs-theme-dark, 0)
|
|
@@ -436,7 +419,7 @@
|
|
|
436
419
|
--_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
|
|
437
420
|
}
|
|
438
421
|
@supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
439
|
-
.
|
|
422
|
+
._groupHeader_zsk0nr_158{
|
|
440
423
|
--_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)));
|
|
441
424
|
--_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)));
|
|
442
425
|
--_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)));
|
|
@@ -445,7 +428,7 @@
|
|
|
445
428
|
}
|
|
446
429
|
}
|
|
447
430
|
@supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
448
|
-
.
|
|
431
|
+
._groupHeader_zsk0nr_158{
|
|
449
432
|
--_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);
|
|
450
433
|
--_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));
|
|
451
434
|
--_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));
|
|
@@ -453,7 +436,7 @@
|
|
|
453
436
|
--_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));
|
|
454
437
|
}
|
|
455
438
|
}
|
|
456
|
-
.
|
|
439
|
+
._groupHeader_zsk0nr_158 {
|
|
457
440
|
letter-spacing:var(
|
|
458
441
|
--rs-text-base-letter-spacing,
|
|
459
442
|
var(--_rs-typography-letter-spacing)
|
|
@@ -464,7 +447,6 @@
|
|
|
464
447
|
font-weight:var(--_rs-typography-font-weight);
|
|
465
448
|
line-height:var(--_rs-typography-line-height);
|
|
466
449
|
font-variant-numeric:var(--_rs-typography-font-variant-numeric);
|
|
467
|
-
-webkit-font-feature-settings:'kern', 'liga', 'calt';
|
|
468
450
|
font-feature-settings:'kern', 'liga', 'calt';
|
|
469
451
|
|
|
470
452
|
padding:var(--_rs-menu-gh-vertical-padding) var(--_rs-menu-gh-horizontal-padding);
|
|
@@ -1,29 +1,29 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"themeLight": "
|
|
3
|
-
"themeDark": "
|
|
4
|
-
"sizeS": "
|
|
5
|
-
"sizeM": "
|
|
6
|
-
"sizeL": "
|
|
7
|
-
"modeClassic": "
|
|
8
|
-
"modeRock": "
|
|
9
|
-
"modeClear": "
|
|
10
|
-
"iconPlacementLeft": "
|
|
11
|
-
"iconPlacementRight": "
|
|
12
|
-
"wrapper": "
|
|
13
|
-
"menuItem": "
|
|
14
|
-
"keyboardNavigationDisabled": "
|
|
15
|
-
"selected": "
|
|
16
|
-
"highlighted": "
|
|
17
|
-
"disableCursor": "
|
|
18
|
-
"disabled": "
|
|
19
|
-
"content": "
|
|
20
|
-
"icon": "
|
|
21
|
-
"divider": "
|
|
22
|
-
"groupHeaderThemeLight": "
|
|
23
|
-
"groupHeaderThemeDark": "
|
|
24
|
-
"groupHeaderSizeL": "
|
|
25
|
-
"groupHeaderSizeM": "
|
|
26
|
-
"groupHeaderSizeS": "
|
|
27
|
-
"groupHeader": "
|
|
2
|
+
"themeLight": "_themeLight_zsk0nr_8",
|
|
3
|
+
"themeDark": "_themeDark_zsk0nr_11",
|
|
4
|
+
"sizeS": "_sizeS_zsk0nr_15",
|
|
5
|
+
"sizeM": "_sizeM_zsk0nr_18",
|
|
6
|
+
"sizeL": "_sizeL_zsk0nr_21",
|
|
7
|
+
"modeClassic": "_modeClassic_zsk0nr_25",
|
|
8
|
+
"modeRock": "_modeRock_zsk0nr_28",
|
|
9
|
+
"modeClear": "_modeClear_zsk0nr_31",
|
|
10
|
+
"iconPlacementLeft": "_iconPlacementLeft_zsk0nr_35",
|
|
11
|
+
"iconPlacementRight": "_iconPlacementRight_zsk0nr_39",
|
|
12
|
+
"wrapper": "_wrapper_zsk0nr_43",
|
|
13
|
+
"menuItem": "_menuItem_zsk0nr_50",
|
|
14
|
+
"keyboardNavigationDisabled": "_keyboardNavigationDisabled_zsk0nr_85",
|
|
15
|
+
"selected": "_selected_zsk0nr_99",
|
|
16
|
+
"highlighted": "_highlighted_zsk0nr_106",
|
|
17
|
+
"disableCursor": "_disableCursor_zsk0nr_107",
|
|
18
|
+
"disabled": "_disabled_zsk0nr_120",
|
|
19
|
+
"content": "_content_zsk0nr_131",
|
|
20
|
+
"icon": "_icon_zsk0nr_35",
|
|
21
|
+
"divider": "_divider_zsk0nr_144",
|
|
22
|
+
"groupHeaderThemeLight": "_groupHeaderThemeLight_zsk0nr_158",
|
|
23
|
+
"groupHeaderThemeDark": "_groupHeaderThemeDark_zsk0nr_161",
|
|
24
|
+
"groupHeaderSizeL": "_groupHeaderSizeL_zsk0nr_165",
|
|
25
|
+
"groupHeaderSizeM": "_groupHeaderSizeM_zsk0nr_168",
|
|
26
|
+
"groupHeaderSizeS": "_groupHeaderSizeS_zsk0nr_171",
|
|
27
|
+
"groupHeader": "_groupHeader_zsk0nr_158"
|
|
28
28
|
};
|
|
29
29
|
export { styles as default };
|
package/lib/menu.js
CHANGED
|
@@ -1,18 +1,3 @@
|
|
|
1
|
-
import "core-js/modules/es.object.to-string.js";
|
|
2
|
-
import "core-js/modules/web.dom-collections.for-each.js";
|
|
3
|
-
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
|
4
|
-
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
|
5
|
-
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
|
6
|
-
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
|
7
|
-
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
|
8
|
-
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
|
9
|
-
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
|
|
10
|
-
var _excluded = ["tag", "itemTag", "iconPlacement", "disabled", "size", "mode", "disableCursor", "theme", "enableKeyboardNavigation", "activateFirstItem", "className", "wrapItemsWithLi", "returnFocusOnUnmount"];
|
|
11
|
-
|
|
12
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
13
|
-
|
|
14
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
15
|
-
|
|
16
1
|
import React from 'react';
|
|
17
2
|
import PropTypes from 'prop-types';
|
|
18
3
|
import cn from 'classnames';
|
|
@@ -20,40 +5,34 @@ import { MenuProvider } from './parts/menu-context.js';
|
|
|
20
5
|
import styles from './index.p.module.css.js';
|
|
21
6
|
import { useMenuKeyboardNavigation } from './parts/use-menu-keyboard-navigation.js';
|
|
22
7
|
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}),
|
|
52
|
-
activeItemRef = _useMenuKeyboardNavig.activeItemRef,
|
|
53
|
-
registerItem = _useMenuKeyboardNavig.registerItem,
|
|
54
|
-
unregisterItem = _useMenuKeyboardNavig.unregisterItem,
|
|
55
|
-
isKeyboardNavigating = _useMenuKeyboardNavig.isKeyboardNavigating;
|
|
56
|
-
|
|
8
|
+
const Menu = _ref => {
|
|
9
|
+
let {
|
|
10
|
+
tag = 'ul',
|
|
11
|
+
itemTag,
|
|
12
|
+
iconPlacement,
|
|
13
|
+
disabled,
|
|
14
|
+
size = 'm',
|
|
15
|
+
mode,
|
|
16
|
+
disableCursor = false,
|
|
17
|
+
theme,
|
|
18
|
+
enableKeyboardNavigation = false,
|
|
19
|
+
activateFirstItem = false,
|
|
20
|
+
className,
|
|
21
|
+
wrapItemsWithLi,
|
|
22
|
+
returnFocusOnUnmount = false,
|
|
23
|
+
...restProps
|
|
24
|
+
} = _ref;
|
|
25
|
+
const Tag = tag;
|
|
26
|
+
const {
|
|
27
|
+
activeItemRef,
|
|
28
|
+
registerItem,
|
|
29
|
+
unregisterItem,
|
|
30
|
+
isKeyboardNavigating
|
|
31
|
+
} = useMenuKeyboardNavigation({
|
|
32
|
+
enableKeyboardNavigation,
|
|
33
|
+
activateFirstItem,
|
|
34
|
+
returnFocusOnUnmount
|
|
35
|
+
});
|
|
57
36
|
return /*#__PURE__*/React.createElement(MenuProvider, {
|
|
58
37
|
itemTag: itemTag,
|
|
59
38
|
iconPlacement: iconPlacement,
|
|
@@ -66,10 +45,11 @@ var Menu = function Menu(_ref) {
|
|
|
66
45
|
unregisterItem: unregisterItem,
|
|
67
46
|
activeItemRef: activeItemRef.current,
|
|
68
47
|
isKeyboardNavigating: isKeyboardNavigating,
|
|
69
|
-
wrapWithLi: wrapItemsWithLi
|
|
70
|
-
}, /*#__PURE__*/React.createElement(Tag,
|
|
71
|
-
className: cn(!enableKeyboardNavigation && styles.keyboardNavigationDisabled, className)
|
|
72
|
-
|
|
48
|
+
wrapWithLi: wrapItemsWithLi ?? tag === 'ul'
|
|
49
|
+
}, /*#__PURE__*/React.createElement(Tag, {
|
|
50
|
+
className: cn(!enableKeyboardNavigation && styles.keyboardNavigationDisabled, className),
|
|
51
|
+
...restProps
|
|
52
|
+
}));
|
|
73
53
|
};
|
|
74
54
|
|
|
75
55
|
Menu.propTypes = {
|
package/lib/parts/divider.js
CHANGED
|
@@ -1,41 +1,26 @@
|
|
|
1
|
-
import "core-js/modules/es.object.to-string.js";
|
|
2
|
-
import "core-js/modules/web.dom-collections.for-each.js";
|
|
3
|
-
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
|
4
|
-
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
|
5
|
-
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
|
6
|
-
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
|
7
|
-
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
|
8
|
-
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
|
9
|
-
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
|
|
10
|
-
var _excluded = ["className", "theme"];
|
|
11
|
-
|
|
12
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
13
|
-
|
|
14
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
15
|
-
|
|
16
1
|
import React from 'react';
|
|
17
2
|
import cn from 'classnames';
|
|
18
3
|
import PropTypes from 'prop-types';
|
|
19
4
|
import { useThemeWithUndefined } from '@rescui/ui-contexts';
|
|
20
5
|
import styles from '../index.p.module.css.js';
|
|
21
6
|
import { useMenuContext } from './menu-context.js';
|
|
22
|
-
|
|
7
|
+
const THEME_CLASS = {
|
|
23
8
|
light: styles.themeLight,
|
|
24
9
|
dark: styles.themeDark
|
|
25
10
|
};
|
|
26
11
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
12
|
+
const Divider = _ref => {
|
|
13
|
+
let {
|
|
14
|
+
className,
|
|
15
|
+
theme,
|
|
16
|
+
...restProps
|
|
17
|
+
} = _ref;
|
|
18
|
+
const menuContext = useMenuContext();
|
|
19
|
+
const actualTheme = useThemeWithUndefined(menuContext.theme ?? theme);
|
|
20
|
+
return /*#__PURE__*/React.createElement("hr", {
|
|
21
|
+
className: cn(styles.divider, THEME_CLASS[actualTheme], className),
|
|
22
|
+
...restProps
|
|
23
|
+
});
|
|
39
24
|
};
|
|
40
25
|
|
|
41
26
|
Divider.propTypes = {
|
|
@@ -4,30 +4,28 @@ import PropTypes from 'prop-types';
|
|
|
4
4
|
import { useThemeWithUndefined } from '@rescui/ui-contexts';
|
|
5
5
|
import styles from '../index.p.module.css.js';
|
|
6
6
|
import { useMenuContext } from './menu-context.js';
|
|
7
|
-
|
|
7
|
+
const SIZE_CLASS = {
|
|
8
8
|
s: styles.groupHeaderSizeS,
|
|
9
9
|
m: styles.groupHeaderSizeM,
|
|
10
10
|
l: styles.groupHeaderSizeL
|
|
11
11
|
};
|
|
12
|
-
|
|
12
|
+
const THEME_CLASS = {
|
|
13
13
|
light: styles.groupHeaderThemeLight,
|
|
14
14
|
dark: styles.groupHeaderThemeDark
|
|
15
15
|
};
|
|
16
16
|
|
|
17
17
|
function GroupHeader(_ref) {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
var Tag = menuContext.wrapWithLi ? 'li' : 'span';
|
|
28
|
-
var actualTheme = useThemeWithUndefined((_menuContext$theme = menuContext.theme) !== null && _menuContext$theme !== void 0 ? _menuContext$theme : propsTheme);
|
|
18
|
+
let {
|
|
19
|
+
className = null,
|
|
20
|
+
text,
|
|
21
|
+
size: propsSize = 'm',
|
|
22
|
+
theme: propsTheme
|
|
23
|
+
} = _ref;
|
|
24
|
+
const menuContext = useMenuContext();
|
|
25
|
+
const Tag = menuContext.wrapWithLi ? 'li' : 'span';
|
|
26
|
+
const actualTheme = useThemeWithUndefined(menuContext.theme ?? propsTheme);
|
|
29
27
|
return /*#__PURE__*/React.createElement(Tag, {
|
|
30
|
-
className: cn(styles.groupHeader, SIZE_CLASS[
|
|
28
|
+
className: cn(styles.groupHeader, SIZE_CLASS[menuContext.size ?? propsSize], THEME_CLASS[actualTheme], className),
|
|
31
29
|
"data-rs-internal": 'menu__group-header'
|
|
32
30
|
}, text);
|
|
33
31
|
}
|
|
@@ -1,26 +1,23 @@
|
|
|
1
|
-
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
|
|
2
|
-
var _excluded = ["children"];
|
|
3
1
|
import React, { useContext } from 'react';
|
|
4
2
|
import PropTypes from 'prop-types';
|
|
5
|
-
|
|
3
|
+
const DEFAULT_MENU_CONTEXT = {
|
|
6
4
|
disabled: false,
|
|
7
5
|
isKeyboardNavigating: false,
|
|
8
6
|
wrapWithLi: false,
|
|
9
7
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
10
|
-
registerItem:
|
|
8
|
+
registerItem: () => {},
|
|
11
9
|
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
12
|
-
unregisterItem:
|
|
10
|
+
unregisterItem: () => {}
|
|
13
11
|
};
|
|
14
|
-
|
|
12
|
+
const MenuContext = /*#__PURE__*/React.createContext(DEFAULT_MENU_CONTEXT);
|
|
15
13
|
|
|
16
|
-
|
|
17
|
-
return useContext(MenuContext);
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
var MenuProvider = function MenuProvider(_ref) {
|
|
21
|
-
var children = _ref.children,
|
|
22
|
-
restProps = _objectWithoutProperties(_ref, _excluded);
|
|
14
|
+
const useMenuContext = () => useContext(MenuContext);
|
|
23
15
|
|
|
16
|
+
const MenuProvider = _ref => {
|
|
17
|
+
let {
|
|
18
|
+
children,
|
|
19
|
+
...restProps
|
|
20
|
+
} = _ref;
|
|
24
21
|
return /*#__PURE__*/React.createElement(MenuContext.Provider, {
|
|
25
22
|
value: restProps
|
|
26
23
|
}, children);
|