@salutejs/plasma-new-hope 0.139.0-canary.1418.10685382771.0 → 0.139.1-canary.1406.10700254852.0

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

@@ -16,7 +16,7 @@ var _TextArea2 = /*#__PURE__*/require("./TextArea.tokens");
 var _base = /*#__PURE__*/require("./variations/_view/base");
 var _base2 = /*#__PURE__*/require("./variations/_size/base");
 var _base3 = /*#__PURE__*/require("./variations/_disabled/base");
-var _excluded = ["helperText", "status", "resize", "rightHelper", "leftHelper", "contentRight", "autoResize", "minAuto", "maxAuto", "label", "labelPlacement", "placeholder", "defaultValue", "height", "width", "value", "disabled", "size", "view", "id", "style", "className", "readOnly", "rows", "cols", "onChange"];
+var _excluded = ["helperText", "status", "resize", "rightHelper", "leftHelper", "contentRight", "autoResize", "minAuto", "maxAuto", "label", "labelPlacement", "placeholder", "defaultValue", "height", "width", "value", "disabled", "required", "requiredPlacement", "optional", "size", "view", "id", "style", "className", "readOnly", "rows", "cols", "onChange"];
 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); }
@@ -45,6 +45,7 @@ var innerPlaceholderUp = _TextArea2.classes.innerPlaceholderUp,
   styledTextAreaWrapper = _TextArea2.classes.styledTextAreaWrapper,
   styledPlaceholder = _TextArea2.classes.styledPlaceholder,
   styledHelpers = _TextArea2.classes.styledHelpers;
+var optionalText = 'optional';
 var base = /*#__PURE__*/(0, _styledComponents.css)(["", ";position:relative;box-sizing:border-box;"], _mixins.applyDynamicLabel);
 
 // TODO: Удалить после отказа от старых библиотек plasma-web / plasma-b2c
@@ -97,6 +98,12 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
       width = props.width,
       value = props.value,
       disabled = props.disabled,
+      _props$required = props.required,
+      required = _props$required === void 0 ? false : _props$required,
+      _props$requiredPlacem = props.requiredPlacement,
+      requiredPlacement = _props$requiredPlacem === void 0 ? 'right' : _props$requiredPlacem,
+      _props$optional = props.optional,
+      optional = _props$optional === void 0 ? false : _props$optional,
       size = props.size,
       view = props.view,
       id = props.id,
@@ -120,11 +127,16 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
       uncontrolledValue = _useState6[0],
       setUncontrolledValue = _useState6[1];
     var outerRef = innerRef && 'current' in innerRef ? innerRef : /*#__PURE__*/(0, _react.createRef)();
+    var innerOptional = required ? false : optional;
     var hasHelper = Boolean(leftHelper || rightHelper || helperText);
+    var hasOuterLabel = Boolean(label && labelPlacement === 'outer');
+    var hasInnerLabel = Boolean(label && labelPlacement === 'inner' && size !== 'xs');
+    var hasPlaceholderOptional = innerOptional && !hasOuterLabel;
     var overriddenView = status !== undefined ? fallbackStatusMap[status] : view;
     var textareaHelperId = id ? "".concat(id, "-helper") : undefined;
     var applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;
-    var placeLabel = labelPlacement === 'inner' && label && size !== 'xs' ? label : placeholder;
+    var placeholderLabel = hasInnerLabel ? label : placeholder;
+    var requiredPlacementClass = requiredPlacement === 'right' ? 'align-right ' : undefined;
     (0, _plasmaCore.useResizeObserver)(outerRef, function (currentElement) {
       var inlineWidth = currentElement.style.width;
       if (inlineWidth || cols) {
@@ -158,6 +170,7 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
     } : {
       autoResize: autoResize
     }), focused);
+    var optionalTextNode = innerOptional ? /*#__PURE__*/_react["default"].createElement(_TextArea.StyledOptionalText, null, Boolean(hasPlaceholderOptional ? placeholderLabel : label) && '\xa0', optionalText) : null;
     return /*#__PURE__*/_react["default"].createElement(Root, {
       view: overriddenView,
       size: size,
@@ -167,12 +180,16 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
         width: helperWidth
       }, style),
       className: className
