@salutejs/plasma-new-hope 0.188.0-canary.1550.11777193712.0 → 0.188.0-canary.1552.11776095169.0

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

@@ -1,12 +1,11 @@
 var _StyledIndicator;
-import React, { useRef, useContext } from 'react';
-import { sizeToIconSize, getItemId } from '../../../../utils';
+import React, { useEffect, useRef, useContext } from 'react';
+import { sizeToIconSize } from '../../../../utils';
 import { classes } from '../../../../Select.tokens';
 import { cx, isEmpty } from '../../../../../../utils';
 import { IconDisclosureRightCentered, IconDone } from '../../../../../_Icon';
 import { Context } from '../../../../Select';
-import { useDidMountEffect } from '../../../../../../hooks';
-import { StyledWrapper, StyledCell, StyledCheckbox, StyledIndicator, DisclosureIconWrapper, IconWrapper, StyledText, Wrapper, StyledCheckboxWrapper } from './Item.styles';
+import { StyledContentLeft, StyledContentRight, StyledText, Wrapper, DisclosureIconWrapper, StyledCheckbox, IconWrapper, StyledIndicator, StyledCheckboxWrapper } from './Item.styles';
 export var Item = function Item(_ref) {
   var item = _ref.item,
     path = _ref.path,
@@ -20,6 +19,7 @@ export var Item = function Item(_ref) {
     label = item.label,
     disabled = item.disabled,
     isDisabled = item.isDisabled,
+    color = item.color,
     contentLeft = item.contentLeft,
     contentRight = item.contentRight;
   var ref = useRef(null);
@@ -32,13 +32,12 @@ export var Item = function Item(_ref) {
     handleItemClick = _useContext.handleItemClick,
     variant = _useContext.variant,
     renderItem = _useContext.renderItem,
-    valueToItemMap = _useContext.valueToItemMap,
-    treeId = _useContext.treeId;
+    valueToItemMap = _useContext.valueToItemMap;
   var itemDisabled = Boolean(disabled || isDisabled);
-  var disabledClassName = itemDisabled ? classes.dropdownItemIsDisabled : undefined;
+  var isDisabledClassName = itemDisabled ? 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;
-  useDidMountEffect(function () {
+  useEffect(function () {
     if (focusedClass && ref !== null && ref !== void 0 && ref.current) {
       ref.current.scrollIntoView({
         behavior: 'smooth',
@@ -60,17 +59,16 @@ export var Item = function Item(_ref) {
     handleItemClick(item, e);
   };
   return /*#__PURE__*/React.createElement(Wrapper, {
-    className: cx(disabledClassName, focusedClass, activeClass),
-    id: getItemId(treeId, value.toString()),
+    className: cx(isDisabledClassName, focusedClass, activeClass),
+    id: value.toString(),
     ref: ref,
     onClick: handleClick,
     variant: variant,
-    role: "treeitem",
     "aria-controls": ariaControls,
     "aria-expanded": ariaExpanded,
     "aria-level": ariaLevel,
     "aria-label": ariaLabel,
-    "aria-selected": Boolean(checked.get(item.value))
+    role: "treeitem"
   }, /*#__PURE__*/React.createElement(IconWrapper, {
     variant: variant
   }, multiselect && /*#__PURE__*/React.createElement(StyledCheckboxWrapper, {
@@ -80,18 +78,17 @@ export var Item = function Item(_ref) {
   }, /*#__PURE__*/React.createElement(StyledCheckbox, {
     checked: Boolean(checked.get(item.value)),
     indeterminate: checked.get(item.value) === 'indeterminate',
-    onChange: handleChange
+    onChange: handleChange,
+    className: classes.selectItemCheckbox
   })), !multiselect && checked.get(item.value) === 'dot' && (_StyledIndicator || (_StyledIndicator = /*#__PURE__*/React.createElement(StyledIndicator, {
     size: "s",
     view: "default"
   }))), !multiselect && checked.get(item.value) === 'done' && /*#__PURE__*/React.createElement(IconDone, {
     size: sizeToIconSize(size, variant),
     color: "inherit"
-  })), renderItem ? /*#__PURE__*/React.createElement(StyledText, null, renderItem(valueToItemMap.get(value))) : /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(StyledCell, {
-    contentLeft: contentLeft,
-    contentRight: contentRight,
-    title: /*#__PURE__*/React.createElement("span", null, label)
-  })), !isEmpty(item.items) && /*#__PURE__*/React.createElement(DisclosureIconWrapper, null, /*#__PURE__*/React.createElement(IconDisclosureRightCentered, {
+  })), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(StyledText, {
+    color: color
+  }, renderItem && renderItem(valueToItemMap.get(value)) || label), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight), !isEmpty(item.items) && /*#__PURE__*/React.createElement(DisclosureIconWrapper, null, /*#__PURE__*/React.createElement(IconDisclosureRightCentered, {
     size: sizeToIconSize(size, variant),
     color: "inherit"
   })));

package/styled-components/es/components/Select/ui/Inner/ui/Item/Item.styles.js

@@ -3,47 +3,53 @@ import { classes, tokens, constants } from '../../../../Select.tokens';
 import { addFocus, applyEllipsis } from '../../../../../../mixins';
 import { component, mergeConfig } from '../../../../../../engines';
 import { checkboxConfig, checkboxTokens } from '../../../../../Checkbox';
-import { cellConfig, cellTokens } from '../../../../../Cell';
 import { indicatorConfig, indicatorTokens } from '../../../../../Indicator';
 var mergedCheckboxConfig = /*#__PURE__*/mergeConfig(checkboxConfig);
 var Checkbox = /*#__PURE__*/component(mergedCheckboxConfig);
-var mergedCellConfig = /*#__PURE__*/mergeConfig(cellConfig);
-var Cell = /*#__PURE__*/component(mergedCellConfig);
+export var StyledCheckbox = /*#__PURE__*/styled(Checkbox).withConfig({
+  componentId: "plasma-new-hope__sc-fr2h0y-0"
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], checkboxTokens.triggerSize, tokens.checkboxTriggerSize, checkboxTokens.triggerBorderRadius, tokens.checkboxTriggerBorderRadius, checkboxTokens.fillColor, tokens.checkboxFillColor, checkboxTokens.iconColor, tokens.checkboxIconColor, checkboxTokens.triggerBorderColor, tokens.checkboxTriggerBorderColor);
 var mergedIndicatorConfig = /*#__PURE__*/mergeConfig(indicatorConfig);
 var Indicator = /*#__PURE__*/component(mergedIndicatorConfig);
-export var StyledWrapper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-fr2h0y-0"
-})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");width:100%;& div[class^='CellContent'],& div[class^='CellTextboxStyled']{flex:1;}& div[class^='StyledTextboxTitle']{position:relative;}& div[class^='StyledTextboxTitle']:before{content:' ';visibility:hidden;}& div[class^='StyledTextboxTitle'] span{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}"], cellTokens.cellTitleColor, constants.cellTitleColor, cellTokens.cellBackgroundColor, constants.cellBackgroundColor, cellTokens.cellPadding, tokens.cellPadding, cellTokens.cellPaddingLeftContent, tokens.cellPaddingLeftContent, cellTokens.cellPaddingContent, tokens.cellPaddingContent, cellTokens.cellPaddingRightContent, tokens.cellPaddingRightContent, cellTokens.cellTextboxGap, tokens.cellTextboxGap, cellTokens.cellGap, tokens.cellGap, cellTokens.cellTitleFontFamily, tokens.cellTitleFontFamily, cellTokens.cellTitleFontSize, tokens.cellTitleFontSize, cellTokens.cellTitleFontStyle, tokens.cellTitleFontStyle, cellTokens.cellTitleFontWeight, tokens.cellTitleFontWeight, cellTokens.cellTitleLetterSpacing, tokens.cellTitleLetterSpacing, cellTokens.cellTitleLineHeight, tokens.cellTitleLineHeight);
-export var StyledCell = /*#__PURE__*/styled(Cell).withConfig({
+export var StyledIndicator = /*#__PURE__*/styled(Indicator).withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-1"
-})([""]);
-export var StyledCheckbox = /*#__PURE__*/styled(Checkbox).withConfig({
+})(["", ":var(", ");", ":var(", ");"], indicatorTokens.size, tokens.indicatorSize, indicatorTokens.color, tokens.checkboxFillColor);
+export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-2"
-})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], checkboxTokens.triggerSize, tokens.checkboxTriggerSize, checkboxTokens.triggerBorderRadius, tokens.checkboxTriggerBorderRadius, checkboxTokens.fillColor, tokens.checkboxFillColor, checkboxTokens.iconColor, tokens.checkboxIconColor, checkboxTokens.triggerBorderColor, tokens.checkboxTriggerBorderColor);
-export var StyledIndicator = /*#__PURE__*/styled(Indicator).withConfig({
+})(["display:inline-flex;"]);
+export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-3"
-})(["", ":var(", ");", ":var(", ");"], indicatorTokens.size, tokens.indicatorSize, indicatorTokens.color, tokens.checkboxFillColor);
+})(["margin-left:auto;display:inline-flex;"]);
 export var DisclosureIconWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-4"
 })(["line-height:0;color:var(", ");&:hover{color:var(", ");}"], tokens.disclosureIconColor, tokens.disclosureIconColorHover);
 export var IconWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-5"
