@skbkontur/react-ui 0.0.0-044e274f2c → 0.0.0-07d08325b0

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

@@ -1 +1 @@
-{"version":3,"names":["memoizeStyle","counterSizeMixin","rootTextareaSizeMixin","textareaSizeMixin","getStyles","emotion","root","css","_templateObject","_taggedTemplateLiteralLoose","rootSmall","t","_templateObject2","textareaFontSizeSmall","textareaLineHeightSmall","rootMedium","_templateObject3","textareaFontSizeMedium","textareaLineHeightMedium","rootLarge","_templateObject4","textareaFontSizeLarge","textareaLineHeightLarge","textarea","_templateObject5","textareaBg","textareaBackgroundClip","textareaBorderWidth","textareaBorderColor","textareaBorderTopColor","textareaShadow","textareaColor","textareaWidth","transitionDuration","transitionTimingFunction","textareaBorderRadius","textareaBorderColorFocus","textareaOutlineWidth","textareaPlaceholderColorLight","textareaPlaceholderColor","textareaSmall","_templateObject6","textareaPaddingYSmall","textareaPaddingXSmall","textareaMinHeightSmall","textareaMedium","_templateObject7","textareaPaddingYMedium","textareaPaddingXMedium","textareaMinHeightMedium","textareaLarge","_templateObject8","textareaPaddingYLarge","textareaPaddingXLarge","textareaMinHeightLarge","hovering","_templateObject9","textareaBorderColorHover","error","_templateObject10","textareaBorderColorError","warning","_templateObject11","textareaBorderColorWarning","disabled","_templateObject12","textareaTextColorDisabled","textareaDisabledBg","textareaDisabledBorderColor","textareaPlaceholderColorDisabled","fake","_templateObject13","placeholder","_templateObject14","counterContainer","_templateObject15","counter","_templateObject16","textareaCounterBg","textareaCounterColor","counterSmall","_templateObject17","counterMedium","_templateObject18","counterLarge","_templateObject19","counterError","_templateObject20","textareaCounterErrorColor","counterHelp","_templateObject21","disableAnimations","_templateObject22"],"sources":["Textarea.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { counterSizeMixin, rootTextareaSizeMixin, textareaSizeMixin } from './Textarea.mixins';\n\nexport const getStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    root() {\n      return emotion.css`\n        display: inline-block;\n        position: relative;\n      `;\n    },\n    rootSmall(t: Theme) {\n      return emotion.css`\n        ${rootTextareaSizeMixin(emotion)(t.textareaFontSizeSmall, t.textareaLineHeightSmall)};\n      `;\n    },\n    rootMedium(t: Theme) {\n      return emotion.css`\n        ${rootTextareaSizeMixin(emotion)(t.textareaFontSizeMedium, t.textareaLineHeightMedium)};\n      `;\n    },\n    rootLarge(t: Theme) {\n      return emotion.css`\n        ${rootTextareaSizeMixin(emotion)(t.textareaFontSizeLarge, t.textareaLineHeightLarge)};\n      `;\n    },\n\n    textarea(t: Theme) {\n      return emotion.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:\n          border-color ${t.transitionDuration} ${t.transitionTimingFunction},\n          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 emotion.css`\n        ${textareaSizeMixin(emotion)(t.textareaPaddingYSmall, t.textareaPaddingXSmall, t.textareaMinHeightSmall)};\n      `;\n    },\n    textareaMedium(t: Theme) {\n      return emotion.css`\n        ${textareaSizeMixin(emotion)(t.textareaPaddingYMedium, t.textareaPaddingXMedium, t.textareaMinHeightMedium)};\n      `;\n    },\n    textareaLarge(t: Theme) {\n      return emotion.css`\n        ${textareaSizeMixin(emotion)(t.textareaPaddingYLarge, t.textareaPaddingXLarge, t.textareaMinHeightLarge)};\n      `;\n    },\n\n    hovering(t: Theme) {\n      return emotion.css`\n        &:enabled:hover:not(:focus) {\n          border-color: ${t.textareaBorderColorHover};\n        }\n      `;\n    },\n\n    error(t: Theme) {\n      return emotion.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 emotion.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 emotion.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 emotion.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 emotion.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 emotion.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 emotion.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 emotion.css`\n        ${counterSizeMixin(emotion)(t.textareaPaddingYSmall, t.textareaPaddingXSmall)};\n      `;\n    },\n    counterMedium(t: Theme) {\n      return emotion.css`\n        ${counterSizeMixin(emotion)(t.textareaPaddingYMedium, t.textareaPaddingXMedium)};\n      `;\n    },\n    counterLarge(t: Theme) {\n      return emotion.css`\n        ${counterSizeMixin(emotion)(t.textareaPaddingYLarge, t.textareaPaddingXLarge)};\n      `;\n    },\n\n    counterError(t: Theme) {\n      return emotion.css`\n        color: ${t.textareaCounterErrorColor};\n      `;\n    },\n\n    counterHelp() {\n      return emotion.css`\n        margin-left: 4px;\n        cursor: pointer;\n      `;\n    },\n\n    disableAnimations() {\n      return emotion.css`\n        transition: none;\n      `;\n    },\n  });\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","counterSizeMixin","rootTextareaSizeMixin","textareaSizeMixin","styles","root","_templateObject","_taggedTemplateLiteralLoose","rootSmall","t","_templateObject2","textareaFontSizeSmall","textareaLineHeightSmall","rootMedium","_templateObject3","textareaFontSizeMedium","textareaLineHeightMedium","rootLarge","_templateObject4","textareaFontSizeLarge","textareaLineHeightLarge","textarea","_templateObject5","textareaBg","textareaBackgroundClip","textareaBorderWidth","textareaBorderColor","textareaBorderTopColor","textareaShadow","textareaColor","textareaWidth","transitionDuration","transitionTimingFunction","textareaBorderRadius","textareaBorderColorFocus","textareaOutlineWidth","textareaPlaceholderColorLight","textareaPlaceholderColor","textareaSmall","_templateObject6","textareaPaddingYSmall","textareaPaddingXSmall","textareaMinHeightSmall","textareaMedium","_templateObject7","textareaPaddingYMedium","textareaPaddingXMedium","textareaMinHeightMedium","textareaLarge","_templateObject8","textareaPaddingYLarge","textareaPaddingXLarge","textareaMinHeightLarge","hovering","_templateObject9","textareaBorderColorHover","error","_templateObject10","textareaBorderColorError","warning","_templateObject11","textareaBorderColorWarning","disabled","_templateObject12","textareaTextColorDisabled","textareaDisabledBg","textareaDisabledBorderColor","textareaPlaceholderColorDisabled","fake","_templateObject13","placeholder","_templateObject14","counterContainer","_templateObject15","counter","_templateObject16","textareaCounterBg","textareaCounterColor","counterSmall","_templateObject17","counterMedium","_templateObject18","counterLarge","_templateObject19","counterError","_templateObject20","textareaCounterErrorColor","counterHelp","_templateObject21","disableAnimations","_templateObject22"],"sources":["Textarea.styles.ts"],"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:\n        border-color ${t.transitionDuration} ${t.transitionTimingFunction},\n        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"],"mappings":"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","ignoreList":[]}

