@salutejs/plasma-new-hope 0.138.0-canary.1415.10666679454.0 → 0.139.0-canary.1352.10686935940.0

package/styled-components/cjs/examples/plasma_web/components/TextFieldGroup/TextFieldGroup.stories.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+import { TextField } from '../TextField/TextField';
+
+import { TextFieldGroup } from './TextFieldGroup';
+
+type StoryProps = Omit<ComponentProps<typeof TextFieldGroup>, 'gap'> & {
+    itemsCount?: number;
+    gapDefaultShape?: string;
+    gapSegmentedShape?: string;
+};
+type Story = StoryObj<StoryProps>;
+
+const sizes = ['l', 'm', 's', 'xs'];
+const orientationValues = ['horizontal', 'vertical'];
+const gapDefaultValues = ['dense', 'wide'];
+const gapSegmentedValues = ['none', 'dense'];
+const shapeValues = ['segmented', 'default'];
+const stretchingValues = ['auto', 'filled'];
+
+const meta: Meta<typeof TextFieldGroup> = {
+    title: 'plasma_web/TextFieldGroup',
+    decorators: [WithTheme],
+    argTypes: {
+        size: {
+            options: sizes,
+            control: {
+                type: 'select',
+            },
+        },
+        orientation: {
+            options: orientationValues,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        shape: {
+            options: shapeValues,
+            control: {
+                type: 'select',
+            },
+        },
+        stretching: {
+            options: stretchingValues,
+            control: {
+                type: 'select',
+            },
+        },
+        ...disableProps(['gap']),
+    },
+};
+
+export default meta;
+
+export const Default: Story = {
+    argTypes: {
+        gapDefaultShape: {
+            options: gapDefaultValues,
+            control: { type: 'select' },
+            if: { arg: 'shape', eq: 'default' },
+        },
+        gapSegmentedShape: {
+            options: gapSegmentedValues,
+            control: { type: 'select' },
+            if: { arg: 'shape', eq: 'segmented' },
+        },
+    },
+    args: {
+        size: 'm',
+        shape: 'default',
+        gapDefaultShape: 'dense',
+        gapSegmentedShape: 'dense',
+        orientation: 'horizontal',
+        itemsCount: 5,
+        stretching: 'auto',
+    },
+    render: ({ itemsCount, gapDefaultShape, gapSegmentedShape, ...args }: StoryProps) => {
+        return (
+            <TextFieldGroup {...args} gap={(gapDefaultShape || gapSegmentedShape) as any}>
+                {Array(itemsCount)
+                    .fill(true)
+                    .map((_, i) => (
+                        <TextField placeholder={`input #${i}`} />
+                    ))}
+            </TextFieldGroup>
+        );
+    },
+};
+
+export const CustomTextFields: Story = {
+    args: {
+        ...Default.args,
+        isCommonTextFieldStyles: false,
+    },
+    argTypes: {
+        ...Default.argTypes,
+        ...disableProps(['itemsCount']),
+    },
+    render: ({ gapDefaultShape, gapSegmentedShape, ...args }: StoryProps) => {
+        return (
+            <>
+                <h3>Группа TextField с разными размерами</h3>
+                <TextFieldGroup {...args} gap={(gapDefaultShape || gapSegmentedShape) as any}>
+                    <TextField placeholder="Размер l" size="l" />
+                    <TextField placeholder="Размер m" size="m" />
+                    <TextField placeholder="Размер s" size="s" />
+                    <TextField placeholder="Размер xs" size="xs" />
+                </TextFieldGroup>
+            </>
+        );
+    },
+};

package/styled-components/cjs/index.js

@@ -190,14 +190,14 @@ Object.keys(_TextField).forEach(function (key) {
     }
   });
 });
-var _InputGroup = /*#__PURE__*/require("./components/InputGroup");
-Object.keys(_InputGroup).forEach(function (key) {
+var _TextFieldGroup = /*#__PURE__*/require("./components/TextFieldGroup");
+Object.keys(_TextFieldGroup).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _InputGroup[key]) return;
+  if (key in exports && exports[key] === _TextFieldGroup[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _InputGroup[key];
+      return _TextFieldGroup[key];
     }
   });
 });

package/styled-components/es/components/Popup/PopupContext.js

