@salutejs/plasma-new-hope 0.192.2-dev.0 → 0.192.3-canary.1550.11813906469.0

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

@@ -3,64 +3,58 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Wrapper = exports.StyledText = exports.StyledIndicator = exports.StyledContentRight = exports.StyledContentLeft = exports.StyledCheckboxWrapper = exports.StyledCheckbox = exports.IconWrapper = exports.DisclosureIconWrapper = void 0;
+exports.Wrapper = exports.StyledWrapper = exports.StyledText = exports.StyledIndicator = exports.StyledCheckboxWrapper = exports.StyledCheckbox = exports.StyledCell = exports.IconWrapper = exports.DisclosureIconWrapper = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
 var _Select = /*#__PURE__*/require("../../../../Select.tokens");
 var _mixins = /*#__PURE__*/require("../../../../../../mixins");
 var _engines = /*#__PURE__*/require("../../../../../../engines");
 var _Checkbox = /*#__PURE__*/require("../../../../../Checkbox");
+var _Cell = /*#__PURE__*/require("../../../../../Cell");
 var _Indicator = /*#__PURE__*/require("../../../../../Indicator");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var mergedCheckboxConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Checkbox.checkboxConfig);
 var Checkbox = /*#__PURE__*/(0, _engines.component)(mergedCheckboxConfig);
-var StyledCheckbox = exports.StyledCheckbox = /*#__PURE__*/(0, _styledComponents["default"])(Checkbox).withConfig({
-  componentId: "plasma-new-hope__sc-fr2h0y-0"
-})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], _Checkbox.checkboxTokens.triggerSize, _Select.tokens.checkboxTriggerSize, _Checkbox.checkboxTokens.triggerBorderRadius, _Select.tokens.checkboxTriggerBorderRadius, _Checkbox.checkboxTokens.fillColor, _Select.tokens.checkboxFillColor, _Checkbox.checkboxTokens.iconColor, _Select.tokens.checkboxIconColor, _Checkbox.checkboxTokens.triggerBorderColor, _Select.tokens.checkboxTriggerBorderColor);
+var mergedCellConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Cell.cellConfig);
+var Cell = /*#__PURE__*/(0, _engines.component)(mergedCellConfig);
 var mergedIndicatorConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Indicator.indicatorConfig);
 var Indicator = /*#__PURE__*/(0, _engines.component)(mergedIndicatorConfig);
