@rescui/tab-list 0.16.5 → 0.17.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 (16) hide show
  1. package/lib/_virtual/index.css.js +12 -12
  2. package/lib/index.css +86 -86
  3. package/lib/parts/separator.p.module.css.js +3 -3
  4. package/lib/parts/tab-list-context.d.ts +8 -3
  5. package/lib/parts/tab-list.p.module.css.js +16 -16
  6. package/lib/parts/tab.js +12 -7
  7. package/lib/parts/use-roving-tab-index.d.ts +8 -0
  8. package/lib/parts/use-roving-tab-index.js +68 -0
  9. package/lib/parts/use-scrollable-list.d.ts +1 -0
  10. package/lib/parts/use-scrollable-list.js +25 -2
  11. package/lib/parts/with-scroll-arrows.d.ts +1 -0
  12. package/lib/parts/with-scroll-arrows.js +2 -0
  13. package/lib/parts/with-scroll-arrows.p.module.css.js +11 -11
  14. package/lib/tab-list.d.ts +7 -0
  15. package/lib/tab-list.js +19 -7
  16. package/package.json +4 -4
package/lib/_virtual/index.css.js CHANGED
@@ -1,15 +1,15 @@
1
1
  var styles = {
2
- "icon": "_icon_e0n0cr_4",
3
- "sizeXS": "_sizeXS_e0n0cr_14",
4
- "sizeS": "_sizeS_e0n0cr_18",
5
- "sizeM": "_sizeM_e0n0cr_22",
6
- "sizeL": "_sizeL_e0n0cr_26",
7
- "light": "_light_e0n0cr_30",
8
- "dark": "_dark_e0n0cr_34",
9
- "allVariants": "_allVariants_e0n0cr_48",
10
- "variant16": "_variant16_e0n0cr_53",
11
- "variant20": "_variant20_e0n0cr_54",
12
- "variant24": "_variant24_e0n0cr_55",
13
- "variant28": "_variant28_e0n0cr_58"
2
+ "icon": "_icon_uqfcxc_4",
3
+ "sizeXS": "_sizeXS_uqfcxc_14",
4
+ "sizeS": "_sizeS_uqfcxc_18",
5
+ "sizeM": "_sizeM_uqfcxc_22",
6
+ "sizeL": "_sizeL_uqfcxc_26",
7
+ "light": "_light_uqfcxc_30",
8
+ "dark": "_dark_uqfcxc_34",
9
+ "allVariants": "_allVariants_uqfcxc_48",
10
+ "variant16": "_variant16_uqfcxc_53",
11
+ "variant20": "_variant20_uqfcxc_54",
12
+ "variant24": "_variant24_uqfcxc_55",
13
+ "variant28": "_variant28_uqfcxc_58"
14
14
  };
15
15
  export { styles as default };
