@rescui/tab-list 0.13.12 → 0.14.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.
Files changed (9) hide show
  1. package/lib/_virtual/index.css.js +7 -7
  2. package/lib/index.css +72 -68
  3. package/lib/parts/separator.p.module.css.js +3 -3
  4. package/lib/parts/tab-list.p.module.css.js +16 -15
  5. package/lib/parts/use-indicator.d.ts +6 -3
  6. package/lib/parts/use-indicator.js +28 -15
  7. package/lib/parts/with-scroll-arrows.p.module.css.js +11 -11
  8. package/lib/tab-list.js +6 -3
  9. package/package.json +2 -2
package/lib/_virtual/index.css.js CHANGED
@@ -1,10 +1,10 @@
1
1
  var styles = {
2
- "icon": "_icon_4o5r48_4",
3
- "sizeXS": "_sizeXS_4o5r48_14",
4
- "sizeS": "_sizeS_4o5r48_18",
5
- "sizeM": "_sizeM_4o5r48_22",
6
- "sizeL": "_sizeL_4o5r48_26",
7
- "light": "_light_4o5r48_30",
8
- "dark": "_dark_4o5r48_34"
2
+ "icon": "_icon_19w4y8p_4",
3
+ "sizeXS": "_sizeXS_19w4y8p_14",
4
+ "sizeS": "_sizeS_19w4y8p_18",
5
+ "sizeM": "_sizeM_19w4y8p_22",
6
+ "sizeL": "_sizeL_19w4y8p_26",
7
+ "light": "_light_19w4y8p_30",
8
+ "dark": "_dark_19w4y8p_34"
9
9
  };
