@rescui/tab-list 0.18.3 → 0.18.5-RUI-308-Fix-select-issues-405b9fa40.12

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 (13) hide show
  1. package/lib/_virtual/index.css.js +12 -12
  2. package/lib/index.css +94 -79
  3. package/lib/parts/separator.p.module.css.js +3 -3
  4. package/lib/parts/tab-list.p.module.css.js +25 -25
  5. package/lib/parts/use-indicator.d.ts +3 -4
  6. package/lib/parts/use-indicator.js +10 -12
  7. package/lib/parts/use-roving-tab-index.js +11 -5
  8. package/lib/parts/use-scrollable-list.d.ts +2 -2
  9. package/lib/parts/use-scrollable-list.js +26 -19
  10. package/lib/public-api.p.css +5 -0
  11. package/lib/public-api.pcss +5 -0
  12. package/lib/tab-list.js +3 -5
  13. package/package.json +9 -9
package/lib/_virtual/index.css.js CHANGED
@@ -1,15 +1,15 @@
1
1
  var styles = {
2
- "icon": "_icon_3sp1p2_4",
3
- "sizeXS": "_sizeXS_3sp1p2_14",
4
- "sizeS": "_sizeS_3sp1p2_18",
5
- "sizeM": "_sizeM_3sp1p2_22",
6
- "sizeL": "_sizeL_3sp1p2_26",
7
- "light": "_light_3sp1p2_30",
8
- "dark": "_dark_3sp1p2_34",
9
- "allVariants": "_allVariants_3sp1p2_48",
10
- "variant16": "_variant16_3sp1p2_53",
11
- "variant20": "_variant20_3sp1p2_54",
12
- "variant24": "_variant24_3sp1p2_55",
13
- "variant28": "_variant28_3sp1p2_58"
2
+ "icon": "_icon_8k0v18_4",
3
+ "sizeXS": "_sizeXS_8k0v18_14",
4
+ "sizeS": "_sizeS_8k0v18_18",
5
+ "sizeM": "_sizeM_8k0v18_22",
6
+ "sizeL": "_sizeL_8k0v18_26",
7
+ "light": "_light_8k0v18_30",
8
+ "dark": "_dark_8k0v18_34",
9
+ "allVariants": "_allVariants_8k0v18_48",
10
+ "variant16": "_variant16_8k0v18_53",
11
+ "variant20": "_variant20_8k0v18_54",
12
+ "variant24": "_variant24_8k0v18_55",
13
+ "variant28": "_variant28_8k0v18_58"
14
14
  };
15
15
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,9 @@
1
- ._icon_3sp1p2_4{
1
+ @property --_rs-theme-dark-coefficient{
2
+ syntax:'<number>';
3
+ inherits:true;
4
+ initial-value:0;
5
+ }
6
+ ._icon_8k0v18_4{
2
7
  --_rs-theme-dark:var(
3
8
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
4
9
  var(--rs-theme-dark, 0)
@@ -8,7 +13,7 @@
8
13
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
9
14
  }
10
15
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
11
- ._icon_3sp1p2_4{
16
+ ._icon_8k0v18_4{
12
17
  --_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)));
13
18
  --_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)));
14
19
  --_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)));
@@ -17,7 +22,7 @@
17
22
  }
18
23
  }
19
24
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
20
- ._icon_3sp1p2_4{
25
+ ._icon_8k0v18_4{
21
26
  --_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);
22
27
  --_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));
23
28
  --_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));
@@ -25,30 +30,30 @@
25
30
  --_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));
26
31
  }
27
32
  }
