@rescui/chip-list 0.10.0 → 0.11.0

package/lib/chip-list-multi.d.ts

@@ -10,6 +10,7 @@ export declare type ChipListMultiProps<ValueType> = {
     sparse?: boolean;
     /** Decrease horizontal paddings, gap and border-radius values */
     compact?: boolean;
+    disabled?: boolean;
     theme?: Theme;
     mode?: ChipListModeType;
     alignItems?: ChipListAlignItemsType;
@@ -20,13 +21,14 @@ export declare type ChipListMultiProps<ValueType> = {
     /** Identifier for e2e tests */
     'data-e2e'?: string;
 };
-export declare function ChipListMulti<ValueType>({ onChange, compareValues, value, children, size, sparse, compact, mode, alignItems, ...props }: ChipListMultiProps<ValueType>): JSX.Element;
+export declare function ChipListMulti<ValueType>({ onChange, compareValues, value, children, size, sparse, compact, disabled, mode, alignItems, ...props }: ChipListMultiProps<ValueType>): JSX.Element;
 export declare namespace ChipListMulti {
     var displayName: string;
     var propTypes: {
         size: PropTypes.Requireable<string>;
         sparse: PropTypes.Requireable<boolean>;
         compact: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
         theme: PropTypes.Requireable<string>;
         className: PropTypes.Requireable<string>;
         mode: PropTypes.Requireable<string>;

package/lib/chip-list-multi.js

@@ -7,7 +7,7 @@ import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-st
 import _toConsumableArray from "@babel/runtime-corejs3/helpers/esm/toConsumableArray";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["onChange", "compareValues", "value", "children", "size", "sparse", "compact", "mode", "alignItems"];
+var _excluded = ["onChange", "compareValues", "value", "children", "size", "sparse", "compact", "disabled", "mode", "alignItems"];
 
 function ownKeys(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -36,6 +36,8 @@ function ChipListMulti(_ref) {
       sparse = _ref$sparse === void 0 ? false : _ref$sparse,
       _ref$compact = _ref.compact,
       compact = _ref$compact === void 0 ? false : _ref$compact,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$mode = _ref.mode,
       mode = _ref$mode === void 0 ? 'classic' : _ref$mode,
       _ref$alignItems = _ref.alignItems,
@@ -57,6 +59,7 @@ function ChipListMulti(_ref) {
     size: size,
     sparse: sparse,
     compact: compact,
+    disabled: disabled,
     mode: mode,
     alignItems: alignItems
   }, props), children);
@@ -67,6 +70,7 @@ ChipListMulti.propTypes = {
   size: PropTypes.oneOf(['xs', 's', 'm', 'l']),
   sparse: PropTypes.bool,
   compact: PropTypes.bool,
+  disabled: PropTypes.bool,
   theme: PropTypes.oneOf(['light', 'dark']),
   className: PropTypes.string,
   mode: PropTypes.oneOf(['classic', 'rock']),

package/lib/chip-list.d.ts

@@ -9,6 +9,7 @@ export declare type ChipListProps<ValueType> = {
     sparse?: boolean;
     /** Decrease horizontal paddings, gap and border-radius values */
     compact?: boolean;
+    disabled?: boolean;
     theme?: Theme;
     mode?: ChipListModeType;
     alignItems?: ChipListAlignItemsType;
@@ -19,7 +20,7 @@ export declare type ChipListProps<ValueType> = {
     /** Identifier for e2e tests */
     'data-e2e'?: string;
 };
-export declare function ChipList<ValueType>({ children, compareValues, value, onChange, size, sparse, compact, mode, alignItems, ...props }: ChipListProps<ValueType>): JSX.Element;
+export declare function ChipList<ValueType>({ children, compareValues, value, onChange, size, sparse, compact, disabled, mode, alignItems, ...props }: ChipListProps<ValueType>): JSX.Element;
 export declare namespace ChipList {
     var displayName: string;
     var propTypes: {};

package/lib/chip-list.js

@@ -7,7 +7,7 @@ import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js-sta
 import _Object$getOwnPropertyDescriptors from "@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors";
 import _defineProperty from "@babel/runtime-corejs3/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime-corejs3/helpers/esm/objectWithoutProperties";
-var _excluded = ["children", "compareValues", "value", "onChange", "size", "sparse", "compact", "mode", "alignItems"];
+var _excluded = ["children", "compareValues", "value", "onChange", "size", "sparse", "compact", "disabled", "mode", "alignItems"];
 
 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; }
 
@@ -33,6 +33,8 @@ function ChipList(_ref) {
       sparse = _ref$sparse === void 0 ? false : _ref$sparse,
       _ref$compact = _ref.compact,
       compact = _ref$compact === void 0 ? false : _ref$compact,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       _ref$mode = _ref.mode,
       mode = _ref$mode === void 0 ? 'classic' : _ref$mode,
       _ref$alignItems = _ref.alignItems,
@@ -48,6 +50,7 @@ function ChipList(_ref) {
     size: size,
     sparse: sparse,
     compact: compact,
+    disabled: disabled,
     mode: mode,
     alignItems: alignItems
   }, props), children);
@@ -58,6 +61,7 @@ ChipList.propTypes = {
   size: PropTypes.oneOf(['xs', 's', 'm', 'l']),
   sparse: PropTypes.bool,
   compact: PropTypes.bool,
+  disabled: PropTypes.bool,
   theme: PropTypes.oneOf(['light', 'dark']),
   className: PropTypes.string,
   mode: PropTypes.oneOf(['classic', 'rock']),

package/lib/index.css

@@ -1,19 +1,19 @@
-._light_1ateqg6_8{
+._light_1xl8zrw_8{
   --rs-theme-dark:0;
 }
-._dark_1ateqg6_11{
+._dark_1xl8zrw_11{
   --rs-theme-dark:1;
 }
-._alignLeft_1ateqg6_15{
+._alignLeft_1xl8zrw_15{
   --_rs-cl-align:left;
 }
-._alignCenter_1ateqg6_18{
+._alignCenter_1xl8zrw_18{
   --_rs-cl-align:center;
 }
-._alignRight_1ateqg6_21{
+._alignRight_1xl8zrw_21{
   --_rs-cl-align:right;
 }
-._sizeXs_1ateqg6_25{
+._sizeXs_1xl8zrw_25{
   --_rs-cl-chip-base-border-radius:4px;
   --_rs-cl-chip-compact-border-radius:var(--_rs-cl-chip-base-border-radius);
   --_rs-cl-chip-vertical-padding:2px;
@@ -27,7 +27,7 @@
   --_rs-cl-compact-horizontal-gap:4px;
   --_rs-cl-sparse-horizontal-gap:12px;
 }
-._sizeXs_1ateqg6_25 [data-rs-internal='chip-list__chip']{
+._sizeXs_1xl8zrw_25 [data-rs-internal='chip-list__chip']{
     --_rs-typography-letter-spacing:0.0045em;
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -61,7 +61,7 @@
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
-._sizeS_1ateqg6_28{
+._sizeS_1xl8zrw_28{
   --_rs-cl-chip-base-border-radius:16px;
   --_rs-cl-chip-compact-border-radius:4px;
   --_rs-cl-chip-vertical-padding:6px;
@@ -75,7 +75,7 @@
   --_rs-cl-compact-horizontal-gap:6px;
   --_rs-cl-sparse-horizontal-gap:12px;
 }
-._sizeS_1ateqg6_28 [data-rs-internal='chip-list__chip']{
+._sizeS_1xl8zrw_28 [data-rs-internal='chip-list__chip']{
     --_rs-typography-letter-spacing:0.0045em;
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -109,7 +109,7 @@
     --_rs-typography-link-external-standalone-border-offset-from-text-base:1.02em;
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
-._sizeM_1ateqg6_31{
+._sizeM_1xl8zrw_31{
   --_rs-cl-chip-base-border-radius:20px;
   --_rs-cl-chip-compact-border-radius:8px;
   --_rs-cl-chip-vertical-padding:8px;
@@ -123,7 +123,7 @@
   --_rs-cl-compact-horizontal-gap:6px;
   --_rs-cl-sparse-horizontal-gap:16px;
 }
-._sizeM_1ateqg6_31 [data-rs-internal='chip-list__chip']{
+._sizeM_1xl8zrw_31 [data-rs-internal='chip-list__chip']{
     --_rs-typography-letter-spacing:0.0015em;
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -158,11 +158,11 @@
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
 @media screen and (max-width: 640px){
-._sizeM_1ateqg6_31 [data-rs-internal='chip-list__chip']{
+._sizeM_1xl8zrw_31 [data-rs-internal='chip-list__chip']{
     --_rs-typography-list-li-margin-top-from-text:12px;
   }
   }
-._sizeL_1ateqg6_34{
+._sizeL_1xl8zrw_34{
   --_rs-cl-chip-base-border-radius:26px;
   --_rs-cl-chip-compact-border-radius:12px;
   --_rs-cl-chip-vertical-padding:12px;
@@ -177,11 +177,11 @@
   --_rs-cl-sparse-horizontal-gap:16px;
 }
 @media screen and (max-width: 640px){
-._sizeL_1ateqg6_34{
+._sizeL_1xl8zrw_34{
     --_rs-cl-vertical-gap:12px;
 }
   }
-._sizeL_1ateqg6_34 [data-rs-internal='chip-list__chip']{
+._sizeL_1xl8zrw_34 [data-rs-internal='chip-list__chip']{
     --_rs-typography-letter-spacing:normal;
     --_rs-typography-text-transform:initial;
     --_rs-typography-font-variant-numeric:initial;
@@ -216,34 +216,34 @@
     --_rs-typography-link-border-bottom-width-from-text:1px;
   }
 @media screen and (max-width: 640px){
-._sizeL_1ateqg6_34 [data-rs-internal='chip-list__chip']{
+._sizeL_1xl8zrw_34 [data-rs-internal='chip-list__chip']{
     --_rs-typography-list-li-margin-top-from-text:16px;
   }
   }
-._innerOffsetL_1ateqg6_38{
+._innerOffsetL_1xl8zrw_38{
   --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-sparse-horizontal-gap);
 }
 @media screen and (max-width: 640px){
-._innerOffsetL_1ateqg6_38{
+._innerOffsetL_1xl8zrw_38{
     --_rs-cl-horizontal-gap-from-sparse:var(--_rs-cl-base-horizontal-gap);
 }
   }
-._innerOffsetM_1ateqg6_41{
+._innerOffsetM_1xl8zrw_41{
   --_rs-cl-horizontal-gap-from-sparse:initial;
 }
-._classic_1ateqg6_45{
+._classic_1xl8zrw_45{
   --_rs-cl-chip-active-border-color:var(--_rs-color-primary);
   --_rs-cl-chip-selected-border-color:var(--_rs-color-primary);
   --_rs-cl-chip-hover-background:var(--_rs-color-primary-t-fog);
   --_rs-cl-chip-active-background:var(--_rs-color-primary-t-fog);
 }
-._rock_1ateqg6_48{
+._rock_1xl8zrw_48{
   --_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));
   --_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));
   --_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);
   --_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);
 }
-._compact_1ateqg6_52{
+._compact_1xl8zrw_52{
   --_rs-cl-chip-border-radius-from-compact:var(
     --_rs-cl-chip-compact-border-radius
   );
@@ -252,7 +252,7 @@
   );
   --_rs-cl-horizontal-gap-from-compact:var(--_rs-cl-compact-horizontal-gap);
 }
-._main_1ateqg6_56{
+._main_1xl8zrw_56{
   --_rs-theme-dark:var(
     --_rs-internal-force-theme-dark-consult-rescui-before-using,
     var(--rs-theme-dark, 0)
@@ -262,7 +262,7 @@
   --_rs-theme-light-coefficient:calc(1 - var(--_rs-theme-dark-coefficient));
 }
 @supports (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._main_1ateqg6_56{
+._main_1xl8zrw_56{
       --_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)));
       --_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)));
       --_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 +271,7 @@
 }
   }
 @supports not (color: color-mix(in srgb, #fff 50%, #000 50%)){
-._main_1ateqg6_56{
+._main_1xl8zrw_56{
     --_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);
     --_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));
     --_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 +279,7 @@
     --_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));
 }
   }
-._main_1ateqg6_56 {
+._main_1xl8zrw_56 {
   --_rs-cl-chip-border-radius:var(
     --_rs-cl-chip-border-radius-from-compact,
     var(--_rs-cl-chip-base-border-radius)
@@ -293,7 +293,7 @@
     var(--_rs-cl-horizontal-gap-from-sparse, var(--_rs-cl-base-horizontal-gap))
   );
 }
-._chipsContainer_1ateqg6_62{
+._chipsContainer_1xl8zrw_62{
   position:relative;
 
   display:-webkit-box;
@@ -309,17 +309,17 @@
 
   gap:var(--_rs-cl-vertical-gap) var(--_rs-cl-horizontal-gap);
 }
-._alignIconLeft_1ateqg6_72{
+._alignIconLeft_1xl8zrw_72{
   --_rs-cl-chip-icon-flex-direction:row;
   --_rs-cl-chip-icon-position-multiplier-left:1;
   --_rs-cl-chip-icon-position-multiplier-right:0;
 }
-._alignIconRight_1ateqg6_75{
+._alignIconRight_1xl8zrw_75{
   --_rs-cl-chip-icon-flex-direction:row-reverse;
   --_rs-cl-chip-icon-position-multiplier-left:0;
   --_rs-cl-chip-icon-position-multiplier-right:1;
 }
-._chip_1ateqg6_62{
+._chip_1xl8zrw_62{
   letter-spacing:var(
     --rs-text-base-letter-spacing,
     var(--_rs-typography-letter-spacing)
@@ -390,23 +390,23 @@
   -moz-osx-font-smoothing:inherit;
   -webkit-appearance:none;
 }
-._chip_1ateqg6_62::-moz-focus-inner{
+._chip_1xl8zrw_62::-moz-focus-inner{
     padding:0;
 
     border:none;
   }
-._chip_1ateqg6_62:hover,
-  ._chip_1ateqg6_62:focus,
-  ._chip_1ateqg6_62:active{
+._chip_1xl8zrw_62:hover,
+  ._chip_1xl8zrw_62:focus,
+  ._chip_1xl8zrw_62:active{
     outline:none;
 
     text-decoration:none;
   }
-._chip_1ateqg6_62:focus[data-focus-method='key']{
+._chip_1xl8zrw_62:focus[data-focus-method='key']{
     -webkit-box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
             box-shadow:var(--_rs-color-primary-t-dim) 0 0 0 4px;
   }
-._chip_1ateqg6_62:focus{
+._chip_1xl8zrw_62:focus{
     --_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),
       calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1)
@@ -415,7 +415,7 @@
     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));
   }
 @media (hover: hover){
-    ._chip_1ateqg6_62:hover{
+    ._chip_1xl8zrw_62:hover{
       --_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),
         calc(0.3 + var(--_rs-theme-dark-coefficient)*0.1)
@@ -426,20 +426,32 @@
       background:var(--_rs-cl-chip-hover-background);
     }
   }
-._chip_1ateqg6_62:active{
+._chip_1xl8zrw_62:active{
     --_rs-cl-chip-border-color:var(--_rs-cl-chip-active-border-color);
 
     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));
 
     background:var(--_rs-cl-chip-active-background);
   }
-._chip_1ateqg6_62._selected_1ateqg6_172{
+._chip_1xl8zrw_62._selected_1xl8zrw_172{
     --_rs-cl-chip-border-color:var(--_rs-cl-chip-selected-border-color);
     --_rs-cl-chip-border-width:2px;
 
     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));
   }
-._chip_1ateqg6_62::before{
+._disabled_1xl8zrw_179 ._chip_1xl8zrw_62{
+    --_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);
+
+    pointer-events:none;
+
+    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.5);
+
+    background:transparent;
+  }
+._disabled_1xl8zrw_179 ._chip_1xl8zrw_62._selected_1xl8zrw_172{
+      --_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);
+    }
+._chip_1xl8zrw_62::before{
     position:absolute;
     top:0;
     right:0;
@@ -458,7 +470,7 @@
 
     transition:border-color 100ms;
   }
-._chip_1ateqg6_62 ._icon_1ateqg6_198{
+._chip_1xl8zrw_62 ._icon_1xl8zrw_212{
     -webkit-box-flex:0;
         -ms-flex:0 0 auto;
             flex:0 0 auto;
@@ -469,7 +481,7 @@
     margin:0;
     fill:currentColor;
   }
-._withoutText_1ateqg6_209{
+._withoutText_1xl8zrw_223{
   --_rs-cl-chip-horizontal-real-padding:var(--_rs-cl-chip-icon-only-padding);
   --_rs-cl-chip-vertical-real-padding:var(--_rs-cl-chip-icon-only-padding);
 }

package/lib/parts/chip-list-base.d.ts

@@ -8,6 +8,7 @@ export declare type ChipListBaseProps<V> = {
     sparse?: boolean;
     /** Decrease horizontal paddings, gap and border-radius values */
     compact?: boolean;
+    disabled?: boolean;
     theme?: Theme;
     mode?: ChipListModeType;
     alignItems?: ChipListAlignItemsType;
@@ -18,4 +19,4 @@ export declare type ChipListBaseProps<V> = {
     /** Identifier for e2e tests */
     'data-e2e'?: string;
 };
-export declare function ChipListBase<V>({ size, sparse, compact, className, mode, alignItems, theme: themeFromProps, value, onChange, compareValues, children, ['data-e2e']: e2eId }: ChipListBaseProps<V>): JSX.Element;
+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;

package/lib/parts/chip-list-base.js

@@ -23,6 +23,8 @@ function ChipListBase(_ref) {
       sparse = _ref$sparse === void 0 ? false : _ref$sparse,
       _ref$compact = _ref.compact,
       compact = _ref$compact === void 0 ? false : _ref$compact,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
       className = _ref.className,
       _ref$mode = _ref.mode,
       mode = _ref$mode === void 0 ? 'classic' : _ref$mode,
@@ -47,10 +49,11 @@ function ChipListBase(_ref) {
   return /*#__PURE__*/React.createElement(ChipListContext.Provider, {
     value: {
       onChange: onChange,
-      selectedIds: selectedIds
+      selectedIds: selectedIds,
+      disabled: disabled
     }
   }, /*#__PURE__*/React.createElement("div", {
-    className: cn(styles.main, styles[theme], styles[mode], STYLES_SIZES[size], sparse ? styles.innerOffsetL : styles.innerOffsetM, compact && styles.compact, ALIGN_ITEMS_STYLES[alignItems], className),
+    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),
     "data-e2e": e2eId ? "".concat(e2eId, "__chips-container") : null,
     "data-rs-internal": 'chip-list',
     "data-test": 'chip-list'

package/lib/parts/chip-list-context.js

@@ -2,7 +2,8 @@ import { createContext, useContext } from 'react';
 var ChipListContext = /*#__PURE__*/createContext({
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   onChange: function onChange() {},
-  selectedIds: []
+  selectedIds: [],
+  disabled: false
 });
 
 var useChipListContext = function useChipListContext() {

package/lib/parts/chip-list.p.module.css.js

@@ -1,25 +1,26 @@
 var styles = {
-  "light": "_light_1ateqg6_8",
-  "dark": "_dark_1ateqg6_11",
-  "alignLeft": "_alignLeft_1ateqg6_15",
-  "alignCenter": "_alignCenter_1ateqg6_18",
-  "alignRight": "_alignRight_1ateqg6_21",
-  "sizeXs": "_sizeXs_1ateqg6_25",
-  "sizeS": "_sizeS_1ateqg6_28",
-  "sizeM": "_sizeM_1ateqg6_31",
-  "sizeL": "_sizeL_1ateqg6_34",
-  "innerOffsetL": "_innerOffsetL_1ateqg6_38",
-  "innerOffsetM": "_innerOffsetM_1ateqg6_41",
-  "classic": "_classic_1ateqg6_45",
-  "rock": "_rock_1ateqg6_48",
-  "compact": "_compact_1ateqg6_52",
-  "main": "_main_1ateqg6_56",
-  "chipsContainer": "_chipsContainer_1ateqg6_62",
-  "alignIconLeft": "_alignIconLeft_1ateqg6_72",
-  "alignIconRight": "_alignIconRight_1ateqg6_75",
-  "chip": "_chip_1ateqg6_62",
-  "selected": "_selected_1ateqg6_172",
-  "icon": "_icon_1ateqg6_198",
-  "withoutText": "_withoutText_1ateqg6_209"
+  "light": "_light_1xl8zrw_8",
+  "dark": "_dark_1xl8zrw_11",
+  "alignLeft": "_alignLeft_1xl8zrw_15",
+  "alignCenter": "_alignCenter_1xl8zrw_18",
+  "alignRight": "_alignRight_1xl8zrw_21",
+  "sizeXs": "_sizeXs_1xl8zrw_25",
+  "sizeS": "_sizeS_1xl8zrw_28",
+  "sizeM": "_sizeM_1xl8zrw_31",
+  "sizeL": "_sizeL_1xl8zrw_34",
+  "innerOffsetL": "_innerOffsetL_1xl8zrw_38",
+  "innerOffsetM": "_innerOffsetM_1xl8zrw_41",
+  "classic": "_classic_1xl8zrw_45",
+  "rock": "_rock_1xl8zrw_48",
+  "compact": "_compact_1xl8zrw_52",
+  "main": "_main_1xl8zrw_56",
+  "chipsContainer": "_chipsContainer_1xl8zrw_62",
+  "alignIconLeft": "_alignIconLeft_1xl8zrw_72",
+  "alignIconRight": "_alignIconRight_1xl8zrw_75",
+  "chip": "_chip_1xl8zrw_62",
+  "selected": "_selected_1xl8zrw_172",
+  "disabled": "_disabled_1xl8zrw_179",
+  "icon": "_icon_1xl8zrw_212",
+  "withoutText": "_withoutText_1xl8zrw_223"
 };
 export { styles as default };

package/lib/parts/chip.js

@@ -20,15 +20,21 @@ import cn from 'classnames';
 import styles from './chip-list.p.module.css.js';
 import { useChipListContext } from './chip-list-context.js';
 var ChipTag = /*#__PURE__*/forwardRef(function (props, ref) {
+  var _useChipListContext = useChipListContext(),
+      disabled = _useChipListContext.disabled;
+
   if (typeof props.href !== 'undefined') {
-    return /*#__PURE__*/React.createElement("a", _objectSpread({
+    return /*#__PURE__*/React.createElement("a", _objectSpread(_objectSpread({
       ref: ref
-    }, props), props.children);
+    }, props), {}, {
+      tabIndex: disabled ? -1 : props.tabIndex
+    }), props.children);
   }
 
   return /*#__PURE__*/React.createElement("button", _objectSpread(_objectSpread({
     ref: ref
   }, props), {}, {
+    disabled: disabled,
     type: "button"
   }), props.children);
 });
@@ -39,7 +45,7 @@ var isWithoutChildren = function isWithoutChildren(children) {
 };
 
 var Chip = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _cn;
+  var _cn, _restProps$tabIndex;
 
   var value = _ref.value,
       className = _ref.className,
@@ -53,9 +59,9 @@ var Chip = /*#__PURE__*/forwardRef(function (_ref, ref) {
       e2eId = _ref['data-e2e'],
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  var _useChipListContext = useChipListContext(),
-      onChange = _useChipListContext.onChange,
-      selectedIds = _useChipListContext.selectedIds;
+  var _useChipListContext2 = useChipListContext(),
+      onChange = _useChipListContext2.onChange,
+      selectedIds = _useChipListContext2.selectedIds;
 
   var selected = _includesInstanceProperty(selectedIds).call(selectedIds, itemId);
 
@@ -80,7 +86,7 @@ var Chip = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
     },
     role: "tab",
-    tabIndex: 0,
+    tabIndex: (_restProps$tabIndex = restProps.tabIndex) !== null && _restProps$tabIndex !== void 0 ? _restProps$tabIndex : 0,
     ref: ref,
     "data-e2e": e2eId,
     "data-test": "chip".concat(selected ? ' chip-selected' : ''),

package/lib/parts/types.d.ts

@@ -5,4 +5,5 @@ export declare type ChipIconPosition = 'left' | 'right';
 export declare type ChipListContextType<V> = {
     onChange: (value: V) => void;
     selectedIds?: number[];
+    disabled?: boolean;
 };

package/lib/parts/use-items-ids.js

@@ -15,6 +15,12 @@ function patchItemIfNeeded(_ref) {
   });
 }
 
+var hasElValue = function hasElValue(el) {
+  var _el$props, _el$props2;
+
+  return ((_el$props = el.props) === null || _el$props === void 0 ? void 0 : _el$props.value) !== null && typeof ((_el$props2 = el.props) === null || _el$props2 === void 0 ? void 0 : _el$props2.value) !== 'undefined';
+};
+
 var useItemsIds = function useItemsIds(_ref2) {
   var children = _ref2.children,
       compareValues = _ref2.compareValues,
@@ -25,7 +31,7 @@ var useItemsIds = function useItemsIds(_ref2) {
     var currentSelectedItemIds = [];
     var items = deepMap(children, function (child) {
       if (child.type === Chip) {
-        var childValue = child.props.value || counter;
+        var childValue = hasElValue(child) ? child.props.value : counter;
         var isSelectedItem = compareValues(value, childValue);
 
         if (isSelectedItem) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/chip-list",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -35,5 +35,5 @@
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "d9e048366cc911a0868bca9bb6974b2b667174a5"
+  "gitHead": "8854056aed712313cea5db9d1876647d349a7db5"
 }