@rescui/tab-list 0.8.1 → 0.9.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/index.css +170 -110
  2. package/lib/parts/separator.p.module.css.js +3 -3
  3. package/lib/parts/tab-list.p.module.css.js +18 -18
  4. package/lib/parts/with-scroll-arrows.d.ts +1 -3
  5. package/lib/parts/with-scroll-arrows.js +4 -15
  6. package/lib/parts/with-scroll-arrows.p.module.css.js +11 -10
  7. package/lib/tab-list.d.ts +1 -1
  8. package/lib/tab-list.js +0 -1
  9. package/package.json +2 -2
package/lib/index.css CHANGED
@@ -1,7 +1,7 @@
1
- ._wrapper_1md4d02_9{
1
+ ._wrapper_l6xeus_9{
2
2
  position:relative;
3
3
  }
4
- ._tabsContainer_1md4d02_13{
4
+ ._tabsContainer_l6xeus_13{
5
5
  position:relative;
6
6
 
7
7
  display:-webkit-box;
@@ -10,7 +10,7 @@
10
10
 
11
11
  display:flex;
12
12
  }
13
- ._indicator_1md4d02_19{
13
+ ._indicator_l6xeus_19{
14
14
  position:absolute;
15
15
  z-index:3;
16
16
  bottom:0;
@@ -23,21 +23,21 @@
23
23
  transition:left 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, width 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
24
24
  will-change:left, width;
25
25
  }
26
- ._light_1md4d02_31._classic_1md4d02_31 ._indicator_1md4d02_19{
26
+ ._light_l6xeus_31._classic_l6xeus_31 ._indicator_l6xeus_19{
27
27
  background-color:#6B57FF;
28
28
  background-color:var(--rs-color-primary-light-theme, #6B57FF);
29
29
  }
30
- ._dark_1md4d02_35._classic_1md4d02_31 ._indicator_1md4d02_19{
30
+ ._dark_l6xeus_35._classic_l6xeus_31 ._indicator_l6xeus_19{
31
31
  background-color:#8473FF;
32
32
  background-color:var(--rs-color-primary-dark-theme, #8473FF);
33
33
  }
34
- ._light_1md4d02_31._rock_1md4d02_39 ._indicator_1md4d02_19{
34
+ ._light_l6xeus_31._rock_l6xeus_39 ._indicator_l6xeus_19{
35
35
  background-color:#19191C;
36
36
  }
37
- ._dark_1md4d02_35._rock_1md4d02_39 ._indicator_1md4d02_19{
37
+ ._dark_l6xeus_35._rock_l6xeus_39 ._indicator_l6xeus_19{
38
38
  background-color:#FFFFFF;
39
39
  }
40
- ._tab_1md4d02_13{
40
+ ._tab_l6xeus_13{
41
41
  position:relative;
42
42
 
43
43
  display:-webkit-box;
@@ -81,19 +81,19 @@
81
81
  -moz-osx-font-smoothing:inherit;
82
82
  -webkit-appearance:none;
83
83
  }
84
- ._tab_1md4d02_13::-moz-focus-inner{
84
+ ._tab_l6xeus_13::-moz-focus-inner{
85
85
  padding:0;
86
86
 
87
87
  border:none;
88
88
  }
89
- ._tab_1md4d02_13:hover,
90
- ._tab_1md4d02_13:active,
91
- ._tab_1md4d02_13:focus{
89
+ ._tab_l6xeus_13:hover,
90
+ ._tab_l6xeus_13:active,
91
+ ._tab_l6xeus_13:focus{
92
92
  outline:none;
93
93
 
94
94
  text-decoration:none;
95
95
  }
96
- ._tab_1md4d02_13:after{
96
+ ._tab_l6xeus_13:after{
97
97
  position:absolute;
98
98
  bottom:0;
99
99
  left:0;
@@ -105,13 +105,13 @@
105
105
 
106
106
  background-color:transparent;
107
107
  }
108
- ._tab_1md4d02_13:after:focus[data-focus-method='key']{
108
+ ._tab_l6xeus_13:after:focus[data-focus-method='key']{
109
109
  opacity:0;
110
110
  }
111
- ._tab_1md4d02_13:hover:after{
111
+ ._tab_l6xeus_13:hover:after{
112
112
  height:1px;
113
113
  }
114
- ._sizeM_1md4d02_125 ._tab_1md4d02_13{
114
+ ._sizeM_l6xeus_125 ._tab_l6xeus_13{
115
115
  letter-spacing:0.0015em;
116
116
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
117
117
  font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
@@ -123,13 +123,13 @@
123
123
  line-height:24px;
124
124
  line-height:var(--rs-text-2-line-height, 24px);
125
125
  }
126
- ._rs-reset-letter-spacing_1md4d02_1 ._sizeM_1md4d02_125 ._tab_1md4d02_13{
126
+ ._rs-reset-letter-spacing_l6xeus_1 ._sizeM_l6xeus_125 ._tab_l6xeus_13{
127
127
  letter-spacing:normal;
128
128
  }
129
- ._sizeM_1md4d02_125 ._tab_1md4d02_13 {
129
+ ._sizeM_l6xeus_125 ._tab_l6xeus_13 {
130
130
  padding:8px 0;
131
131
  }
132
- ._sizeL_1md4d02_130 ._tab_1md4d02_13{
132
+ ._sizeL_l6xeus_130 ._tab_l6xeus_13{
133
133
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
134
134
  font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
135
135
  -webkit-font-feature-settings:"kern", "liga", "calt";
@@ -141,37 +141,37 @@
141
141
  line-height:var(--rs-text-1-line-height, 28px);
142
142
  padding:12px 0;
143
143
  }
144
- ._innerOffsetM_1md4d02_135 ._tab_1md4d02_13{
144
+ ._innerOffsetM_l6xeus_135 ._tab_l6xeus_13{
145
145
  margin-left:24px;
146
146
  }
147
147
  @media screen and (max-width: 640px){
148
- ._innerOffsetM_1md4d02_135 ._tab_1md4d02_13{
148
+ ._innerOffsetM_l6xeus_135 ._tab_l6xeus_13{
149
149
  margin-left:16px
150
150
  }
151
151
  }
152
- ._innerOffsetL_1md4d02_143 ._tab_1md4d02_13{
152
+ ._innerOffsetL_l6xeus_143 ._tab_l6xeus_13{
153
153
  margin-left:32px;
154
154
  }
155
155
  @media screen and (max-width: 640px){
156
- ._innerOffsetL_1md4d02_143 ._tab_1md4d02_13{
156
+ ._innerOffsetL_l6xeus_143 ._tab_l6xeus_13{
157
157
  margin-left:24px
158
158
  }
159
159
  }
160
- ._light_1md4d02_31 ._tab_1md4d02_13{
160
+ ._light_l6xeus_31 ._tab_l6xeus_13{
161
161
  color:rgba(25,25,28,0.7);
162
162
  }
163
- ._dark_1md4d02_35 ._tab_1md4d02_13{
163
+ ._dark_l6xeus_35 ._tab_l6xeus_13{
164
164
  color:rgba(255,255,255,0.7);
165
165
  }
166
- ._light_1md4d02_31 ._tab_1md4d02_13._short_1md4d02_159{
166
+ ._light_l6xeus_31 ._tab_l6xeus_13._short_l6xeus_159{
167
167
  -webkit-box-shadow:inset 0 -1px 0 rgba(25,25,28,0.3);
168
168
  box-shadow:inset 0 -1px 0 rgba(25,25,28,0.3);
169
169
  }
170
- ._dark_1md4d02_35 ._tab_1md4d02_13._short_1md4d02_159{
170
+ ._dark_l6xeus_35 ._tab_l6xeus_13._short_l6xeus_159{
171
171
  -webkit-box-shadow:inset 0 -1px 0 rgba(255,255,255,0.4);
172
172
  box-shadow:inset 0 -1px 0 rgba(255,255,255,0.4);
173
173
  }
174
- ._tab_1md4d02_13._selected_1md4d02_167{
174
+ ._tab_l6xeus_13._selected_l6xeus_167{
175
175
  z-index:1;
176
176
 
177
177
  cursor:default;
@@ -180,110 +180,110 @@
180
180
 
181
181
  transition:color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
182
182
  }
183
- ._tab_1md4d02_13._selected_1md4d02_167:after{
183
+ ._tab_l6xeus_13._selected_l6xeus_167:after{
184
184
  height:2px;
185
185
 
186
186
  -webkit-transition:background-color 0ms ease 300ms, height 0ms ease 300ms;
187
187
 
188
188
  transition:background-color 0ms ease 300ms, height 0ms ease 300ms;
189
189
  }
190
- ._light_1md4d02_31 ._tab_1md4d02_13:hover{
190
+ ._light_l6xeus_31 ._tab_l6xeus_13:hover{
191
191
  color:#19191C;
192
192
  }
193
- ._light_1md4d02_31 ._tab_1md4d02_13:hover:after{
193
+ ._light_l6xeus_31 ._tab_l6xeus_13:hover:after{
194
194
  background-color:#19191C;
195
195
  }
196
- ._dark_1md4d02_35 ._tab_1md4d02_13:hover{
196
+ ._dark_l6xeus_35 ._tab_l6xeus_13:hover{
197
197
  color:#FFFFFF;
198
198
  }
199
- ._dark_1md4d02_35 ._tab_1md4d02_13:hover:after{
199
+ ._dark_l6xeus_35 ._tab_l6xeus_13:hover:after{
200
200
  background-color:#FFFFFF;
201
201
  }
202
- ._light_1md4d02_31._rock_1md4d02_39 ._tab_1md4d02_13._selected_1md4d02_167{
202
+ ._light_l6xeus_31._rock_l6xeus_39 ._tab_l6xeus_13._selected_l6xeus_167{
203
203
  color:#19191C;
204
204
  }
205
- ._light_1md4d02_31._rock_1md4d02_39 ._tab_1md4d02_13._selected_1md4d02_167:after{
205
+ ._light_l6xeus_31._rock_l6xeus_39 ._tab_l6xeus_13._selected_l6xeus_167:after{
206
206
  background-color:#19191C;
207
207
  }
208
- ._dark_1md4d02_35._rock_1md4d02_39 ._tab_1md4d02_13._selected_1md4d02_167{
208
+ ._dark_l6xeus_35._rock_l6xeus_39 ._tab_l6xeus_13._selected_l6xeus_167{
209
209
  color:#FFFFFF;
210
210
  }
211
- ._dark_1md4d02_35._rock_1md4d02_39 ._tab_1md4d02_13._selected_1md4d02_167:after{
211
+ ._dark_l6xeus_35._rock_l6xeus_39 ._tab_l6xeus_13._selected_l6xeus_167:after{
212
212
  background-color:#FFFFFF;
213
213
  }
214
- ._light_1md4d02_31._classic_1md4d02_31 ._tab_1md4d02_13._selected_1md4d02_167{
214
+ ._light_l6xeus_31._classic_l6xeus_31 ._tab_l6xeus_13._selected_l6xeus_167{
215
215
  color:#6B57FF;
216
216
  color:var(--rs-color-primary-light-theme, #6B57FF);
217
217
  }
218
- ._light_1md4d02_31._classic_1md4d02_31 ._tab_1md4d02_13._selected_1md4d02_167:after{
218
+ ._light_l6xeus_31._classic_l6xeus_31 ._tab_l6xeus_13._selected_l6xeus_167:after{
219
219
  background-color:#6B57FF;
220
220
  background-color:var(--rs-color-primary-light-theme, #6B57FF);
221
221
  }
222
- ._dark_1md4d02_35._classic_1md4d02_31 ._tab_1md4d02_13._selected_1md4d02_167{
222
+ ._dark_l6xeus_35._classic_l6xeus_31 ._tab_l6xeus_13._selected_l6xeus_167{
223
223
  color:#8473FF;
224
224
  color:var(--rs-color-primary-dark-theme, #8473FF);
225
225
  }
226
- ._dark_1md4d02_35._classic_1md4d02_31 ._tab_1md4d02_13._selected_1md4d02_167:after{
226
+ ._dark_l6xeus_35._classic_l6xeus_31 ._tab_l6xeus_13._selected_l6xeus_167:after{
227
227
  background-color:#8473FF;
228
228
  background-color:var(--rs-color-primary-dark-theme, #8473FF);
229
229
  }
230
- ._light_1md4d02_31 ._tab_1md4d02_13:focus[data-focus-method='key']{
230
+ ._light_l6xeus_31 ._tab_l6xeus_13:focus[data-focus-method='key']{
231
231
  -webkit-box-shadow:inset #8979ff 0 -4px 0 0, inset #8979ff 0 4px 0 0, #8979ff -4px 0 0 0, #8979ff 4px 0 0 0;
232
232
  -webkit-box-shadow:inset var(--rs-color-primary-dim-light-theme, #8979ff) 0 -4px 0 0, inset var(--rs-color-primary-dim-light-theme, #8979ff) 0 4px 0 0, var(--rs-color-primary-dim-light-theme, #8979ff) -4px 0 0 0, var(--rs-color-primary-dim-light-theme, #8979ff) 4px 0 0 0;
233
233
  box-shadow:inset #8979ff 0 -4px 0 0, inset #8979ff 0 4px 0 0, #8979ff -4px 0 0 0, #8979ff 4px 0 0 0;
234
234
  box-shadow:inset var(--rs-color-primary-dim-light-theme, #8979ff) 0 -4px 0 0, inset var(--rs-color-primary-dim-light-theme, #8979ff) 0 4px 0 0, var(--rs-color-primary-dim-light-theme, #8979ff) -4px 0 0 0, var(--rs-color-primary-dim-light-theme, #8979ff) 4px 0 0 0;
235
235
  }
236
- ._light_1md4d02_31 ._tab_1md4d02_13:focus[data-focus-method='key']:after{
236
+ ._light_l6xeus_31 ._tab_l6xeus_13:focus[data-focus-method='key']:after{
237
237
  opacity:0;
238
238
  }
239
- ._dark_1md4d02_35 ._tab_1md4d02_13:focus[data-focus-method='key']{
239
+ ._dark_l6xeus_35 ._tab_l6xeus_13:focus[data-focus-method='key']{
240
240
  -webkit-box-shadow:inset #6f61d2 0 -4px 0 0, inset #6f61d2 0 4px 0 0, #6f61d2 -4px 0 0 0, #6f61d2 4px 0 0 0;
241
241
  -webkit-box-shadow:inset var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 -4px 0 0, inset var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 4px 0 0, var(--rs-color-primary-dim-dark-theme, #6f61d2) -4px 0 0 0, var(--rs-color-primary-dim-dark-theme, #6f61d2) 4px 0 0 0;
242
242
  box-shadow:inset #6f61d2 0 -4px 0 0, inset #6f61d2 0 4px 0 0, #6f61d2 -4px 0 0 0, #6f61d2 4px 0 0 0;
243
243
  box-shadow:inset var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 -4px 0 0, inset var(--rs-color-primary-dim-dark-theme, #6f61d2) 0 4px 0 0, var(--rs-color-primary-dim-dark-theme, #6f61d2) -4px 0 0 0, var(--rs-color-primary-dim-dark-theme, #6f61d2) 4px 0 0 0;
244
244
  }
245
- ._dark_1md4d02_35 ._tab_1md4d02_13:focus[data-focus-method='key']:after{
245
+ ._dark_l6xeus_35 ._tab_l6xeus_13:focus[data-focus-method='key']:after{
246
246
  opacity:0;
247
247
  }
248
- ._innerOffsetL_1md4d02_143 ._tab_1md4d02_13:first-child,
249
- ._innerOffsetM_1md4d02_135 ._tab_1md4d02_13:first-child{
248
+ ._innerOffsetL_l6xeus_143 ._tab_l6xeus_13:first-child,
249
+ ._innerOffsetM_l6xeus_135 ._tab_l6xeus_13:first-child{
250
250
  margin-left:0;
251
251
  }
252
252
  @media screen and (max-width: 640px){
253
- ._innerOffsetL_1md4d02_143 ._tab_1md4d02_13:first-child,
254
- ._innerOffsetM_1md4d02_135 ._tab_1md4d02_13:first-child{
253
+ ._innerOffsetL_l6xeus_143 ._tab_l6xeus_13:first-child,
254
+ ._innerOffsetM_l6xeus_135 ._tab_l6xeus_13:first-child{
255
255
  margin-left:0
256
256
  }
257
257
  }
258
- ._icon_1md4d02_269{
258
+ ._icon_l6xeus_269{
259
259
  -webkit-box-flex:0;
260
260
  -ms-flex:0 0;
261
261
  flex:0 0;
262
262
  -ms-flex-preferred-size:auto;
263
263
  flex-basis:auto;
264
264
  }
265
- ._sizeM_1md4d02_125 ._icon_1md4d02_269{
265
+ ._sizeM_l6xeus_125 ._icon_l6xeus_269{
266
266
  width:24px;
267
267
  height:24px;
268
268
  }
269
- ._sizeL_1md4d02_130 ._icon_1md4d02_269{
269
+ ._sizeL_l6xeus_130 ._icon_l6xeus_269{
270
270
  width:28px;
271
271
  height:28px;
272
272
  }
273
- ._sizeM_1md4d02_125 ._icon_1md4d02_269._iconLeft_1md4d02_283{
273
+ ._sizeM_l6xeus_125 ._icon_l6xeus_269._iconLeft_l6xeus_283{
274
274
  margin-right:4px;
275
275
  }
276
- ._sizeL_1md4d02_130 ._icon_1md4d02_269._iconLeft_1md4d02_283{
276
+ ._sizeL_l6xeus_130 ._icon_l6xeus_269._iconLeft_l6xeus_283{
277
277
  margin-right:8px;
278
278
  }
279
- ._sizeM_1md4d02_125 ._icon_1md4d02_269._iconRight_1md4d02_291{
279
+ ._sizeM_l6xeus_125 ._icon_l6xeus_269._iconRight_l6xeus_291{
280
280
  margin-left:4px;
281
281
  }
282
- ._sizeL_1md4d02_130 ._icon_1md4d02_269._iconRight_1md4d02_291{
282
+ ._sizeL_l6xeus_130 ._icon_l6xeus_269._iconRight_l6xeus_291{
283
283
  margin-left:8px;
284
284
  }
285
285
 
286
- ._wrapper_1mdyfsn_4{
286
+ ._wrapper_1ydc46x_4{
287
287
  position:relative;
288
288
 
289
289
  display:-webkit-box;
@@ -292,7 +292,7 @@
292
292
 
293
293
  display:flex;
294
294
  }
295
- ._scrollable_1mdyfsn_10{
295
+ ._scrollable_1ydc46x_10{
296
296
  display:-webkit-box;
297
297
  display:-ms-flexbox;
298
298
  display:flex;
@@ -301,7 +301,7 @@
301
301
  margin:-4px;
302
302
  padding:4px;
303
303
  }
304
- ._scrollable_1mdyfsn_10::after{
304
+ ._scrollable_1ydc46x_10::after{
305
305
  display:block;
306
306
 
307
307
  height:100%;
@@ -310,39 +310,15 @@
310
310
 
311
311
  content:'';
312
312
  }
313
- ._scrollable_1mdyfsn_10 {
313
+ ._scrollable_1ydc46x_10 {
314
314
 
315
315
  -ms-overflow-style:none;
316
316
  scrollbar-width:none;
317
317
  }
318
- ._scrollable_1mdyfsn_10::-webkit-scrollbar{
318
+ ._scrollable_1ydc46x_10::-webkit-scrollbar{
319
319
  display:none;
320
320
  }
321
- ._arrowShadow_1mdyfsn_39{
322
- position:absolute;
323
- top:0;
324
-
325
- overflow:hidden;
326
- width:25px;
327
- height:100%;
328
-
329
- pointer-events:none;
330
- }
331
- ._arrowShadow_1mdyfsn_39::before{
332
- position:absolute;
333
-
334
- display:block;
335
-
336
- width:100%;
337
- height:100%;
338
-
339
- content:'';
340
-
341
- -webkit-box-shadow:0 0 12px 12px currentColor;
342
-
343
- box-shadow:0 0 12px 12px currentColor;
344
- }
345
- ._arrow_1mdyfsn_39{
321
+ ._arrow_1ydc46x_39{
346
322
  position:absolute;
347
323
  z-index:2;
348
324
  top:50%;
@@ -362,21 +338,21 @@
362
338
 
363
339
  pointer-events:none;
364
340
 
341
+ background-color:transparent;
342
+
365
343
  -webkit-transition:opacity 0.15s ease-out;
366
344
 
367
345
  transition:opacity 0.15s ease-out;
368
346
  -webkit-transform:translateY(-50%);
369
347
  transform:translateY(-50%);
370
348
  }
371
- ._light_1mdyfsn_82 ._arrow_1mdyfsn_39{
349
+ ._light_1ydc46x_58 ._arrow_1ydc46x_39{
372
350
  color:#FFFFFF;
373
- background-color:#FFFFFF;
374
351
  }
375
- ._dark_1mdyfsn_86 ._arrow_1mdyfsn_39{
352
+ ._dark_1ydc46x_61 ._arrow_1ydc46x_39{
376
353
  color:#19191C;
377
- background-color:#19191C;
378
354
  }
379
- ._arrow_1mdyfsn_39._shown_1mdyfsn_91{
355
+ ._arrow_1ydc46x_39._shown_1ydc46x_65{
380
356
  opacity:1;
381
357
 
382
358
  pointer-events:auto;
@@ -385,36 +361,120 @@
385
361
 
386
362
  transition:opacity 0.15s ease-in;
387
363
  }
388
- ._arrow_1mdyfsn_39._arrowLeft_1mdyfsn_99{
364
+ ._arrow_1ydc46x_39._arrowLeft_1ydc46x_73{
389
365
  left:-5px;
390
366
  }
391
- ._arrow_1mdyfsn_39._arrowLeft_1mdyfsn_99 ._arrowShadow_1mdyfsn_39{
392
- right:-24px;
393
- }
394
- ._arrow_1mdyfsn_39._arrowLeft_1mdyfsn_99 ._arrowShadow_1mdyfsn_39::before{
395
- left:-100%;
396
- }
397
- ._arrow_1mdyfsn_39._arrowRight_1mdyfsn_112{
367
+ ._arrow_1ydc46x_39._arrowRight_1ydc46x_78{
398
368
  right:-5px;
399
369
  }
400
- ._arrow_1mdyfsn_39._arrowRight_1mdyfsn_112 ._arrowShadow_1mdyfsn_39{
401
- left:-24px;
402
- }
403
- ._arrow_1mdyfsn_39._arrowRight_1mdyfsn_112 ._arrowShadow_1mdyfsn_39::before{
404
- right:-100%;
405
- }
406
- ._arrowButton_1mdyfsn_126{
370
+ ._withLeftArrow_1ydc46x_84{
371
+ -webkit-mask-image:-webkit-gradient(
372
+ linear,
373
+ left top, right top,
374
+ from(rgba(0, 0, 0, 0)),
375
+ color-stop(32px, rgba(0, 0, 0, 0)),
376
+ to(black)
377
+ );
378
+ -webkit-mask-image:linear-gradient(
379
+ to right,
380
+ rgba(0, 0, 0, 0) 0%,
381
+ rgba(0, 0, 0, 0) 32px,
382
+ black 56px
383
+ );
384
+ mask-image:-webkit-gradient(
385
+ linear,
386
+ left top, right top,
387
+ from(rgba(0, 0, 0, 0)),
388
+ color-stop(32px, rgba(0, 0, 0, 0)),
389
+ to(black)
390
+ );
391
+ mask-image:linear-gradient(
392
+ to right,
393
+ rgba(0, 0, 0, 0) 0%,
394
+ rgba(0, 0, 0, 0) 32px,
395
+ black 56px
396
+ );
397
+ }
398
+ ._withRightArrow_1ydc46x_93{
399
+ -webkit-mask-image:-webkit-gradient(
400
+ linear,
401
+ right top, left top,
402
+ from(rgba(0, 0, 0, 0)),
403
+ color-stop(32px, rgba(0, 0, 0, 0)),
404
+ to(black)
405
+ );
406
+ -webkit-mask-image:linear-gradient(
407
+ to left,
408
+ rgba(0, 0, 0, 0) 0%,
409
+ rgba(0, 0, 0, 0) 32px,
410
+ black 56px
411
+ );
412
+ mask-image:-webkit-gradient(
413
+ linear,
414
+ right top, left top,
415
+ from(rgba(0, 0, 0, 0)),
416
+ color-stop(32px, rgba(0, 0, 0, 0)),
417
+ to(black)
418
+ );
419
+ mask-image:linear-gradient(
420
+ to left,
421
+ rgba(0, 0, 0, 0) 0%,
422
+ rgba(0, 0, 0, 0) 32px,
423
+ black 56px
424
+ );
425
+ }
426
+ ._withLeftArrow_1ydc46x_84._withRightArrow_1ydc46x_93{
427
+ -webkit-mask-image:-webkit-gradient(
428
+ linear,
429
+ left top, right top,
430
+ from(rgba(0, 0, 0, 0)),
431
+ color-stop(32px, rgba(0, 0, 0, 0)),
432
+ color-stop(black),
433
+ color-stop(black),
434
+ color-stop(rgba(0, 0, 0, 0)),
435
+ to(rgba(0, 0, 0, 0))
436
+ );
437
+ -webkit-mask-image:linear-gradient(
438
+ to right,
439
+ rgba(0, 0, 0, 0) 0%,
440
+ rgba(0, 0, 0, 0) 32px,
441
+ black 56px,
442
+ black calc(100% - 56px),
443
+ rgba(0, 0, 0, 0) calc(100% - 32px),
444
+ rgba(0, 0, 0, 0) 100%
445
+ );
446
+ mask-image:-webkit-gradient(
447
+ linear,
448
+ left top, right top,
449
+ from(rgba(0, 0, 0, 0)),
450
+ color-stop(32px, rgba(0, 0, 0, 0)),
451
+ color-stop(black),
452
+ color-stop(black),
453
+ color-stop(rgba(0, 0, 0, 0)),
454
+ to(rgba(0, 0, 0, 0))
455
+ );
456
+ mask-image:linear-gradient(
457
+ to right,
458
+ rgba(0, 0, 0, 0) 0%,
459
+ rgba(0, 0, 0, 0) 32px,
460
+ black 56px,
461
+ black calc(100% - 56px),
462
+ rgba(0, 0, 0, 0) calc(100% - 32px),
463
+ rgba(0, 0, 0, 0) 100%
464
+ );
465
+ }
466
+ ._arrowButton_1ydc46x_114{
407
467
  cursor:pointer;
408
468
  }
409
469
 
410
- ._separator_1didovy_3{
470
+ ._separator_1p952ag_3{
411
471
  position:relative;
412
472
  z-index:2;
413
473
 
414
474
  width:100%;
415
475
  }
416
476
 
417
- ._separator_1didovy_3:after{
477
+ ._separator_1p952ag_3:after{
418
478
  position:absolute;
419
479
  right:0;
420
480
  bottom:0;
@@ -424,9 +484,9 @@
424
484
 
425
485
  content:'';
426
486
  }
427
- ._light_1didovy_22:after{
487
+ ._light_1p952ag_22:after{
428
488
  background-color:rgba(25,25,28,0.3);
429
489
  }
430
- ._dark_1didovy_28:after{
490
+ ._dark_1p952ag_28:after{
431
491
  background-color:rgba(255,255,255,0.4);
432
492
  }
package/lib/parts/separator.p.module.css.js CHANGED
@@ -1,6 +1,6 @@
1
1
  var styles = {
2
- "separator": "_separator_1didovy_3",
3
- "light": "_light_1didovy_22",
4
- "dark": "_dark_1didovy_28"
2
+ "separator": "_separator_1p952ag_3",
3
+ "light": "_light_1p952ag_22",
4
+ "dark": "_dark_1p952ag_28"
5
5
  };
6
6
  export { styles as default };
package/lib/parts/tab-list.p.module.css.js CHANGED
@@ -1,21 +1,21 @@
1
1
  var styles = {
2
- "wrapper": "_wrapper_1md4d02_9",
3
- "tabsContainer": "_tabsContainer_1md4d02_13",
4
- "indicator": "_indicator_1md4d02_19",
5
- "light": "_light_1md4d02_31",
6
- "classic": "_classic_1md4d02_31",
7
- "dark": "_dark_1md4d02_35",
8
- "rock": "_rock_1md4d02_39",
9
- "tab": "_tab_1md4d02_13",
10
- "sizeM": "_sizeM_1md4d02_125",
11
- "rs-reset-letter-spacing": "_rs-reset-letter-spacing_1md4d02_1",
12
- "sizeL": "_sizeL_1md4d02_130",
13
- "innerOffsetM": "_innerOffsetM_1md4d02_135",
14
- "innerOffsetL": "_innerOffsetL_1md4d02_143",
15
- "short": "_short_1md4d02_159",
16
- "selected": "_selected_1md4d02_167",
17
- "icon": "_icon_1md4d02_269",
18
- "iconLeft": "_iconLeft_1md4d02_283",
19
- "iconRight": "_iconRight_1md4d02_291"
2
+ "wrapper": "_wrapper_l6xeus_9",
3
+ "tabsContainer": "_tabsContainer_l6xeus_13",
4
+ "indicator": "_indicator_l6xeus_19",
5
+ "light": "_light_l6xeus_31",
6
+ "classic": "_classic_l6xeus_31",
7
+ "dark": "_dark_l6xeus_35",
8
+ "rock": "_rock_l6xeus_39",
9
+ "tab": "_tab_l6xeus_13",
10
+ "sizeM": "_sizeM_l6xeus_125",
11
+ "rs-reset-letter-spacing": "_rs-reset-letter-spacing_l6xeus_1",
12
+ "sizeL": "_sizeL_l6xeus_130",
13
+ "innerOffsetM": "_innerOffsetM_l6xeus_135",
14
+ "innerOffsetL": "_innerOffsetL_l6xeus_143",
15
+ "short": "_short_l6xeus_159",
16
+ "selected": "_selected_l6xeus_167",
17
+ "icon": "_icon_l6xeus_269",
18
+ "iconLeft": "_iconLeft_l6xeus_283",
19
+ "iconRight": "_iconRight_l6xeus_291"
20
20
  };
21
21
  export { styles as default };
package/lib/parts/with-scroll-arrows.d.ts CHANGED
@@ -3,8 +3,6 @@ import { Theme } from '@rescui/ui-contexts';
3
3
  import { ScrollableListCompareValueType } from './use-scrollable-list';
4
4
  export declare type WithScrollArrowsProps<T> = {
5
5
  theme?: Theme;
6
- /** Custom background color for the arrows */
7
- arrowBackgroundColor?: string;
8
6
  value: T;
9
7
  /** @ignore */
10
8
  compareValues?: ScrollableListCompareValueType<T>;
@@ -23,7 +21,7 @@ export declare type WithScrollArrowsWrappedComponentProps<T> = {
23
21
  };
24
22
  declare type OmittedWrappedComponentProps<P, T> = Omit<P, keyof WithScrollArrowsWrappedComponentProps<T>>;
25
23
  export declare const withScrollArrows: <T, P extends WithScrollArrowsWrappedComponentProps<T>>(WrappedComponent: React.FC<WithScrollArrowsWrappedComponentProps<T>>, CompareItem: React.ElementType, arrowHeight?: string) => {
26
- <OT extends T>({ compareValues, value, onChange, children, theme: themeFromProps, arrowBackgroundColor, ["data-e2e"]: e2eId, ...restProps }: React.PropsWithChildren<WithScrollArrowsProps<OT> & OmittedWrappedComponentProps<P, OT>>): React.ReactElement | null;
24
+ <OT extends T>({ compareValues, value, onChange, children, theme: themeFromProps, ["data-e2e"]: e2eId, ...restProps }: React.PropsWithChildren<WithScrollArrowsProps<OT> & OmittedWrappedComponentProps<P, OT>>): React.ReactElement | null;
27
25
  displayName: string;
28
26
  };
29
27
  export {};
package/lib/parts/with-scroll-arrows.js CHANGED
@@ -7,7 +7,7 @@ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-sta
7
7
  import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
8
8
  import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
9
9
  import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
10
- var _excluded = ["compareValues", "value", "onChange", "children", "theme", "arrowBackgroundColor", "data-e2e"];
10
+ var _excluded = ["compareValues", "value", "onChange", "children", "theme", "data-e2e"];
11
11
  import "core-js/modules/es.function.name.js";
12
12
 
13
13
  function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -36,7 +36,6 @@ var withScrollArrows = function withScrollArrows(WrappedComponent, CompareItem)
36
36
  onChange = _ref.onChange,
37
37
  children = _ref.children,
38
38
  themeFromProps = _ref.theme,
39
- arrowBackgroundColor = _ref.arrowBackgroundColor,
40
39
  e2eId = _ref['data-e2e'],
41
40
  restProps = _objectWithoutProperties(_ref, _excluded);
42
41
 
@@ -57,15 +56,9 @@ var withScrollArrows = function withScrollArrows(WrappedComponent, CompareItem)
57
56
  showLeftArrow = _useScrollableList.showLeftArrow,
58
57
  showRightArrow = _useScrollableList.showRightArrow;
59
58
 
60
- var arrowBackgroundStyles = arrowBackgroundColor ? {
61
- backgroundColor: arrowBackgroundColor,
62
- color: arrowBackgroundColor
63
- } : {};
64
-
65
- var arrowStyles = _objectSpread({
59
+ var arrowStyles = {
66
60
  height: arrowHeight
67
- }, arrowBackgroundStyles);
68
-
61
+ };
69
62
  return /*#__PURE__*/React.createElement("div", {
70
63
  className: cn(styles.wrapper, styles[theme])
71
64
  }, /*#__PURE__*/React.createElement("div", {
@@ -82,10 +75,8 @@ var withScrollArrows = function withScrollArrows(WrappedComponent, CompareItem)
82
75
  size: "s",
83
76
  "data-e2e": e2eId ? "".concat(e2eId, "__left-arrow") : null,
84
77
  "data-test": 'scrollable-list-arrow-left'
85
- }), /*#__PURE__*/React.createElement("div", {
86
- className: styles.arrowShadow
87
78
  })), /*#__PURE__*/React.createElement("div", {
88
- className: styles.scrollable,
79
+ className: cn(styles.scrollable, showLeftArrow && styles.withLeftArrow, showRightArrow && styles.withRightArrow),
89
80
  ref: scrollableRef,
90
81
  tabIndex: -1
91
82
  }, /*#__PURE__*/React.createElement(WrappedComponent, _objectSpread({
@@ -110,8 +101,6 @@ var withScrollArrows = function withScrollArrows(WrappedComponent, CompareItem)
110
101
  size: "s",
111
102
  "data-e2e": e2eId ? "".concat(e2eId, "__right-arrow") : null,
112
103
  "data-test": 'scrollable-list-arrow-right'
113
- }), /*#__PURE__*/React.createElement("div", {
114
- className: styles.arrowShadow
115
104
  })));
116
105
  };
117
106
 
package/lib/parts/with-scroll-arrows.p.module.css.js CHANGED
@@ -1,13 +1,14 @@
1
1
  var styles = {
2
- "wrapper": "_wrapper_1mdyfsn_4",
3
- "scrollable": "_scrollable_1mdyfsn_10",
4
- "arrowShadow": "_arrowShadow_1mdyfsn_39",
5
- "arrow": "_arrow_1mdyfsn_39",
6
- "light": "_light_1mdyfsn_82",
7
- "dark": "_dark_1mdyfsn_86",
8
- "shown": "_shown_1mdyfsn_91",
9
- "arrowLeft": "_arrowLeft_1mdyfsn_99",
10
- "arrowRight": "_arrowRight_1mdyfsn_112",
11
- "arrowButton": "_arrowButton_1mdyfsn_126"
2
+ "wrapper": "_wrapper_1ydc46x_4",
3
+ "scrollable": "_scrollable_1ydc46x_10",
4
+ "arrow": "_arrow_1ydc46x_39",
5
+ "light": "_light_1ydc46x_58",
6
+ "dark": "_dark_1ydc46x_61",
7
+ "shown": "_shown_1ydc46x_65",
8
+ "arrowLeft": "_arrowLeft_1ydc46x_73",
9
+ "arrowRight": "_arrowRight_1ydc46x_78",
10
+ "withLeftArrow": "_withLeftArrow_1ydc46x_84",
11
+ "withRightArrow": "_withRightArrow_1ydc46x_93",
12
+ "arrowButton": "_arrowButton_1ydc46x_114"
12
13
  };
13
14
  export { styles as default };
package/lib/tab-list.d.ts CHANGED
@@ -21,7 +21,7 @@ export declare type InnerTabListProps = {
21
21
  containerRef?: React.MutableRefObject<HTMLDivElement>;
22
22
  };
23
23
  export declare const TabList: {
24
- <OT extends TabListValueType>({ compareValues, value, onChange, children, theme: themeFromProps, arrowBackgroundColor, ["data-e2e"]: e2eId, ...restProps }: React.PropsWithChildren<import("./parts/with-scroll-arrows").WithScrollArrowsProps<OT> & {
24
+ <OT extends TabListValueType>({ compareValues, value, onChange, children, theme: themeFromProps, ["data-e2e"]: e2eId, ...restProps }: React.PropsWithChildren<import("./parts/with-scroll-arrows").WithScrollArrowsProps<OT> & {
25
25
  size?: TabListSizeType;
26
26
  sparse?: boolean;
27
27
  className?: string;
package/lib/tab-list.js CHANGED
@@ -65,7 +65,6 @@ TabList.propTypes = {
65
65
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.symbol, PropTypes.object]),
66
66
  onChange: PropTypes.func,
67
67
  compareValues: PropTypes.func,
68
- arrowBackgroundColor: PropTypes.string,
69
68
  'data-e2e': PropTypes.string
70
69
  };
71
70
  export { TabList, TabList as default };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/tab-list",
3
- "version": "0.8.1",
3
+ "version": "0.9.0",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
@@ -37,5 +37,5 @@
37
37
  "scripts": {
38
38
  "build": "rescui-scripts build"
39
39
  },
40
- "gitHead": "0aff4c2dbeda999f17acac6d77eb38864c28cc04"
40
+ "gitHead": "088bff4ebed738c1fa0fdfb1c15be69f2651a9e7"
41
41
  }