@salutejs/plasma-new-hope 0.172.0-canary.1452.11439149903.0 → 0.172.0-canary.1459.11440222275.0

package/styled-components/cjs/components/Slider/ui/Handler/Handler.js

@@ -7,20 +7,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.Handler = void 0;
 var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react"));
 var _reactDraggable = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react-draggable"));
-var _utils = /*#__PURE__*/require("../../../../utils");
-var _utils2 = /*#__PURE__*/require("../../utils");
+var _utils = /*#__PURE__*/require("../../utils");
 var _Thumb = /*#__PURE__*/require("../Thumb/Thumb");
-var _Slider = /*#__PURE__*/require("../../Slider.tokens");
 var _Handler = /*#__PURE__*/require("./Handler.styles");
-var _computeKeyPressData = /*#__PURE__*/require("./computeKeyPressData");
-var _excluded = ["size", "orientation", "stepSize", "onChangeCommitted", "onChange", "position", "min", "max", "bounds", "zIndex", "disabled", "side", "showCurrentValue", "startOffset", "endOffset", "value", "valuePlacement"];
+var _excluded = ["stepSize", "onChangeCommitted", "onChange", "xPosition", "min", "max", "bounds", "zIndex", "disabled", "side", "showCurrentValue", "startOffset", "endOffset", "value"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-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; }
-function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
-function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 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."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -31,14 +25,22 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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; }
 // TODO: PLASMA-1707
 
+var KeyboardSupport = {
+  PageUp: 33,
+  PageDown: 34,
+  End: 35,
+  Home: 36,
+  ArrowLeft: 37,
+  ArrowUp: 38,
+  ArrowRight: 39,
+  ArrowDown: 40
+};
 var Handler = exports.Handler = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var size = _ref.size,
-    orientation = _ref.orientation,
-    stepSize = _ref.stepSize,
+  var stepSize = _ref.stepSize,
     onChangeCommitted = _ref.onChangeCommitted,
     onChange = _ref.onChange,
-    _ref$position = _ref.position,
-    position = _ref$position === void 0 ? 0 : _ref$position,
+    _ref$xPosition = _ref.xPosition,
+    xPosition = _ref$xPosition === void 0 ? 0 : _ref$xPosition,
     min = _ref.min,
     max = _ref.max,
     _ref$bounds = _ref.bounds,