@@ -26,7 +26,7 @@ export var usePopupContext = function usePopupContext() {
 };
 export var PopupProvider = function PopupProvider(_ref) {
   var children = _ref.children;
-  var prevBodyOverflowY = useRef(document.body.style.overflowY);
+  var prevBodyOverflowY = useRef(typeof document !== 'undefined' ? document.body.style.overflowY : '');
   var _useState = useState([]),
     _useState2 = _slicedToArray(_useState, 2),
     items = _useState2[0],

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", "requiredPlacement", "optional", "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,7 +24,7 @@ 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, StyledOptionalText } from './TextArea.styles';
 import { classes } from './TextArea.tokens';
 import { base as viewCSS } from './variations/_view/base';
 import { base as sizeCSS } from './variations/_size/base';
@@ -37,6 +37,7 @@ var innerPlaceholderUp = classes.innerPlaceholderUp,
   styledTextAreaWrapper = classes.styledTextAreaWrapper,
   styledPlaceholder = classes.styledPlaceholder,
   styledHelpers = classes.styledHelpers;
+var optionalText = 'optional';
 var base = /*#__PURE__*/css(["", ";position:relative;box-sizing:border-box;"], applyDynamicLabel);
 
 // TODO: Удалить после отказа от старых библиотек plasma-web / plasma-b2c
@@ -89,6 +90,10 @@ export var textAreaRoot = function textAreaRoot(Root) {
       width = props.width,
       value = props.value,
       disabled = props.disabled,
+      required = props.required,
+      _props$requiredPlacem = props.requiredPlacement,
+      requiredPlacement = _props$requiredPlacem === void 0 ? 'right' : _props$requiredPlacem,
+      optional = props.optional,
       size = props.size,
       view = props.view,
       id = props.id,
@@ -112,11 +117,16 @@ export var textAreaRoot = function textAreaRoot(Root) {
       uncontrolledValue = _useState6[0],
       setUncontrolledValue = _useState6[1];
     var outerRef = innerRef && 'current' in innerRef ? innerRef : /*#__PURE__*/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;
     useResizeObserver(outerRef, function (currentElement) {
       var inlineWidth = currentElement.style.width;
       if (inlineWidth || cols) {
@@ -150,6 +160,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
     } : {
       autoResize: autoResize
     }), focused);
+    var optionalTextNode = innerOptional ? /*#__PURE__*/React.createElement(StyledOptionalText, null, Boolean(hasPlaceholderOptional ? placeholderLabel : label) && '\xa0', optionalText) : null;
     return /*#__PURE__*/React.createElement(Root, {
       view: overriddenView,
       size: size,
@@ -159,12 +170,16 @@ export var textAreaRoot = function textAreaRoot(Root) {
         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(classes.outerLabelPlacement, requiredPlacementClass)
+    }), label, optionalTextNode), /*#__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(classes.innerLabelPlacement, requiredPlacementClass)
+    }), contentRight && /*#__PURE__*/React.createElement(StyledContent, null, contentRight), /*#__PURE__*/React.createElement(StyledTextAreaWrapper, {
       className: styledTextAreaWrapper,
       hasHelper: hasHelper
     }, /*#__PURE__*/React.createElement(StyledTextArea, _extends({
@@ -177,7 +192,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
       disabled: disabled,
       height: autoResize ? minAuto : height,
       width: width,
-      placeholder: placeLabel,
+      placeholder: placeholderLabel,
       "aria-describedby": textareaHelperId,
       value: value,
       readOnly: readOnly,
@@ -189,11 +204,11 @@ export var textAreaRoot = function textAreaRoot(Root) {
     }, rest))), hasHelper && /*#__PURE__*/React.createElement(StyledHelpers, {
       className: styledHelpers,
       id: textareaHelperId
-    }, (leftHelper || helperText) && /*#__PURE__*/React.createElement(StyledLeftHelper, null, leftHelper || helperText), rightHelper && /*#__PURE__*/React.createElement(StyledRightHelper, null, rightHelper)), placeLabel && /*#__PURE__*/React.createElement(StyledPlaceholder, {
+    }, (leftHelper || helperText) && /*#__PURE__*/React.createElement(StyledLeftHelper, null, leftHelper || helperText), rightHelper && /*#__PURE__*/React.createElement(StyledRightHelper, null, rightHelper)), placeholderLabel && /*#__PURE__*/React.createElement(StyledPlaceholder, {
       hasContentRight: Boolean(contentRight),
       className: styledPlaceholder,
       htmlFor: id
-    }, placeLabel)));
+    }, placeholderLabel, !hasOuterLabel && optionalTextNode)));
   });
 };
 export var textAreaConfig = {

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

@@ -1,11 +1,14 @@
 import styled from 'styled-components';
 import { applyEllipsis } from '../../mixins';
-import { tokens } from './TextArea.tokens';
+import { classes, 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);
-export var StyledTextAreaWrapper = /*#__PURE__*/styled.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(", ");"], tokens.labelMarginBottom, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight);
+export var StyledOptionalText = /*#__PURE__*/styled.span.withConfig({
   componentId: "plasma-new-hope__sc-pxxv3p-1"
+})(["color:var(", ");"], tokens.optionalColor);
+export var StyledTextAreaWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-pxxv3p-2"
 })(["background-color:var(", ");padding-top:var(", ");padding-bottom:", ";border-radius:", ";"], tokens.inputBackgroundColor, tokens.inputPaddingTop, function (_ref) {
   var hasHelper = _ref.hasHelper;
   return hasHelper ? "var(".concat(tokens.inputPaddingBottomWithHelpers, ")") : "var(".concat(tokens.inputPaddingBottom, ")");
@@ -14,16 +17,16 @@ export var StyledTextAreaWrapper = /*#__PURE__*/styled.div.withConfig({
   return hasHelper ? "var(".concat(tokens.borderRadiusWithHelpers, ")") : "var(".concat(tokens.borderRadius, ")");
 });
 export var StyledContent = /*#__PURE__*/styled.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(", ");"], tokens.rightContentTop, tokens.rightContentRight, tokens.rightContentHeight);
 export var StyledContainer = /*#__PURE__*/styled.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;
 });
 export var StyledTextArea = /*#__PURE__*/styled.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(", ");}"], tokens.inputColor, tokens.inputCaretColor, function (_ref4) {
   var resize = _ref4.resize;
   return resize || 'none';
