@salutejs/plasma-new-hope 0.114.1-canary.1333.10216082008.0 → 0.115.0-canary.1328.10215259724.0

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

@@ -1,4 +1,4 @@
-var _excluded = ["multiselect", "value", "onChange", "target", "items", "placement", "label", "labelPlacement", "placeholder", "helperText", "isTargetAmount", "disabled", "view", "size", "listOverflow", "listHeight", "listWidth", "contentLeft", "onScrollBottom", "chipView", "variant", "portal", "renderValue", "renderItem"];
+var _excluded = ["value", "onChange", "target", "items", "placement", "label", "labelPlacement", "placeholder", "helperText", "disabled", "view", "size", "listOverflow", "listHeight", "listWidth", "contentLeft", "onScrollBottom", "chipView", "variant", "portal", "renderValue", "renderItem"];
 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."); }
@@ -26,9 +26,7 @@ export var Context = /*#__PURE__*/createContext({});
  */
 export var selectRoot = function selectRoot(Root) {
   return /*#__PURE__*/forwardRef(function (props, ref) {
-    var _props$multiselect = props.multiselect,
-      multiselect = _props$multiselect === void 0 ? false : _props$multiselect,
-      outerValue = props.value,
+    var outerValue = props.value,
       outerOnChange = props.onChange,
       _props$target = props.target,
       target = _props$target === void 0 ? 'textfield-like' : _props$target,
@@ -40,8 +38,6 @@ export var selectRoot = function selectRoot(Root) {
       labelPlacement = _props$labelPlacement === void 0 ? 'outer' : _props$labelPlacement,
       placeholder = props.placeholder,
       helperText = props.helperText,
-      _props$isTargetAmount = props.isTargetAmount,
-      isTargetAmount = _props$isTargetAmount === void 0 ? false : _props$isTargetAmount,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
       view = props.view,
@@ -58,7 +54,7 @@ export var selectRoot = function selectRoot(Root) {
       renderValue = props.renderValue,
       renderItem = props.renderItem,
       rest = _objectWithoutProperties(props, _excluded);
-    var _useState = useState(outerValue || multiselect ? [] : ''),
+    var _useState = useState(outerValue || props.multiselect ? [] : ''),
       _useState2 = _slicedToArray(_useState, 2),
       internalValue = _useState2[0],
       setInternalValue = _useState2[1];
@@ -119,30 +115,32 @@ export var selectRoot = function selectRoot(Root) {
       }
     };
     var handleCheckboxChange = function handleCheckboxChange(item) {
-      var checkedCopy = new Map(checked);
-      if (!checkedCopy.get(item.value.toString())) {
-        checkedCopy.set(item.value.toString(), true);
-        updateDescendants(item, checkedCopy, true);
-      } else {
-        checkedCopy.set(item.value.toString(), false);
-        updateDescendants(item, checkedCopy, false);
-      }
-      updateAncestors(item, checkedCopy);
-      var newValues = [];
-      valueToItemMap.forEach(function (item, key) {
-        if (checkedCopy.get(key)) {
-          newValues.push(item.value.toString());
+      if (props.multiselect) {
+        var checkedCopy = new Map(checked);
+        if (!checkedCopy.get(item.value)) {
+          checkedCopy.set(item.value, true);
+          updateDescendants(item, checkedCopy, true);
+        } else {
+          checkedCopy.set(item.value, false);
+          updateDescendants(item, checkedCopy, false);
+        }
+        updateAncestors(item, checkedCopy);
+        var newValues = [];
+        valueToItemMap.forEach(function (item, key) {
+          if (checkedCopy.get(key)) {
+            newValues.push(item.value);
+          }
+        });
+        if (onChange) {
+          onChange(newValues);
         }
-      });
-      if (onChange) {
-        onChange(newValues);
       }
     };
     var handleItemClick = function handleItemClick(item, e) {
       if (!isEmpty(item === null || item === void 0 ? void 0 : item.items)) {
         return;
       }
-      if (multiselect) {
+      if (props.multiselect) {
         handleCheckboxChange(item);
       } else {
         if (e) {
@@ -168,7 +166,7 @@ export var selectRoot = function selectRoot(Root) {
     var handlePressDown = function handlePressDown(item, e) {
       if (isEmpty(item.items)) {
         handleItemClick(item, e);
-      } else if (multiselect) {
+      } else if (props.multiselect) {
         handleCheckboxChange(item);
       }
     };
@@ -180,6 +178,7 @@ export var selectRoot = function selectRoot(Root) {
       }
     };
     var _useKeyNavigation = useKeyNavigation({
+        value: value,
         focusedPath: focusedPath,
         dispatchFocusedPath: dispatchFocusedPath,
         path: path,
@@ -190,10 +189,9 @@ export var selectRoot = function selectRoot(Root) {
         handlePressDown: handlePressDown,
         focusedChipIndex: focusedChipIndex,
         dispatchFocusedChipIndex: dispatchFocusedChipIndex,
-        value: value,
         valueToItemMap: valueToItemMap,
-        multiselect: multiselect,
-        isTargetAmount: isTargetAmount
+        multiselect: props.multiselect,
+        isTargetAmount: props.isTargetAmount
       }),
       onKeyDown = _useKeyNavigation.onKeyDown;
     var isCurrentListOpen = Boolean(path[0]);
@@ -227,7 +225,7 @@ export var selectRoot = function selectRoot(Root) {
       value: {
         focusedPath: focusedPath,
         checked: checked,
-        multiselect: multiselect,
+        multiselect: props.multiselect,
         size: size,
         handleCheckboxChange: handleCheckboxChange,
         handleItemClick: handleItemClick,
@@ -244,10 +242,7 @@ export var selectRoot = function selectRoot(Root) {
       trigger: "click",
       target: /*#__PURE__*/React.createElement(Target, {
         opened: isCurrentListOpen,
-        target: target,
         value: value,
-        isTargetAmount: isTargetAmount,
-        multiselect: multiselect,
         valueToItemMap: valueToItemMap,
         focusedPath: focusedPath,
         focusedToValueMap: focusedToValueMap,
@@ -257,6 +252,7 @@ export var selectRoot = function selectRoot(Root) {
         onKeyDown: onKeyDown,
         focusedChipIndex: focusedChipIndex,
         labelPlacement: labelPlacement,
+        selectProps: props,
         size: size,
         contentLeft: contentLeft,
         disabled: disabled,

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

@@ -10,7 +10,7 @@ export var StyledPopover = /*#__PURE__*/styled(Popover).withConfig({
 })([".", ",.", "{width:100%;}"], /*#__PURE__*/String(popoverClasses.root), /*#__PURE__*/String(popoverClasses.target));
 export var Ul = /*#__PURE__*/styled.ul.withConfig({
   componentId: "plasma-new-hope__sc-le54jv-1"
-})(["box-sizing:border-box;background:var(", ");box-shadow:var(", ");border-radius:var(", ");width:", ";height:", ";overflow:", ";margin:", ";padding:var(", ");"], constants.background, constants.boxShadow, tokens.borderRadius, function (_ref) {
+})(["box-sizing:border-box;background:var(", ");box-shadow:", ";border-radius:var(", ");width:", ";height:", ";overflow:", ";margin:", ";padding:var(", ");"], constants.background, constants.boxShadow, tokens.borderRadius, function (_ref) {
   var listWidth = _ref.listWidth;
   return listWidth || '100%';
 }, function (_ref2) {

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

@@ -79,7 +79,7 @@ export var constants = {
   focusColor: '--surface-accent',
   focusSize: '0.0625rem',
   background: '--surface-solid-card',
-  boxShadow: '--shadow-down-soft-s',
+  boxShadow: '0px 4px 14px -4px rgba(8, 8, 8, 0.08), 0px 1px 4px -1px rgba(0, 0, 0, 0.04)',
   disclosureIconColor: '--text-secondary',
   disclosureIconColorHover: '--text-secondary-hover',
   itemBackground: '--plasma-colors-transparent',

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

@@ -2,9 +2,6 @@ import React from 'react';
 import { Button, Textfield } from './ui';
 export var Target = function Target(_ref) {
   var value = _ref.value,
-    multiselect = _ref.multiselect,
-    isTargetAmount = _ref.isTargetAmount,
-    target = _ref.target,
     opened = _ref.opened,
     valueToItemMap = _ref.valueToItemMap,
     onChipClick = _ref.onChipClick,
@@ -18,12 +15,11 @@ export var Target = function Target(_ref) {
     disabled = _ref.disabled,
     renderValue = _ref.renderValue,
     focusedPath = _ref.focusedPath,
-    focusedToValueMap = _ref.focusedToValueMap;
-  return target === 'button-like' ? /*#__PURE__*/React.createElement(Button, {
+    focusedToValueMap = _ref.focusedToValueMap,
+    selectProps = _ref.selectProps;
+  return selectProps.target === 'button-like' ? /*#__PURE__*/React.createElement(Button, {
     opened: opened,
     value: value,
-    isTargetAmount: isTargetAmount,
-    multiselect: multiselect,
     valueToItemMap: valueToItemMap,
     onKeyDown: onKeyDown,
     label: label,
@@ -31,12 +27,11 @@ export var Target = function Target(_ref) {
     disabled: disabled,
     renderValue: renderValue,
     focusedPath: focusedPath,
-    focusedToValueMap: focusedToValueMap
+    focusedToValueMap: focusedToValueMap,
+    selectProps: selectProps
   }) : /*#__PURE__*/React.createElement(Textfield, {
     opened: opened,
     value: value,
-    isTargetAmount: isTargetAmount,
-    multiselect: multiselect,
     valueToItemMap: valueToItemMap,
     onChipClick: onChipClick,
     label: label,
@@ -49,6 +44,7 @@ export var Target = function Target(_ref) {
     disabled: disabled,
     renderValue: renderValue,
     focusedPath: focusedPath,
-    focusedToValueMap: focusedToValueMap
+    focusedToValueMap: focusedToValueMap,
+    selectProps: selectProps
   });
 };

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

@@ -6,8 +6,6 @@ import { StyledButton, StyledArrow, Label, ButtonWrapper, IconArrowWrapper } fro
 export var Button = function Button(_ref) {
   var opened = _ref.opened,
     value = _ref.value,
-    isTargetAmount = _ref.isTargetAmount,
-    multiselect = _ref.multiselect,
     valueToItemMap = _ref.valueToItemMap,
     onKeyDown = _ref.onKeyDown,
     label = _ref.label,
@@ -15,7 +13,8 @@ export var Button = function Button(_ref) {
     disabled = _ref.disabled,
     renderValue = _ref.renderValue,
     focusedPath = _ref.focusedPath,
-    focusedToValueMap = _ref.focusedToValueMap;
+    focusedToValueMap = _ref.focusedToValueMap,
+    selectProps = _ref.selectProps;
   var withArrowInverse = opened ? classes.arrowInverse : undefined;
   var getActiveDescendant = function getActiveDescendant() {
     var _focusedToValueMap$ge;
@@ -38,13 +37,13 @@ export var Button = function Button(_ref) {
     "aria-controls": "tree_level_1",
     "aria-expanded": opened,
     "aria-activedescendant": getActiveDescendant(),
-    "aria-label": label
-  }, /*#__PURE__*/React.createElement(Label, null, getButtonLabel({
+    "aria-label": label,
+    renderTarget: Boolean(selectProps.renderTarget)
+  }, selectProps.renderTarget ? selectProps.renderTarget(value) : /*#__PURE__*/React.createElement(Label, null, getButtonLabel({
     value: value,
-    isTargetAmount: isTargetAmount,
-    multiselect: multiselect,
     valueToItemMap: valueToItemMap,
     label: label,
-    renderValue: renderValue
+    renderValue: renderValue,
+    selectProps: selectProps
   }))));
 };

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

@@ -8,7 +8,10 @@ var mergedButtonConfig = /*#__PURE__*/mergeConfig(buttonConfig);
 var Button = /*#__PURE__*/component(mergedButtonConfig);
 export var StyledButton = /*#__PURE__*/styled(Button).withConfig({
   componentId: "plasma-new-hope__sc-38cqi1-0"
-})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":100%;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":600;", ":var(", ");", ":var(", ");", ":", ";", ":var(", ");"], buttonTokens.buttonColor, tokens.targetButtonColor, buttonTokens.buttonColorHover, tokens.targetButtonColorHover, buttonTokens.buttonColorActive, tokens.targetButtonColorActive, buttonTokens.buttonBackgroundColor, tokens.targetButtonBackgroundColor, buttonTokens.buttonBackgroundColorHover, tokens.targetButtonBackgroundColorHover, buttonTokens.buttonBackgroundColorActive, tokens.targetButtonBackgroundColorActive, buttonTokens.buttonRightContentMargin, tokens.targetButtonArrowMargin, buttonTokens.buttonHeight, tokens.targetHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, tokens.targetButtonPadding, buttonTokens.buttonRadius, tokens.borderRadius, buttonTokens.buttonFontFamily, tokens.fontFamily, buttonTokens.buttonFontSize, tokens.fontSize, buttonTokens.buttonFontStyle, tokens.fontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, tokens.fontLetterSpacing, buttonTokens.buttonLineHeight, tokens.fontLineHeight, buttonTokens.buttonDisabledOpacity, constants.opacity, buttonTokens.buttonFocusColor, constants.focusColor);
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":", ";", ":100%;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":600;", ":var(", ");", ":var(", ");", ":", ";", ":var(", ");text-align:left;"], buttonTokens.buttonColor, tokens.targetButtonColor, buttonTokens.buttonColorHover, tokens.targetButtonColorHover, buttonTokens.buttonColorActive, tokens.targetButtonColorActive, buttonTokens.buttonBackgroundColor, tokens.targetButtonBackgroundColor, buttonTokens.buttonBackgroundColorHover, tokens.targetButtonBackgroundColorHover, buttonTokens.buttonBackgroundColorActive, tokens.targetButtonBackgroundColorActive, buttonTokens.buttonRightContentMargin, tokens.targetButtonArrowMargin, buttonTokens.buttonHeight, function (_ref) {
+  var renderTarget = _ref.renderTarget;
+  return renderTarget ? 'auto' : "var(".concat(tokens.targetHeight, ")");
+}, buttonTokens.buttonWidth, buttonTokens.buttonPadding, tokens.targetButtonPadding, buttonTokens.buttonRadius, tokens.borderRadius, buttonTokens.buttonFontFamily, tokens.fontFamily, buttonTokens.buttonFontSize, tokens.fontSize, buttonTokens.buttonFontStyle, tokens.fontStyle, buttonTokens.buttonFontWeight, buttonTokens.buttonLetterSpacing, tokens.fontLetterSpacing, buttonTokens.buttonLineHeight, tokens.fontLineHeight, buttonTokens.buttonDisabledOpacity, constants.opacity, buttonTokens.buttonFocusColor, constants.focusColor);
 export var IconArrowWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-38cqi1-1"
 })(["line-height:0;color:var(", ");&:hover{color:var(", ");}&:active{color:var(", ");}"], tokens.targetButtonArrowColor, tokens.targetButtonArrowColorHover, tokens.targetButtonArrowColorActive);
@@ -17,7 +20,7 @@ export var StyledArrow = /*#__PURE__*/styled(IconDisclosureDownCentered).withCon
 })(["transition:color 0.3s ease-in,transform 0.15s ease-in;pointer-events:none;user-select:none;"]);
 export var ButtonWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-38cqi1-3"
-})(["display:inline;.", "::before{box-shadow:none !important;}"], classes.selectWithoutBoxShadow);
+})(["display:inline;.", "::before{box-shadow:none !important;}.", "{transform:rotate(-180deg);}"], classes.selectWithoutBoxShadow, classes.arrowInverse);
 export var Label = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-38cqi1-4"
-})(["display:inline;width:100%;text-align:left;", " .", "{transform:rotate(-180deg);}"], /*#__PURE__*/applyEllipsis(), classes.arrowInverse);
+})(["display:inline;width:100%;text-align:left;", ""], /*#__PURE__*/applyEllipsis());

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

@@ -49,8 +49,6 @@ var getLabel = function getLabel(_ref) {
 export var Textfield = function Textfield(_ref2) {
   var opened = _ref2.opened,
     value = _ref2.value,
-    isTargetAmount = _ref2.isTargetAmount,
-    multiselect = _ref2.multiselect,
     valueToItemMap = _ref2.valueToItemMap,
     onChipClick = _ref2.onChipClick,
     label = _ref2.label,
@@ -63,7 +61,8 @@ export var Textfield = function Textfield(_ref2) {
     disabled = _ref2.disabled,
     renderValue = _ref2.renderValue,
     focusedPath = _ref2.focusedPath,
-    focusedToValueMap = _ref2.focusedToValueMap;
+    focusedToValueMap = _ref2.focusedToValueMap,
+    selectProps = _ref2.selectProps;
   var withArrowInverse = opened ? classes.arrowInverse : undefined;
   var getActiveDescendant = function getActiveDescendant() {
     var _focusedToValueMap$ge;
@@ -84,19 +83,20 @@ export var Textfield = function Textfield(_ref2) {
     "aria-controls": "tree_level_1",
     "aria-expanded": opened,
     "aria-activedescendant": getActiveDescendant(),
-    "aria-label": label
-  }, /*#__PURE__*/React.createElement(Wrapper, null, contentLeft && (!multiselect || isEmpty(value)) && /*#__PURE__*/React.createElement(ContentLeftWrapper, null, contentLeft), /*#__PURE__*/React.createElement(ChipWrapper, null, getLabel({
+    "aria-label": label,
+    renderTarget: Boolean(selectProps.renderTarget)
+  }, /*#__PURE__*/React.createElement(Wrapper, null, selectProps !== null && selectProps !== void 0 && selectProps.renderTarget ? selectProps.renderTarget(value) : /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && (!selectProps.multiselect || isEmpty(value)) && /*#__PURE__*/React.createElement(ContentLeftWrapper, null, contentLeft), /*#__PURE__*/React.createElement(ChipWrapper, null, getLabel({
     value: value,
-    isTargetAmount: isTargetAmount,
     valueToItemMap: valueToItemMap,
     onChipClick: onChipClick,
-    label: label,
-    placeholder: placeholder,
     focusedChipIndex: focusedChipIndex,
+    label: label,
     labelPlacement: labelPlacement,
-    size: size,
-    renderValue: renderValue
-  })), /*#__PURE__*/React.createElement(IconArrowWrapper, null, /*#__PURE__*/React.createElement(StyledArrow, {
+    placeholder: placeholder,
+    isTargetAmount: selectProps.isTargetAmount,
+    renderValue: renderValue,
+    size: size
+  }))), /*#__PURE__*/React.createElement(IconArrowWrapper, null, /*#__PURE__*/React.createElement(StyledArrow, {
     size: sizeToIconSize(size),
     color: "inherit",
     className: cx(classes.selectTargetArrow, withArrowInverse)

package/styled-components/es/components/Select/ui/Target/ui/Textfield/Textfield.styles.js

@@ -18,7 +18,10 @@ export var TextfieldWrapper = /*#__PURE__*/styled.div.withConfig({
 }, classes.selectWithoutBoxShadow);
 export var StyledButton = /*#__PURE__*/styled(Button).withConfig({
   componentId: "plasma-new-hope__sc-1akl2tk-1"
-})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":100%;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":", ";", ":var(", ");box-shadow:inset 0 0 0 ", " var(", ");", ""], buttonTokens.buttonColor, constants.textfieldTargetColor, buttonTokens.buttonColorHover, constants.textfieldTargetColor, buttonTokens.buttonColorActive, constants.textfieldTargetColor, buttonTokens.buttonHeight, tokens.targetHeight, buttonTokens.buttonWidth, buttonTokens.buttonPadding, tokens.targetTextfieldPadding, buttonTokens.buttonRadius, tokens.borderRadius, buttonTokens.buttonFontFamily, tokens.fontFamily, buttonTokens.buttonFontSize, tokens.fontSize, buttonTokens.buttonFontStyle, tokens.fontStyle, buttonTokens.buttonFontWeight, tokens.fontWeight, buttonTokens.buttonLetterSpacing, tokens.fontLetterSpacing, buttonTokens.buttonLineHeight, tokens.fontLineHeight, buttonTokens.buttonDisabledOpacity, constants.opacity, buttonTokens.buttonFocusColor, constants.focusColor, constants.textfieldBorderSize, tokens.targetTextfieldBorderColor, /*#__PURE__*/addFocus({
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":", ";", ":100%;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":", ";", ":var(", ");box-shadow:inset 0 0 0 ", " var(", ");text-align:left;", ""], buttonTokens.buttonColor, constants.textfieldTargetColor, buttonTokens.buttonColorHover, constants.textfieldTargetColor, buttonTokens.buttonColorActive, constants.textfieldTargetColor, buttonTokens.buttonHeight, function (_ref3) {
+  var renderTarget = _ref3.renderTarget;
+  return renderTarget ? 'auto' : "var(".concat(tokens.targetHeight, ")");
+}, buttonTokens.buttonWidth, buttonTokens.buttonPadding, tokens.targetTextfieldPadding, buttonTokens.buttonRadius, tokens.borderRadius, buttonTokens.buttonFontFamily, tokens.fontFamily, buttonTokens.buttonFontSize, tokens.fontSize, buttonTokens.buttonFontStyle, tokens.fontStyle, buttonTokens.buttonFontWeight, tokens.fontWeight, buttonTokens.buttonLetterSpacing, tokens.fontLetterSpacing, buttonTokens.buttonLineHeight, tokens.fontLineHeight, buttonTokens.buttonDisabledOpacity, constants.opacity, buttonTokens.buttonFocusColor, constants.focusColor, constants.textfieldBorderSize, tokens.targetTextfieldBorderColor, /*#__PURE__*/addFocus({
   outlineOffset: constants.textfieldBorderSize,
   outlineSize: constants.focusSize,
   outlineRadius: /*#__PURE__*/"calc(var(".concat(tokens.borderRadius, ") - ").concat(constants.textfieldBorderSize, ")"),

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

@@ -1,31 +1,30 @@
 import { isEmpty } from '../../../utils';
 var getLabel = function getLabel(_ref) {
-  var renderValue = _ref.renderValue,
-    value = _ref.value,
-    valueToItemMap = _ref.valueToItemMap;
+  var value = _ref.value,
+    valueToItemMap = _ref.valueToItemMap,
+    renderValue = _ref.renderValue;
   var _ref2 = valueToItemMap.get(value === null || value === void 0 ? void 0 : 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;
+    label = _ref3.label,
+    renderValue = _ref3.renderValue,
+    selectProps = _ref3.selectProps;
   if (isEmpty(value)) {
-    return label;
+    return label || '';
   }
-  if (multiselect && isTargetAmount) {
+  if (selectProps.multiselect && selectProps.isTargetAmount) {
     return "\u0412\u044B\u0431\u0440\u0430\u043D\u043E: ".concat(value.length);
   }
-  if (multiselect && Array.isArray(value)) {
-    return value.map(function (itemValue) {
+  if (selectProps.multiselect && Array.isArray(value)) {
+    return value === null || value === void 0 ? void 0 : value.map(function (itemValue) {
       return getLabel({
-        renderValue: renderValue,
         value: itemValue,
-        valueToItemMap: valueToItemMap
+        valueToItemMap: valueToItemMap,
+        renderValue: renderValue
       });
     }).join(', ');
   }

package/styled-components/es/components/Tabs/tokens.js

@@ -9,9 +9,7 @@ export var classes = {
   tabRightContent: 'tab-item-right-content',
   tabLeftContent: 'tab-item-left-content',
   tabsHasLeftArrow: 'tabs-has-left-arrow',
-  tabsHasRightArrow: 'tabs-has-right-arrow',
-  tabsClipScroll: 'tabs-clip-scroll',
-  tabsClipShowAll: 'tabs-clip-show-all'
+  tabsHasRightArrow: 'tabs-has-right-arrow'
 };
 export var tokens = {
   disabledOpacity: '--plasma-tabs-disabled-opacity',
@@ -28,7 +26,7 @@ export var tokens = {
   outlineFocusColor: '--plasma-tabs-outline-focus-color',
   arrowColor: '--plasma-tabs-arrow-color',
   tabsFilledBackgroundColor: '--plasma-tabs-filled-background-color',
-  tabsBackgroundColor: '--plasma-tabs-background-color',
+  tabsBackgroundColor: '--plasma-tabs-backgorund-color',
   tabsBorderRadius: '--plasma-tabs-border-radius',
   tabsWidth: '--plasma-tabs-width',
   tabsHeight: '--plasma-tabs-height',
@@ -52,7 +50,6 @@ export var tokens = {
   itemColor: '--plasma-tab-item-color',
   itemBackgroundColor: '--plasma-tab-item-background-color',
   itemColorHover: '--plasma-tab-item-color-hover',
-  itemColorActive: '--plasma-tab-item-color-active',
   itemBackgroundColorHover: '--plasma-tab-item-background-color-hover',
   itemSelectedColor: '--plasma-tab-item-selected-color',
   itemSelectedBackgroundColor: '--plasma-tab-item-selected-background-color',

package/styled-components/es/components/Tabs/ui/TabItem/TabItem.js

@@ -1,4 +1,4 @@
-var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className", "onClick"];
+var _excluded = ["size", "view", "isActive", "selected", "disabled", "pilled", "children", "contentLeft", "contentRight", "animated", "onIndexChange", "itemIndex", "tabIndex", "className"];
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -31,7 +31,6 @@ export var tabItemRoot = function tabItemRoot(Root) {
       itemIndex = props.itemIndex,
       tabIndex = props.tabIndex,
       className = props.className,
-      onClick = props.onClick,
       rest = _objectWithoutProperties(props, _excluded);
     var innerRef = useRef(null);
     var ref = useForkRef(outerRef, innerRef);
@@ -73,10 +72,6 @@ export var tabItemRoot = function tabItemRoot(Root) {
       onIndexChange === null || onIndexChange === void 0 || onIndexChange(focusIndex);
       refs.setCurrent(focusIndex);
     }, [refs, innerRef, onIndexChange, disabled]);
-    var handleClick = useCallback(function (event) {
-      event.currentTarget.scrollIntoView();
-      onClick && onClick(event);
-    }, [onClick]);
     return /*#__PURE__*/React.createElement(Root, _extends({
       ref: ref,
       disabled: disabled,
@@ -86,8 +81,7 @@ export var tabItemRoot = function tabItemRoot(Root) {
       size: size,
       onFocus: onItemFocus,
       tabIndex: hasKeyNavigation ? navigationTabIndex : tabIndex,
-      className: cx(pilledClass, selectedClass, animatedClass, className),
-      onClick: handleClick
+      className: cx(pilledClass, selectedClass, animatedClass, className)
     }, rest), /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && /*#__PURE__*/React.createElement(LeftContent, {
       className: classes.tabLeftContent
     }, contentLeft), /*#__PURE__*/React.createElement(StyledContent, {

package/styled-components/es/components/Tabs/ui/TabItem/variations/_view/base.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../../../tokens';
 import { RightContent } from '../../TabItem.styles';
-export var base = /*#__PURE__*/css(["color:var(", ");background-color:var(", ");margin-left:var(", ",var(", "));&:hover{color:var(", ");background-color:var(", ");", "{color:var(", ");}}&:active{color:var(", ");}&.", "{transition:var(", ");}&.", "{color:var(", ");background-color:var(", ");&:hover{color:var(", ");background-color:var(", ");&::after{background:var(", ");}}", "{color:var(", ");&:hover{color:var(", ");}}&::after{content:'';position:absolute;bottom:0px;left:0;right:0;background:var(", ");height:var(", ");border-radius:1px;}}"], tokens.itemColor, tokens.itemBackgroundColor, tokens.itemMarginLeftFilled, tokens.itemMarginLeft, tokens.itemColorHover, tokens.itemBackgroundColorHover, RightContent, tokens.additionalContentHoverColor, tokens.itemColorActive, /*#__PURE__*/String(classes.tabItemAnimated), tokens.itemBackgroundTransition, /*#__PURE__*/String(classes.selectedTabsItem), tokens.itemSelectedColor, tokens.itemSelectedBackgroundColor, tokens.itemSelectedColorHover, tokens.itemSelectedBackgroundColorHover, tokens.itemSelectedDividerColorHover, RightContent, tokens.additionalContentSelectedColor, tokens.additionalContentSelectedHoverColor, tokens.itemSelectedDividerColor, tokens.itemSelectedDividerHeight);
+export var base = /*#__PURE__*/css(["color:var(", ");background-color:var(", ");margin-left:var(", ",var(", "));&:hover{color:var(", ");background-color:var(", ");", "{color:var(", ");}}&.", "{transition:var(", ");}&.", "{color:var(", ");background-color:var(", ");&:hover{color:var(", ");background-color:var(", ");&::after{background:var(", ");}}", "{color:var(", ");&:hover{color:var(", ");}}&::after{content:'';position:absolute;bottom:0px;left:0;right:0;background:var(", ");height:var(", ");border-radius:1px;}}"], tokens.itemColor, tokens.itemBackgroundColor, tokens.itemMarginLeftFilled, tokens.itemMarginLeft, tokens.itemColorHover, tokens.itemBackgroundColorHover, RightContent, tokens.additionalContentHoverColor, /*#__PURE__*/String(classes.tabItemAnimated), tokens.itemBackgroundTransition, /*#__PURE__*/String(classes.selectedTabsItem), tokens.itemSelectedColor, tokens.itemSelectedBackgroundColor, tokens.itemSelectedColorHover, tokens.itemSelectedBackgroundColorHover, tokens.itemSelectedDividerColorHover, RightContent, tokens.additionalContentSelectedColor, tokens.additionalContentSelectedHoverColor, tokens.itemSelectedDividerColor, tokens.itemSelectedDividerHeight);

package/styled-components/es/components/Tabs/ui/Tabs/Tabs.js

@@ -1,4 +1,4 @@
-var _excluded = ["id", "stretch", "disabled", "clip", "size", "view", "children", "pilled", "index", "className"];
+var _excluded = ["id", "stretch", "disabled", "size", "view", "children", "pilled", "index", "className"];
 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."); }
@@ -9,7 +9,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import React, { forwardRef, useCallback, useMemo, useState, useEffect, useRef } from 'react';
-import { safeUseId } from '@salutejs/plasma-core';
+import { animatedScrollToX, safeUseId } from '@salutejs/plasma-core';
 import { IconDisclosureLeft, IconDisclosureRight } from '../../../_Icon';
 import { classes, tokens } from '../../tokens';
 import { cx } from '../../../../utils';
@@ -34,13 +34,10 @@ export var tabsRoot = function tabsRoot(Root) {
       stretch = _props$stretch === void 0 ? false : _props$stretch,
       _props$disabled = props.disabled,
       disabled = _props$disabled === void 0 ? false : _props$disabled,
-      _props$clip = props.clip,
-      clip = _props$clip === void 0 ? 'scroll' : _props$clip,
       size = props.size,
       view = props.view,
       children = props.children,
-      _props$pilled = props.pilled,
-      pilled = _props$pilled === void 0 ? false : _props$pilled,
+      pilled = props.pilled,
       index = props.index,
       className = props.className,
       rest = _objectWithoutProperties(props, _excluded);
@@ -63,41 +60,14 @@ export var tabsRoot = function tabsRoot(Root) {
     var stretchClass = firstItemVisible && lastItemVisible && stretch ? classes.tabsStretch : undefined;
     var hasLeftArrowClass = !firstItemVisible ? classes.tabsHasLeftArrow : undefined;
     var hasRightArrowClass = !lastItemVisible ? classes.tabsHasRightArrow : undefined;
-    var clipScrollClass = clip === 'scroll' ? classes.tabsClipScroll : undefined;
-    var clipShowAllClass = clip === 'showAll' ? classes.tabsClipShowAll : undefined;
     var scrollRef = useRef(null);
     var trackRef = useRef(null);
-    var leftArrowRef = useRef(null);
     var onPrev = useCallback(function () {
-      var _firstOverflowingTab$;
-      if (disabled || !scrollRef.current) {
-        return;
-      }
-      var scrollLeft = Math.round(scrollRef.current.scrollLeft);
-      var firstOverflowingTab = refs.items.slice().reverse().find(function (item) {
-        if (!item.current || item.current.offsetLeft === undefined) {
-          return;
-        }
-        var tabStartX = item.current.offsetLeft;
-        return tabStartX < scrollLeft;
-      });
-      firstOverflowingTab === null || firstOverflowingTab === void 0 || (_firstOverflowingTab$ = firstOverflowingTab.current) === null || _firstOverflowingTab$ === void 0 || _firstOverflowingTab$.scrollIntoView();
-    }, [disabled, scrollRef, refs]);
+      !disabled && scrollRef.current && animatedScrollToX(scrollRef.current, scrollRef.current.scrollLeft - scrollRef.current.offsetWidth / 2);
+    }, [disabled, scrollRef]);
     var onNext = useCallback(function () {
-      var _lastOverflowingTab$c;
-      if (disabled || !scrollRef.current) {
-        return;
-      }
-      var scrollRight = Math.round(scrollRef.current.scrollLeft + scrollRef.current.clientWidth);
-      var lastOverflowingTab = refs.items.find(function (item) {
-        if (!item.current || item.current.offsetLeft === undefined) {
-          return;
-        }
-        var tabEndX = item.current.offsetLeft + item.current.offsetWidth;
-        return tabEndX > scrollRight;
-      });
-      lastOverflowingTab === null || lastOverflowingTab === void 0 || (_lastOverflowingTab$c = lastOverflowingTab.current) === null || _lastOverflowingTab$c === void 0 || _lastOverflowingTab$c.scrollIntoView();
-    }, [disabled, scrollRef, refs]);
+      !disabled && scrollRef.current && animatedScrollToX(scrollRef.current, scrollRef.current.scrollLeft + scrollRef.current.offsetWidth / 2);
+    }, [disabled, scrollRef]);
     var PreviousButton = useMemo(function () {
       return /*#__PURE__*/React.createElement(StyledArrow, {
         type: "button",
@@ -106,7 +76,6 @@ export var tabsRoot = function tabsRoot(Root) {
         tabIndex: disabled ? -1 : 0,
         disabled: disabled,
         isFilled: isFilled,
-        ref: leftArrowRef,
         isLeftArrow: true
       }, /*#__PURE__*/React.createElement(IconDisclosureLeft, {
         color: "var(".concat(tokens.arrowColor, ")")
@@ -127,9 +96,8 @@ export var tabsRoot = function tabsRoot(Root) {
     var handleScroll = useCallback(function (event) {
       event.stopPropagation();
       var maxScrollLeft = event.currentTarget.scrollWidth - event.currentTarget.clientWidth;
-      var scrollLeft = Math.round(event.currentTarget.scrollLeft);
-      setFirstItemVisible(scrollLeft <= 0);
-      setLastItemVisible(scrollLeft >= maxScrollLeft);
+      setFirstItemVisible(event.currentTarget.scrollLeft <= 0);
+      setLastItemVisible(event.currentTarget.scrollLeft >= maxScrollLeft);
     }, [setFirstItemVisible, setLastItemVisible]);
     var onKeyDown = useCallback(function (event) {
       if (index === undefined) {
@@ -169,16 +137,6 @@ export var tabsRoot = function tabsRoot(Root) {
       var _scrollRef$current, _scrollRef$current2;
       setLastItemVisible(((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollWidth) === ((_scrollRef$current2 = scrollRef.current) === null || _scrollRef$current2 === void 0 ? void 0 : _scrollRef$current2.clientWidth));
     }, []);
-
-    // Этот хук компенсирует появление левой стрелки при прокрутке
-    useEffect(function () {
-      if (firstItemVisible || !scrollRef.current || !leftArrowRef.current) {
-        return;
-      }
-      scrollRef.current.scrollTo({
-        left: Math.round(scrollRef.current.scrollLeft + leftArrowRef.current.clientWidth)
-      });
-    }, [firstItemVisible, scrollRef, leftArrowRef]);
     return /*#__PURE__*/React.createElement(TabsContext.Provider, {
       value: refs
     }, /*#__PURE__*/React.createElement(Root, _extends({
@@ -192,7 +150,6 @@ export var tabsRoot = function tabsRoot(Root) {
       className: cx(pilledClass, stretchClass, hasLeftArrowClass, hasRightArrowClass, className),
       onKeyDown: onKeyDown
     }, rest), !firstItemVisible && PreviousButton, /*#__PURE__*/React.createElement(StyledContentWrapper, {
-      className: cx(clipScrollClass, clipShowAllClass),
       ref: scrollRef,
       onScroll: handleScroll
     }, /*#__PURE__*/React.createElement(StyledContent, {

package/styled-components/es/components/Tabs/ui/Tabs/Tabs.styles.js

@@ -3,14 +3,14 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 import { css } from 'styled-components';
 import styled from 'styled-components';
 import { addFocus } from '../../../../mixins';
-import { classes, tokens } from '../../tokens';
-export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    display: flex;\n    gap: 0.125rem;\n    align-items: center;\n    position: relative;\n"])));
+import { tokens } from '../../tokens';
+export var base = /*#__PURE__*/css(_templateObject || (_templateObject = /*#__PURE__*/_taggedTemplateLiteral(["\n    display: flex;\n    align-items: center;\n    position: relative;\n"])));
 export var StyledContent = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1ibkmsl-0"
 })(["display:inline-flex;flex-direction:row;align-items:center;"]);
 export var StyledContentWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-1ibkmsl-1"
-})(["margin:-0.125rem;padding:0.25rem;box-sizing:content-box;position:relative;height:100%;width:100%;display:flex;align-items:center;&.", "{overflow:scroll;scroll-padding:0.25rem;overscroll-behavior:contain;scrollbar-width:none;::-webkit-scrollbar{display:none;}}&.", "{overflow:visible;}"], classes.tabsClipScroll, classes.tabsClipShowAll);
+})(["margin:-0.125rem;padding:0.25rem;box-sizing:content-box;overflow:scroll;position:relative;height:100%;width:100%;display:flex;align-items:center;scrollbar-width:none;::-webkit-scrollbar{display:none;}overscroll-behavior:contain;"]);
 export var StyledArrow = /*#__PURE__*/styled.button.withConfig({
   componentId: "plasma-new-hope__sc-1ibkmsl-2"
 })(["display:flex;cursor:pointer;border:none;background-color:transparent;padding:0;outline:none;", ";&[disabled]{cursor:not-allowed;}--plasma_private-outer-padding:", ";padding-right:", ";padding-left:", ";"], /*#__PURE__*/addFocus({

package/styled-components/es/components/Tabs/ui/Tabs/variations/_stretch/base.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { classes } from '../../../../tokens';
 import { StyledContent, StyledContentWrapper } from '../../Tabs.styles';
-export var base = /*#__PURE__*/css(["&.", "{width:100%;", ",", ",", " > button{width:100%;margin-left:0;}}"], classes.tabsStretch, StyledContentWrapper, StyledContent, StyledContent);
+export var base = /*#__PURE__*/css(["&.", "{width:100%;", ",", ",", " > button{width:100%;}}"], classes.tabsStretch, StyledContentWrapper, StyledContent, StyledContent);

package/styled-components/es/components/Tabs/ui/Tabs/variations/_view/tokens.json

@@ -1 +1 @@
-["--plasma-tabs-background-color", "--plasma-tabs-divider-height", "--plasma-tabs-divider-color"]
+["--plasma-tabs-backgorund-color", "--plasma-tabs-divider-height", "--plasma-tabs-divider-color"]