@@ -53,88 +55,122 @@ var Handler = exports.Handler = /*#__PURE__*/(0, _react.forwardRef)(function (_r
     _ref$endOffset = _ref.endOffset,
     endOffset = _ref$endOffset === void 0 ? 0 : _ref$endOffset,
     value = _ref.value,
-    valuePlacement = _ref.valuePlacement,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var isVertical = orientation === 'vertical';
   var lastOnChangeValue = (0, _react.useRef)();
-  var _getOffsets = (0, _utils2.getOffsets)(ref, side, isVertical),
+  var _getOffsets = (0, _utils.getOffsets)(ref, side),
     _getOffsets2 = _slicedToArray(_getOffsets, 2),
-    startClientOffset = _getOffsets2[0],
-    endClientOffset = _getOffsets2[1];
+    offsetLeft = _getOffsets2[0],
+    offsetRight = _getOffsets2[1];
   var _bounds = _slicedToArray(bounds, 2),
-    startValueBound = _bounds[0],
-    endValueBound = _bounds[1];
-  var startPositionBound = startValueBound ? (startValueBound - min) * stepSize : null;
-  var endPositionBound = endValueBound ? (endValueBound - min) * stepSize : null;
-  var dragPosition = typeof position === 'number' ? {
-    x: isVertical ? 0 : position,
-    y: isVertical ? position : 0
+    leftValueBound = _bounds[0],
+    rightValueBound = _bounds[1];
+  var leftPositionBound = leftValueBound ? (leftValueBound - min) * stepSize : null;
+  var rightPositionBound = rightValueBound ? (rightValueBound - min) * stepSize : null;
+  var position = typeof xPosition === 'number' ? {
+    x: xPosition,
+    y: 0
   } : undefined;
   var tabIndex = disabled ? -1 : 0;
-  var computedBounds = _defineProperty(_defineProperty({}, isVertical ? 'top' : 'left', (startPositionBound !== null && startPositionBound !== void 0 ? startPositionBound : 0) - (startClientOffset ? stepSize : 0)), isVertical ? 'bottom' : 'right', (endPositionBound !== null && endPositionBound !== void 0 ? endPositionBound : stepSize * (max - min)) - (endClientOffset ? stepSize : 0));
-  var showCurrentValueCondition = showCurrentValue && (position >= startOffset && position <= max * stepSize - endOffset || position === 0 && value !== 0);
+  var computedBounds = {
+    left: (leftPositionBound !== null && leftPositionBound !== void 0 ? leftPositionBound : 0) - (offsetLeft ? stepSize : 0),
+    right: (rightPositionBound !== null && rightPositionBound !== void 0 ? rightPositionBound : stepSize * (max - min)) - (offsetRight ? stepSize : 0)
+  };
+  var showCurrentValueCondition = showCurrentValue && (xPosition >= startOffset && xPosition <= max * stepSize - endOffset || xPosition === 0 && value !== 0);
   var onDrag = function onDrag(_, data) {
-    var newValue = (0, _utils2.getSliderThumbValue)(isVertical ? data.y : data.x, stepSize, min, max);
+    var newValue = (0, _utils.getSliderThumbValue)(data.x, stepSize, min, max);
     if (lastOnChangeValue.current !== newValue) {
       onChange === null || onChange === void 0 || onChange(newValue, data);
       lastOnChangeValue.current = newValue;
     }
   };
   var onStop = function onStop(_, data) {
-    var newValue = (0, _utils2.getSliderThumbValue)(isVertical ? data.y : data.x, stepSize, min, max);
+    var newValue = (0, _utils.getSliderThumbValue)(data.x, stepSize, min, max);
     onChangeCommitted && onChangeCommitted(newValue, data);
   };
   var onKeyPress = function onKeyPress(event) {
     event.persist();
-    var computedMultipleSteps = stepSize * (rest.multipleStepSize / 100 * max);
-    var data = (0, _computeKeyPressData.computeKeyPressData)(event, {
-      isVertical: isVertical,
-      stepSize: stepSize,
-      position: position,
-      max: max,
-      computedMultipleSteps: computedMultipleSteps
-    });
-    if (!data) {
+    var keyCode = event.keyCode,
+      target = event.target;
+    if (!Object.values(KeyboardSupport).includes(keyCode)) {
       return;
     }
+    var ArrowUp = KeyboardSupport.ArrowUp,
+      ArrowRight = KeyboardSupport.ArrowRight,
+      ArrowDown = KeyboardSupport.ArrowDown,
+      ArrowLeft = KeyboardSupport.ArrowLeft,
+      Home = KeyboardSupport.Home,
+      End = KeyboardSupport.End,
+      PageDown = KeyboardSupport.PageDown,
+      PageUp = KeyboardSupport.PageUp;
+    var computedMultipleSteps = stepSize * (rest.multipleStepSize / 100 * max);
+    var data = {
+      x: 0,
+      deltaX: stepSize,
+      lastX: xPosition,
+      y: 0,
+      deltaY: 0,
+      lastY: 0,
+      node: target
+    };
+    switch (keyCode) {
+      case ArrowUp:
+      case ArrowRight:
+        data.x = xPosition + stepSize;
+        break;
+      case ArrowDown:
+      case ArrowLeft:
+        data.x = xPosition - stepSize;
+        data.deltaX = -stepSize;
+        break;
+      case PageUp:
+        data.x = xPosition + computedMultipleSteps;
+        data.deltaX = computedMultipleSteps;
+        break;
+      case PageDown:
+        data.x = xPosition - computedMultipleSteps;
+        data.deltaX = -computedMultipleSteps;
+        break;
+      case End:
+        data.x = max * stepSize;
+        break;
+      case Home:
+        data.x = 0;
+        break;
+      default:
+        data.x = 0;
+    }
     var left = computedBounds.left,
-      right = computedBounds.right,
-      top = computedBounds.top,
-      bottom = computedBounds.bottom;
+      right = computedBounds.right;
 
     /*
      * INFO: Находим значение в диапазоне между указанными левой и правой границами.
-     * Или между верхней и нижней
      * Необходимо для правильного расчета положения SliderThumb.
      * см. функция clamp
      */
-    var boundedValue = isVertical ? Math.max(Math.min(bottom, data.y), top) : Math.max(Math.min(right, data.x), left);
-    var computedValue = (0, _utils2.getSliderThumbValue)(boundedValue, stepSize, min, max);
+    var boundedValue = Math.max(Math.min(right, data.x), left);
+    var computedValue = (0, _utils.getSliderThumbValue)(boundedValue, stepSize, min, max);
     lastOnChangeValue.current = computedValue;
     onChangeCommitted && onChangeCommitted(computedValue, data);
   };
   return /*#__PURE__*/_react["default"].createElement(_reactDraggable["default"], {
-    axis: isVertical ? 'y' : 'x',
+    axis: "x",
     bounds: computedBounds,
-    grid: isVertical ? [1, stepSize] : [stepSize, 1],
+    grid: [stepSize, 1],
     onStop: onStop,
     onDrag: onDrag,
-    position: dragPosition,
+    position: position,
     disabled: disabled
   }, /*#__PURE__*/_react["default"].createElement(_Handler.HandlerStyled, {
     ref: ref,
     style: {
       zIndex: zIndex
     },
-    className: (0, _utils.cx)(isVertical && _Slider.classes.verticalOrientation, valuePlacement === 'left' && _Slider.classes.valuePlacementLeft),
-    isLarge: size === 'large',
     onKeyDown: onKeyPress
-  }, size !== 'none' && /*#__PURE__*/_react["default"].createElement(_Thumb.Thumb, _extends({
+  }, /*#__PURE__*/_react["default"].createElement(_Thumb.Thumb, _extends({
     tabIndex: tabIndex,
     min: min,
     max: max,
     value: value,
-    disabled: disabled,
-    orientation: orientation
+    disabled: disabled
   }, rest)), showCurrentValueCondition && /*#__PURE__*/_react["default"].createElement(_Handler.StyledValue, null, value)));
 });

package/styled-components/cjs/components/Slider/ui/Handler/Handler.styles.js

@@ -7,12 +7,9 @@ exports.StyledValue = exports.HandlerStyled = void 0;
 var _styledComponents = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("styled-components"));
 var _Slider = /*#__PURE__*/require("../../Slider.tokens");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var StyledValue = exports.StyledValue = /*#__PURE__*/_styledComponents["default"].span.withConfig({
-  componentId: "plasma-new-hope__sc-a1py3c-0"
-})(["position:absolute;z-index:1;top:var(", ");text-align:center;width:100%;margin-left:-0.125rem;display:flex;justify-content:center;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _Slider.tokens.currentValueTopOffset, _Slider.tokens.valueFontFamily, _Slider.tokens.valueFontSize, _Slider.tokens.valueFontStyle, _Slider.tokens.valueFontWeight, _Slider.tokens.valueLetterSpacing, _Slider.tokens.valueLineHeight);
 var HandlerStyled = exports.HandlerStyled = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  componentId: "plasma-new-hope__sc-a1py3c-0"
+})(["cursor:pointer;position:absolute;z-index:1;top:0;left:0;"]);
+var StyledValue = exports.StyledValue = /*#__PURE__*/_styledComponents["default"].span.withConfig({
   componentId: "plasma-new-hope__sc-a1py3c-1"
-})(["cursor:pointer;position:absolute;z-index:1;top:0;left:0;bottom:0;display:flex;align-items:center;justify-content:center;--thumb-size:", ";&.", "{right:0;bottom:auto;align-items:flex-start;justify-content:center;", "{margin:0;top:0;bottom:0;right:0;left:calc(var(", ") - (var(", ") - var(--thumb-size)) / 2 + 0.25rem);align-items:center;justify-content:flex-start;}}&.", "{", "{left:auto;right:calc(var(", ") - (var(", ") - var(--thumb-size)) / 2 + 0.3125rem);justify-content:flex-end;}}"], function (_ref) {
-  var isLarge = _ref.isLarge;
-  return isLarge ? "var(".concat(_Slider.tokens.thumbSizeLarge, ")") : "var(".concat(_Slider.tokens.thumbSize, ")");
-}, _Slider.classes.verticalOrientation, StyledValue, _Slider.tokens.size, _Slider.tokens.size, _Slider.classes.valuePlacementLeft, StyledValue, _Slider.tokens.size, _Slider.tokens.size);
+})(["position:absolute;z-index:1;top:var(", ");text-align:center;width:100%;margin-left:-0.125rem;display:flex;justify-content:center;font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");"], _Slider.tokens.currentValueTopOffset, _Slider.tokens.currentValueFontFamily, _Slider.tokens.currentValueFontSize, _Slider.tokens.currentValueFontStyle, _Slider.tokens.currentValueFontWeight, _Slider.tokens.currentValueLetterSpacing, _Slider.tokens.currentValueLineHeight);

package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.Thumb = void 0;
 var _react = /*#__PURE__*/_interopRequireDefault( /*#__PURE__*/require("react"));
 var _Thumb = /*#__PURE__*/require("./Thumb.styles");
-var _excluded = ["min", "max", "value", "ariaValueMin", "ariaLabel", "disabled", "orientation"];
+var _excluded = ["min", "max", "value", "ariaValueMin", "ariaLabel", "disabled"];
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 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 _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; }
@@ -19,7 +19,6 @@ var Thumb = exports.Thumb = function Thumb(_ref) {
     ariaValueMin = _ref$ariaValueMin === void 0 ? min : _ref$ariaValueMin,
     ariaLabel = _ref.ariaLabel,
     disabled = _ref.disabled,
-    orientation = _ref.orientation,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_Thumb.ThumbBase, _extends({
     role: "slider",
@@ -28,6 +27,6 @@ var Thumb = exports.Thumb = function Thumb(_ref) {
     "aria-valuemax": max,
     "aria-valuenow": value,
     disabled: disabled,
-    "aria-orientation": orientation
+    "aria-orientation": "horizontal"
   }, rest));
 };

package/styled-components/cjs/components/Slider/ui/Thumb/Thumb.styles.js

@@ -10,8 +10,8 @@ var _Slider = /*#__PURE__*/require("../../Slider.tokens");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var ThumbBase = exports.ThumbBase = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "plasma-new-hope__sc-13botku-0"
-})(["width:var(--thumb-size);height:var(--thumb-size);min-width:var(--thumb-size);min-height:var(--thumb-size);position:relative;border-radius:50%;box-sizing:border-box;background:var(", ");margin:0.0625rem;transition:border-color 0.1s ease-in-out;&:after{background:var(", ");margin:-0.0625rem;content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;}&:not([disabled]):hover:after,&:not([disabled]):active:after{background:var(", ");}&[disabled]{cursor:not-allowed;}&:focus{outline:none;}", ""], _Slider.tokens.thumbBackgroundColor, _Slider.tokens.thumbBorderColor, _Slider.tokens.thumbFocusBorderColor, /*#__PURE__*/(0, _mixins.addFocus)({
-  outlineOffset: '0.0625rem',
+})(["width:var(", ");height:var(", ");position:relative;left:-0.125rem;top:-0.125rem;border-radius:50%;box-sizing:border-box;background:var(", ");margin:0.125rem;transition:border-color 0.1s ease-in-out;&:after{background:var(", ");margin:-0.125rem;content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;}&:not([disabled]):hover:after,&:not([disabled]):active:after{background:var(", ");}&[disabled]{cursor:not-allowed;}&:focus{outline:none;}", ""], _Slider.tokens.thumbSize, _Slider.tokens.thumbSize, _Slider.tokens.thumbBackgroundColor, _Slider.tokens.thumbBorderColor, _Slider.tokens.thumbFocusBorderColor, /*#__PURE__*/(0, _mixins.addFocus)({
+  outlineOffset: '0.125rem',
   outlineSize: '0.125rem',
   outlineRadius: '50%',
   outlineColor: /*#__PURE__*/"var(".concat(_Slider.tokens.thumbFocusBorderColor, ")")

package/styled-components/cjs/components/Slider/utils/index.js

@@ -14,8 +14,8 @@ exports.sizeData = void 0;
  * @param {number} max
  * @return {number}
  */
-function getSliderThumbValue(handleCenterPosRelative, stepSize, min, max) {
-  var newValue = Math.round(handleCenterPosRelative / stepSize) + min;
+function getSliderThumbValue(handleCenterXRelative, stepSize, min, max) {
+  var newValue = Math.round(handleCenterXRelative / stepSize) + min;
   return Math.min(Math.max(newValue, min), max);
 }
 
@@ -26,11 +26,11 @@ function getSliderThumbValue(handleCenterPosRelative, stepSize, min, max) {
  * @param {'left' | 'right'} side
  * @return Array<number>
  */
-function getOffsets(ref, side, isVertical) {
+function getOffsets(ref, side) {
   if (!ref || !('current' in ref) || !ref.current || !side) {
     return [0, 0];
   }
-  var size = isVertical ? ref.current.clientHeight : ref.current.clientWidth;
+  var size = ref.current.clientWidth;
   if (side === 'left') {
     return [0, size];
   }
@@ -41,33 +41,15 @@ function getOffsets(ref, side, isVertical) {
 }
 var sizeData = exports.sizeData = {
   s: {
-    small: {
-      indent: 0.5,
-      fontSizeMultiplier: 16
-    },
-    large: {
-      indent: 0.625,
-      fontSizeMultiplier: 16
-    }
+    indent: 0.5,
+    fontSizeMultiplier: 16
   },
   m: {
-    small: {
-      indent: 0.5,
-      fontSizeMultiplier: 16
-    },
-    large: {
-      indent: 0.625,
-      fontSizeMultiplier: 16
-    }
+    indent: 0.75,
+    fontSizeMultiplier: 16
   },
   l: {
-    small: {
-      indent: 0.5,
-      fontSizeMultiplier: 16
-    },
-    large: {
-      indent: 0.625,
-      fontSizeMultiplier: 16
-    }
+    indent: 0.75,
+    fontSizeMultiplier: 16
   }
 };

package/styled-components/cjs/components/Slider/variations/_view/base.js

@@ -5,5 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.base = void 0;
 var _styledComponents = /*#__PURE__*/require("styled-components");
-var _Slider = /*#__PURE__*/require("../../Slider.tokens");
-var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)(["&.", "{height:100%;display:inline-flex;}"], _Slider.classes.verticalOrientation);
+var base = exports.base = /*#__PURE__*/(0, _styledComponents.css)([""]);

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

@@ -9,15 +9,19 @@ var _react = /*#__PURE__*/_interopRequireWildcard( /*#__PURE__*/require("react")
 var _styledComponents = /*#__PURE__*/require("styled-components");
 var _plasmaCore = /*#__PURE__*/require("@salutejs/plasma-core");
 var _utils = /*#__PURE__*/require("../../utils");
+var _hooks = /*#__PURE__*/require("../../hooks");
 var _mixins = /*#__PURE__*/require("./mixins");
-var _hooks = /*#__PURE__*/require("./hooks");
+var _hooks2 = /*#__PURE__*/require("./hooks");
 var _TextArea = /*#__PURE__*/require("./TextArea.styles");
 var _TextArea2 = /*#__PURE__*/require("./TextArea.tokens");
 var _base = /*#__PURE__*/require("./variations/_view/base");
 var _base2 = /*#__PURE__*/require("./variations/_size/base");
 var _base3 = /*#__PURE__*/require("./variations/_clear/base");
 var _base4 = /*#__PURE__*/require("./variations/_disabled/base");
-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"];
+var _base5 = /*#__PURE__*/require("./variations/_hint-view/base");
+var _base6 = /*#__PURE__*/require("./variations/_hint-size/base");
+var _Hint = /*#__PURE__*/require("./ui/Hint/Hint");
+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", "hintTrigger", "hintText", "hintView", "hintSize", "hintTargetIcon", "hintPlacement", "hintHasArrow", "hintOffset", "hintWidth", "hintContentLeft", "onChange"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -56,6 +60,7 @@ var fallbackStatusMap = {
   warning: 'warning',
   error: 'negative'
 };
+var HINT_DEFAULT_OFFSET = [0, 0];
 
 // TODO: Перенести этот метод в файл applyDynamicLabel.ts
 var getDynamicLabelClasses = exports.getDynamicLabelClasses = function getDynamicLabelClasses(props, focused) {
@@ -92,6 +97,7 @@ var textAreaRoot = exports.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,
@@ -114,21 +120,45 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
       readOnly = props.readOnly,
       rows = props.rows,
       cols = props.cols,
+      _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 ? HINT_DEFAULT_OFFSET : _props$hintOffset,
+      hintWidth = props.hintWidth,
+      hintContentLeft = props.hintContentLeft,
       onChange = props.onChange,
       rest = _objectWithoutProperties(props, _excluded);
-    var _useState = (0, _react.useState)(width ? "".concat(width, "rem") : '100%'),
+    var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
-      helperWidth = _useState2[0],
-      setHelperWidth = _useState2[1];
-    var _useState3 = (0, _react.useState)(false),
+      isHintVisible = _useState2[0],
+      setIsHintVisible = _useState2[1];
+    var _useState3 = (0, _react.useState)(width ? "".concat(width, "rem") : '100%'),
       _useState4 = _slicedToArray(_useState3, 2),
-      focused = _useState4[0],
-      setFocused = _useState4[1];
-    var _useState5 = (0, _react.useState)(),
+      helperWidth = _useState4[0],
+      setHelperWidth = _useState4[1];
+    var _useState5 = (0, _react.useState)(false),
       _useState6 = _slicedToArray(_useState5, 2),
-      uncontrolledValue = _useState6[0],
-      setUncontrolledValue = _useState6[1];
+      focused = _useState6[0],
+      setFocused = _useState6[1];
+    var _useState7 = (0, _react.useState)(),
+      _useState8 = _slicedToArray(_useState7, 2),
+      uncontrolledValue = _useState8[0],
+      setUncontrolledValue = _useState8[1];
     var outerRef = /*#__PURE__*/(0, _react.createRef)();
+    var hintRef = (0, _hooks.useOutsideClick)(function () {
+      setIsHintVisible(false);
+    });
+    var hintInnerRef = (0, _react.useRef)(null);
+    var hintForkRef = (0, _plasmaCore.useForkRef)(hintRef, hintInnerRef);
     var innerOptional = required ? false : optional;
     var hasHelper = Boolean(leftHelper || rightHelper || helperText);
     var hasOuterLabel = Boolean(label && labelPlacement === 'outer');
@@ -139,18 +169,37 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
     var applyCustomWidth = resize !== 'horizontal' && resize !== 'both' && !cols;
     var placeholderLabel = hasInnerLabel ? label : placeholder;
     var clearClass = clear ? _TextArea2.classes.clear : undefined;
+    var hasHintClass = hintText ? _TextArea2.classes.hasHint : undefined;
     var hasRightContentClass = contentRight ? _TextArea2.classes.hasRightContent : undefined;
     var hasDividerClass = hasDivider ? _TextArea2.classes.hasDivider : undefined;
-    var requiredPlacementClass = requiredPlacement === 'right' ? 'align-right ' : undefined;
+    var requiredPlacementClass = requiredPlacement === 'right' ? _TextArea2.classes.requiredAlignRight : undefined;
+    var handleHintShow = function handleHintShow() {
+      return setIsHintVisible(true);
+    };
+    var handleHintHide = function handleHintHide() {
+      return setIsHintVisible(false);
+    };
+    var handleHintClick = function handleHintClick(event) {
+      var _hintInnerRef$current;
+      if (!hintText || hintTrigger !== 'click') {
+        return;
+      }
+      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) {
+        setIsHintVisible(true);
+      }
+    };
     (0, _plasmaCore.useResizeObserver)(outerRef, function (currentElement) {
       var inlineWidth = currentElement.style.width;
       if (inlineWidth || cols) {
         var _currentElement$getBo = currentElement.getBoundingClientRect(),
           elementWidth = _currentElement$getBo.width;
-        setHelperWidth("".concat(elementWidth / _hooks.ROOT_FONT_SIZE, "rem"));
+        setHelperWidth("".concat(elementWidth / _hooks2.ROOT_FONT_SIZE, "rem"));
       }
     });
-    (0, _hooks.useAutoResize)(autoResize || Boolean(clear), outerRef, value, minAuto, maxAuto);
+    (0, _hooks2.useAutoResize)(autoResize || Boolean(clear), outerRef, value, minAuto, maxAuto);
     var onFocusHandler = (0, _react.useCallback)(function () {
       setFocused(true);
     }, []);
@@ -183,8 +232,10 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
       value: value || uncontrolledValue || defaultValue,
       rows: rows
     }, focused);
-    var optionalTextNode = innerOptional ? /*#__PURE__*/_react["default"].createElement(_TextArea.StyledOptionalText, null, Boolean(hasPlaceholderOptional ? placeholderLabel : label) && '\xa0', optionalText) : null;
-    return /*#__PURE__*/_react["default"].createElement(Root, {
+    var optionalTextNode = innerOptional ? /*#__PURE__*/_react["default"].createElement(_TextArea.StyledOptionalText, {
+      inheritFont: !hasOuterLabel
+    }, Boolean(hasPlaceholderOptional ? placeholderLabel : label) && '\xa0', optionalText) : null;
+    return /*#__PURE__*/_react["default"].createElement(Root, _extends({
       view: overriddenView,
       size: size,
       disabled: disabled,
@@ -193,18 +244,53 @@ var textAreaRoot = exports.textAreaRoot = function textAreaRoot(Root) {
       style: _objectSpread({
         width: helperWidth
       }, style),
-      className: (0, _utils.cx)(clearClass, hasDividerClass, className),
+      className: (0, _utils.cx)(clearClass, hasDividerClass, hasHintClass, className),
       onClick: handleTextAreaFocus
-    }, hasOuterLabel && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledLabel, null, required && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledIndicator, {
-      className: (0, _utils.cx)(_TextArea2.classes.outerLabelPlacement, requiredPlacementClass)
-    }), label, optionalTextNode), /*#__PURE__*/_react["default"].createElement(_TextArea.StyledContainer, {
+    }, hintText && {
+      hintView: hintView,
+      hintSize: hintSize
+    }), (hasOuterLabel || titleCaption) && /*#__PURE__*/_react["default"].createElement(_TextArea.OuterLabelWrapper, {
+      isInnnerLabel: labelPlacement === 'inner'
+    }, hasOuterLabel && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledIndicatorWrapper, null, /*#__PURE__*/_react["default"].createElement(_TextArea.StyledLabel, null, label), hintText && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledHintWrapper, null, /*#__PURE__*/_react["default"].createElement(_Hint.HintComponent, {
+      ref: hintForkRef,
+      hintText: hintText,
+      hintTrigger: hintTrigger,
+      isHintVisible: isHintVisible,
+      hintTargetIcon: hintTargetIcon,
+      hintPlacement: hintPlacement,
+      hintHasArrow: hintHasArrow,
+      hintOffset: hintOffset,
+      hintWidth: hintWidth,
+      hintContentLeft: hintContentLeft,
+      handleHintShow: handleHintShow,
+      handleHintHide: handleHintHide,
+      handleHintClick: handleHintClick
+    })), required && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledIndicator, {
+      className: (0, _utils.cx)(_TextArea2.classes.outerLabelPlacement, requiredPlacementClass, hasHintClass)
+    }), optionalTextNode), titleCaption && /*#__PURE__*/_react["default"].createElement(_TextArea.TitleCaption, null, titleCaption)), /*#__PURE__*/_react["default"].createElement(_TextArea.StyledContainer, {
       className: _utils.cx.apply(void 0, [styledContainer].concat(_toConsumableArray(dynamicLabelClasses))),
       width: helperWidth,
       onFocus: onFocusHandler,
       onBlur: onBlurHandler
-    }, required && !hasOuterLabel && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledIndicator, {
+    }, !hasOuterLabel && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, required && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledIndicator, {
       className: (0, _utils.cx)(_TextArea2.classes.innerLabelPlacement, requiredPlacementClass)
-    }), contentRight && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledContent, null, contentRight), /*#__PURE__*/_react["default"].createElement(_TextArea.StyledTextAreaWrapper, {
+    }), hintText && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledHintWrapper, {
+      className: _TextArea2.classes.innerLabelPlacement
+    }, /*#__PURE__*/_react["default"].createElement(_Hint.HintComponent, {
+      ref: hintForkRef,
+      hintText: hintText,
+      hintTrigger: hintTrigger,
+      isHintVisible: isHintVisible,
+      hintTargetIcon: hintTargetIcon,
+      hintPlacement: hintPlacement,
+      hintHasArrow: hintHasArrow,
+      hintOffset: hintOffset,
+      hintWidth: hintWidth,
+      hintContentLeft: hintContentLeft,
+      handleHintShow: handleHintShow,
+      handleHintHide: handleHintHide,
+      handleHintClick: handleHintClick
+    }))), contentRight && /*#__PURE__*/_react["default"].createElement(_TextArea.StyledContent, null, contentRight), /*#__PURE__*/_react["default"].createElement(_TextArea.StyledTextAreaWrapper, {
       className: styledTextAreaWrapper,
       hasHelper: hasHelper
     }, /*#__PURE__*/_react["default"].createElement(_TextArea.StyledTextArea, _extends({
@@ -258,6 +344,12 @@ var textAreaConfig = exports.textAreaConfig = {
     },
     readOnly: {
       attrs: true
+    },
+    hintView: {
+      css: _base5.base
+    },
+    hintSize: {
+      css: _base6.base
     }
   },
   defaults: {