-var StyledIndicator = exports.StyledIndicator = /*#__PURE__*/(0, _styledComponents["default"])(Indicator).withConfig({
+var StyledWrapper = exports.StyledWrapper = /*#__PURE__*/_styledComponents["default"].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.cell-content,& div.cell-textbox{flex:1;}& div.cell-textbox-title{position:relative;}& div.cell-textbox-title:before{content:' ';visibility:hidden;}& div.cell-textbox-title span{position:absolute;left:0;right:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}"], _Cell.cellTokens.cellTitleColor, _Select.constants.cellTitleColor, _Cell.cellTokens.cellBackgroundColor, _Select.constants.cellBackgroundColor, _Cell.cellTokens.cellPadding, _Select.tokens.cellPadding, _Cell.cellTokens.cellPaddingLeftContent, _Select.tokens.cellPaddingLeftContent, _Cell.cellTokens.cellPaddingContent, _Select.tokens.cellPaddingContent, _Cell.cellTokens.cellPaddingRightContent, _Select.tokens.cellPaddingRightContent, _Cell.cellTokens.cellTextboxGap, _Select.tokens.cellTextboxGap, _Cell.cellTokens.cellGap, _Select.tokens.cellGap, _Cell.cellTokens.cellTitleFontFamily, _Select.tokens.cellTitleFontFamily, _Cell.cellTokens.cellTitleFontSize, _Select.tokens.cellTitleFontSize, _Cell.cellTokens.cellTitleFontStyle, _Select.tokens.cellTitleFontStyle, _Cell.cellTokens.cellTitleFontWeight, _Select.tokens.cellTitleFontWeight, _Cell.cellTokens.cellTitleLetterSpacing, _Select.tokens.cellTitleLetterSpacing, _Cell.cellTokens.cellTitleLineHeight, _Select.tokens.cellTitleLineHeight);
+var StyledCell = exports.StyledCell = /*#__PURE__*/(0, _styledComponents["default"])(Cell).withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-1"
-})(["", ":var(", ");", ":var(", ");"], _Indicator.indicatorTokens.size, _Select.tokens.indicatorSize, _Indicator.indicatorTokens.color, _Select.tokens.checkboxFillColor);
-var StyledContentLeft = exports.StyledContentLeft = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+})([""]);
+var StyledCheckbox = exports.StyledCheckbox = /*#__PURE__*/(0, _styledComponents["default"])(Checkbox).withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-2"
-})(["display:inline-flex;"]);
-var StyledContentRight = exports.StyledContentRight = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");"], _Checkbox.checkboxTokens.triggerSize, _Select.tokens.checkboxTriggerSize, _Checkbox.checkboxTokens.triggerBorderRadius, _Select.tokens.checkboxTriggerBorderRadius, _Checkbox.checkboxTokens.fillColor, _Select.tokens.checkboxFillColor, _Checkbox.checkboxTokens.iconColor, _Select.tokens.checkboxIconColor, _Checkbox.checkboxTokens.triggerBorderColor, _Select.tokens.checkboxTriggerBorderColor);
+var StyledIndicator = exports.StyledIndicator = /*#__PURE__*/(0, _styledComponents["default"])(Indicator).withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-3"
-})(["margin-left:auto;display:inline-flex;"]);
+})(["", ":var(", ");", ":var(", ");"], _Indicator.indicatorTokens.size, _Select.tokens.indicatorSize, _Indicator.indicatorTokens.color, _Select.tokens.checkboxFillColor);
 var DisclosureIconWrapper = exports.DisclosureIconWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-4"
 })(["line-height:0;color:var(", ");&:hover{color:var(", ");}"], _Select.tokens.disclosureIconColor, _Select.tokens.disclosureIconColorHover);
 var IconWrapper = exports.IconWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-5"
-})(["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) {
+})(["display:flex;align-items:center;justify-content:center;flex:none;width:", ";height:", ";margin:var(", ");line-height:0;color:var(", ");"], function (_ref) {
   var variant = _ref.variant;
   return "var(".concat(variant === 'tight' ? _Select.tokens.itemIconSizeTight : _Select.tokens.itemIconSize, ")");
 }, function (_ref2) {
   var variant = _ref2.variant;
   return "var(".concat(variant === 'tight' ? _Select.tokens.itemIconSizeTight : _Select.tokens.itemIconSize, ")");
-}, _Select.tokens.itemIconMargin, _Select.tokens.checkboxFillColor, _Select.classes.selectItemCheckbox, function (_ref3) {
-  var variant = _ref3.variant;
-  return "var(".concat(variant === 'tight' ? _Select.tokens.checkboxTriggerSizeTight : _Select.tokens.checkboxTriggerSize, ")");
-}, function (_ref4) {
-  var variant = _ref4.variant;
-  return "var(".concat(variant === 'tight' ? _Select.tokens.checkboxTriggerBorderRadiusTight : _Select.tokens.checkboxTriggerBorderRadius, ")");
-});
+}, _Select.tokens.itemIconMargin, _Select.tokens.checkboxFillColor);
 var StyledText = exports.StyledText = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-6"
-})(["", ";flex:1;color:", ";"], /*#__PURE__*/(0, _mixins.applyEllipsis)(), function (_ref5) {
-  var color = _ref5.color;
-  return color || 'inherit';
-});
+})(["", ";flex:1;"], /*#__PURE__*/(0, _mixins.applyEllipsis)());
 var Wrapper = exports.Wrapper = /*#__PURE__*/_styledComponents["default"].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: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;}", ";"], _Select.tokens.itemHeight, function (_ref6) {
