@salutejs/plasma-new-hope 0.166.0-canary.1458.11344610394.0 → 0.166.0-canary.1459.11345044568.0

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

@@ -4,7 +4,8 @@ import { action } from '@storybook/addon-actions';
 import { IconPlaceholder } from '@salutejs/plasma-sb-utils';
 
 import { WithTheme } from '../../../_helpers';
-import { IconChevronLeft } from '../../../../components/_Icon';
+import { IconCross } from '../../../../components/_Icon';
+import type { PopoverPlacement } from '../Popover/Popover';
 
 import { TextField } from './TextField';
 
@@ -16,7 +17,29 @@ const onChipsChange = action('onChipsChange');
 
 const sizes = ['l', 'm', 's', 'xs'];
 const views = ['default', 'positive', 'warning', 'negative'];
+const hintViews = ['default', 'onDark', 'onLight'];
+const hintSizes = ['m', 's'];
+const hintTriggers = ['hover', 'click'];
 const labelPlacements = ['outer', 'inner'];
+const placements: Array<PopoverPlacement> = [
+    'top',
+    'top-start',
+    'top-end',
+
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+
+    'left',
+    'left-start',
+    'left-end',
+
+    'right',
+    'right-start',
+    'right-end',
+
+    'auto',
+];
 
 const meta: Meta<typeof TextField> = {
     title: 'plasma_web/TextField',
@@ -70,6 +93,43 @@ const meta: Meta<typeof TextField> = {
                 type: 'inline-radio',
             },
         },
+        hintView: {
+            options: hintViews,
+            control: {
+                type: 'select',
+            },
+            if: { arg: 'hasHint', truthy: true },
+        },
+        hintSize: {
+            options: hintSizes,
+            control: {
+                type: 'select',
+            },
+            if: { arg: 'hasHint', truthy: true },
+        },
+        hintTrigger: {
+            options: hintTriggers,
+            control: {
+                type: 'inline-radio',
+            },
+            if: { arg: 'hasHint', truthy: true },
+        },
+        hintText: {
+            control: { type: 'text' },
+            if: { arg: 'hasHint', truthy: true },
+        },
+        hintPlacement: {
+            options: placements,
+            control: {
+                type: 'select',
+            },
+            if: { arg: 'hasHint', truthy: true },
+            mappers: placements,
+        },
+        hintHasArrow: {
+            control: { type: 'boolean' },
+            if: { arg: 'hasHint', truthy: true },
+        },
     },
 };
 
