@rescui/switcher 0.12.11 → 0.13.0
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 +109 -77
- package/lib/switcher.d.ts +28 -3
- package/lib/switcher.js +30 -16
- package/lib/switcher.p.module.css.js +19 -18
- package/lib/use-safe-id.d.ts +2 -0
- package/lib/use-safe-id.js +15 -0
- package/lib/vertical-switcher.d.ts +29 -3
- package/lib/vertical-switcher.js +34 -18
- package/lib/vertical-switcher.p.module.css.js +20 -19
- package/package.json +4 -4
package/lib/index.css
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
.
|
|
1
|
+
._themeLight_nimrq6_6{
|
|
2
2
|
--rs-theme-dark:0;
|
|
3
3
|
}
|
|
4
|
-
.
|
|
4
|
+
._themeDark_nimrq6_9{
|
|
5
5
|
--rs-theme-dark:1;
|
|
6
6
|
}
|
|
7
|
-
.
|
|
7
|
+
._sizeXS_nimrq6_13{
|
|
8
8
|
--_rs-switcher-border-radius:4px;
|
|
9
9
|
--_rs-switcher-compact-border-radius:var(--_rs-switcher-border-radius);
|
|
10
10
|
--_rs-switcher-option-padding:2px 12px;
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
--_rs-switcher-compact-icon-offset:var(--_rs-switcher-icon-offset);
|
|
15
15
|
--_rs-switcher-icon-margin-vertical:2px;
|
|
16
16
|
}
|
|
17
|
-
.
|
|
17
|
+
._sizeXS_nimrq6_13 [data-rs-internal='switcher__option']{
|
|
18
18
|
--_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
|
|
19
19
|
--_rs-typography-text-transform:initial;
|
|
20
20
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
50
50
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
51
51
|
}
|
|
52
|
-
.
|
|
52
|
+
._sizeS_nimrq6_16{
|
|
53
53
|
--_rs-switcher-border-radius:16px;
|
|
54
54
|
--_rs-switcher-compact-border-radius:4px;
|
|
55
55
|
--_rs-switcher-option-padding:6px 16px;
|
|
@@ -59,7 +59,7 @@
|
|
|
59
59
|
--_rs-switcher-compact-icon-offset:4px;
|
|
60
60
|
--_rs-switcher-icon-margin-vertical:0px;
|
|
61
61
|
}
|
|
62
|
-
.
|
|
62
|
+
._sizeS_nimrq6_16 [data-rs-internal='switcher__option']{
|
|
63
63
|
--_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
|
|
64
64
|
--_rs-typography-text-transform:initial;
|
|
65
65
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -94,7 +94,7 @@
|
|
|
94
94
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
95
95
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
96
96
|
}
|
|
97
|
-
.
|
|
97
|
+
._sizeM_nimrq6_19{
|
|
98
98
|
--_rs-switcher-border-radius:20px;
|
|
99
99
|
--_rs-switcher-compact-border-radius:8px;
|
|
100
100
|
--_rs-switcher-option-padding:8px 24px;
|
|
@@ -104,7 +104,7 @@
|
|
|
104
104
|
--_rs-switcher-compact-icon-offset:8px;
|
|
105
105
|
--_rs-switcher-icon-margin-vertical:0px;
|
|
106
106
|
}
|
|
107
|
-
.
|
|
107
|
+
._sizeM_nimrq6_19 [data-rs-internal='switcher__option']{
|
|
108
108
|
--_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
|
|
109
109
|
--_rs-typography-text-transform:initial;
|
|
110
110
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -143,11 +143,11 @@
|
|
|
143
143
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
144
144
|
}
|
|
145
145
|
@media screen and (max-width: 640px){
|
|
146
|
-
.
|
|
146
|
+
._sizeM_nimrq6_19 [data-rs-internal='switcher__option']{
|
|
147
147
|
--_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
|
|
148
148
|
}
|
|
149
149
|
}
|
|
150
|
-
.
|
|
150
|
+
._sizeL_nimrq6_22{
|
|
151
151
|
--_rs-switcher-border-radius:26px;
|
|
152
152
|
--_rs-switcher-compact-border-radius:12px;
|
|
153
153
|
--_rs-switcher-option-padding:12px 32px;
|
|
@@ -157,7 +157,7 @@
|
|
|
157
157
|
--_rs-switcher-compact-icon-offset:12px;
|
|
158
158
|
--_rs-switcher-icon-margin-vertical:0px;
|
|
159
159
|
}
|
|
160
|
-
.
|
|
160
|
+
._sizeL_nimrq6_22 [data-rs-internal='switcher__option']{
|
|
161
161
|
--_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
|
|
162
162
|
--_rs-typography-text-transform:initial;
|
|
163
163
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -196,22 +196,22 @@
|
|
|
196
196
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
197
197
|
}
|
|
198
198
|
@media screen and (max-width: 640px){
|
|
199
|
-
.
|
|
199
|
+
._sizeL_nimrq6_22 [data-rs-internal='switcher__option']{
|
|
200
200
|
--_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
|
|
201
201
|
}
|
|
202
202
|
}
|
|
203
|
-
.
|
|
203
|
+
._modeClassic_nimrq6_26{
|
|
204
204
|
--_rs-switcher-option-hover-background:var(--_rs-color-primary-t-fog);
|
|
205
205
|
--_rs-switcher-mark-border-color:var(--_rs-color-primary);
|
|
206
206
|
}
|
|
207
|
-
.
|
|
207
|
+
._modeRock_nimrq6_29{
|
|
208
208
|
--_rs-switcher-option-hover-background:rgba(
|
|
209
209
|
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),
|
|
210
210
|
0.1
|
|
211
211
|
);
|
|
212
212
|
--_rs-switcher-mark-border-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));
|
|
213
213
|
}
|
|
214
|
-
.
|
|
214
|
+
._compact_nimrq6_33{
|
|
215
215
|
--_rs-switcher-border-radius-from-compact:var(
|
|
216
216
|
--_rs-switcher-compact-border-radius
|
|
217
217
|
);
|
|
@@ -222,7 +222,7 @@
|
|
|
222
222
|
--_rs-switcher-compact-icon-offset
|
|
223
223
|
);
|
|
224
224
|
}
|
|
225
|
-
.
|
|
225
|
+
._switcher_nimrq6_37{
|
|
226
226
|
--_rs-theme-dark:var(
|
|
227
227
|
--_rs-internal-force-theme-dark-consult-rescui-before-using,
|
|
228
228
|
var(--rs-theme-dark, 0)
|
|
@@ -232,7 +232,7 @@
|
|
|
232
232
|
--_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
|
|
233
233
|
}
|
|
234
234
|
@supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
235
|
-
.
|
|
235
|
+
._switcher_nimrq6_37{
|
|
236
236
|
--_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)));
|
|
237
237
|
--_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)));
|
|
238
238
|
--_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)));
|
|
@@ -241,7 +241,7 @@
|
|
|
241
241
|
}
|
|
242
242
|
}
|
|
243
243
|
@supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
244
|
-
.
|
|
244
|
+
._switcher_nimrq6_37{
|
|
245
245
|
--_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);
|
|
246
246
|
--_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));
|
|
247
247
|
--_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));
|
|
@@ -249,7 +249,7 @@
|
|
|
249
249
|
--_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));
|
|
250
250
|
}
|
|
251
251
|
}
|
|
252
|
-
.
|
|
252
|
+
._switcher_nimrq6_37 {
|
|
253
253
|
|
|
254
254
|
position:relative;
|
|
255
255
|
|
|
@@ -265,16 +265,16 @@
|
|
|
265
265
|
background:transparent;
|
|
266
266
|
box-shadow:inset 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.3) 0 0 0 1px;
|
|
267
267
|
}
|
|
268
|
-
.
|
|
268
|
+
._switcher_nimrq6_37._disabled_nimrq6_55{
|
|
269
269
|
box-shadow:inset 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.2) 0 0 0 1px;
|
|
270
270
|
}
|
|
271
|
-
.
|
|
271
|
+
._alignIconLeft_nimrq6_60{
|
|
272
272
|
--_rs-switcher-option-flex-direction:row;
|
|
273
273
|
}
|
|
274
|
-
.
|
|
274
|
+
._alignIconRight_nimrq6_63{
|
|
275
275
|
--_rs-switcher-option-flex-direction:row-reverse;
|
|
276
276
|
}
|
|
277
|
-
.
|
|
277
|
+
._option_nimrq6_67{
|
|
278
278
|
letter-spacing:var(
|
|
279
279
|
--rs-text-base-letter-spacing,
|
|
280
280
|
var(--_rs-typography-letter-spacing)
|
|
@@ -325,26 +325,26 @@
|
|
|
325
325
|
-moz-appearance:none;
|
|
326
326
|
appearance:none;
|
|
327
327
|
}
|
|
328
|
-
.
|
|
328
|
+
._disabled_nimrq6_55 ._option_nimrq6_67{
|
|
329
329
|
cursor:not-allowed;
|
|
330
330
|
pointer-events:none;
|
|
331
331
|
}
|
|
332
|
-
.
|
|
332
|
+
._option_nimrq6_67:has(:focus[data-focus-method='key']){
|
|
333
333
|
box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
|
|
334
334
|
}
|
|
335
335
|
@media (hover: hover){
|
|
336
|
-
.
|
|
336
|
+
._option_nimrq6_67:hover{
|
|
337
337
|
background:var(--_rs-switcher-option-hover-background);
|
|
338
338
|
}
|
|
339
339
|
}
|
|
340
|
-
.
|
|
340
|
+
._option_nimrq6_67._selected_nimrq6_118:active{
|
|
341
341
|
background:transparent;
|
|
342
342
|
}
|
|
343
|
-
.
|
|
344
|
-
.
|
|
343
|
+
._option_nimrq6_67._selected_nimrq6_118:hover,
|
|
344
|
+
._option_nimrq6_67._selected_nimrq6_118:active{
|
|
345
345
|
cursor:default;
|
|
346
346
|
}
|
|
347
|
-
.
|
|
347
|
+
._hiddenMark_nimrq6_127 ._option_nimrq6_67._selected_nimrq6_118::before{
|
|
348
348
|
position:absolute;
|
|
349
349
|
top:0;
|
|
350
350
|
right:0;
|
|
@@ -360,11 +360,11 @@
|
|
|
360
360
|
|
|
361
361
|
content:'';
|
|
362
362
|
}
|
|
363
|
-
.
|
|
363
|
+
._hiddenMark_nimrq6_127._disabled_nimrq6_55 ._option_nimrq6_67._selected_nimrq6_118::before{
|
|
364
364
|
border-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.2);
|
|
365
365
|
}
|
|
366
|
-
.
|
|
367
|
-
.
|
|
366
|
+
._disabled_nimrq6_55 ._option_nimrq6_67,
|
|
367
|
+
._disabled_nimrq6_55 ._option_nimrq6_67._selected_nimrq6_118{
|
|
368
368
|
color:var(
|
|
369
369
|
--rs-color-pale,
|
|
370
370
|
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)
|
|
@@ -374,7 +374,7 @@
|
|
|
374
374
|
|
|
375
375
|
background:transparent;
|
|
376
376
|
}
|
|
377
|
-
.
|
|
377
|
+
._option_nimrq6_67 ._icon_nimrq6_158{
|
|
378
378
|
flex:0 0 auto;
|
|
379
379
|
|
|
380
380
|
width:auto;
|
|
@@ -385,7 +385,7 @@
|
|
|
385
385
|
margin-top:var(--_rs-switcher-icon-margin-vertical);
|
|
386
386
|
margin-bottom:var(--_rs-switcher-icon-margin-vertical);
|
|
387
387
|
}
|
|
388
|
-
.
|
|
388
|
+
._mark_nimrq6_171{
|
|
389
389
|
position:absolute;
|
|
390
390
|
top:0;
|
|
391
391
|
bottom:0;
|
|
@@ -401,22 +401,38 @@
|
|
|
401
401
|
var(--_rs-switcher-border-radius)
|
|
402
402
|
);
|
|
403
403
|
|
|
404
|
-
transition:all var(--_rs-switcher-mark-transition-duration);
|
|
404
|
+
transition:all var(--_rs-switcher-mark-transition-duration) var(--rs-transition-function, ease);
|
|
405
405
|
}
|
|
406
|
-
.
|
|
406
|
+
._disabled_nimrq6_55 ._mark_nimrq6_171{
|
|
407
407
|
border-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.2);
|
|
408
408
|
}
|
|
409
|
-
.
|
|
409
|
+
._hiddenMark_nimrq6_127 ._mark_nimrq6_171{
|
|
410
410
|
display:none;
|
|
411
411
|
}
|
|
412
|
+
._radio_nimrq6_199{
|
|
413
|
+
position:absolute;
|
|
414
|
+
|
|
415
|
+
overflow:hidden;
|
|
416
|
+
clip:rect(0 0 0 0);
|
|
417
|
+
|
|
418
|
+
width:1px;
|
|
419
|
+
height:1px;
|
|
420
|
+
margin:-1px;
|
|
421
|
+
padding:0;
|
|
422
|
+
|
|
423
|
+
border:none;
|
|
424
|
+
|
|
425
|
+
white-space:nowrap;
|
|
426
|
+
clip-path:inset(50%);
|
|
427
|
+
}
|
|
412
428
|
|
|
413
|
-
.
|
|
429
|
+
._themeLight_1x2rxjb_6{
|
|
414
430
|
--rs-theme-dark:0;
|
|
415
431
|
}
|
|
416
|
-
.
|
|
432
|
+
._themeDark_1x2rxjb_9{
|
|
417
433
|
--rs-theme-dark:1;
|
|
418
434
|
}
|
|
419
|
-
.
|
|
435
|
+
._sizeXS_1x2rxjb_13{
|
|
420
436
|
--_rs-switcher-vertical-border-radius:4px;
|
|
421
437
|
--_rs-switcher-vertical-option-vertical-padding:2px;
|
|
422
438
|
--_rs-switcher-vertical-option-horizontal-padding:8px;
|
|
@@ -424,7 +440,7 @@
|
|
|
424
440
|
--_rs-switcher-vertical-icon-offset:4px;
|
|
425
441
|
--_rs-switcher-vertical-icon-margin-vertical:2px;
|
|
426
442
|
}
|
|
427
|
-
.
|
|
443
|
+
._sizeXS_1x2rxjb_13 [data-rs-internal='vertical-switcher__option']{
|
|
428
444
|
--_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
|
|
429
445
|
--_rs-typography-text-transform:initial;
|
|
430
446
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -459,7 +475,7 @@
|
|
|
459
475
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
460
476
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
461
477
|
}
|
|
462
|
-
.
|
|
478
|
+
._sizeS_1x2rxjb_16{
|
|
463
479
|
--_rs-switcher-vertical-border-radius:4px;
|
|
464
480
|
--_rs-switcher-vertical-option-vertical-padding:6px;
|
|
465
481
|
--_rs-switcher-vertical-option-horizontal-padding:12px;
|
|
@@ -467,7 +483,7 @@
|
|
|
467
483
|
--_rs-switcher-vertical-icon-offset:4px;
|
|
468
484
|
--_rs-switcher-vertical-icon-margin-vertical:0px;
|
|
469
485
|
}
|
|
470
|
-
.
|
|
486
|
+
._sizeS_1x2rxjb_16 [data-rs-internal='vertical-switcher__option']{
|
|
471
487
|
--_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
|
|
472
488
|
--_rs-typography-text-transform:initial;
|
|
473
489
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -502,7 +518,7 @@
|
|
|
502
518
|
--_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
|
|
503
519
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
504
520
|
}
|
|
505
|
-
.
|
|
521
|
+
._sizeM_1x2rxjb_19{
|
|
506
522
|
--_rs-switcher-vertical-border-radius:8px;
|
|
507
523
|
--_rs-switcher-vertical-option-vertical-padding:8px;
|
|
508
524
|
--_rs-switcher-vertical-option-horizontal-padding:16px;
|
|
@@ -510,7 +526,7 @@
|
|
|
510
526
|
--_rs-switcher-vertical-icon-offset:8px;
|
|
511
527
|
--_rs-switcher-vertical-icon-margin-vertical:0px;
|
|
512
528
|
}
|
|
513
|
-
.
|
|
529
|
+
._sizeM_1x2rxjb_19 [data-rs-internal='vertical-switcher__option']{
|
|
514
530
|
--_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
|
|
515
531
|
--_rs-typography-text-transform:initial;
|
|
516
532
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -549,11 +565,11 @@
|
|
|
549
565
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
550
566
|
}
|
|
551
567
|
@media screen and (max-width: 640px){
|
|
552
|
-
.
|
|
568
|
+
._sizeM_1x2rxjb_19 [data-rs-internal='vertical-switcher__option']{
|
|
553
569
|
--_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
|
|
554
570
|
}
|
|
555
571
|
}
|
|
556
|
-
.
|
|
572
|
+
._sizeL_1x2rxjb_22{
|
|
557
573
|
--_rs-switcher-vertical-border-radius:12px;
|
|
558
574
|
--_rs-switcher-vertical-option-vertical-padding:12px;
|
|
559
575
|
--_rs-switcher-vertical-option-horizontal-padding:24px;
|
|
@@ -561,7 +577,7 @@
|
|
|
561
577
|
--_rs-switcher-vertical-icon-offset:12px;
|
|
562
578
|
--_rs-switcher-vertical-icon-margin-vertical:0px;
|
|
563
579
|
}
|
|
564
|
-
.
|
|
580
|
+
._sizeL_1x2rxjb_22 [data-rs-internal='vertical-switcher__option']{
|
|
565
581
|
--_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
|
|
566
582
|
--_rs-typography-text-transform:initial;
|
|
567
583
|
--_rs-typography-font-variant-numeric:initial;
|
|
@@ -600,17 +616,17 @@
|
|
|
600
616
|
--_rs-typography-link-border-bottom-width-from-text:1px;
|
|
601
617
|
}
|
|
602
618
|
@media screen and (max-width: 640px){
|
|
603
|
-
.
|
|
619
|
+
._sizeL_1x2rxjb_22 [data-rs-internal='vertical-switcher__option']{
|
|
604
620
|
--_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
|
|
605
621
|
}
|
|
606
622
|
}
|
|
607
|
-
.
|
|
623
|
+
._modeClassic_1x2rxjb_26{
|
|
608
624
|
--_rs-switcher-vertical-option-hover-background:var(
|
|
609
625
|
--_rs-color-primary-t-fog
|
|
610
626
|
);
|
|
611
627
|
--_rs-switcher-vertical-mark-border-color:var(--_rs-color-primary);
|
|
612
628
|
}
|
|
613
|
-
.
|
|
629
|
+
._modeRock_1x2rxjb_29{
|
|
614
630
|
--_rs-switcher-vertical-option-hover-background:rgba(
|
|
615
631
|
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),
|
|
616
632
|
0.1
|
|
@@ -619,7 +635,7 @@
|
|
|
619
635
|
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)
|
|
620
636
|
);
|
|
621
637
|
}
|
|
622
|
-
.
|
|
638
|
+
._verticalSwitcher_1x2rxjb_33{
|
|
623
639
|
--_rs-theme-dark:var(
|
|
624
640
|
--_rs-internal-force-theme-dark-consult-rescui-before-using,
|
|
625
641
|
var(--rs-theme-dark, 0)
|
|
@@ -629,7 +645,7 @@
|
|
|
629
645
|
--_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
|
|
630
646
|
}
|
|
631
647
|
@supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
632
|
-
.
|
|
648
|
+
._verticalSwitcher_1x2rxjb_33{
|
|
633
649
|
--_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)));
|
|
634
650
|
--_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)));
|
|
635
651
|
--_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)));
|
|
@@ -638,7 +654,7 @@
|
|
|
638
654
|
}
|
|
639
655
|
}
|
|
640
656
|
@supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
|
|
641
|
-
.
|
|
657
|
+
._verticalSwitcher_1x2rxjb_33{
|
|
642
658
|
--_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);
|
|
643
659
|
--_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));
|
|
644
660
|
--_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));
|
|
@@ -646,7 +662,7 @@
|
|
|
646
662
|
--_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));
|
|
647
663
|
}
|
|
648
664
|
}
|
|
649
|
-
.
|
|
665
|
+
._verticalSwitcher_1x2rxjb_33 {
|
|
650
666
|
|
|
651
667
|
position:relative;
|
|
652
668
|
|
|
@@ -661,16 +677,16 @@
|
|
|
661
677
|
background:transparent;
|
|
662
678
|
box-shadow:inset 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.3) 0 0 0 1px;
|
|
663
679
|
}
|
|
664
|
-
.
|
|
680
|
+
._verticalSwitcher_1x2rxjb_33._disabled_1x2rxjb_50{
|
|
665
681
|
box-shadow:inset 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.2) 0 0 0 1px;
|
|
666
682
|
}
|
|
667
|
-
.
|
|
683
|
+
._alignIconLeft_1x2rxjb_55{
|
|
668
684
|
--_rs-switcher-vertical-option-flex-direction:row;
|
|
669
685
|
}
|
|
670
|
-
.
|
|
686
|
+
._alignIconRight_1x2rxjb_58{
|
|
671
687
|
--_rs-switcher-vertical-option-flex-direction:row-reverse;
|
|
672
688
|
}
|
|
673
|
-
.
|
|
689
|
+
._option_1x2rxjb_62{
|
|
674
690
|
letter-spacing:var(
|
|
675
691
|
--rs-text-base-letter-spacing,
|
|
676
692
|
var(--_rs-typography-letter-spacing)
|
|
@@ -714,26 +730,26 @@
|
|
|
714
730
|
-moz-appearance:none;
|
|
715
731
|
appearance:none;
|
|
716
732
|
}
|
|
717
|
-
.
|
|
733
|
+
._disabled_1x2rxjb_50 ._option_1x2rxjb_62{
|
|
718
734
|
cursor:not-allowed;
|
|
719
735
|
pointer-events:none;
|
|
720
736
|
}
|
|
721
|
-
.
|
|
737
|
+
._option_1x2rxjb_62:has(:focus[data-focus-method='key']){
|
|
722
738
|
box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
|
|
723
739
|
}
|
|
724
740
|
@media (hover: hover){
|
|
725
|
-
.
|
|
741
|
+
._option_1x2rxjb_62:hover{
|
|
726
742
|
background:var(--_rs-switcher-vertical-option-hover-background);
|
|
727
743
|
}
|
|
728
744
|
}
|
|
729
|
-
.
|
|
745
|
+
._option_1x2rxjb_62._selected_1x2rxjb_107:active{
|
|
730
746
|
background:transparent;
|
|
731
747
|
}
|
|
732
|
-
.
|
|
733
|
-
.
|
|
748
|
+
._option_1x2rxjb_62._selected_1x2rxjb_107:hover,
|
|
749
|
+
._option_1x2rxjb_62._selected_1x2rxjb_107:active{
|
|
734
750
|
cursor:default;
|
|
735
751
|
}
|
|
736
|
-
.
|
|
752
|
+
._hiddenMark_1x2rxjb_116 ._option_1x2rxjb_62._selected_1x2rxjb_107::before{
|
|
737
753
|
position:absolute;
|
|
738
754
|
top:0;
|
|
739
755
|
right:0;
|
|
@@ -749,11 +765,11 @@
|
|
|
749
765
|
|
|
750
766
|
content:'';
|
|
751
767
|
}
|
|
752
|
-
.
|
|
768
|
+
._hiddenMark_1x2rxjb_116._disabled_1x2rxjb_50 ._option_1x2rxjb_62._selected_1x2rxjb_107::before{
|
|
753
769
|
border-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.2);
|
|
754
770
|
}
|
|
755
|
-
.
|
|
756
|
-
.
|
|
771
|
+
._disabled_1x2rxjb_50 ._option_1x2rxjb_62,
|
|
772
|
+
._disabled_1x2rxjb_50 ._option_1x2rxjb_62._selected_1x2rxjb_107{
|
|
757
773
|
color:var(
|
|
758
774
|
--rs-color-pale,
|
|
759
775
|
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)
|
|
@@ -763,12 +779,12 @@
|
|
|
763
779
|
|
|
764
780
|
background:transparent;
|
|
765
781
|
}
|
|
766
|
-
.
|
|
782
|
+
._option_1x2rxjb_62 ._optionLabel_1x2rxjb_147{
|
|
767
783
|
flex:1 1 auto;
|
|
768
784
|
|
|
769
785
|
text-align:left;
|
|
770
786
|
}
|
|
771
|
-
.
|
|
787
|
+
._option_1x2rxjb_62 ._icon_1x2rxjb_153{
|
|
772
788
|
flex:0 0 auto;
|
|
773
789
|
|
|
774
790
|
width:auto;
|
|
@@ -779,12 +795,12 @@
|
|
|
779
795
|
|
|
780
796
|
fill:currentColor;
|
|
781
797
|
}
|
|
782
|
-
.
|
|
798
|
+
._option_1x2rxjb_62 ._fakeIcon_1x2rxjb_164{
|
|
783
799
|
display:inline-block;
|
|
784
800
|
|
|
785
801
|
width:var(--_rs-switcher-vertical-icon-size);
|
|
786
802
|
}
|
|
787
|
-
.
|
|
803
|
+
._mark_1x2rxjb_171{
|
|
788
804
|
position:absolute;
|
|
789
805
|
right:0;
|
|
790
806
|
left:0;
|
|
@@ -797,11 +813,27 @@
|
|
|
797
813
|
|
|
798
814
|
border-radius:var(--_rs-switcher-vertical-border-radius);
|
|
799
815
|
|
|
800
|
-
transition:all var(--_rs-switcher-vertical-mark-transition-duration);
|
|
816
|
+
transition:all var(--_rs-switcher-vertical-mark-transition-duration) var(--rs-transition-function, ease);
|
|
801
817
|
}
|
|
802
|
-
.
|
|
818
|
+
._disabled_1x2rxjb_50 ._mark_1x2rxjb_171{
|
|
803
819
|
border-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.2);
|
|
804
820
|
}
|
|
805
|
-
.
|
|
821
|
+
._hiddenMark_1x2rxjb_116 ._mark_1x2rxjb_171{
|
|
806
822
|
display:none;
|
|
807
823
|
}
|
|
824
|
+
._radio_1x2rxjb_196{
|
|
825
|
+
position:absolute;
|
|
826
|
+
|
|
827
|
+
overflow:hidden;
|
|
828
|
+
clip:rect(0 0 0 0);
|
|
829
|
+
|
|
830
|
+
width:1px;
|
|
831
|
+
height:1px;
|
|
832
|
+
margin:-1px;
|
|
833
|
+
padding:0;
|
|
834
|
+
|
|
835
|
+
border:none;
|
|
836
|
+
|
|
837
|
+
white-space:nowrap;
|
|
838
|
+
clip-path:inset(50%);
|
|
839
|
+
}
|
package/lib/switcher.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
2
3
|
export declare type SwitcherOptionIconPosition = 'left' | 'right';
|
|
3
4
|
export declare type SwitcherSize = 'l' | 'm' | 's' | 'xs';
|
|
4
5
|
export declare type SwitcherTheme = 'light' | 'dark';
|
|
@@ -8,9 +9,11 @@ export declare type SwitcherOption<OptionsValueType> = {
|
|
|
8
9
|
value: OptionsValueType;
|
|
9
10
|
/** Additional icon */
|
|
10
11
|
icon?: React.ReactNode;
|
|
12
|
+
/** Optional a11y label for the option. May be useful for icon-only options. */
|
|
13
|
+
'aria-label'?: string;
|
|
11
14
|
};
|
|
12
15
|
export declare type SwitcherOptionForDocs = SwitcherOption<any>;
|
|
13
|
-
|
|
16
|
+
interface SwitcherExplicitProps<ValueType, OptionsValueType extends ValueType> {
|
|
14
17
|
/** Current selected value */
|
|
15
18
|
value: ValueType;
|
|
16
19
|
/** Array of options */
|
|
@@ -30,9 +33,31 @@ export interface SwitcherProps<ValueType, OptionsValueType extends ValueType> {
|
|
|
30
33
|
iconPosition?: SwitcherOptionIconPosition;
|
|
31
34
|
/** CSS style object */
|
|
32
35
|
style?: React.CSSProperties;
|
|
36
|
+
/** Optional a11y label for the switcher. Recommended to use either that or `aria-labelledby`. */
|
|
37
|
+
'aria-label'?: string;
|
|
38
|
+
/** Optional a11y label reference for the switcher. Recommended to use either that or `aria-label`. */
|
|
39
|
+
'aria-labelledby'?: string;
|
|
40
|
+
/** Optional name of all `input[type="radio"]` children. if not set, it will fallback to a randomly generated name. */
|
|
41
|
+
name?: string;
|
|
33
42
|
}
|
|
34
|
-
export declare
|
|
43
|
+
export declare type SwitcherProps<ValueType, OptionsValueType extends ValueType> = SwitcherExplicitProps<ValueType, OptionsValueType> & Omit<React.HTMLProps<HTMLSpanElement>, keyof SwitcherExplicitProps<ValueType, OptionsValueType>>;
|
|
44
|
+
export declare function Switcher<ValueType, OptionsValueType extends ValueType = ValueType>({ className, theme: themeFromProps, size, disabled, compact, options, value: switcherValue, mode, iconPosition, onChange, style, name, ...rest }: SwitcherProps<ValueType, OptionsValueType>): JSX.Element;
|
|
35
45
|
export declare namespace Switcher {
|
|
36
|
-
var propTypes: {
|
|
46
|
+
var propTypes: {
|
|
47
|
+
options: PropTypes.Validator<PropTypes.InferProps<{
|
|
48
|
+
label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
49
|
+
value: PropTypes.Validator<any>;
|
|
50
|
+
icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
51
|
+
}>[]>;
|
|
52
|
+
onChange: PropTypes.Validator<(...args: any[]) => any>;
|
|
53
|
+
value: PropTypes.Validator<any>;
|
|
54
|
+
className: PropTypes.Requireable<string>;
|
|
55
|
+
size: PropTypes.Requireable<string>;
|
|
56
|
+
theme: PropTypes.Requireable<string>;
|
|
57
|
+
disabled: PropTypes.Requireable<boolean>;
|
|
58
|
+
iconPosition: PropTypes.Requireable<string>;
|
|
59
|
+
'data-e2e': PropTypes.Requireable<string>;
|
|
60
|
+
style: PropTypes.Requireable<object>;
|
|
61
|
+
};
|
|
37
62
|
}
|
|
38
63
|
export default Switcher;
|
package/lib/switcher.js
CHANGED
|
@@ -5,6 +5,7 @@ import cn from 'classnames';
|
|
|
5
5
|
import { useThemeWithUndefined } from '@rescui/ui-contexts';
|
|
6
6
|
import { useResizeObserver } from '@rescui/use-resize-observer';
|
|
7
7
|
import styles from './switcher.p.module.css.js';
|
|
8
|
+
import { useSafeId } from './use-safe-id.js';
|
|
8
9
|
const MARK_TRANSITION_DURATION = '0.2s';
|
|
9
10
|
const sizeToClass = {
|
|
10
11
|
l: styles.sizeL,
|
|
@@ -35,19 +36,27 @@ const optionRenderer = (_ref, ref) => {
|
|
|
35
36
|
value,
|
|
36
37
|
icon,
|
|
37
38
|
disabled,
|
|
38
|
-
|
|
39
|
-
selected
|
|
39
|
+
onChange,
|
|
40
|
+
selected,
|
|
41
|
+
name,
|
|
42
|
+
'aria-label': ariaLabel
|
|
40
43
|
} = _ref;
|
|
41
44
|
const isWithoutText = isNodeEmpty(label);
|
|
42
|
-
return /*#__PURE__*/React.createElement("
|
|
43
|
-
key: String(value),
|
|
45
|
+
return /*#__PURE__*/React.createElement("label", {
|
|
44
46
|
ref: ref,
|
|
45
|
-
|
|
46
|
-
type: "button",
|
|
47
|
+
key: String(value),
|
|
47
48
|
"data-rs-internal": 'switcher__option',
|
|
49
|
+
className: cn(styles.option, selected && styles.selected),
|
|
50
|
+
"aria-label": ariaLabel
|
|
51
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
52
|
+
type: "radio",
|
|
53
|
+
value: String(value),
|
|
54
|
+
onChange: onChange,
|
|
55
|
+
className: styles.radio,
|
|
56
|
+
checked: selected,
|
|
48
57
|
disabled: disabled,
|
|
49
|
-
|
|
50
|
-
}, /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/cloneElement(icon, {
|
|
58
|
+
name: name
|
|
59
|
+
}), /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/cloneElement(icon, {
|
|
51
60
|
className: cn(icon.props.className, styles.icon),
|
|
52
61
|
'data-render-all-sizes': true
|
|
53
62
|
}), !isWithoutText && /*#__PURE__*/React.createElement("span", null, label));
|
|
@@ -62,17 +71,19 @@ function Switcher(_ref2) {
|
|
|
62
71
|
size = 'm',
|
|
63
72
|
disabled,
|
|
64
73
|
compact = false,
|
|
65
|
-
['data-e2e']: e2eId,
|
|
66
74
|
options,
|
|
67
75
|
value: switcherValue,
|
|
68
76
|
mode = 'classic',
|
|
69
77
|
iconPosition = 'left',
|
|
70
78
|
onChange,
|
|
71
|
-
style
|
|
79
|
+
style,
|
|
80
|
+
name,
|
|
81
|
+
...rest
|
|
72
82
|
} = _ref2;
|
|
73
83
|
const refsArray = useRef([]);
|
|
74
84
|
const containerRef = useRef(null);
|
|
75
85
|
const theme = useThemeWithUndefined(themeFromProps);
|
|
86
|
+
const uniqueId = useSafeId();
|
|
76
87
|
const handleOptionRef = useCallback(index => ref => {
|
|
77
88
|
if (!ref) {
|
|
78
89
|
return;
|
|
@@ -119,20 +130,21 @@ function Switcher(_ref2) {
|
|
|
119
130
|
|
|
120
131
|
useEffect(() => updateMark(true), [activeIndex]);
|
|
121
132
|
useResizeObserver(containerRef, () => updateMark(false));
|
|
122
|
-
return /*#__PURE__*/React.createElement("span", {
|
|
133
|
+
return /*#__PURE__*/React.createElement("span", { ...rest,
|
|
123
134
|
className: cn(className, styles.switcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, compact && styles.compact, mark.hidden && styles.hiddenMark, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
|
|
124
|
-
"data-e2e": e2eId,
|
|
125
135
|
ref: containerRef,
|
|
126
136
|
"data-rs-internal": 'switcher',
|
|
127
137
|
"data-test": cn(`switcher`, disabled && `switcher-disabled`),
|
|
128
138
|
style: { ...style,
|
|
129
139
|
'--_rs-switcher-mark-transition-duration': isMarkTransitionEnabled ? MARK_TRANSITION_DURATION : '0s'
|
|
130
|
-
}
|
|
140
|
+
},
|
|
141
|
+
role: "radiogroup"
|
|
131
142
|
}, options.map((_ref3, index) => {
|
|
132
143
|
let {
|
|
133
144
|
value,
|
|
134
145
|
label,
|
|
135
|
-
icon
|
|
146
|
+
icon,
|
|
147
|
+
'aria-label': optionAriaLabel
|
|
136
148
|
} = _ref3;
|
|
137
149
|
return /*#__PURE__*/React.createElement(Option, {
|
|
138
150
|
key: String(value),
|
|
@@ -140,9 +152,11 @@ function Switcher(_ref2) {
|
|
|
140
152
|
label: label,
|
|
141
153
|
icon: icon,
|
|
142
154
|
disabled: disabled,
|
|
143
|
-
|
|
155
|
+
onChange: () => onChange(value),
|
|
144
156
|
ref: handleOptionRef(index),
|
|
145
|
-
selected: options[activeIndex]?.value === value
|
|
157
|
+
selected: options[activeIndex]?.value === value,
|
|
158
|
+
name: name ?? `rs-switcher-${uniqueId}`,
|
|
159
|
+
"aria-label": optionAriaLabel
|
|
146
160
|
});
|
|
147
161
|
}), /*#__PURE__*/React.createElement("span", {
|
|
148
162
|
className: cn(styles.mark),
|
|
@@ -1,21 +1,22 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"themeLight": "
|
|
3
|
-
"themeDark": "
|
|
4
|
-
"sizeXS": "
|
|
5
|
-
"sizeS": "
|
|
6
|
-
"sizeM": "
|
|
7
|
-
"sizeL": "
|
|
8
|
-
"modeClassic": "
|
|
9
|
-
"modeRock": "
|
|
10
|
-
"compact": "
|
|
11
|
-
"switcher": "
|
|
12
|
-
"disabled": "
|
|
13
|
-
"alignIconLeft": "
|
|
14
|
-
"alignIconRight": "
|
|
15
|
-
"option": "
|
|
16
|
-
"selected": "
|
|
17
|
-
"hiddenMark": "
|
|
18
|
-
"icon": "
|
|
19
|
-
"mark": "
|
|
2
|
+
"themeLight": "_themeLight_nimrq6_6",
|
|
3
|
+
"themeDark": "_themeDark_nimrq6_9",
|
|
4
|
+
"sizeXS": "_sizeXS_nimrq6_13",
|
|
5
|
+
"sizeS": "_sizeS_nimrq6_16",
|
|
6
|
+
"sizeM": "_sizeM_nimrq6_19",
|
|
7
|
+
"sizeL": "_sizeL_nimrq6_22",
|
|
8
|
+
"modeClassic": "_modeClassic_nimrq6_26",
|
|
9
|
+
"modeRock": "_modeRock_nimrq6_29",
|
|
10
|
+
"compact": "_compact_nimrq6_33",
|
|
11
|
+
"switcher": "_switcher_nimrq6_37",
|
|
12
|
+
"disabled": "_disabled_nimrq6_55",
|
|
13
|
+
"alignIconLeft": "_alignIconLeft_nimrq6_60",
|
|
14
|
+
"alignIconRight": "_alignIconRight_nimrq6_63",
|
|
15
|
+
"option": "_option_nimrq6_67",
|
|
16
|
+
"selected": "_selected_nimrq6_118",
|
|
17
|
+
"hiddenMark": "_hiddenMark_nimrq6_127",
|
|
18
|
+
"icon": "_icon_nimrq6_158",
|
|
19
|
+
"mark": "_mark_nimrq6_171",
|
|
20
|
+
"radio": "_radio_nimrq6_199"
|
|
20
21
|
};
|
|
21
22
|
export { styles as default };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import React, { useRef } from 'react';
|
|
2
|
+
|
|
3
|
+
const useFallbackId = () => {
|
|
4
|
+
const id = useRef(null);
|
|
5
|
+
|
|
6
|
+
if (id.current === null) {
|
|
7
|
+
id.current = useFallbackId.counter++;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
return id.current.toString();
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
useFallbackId.counter = 0;
|
|
14
|
+
const useSafeId = React.useId ?? useFallbackId;
|
|
15
|
+
export { useSafeId };
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
2
3
|
export declare type VerticalSwitcherOptionIconPosition = 'left' | 'right';
|
|
3
4
|
export declare type VerticalSwitcherSize = 'l' | 'm' | 's' | 'xs';
|
|
4
5
|
export declare type VerticalSwitcherTheme = 'light' | 'dark';
|
|
@@ -8,9 +9,11 @@ export declare type VerticalSwitcherOption<OptionsValueType> = {
|
|
|
8
9
|
value: OptionsValueType;
|
|
9
10
|
/** Additional icon */
|
|
10
11
|
icon?: React.ReactNode;
|
|
12
|
+
/** Optional a11y label for the option. May be useful for icon-only options. */
|
|
13
|
+
'aria-label'?: string;
|
|
11
14
|
};
|
|
12
15
|
export declare type VerticalSwitcherOptionForDocs = VerticalSwitcherOption<any>;
|
|
13
|
-
|
|
16
|
+
interface VerticalSwitcherExplicitProps<ValueType, OptionsValueType extends ValueType> {
|
|
14
17
|
/** Current selected value */
|
|
15
18
|
value: ValueType;
|
|
16
19
|
/** Array of options */
|
|
@@ -28,8 +31,31 @@ export interface VerticalSwitcherProps<ValueType, OptionsValueType extends Value
|
|
|
28
31
|
iconPosition?: VerticalSwitcherOptionIconPosition;
|
|
29
32
|
/** CSS style object */
|
|
30
33
|
style?: React.CSSProperties;
|
|
34
|
+
/** Optional a11y label for the switcher. Recommended to use either that or `aria-labelledby`. */
|
|
35
|
+
'aria-label'?: string;
|
|
36
|
+
/** Optional a11y label reference for the switcher. Recommended to use either that or `aria-label`. */
|
|
37
|
+
'aria-labelledby'?: string;
|
|
38
|
+
/** Optional name of all `input[type="radio"]` children. if not set, it will fallback to a randomly generated name. */
|
|
39
|
+
name?: string;
|
|
31
40
|
}
|
|
32
|
-
export declare
|
|
41
|
+
export declare type VerticalSwitcherProps<ValueType, OptionsValueType extends ValueType> = VerticalSwitcherExplicitProps<ValueType, OptionsValueType> & Omit<React.HTMLProps<HTMLSpanElement>, keyof VerticalSwitcherExplicitProps<ValueType, OptionsValueType>>;
|
|
42
|
+
export declare function VerticalSwitcher<ValueType, OptionsValueType extends ValueType = ValueType>({ className, theme: themeFromProps, size, disabled, options: rawOptions, value: switcherValue, mode, iconPosition, onChange, style, name, ...rest }: VerticalSwitcherProps<ValueType, OptionsValueType>): JSX.Element;
|
|
33
43
|
export declare namespace VerticalSwitcher {
|
|
34
|
-
var propTypes: {
|
|
44
|
+
var propTypes: {
|
|
45
|
+
options: PropTypes.Validator<PropTypes.InferProps<{
|
|
46
|
+
label: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
47
|
+
value: PropTypes.Validator<any>;
|
|
48
|
+
icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
|
|
49
|
+
}>[]>;
|
|
50
|
+
onChange: PropTypes.Validator<(...args: any[]) => any>;
|
|
51
|
+
value: PropTypes.Validator<any>;
|
|
52
|
+
className: PropTypes.Requireable<string>;
|
|
53
|
+
size: PropTypes.Requireable<string>;
|
|
54
|
+
theme: PropTypes.Requireable<string>;
|
|
55
|
+
iconPosition: PropTypes.Requireable<string>;
|
|
56
|
+
disabled: PropTypes.Requireable<boolean>;
|
|
57
|
+
style: PropTypes.Requireable<object>;
|
|
58
|
+
'data-e2e': PropTypes.Requireable<string>;
|
|
59
|
+
};
|
|
35
60
|
}
|
|
61
|
+
export {};
|
package/lib/vertical-switcher.js
CHANGED
|
@@ -5,6 +5,7 @@ import cn from 'classnames';
|
|
|
5
5
|
import { useThemeWithUndefined } from '@rescui/ui-contexts';
|
|
6
6
|
import { useResizeObserver } from '@rescui/use-resize-observer';
|
|
7
7
|
import styles from './vertical-switcher.p.module.css.js';
|
|
8
|
+
import { useSafeId } from './use-safe-id.js';
|
|
8
9
|
const MARK_TRANSITION_DURATION = '0.2s'; // eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
9
10
|
|
|
10
11
|
const noop = () => {};
|
|
@@ -13,7 +14,8 @@ const verticalSwitcherContext = /*#__PURE__*/createContext({
|
|
|
13
14
|
switcherValue: null,
|
|
14
15
|
onChange: noop,
|
|
15
16
|
handleOptionRef: () => noop,
|
|
16
|
-
disabled: null
|
|
17
|
+
disabled: null,
|
|
18
|
+
name: null
|
|
17
19
|
});
|
|
18
20
|
const sizeToClass = {
|
|
19
21
|
l: styles.sizeL,
|
|
@@ -45,7 +47,8 @@ const processOptions = _ref => {
|
|
|
45
47
|
options.push({
|
|
46
48
|
label: option.label,
|
|
47
49
|
value: option.value,
|
|
48
|
-
icon: option.icon
|
|
50
|
+
icon: option.icon,
|
|
51
|
+
'aria-label': option['aria-label']
|
|
49
52
|
});
|
|
50
53
|
|
|
51
54
|
if ( /*#__PURE__*/React.isValidElement(option.icon) && iconPosition === 'left') {
|
|
@@ -84,26 +87,34 @@ function Option(_ref2) {
|
|
|
84
87
|
label,
|
|
85
88
|
value,
|
|
86
89
|
icon,
|
|
87
|
-
index
|
|
90
|
+
index,
|
|
91
|
+
'aria-label': ariaLabel
|
|
88
92
|
} = _ref2;
|
|
89
93
|
const {
|
|
90
94
|
switcherValue,
|
|
91
95
|
onChange,
|
|
92
96
|
handleOptionRef,
|
|
93
|
-
disabled
|
|
97
|
+
disabled,
|
|
98
|
+
name
|
|
94
99
|
} = useContext(verticalSwitcherContext);
|
|
95
100
|
const selected = switcherValue === value;
|
|
96
101
|
const isWithoutText = isNodeEmpty(label);
|
|
97
|
-
return /*#__PURE__*/React.createElement("
|
|
102
|
+
return /*#__PURE__*/React.createElement("label", {
|
|
98
103
|
key: String(value),
|
|
99
104
|
ref: handleOptionRef(index),
|
|
100
|
-
onClick: () => onChange(value),
|
|
101
|
-
type: "button",
|
|
102
105
|
"data-rs-internal": 'vertical-switcher__option',
|
|
103
|
-
disabled: disabled,
|
|
104
106
|
className: cn(styles.option, selected && styles.selected),
|
|
105
|
-
"data-test": cn(`vertical-switcher-option`, selected && ' vertical-switcher-option-selected')
|
|
106
|
-
|
|
107
|
+
"data-test": cn(`vertical-switcher-option`, selected && ' vertical-switcher-option-selected'),
|
|
108
|
+
"aria-label": ariaLabel
|
|
109
|
+
}, /*#__PURE__*/React.createElement("input", {
|
|
110
|
+
type: "radio",
|
|
111
|
+
value: String(value),
|
|
112
|
+
onChange: () => onChange(value),
|
|
113
|
+
className: styles.radio,
|
|
114
|
+
checked: selected,
|
|
115
|
+
disabled: disabled,
|
|
116
|
+
name: name
|
|
117
|
+
}), /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/cloneElement(icon, {
|
|
107
118
|
className: cn(icon.props.className, styles.icon),
|
|
108
119
|
'data-render-all-sizes': true
|
|
109
120
|
}), !isWithoutText && /*#__PURE__*/React.createElement("span", {
|
|
@@ -117,17 +128,19 @@ function VerticalSwitcher(_ref3) {
|
|
|
117
128
|
theme: themeFromProps,
|
|
118
129
|
size = 'm',
|
|
119
130
|
disabled,
|
|
120
|
-
['data-e2e']: e2eId,
|
|
121
131
|
options: rawOptions,
|
|
122
132
|
value: switcherValue,
|
|
123
133
|
mode = 'classic',
|
|
124
134
|
iconPosition = 'left',
|
|
125
135
|
onChange,
|
|
126
|
-
style
|
|
136
|
+
style,
|
|
137
|
+
name,
|
|
138
|
+
...rest
|
|
127
139
|
} = _ref3;
|
|
128
140
|
const refsArray = useRef([]);
|
|
129
141
|
const containerRef = useRef(null);
|
|
130
142
|
const theme = useThemeWithUndefined(themeFromProps);
|
|
143
|
+
const uniqueId = useSafeId();
|
|
131
144
|
const {
|
|
132
145
|
options,
|
|
133
146
|
activeIndex
|
|
@@ -184,34 +197,37 @@ function VerticalSwitcher(_ref3) {
|
|
|
184
197
|
useResizeObserver(containerRef, () => updateMark(false), {
|
|
185
198
|
ignoreFirstCall: true
|
|
186
199
|
});
|
|
187
|
-
return /*#__PURE__*/React.createElement("span", {
|
|
200
|
+
return /*#__PURE__*/React.createElement("span", { ...rest,
|
|
188
201
|
className: cn(className, styles.verticalSwitcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, mark.hidden && styles.hiddenMark, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
|
|
189
|
-
"data-e2e": e2eId,
|
|
190
202
|
ref: containerRef,
|
|
191
203
|
"data-rs-internal": 'vertical-switcher',
|
|
192
204
|
"data-test": cn(`vertical-switcher`, disabled && `vertical-switcher-disabled`),
|
|
193
205
|
style: { ...style,
|
|
194
206
|
'--_rs-switcher-vertical-mark-transition-duration': isMarkTransitionEnabled ? MARK_TRANSITION_DURATION : '0s'
|
|
195
|
-
}
|
|
207
|
+
},
|
|
208
|
+
role: "radiogroup"
|
|
196
209
|
}, /*#__PURE__*/React.createElement(verticalSwitcherContext.Provider, {
|
|
197
210
|
value: {
|
|
198
211
|
switcherValue: options[activeIndex]?.value,
|
|
199
212
|
onChange,
|
|
200
213
|
handleOptionRef,
|
|
201
|
-
disabled
|
|
214
|
+
disabled,
|
|
215
|
+
name: name ?? `rs-vertical-switcher-${uniqueId}`
|
|
202
216
|
}
|
|
203
217
|
}, options.map((_ref4, index) => {
|
|
204
218
|
let {
|
|
205
219
|
value,
|
|
206
220
|
label,
|
|
207
|
-
icon
|
|
221
|
+
icon,
|
|
222
|
+
'aria-label': optionAriaLabel
|
|
208
223
|
} = _ref4;
|
|
209
224
|
return /*#__PURE__*/React.createElement(Option, {
|
|
210
225
|
key: String(value),
|
|
211
226
|
value: value,
|
|
212
227
|
label: label,
|
|
213
228
|
icon: icon,
|
|
214
|
-
index: index
|
|
229
|
+
index: index,
|
|
230
|
+
"aria-label": optionAriaLabel
|
|
215
231
|
});
|
|
216
232
|
}), /*#__PURE__*/React.createElement("span", {
|
|
217
233
|
className: cn(styles.mark),
|
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"themeLight": "
|
|
3
|
-
"themeDark": "
|
|
4
|
-
"sizeXS": "
|
|
5
|
-
"sizeS": "
|
|
6
|
-
"sizeM": "
|
|
7
|
-
"sizeL": "
|
|
8
|
-
"modeClassic": "
|
|
9
|
-
"modeRock": "
|
|
10
|
-
"verticalSwitcher": "
|
|
11
|
-
"disabled": "
|
|
12
|
-
"alignIconLeft": "
|
|
13
|
-
"alignIconRight": "
|
|
14
|
-
"option": "
|
|
15
|
-
"selected": "
|
|
16
|
-
"hiddenMark": "
|
|
17
|
-
"optionLabel": "
|
|
18
|
-
"icon": "
|
|
19
|
-
"fakeIcon": "
|
|
20
|
-
"mark": "
|
|
2
|
+
"themeLight": "_themeLight_1x2rxjb_6",
|
|
3
|
+
"themeDark": "_themeDark_1x2rxjb_9",
|
|
4
|
+
"sizeXS": "_sizeXS_1x2rxjb_13",
|
|
5
|
+
"sizeS": "_sizeS_1x2rxjb_16",
|
|
6
|
+
"sizeM": "_sizeM_1x2rxjb_19",
|
|
7
|
+
"sizeL": "_sizeL_1x2rxjb_22",
|
|
8
|
+
"modeClassic": "_modeClassic_1x2rxjb_26",
|
|
9
|
+
"modeRock": "_modeRock_1x2rxjb_29",
|
|
10
|
+
"verticalSwitcher": "_verticalSwitcher_1x2rxjb_33",
|
|
11
|
+
"disabled": "_disabled_1x2rxjb_50",
|
|
12
|
+
"alignIconLeft": "_alignIconLeft_1x2rxjb_55",
|
|
13
|
+
"alignIconRight": "_alignIconRight_1x2rxjb_58",
|
|
14
|
+
"option": "_option_1x2rxjb_62",
|
|
15
|
+
"selected": "_selected_1x2rxjb_107",
|
|
16
|
+
"hiddenMark": "_hiddenMark_1x2rxjb_116",
|
|
17
|
+
"optionLabel": "_optionLabel_1x2rxjb_147",
|
|
18
|
+
"icon": "_icon_1x2rxjb_153",
|
|
19
|
+
"fakeIcon": "_fakeIcon_1x2rxjb_164",
|
|
20
|
+
"mark": "_mark_1x2rxjb_171",
|
|
21
|
+
"radio": "_radio_1x2rxjb_196"
|
|
21
22
|
};
|
|
22
23
|
export { styles as default };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rescui/switcher",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.13.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "JetBrains",
|
|
@@ -27,14 +27,14 @@
|
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@rescui/colors": "^0.3.0",
|
|
30
|
-
"@rescui/icons": "^1.7.
|
|
30
|
+
"@rescui/icons": "^1.7.6",
|
|
31
31
|
"@rescui/scripts": "^0.5.1",
|
|
32
|
-
"@rescui/typography": "^0.
|
|
32
|
+
"@rescui/typography": "^0.27.0"
|
|
33
33
|
},
|
|
34
34
|
"scripts": {
|
|
35
35
|
"build": "rescui-scripts build && yarn run build-pcss-api",
|
|
36
36
|
"build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
|
|
37
37
|
},
|
|
38
38
|
"nx": {},
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "e9aedd97a4cc372540ec8d75dda4f122baacca10"
|
|
40
40
|
}
|