package/components/Textarea/Textarea.styles.d.ts

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     root(): string;
     rootSmall(t: Theme): string;
     rootMedium(t: Theme): string;

package/components/Textarea/TextareaCounter/TextareaCounter.js

@@ -1,20 +1,20 @@
-import React, { useCallback, useContext, useImperativeHandle, useState } from 'react';
+import React, { useContext, useCallback, useImperativeHandle, useState } from 'react';
 import propTypes from 'prop-types';
 import { globalObject } from '@skbkontur/global-object';
 import { safePropTypesInstanceOf } from "../../../lib/SSRSafe";
 import { forwardRefAndName } from "../../../lib/forwardRefAndName";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { isFunction } from "../../../lib/utils";
 import { Tooltip } from "../../Tooltip";
-import { EmotionContext } from "../../../lib/theming/Emotion";
+import { cx } from "../../../lib/theming/Emotion";
 import { QuestionCircleIcon16Solid } from "../../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Solid";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { TextareaDataTids } from "../Textarea";
-import { getStyles } from "../Textarea.styles";
+import { styles } from "../Textarea.styles";
 var handleHelpMouseDown = function handleHelpMouseDown(e) {
   return e.preventDefault();
 };
 export var TextareaCounter = forwardRefAndName('TextareaCounter', function (_ref, ref) {
-  var _emotion$cx;
+  var _cx;
   var length = _ref.length,
     value = _ref.value,
     help = _ref.help,
@@ -22,7 +22,6 @@ export var TextareaCounter = forwardRefAndName('TextareaCounter', function (_ref
     textarea = _ref.textarea,
     size = _ref.size;
   var theme = useContext(ThemeContext);
-  var emotion = useContext(EmotionContext);
   var _useState = useState(textarea.clientWidth),
     width = _useState[0],
     setWidth = _useState[1];
@@ -62,7 +61,6 @@ export var TextareaCounter = forwardRefAndName('TextareaCounter', function (_ref
     render: renderTooltipContent,
     onCloseClick: onCloseHelp
   }, helpIcon);
-  var styles = getStyles(emotion);
   var getCounterSizeClassName = function getCounterSizeClassName() {
     switch (size) {
       case 'large':
@@ -77,15 +75,14 @@ export var TextareaCounter = forwardRefAndName('TextareaCounter', function (_ref
   return /*#__PURE__*/(
     React.createElement("div", {
       "data-tid": TextareaDataTids.counter,
-      className: emotion.cx(styles.counterContainer(theme)),
+      className: cx(styles.counterContainer(theme)),
       style: {
         width: width,
         height: height
       }
     }, /*#__PURE__*/
-
     React.createElement("span", {
-      className: emotion.cx(getCounterSizeClassName(), styles.counter(theme), (_emotion$cx = {}, _emotion$cx[styles.counterError(theme)] = counterValue < 0, _emotion$cx))
+      className: cx(getCounterSizeClassName(), styles.counter(theme), (_cx = {}, _cx[styles.counterError(theme)] = counterValue < 0, _cx))
     }, counterValue, help && /*#__PURE__*/React.createElement("span", {
       className: styles.counterHelp()
     }, counterHelp)))

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

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useContext","useImperativeHandle","useState","propTypes","globalObject","safePropTypesInstanceOf","forwardRefAndName","isFunction","Tooltip","EmotionContext","QuestionCircleIcon16Solid","ThemeContext","TextareaDataTids","getStyles","handleHelpMouseDown","e","preventDefault","TextareaCounter","_ref","ref","_emotion$cx","length","value","help","onCloseHelp","textarea","size","theme","emotion","_useState","clientWidth","width","setWidth","_useState2","clientHeight","height","setHeight","reflow","renderTooltipContent","textareaValue","toString","counterValue","helpIconProps","onMouseDown","color","textareaCounterHelpIconColor","helpIcon","createElement","counterHelp","pos","trigger","render","onCloseClick","styles","getCounterSizeClassName","counterLarge","counterMedium","counterSmall","counter","className","cx","counterContainer","style","counterError","number","isRequired","oneOfType","string","node","func","HTMLTextAreaElement"],"sources":["TextareaCounter.tsx"],"sourcesContent":["import React, { SyntheticEvent, useCallback, useContext, useImperativeHandle, useState } from 'react';\nimport propTypes from 'prop-types';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { safePropTypesInstanceOf } from '../../lib/SSRSafe';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { isFunction } from '../../lib/utils';\nimport { Tooltip } from '../Tooltip';\nimport { EmotionContext } from '../../lib/theming/Emotion';\nimport { QuestionCircleIcon16Solid } from '../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Solid';\nimport { SizeProp } from '../../lib/types/props';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { TextareaDataTids, TextareaProps } from './Textarea';\nimport { getStyles } 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 emotion = useContext(EmotionContext);\n\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(() => {\n      if (typeof help === 'function') {\n        return help();\n      }\n      return help;\n    }, [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 = <QuestionCircleIcon16Solid {...helpIconProps} />;\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    const styles = getStyles(emotion);\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\n        data-tid={TextareaDataTids.counter}\n        className={emotion.cx(styles.counterContainer(theme))}\n        style={{ width, height }}\n      >\n        <span\n          className={emotion.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(globalObject.HTMLTextAreaElement).isRequired,\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useContext","useCallback","useImperativeHandle","useState","propTypes","globalObject","safePropTypesInstanceOf","forwardRefAndName","ThemeContext","isFunction","Tooltip","cx","QuestionCircleIcon16Solid","TextareaDataTids","styles","handleHelpMouseDown","e","preventDefault","TextareaCounter","_ref","ref","_cx","length","value","help","onCloseHelp","textarea","size","theme","_useState","clientWidth","width","setWidth","_useState2","clientHeight","height","setHeight","reflow","renderTooltipContent","textareaValue","toString","counterValue","helpIconProps","onMouseDown","color","textareaCounterHelpIconColor","helpIcon","createElement","counterHelp","pos","trigger","render","onCloseClick","getCounterSizeClassName","counterLarge","counterMedium","counterSmall","counter","className","counterContainer","style","counterError","number","isRequired","oneOfType","string","node","func","HTMLTextAreaElement"],"sources":["TextareaCounter.tsx"],"sourcesContent":["import React, { SyntheticEvent, useContext, useCallback, useImperativeHandle, useState } from 'react';\nimport propTypes from 'prop-types';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { safePropTypesInstanceOf } from '../../lib/SSRSafe';\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isFunction } from '../../lib/utils';\nimport { Tooltip } from '../Tooltip';\nimport { cx } from '../../lib/theming/Emotion';\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(() => {\n      if (typeof help === 'function') {\n        return help();\n      }\n      return help;\n    }, [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 = <QuestionCircleIcon16Solid {...helpIconProps} />;\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(globalObject.HTMLTextAreaElement).isRequired,\n};\n"],"mappings":"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","ignoreList":[]}

package/components/Textarea/__creevey__/Textarea.creevey.mts

@@ -0,0 +1,177 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { delay } from '../../../lib/delay';
+
+kind('Textarea', () => {
+  story('DifferentStates', () => {
+    test('Plain', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Plain');
+    });
+
+    test('Focus', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#TextareaPlain textarea' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Focus');
+    });
+
+    test('FocusedByTab', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .move({ x: 0, y: 0 })
+        .click()
+        .sendKeys(Key.TAB)
+        .sendKeys(Key.TAB)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Focused by tab');
+    });
+
+    test('Typed', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#TextareaPlain textarea' }))
+        .sendKeys('Test...')
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Typed');
+    });
+  });
+
+  story('AutoresizableTextareaStory', () => {
+    test('autoresize', async (context) => {
+      const textArea = () => context.webdriver.findElement({ css: '[data-tid~="TextArea"]' });
+      const before = await textArea().takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="AddButton"]' }))
+        .pause(500)
+        .perform();
+      const addText = await textArea().takeScreenshot();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid~="CollapseButton"]' }))
+        .pause(500)
+        .perform();
+      const collapse = await textArea().takeScreenshot();
+      await context.matchImages({ before, addText, collapse });
+    });
+  });
+
+  story('SelectAllByProp', () => {
+    test('Plain', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Plain');
+    });
+
+    test('Focused', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: 'label' }))
+        .pause(500)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Focused');
+    });
+  });
+
+  story('SelectAllByButton', () => {
+    test('Plain', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Plain');
+    });
+
+    test('Selected', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-tid="select-all"]' }))
+        .pause(500)
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Selected');
+    });
+  });
+
+  story('TextareaWithCounters', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'flacky scrollbars height': {
+          in: ['firefox', 'firefox8px', 'firefoxFlat8px', 'firefoxDark'],
+        },
+      },
+    });
+
+    test('Plain', async (context) => {
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Plain');
+    });
+
+    test('Focus', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#CounterPlain textarea' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'Focus');
+    });
+
+    test('FocusAutoresize', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#CounterAutoresizeTextarea textarea' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'FocusAutoresize');
+    });
+
+    test('FocusWithHelpClosed', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#CounterWithHelp textarea' }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'CounterWithHelp');
+    });
+
+    test('FocusWithHelpOpened', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '#CounterWithHelp textarea' }))
+        .perform();
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: `svg` }))
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'CounterWithHelpOpened');
+    });
+  });
+});

