@salutejs/plasma-new-hope 0.88.0-canary.1233.9420319803.0 → 0.88.0-canary.1233.9439608380.0

package/styled-components/es/components/Pagination/ui/PaginationSelectPerPage/PaginationSelectPerPage.js

@@ -27,7 +27,6 @@ export var PaginationSelectPerPage = function PaginationSelectPerPage(_ref) {
       value: num.toString()
     };
   });
-  console.log('listWidth', listWidth);
   return /*#__PURE__*/React.createElement(SelectPerPageRoot, rest, /*#__PURE__*/React.createElement(SelectPerPageTypography, null, textPerPage), /*#__PURE__*/React.createElement(SelectPerPageSelect, {
     className: classes.selectWrapper,
     items: transformedList,

package/styled-components/es/components/Select/Select.js

@@ -1,5 +1,4 @@
-var _SelectNotFoundConten;
-var _excluded = ["value", "onChange", "target", "multiselect", "separator", "items", "label", "labelPlacement", "placeholder", "helperText", "isTargetAmount", "disabled", "view", "size", "isOpen", "listOverflow", "listHeight", "listWidth", "status", "contentLeft", "onScrollBottom", "isInfiniteLoading", "notFoundContent", "chipView", "variant", "portal", "renderTargetLabel"];
+var _excluded = ["value", "onChange", "target", "separator", "items", "placement", "label", "labelPlacement", "placeholder", "helperText", "isTargetAmount", "disabled", "view", "size", "isOpen", "listOverflow", "listHeight", "listWidth", "status", "contentLeft", "onScrollBottom", "isInfiniteLoading", "notFoundContent", "chipView", "variant", "portal", "renderValue"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -12,6 +11,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { forwardRef, useState, useReducer, useMemo, createContext, useLayoutEffect } from 'react';
 import { isEmpty } from '../../utils';
 import { useOutsideClick } from '../../hooks';
+import { getPlacements } from '../Dropdown/utils';
 import { useKeyNavigation } from './hooks/useKeyboardNavigation';
 import { initialItemsTransform, updateAncestors, updateDescendants, updateSingleAncestors, getView } from './utils';
 import { Inner } from './elements/Inner/Inner';
@@ -33,10 +33,10 @@ export var selectRoot = function selectRoot(Root) {
       onChange = props.onChange,
       _props$target = props.target,
       target = _props$target === void 0 ? 'textfield' : _props$target,
-      _props$multiselect = props.multiselect,
-      multiselect = _props$multiselect === void 0 ? false : _props$multiselect,
       separator = props.separator,
       items = props.items,
+      _props$placement = props.placement,
+      placement = _props$placement === void 0 ? 'bottom' : _props$placement,
       label = props.label,
       _props$labelPlacement = props.labelPlacement,
       labelPlacement = _props$labelPlacement === void 0 ? 'outer' : _props$labelPlacement,
@@ -61,8 +61,9 @@ export var selectRoot = function selectRoot(Root) {
       _props$variant = props.variant,
       variant = _props$variant === void 0 ? 'normal' : _props$variant,
       portal = props.portal,
-      renderTargetLabel = props.renderTargetLabel,
+      renderValue = props.renderValue,
       rest = _objectWithoutProperties(props, _excluded);
+    var multiselect = Array.isArray(value);
     var transformedItems = useMemo(function () {
       return initialItemsTransform(items);
     }, [items]);
@@ -226,9 +227,9 @@ export var selectRoot = function selectRoot(Root) {
     }, /*#__PURE__*/React.createElement(StyledPopover, {
       ref: targetRef,
       isOpen: isCurrentListOpen,
+      placement: getPlacements(placement),
       usePortal: Boolean(portal),
       frame: portal,
-      placement: "bottom-start",
       onToggle: handleToggle,
       trigger: "click",
       target: /*#__PURE__*/React.createElement(Target, {
@@ -238,6 +239,8 @@ export var selectRoot = function selectRoot(Root) {
         isTargetAmount: isTargetAmount,
         multiselect: multiselect,
         valueToItemMap: valueToItemMap,
+        focusedPath: focusedPath,
+        focusedToValueMap: focusedToValueMap,
         onChipClick: handleChipClick,
         label: label,
         placeholder: placeholder,
@@ -247,13 +250,15 @@ export var selectRoot = function selectRoot(Root) {
         size: size,
         contentLeft: contentLeft,
         disabled: disabled,
-        renderTargetLabel: renderTargetLabel
+        renderValue: renderValue
       }),
       preventOverflow: false,
       closeOnOverlayClick: true
-    }, isEmpty(items) ? notFoundContent || _SelectNotFoundConten || (_SelectNotFoundConten = /*#__PURE__*/React.createElement(SelectNotFoundContent, {
-      description: "\u0414\u043E\u0434\u0435\u043B\u0430\u0442\u044C"
-    })) : /*#__PURE__*/React.createElement(Ul, {
+    }, isEmpty(items) ? notFoundContent || /*#__PURE__*/React.createElement(SelectNotFoundContent, {
+      description: "\u0414\u043E\u0434\u0435\u043B\u0430\u0442\u044C",
+      buttonAction: function buttonAction() {},
+      buttonText: "Label"
+    }) : /*#__PURE__*/React.createElement(Ul, {
       role: "tree",
       id: "tree_level_1",
       listHeight: listHeight,
@@ -288,6 +293,7 @@ export var selectConfig = {
   },
   defaults: {
     view: 'default',
+    chipView: 'default',
     size: 'm'
   }
 };

package/styled-components/es/components/Select/elements/Inner/Inner.js

@@ -37,7 +37,11 @@ export var Inner = function Inner(_ref) {
         item: item,
         path: path,
         currentLevel: currentLevel,
-        index: index
+        index: index,
+        ariaControls: listId,
+        ariaExpanded: isCurrentListOpen,
+        ariaLevel: nextLevel,
+        ariaLabel: item.label
       }),
       onToggle: handleToggle,
       isFocusTrapped: false,
@@ -63,6 +67,7 @@ export var Inner = function Inner(_ref) {
     item: item,
     path: path,
     index: index,
-    currentLevel: currentLevel
+    currentLevel: currentLevel,
+    itemRole: "option"
   });
 };

package/styled-components/es/components/Select/elements/Inner/elements/Item/Item.js

@@ -10,9 +10,15 @@ export var Item = function Item(_ref) {
   var item = _ref.item,
     path = _ref.path,
     currentLevel = _ref.currentLevel,
-    index = _ref.index;
+    index = _ref.index,
+    ariaControls = _ref.ariaControls,
+    ariaExpanded = _ref.ariaExpanded,
+    ariaLevel = _ref.ariaLevel,
+    ariaLabel = _ref.ariaLabel,
+    itemRole = _ref.itemRole;
   var value = item.value,
     label = item.label,
+    disabled = item.disabled,
     isDisabled = item.isDisabled,
     contentLeft = item.contentLeft,
     contentRight = item.contentRight;
@@ -25,7 +31,7 @@ export var Item = function Item(_ref) {
     handleCheckboxChange = _useContext.handleCheckboxChange,
     handleItemClick = _useContext.handleItemClick,
     variant = _useContext.variant;
-  var isDisabledClassName = isDisabled ? classes.dropdownItemIsDisabled : undefined;
+  var isDisabledClassName = disabled || isDisabled ? classes.dropdownItemIsDisabled : undefined;
   var focusedClass = currentLevel === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentLevel]) ? classes.dropdownItemIsFocused : undefined;
   var activeClass = value === (path === null || path === void 0 ? void 0 : path[currentLevel + 1]) ? classes.dropdownItemIsActive : undefined;
   useEffect(function () {
@@ -38,12 +44,12 @@ export var Item = function Item(_ref) {
     }
   }, [focusedClass]);
   var handleChange = function handleChange(e) {
-    if (isDisabled) return;
+    if (disabled || isDisabled) return;
     e.stopPropagation();
     handleCheckboxChange(item);
   };
   var handleClick = function handleClick(e) {
-    if (isDisabled) return;
+    if (disabled || isDisabled) return;
     handleItemClick(item, e);
   };
   return /*#__PURE__*/React.createElement(Wrapper, {
@@ -51,7 +57,12 @@ export var Item = function Item(_ref) {
     id: value.toString(),
     ref: ref,
     onClick: handleClick,
-    variant: variant
+    variant: variant,
+    "aria-controls": ariaControls,
+    "aria-expanded": ariaExpanded,
+    "aria-level": ariaLevel,
+    "aria-label": ariaLabel,
+    role: itemRole
   }, /*#__PURE__*/React.createElement(IconWrapper, {
     variant: variant
   }, multiselect && /*#__PURE__*/React.createElement("span", {

package/styled-components/es/components/Select/elements/Target/Target.js

@@ -17,7 +17,9 @@ export var Target = function Target(_ref) {
     size = _ref.size,
     contentLeft = _ref.contentLeft,
     disabled = _ref.disabled,
-    renderTargetLabel = _ref.renderTargetLabel;
+    renderValue = _ref.renderValue,
+    focusedPath = _ref.focusedPath,
+    focusedToValueMap = _ref.focusedToValueMap;
   return target === 'button' ? /*#__PURE__*/React.createElement(Button, {
     opened: opened,
     value: value,
@@ -28,7 +30,9 @@ export var Target = function Target(_ref) {
     label: label,
     size: size,
     disabled: disabled,
-    renderTargetLabel: renderTargetLabel
+    renderValue: renderValue,
+    focusedPath: focusedPath,
+    focusedToValueMap: focusedToValueMap
   }) : /*#__PURE__*/React.createElement(Textfield, {
     opened: opened,
     value: value,
@@ -44,6 +48,8 @@ export var Target = function Target(_ref) {
     size: size,
     contentLeft: contentLeft,
     disabled: disabled,
-    renderTargetLabel: renderTargetLabel
+    renderValue: renderValue,
+    focusedPath: focusedPath,
+    focusedToValueMap: focusedToValueMap
   });
 };

package/styled-components/es/components/Select/elements/Target/elements/Button/Button.js

@@ -1,38 +1,30 @@
 import React from 'react';
-import { cx, isEmpty } from '../../../../../../utils';
+import { cx } from '../../../../../../utils';
 import { classes } from '../../../../Select.tokens';
-import { StyledButton, StyledArrow, InnerWrapper, Label, ButtonWrapper, IconArrowWrapper } from './Button.styles';
-var getLabel = function getLabel(_ref) {
-  var value = _ref.value,
-    label = _ref.label,
+import { getButtonLabel } from '../../../../utils';
+import { StyledButton, StyledArrow, Label, ButtonWrapper, IconArrowWrapper } from './Button.styles';
+export var Button = function Button(_ref) {
+  var opened = _ref.opened,
+    value = _ref.value,
     isTargetAmount = _ref.isTargetAmount,
     multiselect = _ref.multiselect,
-    valueToItemMap = _ref.valueToItemMap;
-  if (isEmpty(value)) {
-    return label;
-  }
-  if (multiselect && isTargetAmount) {
-    return "\u0412\u044B\u0431\u0440\u0430\u043D\u043E: ".concat(value.length);
-  }
-  if (multiselect && Array.isArray(value)) {
-    return value.map(function (value) {
-      return valueToItemMap.get(value).label;
-    }).join(', ');
-  }
-  return valueToItemMap.get(value.toString()).label;
-};
-export var Button = function Button(_ref2) {
-  var opened = _ref2.opened,
-    value = _ref2.value,
-    isTargetAmount = _ref2.isTargetAmount,
-    multiselect = _ref2.multiselect,
-    valueToItemMap = _ref2.valueToItemMap,
-    onKeyDown = _ref2.onKeyDown,
-    label = _ref2.label,
-    size = _ref2.size,
-    disabled = _ref2.disabled;
+    valueToItemMap = _ref.valueToItemMap,
+    onKeyDown = _ref.onKeyDown,
+    label = _ref.label,
+    size = _ref.size,
+    disabled = _ref.disabled,
+    renderValue = _ref.renderValue,
+    focusedPath = _ref.focusedPath,
+    focusedToValueMap = _ref.focusedToValueMap;
   var withArrowInverse = opened ? classes.arrowInverse : undefined;
   var iconSize = size === 'xs' ? 'xs' : 's';
+  var getActiveDescendant = function getActiveDescendant() {
+    var _focusedToValueMap$ge;
+    var focusedPathAsString = focusedPath.reduce(function (acc, n) {
+      return "".concat(acc, "/").concat(n);
+    }, '').replace(/^(\/)/, '');
+    return focusedToValueMap === null || focusedToValueMap === void 0 || (_focusedToValueMap$ge = focusedToValueMap.get(focusedPathAsString)) === null || _focusedToValueMap$ge === void 0 ? void 0 : _focusedToValueMap$ge.value.toString();
+  };
   return /*#__PURE__*/React.createElement(ButtonWrapper, null, /*#__PURE__*/React.createElement(StyledButton, {
     stretching: "filled",
     onKeyDown: onKeyDown,
@@ -42,12 +34,17 @@ export var Button = function Button(_ref2) {
       size: iconSize,
       color: "inherit",
       className: cx(classes.selectTargetArrow, withArrowInverse)
-    }))
-  }, /*#__PURE__*/React.createElement(InnerWrapper, null, /*#__PURE__*/React.createElement(Label, null, getLabel({
+    })),
+    role: "combobox",
+    "aria-controls": "tree_level_1",
+    "aria-expanded": opened,
+    "aria-activedescendant": getActiveDescendant()
+  }, /*#__PURE__*/React.createElement(Label, null, getButtonLabel({
     value: value,
     isTargetAmount: isTargetAmount,
     multiselect: multiselect,
     valueToItemMap: valueToItemMap,
-    label: label
-  })))));
+    label: label,
+    renderValue: renderValue
+  }))));
 };

package/styled-components/es/components/Select/elements/Target/elements/Button/Button.styles.js

@@ -18,9 +18,6 @@ export var StyledArrow = /*#__PURE__*/styled(IconDisclosureDownCentered).withCon
 export var ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-m19uar-3"
 })(["display:inline;.", "::before{box-shadow:none !important;}"], classes.selectWithoutBoxShadow);
-export var InnerWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-m19uar-4"
-})(["width:100%;height:100%;display:flex;align-items:center;justify-content:space-between;.", "{transform:rotate(-180deg);}"], classes.arrowInverse);
 export var Label = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-m19uar-5"
-})(["width:100%;text-align:left;", ""], /*#__PURE__*/applyEllipsis());
+  componentId: "plasma-new-hope__sc-m19uar-4"
+})(["display:inline;width:100%;text-align:left;", " .", "{transform:rotate(-180deg);}"], /*#__PURE__*/applyEllipsis(), classes.arrowInverse);