@@ -105,13 +165,13 @@ const StoryDemo = ({ enableContentLeft, enableContentRight, view, ...rest }: Sto
     const iconSize = rest.size === 'xs' ? 'xs' : 's';
 
     return (
-        <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', width: '70%', margin: '0 auto' }}>
             <TextField
                 {...rest}
                 enumerationType="plain"
                 value={text}
-                contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
-                contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
+                contentLeft={enableContentLeft ? <IconCross color="inherit" size={iconSize} /> : undefined}
+                contentRight={enableContentRight ? <IconCross color="inherit" size={iconSize} /> : undefined}
                 view={view}
                 onChange={(e) => {
                     setText(e.target.value);
@@ -145,17 +205,28 @@ export const Default: StoryObj<StoryPropsDefault> = {
         view: 'default',
         label: 'Лейбл',
         labelPlacement: 'outer',
+        titleCaption: 'Подпись к полю',
+        textBefore: '',
+        textAfter: '',
         placeholder: 'Заполните поле',
         leftHelper: 'Подсказка к полю',
         disabled: false,
         readOnly: false,
-        required: false,
-        requiredPlacement: 'right',
-        optional: false,
         enableContentLeft: true,
         enableContentRight: true,
         clear: false,
         hasDivider: false,
+        optional: false,
+        required: false,
+        requiredPlacement: 'right',
+        hasHint: false,
+        hintTrigger: 'hover',
+        hintText: 'Текст подсказки',
+        hintView: 'default',
+        hintSize: 'm',
+        hintPlacement: 'auto',
+        hintWidth: '10rem',
+        hintHasArrow: true,
     },
     render: (args) => <StoryDemo {...args} />,
 };
@@ -176,8 +247,6 @@ type StoryPropsChips = Omit<
     | 'checked'
     | 'maxLength'
     | 'minLength'
-    | 'required'
-    | 'optional'
     | 'enumerationType'
 > & {
     enableContentLeft: boolean;
@@ -194,7 +263,7 @@ const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: St
             {...rest}
             enumerationType="chip"
             value={text}
-            contentLeft={enableContentLeft ? <IconChevronLeft color="inherit" size={iconSize} /> : undefined}
+            contentLeft={enableContentLeft ? <IconPlaceholder size={iconSize} /> : undefined}
             contentRight={enableContentRight ? <IconPlaceholder size={iconSize} /> : undefined}
             view={view}
             onChange={(e) => {
@@ -204,6 +273,7 @@ const StoryChips = ({ enableContentLeft, enableContentRight, view, ...rest }: St
             onFocus={onFocus}
             onBlur={onBlur}
             onChangeChips={onChipsChange}
+            style={{ width: '70%', margin: '0 auto' }}
         />
     );
 };

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

@@ -1,5 +1,5 @@
 var _IconCloseCircleOutli;
-var _excluded = ["flow", "buttonType", "hasAttachment", "acceptedFileFormats", "size", "view", "className", "style", "isLoading", "disabled"];
+var _excluded = ["flow", "buttonType", "hasAttachment", "acceptedFileFormats", "size", "view", "className", "style", "isLoading", "disabled", "id", "name", "onChange", "onClear"];
 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."); }
@@ -36,6 +36,10 @@ export var attachRoot = function attachRoot(Root) {
       style = props.style,
       isLoading = props.isLoading,
       disabled = props.disabled,
+      id = props.id,
+      name = props.name,
+      onChange = props.onChange,
+      onClear = props.onClear,
       rest = _objectWithoutProperties(props, _excluded);
     var innerRef = useRef(null);
     var ref = useForkRef(outerRef, innerRef);
@@ -104,16 +108,22 @@ export var attachRoot = function attachRoot(Root) {
       }
       inputRef.current.click();
     };
-    var handleChange = function handleChange() {
-      if (!inputRef.current || !inputRef.current.files) {
+    var handleChange = function handleChange(e) {
+      if (!e.target.files) {
         return;
       }
-      setFilename(inputRef.current.files[0].name);
+      if (onChange) {
+        onChange(e);
+      }
+      setFilename(e.target.files[0].name);
     };
     var handleClear = function handleClear() {
       if (!inputRef.current) {
         return;
       }
+      if (onClear) {
+        onClear();
+      }
       inputRef.current.value = '';
       setFilename('');
       setTruncatedFilename('');
@@ -128,12 +138,11 @@ export var attachRoot = function attachRoot(Root) {
       ref: inputRef,
       accept: accept,
       type: "file",
-      id: "attachHiddenInput",
-      name: "attachHiddenInput",
+      id: id,
+      name: name,
       onChange: handleChange
     }), /*#__PURE__*/React.createElement(StyledHiddenInputHelper, {
-      ref: inputHelperRef,
-      id: "attachHiddenInputHelper"
+      ref: inputHelperRef
     }, filename), /*#__PURE__*/React.createElement(AttachButton, _extends({
       buttonType: buttonType,
       view: view,

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

@@ -61,3 +61,72 @@ export function App() {
     );
 }
 ```
+
+### Пример использования в форме
+
+```tsx live
+import React, { useState } from 'react';
+import { Attach, Button } from '@salutejs/{{ package }}';
+
+function App() {
+    const ids = ['0', '1', '2'];
+    const [isLoading, setIsLoading] = useState(false);
+    const [attachedFiles, setAttachedFiles] = useState([]);
+
+    const handleAttachFile = (e) => {
+        setAttachedFiles((prevAttachedFiles) => [
+            ...prevAttachedFiles,
+            {
+                fileData: e.target.files[0],
+                id: e.target.id,
+            },
+        ]);
+    };
+
+    const handleAttachClear = (id) => {
+        setAttachedFiles(attachedFiles.filter((file) => file.id !== id));
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        setIsLoading(true);
+  
+        const formData = new FormData(e.target);
+        console.log('formData', Object.fromEntries(formData));
+
+        setTimeout(() => {
+            setAttachedFiles([]);
+            setIsLoading(false);
+        }, 2000);
+    };
+
+    return (
+        <>
+            <span>{isLoading ? 'Форма отправляется' : 'Прикрепленные файлы:'}</span>
+            {!isLoading && attachedFiles.length > 0 && (
+                <div style=\{{ display: 'flex', flexDirection: 'column', gap: '0px' }}>
+                    {attachedFiles.map((file) => (
+                        <span>{file.fileData.name}</span>
+                    ))}
+                </div>
+            )}
+
+            {!isLoading && (
+                <form onSubmit={handleSubmit} style=\{{ display: 'flex', flexDirection: 'column', gap: '30px' }}>
+                    {ids.map((id) => (
+                        <Attach
+                            id={id}
+                            name={`attach${id}`}
+                            text={`Загрузить файл ${id}`}
+                            onChange={handleAttachFile}
+                            onClear={() => handleAttachClear(id)}
+                        />
+                    ))}
+
+                    <Button type="submit">Отправить</Button>
+                </form>
+            )}
+        </>
+    );
+}
+```

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

@@ -1,4 +1,4 @@
-var _excluded = ["value", "onChange", "suggestions", "view", "size", "labelPlacement", "disabled", "readOnly", "label", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "onScroll", "listMaxHeight", "listWidth", "portal", "filter", "onSuggestionSelect", "threshold", "renderList", "renderListEnd", "onSearch"];
+var _excluded = ["value", "onChange", "suggestions", "view", "size", "labelPlacement", "disabled", "readOnly", "label", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "onScroll", "listMaxHeight", "listWidth", "portal", "filter", "onSuggestionSelect", "threshold", "renderList", "renderListEnd", "onSearch", "hasHint", "hintText"];
 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."); }
@@ -47,6 +47,8 @@ export var autocompleteRoot = function autocompleteRoot(Root) {
       renderList = _ref.renderList,
       renderListEnd = _ref.renderListEnd,
       onSearch = _ref.onSearch,
+      hasHint = _ref.hasHint,
+      hintText = _ref.hintText,
       rest = _objectWithoutProperties(_ref, _excluded);
     var _useReducer = useReducer(focusedReducer, null),
       _useReducer2 = _slicedToArray(_useReducer, 2),
@@ -144,7 +146,9 @@ export var autocompleteRoot = function autocompleteRoot(Root) {
         "aria-controls": listId,
         "aria-expanded": isOpen,
         "aria-activedescendant": "".concat(listId, "/").concat(focused),
-        "aria-describedby": helperTextId
+        "aria-describedby": helperTextId,
+        hasHint: Boolean(hasHint),
+        hintText: String(hintText || '')
       }, rest)),
       preventOverflow: false,
       ref: targetRef,

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

@@ -9,15 +9,12 @@ var mergedLinkConfig = /*#__PURE__*/mergeConfig(linkConfig);
 var Link = /*#__PURE__*/component(mergedLinkConfig);
 export var StyledLink = /*#__PURE__*/styled(Link).withConfig({
   componentId: "plasma-new-hope__sc-4bjoev-0"
-})(["opacity:", ";cursor:", ";color:", ";--plasma-link-disabled-opacity:var(", ");", ""], function (_ref) {
+})(["opacity:", ";cursor:", ";--plasma-link-disabled-opacity:var(", ");", ""], function (_ref) {
   var isHref = _ref.isHref;
   return isHref ? 1 : "var(".concat(tokens.breadcrumbsOpacity, ")");
 }, function (_ref2) {
   var isHref = _ref2.isHref;
   return isHref ? 'pointer' : 'auto';
-}, function (_ref3) {
-  var isHref = _ref3.isHref;
-  return isHref ? "var(".concat(tokens.breadcrumbsColor, ")") : "var(".concat(tokens.breadcrumbsColorText, ")");
 }, tokens.breadcrumbsOpacity, /*#__PURE__*/addFocus({
   outlineOffset: '0rem',
   outlineSize: '0.125rem',
@@ -27,4 +24,4 @@ export var StyledLink = /*#__PURE__*/styled(Link).withConfig({
 export var base = /*#__PURE__*/css(["display:flex;flex-direction:row;align-items:center;gap:var(", ");color:var(", ");font-family:var(", ");font-size:var(", ");font-weight:var(", ");font-style:var(", ");letter-spacing:var(", ");line-height:var(", ");"], tokens.breadcrumbsGap, tokens.breadcrumbsColor, tokens.breadcrumbsFontFamily, tokens.breadcrumbsFontSize, tokens.breadcrumbsFontWeight, tokens.breadcrumbsFontStyle, tokens.breadcrumbsLetterSpacing, tokens.breadcrumbsLineHeight);
 export var Separator = /*#__PURE__*/styled(IconDisclosureRight).withConfig({
   componentId: "plasma-new-hope__sc-4bjoev-1"
-})(["color:var(", ");opacity:var(", ");"], tokens.breadcrumbsColorSeparator, tokens.breadcrumbsOpacity);
+})(["color:var(", ");opacity:var(", ");"], tokens.breadcrumbsColor, tokens.breadcrumbsOpacity);

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

@@ -5,8 +5,6 @@ export var tokens = {
   breadcrumbsGap: '--plasma-breadcrumbs-gap',
   breadcrumbsOpacity: '--plasma-breadcrumbs-opacity',
   breadcrumbsFocusOutlineColor: '--plasma-breadcrumbs-focus-outline-color',
-  breadcrumbsColorSeparator: '--plasma-breadcrumbs-color-separator',
-  breadcrumbsColorText: '--plasma-breadcrumbs-color-text',
   breadcrumbsColor: '--plasma-breadcrumbs-color',
   breadcrumbsFontFamily: '--plasma-breadcrumbs-font-family',
   breadcrumbsFontSize: '--plasma-breadcrumbs-font-size',

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

@@ -1,10 +1,11 @@
 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", "required", "requiredPlacement", "optional", "clear", "hasDivider", "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); }
+var _IconInfoCircleOutlin, _IconInfoCircleOutlin2;
+var _excluded = ["helperText", "status", "resize", "rightHelper", "leftHelper", "contentRight", "autoResize", "minAuto", "maxAuto", "label", "labelPlacement", "titleCaption", "placeholder", "defaultValue", "height", "width", "value", "disabled", "required", "requiredPlacement", "optional", "clear", "hasDivider", "size", "view", "id", "style", "className", "readOnly", "rows", "cols", "hasHint", "hintTrigger", "hintText", "hintView", "hintSize", "hintTargetIcon", "hintPlacement", "hintHasArrow", "hintOffset", "hintWidth", "hintContentLeft", "onChange"];
 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."); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -18,18 +19,22 @@ 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; }
-import React, { forwardRef, useState, createRef, useCallback } from 'react';
+import React, { forwardRef, useState, createRef, useCallback, useRef } from 'react';
 import { css } from 'styled-components';
-import { useResizeObserver } from '@salutejs/plasma-core';
-import { cx, mergeRefs } from '../../utils';
+import { useForkRef, useResizeObserver } from '@salutejs/plasma-core';
+import { cx, mergeRefs, safeUseId } from '../../utils';
+import { IconInfoCircleOutline } from '../_Icon';
+import { useOutsideClick } from '../../hooks';
 import { applyDynamicLabel } from './mixins';
 import { useAutoResize, ROOT_FONT_SIZE } from './hooks';
-import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, StyledLabel, StyledPlaceholder, StyledTextArea, StyledTextAreaWrapper, StyledContainer, StyledIndicator, StyledOptionalText } from './TextArea.styles';
+import { StyledContent, StyledHelpers, StyledLeftHelper, StyledRightHelper, StyledLabel, StyledPlaceholder, StyledTextArea, StyledTextAreaWrapper, StyledContainer, StyledIndicator, StyledOptionalText, OuterLabelWrapper, StyledIndicatorWrapper, StyledHintWrapper, HintTargetWrapper, TitleCaption, Hint } 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 clearCSS } from './variations/_clear/base';
 import { base as disabledCSS } from './variations/_disabled/base';
+import { base as hintViewCSS } from './variations/_hint-view/base';
+import { base as hintSizeCSS } from './variations/_hint-size/base';
 var innerPlaceholderUp = classes.innerPlaceholderUp,
   focusedOuterPlaceholderColor = classes.focusedOuterPlaceholderColor,
   hidePlaceHolder = classes.hidePlaceHolder,
@@ -84,6 +89,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
       label = props.label,
       _props$labelPlacement = props.labelPlacement,
       labelPlacement = _props$labelPlacement === void 0 ? 'inner' : _props$labelPlacement,
+      titleCaption = props.titleCaption,
       placeholder = props.placeholder,
       defaultValue = props.defaultValue,
       height = props.height,
@@ -106,21 +112,47 @@ export var textAreaRoot = function textAreaRoot(Root) {
       readOnly = props.readOnly,
       rows = props.rows,
       cols = props.cols,
+      hasHint = props.hasHint,
+      _props$hintTrigger = props.hintTrigger,
+      hintTrigger = _props$hintTrigger === void 0 ? 'hover' : _props$hintTrigger,
+      hintText = props.hintText,
+      _props$hintView = props.hintView,
+      hintView = _props$hintView === void 0 ? 'default' : _props$hintView,
+      _props$hintSize = props.hintSize,
+      hintSize = _props$hintSize === void 0 ? 'm' : _props$hintSize,
+      hintTargetIcon = props.hintTargetIcon,
+      _props$hintPlacement = props.hintPlacement,
+      hintPlacement = _props$hintPlacement === void 0 ? 'auto' : _props$hintPlacement,
+      hintHasArrow = props.hintHasArrow,
+      _props$hintOffset = props.hintOffset,
+      hintOffset = _props$hintOffset === void 0 ? [0, 0] : _props$hintOffset,
+      hintWidth = props.hintWidth,
+      hintContentLeft = props.hintContentLeft,
       onChange = props.onChange,
       rest = _objectWithoutProperties(props, _excluded);
-    var _useState = useState(width ? "".concat(width, "rem") : '100%'),
+    var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
-      helperWidth = _useState2[0],
-      setHelperWidth = _useState2[1];
-    var _useState3 = useState(false),
+      showHint = _useState2[0],
+      setShowHint = _useState2[1];
+    var _useState3 = useState(width ? "".concat(width, "rem") : '100%'),
       _useState4 = _slicedToArray(_useState3, 2),
-      focused = _useState4[0],
-      setFocused = _useState4[1];
-    var _useState5 = useState(),
+      helperWidth = _useState4[0],
+      setHelperWidth = _useState4[1];
+    var _useState5 = useState(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      uncontrolledValue = _useState6[0],
-      setUncontrolledValue = _useState6[1];
+      focused = _useState6[0],
+      setFocused = _useState6[1];
+    var _useState7 = useState(),
+      _useState8 = _slicedToArray(_useState7, 2),
+      uncontrolledValue = _useState8[0],
+      setUncontrolledValue = _useState8[1];
     var outerRef = /*#__PURE__*/createRef();
+    var hintId = safeUseId();
+    var hintRef = useOutsideClick(function () {
+      setShowHint(false);
+    });
+    var hintInnerRef = useRef(null);
+    var hintForkRef = useForkRef(hintRef, hintInnerRef);
     var innerOptional = required ? false : optional;
     var hasHelper = Boolean(leftHelper || rightHelper || helperText);
     var hasOuterLabel = Boolean(label && labelPlacement === 'outer');
@@ -131,9 +163,27 @@ export var textAreaRoot = function textAreaRoot(Root) {
     var applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;
     var placeholderLabel = hasInnerLabel ? label : placeholder;
     var clearClass = clear ? classes.clear : undefined;
+    var hasHintClass = hasHint ? classes.hasHint : undefined;
     var hasRightContentClass = contentRight ? classes.hasRightContent : undefined;
     var hasDividerClass = hasDivider ? classes.hasDivider : undefined;
     var requiredPlacementClass = requiredPlacement === 'right' ? 'align-right ' : undefined;
+    var handleShowHint = function handleShowHint() {
+      return setShowHint(true);
+    };
+    var handleHideHint = function handleHideHint() {
+      return setShowHint(false);
+    };
+    var handleClickHint = function handleClickHint(event) {
+      if (hasHint && hintTrigger === 'click') {
+        var _hintInnerRef$current;
+        event.stopPropagation();
+        var targetIsPopover = event.target === hintInnerRef.current;
+        var rootHasTarget = (_hintInnerRef$current = hintInnerRef.current) === null || _hintInnerRef$current === void 0 ? void 0 : _hintInnerRef$current.contains(event.target);
+        if (!targetIsPopover && !rootHasTarget) {
+          setShowHint(true);
+        }
+      }
+    };
     useResizeObserver(outerRef, function (currentElement) {
       var inlineWidth = currentElement.style.width;
       if (inlineWidth || cols) {
@@ -164,8 +214,10 @@ export var textAreaRoot = function textAreaRoot(Root) {
       value: value || uncontrolledValue || defaultValue,
       rows: rows
     }, focused);
-    var optionalTextNode = innerOptional ? /*#__PURE__*/React.createElement(StyledOptionalText, null, Boolean(hasPlaceholderOptional ? placeholderLabel : label) && '\xa0', optionalText) : null;
-    return /*#__PURE__*/React.createElement(Root, {
+    var optionalTextNode = innerOptional ? /*#__PURE__*/React.createElement(StyledOptionalText, {
+      inheritFont: !hasOuterLabel
+    }, Boolean(hasPlaceholderOptional ? placeholderLabel : label) && '\xa0', optionalText) : null;
+    return /*#__PURE__*/React.createElement(Root, _extends({
       view: overriddenView,
       size: size,
       disabled: disabled,
@@ -174,17 +226,68 @@ export var textAreaRoot = function textAreaRoot(Root) {
       style: _objectSpread({
         width: helperWidth
       }, style),
-      className: cx(clearClass, hasDividerClass, className)
-    }, hasOuterLabel && /*#__PURE__*/React.createElement(StyledLabel, null, required && /*#__PURE__*/React.createElement(StyledIndicator, {
-      className: cx(classes.outerLabelPlacement, requiredPlacementClass)
-    }), label, optionalTextNode), /*#__PURE__*/React.createElement(StyledContainer, {
+      className: cx(clearClass, hasDividerClass, hasHintClass, className)
+    }, hasHint && {
+      hintView: hintView || 'default',
+      hintSize: hintSize || 'm'
+    }), (hasOuterLabel || titleCaption) && /*#__PURE__*/React.createElement(OuterLabelWrapper, {
+      isInnnerLabel: labelPlacement === 'inner'
+    }, hasOuterLabel && /*#__PURE__*/React.createElement(StyledIndicatorWrapper, null, /*#__PURE__*/React.createElement(StyledLabel, null, label), hasHint && /*#__PURE__*/React.createElement(StyledHintWrapper, null, /*#__PURE__*/React.createElement(Hint, {
+      text: String(hintText),
+      opened: showHint,
+      target: /*#__PURE__*/React.createElement(HintTargetWrapper, _extends({
+        id: hintId
+      }, hintTrigger === 'hover' ? {
+        onMouseEnter: handleShowHint,
+        onMouseLeave: handleHideHint
+      } : {
+        onClick: handleClickHint
+      }), hintTargetIcon || _IconInfoCircleOutlin || (_IconInfoCircleOutlin = /*#__PURE__*/React.createElement(IconInfoCircleOutline, {
+        size: "xs",
+        color: "inherit"
+      }))),
+      placement: hintPlacement,
+      hasArrow: hintHasArrow,
+      offset: hintOffset,
+      minWidth: hintWidth,
+      maxWidth: hintWidth,
+      contentLeft: hintContentLeft,
+      frame: hintId,
+      ref: hintForkRef
+    })), required && /*#__PURE__*/React.createElement(StyledIndicator, {
+      className: cx(classes.outerLabelPlacement, requiredPlacementClass, hasHintClass)
+    }), optionalTextNode), titleCaption && /*#__PURE__*/React.createElement(TitleCaption, null, titleCaption)), /*#__PURE__*/React.createElement(StyledContainer, {
       className: cx.apply(void 0, [styledContainer].concat(_toConsumableArray(dynamicLabelClasses))),
       width: helperWidth,
       onFocus: onFocusHandler,
       onBlur: onBlurHandler
-    }, required && !hasOuterLabel && /*#__PURE__*/React.createElement(StyledIndicator, {
+    }, !hasOuterLabel && /*#__PURE__*/React.createElement(React.Fragment, null, required && /*#__PURE__*/React.createElement(StyledIndicator, {
       className: cx(classes.innerLabelPlacement, requiredPlacementClass)
-    }), contentRight && /*#__PURE__*/React.createElement(StyledContent, null, contentRight), /*#__PURE__*/React.createElement(StyledTextAreaWrapper, {
+    }), hasHint && /*#__PURE__*/React.createElement(StyledHintWrapper, {
+      className: classes.innerLabelPlacement
+    }, /*#__PURE__*/React.createElement(Hint, {
+      text: String(hintText),
+      opened: showHint,
+      target: /*#__PURE__*/React.createElement(HintTargetWrapper, _extends({
+        id: hintId
+      }, hintTrigger === 'hover' ? {
+        onMouseEnter: handleShowHint,
+        onMouseLeave: handleHideHint
+      } : {
+        onClick: handleClickHint
+      }), hintTargetIcon || _IconInfoCircleOutlin2 || (_IconInfoCircleOutlin2 = /*#__PURE__*/React.createElement(IconInfoCircleOutline, {
+        size: "xs",
+        color: "inherit"
+      }))),
+      placement: hintPlacement,
+      hasArrow: hintHasArrow,
+      offset: hintOffset,
+      minWidth: hintWidth,
+      maxWidth: hintWidth,
+      contentLeft: hintContentLeft,
+      frame: hintId,
+      ref: hintForkRef
+    }))), contentRight && /*#__PURE__*/React.createElement(StyledContent, null, contentRight), /*#__PURE__*/React.createElement(StyledTextAreaWrapper, {
       className: styledTextAreaWrapper,
       hasHelper: hasHelper
     }, /*#__PURE__*/React.createElement(StyledTextArea, _extends({
@@ -238,6 +341,12 @@ export var textAreaConfig = {
     },
     readOnly: {
       attrs: true
+    },
+    hintView: {
+      css: hintViewCSS
+    },
+    hintSize: {
+      css: hintSizeCSS
     }
   },
   defaults: {