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

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

@@ -8,8 +8,9 @@ exports.selectRoot = exports.selectConfig = exports.Context = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
 var _utils = /*#__PURE__*/require("../../utils");
 var _hooks = /*#__PURE__*/require("../../hooks");
+var _utils2 = /*#__PURE__*/require("../Dropdown/utils");
 var _useKeyboardNavigation = /*#__PURE__*/require("./hooks/useKeyboardNavigation");
-var _utils2 = /*#__PURE__*/require("./utils");
+var _utils3 = /*#__PURE__*/require("./utils");
 var _Inner = /*#__PURE__*/require("./elements/Inner/Inner");
 var _SelectNotFoundContent = /*#__PURE__*/require("./elements/SelectNotFoundContent/SelectNotFoundContent");
 var _Target = /*#__PURE__*/require("./elements/Target/Target");
@@ -18,8 +19,7 @@ var _usePathMaps3 = /*#__PURE__*/require("./hooks/usePathMaps");
 var _Select = /*#__PURE__*/require("./Select.styles");
 var _base = /*#__PURE__*/require("./variations/_view/base");
 var _base2 = /*#__PURE__*/require("./variations/_size/base");
-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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 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); }
@@ -42,10 +42,10 @@ var selectRoot = exports.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,
@@ -70,10 +70,11 @@ var selectRoot = exports.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 = (0, _react.useMemo)(function () {
-      return (0, _utils2.initialItemsTransform)(items);
+      return (0, _utils3.initialItemsTransform)(items);
     }, [items]);
     var _usePathMaps = (0, _usePathMaps3.usePathMaps)(transformedItems),
       _usePathMaps2 = _slicedToArray(_usePathMaps, 4),
@@ -125,12 +126,12 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
       var checkedCopy = new Map(checked);
       if (!checkedCopy.get(item.value.toString())) {
         checkedCopy.set(item.value.toString(), true);
-        (0, _utils2.updateDescendants)(item, checkedCopy, true);
+        (0, _utils3.updateDescendants)(item, checkedCopy, true);
       } else {
         checkedCopy.set(item.value.toString(), false);
-        (0, _utils2.updateDescendants)(item, checkedCopy, false);
+        (0, _utils3.updateDescendants)(item, checkedCopy, false);
       }
-      (0, _utils2.updateAncestors)(item, checkedCopy);
+      (0, _utils3.updateAncestors)(item, checkedCopy);
       var newValues = [];
       valueToItemMap.forEach(function (item, key) {
         if (checkedCopy.get(key)) {
@@ -154,7 +155,7 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
           });
           if (!isCurrentChecked) {
             checkedCopy.set(item.value, 'done');
-            (0, _utils2.updateSingleAncestors)(item, checkedCopy, 'dot');
+            (0, _utils3.updateSingleAncestors)(item, checkedCopy, 'dot');
           }
           onChange(isCurrentChecked ? '' : item.value);
         }
@@ -206,12 +207,12 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
         if (multiselect && Array.isArray(value)) {
           value.forEach(function (val) {
             checkedCopy.set(val, true);
-            (0, _utils2.updateDescendants)(valueToItemMap.get(val), checkedCopy, true);
-            (0, _utils2.updateAncestors)(valueToItemMap.get(val), checkedCopy);
+            (0, _utils3.updateDescendants)(valueToItemMap.get(val), checkedCopy, true);
+            (0, _utils3.updateAncestors)(valueToItemMap.get(val), checkedCopy);
           });
         } else {
           checkedCopy.set(value, 'done');
-          (0, _utils2.updateSingleAncestors)(valueToItemMap.get(value), checkedCopy, 'dot');
+          (0, _utils3.updateSingleAncestors)(valueToItemMap.get(value), checkedCopy, 'dot');
         }
       }
       setChecked(checkedCopy);
@@ -219,7 +220,7 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
     return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       ref: ref,
       size: size,
