@rescui/chip-list 0.11.1 → 0.11.3-RUI-226-Update-card-cn-6e43cc89.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/lib/chip-list-multi.d.ts +3 -0
  2. package/lib/chip-list-multi.js +23 -51
  3. package/lib/chip-list.d.ts +2 -0
  4. package/lib/chip-list.js +21 -44
  5. package/lib/index.css +68 -93
  6. package/lib/parts/chip-list-base.d.ts +3 -1
  7. package/lib/parts/chip-list-base.js +33 -36
  8. package/lib/parts/chip-list-context.js +3 -5
  9. package/lib/parts/chip-list.p.module.css.js +23 -23
  10. package/lib/parts/chip.js +48 -61
  11. package/lib/parts/deep-map.js +4 -7
  12. package/lib/parts/use-items-ids.js +25 -29
  13. package/lib/public-api.p.css +28 -16
  14. package/lib/public-api.pcss +28 -16
  15. package/package.json +9 -9
package/lib/chip-list-multi.d.ts CHANGED
@@ -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;
package/lib/chip-list-multi.js CHANGED
@@ -1,68 +1,39 @@
1
- import "core-js/modules/es.object.to-string.js";
2
- import "core-js/modules/web.dom-collections.for-each.js";
3
- import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
4
- import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
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 _toConsumableArray from "@babel/runtime-corejs3/helpers/esm/toConsumableArray";
8
- import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
9
- import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
10
- var _excluded = ["onChange", "compareValues", "value", "children", "size", "sparse", "compact", "disabled", "mode", "alignItems"];
11
-
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
-
14
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
15
-
16
1
  import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
17
- import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
18
- import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
19
2
  import React from 'react';
20
3
  import PropTypes from 'prop-types';
21
4
  import { ChipListBase } from './parts/chip-list-base.js';
22
5
 
23
- var compareValuesDefault = function compareValuesDefault(activeValues, value) {
24
- return Array.isArray(activeValues) && _includesInstanceProperty(activeValues).call(activeValues, value);
25
- };
6
+ const compareValuesDefault = (activeValues, value) => Array.isArray(activeValues) && _includesInstanceProperty(activeValues).call(activeValues, value);
26
7
 
