@rescui/chip-list 0.3.4 → 0.4.1

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 CHANGED
@@ -1,4 +1,4 @@
1
- ._chipsContainer_gkycxi_9{
1
+ ._chipsContainer_144bj2e_9{
2
2
  position:relative;
3
3
 
4
4
  display:-webkit-box;
@@ -10,76 +10,76 @@
10
10
  flex-wrap:wrap;
11
11
  }
12
12
 
13
- ._sizeXs_gkycxi_15 ._chipsContainer_gkycxi_9{
13
+ ._sizeXs_144bj2e_15 ._chipsContainer_144bj2e_9{
14
14
  margin-top:-12px;
15
15
  }
16
16
 
17
17
  @media screen and (max-width: 640px){
18
18
 
19
- ._sizeXs_gkycxi_15 ._chipsContainer_gkycxi_9{
19
+ ._sizeXs_144bj2e_15 ._chipsContainer_144bj2e_9{
20
20
  margin-top:-8px
21
21
  }
22
22
  }
23
23
 
24
- ._sizeS_gkycxi_23 ._chipsContainer_gkycxi_9,
25
- ._sizeM_gkycxi_24 ._chipsContainer_gkycxi_9{
24
+ ._sizeS_144bj2e_23 ._chipsContainer_144bj2e_9,
25
+ ._sizeM_144bj2e_24 ._chipsContainer_144bj2e_9{
26
26
  margin-top:-12px;
27
27
  }
28
28
 
29
- ._sizeL_gkycxi_28 ._chipsContainer_gkycxi_9{
29
+ ._sizeL_144bj2e_28 ._chipsContainer_144bj2e_9{
30
30
  margin-top:-16px;
31
31
  }
32
32
 
33
33
  @media screen and (max-width: 640px){
34
34
 
35
- ._sizeL_gkycxi_28 ._chipsContainer_gkycxi_9{
35
+ ._sizeL_144bj2e_28 ._chipsContainer_144bj2e_9{
36
36
  margin-top:-12px
37
37
  }
38
38
  }
39
39
 
40
- ._innerOffsetL_gkycxi_36._sizeL_gkycxi_28 ._chipsContainer_gkycxi_9,
41
- ._innerOffsetL_gkycxi_36._sizeM_gkycxi_24 ._chipsContainer_gkycxi_9{
40
+ ._innerOffsetL_144bj2e_36._sizeL_144bj2e_28 ._chipsContainer_144bj2e_9,
41
+ ._innerOffsetL_144bj2e_36._sizeM_144bj2e_24 ._chipsContainer_144bj2e_9{
42
42
  margin-right:-8px;
43
43
  margin-left:-8px;
44
44
  }
45
45
 
46
46
  @media screen and (max-width: 640px){
47
47
 
48
- ._innerOffsetL_gkycxi_36._sizeL_gkycxi_28 ._chipsContainer_gkycxi_9,
49
- ._innerOffsetL_gkycxi_36._sizeM_gkycxi_24 ._chipsContainer_gkycxi_9{
48
+ ._innerOffsetL_144bj2e_36._sizeL_144bj2e_28 ._chipsContainer_144bj2e_9,
49
+ ._innerOffsetL_144bj2e_36._sizeM_144bj2e_24 ._chipsContainer_144bj2e_9{
50
50
  margin-right:-4px;
51
51
  margin-left:-4px
52
52
  }
53
53
  }
54
54
 
55
- ._innerOffsetL_gkycxi_36._sizeS_gkycxi_23 ._chipsContainer_gkycxi_9,
56
- ._innerOffsetL_gkycxi_36._sizeXs_gkycxi_15 ._chipsContainer_gkycxi_9{
55
+ ._innerOffsetL_144bj2e_36._sizeS_144bj2e_23 ._chipsContainer_144bj2e_9,
56
+ ._innerOffsetL_144bj2e_36._sizeXs_144bj2e_15 ._chipsContainer_144bj2e_9{
57
57
  margin-right:-6px;
58
58
  margin-left:-6px;
59
59
  }
60
60
 
61
61
  @media screen and (max-width: 640px){
62
62
 
63
- ._innerOffsetL_gkycxi_36._sizeS_gkycxi_23 ._chipsContainer_gkycxi_9,
64
- ._innerOffsetL_gkycxi_36._sizeXs_gkycxi_15 ._chipsContainer_gkycxi_9{
63
+ ._innerOffsetL_144bj2e_36._sizeS_144bj2e_23 ._chipsContainer_144bj2e_9,
64
+ ._innerOffsetL_144bj2e_36._sizeXs_144bj2e_15 ._chipsContainer_144bj2e_9{
65
65
  margin-right:-4px;
66
66
  margin-left:-4px
67
67
  }
68
68
  }
69
69
 
70
- ._innerOffsetM_gkycxi_58 ._chipsContainer_gkycxi_9{
70
+ ._innerOffsetM_144bj2e_58 ._chipsContainer_144bj2e_9{
71
71
  margin-right:-4px;
72
72
  margin-left:-4px;
73
73
  }
74
74
 
75
75
  @media screen and (max-width: 640px){
76
76
 
77
- ._innerOffsetM_gkycxi_58 ._chipsContainer_gkycxi_9{
77
+ ._innerOffsetM_144bj2e_58 ._chipsContainer_144bj2e_9{
78
78
  margin-right:-4px;
79
79
  margin-left:-4px
80
80
  }
81
81
  }
82
- ._chip_gkycxi_9{
82
+ ._chip_144bj2e_9{
83
83
  position:relative;
84
84
  z-index:1;
85
85
 
@@ -104,6 +104,9 @@
104
104
 
105
105
  box-sizing:border-box;
106
106
 
107
+ margin:0;
108
+ padding:0;
109
+
107
110
  border-style:solid;
108
111
 
109
112
  outline:none;
@@ -113,96 +116,111 @@
113
116
  white-space:nowrap;
114
117
  text-decoration:none;
115
118
 
119
+ color:inherit;
120
+
116
121
  background:transparent;
122
+ -webkit-box-shadow:none;
123
+ box-shadow:none;
124
+
125
+ font:inherit;
126
+ line-height:normal;
117
127
 
118
128
  -webkit-transition:color 100ms, background-color 100ms, border-color 100ms;
119
129
 
120
130
  transition:color 100ms, background-color 100ms, border-color 100ms;
131
+ -webkit-font-smoothing:inherit;
132
+ -moz-osx-font-smoothing:inherit;
133
+ -webkit-appearance:none;
121
134
  }
122
- ._chip_gkycxi_9:hover,
123
- ._chip_gkycxi_9:focus,
124
- ._chip_gkycxi_9:active{
135
+ ._chip_144bj2e_9::-moz-focus-inner{
136
+ padding:0;
137
+
138
+ border:none;
139
+ }
140
+ ._chip_144bj2e_9:hover,
141
+ ._chip_144bj2e_9:focus,
142
+ ._chip_144bj2e_9:active{
125
143
  outline:none;
126
144
 
127
145
  text-decoration:none;
128
146
  }
129
- ._light_gkycxi_103 ._chip_gkycxi_9:focus[data-focus-method='key']{
147
+ ._light_144bj2e_125 ._chip_144bj2e_9:focus[data-focus-method='key']{
130
148
  -webkit-box-shadow:rgba(107, 87, 255, 0.8) 0 0 0 4px;
131
149
  -webkit-box-shadow:var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8)) 0 0 0 4px;
132
150
  box-shadow:rgba(107, 87, 255, 0.8) 0 0 0 4px;
133
151
  box-shadow:var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8)) 0 0 0 4px;
134
152
  }
135
- ._dark_gkycxi_108 ._chip_gkycxi_9:focus[data-focus-method='key']{
153
+ ._dark_144bj2e_130 ._chip_144bj2e_9:focus[data-focus-method='key']{
136
154
  -webkit-box-shadow:rgba(132, 115, 255,0.8) 0 0 0 4px;
137
155
  -webkit-box-shadow:var(--rs-color-primary-t-dim-dark-theme, rgba(132, 115, 255,0.8)) 0 0 0 4px;
138
156
  box-shadow:rgba(132, 115, 255,0.8) 0 0 0 4px;
139
157
  box-shadow:var(--rs-color-primary-t-dim-dark-theme, rgba(132, 115, 255,0.8)) 0 0 0 4px;
140
158
  }
141
- ._sizeXs_gkycxi_15 ._chip_gkycxi_9 {
159
+ ._sizeXs_144bj2e_15 ._chip_144bj2e_9 {
142
160
  padding: 1px 15px;
143
161
  border-width: 1px;
144
162
  }
145
- ._sizeS_gkycxi_23 ._chip_gkycxi_9 {
163
+ ._sizeS_144bj2e_23 ._chip_144bj2e_9 {
146
164
  padding: 5px 15px;
147
165
  border-width: 1px;
148
166
  }
149
- ._sizeM_gkycxi_24 ._chip_gkycxi_9 {
167
+ ._sizeM_144bj2e_24 ._chip_144bj2e_9 {
150
168
  padding: 7px 23px;
151
169
  border-width: 1px;
152
170
  }
153
- ._sizeL_gkycxi_28 ._chip_gkycxi_9 {
171
+ ._sizeL_144bj2e_28 ._chip_144bj2e_9 {
154
172
  padding: 11px 31px;
155
173
  border-width: 1px;
156
174
  }
157
- ._sizeXs_gkycxi_15 ._chip_gkycxi_9._selected_gkycxi_113 {
175
+ ._sizeXs_144bj2e_15 ._chip_144bj2e_9._selected_144bj2e_135 {
158
176
  padding: 0px 14px;
159
177
  border-width: 2px;
160
178
  }
161
- ._sizeS_gkycxi_23 ._chip_gkycxi_9._selected_gkycxi_113 {
179
+ ._sizeS_144bj2e_23 ._chip_144bj2e_9._selected_144bj2e_135 {
162
180
  padding: 4px 14px;
163
181
  border-width: 2px;
164
182
  }
165
- ._sizeM_gkycxi_24 ._chip_gkycxi_9._selected_gkycxi_113 {
183
+ ._sizeM_144bj2e_24 ._chip_144bj2e_9._selected_144bj2e_135 {
166
184
  padding: 6px 22px;
167
185
  border-width: 2px;
168
186
  }
169
- ._sizeL_gkycxi_28 ._chip_gkycxi_9._selected_gkycxi_113 {
187
+ ._sizeL_144bj2e_28 ._chip_144bj2e_9._selected_144bj2e_135 {
170
188
  padding: 10px 30px;
171
189
  border-width: 2px;
172
190
  }
173
- ._sizeXs_gkycxi_15 ._chip_gkycxi_9._withoutText_gkycxi_114 {
191
+ ._sizeXs_144bj2e_15 ._chip_144bj2e_9._withoutText_144bj2e_136 {
174
192
  padding: 1px 1px;
175
193
  border-width: 1px;
176
194
  }
177
- ._sizeS_gkycxi_23 ._chip_gkycxi_9._withoutText_gkycxi_114 {
195
+ ._sizeS_144bj2e_23 ._chip_144bj2e_9._withoutText_144bj2e_136 {
178
196
  padding: 5px 5px;
179
197
  border-width: 1px;
180
198
  }
181
- ._sizeM_gkycxi_24 ._chip_gkycxi_9._withoutText_gkycxi_114 {
199
+ ._sizeM_144bj2e_24 ._chip_144bj2e_9._withoutText_144bj2e_136 {
182
200
  padding: 7px 7px;
183
201
  border-width: 1px;
184
202
  }
185
- ._sizeL_gkycxi_28 ._chip_gkycxi_9._withoutText_gkycxi_114 {
203
+ ._sizeL_144bj2e_28 ._chip_144bj2e_9._withoutText_144bj2e_136 {
186
204
  padding: 11px 11px;
187
205
  border-width: 1px;
188
206
  }
189
- ._sizeXs_gkycxi_15 ._chip_gkycxi_9._selected_gkycxi_113._withoutText_gkycxi_114 {
207
+ ._sizeXs_144bj2e_15 ._chip_144bj2e_9._selected_144bj2e_135._withoutText_144bj2e_136 {
190
208
  padding: 0px 0px;
191
209
  border-width: 2px;
192
210
  }
193
- ._sizeS_gkycxi_23 ._chip_gkycxi_9._selected_gkycxi_113._withoutText_gkycxi_114 {
211
+ ._sizeS_144bj2e_23 ._chip_144bj2e_9._selected_144bj2e_135._withoutText_144bj2e_136 {
194
212
  padding: 4px 4px;
195
213
  border-width: 2px;
196
214
  }
197
- ._sizeM_gkycxi_24 ._chip_gkycxi_9._selected_gkycxi_113._withoutText_gkycxi_114 {
215
+ ._sizeM_144bj2e_24 ._chip_144bj2e_9._selected_144bj2e_135._withoutText_144bj2e_136 {
198
216
  padding: 6px 6px;
199
217
  border-width: 2px;
200
218
  }
201
- ._sizeL_gkycxi_28 ._chip_gkycxi_9._selected_gkycxi_113._withoutText_gkycxi_114 {
219
+ ._sizeL_144bj2e_28 ._chip_144bj2e_9._selected_144bj2e_135._withoutText_144bj2e_136 {
202
220
  padding: 10px 10px;
203
221
  border-width: 2px;
204
222
  }
205
- ._sizeXs_gkycxi_15 ._chip_gkycxi_9{
223
+ ._sizeXs_144bj2e_15 ._chip_144bj2e_9{
206
224
  letter-spacing:0.0045em;
207
225
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
208
226
  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));
@@ -213,21 +231,21 @@
213
231
  line-height:20px;
214
232
  line-height:var(--rs-text-3-line-height, 20px);
215
233
  }
216
- ._rs-reset-letter-spacing_gkycxi_1 ._sizeXs_gkycxi_15 ._chip_gkycxi_9{
234
+ ._rs-reset-letter-spacing_144bj2e_1 ._sizeXs_144bj2e_15 ._chip_144bj2e_9{
217
235
  letter-spacing:normal;
218
236
  }
219
- ._sizeXs_gkycxi_15 ._chip_gkycxi_9 {
237
+ ._sizeXs_144bj2e_15 ._chip_144bj2e_9 {
220
238
 
221
239
  margin-top:12px;
222
240
 
223
241
  border-radius:4px;
224
242
  }
225
243
  @media screen and (max-width: 640px){
226
- ._sizeXs_gkycxi_15 ._chip_gkycxi_9{
244
+ ._sizeXs_144bj2e_15 ._chip_144bj2e_9{
227
245
  margin-top:8px
228
246
  }
229
247
  }
230
- ._sizeS_gkycxi_23 ._chip_gkycxi_9{
248
+ ._sizeS_144bj2e_23 ._chip_144bj2e_9{
231
249
  letter-spacing:0.0045em;
232
250
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
233
251
  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));
@@ -238,16 +256,16 @@
238
256
  line-height:20px;
239
257
  line-height:var(--rs-text-3-line-height, 20px);
240
258
  }
241
- ._rs-reset-letter-spacing_gkycxi_1 ._sizeS_gkycxi_23 ._chip_gkycxi_9{
259
+ ._rs-reset-letter-spacing_144bj2e_1 ._sizeS_144bj2e_23 ._chip_144bj2e_9{
242
260
  letter-spacing:normal;
243
261
  }
244
- ._sizeS_gkycxi_23 ._chip_gkycxi_9 {
262
+ ._sizeS_144bj2e_23 ._chip_144bj2e_9 {
245
263
 
246
264
  margin-top:12px;
247
265
 
248
266
  border-radius:24px;
249
267
  }
250
- ._sizeM_gkycxi_24 ._chip_gkycxi_9{
268
+ ._sizeM_144bj2e_24 ._chip_144bj2e_9{
251
269
  letter-spacing:0.0015em;
252
270
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
253
271
  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));
@@ -259,16 +277,16 @@
259
277
  line-height:24px;
260
278
  line-height:var(--rs-text-2-line-height, 24px);
261
279
  }
262
- ._rs-reset-letter-spacing_gkycxi_1 ._sizeM_gkycxi_24 ._chip_gkycxi_9{
280
+ ._rs-reset-letter-spacing_144bj2e_1 ._sizeM_144bj2e_24 ._chip_144bj2e_9{
263
281
  letter-spacing:normal;
264
282
  }
265
- ._sizeM_gkycxi_24 ._chip_gkycxi_9 {
283
+ ._sizeM_144bj2e_24 ._chip_144bj2e_9 {
266
284
 
267
285
  margin-top:12px;
268
286
 
269
287
  border-radius:24px;
270
288
  }
271
- ._sizeL_gkycxi_28 ._chip_gkycxi_9{
289
+ ._sizeL_144bj2e_28 ._chip_144bj2e_9{
272
290
  font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
273
291
  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));
274
292
  -webkit-font-feature-settings:"kern", "liga", "calt";
@@ -284,22 +302,22 @@
284
302
  border-radius:36px;
285
303
  }
286
304
  @media screen and (max-width: 640px){
287
- ._sizeL_gkycxi_28 ._chip_gkycxi_9{
305
+ ._sizeL_144bj2e_28 ._chip_144bj2e_9{
288
306
  margin-top:12px
289
307
  }
290
308
  }
291
- ._light_gkycxi_103._rock_gkycxi_157 ._chip_gkycxi_9{
309
+ ._light_144bj2e_125._rock_144bj2e_179 ._chip_144bj2e_9{
292
310
  border-color:rgba(25,25,28,0.3);
293
311
 
294
312
  color:#19191C;
295
313
  }
296
- ._light_gkycxi_103._rock_gkycxi_157 ._chip_gkycxi_9:focus{
314
+ ._light_144bj2e_125._rock_144bj2e_179 ._chip_144bj2e_9:focus{
297
315
  border-color:rgba(25,25,28,0.3);
298
316
 
299
317
  color:#19191C;
300
318
  }
301
319
  @media screen and (-ms-high-contrast: active),(-ms-high-contrast: none),(hover: hover){
302
- ._light_gkycxi_103._rock_gkycxi_157 ._chip_gkycxi_9:hover{
320
+ ._light_144bj2e_125._rock_144bj2e_179 ._chip_144bj2e_9:hover{
303
321
  border-color:rgba(25,25,28,0.3);
304
322
 
305
323
  color:#19191C;
@@ -307,30 +325,30 @@
307
325
  background:rgba(25,25,28,0.1);
308
326
  }
309
327
  }
310
- ._light_gkycxi_103._rock_gkycxi_157 ._chip_gkycxi_9:active{
328
+ ._light_144bj2e_125._rock_144bj2e_179 ._chip_144bj2e_9:active{
311
329
  border-color:#19191C;
312
330
 
313
331
  color:#19191C;
314
332
 
315
333
  background:rgba(25,25,28,0.1);
316
334
  }
317
- ._light_gkycxi_103._rock_gkycxi_157 ._chip_gkycxi_9._selected_gkycxi_113{
335
+ ._light_144bj2e_125._rock_144bj2e_179 ._chip_144bj2e_9._selected_144bj2e_135{
318
336
  border-color:#19191C;
319
337
 
320
338
  color:#19191C;
321
339
  }
322
- ._dark_gkycxi_108._rock_gkycxi_157 ._chip_gkycxi_9{
340
+ ._dark_144bj2e_130._rock_144bj2e_179 ._chip_144bj2e_9{
323
341
  border-color:rgba(255,255,255,0.3);
324
342
 
325
343
  color:#FFFFFF;
326
344
  }
327
- ._dark_gkycxi_108._rock_gkycxi_157 ._chip_gkycxi_9:focus{
345
+ ._dark_144bj2e_130._rock_144bj2e_179 ._chip_144bj2e_9:focus{
328
346
  border-color:rgba(255,255,255,0.4);
329
347
 
330
348
  color:#FFFFFF;
331
349
  }
332
350
  @media screen and (-ms-high-contrast: active),(-ms-high-contrast: none),(hover: hover){
333
- ._dark_gkycxi_108._rock_gkycxi_157 ._chip_gkycxi_9:hover{
351
+ ._dark_144bj2e_130._rock_144bj2e_179 ._chip_144bj2e_9:hover{
334
352
  border-color:rgba(255,255,255,0.4);
335
353
 
336
354
  color:#FFFFFF;
@@ -338,30 +356,30 @@
338
356
  background:rgba(255,255,255,0.1);
339
357
  }
340
358
  }
341
- ._dark_gkycxi_108._rock_gkycxi_157 ._chip_gkycxi_9:active{
359
+ ._dark_144bj2e_130._rock_144bj2e_179 ._chip_144bj2e_9:active{
342
360
  border-color:#FFFFFF;
343
361
 
344
362
  color:#FFFFFF;
345
363
 
346
364
  background:rgba(255,255,255,0.1);
347
365
  }
348
- ._dark_gkycxi_108._rock_gkycxi_157 ._chip_gkycxi_9._selected_gkycxi_113{
366
+ ._dark_144bj2e_130._rock_144bj2e_179 ._chip_144bj2e_9._selected_144bj2e_135{
349
367
  border-color:#FFFFFF;
350
368
 
351
369
  color:#FFFFFF;
352
370
  }
353
- ._light_gkycxi_103._classic_gkycxi_229 ._chip_gkycxi_9{
371
+ ._light_144bj2e_125._classic_144bj2e_251 ._chip_144bj2e_9{
354
372
  border-color:rgba(25,25,28,0.3);
355
373
 
356
374
  color:#19191C;
357
375
  }
358
- ._light_gkycxi_103._classic_gkycxi_229 ._chip_gkycxi_9:focus{
376
+ ._light_144bj2e_125._classic_144bj2e_251 ._chip_144bj2e_9:focus{
359
377
  border-color:rgba(25,25,28,0.3);
360
378
 
361
379
  color:#19191C;
362
380
  }
363
381
  @media screen and (-ms-high-contrast: active),(-ms-high-contrast: none),(hover: hover){
364
- ._light_gkycxi_103._classic_gkycxi_229 ._chip_gkycxi_9:hover{
382
+ ._light_144bj2e_125._classic_144bj2e_251 ._chip_144bj2e_9:hover{
365
383
  border-color:rgba(25,25,28,0.3);
366
384
 
367
385
  color:#19191C;
@@ -371,7 +389,7 @@
371
389
  background:var(--rs-color-primary-t-fog-light-theme, rgba(107, 87, 255,0.2));
372
390
  }
373
391
  }
374
- ._light_gkycxi_103._classic_gkycxi_229 ._chip_gkycxi_9:active{
392
+ ._light_144bj2e_125._classic_144bj2e_251 ._chip_144bj2e_9:active{
375
393
  border-color:#6B57FF;
376
394
  border-color:var(--rs-color-primary-light-theme, #6B57FF);
377
395
 
@@ -381,24 +399,24 @@
381
399
 
382
400
  background:var(--rs-color-primary-t-fog-light-theme, rgba(107, 87, 255,0.2));
383
401
  }
384
- ._light_gkycxi_103._classic_gkycxi_229 ._chip_gkycxi_9._selected_gkycxi_113{
402
+ ._light_144bj2e_125._classic_144bj2e_251 ._chip_144bj2e_9._selected_144bj2e_135{
385
403
  border-color:#6B57FF;
386
404
  border-color:var(--rs-color-primary-light-theme, #6B57FF);
387
405
 
388
406
  color:#19191C;
389
407
  }
390
- ._dark_gkycxi_108._classic_gkycxi_229 ._chip_gkycxi_9{
408
+ ._dark_144bj2e_130._classic_144bj2e_251 ._chip_144bj2e_9{
391
409
  border-color:rgba(255,255,255,0.3);
392
410
 
393
411
  color:#FFFFFF;
394
412
  }
395
- ._dark_gkycxi_108._classic_gkycxi_229 ._chip_gkycxi_9:focus{
413
+ ._dark_144bj2e_130._classic_144bj2e_251 ._chip_144bj2e_9:focus{
396
414
  border-color:rgba(255,255,255,0.4);
397
415
 
398
416
  color:#FFFFFF;
399
417
  }
400
418
  @media screen and (-ms-high-contrast: active),(-ms-high-contrast: none),(hover: hover){
401
- ._dark_gkycxi_108._classic_gkycxi_229 ._chip_gkycxi_9:hover{
419
+ ._dark_144bj2e_130._classic_144bj2e_251 ._chip_144bj2e_9:hover{
402
420
  border-color:rgba(255,255,255,0.4);
403
421
 
404
422
  color:#FFFFFF;
@@ -408,7 +426,7 @@
408
426
  background:var(--rs-color-primary-t-fog-dark-theme, rgba(132, 115, 255,0.3));
409
427
  }
410
428
  }
411
- ._dark_gkycxi_108._classic_gkycxi_229 ._chip_gkycxi_9:active{
429
+ ._dark_144bj2e_130._classic_144bj2e_251 ._chip_144bj2e_9:active{
412
430
  border-color:#8473FF;
413
431
  border-color:var(--rs-color-primary-dark-theme, #8473FF);
414
432
 
@@ -418,110 +436,110 @@
418
436
 
419
437
  background:var(--rs-color-primary-t-fog-dark-theme, rgba(132, 115, 255,0.3));
420
438
  }
421
- ._dark_gkycxi_108._classic_gkycxi_229 ._chip_gkycxi_9._selected_gkycxi_113{
439
+ ._dark_144bj2e_130._classic_144bj2e_251 ._chip_144bj2e_9._selected_144bj2e_135{
422
440
  border-color:#8473FF;
423
441
  border-color:var(--rs-color-primary-dark-theme, #8473FF);
424
442
 
425
443
  color:#FFFFFF;
426
444
  }
427
- ._innerOffsetL_gkycxi_36._sizeL_gkycxi_28 ._chip_gkycxi_9,
428
- ._innerOffsetL_gkycxi_36._sizeM_gkycxi_24 ._chip_gkycxi_9{
445
+ ._innerOffsetL_144bj2e_36._sizeL_144bj2e_28 ._chip_144bj2e_9,
446
+ ._innerOffsetL_144bj2e_36._sizeM_144bj2e_24 ._chip_144bj2e_9{
429
447
  margin-right:8px;
430
448
  margin-left:8px;
431
449
  }
432
450
  @media screen and (max-width: 640px){
433
- ._innerOffsetL_gkycxi_36._sizeL_gkycxi_28 ._chip_gkycxi_9,
434
- ._innerOffsetL_gkycxi_36._sizeM_gkycxi_24 ._chip_gkycxi_9{
451
+ ._innerOffsetL_144bj2e_36._sizeL_144bj2e_28 ._chip_144bj2e_9,
452
+ ._innerOffsetL_144bj2e_36._sizeM_144bj2e_24 ._chip_144bj2e_9{
435
453
  margin-right:4px;
436
454
  margin-left:4px
437
455
  }
438
456
  }
439
- ._innerOffsetL_gkycxi_36._sizeS_gkycxi_23 ._chip_gkycxi_9,
440
- ._innerOffsetL_gkycxi_36._sizeXs_gkycxi_15 ._chip_gkycxi_9{
457
+ ._innerOffsetL_144bj2e_36._sizeS_144bj2e_23 ._chip_144bj2e_9,
458
+ ._innerOffsetL_144bj2e_36._sizeXs_144bj2e_15 ._chip_144bj2e_9{
441
459
  margin-right:6px;
442
460
  margin-left:6px;
443
461
  }
444
462
  @media screen and (max-width: 640px){
445
- ._innerOffsetL_gkycxi_36._sizeS_gkycxi_23 ._chip_gkycxi_9,
446
- ._innerOffsetL_gkycxi_36._sizeXs_gkycxi_15 ._chip_gkycxi_9{
463
+ ._innerOffsetL_144bj2e_36._sizeS_144bj2e_23 ._chip_144bj2e_9,
464
+ ._innerOffsetL_144bj2e_36._sizeXs_144bj2e_15 ._chip_144bj2e_9{
447
465
  margin-right:4px;
448
466
  margin-left:4px
449
467
  }
450
468
  }
451
- ._innerOffsetM_gkycxi_58 ._chip_gkycxi_9{
469
+ ._innerOffsetM_144bj2e_58 ._chip_144bj2e_9{
452
470
  margin-right:4px;
453
471
  margin-left:4px;
454
472
  }
455
473
  @media screen and (max-width: 640px){
456
- ._innerOffsetM_gkycxi_58 ._chip_gkycxi_9{
474
+ ._innerOffsetM_144bj2e_58 ._chip_144bj2e_9{
457
475
  margin-right:4px;
458
476
  margin-left:4px
459
477
  }
460
478
  }
461
- ._icon_gkycxi_334{
479
+ ._icon_144bj2e_356{
462
480
  -webkit-box-flex:0;
463
481
  -ms-flex:0 0;
464
482
  flex:0 0;
465
483
  -ms-flex-preferred-size:auto;
466
484
  flex-basis:auto;
467
485
  }
468
- ._sizeXs_gkycxi_15 ._icon_gkycxi_334._iconLeft_gkycxi_338 {
486
+ ._sizeXs_144bj2e_15 ._icon_144bj2e_356._iconLeft_144bj2e_360 {
469
487
  width: 20px;
470
488
  height: 20px;
471
489
  min-width: 20px;
472
490
  min-height: 20px;
473
491
  margin: 0 8px 0 -2px;
474
492
  }
475
- ._sizeS_gkycxi_23 ._icon_gkycxi_334._iconLeft_gkycxi_338 {
493
+ ._sizeS_144bj2e_23 ._icon_144bj2e_356._iconLeft_144bj2e_360 {
476
494
  width: 20px;
477
495
  height: 20px;
478
496
  min-width: 20px;
479
497
  min-height: 20px;
480
498
  margin: 0 8px 0 -2px;
481
499
  }
482
- ._sizeM_gkycxi_24 ._icon_gkycxi_334._iconLeft_gkycxi_338 {
500
+ ._sizeM_144bj2e_24 ._icon_144bj2e_356._iconLeft_144bj2e_360 {
483
501
  width: 24px;
484
502
  height: 24px;
485
503
  min-width: 24px;
486
504
  min-height: 24px;
487
505
  margin: 0 8px 0 -2px;
488
506
  }
489
- ._sizeL_gkycxi_28 ._icon_gkycxi_334._iconLeft_gkycxi_338 {
507
+ ._sizeL_144bj2e_28 ._icon_144bj2e_356._iconLeft_144bj2e_360 {
490
508
  width: 28px;
491
509
  height: 28px;
492
510
  min-width: 28px;
493
511
  min-height: 28px;
494
512
  margin: 0 16px 0 -2px;
495
513
  }
496
- ._sizeXs_gkycxi_15 ._icon_gkycxi_334._iconRight_gkycxi_339 {
514
+ ._sizeXs_144bj2e_15 ._icon_144bj2e_356._iconRight_144bj2e_361 {
497
515
  width: 20px;
498
516
  height: 20px;
499
517
  min-width: 20px;
500
518
  min-height: 20px;
501
519
  margin: 0 -2px 0 8px;
502
520
  }
503
- ._sizeS_gkycxi_23 ._icon_gkycxi_334._iconRight_gkycxi_339 {
521
+ ._sizeS_144bj2e_23 ._icon_144bj2e_356._iconRight_144bj2e_361 {
504
522
  width: 20px;
505
523
  height: 20px;
506
524
  min-width: 20px;
507
525
  min-height: 20px;
508
526
  margin: 0 -2px 0 8px;
509
527
  }
510
- ._sizeM_gkycxi_24 ._icon_gkycxi_334._iconRight_gkycxi_339 {
528
+ ._sizeM_144bj2e_24 ._icon_144bj2e_356._iconRight_144bj2e_361 {
511
529
  width: 24px;
512
530
  height: 24px;
513
531
  min-width: 24px;
514
532
  min-height: 24px;
515
533
  margin: 0 -2px 0 8px;
516
534
  }
517
- ._sizeL_gkycxi_28 ._icon_gkycxi_334._iconRight_gkycxi_339 {
535
+ ._sizeL_144bj2e_28 ._icon_144bj2e_356._iconRight_144bj2e_361 {
518
536
  width: 28px;
519
537
  height: 28px;
520
538
  min-width: 28px;
521
539
  min-height: 28px;
522
540
  margin: 0 -2px 0 16px;
523
541
  }
524
- ._withoutText_gkycxi_114 ._icon_gkycxi_334._iconRight_gkycxi_339,
525
- ._withoutText_gkycxi_114 ._icon_gkycxi_334._iconLeft_gkycxi_338{
542
+ ._withoutText_144bj2e_136 ._icon_144bj2e_356._iconRight_144bj2e_361,
543
+ ._withoutText_144bj2e_136 ._icon_144bj2e_356._iconLeft_144bj2e_360{
526
544
  margin:0;
527
545
  }
@@ -1,21 +1,21 @@
1
1
  var styles = {
2
- "chipsContainer": "_chipsContainer_gkycxi_9",
3
- "sizeXs": "_sizeXs_gkycxi_15",
4
- "sizeS": "_sizeS_gkycxi_23",
5
- "sizeM": "_sizeM_gkycxi_24",
6
- "sizeL": "_sizeL_gkycxi_28",
7
- "innerOffsetL": "_innerOffsetL_gkycxi_36",
8
- "innerOffsetM": "_innerOffsetM_gkycxi_58",
9
- "chip": "_chip_gkycxi_9",
10
- "light": "_light_gkycxi_103",
11
- "dark": "_dark_gkycxi_108",
12
- "selected": "_selected_gkycxi_113",
13
- "withoutText": "_withoutText_gkycxi_114",
14
- "rs-reset-letter-spacing": "_rs-reset-letter-spacing_gkycxi_1",
15
- "rock": "_rock_gkycxi_157",
16
- "classic": "_classic_gkycxi_229",
17
- "icon": "_icon_gkycxi_334",
18
- "iconLeft": "_iconLeft_gkycxi_338",
19
- "iconRight": "_iconRight_gkycxi_339"
2
+ "chipsContainer": "_chipsContainer_144bj2e_9",
3
+ "sizeXs": "_sizeXs_144bj2e_15",
4
+ "sizeS": "_sizeS_144bj2e_23",
5
+ "sizeM": "_sizeM_144bj2e_24",
6
+ "sizeL": "_sizeL_144bj2e_28",
7
+ "innerOffsetL": "_innerOffsetL_144bj2e_36",
8
+ "innerOffsetM": "_innerOffsetM_144bj2e_58",
9
+ "chip": "_chip_144bj2e_9",
10
+ "light": "_light_144bj2e_125",
11
+ "dark": "_dark_144bj2e_130",
12
+ "selected": "_selected_144bj2e_135",
13
+ "withoutText": "_withoutText_144bj2e_136",
14
+ "rs-reset-letter-spacing": "_rs-reset-letter-spacing_144bj2e_1",
15
+ "rock": "_rock_144bj2e_179",
16
+ "classic": "_classic_144bj2e_251",
17
+ "icon": "_icon_144bj2e_356",
18
+ "iconLeft": "_iconLeft_144bj2e_360",
19
+ "iconRight": "_iconRight_144bj2e_361"
20
20
  };
21
21
  export { styles as default };
@@ -1,13 +1,19 @@
1
1
  import React from 'react';
2
2
  import { ChipListValueType } from './chip-list-context';
3
3
  export declare type ChipIconPosition = 'left' | 'right';
4
- export declare type ChipProps = {
4
+ export declare type ChipExplicitProps = {
5
5
  className?: string;
6
6
  value?: ChipListValueType;
7
7
  /** @ignore */
8
8
  itemId?: number;
9
+ /** @ignore */
10
+ onClick?: React.MouseEventHandler<HTMLElement>;
11
+ /** @ignore */
12
+ onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
9
13
  /** Identifier for e2e tests */
10
14
  'data-e2e'?: string;
15
+ /** Href for link-type Chip */
16
+ href?: string;
11
17
  children?: React.ReactNode;
12
18
  } & ({
13
19
  /** Additional icon */
@@ -18,5 +24,8 @@ export declare type ChipProps = {
18
24
  icon?: never;
19
25
  iconPosition?: never;
20
26
  });
21
- declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLDivElement>>;
27
+ declare type ChipButtonProps = ChipExplicitProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
28
+ declare type ChipAnchorProps = ChipExplicitProps & React.AnchorHTMLAttributes<HTMLAnchorElement>;
29
+ export declare type ChipProps = ChipButtonProps | ChipAnchorProps;
30
+ declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
22
31
  export default Chip;
package/lib/parts/chip.js CHANGED
@@ -5,9 +5,9 @@ import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable
5
5
  import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
6
6
  import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
7
7
  import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
8
- import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
9
8
  import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
10
- var _excluded = ["value", "className", "children", "icon", "iconPosition", "itemId", "data-e2e"];
9
+ import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
10
+ var _excluded = ["value", "className", "children", "icon", "iconPosition", "itemId", "onClick", "onKeyDown", "data-e2e"];
11
11
 
12
12
  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; }
13
13
 
@@ -17,7 +17,21 @@ import React, { forwardRef, cloneElement } from 'react';
17
17
  import PropTypes from 'prop-types';
18
18
  import cn from 'classnames';
19
19
  import styles from './chip-list.p.module.css.js';
20
- 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
+ import { useChipListContext } from './chip-list-context.js';
21
+ var ChipTag = /*#__PURE__*/forwardRef(function (props, ref) {
22
+ if (typeof props.href !== 'undefined') {
23
+ return /*#__PURE__*/React.createElement("a", _objectSpread({
24
+ ref: ref
25
+ }, props), props.children);
26
+ }
27
+
28
+ return /*#__PURE__*/React.createElement("button", _objectSpread(_objectSpread({
29
+ ref: ref
30
+ }, props), {}, {
31
+ type: "button"
32
+ }), props.children);
33
+ });
34
+ ChipTag.displayName = 'ChipTag'; // check for ignored jsx values and empty string, more info https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored
21
35
 
22
36
  var isWithoutChildren = function isWithoutChildren(children) {
23
37
  return children === null || typeof children === 'undefined' || children === false || children === true || children === '';
@@ -33,6 +47,8 @@ var Chip = /*#__PURE__*/forwardRef(function (_ref, ref) {
33
47
  _ref$iconPosition = _ref.iconPosition,
34
48
  iconPosition = _ref$iconPosition === void 0 ? 'left' : _ref$iconPosition,
35
49
  itemId = _ref.itemId,
50
+ _onClick = _ref.onClick,
51
+ _onKeyDown = _ref.onKeyDown,
36
52
  e2eId = _ref['data-e2e'],
37
53
  restProps = _objectWithoutProperties(_ref, _excluded);
38
54
 
@@ -43,14 +59,23 @@ var Chip = /*#__PURE__*/forwardRef(function (_ref, ref) {
43
59
  var selected = itemId === selectedId;
44
60
  var isRenderLeftIcon = icon && iconPosition === 'left';
45
61
  var isRenderRightIcon = icon && iconPosition === 'right';
46
- return /*#__PURE__*/React.createElement("div", _objectSpread(_objectSpread({}, restProps), {}, {
62
+ return /*#__PURE__*/React.createElement(ChipTag, _objectSpread(_objectSpread({}, restProps), {}, {
47
63
  className: cn(styles.chip, (_cn = {}, _defineProperty(_cn, styles.selected, selected), _defineProperty(_cn, styles.withoutText, isWithoutChildren(children)), _cn), className),
48
- onClick: function onClick() {
49
- return onChange(value);
64
+ onClick: function onClick(e) {
65
+ if (_onClick) {
66
+ _onClick(e);
67
+ }
68
+
69
+ onChange(value);
50
70
  },
51
71
  onKeyDown: function onKeyDown(e) {
52
- if (e.key === 'Enter') {
53
- onChange(value);
72
+ if (e.key === ' ') {
73
+ e.target.click();
74
+ e.preventDefault();
75
+ }
76
+
77
+ if (_onKeyDown) {
78
+ _onKeyDown(e);
54
79
  }
55
80
  },
56
81
  role: "tab",
@@ -60,7 +85,7 @@ var Chip = /*#__PURE__*/forwardRef(function (_ref, ref) {
60
85
  "data-test": "chip".concat(selected ? ' chip-selected' : '')
61
86
  }), isRenderLeftIcon && /*#__PURE__*/cloneElement(icon, {
62
87
  className: cn(icon.props.className, styles.icon, styles.iconLeft)
63
- }), /*#__PURE__*/React.createElement("div", null, children), isRenderRightIcon && /*#__PURE__*/cloneElement(icon, {
88
+ }), /*#__PURE__*/React.createElement("span", null, children), isRenderRightIcon && /*#__PURE__*/cloneElement(icon, {
64
89
  className: cn(icon.props.className, styles.icon, styles.iconRight)
65
90
  }));
66
91
  });
@@ -71,6 +96,8 @@ Chip.propTypes = {
71
96
  iconPosition: PropTypes.oneOf(['left', 'right']),
72
97
  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.symbol]),
73
98
  'data-e2e': PropTypes.string,
74
- itemId: PropTypes.number
99
+ itemId: PropTypes.number,
100
+ onClick: PropTypes.func,
101
+ onKeyDown: PropTypes.func
75
102
  };
76
103
  export { Chip as default };
@@ -1,2 +1,2 @@
1
1
  import React from 'react';
2
- export declare function deepMap(children: React.ReactNode, fn: (child: React.ReactNode) => React.ReactNode): (React.ReactChild | React.ReactFragment | React.ReactPortal)[];
2
+ export declare function deepMap(children: React.ReactNode, fn: (child: React.ReactNode) => React.ReactNode): React.ReactNode;
@@ -4,7 +4,8 @@ import React, { isValidElement, cloneElement } from 'react';
4
4
  function deepMap(children, fn) {
5
5
  var _context;
6
6
 
7
- return _mapInstanceProperty(_context = React.Children).call(_context, children, function (child, i) {
7
+ var processChild = function processChild(child) {
8
+ var i = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
8
9
  var returnChild = child;
9
10
 
10
11
  if (! /*#__PURE__*/isValidElement(returnChild)) {
@@ -19,7 +20,13 @@ function deepMap(children, fn) {
19
20
  }
20
21
 
21
22
  return fn(returnChild);
22
- });
23
+ };
24
+
25
+ if ( /*#__PURE__*/isValidElement(children)) {
26
+ return processChild(children);
27
+ }
28
+
29
+ return _mapInstanceProperty(_context = React.Children).call(_context, children, processChild);
23
30
  }
24
31
 
25
32
  export { deepMap };
@@ -1,5 +1,7 @@
1
1
  import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
2
- import { useMemo, cloneElement } from 'react';
2
+ import "core-js/modules/es.object.to-string.js";
3
+ import "core-js/modules/es.promise.js";
4
+ import React, { useMemo, cloneElement } from 'react';
3
5
  import { deepMap } from './deep-map.js';
4
6
  import Chip from './chip.js';
5
7
 
@@ -47,7 +49,7 @@ var useItemsIds = function useItemsIds(_ref2) {
47
49
  return child;
48
50
  }
49
51
  });
50
- return [items, currentSelectedItemId];
52
+ return [React.Children.toArray(items), currentSelectedItemId];
51
53
  }, [children, value, compareValues]),
52
54
  _useMemo2 = _slicedToArray(_useMemo, 2),
53
55
  childrenWithValues = _useMemo2[0],
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rescui/chip-list",
3
- "version": "0.3.4",
3
+ "version": "0.4.1",
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.7.4",
21
- "@rescui/icons": "^0.10.2",
20
+ "@rescui/button": "^0.8.0",
21
+ "@rescui/icons": "^0.10.3",
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.1.4",
31
+ "@rescui/colors": "^0.1.5",
32
32
  "@rescui/postcss-preset-library": "^0.1.0",
33
33
  "@rescui/scripts": "^0.1.7",
34
- "@rescui/typography": "^0.8.2",
35
- "@rescui/visual-regression": "^0.0.3"
34
+ "@rescui/typography": "^0.8.3",
35
+ "@rescui/visual-regression": "^0.0.4"
36
36
  },
37
37
  "scripts": {
38
38
  "build": "rescui-scripts build"
39
39
  },
40
- "gitHead": "399d5bcaf892b517a4b5d8108d509ed6549629f2"
40
+ "gitHead": "0aff4c2dbeda999f17acac6d77eb38864c28cc04"
41
41
  }