@skbkontur/react-ui 0.0.0-0fe669bb2d → 0.0.0-0ffbe8b468

package/cjs/components/Textarea/Textarea.styles.js

@@ -1,21 +1,36 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");
 
 
+var _Textarea = require("./Textarea.mixins");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
+
 var styles = (0, _Emotion.memoizeStyle)({
-  root: function root(t) {
-    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      font-size: ", ";\n      line-height: ", ";\n      position: relative;\n    "])),
+  root: function root() {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      position: relative;\n    "])));
 
-    t.textareaFontSize,
-    t.textareaLineHeight);
 
 
   },
+  rootSmall: function rootSmall(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    (0, _Textarea.rootTextareaSizeMixin)(t.textareaFontSizeSmall, t.textareaLineHeightSmall));
 
-  textarea: function textarea(t) {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      -webkit-appearance: none;\n      background-clip: padding-box;\n      background: ", ";\n      border: ", " solid ", ";\n      border-top-color: ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      color: ", ";\n      font-family: inherit;\n      font-size: inherit;\n      line-height: inherit;\n      max-width: 100%;\n      min-width: ", ";\n      min-height: ", ";\n      outline: none;\n      padding: ", " ", ";\n      transition: height 0.2s ease-out;\n      vertical-align: middle;\n      width: 100%;\n      border-radius: ", ";\n      white-space: pre-wrap;\n\n      &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n        position: relative;\n        z-index: 2;\n\n        &::placeholder {\n          color: ", ";\n        }\n      }\n\n      &::placeholder {\n        color: ", ";\n      }\n\n      &:-moz-placeholder {\n        color: ", ";\n      }\n\n      &::-moz-placeholder {\n        color: ", ";\n      }\n    "])),
+  },
+  rootMedium: function rootMedium(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    (0, _Textarea.rootTextareaSizeMixin)(t.textareaFontSizeMedium, t.textareaLineHeightMedium));
 
+  },
+  rootLarge: function rootLarge(t) {
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    (0, _Textarea.rootTextareaSizeMixin)(t.textareaFontSizeLarge, t.textareaLineHeightLarge));
+
+  },
+
+  textarea: function textarea(t) {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      -webkit-appearance: none;\n      background: ", ";\n      background-clip: ", ";\n      border: ", " solid ", ";\n      border-top-color: ", ";\n      box-shadow: ", ";\n      box-sizing: border-box;\n      color: ", ";\n      font-family: inherit;\n      font-size: inherit;\n      line-height: inherit;\n      max-width: 100%;\n      min-width: ", ";\n      outline: none;\n      transition: border-color ", " ", ", height 0.2s ease-out;\n      vertical-align: middle;\n      width: 100%;\n      border-radius: ", ";\n      white-space: pre-wrap;\n\n      &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n        position: relative;\n        z-index: 2;\n\n        &::placeholder {\n          color: ", ";\n        }\n      }\n\n      &::placeholder {\n        color: ", ";\n      }\n\n      &:-moz-placeholder {\n        color: ", ";\n      }\n\n      &::-moz-placeholder {\n        color: ", ";\n      }\n    "])),
 
     t.textareaBg,
+    t.textareaBackgroundClip,
     t.textareaBorderWidth, t.textareaBorderColor,
     t.textareaBorderTopColor,
     t.textareaShadow,
@@ -26,10 +41,8 @@ var styles = (0, _Emotion.memoizeStyle)({
 
 
     t.textareaWidth,
-    t.textareaMinHeight,
-
-    t.textareaPaddingY, t.textareaPaddingX,
 
+    t.transitionDuration, t.transitionTimingFunction,
 
 
     t.textareaBorderRadius,
@@ -58,10 +71,33 @@ var styles = (0, _Emotion.memoizeStyle)({
     t.textareaPlaceholderColor);
 
 
+  },
+  textareaSmall: function textareaSmall(t) {
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    (0, _Textarea.textareaSizeMixin)(t.textareaPaddingYSmall, t.textareaPaddingXSmall, t.textareaMinHeightSmall));
+
+  },
+  textareaMedium: function textareaMedium(t) {
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    (0, _Textarea.textareaSizeMixin)(t.textareaPaddingYMedium, t.textareaPaddingXMedium, t.textareaMinHeightMedium));
+
+  },
+  textareaLarge: function textareaLarge(t) {
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    (0, _Textarea.textareaSizeMixin)(t.textareaPaddingYLarge, t.textareaPaddingXLarge, t.textareaMinHeightLarge));
+
+  },
+
+  hovering: function hovering(t) {
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      &:enabled:hover:not(:focus) {\n        border-color: ", ";\n      }\n    "])),
+
+    t.textareaBorderColorHover);
+
+
   },
 
   error: function error(t) {
-    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-color: ", ";\n      box-shadow: 0 0 0 ", " ", ";\n\n      &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-color: ", ";\n      box-shadow: 0 0 0 ", " ", ";\n\n      &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      }\n    "])),
     t.textareaBorderColorError,
     t.textareaBorderWidth, t.textareaBorderColorError,
 
@@ -73,7 +109,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
 
   warning: function warning(t) {
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-color: ", ";\n      box-shadow: 0 0 0 ", " ", ";\n\n      &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border-color: ", ";\n      box-shadow: 0 0 0 ", " ", ";\n\n      &:focus {\n        border-color: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      }\n    "])),
     t.textareaBorderColorWarning,
     t.textareaOutlineWidth, t.textareaBorderColorWarning,
 
@@ -85,7 +121,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
 
   disabled: function disabled(t) {
-    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      background: ", ";\n      border-color: ", ";\n      box-shadow: none;\n\n      &::placeholder {\n        color: ", ";\n      }\n    "])),
+    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      background: ", ";\n      border-color: ", ";\n      box-shadow: none;\n\n      &::placeholder {\n        color: ", ";\n      }\n    "])),
     t.textareaTextColorDisabled,
     t.textareaDisabledBg,
     t.textareaDisabledBorderColor,
@@ -98,7 +134,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
 
   fake: function fake() {
-    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      visibility: hidden;\n      width: 100%;\n    "])));
+    return (0, _Emotion.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2.default)(["\n      height: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      visibility: hidden;\n      width: 100%;\n    "])));
 
 
 
@@ -109,7 +145,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
 
   placeholder: function placeholder() {
-    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      -ms-user-select: none;\n      color: #aaa;\n      left: 12px;\n      overflow: hidden;\n      position: absolute;\n      right: 12px;\n      top: 9px;\n      user-select: none;\n      z-index: 3;\n    "])));
+    return (0, _Emotion.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteralLoose2.default)(["\n      -ms-user-select: none;\n      color: #aaa;\n      left: 12px;\n      overflow: hidden;\n      position: absolute;\n      right: 12px;\n      top: 9px;\n      user-select: none;\n      z-index: 3;\n    "])));
 
 
 