-      view: (0, _utils2.getView)(view, status),
+      view: (0, _utils3.getView)(view, status),
       chipView: chipView,
       items: items
     }, rest), label && labelPlacement === 'outer' && target !== 'button' && /*#__PURE__*/_react["default"].createElement(_Select.OuterLabel, null, label), /*#__PURE__*/_react["default"].createElement(Context.Provider, {
@@ -235,9 +236,9 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
     }, /*#__PURE__*/_react["default"].createElement(_Select.StyledPopover, {
       ref: targetRef,
       isOpen: isCurrentListOpen,
+      placement: (0, _utils2.getPlacements)(placement),
       usePortal: Boolean(portal),
       frame: portal,
-      placement: "bottom-start",
       onToggle: handleToggle,
       trigger: "click",
       target: /*#__PURE__*/_react["default"].createElement(_Target.Target, {
@@ -247,6 +248,8 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
         isTargetAmount: isTargetAmount,
         multiselect: multiselect,
         valueToItemMap: valueToItemMap,
+        focusedPath: focusedPath,
+        focusedToValueMap: focusedToValueMap,
         onChipClick: handleChipClick,
         label: label,
         placeholder: placeholder,
@@ -256,13 +259,15 @@ var selectRoot = exports.selectRoot = function selectRoot(Root) {
         size: size,
         contentLeft: contentLeft,
         disabled: disabled,
-        renderTargetLabel: renderTargetLabel
+        renderValue: renderValue
       }),
       preventOverflow: false,
       closeOnOverlayClick: true
-    }, (0, _utils.isEmpty)(items) ? notFoundContent || _SelectNotFoundConten || (_SelectNotFoundConten = /*#__PURE__*/_react["default"].createElement(_SelectNotFoundContent.SelectNotFoundContent, {
-      description: "\u0414\u043E\u0434\u0435\u043B\u0430\u0442\u044C"
-    })) : /*#__PURE__*/_react["default"].createElement(_Select.Ul, {
+    }, (0, _utils.isEmpty)(items) ? notFoundContent || /*#__PURE__*/_react["default"].createElement(_SelectNotFoundContent.SelectNotFoundContent, {
+      description: "\u0414\u043E\u0434\u0435\u043B\u0430\u0442\u044C",
+      buttonAction: function buttonAction() {},
+      buttonText: "Label"
+    }) : /*#__PURE__*/_react["default"].createElement(_Select.Ul, {
       role: "tree",
       id: "tree_level_1",
       listHeight: listHeight,
@@ -297,6 +302,7 @@ var selectConfig = exports.selectConfig = {
   },
   defaults: {
     view: 'default',
+    chipView: 'default',
     size: 'm'
   }
 };

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

@@ -44,7 +44,11 @@ var Inner = exports.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,
@@ -70,6 +74,7 @@ var Inner = exports.Inner = function Inner(_ref) {
     item: item,
     path: path,
     index: index,
-    currentLevel: currentLevel
+    currentLevel: currentLevel,
+    itemRole: "option"
   });
 };

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

@@ -19,9 +19,15 @@ var Item = exports.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;
@@ -34,7 +40,7 @@ var Item = exports.Item = function Item(_ref) {
     handleCheckboxChange = _useContext.handleCheckboxChange,
     handleItemClick = _useContext.handleItemClick,
     variant = _useContext.variant;
-  var isDisabledClassName = isDisabled ? _Select.classes.dropdownItemIsDisabled : undefined;
+  var isDisabledClassName = disabled || isDisabled ? _Select.classes.dropdownItemIsDisabled : undefined;
   var focusedClass = currentLevel === focusedPath.length - 1 && index === (focusedPath === null || focusedPath === void 0 ? void 0 : focusedPath[currentLevel]) ? _Select.classes.dropdownItemIsFocused : undefined;
   var activeClass = value === (path === null || path === void 0 ? void 0 : path[currentLevel + 1]) ? _Select.classes.dropdownItemIsActive : undefined;
   (0, _react.useEffect)(function () {
@@ -47,12 +53,12 @@ var Item = exports.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["default"].createElement(_Item.Wrapper, {
@@ -60,7 +66,12 @@ var Item = exports.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["default"].createElement(_Item.IconWrapper, {
     variant: variant
   }, multiselect && /*#__PURE__*/_react["default"].createElement("span", {

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

@@ -24,7 +24,9 @@ var Target = exports.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["default"].createElement(_Button.Button, {
     opened: opened,
     value: value,
@@ -35,7 +37,9 @@ var Target = exports.Target = function Target(_ref) {
     label: label,
     size: size,
     disabled: disabled,
-    renderTargetLabel: renderTargetLabel
+    renderValue: renderValue,
+    focusedPath: focusedPath,
+    focusedToValueMap: focusedToValueMap
   }) : /*#__PURE__*/_react["default"].createElement(_Textfield.Textfield, {
     opened: opened,
     value: value,
@@ -51,6 +55,8 @@ var Target = exports.Target = function Target(_ref) {
     size: size,
     contentLeft: contentLeft,
     disabled: disabled,
-    renderTargetLabel: renderTargetLabel
+    renderValue: renderValue,
+    focusedPath: focusedPath,
+    focusedToValueMap: focusedToValueMap
   });
 };

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

@@ -7,39 +7,31 @@ exports.Button = void 0;
 var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
 var _utils = /*#__PURE__*/require("../../../../../../utils");
 var _Select = /*#__PURE__*/require("../../../../Select.tokens");
+var _utils2 = /*#__PURE__*/require("../../../../utils");
 var _Button = /*#__PURE__*/require("./Button.styles");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var getLabel = function getLabel(_ref) {
-  var value = _ref.value,
-    label = _ref.label,
+var Button = exports.Button = function Button(_ref) {
+  var opened = _ref.opened,
+    value = _ref.value,
     isTargetAmount = _ref.isTargetAmount,
     multiselect = _ref.multiselect,
-    valueToItemMap = _ref.valueToItemMap;
-  if ((0, _utils.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;
-};
-var Button = exports.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 ? _Select.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["default"].createElement(_Button.ButtonWrapper, null, /*#__PURE__*/_react["default"].createElement(_Button.StyledButton, {
     stretching: "filled",
     onKeyDown: onKeyDown,
@@ -49,12 +41,17 @@ var Button = exports.Button = function Button(_ref2) {
       size: iconSize,
       color: "inherit",
       className: (0, _utils.cx)(_Select.classes.selectTargetArrow, withArrowInverse)
-    }))
-  }, /*#__PURE__*/_react["default"].createElement(_Button.InnerWrapper, null, /*#__PURE__*/_react["default"].createElement(_Button.Label, null, getLabel({
+    })),
+    role: "combobox",
+    "aria-controls": "tree_level_1",
+    "aria-expanded": opened,
+    "aria-activedescendant": getActiveDescendant()
+  }, /*#__PURE__*/_react["default"].createElement(_Button.Label, null, (0, _utils2.getButtonLabel)({
     value: value,
     isTargetAmount: isTargetAmount,
     multiselect: multiselect,
     valueToItemMap: valueToItemMap,
-    label: label
-  })))));
+    label: label,
+    renderValue: renderValue
+  }))));
 };

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledButton = exports.StyledArrow = exports.Label = exports.InnerWrapper = exports.IconArrowWrapper = exports.ButtonWrapper = void 0;
+exports.StyledButton = exports.StyledArrow = exports.Label = exports.IconArrowWrapper = exports.ButtonWrapper = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
 var _mixins = /*#__PURE__*/require("../../../../../../mixins");
 var _Icon = /*#__PURE__*/require("../../../../../_Icon");
@@ -25,9 +25,6 @@ var StyledArrow = exports.StyledArrow = /*#__PURE__*/(0, _styledComponents["defa
 var ButtonWrapper = exports.ButtonWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-m19uar-3"
 })(["display:inline;.", "::before{box-shadow:none !important;}"], _Select.classes.selectWithoutBoxShadow);
-var InnerWrapper = exports.InnerWrapper = /*#__PURE__*/_styledComponents["default"].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);}"], _Select.classes.arrowInverse);
 var Label = exports.Label = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-m19uar-5"
-})(["width:100%;text-align:left;", ""], /*#__PURE__*/(0, _mixins.applyEllipsis)());
+  componentId: "plasma-new-hope__sc-m19uar-4"
+})(["display:inline;width:100%;text-align:left;", " .", "{transform:rotate(-180deg);}"], /*#__PURE__*/(0, _mixins.applyEllipsis)(), _Select.classes.arrowInverse);

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