-})(["display:flex;align-items:center;justify-content:center;flex:none;width:", ";height:", ";margin:var(", ");line-height:0;color:var(", ");"], function (_ref) {
+})(["display:flex;align-items:center;justify-content:center;width:", ";height:", ";margin:var(", ");line-height:0;color:var(", ");& .", "{--plasma-checkbox-trigger-size:", ";--plasma-checkbox-trigger-border-radius:", ";}"], function (_ref) {
   var variant = _ref.variant;
   return "var(".concat(variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize, ")");
 }, function (_ref2) {
   var variant = _ref2.variant;
   return "var(".concat(variant === 'tight' ? tokens.itemIconSizeTight : tokens.itemIconSize, ")");
-}, tokens.itemIconMargin, tokens.checkboxFillColor);
+}, tokens.itemIconMargin, tokens.checkboxFillColor, classes.selectItemCheckbox, function (_ref3) {
+  var variant = _ref3.variant;
+  return "var(".concat(variant === 'tight' ? tokens.checkboxTriggerSizeTight : tokens.checkboxTriggerSize, ")");
+}, function (_ref4) {
+  var variant = _ref4.variant;
+  return "var(".concat(variant === 'tight' ? tokens.checkboxTriggerBorderRadiusTight : tokens.checkboxTriggerBorderRadius, ")");
+});
 export var StyledText = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-6"