-  var variant = _ref6.variant;
+})(["display:flex;align-items:center;min-height:var(", ");margin:0 calc(0.125rem + var(", ",0rem));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:calc(var(", ") - 0.125rem - var(", ",0rem));user-select:none;background-clip:padding-box;&:hover:not(.", "){cursor:pointer;background-color:var(", ");}&.", "{background-color:var(", ");}&.", "{opacity:", ";cursor:not-allowed;}:focus{outline:none;}", ";"], _Select.tokens.itemHeight, _Select.tokens.dropdownBorderWidth, function (_ref3) {
+  var variant = _ref3.variant;
   return "var(".concat(variant === 'tight' ? _Select.tokens.itemPaddingTight : _Select.tokens.itemPadding, ")");
-}, _Select.tokens.fontFamily, _Select.tokens.fontSize, _Select.tokens.fontStyle, _Select.tokens.fontWeight, _Select.tokens.fontLetterSpacing, _Select.tokens.fontLineHeight, _Select.constants.itemBackground, _Select.tokens.itemBorderRadius, _Select.classes.dropdownItemIsDisabled, _Select.tokens.itemBackgroundHover, _Select.classes.dropdownItemIsActive, _Select.tokens.itemBackgroundHover, _Select.classes.dropdownItemIsDisabled, _Select.constants.opacity, /*#__PURE__*/(0, _mixins.addFocus)({
+}, _Select.tokens.fontFamily, _Select.tokens.fontSize, _Select.tokens.fontStyle, _Select.tokens.fontWeight, _Select.tokens.fontLetterSpacing, _Select.tokens.fontLineHeight, _Select.constants.itemBackground, _Select.tokens.borderRadius, _Select.tokens.dropdownBorderWidth, _Select.classes.dropdownItemIsDisabled, _Select.tokens.itemBackgroundHover, _Select.classes.dropdownItemIsActive, _Select.tokens.itemBackgroundHover, _Select.classes.dropdownItemIsDisabled, _Select.constants.opacity, /*#__PURE__*/(0, _mixins.addFocus)({
   outlineSize: '0.0625rem',
   outlineOffset: '0',
   outlineColor: /*#__PURE__*/"var(".concat(_Select.constants.focusColor, ")"),
-  outlineRadius: /*#__PURE__*/"var(".concat(_Select.tokens.itemBorderRadius, ")"),
+  outlineRadius: /*#__PURE__*/"calc(var(".concat(_Select.tokens.borderRadius, ") - 0.125rem - var(").concat(_Select.tokens.dropdownBorderWidth, ", 0rem))"),
   hasTransition: false,
   customFocusRules: /*#__PURE__*/"\n            &.".concat(_Select.classes.dropdownItemIsFocused, ":before {\n                outline: none;\n                box-shadow: 0 0 0 0.0625rem var(").concat(_Select.constants.focusColor, ");\n            }\n        ")
 }));

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

@@ -1,31 +1,51 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Target = void 0;
-var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
+var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
 var _ui = /*#__PURE__*/require("./ui");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var Target = exports.Target = function Target(_ref) {
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var Target = exports.Target = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, 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;
-  return selectProps.target === 'button-like' ? /*#__PURE__*/_react["default"].createElement(_ui.Button, {
+  var buttonRef = (0, _plasmaCore.useForkRef)(ref, inputWrapperRef);
+  if (selectProps.renderTarget) {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      ref: inputWrapperRef
+    }, selectProps.renderTarget(Array.isArray(value) ? value.map(function (value) {
+      return valueToItemMap.get(value);
+    }) : valueToItemMap.get(value)));
+  }
+  return target === 'button-like' ? /*#__PURE__*/_react["default"].createElement(_ui.Button, {
+    ref: buttonRef,
     opened: opened,
     value: value,
     valueToItemMap: valueToItemMap,
@@ -34,26 +54,33 @@ var Target = exports.Target = function Target(_ref) {
     size: size,
     disabled: disabled,
     renderValue: renderValue,
-    focusedPath: focusedPath,
-    focusedToValueMap: focusedToValueMap,
     selectProps: selectProps,
-    separator: separator
+    separator: separator,
+    treeId: treeId,
+    activeDescendantItemValue: activeDescendantItemValue
   }) : /*#__PURE__*/_react["default"].createElement(_ui.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,
-    focusedPath: focusedPath,
-    focusedToValueMap: focusedToValueMap,
-    selectProps: selectProps
+    onChange: onChange,
+    labelToItemMap: labelToItemMap,
+    chipView: chipView
   });
-};
+});

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