-    }, label && labelPlacement === 'outer' && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledLabel, null, label), /*#__PURE__*/_react["default"].createElement(_TextArea.StyledContainer, {
+    }, hasOuterLabel && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledLabel, null, required && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledIndicator, {
+      className: (0, _utils.cx)(_TextArea2.classes.outerLabelPlacement, requiredPlacementClass)
+    }), label, optionalTextNode), /*#__PURE__*/_react["default"].createElement(_TextArea.StyledContainer, {
       className: _utils.cx.apply(void 0, [styledContainer].concat(_toConsumableArray(dynamicLabelClasses))),
       width: helperWidth,
       onFocus: onFocusHandler,
       onBlur: onBlurHandler
-    }, contentRight && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledContent, null, contentRight), /*#__PURE__*/_react["default"].createElement(_TextArea.StyledTextAreaWrapper, {
+    }, required && !hasOuterLabel && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledIndicator, {
+      className: (0, _utils.cx)(_TextArea2.classes.innerLabelPlacement, requiredPlacementClass)
+    }), contentRight && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledContent, null, contentRight), /*#__PURE__*/_react["default"].createElement(_TextArea.StyledTextAreaWrapper, {
       className: styledTextAreaWrapper,
       hasHelper: hasHelper
     }, /*#__PURE__*/_react["default"].createElement(_TextArea.StyledTextArea, _extends({
@@ -185,7 +202,7 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
       disabled: disabled,
       height: autoResize ? minAuto : height,
       width: width,
-      placeholder: placeLabel,
+      placeholder: placeholderLabel,
       "aria-describedby": textareaHelperId,
       value: value,
       readOnly: readOnly,
@@ -197,11 +214,11 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
     }, rest))), hasHelper && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledHelpers, {
       className: styledHelpers,
       id: textareaHelperId
-    }, (leftHelper || helperText) && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledLeftHelper, null, leftHelper || helperText), rightHelper && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledRightHelper, null, rightHelper)), placeLabel && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledPlaceholder, {
+    }, (leftHelper || helperText) && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledLeftHelper, null, leftHelper || helperText), rightHelper && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledRightHelper, null, rightHelper)), placeholderLabel && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledPlaceholder, {
       hasContentRight: Boolean(contentRight),
       className: styledPlaceholder,
       htmlFor: id
-    }, placeLabel)));
+    }, placeholderLabel, !hasOuterLabel && optionalTextNode)));
   });
 };
 var textAreaConfig = exports.textAreaConfig = {

package/styled-components/cjs/components/TextArea/TextArea.styles.js

@@ -3,16 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledTextAreaWrapper = exports.StyledTextArea = exports.StyledRightHelper = exports.StyledPlaceholder = exports.StyledLeftHelper = exports.StyledLabel = exports.StyledHelpers = exports.StyledContent = exports.StyledContainer = void 0;
+exports.StyledTextAreaWrapper = exports.StyledTextArea = exports.StyledRightHelper = exports.StyledPlaceholder = exports.StyledOptionalText = exports.StyledLeftHelper = exports.StyledLabel = exports.StyledIndicator = exports.StyledHelpers = exports.StyledContent = exports.StyledContainer = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
 var _mixins = /*#__PURE__*/require("../../mixins");
 var _TextArea = /*#__PURE__*/require("./TextArea.tokens");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var StyledLabel = exports.StyledLabel = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-pxxv3p-0"
-})(["margin-bottom:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _TextArea.tokens.labelMarginBottom, _TextArea.tokens.inputFontFamily, _TextArea.tokens.inputFontSize, _TextArea.tokens.inputFontStyle, _TextArea.tokens.inputFontWeight, _TextArea.tokens.inputLetterSpacing, _TextArea.tokens.inputLineHeight);
-var StyledTextAreaWrapper = exports.StyledTextAreaWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+})(["position:relative;display:inline-flex;margin-bottom:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _TextArea.tokens.labelMarginBottom, _TextArea.tokens.inputFontFamily, _TextArea.tokens.inputFontSize, _TextArea.tokens.inputFontStyle, _TextArea.tokens.inputFontWeight, _TextArea.tokens.inputLetterSpacing, _TextArea.tokens.inputLineHeight);
+var StyledOptionalText = exports.StyledOptionalText = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   componentId: "plasma-new-hope__sc-pxxv3p-1"
+})(["color:var(", ");"], _TextArea.tokens.optionalColor);
+var StyledTextAreaWrapper = exports.StyledTextAreaWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-pxxv3p-2"
 })(["background-color:var(", ");padding-top:var(", ");padding-bottom:", ";border-radius:", ";"], _TextArea.tokens.inputBackgroundColor, _TextArea.tokens.inputPaddingTop, function (_ref) {
   var hasHelper = _ref.hasHelper;
   return hasHelper ? "var(".concat(_TextArea.tokens.inputPaddingBottomWithHelpers, ")") : "var(".concat(_TextArea.tokens.inputPaddingBottom, ")");
@@ -21,16 +24,16 @@ var StyledTextAreaWrapper = exports.StyledTextAreaWrapper = /*#__PURE__*/_styled
   return hasHelper ? "var(".concat(_TextArea.tokens.borderRadiusWithHelpers, ")") : "var(".concat(_TextArea.tokens.borderRadius, ")");
 });
 var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-pxxv3p-2"
+  componentId: "plasma-new-hope__sc-pxxv3p-3"
 })(["position:absolute;display:flex;align-items:center;bottom:0;z-index:1;top:var(", ");right:var(", ");height:var(", ");"], _TextArea.tokens.rightContentTop, _TextArea.tokens.rightContentRight, _TextArea.tokens.rightContentHeight);
 var StyledContainer = exports.StyledContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-pxxv3p-3"
