@salutejs/plasma-new-hope 0.122.0-canary.1349.10357757918.0 → 0.122.0-canary.1352.10359015289.0

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

@@ -40,14 +40,11 @@ export var IconWrapper = /*#__PURE__*/styled.div.withConfig({
 });
 export var StyledText = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-fr2h0y-6"
-})(["", ";flex:1;color:", ";"], /*#__PURE__*/applyEllipsis(), function (_ref5) {
-  var color = _ref5.color;
-  return color || 'inherit';
-});
+})(["", ";flex:1;"], /*#__PURE__*/applyEllipsis());
 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: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;
+})(["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 (_ref5) {
+  var variant = _ref5.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.itemBorderRadius, classes.dropdownItemIsDisabled, constants.itemBackgroundHover, classes.dropdownItemIsActive, constants.itemBackgroundHover, classes.dropdownItemIsDisabled, constants.opacity, /*#__PURE__*/addFocus({
   outlineSize: '0.0625rem',

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

@@ -16,8 +16,7 @@ export var Target = function Target(_ref) {
     renderValue = _ref.renderValue,
     focusedPath = _ref.focusedPath,
     focusedToValueMap = _ref.focusedToValueMap,
-    selectProps = _ref.selectProps,
-    separator = _ref.separator;
+    selectProps = _ref.selectProps;
   return selectProps.target === 'button-like' ? /*#__PURE__*/React.createElement(Button, {
     opened: opened,
     value: value,
@@ -29,8 +28,7 @@ export var Target = function Target(_ref) {
     renderValue: renderValue,
     focusedPath: focusedPath,
     focusedToValueMap: focusedToValueMap,
-    selectProps: selectProps,
-    separator: separator
+    selectProps: selectProps
   }) : /*#__PURE__*/React.createElement(Textfield, {
     opened: opened,
     value: value,

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

@@ -39,9 +39,7 @@ export var Button = function Button(_ref) {
     "aria-activedescendant": getActiveDescendant(),
     "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.createElement(Label, null, getButtonLabel({
+  }, selectProps.renderTarget ? selectProps.renderTarget(value) : /*#__PURE__*/React.createElement(Label, null, getButtonLabel({
     value: value,
     valueToItemMap: valueToItemMap,
     label: label,

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

@@ -15,7 +15,7 @@ var getLabel = function getLabel(_ref) {
     labelPlacement = _ref.labelPlacement,
     size = _ref.size,
     renderValue = _ref.renderValue;
-  if (isEmpty(value) && typeof value !== 'number') {
+  if (isEmpty(value)) {
     if (!label || labelPlacement === 'outer') {
       return /*#__PURE__*/React.createElement(Placeholder, null, placeholder);
     }
@@ -31,7 +31,7 @@ var getLabel = function getLabel(_ref) {
     return value.map(function (currentValue, index) {
       var itemLabel = valueToItemMap.get(currentValue).label;
       return /*#__PURE__*/React.createElement(Chip, {
-        text: renderValue ? renderValue(valueToItemMap.get(currentValue)) : itemLabel,
+        text: renderValue ? renderValue(currentValue, itemLabel) : itemLabel,
         onClick: function onClick(e) {
           e.stopPropagation();
           onChipClick(currentValue);
@@ -42,9 +42,9 @@ var getLabel = function getLabel(_ref) {
   }
   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(Value, null, renderValue ? renderValue(value, itemLabel) : 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));
+  return /*#__PURE__*/React.createElement(InnerLabelWrapper, null, size !== 'xs' && /*#__PURE__*/React.createElement(InnerLabel, null, label), /*#__PURE__*/React.createElement(Value, null, renderValue ? renderValue(value, itemLabel) : itemLabel));
 };
 export var Textfield = function Textfield(_ref2) {
   var opened = _ref2.opened,
@@ -85,9 +85,7 @@ export var Textfield = function Textfield(_ref2) {
     "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, null, getLabel({
+  }, /*#__PURE__*/React.createElement(Wrapper, null, selectProps !== null && selectProps !== void 0 && selectProps.renderTarget ? selectProps.renderTarget(value) : /*#__PURE__*/React.createElement(React.Fragment, null, contentLeft && (!selectProps.multiselect || isEmpty(value)) && /*#__PURE__*/React.createElement(ContentLeftWrapper, null, contentLeft), /*#__PURE__*/React.createElement(ChipWrapper, null, getLabel({
     value: value,
     valueToItemMap: valueToItemMap,
     onChipClick: onChipClick,

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

@@ -3,9 +3,9 @@ var getLabel = function getLabel(_ref) {
   var value = _ref.value,
     valueToItemMap = _ref.valueToItemMap,
     renderValue = _ref.renderValue;
-  var _ref2 = valueToItemMap.get(value),
+  var _ref2 = valueToItemMap.get(value === null || value === void 0 ? void 0 : value.toString()),
     label = _ref2.label;
-  return renderValue ? renderValue(valueToItemMap.get(value)) : label;
+  return renderValue ? renderValue(value, label) : label;
 };
 export var getButtonLabel = function getButtonLabel(_ref3) {
   var value = _ref3.value,
@@ -13,7 +13,7 @@ export var getButtonLabel = function getButtonLabel(_ref3) {
     label = _ref3.label,
     renderValue = _ref3.renderValue,
     selectProps = _ref3.selectProps;
-  if (isEmpty(value) && typeof value !== 'number') {
+  if (isEmpty(value)) {
     return label || '';
   }
   if (selectProps.multiselect && selectProps.isTargetAmount) {
@@ -29,8 +29,8 @@ export var getButtonLabel = function getButtonLabel(_ref3) {
     }).join(', ');
   }
   return getLabel({
+    renderValue: renderValue,
     value: value,
-    valueToItemMap: valueToItemMap,
-    renderValue: renderValue
+    valueToItemMap: valueToItemMap
   });
 };

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

@@ -4,5 +4,4 @@ export { updateAncestors } from './updateAncestors';
 export { updateSingleAncestors } from './updateSingleAncestors';
 export { sizeToIconSize } from './sizeToIconSize';
 export { getCorrectHeight } from './getCorrectHeight';
-export { getButtonLabel } from './getButtonLabel';
-export { getView } from './getView';
+export { getButtonLabel } from './getButtonLabel';

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

@@ -1,5 +1,5 @@
 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); }
-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", "requiredAlign", "size", "view", "id", "style", "className", "readOnly", "rows", "cols", "onChange"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -24,11 +24,12 @@ import { useResizeObserver } from '@salutejs/plasma-core';
 import { cx } from '../../utils';
 import { applyDynamicLabel } from './mixins';
 import { useAutoResize, ROOT_FONT_SIZE } from './hooks';
-import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, StyledLabel, StyledPlaceholder, StyledTextArea, StyledTextAreaWrapper, StyledContainer } from './TextArea.styles';
+import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, StyledLabel, StyledPlaceholder, StyledTextArea, StyledTextAreaWrapper, StyledContainer, StyledIndicator } from './TextArea.styles';
 import { classes } from './TextArea.tokens';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
 import { base as disabledCSS } from './variations/_disabled/base';
+import { base as requiredCSS } from './variations/_required/base';
 var innerPlaceholderUp = classes.innerPlaceholderUp,
   focusedOuterPlaceholderColor = classes.focusedOuterPlaceholderColor,
   hidePlaceHolder = classes.hidePlaceHolder,
@@ -89,6 +90,8 @@ export var textAreaRoot = function textAreaRoot(Root) {
       width = props.width,
       value = props.value,
       disabled = props.disabled,
+      required = props.required,
+      requiredAlign = props.requiredAlign,
       size = props.size,
       view = props.view,
       id = props.id,
@@ -117,6 +120,8 @@ export var textAreaRoot = function textAreaRoot(Root) {
     var textareaHelperId = id ? "".concat(id, "-helper") : undefined;
     var applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;
     var placeLabel = labelPlacement === 'inner' && label && size !== 'xs' ? label : placeholder;
+    var hasOuterLabel = Boolean(label && labelPlacement === 'outer');
+    var requiredAlignClass = requiredAlign === 'right' ? 'align-right ' : undefined;
     useResizeObserver(outerRef, function (currentElement) {
       var inlineWidth = currentElement.style.width;
       if (inlineWidth || cols) {
@@ -155,16 +160,21 @@ export var textAreaRoot = function textAreaRoot(Root) {
       size: size,
       disabled: disabled,
       readOnly: readOnly,
+      required: required,
       style: _objectSpread({
         width: helperWidth
       }, style),
       className: className
-    }, label && labelPlacement === 'outer' && /*#__PURE__*/React.createElement(StyledLabel, null, label), /*#__PURE__*/React.createElement(StyledContainer, {
+    }, hasOuterLabel && /*#__PURE__*/React.createElement(StyledLabel, null, required && /*#__PURE__*/React.createElement(StyledIndicator, {
+      className: cx('placement-outer', requiredAlignClass)
+    }), label), /*#__PURE__*/React.createElement(StyledContainer, {
       className: cx.apply(void 0, [styledContainer].concat(_toConsumableArray(dynamicLabelClasses))),
       width: helperWidth,
       onFocus: onFocusHandler,
       onBlur: onBlurHandler
-    }, contentRight && /*#__PURE__*/React.createElement(StyledContent, null, contentRight), /*#__PURE__*/React.createElement(StyledTextAreaWrapper, {
+    }, required && !hasOuterLabel && /*#__PURE__*/React.createElement(StyledIndicator, {
+      className: cx('placement-inner', requiredAlignClass)
+    }), contentRight && /*#__PURE__*/React.createElement(StyledContent, null, contentRight), /*#__PURE__*/React.createElement(StyledTextAreaWrapper, {
       className: styledTextAreaWrapper,
       hasHelper: hasHelper
     }, /*#__PURE__*/React.createElement(StyledTextArea, _extends({
@@ -212,6 +222,10 @@ export var textAreaConfig = {
       css: disabledCSS,
       attrs: true
     },
+    required: {
+      css: requiredCSS,
+      attrs: true
+    },
     readOnly: {
       attrs: true
     }

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

@@ -3,7 +3,7 @@ import { applyEllipsis } from '../../mixins';
 import { tokens } from './TextArea.tokens';
 export var StyledLabel = /*#__PURE__*/styled.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(", ");"], tokens.labelMarginBottom, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
+})(["position:relative;display:inline-block;margin-bottom:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.labelMarginBottom, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
 export var StyledTextAreaWrapper = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-pxxv3p-1"
 })(["background-color:var(", ");padding-top:var(", ");padding-bottom:", ";border-radius:", ";"], tokens.inputBackgroundColor, tokens.inputPaddingTop, function (_ref) {
@@ -67,4 +67,7 @@ export var StyledPlaceholder = /*#__PURE__*/styled.label.withConfig({
 })(["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(", ");"], tokens.placeholderColor, tokens.inputPaddingTop, tokens.inputPaddingLeft, function (_ref13) {
   var hasContentRight = _ref13.hasContentRight;
   return hasContentRight ? "var(".concat(tokens.inputPaddingRightWithRightContent, ")") : "var(".concat(tokens.inputPaddingRight, ")");
-}, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
+}, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
+export var StyledIndicator = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-pxxv3p-9"
+})(["position:absolute;border-radius:50%;background-color:var(", ");&.placement-outer{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}&.placement-inner{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}"], tokens.indicatorColor, tokens.indicatorSizeOuter, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementOuterRight, tokens.indicatorSizeInner, tokens.indicatorSizeInner, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementInnerRight);

package/styled-components/es/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` и `requiredAlign`. Где `requiredAlign` отвечает за выравнивание и принимает значения `"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
+                requiredAlign="right"
+            />
+        </div>
+    );
+}
+```

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

@@ -146,5 +146,12 @@ export var 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/es/components/TextArea/variations/_required/base.js

@@ -0,0 +1,2 @@
+import { css } from 'styled-components';
+export var base = /*#__PURE__*/css([""]);

package/styled-components/es/components/TextArea/variations/_required/tokens.json

@@ -0,0 +1 @@
+["--plasma-textarea-indicator-color"]

package/styled-components/es/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/es/components/TextField/TextField.js

@@ -1,4 +1,4 @@
-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", "requiredAlign", "view", "size", "readOnly", "disabled", "required", "chips", "onChange", "onChangeChips", "onSearch", "onKeyDown"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -16,12 +16,13 @@ import { base as sizeCSS } from './variations/_size/base';
 import { base as viewCSS } from './variations/_view/base';
 import { base as disabledCSS } from './variations/_disabled/base';
 import { base as readOnlyCSS } from './variations/_read-only/base';
+import { base as requiredCSS } from './variations/_required/base';
 import { base as labelPlacementCSS } from './variations/_label-placement/base';
-import { Input, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips, StyledTextBefore, StyledTextAfter } from './TextField.styles';
+import { Input, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips, StyledTextBefore, StyledTextAfter, StyledIndicator } from './TextField.styles';
 import { classes } from './TextField.tokens';
 import { TextFieldChip } from './ui';
 import { useKeyNavigation } from './hooks';
-export var base = /*#__PURE__*/css(["display:block;overflow:hidden;"]);
+export var base = /*#__PURE__*/css(["display:block;"]);
 export var textFieldRoot = function textFieldRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, ref) {
     var id = _ref.id,
@@ -37,12 +38,16 @@ export var textFieldRoot = function textFieldRoot(Root) {
       leftHelper = _ref.leftHelper,
       _ref$enumerationType = _ref.enumerationType,
       enumerationType = _ref$enumerationType === void 0 ? 'plain' : _ref$enumerationType,
+      _ref$requiredAlign = _ref.requiredAlign,
+      requiredAlign = _ref$requiredAlign === void 0 ? 'left' : _ref$requiredAlign,
       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,
       values = _ref.chips,
       onChange = _ref.onChange,
       onChangeChips = _ref.onChangeChips,
@@ -72,6 +77,8 @@ export var textFieldRoot = function textFieldRoot(Root) {
     var innerLabelPlacementValue = hideLabel ? 'outer' : labelPlacement;
     var innerPlaceholderValue = hideLabel ? label : placeholder;
     var innerLabelValue = hideLabel ? undefined : label;
+    var hasOuterLabel = Boolean(!labelInside && innerLabelValue);
+    var requiredAlignClass = requiredAlign === 'right' ? 'align-right ' : undefined;
     var hideLabelClass = hideLabel && label ? classes.hideLabel : undefined;
     var labelPlacementClass = classes["".concat(labelPlacement, "LabelPlacement")];
     var isChipsVisible = isChipEnumeration && (chips === null || chips === void 0 ? void 0 : chips.length);
@@ -147,17 +154,22 @@ export var textFieldRoot = function textFieldRoot(Root) {
       view: view,
       size: size,
       disabled: disabled,
+      required: required,
       readOnly: !disabled && readOnly,
       labelPlacement: innerLabelPlacementValue,
       onClick: handleInputFocus,
       className: cx(labelPlacementClass, hideLabelClass, className),
       style: style
-    }, labelInside || innerLabelValue && /*#__PURE__*/React.createElement(Label, {
+    }, hasOuterLabel && /*#__PURE__*/React.createElement(Label, {
       id: labelId,
       htmlFor: id
-    }, innerLabelValue), /*#__PURE__*/React.createElement(InputWrapper, {
+    }, required && /*#__PURE__*/React.createElement(StyledIndicator, {
+      className: cx('placement-outer', requiredAlignClass)
+    }), innerLabelValue), /*#__PURE__*/React.createElement(InputWrapper, {
       className: cx(withHasChips, wrapperWithoutLeftContent, wrapperWithoutRightContent)
-    }, contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(InputLabelWrapper, {
+    }, !hasOuterLabel && required && /*#__PURE__*/React.createElement(StyledIndicator, {
+      className: cx('placement-inner', requiredAlignClass)
+    }), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(InputLabelWrapper, {
       tabIndex: -1,
       ref: contentRef,
       onKeyDown: handleContentKeyDown,
@@ -221,6 +233,10 @@ export var textFieldConfig = {
       css: readOnlyCSS,
       attrs: true
     },
+    required: {
+      css: requiredCSS,
+      attrs: true
+    },
     labelPlacement: {
       css: labelPlacementCSS
     }

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

@@ -14,7 +14,7 @@ export var Input = /*#__PURE__*/styled.input.withConfig({
 })(["box-sizing:border-box;appearance:none;border:0;padding:0;background-color:transparent;outline:none;flex:1;min-width:60%;"]);
 export var Label = /*#__PURE__*/styled.label.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-4"
-})([""]);
+})(["position:relative;"]);
 export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-5"
 })(["margin:var(", ");line-height:0;"], tokens.leftContentMargin);
@@ -29,4 +29,7 @@ export var StyledTextBefore = /*#__PURE__*/styled.div.withConfig({
 })([""]);
 export var StyledTextAfter = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-9"
-})([""]);
+})([""]);
+export var StyledIndicator = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-g4vxbb-10"
+})(["position:absolute;border-radius:50%;background-color:var(", ");&.placement-outer{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}&.placement-inner{width:var(", ");height:var(", ");inset:var(", ");&.align-right{inset:var(", ");}}"], tokens.indicatorColor, tokens.indicatorSizeOuter, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementOuterRight, tokens.indicatorSizeInner, tokens.indicatorSizeInner, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementInnerRight);

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

@@ -112,7 +112,7 @@ export function App() {
 ```
 
 ### Режим ввода
-С помощью свойства `enumarationType` можно вводить элементы как теги. 
+С помощью свойства `enumarationType` можно вводить элементы как теги.
 По нажатию Enter, после ввода нужного текста, он преобразуется в Chip:
 
 ```tsx live
@@ -134,3 +134,29 @@ export function App() {
     );
 }
 ```
+
+
+### Обязательность поля
+Обязательность поля задаётся с помощью свойств `required` и `requiredAlign`. Где `requiredAlign` отвечает за выравнивание и принимает значения `"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
+                requiredAlign="right"
+            />
+        </div>
+    );
+}
+```

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

@@ -106,5 +106,12 @@ export var 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/es/components/TextField/variations/_label-placement/base.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { classes, tokens } from '../../TextField.tokens';
 import { Input, Label, StyledTextAfter, StyledTextBefore } from '../../TextField.styles';
-export var base = /*#__PURE__*/css(["&.", "{", "{display:block;margin-bottom:var(", ");color:var(", ");}}&.", "{&:not(.", "){", "{padding:var(", ");}", ",", "{padding:var(", ");}}", ":focus ~ ", ",", ":not(:placeholder-shown) ~ ", "{height:auto;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}&:not(.", "){", ":not(:focus)::placeholder{color:transparent;}", ":focus::placeholder{color:transparent;}}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;transition:padding 0.1s ease-in-out,height 0s;height:var(", ");padding-top:calc(var(", ") / 4);padding-bottom:calc(var(", ") / 4);}}"], classes.outerLabelPlacement, Label, tokens.labelOffset, tokens.labelColor, classes.innerLabelPlacement, classes.hideLabel, Input, tokens.contentLabelInnerPadding, StyledTextAfter, StyledTextBefore, tokens.contentLabelInnerPadding, Input, Label, Input, Label, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, classes.hideLabel, Input, Input, Label, tokens.placeholderColor, tokens.height, tokens.height, tokens.height);
+export var base = /*#__PURE__*/css(["&.", "{", "{position:relative;display:inline-block;margin-bottom:var(", ");color:var(", ");}}&.", "{&:not(.", "){", "{padding:var(", ");}", ",", "{padding:var(", ");}}", ":focus ~ ", ",", ":not(:placeholder-shown) ~ ", "{height:auto;padding:var(", ");font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");}&:not(.", "){", ":not(:focus)::placeholder{color:transparent;}", ":focus::placeholder{color:transparent;}}", "{color:var(", ");pointer-events:none;position:absolute;top:0;display:flex;align-items:center;box-sizing:border-box;transition:padding 0.1s ease-in-out,height 0s;height:var(", ");padding-top:calc(var(", ") / 4);padding-bottom:calc(var(", ") / 4);}}"], classes.outerLabelPlacement, Label, tokens.labelOffset, tokens.labelColor, classes.innerLabelPlacement, classes.hideLabel, Input, tokens.contentLabelInnerPadding, StyledTextAfter, StyledTextBefore, tokens.contentLabelInnerPadding, Input, Label, Input, Label, tokens.labelInnerPadding, tokens.labelInnerFontFamily, tokens.labelInnerFontSize, tokens.labelInnerFontStyle, tokens.labelInnerFontWeight, tokens.labelInnerLetterSpacing, tokens.labelInnerLineHeight, classes.hideLabel, Input, Input, Label, tokens.placeholderColor, tokens.height, tokens.height, tokens.height);

package/styled-components/es/components/TextField/variations/_required/base.js

@@ -0,0 +1,2 @@
+import { css } from 'styled-components';
+export var base = /*#__PURE__*/css([""]);

package/styled-components/es/components/TextField/variations/_required/tokens.json

@@ -0,0 +1 @@
+["--plasma-textfield-indicator-color"]

package/styled-components/es/components/TextField/variations/_size/tokens.json

@@ -2,5 +2,11 @@
     "--plasma-textfield-height",
     "--plasma-textfield-padding",
     "--plasma-textfield-radius",
+    "--plasma-textfield-indicator-size-inner",
+    "--plasma-textfield-indicator-size-outer",
+    "--plasma-textfield-indicator-placement-inner",
+    "--plasma-textfield-indicator-placement-outer",
+    "--plasma-textfield-indicator-placement-inner-right",
+    "--plasma-textfield-indicator-placement-outer-right",
     { "name": "typography", "type": "enum", "value": "typo:body" }
 ]

package/styled-components/es/examples/plasma_b2c/components/Select/Select.stories.tsx

@@ -60,23 +60,9 @@ const meta: Meta<StorySelectProps> = {
                 type: 'select',
             },
         },
-        listWidth: {
-            control: {
-                type: 'text',
-            },
-        },
-        listOverflow: {
-            control: {
-                type: 'text',
-            },
-        },
-        listHeight: {
-            control: {
-                type: 'text',
-            },
-        },
     },
     args: {
+        multiselect: false,
         target: 'textfield-like',
         label: 'Label',
         labelPlacement: 'outer',
@@ -89,27 +75,7 @@ const meta: Meta<StorySelectProps> = {
         isTargetAmount: false,
         variant: 'normal',
         disabled: false,
-    },
-    parameters: {
-        controls: {
-            include: [
-                'target',
-                'size',
-                'view',
-                'chipView',
-                'enableContentLeft',
-                'label',
-                'labelPlacement',
-                'placeholder',
-                'helperText',
-                'isTargetAmount',
-                'variant',
-                'disabled',
-                'listWidth',
-                'listOverflow',
-                'listHeight',
-            ],
-        },
+        separator: '',
     },
 };
 
@@ -388,8 +354,8 @@ const PredefinedStory = (args: StorySelectProps) => {
 
             <Select
                 {...args}
-                items={items}
                 multiselect
+                items={items}
                 value={valueMultiple}
                 onChange={setValueMultiple}
                 contentLeft={args.enableContentLeft ? <IconDone size="s" /> : undefined}
@@ -399,6 +365,11 @@ const PredefinedStory = (args: StorySelectProps) => {
 };
 
 export const Predefined: StoryObj<StorySelectProps> = {
+    parameters: {
+        controls: {
+            exclude: ['multiselect'],
+        },
+    },
     render: (args) => <PredefinedStory {...args} />,
 };
 
@@ -824,7 +795,19 @@ const CommonStory = (args: StorySelectProps) => {
 export const Common: StoryObj<StorySelectProps> = {
     parameters: {
         controls: {
-            exclude: ['target', 'view'],
+            include: [
+                'size',
+                'enableContentLeft',
+                'chipView',
+                'label',
+                'labelPlacement',
+                'placeholder',
+                'helperText',
+                'isTargetAmount',
+                'variant',
+                'disabled',
+                'separator',
+            ],
         },
     },
     argTypes: {