10
10
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- ._icon_4o5r48_4{
1
+ ._icon_19w4y8p_4{
2
2
  --_rs-theme-dark:var(
3
3
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
4
4
  var(--rs-theme-dark, 0)
@@ -8,7 +8,7 @@
8
8
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
9
9
  }
10
10
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
11
- ._icon_4o5r48_4{
11
+ ._icon_19w4y8p_4{
12
12
  --_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
13
  --_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
14
  --_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 +17,7 @@
17
17
  }
18
18
  }
19
19
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
20
- ._icon_4o5r48_4{
20
+ ._icon_19w4y8p_4{
21
21
  --_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
22
  --_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
23
  --_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 +25,30 @@
25
25
  --_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
26
  }
27
27
  }
28
- ._icon_4o5r48_4{
28
+ ._icon_19w4y8p_4{
29
29
 
30
30
  fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
31
31
 
32
32
  width:auto;
33
33
  height:var(--_rs-icons-height);
34
34
  }
35
- ._sizeXS_4o5r48_14{
35
+ ._sizeXS_19w4y8p_14{
36
36
  --_rs-icons-height:16px;
37
37
  }
38
- ._sizeS_4o5r48_18{
38
+ ._sizeS_19w4y8p_18{
39
39
  --_rs-icons-height:20px;
40
40
  }
41
- ._sizeM_4o5r48_22{
41
+ ._sizeM_19w4y8p_22{
42
42
  --_rs-icons-height:24px;
43
43
  }
44
- ._sizeL_4o5r48_26{
44
+ ._sizeL_19w4y8p_26{
45
45
  --_rs-icons-height:28px;
46
46
  }
47
- ._light_4o5r48_30{
47
+ ._light_19w4y8p_30{
48
48
  --rs-theme-dark:0;
49
49
  --_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
50
  }
51
- ._dark_4o5r48_34{
51
+ ._dark_19w4y8p_34{
52
52
  --rs-theme-dark:1;
53
53
  --_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
54
  }
@@ -60,18 +60,18 @@
60
60
  transform:rotate(360deg);
61
61
  }
62
62
  }
63
- ._light_gayz_7{
63
+ ._light_876zhr_7{
64
64
  --rs-theme-dark:0;
65
65
  }
66
- ._dark_gayz_10{
66
+ ._dark_876zhr_10{
67
67
  --rs-theme-dark:1;
68
68
  }
69
- ._sizeM_gayz_14{
69
+ ._sizeM_876zhr_14{
70
70
  --_rs-tab-list-tab-vertical-padding:8px;
71
71
  --_rs-tab-list-icon-size:24px;
72
72
  --_rs-tab-list-icon-offset:4px;
73
73
  }
74
- ._sizeM_gayz_14 [data-rs-internal='tab-list__tab']{
74
+ ._sizeM_876zhr_14 [data-rs-internal='tab-list__tab']{
75
75
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
76
76
  --_rs-typography-text-transform:initial;
77
77
  --_rs-typography-font-variant-numeric:initial;
@@ -106,16 +106,16 @@
106
106
  --_rs-typography-link-border-bottom-width-from-text:1px;
107
107
  }
108
108
  @media screen and (max-width: 640px){
109
- ._sizeM_gayz_14 [data-rs-internal='tab-list__tab']{
109
+ ._sizeM_876zhr_14 [data-rs-internal='tab-list__tab']{
110
110
  --_rs-typography-list-li-margin-top-from-text:12px;
111
111
  }
112
112
  }
113
- ._sizeL_gayz_17{
113
+ ._sizeL_876zhr_17{
114
114
  --_rs-tab-list-tab-vertical-padding:12px;
115
115
  --_rs-tab-list-icon-size:28px;
116
116
  --_rs-tab-list-icon-offset:8px;
117
117
  }
118
- ._sizeL_gayz_17 [data-rs-internal='tab-list__tab']{
118
+ ._sizeL_876zhr_17 [data-rs-internal='tab-list__tab']{
119
119
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
120
120
  --_rs-typography-text-transform:initial;
121
121
  --_rs-typography-font-variant-numeric:initial;
@@ -150,28 +150,28 @@
150
150
  --_rs-typography-link-border-bottom-width-from-text:1px;
151
151
  }
152
152
  @media screen and (max-width: 640px){
153
- ._sizeL_gayz_17 [data-rs-internal='tab-list__tab']{
153
+ ._sizeL_876zhr_17 [data-rs-internal='tab-list__tab']{
154
154
  --_rs-typography-list-li-margin-top-from-text:16px;
155
155
  }
156
156
  }
157
- ._classic_gayz_21{
157
+ ._classic_876zhr_21{
158
158
  --_rs-tab-list-indicator-background:var(--_rs-color-primary);
159
159
  }
160
- ._rock_gayz_24{
160
+ ._rock_876zhr_24{
161
161
  --_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));
162
162
  }
163
- ._sparse_gayz_28{
163
+ ._sparse_876zhr_28{
164
164
  --_rs-tab-list-tab-margin-left-or-initial:32px;
165
165
  }
166
166
  @media screen and (max-width: 640px){
167
- ._sparse_gayz_28{
167
+ ._sparse_876zhr_28{
168
168
  --_rs-tab-list-tab-margin-left-or-initial:24px;
169
169
  }
170
170
  }
171
- ._short_gayz_32{
171
+ ._short_876zhr_32{
172
172
  --_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));
173
173
  }
174
- ._tabsContainer_gayz_36{
174
+ ._tabsContainer_876zhr_36{
175
175
  --_rs-theme-dark:var(
176
176
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
177
177
  var(--rs-theme-dark, 0)
@@ -181,7 +181,7 @@
181
181
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
182
182
  }
183
183
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
184
- ._tabsContainer_gayz_36{
184
+ ._tabsContainer_876zhr_36{
185
185
  --_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)));
186
186
  --_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)));
187
187
  --_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)));
@@ -190,7 +190,7 @@
190
190
  }
191
191
  }
192
192
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
193
- ._tabsContainer_gayz_36{
193
+ ._tabsContainer_876zhr_36{
194
194
  --_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);
195
195
  --_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));
196
196
  --_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));
@@ -198,15 +198,15 @@
198
198
  --_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));
199
199
  }
200
200
  }
201
- ._tabsContainer_gayz_36 {
201
+ ._tabsContainer_876zhr_36 {
202
202
  --_rs-tab-list-tab-base-margin-left:24px;
203
203
  }
204
204
  @media screen and (max-width: 640px){
205
- ._tabsContainer_gayz_36{
205
+ ._tabsContainer_876zhr_36{
206
206
  --_rs-tab-list-tab-base-margin-left:16px;
207
207
  }
208
208
  }
209
- ._tabsContainer_gayz_36 {
209
+ ._tabsContainer_876zhr_36 {
210
210
  --_rs-tab-list-tab-margin-left:var(
211
211
  --_rs-tab-list-tab-margin-left-or-initial,
212
212
  var(--_rs-tab-list-tab-base-margin-left)
@@ -216,7 +216,7 @@
216
216
 
217
217
  display:flex;
218
218
  }
219
- ._indicator_gayz_46{
219
+ ._indicator_876zhr_46{
220
220
  position:absolute;
221
221
  z-index:3;
222
222
  bottom:0;
@@ -229,13 +229,16 @@
229
229
  transition:left 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, width 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
230
230
  will-change:left, width;
231
231
  }
232
- ._iconLeft_gayz_61{
232
+ ._isIndicatorHidden_876zhr_60 ._indicator_876zhr_46{
233
+ display:none;
234
+ }
235
+ ._iconLeft_876zhr_65{
233
236
  --_rs-tab-list-tab-flex-direction:row;
234
237
  }
235
- ._iconRight_gayz_64{
238
+ ._iconRight_876zhr_68{
236
239
  --_rs-tab-list-tab-flex-direction:row-reverse;
237
240
  }
238
- ._tab_gayz_36{
241
+ ._tab_876zhr_36{
239
242
  --_rs-theme-dark:var(
240
243
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
241
244
  var(--rs-theme-dark, 0)
@@ -245,7 +248,7 @@
245
248
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
246
249
  }
247
250
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
248
- ._tab_gayz_36{
251
+ ._tab_876zhr_36{
249
252
  --_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)));
250
253
  --_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)));
251
254
  --_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)));
@@ -254,7 +257,7 @@
254
257
  }
255
258
  }
256
259
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
257
- ._tab_gayz_36{
260
+ ._tab_876zhr_36{
258
261
  --_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);
259
262
  --_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));
260
263
  --_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));
