@rescui/tab-list 0.18.3 → 0.18.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/_virtual/index.css.js +12 -12
- package/lib/index.css +94 -79
- package/lib/parts/separator.p.module.css.js +3 -3
- package/lib/parts/tab-list.p.module.css.js +25 -25
- package/lib/parts/use-indicator.d.ts +3 -4
- package/lib/parts/use-indicator.js +10 -12
- package/lib/parts/use-roving-tab-index.js +11 -5
- package/lib/parts/use-scrollable-list.d.ts +2 -2
- package/lib/parts/use-scrollable-list.js +26 -19
- package/lib/public-api.p.css +5 -0
- package/lib/public-api.pcss +5 -0
- package/lib/tab-list.js +3 -5
- package/package.json +7 -7
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"icon": "
|
|
3
|
-
"sizeXS": "
|
|
4
|
-
"sizeS": "
|
|
5
|
-
"sizeM": "
|
|
6
|
-
"sizeL": "
|
|
7
|
-
"light": "
|
|
8
|
-
"dark": "
|
|
9
|
-
"allVariants": "
|
|
10
|
-
"variant16": "
|
|
11
|
-
"variant20": "
|
|
12
|
-
"variant24": "
|
|
13
|
-
"variant28": "
|
|
2
|
+
"icon": "_icon_1npbgia_4",
|
|
3
|
+
"sizeXS": "_sizeXS_1npbgia_14",
|
|
4
|
+
"sizeS": "_sizeS_1npbgia_18",
|
|
5
|
+
"sizeM": "_sizeM_1npbgia_22",
|
|
6
|
+
"sizeL": "_sizeL_1npbgia_26",
|
|
7
|
+
"light": "_light_1npbgia_30",
|
|
8
|
+
"dark": "_dark_1npbgia_34",
|
|
9
|
+
"allVariants": "_allVariants_1npbgia_48",
|
|
10
|
+
"variant16": "_variant16_1npbgia_53",
|
|
11
|
+
"variant20": "_variant20_1npbgia_54",
|
|
12
|
+
"variant24": "_variant24_1npbgia_55",
|
|
13
|
+
"variant28": "_variant28_1npbgia_58"
|
|
14
14
|
};
|
|
15
15
|
export { styles as default };
|
package/lib/index.css
CHANGED
|
@@ -1,4 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
@property --_rs-theme-dark-coefficient{
|
|
2
|
+
syntax:'<number>';
|
|
3
|
+
inherits:true;
|
|
4
|
+
initial-value:0;
|
|
5
|
+
}
|
|
6
|
+
._icon_1npbgia_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
|
-
.
|
|
16
|
+
._icon_1npbgia_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
|
-
.
|
|
25
|
+
._icon_1npbgia_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
|
-
.
|
|
33
|
+
._icon_1npbgia_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
|
-
.
|
|
40
|
+
._sizeXS_1npbgia_14{
|
|
36
41
|
--_rs-icons-height:16px;
|
|
37
42
|
}
|
|
38
|
-
.
|
|
43
|
+
._sizeS_1npbgia_18{
|
|
39
44
|
--_rs-icons-height:20px;
|
|
40
45
|
}
|
|
41
|
-
.
|
|
46
|
+
._sizeM_1npbgia_22{
|
|
42
47
|
--_rs-icons-height:24px;
|
|
43
48
|
}
|
|
44
|
-
.
|
|
49
|
+
._sizeL_1npbgia_26{
|
|
45
50
|
--_rs-icons-height:28px;
|
|
46
51
|
}
|
|
47
|
-
.
|
|
52
|
+
._light_1npbgia_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
|
-
.
|
|
56
|
+
._dark_1npbgia_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
|
-
.
|
|
68
|
+
._allVariants_1npbgia_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
|
-
.
|
|
68
|
-
.
|
|
69
|
-
.
|
|
72
|
+
._variant16_1npbgia_53,
|
|
73
|
+
._variant20_1npbgia_54,
|
|
74
|
+
._variant24_1npbgia_55{
|
|
70
75
|
display:none;
|
|
71
76
|
}
|
|
72
|
-
.
|
|
77
|
+
._variant28_1npbgia_58{
|
|
73
78
|
display:block;
|
|
74
79
|
}
|
|
75
80
|
@container rs-icon (max-height: 24px){
|
|
76
|
-
.
|
|
81
|
+
._variant24_1npbgia_55{
|
|
77
82
|
display:block;
|
|
78
83
|
}
|
|
79
|
-
.
|
|
84
|
+
._variant28_1npbgia_58{
|
|
80
85
|
display:none;
|
|
81
86
|
}
|
|
82
87
|
}
|
|
83
88
|
@container rs-icon (max-height: 20px){
|
|
84
|
-
.
|
|
89
|
+
._variant20_1npbgia_54{
|
|
85
90
|
display:block;
|
|
86
91
|
}
|
|
87
|
-
.
|
|
92
|
+
._variant24_1npbgia_55{
|
|
88
93
|
display:none;
|
|
89
94
|
}
|
|
90
95
|
}
|
|
91
96
|
@container rs-icon (max-height: 16px){
|
|
92
|
-
.
|
|
97
|
+
._variant16_1npbgia_53{
|
|
93
98
|
display:block;
|
|
94
99
|
}
|
|
95
|
-
.
|
|
100
|
+
._variant20_1npbgia_54{
|
|
96
101
|
display:none;
|
|
97
102
|
}
|
|
98
103
|
}
|
|
99
|
-
|
|
104
|
+
@property --_rs-theme-dark-coefficient{
|
|
105
|
+
syntax:'<number>';
|
|
106
|
+
inherits:true;
|
|
107
|
+
initial-value:0;
|
|
108
|
+
}
|
|
109
|
+
._light_1jc35d5_10{
|
|
100
110
|
--rs-theme-dark:0;
|
|
101
111
|
}
|
|
102
|
-
.
|
|
112
|
+
._dark_1jc35d5_13{
|
|
103
113
|
--rs-theme-dark:1;
|
|
104
114
|
}
|
|
105
|
-
.
|
|
115
|
+
._sizeM_1jc35d5_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
|
-
.
|
|
120
|
+
._sizeM_1jc35d5_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
|
-
.
|
|
159
|
+
._sizeM_1jc35d5_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
|
-
.
|
|
163
|
+
._sizeL_1jc35d5_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
|
-
.
|
|
168
|
+
._sizeL_1jc35d5_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
|
-
.
|
|
207
|
+
._sizeL_1jc35d5_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
|
-
.
|
|
211
|
+
._classic_1jc35d5_24{
|
|
202
212
|
--_rs-tab-list-indicator-background:var(--_rs-color-primary);
|
|
203
213
|
}
|
|
204
|
-
.
|
|
214
|
+
._rock_1jc35d5_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
|
-
.
|
|
217
|
+
._sparse_1jc35d5_31{
|
|
208
218
|
--_rs-tab-list-tab-margin-left-or-initial:32px;
|
|
209
219
|
}
|
|
210
220
|
@media screen and (max-width: 640px){
|
|
211
|
-
.
|
|
221
|
+
._sparse_1jc35d5_31{
|
|
212
222
|
--_rs-tab-list-tab-margin-left-or-initial:24px;
|
|
213
223
|
}
|
|
214
224
|
}
|
|
215
|
-
.
|
|
225
|
+
._short_1jc35d5_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
|
-
.
|
|
228
|
+
._wrapper_1jc35d5_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
|
-
.
|
|
238
|
+
._wrapper_1jc35d5_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
|
-
.
|
|
247
|
+
._wrapper_1jc35d5_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
|
-
.
|
|
255
|
+
._wrapper_1jc35d5_39 {
|
|
246
256
|
--_rs-tab-list-tab-base-margin-left:24px;
|
|
247
257
|
}
|
|
248
258
|
@media screen and (max-width: 640px){
|
|
249
|
-
.
|
|
259
|
+
._wrapper_1jc35d5_39{
|
|
250
260
|
--_rs-tab-list-tab-base-margin-left:16px;
|
|
251
261
|
}
|
|
252
262
|
}
|
|
253
|
-
.
|
|
263
|
+
._wrapper_1jc35d5_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
|
-
.
|
|
273
|
+
._scrollable_1jc35d5_49{
|
|
264
274
|
display:flex;
|
|
265
275
|
overflow-x:scroll;
|
|
266
276
|
|
|
267
277
|
margin:-4px;
|
|
268
278
|
padding:4px;
|
|
269
279
|
}
|
|
270
|
-
.
|
|
280
|
+
._scrollable_1jc35d5_49::after{
|
|
271
281
|
display:block;
|
|
272
282
|
|
|
273
283
|
height:100%;
|
|
@@ -276,15 +286,15 @@
|
|
|
276
286
|
|
|
277
287
|
content:'';
|
|
278
288
|
}
|
|
279
|
-
.
|
|
289
|
+
._scrollable_1jc35d5_49 {
|
|
280
290
|
|
|
281
291
|
-ms-overflow-style:none;
|
|
282
292
|
scrollbar-width:none;
|
|
283
293
|
}
|
|
284
|
-
.
|
|
294
|
+
._scrollable_1jc35d5_49::-webkit-scrollbar{
|
|
285
295
|
display:none;
|
|
286
296
|
}
|
|
287
|
-
.
|
|
297
|
+
._arrow_1jc35d5_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
|
-
.
|
|
317
|
+
._arrow_1jc35d5_78._shown_1jc35d5_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
|
-
.
|
|
324
|
+
._arrow_1jc35d5_78._arrowLeft_1jc35d5_106{
|
|
315
325
|
left:-5px;
|
|
316
326
|
}
|
|
317
|
-
.
|
|
327
|
+
._arrow_1jc35d5_78._arrowRight_1jc35d5_111{
|
|
318
328
|
right:-5px;
|
|
319
329
|
}
|
|
320
|
-
.
|
|
330
|
+
._withLeftArrow_1jc35d5_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
|
-
.
|
|
344
|
+
._withRightArrow_1jc35d5_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
|
-
.
|
|
358
|
+
._withLeftArrow_1jc35d5_117._withRightArrow_1jc35d5_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
|
-
.
|
|
378
|
+
._arrowButton_1jc35d5_147{
|
|
369
379
|
cursor:pointer;
|
|
370
380
|
}
|
|
371
|
-
.
|
|
381
|
+
._tabsContainer_1jc35d5_151{
|
|
372
382
|
position:relative;
|
|
373
383
|
|
|
374
384
|
display:flex;
|
|
375
385
|
}
|
|
376
|
-
.
|
|
386
|
+
._indicator_1jc35d5_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
|
-
.
|
|
390
|
-
[data-calculating-scrollable='true'] .
|
|
399
|
+
._isIndicatorHidden_1jc35d5_172 ._indicator_1jc35d5_157,
|
|
400
|
+
[data-calculating-scrollable='true'] ._indicator_1jc35d5_157{
|
|
391
401
|
display:none;
|
|
392
402
|
}
|
|
393
|
-
.
|
|
403
|
+
._iconLeft_1jc35d5_178{
|
|
394
404
|
--_rs-tab-list-tab-flex-direction:row;
|
|
395
405
|
}
|
|
396
|
-
.
|
|
406
|
+
._iconRight_1jc35d5_181{
|
|
397
407
|
--_rs-tab-list-tab-flex-direction:row-reverse;
|
|
398
408
|
}
|
|
399
|
-
.
|
|
409
|
+
._tab_1jc35d5_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
|
-
.
|
|
419
|
+
._tab_1jc35d5_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
|
-
.
|
|
428
|
+
._tab_1jc35d5_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
|
-
.
|
|
436
|
+
._tab_1jc35d5_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
|
-
.
|
|
480
|
+
._tab_1jc35d5_151::-moz-focus-inner{
|
|
471
481
|
padding:0;
|
|
472
482
|
|
|
473
483
|
border:none;
|
|
474
484
|
}
|
|
475
|
-
.
|
|
476
|
-
.
|
|
477
|
-
.
|
|
485
|
+
._tab_1jc35d5_151:hover,
|
|
486
|
+
._tab_1jc35d5_151:active,
|
|
487
|
+
._tab_1jc35d5_151:focus{
|
|
478
488
|
outline:none;
|
|
479
489
|
|
|
480
490
|
text-decoration:none;
|
|
481
491
|
}
|
|
482
|
-
.
|
|
492
|
+
._tab_1jc35d5_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
|
-
.
|
|
505
|
+
._tab_1jc35d5_151:focus[data-focus-method='key']:after{
|
|
496
506
|
opacity:0;
|
|
497
507
|
}
|
|
498
|
-
.
|
|
508
|
+
._tab_1jc35d5_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
|
-
.
|
|
511
|
+
._tab_1jc35d5_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
|
-
.
|
|
516
|
+
._tab_1jc35d5_151._selected_1jc35d5_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
|
-
.
|
|
525
|
+
._tab_1jc35d5_151._selected_1jc35d5_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
|
-
.
|
|
532
|
+
._tab_1jc35d5_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
|
-
.
|
|
535
|
+
._tab_1jc35d5_151:first-child{
|
|
526
536
|
margin-left:0;
|
|
527
537
|
}
|
|
528
|
-
.
|
|
538
|
+
._tab_1jc35d5_151 ._icon_1jc35d5_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
|
-
|
|
546
|
+
@property --_rs-theme-dark-coefficient{
|
|
547
|
+
syntax:'<number>';
|
|
548
|
+
inherits:true;
|
|
549
|
+
initial-value:0;
|
|
550
|
+
}
|
|
551
|
+
._light_1qbyf8q_4{
|
|
537
552
|
--rs-theme-dark:0;
|
|
538
553
|
}
|
|
539
|
-
.
|
|
554
|
+
._dark_1qbyf8q_7{
|
|
540
555
|
--rs-theme-dark:1;
|
|
541
556
|
}
|
|
542
|
-
.
|
|
557
|
+
._separator_1qbyf8q_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
|
-
.
|
|
571
|
+
._separator_1qbyf8q_11:after{
|
|
557
572
|
position:absolute;
|
|
558
573
|
right:0;
|
|
559
574
|
bottom:0;
|
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"light": "
|
|
3
|
-
"dark": "
|
|
4
|
-
"sizeM": "
|
|
5
|
-
"sizeL": "
|
|
6
|
-
"classic": "
|
|
7
|
-
"rock": "
|
|
8
|
-
"sparse": "
|
|
9
|
-
"short": "
|
|
10
|
-
"wrapper": "
|
|
11
|
-
"scrollable": "
|
|
12
|
-
"arrow": "
|
|
13
|
-
"shown": "
|
|
14
|
-
"arrowLeft": "
|
|
15
|
-
"arrowRight": "
|
|
16
|
-
"withLeftArrow": "
|
|
17
|
-
"withRightArrow": "
|
|
18
|
-
"arrowButton": "
|
|
19
|
-
"tabsContainer": "
|
|
20
|
-
"indicator": "
|
|
21
|
-
"isIndicatorHidden": "
|
|
22
|
-
"iconLeft": "
|
|
23
|
-
"iconRight": "
|
|
24
|
-
"tab": "
|
|
25
|
-
"selected": "
|
|
26
|
-
"icon": "
|
|
2
|
+
"light": "_light_1jc35d5_10",
|
|
3
|
+
"dark": "_dark_1jc35d5_13",
|
|
4
|
+
"sizeM": "_sizeM_1jc35d5_17",
|
|
5
|
+
"sizeL": "_sizeL_1jc35d5_20",
|
|
6
|
+
"classic": "_classic_1jc35d5_24",
|
|
7
|
+
"rock": "_rock_1jc35d5_27",
|
|
8
|
+
"sparse": "_sparse_1jc35d5_31",
|
|
9
|
+
"short": "_short_1jc35d5_35",
|
|
10
|
+
"wrapper": "_wrapper_1jc35d5_39",
|
|
11
|
+
"scrollable": "_scrollable_1jc35d5_49",
|
|
12
|
+
"arrow": "_arrow_1jc35d5_78",
|
|
13
|
+
"shown": "_shown_1jc35d5_98",
|
|
14
|
+
"arrowLeft": "_arrowLeft_1jc35d5_106",
|
|
15
|
+
"arrowRight": "_arrowRight_1jc35d5_111",
|
|
16
|
+
"withLeftArrow": "_withLeftArrow_1jc35d5_117",
|
|
17
|
+
"withRightArrow": "_withRightArrow_1jc35d5_126",
|
|
18
|
+
"arrowButton": "_arrowButton_1jc35d5_147",
|
|
19
|
+
"tabsContainer": "_tabsContainer_1jc35d5_151",
|
|
20
|
+
"indicator": "_indicator_1jc35d5_157",
|
|
21
|
+
"isIndicatorHidden": "_isIndicatorHidden_1jc35d5_172",
|
|
22
|
+
"iconLeft": "_iconLeft_1jc35d5_178",
|
|
23
|
+
"iconRight": "_iconRight_1jc35d5_181",
|
|
24
|
+
"tab": "_tab_1jc35d5_151",
|
|
25
|
+
"selected": "_selected_1jc35d5_272",
|
|
26
|
+
"icon": "_icon_1jc35d5_178"
|
|
27
27
|
};
|
|
28
28
|
export { styles as default };
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import { MutableRefObject } from 'react';
|
|
2
|
-
export declare const useIndicator: ({
|
|
3
|
-
|
|
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
|
};
|
|
@@ -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
|
-
|
|
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 (!
|
|
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(
|
|
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(
|
|
54
|
+
useResizeObserver(activeNode, () => updateIndicator(false), {
|
|
57
55
|
ignoreFirstCall: true
|
|
58
56
|
});
|
|
59
57
|
return {
|
|
60
58
|
indicator,
|
|
61
|
-
isIndicatorHidden:
|
|
59
|
+
isIndicatorHidden: typeof indicator.transitionDuration === 'undefined'
|
|
62
60
|
};
|
|
63
61
|
};
|
|
64
62
|
|
|
@@ -37,11 +37,17 @@ const useRovingTabIndex = _ref2 => {
|
|
|
37
37
|
tabRefs
|
|
38
38
|
} = _ref2;
|
|
39
39
|
const [currentTabStopId, setCurrentTabStopId] = React.useState(selectedId ?? 0);
|
|
40
|
-
React.
|
|
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
|
-
}
|
|
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 =
|
|
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
|
-
|
|
61
|
-
}, [
|
|
66
|
+
currentTabsRefs.get(nextItemId)?.focus();
|
|
67
|
+
}, [currentTabsRefs]);
|
|
62
68
|
return {
|
|
63
69
|
currentTabStopId,
|
|
64
70
|
onTabKeyDown
|
|
@@ -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,
|
|
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>>)[];
|
|
@@ -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
|
-
|
|
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, [
|
|
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
package/lib/public-api.pcss
CHANGED
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
|
-
|
|
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
|
+
"version": "0.18.4",
|
|
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.
|
|
21
|
-
"@rescui/use-resize-observer": "^0.3.
|
|
20
|
+
"@rescui/button": "^0.24.6",
|
|
21
|
+
"@rescui/use-resize-observer": "^0.3.4",
|
|
22
22
|
"classnames": "^2.2.6"
|
|
23
23
|
},
|
|
24
24
|
"peerDependencies": {
|
|
@@ -27,10 +27,10 @@
|
|
|
27
27
|
"react": ">=16.8.0 <20"
|
|
28
28
|
},
|
|
29
29
|
"devDependencies": {
|
|
30
|
-
"@rescui/colors": "^0.3.
|
|
31
|
-
"@rescui/postcss-preset-library": "^0.2.
|
|
30
|
+
"@rescui/colors": "^0.3.3",
|
|
31
|
+
"@rescui/postcss-preset-library": "^0.2.3",
|
|
32
32
|
"@rescui/scripts": "^0.5.2",
|
|
33
|
-
"@rescui/typography": "^0.27.
|
|
33
|
+
"@rescui/typography": "^0.27.4",
|
|
34
34
|
"@rescui/visual-regression": "^0.1.4"
|
|
35
35
|
},
|
|
36
36
|
"scripts": {
|
|
@@ -38,5 +38,5 @@
|
|
|
38
38
|
"build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
|
|
39
39
|
},
|
|
40
40
|
"nx": {},
|
|
41
|
-
"gitHead": "
|
|
41
|
+
"gitHead": "3711cbfc0c797014395421b008aa5331d6d47c6e"
|
|
42
42
|
}
|