+  componentId: "plasma-new-hope__sc-pxxv3p-4"
 })(["display:inline-flex;flex-direction:column;width:", ";position:relative;"], function (_ref3) {
   var width = _ref3.width;
   return width;
 });
 var StyledTextArea = exports.StyledTextArea = /*#__PURE__*/_styledComponents["default"].textarea.withConfig({
-  componentId: "plasma-new-hope__sc-pxxv3p-4"
+  componentId: "plasma-new-hope__sc-pxxv3p-5"
 })(["display:block;box-sizing:border-box;outline:none;border:none;-webkit-appearance:none;background-color:transparent;color:var(", ");caret-color:var(", ");resize:", ";--plasma_private-textarea-height:", ";--plasma_private-textarea-width:", ";--plasma_private-textarea-computed-height:", ";--plasma_private-textarea-computed-width:", ";height:var(--plasma_private-textarea-computed-height);width:var(--plasma_private-textarea-computed-width);min-width:", ";max-width:", ";min-height:var(", ");padding-right:", ";padding-left:var(", ");padding-top:0;padding-bottom:0;--plasma_private-textarea-helpers-computed-height:calc( var(", ") + var(", ") + var(", ") );--plasma_private-textarea-input-with-helpers-height:calc( var(--plasma_private-textarea-height) - var(--plasma_private-textarea-helpers-computed-height) + var(", ") );--plasma_private-textarea-input-without-helpers-height:calc( var(--plasma_private-textarea-computed-height) - var(", ") );--plasma_private-textarea-input-actual-height:", ";height:var(--plasma_private-textarea-input-actual-height);font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");&::placeholder{opacity:0;}&:read-only{cursor:default;}&:focus:not(:disabled){color:var(", ");}"], _TextArea.tokens.inputColor, _TextArea.tokens.inputCaretColor, function (_ref4) {
   var resize = _ref4.resize;
   return resize || 'none';
@@ -61,17 +64,20 @@ var StyledTextArea = exports.StyledTextArea = /*#__PURE__*/_styledComponents["de
   return hasHelper && !rows ? 'var(--plasma_private-textarea-input-with-helpers-height)' : 'var(--plasma_private-textarea-input-without-helpers-height)';
 }, _TextArea.tokens.inputFontFamily, _TextArea.tokens.inputFontSize, _TextArea.tokens.inputFontStyle, _TextArea.tokens.inputFontWeight, _TextArea.tokens.inputLetterSpacing, _TextArea.tokens.inputLineHeight, _TextArea.tokens.inputColorFocus);
 var StyledHelpers = exports.StyledHelpers = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-pxxv3p-5"
+  componentId: "plasma-new-hope__sc-pxxv3p-6"
 })(["box-sizing:border-box;display:flex;justify-content:space-between;transition:background-color 0.1s ease-in-out;background-color:var(", ");padding-top:var(", ");padding-right:var(", ");padding-bottom:var(", ");padding-left:var(", ");border-bottom-left-radius:var(", ");border-bottom-right-radius:var(", ");"], _TextArea.tokens.helpersBackgroundColor, _TextArea.tokens.helpersPaddingTop, _TextArea.tokens.helpersPaddingRight, _TextArea.tokens.helpersPaddingBottom, _TextArea.tokens.helpersPaddingLeft, _TextArea.tokens.borderRadius, _TextArea.tokens.borderRadius);
 var StyledLeftHelper = exports.StyledLeftHelper = /*#__PURE__*/_styledComponents["default"].span.withConfig({
-  componentId: "plasma-new-hope__sc-pxxv3p-6"
+  componentId: "plasma-new-hope__sc-pxxv3p-7"
 })(["", ";display:block;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");color:var(", ");"], /*#__PURE__*/(0, _mixins.applyEllipsis)(), _TextArea.tokens.helpersFontFamily, _TextArea.tokens.helpersFontSize, _TextArea.tokens.helpersFontStyle, _TextArea.tokens.helpersFontWeight, _TextArea.tokens.helpersLetterSpacing, _TextArea.tokens.helpersLineHeight, _TextArea.tokens.leftHelperColor);
 var StyledRightHelper = exports.StyledRightHelper = /*#__PURE__*/(0, _styledComponents["default"])(StyledLeftHelper).withConfig({
-  componentId: "plasma-new-hope__sc-pxxv3p-7"
+  componentId: "plasma-new-hope__sc-pxxv3p-8"
 })(["color:var(", ");margin-left:auto;"], _TextArea.tokens.rightHelperColor);
 var StyledPlaceholder = exports.StyledPlaceholder = /*#__PURE__*/_styledComponents["default"].label.withConfig({
-  componentId: "plasma-new-hope__sc-pxxv3p-8"
+  componentId: "plasma-new-hope__sc-pxxv3p-9"
 })(["box-sizing:border-box;position:absolute;pointer-events:none;display:inline-flex;align-items:center;transition:all 0.1s ease-in-out;transform-origin:top left;color:var(", ");width:100%;height:auto;top:var(", ");padding-left:var(", ");padding-right:", ";font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _TextArea.tokens.placeholderColor, _TextArea.tokens.inputPaddingTop, _TextArea.tokens.inputPaddingLeft, function (_ref13) {
   var hasContentRight = _ref13.hasContentRight;
   return hasContentRight ? "var(".concat(_TextArea.tokens.inputPaddingRightWithRightContent, ")") : "var(".concat(_TextArea.tokens.inputPaddingRight, ")");
-}, _TextArea.tokens.inputFontFamily, _TextArea.tokens.inputFontSize, _TextArea.tokens.inputFontStyle, _TextArea.tokens.inputFontWeight, _TextArea.tokens.inputLetterSpacing, _TextArea.tokens.inputLineHeight);
+}, _TextArea.tokens.inputFontFamily, _TextArea.tokens.inputFontSize, _TextArea.tokens.inputFontStyle, _TextArea.tokens.inputFontWeight, _TextArea.tokens.inputLetterSpacing, _TextArea.tokens.inputLineHeight);
+var StyledIndicator = exports.StyledIndicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-pxxv3p-10"
+})(["position:absolute;border-radius:50%;background-color:var(", ");&.", "{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}&.", "{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}"], _TextArea.tokens.indicatorColor, _TextArea.classes.outerLabelPlacement, _TextArea.tokens.indicatorSizeOuter, _TextArea.tokens.indicatorSizeOuter, _TextArea.tokens.indicatorLabelPlacementOuter, _TextArea.tokens.indicatorLabelPlacementOuterRight, _TextArea.classes.innerLabelPlacement, _TextArea.tokens.indicatorSizeInner, _TextArea.tokens.indicatorSizeInner, _TextArea.tokens.indicatorLabelPlacementInner, _TextArea.tokens.indicatorLabelPlacementInnerRight);