28
- ._icon_3sp1p2_4{
33
+ ._icon_8k0v18_4{
29
34
 
30
35
  fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
31
36
 
32
37
  width:var(--rs-icons-width, auto);
33
38
  height:var(--rs-icons-height, var(--_rs-icons-height));
34
39
  }
35
- ._sizeXS_3sp1p2_14{
40
+ ._sizeXS_8k0v18_14{
36
41
  --_rs-icons-height:16px;
37
42
  }
38
- ._sizeS_3sp1p2_18{
43
+ ._sizeS_8k0v18_18{
39
44
  --_rs-icons-height:20px;
40
45
  }
41
- ._sizeM_3sp1p2_22{
46
+ ._sizeM_8k0v18_22{
42
47
  --_rs-icons-height:24px;
43
48
  }
44
- ._sizeL_3sp1p2_26{
49
+ ._sizeL_8k0v18_26{
45
50
  --_rs-icons-height:28px;
46
51
  }
47
- ._light_3sp1p2_30{
52
+ ._light_8k0v18_30{
48
53
  --rs-theme-dark:0;
49
54
  --_rs-icons-themed-fill-or-initial: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));
50
55
  }
51
- ._dark_3sp1p2_34{
56
+ ._dark_8k0v18_34{
52
57
  --rs-theme-dark:1;
53
58
  --_rs-icons-themed-fill-or-initial: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));
54
59
  }
@@ -60,54 +65,59 @@
60
65
  transform:rotate(360deg);
61
66
  }
62
67
  }
63
- ._allVariants_3sp1p2_48{
68
+ ._allVariants_8k0v18_48{
64
69
  aspect-ratio:var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);
65
70
  container:rs-icon / size;
66
71
  }
67
- ._variant16_3sp1p2_53,
68
- ._variant20_3sp1p2_54,
69
- ._variant24_3sp1p2_55{
72
+ ._variant16_8k0v18_53,
73
+ ._variant20_8k0v18_54,
74
+ ._variant24_8k0v18_55{
70
75
  display:none;
71
76
  }
72
- ._variant28_3sp1p2_58{
77
+ ._variant28_8k0v18_58{
73
78
  display:block;
74
79
  }
75
80
  @container rs-icon (max-height: 24px){
76
- ._variant24_3sp1p2_55{
81
+ ._variant24_8k0v18_55{
77
82
  display:block;
78
83
  }
79
- ._variant28_3sp1p2_58{
84
+ ._variant28_8k0v18_58{
80
85
  display:none;
81
86
  }
82
87
  }
83
88
  @container rs-icon (max-height: 20px){
84
- ._variant20_3sp1p2_54{
89
+ ._variant20_8k0v18_54{
85
90
  display:block;
86
91
  }
87
- ._variant24_3sp1p2_55{
92
+ ._variant24_8k0v18_55{
88
93
  display:none;
89
94
  }
90
95
  }
91
96
  @container rs-icon (max-height: 16px){
92
- ._variant16_3sp1p2_53{
97
+ ._variant16_8k0v18_53{
93
98
  display:block;
94
99
  }
95
- ._variant20_3sp1p2_54{
100
+ ._variant20_8k0v18_54{
96
101
  display:none;
97
102
  }
98
103
  }
99
- ._light_1z0dmr1_10{
104
+ @property --_rs-theme-dark-coefficient{
105
+ syntax:'<number>';
106
+ inherits:true;
107
+ initial-value:0;
108
+ }
109
+ ._light_18iupwn_10{
100
110
  --rs-theme-dark:0;
101
111
  }
102
- ._dark_1z0dmr1_13{
112
+ ._dark_18iupwn_13{
103
113
  --rs-theme-dark:1;
104
114
  }
105
- ._sizeM_1z0dmr1_17{
115
+ ._sizeM_18iupwn_17{
106
116
  --_rs-tab-list-tab-vertical-padding:8px;
107
117
  --_rs-tab-list-icon-size:24px;
108
118
  --_rs-tab-list-icon-offset:4px;
109
119
  }
110
- ._sizeM_1z0dmr1_17 [data-rs-internal='tab-list__tab']{
120
+ ._sizeM_18iupwn_17 [data-rs-internal='tab-list__tab']{
111
121
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
112
122
  --_rs-typography-text-transform:initial;
113
123
  --_rs-typography-font-variant-numeric:initial;
@@ -146,16 +156,16 @@
146
156
  --_rs-typography-link-border-bottom-width-from-text:1px;
147
157
  }
148
158
  @media screen and (max-width: 640px){
149
- ._sizeM_1z0dmr1_17 [data-rs-internal='tab-list__tab']{
159
+ ._sizeM_18iupwn_17 [data-rs-internal='tab-list__tab']{
150
160
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
151
161
  }
152
162
  }
153
- ._sizeL_1z0dmr1_20{
163
+ ._sizeL_18iupwn_20{
154
164
  --_rs-tab-list-tab-vertical-padding:12px;
155
165
  --_rs-tab-list-icon-size:28px;
156
166
  --_rs-tab-list-icon-offset:8px;
157
167
  }
158
- ._sizeL_1z0dmr1_20 [data-rs-internal='tab-list__tab']{
168
+ ._sizeL_18iupwn_20 [data-rs-internal='tab-list__tab']{
159
169
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
160
170
  --_rs-typography-text-transform:initial;
161
171
  --_rs-typography-font-variant-numeric:initial;
@@ -194,28 +204,28 @@
194
204
  --_rs-typography-link-border-bottom-width-from-text:1px;
195
205
  }
196
206
  @media screen and (max-width: 640px){
197
- ._sizeL_1z0dmr1_20 [data-rs-internal='tab-list__tab']{
207
+ ._sizeL_18iupwn_20 [data-rs-internal='tab-list__tab']{
198
208
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
199
209
  }
200
210
  }
201
- ._classic_1z0dmr1_24{
211
+ ._classic_18iupwn_24{
202
212
  --_rs-tab-list-indicator-background:var(--_rs-color-primary);
203
213
  }
204
- ._rock_1z0dmr1_27{
214
+ ._rock_18iupwn_27{
205
215
  --_rs-tab-list-indicator-background: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));
206
216
  }
207
- ._sparse_1z0dmr1_31{
217
+ ._sparse_18iupwn_31{
208
218
  --_rs-tab-list-tab-margin-left-or-initial:32px;
209
219
  }
210
220
  @media screen and (max-width: 640px){
211
- ._sparse_1z0dmr1_31{
221
+ ._sparse_18iupwn_31{
212
222
  --_rs-tab-list-tab-margin-left-or-initial:24px;
213
223
  }
214
224
  }
215
- ._short_1z0dmr1_35{
225
+ ._short_18iupwn_35{
216
226
  --_rs-tab-list-tab-box-shadow:inset 0 -1px 0 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), calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1));
217
227
  }
218
- ._wrapper_1z0dmr1_39{
228
+ ._wrapper_18iupwn_39{
219
229
  --_rs-theme-dark:var(
220
230
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
221
231
  var(--rs-theme-dark, 0)
@@ -225,7 +235,7 @@
225
235
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
226
236
  }
227
237
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
228
- ._wrapper_1z0dmr1_39{
238
+ ._wrapper_18iupwn_39{
229
239
  --_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)));
230
240
  --_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)));
231
241
  --_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)));
@@ -234,7 +244,7 @@
234
244
  }
235
245
  }
236
246
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
237
- ._wrapper_1z0dmr1_39{
247
+ ._wrapper_18iupwn_39{
238
248
  --_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);
239
249
  --_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));
240
250
  --_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));
@@ -242,15 +252,15 @@
242
252
  --_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));
243
253
  }
244
254
  }
245
- ._wrapper_1z0dmr1_39 {
255
+ ._wrapper_18iupwn_39 {
246
256
  --_rs-tab-list-tab-base-margin-left:24px;
247
257
  }
248
258
  @media screen and (max-width: 640px){
249
- ._wrapper_1z0dmr1_39{
259
+ ._wrapper_18iupwn_39{
250
260
  --_rs-tab-list-tab-base-margin-left:16px;
251
261
  }
252
262
  }
253
- ._wrapper_1z0dmr1_39 {
263
+ ._wrapper_18iupwn_39 {
254
264
  --_rs-tab-list-tab-margin-left:var(
255
265
  --_rs-tab-list-tab-margin-left-or-initial,
256
266
  var(--_rs-tab-list-tab-base-margin-left)
@@ -260,14 +270,14 @@
260
270
 
261
271
  display:flex;
262
272
  }
263
- ._scrollable_1z0dmr1_49{
273
+ ._scrollable_18iupwn_49{
264
274
  display:flex;
265
275
  overflow-x:scroll;
266
276
 
267
277
  margin:-4px;
268
278
  padding:4px;
269
279
  }
270
- ._scrollable_1z0dmr1_49::after{
280
+ ._scrollable_18iupwn_49::after{
271
281
  display:block;
272
282
 
273
283
  height:100%;
@@ -276,15 +286,15 @@
276
286
 
277
287
  content:'';
278
288
  }
279
- ._scrollable_1z0dmr1_49 {
289
+ ._scrollable_18iupwn_49 {
280
290
 
281
291
  -ms-overflow-style:none;
282
292
  scrollbar-width:none;
283
293
  }
284
- ._scrollable_1z0dmr1_49::-webkit-scrollbar{
294
+ ._scrollable_18iupwn_49::-webkit-scrollbar{
285
295
  display:none;
286
296
  }
287
- ._arrow_1z0dmr1_78{
297
+ ._arrow_18iupwn_78{
288
298
  position:absolute;
289
299
  z-index:2;
290
300
  top:50%;
@@ -304,20 +314,20 @@
304
314
  transition:opacity 0.15s var(--rs-transition-function, ease-out);
305
315
  transform:translateY(-50%);
306
316
  }
307
- ._arrow_1z0dmr1_78._shown_1z0dmr1_98{
317
+ ._arrow_18iupwn_78._shown_18iupwn_98{
308
318
  opacity:1;
309
319
 
310
320
  pointer-events:auto;
311
321
 
312
322
  transition:opacity 0.15s var(--rs-transition-function, ease-in);
313
323
  }
314
- ._arrow_1z0dmr1_78._arrowLeft_1z0dmr1_106{
324
+ ._arrow_18iupwn_78._arrowLeft_18iupwn_106{
315
325
  left:-5px;
316
326
  }
317
- ._arrow_1z0dmr1_78._arrowRight_1z0dmr1_111{
327
+ ._arrow_18iupwn_78._arrowRight_18iupwn_111{
318
328
  right:-5px;
319
329
  }
320
- ._withLeftArrow_1z0dmr1_117{
330
+ ._withLeftArrow_18iupwn_117{
321
331
  -webkit-mask-image:linear-gradient(
322
332
  to right,
323
333
  rgba(0, 0, 0, 0) 0%,
@@ -331,7 +341,7 @@
331
341
  black 56px
332
342
  );
333
343
  }
334
- ._withRightArrow_1z0dmr1_126{
344
+ ._withRightArrow_18iupwn_126{
335
345
  -webkit-mask-image:linear-gradient(
336
346
  to left,
337
347
  rgba(0, 0, 0, 0) 0%,
@@ -345,7 +355,7 @@
345
355
  black 56px
346
356
  );
347
357
  }
348
- ._withLeftArrow_1z0dmr1_117._withRightArrow_1z0dmr1_126{
358
+ ._withLeftArrow_18iupwn_117._withRightArrow_18iupwn_126{
349
359
  -webkit-mask-image:linear-gradient(
350
360
  to right,
351
361
  rgba(0, 0, 0, 0) 0%,
@@ -365,15 +375,15 @@
365
375
  rgba(0, 0, 0, 0) 100%
366
376
  );
367
377
  }
368
- ._arrowButton_1z0dmr1_147{
378
+ ._arrowButton_18iupwn_147{
369
379
  cursor:pointer;
370
380
  }
371
- ._tabsContainer_1z0dmr1_151{
381
+ ._tabsContainer_18iupwn_151{
372
382
  position:relative;
373
383
 
374
384
  display:flex;
375
385
  }
376
- ._indicator_1z0dmr1_157{
386
+ ._indicator_18iupwn_157{
377
387
  position:absolute;
378
388
  z-index:3;
379
389
  bottom:0;
@@ -386,17 +396,17 @@
386
396
  transition:left 300ms var(--rs-transition-function, cubic-bezier(0.4, 0, 0.2, 1)) 0ms, width 300ms var(--rs-transition-function, cubic-bezier(0.4, 0, 0.2, 1)) 0ms;
387
397
  will-change:left, width;
388
398
  }
389
- ._isIndicatorHidden_1z0dmr1_172 ._indicator_1z0dmr1_157,
390
- [data-calculating-scrollable='true'] ._indicator_1z0dmr1_157{
399
+ ._isIndicatorHidden_18iupwn_172 ._indicator_18iupwn_157,
400
+ [data-calculating-scrollable='true'] ._indicator_18iupwn_157{
391
401
  display:none;
392
402
  }
393
- ._iconLeft_1z0dmr1_178{
403
+ ._iconLeft_18iupwn_178{
394
404
  --_rs-tab-list-tab-flex-direction:row;
395
405
  }
396
- ._iconRight_1z0dmr1_181{
406
+ ._iconRight_18iupwn_181{
397
407
  --_rs-tab-list-tab-flex-direction:row-reverse;
398
408
  }
399
- ._tab_1z0dmr1_151{
409
+ ._tab_18iupwn_151{
400
410
  --_rs-theme-dark:var(
401
411
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
402
412
  var(--rs-theme-dark, 0)
@@ -406,7 +416,7 @@
406
416
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
407
417
  }
408
418
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
409
- ._tab_1z0dmr1_151{
419
+ ._tab_18iupwn_151{
410
420
  --_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)));
411
421
  --_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)));
412
422
  --_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)));
@@ -415,7 +425,7 @@
415
425
  }
416
426
  }
417
427
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
418
- ._tab_1z0dmr1_151{
428
+ ._tab_18iupwn_151{
419
429
  --_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);
420
430
  --_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));
421
431
  --_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));
@@ -423,7 +433,7 @@
423
433
  --_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));
424
434
  }
425
435
  }
426
- ._tab_1z0dmr1_151 {
436
+ ._tab_18iupwn_151 {
427
437
  letter-spacing:var(
428
438
  --rs-text-base-letter-spacing,
429
439
  var(--_rs-typography-letter-spacing)
@@ -467,19 +477,19 @@
467
477
  -moz-osx-font-smoothing:inherit;
468
478
  -webkit-appearance:none;
469
479
  }
470
- ._tab_1z0dmr1_151::-moz-focus-inner{
480
+ ._tab_18iupwn_151::-moz-focus-inner{
471
481
  padding:0;
472
482
 
473
483
  border:none;
474
484
  }
475
- ._tab_1z0dmr1_151:hover,
476
- ._tab_1z0dmr1_151:active,
477
- ._tab_1z0dmr1_151:focus{
485
+ ._tab_18iupwn_151:hover,
486
+ ._tab_18iupwn_151:active,
487
+ ._tab_18iupwn_151:focus{
478
488
  outline:none;
479
489
 
480
490
  text-decoration:none;
481
491
  }
482
- ._tab_1z0dmr1_151:after{
492
+ ._tab_18iupwn_151:after{
483
493
  position:absolute;
484
494
  right:0;
485
495
  bottom:0;
@@ -492,18 +502,18 @@
492
502
 
493
503
  background-color:transparent;
494
504
  }
495
- ._tab_1z0dmr1_151:focus[data-focus-method='key']:after{
505
+ ._tab_18iupwn_151:focus[data-focus-method='key']:after{
496
506
  opacity:0;
497
507
  }
498
- ._tab_1z0dmr1_151:hover{
508
+ ._tab_18iupwn_151:hover{
499
509
  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));
500
510
  }
501
- ._tab_1z0dmr1_151:hover:after{
511
+ ._tab_18iupwn_151:hover:after{
502
512
  height:1px;
503
513
 
504
514
  background-color:rgb(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
505
515
  }
506
- ._tab_1z0dmr1_151._selected_1z0dmr1_272{
516
+ ._tab_18iupwn_151._selected_18iupwn_272{
507
517
  z-index:1;
508
518
 
509
519
  cursor:default;
@@ -512,20 +522,20 @@
512
522
 
513
523
  transition:color 200ms var(--rs-transition-function, cubic-bezier(0.4, 0, 0.2, 1)) 0ms;
514
524
  }
515
- ._tab_1z0dmr1_151._selected_1z0dmr1_272:after{
525
+ ._tab_18iupwn_151._selected_18iupwn_272:after{
516
526
  height:2px;
517
527
 
518
528
  background-color:var(--_rs-tab-list-indicator-background);
519
529
 
520
530
  transition:background-color 0ms var(--rs-transition-function, ease) 300ms, height 0ms var(--rs-transition-function, ease) 300ms;
521
531
  }
522
- ._tab_1z0dmr1_151:focus[data-focus-method='key']{
532
+ ._tab_18iupwn_151:focus[data-focus-method='key']{
523
533
  box-shadow:inset var(--_rs-color-primary-dim) 0 -4px 0 0, inset var(--_rs-color-primary-dim) 0 4px 0 0, var(--_rs-color-primary-dim) -4px 0 0 0, var(--_rs-color-primary-dim) 4px 0 0 0;
524
534
  }
525
- ._tab_1z0dmr1_151:first-child{
535
+ ._tab_18iupwn_151:first-child{
526
536
  margin-left:0;
527
537
  }
528
- ._tab_1z0dmr1_151 ._icon_1z0dmr1_178{
538
+ ._tab_18iupwn_151 ._icon_18iupwn_178{
529
539
  flex:0 0;
530
540
  flex-basis:auto;
531
541
 
@@ -533,13 +543,18 @@
533
543
  height:var(--_rs-tab-list-icon-size);
534
544
  }
535
545
 
536
- ._light_w2pg32_4{
546
+ @property --_rs-theme-dark-coefficient{
547
+ syntax:'<number>';
548
+ inherits:true;
549
+ initial-value:0;
550
+ }
551
+ ._light_1bb7ixw_4{
537
552
  --rs-theme-dark:0;
538
553
  }
539
- ._dark_w2pg32_7{
554
+ ._dark_1bb7ixw_7{
540
555
  --rs-theme-dark:1;
541
556
  }
542
- ._separator_w2pg32_11{
557
+ ._separator_1bb7ixw_11{
543
558
  --_rs-theme-dark:var(
544
559
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
545
560
  var(--rs-theme-dark, 0)
@@ -553,7 +568,7 @@
553
568
 
554
569
  width:100%;
555
570
  }
556
- ._separator_w2pg32_11:after{
571
+ ._separator_1bb7ixw_11:after{
557
572
  position:absolute;
558
573
  right:0;
559
574
  bottom:0;
package/lib/parts/separator.p.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  var styles = {
2
- "light": "_light_w2pg32_4",
3
- "dark": "_dark_w2pg32_7",
4
- "separator": "_separator_w2pg32_11"
2
+ "light": "_light_1bb7ixw_4",
3
+ "dark": "_dark_1bb7ixw_7",
4
+ "separator": "_separator_1bb7ixw_11"
5
5
  };
6
6
  export { styles as default };
package/lib/parts/tab-list.p.module.css.js CHANGED
@@ -1,28 +1,28 @@
1
1
  var styles = {
2
- "light": "_light_1z0dmr1_10",
3
- "dark": "_dark_1z0dmr1_13",
4
- "sizeM": "_sizeM_1z0dmr1_17",
5
- "sizeL": "_sizeL_1z0dmr1_20",
6
- "classic": "_classic_1z0dmr1_24",
7
- "rock": "_rock_1z0dmr1_27",
8
- "sparse": "_sparse_1z0dmr1_31",
9
- "short": "_short_1z0dmr1_35",
10
- "wrapper": "_wrapper_1z0dmr1_39",
11
- "scrollable": "_scrollable_1z0dmr1_49",
12
- "arrow": "_arrow_1z0dmr1_78",
13
- "shown": "_shown_1z0dmr1_98",
14
- "arrowLeft": "_arrowLeft_1z0dmr1_106",
15
- "arrowRight": "_arrowRight_1z0dmr1_111",
16
- "withLeftArrow": "_withLeftArrow_1z0dmr1_117",
17
- "withRightArrow": "_withRightArrow_1z0dmr1_126",
18
- "arrowButton": "_arrowButton_1z0dmr1_147",
19
- "tabsContainer": "_tabsContainer_1z0dmr1_151",
20
- "indicator": "_indicator_1z0dmr1_157",
21
- "isIndicatorHidden": "_isIndicatorHidden_1z0dmr1_172",
22
- "iconLeft": "_iconLeft_1z0dmr1_178",
23
- "iconRight": "_iconRight_1z0dmr1_181",
24
- "tab": "_tab_1z0dmr1_151",
25
- "selected": "_selected_1z0dmr1_272",
26
- "icon": "_icon_1z0dmr1_178"
2
+ "light": "_light_18iupwn_10",
3
+ "dark": "_dark_18iupwn_13",
4
+ "sizeM": "_sizeM_18iupwn_17",
5
+ "sizeL": "_sizeL_18iupwn_20",
6
+ "classic": "_classic_18iupwn_24",
7
+ "rock": "_rock_18iupwn_27",
8
+ "sparse": "_sparse_18iupwn_31",
9
+ "short": "_short_18iupwn_35",
10
+ "wrapper": "_wrapper_18iupwn_39",
11
+ "scrollable": "_scrollable_18iupwn_49",
12
+ "arrow": "_arrow_18iupwn_78",
13
+ "shown": "_shown_18iupwn_98",
14
+ "arrowLeft": "_arrowLeft_18iupwn_106",
15
+ "arrowRight": "_arrowRight_18iupwn_111",
16
+ "withLeftArrow": "_withLeftArrow_18iupwn_117",
17
+ "withRightArrow": "_withRightArrow_18iupwn_126",
18
+ "arrowButton": "_arrowButton_18iupwn_147",
19
+ "tabsContainer": "_tabsContainer_18iupwn_151",
20
+ "indicator": "_indicator_18iupwn_157",
21
+ "isIndicatorHidden": "_isIndicatorHidden_18iupwn_172",
22
+ "iconLeft": "_iconLeft_18iupwn_178",
23
+ "iconRight": "_iconRight_18iupwn_181",
24
+ "tab": "_tab_18iupwn_151",
25
+ "selected": "_selected_18iupwn_272",
26
+ "icon": "_icon_18iupwn_178"
27
27
  };
28
28
  export { styles as default };
package/lib/parts/use-indicator.d.ts CHANGED
@@ -1,13 +1,12 @@
1
1
  import { MutableRefObject } from 'react';
2
- export declare const useIndicator: ({ activeNodeRef, containerRef, triggers }: {
3
- activeNodeRef: MutableRefObject<HTMLElement>;
2
+ export declare const useIndicator: ({ activeNode, containerRef }: {
3
+ activeNode: HTMLElement;
4
4
  containerRef: MutableRefObject<HTMLDivElement>;
5
- triggers: unknown[];
6
5
  }) => {
7
6
  indicator: {
8
7
  left: number | string;
9
8
  width: number | string;
10
- transitionDuration?: string;
9
+ transitionDuration?: string | null;
11
10
  };
12
11
  isIndicatorHidden: boolean;
13
12
  };
package/lib/parts/use-indicator.js CHANGED
@@ -1,5 +1,5 @@
1
1
  "use client";
2
- import { useState, useRef, useEffect } from 'react';
2
+ import { useState, useRef, useCallback, useEffect } from 'react';
3
3
  import { useResizeObserver } from '@rescui/use-resize-observer';
4
4
 
5
5
  function calculateIndicator(activeNodeRef, parentNode) {
@@ -15,9 +15,8 @@ function calculateIndicator(activeNodeRef, parentNode) {
15
15
 
16
16
  const useIndicator = _ref => {
17
17
  let {
18
- activeNodeRef,
19
- containerRef,
20
- triggers
18
+ activeNode,
19
+ containerRef
21
20
  } = _ref;
22
21
  const [indicator, setIndicator] = useState({
23
22
  left: 0,
@@ -25,10 +24,10 @@ const useIndicator = _ref => {
25
24
  });
26
25
  const firstIndicatorUpdate = useRef(true); // Catch the resize of the container which is happening when the fonts downloads for example
27
26
 
28
- const updateIndicator = function () {
27
+ const updateIndicator = useCallback(function () {
29
28
  let isValueChanged = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
30
29
 
31
- if (!activeNodeRef.current || !containerRef.current) {
30
+ if (!activeNode || !containerRef.current) {
32
31
  return;
33
32
  }
34
33
 
@@ -41,24 +40,23 @@ const useIndicator = _ref => {
41
40
  isTransitionEnabled = isValueChanged;
42
41
  }
43
42
 
44
- setIndicator({ ...calculateIndicator(activeNodeRef.current, containerRef.current),
43
+ setIndicator({ ...calculateIndicator(activeNode, containerRef.current),
45
44
  transitionDuration: !isTransitionEnabled ? '0s' : null
46
45
  });
47
- }; // Trigger it on value change for example
46
+ }, [activeNode, containerRef]); // Trigger it on value change for example
48
47
 
49
-
50
- useEffect(() => updateIndicator(true), triggers); // Or changing container size
48
+ useEffect(() => updateIndicator(true), [updateIndicator]); // Or changing container size
51
49
 
52
50
  useResizeObserver(containerRef, () => updateIndicator(false), {
53
51
  ignoreFirstCall: true
54
52
  }); // Or changing active element size
55
53
 
56
- useResizeObserver(activeNodeRef.current, () => updateIndicator(false), {
54
+ useResizeObserver(activeNode, () => updateIndicator(false), {
57
55
  ignoreFirstCall: true
58
56
  });
59
57
  return {
60
58
  indicator,
61
- isIndicatorHidden: firstIndicatorUpdate.current
59
+ isIndicatorHidden: typeof indicator.transitionDuration === 'undefined'
62
60
  };
63
61
  };
64
62
 
package/lib/parts/use-roving-tab-index.js CHANGED
@@ -37,11 +37,17 @@ const useRovingTabIndex = _ref2 => {
37
37
  tabRefs
38
38
  } = _ref2;
39
39
  const [currentTabStopId, setCurrentTabStopId] = React.useState(selectedId ?? 0);
40
- React.useLayoutEffect(() => {
40
+ const [previousSelectedId, setPreviousSelectedId] = React.useState(selectedId);
41
+
42
+ if (!Object.is(selectedId, previousSelectedId)) {
43
+ setPreviousSelectedId(selectedId);
44
+
41
45
  if (typeof selectedId === 'number') {
42
46
  setCurrentTabStopId(selectedId);
43
47
  }
44
- }, [selectedId]);
48
+ }
49
+
50
+ const currentTabsRefs = tabRefs?.current;
45
51
  const onTabKeyDown = React.useCallback((e, itemId) => {
46
52
  var _context;
47
53
 
@@ -49,7 +55,7 @@ const useRovingTabIndex = _ref2 => {
49
55
  return;
50
56
  }
51
57
 
52
- const itemsCount = tabRefs?.current.size ?? 0;
58
+ const itemsCount = currentTabsRefs.size ?? 0;
53
59
  const nextItemId = getNextItemId({
54
60
  currentItemId: itemId,
55
61
  itemsCount,
@@ -57,8 +63,8 @@ const useRovingTabIndex = _ref2 => {
57
63
  });
58
64
  e.preventDefault();
59
65
  setCurrentTabStopId(nextItemId);
60
- tabRefs?.current.get(nextItemId)?.focus();
61
- }, [tabRefs]);
66
+ currentTabsRefs.get(nextItemId)?.focus();
67
+ }, [currentTabsRefs]);
62
68
  return {
63
69
  currentTabStopId,
64
70
  onTabKeyDown
package/lib/parts/use-scrollable-list.d.ts CHANGED
@@ -1,15 +1,15 @@
1
1
  import React, { MutableRefObject } from 'react';
2
2
  export type ScrollableListCompareValueType<T> = (activeValue: T, itemValue: T) => boolean;
3
- export declare const useScrollableList: <T>({ children, compareValues, value, CompareItem, activeNodeRef, scrollableRef, containerRef }: {
3
+ export declare const useScrollableList: <T>({ children, compareValues, value, CompareItem, scrollableRef, containerRef }: {
4
4
  children: React.ReactNode;
5
5
  compareValues: ScrollableListCompareValueType<T>;
6
6
  value: T;
7
7
  CompareItem: React.ElementType;
8
- activeNodeRef: MutableRefObject<HTMLElement>;
9
8
  scrollableRef: MutableRefObject<HTMLDivElement>;
10
9
  containerRef: MutableRefObject<HTMLDivElement>;
11
10
  }) => {
12
11
  selectedId: number;
12
+ activeNode: HTMLElement;
13
13
  prepareDirectionScroller: (direction: "left" | "right") => () => void;
14
14
  tabRefs: React.RefObject<Map<number, HTMLElement>>;
15
15
  childrenWithValues: (string | number | bigint | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>>)[];
package/lib/parts/use-scrollable-list.js CHANGED
@@ -115,7 +115,6 @@ const useScrollableList = _ref2 => {
115
115
  compareValues,
116
116
  value,
117
117
  CompareItem,
118
- activeNodeRef,
119
118
  scrollableRef,
120
119
  containerRef
121
120
  } = _ref2;
@@ -123,6 +122,14 @@ const useScrollableList = _ref2 => {
123
122
  // so on window resize there wouldn't scroll to it
124
123
 
125
124
  const [targetedEl, setTargetedEl] = useState(null);
125
+ const [activeNode, setActiveNode] = useState(null);
126
+ const [prevActiveNode, setPrevActiveNode] = useState(null);
127
+
128
+ if (activeNode !== prevActiveNode) {
129
+ setPrevActiveNode(activeNode);
130
+ setTargetedEl(activeNode);
131
+ }
132
+
126
133
  const [{
127
134
  showLeftArrow,
128
135
  showRightArrow
@@ -141,12 +148,19 @@ const useScrollableList = _ref2 => {
141
148
  }
142
149
 
143
150
  if (isSelectedItem) {
144
- activeNodeRef.current = node;
151
+ setActiveNode(node);
145
152
  }
146
153
  }, []);
147
154
  const [childrenWithValues, selectedId] = useMemo(() => {
148
155
  let counter = 0;
149
156
  let currentSelectedItemId = null;
157
+ /*
158
+ * deepMap invokes its callback synchronously. The callback ref is created
159
+ * during render, but accesses tabRefs.current only when React invokes it
160
+ * during commit.
161
+ */
162
+ // eslint-disable-next-line react-hooks/refs
163
+
150
164
  const items = deepMap(children, child => {
151
165
  if (child.type === CompareItem) {
152
166
  const {
@@ -158,6 +172,8 @@ const useScrollableList = _ref2 => {
158
172
  const isSelectedItem = hasAlreadySelectedItem && compareValues(value, childValue);
159
173
 
160
174
  if (isSelectedItem) {
175
+ // same explanation as above
176
+ // eslint-disable-next-line react-hooks/immutability
161
177
  currentSelectedItemId = counter;
162
178
  }
163
179
 
@@ -193,30 +209,21 @@ const useScrollableList = _ref2 => {
193
209
  });
194
210
  return [React.Children.toArray(items), currentSelectedItemId];
195
211
  }, [children, value, compareValues, onFocus, CompareItem, createTabRef]);
196
-
197
- const prepareDirectionScroller = direction => () => {
212
+ const prepareDirectionScroller = useCallback(direction => () => {
198
213
  const {
199
214
  current
200
215
  } = scrollableRef;
201
216
  const left = Math.max(current.clientWidth - 2 * ARROW_AREA_WIDTH_IN_PX, 30) * (direction === 'right' ? 1 : -1);
202
217
  setTargetedEl(null);
203
218
  scrollElementBy(current, left);
204
- };
205
-
206
- useEffect(() => {
207
- if (!activeNodeRef.current) {
208
- return;
209
- }
210
-
211
- setTargetedEl(activeNodeRef.current);
212
- }, [value, childrenWithValues]);
219
+ }, [scrollableRef]);
213
220
  const setArrowsVisibility = useCallback(() => {
214
221
  if (!scrollableRef.current) {
215
222
  return;
216
223
  }
217
224
 
218
225
  setShowArrows(calculateArrowsVisibility(scrollableRef.current));
219
- }, []); // update arrows while smooth scrolling
226
+ }, [scrollableRef]); // update arrows while smooth scrolling
220
227
 
221
228
  useEffect(() => {
222
229
  const scrollContainer = scrollableRef.current;
@@ -229,9 +236,9 @@ const useScrollableList = _ref2 => {
229
236
  passive: true
230
237
  });
231
238
  return () => scrollContainer.removeEventListener('scroll', setArrowsVisibility);
232
- }, [setArrowsVisibility]); // scrollIntoView active element when it changes or the component resizes
239
+ }, [scrollableRef, setArrowsVisibility]); // scrollIntoView active element when it changes or the component resizes
233
240
 
234
- const updateScrollState = () => {
241
+ const updateScrollState = useCallback(() => {
235
242
  const scrollableEl = scrollableRef.current;
236
243
 
237
244
  if (!scrollableEl) {
@@ -243,8 +250,7 @@ const useScrollableList = _ref2 => {
243
250
  }
244
251
 
245
252
  setArrowsVisibility();
246
- }; // look at the containers resizes
247
-
253
+ }, [scrollableRef, targetedEl, setArrowsVisibility]); // look at the containers resizes
248
254
 
249
255
  useResizeObserver(containerRef, updateScrollState, {
250
256
  ignoreFirstCall: true
@@ -252,9 +258,10 @@ const useScrollableList = _ref2 => {
252
258
  useResizeObserver(scrollableRef, updateScrollState, {
253
259
  ignoreFirstCall: true
254
260
  });
255
- useEffect(updateScrollState, [targetedEl, setArrowsVisibility]);
261
+ useEffect(updateScrollState, [updateScrollState]);
256
262
  return {
257
263
  selectedId,
264
+ activeNode,
258
265
  prepareDirectionScroller,
259
266
  tabRefs,
260
267
  childrenWithValues,
package/lib/public-api.p.css CHANGED
@@ -1,3 +1,8 @@
1
+ @property --_rs-theme-dark-coefficient{
2
+ syntax:'<number>';
3
+ inherits:true;
4
+ initial-value:0;
5
+ }
1
6
  @define-mixin rs-tab-list-size-m{
2
7
  &:not(html){
3
8
  --_rs-tab-list-tab-vertical-padding:8px;
package/lib/public-api.pcss CHANGED
@@ -1,3 +1,8 @@
1
+ @property --_rs-theme-dark-coefficient{
2
+ syntax:'<number>';
3
+ inherits:true;
4
+ initial-value:0;
5
+ }
1
6
  @define-mixin rs-tab-list-size-m{
2
7
  &:not(html){
3
8
  --_rs-tab-list-tab-vertical-padding:8px;
package/lib/tab-list.js CHANGED
@@ -35,12 +35,12 @@ const TabList = _ref => {
35
35
  theme: themeFromProps,
36
36
  ...restProps
37
37
  } = _ref;
38
- const activeNodeRef = useRef(null);
39
38
  const scrollableRef = useRef(null);
40
39
  const containerRef = useRef(null);
41
40
  const theme = useThemeWithUndefined(themeFromProps);
42
41
  const {
43
42
  selectedId,
43
+ activeNode,
44
44
  prepareDirectionScroller,
45
45
  tabRefs,
46
46
  childrenWithValues,
@@ -51,7 +51,6 @@ const TabList = _ref => {
51
51
  compareValues,
52
52
  value,
53
53
  CompareItem: Tab,
54
- activeNodeRef,
55
54
  scrollableRef,
56
55
  containerRef
57
56
  });
@@ -59,9 +58,8 @@ const TabList = _ref => {
59
58
  indicator,
60
59
  isIndicatorHidden
61
60
  } = useIndicator({
62
- activeNodeRef,
63
- containerRef,
64
- triggers: [value]
61
+ activeNode,
62
+ containerRef
65
63
  });
66
64
  const rovingTabIndex = useRovingTabIndex({
67
65
  selectedId,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/tab-list",
3
- "version": "0.18.3",
3
+ "version": "0.18.5-RUI-308-Fix-select-issues-405b9fa40.12+405b9fa40",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -17,8 +17,8 @@
17
17
  },
18
18
  "dependencies": {
19
19
  "@babel/runtime-corejs3": "^7.26.0",
20
- "@rescui/button": "^0.24.5",
21
- "@rescui/use-resize-observer": "^0.3.3",
20
+ "@rescui/button": "0.24.7-RUI-308-Fix-select-issues-405b9fa40.12+405b9fa40",
21
+ "@rescui/use-resize-observer": "0.3.5-RUI-308-Fix-select-issues-405b9fa40.12+405b9fa40",
22
22
  "classnames": "^2.2.6"
23
23
  },
24
24
  "peerDependencies": {
@@ -27,16 +27,16 @@
27
27
  "react": ">=16.8.0 <20"
28
28
  },
29
29
  "devDependencies": {
30
- "@rescui/colors": "^0.3.2",
31
- "@rescui/postcss-preset-library": "^0.2.2",
32
- "@rescui/scripts": "^0.5.2",
33
- "@rescui/typography": "^0.27.3",
34
- "@rescui/visual-regression": "^0.1.4"
30
+ "@rescui/colors": "0.3.4-RUI-308-Fix-select-issues-405b9fa40.12+405b9fa40",
31
+ "@rescui/postcss-preset-library": "0.2.3",
32
+ "@rescui/scripts": "0.5.2",
33
+ "@rescui/typography": "0.27.5-RUI-308-Fix-select-issues-405b9fa40.12+405b9fa40",
34
+ "@rescui/visual-regression": "0.1.4"
35
35
  },
36
36
  "scripts": {
37
37
  "build": "rescui-scripts build && yarn run build-pcss-api",
38
38
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
39
39
  },
40
40
  "nx": {},
41
- "gitHead": "7614b4519a4716fbf1151d94c97fda48eab60800"
41
+ "gitHead": "405b9fa40886b0ab6709c9185e8214599d2d792e"
42
42
  }