-})(["", ";flex:1;"], /*#__PURE__*/applyEllipsis());
+})(["", ";flex:1;color:", ";"], /*#__PURE__*/applyEllipsis(), function (_ref5) {
+  var color = _ref5.color;
+  return color || 'inherit';
+});
 export var Wrapper = /*#__PURE__*/styled.li.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-7"
-})(["display:flex;align-items:center;min-height:var(", ");margin:0;box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background-color:var(", ");color:var(--text-primary);border-radius:var(", ");user-select:none;border-right:2px solid transparent;border-left:2px solid transparent;background-clip:padding-box;&:hover:not(.", "){cursor:pointer;background-color:var(", ");}&.", "{background-color:var(", ");}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], tokens.itemHeight, function (_ref3) {
-  var variant = _ref3.variant;
+})(["display:flex;align-items:center;min-height:var(", ");margin:0;box-sizing:content-box;padding:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");background:var(", ");color:var(--text-primary);border-radius:var(", ");user-select:none;&:hover:not(.", "){cursor:pointer;background:var(", ");}&.", "{background:var(", ");}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], tokens.itemHeight, function (_ref6) {
+  var variant = _ref6.variant;
   return "var(".concat(variant === 'tight' ? tokens.itemPaddingTight : tokens.itemPadding, ")");
-}, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, constants.itemBackground, tokens.borderRadius, classes.dropdownItemIsDisabled, tokens.itemBackgroundHover, classes.dropdownItemIsActive, tokens.itemBackgroundHover, classes.dropdownItemIsDisabled, constants.opacity, /*#__PURE__*/addFocus({
+}, tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.fontLetterSpacing, tokens.fontLineHeight, constants.itemBackground, tokens.itemBorderRadius, classes.dropdownItemIsDisabled, tokens.itemBackgroundHover, classes.dropdownItemIsActive, tokens.itemBackgroundHover, classes.dropdownItemIsDisabled, constants.opacity, /*#__PURE__*/addFocus({
   outlineSize: '0.0625rem',
   outlineOffset: '0',
   outlineColor: /*#__PURE__*/"var(".concat(constants.focusColor, ")"),

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

@@ -1,35 +1,24 @@
-import React, { forwardRef } from 'react';
-import { useForkRef } from '@salutejs/plasma-core';
+import React from 'react';
 import { Button, Textfield } from './ui';
-export var Target = /*#__PURE__*/forwardRef(function (_ref, ref) {
+export var Target = function Target(_ref) {
   var value = _ref.value,
-    target = _ref.target,
     opened = _ref.opened,
     valueToItemMap = _ref.valueToItemMap,
+    onChipClick = _ref.onChipClick,
     label = _ref.label,
     placeholder = _ref.placeholder,
     onKeyDown = _ref.onKeyDown,
+    focusedChipIndex = _ref.focusedChipIndex,
     labelPlacement = _ref.labelPlacement,
     size = _ref.size,
     contentLeft = _ref.contentLeft,
     disabled = _ref.disabled,
     renderValue = _ref.renderValue,
+    focusedPath = _ref.focusedPath,
+    focusedToValueMap = _ref.focusedToValueMap,
     selectProps = _ref.selectProps,
-    inputWrapperRef = _ref.inputWrapperRef,
-    multiselect = _ref.multiselect,
-    view = _ref.view,
-    handleClickArrow = _ref.handleClickArrow,
-    helperText = _ref.helperText,
-    treeId = _ref.treeId,
-    activeDescendantItemValue = _ref.activeDescendantItemValue,
-    isTargetAmount = _ref.isTargetAmount,
-    onChange = _ref.onChange,
-    labelToItemMap = _ref.labelToItemMap,
-    chipView = _ref.chipView,
     separator = _ref.separator;
-  var buttonRef = useForkRef(ref, inputWrapperRef);
-  return target === 'button-like' ? /*#__PURE__*/React.createElement(Button, {
-    ref: buttonRef,
+  return selectProps.target === 'button-like' ? /*#__PURE__*/React.createElement(Button, {
     opened: opened,
     value: value,
     valueToItemMap: valueToItemMap,
@@ -38,33 +27,26 @@ export var Target = /*#__PURE__*/forwardRef(function (_ref, ref) {
     size: size,
     disabled: disabled,
     renderValue: renderValue,
+    focusedPath: focusedPath,
+    focusedToValueMap: focusedToValueMap,
     selectProps: selectProps,
-    separator: separator,
-    treeId: treeId,
-    activeDescendantItemValue: activeDescendantItemValue
+    separator: separator
   }) : /*#__PURE__*/React.createElement(Textfield, {
-    ref: ref,
-    inputWrapperRef: inputWrapperRef,
     opened: opened,
-    multiselect: multiselect,
     value: value,
+    valueToItemMap: valueToItemMap,
+    onChipClick: onChipClick,
     label: label,
     placeholder: placeholder,
     onKeyDown: onKeyDown,
+    focusedChipIndex: focusedChipIndex,
     labelPlacement: labelPlacement,
     size: size,
-    view: view,
-    handleClickArrow: handleClickArrow,
     contentLeft: contentLeft,
-    helperText: helperText,
-    treeId: treeId,
-    activeDescendantItemValue: activeDescendantItemValue,
     disabled: disabled,
-    isTargetAmount: isTargetAmount,
-    valueToItemMap: valueToItemMap,
     renderValue: renderValue,
-    onChange: onChange,
-    labelToItemMap: labelToItemMap,
-    chipView: chipView
+    focusedPath: focusedPath,
+    focusedToValueMap: focusedToValueMap,
+    selectProps: selectProps
   });
-});
+};

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

@@ -1,9 +1,9 @@
-import React, { forwardRef } from 'react';
+import React from 'react';
 import { cx } from '../../../../../../utils';
 import { classes } from '../../../../Select.tokens';
-import { getButtonLabel, getItemId, sizeToIconSize } from '../../../../utils';
+import { getButtonLabel, sizeToIconSize } from '../../../../utils';
 import { StyledButton, StyledArrow, Label, ButtonWrapper, IconArrowWrapper } from './Button.styles';
-export var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
+export var Button = function Button(_ref) {
   var opened = _ref.opened,
     value = _ref.value,
     valueToItemMap = _ref.valueToItemMap,
@@ -12,12 +12,18 @@ export var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     size = _ref.size,
     disabled = _ref.disabled,
     renderValue = _ref.renderValue,
-    selectProps = _ref.selectProps,
-    treeId = _ref.treeId,
-    activeDescendantItemValue = _ref.activeDescendantItemValue;
+    focusedPath = _ref.focusedPath,
+    focusedToValueMap = _ref.focusedToValueMap,
+    selectProps = _ref.selectProps;
   var withArrowInverse = opened ? classes.arrowInverse : undefined;
+  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, {
-    ref: ref,
     stretching: "filled",
     onKeyDown: onKeyDown,
     className: opened ? classes.selectWithoutBoxShadow : undefined,
@@ -28,10 +34,9 @@ export var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
       className: cx(classes.selectTargetArrow, withArrowInverse)
     })),
     role: "combobox",
-    "aria-autocomplete": "list",
-    "aria-controls": "".concat(treeId, "_tree_level_1"),
+    "aria-controls": "tree_level_1",
     "aria-expanded": opened,
-    "aria-activedescendant": activeDescendantItemValue ? getItemId(treeId, activeDescendantItemValue) : '',
+    "aria-activedescendant": getActiveDescendant(),
     "aria-label": label,
     renderTarget: Boolean(selectProps.renderTarget)
   }, selectProps.renderTarget ? selectProps.renderTarget(Array.isArray(value) ? value.map(function (value) {
@@ -43,4 +48,4 @@ export var Button = /*#__PURE__*/forwardRef(function (_ref, ref) {
     renderValue: renderValue,
     selectProps: selectProps
   }))));
-});
+};

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

@@ -8,13 +8,13 @@ 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(", ");", ":", ";", ":100%;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":600;", ":var(", ");", ":var(", ");", ":", ";", ":var(", ");text-align:left;"], buttonTokens.buttonColor, tokens.buttonColor, buttonTokens.buttonColorHover, tokens.buttonColorHover, buttonTokens.buttonColorActive, tokens.buttonColorActive, buttonTokens.buttonBackgroundColor, tokens.buttonBackgroundColor, buttonTokens.buttonBackgroundColorHover, tokens.buttonBackgroundColorHover, buttonTokens.buttonBackgroundColorActive, tokens.buttonBackgroundColorActive, buttonTokens.buttonRightContentMargin, tokens.buttonArrowMargin, buttonTokens.buttonHeight, function (_ref) {
+})(["", ":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.buttonPadding, 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);
+}, 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.buttonArrowColor, tokens.buttonArrowColorHover, tokens.buttonArrowColorActive);
+})(["line-height:0;color:var(", ");&:hover{color:var(", ");}&:active{color:var(", ");}"], tokens.targetButtonArrowColor, tokens.targetButtonArrowColorHover, tokens.targetButtonArrowColorActive);
 export var StyledArrow = /*#__PURE__*/styled(IconDisclosureDownCentered).withConfig({
   componentId: "plasma-new-hope__sc-38cqi1-2"
 })(["transition:color 0.3s ease-in,transform 0.15s ease-in;pointer-events:none;user-select:none;"]);

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