package/styled-components/es/components/Select/elements/Target/elements/Textfield/Textfield.js

@@ -12,7 +12,8 @@ var getLabel = function getLabel(_ref) {
     placeholder = _ref.placeholder,
     focusedChipIndex = _ref.focusedChipIndex,
     labelPlacement = _ref.labelPlacement,
-    size = _ref.size;
+    size = _ref.size,
+    renderValue = _ref.renderValue;
   if (isEmpty(value)) {
     if (!label || labelPlacement === 'outer') {
       return /*#__PURE__*/React.createElement(Placeholder, null, placeholder);
@@ -27,8 +28,9 @@ var getLabel = function getLabel(_ref) {
   }
   if (Array.isArray(value)) {
     return value.map(function (currentValue, index) {
+      var itemLabel = valueToItemMap.get(currentValue).label;
       return /*#__PURE__*/React.createElement(Chip, {
-        text: valueToItemMap.get(currentValue).label,
+        text: renderValue ? renderValue(currentValue, itemLabel) : itemLabel,
         onClick: function onClick(e) {
           e.stopPropagation();
           onChipClick(currentValue);
@@ -37,10 +39,11 @@ var getLabel = function getLabel(_ref) {
       });
     });
   }
+  var itemLabel = valueToItemMap.get(value).label;
   if (!label || labelPlacement === 'outer') {
-    return /*#__PURE__*/React.createElement(Value, null, valueToItemMap.get(value).label);
+    return /*#__PURE__*/React.createElement(Value, null, renderValue ? renderValue(value, itemLabel) : itemLabel);
   }
-  return /*#__PURE__*/React.createElement(InnerLabelWrapper, null, size !== 'xs' && /*#__PURE__*/React.createElement(InnerLabel, null, label), /*#__PURE__*/React.createElement(Value, null, valueToItemMap.get(value).label));
+  return /*#__PURE__*/React.createElement(InnerLabelWrapper, null, size !== 'xs' && /*#__PURE__*/React.createElement(InnerLabel, null, label), /*#__PURE__*/React.createElement(Value, null, renderValue ? renderValue(value, itemLabel) : itemLabel));
 };
 export var Textfield = function Textfield(_ref2) {
   var opened = _ref2.opened,
@@ -56,9 +59,19 @@ export var Textfield = function Textfield(_ref2) {
     labelPlacement = _ref2.labelPlacement,
     size = _ref2.size,
     contentLeft = _ref2.contentLeft,
-    disabled = _ref2.disabled;
+    disabled = _ref2.disabled,
+    renderValue = _ref2.renderValue,
+    focusedPath = _ref2.focusedPath,
+    focusedToValueMap = _ref2.focusedToValueMap;
   var withArrowInverse = opened ? classes.arrowInverse : undefined;
   var iconSize = size === 'xs' ? 'xs' : 's';
+  var getActiveDescendant = function getActiveDescendant() {
+    var _focusedToValueMap$ge;
+    var focusedPathAsString = focusedPath.reduce(function (acc, n) {
+      return "".concat(acc, "/").concat(n);
+    }, '').replace(/^(\/)/, '');
+    return focusedToValueMap === null || focusedToValueMap === void 0 || (_focusedToValueMap$ge = focusedToValueMap.get(focusedPathAsString)) === null || _focusedToValueMap$ge === void 0 ? void 0 : _focusedToValueMap$ge.value.toString();
+  };
   return /*#__PURE__*/React.createElement(TextfieldWrapper, {
     opened: opened,
     value: value
@@ -66,7 +79,11 @@ export var Textfield = function Textfield(_ref2) {
     stretching: "filled",
     className: cx(classes.textfieldTarget, opened || focusedChipIndex !== null ? classes.selectWithoutBoxShadow : undefined),
     onKeyDown: onKeyDown,
-    disabled: disabled
+    disabled: disabled,
+    role: "combobox",
+    "aria-controls": "tree_level_1",
+    "aria-expanded": opened,
+    "aria-activedescendant": getActiveDescendant()
   }, /*#__PURE__*/React.createElement(Wrapper, null, contentLeft && (!multiselect || isEmpty(value)) && /*#__PURE__*/React.createElement(ContentLeftWrapper, null, contentLeft), /*#__PURE__*/React.createElement(ChipWrapper, null, getLabel({
     value: value,
     isTargetAmount: isTargetAmount,
@@ -76,7 +93,8 @@ export var Textfield = function Textfield(_ref2) {
     placeholder: placeholder,
     focusedChipIndex: focusedChipIndex,
     labelPlacement: labelPlacement,
-    size: size
+    size: size,
+    renderValue: renderValue
   })), /*#__PURE__*/React.createElement(IconArrowWrapper, null, /*#__PURE__*/React.createElement(StyledArrow, {
     size: iconSize,
     color: "inherit",

package/styled-components/es/components/Select/hooks/useKeyboardNavigation.js

@@ -160,7 +160,16 @@ export var useKeyNavigation = function useKeyNavigation(_ref) {
         {
           event.preventDefault();
           var _currentItem2 = getFurtherPath(focusedPath, focusedToValueMap);
-          if (!_currentItem2 || _currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.isDisabled) {
+          if (!path[0]) {
+            dispatchPath({
+              type: 'opened_first_level'
+            });
+            dispatchFocusedPath({
+              type: 'set_initial_focus'
+            });
+            break;
+          }
+          if (!_currentItem2 || _currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.isDisabled || _currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.disabled) {
             break;
           }
           handlePressDown(_currentItem2);
@@ -175,7 +184,7 @@ export var useKeyNavigation = function useKeyNavigation(_ref) {
             });
           }
           var _currentItem3 = getFurtherPath(focusedPath, focusedToValueMap);
-          if (_currentItem3 !== null && _currentItem3 !== void 0 && _currentItem3.isDisabled) {
+          if (_currentItem3 !== null && _currentItem3 !== void 0 && _currentItem3.isDisabled || _currentItem3 !== null && _currentItem3 !== void 0 && _currentItem3.disabled) {
             break;
           }
           if (!path[0]) {

package/styled-components/es/components/Select/utils/getButtonLabel.js

@@ -0,0 +1,37 @@
+import { isEmpty } from '../../../utils';
+var getLabel = function getLabel(_ref) {
+  var renderValue = _ref.renderValue,
+    value = _ref.value,
+    valueToItemMap = _ref.valueToItemMap;
+  var _ref2 = valueToItemMap.get(value.toString()),
+    label = _ref2.label;
+  return renderValue ? renderValue(value, label) : label;
+};
+export var getButtonLabel = function getButtonLabel(_ref3) {
+  var value = _ref3.value,
+    label = _ref3.label,
+    isTargetAmount = _ref3.isTargetAmount,
+    multiselect = _ref3.multiselect,
+    valueToItemMap = _ref3.valueToItemMap,
+    renderValue = _ref3.renderValue;
+  if (isEmpty(value)) {
+    return label;
+  }
+  if (multiselect && isTargetAmount) {
+    return "\u0412\u044B\u0431\u0440\u0430\u043D\u043E: ".concat(value.length);
+  }
+  if (multiselect && Array.isArray(value)) {
+    return value.map(function (itemValue) {
+      return getLabel({
+        renderValue: renderValue,
+        value: itemValue,
+        valueToItemMap: valueToItemMap
+      });
+    }).join(', ');
+  }
+  return getLabel({
+    renderValue: renderValue,
+    value: value,
+    valueToItemMap: valueToItemMap
+  });
+};

package/styled-components/es/components/Select/utils/index.js

@@ -4,4 +4,5 @@ export { updateAncestors } from './updateAncestors';
 export { updateSingleAncestors } from './updateSingleAncestors';
 export { sizeToIconSize } from './sizeToIconSize';
 export { getCorrectHeight } from './getCorrectHeight';
-export { getView } from './getView';
+export { getView } from './getView';
+export { getButtonLabel } from './getButtonLabel';

package/styled-components/es/examples/plasma_b2c/components/Select/Select.config.js

@@ -3,6 +3,7 @@ import { selectTokens } from '../../../../components/Select';
 export var config = {
   defaults: {
     view: 'default',
+    chipView: 'default',
     size: 'm'
   },
   variations: {

package/styled-components/es/examples/plasma_b2c/components/Select/Select.stories.tsx

@@ -290,41 +290,14 @@ const items = [
         isDisabled: true,
     },
 ];
-const loadingItems = [
-    { value: '1', label: 'Item 1' },
-    { value: '2', label: 'Item 2' },
-    { value: '3', label: 'Item 3' },
-    { value: '4', label: 'Item 4' },
-    { value: '5', label: 'Item 5' },
-    { value: '6', label: 'Item 6' },
-    { value: '7', label: 'Item 7' },
-    { value: '8', label: 'Item 8' },
-    { value: '9', label: 'Item 9' },
-    { value: '10', label: 'Item 10' },
-];
 
 const SingleStory = (args: StorySelectProps) => {
     const [value, setValue] = useState('');
 
-    const iconSize = args.size === 'xs' ? 'xs' : 's';
-
     return (
-        <>
-            <button type="button" onClick={() => setValue('')}>
-                clear
-            </button>
-
-            <div style={{ width: '300px' }}>
-                <Select
-                    {...args}
-                    multiselect={false}
-                    items={items}
-                    value={value}
-                    onChange={setValue}
-                    contentLeft={<IconPlaceholder size={iconSize} />}
-                />
-            </div>
-        </>
+        <div style={{ width: '300px' }}>
+            <Select {...args} items={items} value={value} onChange={setValue} />
+        </div>
     );
 };
 
@@ -335,25 +308,10 @@ export const Single: StoryObj<StorySelectProps> = {
 const MultiselectStory = (args: StorySelectProps) => {
     const [value, setValue] = useState<Array<string>>([]);
 
-    const iconSize = args.size === 'xs' ? 'xs' : 's';
-
     return (
-        <>
-            <button type="button" onClick={() => setValue([])}>
-                clear
-            </button>
-
-            <div style={{ width: '300px' }}>
-                <Select
-                    {...args}
-                    multiselect
-                    items={items}
-                    value={value}
-                    onChange={setValue}
-                    contentLeft={<IconPlaceholder size={iconSize} />}
-                />
-            </div>
-        </>
+        <div style={{ width: '300px' }}>
+            <Select {...args} items={items} value={value} onChange={setValue} />
+        </div>
     );
 };
 
@@ -380,6 +338,20 @@ export const Predefined: StoryObj<StorySelectProps> = {
     render: (args) => <PredefinedStory {...args} />,
 };
 
+const EmptyListStory = (args: StorySelectProps) => {
+    const [valueSingle, setValueSingle] = useState('');
+
+    return (
+        <div style={{ width: '300px' }}>
+            <Select {...args} items={[]} value={valueSingle} onChange={setValueSingle} />
+        </div>
+    );
+};
+
+export const EmptyList: StoryObj<StorySelectProps> = {
+    render: (args) => <EmptyListStory {...args} />,
+};
+
 const CommonStory = (args: StorySelectProps) => {
     const [value, setValue] = useState('');
     const [valueMultiple, setValueMultiple] = useState<Array<string>>([]);
@@ -517,7 +489,7 @@ const CommonStory = (args: StorySelectProps) => {
                         <td>Clear</td>
 
                         <td>
-                            <div style={{ display: 'flex' }}>
+                            <div style={{ width: '200px' }}>
                                 <Select
                                     {...args}
                                     multiselect={false}
@@ -529,7 +501,7 @@ const CommonStory = (args: StorySelectProps) => {
                             </div>
                         </td>
                         <td>
-                            <div style={{ display: 'flex' }}>
+                            <div style={{ width: '200px' }}>
                                 <Select
                                     {...args}
                                     multiselect

package/types/components/Chip/Chip.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chip.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.styles.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,IAAI,0CAUhB,CAAC;AAEF,eAAO,MAAM,iBAAiB,qKAI7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,qKAE7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,qKAI9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,qKAS9B,CAAC"}
+{"version":3,"file":"Chip.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.styles.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,IAAI,0CAUhB,CAAC;AAEF,eAAO,MAAM,iBAAiB,qKAI7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,qKAE7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,qKAI9B,CAAC;AAEF,eAAO,MAAM,kBAAkB,qKAK9B,CAAC"}

package/types/components/Dropdown/Dropdown.types.d.ts

@@ -71,25 +71,21 @@ export interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
      * @default normal
      */
     variant?: 'normal' | 'tight';
-    /**
-     * Обработчик клика по item.
-     * @deprecated использовать onItemSelect.
-     */
-    onItemClick?: (item: DropdownItemOption, event: SyntheticEvent) => void;
     /**
      * Значение css overflow для выпадающего меню.
-     * @default initial
-     * @deprecated
      * @example listOverflow="scroll"
      */
     listOverflow?: CSSProperties['overflow'];
     /**
      * Значение css height для выпадающего меню.
-     * @default initial
-     * @deprecated
      * @example listHeight="11", listHeight="auto", listHeight={11}
      */
     listHeight?: number | CSSProperties['height'];
+    /**
+     * Обработчик клика по item.
+     * @deprecated использовать onItemSelect.
+     */
+    onItemClick?: (item: DropdownItemOption, event: SyntheticEvent) => void;
     /**
      * Индекс элемента при наведении
      * @deprecated использовать onHover

package/types/components/Dropdown/Dropdown.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAEzE,oBAAY,sBAAsB,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AACzE,oBAAY,iBAAiB,GAAG,sBAAsB,GAAG,MAAM,CAAC;AAEhE,oBAAY,eAAe,GAAG,OAAO,GAAG,OAAO,CAAC;AAEhD,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACjE;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACzE;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,GAAG,KAAK,CAAC,sBAAsB,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,GAAG,KAAK,KAAK,IAAI,CAAC;IACpE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC7B;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACxE;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACzC;;;;;OAKG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;IAC9C;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,oBAAY,sBAAsB,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC"}
+{"version":3,"file":"Dropdown.types.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEtF,OAAO,EAAE,kBAAkB,EAAE,MAAM,qCAAqC,CAAC;AAEzE,oBAAY,sBAAsB,GAAG,KAAK,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AACzE,oBAAY,iBAAiB,GAAG,sBAAsB,GAAG,MAAM,CAAC;AAEhE,oBAAY,eAAe,GAAG,OAAO,GAAG,OAAO,CAAC;AAEhD,MAAM,WAAW,aAAc,SAAQ,cAAc,CAAC,cAAc,CAAC;IACjE;;OAEG;IACH,KAAK,EAAE,KAAK,CAAC,kBAAkB,CAAC,CAAC;IACjC;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACzE;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,iBAAiB,GAAG,KAAK,CAAC,sBAAsB,CAAC,CAAC;IAC9D;;;OAGG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1B;;;OAGG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IACnC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,GAAG,KAAK,KAAK,IAAI,CAAC;IACpE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,OAAO,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC7B;;;OAGG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACzC;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,aAAa,CAAC,QAAQ,CAAC,CAAC;IAE9C;;;OAGG;IACH,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;IACxE;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,oBAAY,sBAAsB,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG,cAAc,CAAC,OAAO,EAAE,KAAK,CAAC,KAAK,IAAI,CAAC"}