@@ -1,16 +1,18 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Button = void 0;
-var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
+var _react = /*#__PURE__*/_interopRequireWildcard( /*#__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 Button = exports.Button = function Button(_ref) {
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var opened = _ref.opened,
     value = _ref.value,
     valueToItemMap = _ref.valueToItemMap,
@@ -19,18 +21,12 @@ var Button = exports.Button = function Button(_ref) {
     size = _ref.size,
     disabled = _ref.disabled,
     renderValue = _ref.renderValue,
-    focusedPath = _ref.focusedPath,
-    focusedToValueMap = _ref.focusedToValueMap,
-    selectProps = _ref.selectProps;
+    selectProps = _ref.selectProps,
+    treeId = _ref.treeId,
+    activeDescendantItemValue = _ref.activeDescendantItemValue;
   var withArrowInverse = opened ? _Select.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["default"].createElement(_Button.ButtonWrapper, null, /*#__PURE__*/_react["default"].createElement(_Button.StyledButton, {
+    ref: ref,
     stretching: "filled",
     onKeyDown: onKeyDown,
     className: opened ? _Select.classes.selectWithoutBoxShadow : undefined,
@@ -41,18 +37,17 @@ var Button = exports.Button = function Button(_ref) {
       className: (0, _utils.cx)(_Select.classes.selectTargetArrow, withArrowInverse)
     })),
     role: "combobox",
-    "aria-controls": "tree_level_1",
+    "aria-autocomplete": "list",
+    "aria-controls": "".concat(treeId, "_tree_level_1"),
     "aria-expanded": opened,
-    "aria-activedescendant": getActiveDescendant(),
+    "aria-activedescendant": activeDescendantItemValue ? (0, _utils2.getItemId)(treeId, activeDescendantItemValue) : '',
     "aria-label": label,
     renderTarget: Boolean(selectProps.renderTarget)
-  }, selectProps.renderTarget ? selectProps.renderTarget(Array.isArray(value) ? value.map(function (value) {
-    return valueToItemMap.get(value);
-  }) : valueToItemMap.get(value)) : /*#__PURE__*/_react["default"].createElement(_Button.Label, null, (0, _utils2.getButtonLabel)({
+  }, /*#__PURE__*/_react["default"].createElement(_Button.Label, null, (0, _utils2.getButtonLabel)({
     value: value,
     valueToItemMap: valueToItemMap,
     label: label,
     renderValue: renderValue,
     selectProps: selectProps
   }))));
-};
+});

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

