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

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,7 @@ var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref
         {
           event.preventDefault();
           var _currentItem2 = getFurtherPath(focusedPath, focusedToValueMap);
-          if (!_currentItem2 || _currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.isDisabled) {
+          if (!_currentItem2 || _currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.isDisabled || _currentItem2 !== null && _currentItem2 !== void 0 && _currentItem2.disabled) {
             break;
           }
           handlePressDown(_currentItem2);
@@ -181,7 +181,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.stories.tsx

@@ -517,7 +517,7 @@ const CommonStory = (args: StorySelectProps) => {
                         <td>Clear</td>
 
                         <td>
-                            <div style={{ display: 'flex' }}>
+                            <div style={{ width: '200px' }}>
                                 <Select
                                     {...args}
                                     multiselect={false}
@@ -529,7 +529,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);

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

@@ -1,5 +1,5 @@
 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 +12,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 +34,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 +62,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 +228,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 +240,8 @@ export var selectRoot = function selectRoot(Root) {
         isTargetAmount: isTargetAmount,
         multiselect: multiselect,
         valueToItemMap: valueToItemMap,
+        focusedPath: focusedPath,
+        focusedToValueMap: focusedToValueMap,
         onChipClick: handleChipClick,
         label: label,
         placeholder: placeholder,
@@ -247,7 +251,7 @@ export var selectRoot = function selectRoot(Root) {
         size: size,
         contentLeft: contentLeft,
         disabled: disabled,
-        renderTargetLabel: renderTargetLabel
+        renderValue: renderValue
       }),
       preventOverflow: false,
       closeOnOverlayClick: true

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);