package/components/Textarea/__docs__/Textarea.mdx

@@ -0,0 +1,28 @@
+import * as TextareaStories from './Textarea.docs.stories.tsx';
+import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={TextareaStories} />
+
+# Textarea
+
+[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/input-fields/textarea/)
+
+[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=203%3A2333)
+
+<Description />
+
+## Базовый пример
+
+<Primary />
+
+## Пропы
+
+<details>
+  <summary>Открыть таблицу с пропами</summary>
+  <ArgTypes />
+</details>
+
+## Примеры использования
+
+<Stories title="" includePrimary={false} />

package/components/Toast/Toast/Toast.js

@@ -5,13 +5,12 @@ import React from 'react';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { globalObject } from '@skbkontur/global-object';
 import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { RenderContainer } from "../../../internal/RenderContainer";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { rootNode } from "../../../lib/rootNode";
-import { EmotionConsumer } from "../../../lib/theming/Emotion";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { getStyles } from "../Toast.styles";
+import { styles } from "../Toast.styles";
 import { ToastView } from "../ToastView";
 import { ToastStatic } from "../ToastStatic";
 export var ToastDataTids = {
@@ -22,13 +21,13 @@ export var ToastDataTids = {
 };
 
 /**
- * Показывает уведомления.
+ * `Toast` — это короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его команды.
+ * Результат может быть положительным, отрицательным или нейтральным.
  *
  * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.
  * Однако, при его использовании не работает кастомизация, они не поддерживаются в `React@18`, а также могут быть проблемы с перекрытием уведомления другими элементами страницы.
  *
- * Для статических тостов <u>рекомендуется</u> использовать компонент [SingleToast](https://tech.skbkontur.ru/react-ui/#/Components/SingleToast) - в нём исправлены эти проблемы.
- *
+ * Для статических тостов рекомендуется использовать компонент SingleToast - в нём исправлены эти проблемы.
  */
 export var Toast = rootNode(_class = (_Toast = /*#__PURE__*/function (_React$Component) {
   function Toast(props) {
@@ -71,14 +70,15 @@ export var Toast = rootNode(_class = (_Toast = /*#__PURE__*/function (_React$Com
       notification: null,
       action: null,
       id: 0,
-      showTime: null
+      showTime: null,
+      showCloseIcon: false
     };
     return _this;
   }
-  _inheritsLoose(Toast, _React$Component);
-  Toast.push = function push(notification, action, showTime) {
-    ToastStatic.push(notification, action, showTime);
-  };
+  _inheritsLoose(Toast, _React$Component); /** @deprecated use `push` method in ref or `SingleToast.push` */
+  Toast.push = function push(notification, action, showTime, showCloseIcon) {
+    ToastStatic.push(notification, action, showTime, showCloseIcon);
+  } /** @deprecated use `close` method in ref or `SingleToast.close` */;
   Toast.close = function close() {
     ToastStatic.close();
   };
@@ -88,15 +88,11 @@ export var Toast = rootNode(_class = (_Toast = /*#__PURE__*/function (_React$Com
   };
   _proto.render = function render() {
     var _this2 = this;
-    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
-      _this2.emotion = emotion;
-      _this2.styles = getStyles(_this2.emotion);
-      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-        _this2.theme = _this2.props.theme ? ThemeFactory.create(_this2.props.theme, theme) : theme;
-        return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
-          value: _this2.theme
-        }, /*#__PURE__*/React.createElement(RenderContainer, null, /*#__PURE__*/React.createElement(TransitionGroup, null, _this2._renderToast())));
-      });
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = _this2.props.theme ? ThemeFactory.create(_this2.props.theme, theme) : theme;
+      return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+        value: _this2.theme
+      }, /*#__PURE__*/React.createElement(RenderContainer, null, /*#__PURE__*/React.createElement(TransitionGroup, null, _this2._renderToast())));
     });
   } /**
     * Показывает тост с `notification` в качестве сообщения.
@@ -109,8 +105,9 @@ export var Toast = rootNode(_class = (_Toast = /*#__PURE__*/function (_React$Com
     * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`
     * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler
     * @param {number} showTime Время существования Toast в миллисекундах
+    * @param {boolean} showCloseIcon Добавляет крестик для закрытия тоста. При указывании action в onPush крестик отображается всегда.
     */;
-  _proto.push = function push(notification, action, showTime) {
+  _proto.push = function push(notification, action, showTime, showCloseIcon) {
     if (this.state.notification) {
       this.close();
     }
@@ -121,7 +118,8 @@ export var Toast = rootNode(_class = (_Toast = /*#__PURE__*/function (_React$Com
         notification: notification,
         action: action,
         id: id + 1,
-        showTime: showTime
+        showTime: showTime,
+        showCloseIcon: showCloseIcon
       };
     }, this._setTimer);
   };
@@ -129,7 +127,8 @@ export var Toast = rootNode(_class = (_Toast = /*#__PURE__*/function (_React$Com
     var _this$state = this.state,
       notification = _this$state.notification,
       action = _this$state.action,
-      id = _this$state.id;
+      id = _this$state.id,
+      showCloseIcon = _this$state.showCloseIcon;
     if (!notification) {
       return null;
     }
@@ -139,9 +138,9 @@ export var Toast = rootNode(_class = (_Toast = /*#__PURE__*/function (_React$Com
       onClose: this.close,
       children: notification,
       'aria-label': this.props['aria-label'],
-      action: action
+      action: action,
+      showCloseIcon: showCloseIcon
     };
-    var styles = this.styles;
     return /*#__PURE__*/React.createElement(CSSTransition, {
       key: id,
       classNames: {

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

@@ -1 +1 @@
-{"version":3,"names":["React","CSSTransition","TransitionGroup","globalObject","ThemeFactory","RenderContainer","CommonWrapper","isTestEnv","rootNode","EmotionConsumer","ThemeContext","getStyles","ToastView","ToastStatic","ToastDataTids","toastStatic","toastView","action","close","Toast","_class","_Toast","_React$Component","props","_this","call","rootRef","createRef","safelyCall","onClose","state","notification","setState","setRootRef","element","setRootNode","current","_clearTimer","_timeout","clearTimeout","_setTimer","_this$state$showTime","showTime","setTimeout","_refToast","_toast","id","_inheritsLoose","push","_proto","prototype","componentWillUnmount","render","_this2","createElement","emotion","styles","Consumer","theme","create","Provider","value","_renderToast","onPush","_ref","_this$state","toastProps","onMouseEnter","onMouseLeave","children","key","classNames","enter","enterActive","exit","exitActive","timeout","nodeRef","_extends","rootNodeRef","ref","Component","__KONTUR_REACT_UI__","displayName","fn","_len","arguments","length","args","Array","_key","apply"],"sources":["Toast.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { globalObject, SafeTimer } from '@skbkontur/global-object';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\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';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } 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   * Обычный объект с переменными темы.\n   * Он будет объединён с темой из контекста.\n   */\n  theme?: ThemeIn;\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 * Однако, при его использовании не работает кастомизация, они не поддерживаются в `React@18`, а также могут быть проблемы с перекрытием уведомления другими элементами страницы.\n *\n * Для статических тостов <u>рекомендуется</u> использовать компонент [SingleToast](https://tech.skbkontur.ru/react-ui/#/Components/SingleToast) - в нём исправлены эти проблемы.\n *\n */\n@rootNode\nexport class Toast extends React.Component<ToastProps, ToastState> {\n  public static __KONTUR_REACT_UI__ = 'Toast';\n  public static displayName = 'Toast';\n\n  private setRootNode!: TSetRootNode;\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private styles!: ReturnType<typeof getStyles>;\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: SafeTimer;\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      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          this.styles = getStyles(this.emotion);\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme;\n                return (\n                  <ThemeContext.Provider value={this.theme}>\n                    <RenderContainer>\n                      <TransitionGroup>{this._renderToast()}</TransitionGroup>\n                    </RenderContainer>\n                  </ThemeContext.Provider>\n                );\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\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    const styles = this.styles;\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      globalObject.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    this._timeout = globalObject.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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","CSSTransition","TransitionGroup","globalObject","ThemeFactory","ThemeContext","RenderContainer","CommonWrapper","isTestEnv","rootNode","styles","ToastView","ToastStatic","ToastDataTids","toastStatic","toastView","action","close","Toast","_class","_Toast","_React$Component","props","_this","call","rootRef","createRef","safelyCall","onClose","state","notification","setState","setRootRef","element","setRootNode","current","_clearTimer","_timeout","clearTimeout","_setTimer","_this$state$showTime","showTime","setTimeout","_refToast","_toast","id","showCloseIcon","_inheritsLoose","push","_proto","prototype","componentWillUnmount","render","_this2","createElement","Consumer","theme","create","Provider","value","_renderToast","onPush","_ref","_this$state","toastProps","onMouseEnter","onMouseLeave","children","key","classNames","enter","enterActive","exit","exitActive","timeout","nodeRef","_extends","rootNodeRef","ref","Component","__KONTUR_REACT_UI__","displayName","fn","_len","arguments","length","args","Array","_key","apply"],"sources":["Toast.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { globalObject, SafeTimer } from '@skbkontur/global-object';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\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  showCloseIcon?: boolean;\n}\n\nexport interface ToastProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {\n  /** Задает функцию, которая вызывается при возникновении тоста. */\n  onPush?: (notification: string, action?: Action) => void;\n\n  /** Задает функцию, которая вызывается при закрытии тоста. */\n  onClose?: (notification: string, action?: Action) => void;\n\n  /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */\n  theme?: ThemeIn;\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 * `Toast` — это короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его команды.\n * Результат может быть положительным, отрицательным или нейтральным.\n *\n * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.\n * Однако, при его использовании не работает кастомизация, они не поддерживаются в `React@18`, а также могут быть проблемы с перекрытием уведомления другими элементами страницы.\n *\n * Для статических тостов рекомендуется использовать компонент SingleToast - в нём исправлены эти проблемы.\n */\n@rootNode\nexport class Toast extends React.Component<ToastProps, ToastState> {\n  public static __KONTUR_REACT_UI__ = 'Toast';\n  public static displayName = 'Toast';\n\n  private setRootNode!: TSetRootNode;\n  private theme!: Theme;\n\n  /** @deprecated use `push` method in ref or `SingleToast.push` */\n  public static push(notification: string, action?: Nullable<Action>, showTime?: number, showCloseIcon?: boolean) {\n    ToastStatic.push(notification, action, showTime, showCloseIcon);\n  }\n\n  /** @deprecated use `close` method in ref or `SingleToast.close` */\n  public static close() {\n    ToastStatic.close();\n  }\n\n  public _toast: Nullable<ToastView>;\n  private _timeout: SafeTimer;\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      showCloseIcon: false,\n    };\n  }\n\n  public componentWillUnmount() {\n    this._clearTimer();\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme;\n          return (\n            <ThemeContext.Provider value={this.theme}>\n              <RenderContainer>\n                <TransitionGroup>{this._renderToast()}</TransitionGroup>\n              </RenderContainer>\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\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   * @param {boolean} showCloseIcon Добавляет крестик для закрытия тоста. При указывании action в onPush крестик отображается всегда.\n   */\n  public push(notification: string, action?: Nullable<Action>, showTime?: number, showCloseIcon?: boolean) {\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, showCloseIcon }), 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, showCloseIcon } = 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      showCloseIcon,\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      globalObject.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    this._timeout = globalObject.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"],"mappings":"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","ignoreList":[]}

package/components/Toast/Toast.d.ts

@@ -13,14 +13,14 @@ export interface ToastState {
     action: Nullable<Action>;
     id: number;
     showTime: Nullable<number>;
+    showCloseIcon?: boolean;
 }
 export interface ToastProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {
+    /** Задает функцию, которая вызывается при возникновении тоста. */
     onPush?: (notification: string, action?: Action) => void;
+    /** Задает функцию, которая вызывается при закрытии тоста. */
     onClose?: (notification: string, action?: Action) => void;
-    /**
-     * Обычный объект с переменными темы.
-     * Он будет объединён с темой из контекста.
-     */
+    /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */
     theme?: ThemeIn;
 }
 export declare const ToastDataTids: {
@@ -30,22 +30,22 @@ export declare const ToastDataTids: {
     readonly close: "ToastView__close";
 };
 /**
- * Показывает уведомления.
+ * `Toast` — это короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его команды.
+ * Результат может быть положительным, отрицательным или нейтральным.
  *
  * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.
  * Однако, при его использовании не работает кастомизация, они не поддерживаются в `React@18`, а также могут быть проблемы с перекрытием уведомления другими элементами страницы.
  *
- * Для статических тостов <u>рекомендуется</u> использовать компонент [SingleToast](https://tech.skbkontur.ru/react-ui/#/Components/SingleToast) - в нём исправлены эти проблемы.
- *
+ * Для статических тостов рекомендуется использовать компонент SingleToast - в нём исправлены эти проблемы.
  */
 export declare class Toast extends React.Component<ToastProps, ToastState> {
     static __KONTUR_REACT_UI__: string;
     static displayName: string;
     private setRootNode;
     private theme;
-    private emotion;
-    private styles;
-    static push(notification: string, action?: Nullable<Action>, showTime?: number): void;
+    /** @deprecated use `push` method in ref or `SingleToast.push` */
+    static push(notification: string, action?: Nullable<Action>, showTime?: number, showCloseIcon?: boolean): void;
+    /** @deprecated use `close` method in ref or `SingleToast.close` */
     static close(): void;
     _toast: Nullable<ToastView>;
     private _timeout;
@@ -64,8 +64,9 @@ export declare class Toast extends React.Component<ToastProps, ToastState> {
      * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`
      * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler
      * @param {number} showTime Время существования Toast в миллисекундах
+     * @param {boolean} showCloseIcon Добавляет крестик для закрытия тоста. При указывании action в onPush крестик отображается всегда.
      */
-    push(notification: string, action?: Nullable<Action>, showTime?: number): void;
+    push(notification: string, action?: Nullable<Action>, showTime?: number, showCloseIcon?: boolean): void;
     /**
      * @public
      */