@@ -15,13 +15,13 @@ var mergedButtonConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Button.buttonCo
 var Button = /*#__PURE__*/(0, _engines.component)(mergedButtonConfig);
 var StyledButton = exports.StyledButton = /*#__PURE__*/(0, _styledComponents["default"])(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;"], _Button.buttonTokens.buttonColor, _Select.tokens.targetButtonColor, _Button.buttonTokens.buttonColorHover, _Select.tokens.targetButtonColorHover, _Button.buttonTokens.buttonColorActive, _Select.tokens.targetButtonColorActive, _Button.buttonTokens.buttonBackgroundColor, _Select.tokens.targetButtonBackgroundColor, _Button.buttonTokens.buttonBackgroundColorHover, _Select.tokens.targetButtonBackgroundColorHover, _Button.buttonTokens.buttonBackgroundColorActive, _Select.tokens.targetButtonBackgroundColorActive, _Button.buttonTokens.buttonRightContentMargin, _Select.tokens.targetButtonArrowMargin, _Button.buttonTokens.buttonHeight, function (_ref) {
+})(["", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":", ";", ":100%;", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":var(", ");", ":600;", ":var(", ");", ":var(", ");", ":", ";", ":var(", ");text-align:left;"], _Button.buttonTokens.buttonColor, _Select.tokens.buttonColor, _Button.buttonTokens.buttonColorHover, _Select.tokens.buttonColorHover, _Button.buttonTokens.buttonColorActive, _Select.tokens.buttonColorActive, _Button.buttonTokens.buttonBackgroundColor, _Select.tokens.buttonBackgroundColor, _Button.buttonTokens.buttonBackgroundColorHover, _Select.tokens.buttonBackgroundColorHover, _Button.buttonTokens.buttonBackgroundColorActive, _Select.tokens.buttonBackgroundColorActive, _Button.buttonTokens.buttonRightContentMargin, _Select.tokens.buttonArrowMargin, _Button.buttonTokens.buttonHeight, function (_ref) {
   var renderTarget = _ref.renderTarget;
   return renderTarget ? 'auto' : "var(".concat(_Select.tokens.targetHeight, ")");
-}, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Select.tokens.targetButtonPadding, _Button.buttonTokens.buttonRadius, _Select.tokens.borderRadius, _Button.buttonTokens.buttonFontFamily, _Select.tokens.fontFamily, _Button.buttonTokens.buttonFontSize, _Select.tokens.fontSize, _Button.buttonTokens.buttonFontStyle, _Select.tokens.fontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Select.tokens.fontLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Select.tokens.fontLineHeight, _Button.buttonTokens.buttonDisabledOpacity, _Select.constants.opacity, _Button.buttonTokens.buttonFocusColor, _Select.constants.focusColor);
+}, _Button.buttonTokens.buttonWidth, _Button.buttonTokens.buttonPadding, _Select.tokens.buttonPadding, _Button.buttonTokens.buttonRadius, _Select.tokens.borderRadius, _Button.buttonTokens.buttonFontFamily, _Select.tokens.fontFamily, _Button.buttonTokens.buttonFontSize, _Select.tokens.fontSize, _Button.buttonTokens.buttonFontStyle, _Select.tokens.fontStyle, _Button.buttonTokens.buttonFontWeight, _Button.buttonTokens.buttonLetterSpacing, _Select.tokens.fontLetterSpacing, _Button.buttonTokens.buttonLineHeight, _Select.tokens.fontLineHeight, _Button.buttonTokens.buttonDisabledOpacity, _Select.constants.opacity, _Button.buttonTokens.buttonFocusColor, _Select.constants.focusColor);
 var IconArrowWrapper = exports.IconArrowWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-38cqi1-1"
-})(["line-height:0;color:var(", ");&:hover{color:var(", ");}&:active{color:var(", ");}"], _Select.tokens.targetButtonArrowColor, _Select.tokens.targetButtonArrowColorHover, _Select.tokens.targetButtonArrowColorActive);
+})(["line-height:0;color:var(", ");&:hover{color:var(", ");}&:active{color:var(", ");}"], _Select.tokens.buttonArrowColor, _Select.tokens.buttonArrowColorHover, _Select.tokens.buttonArrowColorActive);
 var StyledArrow = exports.StyledArrow = /*#__PURE__*/(0, _styledComponents["default"])(_Icon.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/cjs/components/Select/ui/Target/ui/Textfield/Textfield.js

@@ -1,116 +1,105 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Textfield = void 0;
-var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
-var _utils = /*#__PURE__*/require("../../../../../../utils");
+var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
+var _utils = /*#__PURE__*/require("../../../../utils");
 var _Select = /*#__PURE__*/require("../../../../Select.tokens");
-var _utils2 = /*#__PURE__*/require("../../../../utils");
-var _ui = /*#__PURE__*/require("./ui");
 var _Textfield = /*#__PURE__*/require("./Textfield.styles");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var getLabel = function getLabel(_ref) {
-  var value = _ref.value,
-    isTargetAmount = _ref.isTargetAmount,
-    valueToItemMap = _ref.valueToItemMap,
-    onChipClick = _ref.onChipClick,
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var Textfield = exports.Textfield = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var _valueToItemMap$get;
+  var inputWrapperRef = _ref.inputWrapperRef,
+    opened = _ref.opened,
+    multiselect = _ref.multiselect,
+    value = _ref.value,
     label = _ref.label,
     placeholder = _ref.placeholder,
-    focusedChipIndex = _ref.focusedChipIndex,
+    onKeyDown = _ref.onKeyDown,
     labelPlacement = _ref.labelPlacement,
     size = _ref.size,
-    renderValue = _ref.renderValue;
-  if ((0, _utils.isEmpty)(value) && typeof value !== 'number') {
-    if (!label || labelPlacement === 'outer') {
-      return /*#__PURE__*/_react["default"].createElement(_Textfield.Placeholder, null, placeholder);
-    }
-    return /*#__PURE__*/_react["default"].createElement(_Textfield.Label, null, label);
-  }
-  if (Array.isArray(value) && isTargetAmount) {
-    return /*#__PURE__*/_react["default"].createElement(_ui.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["default"].createElement(_ui.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["default"].createElement(_Textfield.Value, null, renderValue ? renderValue(valueToItemMap.get(value)) : 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, renderValue ? renderValue(valueToItemMap.get(value)) : itemLabel));
-};
-var Textfield = exports.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;
+    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 ? _Select.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();
+  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);
+    }
+    return [];
   };