@@ -1,96 +1,109 @@
-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); }
-import React, { forwardRef } from 'react';
-import { sizeToIconSize, getItemId } from '../../../../utils';
+import React from 'react';
+import { cx, isEmpty } from '../../../../../../utils';
 import { classes } from '../../../../Select.tokens';
-import { IconArrowWrapper, StyledArrow, StyledTextField } from './Textfield.styles';
-export var Textfield = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var _valueToItemMap$get;
-  var inputWrapperRef = _ref.inputWrapperRef,
-    opened = _ref.opened,
-    multiselect = _ref.multiselect,
-    value = _ref.value,
+import { sizeToIconSize } from '../../../../utils';
+import { Chip } from './ui';
+import { StyledButton, StyledArrow, Wrapper, ChipWrapper, TextfieldWrapper, IconArrowWrapper, Label, Placeholder, InnerLabel, InnerLabelWrapper, ContentLeftWrapper, Value } from './Textfield.styles';
+var getLabel = function getLabel(_ref) {
+  var value = _ref.value,
+    isTargetAmount = _ref.isTargetAmount,
+    valueToItemMap = _ref.valueToItemMap,
+    onChipClick = _ref.onChipClick,
     label = _ref.label,
     placeholder = _ref.placeholder,
-    onKeyDown = _ref.onKeyDown,
+    focusedChipIndex = _ref.focusedChipIndex,
     labelPlacement = _ref.labelPlacement,
     size = _ref.size,
-    view = _ref.view,
-    handleClickArrow = _ref.handleClickArrow,
-    contentLeft = _ref.contentLeft,
-    helperText = _ref.helperText,
-    treeId = _ref.treeId,
-    activeDescendantItemValue = _ref.activeDescendantItemValue,
-    disabled = _ref.disabled,
-    isTargetAmount = _ref.isTargetAmount,
-    valueToItemMap = _ref.valueToItemMap,
-    renderValue = _ref.renderValue,
-    onChange = _ref.onChange,
-    labelToItemMap = _ref.labelToItemMap,
-    chipView = _ref.chipView;
-  var withArrowInverse = opened ? classes.arrowInverse : undefined;
-  var getChips = function getChips() {
-    if (multiselect && Array.isArray(value)) {
-      if (value.length === 0) return [];
-      if (isTargetAmount) {
-        return ["\u0412\u044B\u0431\u0440\u0430\u043D\u043E ".concat(value.length)];
-      }
-      var renderValueMapper = renderValue && function (stringValue) {
-        return renderValue(valueToItemMap.get(stringValue));
-      };
-      var valueToItemMapper = function valueToItemMapper(stringValue) {
-        return valueToItemMap.get(stringValue).label;
-      };
-      return value.map(renderValueMapper || valueToItemMapper);
+    renderValue = _ref.renderValue;
+  if (isEmpty(value) && typeof value !== 'number') {
+    if (!label || labelPlacement === 'outer') {
+      return /*#__PURE__*/React.createElement(Placeholder, null, placeholder);
     }
-    return [];
-  };
-
-  // Обработчик чипов
-  var handleChipsChange = function handleChipsChange(chipLabels) {
-    onChange(chipLabels.map(function (chipLabel) {
-      return labelToItemMap.get(chipLabel).value;
-    }));
+    return /*#__PURE__*/React.createElement(Label, null, label);
+  }
+  if (Array.isArray(value) && isTargetAmount) {
+    return /*#__PURE__*/React.createElement(Chip, {
+      text: "\u0412\u044B\u0431\u0440\u0430\u043D\u043E: ".concat(value.length),
+      isTargetAmount: isTargetAmount
+    });
+  }
+  if (Array.isArray(value)) {
+    return value.map(function (currentValue, index) {
+      var itemLabel = valueToItemMap.get(currentValue).label;
+      return /*#__PURE__*/React.createElement(Chip, {
+        text: renderValue ? renderValue(valueToItemMap.get(currentValue)) : itemLabel,
+        onClick: function onClick(e) {
+          e.stopPropagation();
+          onChipClick(currentValue.toString());
+        },
+        focused: focusedChipIndex === index
+      });
+    });
+  }
+  var itemLabel = valueToItemMap.get(value).label;
+  if (!label || labelPlacement === 'outer') {
+    return /*#__PURE__*/React.createElement(Value, null, renderValue ? renderValue(valueToItemMap.get(value)) : itemLabel);
+  }
+  return /*#__PURE__*/React.createElement(InnerLabelWrapper, null, size !== 'xs' && /*#__PURE__*/React.createElement(InnerLabel, null, label), /*#__PURE__*/React.createElement(Value, null, renderValue ? renderValue(valueToItemMap.get(value)) : itemLabel));
+};
+export var Textfield = function Textfield(_ref2) {
+  var opened = _ref2.opened,
+    value = _ref2.value,
+    valueToItemMap = _ref2.valueToItemMap,
+    onChipClick = _ref2.onChipClick,
+    label = _ref2.label,
+    placeholder = _ref2.placeholder,
+    onKeyDown = _ref2.onKeyDown,
+    focusedChipIndex = _ref2.focusedChipIndex,
+    labelPlacement = _ref2.labelPlacement,
+    size = _ref2.size,
+    contentLeft = _ref2.contentLeft,
+    disabled = _ref2.disabled,
+    renderValue = _ref2.renderValue,
+    focusedPath = _ref2.focusedPath,
+    focusedToValueMap = _ref2.focusedToValueMap,
+    selectProps = _ref2.selectProps;
+  var withArrowInverse = opened ? classes.arrowInverse : undefined;
+  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(StyledTextField, _extends({
-    ref: ref,
-    inputWrapperRef: inputWrapperRef,
-    readOnly: true,
-    value: multiselect ? undefined : ((_valueToItemMap$get = valueToItemMap.get(value.toString())) === null || _valueToItemMap$get === void 0 ? void 0 : _valueToItemMap$get.label) || '',
-    size: size,
-    view: view,
-    chipView: chipView,
-    labelPlacement: labelPlacement,
-    disabled: disabled,
-    label: label,
-    placeholder: value instanceof Array && value.length ? '' : placeholder,
-    contentLeft: contentLeft,
-    contentRight: /*#__PURE__*/React.createElement(IconArrowWrapper, {
-      disabled: Boolean(disabled),
-      onClick: handleClickArrow
-    }, /*#__PURE__*/React.createElement(StyledArrow, {
-      color: "inherit",
-      size: sizeToIconSize(size),
-      className: withArrowInverse
-    })),
+  return /*#__PURE__*/React.createElement(TextfieldWrapper, {
+    opened: opened,
+    value: value
+  }, /*#__PURE__*/React.createElement(StyledButton, {
+    stretching: "filled",
+    className: cx(classes.textfieldTarget, opened || focusedChipIndex !== null ? classes.selectWithoutBoxShadow : undefined),
     onKeyDown: onKeyDown,
-    leftHelper: helperText,
+    disabled: disabled,
     role: "combobox",
-    "aria-autocomplete": "list",
-    "aria-controls": "".concat(treeId, "_tree_level_1"),
+    "aria-controls": "tree_level_1",
     "aria-expanded": opened,
-    "aria-activedescendant": activeDescendantItemValue ? getItemId(treeId, activeDescendantItemValue) : ''
-  }, multiselect ? {
-    enumerationType: 'chip',
-    chips: getChips(),
-    onChangeChips: handleChipsChange
-  } : {
-    enumerationType: 'plain'
-  }, {
-    onEnterDisabled: true // Пропс для отключения обработчика Enter внутри Textfield
-    ,
-    opened: opened
-    // TODO: #1547
-    ,
-    _forceChipManipulationWithReadonly: true
-  }));
-});
+    "aria-activedescendant": getActiveDescendant(),
+    "aria-label": label,
+    renderTarget: Boolean(selectProps.renderTarget)
+  }, /*#__PURE__*/React.createElement(Wrapper, null, selectProps !== null && selectProps !== void 0 && selectProps.renderTarget ? selectProps.renderTarget(Array.isArray(value) ? value.map(function (value) {
+    return valueToItemMap.get(value);
+  }) : valueToItemMap.get(value)) : /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && (!selectProps.multiselect || isEmpty(value)) && /*#__PURE__*/React.createElement(ContentLeftWrapper, null, contentLeft), /*#__PURE__*/React.createElement(ChipWrapper, {
+    multiselect: selectProps.multiselect,
+    value: value
+  }, getLabel({
+    value: value,
+    valueToItemMap: valueToItemMap,
+    onChipClick: onChipClick,
+    focusedChipIndex: focusedChipIndex,
+    label: label,
+    labelPlacement: labelPlacement,
+    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)
+  })))));
+};