@@ -19,7 +19,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 ((0, _utils.isEmpty)(value)) {
     if (!label || labelPlacement === 'outer') {
       return /*#__PURE__*/_react["default"].createElement(_Textfield.Placeholder, null, placeholder);
@@ -34,8 +35,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["default"].createElement(_Chip.Chip, {
-        text: valueToItemMap.get(currentValue).label,
+        text: renderValue ? renderValue(currentValue, itemLabel) : itemLabel,
         onClick: function onClick(e) {
           e.stopPropagation();
           onChipClick(currentValue);
@@ -44,10 +46,11 @@ var getLabel = function getLabel(_ref) {
       });
     });
   }
+  var itemLabel = valueToItemMap.get(value).label;
   if (!label || labelPlacement === 'outer') {
-    return /*#__PURE__*/_react["default"].createElement(_Textfield.Value, null, valueToItemMap.get(value).label);
+    return /*#__PURE__*/_react["default"].createElement(_Textfield.Value, null, renderValue ? renderValue(value, itemLabel) : itemLabel);
   }
-  return /*#__PURE__*/_react["default"].createElement(_Textfield.InnerLabelWrapper, null, size !== 'xs' && /*#__PURE__*/_react["default"].createElement(_Textfield.InnerLabel, null, label), /*#__PURE__*/_react["default"].createElement(_Textfield.Value, null, valueToItemMap.get(value).label));
+  return /*#__PURE__*/_react["default"].createElement(_Textfield.InnerLabelWrapper, null, size !== 'xs' && /*#__PURE__*/_react["default"].createElement(_Textfield.InnerLabel, null, label), /*#__PURE__*/_react["default"].createElement(_Textfield.Value, null, renderValue ? renderValue(value, itemLabel) : itemLabel));
 };
 var Textfield = exports.Textfield = function Textfield(_ref2) {
   var opened = _ref2.opened,
@@ -63,9 +66,19 @@ var Textfield = exports.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 ? _Select.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["default"].createElement(_Textfield.TextfieldWrapper, {
     opened: opened,
     value: value
@@ -73,7 +86,11 @@ var Textfield = exports.Textfield = function Textfield(_ref2) {
     stretching: "filled",
     className: (0, _utils.cx)(_Select.classes.textfieldTarget, opened || focusedChipIndex !== null ? _Select.classes.selectWithoutBoxShadow : undefined),
     onKeyDown: onKeyDown,
-    disabled: disabled
+    disabled: disabled,
+    role: "combobox",
+    "aria-controls": "tree_level_1",
+    "aria-expanded": opened,
+    "aria-activedescendant": getActiveDescendant()
   }, /*#__PURE__*/_react["default"].createElement(_Textfield.Wrapper, null, contentLeft && (!multiselect || (0, _utils.isEmpty)(value)) && /*#__PURE__*/_react["default"].createElement(_Textfield.ContentLeftWrapper, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_Textfield.ChipWrapper, null, getLabel({
     value: value,
     isTargetAmount: isTargetAmount,
@@ -83,7 +100,8 @@ var Textfield = exports.Textfield = function Textfield(_ref2) {
     placeholder: placeholder,
     focusedChipIndex: focusedChipIndex,
     labelPlacement: labelPlacement,
-    size: size
+    size: size,
+    renderValue: renderValue
   })), /*#__PURE__*/_react["default"].createElement(_Textfield.IconArrowWrapper, null, /*#__PURE__*/_react["default"].createElement(_Textfield.StyledArrow, {
     size: iconSize,
     color: "inherit",

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

@@ -166,7 +166,16 @@ var useKeyNavigation = exports.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);
@@ -181,7 +190,7 @@ var useKeyNavigation = exports.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/cjs/components/Select/utils/getButtonLabel.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getButtonLabel = void 0;
+var _utils = /*#__PURE__*/require("../../../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;
+};
+var getButtonLabel = exports.getButtonLabel = function getButtonLabel(_ref3) {
+  var value = _ref3.value,
+    label = _ref3.label,
+    isTargetAmount = _ref3.isTargetAmount,
+    multiselect = _ref3.multiselect,
+    valueToItemMap = _ref3.valueToItemMap,
+    renderValue = _ref3.renderValue;
+  if ((0, _utils.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/cjs/components/Select/utils/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "getButtonLabel", {
+  enumerable: true,
+  get: function get() {
+    return _getButtonLabel.getButtonLabel;
+  }
+});
 Object.defineProperty(exports, "getCorrectHeight", {
   enumerable: true,
   get: function get() {
@@ -51,4 +57,5 @@ var _updateAncestors = /*#__PURE__*/require("./updateAncestors");
 var _updateSingleAncestors = /*#__PURE__*/require("./updateSingleAncestors");
 var _sizeToIconSize = /*#__PURE__*/require("./sizeToIconSize");
 var _getCorrectHeight = /*#__PURE__*/require("./getCorrectHeight");
-var _getView = /*#__PURE__*/require("./getView");
+var _getView = /*#__PURE__*/require("./getView");
+var _getButtonLabel = /*#__PURE__*/require("./getButtonLabel");

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

@@ -9,6 +9,7 @@ var _Select = /*#__PURE__*/require("../../../../components/Select");
 var config = exports.config = {
   defaults: {
     view: 'default',
+    chipView: 'default',
     size: 'm'
   },
   variations: {

package/styled-components/cjs/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/styled-components/es/components/Chip/Chip.styles.js

@@ -14,4 +14,4 @@ export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
 })(["display:flex;margin-left:var(", ");margin-right:var(", ");"], tokens.rightContentMarginLeft, tokens.rightContentMarginRight);
 export var StyledContentClear = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-bm1fxi-3"
-})(["display:flex;margin-left:var(", ");margin-right:var(", ");color:var(", ");:hover{color:red;}"], tokens.clearContentMarginLeft, tokens.clearContentMarginRight, tokens.closeIconColor);
+})(["display:flex;margin-left:var(", ");margin-right:var(", ");color:var(", ");"], tokens.clearContentMarginLeft, tokens.clearContentMarginRight, tokens.closeIconColor);