@salutejs/plasma-new-hope 0.157.0-canary.1451.11123209424.0 → 0.157.0-canary.1459.11144116576.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',
@@ -64,6 +87,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 },
+        },
     },
 };
 
@@ -99,13 +159,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);
@@ -139,15 +199,25 @@ 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,
+        optional: false,
+        required: false,
+        requiredPlacement: 'right',
+        hasHint: false,
+        hintTrigger: 'hover',
+        hintText: 'Текст подсказки',
+        hintView: 'default',
+        hintSize: 'm',
+        hintPlacement: 'auto',
+        hintHasArrow: true,
     },
     render: (args) => <StoryDemo {...args} />,
 };
@@ -168,8 +238,6 @@ type StoryPropsChips = Omit<
     | 'checked'
     | 'maxLength'
     | 'minLength'
-    | 'required'
-    | 'optional'
     | 'enumerationType'
 > & {
     enableContentLeft: boolean;
@@ -186,7 +254,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) => {
@@ -196,6 +264,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/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/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", "size", "view", "id", "style", "className", "readOnly", "rows", "cols", "hasHint", "hintTrigger", "hintText", "hintView", "hintSize", "hintTarget", "hintPlacement", "hintHasArrow", "hintOffset", "hintMinWidth", "hintMaxWidth", "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,21 @@ 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 } from '../../utils';
+import { useForkRef, useResizeObserver } from '@salutejs/plasma-core';
+import { cx, 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,
@@ -54,6 +58,7 @@ export var getDynamicLabelClasses = function getDynamicLabelClasses(props, focus
   var readOnly = props.readOnly,
     label = props.label,
     labelPlacement = props.labelPlacement,
+    autoResize = props.autoResize,
     rows = props.rows,
     value = props.value,
     size = props.size;
@@ -62,10 +67,10 @@ export var getDynamicLabelClasses = function getDynamicLabelClasses(props, focus
   var withFocusedOuterUpPlaceholder = !readOnly && focused && (!label || labelPlacement === 'outer') ? focusedOuterPlaceholderColor : undefined;
 
   // Добавить класс отвечающий за поднятие и уменьшение плейсхолдера
-  var withInnerPlaceholderUp = labelPlacement === 'inner' && label && !rows && size !== 'xs' && (!readOnly && (value || focused) || readOnly && value) ? innerPlaceholderUp : undefined;
+  var withInnerPlaceholderUp = labelPlacement === 'inner' && label && !autoResize && !rows && size !== 'xs' && (!readOnly && (value || focused) || readOnly && value) ? innerPlaceholderUp : undefined;
 
   // Добавить класс отвечающий за скрытие плейсхолдера
-  var withHidePlaceholder = value && !label || labelPlacement === 'inner' && (focused && !readOnly || value) && label && rows || labelPlacement === 'outer' && value || labelPlacement === 'inner' && size === 'xs' && value ? hidePlaceHolder : undefined;
+  var withHidePlaceholder = value && !label || labelPlacement === 'inner' && (focused && !readOnly || value) && label && (rows || autoResize) || labelPlacement === 'outer' && value || labelPlacement === 'inner' && size === 'xs' && value ? hidePlaceHolder : undefined;
   return [withFocusedOuterUpPlaceholder, withInnerPlaceholderUp, withHidePlaceholder];
 };
 export var textAreaRoot = function textAreaRoot(Root) {
@@ -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,
@@ -96,8 +102,6 @@ export var textAreaRoot = function textAreaRoot(Root) {
       requiredPlacement = _props$requiredPlacem === void 0 ? 'right' : _props$requiredPlacem,
       _props$optional = props.optional,
       optional = _props$optional === void 0 ? false : _props$optional,
-      clear = props.clear,
-      hasDivider = props.hasDivider,
       size = props.size,
       view = props.view,
       id = props.id,
@@ -106,21 +110,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,
+      hintTarget = props.hintTarget,
+      _props$hintPlacement = props.hintPlacement,
+      hintPlacement = _props$hintPlacement === void 0 ? 'auto' : _props$hintPlacement,
+      hintHasArrow = props.hintHasArrow,
+      hintOffset = props.hintOffset,
+      hintMinWidth = props.hintMinWidth,
+      hintMaxWidth = props.hintMaxWidth,
+      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 hintId = safeUseId();
     var outerRef = innerRef && 'current' in innerRef ? innerRef : /*#__PURE__*/createRef();
+    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');
@@ -130,10 +160,24 @@ export var textAreaRoot = function textAreaRoot(Root) {
     var textareaHelperId = id ? "".concat(id, "-helper") : undefined;
     var applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;
     var placeholderLabel = hasInnerLabel ? label : placeholder;
-    var clearClass = clear ? classes.clear : 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) {
@@ -142,7 +186,7 @@ export var textAreaRoot = function textAreaRoot(Root) {
         setHelperWidth("".concat(elementWidth / ROOT_FONT_SIZE, "rem"));
       }
     });
-    useAutoResize(autoResize || Boolean(clear), outerRef, value, minAuto, maxAuto);
+    useAutoResize(autoResize, outerRef, value, minAuto, maxAuto);
     var onFocusHandler = useCallback(function () {
       setFocused(true);
     }, []);
@@ -156,46 +200,99 @@ export var textAreaRoot = function textAreaRoot(Root) {
       }
       onChange === null || onChange === void 0 || onChange(event);
     }, [value, onChange]);
-    var dynamicLabelClasses = getDynamicLabelClasses({
+    var dynamicLabelClasses = getDynamicLabelClasses(_objectSpread({
       size: size,
       readOnly: readOnly,
       label: label,
       labelPlacement: labelPlacement,
-      value: value || uncontrolledValue || defaultValue,
+      value: value || uncontrolledValue || defaultValue
+    }, rows ? {
       rows: rows
-    }, focused);
+    } : {
+      autoResize: autoResize
+    }), focused);
     var optionalTextNode = innerOptional ? /*#__PURE__*/React.createElement(StyledOptionalText, null, Boolean(hasPlaceholderOptional ? placeholderLabel : label) && '\xa0', optionalText) : null;
-    return /*#__PURE__*/React.createElement(Root, {
+    return /*#__PURE__*/React.createElement(Root, _extends({
       view: overriddenView,
       size: size,
       disabled: disabled,
       readOnly: readOnly,
-      clear: clear,
       style: _objectSpread({
         width: helperWidth
       }, style),
-      className: cx(clearClass, hasDividerClass, className)
-    }, hasOuterLabel && /*#__PURE__*/React.createElement(StyledLabel, null, required && /*#__PURE__*/React.createElement(StyledIndicator, {
+      className: 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: hintTarget || /*#__PURE__*/React.createElement(HintTargetWrapper, _extends({
+        id: hintId
+      }, hintTrigger === 'hover' ? {
+        onMouseEnter: handleShowHint,
+        onMouseLeave: handleHideHint
+      } : {
+        onClick: handleClickHint
+      }), _IconInfoCircleOutlin || (_IconInfoCircleOutlin = /*#__PURE__*/React.createElement(IconInfoCircleOutline, {
+        size: "xs",
+        color: "inherit"
+      }))),
+      placement: hintPlacement,
+      hasArrow: hintHasArrow,
+      offset: hintOffset,
+      minWidth: hintMinWidth,
+      maxWidth: hintMaxWidth,
+      contentLeft: hintContentLeft,
+      frame: hintId,
+      ref: hintForkRef
+    })), required && /*#__PURE__*/React.createElement(StyledIndicator, {
       className: cx(classes.outerLabelPlacement, requiredPlacementClass)
-    }), label, optionalTextNode), /*#__PURE__*/React.createElement(StyledContainer, {
+    }), 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: hintTarget || /*#__PURE__*/React.createElement(HintTargetWrapper, _extends({
+        id: hintId
+      }, hintTrigger === 'hover' ? {
+        onMouseEnter: handleShowHint,
+        onMouseLeave: handleHideHint
+      } : {
+        onClick: handleClickHint
+      }), _IconInfoCircleOutlin2 || (_IconInfoCircleOutlin2 = /*#__PURE__*/React.createElement(IconInfoCircleOutline, {
+        size: "xs",
+        color: "inherit"
+      }))),
+      placement: hintPlacement,
+      hasArrow: hintHasArrow,
+      offset: hintOffset,
+      minWidth: hintMinWidth,
+      maxWidth: hintMaxWidth,
+      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({
-      className: cx(styledTextArea, hasRightContentClass),
+      className: styledTextArea,
       id: id,
       hasContentRight: Boolean(contentRight),
       hasHelper: hasHelper,
       applyCustomWidth: applyCustomWidth,
       ref: outerRef,
       disabled: disabled,
-      height: autoResize || Boolean(clear) ? minAuto : height,
+      height: autoResize ? minAuto : height,
       width: width,
       placeholder: placeholderLabel,
       "aria-describedby": textareaHelperId,
@@ -228,16 +325,18 @@ export var textAreaConfig = {
     view: {
       css: viewCSS
     },
-    clear: {
-      css: clearCSS,
-      attrs: true
-    },
     disabled: {
       css: disabledCSS,
       attrs: true
     },
     readOnly: {
       attrs: true
+    },
+    hintView: {
+      css: hintViewCSS
+    },
+    hintSize: {
+      css: hintSizeCSS
     }
   },
   defaults: {