@rescui/tab-list 0.5.1 → 0.7.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.
- package/lib/index.css +97 -493
- package/lib/index.d.ts +0 -2
- package/lib/index.js +0 -2
- package/lib/parts/separator.module.pcss.js +3 -3
- package/lib/parts/tab-list.module.pcss.js +18 -18
- package/lib/parts/with-scroll-arrows.d.ts +1 -1
- package/lib/parts/with-scroll-arrows.module.pcss.js +10 -10
- package/lib/tab-list.d.ts +1 -1
- package/package.json +6 -6
- package/lib/parts/chip-list-context.d.ts +0 -8
- package/lib/parts/chip-list-context.js +0 -12
- package/lib/parts/chip-list.d.ts +0 -32
- package/lib/parts/chip-list.js +0 -58
- package/lib/parts/chip-list.module.pcss.js +0 -21
- package/lib/parts/chip.d.ts +0 -26
- package/lib/parts/chip.js +0 -81
package/lib/index.css
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
.
|
|
1
|
+
._wrapper_1oppjhq_9{
|
|
2
2
|
position:relative;
|
|
3
3
|
}
|
|
4
|
-
.
|
|
4
|
+
._tabsContainer_1oppjhq_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
|
-
.
|
|
13
|
+
._indicator_1oppjhq_19{
|
|
14
14
|
position:absolute;
|
|
15
15
|
z-index:3;
|
|
16
16
|
bottom:0;
|
|
@@ -25,21 +25,21 @@
|
|
|
25
25
|
width 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
26
26
|
will-change:left, width;
|
|
27
27
|
}
|
|
28
|
-
.
|
|
29
|
-
background-color:#
|
|
30
|
-
background-color:var(--rs-color-primary-light-theme, #
|
|
28
|
+
._light_1oppjhq_31._classic_1oppjhq_31 ._indicator_1oppjhq_19{
|
|
29
|
+
background-color:#6B57FF;
|
|
30
|
+
background-color:var(--rs-color-primary-light-theme, #6B57FF);
|
|
31
31
|
}
|
|
32
|
-
.
|
|
33
|
-
background-color:#
|
|
34
|
-
background-color:var(--rs-color-primary-dark-theme, #
|
|
32
|
+
._dark_1oppjhq_35._classic_1oppjhq_31 ._indicator_1oppjhq_19{
|
|
33
|
+
background-color:#8473FF;
|
|
34
|
+
background-color:var(--rs-color-primary-dark-theme, #8473FF);
|
|
35
35
|
}
|
|
36
|
-
.
|
|
36
|
+
._light_1oppjhq_31._rock_1oppjhq_39 ._indicator_1oppjhq_19{
|
|
37
37
|
background-color:#19191C;
|
|
38
38
|
}
|
|
39
|
-
.
|
|
39
|
+
._dark_1oppjhq_35._rock_1oppjhq_39 ._indicator_1oppjhq_19{
|
|
40
40
|
background-color:#FFFFFF;
|
|
41
41
|
}
|
|
42
|
-
.
|
|
42
|
+
._tab_1oppjhq_13{
|
|
43
43
|
position:relative;
|
|
44
44
|
|
|
45
45
|
display:-webkit-box;
|
|
@@ -66,14 +66,14 @@
|
|
|
66
66
|
cursor:pointer;
|
|
67
67
|
white-space:nowrap;
|
|
68
68
|
}
|
|
69
|
-
.
|
|
70
|
-
.
|
|
71
|
-
.
|
|
69
|
+
._tab_1oppjhq_13:hover,
|
|
70
|
+
._tab_1oppjhq_13:active,
|
|
71
|
+
._tab_1oppjhq_13:focus{
|
|
72
72
|
outline:none;
|
|
73
73
|
|
|
74
74
|
text-decoration:none;
|
|
75
75
|
}
|
|
76
|
-
.
|
|
76
|
+
._tab_1oppjhq_13:after{
|
|
77
77
|
position:absolute;
|
|
78
78
|
bottom:0;
|
|
79
79
|
left:0;
|
|
@@ -85,16 +85,14 @@
|
|
|
85
85
|
|
|
86
86
|
background-color:transparent;
|
|
87
87
|
}
|
|
88
|
-
.
|
|
88
|
+
._tab_1oppjhq_13:after:focus[data-focus-method='key']{
|
|
89
89
|
opacity:0;
|
|
90
90
|
}
|
|
91
|
-
.
|
|
91
|
+
._tab_1oppjhq_13:hover:after{
|
|
92
92
|
height:1px;
|
|
93
93
|
}
|
|
94
|
-
.
|
|
94
|
+
._sizeM_1oppjhq_99 ._tab_1oppjhq_13{
|
|
95
95
|
letter-spacing:0.0015em;
|
|
96
|
-
color:rgba(25,25,28,0.7);
|
|
97
|
-
color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
|
|
98
96
|
font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
|
|
99
97
|
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));
|
|
100
98
|
font-size:16px;
|
|
@@ -103,15 +101,13 @@
|
|
|
103
101
|
line-height:24px;
|
|
104
102
|
line-height:var(--rs-text-2-line-height, 24px);
|
|
105
103
|
}
|
|
106
|
-
._rs-reset-letter-
|
|
104
|
+
._rs-reset-letter-spacing_1oppjhq_1 ._sizeM_1oppjhq_99 ._tab_1oppjhq_13{
|
|
107
105
|
letter-spacing:normal;
|
|
108
106
|
}
|
|
109
|
-
.
|
|
107
|
+
._sizeM_1oppjhq_99 ._tab_1oppjhq_13 {
|
|
110
108
|
padding:8px 0;
|
|
111
109
|
}
|
|
112
|
-
.
|
|
113
|
-
color:rgba(25,25,28,0.7);
|
|
114
|
-
color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
|
|
110
|
+
._sizeL_1oppjhq_104 ._tab_1oppjhq_13{
|
|
115
111
|
font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
|
|
116
112
|
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));
|
|
117
113
|
font-size:19px;
|
|
@@ -121,37 +117,37 @@
|
|
|
121
117
|
line-height:var(--rs-text-1-line-height, 28px);
|
|
122
118
|
padding:12px 0;
|
|
123
119
|
}
|
|
124
|
-
.
|
|
120
|
+
._innerOffsetM_1oppjhq_109 ._tab_1oppjhq_13{
|
|
125
121
|
margin-left:24px;
|
|
126
122
|
}
|
|
127
123
|
@media screen and (max-width: 640px){
|
|
128
|
-
.
|
|
124
|
+
._innerOffsetM_1oppjhq_109 ._tab_1oppjhq_13{
|
|
129
125
|
margin-left:16px
|
|
130
126
|
}
|
|
131
127
|
}
|
|
132
|
-
.
|
|
128
|
+
._innerOffsetL_1oppjhq_117 ._tab_1oppjhq_13{
|
|
133
129
|
margin-left:32px;
|
|
134
130
|
}
|
|
135
131
|
@media screen and (max-width: 640px){
|
|
136
|
-
.
|
|
132
|
+
._innerOffsetL_1oppjhq_117 ._tab_1oppjhq_13{
|
|
137
133
|
margin-left:24px
|
|
138
134
|
}
|
|
139
135
|
}
|
|
140
|
-
.
|
|
136
|
+
._light_1oppjhq_31 ._tab_1oppjhq_13{
|
|
141
137
|
color:rgba(25,25,28,0.7);
|
|
142
138
|
}
|
|
143
|
-
.
|
|
139
|
+
._dark_1oppjhq_35 ._tab_1oppjhq_13{
|
|
144
140
|
color:rgba(255,255,255,0.7);
|
|
145
141
|
}
|
|
146
|
-
.
|
|
142
|
+
._light_1oppjhq_31 ._tab_1oppjhq_13._short_1oppjhq_133{
|
|
147
143
|
-webkit-box-shadow:inset 0 -1px 0 rgba(25,25,28,0.3);
|
|
148
144
|
box-shadow:inset 0 -1px 0 rgba(25,25,28,0.3);
|
|
149
145
|
}
|
|
150
|
-
.
|
|
146
|
+
._dark_1oppjhq_35 ._tab_1oppjhq_13._short_1oppjhq_133{
|
|
151
147
|
-webkit-box-shadow:inset 0 -1px 0 rgba(255,255,255,0.4);
|
|
152
148
|
box-shadow:inset 0 -1px 0 rgba(255,255,255,0.4);
|
|
153
149
|
}
|
|
154
|
-
.
|
|
150
|
+
._tab_1oppjhq_13._selected_1oppjhq_141{
|
|
155
151
|
z-index:1;
|
|
156
152
|
|
|
157
153
|
cursor:default;
|
|
@@ -160,110 +156,110 @@
|
|
|
160
156
|
|
|
161
157
|
transition:color 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
|
|
162
158
|
}
|
|
163
|
-
.
|
|
159
|
+
._tab_1oppjhq_13._selected_1oppjhq_141:after{
|
|
164
160
|
height:2px;
|
|
165
161
|
|
|
166
162
|
-webkit-transition:background-color 0ms ease 300ms, height 0ms ease 300ms;
|
|
167
163
|
|
|
168
164
|
transition:background-color 0ms ease 300ms, height 0ms ease 300ms;
|
|
169
165
|
}
|
|
170
|
-
.
|
|
166
|
+
._light_1oppjhq_31 ._tab_1oppjhq_13:hover{
|
|
171
167
|
color:#19191C;
|
|
172
168
|
}
|
|
173
|
-
.
|
|
169
|
+
._light_1oppjhq_31 ._tab_1oppjhq_13:hover:after{
|
|
174
170
|
background-color:#19191C;
|
|
175
171
|
}
|
|
176
|
-
.
|
|
172
|
+
._dark_1oppjhq_35 ._tab_1oppjhq_13:hover{
|
|
177
173
|
color:#FFFFFF;
|
|
178
174
|
}
|
|
179
|
-
.
|
|
175
|
+
._dark_1oppjhq_35 ._tab_1oppjhq_13:hover:after{
|
|
180
176
|
background-color:#FFFFFF;
|
|
181
177
|
}
|
|
182
|
-
.
|
|
178
|
+
._light_1oppjhq_31._rock_1oppjhq_39 ._tab_1oppjhq_13._selected_1oppjhq_141{
|
|
183
179
|
color:#19191C;
|
|
184
180
|
}
|
|
185
|
-
.
|
|
181
|
+
._light_1oppjhq_31._rock_1oppjhq_39 ._tab_1oppjhq_13._selected_1oppjhq_141:after{
|
|
186
182
|
background-color:#19191C;
|
|
187
183
|
}
|
|
188
|
-
.
|
|
184
|
+
._dark_1oppjhq_35._rock_1oppjhq_39 ._tab_1oppjhq_13._selected_1oppjhq_141{
|
|
189
185
|
color:#FFFFFF;
|
|
190
186
|
}
|
|
191
|
-
.
|
|
187
|
+
._dark_1oppjhq_35._rock_1oppjhq_39 ._tab_1oppjhq_13._selected_1oppjhq_141:after{
|
|
192
188
|
background-color:#FFFFFF;
|
|
193
189
|
}
|
|
194
|
-
.
|
|
195
|
-
color:#
|
|
196
|
-
color:var(--rs-color-primary-light-theme, #
|
|
190
|
+
._light_1oppjhq_31._classic_1oppjhq_31 ._tab_1oppjhq_13._selected_1oppjhq_141{
|
|
191
|
+
color:#6B57FF;
|
|
192
|
+
color:var(--rs-color-primary-light-theme, #6B57FF);
|
|
197
193
|
}
|
|
198
|
-
.
|
|
199
|
-
background-color:#
|
|
200
|
-
background-color:var(--rs-color-primary-light-theme, #
|
|
194
|
+
._light_1oppjhq_31._classic_1oppjhq_31 ._tab_1oppjhq_13._selected_1oppjhq_141:after{
|
|
195
|
+
background-color:#6B57FF;
|
|
196
|
+
background-color:var(--rs-color-primary-light-theme, #6B57FF);
|
|
201
197
|
}
|
|
202
|
-
.
|
|
203
|
-
color:#
|
|
204
|
-
color:var(--rs-color-primary-dark-theme, #
|
|
198
|
+
._dark_1oppjhq_35._classic_1oppjhq_31 ._tab_1oppjhq_13._selected_1oppjhq_141{
|
|
199
|
+
color:#8473FF;
|
|
200
|
+
color:var(--rs-color-primary-dark-theme, #8473FF);
|
|
205
201
|
}
|
|
206
|
-
.
|
|
207
|
-
background-color:#
|
|
208
|
-
background-color:var(--rs-color-primary-dark-theme, #
|
|
202
|
+
._dark_1oppjhq_35._classic_1oppjhq_31 ._tab_1oppjhq_13._selected_1oppjhq_141:after{
|
|
203
|
+
background-color:#8473FF;
|
|
204
|
+
background-color:var(--rs-color-primary-dark-theme, #8473FF);
|
|
209
205
|
}
|
|
210
|
-
.
|
|
211
|
-
-webkit-box-shadow:inset #
|
|
212
|
-
-webkit-box-shadow:inset var(--rs-color-primary-dim-light-theme, #
|
|
213
|
-
box-shadow:inset #
|
|
214
|
-
box-shadow:inset var(--rs-color-primary-dim-light-theme, #
|
|
206
|
+
._light_1oppjhq_31 ._tab_1oppjhq_13:focus[data-focus-method='key']{
|
|
207
|
+
-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;
|
|
208
|
+
-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;
|
|
209
|
+
box-shadow:inset #8979ff 0 -4px 0 0, inset #8979ff 0 4px 0 0, #8979ff -4px 0 0 0, #8979ff 4px 0 0 0;
|
|
210
|
+
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;
|
|
215
211
|
}
|
|
216
|
-
.
|
|
212
|
+
._light_1oppjhq_31 ._tab_1oppjhq_13:focus[data-focus-method='key']:after{
|
|
217
213
|
opacity:0;
|
|
218
214
|
}
|
|
219
|
-
.
|
|
220
|
-
-webkit-box-shadow:inset #
|
|
221
|
-
-webkit-box-shadow:inset var(--rs-color-primary-dim-dark-theme, #
|
|
222
|
-
box-shadow:inset #
|
|
223
|
-
box-shadow:inset var(--rs-color-primary-dim-dark-theme, #
|
|
215
|
+
._dark_1oppjhq_35 ._tab_1oppjhq_13:focus[data-focus-method='key']{
|
|
216
|
+
-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;
|
|
217
|
+
-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;
|
|
218
|
+
box-shadow:inset #6f61d2 0 -4px 0 0, inset #6f61d2 0 4px 0 0, #6f61d2 -4px 0 0 0, #6f61d2 4px 0 0 0;
|
|
219
|
+
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;
|
|
224
220
|
}
|
|
225
|
-
.
|
|
221
|
+
._dark_1oppjhq_35 ._tab_1oppjhq_13:focus[data-focus-method='key']:after{
|
|
226
222
|
opacity:0;
|
|
227
223
|
}
|
|
228
|
-
.
|
|
229
|
-
.
|
|
224
|
+
._innerOffsetL_1oppjhq_117 ._tab_1oppjhq_13:first-of-type,
|
|
225
|
+
._innerOffsetM_1oppjhq_109 ._tab_1oppjhq_13:first-of-type{
|
|
230
226
|
margin-left:0;
|
|
231
227
|
}
|
|
232
228
|
@media screen and (max-width: 640px){
|
|
233
|
-
.
|
|
234
|
-
.
|
|
229
|
+
._innerOffsetL_1oppjhq_117 ._tab_1oppjhq_13:first-of-type,
|
|
230
|
+
._innerOffsetM_1oppjhq_109 ._tab_1oppjhq_13:first-of-type{
|
|
235
231
|
margin-left:0
|
|
236
232
|
}
|
|
237
233
|
}
|
|
238
|
-
.
|
|
234
|
+
._icon_1oppjhq_239{
|
|
239
235
|
-webkit-box-flex:0;
|
|
240
236
|
-ms-flex:0 0;
|
|
241
237
|
flex:0 0;
|
|
242
238
|
-ms-flex-preferred-size:auto;
|
|
243
239
|
flex-basis:auto;
|
|
244
240
|
}
|
|
245
|
-
.
|
|
241
|
+
._sizeM_1oppjhq_99 ._icon_1oppjhq_239{
|
|
246
242
|
width:24px;
|
|
247
243
|
height:24px;
|
|
248
244
|
}
|
|
249
|
-
.
|
|
245
|
+
._sizeL_1oppjhq_104 ._icon_1oppjhq_239{
|
|
250
246
|
width:28px;
|
|
251
247
|
height:28px;
|
|
252
248
|
}
|
|
253
|
-
.
|
|
249
|
+
._sizeM_1oppjhq_99 ._icon_1oppjhq_239._iconLeft_1oppjhq_253{
|
|
254
250
|
margin-right:4px;
|
|
255
251
|
}
|
|
256
|
-
.
|
|
252
|
+
._sizeL_1oppjhq_104 ._icon_1oppjhq_239._iconLeft_1oppjhq_253{
|
|
257
253
|
margin-right:8px;
|
|
258
254
|
}
|
|
259
|
-
.
|
|
255
|
+
._sizeM_1oppjhq_99 ._icon_1oppjhq_239._iconRight_1oppjhq_261{
|
|
260
256
|
margin-left:4px;
|
|
261
257
|
}
|
|
262
|
-
.
|
|
258
|
+
._sizeL_1oppjhq_104 ._icon_1oppjhq_239._iconRight_1oppjhq_261{
|
|
263
259
|
margin-left:8px;
|
|
264
260
|
}
|
|
265
261
|
|
|
266
|
-
.
|
|
262
|
+
._wrapper_184ejgi_4{
|
|
267
263
|
position:relative;
|
|
268
264
|
|
|
269
265
|
display:-webkit-box;
|
|
@@ -272,7 +268,7 @@
|
|
|
272
268
|
|
|
273
269
|
display:flex;
|
|
274
270
|
}
|
|
275
|
-
.
|
|
271
|
+
._scrollable_184ejgi_10{
|
|
276
272
|
display:-webkit-box;
|
|
277
273
|
display:-ms-flexbox;
|
|
278
274
|
display:flex;
|
|
@@ -281,7 +277,7 @@
|
|
|
281
277
|
margin:-4px;
|
|
282
278
|
padding:4px;
|
|
283
279
|
}
|
|
284
|
-
.
|
|
280
|
+
._scrollable_184ejgi_10::after{
|
|
285
281
|
display:block;
|
|
286
282
|
|
|
287
283
|
height:100%;
|
|
@@ -290,15 +286,15 @@
|
|
|
290
286
|
|
|
291
287
|
content:'';
|
|
292
288
|
}
|
|
293
|
-
.
|
|
289
|
+
._scrollable_184ejgi_10 {
|
|
294
290
|
|
|
295
291
|
-ms-overflow-style:none;
|
|
296
292
|
scrollbar-width:none;
|
|
297
293
|
}
|
|
298
|
-
.
|
|
294
|
+
._scrollable_184ejgi_10::-webkit-scrollbar{
|
|
299
295
|
display:none;
|
|
300
296
|
}
|
|
301
|
-
.
|
|
297
|
+
._arrowShadow_184ejgi_39{
|
|
302
298
|
position:absolute;
|
|
303
299
|
top:0;
|
|
304
300
|
|
|
@@ -308,7 +304,7 @@
|
|
|
308
304
|
|
|
309
305
|
pointer-events:none;
|
|
310
306
|
}
|
|
311
|
-
.
|
|
307
|
+
._arrowShadow_184ejgi_39::before{
|
|
312
308
|
position:absolute;
|
|
313
309
|
|
|
314
310
|
display:block;
|
|
@@ -322,7 +318,7 @@
|
|
|
322
318
|
|
|
323
319
|
box-shadow:0 0 12px 12px currentColor;
|
|
324
320
|
}
|
|
325
|
-
.
|
|
321
|
+
._arrow_184ejgi_39{
|
|
326
322
|
position:absolute;
|
|
327
323
|
z-index:2;
|
|
328
324
|
top:50%;
|
|
@@ -348,15 +344,15 @@
|
|
|
348
344
|
-webkit-transform:translateY(-50%);
|
|
349
345
|
transform:translateY(-50%);
|
|
350
346
|
}
|
|
351
|
-
.
|
|
347
|
+
._light_184ejgi_82 ._arrow_184ejgi_39{
|
|
352
348
|
color:#FFFFFF;
|
|
353
349
|
background-color:#FFFFFF;
|
|
354
350
|
}
|
|
355
|
-
.
|
|
351
|
+
._dark_184ejgi_86 ._arrow_184ejgi_39{
|
|
356
352
|
color:#19191C;
|
|
357
353
|
background-color:#19191C;
|
|
358
354
|
}
|
|
359
|
-
.
|
|
355
|
+
._arrow_184ejgi_39._shown_184ejgi_91{
|
|
360
356
|
opacity:1;
|
|
361
357
|
|
|
362
358
|
pointer-events:auto;
|
|
@@ -365,36 +361,36 @@
|
|
|
365
361
|
|
|
366
362
|
transition:opacity 0.15s ease-in;
|
|
367
363
|
}
|
|
368
|
-
.
|
|
364
|
+
._arrow_184ejgi_39._arrowLeft_184ejgi_99{
|
|
369
365
|
left:-5px;
|
|
370
366
|
}
|
|
371
|
-
.
|
|
367
|
+
._arrow_184ejgi_39._arrowLeft_184ejgi_99 ._arrowShadow_184ejgi_39{
|
|
372
368
|
right:-24px;
|
|
373
369
|
}
|
|
374
|
-
.
|
|
370
|
+
._arrow_184ejgi_39._arrowLeft_184ejgi_99 ._arrowShadow_184ejgi_39::before{
|
|
375
371
|
left:-100%;
|
|
376
372
|
}
|
|
377
|
-
.
|
|
373
|
+
._arrow_184ejgi_39._arrowRight_184ejgi_112{
|
|
378
374
|
right:-5px;
|
|
379
375
|
}
|
|
380
|
-
.
|
|
376
|
+
._arrow_184ejgi_39._arrowRight_184ejgi_112 ._arrowShadow_184ejgi_39{
|
|
381
377
|
left:-24px;
|
|
382
378
|
}
|
|
383
|
-
.
|
|
379
|
+
._arrow_184ejgi_39._arrowRight_184ejgi_112 ._arrowShadow_184ejgi_39::before{
|
|
384
380
|
right:-100%;
|
|
385
381
|
}
|
|
386
|
-
.
|
|
382
|
+
._arrowButton_184ejgi_126{
|
|
387
383
|
cursor:pointer;
|
|
388
384
|
}
|
|
389
385
|
|
|
390
|
-
.
|
|
386
|
+
._separator_13rchlx_3{
|
|
391
387
|
position:relative;
|
|
392
388
|
z-index:2;
|
|
393
389
|
|
|
394
390
|
width:100%;
|
|
395
391
|
}
|
|
396
392
|
|
|
397
|
-
.
|
|
393
|
+
._separator_13rchlx_3:after{
|
|
398
394
|
position:absolute;
|
|
399
395
|
right:0;
|
|
400
396
|
bottom:0;
|
|
@@ -404,401 +400,9 @@
|
|
|
404
400
|
|
|
405
401
|
content:'';
|
|
406
402
|
}
|
|
407
|
-
.
|
|
403
|
+
._light_13rchlx_22:after{
|
|
408
404
|
background-color:rgba(25,25,28,0.3);
|
|
409
405
|
}
|
|
410
|
-
.
|
|
406
|
+
._dark_13rchlx_28:after{
|
|
411
407
|
background-color:rgba(255,255,255,0.4);
|
|
412
408
|
}
|
|
413
|
-
|
|
414
|
-
._chipsContainer_1u0cssh_9{
|
|
415
|
-
position:relative;
|
|
416
|
-
|
|
417
|
-
display:-webkit-box;
|
|
418
|
-
|
|
419
|
-
display:-ms-flexbox;
|
|
420
|
-
|
|
421
|
-
display:flex;
|
|
422
|
-
}
|
|
423
|
-
._chip_1u0cssh_9{
|
|
424
|
-
position:relative;
|
|
425
|
-
z-index:1;
|
|
426
|
-
|
|
427
|
-
display:-webkit-inline-box;
|
|
428
|
-
|
|
429
|
-
display:-ms-inline-flexbox;
|
|
430
|
-
|
|
431
|
-
display:inline-flex;
|
|
432
|
-
overflow:hidden;
|
|
433
|
-
-ms-flex-negative:0;
|
|
434
|
-
flex-shrink:0;
|
|
435
|
-
-webkit-box-flex:0;
|
|
436
|
-
-ms-flex-positive:0;
|
|
437
|
-
flex-grow:0;
|
|
438
|
-
-ms-flex-preferred-size:initial;
|
|
439
|
-
flex-basis:initial;
|
|
440
|
-
-webkit-box-align:center;
|
|
441
|
-
-ms-flex-align:center;
|
|
442
|
-
align-items:center;
|
|
443
|
-
|
|
444
|
-
-webkit-box-sizing:border-box;
|
|
445
|
-
|
|
446
|
-
box-sizing:border-box;
|
|
447
|
-
|
|
448
|
-
border-style:solid;
|
|
449
|
-
|
|
450
|
-
outline:none;
|
|
451
|
-
|
|
452
|
-
cursor:pointer;
|
|
453
|
-
text-align:center;
|
|
454
|
-
white-space:nowrap;
|
|
455
|
-
text-decoration:none;
|
|
456
|
-
|
|
457
|
-
background:transparent;
|
|
458
|
-
|
|
459
|
-
-webkit-transition:color 100ms, background-color 100ms, border-color 100ms;
|
|
460
|
-
|
|
461
|
-
transition:color 100ms, background-color 100ms, border-color 100ms;
|
|
462
|
-
}
|
|
463
|
-
._chip_1u0cssh_9:hover,
|
|
464
|
-
._chip_1u0cssh_9:focus,
|
|
465
|
-
._chip_1u0cssh_9:active{
|
|
466
|
-
outline:none;
|
|
467
|
-
|
|
468
|
-
text-decoration:none;
|
|
469
|
-
}
|
|
470
|
-
._light_1u0cssh_49 ._chip_1u0cssh_9:focus[data-focus-method='key']{
|
|
471
|
-
-webkit-box-shadow:rgba(22,125,255,0.8) 0 0 0 4px;
|
|
472
|
-
-webkit-box-shadow:var(--rs-color-primary-t-dim-light-theme, rgba(22,125,255,0.8)) 0 0 0 4px;
|
|
473
|
-
box-shadow:rgba(22,125,255,0.8) 0 0 0 4px;
|
|
474
|
-
box-shadow:var(--rs-color-primary-t-dim-light-theme, rgba(22,125,255,0.8)) 0 0 0 4px;
|
|
475
|
-
}
|
|
476
|
-
._dark_1u0cssh_54 ._chip_1u0cssh_9:focus[data-focus-method='key']{
|
|
477
|
-
-webkit-box-shadow:rgba(76,166,255,0.8) 0 0 0 4px;
|
|
478
|
-
-webkit-box-shadow:var(--rs-color-primary-t-dim-dark-theme, rgba(76,166,255,0.8)) 0 0 0 4px;
|
|
479
|
-
box-shadow:rgba(76,166,255,0.8) 0 0 0 4px;
|
|
480
|
-
box-shadow:var(--rs-color-primary-t-dim-dark-theme, rgba(76,166,255,0.8)) 0 0 0 4px;
|
|
481
|
-
}
|
|
482
|
-
._sizeXs_1u0cssh_1 ._chip_1u0cssh_9 {
|
|
483
|
-
padding: 1px 15px;
|
|
484
|
-
border-width: 1px;
|
|
485
|
-
}
|
|
486
|
-
._sizeS_1u0cssh_63 ._chip_1u0cssh_9 {
|
|
487
|
-
padding: 5px 15px;
|
|
488
|
-
border-width: 1px;
|
|
489
|
-
}
|
|
490
|
-
._sizeM_1u0cssh_69 ._chip_1u0cssh_9 {
|
|
491
|
-
padding: 7px 23px;
|
|
492
|
-
border-width: 1px;
|
|
493
|
-
}
|
|
494
|
-
._sizeL_1u0cssh_75 ._chip_1u0cssh_9 {
|
|
495
|
-
padding: 11px 31px;
|
|
496
|
-
border-width: 1px;
|
|
497
|
-
}
|
|
498
|
-
._sizeXs_1u0cssh_1 ._chip_1u0cssh_9._selected_1u0cssh_59 {
|
|
499
|
-
padding: 0px 14px;
|
|
500
|
-
border-width: 2px;
|
|
501
|
-
}
|
|
502
|
-
._sizeS_1u0cssh_63 ._chip_1u0cssh_9._selected_1u0cssh_59 {
|
|
503
|
-
padding: 4px 14px;
|
|
504
|
-
border-width: 2px;
|
|
505
|
-
}
|
|
506
|
-
._sizeM_1u0cssh_69 ._chip_1u0cssh_9._selected_1u0cssh_59 {
|
|
507
|
-
padding: 6px 22px;
|
|
508
|
-
border-width: 2px;
|
|
509
|
-
}
|
|
510
|
-
._sizeL_1u0cssh_75 ._chip_1u0cssh_9._selected_1u0cssh_59 {
|
|
511
|
-
padding: 10px 30px;
|
|
512
|
-
border-width: 2px;
|
|
513
|
-
}
|
|
514
|
-
._sizeXs_1u0cssh_1 ._chip_1u0cssh_9._withoutText_1u0cssh_60 {
|
|
515
|
-
padding: 1px 1px;
|
|
516
|
-
border-width: 1px;
|
|
517
|
-
}
|
|
518
|
-
._sizeS_1u0cssh_63 ._chip_1u0cssh_9._withoutText_1u0cssh_60 {
|
|
519
|
-
padding: 5px 5px;
|
|
520
|
-
border-width: 1px;
|
|
521
|
-
}
|
|
522
|
-
._sizeM_1u0cssh_69 ._chip_1u0cssh_9._withoutText_1u0cssh_60 {
|
|
523
|
-
padding: 7px 7px;
|
|
524
|
-
border-width: 1px;
|
|
525
|
-
}
|
|
526
|
-
._sizeL_1u0cssh_75 ._chip_1u0cssh_9._withoutText_1u0cssh_60 {
|
|
527
|
-
padding: 11px 11px;
|
|
528
|
-
border-width: 1px;
|
|
529
|
-
}
|
|
530
|
-
._sizeXs_1u0cssh_1 ._chip_1u0cssh_9._selected_1u0cssh_59._withoutText_1u0cssh_60 {
|
|
531
|
-
padding: 0px 0px;
|
|
532
|
-
border-width: 2px;
|
|
533
|
-
}
|
|
534
|
-
._sizeS_1u0cssh_63 ._chip_1u0cssh_9._selected_1u0cssh_59._withoutText_1u0cssh_60 {
|
|
535
|
-
padding: 4px 4px;
|
|
536
|
-
border-width: 2px;
|
|
537
|
-
}
|
|
538
|
-
._sizeM_1u0cssh_69 ._chip_1u0cssh_9._selected_1u0cssh_59._withoutText_1u0cssh_60 {
|
|
539
|
-
padding: 6px 6px;
|
|
540
|
-
border-width: 2px;
|
|
541
|
-
}
|
|
542
|
-
._sizeL_1u0cssh_75 ._chip_1u0cssh_9._selected_1u0cssh_59._withoutText_1u0cssh_60 {
|
|
543
|
-
padding: 10px 10px;
|
|
544
|
-
border-width: 2px;
|
|
545
|
-
}
|
|
546
|
-
._sizeS_1u0cssh_63 ._chip_1u0cssh_9{
|
|
547
|
-
letter-spacing:0.0045em;
|
|
548
|
-
color:rgba(25,25,28,0.7);
|
|
549
|
-
color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
|
|
550
|
-
font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
|
|
551
|
-
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));
|
|
552
|
-
font-size:13px;
|
|
553
|
-
font-size:var(--rs-text-3-font-size, 13px);
|
|
554
|
-
line-height:20px;
|
|
555
|
-
line-height:var(--rs-text-3-line-height, 20px);
|
|
556
|
-
}
|
|
557
|
-
._rs-reset-letter-spacing_1u0cssh_1 ._sizeS_1u0cssh_63 ._chip_1u0cssh_9{
|
|
558
|
-
letter-spacing:normal;
|
|
559
|
-
}
|
|
560
|
-
._sizeS_1u0cssh_63 ._chip_1u0cssh_9 {
|
|
561
|
-
|
|
562
|
-
border-radius:24px;
|
|
563
|
-
}
|
|
564
|
-
._sizeM_1u0cssh_69 ._chip_1u0cssh_9{
|
|
565
|
-
letter-spacing:0.0015em;
|
|
566
|
-
color:rgba(25,25,28,0.7);
|
|
567
|
-
color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
|
|
568
|
-
font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
|
|
569
|
-
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));
|
|
570
|
-
font-size:16px;
|
|
571
|
-
font-size:var(--rs-text-2-font-size, 16px);
|
|
572
|
-
font-weight:400;
|
|
573
|
-
line-height:24px;
|
|
574
|
-
line-height:var(--rs-text-2-line-height, 24px);
|
|
575
|
-
}
|
|
576
|
-
._rs-reset-letter-spacing_1u0cssh_1 ._sizeM_1u0cssh_69 ._chip_1u0cssh_9{
|
|
577
|
-
letter-spacing:normal;
|
|
578
|
-
}
|
|
579
|
-
._sizeM_1u0cssh_69 ._chip_1u0cssh_9 {
|
|
580
|
-
|
|
581
|
-
border-radius:24px;
|
|
582
|
-
}
|
|
583
|
-
._sizeL_1u0cssh_75 ._chip_1u0cssh_9{
|
|
584
|
-
color:rgba(25,25,28,0.7);
|
|
585
|
-
color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
|
|
586
|
-
font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
|
|
587
|
-
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));
|
|
588
|
-
font-size:19px;
|
|
589
|
-
font-size:var(--rs-text-1-font-size, 19px);
|
|
590
|
-
font-weight:normal;
|
|
591
|
-
line-height:28px;
|
|
592
|
-
line-height:var(--rs-text-1-line-height, 28px);
|
|
593
|
-
|
|
594
|
-
border-radius:36px;
|
|
595
|
-
}
|
|
596
|
-
._light_1u0cssh_49._rock_1u0cssh_81 ._chip_1u0cssh_9{
|
|
597
|
-
color:#19191C;
|
|
598
|
-
border-color:rgba(25,25,28,0.3);
|
|
599
|
-
}
|
|
600
|
-
._light_1u0cssh_49._rock_1u0cssh_81 ._chip_1u0cssh_9:focus{
|
|
601
|
-
color:#19191C;
|
|
602
|
-
border-color:rgba(25,25,28,0.3);
|
|
603
|
-
}
|
|
604
|
-
@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none),(hover: hover){
|
|
605
|
-
._light_1u0cssh_49._rock_1u0cssh_81 ._chip_1u0cssh_9:hover{
|
|
606
|
-
color:#19191C;
|
|
607
|
-
border-color:rgba(25,25,28,0.3);
|
|
608
|
-
|
|
609
|
-
background:rgba(25,25,28,0.1);
|
|
610
|
-
}
|
|
611
|
-
}
|
|
612
|
-
._light_1u0cssh_49._rock_1u0cssh_81 ._chip_1u0cssh_9:active{
|
|
613
|
-
color:#19191C;
|
|
614
|
-
border-color:#19191C;
|
|
615
|
-
|
|
616
|
-
background:rgba(25,25,28,0.1);
|
|
617
|
-
}
|
|
618
|
-
._light_1u0cssh_49._rock_1u0cssh_81 ._chip_1u0cssh_9._selected_1u0cssh_59{
|
|
619
|
-
color:#19191C;
|
|
620
|
-
border-color:#19191C;
|
|
621
|
-
}
|
|
622
|
-
._dark_1u0cssh_54._rock_1u0cssh_81 ._chip_1u0cssh_9{
|
|
623
|
-
color:#FFFFFF;
|
|
624
|
-
border-color:rgba(255,255,255,0.3);
|
|
625
|
-
}
|
|
626
|
-
._dark_1u0cssh_54._rock_1u0cssh_81 ._chip_1u0cssh_9:focus{
|
|
627
|
-
color:#FFFFFF;
|
|
628
|
-
border-color:rgba(255,255,255,0.4);
|
|
629
|
-
}
|
|
630
|
-
@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none),(hover: hover){
|
|
631
|
-
._dark_1u0cssh_54._rock_1u0cssh_81 ._chip_1u0cssh_9:hover{
|
|
632
|
-
color:#FFFFFF;
|
|
633
|
-
border-color:rgba(255,255,255,0.4);
|
|
634
|
-
|
|
635
|
-
background:rgba(255,255,255,0.1);
|
|
636
|
-
}
|
|
637
|
-
}
|
|
638
|
-
._dark_1u0cssh_54._rock_1u0cssh_81 ._chip_1u0cssh_9:active{
|
|
639
|
-
color:#FFFFFF;
|
|
640
|
-
border-color:#FFFFFF;
|
|
641
|
-
|
|
642
|
-
background:rgba(255,255,255,0.1);
|
|
643
|
-
}
|
|
644
|
-
._dark_1u0cssh_54._rock_1u0cssh_81 ._chip_1u0cssh_9._selected_1u0cssh_59{
|
|
645
|
-
color:#FFFFFF;
|
|
646
|
-
border-color:#FFFFFF;
|
|
647
|
-
}
|
|
648
|
-
._light_1u0cssh_49._classic_1u0cssh_143 ._chip_1u0cssh_9{
|
|
649
|
-
color:#19191C;
|
|
650
|
-
border-color:rgba(25,25,28,0.3);
|
|
651
|
-
}
|
|
652
|
-
._light_1u0cssh_49._classic_1u0cssh_143 ._chip_1u0cssh_9:focus{
|
|
653
|
-
color:#19191C;
|
|
654
|
-
border-color:rgba(25,25,28,0.3);
|
|
655
|
-
}
|
|
656
|
-
@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none),(hover: hover){
|
|
657
|
-
._light_1u0cssh_49._classic_1u0cssh_143 ._chip_1u0cssh_9:hover{
|
|
658
|
-
color:#19191C;
|
|
659
|
-
border-color:rgba(25,25,28,0.3);
|
|
660
|
-
|
|
661
|
-
background:rgba(22,125,255,0.2);
|
|
662
|
-
|
|
663
|
-
background:var(--rs-color-primary-t-fog-light-theme, rgba(22,125,255,0.2));
|
|
664
|
-
}
|
|
665
|
-
}
|
|
666
|
-
._light_1u0cssh_49._classic_1u0cssh_143 ._chip_1u0cssh_9:active{
|
|
667
|
-
color:#19191C;
|
|
668
|
-
border-color:#167DFF;
|
|
669
|
-
border-color:var(--rs-color-primary-light-theme, #167DFF);
|
|
670
|
-
|
|
671
|
-
background:rgba(22,125,255,0.2);
|
|
672
|
-
|
|
673
|
-
background:var(--rs-color-primary-t-fog-light-theme, rgba(22,125,255,0.2));
|
|
674
|
-
}
|
|
675
|
-
._light_1u0cssh_49._classic_1u0cssh_143 ._chip_1u0cssh_9._selected_1u0cssh_59{
|
|
676
|
-
color:#19191C;
|
|
677
|
-
border-color:#167DFF;
|
|
678
|
-
border-color:var(--rs-color-primary-light-theme, #167DFF);
|
|
679
|
-
}
|
|
680
|
-
._dark_1u0cssh_54._classic_1u0cssh_143 ._chip_1u0cssh_9{
|
|
681
|
-
color:#FFFFFF;
|
|
682
|
-
border-color:rgba(255,255,255,0.3);
|
|
683
|
-
}
|
|
684
|
-
._dark_1u0cssh_54._classic_1u0cssh_143 ._chip_1u0cssh_9:focus{
|
|
685
|
-
color:#FFFFFF;
|
|
686
|
-
border-color:rgba(255,255,255,0.4);
|
|
687
|
-
}
|
|
688
|
-
@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none),(hover: hover){
|
|
689
|
-
._dark_1u0cssh_54._classic_1u0cssh_143 ._chip_1u0cssh_9:hover{
|
|
690
|
-
color:#FFFFFF;
|
|
691
|
-
border-color:rgba(255,255,255,0.4);
|
|
692
|
-
|
|
693
|
-
background:rgba(76,166,255,0.3);
|
|
694
|
-
|
|
695
|
-
background:var(--rs-color-primary-t-fog-dark-theme, rgba(76,166,255,0.3));
|
|
696
|
-
}
|
|
697
|
-
}
|
|
698
|
-
._dark_1u0cssh_54._classic_1u0cssh_143 ._chip_1u0cssh_9:active{
|
|
699
|
-
color:#FFFFFF;
|
|
700
|
-
border-color:#4CA6ff;
|
|
701
|
-
border-color:var(--rs-color-primary-dark-theme, #4CA6ff);
|
|
702
|
-
|
|
703
|
-
background:rgba(76,166,255,0.3);
|
|
704
|
-
|
|
705
|
-
background:var(--rs-color-primary-t-fog-dark-theme, rgba(76,166,255,0.3));
|
|
706
|
-
}
|
|
707
|
-
._dark_1u0cssh_54._classic_1u0cssh_143 ._chip_1u0cssh_9._selected_1u0cssh_59{
|
|
708
|
-
color:#FFFFFF;
|
|
709
|
-
border-color:#4CA6ff;
|
|
710
|
-
border-color:var(--rs-color-primary-dark-theme, #4CA6ff);
|
|
711
|
-
}
|
|
712
|
-
._innerOffsetM_1u0cssh_205 ._chip_1u0cssh_9{
|
|
713
|
-
margin-left:8px;
|
|
714
|
-
}
|
|
715
|
-
@media screen and (max-width: 640px){
|
|
716
|
-
._innerOffsetM_1u0cssh_205 ._chip_1u0cssh_9{
|
|
717
|
-
margin-left:8px
|
|
718
|
-
}
|
|
719
|
-
}
|
|
720
|
-
._innerOffsetL_1u0cssh_213 ._chip_1u0cssh_9{
|
|
721
|
-
margin-left:16px;
|
|
722
|
-
}
|
|
723
|
-
@media screen and (max-width: 640px){
|
|
724
|
-
._innerOffsetL_1u0cssh_213 ._chip_1u0cssh_9{
|
|
725
|
-
margin-left:8px
|
|
726
|
-
}
|
|
727
|
-
}
|
|
728
|
-
._innerOffsetL_1u0cssh_213 ._chip_1u0cssh_9:first-of-type,
|
|
729
|
-
._innerOffsetM_1u0cssh_205 ._chip_1u0cssh_9:first-of-type{
|
|
730
|
-
margin-left:0;
|
|
731
|
-
}
|
|
732
|
-
@media screen and (max-width: 640px){
|
|
733
|
-
._innerOffsetL_1u0cssh_213 ._chip_1u0cssh_9:first-of-type,
|
|
734
|
-
._innerOffsetM_1u0cssh_205 ._chip_1u0cssh_9:first-of-type{
|
|
735
|
-
margin-left:0
|
|
736
|
-
}
|
|
737
|
-
}
|
|
738
|
-
._icon_1u0cssh_231{
|
|
739
|
-
-webkit-box-flex:0;
|
|
740
|
-
-ms-flex:0 0;
|
|
741
|
-
flex:0 0;
|
|
742
|
-
-ms-flex-preferred-size:auto;
|
|
743
|
-
flex-basis:auto;
|
|
744
|
-
}
|
|
745
|
-
._sizeXs_1u0cssh_1 ._icon_1u0cssh_231._iconLeft_1u0cssh_235 {
|
|
746
|
-
width: 20px;
|
|
747
|
-
height: 20px;
|
|
748
|
-
min-width: 20px;
|
|
749
|
-
min-height: 20px;
|
|
750
|
-
margin: 0 8px 0 -2px;
|
|
751
|
-
}
|
|
752
|
-
._sizeS_1u0cssh_63 ._icon_1u0cssh_231._iconLeft_1u0cssh_235 {
|
|
753
|
-
width: 20px;
|
|
754
|
-
height: 20px;
|
|
755
|
-
min-width: 20px;
|
|
756
|
-
min-height: 20px;
|
|
757
|
-
margin: 0 8px 0 -2px;
|
|
758
|
-
}
|
|
759
|
-
._sizeM_1u0cssh_69 ._icon_1u0cssh_231._iconLeft_1u0cssh_235 {
|
|
760
|
-
width: 24px;
|
|
761
|
-
height: 24px;
|
|
762
|
-
min-width: 24px;
|
|
763
|
-
min-height: 24px;
|
|
764
|
-
margin: 0 8px 0 -2px;
|
|
765
|
-
}
|
|
766
|
-
._sizeL_1u0cssh_75 ._icon_1u0cssh_231._iconLeft_1u0cssh_235 {
|
|
767
|
-
width: 28px;
|
|
768
|
-
height: 28px;
|
|
769
|
-
min-width: 28px;
|
|
770
|
-
min-height: 28px;
|
|
771
|
-
margin: 0 16px 0 -2px;
|
|
772
|
-
}
|
|
773
|
-
._sizeXs_1u0cssh_1 ._icon_1u0cssh_231._iconRight_1u0cssh_236 {
|
|
774
|
-
width: 20px;
|
|
775
|
-
height: 20px;
|
|
776
|
-
min-width: 20px;
|
|
777
|
-
min-height: 20px;
|
|
778
|
-
margin: 0 -2px 0 8px;
|
|
779
|
-
}
|
|
780
|
-
._sizeS_1u0cssh_63 ._icon_1u0cssh_231._iconRight_1u0cssh_236 {
|
|
781
|
-
width: 20px;
|
|
782
|
-
height: 20px;
|
|
783
|
-
min-width: 20px;
|
|
784
|
-
min-height: 20px;
|
|
785
|
-
margin: 0 -2px 0 8px;
|
|
786
|
-
}
|
|
787
|
-
._sizeM_1u0cssh_69 ._icon_1u0cssh_231._iconRight_1u0cssh_236 {
|
|
788
|
-
width: 24px;
|
|
789
|
-
height: 24px;
|
|
790
|
-
min-width: 24px;
|
|
791
|
-
min-height: 24px;
|
|
792
|
-
margin: 0 -2px 0 8px;
|
|
793
|
-
}
|
|
794
|
-
._sizeL_1u0cssh_75 ._icon_1u0cssh_231._iconRight_1u0cssh_236 {
|
|
795
|
-
width: 28px;
|
|
796
|
-
height: 28px;
|
|
797
|
-
min-width: 28px;
|
|
798
|
-
min-height: 28px;
|
|
799
|
-
margin: 0 -2px 0 16px;
|
|
800
|
-
}
|
|
801
|
-
._withoutText_1u0cssh_60 ._icon_1u0cssh_231._iconRight_1u0cssh_236,
|
|
802
|
-
._withoutText_1u0cssh_60 ._icon_1u0cssh_231._iconLeft_1u0cssh_235{
|
|
803
|
-
margin:0;
|
|
804
|
-
}
|
package/lib/index.d.ts
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
1
|
export { default as TabList } from './tab-list';
|
|
2
2
|
export { default as TabSeparator } from './parts/tab-separator';
|
|
3
3
|
export { default as Tab } from './parts/tab';
|
|
4
|
-
export { default as ChipList } from './parts/chip-list';
|
|
5
|
-
export { default as Chip } from './parts/chip';
|
package/lib/index.js
CHANGED
|
@@ -2,5 +2,3 @@ import './index.css';
|
|
|
2
2
|
export { TabList } from './tab-list.js';
|
|
3
3
|
export { default as TabSeparator } from './parts/tab-separator.js';
|
|
4
4
|
export { default as Tab } from './parts/tab.js';
|
|
5
|
-
export { ChipList } from './parts/chip-list.js';
|
|
6
|
-
export { default as Chip } from './parts/chip.js';
|
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"wrapper": "
|
|
3
|
-
"tabsContainer": "
|
|
4
|
-
"indicator": "
|
|
5
|
-
"light": "
|
|
6
|
-
"classic": "
|
|
7
|
-
"dark": "
|
|
8
|
-
"rock": "
|
|
9
|
-
"tab": "
|
|
10
|
-
"sizeM": "
|
|
11
|
-
"rs-reset-letter-spacing": "_rs-reset-letter-
|
|
12
|
-
"sizeL": "
|
|
13
|
-
"innerOffsetM": "
|
|
14
|
-
"innerOffsetL": "
|
|
15
|
-
"short": "
|
|
16
|
-
"selected": "
|
|
17
|
-
"icon": "
|
|
18
|
-
"iconLeft": "
|
|
19
|
-
"iconRight": "
|
|
2
|
+
"wrapper": "_wrapper_1oppjhq_9",
|
|
3
|
+
"tabsContainer": "_tabsContainer_1oppjhq_13",
|
|
4
|
+
"indicator": "_indicator_1oppjhq_19",
|
|
5
|
+
"light": "_light_1oppjhq_31",
|
|
6
|
+
"classic": "_classic_1oppjhq_31",
|
|
7
|
+
"dark": "_dark_1oppjhq_35",
|
|
8
|
+
"rock": "_rock_1oppjhq_39",
|
|
9
|
+
"tab": "_tab_1oppjhq_13",
|
|
10
|
+
"sizeM": "_sizeM_1oppjhq_99",
|
|
11
|
+
"rs-reset-letter-spacing": "_rs-reset-letter-spacing_1oppjhq_1",
|
|
12
|
+
"sizeL": "_sizeL_1oppjhq_104",
|
|
13
|
+
"innerOffsetM": "_innerOffsetM_1oppjhq_109",
|
|
14
|
+
"innerOffsetL": "_innerOffsetL_1oppjhq_117",
|
|
15
|
+
"short": "_short_1oppjhq_133",
|
|
16
|
+
"selected": "_selected_1oppjhq_141",
|
|
17
|
+
"icon": "_icon_1oppjhq_239",
|
|
18
|
+
"iconLeft": "_iconLeft_1oppjhq_253",
|
|
19
|
+
"iconRight": "_iconRight_1oppjhq_261"
|
|
20
20
|
};
|
|
21
21
|
export default styles;
|
|
@@ -18,7 +18,7 @@ export declare type WithScrollArrowsWrappedComponentProps<T> = {
|
|
|
18
18
|
value: T;
|
|
19
19
|
onChange: (value: T) => void;
|
|
20
20
|
children: React.ReactNode;
|
|
21
|
-
theme
|
|
21
|
+
theme?: Theme;
|
|
22
22
|
containerRef?: React.MutableRefObject<HTMLElement>;
|
|
23
23
|
};
|
|
24
24
|
declare type OmittedWrappedComponentProps<P, T> = Omit<P, keyof WithScrollArrowsWrappedComponentProps<T>>;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
var styles = {
|
|
2
|
-
"wrapper": "
|
|
3
|
-
"scrollable": "
|
|
4
|
-
"arrowShadow": "
|
|
5
|
-
"arrow": "
|
|
6
|
-
"light": "
|
|
7
|
-
"dark": "
|
|
8
|
-
"shown": "
|
|
9
|
-
"arrowLeft": "
|
|
10
|
-
"arrowRight": "
|
|
11
|
-
"arrowButton": "
|
|
2
|
+
"wrapper": "_wrapper_184ejgi_4",
|
|
3
|
+
"scrollable": "_scrollable_184ejgi_10",
|
|
4
|
+
"arrowShadow": "_arrowShadow_184ejgi_39",
|
|
5
|
+
"arrow": "_arrow_184ejgi_39",
|
|
6
|
+
"light": "_light_184ejgi_82",
|
|
7
|
+
"dark": "_dark_184ejgi_86",
|
|
8
|
+
"shown": "_shown_184ejgi_91",
|
|
9
|
+
"arrowLeft": "_arrowLeft_184ejgi_99",
|
|
10
|
+
"arrowRight": "_arrowRight_184ejgi_112",
|
|
11
|
+
"arrowButton": "_arrowButton_184ejgi_126"
|
|
12
12
|
};
|
|
13
13
|
export default styles;
|
package/lib/tab-list.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rescui/tab-list",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.0",
|
|
4
4
|
"description": "",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"author": "JetBrains",
|
|
@@ -17,8 +17,8 @@
|
|
|
17
17
|
"dependencies": {
|
|
18
18
|
"@babel/runtime-corejs3": "^7.14.0",
|
|
19
19
|
"@juggle/resize-observer": "3.3.0",
|
|
20
|
-
"@rescui/button": "^0.
|
|
21
|
-
"@rescui/icons": "^0.
|
|
20
|
+
"@rescui/button": "^0.6.0",
|
|
21
|
+
"@rescui/icons": "^0.6.0",
|
|
22
22
|
"classnames": "^2.2.6",
|
|
23
23
|
"core-js": "^3.9.1"
|
|
24
24
|
},
|
|
@@ -28,14 +28,14 @@
|
|
|
28
28
|
"react": ">=16.8.0 <18"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
|
-
"@rescui/colors": "^0.0
|
|
31
|
+
"@rescui/colors": "^0.1.0",
|
|
32
32
|
"@rescui/postcss-preset-library": "^0.0.4",
|
|
33
33
|
"@rescui/scripts": "^0.1.4",
|
|
34
|
-
"@rescui/typography": "^0.
|
|
34
|
+
"@rescui/typography": "^0.6.0",
|
|
35
35
|
"@rescui/visual-regression": "^0.0.1"
|
|
36
36
|
},
|
|
37
37
|
"scripts": {
|
|
38
38
|
"build": "rescui-scripts build"
|
|
39
39
|
},
|
|
40
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "91cb43cee6ffc54aae5360a73437d97c3f4ed36d"
|
|
41
41
|
}
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare type ChipListValueType = string | number | symbol;
|
|
3
|
-
export declare type ChipListContextType = {
|
|
4
|
-
onChange: (value: ChipListValueType) => void;
|
|
5
|
-
selectedId?: number;
|
|
6
|
-
};
|
|
7
|
-
export declare const ChipListContext: import("react").Context<ChipListContextType>;
|
|
8
|
-
export declare const useChipListContext: () => ChipListContextType;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { createContext, useContext } from 'react';
|
|
2
|
-
var ChipListContext = /*#__PURE__*/createContext({
|
|
3
|
-
// eslint-disable-next-line @typescript-eslint/no-empty-function
|
|
4
|
-
onChange: function onChange() {},
|
|
5
|
-
selectedId: 0
|
|
6
|
-
});
|
|
7
|
-
|
|
8
|
-
var useChipListContext = function useChipListContext() {
|
|
9
|
-
return useContext(ChipListContext);
|
|
10
|
-
};
|
|
11
|
-
|
|
12
|
-
export { ChipListContext, useChipListContext };
|
package/lib/parts/chip-list.d.ts
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Theme } from '@rescui/ui-contexts';
|
|
3
|
-
import { ChipListValueType } from './chip-list-context';
|
|
4
|
-
export declare type ChipListSizeType = 'l' | 'm' | 's';
|
|
5
|
-
export declare type ChipListModeType = 'classic' | 'rock';
|
|
6
|
-
export declare type InnerChipListProps = {
|
|
7
|
-
className?: string;
|
|
8
|
-
size?: ChipListSizeType;
|
|
9
|
-
/** Increase inner horizontal offset between the chips. */
|
|
10
|
-
sparse?: boolean;
|
|
11
|
-
theme: Theme;
|
|
12
|
-
mode?: ChipListModeType;
|
|
13
|
-
value: ChipListValueType;
|
|
14
|
-
onChange: (value: ChipListValueType) => void;
|
|
15
|
-
children: React.ReactNode;
|
|
16
|
-
/** Identifier for e2e tests */
|
|
17
|
-
'data-e2e'?: string;
|
|
18
|
-
selectedId?: number;
|
|
19
|
-
activeNodeRef?: React.MutableRefObject<HTMLElement>;
|
|
20
|
-
containerRef?: React.MutableRefObject<HTMLDivElement>;
|
|
21
|
-
};
|
|
22
|
-
export declare const ChipList: {
|
|
23
|
-
<OT extends ChipListValueType>({ compareValues, value, onChange, children, theme: themeFromProps, arrowBackgroundColor, ["data-e2e"]: e2eId, ...restProps }: React.PropsWithChildren<import("./with-scroll-arrows").WithScrollArrowsProps<OT> & {
|
|
24
|
-
size?: ChipListSizeType;
|
|
25
|
-
sparse?: boolean;
|
|
26
|
-
className?: string;
|
|
27
|
-
mode?: ChipListModeType;
|
|
28
|
-
'data-e2e'?: string;
|
|
29
|
-
}>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
30
|
-
displayName: string;
|
|
31
|
-
};
|
|
32
|
-
export default ChipList;
|
package/lib/parts/chip-list.js
DELETED
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import PropTypes from 'prop-types';
|
|
3
|
-
import cn from 'classnames';
|
|
4
|
-
import Chip from './chip.js';
|
|
5
|
-
import { ChipListContext } from './chip-list-context.js';
|
|
6
|
-
import { withScrollArrows } from './with-scroll-arrows.js';
|
|
7
|
-
import styles from './chip-list.module.pcss.js';
|
|
8
|
-
var STYLES_SIZES = {
|
|
9
|
-
s: styles.sizeS,
|
|
10
|
-
m: styles.sizeM,
|
|
11
|
-
l: styles.sizeL
|
|
12
|
-
};
|
|
13
|
-
|
|
14
|
-
var InnerChipList = function InnerChipList(_ref) {
|
|
15
|
-
var _ref$size = _ref.size,
|
|
16
|
-
size = _ref$size === void 0 ? 'm' : _ref$size,
|
|
17
|
-
_ref$sparse = _ref.sparse,
|
|
18
|
-
sparse = _ref$sparse === void 0 ? false : _ref$sparse,
|
|
19
|
-
className = _ref.className,
|
|
20
|
-
_ref$mode = _ref.mode,
|
|
21
|
-
mode = _ref$mode === void 0 ? 'classic' : _ref$mode,
|
|
22
|
-
theme = _ref.theme,
|
|
23
|
-
onChange = _ref.onChange,
|
|
24
|
-
children = _ref.children,
|
|
25
|
-
selectedId = _ref.selectedId,
|
|
26
|
-
containerRef = _ref.containerRef,
|
|
27
|
-
e2eId = _ref['data-e2e'];
|
|
28
|
-
return /*#__PURE__*/React.createElement(ChipListContext.Provider, {
|
|
29
|
-
value: {
|
|
30
|
-
onChange: onChange,
|
|
31
|
-
selectedId: selectedId
|
|
32
|
-
}
|
|
33
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
34
|
-
className: cn(styles.chipsContainer, styles[theme], styles[mode], STYLES_SIZES[size], sparse ? styles.innerOffsetL : styles.innerOffsetM, className),
|
|
35
|
-
"data-e2e": e2eId ? "".concat(e2eId, "__chips-container") : null,
|
|
36
|
-
"data-test": 'chip-list',
|
|
37
|
-
ref: containerRef
|
|
38
|
-
}, children));
|
|
39
|
-
};
|
|
40
|
-
|
|
41
|
-
InnerChipList.displayName = 'ChipList';
|
|
42
|
-
var ChipList = withScrollArrows(InnerChipList, Chip, 'calc(100% + 8px)'); // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
|
43
|
-
// @ts-ignore
|
|
44
|
-
|
|
45
|
-
ChipList.propTypes = {
|
|
46
|
-
size: PropTypes.oneOf(['s', 'm', 'l']),
|
|
47
|
-
sparse: PropTypes.bool,
|
|
48
|
-
theme: PropTypes.oneOf(['light', 'dark']),
|
|
49
|
-
className: PropTypes.string,
|
|
50
|
-
mode: PropTypes.oneOf(['classic', 'rock']),
|
|
51
|
-
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.symbol]),
|
|
52
|
-
onChange: PropTypes.func,
|
|
53
|
-
compareValues: PropTypes.func,
|
|
54
|
-
arrowBackgroundColor: PropTypes.string,
|
|
55
|
-
'data-e2e': PropTypes.string
|
|
56
|
-
};
|
|
57
|
-
export default ChipList;
|
|
58
|
-
export { ChipList };
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
var styles = {
|
|
2
|
-
"chipsContainer": "_chipsContainer_1u0cssh_9",
|
|
3
|
-
"chip": "_chip_1u0cssh_9",
|
|
4
|
-
"light": "_light_1u0cssh_49",
|
|
5
|
-
"dark": "_dark_1u0cssh_54",
|
|
6
|
-
"sizeXs": "_sizeXs_1u0cssh_1",
|
|
7
|
-
"sizeS": "_sizeS_1u0cssh_63",
|
|
8
|
-
"sizeM": "_sizeM_1u0cssh_69",
|
|
9
|
-
"sizeL": "_sizeL_1u0cssh_75",
|
|
10
|
-
"selected": "_selected_1u0cssh_59",
|
|
11
|
-
"withoutText": "_withoutText_1u0cssh_60",
|
|
12
|
-
"rs-reset-letter-spacing": "_rs-reset-letter-spacing_1u0cssh_1",
|
|
13
|
-
"rock": "_rock_1u0cssh_81",
|
|
14
|
-
"classic": "_classic_1u0cssh_143",
|
|
15
|
-
"innerOffsetM": "_innerOffsetM_1u0cssh_205",
|
|
16
|
-
"innerOffsetL": "_innerOffsetL_1u0cssh_213",
|
|
17
|
-
"icon": "_icon_1u0cssh_231",
|
|
18
|
-
"iconLeft": "_iconLeft_1u0cssh_235",
|
|
19
|
-
"iconRight": "_iconRight_1u0cssh_236"
|
|
20
|
-
};
|
|
21
|
-
export default styles;
|
package/lib/parts/chip.d.ts
DELETED
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { ChipListValueType } from './chip-list-context';
|
|
3
|
-
export declare type ChipIconPosition = 'left' | 'right';
|
|
4
|
-
export declare type ChipProps = {
|
|
5
|
-
className?: string;
|
|
6
|
-
value?: ChipListValueType;
|
|
7
|
-
/** @ignore */
|
|
8
|
-
itemId?: number;
|
|
9
|
-
/** @ignore */
|
|
10
|
-
onFocus?: React.FocusEventHandler<HTMLElement>;
|
|
11
|
-
/** @ignore */
|
|
12
|
-
onMouseDown?: React.MouseEventHandler<HTMLElement>;
|
|
13
|
-
/** Identifier for e2e tests */
|
|
14
|
-
'data-e2e'?: string;
|
|
15
|
-
children?: React.ReactNode;
|
|
16
|
-
} & ({
|
|
17
|
-
/** Additional icon */
|
|
18
|
-
icon: React.ReactNode;
|
|
19
|
-
/** Additional icon position */
|
|
20
|
-
iconPosition?: ChipIconPosition;
|
|
21
|
-
} | {
|
|
22
|
-
icon?: never;
|
|
23
|
-
iconPosition?: never;
|
|
24
|
-
});
|
|
25
|
-
declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
|
|
26
|
-
export default Chip;
|
package/lib/parts/chip.js
DELETED
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
import "core-js/modules/web.dom-collections.for-each.js";
|
|
2
|
-
import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
|
|
3
|
-
import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
|
|
4
|
-
import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
|
|
5
|
-
import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
|
|
6
|
-
import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
|
|
7
|
-
import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
|
|
8
|
-
import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
|
|
9
|
-
var _excluded = ["value", "className", "children", "icon", "iconPosition", "itemId", "onFocus", "onMouseDown", "data-e2e"];
|
|
10
|
-
|
|
11
|
-
function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); if (enumerableOnly) { symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
12
|
-
|
|
13
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (_Object$getOwnPropertyDescriptors) { Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
14
|
-
|
|
15
|
-
import React, { forwardRef, cloneElement } from 'react';
|
|
16
|
-
import PropTypes from 'prop-types';
|
|
17
|
-
import cn from 'classnames';
|
|
18
|
-
import styles from './chip-list.module.pcss.js';
|
|
19
|
-
import { useChipListContext } from './chip-list-context.js'; // check for ignored jsx values and empty string, more info https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored
|
|
20
|
-
|
|
21
|
-
var isWithoutChildren = function isWithoutChildren(children) {
|
|
22
|
-
return children === null || typeof children === 'undefined' || children === false || children === true || children === '';
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
var Chip = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
26
|
-
var _cn;
|
|
27
|
-
|
|
28
|
-
var value = _ref.value,
|
|
29
|
-
className = _ref.className,
|
|
30
|
-
children = _ref.children,
|
|
31
|
-
icon = _ref.icon,
|
|
32
|
-
_ref$iconPosition = _ref.iconPosition,
|
|
33
|
-
iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
|
|
34
|
-
itemId = _ref.itemId,
|
|
35
|
-
onFocus = _ref.onFocus,
|
|
36
|
-
onMouseDown = _ref.onMouseDown,
|
|
37
|
-
e2eId = _ref['data-e2e'],
|
|
38
|
-
restProps = _objectWithoutProperties(_ref, _excluded);
|
|
39
|
-
|
|
40
|
-
var _useChipListContext = useChipListContext(),
|
|
41
|
-
onChange = _useChipListContext.onChange,
|
|
42
|
-
selectedId = _useChipListContext.selectedId;
|
|
43
|
-
|
|
44
|
-
var selected = itemId === selectedId;
|
|
45
|
-
var isRenderLeftIcon = icon && iconPosition === 'left';
|
|
46
|
-
var isRenderRightIcon = icon && iconPosition === 'right';
|
|
47
|
-
return /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({}, restProps), {}, {
|
|
48
|
-
className: cn(styles.chip, (_cn = {}, _defineProperty(_cn, styles.selected, selected), _defineProperty(_cn, styles.withoutText, isWithoutChildren(children)), _cn), className),
|
|
49
|
-
onClick: function onClick() {
|
|
50
|
-
return onChange(value);
|
|
51
|
-
},
|
|
52
|
-
onKeyDown: function onKeyDown(e) {
|
|
53
|
-
if (e.key === 'Enter') {
|
|
54
|
-
onChange(value);
|
|
55
|
-
}
|
|
56
|
-
},
|
|
57
|
-
role: "tab",
|
|
58
|
-
tabIndex: 0,
|
|
59
|
-
ref: ref,
|
|
60
|
-
onFocus: onFocus,
|
|
61
|
-
onMouseDown: onMouseDown,
|
|
62
|
-
"data-e2e": e2eId,
|
|
63
|
-
"data-test": "chip".concat(selected ? ' chip-selected' : '')
|
|
64
|
-
}), isRenderLeftIcon && /*#__PURE__*/cloneElement(icon, {
|
|
65
|
-
className: cn(icon.props.className, styles.icon, styles.iconLeft)
|
|
66
|
-
}), /*#__PURE__*/React.createElement("div", null, children), isRenderRightIcon && /*#__PURE__*/cloneElement(icon, {
|
|
67
|
-
className: cn(icon.props.className, styles.icon, styles.iconRight)
|
|
68
|
-
}));
|
|
69
|
-
});
|
|
70
|
-
Chip.displayName = 'Chip';
|
|
71
|
-
Chip.propTypes = {
|
|
72
|
-
className: PropTypes.string,
|
|
73
|
-
icon: PropTypes.node,
|
|
74
|
-
iconPosition: PropTypes.oneOf(['left', 'right']),
|
|
75
|
-
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.symbol]),
|
|
76
|
-
'data-e2e': PropTypes.string,
|
|
77
|
-
itemId: PropTypes.number,
|
|
78
|
-
onFocus: PropTypes.func,
|
|
79
|
-
onMouseDown: PropTypes.func
|
|
80
|
-
};
|
|
81
|
-
export default Chip;
|