@@ -262,7 +265,7 @@
262
265
  --_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));
263
266
  }
264
267
  }
265
- ._tab_gayz_36 {
268
+ ._tab_876zhr_36 {
266
269
  letter-spacing:var(
267
270
  --rs-text-base-letter-spacing,
268
271
  var(--_rs-typography-letter-spacing)
@@ -306,22 +309,23 @@
306
309
  -moz-osx-font-smoothing:inherit;
307
310
  -webkit-appearance:none;
308
311
  }
309
- ._tab_gayz_36::-moz-focus-inner{
312
+ ._tab_876zhr_36::-moz-focus-inner{
310
313
  padding:0;
311
314
 
312
315
  border:none;
313
316
  }
314
- ._tab_gayz_36:hover,
315
- ._tab_gayz_36:active,
316
- ._tab_gayz_36:focus{
317
+ ._tab_876zhr_36:hover,
318
+ ._tab_876zhr_36:active,
319
+ ._tab_876zhr_36:focus{
317
320
  outline:none;
318
321
 
319
322
  text-decoration:none;
320
323
  }
321
- ._tab_gayz_36:after{
324
+ ._tab_876zhr_36:after{
322
325
  position:absolute;
323
326
  bottom:0;
324
327
  left:0;
328
+ right:0;
325
329
 
326
330
  width:100%;
327
331
  height:0;
@@ -330,18 +334,18 @@
330
334
 
331
335
  background-color:transparent;
332
336
  }
333
- ._tab_gayz_36:focus[data-focus-method='key']:after{
337
+ ._tab_876zhr_36:focus[data-focus-method='key']:after{
334
338
  opacity:0;
335
339
  }
336
- ._tab_gayz_36:hover{
340
+ ._tab_876zhr_36:hover{
337
341
  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));
338
342
  }
339
- ._tab_gayz_36:hover:after{
343
+ ._tab_876zhr_36:hover:after{
340
344
  height:1px;
341
345
 
342
346
  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));
343
347
  }
344
- ._tab_gayz_36._selected_gayz_154{
348
+ ._tab_876zhr_36._selected_876zhr_159{
345
349
  z-index:1;
346
350
 
347
351
  cursor:default;
@@ -350,20 +354,20 @@
350
354
 
351
355
  transition:color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
352
356
  }
353
- ._tab_gayz_36._selected_gayz_154:after{
357
+ ._tab_876zhr_36._selected_876zhr_159:after{
354
358
  height:2px;
355
359
 
356
360
  background-color:var(--_rs-tab-list-indicator-background);
357
361
 
358
362
  transition:background-color 0ms ease 300ms, height 0ms ease 300ms;
359
363
  }
360
- ._tab_gayz_36:focus[data-focus-method='key']{
364
+ ._tab_876zhr_36:focus[data-focus-method='key']{
361
365
  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;
362
366
  }
363
- ._tab_gayz_36:first-child{
367
+ ._tab_876zhr_36:first-child{
364
368
  margin-left:0;
365
369
  }
366
- ._tab_gayz_36 ._icon_gayz_61{
370
+ ._tab_876zhr_36 ._icon_876zhr_65{
367
371
  flex:0 0;
368
372
  flex-basis:auto;
369
373
 
@@ -371,13 +375,13 @@
371
375
  height:var(--_rs-tab-list-icon-size);
372
376
  }
373
377
 
374
- ._light_hz4pwo_9{
378
+ ._light_130p00p_9{
375
379
  --rs-theme-dark:0;
376
380
  }
377
- ._dark_hz4pwo_12{
381
+ ._dark_130p00p_12{
378
382
  --rs-theme-dark:1;
379
383
  }
380
- ._wrapper_hz4pwo_16{
384
+ ._wrapper_130p00p_16{
381
385
  --_rs-theme-dark:var(
382
386
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
383
387
  var(--rs-theme-dark, 0)
@@ -389,14 +393,14 @@
389
393
 
390
394
  display:flex;
391
395
  }
392
- ._scrollable_hz4pwo_23{
396
+ ._scrollable_130p00p_23{
393
397
  display:flex;
394
398
  overflow-x:scroll;
395
399
 
396
400
  margin:-4px;
397
401
  padding:4px;
398
402
  }
399
- ._scrollable_hz4pwo_23::after{
403
+ ._scrollable_130p00p_23::after{
400
404
  display:block;
401
405
 
402
406
  height:100%;
@@ -405,15 +409,15 @@
405
409
 
406
410
  content:'';
407
411
  }
408
- ._scrollable_hz4pwo_23 {
412
+ ._scrollable_130p00p_23 {
409
413
 
410
414
  -ms-overflow-style:none;
411
415
  scrollbar-width:none;
412
416
  }
413
- ._scrollable_hz4pwo_23::-webkit-scrollbar{
417
+ ._scrollable_130p00p_23::-webkit-scrollbar{
414
418
  display:none;
415
419
  }
416
- ._arrow_hz4pwo_52{
420
+ ._arrow_130p00p_52{
417
421
  position:absolute;
418
422
  z-index:2;
419
423
  top:50%;
@@ -433,20 +437,20 @@
433
437
  transition:opacity 0.15s ease-out;
434
438
  transform:translateY(-50%);
435
439
  }
436
- ._arrow_hz4pwo_52._shown_hz4pwo_72{
440
+ ._arrow_130p00p_52._shown_130p00p_72{
437
441
  opacity:1;
438
442
 
439
443
  pointer-events:auto;
440
444
 
441
445
  transition:opacity 0.15s ease-in;
442
446
  }
443
- ._arrow_hz4pwo_52._arrowLeft_hz4pwo_80{
447
+ ._arrow_130p00p_52._arrowLeft_130p00p_80{
444
448
  left:-5px;
445
449
  }
446
- ._arrow_hz4pwo_52._arrowRight_hz4pwo_85{
450
+ ._arrow_130p00p_52._arrowRight_130p00p_85{
447
451
  right:-5px;
448
452
  }
449
- ._withLeftArrow_hz4pwo_91{
453
+ ._withLeftArrow_130p00p_91{
450
454
  -webkit-mask-image:linear-gradient(
451
455
  to right,
452
456
  rgba(0, 0, 0, 0) 0%,
@@ -460,7 +464,7 @@
460
464
  black 56px
461
465
  );
462
466
  }
463
- ._withRightArrow_hz4pwo_100{
467
+ ._withRightArrow_130p00p_100{
464
468
  -webkit-mask-image:linear-gradient(
465
469
  to left,
466
470
  rgba(0, 0, 0, 0) 0%,
@@ -474,7 +478,7 @@
474
478
  black 56px
475
479
  );
476
480
  }
477
- ._withLeftArrow_hz4pwo_91._withRightArrow_hz4pwo_100{
481
+ ._withLeftArrow_130p00p_91._withRightArrow_130p00p_100{
478
482
  -webkit-mask-image:linear-gradient(
479
483
  to right,
480
484
  rgba(0, 0, 0, 0) 0%,
@@ -494,17 +498,17 @@
494
498
  rgba(0, 0, 0, 0) 100%
495
499
  );
496
500
  }
497
- ._arrowButton_hz4pwo_121{
501
+ ._arrowButton_130p00p_121{
498
502
  cursor:pointer;
499
503
  }
500
504
 
501
- ._light_1qlix8w_4{
505
+ ._light_y2lmpt_4{
502
506
  --rs-theme-dark:0;
503
507
  }
504
- ._dark_1qlix8w_7{
508
+ ._dark_y2lmpt_7{
505
509
  --rs-theme-dark:1;
506
510
  }
507
- ._separator_1qlix8w_11{
511
+ ._separator_y2lmpt_11{
508
512
  --_rs-theme-dark:var(
509
513
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
510
514
  var(--rs-theme-dark, 0)
@@ -518,7 +522,7 @@
518
522
 
519
523
  width:100%;
520
524
  }
521
- ._separator_1qlix8w_11:after{
525
+ ._separator_y2lmpt_11:after{
522
526
  position:absolute;
523
527
  right:0;
524
528
  bottom:0;
package/lib/parts/separator.p.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  var styles = {
2
- "light": "_light_1qlix8w_4",
3
- "dark": "_dark_1qlix8w_7",
4
- "separator": "_separator_1qlix8w_11"
2
+ "light": "_light_y2lmpt_4",
3
+ "dark": "_dark_y2lmpt_7",
4
+ "separator": "_separator_y2lmpt_11"
5
5
  };
6
6
  export { styles as default };
package/lib/parts/tab-list.p.module.css.js CHANGED
@@ -1,18 +1,19 @@
1
1
  var styles = {
2
- "light": "_light_gayz_7",
3
- "dark": "_dark_gayz_10",
4
- "sizeM": "_sizeM_gayz_14",
5
- "sizeL": "_sizeL_gayz_17",
6
- "classic": "_classic_gayz_21",
7
- "rock": "_rock_gayz_24",
8
- "sparse": "_sparse_gayz_28",
9
- "short": "_short_gayz_32",
10
- "tabsContainer": "_tabsContainer_gayz_36",
11
- "indicator": "_indicator_gayz_46",
12
- "iconLeft": "_iconLeft_gayz_61",
13
- "iconRight": "_iconRight_gayz_64",
14
- "tab": "_tab_gayz_36",
15
- "selected": "_selected_gayz_154",
16
- "icon": "_icon_gayz_61"
2
+ "light": "_light_876zhr_7",
3
+ "dark": "_dark_876zhr_10",
4
+ "sizeM": "_sizeM_876zhr_14",
5
+ "sizeL": "_sizeL_876zhr_17",
6
+ "classic": "_classic_876zhr_21",
7
+ "rock": "_rock_876zhr_24",
8
+ "sparse": "_sparse_876zhr_28",
9
+ "short": "_short_876zhr_32",
10
+ "tabsContainer": "_tabsContainer_876zhr_36",
11
+ "indicator": "_indicator_876zhr_46",
12
+ "isIndicatorHidden": "_isIndicatorHidden_876zhr_60",
13
+ "iconLeft": "_iconLeft_876zhr_65",
14
+ "iconRight": "_iconRight_876zhr_68",
15
+ "tab": "_tab_876zhr_36",
16
+ "selected": "_selected_876zhr_159",
17
+ "icon": "_icon_876zhr_65"
17
18
  };
18
19
  export { styles as default };
package/lib/parts/use-indicator.d.ts CHANGED
@@ -4,7 +4,10 @@ export declare const useIndicator: ({ activeNodeRef, containerRef, triggers }: {
4
4
  containerRef: MutableRefObject<HTMLDivElement>;
5
5
  triggers: unknown[];
6
6
  }) => {
7
- left: number | string;
8
- width: number | string;
9
- transitionDuration?: string;
7
+ indicator: {
8
+ left: number | string;
9
+ width: number | string;
10
+ transitionDuration?: string;
11
+ };
12
+ isIndicatorHidden: boolean;
10
13
  };
package/lib/parts/use-indicator.js CHANGED
@@ -1,4 +1,4 @@
1
- import { useState, useEffect } from 'react';
1
+ import { useState, useRef, useEffect } from 'react';
2
2
  import { useResizeObserver } from '@rescui/use-resize-observer';
3
3
 
4
4
  function calculateIndicator(activeNodeRef, parentNode) {
@@ -22,30 +22,43 @@ const useIndicator = _ref => {
22
22
  left: 0,
23
23
  width: 0
24
24
  });
25
- const [isSSR, setIsSSR] = useState(true); // Catch the resize of the container which is happening when the fonts downloads for example
25
+ const firstIndicatorUpdate = useRef(true); // Catch the resize of the container which is happening when the fonts downloads for example
26
+
27
+ const updateIndicator = function () {
28
+ let isValueChanged = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
26
29
 
27
- const onResize = () => {
28
30
  if (!activeNodeRef.current || !containerRef.current) {
29
31
  return;
30
32
  }
31
33
 
32
- if (isSSR) {
33
- setIsSSR(false);
34
- setIndicator({ ...calculateIndicator(activeNodeRef.current, containerRef.current),
35
- transitionDuration: '0ms'
36
- });
37
- return;
34
+ let isTransitionEnabled;
35
+
36
+ if (firstIndicatorUpdate.current) {
37
+ firstIndicatorUpdate.current = false;
38
+ isTransitionEnabled = false;
39
+ } else {
40
+ isTransitionEnabled = isValueChanged;
38
41
  }
39
42
 
40
- setIndicator(calculateIndicator(activeNodeRef.current, containerRef.current));
41
- };
43
+ setIndicator({ ...calculateIndicator(activeNodeRef.current, containerRef.current),
44
+ transitionDuration: !isTransitionEnabled ? '0s' : null
45
+ });
46
+ }; // Trigger it on value change for example
47
+
42
48
 
43
- useResizeObserver(containerRef, onResize, {
49
+ useEffect(() => updateIndicator(true), triggers); // Or changing container size
50
+
51
+ useResizeObserver(containerRef, () => updateIndicator(false), {
44
52
  ignoreFirstCall: true
45
- }); // Also trigger it on value change for example
53
+ }); // Or changing active element size
46
54
 
47
- useEffect(onResize, triggers);
48
- return indicator;
55
+ useResizeObserver(activeNodeRef.current, () => updateIndicator(false), {
56
+ ignoreFirstCall: true
57
+ });
58
+ return {
59
+ indicator,
60
+ isIndicatorHidden: firstIndicatorUpdate.current
61
+ };
49
62
  };
50
63
 
51
64
  export { useIndicator };
package/lib/parts/with-scroll-arrows.p.module.css.js CHANGED
@@ -1,14 +1,14 @@
1
1
  var styles = {
2
- "light": "_light_hz4pwo_9",
3
- "dark": "_dark_hz4pwo_12",
4
- "wrapper": "_wrapper_hz4pwo_16",
5
- "scrollable": "_scrollable_hz4pwo_23",
6
- "arrow": "_arrow_hz4pwo_52",
7
- "shown": "_shown_hz4pwo_72",
8
- "arrowLeft": "_arrowLeft_hz4pwo_80",
9
- "arrowRight": "_arrowRight_hz4pwo_85",
10
- "withLeftArrow": "_withLeftArrow_hz4pwo_91",
11
- "withRightArrow": "_withRightArrow_hz4pwo_100",
12
- "arrowButton": "_arrowButton_hz4pwo_121"
2
+ "light": "_light_130p00p_9",
3
+ "dark": "_dark_130p00p_12",
4
+ "wrapper": "_wrapper_130p00p_16",
5
+ "scrollable": "_scrollable_130p00p_23",
6
+ "arrow": "_arrow_130p00p_52",
7
+ "shown": "_shown_130p00p_72",
8
+ "arrowLeft": "_arrowLeft_130p00p_80",
9
+ "arrowRight": "_arrowRight_130p00p_85",
10
+ "withLeftArrow": "_withLeftArrow_130p00p_91",
11
+ "withRightArrow": "_withRightArrow_130p00p_100",
12
+ "arrowButton": "_arrowButton_130p00p_121"
13
13
  };
14
14
  export { styles as default };
package/lib/tab-list.js CHANGED
@@ -27,10 +27,13 @@ const InnerTabList = _ref => {
27
27
  containerRef,
28
28
  ['data-e2e']: e2eId
29
29
  } = _ref;
30
- const indicator = useIndicator({
30
+ const {
31
+ indicator,
32
+ isIndicatorHidden
33
+ } = useIndicator({
31
34
  activeNodeRef,
32
35
  containerRef,
33
- triggers: [value, children]
36
+ triggers: [value]
34
37
  });
35
38
  return /*#__PURE__*/React.createElement(TabListContext.Provider, {
36
39
  value: {
@@ -38,7 +41,7 @@ const InnerTabList = _ref => {
38
41
  selectedId
39
42
  }
40
43
  }, /*#__PURE__*/React.createElement("div", {
41
- className: cn(styles.tabsContainer, styles[theme], styles[mode], STYLES_SIZES[size], sparse && styles.sparse, short && styles.short, className),
44
+ className: cn(styles.tabsContainer, styles[theme], styles[mode], STYLES_SIZES[size], sparse && styles.sparse, short && styles.short, isIndicatorHidden && styles.isIndicatorHidden, className),
42
45
  "data-e2e": e2eId ? `${e2eId}__tabs-container` : null,
43
46
  "data-test": 'tab-list',
44
47
  ref: containerRef
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/tab-list",
3
- "version": "0.13.12",
3
+ "version": "0.14.0",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -37,5 +37,5 @@
37
37
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
38
38
  },
39
39
  "nx": {},
40
- "gitHead": "d7450a0d420331e1321802ca50b2a12dfb974a4e"
40
+ "gitHead": "3af08f3c5ae8423986d7de93b2377e030cd55e0d"
41
41
  }