package/styled-components/cjs/components/TextArea/TextArea.template-doc.mdx

@@ -32,7 +32,7 @@ export function App() {
 ```
 
 ### Размеры компонента
-Высоту и ширину можно регулировать с помощью свойств `height` и `width`, 
+Высоту и ширину можно регулировать с помощью свойств `height` и `width`,
 указав значения в `rem` или соответствующие свойствам css значения.
 `height` и `width` отвечают за **всю** высоту и ширину компонента.
 
@@ -76,7 +76,7 @@ export function App() {
 
 ### Autoresize
 Также можно включить автоматическое регулирование высоты поля ввода по длине контента внутри (параметра `value`).
-Для этого необходимо использовать свойство `autoResize`. 
+Для этого необходимо использовать свойство `autoResize`.
 
 Свойства `minAuto`, `maxAuto` указываются в абсолютных единицах и отвечают за минимальное и максимальное количество строк.
 
@@ -123,4 +123,30 @@ export function App() {
         </div>
     );
 }
-```
+```
+
+
+### Обязательность поля
+Обязательность поля задаётся с помощью свойств `required` и `requiredPlacement`. Где `requiredPlacement` отвечает за выравнивание и принимает значения `"left"` и `"right"`:
+
+```tsx live
+import React from 'react';
+import { TextField } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <TextArea
+                placeholder="Введите значение"
+                required
+            />
+            <TextArea
+                placeholder="Введите значение"
+                label="Заголовок"
+                required
+                requiredPlacement="right"
+            />
+        </div>
+    );
+}
+```

package/styled-components/cjs/components/TextArea/TextArea.tokens.js

@@ -20,7 +20,9 @@ var classes = exports.classes = {
   /** Класс для компонента `StyledPlaceholder` */
   styledPlaceholder: 'textarea-placeholder',
   /** Класс для компонента `StyledHelpers` */
-  styledHelpers: 'textarea-helpers'
+  styledHelpers: 'textarea-helpers',
+  innerLabelPlacement: 'label-placement-inner',
+  outerLabelPlacement: 'label-placement-outer'
 };
 var tokens = exports.tokens = {
   /** Цвет фона для элемента textarea */
@@ -57,6 +59,8 @@ var tokens = exports.tokens = {
   placeholderColor: '--plasma-textarea-placeholder-color',
   /** Цвет элемента placeholder в состоянии focus */
   placeholderColorFocus: '--plasma-textarea-placeholder-color-focus',
+  /** Цвет элемента optional */
+  optionalColor: '--plasma-textarea__optional-color',
   /** Цвет текста для левой подписи снизу */
   leftHelperColor: '--plasma-textarea-left-helper-color',
   /** Цвет текста для правой подписи снизу */
@@ -152,5 +156,12 @@ var tokens = exports.tokens = {
   /** Прозрачность для всего компонента в состоянии disabled */
   disabledOpacity: '--plasma-textarea-disabled-opacity',
   /** Цвет текста для элемента textarea в состоянии disabled */
-  inputColorDisabled: '--plasma-textarea-input-color-disabled'
+  inputColorDisabled: '--plasma-textarea-input-color-disabled',
+  indicatorColor: '--plasma-textarea-indicator-color',
+  indicatorSizeInner: '--plasma-textarea-indicator-size-inner',
+  indicatorSizeOuter: '--plasma-textarea-indicator-size-outer',
+  indicatorLabelPlacementInner: '--plasma-textarea-indicator-placement-inner',
+  indicatorLabelPlacementOuter: '--plasma-textarea-indicator-placement-outer',
+  indicatorLabelPlacementInnerRight: '--plasma-textarea-indicator-placement-inner-right',
+  indicatorLabelPlacementOuterRight: '--plasma-textarea-indicator-placement-outer-right'
 };

package/styled-components/cjs/components/TextArea/variations/_size/tokens.json

@@ -36,5 +36,11 @@
     "--plasma-textarea-helpers-font-style",
     "--plasma-textarea-helpers-font-weight",
     "--plasma-textarea-helpers-letter-spacing",
-    "--plasma-textarea-helpers-line-height"
+    "--plasma-textarea-helpers-line-height",
+    "--plasma-textarea-indicator-size-inner",
+    "--plasma-textarea-indicator-size-outer",
+    "--plasma-textarea-indicator-placement-inner",
+    "--plasma-textarea-indicator-placement-outer",
+    "--plasma-textarea-indicator-placement-inner-right",
+    "--plasma-textarea-indicator-placement-outer-right"
 ]

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

@@ -18,7 +18,7 @@ var _TextField = /*#__PURE__*/require("./TextField.styles");
 var _TextField2 = /*#__PURE__*/require("./TextField.tokens");
 var _ui = /*#__PURE__*/require("./ui");
 var _hooks = /*#__PURE__*/require("./hooks");
-var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "view", "size", "readOnly", "disabled", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
+var _excluded = ["id", "className", "style", "contentLeft", "contentRight", "label", "labelPlacement", "textBefore", "textAfter", "placeholder", "leftHelper", "enumerationType", "requiredPlacement", "view", "size", "readOnly", "disabled", "required", "optional", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
 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); }
@@ -30,7 +30,8 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 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; }
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["display:block;overflow:hidden;"]);
+var optionalText = 'optional';
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["display:block;"]);
 var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
   return /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     var id = _ref.id,
@@ -46,12 +47,17 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
       leftHelper = _ref.leftHelper,
       _ref$enumerationType = _ref.enumerationType,
       enumerationType = _ref$enumerationType === void 0 ? 'plain' : _ref$enumerationType,
+      _ref$requiredPlacemen = _ref.requiredPlacement,
+      requiredPlacement = _ref$requiredPlacemen === void 0 ? 'right' : _ref$requiredPlacemen,
       view = _ref.view,
       size = _ref.size,
       _ref$readOnly = _ref.readOnly,
       readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
       _ref$disabled = _ref.disabled,
       disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      _ref$required = _ref.required,
+      required = _ref$required === void 0 ? false : _ref$required,
+      optional = _ref.optional,
       values = _ref.chips,
       onChange = _ref.onChange,
       onChangeChips = _ref.onChangeChips,
@@ -67,26 +73,37 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
       inputRef: inputRef,
       chipsRefs: chipsRefs
     };
-    var _useState = (0, _react.useState)([]),
+    var _useState = (0, _react.useState)(!!rest.value),
       _useState2 = _slicedToArray(_useState, 2),
-      chips = _useState2[0],
-      setChips = _useState2[1];
+      hasValue = _useState2[0],
+      setHasValue = _useState2[1];
+    var _useState3 = (0, _react.useState)([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      chips = _useState4[0],
+      setChips = _useState4[1];
     var uniqId = (0, _plasmaCore.safeUseId)();
     var innerId = id || uniqId;
     var labelId = (0, _plasmaCore.safeUseId)();
     var helperTextId = (0, _plasmaCore.safeUseId)();
     var isChipEnumeration = enumerationType === 'chip';
-    var hideLabel = (size === 'xs' || isChipEnumeration) && labelPlacement === 'inner';
-    var labelInside = size !== 'xs' && labelPlacement === 'inner';
-    var innerLabelPlacementValue = hideLabel ? 'outer' : labelPlacement;
-    var innerPlaceholderValue = hideLabel ? label : placeholder;
-    var innerLabelValue = hideLabel ? undefined : label;
-    var hideLabelClass = hideLabel && label ? _TextField2.classes.hideLabel : undefined;
-    var labelPlacementClass = _TextField2.classes["".concat(labelPlacement, "LabelPlacement")];
-    var isChipsVisible = isChipEnumeration && (chips === null || chips === void 0 ? void 0 : chips.length);
+    var isChipsVisible = isChipEnumeration && !!(chips !== null && chips !== void 0 && chips.length);
     var withHasChips = isChipsVisible ? _TextField2.classes.hasChips : undefined;
+    var hasLabelValue = !!label;
+    var hasInnerLabel = size !== 'xs' && labelPlacement === 'inner' && !isChipsVisible && hasLabelValue;
+    var hasOuterLabel = labelPlacement === 'outer' && hasLabelValue;
+    var hasPlaceholder = !!placeholder && !hasInnerLabel;
+    var innerLabelValue = hasInnerLabel || hasOuterLabel ? label : undefined;
+    var innerLabelPlacementValue = labelPlacement === 'inner' && !hasInnerLabel ? undefined : labelPlacement;
+    var innerPlaceholderValue = hasPlaceholder ? placeholder : undefined;
+    var placeholderShown = !!innerPlaceholderValue && !hasValue;
+    var requiredPlacementClass = requiredPlacement === 'right' ? 'align-right ' : undefined;
+    var labelPlacementClass = innerLabelPlacementValue ? _TextField2.classes["".concat(innerLabelPlacementValue, "LabelPlacement")] : undefined;
+    var hasValueClass = hasValue ? _TextField2.classes.hasValue : undefined;
     var wrapperWithoutLeftContent = !contentLeft && isChipsVisible ? _TextField2.classes.hasEmptyContentLeft : undefined;
     var wrapperWithoutRightContent = !contentRight && isChipsVisible ? _TextField2.classes.hasEmptyContentRight : undefined;
+    var handleInput = function handleInput(event) {
+      setHasValue(!!event.target.value);
+    };
     var handleChange = function handleChange(event) {
       if (disabled || readOnly) {
         return;
@@ -111,7 +128,8 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
         enumerationType: enumerationType,
         updateChips: updateChips,
         onSearch: onSearch,
-        onChange: onChange
+        onChange: onChange,
+        onEnterDisabled: rest.onEnterDisabled
       }),
       handleInputKeydown = _useKeyNavigation.handleInputKeydown,
       handleChipKeyDown = _useKeyNavigation.handleChipKeyDown,
@@ -152,6 +170,9 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
       })) || [];
       setChips(newChips);
     }, [isChipEnumeration, values]);
+    var innerOptional = Boolean(required ? false : optional);
+    var hasPlaceholderOptional = innerOptional && !innerLabelValue && !hasOuterLabel;
+    var optionalTextNode = innerOptional ? /*#__PURE__*/_react["default"].createElement(_TextField.StyledOptionalText, null, Boolean(hasPlaceholderOptional ? innerPlaceholderValue : innerLabelValue) && '\xa0', optionalText) : null;
     return /*#__PURE__*/_react["default"].createElement(Root, {
       view: view,
       size: size,
@@ -159,14 +180,21 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
       readOnly: !disabled && readOnly,
       labelPlacement: innerLabelPlacementValue,
       onClick: handleInputFocus,
-      className: (0, _utils.cx)(labelPlacementClass, hideLabelClass, _TextField2.classes.textFieldGroupItem, className),
+      className: (0, _utils.cx)(labelPlacementClass, _TextField2.classes.textFieldGroupItem, className),
       style: style
-    }, labelInside || innerLabelValue && /*#__PURE__*/_react["default"].createElement(_TextField.Label, {
+    }, hasOuterLabel && /*#__PURE__*/_react["default"].createElement(_TextField.Label, {
       id: labelId,
       htmlFor: id
-    }, innerLabelValue), /*#__PURE__*/_react["default"].createElement(_TextField.InputWrapper, {
+    }, required && /*#__PURE__*/_react["default"].createElement(_TextField.StyledIndicator, {
+      className: (0, _utils.cx)(_TextField2.classes.outerLabelPlacement, requiredPlacementClass)
+    }), innerLabelValue, optionalTextNode), /*#__PURE__*/_react["default"].createElement(_TextField.InputWrapper
+    // Рефка для внутреннего использования. Не отдается наружу.
+    , {
+      ref: rest.inputWrapperRef,
       className: (0, _utils.cx)(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent)
-    }, contentLeft && /*#__PURE__*/_react["default"].createElement(_TextField.StyledContentLeft, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_TextField.InputLabelWrapper, {
+    }, !hasOuterLabel && required && /*#__PURE__*/_react["default"].createElement(_TextField.StyledIndicator, {
+      className: (0, _utils.cx)(_TextField2.classes.innerLabelPlacement, requiredPlacementClass)
+    }), contentLeft && /*#__PURE__*/_react["default"].createElement(_TextField.StyledContentLeft, null, contentLeft), /*#__PURE__*/_react["default"].createElement(_TextField.InputLabelWrapper, {
       tabIndex: -1,
       ref: contentRef,
       onKeyDown: handleContentKeyDown,
@@ -192,20 +220,22 @@ var textFieldRoot = exports.textFieldRoot = function textFieldRoot(Root) {
         },
         onClick: onChipClick
       });
-    })), /*#__PURE__*/_react["default"].createElement(_TextField.Input, _extends({
+    })), /*#__PURE__*/_react["default"].createElement(_TextField.InputContainer, null, /*#__PURE__*/_react["default"].createElement(_TextField.Input, _extends({
       ref: inputForkRef,
       id: innerId,
       "aria-labelledby": labelId,
       "aria-describedby": helperTextId,
       placeholder: innerPlaceholderValue,
+      className: (0, _utils.cx)(hasValueClass),
       disabled: disabled,
       readOnly: !disabled && readOnly,
+      onInput: handleInput,
       onChange: handleChange,
       onKeyDown: handleOnKeyDown
-    }, rest)), labelInside && /*#__PURE__*/_react["default"].createElement(_TextField.Label, {
+    }, rest)), hasInnerLabel && /*#__PURE__*/_react["default"].createElement(_TextField.Label, {
       id: labelId,
       htmlFor: innerId
-    }, innerLabelValue), textAfter && /*#__PURE__*/_react["default"].createElement(_TextField.StyledTextAfter, null, textAfter)), contentRight && /*#__PURE__*/_react["default"].createElement(_TextField.StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/_react["default"].createElement(_TextField.LeftHelper, {
+    }, innerLabelValue, optionalTextNode), placeholderShown && /*#__PURE__*/_react["default"].createElement(_TextField.InputPlaceholder, null, innerPlaceholderValue, hasPlaceholderOptional && optionalTextNode)), textAfter && /*#__PURE__*/_react["default"].createElement(_TextField.StyledTextAfter, null, textAfter)), contentRight && /*#__PURE__*/_react["default"].createElement(_TextField.StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/_react["default"].createElement(_TextField.LeftHelper, {
       id: helperTextId
     }, leftHelper));
   });

package/styled-components/cjs/components/TextField/TextField.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledTextBefore = exports.StyledTextAfter = exports.StyledContentRight = exports.StyledContentLeft = exports.StyledChips = exports.LeftHelper = exports.Label = exports.InputWrapper = exports.InputLabelWrapper = exports.Input = void 0;
+exports.StyledTextBefore = exports.StyledTextAfter = exports.StyledOptionalText = exports.StyledIndicator = exports.StyledContentRight = exports.StyledContentLeft = exports.StyledChips = exports.LeftHelper = exports.Label = exports.InputWrapper = exports.InputPlaceholder = exports.InputLabelWrapper = exports.InputContainer = exports.Input = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
 var _TextField = /*#__PURE__*/require("./TextField.tokens");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -18,22 +18,34 @@ var StyledChips = exports.StyledChips = /*#__PURE__*/_styledComponents["default"
 })(["display:flex;gap:var(", ");margin-right:var(", ");user-select:none;"], _TextField.tokens.chipGap, _TextField.tokens.chipGap);
 var Input = exports.Input = /*#__PURE__*/_styledComponents["default"].input.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-3"
-})(["box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;flex:1;min-width:60%;"]);
-var Label = exports.Label = /*#__PURE__*/_styledComponents["default"].label.withConfig({
+})(["box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;width:100%;z-index:1;&::placeholder{opacity:0;}"]);
+var InputContainer = exports.InputContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-4"
-})([""]);
-var StyledContentLeft = exports.StyledContentLeft = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+})(["position:relative;flex:1;min-width:60%;"]);
+var InputPlaceholder = exports.InputPlaceholder = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-5"
+})(["position:absolute;top:0;left:0;right:0;bottom:0;z-index:0;white-space:nowrap;pointer-events:none;user-select:none;font:inherit;letter-spacing:inherit;line-height:inherit;color:var(", ");"], _TextField.tokens.placeholderColor);
+var Label = exports.Label = /*#__PURE__*/_styledComponents["default"].label.withConfig({
+  componentId: "plasma-new-hope__sc-g4vxbb-6"
+})(["position:relative;display:inline-flex;"]);
+var StyledContentLeft = exports.StyledContentLeft = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-g4vxbb-7"
 })(["margin:var(", ");line-height:0;"], _TextField.tokens.leftContentMargin);
 var StyledContentRight = exports.StyledContentRight = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-g4vxbb-6"
+  componentId: "plasma-new-hope__sc-g4vxbb-8"
 })(["margin:var(", ");line-height:0;"], _TextField.tokens.rightContentMargin);
 var LeftHelper = exports.LeftHelper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-g4vxbb-7"
+  componentId: "plasma-new-hope__sc-g4vxbb-9"
 })([""]);
 var StyledTextBefore = exports.StyledTextBefore = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-g4vxbb-8"
+  componentId: "plasma-new-hope__sc-g4vxbb-10"
 })([""]);
 var StyledTextAfter = exports.StyledTextAfter = /*#__PURE__*/_styledComponents["default"].div.withConfig({
-  componentId: "plasma-new-hope__sc-g4vxbb-9"
-})([""]);
+  componentId: "plasma-new-hope__sc-g4vxbb-11"
+})([""]);
+var StyledOptionalText = exports.StyledOptionalText = /*#__PURE__*/_styledComponents["default"].span.withConfig({
+  componentId: "plasma-new-hope__sc-g4vxbb-12"
+})(["color:var(", ");"], _TextField.tokens.optionalColor);
+var StyledIndicator = exports.StyledIndicator = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-g4vxbb-13"
+})(["position:absolute;border-radius:50%;background-color:var(", ");&.", "{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}&.", "{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}"], _TextField.tokens.indicatorColor, _TextField.classes.outerLabelPlacement, _TextField.tokens.indicatorSizeOuter, _TextField.tokens.indicatorSizeOuter, _TextField.tokens.indicatorLabelPlacementOuter, _TextField.tokens.indicatorLabelPlacementOuterRight, _TextField.classes.innerLabelPlacement, _TextField.tokens.indicatorSizeInner, _TextField.tokens.indicatorSizeInner, _TextField.tokens.indicatorLabelPlacementInner, _TextField.tokens.indicatorLabelPlacementInnerRight);

package/styled-components/cjs/components/TextField/TextField.template-doc.mdx

@@ -112,7 +112,7 @@ export function App() {
 ```
 
 ### Режим ввода