@@ -123,7 +159,7 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
 
   counterContainer: function counterContainer(t) {
-    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      top: 0;\n      border: ", " solid transparent;\n      box-sizing: content-box;\n    "])),
+    return (0, _Emotion.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      top: 0;\n      border: ", " solid transparent;\n      box-sizing: content-box;\n    "])),
 
 
     t.textareaBorderWidth);
@@ -132,33 +168,46 @@ var styles = (0, _Emotion.memoizeStyle)({
   },
 
   counter: function counter(t) {
-    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      z-index: 3;\n      text-align: right;\n      background: ", ";\n      color: ", ";\n      border-radius: 2px;\n      right: ", ";\n      bottom: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: absolute;\n      z-index: 3;\n      text-align: right;\n      background: ", ";\n      color: ", ";\n      border-radius: 2px;\n    "])),
 
 
 
     t.textareaCounterBg,
-    t.textareaCounterColor,
+    t.textareaCounterColor);
 
-    t.textareaPaddingX,
-    t.textareaPaddingY);
+
+  },
+  counterSmall: function counterSmall(t) {
+    return (0, _Emotion.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    (0, _Textarea.counterSizeMixin)(t.textareaPaddingYSmall, t.textareaPaddingXSmall));
+
+  },
+  counterMedium: function counterMedium(t) {
+    return (0, _Emotion.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    (0, _Textarea.counterSizeMixin)(t.textareaPaddingYMedium, t.textareaPaddingXMedium));
+
+  },
+  counterLarge: function counterLarge(t) {
+    return (0, _Emotion.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", ";\n    "])),
+    (0, _Textarea.counterSizeMixin)(t.textareaPaddingYLarge, t.textareaPaddingXLarge));
 
   },
 
   counterError: function counterError(t) {
-    return (0, _Emotion.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
+    return (0, _Emotion.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n    "])),
     t.textareaCounterErrorColor);
 
   },
 
   counterHelp: function counterHelp() {
-    return (0, _Emotion.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-left: 4px;\n      cursor: pointer;\n    "])));
+    return (0, _Emotion.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-left: 4px;\n      cursor: pointer;\n    "])));
 
 
 
   },
 
   disableAnimations: function disableAnimations() {
-    return (0, _Emotion.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2.default)(["\n      transition: none;\n    "])));
+    return (0, _Emotion.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteralLoose2.default)(["\n      transition: none;\n    "])));
 
 
   } });exports.styles = styles;