@@ -54,17 +57,20 @@ export var StyledTextArea = /*#__PURE__*/styled.textarea.withConfig({
   return hasHelper && !rows ? 'var(--plasma_private-textarea-input-with-helpers-height)' : 'var(--plasma_private-textarea-input-without-helpers-height)';
 }, tokens.inputFontFamily, tokens.inputFontSize, tokens.inputFontStyle, tokens.inputFontWeight, tokens.inputLetterSpacing, tokens.inputLineHeight, tokens.inputColorFocus);
 export var StyledHelpers = /*#__PURE__*/styled.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(", ");"], tokens.helpersBackgroundColor, tokens.helpersPaddingTop, tokens.helpersPaddingRight, tokens.helpersPaddingBottom, tokens.helpersPaddingLeft, tokens.borderRadius, tokens.borderRadius);
 export var StyledLeftHelper = /*#__PURE__*/styled.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__*/applyEllipsis(), tokens.helpersFontFamily, tokens.helpersFontSize, tokens.helpersFontStyle, tokens.helpersFontWeight, tokens.helpersLetterSpacing, tokens.helpersLineHeight, tokens.leftHelperColor);
 export var StyledRightHelper = /*#__PURE__*/styled(StyledLeftHelper).withConfig({
-  componentId: "plasma-new-hope__sc-pxxv3p-7"
+  componentId: "plasma-new-hope__sc-pxxv3p-8"
 })(["color:var(", ");margin-left:auto;"], tokens.rightHelperColor);
 export var StyledPlaceholder = /*#__PURE__*/styled.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(", ");"], 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-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(", ");}}"], tokens.indicatorColor, classes.outerLabelPlacement, tokens.indicatorSizeOuter, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementOuterRight, classes.innerLabelPlacement, 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` и `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/es/components/TextArea/TextArea.tokens.js