package/lib/index.css CHANGED
@@ -1,4 +1,4 @@
1
- ._icon_e0n0cr_4{
1
+ ._icon_uqfcxc_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_e0n0cr_4{
11
+ ._icon_uqfcxc_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_e0n0cr_4{
20
+ ._icon_uqfcxc_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_e0n0cr_4{
28
+ ._icon_uqfcxc_4{
29
29
 
30
30
  fill:var(--_rs-icons-themed-fill-or-initial, currentcolor);
31
31
 
32
32
  width:var(--rs-icons-width, auto);
33
33
  height:var(--rs-icons-height, var(--_rs-icons-height));
34
34
  }
35
- ._sizeXS_e0n0cr_14{
35
+ ._sizeXS_uqfcxc_14{
36
36
  --_rs-icons-height:16px;
37
37
  }
38
- ._sizeS_e0n0cr_18{
38
+ ._sizeS_uqfcxc_18{
39
39
  --_rs-icons-height:20px;
40
40
  }
41
- ._sizeM_e0n0cr_22{
41
+ ._sizeM_uqfcxc_22{
42
42
  --_rs-icons-height:24px;
43
43
  }
44
- ._sizeL_e0n0cr_26{
44
+ ._sizeL_uqfcxc_26{
45
45
  --_rs-icons-height:28px;
46
46
  }
47
- ._light_e0n0cr_30{
47
+ ._light_uqfcxc_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_e0n0cr_34{
51
+ ._dark_uqfcxc_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,54 +60,54 @@
60
60
  transform:rotate(360deg);
61
61
  }
62
62
  }
63
- ._allVariants_e0n0cr_48{
63
+ ._allVariants_uqfcxc_48{
64
64
  aspect-ratio:var(--rs-icon-ar-width, 1) / var(--rs-icon-ar-height, 1);
65
65
  container:rs-icon / size;
66
66
  }
67
- ._variant16_e0n0cr_53,
68
- ._variant20_e0n0cr_54,
69
- ._variant24_e0n0cr_55{
67
+ ._variant16_uqfcxc_53,
68
+ ._variant20_uqfcxc_54,
69
+ ._variant24_uqfcxc_55{
70
70
  display:none;
71
71
  }
72
- ._variant28_e0n0cr_58{
72
+ ._variant28_uqfcxc_58{
73
73
  display:block;
74
74
  }
75
75
  @container rs-icon (max-height: 24px){
76
- ._variant24_e0n0cr_55{
76
+ ._variant24_uqfcxc_55{
77
77
  display:block;
78
78
  }
79
- ._variant28_e0n0cr_58{
79
+ ._variant28_uqfcxc_58{
80
80
  display:none;
81
81
  }
82
82
  }
83
83
  @container rs-icon (max-height: 20px){
84
- ._variant20_e0n0cr_54{
84
+ ._variant20_uqfcxc_54{
85
85
  display:block;
86
86
  }
87
- ._variant24_e0n0cr_55{
87
+ ._variant24_uqfcxc_55{
88
88
  display:none;
89
89
  }
90
90
  }
91
91
  @container rs-icon (max-height: 16px){
92
- ._variant16_e0n0cr_53{
92
+ ._variant16_uqfcxc_53{
93
93
  display:block;
94
94
  }
95
- ._variant20_e0n0cr_54{
95
+ ._variant20_uqfcxc_54{
96
96
  display:none;
97
97
  }
98
98
  }
99
- ._light_d01m1y_7{
99
+ ._light_j4p92r_7{
100
100
  --rs-theme-dark:0;
101
101
  }
102
- ._dark_d01m1y_10{
102
+ ._dark_j4p92r_10{
103
103
  --rs-theme-dark:1;
104
104
  }
105
- ._sizeM_d01m1y_14{
105
+ ._sizeM_j4p92r_14{
106
106
  --_rs-tab-list-tab-vertical-padding:8px;
107
107
  --_rs-tab-list-icon-size:24px;
108
108
  --_rs-tab-list-icon-offset:4px;
109
109
  }
110
- ._sizeM_d01m1y_14 [data-rs-internal='tab-list__tab']{
110
+ ._sizeM_j4p92r_14 [data-rs-internal='tab-list__tab']{
111
111
  --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
112
112
  --_rs-typography-text-transform:initial;
113
113
  --_rs-typography-font-variant-numeric:initial;
@@ -146,16 +146,16 @@
146
146
  --_rs-typography-link-border-bottom-width-from-text:1px;
147
147
  }
148
148
  @media screen and (max-width: 640px){
149
- ._sizeM_d01m1y_14 [data-rs-internal='tab-list__tab']{
149
+ ._sizeM_j4p92r_14 [data-rs-internal='tab-list__tab']{
150
150
  --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
151
151
  }
152
152
  }
153
- ._sizeL_d01m1y_17{
153
+ ._sizeL_j4p92r_17{
154
154
  --_rs-tab-list-tab-vertical-padding:12px;
155
155
  --_rs-tab-list-icon-size:28px;
156
156
  --_rs-tab-list-icon-offset:8px;
157
157
  }
158
- ._sizeL_d01m1y_17 [data-rs-internal='tab-list__tab']{
158
+ ._sizeL_j4p92r_17 [data-rs-internal='tab-list__tab']{
159
159
  --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
160
160
  --_rs-typography-text-transform:initial;
161
161
  --_rs-typography-font-variant-numeric:initial;
@@ -194,28 +194,28 @@
194
194
  --_rs-typography-link-border-bottom-width-from-text:1px;
195
195
  }
196
196
  @media screen and (max-width: 640px){
197
- ._sizeL_d01m1y_17 [data-rs-internal='tab-list__tab']{
197
+ ._sizeL_j4p92r_17 [data-rs-internal='tab-list__tab']{
198
198
  --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
199
199
  }
200
200
  }
201
- ._classic_d01m1y_21{
201
+ ._classic_j4p92r_21{
202
202
  --_rs-tab-list-indicator-background:var(--_rs-color-primary);
203
203
  }
204
- ._rock_d01m1y_24{
204
+ ._rock_j4p92r_24{
205
205
  --_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
206
  }
207
- ._sparse_d01m1y_28{
207
+ ._sparse_j4p92r_28{
208
208
  --_rs-tab-list-tab-margin-left-or-initial:32px;
209
209
  }
210
210
  @media screen and (max-width: 640px){
211
- ._sparse_d01m1y_28{
211
+ ._sparse_j4p92r_28{
212
212
  --_rs-tab-list-tab-margin-left-or-initial:24px;
213
213
  }
214
214
  }
215
- ._short_d01m1y_32{
215
+ ._short_j4p92r_32{
216
216
  --_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
217
  }
218
- ._tabsContainer_d01m1y_36{
218
+ ._tabsContainer_j4p92r_36{
219
219
  --_rs-theme-dark:var(
220
220
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
221
221
  var(--rs-theme-dark, 0)
@@ -225,7 +225,7 @@
225
225
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
226
226
  }
227
227
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
228
- ._tabsContainer_d01m1y_36{
228
+ ._tabsContainer_j4p92r_36{
229
229
  --_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
230
  --_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
231
  --_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 +234,7 @@
234
234
  }
235
235
  }
236
236
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
237
- ._tabsContainer_d01m1y_36{
237
+ ._tabsContainer_j4p92r_36{
238
238
  --_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
239
  --_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
240
  --_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 +242,15 @@
242
242
  --_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
243
  }
244
244
  }
245
- ._tabsContainer_d01m1y_36 {
245
+ ._tabsContainer_j4p92r_36 {
246
246
  --_rs-tab-list-tab-base-margin-left:24px;
247
247
  }
248
248
  @media screen and (max-width: 640px){
249
- ._tabsContainer_d01m1y_36{
249
+ ._tabsContainer_j4p92r_36{
250
250
  --_rs-tab-list-tab-base-margin-left:16px;
251
251
  }
252
252
  }
253
- ._tabsContainer_d01m1y_36 {
253
+ ._tabsContainer_j4p92r_36 {
254
254
  --_rs-tab-list-tab-margin-left:var(
255
255
  --_rs-tab-list-tab-margin-left-or-initial,
256
256
  var(--_rs-tab-list-tab-base-margin-left)
@@ -260,7 +260,7 @@
260
260
 
261
261
  display:flex;
262
262
  }
263
- ._indicator_d01m1y_46{
263
+ ._indicator_j4p92r_46{
264
264
  position:absolute;
265
265
  z-index:3;
266
266
  bottom:0;
@@ -270,20 +270,20 @@
270
270
 
271
271
  background:var(--_rs-tab-list-indicator-background);
272
272
 
273
- transition:left 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, width 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
273
+ 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;
274
274
  will-change:left, width;
275
275
  }
276
- ._isIndicatorHidden_d01m1y_60 ._indicator_d01m1y_46,
277
- [data-calculating-scrollable="true"] ._indicator_d01m1y_46{
276
+ ._isIndicatorHidden_j4p92r_61 ._indicator_j4p92r_46,
277
+ [data-calculating-scrollable='true'] ._indicator_j4p92r_46{
278
278
  display:none;
279
279
  }
280
- ._iconLeft_d01m1y_66{
280
+ ._iconLeft_j4p92r_67{
281
281
  --_rs-tab-list-tab-flex-direction:row;
282
282
  }
283
- ._iconRight_d01m1y_69{
283
+ ._iconRight_j4p92r_70{
284
284
  --_rs-tab-list-tab-flex-direction:row-reverse;
285
285
  }
286
- ._tab_d01m1y_36{
286
+ ._tab_j4p92r_36{
287
287
  --_rs-theme-dark:var(
288
288
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
289
289
  var(--rs-theme-dark, 0)
@@ -293,7 +293,7 @@
293
293
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
294
294
  }
295
295
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
296
- ._tab_d01m1y_36{
296
+ ._tab_j4p92r_36{
297
297
  --_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)));
298
298
  --_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)));
299
299
  --_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)));
@@ -302,7 +302,7 @@
302
302
  }
303
303
  }
304
304
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
305
- ._tab_d01m1y_36{
305
+ ._tab_j4p92r_36{
306
306
  --_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);
307
307
  --_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));
308
308
  --_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));
@@ -310,7 +310,7 @@
310
310
  --_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));
311
311
  }
312
312
  }
313
- ._tab_d01m1y_36 {
313
+ ._tab_j4p92r_36 {
314
314
  letter-spacing:var(
315
315
  --rs-text-base-letter-spacing,
316
316
  var(--_rs-typography-letter-spacing)
@@ -354,19 +354,19 @@
354
354
  -moz-osx-font-smoothing:inherit;
355
355
  -webkit-appearance:none;
356
356
  }
357
- ._tab_d01m1y_36::-moz-focus-inner{
357
+ ._tab_j4p92r_36::-moz-focus-inner{
358
358
  padding:0;
359
359
 
360
360
  border:none;
361
361
  }
362
- ._tab_d01m1y_36:hover,
363
- ._tab_d01m1y_36:active,
364
- ._tab_d01m1y_36:focus{
362
+ ._tab_j4p92r_36:hover,
363
+ ._tab_j4p92r_36:active,
364
+ ._tab_j4p92r_36:focus{
365
365
  outline:none;
366
366
 
367
367
  text-decoration:none;
368
368
  }
369
- ._tab_d01m1y_36:after{
369
+ ._tab_j4p92r_36:after{
370
370
  position:absolute;
371
371
  bottom:0;
372
372
  left:0;
@@ -379,40 +379,40 @@
379
379
 
380
380
  background-color:transparent;
381
381
  }
382
- ._tab_d01m1y_36:focus[data-focus-method='key']:after{
382
+ ._tab_j4p92r_36:focus[data-focus-method='key']:after{
383
383
  opacity:0;
384
384
  }
385
- ._tab_d01m1y_36:hover{
385
+ ._tab_j4p92r_36:hover{
386
386
  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));
387
387
  }
388
- ._tab_d01m1y_36:hover:after{
388
+ ._tab_j4p92r_36:hover:after{
389
389
  height:1px;
390
390
 
391
391
  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));
392
392
  }
393
- ._tab_d01m1y_36._selected_d01m1y_160{
393
+ ._tab_j4p92r_36._selected_j4p92r_161{
394
394
  z-index:1;
395
395
 
396
396
  cursor:default;
397
397
 
398
398
  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));
399
399
 
400
- transition:color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
400
+ transition:color 200ms var(--rs-transition-function, cubic-bezier(0.4, 0, 0.2, 1)) 0ms;
401
401
  }
402
- ._tab_d01m1y_36._selected_d01m1y_160:after{
402
+ ._tab_j4p92r_36._selected_j4p92r_161:after{
403
403
  height:2px;
404
404
 
405
405
  background-color:var(--_rs-tab-list-indicator-background);
406
406
 
407
- transition:background-color 0ms ease 300ms, height 0ms ease 300ms;
407
+ transition:background-color 0ms var(--rs-transition-function, ease) 300ms, height 0ms var(--rs-transition-function, ease) 300ms;
408
408
  }
409
- ._tab_d01m1y_36:focus[data-focus-method='key']{
409
+ ._tab_j4p92r_36:focus[data-focus-method='key']{
410
410
  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;
411
411
  }
412
- ._tab_d01m1y_36:first-child{
412
+ ._tab_j4p92r_36:first-child{
413
413
  margin-left:0;
414
414
  }
415
- ._tab_d01m1y_36 ._icon_d01m1y_66{
415
+ ._tab_j4p92r_36 ._icon_j4p92r_67{
416
416
  flex:0 0;
417
417
  flex-basis:auto;
418
418
 
@@ -420,13 +420,13 @@
420
420
  height:var(--_rs-tab-list-icon-size);
421
421
  }
422
422
 
423
- ._light_1j2arez_9{
423
+ ._light_l17k0g_9{
424
424
  --rs-theme-dark:0;
425
425
  }
426
- ._dark_1j2arez_12{
426
+ ._dark_l17k0g_12{
427
427
  --rs-theme-dark:1;
428
428
  }
429
- ._wrapper_1j2arez_16{
429
+ ._wrapper_l17k0g_16{
430
430
  --_rs-theme-dark:var(
431
431
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
432
432
  var(--rs-theme-dark, 0)
@@ -438,14 +438,14 @@
438
438
 
439
439
  display:flex;
440
440
  }
441
- ._scrollable_1j2arez_23{
441
+ ._scrollable_l17k0g_23{
442
442
  display:flex;
443
443
  overflow-x:scroll;
444
444
 
445
445
  margin:-4px;
446
446
  padding:4px;
447
447
  }
448
- ._scrollable_1j2arez_23::after{
448
+ ._scrollable_l17k0g_23::after{
449
449
  display:block;
450
450
 
451
451
  height:100%;
@@ -454,15 +454,15 @@
454
454
 
455
455
  content:'';
456
456
  }
457
- ._scrollable_1j2arez_23 {
457
+ ._scrollable_l17k0g_23 {
458
458
 
459
459
  -ms-overflow-style:none;
460
460
  scrollbar-width:none;
461
461
  }
462
- ._scrollable_1j2arez_23::-webkit-scrollbar{
462
+ ._scrollable_l17k0g_23::-webkit-scrollbar{
463
463
  display:none;
464
464
  }
465
- ._arrow_1j2arez_52{
465
+ ._arrow_l17k0g_52{
466
466
  position:absolute;
467
467
  z-index:2;
468
468
  top:50%;
@@ -479,23 +479,23 @@
479
479
  color:rgb(calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*230), calc(255 - var(--_rs-theme-dark-coefficient, 0)*227));
480
480
  background-color:transparent;
481
481
 
482
- transition:opacity 0.15s ease-out;
482
+ transition:opacity 0.15s var(--rs-transition-function, ease-out);
483
483
  transform:translateY(-50%);
484
484
  }
485
- ._arrow_1j2arez_52._shown_1j2arez_72{
485
+ ._arrow_l17k0g_52._shown_l17k0g_72{
486
486
  opacity:1;
487
487
 
488
488
  pointer-events:auto;
489
489
 
490
- transition:opacity 0.15s ease-in;
490
+ transition:opacity 0.15s var(--rs-transition-function, ease-in);
491
491
  }
492
- ._arrow_1j2arez_52._arrowLeft_1j2arez_80{
492
+ ._arrow_l17k0g_52._arrowLeft_l17k0g_80{
493
493
  left:-5px;
494
494
  }
495
- ._arrow_1j2arez_52._arrowRight_1j2arez_85{
495
+ ._arrow_l17k0g_52._arrowRight_l17k0g_85{
496
496
  right:-5px;
497
497
  }
498
- ._withLeftArrow_1j2arez_91{
498
+ ._withLeftArrow_l17k0g_91{
499
499
  -webkit-mask-image:linear-gradient(
500
500
  to right,
501
501
  rgba(0, 0, 0, 0) 0%,
@@ -509,7 +509,7 @@
509
509
  black 56px
510
510
  );
511
511
  }
512
- ._withRightArrow_1j2arez_100{
512
+ ._withRightArrow_l17k0g_100{
513
513
  -webkit-mask-image:linear-gradient(
514
514
  to left,
515
515
  rgba(0, 0, 0, 0) 0%,
@@ -523,7 +523,7 @@
523
523
  black 56px
524
524
  );
525
525
  }
526
- ._withLeftArrow_1j2arez_91._withRightArrow_1j2arez_100{
526
+ ._withLeftArrow_l17k0g_91._withRightArrow_l17k0g_100{
527
527
  -webkit-mask-image:linear-gradient(
528
528
  to right,
529
529
  rgba(0, 0, 0, 0) 0%,
@@ -543,17 +543,17 @@
543
543
  rgba(0, 0, 0, 0) 100%
544
544
  );
545
545
  }
546
- ._arrowButton_1j2arez_121{
546
+ ._arrowButton_l17k0g_121{
547
547
  cursor:pointer;
548
548
  }
549
549
 
550
- ._light_mld383_4{
550
+ ._light_46gg08_4{
551
551
  --rs-theme-dark:0;
552
552
  }
553
- ._dark_mld383_7{
553
+ ._dark_46gg08_7{
554
554
  --rs-theme-dark:1;
555
555
  }
556
- ._separator_mld383_11{
556
+ ._separator_46gg08_11{
557
557
  --_rs-theme-dark:var(
558
558
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
559
559
  var(--rs-theme-dark, 0)
@@ -567,7 +567,7 @@
567
567
 
568
568
  width:100%;
569
569
  }
570
- ._separator_mld383_11:after{
570
+ ._separator_46gg08_11:after{
571
571
  position:absolute;
572
572
  right:0;
573
573
  bottom:0;
package/lib/parts/separator.p.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  var styles = {
2
- "light": "_light_mld383_4",
3
- "dark": "_dark_mld383_7",
4
- "separator": "_separator_mld383_11"
2
+ "light": "_light_46gg08_4",
3
+ "dark": "_dark_46gg08_7",
4
+ "separator": "_separator_46gg08_11"
5
5
  };
6
6
  export { styles as default };
package/lib/parts/tab-list-context.d.ts CHANGED
@@ -1,8 +1,13 @@
1
- /// <reference types="react" />
2
- export declare type TabListValueType = string | number | symbol | {};
1
+ import React from 'react';
2
+ export declare type TabListValueType = string | number | symbol | object;
3
+ export declare type TabListRovingTabIndexToolkit = {
4
+ currentTabStopId: number;
5
+ onTabKeyDown: (e: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>, itemId: number) => void;
6
+ };
3
7
  export declare type TabListContextType = {
4
8
  onChange: (value: TabListValueType) => void;
5
9
  selectedId?: number;
10
+ rovingTabIndex?: TabListRovingTabIndexToolkit;
6
11
  };
7
- export declare const TabListContext: import("react").Context<TabListContextType>;
12
+ export declare const TabListContext: React.Context<TabListContextType>;
8
13
  export declare const useTabListContext: () => TabListContextType;
package/lib/parts/tab-list.p.module.css.js CHANGED
@@ -1,19 +1,19 @@
1
1
  var styles = {
2
- "light": "_light_d01m1y_7",
3
- "dark": "_dark_d01m1y_10",
4
- "sizeM": "_sizeM_d01m1y_14",
5
- "sizeL": "_sizeL_d01m1y_17",
6
- "classic": "_classic_d01m1y_21",
7
- "rock": "_rock_d01m1y_24",
8
- "sparse": "_sparse_d01m1y_28",
9
- "short": "_short_d01m1y_32",
10
- "tabsContainer": "_tabsContainer_d01m1y_36",
11
- "indicator": "_indicator_d01m1y_46",
12
- "isIndicatorHidden": "_isIndicatorHidden_d01m1y_60",
13
- "iconLeft": "_iconLeft_d01m1y_66",
14
- "iconRight": "_iconRight_d01m1y_69",
15
- "tab": "_tab_d01m1y_36",
16
- "selected": "_selected_d01m1y_160",
17
- "icon": "_icon_d01m1y_66"
2
+ "light": "_light_j4p92r_7",
3
+ "dark": "_dark_j4p92r_10",
4
+ "sizeM": "_sizeM_j4p92r_14",
5
+ "sizeL": "_sizeL_j4p92r_17",
6
+ "classic": "_classic_j4p92r_21",
7
+ "rock": "_rock_j4p92r_24",
8
+ "sparse": "_sparse_j4p92r_28",
9
+ "short": "_short_j4p92r_32",
10
+ "tabsContainer": "_tabsContainer_j4p92r_36",
11
+ "indicator": "_indicator_j4p92r_46",
12
+ "isIndicatorHidden": "_isIndicatorHidden_j4p92r_61",
13
+ "iconLeft": "_iconLeft_j4p92r_67",
14
+ "iconRight": "_iconRight_j4p92r_70",
15
+ "tab": "_tab_j4p92r_36",
16
+ "selected": "_selected_j4p92r_161",
17
+ "icon": "_icon_j4p92r_67"
18
18
  };
19
19
  export { styles as default };
package/lib/parts/tab.js CHANGED
@@ -34,9 +34,11 @@ const Tab = /*#__PURE__*/forwardRef((_ref, ref) => {
34
34
  } = _ref;
35
35
  const {
36
36
  onChange,
37
- selectedId
37
+ selectedId,
38
+ rovingTabIndex
38
39
  } = useTabListContext();
39
40
  const selected = itemId === selectedId;
41
+ const resolvedTabIndex = typeof itemId === 'undefined' || itemId === rovingTabIndex?.currentTabStopId ? 0 : -1;
40
42
  return /*#__PURE__*/React.createElement(TabTag, { ...restProps,
41
43
  className: cn(styles.tab, selected && styles.selected, iconPosition === 'right' ? styles.iconRight : styles.iconLeft, className),
42
44
  onClick: e => {
@@ -47,17 +49,20 @@ const Tab = /*#__PURE__*/forwardRef((_ref, ref) => {
47
49
  onChange(value);
48
50
  },
49
51
  onKeyDown: e => {
50
- if (e.key === ' ') {
51
- e.target.click();
52
- e.preventDefault();
52
+ if (typeof itemId !== 'undefined') {
53
+ rovingTabIndex?.onTabKeyDown(e, itemId);
53
54
  }
54
55
 
55
- if (onKeyDown) {
56
- onKeyDown(e);
56
+ if (e.key === ' ' || e.key === 'Enter') {
57
+ e.currentTarget.click();
58
+ e.preventDefault();
57
59
  }
60
+
61
+ onKeyDown?.(e);
58
62
  },
59
63
  role: "tab",
60
- tabIndex: 0,
64
+ "aria-selected": selected,
65
+ tabIndex: resolvedTabIndex,
61
66
  ref: ref,
62
67
  "data-e2e": e2eId,
63
68
  "data-test": `tab${selected ? ' tab-selected' : ''}`,
package/lib/parts/use-roving-tab-index.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import React from 'react';
2
+ export declare const useRovingTabIndex: ({ selectedId, tabRefs }: {
3
+ selectedId?: number;
4
+ tabRefs?: React.MutableRefObject<Map<number, HTMLElement>>;
5
+ }) => {
6
+ currentTabStopId: number;
7
+ onTabKeyDown: (e: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>, itemId: number) => void;
8
+ };
package/lib/parts/use-roving-tab-index.js ADDED
@@ -0,0 +1,68 @@
1
+ import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
2
+ import React from 'react'; // eslint-disable-next-line complexity
3
+
4
+ const getNextItemId = _ref => {
5
+ let {
6
+ currentItemId,
7
+ itemsCount,
8
+ key
9
+ } = _ref;
10
+
11
+ if (itemsCount <= 0) {
12
+ return currentItemId;
13
+ }
14
+
15
+ if (key === 'Home') {
16
+ return 0;
17
+ }
18
+
19
+ if (key === 'End') {
20
+ return itemsCount - 1;
21
+ }
22
+
23
+ if (key === 'ArrowLeft') {
24
+ return currentItemId <= 0 ? itemsCount - 1 : currentItemId - 1;
25
+ }
26
+
27
+ if (key === 'ArrowRight') {
28
+ return currentItemId >= itemsCount - 1 ? 0 : currentItemId + 1;
29
+ }
30
+
31
+ return currentItemId;
32
+ };
33
+
34
+ const useRovingTabIndex = _ref2 => {
35
+ let {
36
+ selectedId,
37
+ tabRefs
38
+ } = _ref2;
39
+ const [currentTabStopId, setCurrentTabStopId] = React.useState(selectedId ?? 0);
40
+ React.useLayoutEffect(() => {
41
+ if (typeof selectedId === 'number') {
42
+ setCurrentTabStopId(selectedId);
43
+ }
44
+ }, [selectedId]);
45
+ const onTabKeyDown = React.useCallback((e, itemId) => {
46
+ var _context;
47
+
48
+ if (!_includesInstanceProperty(_context = ['ArrowLeft', 'ArrowRight', 'Home', 'End']).call(_context, e.key)) {
49
+ return;
50
+ }
51
+
52
+ const itemsCount = tabRefs?.current.size ?? 0;
53
+ const nextItemId = getNextItemId({
54
+ currentItemId: itemId,
55
+ itemsCount,
56
+ key: e.key
57
+ });
58
+ e.preventDefault();
59
+ setCurrentTabStopId(nextItemId);
60
+ tabRefs?.current.get(nextItemId)?.focus();
61
+ }, [tabRefs]);
62
+ return {
63
+ currentTabStopId,
64
+ onTabKeyDown
65
+ };
66
+ };
67
+
68
+ export { useRovingTabIndex };
package/lib/parts/use-scrollable-list.d.ts CHANGED
@@ -9,6 +9,7 @@ export declare const useScrollableList: <T>({ children, compareValues, value, Co
9
9
  selectedId: number;
10
10
  prepareDirectionScroller: (direction: 'left' | 'right') => () => void;
11
11
  activeNodeRef: React.MutableRefObject<HTMLElement>;
12
+ tabRefs: React.MutableRefObject<Map<number, HTMLElement>>;
12
13
  scrollableRef: React.MutableRefObject<HTMLDivElement>;
13
14
  containerRef: React.MutableRefObject<HTMLElement>;
14
15
  childrenWithValues: (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal)[];
package/lib/parts/use-scrollable-list.js CHANGED
@@ -117,6 +117,7 @@ const useScrollableList = _ref2 => {
117
117
  CompareItem
118
118
  } = _ref2;
119
119
  const activeNodeRef = useRef(null);
120
+ const tabRefs = useRef(new Map());
120
121
  const scrollableRef = useRef(null);
121
122
  const containerRef = useRef(null); // reset targeted element on scrolling by arrows
122
123
  // so on window resize there wouldn't scroll to it
@@ -132,6 +133,17 @@ const useScrollableList = _ref2 => {
132
133
  const onFocus = useCallback(e => {
133
134
  setTargetedEl(e.target);
134
135
  }, []);
136
+ const createTabRef = useCallback((itemId, isSelectedItem) => node => {
137
+ if (node) {
138
+ tabRefs.current.set(itemId, node);
139
+ } else {
140
+ tabRefs.current.delete(itemId);
141
+ }
142
+
143
+ if (isSelectedItem) {
144
+ activeNodeRef.current = node;
145
+ }
146
+ }, []);
135
147
  const [childrenWithValues, selectedId] = useMemo(() => {
136
148
  let counter = 0;
137
149
  let currentSelectedItemId = null;
@@ -149,6 +161,7 @@ const useScrollableList = _ref2 => {
149
161
  currentSelectedItemId = counter;
150
162
  }
151
163
 
164
+ const setTabRef = createTabRef(counter, isSelectedItem);
152
165
  const patchedItem = patchItemIfNeeded({
153
166
  child,
154
167
  itemId: counter,
@@ -161,7 +174,16 @@ const useScrollableList = _ref2 => {
161
174
 
162
175
  onFocus(e);
163
176
  },
164
- ref: isSelectedItem ? activeNodeRef : null
177
+ ref: node => {
178
+ setTabRef(node);
179
+ const childRef = child.ref;
180
+
181
+ if (typeof childRef === 'function') {
182
+ childRef(node);
183
+ } else if (childRef) {
184
+ childRef.current = node;
185
+ }
186
+ }
165
187
  });
166
188
  counter += 1;
167
189
  return patchedItem;
@@ -170,7 +192,7 @@ const useScrollableList = _ref2 => {
170
192
  }
171
193
  });
172
194
  return [React.Children.toArray(items), currentSelectedItemId];
173
- }, [children, value, compareValues, onFocus, CompareItem]);
195
+ }, [children, value, compareValues, onFocus, CompareItem, createTabRef]);
174
196
 
175
197
  const prepareDirectionScroller = direction => () => {
176
198
  const {
@@ -235,6 +257,7 @@ const useScrollableList = _ref2 => {
235
257
  selectedId,
236
258
  prepareDirectionScroller,
237
259
  activeNodeRef,
260
+ tabRefs,
238
261
  scrollableRef,
239
262
  containerRef,
240
263
  childrenWithValues,
package/lib/parts/with-scroll-arrows.d.ts CHANGED
@@ -13,6 +13,7 @@ export declare type WithScrollArrowsProps<T> = {
13
13
  export declare type WithScrollArrowsWrappedComponentProps<T> = {
14
14
  selectedId?: number;
15
15
  activeNodeRef?: React.MutableRefObject<HTMLElement>;
16
+ tabRefs?: React.MutableRefObject<Map<number, HTMLElement>>;
16
17
  value: T;
17
18
  onChange: (value: T) => void;
18
19
  children: React.ReactNode;
package/lib/parts/with-scroll-arrows.js CHANGED
@@ -28,6 +28,7 @@ const withScrollArrows = function (WrappedComponent, CompareItem) {
28
28
  selectedId,
29
29
  prepareDirectionScroller,
30
30
  activeNodeRef,
31
+ tabRefs,
31
32
  scrollableRef,
32
33
  containerRef,
33
34
  childrenWithValues,
@@ -67,6 +68,7 @@ const withScrollArrows = function (WrappedComponent, CompareItem) {
67
68
  }, /*#__PURE__*/React.createElement(WrappedComponent, {
68
69
  selectedId: selectedId,
69
70
  activeNodeRef: activeNodeRef,
71
+ tabRefs: tabRefs,
70
72
  value: value,
71
73
  onChange: onChange,
72
74
  theme: theme,
package/lib/parts/with-scroll-arrows.p.module.css.js CHANGED
@@ -1,14 +1,14 @@
1
1
  var styles = {
2
- "light": "_light_1j2arez_9",
3
- "dark": "_dark_1j2arez_12",
4
- "wrapper": "_wrapper_1j2arez_16",
5
- "scrollable": "_scrollable_1j2arez_23",
6
- "arrow": "_arrow_1j2arez_52",
7
- "shown": "_shown_1j2arez_72",
8
- "arrowLeft": "_arrowLeft_1j2arez_80",
9
- "arrowRight": "_arrowRight_1j2arez_85",
10
- "withLeftArrow": "_withLeftArrow_1j2arez_91",
11
- "withRightArrow": "_withRightArrow_1j2arez_100",
12
- "arrowButton": "_arrowButton_1j2arez_121"
2
+ "light": "_light_l17k0g_9",
3
+ "dark": "_dark_l17k0g_12",
4
+ "wrapper": "_wrapper_l17k0g_16",
5
+ "scrollable": "_scrollable_l17k0g_23",
6
+ "arrow": "_arrow_l17k0g_52",
7
+ "shown": "_shown_l17k0g_72",
8
+ "arrowLeft": "_arrowLeft_l17k0g_80",
9
+ "arrowRight": "_arrowRight_l17k0g_85",
10
+ "withLeftArrow": "_withLeftArrow_l17k0g_91",
11
+ "withRightArrow": "_withRightArrow_l17k0g_100",
12
+ "arrowButton": "_arrowButton_l17k0g_121"
13
13
  };
14
14
  export { styles as default };
package/lib/tab-list.d.ts CHANGED
@@ -18,7 +18,12 @@ export declare type InnerTabListProps = {
18
18
  'data-e2e'?: string;
19
19
  selectedId?: number;
20
20
  activeNodeRef?: React.MutableRefObject<HTMLElement>;
21
+ tabRefs?: React.MutableRefObject<Map<number, HTMLElement>>;
21
22
  containerRef?: React.MutableRefObject<HTMLDivElement>;
23
+ /** Optional a11y label for the tab list. Recommended to use either that or `aria-labelledby`. */
24
+ 'aria-label'?: string;
25
+ /** Optional a11y label reference for the tab list. Recommended to use either that or `aria-label`. */
26
+ 'aria-labelledby'?: string;
22
27
  };
23
28
  export declare const TabList: {
24
29
  <OT extends TabListValueType>({ compareValues, value, onChange, children, theme: themeFromProps, ["data-e2e"]: e2eId, ...restProps }: React.PropsWithChildren<import("./parts/with-scroll-arrows").WithScrollArrowsProps<OT> & {
@@ -28,6 +33,8 @@ export declare const TabList: {
28
33
  mode?: TabListModeType;
29
34
  short?: boolean;
30
35
  'data-e2e'?: string;
36
+ 'aria-label'?: string;
37
+ 'aria-labelledby'?: string;
31
38
  }>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
32
39
  displayName: string;
33
40
  };
package/lib/tab-list.js CHANGED
@@ -6,6 +6,7 @@ import Tab from './parts/tab.js';
6
6
  import { TabListContext } from './parts/tab-list-context.js';
7
7
  import { withScrollArrows } from './parts/with-scroll-arrows.js';
8
8
  import { useIndicator } from './parts/use-indicator.js';
9
+ import { useRovingTabIndex } from './parts/use-roving-tab-index.js';
9
10
  import styles from './parts/tab-list.p.module.css.js';
10
11
  const STYLES_SIZES = {
11
12
  m: styles.sizeM,
@@ -25,8 +26,11 @@ const InnerTabList = _ref => {
25
26
  children,
26
27
  selectedId,
27
28
  activeNodeRef,
29
+ tabRefs,
28
30
  containerRef,
29
- ['data-e2e']: e2eId
31
+ ['data-e2e']: e2eId,
32
+ ['aria-label']: ariaLabel,
33
+ ['aria-labelledby']: ariaLabelledBy
30
34
  } = _ref;
31
35
  const {
32
36
  indicator,
@@ -36,16 +40,24 @@ const InnerTabList = _ref => {
36
40
  containerRef,
37
41
  triggers: [value]
38
42
  });
43
+ const rovingTabIndex = useRovingTabIndex({
44
+ selectedId,
45
+ tabRefs
46
+ });
39
47
  return /*#__PURE__*/React.createElement(TabListContext.Provider, {
40
48
  value: {
41
49
  onChange,
42
- selectedId
50
+ selectedId,
51
+ rovingTabIndex
43
52
  }
44
53
  }, /*#__PURE__*/React.createElement("div", {
45
54
  className: cn(styles.tabsContainer, styles[theme], styles[mode], STYLES_SIZES[size], sparse && styles.sparse, short && styles.short, isIndicatorHidden && styles.isIndicatorHidden, className),
46
55
  "data-e2e": e2eId ? `${e2eId}__tabs-container` : null,
47
56
  "data-test": 'tab-list',
48
- ref: containerRef
57
+ ref: containerRef,
58
+ role: "tablist",
59
+ "aria-label": ariaLabel,
60
+ "aria-labelledby": ariaLabelledBy
49
61
  }, children, /*#__PURE__*/React.createElement("span", {
50
62
  style: indicator,
51
63
  className: styles.indicator
@@ -53,9 +65,7 @@ const InnerTabList = _ref => {
53
65
  };
54
66
 
55
67
  InnerTabList.displayName = 'TabList';
56
- const TabList = withScrollArrows(InnerTabList, Tab); // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
57
- // @ts-ignore
58
-
68
+ const TabList = withScrollArrows(InnerTabList, Tab);
59
69
  TabList.propTypes = {
60
70
  size: PropTypes.oneOf(['m', 'l']),
61
71
  sparse: PropTypes.bool,
@@ -66,6 +76,8 @@ TabList.propTypes = {
66
76
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.symbol, PropTypes.object]),
67
77
  onChange: PropTypes.func,
68
78
  compareValues: PropTypes.func,
69
- 'data-e2e': PropTypes.string
79
+ 'data-e2e': PropTypes.string,
80
+ 'aria-label': PropTypes.string,
81
+ 'aria-labelledby': PropTypes.string
70
82
  };
71
83
  export { TabList, TabList as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/tab-list",
3
- "version": "0.16.5",
3
+ "version": "0.17.0",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -16,7 +16,7 @@
16
16
  },
17
17
  "dependencies": {
18
18
  "@babel/runtime-corejs3": "^7.26.0",
19
- "@rescui/button": "^0.23.5",
19
+ "@rescui/button": "^0.24.0",
20
20
  "@rescui/use-resize-observer": "^0.3.0",
21
21
  "classnames": "^2.2.6"
22
22
  },
@@ -29,7 +29,7 @@
29
29
  "@rescui/colors": "^0.3.0",
30
30
  "@rescui/postcss-preset-library": "^0.2.2",
31
31
  "@rescui/scripts": "^0.5.1",
32
- "@rescui/typography": "^0.25.0",
32
+ "@rescui/typography": "^0.27.0",
33
33
  "@rescui/visual-regression": "^0.1.4"
34
34
  },
35
35
  "scripts": {
@@ -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": "59db2e6ea5eabdcabc035779df2611d0df5a0cbe"
40
+ "gitHead": "e9aedd97a4cc372540ec8d75dda4f122baacca10"
41
41
  }