-  return /*#__PURE__*/_react["default"].createElement(_Textfield.TextfieldWrapper, {
-    opened: opened,
-    value: value
-  }, /*#__PURE__*/_react["default"].createElement(_Textfield.StyledButton, {
-    stretching: "filled",
-    className: (0, _utils.cx)(_Select.classes.textfieldTarget, opened || focusedChipIndex !== null ? _Select.classes.selectWithoutBoxShadow : undefined),
-    onKeyDown: onKeyDown,
+
+  // Обработчик чипов
+  var handleChipsChange = function handleChipsChange(chipLabels) {
+    onChange(chipLabels.map(function (chipLabel) {
+      return labelToItemMap.get(chipLabel).value;
+    }));
+  };
+  return /*#__PURE__*/_react["default"].createElement(_Textfield.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["default"].createElement(_Textfield.IconArrowWrapper, {
+      disabled: Boolean(disabled),
+      onClick: handleClickArrow
+    }, /*#__PURE__*/_react["default"].createElement(_Textfield.StyledArrow, {
+      color: "inherit",
+      size: (0, _utils.sizeToIconSize)(size),
+      className: withArrowInverse
+    })),
+    onKeyDown: onKeyDown,
+    leftHelper: helperText,
     role: "combobox",
-    "aria-controls": "tree_level_1",
+    "aria-autocomplete": "list",
+    "aria-controls": "".concat(treeId, "_tree_level_1"),
     "aria-expanded": opened,
-    "aria-activedescendant": getActiveDescendant(),
-    "aria-label": label,
-    renderTarget: Boolean(selectProps.renderTarget)
-  }, /*#__PURE__*/_react["default"].createElement(_Textfield.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["default"].createElement(_react["default"].Fragment, null, contentLeft && (!selectProps.multiselect || (0, _utils.isEmpty)(value)) && /*#__PURE__*/_react["default"].createElement(_Textfield.ContentLeftWrapper, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_Textfield.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["default"].createElement(_Textfield.IconArrowWrapper, null, /*#__PURE__*/_react["default"].createElement(_Textfield.StyledArrow, {
-    size: (0, _utils2.sizeToIconSize)(size),
-    color: "inherit",
-    className: (0, _utils.cx)(_Select.classes.selectTargetArrow, withArrowInverse)
-  })))));
-};
+    "aria-activedescendant": activeDescendantItemValue ? (0, _utils.getItemId)(treeId, activeDescendantItemValue) : ''
+  }, multiselect ? {
+    enumerationType: 'chip',
+    chips: getChips(),
+    onChangeChips: handleChipsChange
+  } : {
+    enumerationType: 'plain'
+  }, {
+    onEnterDisabled: true // Пропс для отключения обработчика Enter внутри Textfield
+    ,
+    opened: opened
+    // TODO: #1547
+    ,
+    _forceChipManipulationWithReadonly: true
+  }));
+});