27
8
  function ChipListMulti(_ref) {
28
- var _onChange = _ref.onChange,
29
- _ref$compareValues = _ref.compareValues,
30
- compareValues = _ref$compareValues === void 0 ? compareValuesDefault : _ref$compareValues,
31
- value = _ref.value,
32
- children = _ref.children,
33
- _ref$size = _ref.size,
34
- size = _ref$size === void 0 ? 'm' : _ref$size,
35
- _ref$sparse = _ref.sparse,
36
- sparse = _ref$sparse === void 0 ? false : _ref$sparse,
37
- _ref$compact = _ref.compact,
38
- compact = _ref$compact === void 0 ? false : _ref$compact,
39
- _ref$disabled = _ref.disabled,
40
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
41
- _ref$mode = _ref.mode,
42
- mode = _ref$mode === void 0 ? 'classic' : _ref$mode,
43
- _ref$alignItems = _ref.alignItems,
44
- alignItems = _ref$alignItems === void 0 ? 'left' : _ref$alignItems,
45
- props = _objectWithoutProperties(_ref, _excluded);
46
-
47
- return /*#__PURE__*/React.createElement(ChipListBase, _objectSpread({
9
+ let {
10
+ onChange,
11
+ compareValues = compareValuesDefault,
12
+ value,
13
+ children,
14
+ size = 'm',
15
+ sparse = false,
16
+ compact = false,
17
+ disabled = false,
18
+ mode = 'classic',
19
+ alignItems = 'left',
20
+ ...props
21
+ } = _ref;
22
+ return /*#__PURE__*/React.createElement(ChipListBase, {
48
23
  compareValues: compareValues,
49
24
  value: value,
50
- onChange: function onChange(changedValue) {
51
- var _context;
52
-
53
- var newValues = _includesInstanceProperty(value).call(value, changedValue) ? _filterInstanceProperty(value).call(value, function (v) {
54
- return v !== changedValue;
55
- }) : _concatInstanceProperty(_context = []).call(_context, _toConsumableArray(value), [changedValue]);
56
-
57
- _onChange(newValues);
25
+ onChange: changedValue => {
26
+ const newValues = _includesInstanceProperty(value).call(value, changedValue) ? value.filter(v => v !== changedValue) : [...value, changedValue];
27
+ onChange(newValues);
58
28
  },
59
29
  size: size,
60
30
  sparse: sparse,
61
31
  compact: compact,
62
32
  disabled: disabled,
63
33
  mode: mode,
64
- alignItems: alignItems
65
- }, props), children);
34
+ alignItems: alignItems,
35
+ ...props
36
+ }, children);
66
37
  }
67
38
 
68
39
  ChipListMulti.displayName = 'ChipListMulti';
@@ -78,6 +49,7 @@ ChipListMulti.propTypes = {
78
49
  value: PropTypes.array.isRequired,
79
50
  onChange: PropTypes.func.isRequired,
80
51
  compareValues: PropTypes.func,
81
- 'data-e2e': PropTypes.string
52
+ 'data-e2e': PropTypes.string,
53
+ style: PropTypes.object
82
54
  };
83
55
  export { ChipListMulti, compareValuesDefault, ChipListMulti as default };
package/lib/chip-list.d.ts CHANGED
@@ -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
@@ -1,50 +1,25 @@
1
- import "core-js/modules/es.object.to-string.js";
2
- import "core-js/modules/web.dom-collections.for-each.js";
3
- import _Object$keys from "@babel/runtime-corejs3/core-js-stable/object/keys";
4
- import _Object$getOwnPropertySymbols from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols";
5
- import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/filter";
6
- import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor";
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
- import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
10
- var _excluded = ["children", "compareValues", "value", "onChange", "size", "sparse", "compact", "disabled", "mode", "alignItems"];
11
-
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
-
14
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? Object.defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
15
-
16
1
  import React from 'react';
17
2
  import PropTypes from 'prop-types';
18
3
  import { ChipListBase } from './parts/chip-list-base.js';
19
4
 
20
- var compareValuesDefault = function compareValuesDefault(activeValue, value) {
21
- return activeValue === value;
22
- };
5
+ const compareValuesDefault = (activeValue, value) => activeValue === value;
23
6
 
24
7
  function ChipList(_ref) {
25
- var children = _ref.children,
26
- _ref$compareValues = _ref.compareValues,
27
- _compareValues = _ref$compareValues === void 0 ? compareValuesDefault : _ref$compareValues,
28
- value = _ref.value,
29
- onChange = _ref.onChange,
30
- _ref$size = _ref.size,
31
- size = _ref$size === void 0 ? 'm' : _ref$size,
32
- _ref$sparse = _ref.sparse,
33
- sparse = _ref$sparse === void 0 ? false : _ref$sparse,
34
- _ref$compact = _ref.compact,
35
- compact = _ref$compact === void 0 ? false : _ref$compact,
36
- _ref$disabled = _ref.disabled,
37
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
38
- _ref$mode = _ref.mode,
39
- mode = _ref$mode === void 0 ? 'classic' : _ref$mode,
40
- _ref$alignItems = _ref.alignItems,
41
- alignItems = _ref$alignItems === void 0 ? 'left' : _ref$alignItems,
42
- props = _objectWithoutProperties(_ref, _excluded);
43
-
44
- return /*#__PURE__*/React.createElement(ChipListBase, _objectSpread({
45
- compareValues: function compareValues(activeValues, compareVal) {
46
- return _compareValues(activeValues[0], compareVal);
47
- },
8
+ let {
9
+ children,
10
+ compareValues = compareValuesDefault,
11
+ value,
12
+ onChange,
13
+ size = 'm',
14
+ sparse = false,
15
+ compact = false,
16
+ disabled = false,
17
+ mode = 'classic',
18
+ alignItems = 'left',
19
+ ...props
20
+ } = _ref;
21
+ return /*#__PURE__*/React.createElement(ChipListBase, {
22
+ compareValues: (activeValues, compareVal) => compareValues(activeValues[0], compareVal),
48
23
  onChange: onChange,
49
24
  value: [value],
50
25
  size: size,
@@ -52,8 +27,9 @@ function ChipList(_ref) {
52
27
  compact: compact,
53
28
  disabled: disabled,
54
29
  mode: mode,
55
- alignItems: alignItems
56
- }, props), children);
30
+ alignItems: alignItems,
31
+ ...props
32
+ }, children);
57
33
  }
58
34
 
59
35
  ChipList.displayName = 'ChipList';
@@ -69,6 +45,7 @@ ChipList.propTypes = {
69
45
  value: PropTypes.any.isRequired,
70
46
  onChange: PropTypes.func.isRequired,
71
47
  compareValues: PropTypes.func,
72
- 'data-e2e': PropTypes.string
48
+ 'data-e2e': PropTypes.string,
49
+ style: PropTypes.object
73
50
  };
74
51
  export { ChipList, compareValuesDefault };
package/lib/index.css CHANGED
@@ -1,19 +1,19 @@
1
- ._light_5opd7e_8{
1
+ ._light_ss5fh1_8{
2
2
  --rs-theme-dark:0;
3
3
  }
4
- ._dark_5opd7e_11{
4
+ ._dark_ss5fh1_11{
5
5
  --rs-theme-dark:1;
6
6
  }
7
- ._alignLeft_5opd7e_15{
7
+ ._alignLeft_ss5fh1_15{
8
8
  --_rs-cl-align:left;
9
9
  }
10
- ._alignCenter_5opd7e_18{
10
+ ._alignCenter_ss5fh1_18{
11
11
  --_rs-cl-align:center;
12
12
  }
13
- ._alignRight_5opd7e_21{
13
+ ._alignRight_ss5fh1_21{
14
14
  --_rs-cl-align:right;
15
15
  }
16
- ._sizeXs_5opd7e_25{
16
+ ._sizeXs_ss5fh1_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_5opd7e_25 [data-rs-internal='chip-list__chip']{
31
- --_rs-typography-letter-spacing:0.0045em;
30
+ ._sizeXs_ss5fh1_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_5opd7e_28{
64
+ ._sizeS_ss5fh1_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_5opd7e_28 [data-rs-internal='chip-list__chip']{
79
- --_rs-typography-letter-spacing:0.0045em;
78
+ ._sizeS_ss5fh1_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_5opd7e_31{
112
+ ._sizeM_ss5fh1_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_5opd7e_31 [data-rs-internal='chip-list__chip']{
127
- --_rs-typography-letter-spacing:0.0015em;
126
+ ._sizeM_ss5fh1_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_5opd7e_31 [data-rs-internal='chip-list__chip']{
162
- --_rs-typography-list-li-margin-top-from-text:12px;
164
+ ._sizeM_ss5fh1_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_5opd7e_34{
168
+ ._sizeL_ss5fh1_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_5opd7e_34{
183
+ ._sizeL_ss5fh1_34{
181
184
  --_rs-cl-vertical-gap:12px;
182
185
  }
183
186
  }
184
- ._sizeL_5opd7e_34 [data-rs-internal='chip-list__chip']{
185
- --_rs-typography-letter-spacing:normal;
187
+ ._sizeL_ss5fh1_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_5opd7e_34 [data-rs-internal='chip-list__chip']{
220
- --_rs-typography-list-li-margin-top-from-text:16px;
225
+ ._sizeL_ss5fh1_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_5opd7e_38{
229
+ ._innerOffsetL_ss5fh1_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_5opd7e_38{
233
+ ._innerOffsetL_ss5fh1_38{
228
234
  --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-base-horizontal-gap);
229
235
  }
230
236
  }
231
- ._innerOffsetM_5opd7e_41{
237
+ ._innerOffsetM_ss5fh1_41{
232
238
  --_rs-cl-horizontal-gap-from-sparse:initial;
233
239
  }
234
- ._classic_5opd7e_45{
240
+ ._classic_ss5fh1_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_5opd7e_48{
246
+ ._rock_ss5fh1_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_5opd7e_52{
252
+ ._compact_ss5fh1_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_5opd7e_56{
261
+ ._main_ss5fh1_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_5opd7e_56{
271
+ ._main_ss5fh1_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_5opd7e_56{
280
+ ._main_ss5fh1_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_5opd7e_56 {
288
+ ._main_ss5fh1_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,33 +299,26 @@
293
299
  var(--_rs-cl-horizontal-gap-from-sparse, var(--_rs-cl-base-horizontal-gap))
294
300
  );
295
301
  }
296
- ._chipsContainer_5opd7e_62{
302
+ ._chipsContainer_ss5fh1_62{
297
303
  position:relative;
298
304
 
299
- display:-webkit-box;
300
-
301
- display:-ms-flexbox;
302
-
303
305
  display:flex;
304
- -ms-flex-wrap:wrap;
305
- flex-wrap:wrap;
306
- -webkit-box-pack:var(--_rs-cl-align);
307
- -ms-flex-pack:var(--_rs-cl-align);
308
- justify-content:var(--_rs-cl-align);
306
+ flex-wrap:wrap;
307
+ justify-content:var(--_rs-cl-align);
309
308
 
310
309
  gap:var(--_rs-cl-vertical-gap) var(--_rs-cl-horizontal-gap);
311
310
  }
312
- ._alignIconLeft_5opd7e_72{
311
+ ._alignIconLeft_ss5fh1_72{
313
312
  --_rs-cl-chip-icon-flex-direction:row;
314
313
  --_rs-cl-chip-icon-position-multiplier-left:1;
315
314
  --_rs-cl-chip-icon-position-multiplier-right:0;
316
315
  }
317
- ._alignIconRight_5opd7e_75{
316
+ ._alignIconRight_ss5fh1_75{
318
317
  --_rs-cl-chip-icon-flex-direction:row-reverse;
319
318
  --_rs-cl-chip-icon-position-multiplier-left:0;
320
319
  --_rs-cl-chip-icon-position-multiplier-right:1;
321
320
  }
322
- ._chip_5opd7e_62{
321
+ ._chip_ss5fh1_62{
323
322
  letter-spacing:var(
324
323
  --rs-text-base-letter-spacing,
325
324
  var(--_rs-typography-letter-spacing)
@@ -330,7 +329,6 @@
330
329
  font-weight:var(--_rs-typography-font-weight);
331
330
  line-height:var(--_rs-typography-line-height);
332
331
  font-variant-numeric:var(--_rs-typography-font-variant-numeric);
333
- -webkit-font-feature-settings:'kern', 'liga', 'calt';
334
332
  font-feature-settings:'kern', 'liga', 'calt';
335
333
 
336
334
  --_rs-cl-chip-border-width:1px;
@@ -342,30 +340,15 @@
342
340
  position:relative;
343
341
  z-index:1;
344
342
 
345
- display:-webkit-inline-box;
346
-
347
- display:-ms-inline-flexbox;
348
-
349
343
  display:inline-flex;
350
344
  overflow:hidden;
351
- -webkit-box-flex:0;
352
- -ms-flex:0 0 auto;
353
- flex:0 0 auto;
354
- -webkit-box-orient:vertical;
355
- -webkit-box-direction:normal;
356
- -ms-flex-direction:var(--_rs-cl-chip-icon-flex-direction);
357
- flex-direction:var(--_rs-cl-chip-icon-flex-direction);
345
+ flex:0 0 auto;
346
+ flex-direction:var(--_rs-cl-chip-icon-flex-direction);
358
347
  gap:var(--_rs-cl-chip-icon-offset);
359
- -webkit-box-pack:center;
360
- -ms-flex-pack:center;
361
- justify-content:center;
362
- -webkit-box-align:center;
363
- -ms-flex-align:center;
364
- align-items:center;
365
-
366
- -webkit-box-sizing:border-box;
348
+ justify-content:center;
349
+ align-items:center;
367
350
 
368
- box-sizing:border-box;
351
+ box-sizing:border-box;
369
352
  margin:0;
370
353
  padding:var(--_rs-cl-chip-vertical-real-padding) var(--_rs-cl-chip-horizontal-real-padding);
371
354
 
@@ -380,33 +363,29 @@
380
363
 
381
364
  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));
382
365
  background:transparent;
383
- -webkit-box-shadow:none;
384
- box-shadow:none;
385
-
386
- -webkit-transition:color 100ms, background-color 100ms;
366
+ box-shadow:none;
387
367
 
388
368
  transition:color 100ms, background-color 100ms;
389
369
  -webkit-font-smoothing:inherit;
390
370
  -moz-osx-font-smoothing:inherit;
391
371
  -webkit-appearance:none;
392
372
  }
393
- ._chip_5opd7e_62::-moz-focus-inner{
373
+ ._chip_ss5fh1_62::-moz-focus-inner{
394
374
  padding:0;
395
375
 
396
376
  border:none;
397
377
  }
398
- ._chip_5opd7e_62:hover,
399
- ._chip_5opd7e_62:focus,
400
- ._chip_5opd7e_62:active{
378
+ ._chip_ss5fh1_62:hover,
379
+ ._chip_ss5fh1_62:focus,
380
+ ._chip_ss5fh1_62:active{
401
381
  outline:none;
402
382
 
403
383
  text-decoration:none;
404
384
  }
405
- ._chip_5opd7e_62:focus[data-focus-method='key']{
406
- -webkit-box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
407
- box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
385
+ ._chip_ss5fh1_62:focus[data-focus-method='key']{
386
+ box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
408
387
  }
409
- ._chip_5opd7e_62:focus{
388
+ ._chip_ss5fh1_62:focus{
410
389
  --_rs-cl-chip-border-color:rgba(
411
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),
412
391
  calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1)
@@ -415,7 +394,7 @@
415
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));
416
395
  }
417
396
  @media (hover: hover){
418
- ._chip_5opd7e_62:hover{
397
+ ._chip_ss5fh1_62:hover{
419
398
  --_rs-cl-chip-border-color:rgba(
420
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),
421
400
  calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1)
@@ -426,20 +405,20 @@
426
405
  background:var(--_rs-cl-chip-hover-background);
427
406
  }
428
407
  }
429
- ._chip_5opd7e_62:active{
408
+ ._chip_ss5fh1_62:active{
430
409
  --_rs-cl-chip-border-color:var(--_rs-cl-chip-active-border-color);
431
410
 
432
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));
433
412
 
434
413
  background:var(--_rs-cl-chip-active-background);
435
414
  }
436
- ._chip_5opd7e_62._selected_5opd7e_172{
415
+ ._chip_ss5fh1_62._selected_ss5fh1_172{
437
416
  --_rs-cl-chip-border-color:var(--_rs-cl-chip-selected-border-color);
438
417
  --_rs-cl-chip-border-width:2px;
439
418
 
440
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));
441
420
  }
442
- ._disabled_5opd7e_179 ._chip_5opd7e_62{
421
+ ._disabled_ss5fh1_179 ._chip_ss5fh1_62{
443
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);
444
423
 
445
424
  pointer-events:none;
@@ -448,10 +427,10 @@
448
427
 
449
428
  background:transparent;
450
429
  }
451
- ._disabled_5opd7e_179 ._chip_5opd7e_62._selected_5opd7e_172{
430
+ ._disabled_ss5fh1_179 ._chip_ss5fh1_62._selected_ss5fh1_172{
452
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);
453
432
  }
454
- ._chip_5opd7e_62::before{
433
+ ._chip_ss5fh1_62::before{
455
434
  position:absolute;
456
435
  top:0;
457
436
  right:0;
@@ -466,14 +445,10 @@
466
445
  content:'';
467
446
  pointer-events:none;
468
447
 
469
- -webkit-transition:border-color 100ms;
470
-
471
448
  transition:border-color 100ms;
472
449
  }
473
- ._chip_5opd7e_62 ._icon_5opd7e_212{
474
- -webkit-box-flex:0;
475
- -ms-flex:0 0 auto;
476
- flex:0 0 auto;
450
+ ._chip_ss5fh1_62 ._icon_ss5fh1_212{
451
+ flex:0 0 auto;
477
452
 
478
453
  width:auto;
479
454
  height:var(--_rs-cl-chip-icon-size);
@@ -481,7 +456,7 @@
481
456
  margin:0;
482
457
  fill:currentColor;
483
458
  }
484
- ._withoutText_5opd7e_223{
459
+ ._withoutText_ss5fh1_223{
485
460
  --_rs-cl-chip-horizontal-real-padding:var(--_rs-cl-chip-icon-only-padding);
486
461
  --_rs-cl-chip-vertical-real-padding:var(--_rs-cl-chip-icon-only-padding);
487
462
  }
package/lib/parts/chip-list-base.d.ts CHANGED
@@ -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;