@rescui/chip-list 0.11.2 → 0.11.3-RUI-226-Update-card-cn-baacc2f1.68

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.
@@ -20,6 +20,8 @@ export declare type ChipListMultiProps<ValueType> = {
20
20
  compareValues?: (activeValue: ValueType[], value: ValueType) => boolean;
21
21
  /** Identifier for e2e tests */
22
22
  'data-e2e'?: string;
23
+ /** CSS style object */
24
+ style?: React.CSSProperties;
23
25
  };
24
26
  export declare function ChipListMulti<ValueType>({ onChange, compareValues, value, children, size, sparse, compact, disabled, mode, alignItems, ...props }: ChipListMultiProps<ValueType>): JSX.Element;
25
27
  export declare namespace ChipListMulti {
@@ -37,6 +39,7 @@ export declare namespace ChipListMulti {
37
39
  onChange: PropTypes.Validator<(...args: any[]) => any>;
38
40
  compareValues: PropTypes.Requireable<(...args: any[]) => any>;
39
41
  'data-e2e': PropTypes.Requireable<string>;
42
+ style: PropTypes.Requireable<object>;
40
43
  };
41
44
  }
42
45
  export default ChipListMulti;
@@ -49,6 +49,7 @@ ChipListMulti.propTypes = {
49
49
  value: PropTypes.array.isRequired,
50
50
  onChange: PropTypes.func.isRequired,
51
51
  compareValues: PropTypes.func,
52
- 'data-e2e': PropTypes.string
52
+ 'data-e2e': PropTypes.string,
53
+ style: PropTypes.object
53
54
  };
54
55
  export { ChipListMulti, compareValuesDefault, ChipListMulti as default };
@@ -19,6 +19,8 @@ export declare type ChipListProps<ValueType> = {
19
19
  compareValues?: (activeValue: ValueType, value: ValueType) => boolean;
20
20
  /** Identifier for e2e tests */
21
21
  'data-e2e'?: string;
22
+ /** CSS style object */
23
+ style?: React.CSSProperties;
22
24
  };
23
25
  export declare function ChipList<ValueType>({ children, compareValues, value, onChange, size, sparse, compact, disabled, mode, alignItems, ...props }: ChipListProps<ValueType>): JSX.Element;