@@ -14,7 +14,9 @@ export var classes = {
   /** Класс для компонента `StyledPlaceholder` */
   styledPlaceholder: 'textarea-placeholder',
   /** Класс для компонента `StyledHelpers` */
-  styledHelpers: 'textarea-helpers'
+  styledHelpers: 'textarea-helpers',
+  innerLabelPlacement: 'label-placement-inner',
+  outerLabelPlacement: 'label-placement-outer'
 };
 export var tokens = {
   /** Цвет фона для элемента textarea */
@@ -51,6 +53,8 @@ export var 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',
   /** Цвет текста для правой подписи снизу */
@@ -146,5 +150,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/_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", "requiredPlacement", "view", "size", "readOnly", "disabled", "required", "optional", "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."); }
@@ -17,11 +17,12 @@ 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 labelPlacementCSS } from './variations/_label-placement/base';
-import { Input, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips, StyledTextBefore, StyledTextAfter } from './TextField.styles';
+import { Input, InputContainer, LeftHelper, Label, InputWrapper, InputLabelWrapper, StyledContentLeft, StyledContentRight, StyledChips, StyledTextBefore, StyledTextAfter, StyledIndicator, StyledOptionalText, InputPlaceholder } 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;"]);
+var optionalText = 'optional';
+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,18 @@ export var 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,
+      _ref$optional = _ref.optional,
+      optional = _ref$optional === void 0 ? false : _ref$optional,
       values = _ref.chips,
       onChange = _ref.onChange,
       onChangeChips = _ref.onChangeChips,
@@ -58,26 +65,37 @@ export var textFieldRoot = function textFieldRoot(Root) {
       inputRef: inputRef,
       chipsRefs: chipsRefs
     };
-    var _useState = useState([]),
+    var _useState = useState(!!rest.value),
       _useState2 = _slicedToArray(_useState, 2),
-      chips = _useState2[0],
-      setChips = _useState2[1];
+      hasValue = _useState2[0],
+      setHasValue = _useState2[1];
+    var _useState3 = useState([]),
+      _useState4 = _slicedToArray(_useState3, 2),
+      chips = _useState4[0],
+      setChips = _useState4[1];
     var uniqId = safeUseId();
     var innerId = id || uniqId;
     var labelId = safeUseId();
     var helperTextId = 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 ? classes.hideLabel : undefined;
-    var labelPlacementClass = 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 ? 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 ? classes["".concat(innerLabelPlacementValue, "LabelPlacement")] : undefined;
+    var hasValueClass = hasValue ? classes.hasValue : undefined;
     var wrapperWithoutLeftContent = !contentLeft && isChipsVisible ? classes.hasEmptyContentLeft : undefined;
     var wrapperWithoutRightContent = !contentRight && isChipsVisible ? classes.hasEmptyContentRight : undefined;
+    var handleInput = function handleInput(event) {
+      setHasValue(!!event.target.value);
+    };
     var handleChange = function handleChange(event) {
       if (disabled || readOnly) {
         return;
@@ -143,6 +161,9 @@ export var textFieldRoot = function textFieldRoot(Root) {
       })) || [];
       setChips(newChips);
     }, [isChipEnumeration, values]);
