@rescui/switcher 0.10.7 → 0.11.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.
Files changed (9) hide show
  1. package/lib/index.css +135 -79
  2. package/lib/public-api.p.css +20 -8
  3. package/lib/public-api.pcss +20 -8
  4. package/lib/switcher.d.ts +3 -1
  5. package/lib/switcher.js +27 -9
  6. package/lib/switcher.p.module.css.js +18 -17
  7. package/lib/vertical-switcher.js +25 -8
  8. package/lib/vertical-switcher.p.module.css.js +19 -18
  9. package/package.json +4 -4
package/lib/index.css CHANGED
@@ -1,10 +1,10 @@
1
- ._themeLight_g6yjva_6{
1
+ ._themeLight_1w2qtvx_6{
2
2
  --rs-theme-dark:0;
3
3
  }
4
- ._themeDark_g6yjva_9{
4
+ ._themeDark_1w2qtvx_9{
5
5
  --rs-theme-dark:1;
6
6
  }
7
- ._sizeXS_g6yjva_13{
7
+ ._sizeXS_1w2qtvx_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
- ._sizeXS_g6yjva_13 [data-rs-internal='switcher__option']{
17
+ ._sizeXS_1w2qtvx_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;
@@ -48,7 +48,7 @@
48
48
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
49
49
  --_rs-typography-link-border-bottom-width-from-text:1px;
50
50
  }
51
- ._sizeS_g6yjva_16{
51
+ ._sizeS_1w2qtvx_16{
52
52
  --_rs-switcher-border-radius:16px;
53
53
  --_rs-switcher-compact-border-radius:4px;
54
54
  --_rs-switcher-option-padding:6px 16px;
@@ -58,7 +58,7 @@
58
58
  --_rs-switcher-compact-icon-offset:4px;
59
59
  --_rs-switcher-icon-margin-vertical:0px;
60
60
  }
61
- ._sizeS_g6yjva_16 [data-rs-internal='switcher__option']{
61
+ ._sizeS_1w2qtvx_16 [data-rs-internal='switcher__option']{
62
62
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
63
63
  --_rs-typography-text-transform:initial;
64
64
  --_rs-typography-font-variant-numeric:initial;
@@ -92,7 +92,7 @@
92
92
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
93
93
  --_rs-typography-link-border-bottom-width-from-text:1px;
94
94
  }
95
- ._sizeM_g6yjva_19{
95
+ ._sizeM_1w2qtvx_19{
96
96
  --_rs-switcher-border-radius:20px;
97
97
  --_rs-switcher-compact-border-radius:8px;
98
98
  --_rs-switcher-option-padding:8px 24px;
@@ -102,7 +102,7 @@
102
102
  --_rs-switcher-compact-icon-offset:8px;
103
103
  --_rs-switcher-icon-margin-vertical:0px;
104
104
  }
105
- ._sizeM_g6yjva_19 [data-rs-internal='switcher__option']{
105
+ ._sizeM_1w2qtvx_19 [data-rs-internal='switcher__option']{
106
106
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
107
107
  --_rs-typography-text-transform:initial;
108
108
  --_rs-typography-font-variant-numeric:initial;
@@ -131,17 +131,20 @@
131
131
  --_rs-typography-text-auto-offset:16px;
132
132
  --_rs-typography-ul-list-li-padding-left:22px;
133
133
  --_rs-typography-ol-list-li-padding-left:26px;
134
- --_rs-typography-list-li-margin-top-from-text:16px;
134
+ --_rs-typography-list-li-margin-top-from-text:var(
135
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
136
+ 16px
137
+ );
135
138
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
136
139
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
137
140
  --_rs-typography-link-border-bottom-width-from-text:1px;
138
141
  }
139
142
  @media screen and (max-width: 640px){
140
- ._sizeM_g6yjva_19 [data-rs-internal='switcher__option']{
141
- --_rs-typography-list-li-margin-top-from-text:12px;
143
+ ._sizeM_1w2qtvx_19 [data-rs-internal='switcher__option']{
144
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
142
145
  }
143
146
  }
144
- ._sizeL_g6yjva_22{
147
+ ._sizeL_1w2qtvx_22{
145
148
  --_rs-switcher-border-radius:26px;
146
149
  --_rs-switcher-compact-border-radius:12px;
147
150
  --_rs-switcher-option-padding:12px 32px;
@@ -151,7 +154,7 @@
151
154
  --_rs-switcher-compact-icon-offset:12px;
152
155
  --_rs-switcher-icon-margin-vertical:0px;
153
156
  }
154
- ._sizeL_g6yjva_22 [data-rs-internal='switcher__option']{
157
+ ._sizeL_1w2qtvx_22 [data-rs-internal='switcher__option']{
155
158
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
156
159
  --_rs-typography-text-transform:initial;
157
160
  --_rs-typography-font-variant-numeric:initial;
@@ -180,28 +183,31 @@
180
183
  --_rs-typography-text-auto-offset:32px;
181
184
  --_rs-typography-ul-list-li-padding-left:26px;
182
185
  --_rs-typography-ol-list-li-padding-left:32px;
183
- --_rs-typography-list-li-margin-top-from-text:24px;
186
+ --_rs-typography-list-li-margin-top-from-text:var(
187
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
188
+ 24px
189
+ );
184
190
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
185
191
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
186
192
  --_rs-typography-link-border-bottom-width-from-text:1px;
187
193
  }
188
194
  @media screen and (max-width: 640px){
189
- ._sizeL_g6yjva_22 [data-rs-internal='switcher__option']{
190
- --_rs-typography-list-li-margin-top-from-text:16px;
195
+ ._sizeL_1w2qtvx_22 [data-rs-internal='switcher__option']{
196
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
191
197
  }
192
198
  }
193
- ._modeClassic_g6yjva_26{
199
+ ._modeClassic_1w2qtvx_26{
194
200
  --_rs-switcher-option-hover-background:var(--_rs-color-primary-t-fog);
195
201
  --_rs-switcher-mark-border-color:var(--_rs-color-primary);
196
202
  }
197
- ._modeRock_g6yjva_29{
203
+ ._modeRock_1w2qtvx_29{
198
204
  --_rs-switcher-option-hover-background:rgba(
199
205
  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),
200
206
  0.1
201
207
  );
202
208
  --_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));
203
209
  }
204
- ._compact_g6yjva_33{
210
+ ._compact_1w2qtvx_33{
205
211
  --_rs-switcher-border-radius-from-compact:var(
206
212
  --_rs-switcher-compact-border-radius
207
213
  );
@@ -212,7 +218,7 @@
212
218
  --_rs-switcher-compact-icon-offset
213
219
  );
214
220
  }
215
- ._switcher_g6yjva_37{
221
+ ._switcher_1w2qtvx_37{
216
222
  --_rs-theme-dark:var(
217
223
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
218
224
  var(--rs-theme-dark, 0)
@@ -222,7 +228,7 @@
222
228
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
223
229
  }
224
230
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
225
- ._switcher_g6yjva_37{
231
+ ._switcher_1w2qtvx_37{
226
232
  --_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)));
227
233
  --_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)));
228
234
  --_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)));
@@ -231,7 +237,7 @@
231
237
  }
232
238
  }
233
239
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
234
- ._switcher_g6yjva_37{
240
+ ._switcher_1w2qtvx_37{
235
241
  --_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);
236
242
  --_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));
237
243
  --_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));