24
26
  export declare namespace ChipList {
package/lib/chip-list.js CHANGED
@@ -45,6 +45,7 @@ ChipList.propTypes = {
45
45
  value: PropTypes.any.isRequired,
46
46
  onChange: PropTypes.func.isRequired,
47
47
  compareValues: PropTypes.func,
48
- 'data-e2e': PropTypes.string
48
+ 'data-e2e': PropTypes.string,
49
+ style: PropTypes.object
49
50
  };
50
51
  export { ChipList, compareValuesDefault };
package/lib/index.css CHANGED
@@ -1,19 +1,19 @@
1
- ._light_y5dd0n_8{
1
+ ._light_1v3fokv_8{
2
2
  --rs-theme-dark:0;
3
3
  }
4
- ._dark_y5dd0n_11{
4
+ ._dark_1v3fokv_11{
5
5
  --rs-theme-dark:1;
6
6
  }
7
- ._alignLeft_y5dd0n_15{
7
+ ._alignLeft_1v3fokv_15{
8
8
  --_rs-cl-align:left;
9
9
  }
10
- ._alignCenter_y5dd0n_18{
10
+ ._alignCenter_1v3fokv_18{
11
11
  --_rs-cl-align:center;
12
12
  }
13
- ._alignRight_y5dd0n_21{
13
+ ._alignRight_1v3fokv_21{
14
14
  --_rs-cl-align:right;
15
15
  }
16
- ._sizeXs_y5dd0n_25{
16
+ ._sizeXs_1v3fokv_25{
17
17
  --_rs-cl-chip-base-border-radius:4px;
18
18
  --_rs-cl-chip-compact-border-radius:var(--_rs-cl-chip-base-border-radius);
19
19
  --_rs-cl-chip-vertical-padding:2px;
@@ -27,8 +27,8 @@
27
27
  --_rs-cl-compact-horizontal-gap:4px;
28
28
  --_rs-cl-sparse-horizontal-gap:12px;
29
29
  }
30
- ._sizeXs_y5dd0n_25 [data-rs-internal='chip-list__chip']{
31
- --_rs-typography-letter-spacing:0.0045em;
30
+ ._sizeXs_1v3fokv_25 [data-rs-internal='chip-list__chip']{
31
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
32
32
  --_rs-typography-text-transform:initial;
33
33
  --_rs-typography-font-variant-numeric:initial;
34
34
  --_rs-typography-font-family:var(
@@ -61,7 +61,7 @@
61
61
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
62
62
  --_rs-typography-link-border-bottom-width-from-text:1px;
63
63
  }
64
- ._sizeS_y5dd0n_28{
64
+ ._sizeS_1v3fokv_28{
65
65
  --_rs-cl-chip-base-border-radius:16px;
66
66
  --_rs-cl-chip-compact-border-radius:4px;
67
67
  --_rs-cl-chip-vertical-padding:6px;
@@ -75,8 +75,8 @@
75
75
  --_rs-cl-compact-horizontal-gap:6px;
76
76
  --_rs-cl-sparse-horizontal-gap:12px;
77
77
  }
78
- ._sizeS_y5dd0n_28 [data-rs-internal='chip-list__chip']{
79
- --_rs-typography-letter-spacing:0.0045em;
78
+ ._sizeS_1v3fokv_28 [data-rs-internal='chip-list__chip']{
79
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
80
80
  --_rs-typography-text-transform:initial;
81
81
  --_rs-typography-font-variant-numeric:initial;
82
82
  --_rs-typography-font-family:var(
@@ -109,7 +109,7 @@
109
109
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
110
110
  --_rs-typography-link-border-bottom-width-from-text:1px;
111
111
  }
112
- ._sizeM_y5dd0n_31{
112
+ ._sizeM_1v3fokv_31{
113
113
  --_rs-cl-chip-base-border-radius:20px;
114
114
  --_rs-cl-chip-compact-border-radius:8px;
115
115
  --_rs-cl-chip-vertical-padding:8px;
@@ -123,8 +123,8 @@
123
123
  --_rs-cl-compact-horizontal-gap:6px;
124
124
  --_rs-cl-sparse-horizontal-gap:16px;
125
125
  }
126
- ._sizeM_y5dd0n_31 [data-rs-internal='chip-list__chip']{
127
- --_rs-typography-letter-spacing:0.0015em;
126
+ ._sizeM_1v3fokv_31 [data-rs-internal='chip-list__chip']{
127
+ --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
128
128
  --_rs-typography-text-transform:initial;
129
129
  --_rs-typography-font-variant-numeric:initial;
130
130
  --_rs-typography-font-family:var(
@@ -152,17 +152,20 @@
152
152
  --_rs-typography-text-auto-offset:16px;
153
153
  --_rs-typography-ul-list-li-padding-left:22px;
154
154
  --_rs-typography-ol-list-li-padding-left:26px;
155
- --_rs-typography-list-li-margin-top-from-text:16px;
155
+ --_rs-typography-list-li-margin-top-from-text:var(
156
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
157
+ 16px
158
+ );
156
159
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
157
160
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
158
161
  --_rs-typography-link-border-bottom-width-from-text:1px;
159
162
  }
160
163
  @media screen and (max-width: 640px){
161
- ._sizeM_y5dd0n_31 [data-rs-internal='chip-list__chip']{
162
- --_rs-typography-list-li-margin-top-from-text:12px;
164
+ ._sizeM_1v3fokv_31 [data-rs-internal='chip-list__chip']{
165
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
163
166
  }
164
167
  }
165
- ._sizeL_y5dd0n_34{
168
+ ._sizeL_1v3fokv_34{
166
169
  --_rs-cl-chip-base-border-radius:26px;
167
170
  --_rs-cl-chip-compact-border-radius:12px;
168
171
  --_rs-cl-chip-vertical-padding:12px;
@@ -177,12 +180,12 @@
177
180
  --_rs-cl-sparse-horizontal-gap:16px;
178
181
  }
179
182
  @media screen and (max-width: 640px){
180
- ._sizeL_y5dd0n_34{
183
+ ._sizeL_1v3fokv_34{
181
184
  --_rs-cl-vertical-gap:12px;
182
185
  }
183
186
  }
184
- ._sizeL_y5dd0n_34 [data-rs-internal='chip-list__chip']{
185
- --_rs-typography-letter-spacing:normal;
187
+ ._sizeL_1v3fokv_34 [data-rs-internal='chip-list__chip']{
188
+ --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
186
189
  --_rs-typography-text-transform:initial;
187
190
  --_rs-typography-font-variant-numeric:initial;
188
191
  --_rs-typography-font-family:var(
@@ -210,40 +213,43 @@
210
213
  --_rs-typography-text-auto-offset:32px;
211
214
  --_rs-typography-ul-list-li-padding-left:26px;
212
215
  --_rs-typography-ol-list-li-padding-left:32px;
213
- --_rs-typography-list-li-margin-top-from-text:24px;
216
+ --_rs-typography-list-li-margin-top-from-text:var(
217
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
218
+ 24px
219
+ );
214
220
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
215
221
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
216
222
  --_rs-typography-link-border-bottom-width-from-text:1px;
217
223
  }
218
224
  @media screen and (max-width: 640px){
219
- ._sizeL_y5dd0n_34 [data-rs-internal='chip-list__chip']{
220
- --_rs-typography-list-li-margin-top-from-text:16px;
225
+ ._sizeL_1v3fokv_34 [data-rs-internal='chip-list__chip']{
226
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
221
227
  }
222
228
  }
223
- ._innerOffsetL_y5dd0n_38{
229
+ ._innerOffsetL_1v3fokv_38{
224
230
  --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-sparse-horizontal-gap);
225
231
  }
226
232
  @media screen and (max-width: 640px){
227
- ._innerOffsetL_y5dd0n_38{
233
+ ._innerOffsetL_1v3fokv_38{
228
234
  --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-base-horizontal-gap);
229
235
  }
230
236
  }
231
- ._innerOffsetM_y5dd0n_41{
237
+ ._innerOffsetM_1v3fokv_41{
232
238
  --_rs-cl-horizontal-gap-from-sparse:initial;
233
239
  }
234
- ._classic_y5dd0n_45{
240
+ ._classic_1v3fokv_45{
235
241
  --_rs-cl-chip-active-border-color:var(--_rs-color-primary);
236
242
  --_rs-cl-chip-selected-border-color:var(--_rs-color-primary);
237
243
  --_rs-cl-chip-hover-background:var(--_rs-color-primary-t-fog);
238
244
  --_rs-cl-chip-active-background:var(--_rs-color-primary-t-fog);
239
245
  }
240
- ._rock_y5dd0n_48{
246
+ ._rock_1v3fokv_48{
241
247
  --_rs-cl-chip-active-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
242
248
  --_rs-cl-chip-selected-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
243
249
  --_rs-cl-chip-hover-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.1);
244
250
  --_rs-cl-chip-active-background:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.1);
245
251
  }
246
- ._compact_y5dd0n_52{
252
+ ._compact_1v3fokv_52{
247
253
  --_rs-cl-chip-border-radius-from-compact:var(
248
254
  --_rs-cl-chip-compact-border-radius
249
255
  );
@@ -252,7 +258,7 @@
252
258
  );
253
259
  --_rs-cl-horizontal-gap-from-compact:var(--_rs-cl-compact-horizontal-gap);
254
260
  }
255
- ._main_y5dd0n_56{
261
+ ._main_1v3fokv_56{
256
262
  --_rs-theme-dark:var(
257
263
  --_rs-internal-force-theme-dark-consult-rescui-before-using,
258
264
  var(--rs-theme-dark, 0)
@@ -262,7 +268,7 @@
262
268
  --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
263
269
  }
264
270
  @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
265
- ._main_y5dd0n_56{
271
+ ._main_1v3fokv_56{
266
272
  --_rs-color-primary:color-mix(in srgb, var(--rs-color-primary-light-theme, #6B57FF) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dark-theme, #8473FF) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
267
273
  --_rs-color-primary-dim:color-mix(in srgb, var(--rs-color-primary-dim-light-theme, #8979ff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-dim-dark-theme, #6f61d2) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
268
274
  --_rs-color-primary-fog:color-mix(in srgb, var(--rs-color-primary-fog-light-theme, #e1ddff) calc(100%*var(--_rs-theme-light-coefficient, 1)), var(--rs-color-primary-fog-dark-theme, #2e2b49) calc(100%*var(--_rs-theme-dark-coefficient, 0)));
@@ -271,7 +277,7 @@
271
277
  }
272
278
  }
273
279
  @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
274
- ._main_y5dd0n_56{
280
+ ._main_1v3fokv_56{
275
281
  --_rs-color-primary:rgb(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255);
276
282
  --_rs-color-primary-dim:rgb(calc(var(--_rs-theme-light-coefficient, 1)*137 + var(--_rs-theme-dark-coefficient, 0)*111), calc(var(--_rs-theme-light-coefficient, 1)*121 + var(--_rs-theme-dark-coefficient, 0)*97), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*210));
277
283
  --_rs-color-primary-fog:rgb(calc(var(--_rs-theme-light-coefficient, 1)*225 + var(--_rs-theme-dark-coefficient, 0)*46), calc(var(--_rs-theme-light-coefficient, 1)*221 + var(--_rs-theme-dark-coefficient, 0)*43), calc(var(--_rs-theme-light-coefficient, 1)*255 + var(--_rs-theme-dark-coefficient, 0)*73));
@@ -279,7 +285,7 @@
279
285
  --_rs-color-primary-t-fog:rgba(calc(var(--_rs-theme-light-coefficient, 1)*107 + var(--_rs-theme-dark-coefficient, 0)*132), calc(var(--_rs-theme-light-coefficient, 1)*87 + var(--_rs-theme-dark-coefficient, 0)*115), 255, calc(var(--_rs-theme-light-coefficient, 1)*0.2 + var(--_rs-theme-dark-coefficient, 0)*0.3));
280
286
  }
281
287
  }
282
- ._main_y5dd0n_56 {
288
+ ._main_1v3fokv_56 {
283
289
  --_rs-cl-chip-border-radius:var(
284
290
  --_rs-cl-chip-border-radius-from-compact,
285
291
  var(--_rs-cl-chip-base-border-radius)
@@ -293,7 +299,7 @@
293
299
  var(--_rs-cl-horizontal-gap-from-sparse, var(--_rs-cl-base-horizontal-gap))
294
300
  );
295
301
  }
296
- ._chipsContainer_y5dd0n_62{
302
+ ._chipsContainer_1v3fokv_62{
297
303
  position:relative;
298
304
 
299
305
  display:flex;
@@ -302,17 +308,17 @@
302
308
 
303
309
  gap:var(--_rs-cl-vertical-gap) var(--_rs-cl-horizontal-gap);
304
310
  }
305
- ._alignIconLeft_y5dd0n_72{
311
+ ._alignIconLeft_1v3fokv_72{
306
312
  --_rs-cl-chip-icon-flex-direction:row;
307
313
  --_rs-cl-chip-icon-position-multiplier-left:1;
308
314
  --_rs-cl-chip-icon-position-multiplier-right:0;
309
315
  }
310
- ._alignIconRight_y5dd0n_75{
316
+ ._alignIconRight_1v3fokv_75{
311
317
  --_rs-cl-chip-icon-flex-direction:row-reverse;
312
318
  --_rs-cl-chip-icon-position-multiplier-left:0;
313
319
  --_rs-cl-chip-icon-position-multiplier-right:1;
314
320
  }
315
- ._chip_y5dd0n_62{
321
+ ._chip_1v3fokv_62{
316
322
  letter-spacing:var(
317
323
  --rs-text-base-letter-spacing,
318
324
  var(--_rs-typography-letter-spacing)
@@ -364,22 +370,22 @@
364
370
  -moz-osx-font-smoothing:inherit;
365
371
  -webkit-appearance:none;
366
372
  }
367
- ._chip_y5dd0n_62::-moz-focus-inner{
373
+ ._chip_1v3fokv_62::-moz-focus-inner{
368
374
  padding:0;
369
375
 
370
376
  border:none;
371
377
  }
372
- ._chip_y5dd0n_62:hover,
373
- ._chip_y5dd0n_62:focus,
374
- ._chip_y5dd0n_62:active{
378
+ ._chip_1v3fokv_62:hover,
379
+ ._chip_1v3fokv_62:focus,
380
+ ._chip_1v3fokv_62:active{
375
381
  outline:none;
376
382
 
377
383
  text-decoration:none;
378
384
  }
379
- ._chip_y5dd0n_62:focus[data-focus-method='key']{
385
+ ._chip_1v3fokv_62:focus[data-focus-method='key']{
380
386
  box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
381
387
  }
382
- ._chip_y5dd0n_62:focus{
388
+ ._chip_1v3fokv_62:focus{
383
389
  --_rs-cl-chip-border-color:rgba(
384
390
  calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
385
391
  calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1)
@@ -388,7 +394,7 @@
388
394
  color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
389
395
  }
390
396
  @media (hover: hover){
391
- ._chip_y5dd0n_62:hover{
397
+ ._chip_1v3fokv_62:hover{
392
398
  --_rs-cl-chip-border-color:rgba(
393
399
  calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227),
394
400
  calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1)
@@ -399,20 +405,20 @@
399
405
  background:var(--_rs-cl-chip-hover-background);
400
406
  }
401
407
  }
402
- ._chip_y5dd0n_62:active{
408
+ ._chip_1v3fokv_62:active{
403
409
  --_rs-cl-chip-border-color:var(--_rs-cl-chip-active-border-color);
404
410
 
405
411
  color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
406
412
 
407
413
  background:var(--_rs-cl-chip-active-background);
408
414
  }
409
- ._chip_y5dd0n_62._selected_y5dd0n_172{
415
+ ._chip_1v3fokv_62._selected_1v3fokv_172{
410
416
  --_rs-cl-chip-border-color:var(--_rs-cl-chip-selected-border-color);
411
417
  --_rs-cl-chip-border-width:2px;
412
418
 
413
419
  color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227));
414
420
  }
415
- ._disabled_y5dd0n_179 ._chip_y5dd0n_62{
421
+ ._disabled_1v3fokv_179 ._chip_1v3fokv_62{
416
422
  --_rs-cl-chip-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.2);
417
423
 
418
424
  pointer-events:none;
@@ -421,10 +427,10 @@
421
427
 
422
428
  background:transparent;
423
429
  }
424
- ._disabled_y5dd0n_179 ._chip_y5dd0n_62._selected_y5dd0n_172{
430
+ ._disabled_1v3fokv_179 ._chip_1v3fokv_62._selected_1v3fokv_172{
425
431
  --_rs-cl-chip-border-color:rgba(calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(25 + var(--_rs-theme-dark-coefficient, 0)*230), calc(28 + var(--_rs-theme-dark-coefficient, 0)*227), 0.4);
426
432
  }
427
- ._chip_y5dd0n_62::before{
433
+ ._chip_1v3fokv_62::before{
428
434
  position:absolute;
429
435
  top:0;
430
436
  right:0;
@@ -441,7 +447,7 @@
441
447
 
442
448
  transition:border-color 100ms;
443
449
  }
444
- ._chip_y5dd0n_62 ._icon_y5dd0n_212{
450
+ ._chip_1v3fokv_62 ._icon_1v3fokv_212{
445
451
  flex:0 0 auto;
446
452
 
447
453
  width:auto;
@@ -450,7 +456,7 @@
450
456
  margin:0;
451
457
  fill:currentColor;
452
458
  }
453
- ._withoutText_y5dd0n_223{
459
+ ._withoutText_1v3fokv_223{
454
460
  --_rs-cl-chip-horizontal-real-padding:var(--_rs-cl-chip-icon-only-padding);
455
461
  --_rs-cl-chip-vertical-real-padding:var(--_rs-cl-chip-icon-only-padding);
456
462
  }
@@ -18,5 +18,7 @@ export declare type ChipListBaseProps<V> = {
18
18
  compareValues?: (activeValue: V[], value: V) => boolean;
19
19
  /** Identifier for e2e tests */
20
20
  'data-e2e'?: string;
21
+ /** CSS style object */
22
+ style?: React.CSSProperties;
21
23
  };
22
- export declare function ChipListBase<V>({ size, sparse, compact, disabled, className, mode, alignItems, theme: themeFromProps, value, onChange, compareValues, children, ['data-e2e']: e2eId }: ChipListBaseProps<V>): JSX.Element;
24
+ export declare function ChipListBase<V>({ size, sparse, compact, disabled, className, mode, alignItems, theme: themeFromProps, value, onChange, compareValues, children, ['data-e2e']: e2eId, style }: ChipListBaseProps<V>): JSX.Element;
@@ -30,7 +30,8 @@ function ChipListBase(_ref) {
30
30
  onChange,
31
31
  compareValues,
32
32
  children,
33
- ['data-e2e']: e2eId
33
+ ['data-e2e']: e2eId,
34
+ style
34
35
  } = _ref;
35
36
  const theme = useThemeWithUndefined(themeFromProps);
36
37
  const {
@@ -51,7 +52,8 @@ function ChipListBase(_ref) {
51
52
  className: cn(styles.main, styles[theme], styles[mode], STYLES_SIZES[size], sparse ? styles.innerOffsetL : styles.innerOffsetM, compact && styles.compact, disabled && styles.disabled, ALIGN_ITEMS_STYLES[alignItems], className),
52
53
  "data-e2e": e2eId ? `${e2eId}__chips-container` : null,
53
54
  "data-rs-internal": 'chip-list',
54
- "data-test": 'chip-list'
55
+ "data-test": 'chip-list',
56
+ style: style
55
57
  }, /*#__PURE__*/React.createElement("div", {
56
58
  className: styles.chipsContainer
57
59
  }, childrenWithValues)));
@@ -1,26 +1,26 @@
1
1
  var styles = {
2
- "light": "_light_y5dd0n_8",
3
- "dark": "_dark_y5dd0n_11",
4
- "alignLeft": "_alignLeft_y5dd0n_15",
5
- "alignCenter": "_alignCenter_y5dd0n_18",
6
- "alignRight": "_alignRight_y5dd0n_21",
7
- "sizeXs": "_sizeXs_y5dd0n_25",
8
- "sizeS": "_sizeS_y5dd0n_28",
9
- "sizeM": "_sizeM_y5dd0n_31",
10
- "sizeL": "_sizeL_y5dd0n_34",
11
- "innerOffsetL": "_innerOffsetL_y5dd0n_38",
12
- "innerOffsetM": "_innerOffsetM_y5dd0n_41",
13
- "classic": "_classic_y5dd0n_45",
14
- "rock": "_rock_y5dd0n_48",
15
- "compact": "_compact_y5dd0n_52",
16
- "main": "_main_y5dd0n_56",
17
- "chipsContainer": "_chipsContainer_y5dd0n_62",
18
- "alignIconLeft": "_alignIconLeft_y5dd0n_72",
19
- "alignIconRight": "_alignIconRight_y5dd0n_75",
20
- "chip": "_chip_y5dd0n_62",
21
- "selected": "_selected_y5dd0n_172",
22
- "disabled": "_disabled_y5dd0n_179",
23
- "icon": "_icon_y5dd0n_212",
24
- "withoutText": "_withoutText_y5dd0n_223"
2
+ "light": "_light_1v3fokv_8",
3
+ "dark": "_dark_1v3fokv_11",
4
+ "alignLeft": "_alignLeft_1v3fokv_15",
5
+ "alignCenter": "_alignCenter_1v3fokv_18",
6
+ "alignRight": "_alignRight_1v3fokv_21",
7
+ "sizeXs": "_sizeXs_1v3fokv_25",
8
+ "sizeS": "_sizeS_1v3fokv_28",
9
+ "sizeM": "_sizeM_1v3fokv_31",
10
+ "sizeL": "_sizeL_1v3fokv_34",
11
+ "innerOffsetL": "_innerOffsetL_1v3fokv_38",
12
+ "innerOffsetM": "_innerOffsetM_1v3fokv_41",
13
+ "classic": "_classic_1v3fokv_45",
14
+ "rock": "_rock_1v3fokv_48",
15
+ "compact": "_compact_1v3fokv_52",
16
+ "main": "_main_1v3fokv_56",
17
+ "chipsContainer": "_chipsContainer_1v3fokv_62",
18
+ "alignIconLeft": "_alignIconLeft_1v3fokv_72",
19
+ "alignIconRight": "_alignIconRight_1v3fokv_75",
20
+ "chip": "_chip_1v3fokv_62",
21
+ "selected": "_selected_1v3fokv_172",
22
+ "disabled": "_disabled_1v3fokv_179",
23
+ "icon": "_icon_1v3fokv_212",
24
+ "withoutText": "_withoutText_1v3fokv_223"
25
25
  };
26
26
  export { styles as default };
package/lib/parts/chip.js CHANGED
@@ -78,7 +78,8 @@ const Chip = /*#__PURE__*/forwardRef((_ref, ref) => {
78
78
  "data-test": `chip${selected ? ' chip-selected' : ''}`,
79
79
  "data-rs-internal": 'chip-list__chip'
80
80
  }, icon && /*#__PURE__*/cloneElement(icon, {
81
- className: cn(icon.props.className, styles.icon)
81
+ className: cn(icon.props.className, styles.icon),
82
+ 'data-render-all-sizes': true
82
83
  }), !isWithoutText && /*#__PURE__*/React.createElement("span", null, children));
83
84
  });
84
85
  Chip.displayName = 'Chip';
@@ -44,7 +44,7 @@
44
44
  --_rs-cl-sparse-horizontal-gap:12px;
45
45
  }
46
46
  &:not(html) [data-rs-internal='chip-list__chip']{
47
- --_rs-typography-letter-spacing:0.0045em;
47
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
48
48
  --_rs-typography-text-transform:initial;
49
49
  --_rs-typography-font-variant-numeric:initial;
50
50
  --_rs-typography-font-family:var(
@@ -94,7 +94,7 @@
94
94
  --_rs-cl-sparse-horizontal-gap:12px;
95
95
  }
96
96
  &:not(html) [data-rs-internal='chip-list__chip']{
97
- --_rs-typography-letter-spacing:0.0045em;
97
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
98
98
  --_rs-typography-text-transform:initial;
99
99
  --_rs-typography-font-variant-numeric:initial;
100
100
  --_rs-typography-font-family:var(
@@ -144,7 +144,7 @@
144
144
  --_rs-cl-sparse-horizontal-gap:16px;
145
145
  }
146
146
  &:not(html) [data-rs-internal='chip-list__chip']{
147
- --_rs-typography-letter-spacing:0.0015em;
147
+ --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
148
148
  --_rs-typography-text-transform:initial;
149
149
  --_rs-typography-font-variant-numeric:initial;
150
150
  --_rs-typography-font-family:var(
@@ -172,14 +172,17 @@
172
172
  --_rs-typography-text-auto-offset:16px;
173
173
  --_rs-typography-ul-list-li-padding-left:22px;
174
174
  --_rs-typography-ol-list-li-padding-left:26px;
175
- --_rs-typography-list-li-margin-top-from-text:16px;
175
+ --_rs-typography-list-li-margin-top-from-text:var(
176
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
177
+ 16px
178
+ );
176
179
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
177
180
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
178
181
  --_rs-typography-link-border-bottom-width-from-text:1px;
179
182
  }
180
183
  @media screen and (max-width: 640px){
181
184
  &:not(html) [data-rs-internal='chip-list__chip']{
182
- --_rs-typography-list-li-margin-top-from-text:12px;
185
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
183
186
  }
184
187
  }
185
188
  }
@@ -204,7 +207,7 @@
204
207
  }
205
208
  }
206
209
  &:not(html) [data-rs-internal='chip-list__chip']{
207
- --_rs-typography-letter-spacing:normal;
210
+ --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
208
211
  --_rs-typography-text-transform:initial;
209
212
  --_rs-typography-font-variant-numeric:initial;
210
213
  --_rs-typography-font-family:var(
@@ -232,14 +235,17 @@
232
235
  --_rs-typography-text-auto-offset:32px;
233
236
  --_rs-typography-ul-list-li-padding-left:26px;
234
237
  --_rs-typography-ol-list-li-padding-left:32px;
235
- --_rs-typography-list-li-margin-top-from-text:24px;
238
+ --_rs-typography-list-li-margin-top-from-text:var(
239
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
240
+ 24px
241
+ );
236
242
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
237
243
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
238
244
  --_rs-typography-link-border-bottom-width-from-text:1px;
239
245
  }
240
246
  @media screen and (max-width: 640px){
241
247
  &:not(html) [data-rs-internal='chip-list__chip']{
242
- --_rs-typography-list-li-margin-top-from-text:16px;
248
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
243
249
  }
244
250
  }
245
251
  }
@@ -319,7 +325,7 @@
319
325
  --_rs-cl-sparse-horizontal-gap:12px;
320
326
  }
321
327
  &:not(html) [data-rs-internal='chip-list__chip']{
322
- --_rs-typography-letter-spacing:0.0045em;
328
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
323
329
  --_rs-typography-text-transform:initial;
324
330
  --_rs-typography-font-variant-numeric:initial;
325
331
  --_rs-typography-font-family:var(
@@ -369,7 +375,7 @@
369
375
  --_rs-cl-sparse-horizontal-gap:12px;
370
376
  }
371
377
  &:not(html) [data-rs-internal='chip-list__chip']{
372
- --_rs-typography-letter-spacing:0.0045em;
378
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
373
379
  --_rs-typography-text-transform:initial;
374
380
  --_rs-typography-font-variant-numeric:initial;
375
381
  --_rs-typography-font-family:var(
@@ -419,7 +425,7 @@
419
425
  --_rs-cl-sparse-horizontal-gap:16px;
420
426
  }
421
427
  &:not(html) [data-rs-internal='chip-list__chip']{
422
- --_rs-typography-letter-spacing:0.0015em;
428
+ --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
423
429
  --_rs-typography-text-transform:initial;
424
430
  --_rs-typography-font-variant-numeric:initial;
425
431
  --_rs-typography-font-family:var(
@@ -447,14 +453,17 @@
447
453
  --_rs-typography-text-auto-offset:16px;
448
454
  --_rs-typography-ul-list-li-padding-left:22px;
449
455
  --_rs-typography-ol-list-li-padding-left:26px;
450
- --_rs-typography-list-li-margin-top-from-text:16px;
456
+ --_rs-typography-list-li-margin-top-from-text:var(
457
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
458
+ 16px
459
+ );
451
460
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
452
461
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
453
462
  --_rs-typography-link-border-bottom-width-from-text:1px;
454
463
  }
455
464
  @media screen and (max-width: 640px){
456
465
  &:not(html) [data-rs-internal='chip-list__chip']{
457
- --_rs-typography-list-li-margin-top-from-text:12px;
466
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
458
467
  }
459
468
  }
460
469
  }
@@ -479,7 +488,7 @@
479
488
  }
480
489
  }
481
490
  &:not(html) [data-rs-internal='chip-list__chip']{
482
- --_rs-typography-letter-spacing:normal;
491
+ --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
483
492
  --_rs-typography-text-transform:initial;
484
493
  --_rs-typography-font-variant-numeric:initial;
485
494
  --_rs-typography-font-family:var(
@@ -507,14 +516,17 @@
507
516
  --_rs-typography-text-auto-offset:32px;
508
517
  --_rs-typography-ul-list-li-padding-left:26px;
509
518
  --_rs-typography-ol-list-li-padding-left:32px;
510
- --_rs-typography-list-li-margin-top-from-text:24px;
519
+ --_rs-typography-list-li-margin-top-from-text:var(
520
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
521
+ 24px
522
+ );
511
523
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
512
524
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
513
525
  --_rs-typography-link-border-bottom-width-from-text:1px;
514
526
  }
515
527
  @media screen and (max-width: 640px){
516
528
  &:not(html) [data-rs-internal='chip-list__chip']{
517
- --_rs-typography-list-li-margin-top-from-text:16px;
529
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
518
530
  }
519
531
  }
520
532
  }
@@ -44,7 +44,7 @@
44
44
  --_rs-cl-sparse-horizontal-gap:12px;
45
45
  }
46
46
  &:not(html) [data-rs-internal='chip-list__chip']{
47
- --_rs-typography-letter-spacing:0.0045em;
47
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
48
48
  --_rs-typography-text-transform:initial;
49
49
  --_rs-typography-font-variant-numeric:initial;
50
50
  --_rs-typography-font-family:var(
@@ -94,7 +94,7 @@
94
94
  --_rs-cl-sparse-horizontal-gap:12px;
95
95
  }
96
96
  &:not(html) [data-rs-internal='chip-list__chip']{
97
- --_rs-typography-letter-spacing:0.0045em;
97
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
98
98
  --_rs-typography-text-transform:initial;
99
99
  --_rs-typography-font-variant-numeric:initial;
100
100
  --_rs-typography-font-family:var(
@@ -144,7 +144,7 @@
144
144
  --_rs-cl-sparse-horizontal-gap:16px;
145
145
  }
146
146
  &:not(html) [data-rs-internal='chip-list__chip']{
147
- --_rs-typography-letter-spacing:0.0015em;
147
+ --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
148
148
  --_rs-typography-text-transform:initial;
149
149
  --_rs-typography-font-variant-numeric:initial;
150
150
  --_rs-typography-font-family:var(
@@ -172,14 +172,17 @@
172
172
  --_rs-typography-text-auto-offset:16px;
173
173
  --_rs-typography-ul-list-li-padding-left:22px;
174
174
  --_rs-typography-ol-list-li-padding-left:26px;
175
- --_rs-typography-list-li-margin-top-from-text:16px;
175
+ --_rs-typography-list-li-margin-top-from-text:var(
176
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
177
+ 16px
178
+ );
176
179
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
177
180
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
178
181
  --_rs-typography-link-border-bottom-width-from-text:1px;
179
182
  }
180
183
  @media screen and (max-width: 640px){
181
184
  &:not(html) [data-rs-internal='chip-list__chip']{
182
- --_rs-typography-list-li-margin-top-from-text:12px;
185
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
183
186
  }
184
187
  }
185
188
  }
@@ -204,7 +207,7 @@
204
207
  }
205
208
  }
206
209
  &:not(html) [data-rs-internal='chip-list__chip']{
207
- --_rs-typography-letter-spacing:normal;
210
+ --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
208
211
  --_rs-typography-text-transform:initial;
209
212
  --_rs-typography-font-variant-numeric:initial;
210
213
  --_rs-typography-font-family:var(
@@ -232,14 +235,17 @@
232
235
  --_rs-typography-text-auto-offset:32px;
233
236
  --_rs-typography-ul-list-li-padding-left:26px;
234
237
  --_rs-typography-ol-list-li-padding-left:32px;
235
- --_rs-typography-list-li-margin-top-from-text:24px;
238
+ --_rs-typography-list-li-margin-top-from-text:var(
239
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
240
+ 24px
241
+ );
236
242
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
237
243
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
238
244
  --_rs-typography-link-border-bottom-width-from-text:1px;
239
245
  }
240
246
  @media screen and (max-width: 640px){
241
247
  &:not(html) [data-rs-internal='chip-list__chip']{
242
- --_rs-typography-list-li-margin-top-from-text:16px;
248
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
243
249
  }
244
250
  }
245
251
  }
@@ -319,7 +325,7 @@
319
325
  --_rs-cl-sparse-horizontal-gap:12px;
320
326
  }
321
327
  &:not(html) [data-rs-internal='chip-list__chip']{
322
- --_rs-typography-letter-spacing:0.0045em;
328
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
323
329
  --_rs-typography-text-transform:initial;
324
330
  --_rs-typography-font-variant-numeric:initial;
325
331
  --_rs-typography-font-family:var(
@@ -369,7 +375,7 @@
369
375
  --_rs-cl-sparse-horizontal-gap:12px;
370
376
  }
371
377
  &:not(html) [data-rs-internal='chip-list__chip']{
372
- --_rs-typography-letter-spacing:0.0045em;
378
+ --_rs-typography-letter-spacing:var(--rs-text-3-letter-spacing, 0.0045em);
373
379
  --_rs-typography-text-transform:initial;
374
380
  --_rs-typography-font-variant-numeric:initial;
375
381
  --_rs-typography-font-family:var(
@@ -419,7 +425,7 @@
419
425
  --_rs-cl-sparse-horizontal-gap:16px;
420
426
  }
421
427
  &:not(html) [data-rs-internal='chip-list__chip']{
422
- --_rs-typography-letter-spacing:0.0015em;
428
+ --_rs-typography-letter-spacing:var(--rs-text-2-letter-spacing, 0.0015em);
423
429
  --_rs-typography-text-transform:initial;
424
430
  --_rs-typography-font-variant-numeric:initial;
425
431
  --_rs-typography-font-family:var(
@@ -447,14 +453,17 @@
447
453
  --_rs-typography-text-auto-offset:16px;
448
454
  --_rs-typography-ul-list-li-padding-left:22px;
449
455
  --_rs-typography-ol-list-li-padding-left:26px;
450
- --_rs-typography-list-li-margin-top-from-text:16px;
456
+ --_rs-typography-list-li-margin-top-from-text:var(
457
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text,
458
+ 16px
459
+ );
451
460
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
452
461
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
453
462
  --_rs-typography-link-border-bottom-width-from-text:1px;
454
463
  }
455
464
  @media screen and (max-width: 640px){
456
465
  &:not(html) [data-rs-internal='chip-list__chip']{
457
- --_rs-typography-list-li-margin-top-from-text:12px;
466
+ --_rs-typography-text-2-sm-list-li-margin-top-from-text:12px;
458
467
  }
459
468
  }
460
469
  }
@@ -479,7 +488,7 @@
479
488
  }
480
489
  }
481
490
  &:not(html) [data-rs-internal='chip-list__chip']{
482
- --_rs-typography-letter-spacing:normal;
491
+ --_rs-typography-letter-spacing:var(--rs-text-1-letter-spacing, normal);
483
492
  --_rs-typography-text-transform:initial;
484
493
  --_rs-typography-font-variant-numeric:initial;
485
494
  --_rs-typography-font-family:var(
@@ -507,14 +516,17 @@
507
516
  --_rs-typography-text-auto-offset:32px;
508
517
  --_rs-typography-ul-list-li-padding-left:26px;
509
518
  --_rs-typography-ol-list-li-padding-left:32px;
510
- --_rs-typography-list-li-margin-top-from-text:24px;
519
+ --_rs-typography-list-li-margin-top-from-text:var(
520
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text,
521
+ 24px
522
+ );
511
523
  --_rs-typography-link-standalone-border-offset-from-text-base:1.15em;
512
524
  --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
513
525
  --_rs-typography-link-border-bottom-width-from-text:1px;
514
526
  }
515
527
  @media screen and (max-width: 640px){
516
528
  &:not(html) [data-rs-internal='chip-list__chip']{
517
- --_rs-typography-list-li-margin-top-from-text:16px;
529
+ --_rs-typography-text-1-sm-list-li-margin-top-from-text:16px;
518
530
  }
519
531
  }
520
532
  }
package/package.json CHANGED
@@ -1,10 +1,11 @@
1
1
  {
2
2
  "name": "@rescui/chip-list",
3
- "version": "0.11.2",
3
+ "version": "0.11.3-RUI-226-Update-card-cn-baacc2f1.68+baacc2f1",
4
4
  "description": "",
5
5
  "license": "Apache-2.0",
6
6
  "author": "JetBrains",
7
7
  "main": "lib/index.js",
8
+ "module": "lib/index.js",
8
9
  "src:main": "src/index.ts",
9
10
  "files": [
10
11
  "lib",
@@ -23,15 +24,15 @@
23
24
  "react": ">=16.8.0 <19"
24
25
  },
25
26
  "devDependencies": {
26
- "@rescui/colors": "^0.2.6",
27
- "@rescui/scripts": "^0.3.5",
28
- "@rescui/typography": "^0.19.1",
29
- "@rescui/visual-regression": "^0.1.2"
27
+ "@rescui/colors": "0.2.7-RUI-226-Update-card-cn-baacc2f1.68+baacc2f1",
28
+ "@rescui/scripts": "0.4.0",
29
+ "@rescui/typography": "0.19.2-RUI-226-Update-card-cn-baacc2f1.68+baacc2f1",
30
+ "@rescui/visual-regression": "0.1.2"
30
31
  },
31
32
  "scripts": {
32
33
  "build": "rescui-scripts build && yarn run build-pcss-api",
33
34
  "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
34
35
  },
35
36
  "nx": {},
36
- "gitHead": "67627f69be3de4b4c6a21244fd7de36e841f01f0"
37
+ "gitHead": "baacc2f1a9fe296e6d64d62b8b3143d09cdb70fb"
37
38
  }