+    var innerOptional = required ? false : optional;
+    var hasPlaceholderOptional = innerOptional && !innerLabelValue && !hasOuterLabel;
+    var optionalTextNode = innerOptional ? /*#__PURE__*/React.createElement(StyledOptionalText, null, Boolean(hasPlaceholderOptional ? innerPlaceholderValue : innerLabelValue) && '\xa0', optionalText) : null;
     return /*#__PURE__*/React.createElement(Root, {
       view: view,
       size: size,
@@ -150,14 +171,18 @@ export var textFieldRoot = function textFieldRoot(Root) {
       readOnly: !disabled && readOnly,
       labelPlacement: innerLabelPlacementValue,
       onClick: handleInputFocus,
-      className: cx(labelPlacementClass, hideLabelClass, classes.inputGroupItem, className),
+      className: cx(labelPlacementClass, classes.textFieldGroupItem, 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(classes.outerLabelPlacement, requiredPlacementClass)
+    }), innerLabelValue, optionalTextNode), /*#__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(classes.innerLabelPlacement, requiredPlacementClass)
+    }), contentLeft && /*#__PURE__*/React.createElement(StyledContentLeft, null, contentLeft), /*#__PURE__*/React.createElement(InputLabelWrapper, {
       tabIndex: -1,
       ref: contentRef,
       onKeyDown: handleContentKeyDown,
@@ -183,20 +208,22 @@ export var textFieldRoot = function textFieldRoot(Root) {
         },
         onClick: onChipClick
       });
-    })), /*#__PURE__*/React.createElement(Input, _extends({
+    })), /*#__PURE__*/React.createElement(InputContainer, null, /*#__PURE__*/React.createElement(Input, _extends({
       ref: inputForkRef,
       id: innerId,
       "aria-labelledby": labelId,
       "aria-describedby": helperTextId,
       placeholder: innerPlaceholderValue,
+      className: cx(hasValueClass),
       disabled: disabled,
       readOnly: !disabled && readOnly,
+      onInput: handleInput,
       onChange: handleChange,
       onKeyDown: handleOnKeyDown
-    }, rest)), labelInside && /*#__PURE__*/React.createElement(Label, {
+    }, rest)), hasInnerLabel && /*#__PURE__*/React.createElement(Label, {
       id: labelId,
       htmlFor: innerId
-    }, innerLabelValue), textAfter && /*#__PURE__*/React.createElement(StyledTextAfter, null, textAfter)), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
+    }, innerLabelValue, optionalTextNode), placeholderShown && /*#__PURE__*/React.createElement(InputPlaceholder, null, innerPlaceholderValue, hasPlaceholderOptional && optionalTextNode)), textAfter && /*#__PURE__*/React.createElement(StyledTextAfter, null, textAfter)), contentRight && /*#__PURE__*/React.createElement(StyledContentRight, null, contentRight)), leftHelper && /*#__PURE__*/React.createElement(LeftHelper, {
       id: helperTextId
     }, leftHelper));
   });

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

@@ -11,22 +11,34 @@ export var StyledChips = /*#__PURE__*/styled.div.withConfig({
 })(["display:flex;gap:var(", ");margin-right:var(", ");user-select:none;"], tokens.chipGap, tokens.chipGap);
 export var Input = /*#__PURE__*/styled.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%;"]);
-export var Label = /*#__PURE__*/styled.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;}"]);
+export var InputContainer = /*#__PURE__*/styled.div.withConfig({
   componentId: "plasma-new-hope__sc-g4vxbb-4"
-})([""]);
-export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
+})(["position:relative;flex:1;min-width:60%;"]);
+export var InputPlaceholder = /*#__PURE__*/styled.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(", ");"], tokens.placeholderColor);
+export var Label = /*#__PURE__*/styled.label.withConfig({
+  componentId: "plasma-new-hope__sc-g4vxbb-6"
+})(["position:relative;display:inline-flex;"]);
+export var StyledContentLeft = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-g4vxbb-7"
 })(["margin:var(", ");line-height:0;"], tokens.leftContentMargin);
 export var StyledContentRight = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-g4vxbb-6"
+  componentId: "plasma-new-hope__sc-g4vxbb-8"
 })(["margin:var(", ");line-height:0;"], tokens.rightContentMargin);
 export var LeftHelper = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-g4vxbb-7"
+  componentId: "plasma-new-hope__sc-g4vxbb-9"
 })([""]);
 export var StyledTextBefore = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-g4vxbb-8"
+  componentId: "plasma-new-hope__sc-g4vxbb-10"
 })([""]);
 export var StyledTextAfter = /*#__PURE__*/styled.div.withConfig({
-  componentId: "plasma-new-hope__sc-g4vxbb-9"
-})([""]);
+  componentId: "plasma-new-hope__sc-g4vxbb-11"
+})([""]);
+export var StyledOptionalText = /*#__PURE__*/styled.span.withConfig({
+  componentId: "plasma-new-hope__sc-g4vxbb-12"
+})(["color:var(", ");"], tokens.optionalColor);
+export var StyledIndicator = /*#__PURE__*/styled.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(", ");}}"], tokens.indicatorColor, classes.outerLabelPlacement, tokens.indicatorSizeOuter, tokens.indicatorSizeOuter, tokens.indicatorLabelPlacementOuter, tokens.indicatorLabelPlacementOuterRight, classes.innerLabelPlacement, tokens.indicatorSizeInner, tokens.indicatorSizeInner, tokens.indicatorLabelPlacementInner, tokens.indicatorLabelPlacementInnerRight);