package/cjs/components/Textarea/Textarea.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Textarea.styles.ts"],"names":["styles","root","t","css","textareaFontSize","textareaLineHeight","textarea","textareaBg","textareaBorderWidth","textareaBorderColor","textareaBorderTopColor","textareaShadow","textareaColor","textareaWidth","textareaMinHeight","textareaPaddingY","textareaPaddingX","textareaBorderRadius","textareaBorderColorFocus","textareaOutlineWidth","textareaPlaceholderColorLight","textareaPlaceholderColor","error","textareaBorderColorError","warning","textareaBorderColorWarning","disabled","textareaTextColorDisabled","textareaDisabledBg","textareaDisabledBorderColor","textareaPlaceholderColorDisabled","fake","placeholder","counterContainer","counter","textareaCounterBg","textareaCounterColor","counterError","textareaCounterErrorColor","counterHelp","disableAnimations"],"mappings":"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","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      display: inline-block;\n      font-size: ${t.textareaFontSize};\n      line-height: ${t.textareaLineHeight};\n      position: relative;\n    `;\n  },\n\n  textarea(t: Theme) {\n    return css`\n      -webkit-appearance: none;\n      background-clip: padding-box;\n      background: ${t.textareaBg};\n      border: ${t.textareaBorderWidth} solid ${t.textareaBorderColor};\n      border-top-color: ${t.textareaBorderTopColor};\n      box-shadow: ${t.textareaShadow};\n      box-sizing: border-box;\n      color: ${t.textareaColor};\n      font-family: inherit;\n      font-size: inherit;\n      line-height: inherit;\n      max-width: 100%;\n      min-width: ${t.textareaWidth};\n      min-height: ${t.textareaMinHeight};\n      outline: none;\n      padding: ${t.textareaPaddingY} ${t.textareaPaddingX};\n      transition: height 0.2s ease-out;\n      vertical-align: middle;\n      width: 100%;\n      border-radius: ${t.textareaBorderRadius};\n      white-space: pre-wrap;\n\n      &:focus {\n        border-color: ${t.textareaBorderColorFocus};\n        box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorFocus};\n        position: relative;\n        z-index: 2;\n\n        &::placeholder {\n          color: ${t.textareaPlaceholderColorLight};\n        }\n      }\n\n      &::placeholder {\n        color: ${t.textareaPlaceholderColor};\n      }\n\n      &:-moz-placeholder {\n        color: ${t.textareaPlaceholderColor};\n      }\n\n      &::-moz-placeholder {\n        color: ${t.textareaPlaceholderColor};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      border-color: ${t.textareaBorderColorError};\n      box-shadow: 0 0 0 ${t.textareaBorderWidth} ${t.textareaBorderColorError};\n\n      &:focus {\n        border-color: ${t.textareaBorderColorError};\n        box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorError};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      border-color: ${t.textareaBorderColorWarning};\n      box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorWarning};\n\n      &:focus {\n        border-color: ${t.textareaBorderColorWarning};\n        box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorWarning};\n      }\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      color: ${t.textareaTextColorDisabled};\n      background: ${t.textareaDisabledBg};\n      border-color: ${t.textareaDisabledBorderColor};\n      box-shadow: none;\n\n      &::placeholder {\n        color: ${t.textareaPlaceholderColorDisabled};\n      }\n    `;\n  },\n\n  fake() {\n    return css`\n      height: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      visibility: hidden;\n      width: 100%;\n    `;\n  },\n\n  placeholder() {\n    return css`\n      -ms-user-select: none;\n      color: #aaa;\n      left: 12px;\n      overflow: hidden;\n      position: absolute;\n      right: 12px;\n      top: 9px;\n      user-select: none;\n      z-index: 3;\n    `;\n  },\n\n  counterContainer(t: Theme) {\n    return css`\n      position: absolute;\n      top: 0;\n      border: ${t.textareaBorderWidth} solid transparent;\n      box-sizing: content-box;\n    `;\n  },\n\n  counter(t: Theme) {\n    return css`\n      position: absolute;\n      z-index: 3;\n      text-align: right;\n      background: ${t.textareaCounterBg};\n      color: ${t.textareaCounterColor};\n      border-radius: 2px;\n      right: ${t.textareaPaddingX};\n      bottom: ${t.textareaPaddingY};\n    `;\n  },\n\n  counterError(t: Theme) {\n    return css`\n      color: ${t.textareaCounterErrorColor};\n    `;\n  },\n\n  counterHelp() {\n    return css`\n      margin-left: 4px;\n      cursor: pointer;\n    `;\n  },\n\n  disableAnimations() {\n    return css`\n      transition: none;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Textarea.styles.ts"],"names":["styles","root","css","rootSmall","t","textareaFontSizeSmall","textareaLineHeightSmall","rootMedium","textareaFontSizeMedium","textareaLineHeightMedium","rootLarge","textareaFontSizeLarge","textareaLineHeightLarge","textarea","textareaBg","textareaBackgroundClip","textareaBorderWidth","textareaBorderColor","textareaBorderTopColor","textareaShadow","textareaColor","textareaWidth","transitionDuration","transitionTimingFunction","textareaBorderRadius","textareaBorderColorFocus","textareaOutlineWidth","textareaPlaceholderColorLight","textareaPlaceholderColor","textareaSmall","textareaPaddingYSmall","textareaPaddingXSmall","textareaMinHeightSmall","textareaMedium","textareaPaddingYMedium","textareaPaddingXMedium","textareaMinHeightMedium","textareaLarge","textareaPaddingYLarge","textareaPaddingXLarge","textareaMinHeightLarge","hovering","textareaBorderColorHover","error","textareaBorderColorError","warning","textareaBorderColorWarning","disabled","textareaTextColorDisabled","textareaDisabledBg","textareaDisabledBorderColor","textareaPlaceholderColorDisabled","fake","placeholder","counterContainer","counter","textareaCounterBg","textareaCounterColor","counterSmall","counterMedium","counterLarge","counterError","textareaCounterErrorColor","counterHelp","disableAnimations"],"mappings":"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","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { counterSizeMixin, rootTextareaSizeMixin, textareaSizeMixin } from './Textarea.mixins';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      display: inline-block;\n      position: relative;\n    `;\n  },\n  rootSmall(t: Theme) {\n    return css`\n      ${rootTextareaSizeMixin(t.textareaFontSizeSmall, t.textareaLineHeightSmall)};\n    `;\n  },\n  rootMedium(t: Theme) {\n    return css`\n      ${rootTextareaSizeMixin(t.textareaFontSizeMedium, t.textareaLineHeightMedium)};\n    `;\n  },\n  rootLarge(t: Theme) {\n    return css`\n      ${rootTextareaSizeMixin(t.textareaFontSizeLarge, t.textareaLineHeightLarge)};\n    `;\n  },\n\n  textarea(t: Theme) {\n    return css`\n      -webkit-appearance: none;\n      background: ${t.textareaBg};\n      background-clip: ${t.textareaBackgroundClip};\n      border: ${t.textareaBorderWidth} solid ${t.textareaBorderColor};\n      border-top-color: ${t.textareaBorderTopColor};\n      box-shadow: ${t.textareaShadow};\n      box-sizing: border-box;\n      color: ${t.textareaColor};\n      font-family: inherit;\n      font-size: inherit;\n      line-height: inherit;\n      max-width: 100%;\n      min-width: ${t.textareaWidth};\n      outline: none;\n      transition: border-color ${t.transitionDuration} ${t.transitionTimingFunction}, height 0.2s ease-out;\n      vertical-align: middle;\n      width: 100%;\n      border-radius: ${t.textareaBorderRadius};\n      white-space: pre-wrap;\n\n      &:focus {\n        border-color: ${t.textareaBorderColorFocus};\n        box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorFocus};\n        position: relative;\n        z-index: 2;\n\n        &::placeholder {\n          color: ${t.textareaPlaceholderColorLight};\n        }\n      }\n\n      &::placeholder {\n        color: ${t.textareaPlaceholderColor};\n      }\n\n      &:-moz-placeholder {\n        color: ${t.textareaPlaceholderColor};\n      }\n\n      &::-moz-placeholder {\n        color: ${t.textareaPlaceholderColor};\n      }\n    `;\n  },\n  textareaSmall(t: Theme) {\n    return css`\n      ${textareaSizeMixin(t.textareaPaddingYSmall, t.textareaPaddingXSmall, t.textareaMinHeightSmall)};\n    `;\n  },\n  textareaMedium(t: Theme) {\n    return css`\n      ${textareaSizeMixin(t.textareaPaddingYMedium, t.textareaPaddingXMedium, t.textareaMinHeightMedium)};\n    `;\n  },\n  textareaLarge(t: Theme) {\n    return css`\n      ${textareaSizeMixin(t.textareaPaddingYLarge, t.textareaPaddingXLarge, t.textareaMinHeightLarge)};\n    `;\n  },\n\n  hovering(t: Theme) {\n    return css`\n      &:enabled:hover:not(:focus) {\n        border-color: ${t.textareaBorderColorHover};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      border-color: ${t.textareaBorderColorError};\n      box-shadow: 0 0 0 ${t.textareaBorderWidth} ${t.textareaBorderColorError};\n\n      &:focus {\n        border-color: ${t.textareaBorderColorError};\n        box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorError};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      border-color: ${t.textareaBorderColorWarning};\n      box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorWarning};\n\n      &:focus {\n        border-color: ${t.textareaBorderColorWarning};\n        box-shadow: 0 0 0 ${t.textareaOutlineWidth} ${t.textareaBorderColorWarning};\n      }\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      color: ${t.textareaTextColorDisabled};\n      background: ${t.textareaDisabledBg};\n      border-color: ${t.textareaDisabledBorderColor};\n      box-shadow: none;\n\n      &::placeholder {\n        color: ${t.textareaPlaceholderColorDisabled};\n      }\n    `;\n  },\n\n  fake() {\n    return css`\n      height: 0;\n      left: 0;\n      position: absolute;\n      top: 0;\n      visibility: hidden;\n      width: 100%;\n    `;\n  },\n\n  placeholder() {\n    return css`\n      -ms-user-select: none;\n      color: #aaa;\n      left: 12px;\n      overflow: hidden;\n      position: absolute;\n      right: 12px;\n      top: 9px;\n      user-select: none;\n      z-index: 3;\n    `;\n  },\n\n  counterContainer(t: Theme) {\n    return css`\n      position: absolute;\n      top: 0;\n      border: ${t.textareaBorderWidth} solid transparent;\n      box-sizing: content-box;\n    `;\n  },\n\n  counter(t: Theme) {\n    return css`\n      position: absolute;\n      z-index: 3;\n      text-align: right;\n      background: ${t.textareaCounterBg};\n      color: ${t.textareaCounterColor};\n      border-radius: 2px;\n    `;\n  },\n  counterSmall(t: Theme) {\n    return css`\n      ${counterSizeMixin(t.textareaPaddingYSmall, t.textareaPaddingXSmall)};\n    `;\n  },\n  counterMedium(t: Theme) {\n    return css`\n      ${counterSizeMixin(t.textareaPaddingYMedium, t.textareaPaddingXMedium)};\n    `;\n  },\n  counterLarge(t: Theme) {\n    return css`\n      ${counterSizeMixin(t.textareaPaddingYLarge, t.textareaPaddingXLarge)};\n    `;\n  },\n\n  counterError(t: Theme) {\n    return css`\n      color: ${t.textareaCounterErrorColor};\n    `;\n  },\n\n  counterHelp() {\n    return css`\n      margin-left: 4px;\n      cursor: pointer;\n    `;\n  },\n\n  disableAnimations() {\n    return css`\n      transition: none;\n    `;\n  },\n});\n"]}

package/cjs/components/Textarea/TextareaCounter.d.ts