-С помощью свойства `enumarationType` можно вводить элементы как теги. 
+С помощью свойства `enumerationType` можно вводить элементы как теги.
 По нажатию Enter, после ввода нужного текста, он преобразуется в Chip:
 
 ```tsx live
@@ -134,3 +134,29 @@ export function App() {
     );
 }
 ```
+
+
+### Обязательность поля
+Обязательность поля задаётся с помощью свойств `required` и `requiredPlacement`. Где `requiredPlacement` отвечает за выравнивание и принимает значения `"left"` и `"right"`:
+
+```tsx live
+import React from 'react';
+import { TextField } from '@salutejs/{{ package }}';
+
+export function App() {
+    return (
+        <div>
+            <TextField
+                placeholder="Введите значение"
+                required
+            />
+            <TextField
+                placeholder="Введите значение"
+                label="Заголовок"
+                required
+                requiredPlacement="right"
+            />
+        </div>
+    );
+}
+```

package/styled-components/cjs/components/TextField/TextField.tokens.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.tokens = exports.classes = void 0;
 var classes = exports.classes = {
   hasChips: 'has-chips',
+  hasValue: 'has-value',
   hasEmptyContentLeft: 'has-empty-content-left',
   hasEmptyContentRight: 'has-empty-content-right',
   innerLabelPlacement: 'label-placement-inner',
@@ -29,6 +30,7 @@ var tokens = exports.tokens = {
   /** Цвет каретки */
   caretColor: '--plasma-textfield__caret-color',
   placeholderColor: '--plasma-textfield__placeholder-color',
+  optionalColor: '--plasma-textfield__optional-color',
   height: '--plasma-textfield-height',
   borderWidth: '--plasma-textfield-border-width',
   borderRadius: '--plasma-textfield-border-radius',
@@ -113,5 +115,12 @@ var tokens = exports.tokens = {
   chipClearContentMarginLeft: '--plasma-textfield__chip-clear-content-margin-left',
   chipClearContentMarginRight: '--plasma-textfield__chip-clear-content-margin-right',
   chipOpacityReadonly: '--plasma-textfield__chip-opacity-readonly',
-  focusColor: '--plasma-textfield-focus-color'
+  focusColor: '--plasma-textfield-focus-color',
+  indicatorColor: '--plasma-textfield__indicator-color',
+  indicatorSizeInner: '--plasma-textfield__indicator-size-inner',
+  indicatorSizeOuter: '--plasma-textfield__indicator-size-outer',
+  indicatorLabelPlacementInner: '--plasma-textfield__indicator-placement-inner',
+  indicatorLabelPlacementOuter: '--plasma-textfield__indicator-placement-outer',
+  indicatorLabelPlacementInnerRight: '--plasma-textfield__indicator-placement-inner-right',
+  indicatorLabelPlacementOuterRight: '--plasma-textfield__indicator-placement-outer-right'
 };

package/styled-components/cjs/components/TextField/hooks/useKeyNavigation.js

@@ -34,7 +34,9 @@ var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref
     enumerationType = _ref.enumerationType,
     updateChips = _ref.updateChips,
     onChange = _ref.onChange,
-    onSearch = _ref.onSearch;
+    onSearch = _ref.onSearch,
+    _ref$onEnterDisabled = _ref.onEnterDisabled,
+    onEnterDisabled = _ref$onEnterDisabled === void 0 ? false : _ref$onEnterDisabled;
   var _useState = (0, _react.useState)(-1),
     _useState2 = _slicedToArray(_useState, 2),
     activeChipIndex = _useState2[0],
@@ -46,22 +48,24 @@ var useKeyNavigation = exports.useKeyNavigation = function useKeyNavigation(_ref
     if (disabled || readOnly) {
       return;
     }
-    if (event.key === Keys.Enter && enumerationType === 'chip' && value) {
-      var nextIndex = (chips === null || chips === void 0 ? void 0 : chips.length) || 0;
-      var newChips = [].concat(_toConsumableArray(chips), [{
-        id: "".concat(nextIndex, "_").concat(value),
-        text: value
-      }]);
-      var newValues = newChips.map(function (_ref3) {
-        var text = _ref3.text;
-        return text;
-      });
-      updateChips(newChips, newValues);
-      event.target.value = '';
-      onChange === null || onChange === void 0 || onChange(event);
-    }
-    if (event.key === Keys.Enter && onSearch) {
-      onSearch(value, event);
+    if (event.key === Keys.Enter && !onEnterDisabled) {
+      if (enumerationType === 'chip' && value) {
+        var nextIndex = (chips === null || chips === void 0 ? void 0 : chips.length) || 0;
+        var newChips = [].concat(_toConsumableArray(chips), [{
+          id: "".concat(nextIndex, "_").concat(value),
+          text: value
+        }]);
+        var newValues = newChips.map(function (_ref3) {
+          var text = _ref3.text;
+          return text;
+        });
+        updateChips(newChips, newValues);
+        event.target.value = '';
+        onChange === null || onChange === void 0 || onChange(event);
+      }
+      if (onSearch) {
+        onSearch(value, event);
+      }
     }
     if (event.key === Keys.Backspace && chips.length && (inputRef === null || inputRef === void 0 || (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.selectionStart) === 0) {
       var _newChips = _toConsumableArray(chips);