@@ -239,7 +245,7 @@
239
245
  --_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));
240
246
  }
241
247
  }
242
- ._switcher_g6yjva_37 {
248
+ ._switcher_1w2qtvx_37 {
243
249
 
244
250
  position:relative;
245
251
 
@@ -255,16 +261,16 @@
255
261
  background:transparent;
256
262
  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;
257
263
  }
258
- ._switcher_g6yjva_37._disabled_g6yjva_55{
264
+ ._switcher_1w2qtvx_37._disabled_1w2qtvx_55{
259
265
  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;
260
266
  }
261
- ._alignIconLeft_g6yjva_60{
267
+ ._alignIconLeft_1w2qtvx_60{
262
268
  --_rs-switcher-option-flex-direction:row;
263
269
  }
264
- ._alignIconRight_g6yjva_63{
270
+ ._alignIconRight_1w2qtvx_63{
265
271
  --_rs-switcher-option-flex-direction:row-reverse;
266
272
  }
267
- ._option_g6yjva_67{
273
+ ._option_1w2qtvx_67{
268
274
  letter-spacing:var(
269
275
  --rs-text-base-letter-spacing,
270
276
  var(--_rs-typography-letter-spacing)
@@ -315,27 +321,46 @@
315
321
  -moz-appearance:none;
316
322
  appearance:none;
317
323
  }
318
- ._disabled_g6yjva_55 ._option_g6yjva_67{
324
+ ._disabled_1w2qtvx_55 ._option_1w2qtvx_67{
319
325
  cursor:not-allowed;
320
326
  pointer-events:none;
321
327
  }
322
- ._option_g6yjva_67:focus[data-focus-method='key']{
328
+ ._option_1w2qtvx_67:focus[data-focus-method='key']{
323
329
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
324
330
  }
325
331
  @media (hover: hover){
326
- ._option_g6yjva_67:hover{
332
+ ._option_1w2qtvx_67:hover{
327
333
  background:var(--_rs-switcher-option-hover-background);
328
334
  }
329
335
  }
330
- ._option_g6yjva_67._selected_g6yjva_118:active{
336
+ ._option_1w2qtvx_67._selected_1w2qtvx_118:active{
331
337
  background:transparent;
332
338
  }
333
- ._option_g6yjva_67._selected_g6yjva_118:hover,
334
- ._option_g6yjva_67._selected_g6yjva_118:active{
339
+ ._option_1w2qtvx_67._selected_1w2qtvx_118:hover,
340
+ ._option_1w2qtvx_67._selected_1w2qtvx_118:active{
335
341
  cursor:default;
336
342
  }
337
- ._disabled_g6yjva_55 ._option_g6yjva_67,
338
- ._disabled_g6yjva_55 ._option_g6yjva_67._selected_g6yjva_118{
343
+ ._hiddenMark_1w2qtvx_127 ._option_1w2qtvx_67._selected_1w2qtvx_118::before{
344
+ position:absolute;
345
+ top:0;
346
+ right:0;
347
+ bottom:0;
348
+ left:0;
349
+
350
+ display:inline-block;
351
+
352
+ box-sizing:border-box;
353
+
354
+ border:solid 2px var(--_rs-switcher-mark-border-color);
355
+ border-radius:inherit;
356
+
357
+ content:'';
358
+ }
359
+ ._hiddenMark_1w2qtvx_127._disabled_1w2qtvx_55 ._option_1w2qtvx_67._selected_1w2qtvx_118::before{
360
+ 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);
361
+ }
362
+ ._disabled_1w2qtvx_55 ._option_1w2qtvx_67,
363
+ ._disabled_1w2qtvx_55 ._option_1w2qtvx_67._selected_1w2qtvx_118{
339
364
  color:var(
340
365
  --rs-color-pale,
341
366
  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)
@@ -345,7 +370,7 @@
345
370
 
346
371
  background:transparent;
347
372
  }
348
- ._option_g6yjva_67 ._icon_g6yjva_137{
373
+ ._option_1w2qtvx_67 ._icon_1w2qtvx_158{
349
374
  flex:0 0 auto;
350
375
 
351
376
  width:auto;
@@ -356,7 +381,7 @@
356
381
  margin-top:var(--_rs-switcher-icon-margin-vertical);
357
382
  margin-bottom:var(--_rs-switcher-icon-margin-vertical);
358
383
  }
359
- ._mark_g6yjva_150{
384
+ ._mark_1w2qtvx_171{
360
385
  position:absolute;
361
386
  top:0;
362
387
  bottom:0;
@@ -372,19 +397,22 @@
372
397
  var(--_rs-switcher-border-radius)
373
398
  );
374
399
 
375
- transition:all 0.2s;
400
+ transition:all var(--_rs-switcher-mark-transition-duration);
376
401
  }
377
- ._disabled_g6yjva_55 ._mark_g6yjva_150{
402
+ ._disabled_1w2qtvx_55 ._mark_1w2qtvx_171{
378
403
  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);
379
404
  }
405
+ ._hiddenMark_1w2qtvx_127 ._mark_1w2qtvx_171{
406
+ display:none;
407
+ }
380
408
 
381
- ._themeLight_82io4v_6{
409
+ ._themeLight_wm51bo_6{
382
410
  --rs-theme-dark:0;
383
411
  }
384
- ._themeDark_82io4v_9{
412
+ ._themeDark_wm51bo_9{
385
413
  --rs-theme-dark:1;
386
414
  }
387
- ._sizeXS_82io4v_13{
415
+ ._sizeXS_wm51bo_13{
388
416
  --_rs-switcher-vertical-border-radius:4px;
389
417
  --_rs-switcher-vertical-option-vertical-padding:2px;
390
418
  --_rs-switcher-vertical-option-horizontal-padding:8px;
@@ -392,7 +420,7 @@
392
420
  --_rs-switcher-vertical-icon-offset:4px;
393
421
  --_rs-switcher-vertical-icon-margin-vertical:2px;
394
422
  }
395
- ._sizeXS_82io4v_13 [data-rs-internal='vertical-switcher__option']{
423
+ ._sizeXS_wm51bo_13 [data-rs-internal='vertical-switcher__option']{
396
424
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
397
425
  --_rs-typography-text-transform:initial;
398
426
  --_rs-typography-font-variant-numeric:initial;
@@ -426,7 +454,7 @@
426
454
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
427
455
  --_rs-typography-link-border-bottom-width-from-text:1px;
428
456
  }
429
- ._sizeS_82io4v_16{
457
+ ._sizeS_wm51bo_16{
430
458
  --_rs-switcher-vertical-border-radius:4px;
431
459
  --_rs-switcher-vertical-option-vertical-padding:6px;
432
460
  --_rs-switcher-vertical-option-horizontal-padding:12px;
@@ -434,7 +462,7 @@
434
462
  --_rs-switcher-vertical-icon-offset:4px;
435
463
  --_rs-switcher-vertical-icon-margin-vertical:0px;
436
464
  }
437
- ._sizeS_82io4v_16 [data-rs-internal='vertical-switcher__option']{
465
+ ._sizeS_wm51bo_16 [data-rs-internal='vertical-switcher__option']{
438
466
  --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
439
467
  --_rs-typography-text-transform:initial;
440
468
  --_rs-typography-font-variant-numeric:initial;
@@ -468,7 +496,7 @@
468
496
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
469
497
  --_rs-typography-link-border-bottom-width-from-text:1px;
470
498
  }
471
- ._sizeM_82io4v_19{
499
+ ._sizeM_wm51bo_19{
472
500
  --_rs-switcher-vertical-border-radius:8px;
473
501
  --_rs-switcher-vertical-option-vertical-padding:8px;
474
502
  --_rs-switcher-vertical-option-horizontal-padding:16px;
@@ -476,7 +504,7 @@
476
504
  --_rs-switcher-vertical-icon-offset:8px;
477
505
  --_rs-switcher-vertical-icon-margin-vertical:0px;
478
506
  }
479
- ._sizeM_82io4v_19 [data-rs-internal='vertical-switcher__option']{
507
+ ._sizeM_wm51bo_19 [data-rs-internal='vertical-switcher__option']{
480
508
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
481
509
  --_rs-typography-text-transform:initial;
482
510
  --_rs-typography-font-variant-numeric:initial;
@@ -505,17 +533,20 @@
505
533
  --_rs-typography-text-auto-offset:16px;
506
534
  --_rs-typography-ul-list-li-padding-left:22px;
507
535
  --_rs-typography-ol-list-li-padding-left:26px;
508
- --_rs-typography-list-li-margin-top-from-text:16px;
536
+ --_rs-typography-list-li-margin-top-from-text:var(
537
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
538
+ 16px
539
+ );
509
540
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
510
541
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
511
542
  --_rs-typography-link-border-bottom-width-from-text:1px;
512
543
  }
513
544
  @media screen and (max-width: 640px){
514
- ._sizeM_82io4v_19 [data-rs-internal='vertical-switcher__option']{
515
- --_rs-typography-list-li-margin-top-from-text:12px;
545
+ ._sizeM_wm51bo_19 [data-rs-internal='vertical-switcher__option']{
546
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
516
547
  }
517
548
  }
518
- ._sizeL_82io4v_22{
549
+ ._sizeL_wm51bo_22{
519
550
  --_rs-switcher-vertical-border-radius:12px;
520
551
  --_rs-switcher-vertical-option-vertical-padding:12px;
521
552
  --_rs-switcher-vertical-option-horizontal-padding:24px;
@@ -523,7 +554,7 @@
523
554
  --_rs-switcher-vertical-icon-offset:12px;
524
555
  --_rs-switcher-vertical-icon-margin-vertical:0px;
525
556
  }
526
- ._sizeL_82io4v_22 [data-rs-internal='vertical-switcher__option']{
557
+ ._sizeL_wm51bo_22 [data-rs-internal='vertical-switcher__option']{
527
558
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
528
559
  --_rs-typography-text-transform:initial;
529
560
  --_rs-typography-font-variant-numeric:initial;
@@ -552,23 +583,26 @@
552
583
  --_rs-typography-text-auto-offset:32px;
553
584
  --_rs-typography-ul-list-li-padding-left:26px;
554
585
  --_rs-typography-ol-list-li-padding-left:32px;
555
- --_rs-typography-list-li-margin-top-from-text:24px;
586
+ --_rs-typography-list-li-margin-top-from-text:var(
587
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
588
+ 24px
589
+ );
556
590
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
557
591
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
558
592
  --_rs-typography-link-border-bottom-width-from-text:1px;
559
593
  }
560
594
  @media screen and (max-width: 640px){
561
- ._sizeL_82io4v_22 [data-rs-internal='vertical-switcher__option']{
562
- --_rs-typography-list-li-margin-top-from-text:16px;
595
+ ._sizeL_wm51bo_22 [data-rs-internal='vertical-switcher__option']{
596
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
563
597
  }
564
598
  }
565
- ._modeClassic_82io4v_26{
599
+ ._modeClassic_wm51bo_26{
566
600
  --_rs-switcher-vertical-option-hover-background:var(
567
601
  --_rs-color-primary-t-fog
568
602
  );
569
603
  --_rs-switcher-vertical-mark-border-color:var(--_rs-color-primary);
570
604
  }
571
- ._modeRock_82io4v_29{
605
+ ._modeRock_wm51bo_29{
572
606
  --_rs-switcher-vertical-option-hover-background:rgba(
573
607
  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),
574
608
  0.1
@@ -577,7 +611,7 @@
577
611
  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)
578
612
  );
579
613
  }
580
- ._verticalSwitcher_82io4v_33{
614
+ ._verticalSwitcher_wm51bo_33{
581
615
  --_rs-theme-dark:var(
582
616
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
583
617
  var(--rs-theme-dark, 0)
@@ -587,7 +621,7 @@
587
621
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
588
622
  }
589
623
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
590
- ._verticalSwitcher_82io4v_33{
624
+ ._verticalSwitcher_wm51bo_33{
591
625
  --_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)));
592
626
  --_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)));
593
627
  --_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)));
@@ -596,7 +630,7 @@
596
630
  }
597
631
  }
598
632
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
599
- ._verticalSwitcher_82io4v_33{
633
+ ._verticalSwitcher_wm51bo_33{
600
634
  --_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);
601
635
  --_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));
602
636
  --_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));
@@ -604,7 +638,7 @@
604
638
  --_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));
605
639
  }
606
640
  }
607
- ._verticalSwitcher_82io4v_33 {
641
+ ._verticalSwitcher_wm51bo_33 {
608
642
 
609
643
  position:relative;
610
644
 
@@ -619,16 +653,16 @@
619
653
  background:transparent;
620
654
  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;
621
655
  }
622
- ._verticalSwitcher_82io4v_33._disabled_82io4v_50{
656
+ ._verticalSwitcher_wm51bo_33._disabled_wm51bo_50{
623
657
  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;
624
658
  }
625
- ._alignIconLeft_82io4v_55{
659
+ ._alignIconLeft_wm51bo_55{
626
660
  --_rs-switcher-vertical-option-flex-direction:row;
627
661
  }
628
- ._alignIconRight_82io4v_58{
662
+ ._alignIconRight_wm51bo_58{
629
663
  --_rs-switcher-vertical-option-flex-direction:row-reverse;
630
664
  }
631
- ._option_82io4v_62{
665
+ ._option_wm51bo_62{
632
666
  letter-spacing:var(
633
667
  --rs-text-base-letter-spacing,
634
668
  var(--_rs-typography-letter-spacing)
@@ -672,27 +706,46 @@
672
706
  -moz-appearance:none;
673
707
  appearance:none;
674
708
  }
675
- ._disabled_82io4v_50 ._option_82io4v_62{
709
+ ._disabled_wm51bo_50 ._option_wm51bo_62{
676
710
  cursor:not-allowed;
677
711
  pointer-events:none;
678
712
  }
679
- ._option_82io4v_62:focus[data-focus-method='key']{
713
+ ._option_wm51bo_62:focus[data-focus-method='key']{
680
714
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
681
715
  }
682
716
  @media (hover: hover){
683
- ._option_82io4v_62:hover{
717
+ ._option_wm51bo_62:hover{
684
718
  background:var(--_rs-switcher-vertical-option-hover-background);
685
719
  }
686
720
  }
687
- ._option_82io4v_62._selected_82io4v_107:active{
721
+ ._option_wm51bo_62._selected_wm51bo_107:active{
688
722
  background:transparent;
689
723
  }
690
- ._option_82io4v_62._selected_82io4v_107:hover,
691
- ._option_82io4v_62._selected_82io4v_107:active{
724
+ ._option_wm51bo_62._selected_wm51bo_107:hover,
725
+ ._option_wm51bo_62._selected_wm51bo_107:active{
692
726
  cursor:default;
693
727
  }
694
- ._disabled_82io4v_50 ._option_82io4v_62,
695
- ._disabled_82io4v_50 ._option_82io4v_62._selected_82io4v_107{
728
+ ._hiddenMark_wm51bo_116 ._option_wm51bo_62._selected_wm51bo_107::before{
729
+ position:absolute;
730
+ top:0;
731
+ right:0;
732
+ bottom:0;
733
+ left:0;
734
+
735
+ display:inline-block;
736
+
737
+ box-sizing:border-box;
738
+
739
+ border:solid 2px var(--_rs-switcher-vertical-mark-border-color);
740
+ border-radius:inherit;
741
+
742
+ content:'';
743
+ }
744
+ ._hiddenMark_wm51bo_116._disabled_wm51bo_50 ._option_wm51bo_62._selected_wm51bo_107::before{
745
+ 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);
746
+ }
747
+ ._disabled_wm51bo_50 ._option_wm51bo_62,
748
+ ._disabled_wm51bo_50 ._option_wm51bo_62._selected_wm51bo_107{
696
749
  color:var(
697
750
  --rs-color-pale,
698
751
  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)
@@ -702,12 +755,12 @@
702
755
 
703
756
  background:transparent;
704
757
  }
705
- ._option_82io4v_62 ._optionLabel_82io4v_126{
758
+ ._option_wm51bo_62 ._optionLabel_wm51bo_147{
706
759
  flex:1 1 auto;
707
760
 
708
761
  text-align:left;
709
762
  }
710
- ._option_82io4v_62 ._icon_82io4v_132{
763
+ ._option_wm51bo_62 ._icon_wm51bo_153{
711
764
  flex:0 0 auto;
712
765
 
713
766
  width:auto;
@@ -718,12 +771,12 @@
718
771
 
719
772
  fill:currentColor;
720
773
  }
721
- ._option_82io4v_62 ._fakeIcon_82io4v_143{
774
+ ._option_wm51bo_62 ._fakeIcon_wm51bo_164{
722
775
  display:inline-block;
723
776
 
724
777
  width:var(--_rs-switcher-vertical-icon-size);
725
778
  }
726
- ._mark_82io4v_150{
779
+ ._mark_wm51bo_171{
727
780
  position:absolute;
728
781
  right:0;
729
782
  left:0;
@@ -736,8 +789,11 @@
736
789
 
737
790
  border-radius:var(--_rs-switcher-vertical-border-radius);
738
791
 
739
- transition:all 0.2s;
792
+ transition:all var(--_rs-switcher-vertical-mark-transition-duration);
740
793
  }
741
- ._disabled_82io4v_50 ._mark_82io4v_150{
794
+ ._disabled_wm51bo_50 ._mark_wm51bo_171{
742
795
  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);
743
796
  }
797
+ ._hiddenMark_wm51bo_116 ._mark_wm51bo_171{
798
+ display:none;
799
+ }
package/lib/public-api.p.css CHANGED
@@ -130,14 +130,17 @@
130
130
  --_rs-typography-text-auto-offset:16px;
131
131
  --_rs-typography-ul-list-li-padding-left:22px;
132
132
  --_rs-typography-ol-list-li-padding-left:26px;
133
- --_rs-typography-list-li-margin-top-from-text:16px;
133
+ --_rs-typography-list-li-margin-top-from-text:var(
134
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
135
+ 16px
136
+ );
134
137
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
135
138
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
136
139
  --_rs-typography-link-border-bottom-width-from-text:1px;
137
140
  }
138
141
  @media screen and (max-width: 640px){
139
142
  &:not(html) [data-rs-internal='switcher__option']{
140
- --_rs-typography-list-li-margin-top-from-text:12px;
143
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
141
144
  }
142
145
  }
143
146
  }
@@ -181,14 +184,17 @@
181
184
  --_rs-typography-text-auto-offset:32px;
182
185
  --_rs-typography-ul-list-li-padding-left:26px;
183
186
  --_rs-typography-ol-list-li-padding-left:32px;
184
- --_rs-typography-list-li-margin-top-from-text:24px;
187
+ --_rs-typography-list-li-margin-top-from-text:var(
188
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
189
+ 24px
190
+ );
185
191
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
186
192
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
187
193
  --_rs-typography-link-border-bottom-width-from-text:1px;
188
194
  }
189
195
  @media screen and (max-width: 640px){
190
196
  &:not(html) [data-rs-internal='switcher__option']{
191
- --_rs-typography-list-li-margin-top-from-text:16px;
197
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
192
198
  }
193
199
  }
194
200
  }
@@ -359,14 +365,17 @@
359
365
  --_rs-typography-text-auto-offset:16px;
360
366
  --_rs-typography-ul-list-li-padding-left:22px;
361
367
  --_rs-typography-ol-list-li-padding-left:26px;
362
- --_rs-typography-list-li-margin-top-from-text:16px;
368
+ --_rs-typography-list-li-margin-top-from-text:var(
369
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
370
+ 16px
371
+ );
363
372
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
364
373
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
365
374
  --_rs-typography-link-border-bottom-width-from-text:1px;
366
375
  }
367
376
  @media screen and (max-width: 640px){
368
377
  &:not(html) [data-rs-internal='vertical-switcher__option']{
369
- --_rs-typography-list-li-margin-top-from-text:12px;
378
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
370
379
  }
371
380
  }
372
381
  }
@@ -408,14 +417,17 @@
408
417
  --_rs-typography-text-auto-offset:32px;
409
418
  --_rs-typography-ul-list-li-padding-left:26px;
410
419
  --_rs-typography-ol-list-li-padding-left:32px;
411
- --_rs-typography-list-li-margin-top-from-text:24px;
420
+ --_rs-typography-list-li-margin-top-from-text:var(
421
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
422
+ 24px
423
+ );
412
424
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
413
425
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
414
426
  --_rs-typography-link-border-bottom-width-from-text:1px;
415
427
  }
416
428
  @media screen and (max-width: 640px){
417
429
  &:not(html) [data-rs-internal='vertical-switcher__option']{
418
- --_rs-typography-list-li-margin-top-from-text:16px;
430
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
419
431
  }
420
432
  }
421
433
  }
package/lib/public-api.pcss CHANGED
@@ -130,14 +130,17 @@
130
130
  --_rs-typography-text-auto-offset:16px;
131
131
  --_rs-typography-ul-list-li-padding-left:22px;
132
132
  --_rs-typography-ol-list-li-padding-left:26px;
133
- --_rs-typography-list-li-margin-top-from-text:16px;
133
+ --_rs-typography-list-li-margin-top-from-text:var(
134
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
135
+ 16px
136
+ );
134
137
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
135
138
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
136
139
  --_rs-typography-link-border-bottom-width-from-text:1px;
137
140
  }
138
141
  @media screen and (max-width: 640px){
139
142
  &:not(html) [data-rs-internal='switcher__option']{
140
- --_rs-typography-list-li-margin-top-from-text:12px;
143
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
141
144
  }
142
145
  }
143
146
  }
@@ -181,14 +184,17 @@
181
184
  --_rs-typography-text-auto-offset:32px;
182
185
  --_rs-typography-ul-list-li-padding-left:26px;
183
186
  --_rs-typography-ol-list-li-padding-left:32px;
184
- --_rs-typography-list-li-margin-top-from-text:24px;
187
+ --_rs-typography-list-li-margin-top-from-text:var(
188
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
189
+ 24px
190
+ );
185
191
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
186
192
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
187
193
  --_rs-typography-link-border-bottom-width-from-text:1px;
188
194
  }
189
195
  @media screen and (max-width: 640px){
190
196
  &:not(html) [data-rs-internal='switcher__option']{
191
- --_rs-typography-list-li-margin-top-from-text:16px;
197
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
192
198
  }
193
199
  }
194
200
  }
@@ -359,14 +365,17 @@
359
365
  --_rs-typography-text-auto-offset:16px;
360
366
  --_rs-typography-ul-list-li-padding-left:22px;
361
367
  --_rs-typography-ol-list-li-padding-left:26px;
362
- --_rs-typography-list-li-margin-top-from-text:16px;
368
+ --_rs-typography-list-li-margin-top-from-text:var(
369
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
370
+ 16px
371
+ );
363
372
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
364
373
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
365
374
  --_rs-typography-link-border-bottom-width-from-text:1px;
366
375
  }
367
376
  @media screen and (max-width: 640px){
368
377
  &:not(html) [data-rs-internal='vertical-switcher__option']{
369
- --_rs-typography-list-li-margin-top-from-text:12px;
378
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
370
379
  }
371
380
  }
372
381
  }
@@ -408,14 +417,17 @@
408
417
  --_rs-typography-text-auto-offset:32px;
409
418
  --_rs-typography-ul-list-li-padding-left:26px;
410
419
  --_rs-typography-ol-list-li-padding-left:32px;
411
- --_rs-typography-list-li-margin-top-from-text:24px;
420
+ --_rs-typography-list-li-margin-top-from-text:var(
421
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
422
+ 24px
423
+ );
412
424
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
413
425
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
414
426
  --_rs-typography-link-border-bottom-width-from-text:1px;
415
427
  }
416
428
  @media screen and (max-width: 640px){
417
429
  &:not(html) [data-rs-internal='vertical-switcher__option']{
418
- --_rs-typography-list-li-margin-top-from-text:16px;
430
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
419
431
  }
420
432
  }
421
433
  }
package/lib/switcher.d.ts CHANGED
@@ -28,8 +28,10 @@ export interface SwitcherProps<ValueType, OptionsValueType extends ValueType> {
28
28
  'data-e2e'?: string;
29
29
  /** **Works only if the `icon` on options is present.** Additional icon position. */
30
30
  iconPosition?: SwitcherOptionIconPosition;
31
+ /** CSS style object */
32
+ style?: React.CSSProperties;
31
33
  }
32
- export declare function Switcher<ValueType, OptionsValueType extends ValueType = ValueType>({ className, theme: themeFromProps, size, disabled, compact, ['data-e2e']: e2eId, options, value: switcherValue, mode, iconPosition, onChange }: SwitcherProps<ValueType, OptionsValueType>): JSX.Element;
34
+ export declare function Switcher<ValueType, OptionsValueType extends ValueType = ValueType>({ className, theme: themeFromProps, size, disabled, compact, ['data-e2e']: e2eId, options, value: switcherValue, mode, iconPosition, onChange, style }: SwitcherProps<ValueType, OptionsValueType>): JSX.Element;
33
35
  export declare namespace Switcher {
34
36
  var propTypes: {};
35
37
  }
package/lib/switcher.js CHANGED
@@ -4,6 +4,7 @@ import cn from 'classnames';
4
4
  import { useThemeWithUndefined } from '@rescui/ui-contexts';
5
5
  import { useResizeObserver } from '@rescui/use-resize-observer';
6
6
  import styles from './switcher.p.module.css.js';
7
+ const MARK_TRANSITION_DURATION = '0.2s';
7
8
  const sizeToClass = {
8
9
  l: styles.sizeL,
9
10
  m: styles.sizeM,
@@ -64,7 +65,8 @@ function Switcher(_ref2) {
64
65
  value: switcherValue,
65
66
  mode = 'classic',
66
67
  iconPosition = 'left',
67
- onChange
68
+ onChange,
69
+ style
68
70
  } = _ref2;
69
71
  const refsArray = useRef([]);
70
72
  const containerRef = useRef(null);
@@ -81,10 +83,14 @@ function Switcher(_ref2) {
81
83
  const activeIndex = findIndexByValue(options, switcherValue);
82
84
  const [mark, setMark] = useState({
83
85
  offset: 0,
84
- width: 0
86
+ width: 0,
87
+ hidden: true
85
88
  });
89
+ const [isMarkTransitionEnabled, setIsMarkTransitionEnabled] = useState(false);
90
+ const firstMarkUpdate = useRef(true);
86
91
 
87
- const onResize = () => {
92
+ const updateMark = function () {
93
+ let isValueChanged = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
88
94
  const activeEl = refsArray.current[activeIndex];
89
95
 
90
96
  if (!activeEl) {
@@ -96,19 +102,30 @@ function Switcher(_ref2) {
96
102
  setMark({
97
103
  // standard activeEl.offsetLeft always return rounded value, so it does not suit us
98
104
  offset: activeElBox.left - parentBox.left,
99
- width: activeElBox.width
105
+ width: activeElBox.width,
106
+ hidden: false
100
107
  });
108
+
109
+ if (firstMarkUpdate.current) {
110
+ firstMarkUpdate.current = false;
111
+ setIsMarkTransitionEnabled(false);
112
+ } else {
113
+ setIsMarkTransitionEnabled(isValueChanged);
114
+ }
101
115
  }; // eslint-disable-next-line react-hooks/exhaustive-deps
102
116
 
103
117
 
104
- useEffect(() => onResize(), [activeIndex]);
105
- useResizeObserver(containerRef, onResize);
118
+ useEffect(() => updateMark(true), [activeIndex]);
119
+ useResizeObserver(containerRef, () => updateMark(false));
106
120
  return /*#__PURE__*/React.createElement("span", {
107
- className: cn(className, styles.switcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, compact && styles.compact, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
121
+ 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),
108
122
  "data-e2e": e2eId,
109
123
  ref: containerRef,
110
124
  "data-rs-internal": 'switcher',
111
- "data-test": cn(`switcher`, disabled && `switcher-disabled`)
125
+ "data-test": cn(`switcher`, disabled && `switcher-disabled`),
126
+ style: { ...style,
127
+ '--_rs-switcher-mark-transition-duration': isMarkTransitionEnabled ? MARK_TRANSITION_DURATION : '0s'
128
+ }
112
129
  }, options.map((_ref3, index) => {
113
130
  var _options$activeIndex;
114
131
 
@@ -150,6 +167,7 @@ Switcher.propTypes = {
150
167
  theme: PropTypes.oneOf(['light', 'dark']),
151
168
  disabled: PropTypes.bool,
152
169
  iconPosition: PropTypes.oneOf(['left', 'right']),
153
- 'data-e2e': PropTypes.string
170
+ 'data-e2e': PropTypes.string,
171
+ style: PropTypes.object
154
172
  };
155
173
  export { Switcher, Switcher as default };
package/lib/switcher.p.module.css.js CHANGED
@@ -1,20 +1,21 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_g6yjva_6",
3
- "themeDark": "_themeDark_g6yjva_9",
4
- "sizeXS": "_sizeXS_g6yjva_13",
5
- "sizeS": "_sizeS_g6yjva_16",
6
- "sizeM": "_sizeM_g6yjva_19",
7
- "sizeL": "_sizeL_g6yjva_22",
8
- "modeClassic": "_modeClassic_g6yjva_26",
9
- "modeRock": "_modeRock_g6yjva_29",
10
- "compact": "_compact_g6yjva_33",
11
- "switcher": "_switcher_g6yjva_37",
12
- "disabled": "_disabled_g6yjva_55",
13
- "alignIconLeft": "_alignIconLeft_g6yjva_60",
14
- "alignIconRight": "_alignIconRight_g6yjva_63",
15
- "option": "_option_g6yjva_67",
16
- "selected": "_selected_g6yjva_118",
17
- "icon": "_icon_g6yjva_137",
18
- "mark": "_mark_g6yjva_150"
2
+ "themeLight": "_themeLight_1w2qtvx_6",
3
+ "themeDark": "_themeDark_1w2qtvx_9",
4
+ "sizeXS": "_sizeXS_1w2qtvx_13",
5
+ "sizeS": "_sizeS_1w2qtvx_16",
6
+ "sizeM": "_sizeM_1w2qtvx_19",
7
+ "sizeL": "_sizeL_1w2qtvx_22",
8
+ "modeClassic": "_modeClassic_1w2qtvx_26",
9
+ "modeRock": "_modeRock_1w2qtvx_29",
10
+ "compact": "_compact_1w2qtvx_33",
11
+ "switcher": "_switcher_1w2qtvx_37",
12
+ "disabled": "_disabled_1w2qtvx_55",
13
+ "alignIconLeft": "_alignIconLeft_1w2qtvx_60",
14
+ "alignIconRight": "_alignIconRight_1w2qtvx_63",
15
+ "option": "_option_1w2qtvx_67",
16
+ "selected": "_selected_1w2qtvx_118",
17
+ "hiddenMark": "_hiddenMark_1w2qtvx_127",
18
+ "icon": "_icon_1w2qtvx_158",
19
+ "mark": "_mark_1w2qtvx_171"
19
20
  };
20
21
  export { styles as default };
package/lib/vertical-switcher.js CHANGED
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
3
3
  import cn from 'classnames';
4
4
  import { useThemeWithUndefined } from '@rescui/ui-contexts';
5
5
  import { useResizeObserver } from '@rescui/use-resize-observer';
6
- import styles from './vertical-switcher.p.module.css.js'; // eslint-disable-next-line @typescript-eslint/no-empty-function
6
+ import styles from './vertical-switcher.p.module.css.js';
7
+ const MARK_TRANSITION_DURATION = '0.2s'; // eslint-disable-next-line @typescript-eslint/no-empty-function
7
8
 
8
9
  const noop = () => {};
9
10
 
@@ -146,10 +147,14 @@ function VerticalSwitcher(_ref3) {
146
147
  }, []);
147
148
  const [mark, setMark] = useState({
148
149
  offset: 0,
149
- height: 0
150
+ height: 0,
151
+ hidden: true
150
152
  });
153
+ const [isMarkTransitionEnabled, setIsMarkTransitionEnabled] = useState(false);
154
+ const firstMarkUpdate = useRef(true);
151
155
 
152
- const onResize = () => {
156
+ const updateMark = function () {
157
+ let isValueChanged = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
153
158
  const activeEl = refsArray.current[activeIndex];
154
159
 
155
160
  if (!activeEl) {
@@ -162,20 +167,32 @@ function VerticalSwitcher(_ref3) {
162
167
  setMark({
163
168
  // standard activeEl.offsetTop always return rounded value, so it does not suit us
164
169
  offset: activeElBox.top - parentBox.top + parentEl.scrollTop,
165
- height: activeElBox.height
170
+ height: activeElBox.height,
171
+ hidden: false
166
172
  });
173
+
174
+ if (firstMarkUpdate.current) {
175
+ firstMarkUpdate.current = false;
176
+ setIsMarkTransitionEnabled(false);
177
+ } else {
178
+ setIsMarkTransitionEnabled(isValueChanged);
179
+ }
167
180
  }; // eslint-disable-next-line react-hooks/exhaustive-deps
168
181
 
169
182
 
170
- useEffect(() => onResize(), [activeIndex]);
171
- useResizeObserver(containerRef, onResize);
183
+ useEffect(() => updateMark(true), [activeIndex]);
184
+ useResizeObserver(containerRef, () => updateMark(false), {
185
+ ignoreFirstCall: true
186
+ });
172
187
  return /*#__PURE__*/React.createElement("span", {
173
- className: cn(className, styles.verticalSwitcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
188
+ className: cn(className, styles.verticalSwitcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, mark.hidden && styles.hiddenMark, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
174
189
  "data-e2e": e2eId,
175
190
  ref: containerRef,
176
191
  "data-rs-internal": 'vertical-switcher',
177
192
  "data-test": cn(`vertical-switcher`, disabled && `vertical-switcher-disabled`),
178
- style: style
193
+ style: { ...style,
194
+ '--_rs-switcher-vertical-mark-transition-duration': isMarkTransitionEnabled ? MARK_TRANSITION_DURATION : '0s'
195
+ }
179
196
  }, /*#__PURE__*/React.createElement(verticalSwitcherContext.Provider, {
180
197
  value: {
181
198
  switcherValue: (_options$activeIndex = options[activeIndex]) === null || _options$activeIndex === void 0 ? void 0 : _options$activeIndex.value,
package/lib/vertical-switcher.p.module.css.js CHANGED
@@ -1,21 +1,22 @@
1
1
  var styles = {
2
- "themeLight": "_themeLight_82io4v_6",
3
- "themeDark": "_themeDark_82io4v_9",
4
- "sizeXS": "_sizeXS_82io4v_13",
5
- "sizeS": "_sizeS_82io4v_16",
6
- "sizeM": "_sizeM_82io4v_19",
7
- "sizeL": "_sizeL_82io4v_22",
8
- "modeClassic": "_modeClassic_82io4v_26",
9
- "modeRock": "_modeRock_82io4v_29",
10
- "verticalSwitcher": "_verticalSwitcher_82io4v_33",
11
- "disabled": "_disabled_82io4v_50",
12
- "alignIconLeft": "_alignIconLeft_82io4v_55",
13
- "alignIconRight": "_alignIconRight_82io4v_58",
14
- "option": "_option_82io4v_62",
15
- "selected": "_selected_82io4v_107",
16
- "optionLabel": "_optionLabel_82io4v_126",
17
- "icon": "_icon_82io4v_132",
18
- "fakeIcon": "_fakeIcon_82io4v_143",
19
- "mark": "_mark_82io4v_150"
2
+ "themeLight": "_themeLight_wm51bo_6",
3
+ "themeDark": "_themeDark_wm51bo_9",
4
+ "sizeXS": "_sizeXS_wm51bo_13",
5
+ "sizeS": "_sizeS_wm51bo_16",
6
+ "sizeM": "_sizeM_wm51bo_19",
7
+ "sizeL": "_sizeL_wm51bo_22",
8
+ "modeClassic": "_modeClassic_wm51bo_26",
9
+ "modeRock": "_modeRock_wm51bo_29",
10
+ "verticalSwitcher": "_verticalSwitcher_wm51bo_33",
11
+ "disabled": "_disabled_wm51bo_50",
12
+ "alignIconLeft": "_alignIconLeft_wm51bo_55",
13
+ "alignIconRight": "_alignIconRight_wm51bo_58",
14
+ "option": "_option_wm51bo_62",
15
+ "selected": "_selected_wm51bo_107",
16
+ "hiddenMark": "_hiddenMark_wm51bo_116",
17
+ "optionLabel": "_optionLabel_wm51bo_147",
18
+ "icon": "_icon_wm51bo_153",
19
+ "fakeIcon": "_fakeIcon_wm51bo_164",
20
+ "mark": "_mark_wm51bo_171"
20
21
  };
21
22
  export { styles as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/switcher",
3
- "version": "0.10.7",
3
+ "version": "0.11.1",
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.2.7",
30
- "@rescui/icons": "^0.16.15",
30
+ "@rescui/icons": "^0.16.16",
31
31
  "@rescui/scripts": "^0.3.5",
32
- "@rescui/typography": "^0.21.1"
32
+ "@rescui/typography": "^0.22.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": "94b4b5531e261cde472a2218ace4a21d7b0f990f"
39
+ "gitHead": "71902b643c074d76514a26a5ee2feecc75d41347"
40
40
  }