@@ -1,3 +1,4 @@
+import { SizeProp } from '../../lib/types/props';
 import { TextareaProps } from './Textarea';
 export interface TextareaCounterProps {
     value: TextareaProps['value'];
@@ -5,6 +6,7 @@ export interface TextareaCounterProps {
     help: TextareaProps['counterHelp'];
     onCloseHelp: () => void;
     textarea: HTMLTextAreaElement;
+    size: SizeProp;
 }
 export interface TextareaCounterRef {
     reflow: () => void;

package/cjs/components/Textarea/TextareaCounter.js

@@ -8,6 +8,9 @@ var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _utils = require("../../lib/utils");
 var _Tooltip = require("../Tooltip");
 var _Emotion = require("../../lib/theming/Emotion");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+var _QuestionCircleIcon16Solid = require("../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Solid");
+
 
 var _Textarea = require("./Textarea");
 var _Textarea2 = require("./Textarea.styles");function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}
@@ -24,11 +27,12 @@ var _Textarea2 = require("./Textarea.styles");function _getRequireWildcardCache(
 
 
 
+
 var handleHelpMouseDown = function handleHelpMouseDown(e) {return e.preventDefault();};
 
 var TextareaCounter = (0, _forwardRefAndName.forwardRefAndName)(
 'TextareaCounter',
-function (_ref, ref) {var _cx;var length = _ref.length,value = _ref.value,help = _ref.help,onCloseHelp = _ref.onCloseHelp,textarea = _ref.textarea;
+function (_ref, ref) {var _cx;var length = _ref.length,value = _ref.value,help = _ref.help,onCloseHelp = _ref.onCloseHelp,textarea = _ref.textarea,size = _ref.size;
   var theme = (0, _react.useContext)(_ThemeContext.ThemeContext);
   var _useState = (0, _react.useState)(textarea.clientWidth),width = _useState[0],setWidth = _useState[1];
   var _useState2 = (0, _react.useState)(textarea.clientHeight),height = _useState2[0],setHeight = _useState2[1];
@@ -41,18 +45,41 @@ function (_ref, ref) {var _cx;var length = _ref.length,value = _ref.value,help =
   var renderTooltipContent = (0, _react.useCallback)(function () {return help;}, [help]);
   var textareaValue = value ? value.toString().length : 0;
   var counterValue = length - textareaValue;
+
+  var helpIconProps = {
+    onMouseDown: handleHelpMouseDown,
+    color: theme.textareaCounterHelpIconColor,
+    'data-tid': _Textarea.TextareaDataTids.helpIcon };
+
+  var helpIcon = (0, _ThemeHelpers.isTheme2022)(theme) ? /*#__PURE__*/
+  _react.default.createElement(_QuestionCircleIcon16Solid.QuestionCircleIcon16Solid, helpIconProps) : /*#__PURE__*/
+
+  _react.default.createElement(_px.HelpDotIcon, helpIconProps);
+
   var counterHelp = (0, _utils.isFunction)(help) ?
   help() : /*#__PURE__*/
 
-  _react.default.createElement(_Tooltip.Tooltip, { pos: 'right bottom', trigger: 'click', render: renderTooltipContent, onCloseClick: onCloseHelp }, /*#__PURE__*/
-  _react.default.createElement(_px.HelpDotIcon, { onMouseDown: handleHelpMouseDown, color: theme.textareaCounterHelpIconColor }));
+  _react.default.createElement(_Tooltip.Tooltip, { pos: 'right bottom', trigger: 'click', render: renderTooltipContent, onCloseClick: onCloseHelp },
+  helpIcon);
+
+
 
+  var getCounterSizeClassName = function getCounterSizeClassName() {
+    switch (size) {
+      case 'large':
+        return _Textarea2.styles.counterLarge(theme);
+      case 'medium':
+        return _Textarea2.styles.counterMedium(theme);
+      case 'small':
+      default:
+        return _Textarea2.styles.counterSmall(theme);}
 
+  };
 
   return /*#__PURE__*/(
-    _react.default.createElement("div", { "data-tid": _Textarea.TextareaDataTids.counter, className: _Textarea2.styles.counterContainer(theme), style: { width: width, height: height } }, /*#__PURE__*/
+    _react.default.createElement("div", { "data-tid": _Textarea.TextareaDataTids.counter, className: (0, _Emotion.cx)(_Textarea2.styles.counterContainer(theme)), style: { width: width, height: height } }, /*#__PURE__*/
     _react.default.createElement("span", {
-      className: (0, _Emotion.cx)(_Textarea2.styles.counter(theme), (_cx = {}, _cx[
+      className: (0, _Emotion.cx)(getCounterSizeClassName(), _Textarea2.styles.counter(theme), (_cx = {}, _cx[
       _Textarea2.styles.counterError(theme)] = counterValue < 0, _cx)) },
 
 

package/cjs/components/Textarea/TextareaCounter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TextareaCounter.tsx"],"names":["handleHelpMouseDown","e","preventDefault","TextareaCounter","ref","length","value","help","onCloseHelp","textarea","theme","ThemeContext","clientWidth","width","setWidth","clientHeight","height","setHeight","reflow","renderTooltipContent","textareaValue","toString","counterValue","counterHelp","textareaCounterHelpIconColor","TextareaDataTids","counter","styles","counterContainer","counterError","propTypes","number","isRequired","oneOfType","string","node","func","HTMLElement"],"mappings":"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","sourcesContent":["import React, { SyntheticEvent, useContext, useCallback, useImperativeHandle, useState } from 'react';\nimport propTypes from 'prop-types';\n\nimport { safePropTypesInstanceOf } from '../../lib/SSRSafe';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { HelpDotIcon } from '../../internal/icons/16px';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isFunction } from '../../lib/utils';\nimport { Tooltip } from '../Tooltip';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { TextareaDataTids, TextareaProps } from './Textarea';\nimport { styles } from './Textarea.styles';\n\nexport interface TextareaCounterProps {\n  value: TextareaProps['value'];\n  length: number;\n  help: TextareaProps['counterHelp'];\n  onCloseHelp: () => void;\n  textarea: HTMLTextAreaElement;\n}\n\nexport interface TextareaCounterRef {\n  reflow: () => void;\n}\n\nconst handleHelpMouseDown = (e: SyntheticEvent) => e.preventDefault();\n\nexport const TextareaCounter = forwardRefAndName<TextareaCounterRef, TextareaCounterProps>(\n  'TextareaCounter',\n  ({ length, value, help, onCloseHelp, textarea }, ref) => {\n    const theme = useContext(ThemeContext);\n    const [width, setWidth] = useState(textarea.clientWidth);\n    const [height, setHeight] = useState(textarea.clientHeight);\n    const reflow = useCallback(() => {\n      const { clientWidth, clientHeight } = textarea;\n      setWidth(clientWidth);\n      setHeight(clientHeight);\n    }, [textarea]);\n    useImperativeHandle(ref, () => ({ reflow }), [reflow]);\n    const renderTooltipContent = useCallback(() => help, [help]);\n    const textareaValue = value ? value.toString().length : 0;\n    const counterValue = length - textareaValue;\n    const counterHelp = isFunction(help) ? (\n      help()\n    ) : (\n      <Tooltip pos={'right bottom'} trigger={'click'} render={renderTooltipContent} onCloseClick={onCloseHelp}>\n        <HelpDotIcon onMouseDown={handleHelpMouseDown} color={theme.textareaCounterHelpIconColor} />\n      </Tooltip>\n    );\n\n    return (\n      <div data-tid={TextareaDataTids.counter} className={styles.counterContainer(theme)} style={{ width, height }}>\n        <span\n          className={cx(styles.counter(theme), {\n            [styles.counterError(theme)]: counterValue < 0,\n          })}\n        >\n          {counterValue}\n          {help && <span className={styles.counterHelp()}>{counterHelp}</span>}\n        </span>\n      </div>\n    );\n  },\n);\n\nTextareaCounter.propTypes = {\n  length: propTypes.number.isRequired,\n  value: propTypes.oneOfType([propTypes.string, propTypes.number]),\n  help: propTypes.oneOfType([propTypes.node, propTypes.func]),\n  onCloseHelp: propTypes.func.isRequired,\n  textarea: safePropTypesInstanceOf(() => HTMLElement).isRequired,\n};\n"]}
+{"version":3,"sources":["TextareaCounter.tsx"],"names":["handleHelpMouseDown","e","preventDefault","TextareaCounter","ref","length","value","help","onCloseHelp","textarea","size","theme","ThemeContext","clientWidth","width","setWidth","clientHeight","height","setHeight","reflow","renderTooltipContent","textareaValue","toString","counterValue","helpIconProps","onMouseDown","color","textareaCounterHelpIconColor","TextareaDataTids","helpIcon","counterHelp","getCounterSizeClassName","styles","counterLarge","counterMedium","counterSmall","counter","counterContainer","counterError","propTypes","number","isRequired","oneOfType","string","node","func","HTMLElement"],"mappings":"6JAAA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AAGA;AACA,8C;;;;;;;;;;;;;;;AAeA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,CAAD,UAAuBA,CAAC,CAACC,cAAF,EAAvB,EAA5B;;AAEO,IAAMC,eAAe,GAAG;AAC7B,iBAD6B;AAE7B,gBAAuDC,GAAvD,EAA+D,aAA5DC,MAA4D,QAA5DA,MAA4D,CAApDC,KAAoD,QAApDA,KAAoD,CAA7CC,IAA6C,QAA7CA,IAA6C,CAAvCC,WAAuC,QAAvCA,WAAuC,CAA1BC,QAA0B,QAA1BA,QAA0B,CAAhBC,IAAgB,QAAhBA,IAAgB;AAC7D,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;AACA,kBAA0B,qBAASH,QAAQ,CAACI,WAAlB,CAA1B,CAAOC,KAAP,gBAAcC,QAAd;AACA,mBAA4B,qBAASN,QAAQ,CAACO,YAAlB,CAA5B,CAAOC,MAAP,iBAAeC,SAAf;AACA,MAAMC,MAAM,GAAG,wBAAY,YAAM;AAC/B,QAAQN,WAAR,GAAsCJ,QAAtC,CAAQI,WAAR,CAAqBG,YAArB,GAAsCP,QAAtC,CAAqBO,YAArB;AACAD,IAAAA,QAAQ,CAACF,WAAD,CAAR;AACAK,IAAAA,SAAS,CAACF,YAAD,CAAT;AACD,GAJc,EAIZ,CAACP,QAAD,CAJY,CAAf;AAKA,kCAAoBL,GAApB,EAAyB,oBAAO,EAAEe,MAAM,EAANA,MAAF,EAAP,EAAzB,EAA6C,CAACA,MAAD,CAA7C;AACA,MAAMC,oBAAoB,GAAG,wBAAY,oBAAMb,IAAN,EAAZ,EAAwB,CAACA,IAAD,CAAxB,CAA7B;AACA,MAAMc,aAAa,GAAGf,KAAK,GAAGA,KAAK,CAACgB,QAAN,GAAiBjB,MAApB,GAA6B,CAAxD;AACA,MAAMkB,YAAY,GAAGlB,MAAM,GAAGgB,aAA9B;;AAEA,MAAMG,aAAa,GAAG;AACpBC,IAAAA,WAAW,EAAEzB,mBADO;AAEpB0B,IAAAA,KAAK,EAAEf,KAAK,CAACgB,4BAFO;AAGpB,gBAAYC,2BAAiBC,QAHT,EAAtB;;AAKA,MAAMA,QAAQ,GAAG,+BAAYlB,KAAZ;AACf,+BAAC,oDAAD,EAA+Ba,aAA/B,CADe;;AAGf,+BAAC,eAAD,EAAiBA,aAAjB,CAHF;;AAKA,MAAMM,WAAW,GAAG,uBAAWvB,IAAX;AAClBA,EAAAA,IAAI,EADc;;AAGlB,+BAAC,gBAAD,IAAS,GAAG,EAAE,cAAd,EAA8B,OAAO,EAAE,OAAvC,EAAgD,MAAM,EAAEa,oBAAxD,EAA8E,YAAY,EAAEZ,WAA5F;AACGqB,EAAAA,QADH,CAHF;;;;AAQA,MAAME,uBAAuB,GAAG,SAA1BA,uBAA0B,GAAM;AACpC,YAAQrB,IAAR;AACE,WAAK,OAAL;AACE,eAAOsB,kBAAOC,YAAP,CAAoBtB,KAApB,CAAP;AACF,WAAK,QAAL;AACE,eAAOqB,kBAAOE,aAAP,CAAqBvB,KAArB,CAAP;AACF,WAAK,OAAL;AACA;AACE,eAAOqB,kBAAOG,YAAP,CAAoBxB,KAApB,CAAP,CAPJ;;AASD,GAVD;;AAYA;AACE,0CAAK,YAAUiB,2BAAiBQ,OAAhC,EAAyC,SAAS,EAAE,iBAAGJ,kBAAOK,gBAAP,CAAwB1B,KAAxB,CAAH,CAApD,EAAwF,KAAK,EAAE,EAAEG,KAAK,EAALA,KAAF,EAASG,MAAM,EAANA,MAAT,EAA/F;AACE;AACE,MAAA,SAAS,EAAE,iBAAGc,uBAAuB,EAA1B,EAA8BC,kBAAOI,OAAP,CAAezB,KAAf,CAA9B;AACRqB,wBAAOM,YAAP,CAAoB3B,KAApB,CADQ,IACqBY,YAAY,GAAG,CADpC,OADb;;;AAKGA,IAAAA,YALH;AAMGhB,IAAAA,IAAI,iBAAI,uCAAM,SAAS,EAAEyB,kBAAOF,WAAP,EAAjB,IAAwCA,WAAxC,CANX,CADF,CADF;;;;AAYD,CA1D4B,CAAxB,C;;;AA6DP3B,eAAe,CAACoC,SAAhB,GAA4B;AAC1BlC,EAAAA,MAAM,EAAEkC,mBAAUC,MAAV,CAAiBC,UADC;AAE1BnC,EAAAA,KAAK,EAAEiC,mBAAUG,SAAV,CAAoB,CAACH,mBAAUI,MAAX,EAAmBJ,mBAAUC,MAA7B,CAApB,CAFmB;AAG1BjC,EAAAA,IAAI,EAAEgC,mBAAUG,SAAV,CAAoB,CAACH,mBAAUK,IAAX,EAAiBL,mBAAUM,IAA3B,CAApB,CAHoB;AAI1BrC,EAAAA,WAAW,EAAE+B,mBAAUM,IAAV,CAAeJ,UAJF;AAK1BhC,EAAAA,QAAQ,EAAE,sCAAwB,oBAAMqC,WAAN,EAAxB,EAA2CL,UAL3B,EAA5B","sourcesContent":["import React, { SyntheticEvent, useContext, useCallback, useImperativeHandle, useState } from 'react';\nimport propTypes from 'prop-types';\n\nimport { safePropTypesInstanceOf } from '../../lib/SSRSafe';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { HelpDotIcon } from '../../internal/icons/16px';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isFunction } from '../../lib/utils';\nimport { Tooltip } from '../Tooltip';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { QuestionCircleIcon16Solid } from '../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Solid';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { TextareaDataTids, TextareaProps } from './Textarea';\nimport { styles } from './Textarea.styles';\n\nexport interface TextareaCounterProps {\n  value: TextareaProps['value'];\n  length: number;\n  help: TextareaProps['counterHelp'];\n  onCloseHelp: () => void;\n  textarea: HTMLTextAreaElement;\n  size: SizeProp;\n}\n\nexport interface TextareaCounterRef {\n  reflow: () => void;\n}\n\nconst handleHelpMouseDown = (e: SyntheticEvent) => e.preventDefault();\n\nexport const TextareaCounter = forwardRefAndName<TextareaCounterRef, TextareaCounterProps>(\n  'TextareaCounter',\n  ({ length, value, help, onCloseHelp, textarea, size }, ref) => {\n    const theme = useContext(ThemeContext);\n    const [width, setWidth] = useState(textarea.clientWidth);\n    const [height, setHeight] = useState(textarea.clientHeight);\n    const reflow = useCallback(() => {\n      const { clientWidth, clientHeight } = textarea;\n      setWidth(clientWidth);\n      setHeight(clientHeight);\n    }, [textarea]);\n    useImperativeHandle(ref, () => ({ reflow }), [reflow]);\n    const renderTooltipContent = useCallback(() => help, [help]);\n    const textareaValue = value ? value.toString().length : 0;\n    const counterValue = length - textareaValue;\n\n    const helpIconProps = {\n      onMouseDown: handleHelpMouseDown,\n      color: theme.textareaCounterHelpIconColor,\n      'data-tid': TextareaDataTids.helpIcon,\n    };\n    const helpIcon = isTheme2022(theme) ? (\n      <QuestionCircleIcon16Solid {...helpIconProps} />\n    ) : (\n      <HelpDotIcon {...helpIconProps} />\n    );\n    const counterHelp = isFunction(help) ? (\n      help()\n    ) : (\n      <Tooltip pos={'right bottom'} trigger={'click'} render={renderTooltipContent} onCloseClick={onCloseHelp}>\n        {helpIcon}\n      </Tooltip>\n    );\n\n    const getCounterSizeClassName = () => {\n      switch (size) {\n        case 'large':\n          return styles.counterLarge(theme);\n        case 'medium':\n          return styles.counterMedium(theme);\n        case 'small':\n        default:\n          return styles.counterSmall(theme);\n      }\n    };\n\n    return (\n      <div data-tid={TextareaDataTids.counter} className={cx(styles.counterContainer(theme))} style={{ width, height }}>\n        <span\n          className={cx(getCounterSizeClassName(), styles.counter(theme), {\n            [styles.counterError(theme)]: counterValue < 0,\n          })}\n        >\n          {counterValue}\n          {help && <span className={styles.counterHelp()}>{counterHelp}</span>}\n        </span>\n      </div>\n    );\n  },\n);\n\nTextareaCounter.propTypes = {\n  length: propTypes.number.isRequired,\n  value: propTypes.oneOfType([propTypes.string, propTypes.number]),\n  help: propTypes.oneOfType([propTypes.node, propTypes.func]),\n  onCloseHelp: propTypes.func.isRequired,\n  textarea: safePropTypesInstanceOf(() => HTMLElement).isRequired,\n};\n"]}

package/cjs/components/Toast/Toast.d.ts

@@ -1,17 +1,19 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import { Nullable } from '../../typings/utility-types';
 import { CommonProps } from '../../internal/CommonWrapper';
 import { ToastView } from './ToastView';
 export interface Action {
     label: string;
     handler: () => void;
+    'aria-label'?: string;
 }
 export interface ToastState {
     notification: Nullable<string>;
     action: Nullable<Action>;
     id: number;
+    showTime: Nullable<number>;
 }
-export interface ToastProps extends CommonProps {
+export interface ToastProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {
     onPush?: (notification: string, action?: Action) => void;
     onClose?: (notification: string, action?: Action) => void;
 }
@@ -24,7 +26,7 @@ export declare const ToastDataTids: {
 /**
  * Показывает уведомления.
  *
- * Доступен статический метод: `Toast.push(notification, action?)`.
+ * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.
  * Однако, при его использовании не работает кастомизация и могут быть проблемы
  * с перекрытием уведомления другими элементами страницы.
  *
@@ -33,7 +35,7 @@ export declare const ToastDataTids: {
 export declare class Toast extends React.Component<ToastProps, ToastState> {
     static __KONTUR_REACT_UI__: string;
     private setRootNode;
-    static push(notification: string, action?: Action): void;
+    static push(notification: string, action?: Nullable<Action>, showTime?: number): void;
     static close(): void;
     _toast: Nullable<ToastView>;
     private _timeout;
@@ -45,13 +47,15 @@ export declare class Toast extends React.Component<ToastProps, ToastState> {
      * Показывает тост с `notification` в качестве сообщения.
      * Тост автоматически скрывается через 3 или 7 секунд,
      * в зависимости от наличия у него кнопки `action`.
+     * Время показа можно задать вручную, передав `showTime`.
      *
      * @public
      * @param {string} notification
      * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`
      * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler
+     * @param {number} showTime Время существования Toast в миллисекундах
      */
-    push(notification: string, action?: Action): void;
+    push(notification: string, action?: Nullable<Action>, showTime?: number): void;
     /**
      * @public
      */

package/cjs/components/Toast/Toast.js

@@ -27,6 +27,8 @@ var _ToastStatic = require("./ToastStatic");var _class, _class2, _temp;
 
 
 
+
+
 var ToastDataTids = {
   toastStatic: 'StaticToast',
   toastView: 'ToastView__root',
@@ -37,7 +39,7 @@ var ToastDataTids = {
 /**
  * Показывает уведомления.
  *
- * Доступен статический метод: `Toast.push(notification, action?)`.
+ * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.
  * Однако, при его использовании не работает кастомизация и могут быть проблемы
  * с перекрытием уведомления другими элементами страницы.
  *
@@ -48,8 +50,8 @@ Toast = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
 
 
-  push = function push(notification, action) {
-    _ToastStatic.ToastStatic.push(notification, action);
+  push = function push(notification, action, showTime) {
+    _ToastStatic.ToastStatic.push(notification, action, showTime);
   };Toast.
 
   close = function close() {
@@ -100,6 +102,9 @@ Toast = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
 
 
+
+
+
 
 
 
@@ -146,6 +151,7 @@ Toast = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
 
 
+
 
 
     setRootRef = function (element) {
@@ -161,25 +167,28 @@ Toast = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
       }
     };_this.
 
-    _setTimer = function () {
+    _setTimer = function () {var _this$state$showTime;
       _this._clearTimer();
 
-      var timeOut = _this.state.action ? 7 : 3;
+      var showTime = _this.state.action ? 7000 : 3000;
+      showTime = (_this$state$showTime = _this.state.showTime) != null ? _this$state$showTime : showTime;
 
-      _this._timeout = window.setTimeout(_this.close, timeOut * 1000);
+      _this._timeout = window.setTimeout(_this.close, showTime);
     };_this.
 
     _refToast = function (element) {
       _this._toast = element;
-    };_this.state = { notification: null, action: null, id: 0 };return _this;}var _proto = Toast.prototype;_proto.componentWillUnmount = function componentWillUnmount() {this._clearTimer();};_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, this._renderToast()));} /**
+    };_this.state = { notification: null, action: null, id: 0, showTime: null };return _this;}var _proto = Toast.prototype;_proto.componentWillUnmount = function componentWillUnmount() {this._clearTimer();};_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, this._renderToast()));} /**
    * Показывает тост с `notification` в качестве сообщения.
    * Тост автоматически скрывается через 3 или 7 секунд,
    * в зависимости от наличия у него кнопки `action`.
+   * Время показа можно задать вручную, передав `showTime`.
    *
    * @public
    * @param {string} notification
    * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`
    * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler
-   */;_proto.push = function push(notification, action) {if (this.state.notification) {this.close();}safelyCall(this.props.onPush, notification, action);this.setState(function (_ref) {var id = _ref.id;return { notification: notification, action: action, id: id + 1 };}, this._setTimer);} /**
+   * @param {number} showTime Время существования Toast в миллисекундах
+   */;_proto.push = function push(notification, action, showTime) {if (this.state.notification) {this.close();}safelyCall(this.props.onPush, notification, action);this.setState(function (_ref) {var id = _ref.id;return { notification: notification, action: action, id: id + 1, showTime: showTime };}, this._setTimer);} /**
    * @public
-   */;_proto._renderToast = function _renderToast() {var _this$state = this.state,notification = _this$state.notification,action = _this$state.action,id = _this$state.id;if (!notification) {return null;}var toastProps = { onMouseEnter: this._clearTimer, onMouseLeave: this._setTimer, onClose: this.close, children: notification, action: action };return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, { key: id, classNames: { enter: _Toast.styles.enter(), enterActive: _Toast.styles.enterActive(), exit: _Toast.styles.exit(), exitActive: _Toast.styles.exitActive() }, timeout: { enter: 200, exit: 150 }, enter: !_currentEnvironment.isTestEnv, exit: !_currentEnvironment.isTestEnv, nodeRef: this.rootRef }, /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootRef }, this.props), /*#__PURE__*/_react.default.createElement(_ToastView.ToastView, (0, _extends2.default)({ ref: this._refToast }, toastProps))));};return Toast;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Toast', _temp)) || _class;exports.Toast = Toast;function safelyCall(fn) {if (fn) {for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {args[_key - 1] = arguments[_key];}fn.apply(void 0, args);}}
+   */;_proto._renderToast = function _renderToast() {var _this$state = this.state,notification = _this$state.notification,action = _this$state.action,id = _this$state.id;if (!notification) {return null;}var toastProps = { onMouseEnter: this._clearTimer, onMouseLeave: this._setTimer, onClose: this.close, children: notification, 'aria-label': this.props['aria-label'], action: action };return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, { key: id, classNames: { enter: _Toast.styles.enter(), enterActive: _Toast.styles.enterActive(), exit: _Toast.styles.exit(), exitActive: _Toast.styles.exitActive() }, timeout: { enter: 200, exit: 150 }, enter: !_currentEnvironment.isTestEnv, exit: !_currentEnvironment.isTestEnv, nodeRef: this.rootRef }, /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootRef }, this.props), /*#__PURE__*/_react.default.createElement(_ToastView.ToastView, (0, _extends2.default)({ ref: this._refToast }, toastProps))));};return Toast;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Toast', _temp)) || _class;exports.Toast = Toast;function safelyCall(fn) {if (fn) {for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {args[_key - 1] = arguments[_key];}fn.apply(void 0, args);}}

package/cjs/components/Toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Toast.tsx"],"names":["ToastDataTids","toastStatic","toastView","action","close","Toast","rootNode","push","notification","ToastStatic","props","_timeout","rootRef","React","createRef","safelyCall","onClose","state","setState","setRootRef","element","setRootNode","current","_clearTimer","clearTimeout","_setTimer","timeOut","window","setTimeout","_refToast","_toast","id","componentWillUnmount","render","_renderToast","onPush","toastProps","onMouseEnter","onMouseLeave","children","enter","styles","enterActive","exit","exitActive","isTestEnv","Component","__KONTUR_REACT_UI__","fn","args"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\n\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { Nullable } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Toast.styles';\nimport { ToastView, ToastViewProps } from './ToastView';\nimport { ToastStatic } from './ToastStatic';\n\nexport interface Action {\n  label: string;\n  handler: () => void;\n}\n\nexport interface ToastState {\n  notification: Nullable<string>;\n  action: Nullable<Action>;\n  id: number;\n}\n\nexport interface ToastProps extends CommonProps {\n  onPush?: (notification: string, action?: Action) => void;\n  onClose?: (notification: string, action?: Action) => void;\n}\n\nexport const ToastDataTids = {\n  toastStatic: 'StaticToast',\n  toastView: 'ToastView__root',\n  action: 'ToastView__action',\n  close: 'ToastView__close',\n} as const;\n\n/**\n * Показывает уведомления.\n *\n * Доступен статический метод: `Toast.push(notification, action?)`.\n * Однако, при его использовании не работает кастомизация и могут быть проблемы\n * с перекрытием уведомления другими элементами страницы.\n *\n * Рекомендуется использовать Toast через `ref` (см. примеры).\n */\n@rootNode\nexport class Toast extends React.Component<ToastProps, ToastState> {\n  public static __KONTUR_REACT_UI__ = 'Toast';\n  private setRootNode!: TSetRootNode;\n\n  public static push(notification: string, action?: Action) {\n    ToastStatic.push(notification, action);\n  }\n\n  public static close() {\n    ToastStatic.close();\n  }\n\n  public _toast: Nullable<ToastView>;\n  private _timeout: Nullable<number> = null;\n  private rootRef = React.createRef<HTMLElement>();\n\n  constructor(props: ToastProps) {\n    super(props);\n    this.state = {\n      notification: null,\n      action: null,\n      id: 0,\n    };\n  }\n\n  public componentWillUnmount() {\n    this._clearTimer();\n  }\n\n  public render() {\n    return (\n      <RenderContainer>\n        <TransitionGroup>{this._renderToast()}</TransitionGroup>\n      </RenderContainer>\n    );\n  }\n\n  /**\n   * Показывает тост с `notification` в качестве сообщения.\n   * Тост автоматически скрывается через 3 или 7 секунд,\n   * в зависимости от наличия у него кнопки `action`.\n   *\n   * @public\n   * @param {string} notification\n   * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`\n   * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler\n   */\n  public push(notification: string, action?: Action) {\n    if (this.state.notification) {\n      this.close();\n    }\n\n    safelyCall(this.props.onPush, notification, action);\n\n    this.setState(({ id }) => ({ notification, action, id: id + 1 }), this._setTimer);\n  }\n\n  /**\n   * @public\n   */\n  public close = () => {\n    safelyCall(this.props.onClose, this.state.notification, this.state.action);\n    this.setState({ notification: null, action: null });\n  };\n\n  private _renderToast() {\n    const { notification, action, id } = this.state;\n\n    if (!notification) {\n      return null;\n    }\n\n    const toastProps: ToastViewProps = {\n      onMouseEnter: this._clearTimer,\n      onMouseLeave: this._setTimer,\n      onClose: this.close,\n      children: notification,\n      action,\n    };\n\n    return (\n      <CSSTransition\n        key={id}\n        classNames={{\n          enter: styles.enter(),\n          enterActive: styles.enterActive(),\n          exit: styles.exit(),\n          exitActive: styles.exitActive(),\n        }}\n        timeout={{\n          enter: 200,\n          exit: 150,\n        }}\n        enter={!isTestEnv}\n        exit={!isTestEnv}\n        nodeRef={this.rootRef}\n      >\n        <CommonWrapper rootNodeRef={this.setRootRef} {...this.props}>\n          <ToastView ref={this._refToast} {...toastProps} />\n        </CommonWrapper>\n      </CSSTransition>\n    );\n  }\n\n  private setRootRef = (element: Nullable<Element>) => {\n    this.setRootNode(element);\n    // @ts-expect-error: See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065.\n    this.rootRef.current = element;\n  };\n\n  private _clearTimer = () => {\n    if (this._timeout) {\n      clearTimeout(this._timeout);\n      this._timeout = null;\n    }\n  };\n\n  private _setTimer = () => {\n    this._clearTimer();\n\n    const timeOut = this.state.action ? 7 : 3;\n\n    this._timeout = window.setTimeout(this.close, timeOut * 1000);\n  };\n\n  private _refToast = (element: ToastView) => {\n    this._toast = element;\n  };\n}\n\nfunction safelyCall(fn: Nullable<(a?: any) => any>, ...args: any[]) {\n  if (fn) {\n    fn(...args);\n  }\n}\n"]}
+{"version":3,"sources":["Toast.tsx"],"names":["ToastDataTids","toastStatic","toastView","action","close","Toast","rootNode","push","notification","showTime","ToastStatic","props","_timeout","rootRef","React","createRef","safelyCall","onClose","state","setState","setRootRef","element","setRootNode","current","_clearTimer","clearTimeout","_setTimer","window","setTimeout","_refToast","_toast","id","componentWillUnmount","render","_renderToast","onPush","toastProps","onMouseEnter","onMouseLeave","children","enter","styles","enterActive","exit","exitActive","isTestEnv","Component","__KONTUR_REACT_UI__","fn","args"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\n\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { Nullable } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Toast.styles';\nimport { ToastView, ToastViewProps } from './ToastView';\nimport { ToastStatic } from './ToastStatic';\n\nexport interface Action {\n  label: string;\n  handler: () => void;\n  'aria-label'?: string;\n}\n\nexport interface ToastState {\n  notification: Nullable<string>;\n  action: Nullable<Action>;\n  id: number;\n  showTime: Nullable<number>;\n}\n\nexport interface ToastProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {\n  onPush?: (notification: string, action?: Action) => void;\n  onClose?: (notification: string, action?: Action) => void;\n}\n\nexport const ToastDataTids = {\n  toastStatic: 'StaticToast',\n  toastView: 'ToastView__root',\n  action: 'ToastView__action',\n  close: 'ToastView__close',\n} as const;\n\n/**\n * Показывает уведомления.\n *\n * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.\n * Однако, при его использовании не работает кастомизация и могут быть проблемы\n * с перекрытием уведомления другими элементами страницы.\n *\n * Рекомендуется использовать Toast через `ref` (см. примеры).\n */\n@rootNode\nexport class Toast extends React.Component<ToastProps, ToastState> {\n  public static __KONTUR_REACT_UI__ = 'Toast';\n  private setRootNode!: TSetRootNode;\n\n  public static push(notification: string, action?: Nullable<Action>, showTime?: number) {\n    ToastStatic.push(notification, action, showTime);\n  }\n\n  public static close() {\n    ToastStatic.close();\n  }\n\n  public _toast: Nullable<ToastView>;\n  private _timeout: Nullable<number> = null;\n  private rootRef = React.createRef<HTMLElement>();\n\n  constructor(props: ToastProps) {\n    super(props);\n    this.state = {\n      notification: null,\n      action: null,\n      id: 0,\n      showTime: null,\n    };\n  }\n\n  public componentWillUnmount() {\n    this._clearTimer();\n  }\n\n  public render() {\n    return (\n      <RenderContainer>\n        <TransitionGroup>{this._renderToast()}</TransitionGroup>\n      </RenderContainer>\n    );\n  }\n\n  /**\n   * Показывает тост с `notification` в качестве сообщения.\n   * Тост автоматически скрывается через 3 или 7 секунд,\n   * в зависимости от наличия у него кнопки `action`.\n   * Время показа можно задать вручную, передав `showTime`.\n   *\n   * @public\n   * @param {string} notification\n   * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`\n   * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler\n   * @param {number} showTime Время существования Toast в миллисекундах\n   */\n  public push(notification: string, action?: Nullable<Action>, showTime?: number) {\n    if (this.state.notification) {\n      this.close();\n    }\n\n    safelyCall(this.props.onPush, notification, action);\n\n    this.setState(({ id }) => ({ notification, action, id: id + 1, showTime }), this._setTimer);\n  }\n\n  /**\n   * @public\n   */\n  public close = () => {\n    safelyCall(this.props.onClose, this.state.notification, this.state.action);\n    this.setState({ notification: null, action: null });\n  };\n\n  private _renderToast() {\n    const { notification, action, id } = this.state;\n\n    if (!notification) {\n      return null;\n    }\n\n    const toastProps: ToastViewProps = {\n      onMouseEnter: this._clearTimer,\n      onMouseLeave: this._setTimer,\n      onClose: this.close,\n      children: notification,\n      'aria-label': this.props['aria-label'],\n      action,\n    };\n\n    return (\n      <CSSTransition\n        key={id}\n        classNames={{\n          enter: styles.enter(),\n          enterActive: styles.enterActive(),\n          exit: styles.exit(),\n          exitActive: styles.exitActive(),\n        }}\n        timeout={{\n          enter: 200,\n          exit: 150,\n        }}\n        enter={!isTestEnv}\n        exit={!isTestEnv}\n        nodeRef={this.rootRef}\n      >\n        <CommonWrapper rootNodeRef={this.setRootRef} {...this.props}>\n          <ToastView ref={this._refToast} {...toastProps} />\n        </CommonWrapper>\n      </CSSTransition>\n    );\n  }\n\n  private setRootRef = (element: Nullable<Element>) => {\n    this.setRootNode(element);\n    // @ts-expect-error: See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065.\n    this.rootRef.current = element;\n  };\n\n  private _clearTimer = () => {\n    if (this._timeout) {\n      clearTimeout(this._timeout);\n      this._timeout = null;\n    }\n  };\n\n  private _setTimer = () => {\n    this._clearTimer();\n\n    let showTime = this.state.action ? 7000 : 3000;\n    showTime = this.state.showTime ?? showTime;\n\n    this._timeout = window.setTimeout(this.close, showTime);\n  };\n\n  private _refToast = (element: ToastView) => {\n    this._toast = element;\n  };\n}\n\nfunction safelyCall(fn: Nullable<(a?: any) => any>, ...args: any[]) {\n  if (fn) {\n    fn(...args);\n  }\n}\n"]}