@skbkontur/react-ui 0.0.0-bb4cbfe9c6 → 0.0.0-bd4276284d

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

@@ -1 +1 @@
-{"version":3,"sources":["TextareaCounter.tsx"],"names":["handleHelpMouseDown","e","preventDefault","TextareaCounter","React","forwardRef","ref","length","value","help","onCloseHelp","textarea","theme","ThemeContext","clientWidth","width","setWidth","clientHeight","height","setHeight","reflow","renderTooltipContent","textareaValue","toString","counterValue","counterHelp","textareaCounterHelpIconColor","styles","counterContainer","counter","counterError"],"mappings":"wEAAA;;AAEA;AACA;AACA;AACA;AACA;;;AAGA,6C;;;;;;;;;;;;;;AAcA,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,CAAD,UAAuBA,CAAC,CAACC,cAAF,EAAvB,EAA5B;;AAEO,IAAMC,eAAe,gBAAGC,eAAMC,UAAN,CAA2D,SAASF,eAAT;;AAExFG,GAFwF;AAGxF,aAFEC,MAEF,QAFEA,MAEF,CAFUC,KAEV,QAFUA,KAEV,CAFiBC,IAEjB,QAFiBA,IAEjB,CAFuBC,WAEvB,QAFuBA,WAEvB,CAFoCC,QAEpC,QAFoCA,QAEpC;AACA,MAAMC,KAAK,GAAG,uBAAWC,0BAAX,CAAd;AACA,kBAA0B,qBAASF,QAAQ,CAACG,WAAlB,CAA1B,CAAOC,KAAP,gBAAcC,QAAd;AACA,mBAA4B,qBAASL,QAAQ,CAACM,YAAlB,CAA5B,CAAOC,MAAP,iBAAeC,SAAf;AACA,MAAMC,MAAM,GAAG,SAATA,MAAS,GAAM;AACnB,QAAQN,WAAR,GAAsCH,QAAtC,CAAQG,WAAR,CAAqBG,YAArB,GAAsCN,QAAtC,CAAqBM,YAArB;AACAD,IAAAA,QAAQ,CAACF,WAAD,CAAR;AACAK,IAAAA,SAAS,CAACF,YAAD,CAAT;AACD,GAJD;AAKA,wBAAUG,MAAV,EAAkB,CAACT,QAAD,CAAlB;AACA,kCAAoBL,GAApB,EAAyB,oBAAO,EAAEc,MAAM,EAANA,MAAF,EAAP,EAAzB,EAA6C,CAACd,GAAD,CAA7C;AACA,MAAMe,oBAAoB,GAAG,wBAAY,oBAAMZ,IAAN,EAAZ,EAAwB,CAACA,IAAD,CAAxB,CAA7B;AACA,MAAMa,aAAa,GAAGd,KAAK,GAAGA,KAAK,CAACe,QAAN,GAAiBhB,MAApB,GAA6B,CAAxD;AACA,MAAMiB,YAAY,GAAGjB,MAAM,GAAGe,aAA9B;AACA,MAAMG,WAAW,GAAG,uBAAWhB,IAAX;AAClBA,EAAAA,IAAI,EADc;;AAGlB,+BAAC,gBAAD,IAAS,GAAG,EAAE,cAAd,EAA8B,OAAO,EAAE,OAAvC,EAAgD,MAAM,EAAEY,oBAAxD,EAA8E,YAAY,EAAEX,WAA5F;AACE,+BAAC,eAAD,IAAa,WAAW,EAAEV,mBAA1B,EAA+C,KAAK,EAAEY,KAAK,CAACc,4BAA5D,GADF,CAHF;;;;AAQA;AACE,0CAAK,SAAS,EAAEC,iBAAOC,gBAAP,CAAwBhB,KAAxB,CAAhB,EAAgD,KAAK,EAAE,EAAEG,KAAK,EAALA,KAAF,EAASG,MAAM,EAANA,MAAT,EAAvD;AACE;AACE,MAAA,SAAS,EAAE,iBAAGS,iBAAOE,OAAP,CAAejB,KAAf,CAAH;AACRe,uBAAOG,YAAP,CAAoBlB,KAApB,CADQ,IACqBY,YAAY,GAAG,CADpC,OADb;;;AAKGA,IAAAA,YALH;AAMGf,IAAAA,IAAI,iBAAI,uCAAM,SAAS,EAAEkB,iBAAOF,WAAP,EAAjB,IAAwCA,WAAxC,CANX,CADF,CADF;;;;AAYD,CArC8B,CAAxB,C","sourcesContent":["import React, { SyntheticEvent, useEffect, useContext, useCallback, useImperativeHandle, useState } from 'react';\n\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 { TextareaProps } from './Textarea';\nimport { styles } from './Textarea.styles';\n\nexport type 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 = React.forwardRef<TextareaCounterRef, TextareaCounterProps>(function TextareaCounter(\n  { length, value, help, onCloseHelp, textarea },\n  ref,\n) {\n  const theme = useContext(ThemeContext);\n  const [width, setWidth] = useState(textarea.clientWidth);\n  const [height, setHeight] = useState(textarea.clientHeight);\n  const reflow = () => {\n    const { clientWidth, clientHeight } = textarea;\n    setWidth(clientWidth);\n    setHeight(clientHeight);\n  };\n  useEffect(reflow, [textarea]);\n  useImperativeHandle(ref, () => ({ reflow }), [ref]);\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 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"]}
+{"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","helpIconProps","onMouseDown","color","textareaCounterHelpIconColor","TextareaDataTids","helpIcon","counterHelp","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';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { QuestionCircleIcon16Solid } from '../../internal/icons2022/QuestionCircleIcon/QuestionCircleIcon16Solid';\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\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    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"]}

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

@@ -10,15 +10,22 @@ export interface ToastState {
     notification: Nullable<string>;
     action: Nullable<Action>;
     id: number;
+    showTime: Nullable<number>;
 }
 export interface ToastProps extends CommonProps {
     onPush?: (notification: string, action?: Action) => void;
     onClose?: (notification: string, action?: Action) => void;
 }
+export declare const ToastDataTids: {
+    readonly toastStatic: "StaticToast";
+    readonly toastView: "ToastView__root";
+    readonly action: "ToastView__action";
+    readonly close: "ToastView__close";
+};
 /**
  * Показывает уведомления.
  *
- * Доступен статический метод: `Toast.push(notification, action?)`.
+ * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.
  * Однако, при его использовании не работает кастомизация и могут быть проблемы
  * с перекрытием уведомления другими элементами страницы.
  *
@@ -27,7 +34,7 @@ export interface ToastProps extends CommonProps {
 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;
@@ -39,13 +46,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

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Toast = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ToastDataTids = exports.Toast = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _reactTransitionGroup = require("react-transition-group");
 
 var _RenderContainer = require("../../internal/RenderContainer");
@@ -27,22 +27,30 @@ var _ToastStatic = require("./ToastStatic");var _class, _class2, _temp;
 
 
 
+
+var ToastDataTids = {
+  toastStatic: 'StaticToast',
+  toastView: 'ToastView__root',
+  action: 'ToastView__action',
+  close: 'ToastView__close' };
+
+
 /**
  * Показывает уведомления.
  *
- * Доступен статический метод: `Toast.push(notification, action?)`.
+ * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.
  * Однако, при его использовании не работает кастомизация и могут быть проблемы
  * с перекрытием уведомления другими элементами страницы.
  *
  * Рекомендуется использовать Toast через `ref` (см. примеры).
- */var
+ */exports.ToastDataTids = ToastDataTids;var
 
 Toast = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Toast, _React$Component);Toast.
 
 
 
-  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() {
@@ -93,6 +101,9 @@ Toast = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
 
 
+
+
+
 
 
 
@@ -143,7 +154,7 @@ Toast = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
     setRootRef = function (element) {
       _this.setRootNode(element);
-      // @ts-ignore
+      // @ts-expect-error: See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065.
       _this.rootRef.current = element;
     };_this.
 
@@ -154,25 +165,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);}}

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

@@ -1 +1 @@
-{"version":3,"sources":["Toast.tsx"],"names":["Toast","rootNode","push","notification","action","ToastStatic","close","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\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<HTMLElement>) => {\n    this.setRootNode(element);\n    // @ts-ignore\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 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  showTime: Nullable<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?, 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      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"]}

package/cjs/components/Toast/Toast.md

@@ -13,6 +13,34 @@ function showComplexNotification() {
 <Button onClick={showComplexNotification}>Show notification</Button>;
 ```
 
+C кастомным showTime
+
+```jsx harmony
+import { Button, Toast } from '@skbkontur/react-ui';
+
+function showComplexNotification() {
+  Toast.push('Successfully saved', {
+    label: 'Cancel',
+    handler: () => Toast.push('Canceled'),
+  }, 15000);
+}
+
+<Button onClick={showComplexNotification}>Show notification</Button>;
+```
+
+C кастомным showTime без action
+
+
+```jsx harmony
+import { Button, Toast } from '@skbkontur/react-ui';
+
+function showComplexNotification() {
+  Toast.push('Successfully saved', null, 15000);
+}
+
+<Button onClick={showComplexNotification}>Show notification</Button>;
+```
+
 Использование `ref`
 
 ```jsx harmony
@@ -39,3 +67,108 @@ class Toaster extends React.Component {
 
 <Toaster />;
 ```
+
+### SuperToast
+
+Вы можете объединить удобство статических методов и кастамизируемость классического способа через `ref`.
+Для этого можно добавить обёртку, которая позволяет Toast работать по примеру GlobalLoader.
+
+Т.е. кастомный Toast можно добавить в единственном месте в проекте, а статические методы будут всегда использовать последний отрендеренный экземпляр Toast:
+
+Также в обёртке можно изменить логику появления всплывашки, по рекомендации Гайдов:
+https://guides.kontur.ru/components/toast/#08
+```static
+«Всегда показывается только 1 тост. Перед появлением следующего тоста, текущий скрывается, даже если время его показа еще не истекло»
+```
+
+Для этого немного изменим метод `SuperToast.close` с помощью специального метода `ReactDOM.flushSync`.
+
+Итоговый вариант:
+```js static
+const SuperToast = (props) => <Toast ref={SuperToast.ref} {...props} />;
+SuperToast.ref = React.createRef();
+SuperToast.push = (...args) => {
+  SuperToast.close();
+  SuperToast.ref.current && SuperToast.ref.current.push(...args);
+};
+SuperToast.close = () => {
+  ReactDOM.flushSync(() => {
+    SuperToast.ref.current && SuperToast.ref.current.close();
+  });
+};
+
+```
+
+
+Версия на typescript:
+```typescript static
+class SuperToast extends React.Component<ToastProps> {
+  public static ref = React.createRef<Toast>();
+  public static push: typeof Toast.push = (...args) => {
+    SuperToast.close();
+    SuperToast.ref.current?.push(...args);
+  };
+  public static close: typeof Toast.close = () => {
+    ReactDOM.flushSync(() => SuperToast.ref.current?.close());
+  };
+  render = () => {
+    return <Toast ref={SuperToast.ref} {...this.props} />;
+  };
+}
+```
+
+
+```jsx harmony
+import { Button, Toast, ThemeContext, ThemeFactory, THEME_2022 } from '@skbkontur/react-ui';
+import ReactDOM from 'react-dom';
+
+const SuperToast = (props) => <Toast ref={SuperToast.ref} {...props} />;
+SuperToast.ref = React.createRef();
+SuperToast.push = (...args) => {
+  SuperToast.close();
+  SuperToast.ref.current && SuperToast.ref.current.push(...args);
+};
+SuperToast.close = () => {
+  ReactDOM.flushSync(() => {
+    SuperToast.ref.current && SuperToast.ref.current.close();
+  });
+};
+
+const RedToast = () => (
+  <ThemeContext.Consumer>
+    {(theme) => {
+      return <ThemeContext.Provider
+        value={ThemeFactory.create(
+          {
+            toastBg: "rgba(210, 15, 0, 0.76)",
+            toastLinkBgActive: "rgba(210, 15, 0, 0.76)"
+          },
+          theme
+        )}
+      >
+        <SuperToast />
+      </ThemeContext.Provider>
+    }}
+  </ThemeContext.Consumer>
+);
+
+const rand = () => "Пример красного тоста №" + Math.round(Math.random() * 100).toString();
+
+const push = () => {
+  SuperToast.push(rand(), {
+    label: "Cancel",
+    handler: () => SuperToast.push("Canceled")
+  });
+};
+
+<div>
+  <RedToast />
+  <span />
+  <span />
+  <span />
+  <Button onClick={push}>
+    Show super red toast
+  </Button>
+</div>
+;
+```

package/cjs/components/Toast/Toast.styles.js

@@ -7,7 +7,7 @@ var styles = (0, _Emotion.memoizeStyle)({
 
   },
   enterActive: function enterActive() {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n      transform: translateY(0);\n    "])));
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n      transform: translateY(0) !important;\n    "])));
 
 
 
@@ -19,7 +19,7 @@ var styles = (0, _Emotion.memoizeStyle)({
 
   },
   exitActive: function exitActive() {
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      opacity: 0.01;\n      transition: opacity 0.15s ease-out;\n    "])));
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      opacity: 0.01 !important;\n      transition: opacity 0.15s ease-out;\n    "])));
 
 
 

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

@@ -1 +1 @@
-{"version":3,"sources":["Toast.styles.ts"],"names":["styles","enter","css","enterActive","exit","exitActive"],"mappings":"4QAAA,oD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,KADiC,mBACzB;AACN,eAAOC,YAAP;;;AAGD,GALgC;AAMjCC,EAAAA,WANiC,yBAMnB;AACZ,eAAOD,YAAP;;;;AAID,GAXgC;AAYjCE,EAAAA,IAZiC,kBAY1B;AACL,eAAOF,YAAP;;;;AAID,GAjBgC;AAkBjCG,EAAAA,UAlBiC,wBAkBpB;AACX,eAAOH,YAAP;;;;AAID,GAvBgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  enter() {\n    return css`\n      transform: translateY(-40px);\n    `;\n  },\n  enterActive() {\n    return css`\n      transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n      transform: translateY(0);\n    `;\n  },\n  exit() {\n    return css`\n      transform: translateY(0);\n      opacity: 1;\n    `;\n  },\n  exitActive() {\n    return css`\n      opacity: 0.01;\n      transition: opacity 0.15s ease-out;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Toast.styles.ts"],"names":["styles","enter","css","enterActive","exit","exitActive"],"mappings":"4QAAA,oD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,KADiC,mBACzB;AACN,eAAOC,YAAP;;;AAGD,GALgC;AAMjCC,EAAAA,WANiC,yBAMnB;AACZ,eAAOD,YAAP;;;;AAID,GAXgC;AAYjCE,EAAAA,IAZiC,kBAY1B;AACL,eAAOF,YAAP;;;;AAID,GAjBgC;AAkBjCG,EAAAA,UAlBiC,wBAkBpB;AACX,eAAOH,YAAP;;;;AAID,GAvBgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  enter() {\n    return css`\n      transform: translateY(-40px);\n    `;\n  },\n  enterActive() {\n    return css`\n      transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n      transform: translateY(0) !important;\n    `;\n  },\n  exit() {\n    return css`\n      transform: translateY(0);\n      opacity: 1;\n    `;\n  },\n  exitActive() {\n    return css`\n      opacity: 0.01 !important;\n      transition: opacity 0.15s ease-out;\n    `;\n  },\n});\n"]}

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

@@ -1,7 +1,8 @@
+import { Nullable } from '../../typings/utility-types';
 import { Action } from './Toast';
 export declare class ToastStatic {
-    static push: (notification: string, action?: Action | undefined) => void;
-    static _push: (notification: string, action?: Action | undefined) => void;
+    static push: (notification: string, action?: Nullable<Action>, showTime?: number | undefined) => void;
+    static _push: (notification: string, action?: Nullable<Action>, showTime?: number | undefined) => void;
     static close: () => void;
     private static node;
     private static instance;

package/cjs/components/Toast/ToastStatic.js

@@ -6,7 +6,7 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 var _Toast = require("./Toast");var
 
 ToastStatic = function ToastStatic() {};exports.ToastStatic = ToastStatic;ToastStatic.
-push = function (notification, action) {
+push = function (notification, action, showTime) {
   if (!ToastStatic.node) {
     ToastStatic.node = document.createElement('div');
     var _document = document,body = _document.body;
@@ -16,18 +16,18 @@ push = function (notification, action) {
     body.appendChild(ToastStatic.node);
 
     _reactDom.default.render( /*#__PURE__*/
-    _react.default.createElement(_Toast.Toast, { "data-tid": "StaticToast", ref: function ref(el) {return ToastStatic.instance = el;} }),
+    _react.default.createElement(_Toast.Toast, { "data-tid": _Toast.ToastDataTids.toastStatic, ref: function ref(el) {return ToastStatic.instance = el;} }),
     ToastStatic.node,
-    function () {return ToastStatic._push(notification, action);});
+    function () {return ToastStatic._push(notification, action, showTime);});
 
   } else {
-    ToastStatic._push(notification, action);
+    ToastStatic._push(notification, action, showTime);
   }
 };ToastStatic.
 
-_push = function (notification, action) {
+_push = function (notification, action, showTime) {
   if (ToastStatic.instance) {
-    ToastStatic.instance.push(notification, action);
+    ToastStatic.instance.push(notification, action, showTime);
   }
 };ToastStatic.
 

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

@@ -1 +1 @@
-{"version":3,"sources":["ToastStatic.tsx"],"names":["ToastStatic","push","notification","action","node","document","createElement","body","Error","appendChild","ReactDOM","render","el","instance","_push","close"],"mappings":"yJAAA;AACA;;;;AAIA,gC;;AAEaA,W,+DAAAA,W;AACGC,I,GAAO,UAACC,YAAD,EAAuBC,MAAvB,EAA2C;AAC9D,MAAI,CAACH,WAAW,CAACI,IAAjB,EAAuB;AACrBJ,IAAAA,WAAW,CAACI,IAAZ,GAAmBC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAnB;AACA,oBAAiBD,QAAjB,CAAQE,IAAR,aAAQA,IAAR;AACA,QAAI,CAACA,IAAL,EAAW;AACT,YAAMC,KAAK,CAAC,0CAAD,CAAX;AACD;AACDD,IAAAA,IAAI,CAACE,WAAL,CAAiBT,WAAW,CAACI,IAA7B;;AAEAM,sBAASC,MAAT;AACE,iCAAC,YAAD,IAAO,YAAS,aAAhB,EAA8B,GAAG,EAAE,aAACC,EAAD,UAASZ,WAAW,CAACa,QAAZ,GAAuBD,EAAhC,EAAnC,GADF;AAEEZ,IAAAA,WAAW,CAACI,IAFd;AAGE,wBAAMJ,WAAW,CAACc,KAAZ,CAAkBZ,YAAlB,EAAgCC,MAAhC,CAAN,EAHF;;AAKD,GAbD,MAaO;AACLH,IAAAA,WAAW,CAACc,KAAZ,CAAkBZ,YAAlB,EAAgCC,MAAhC;AACD;AACF,C,CAlBUH,W;;AAoBGc,K,GAAQ,UAACZ,YAAD,EAAuBC,MAAvB,EAA2C;AAC/D,MAAIH,WAAW,CAACa,QAAhB,EAA0B;AACxBb,IAAAA,WAAW,CAACa,QAAZ,CAAqBZ,IAArB,CAA0BC,YAA1B,EAAwCC,MAAxC;AACD;AACF,C,CAxBUH,W;;AA0BGe,K,GAAQ,YAAM;AAC1B,MAAIf,WAAW,CAACa,QAAhB,EAA0B;AACxBb,IAAAA,WAAW,CAACa,QAAZ,CAAqBE,KAArB;AACD;AACF,C,CA9BUf,W;;;AAiCIa,Q,GAA4B,I","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Nullable } from '../../typings/utility-types';\n\nimport { Toast, Action } from './Toast';\n\nexport class ToastStatic {\n  public static push = (notification: string, action?: Action) => {\n    if (!ToastStatic.node) {\n      ToastStatic.node = document.createElement('div');\n      const { body } = document;\n      if (!body) {\n        throw Error('There is no \"body\" element in \"document\"');\n      }\n      body.appendChild(ToastStatic.node);\n\n      ReactDOM.render(\n        <Toast data-tid=\"StaticToast\" ref={(el) => (ToastStatic.instance = el)} />,\n        ToastStatic.node,\n        () => ToastStatic._push(notification, action),\n      );\n    } else {\n      ToastStatic._push(notification, action);\n    }\n  };\n\n  public static _push = (notification: string, action?: Action) => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.push(notification, action);\n    }\n  };\n\n  public static close = () => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.close();\n    }\n  };\n\n  private static node: HTMLDivElement;\n  private static instance: Nullable<Toast> = null;\n}\n"]}
+{"version":3,"sources":["ToastStatic.tsx"],"names":["ToastStatic","push","notification","action","showTime","node","document","createElement","body","Error","appendChild","ReactDOM","render","ToastDataTids","toastStatic","el","instance","_push","close"],"mappings":"yJAAA;AACA;;;;AAIA,gC;;AAEaA,W,+DAAAA,W;AACGC,I,GAAO,UAACC,YAAD,EAAuBC,MAAvB,EAAkDC,QAAlD,EAAwE;AAC3F,MAAI,CAACJ,WAAW,CAACK,IAAjB,EAAuB;AACrBL,IAAAA,WAAW,CAACK,IAAZ,GAAmBC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAnB;AACA,oBAAiBD,QAAjB,CAAQE,IAAR,aAAQA,IAAR;AACA,QAAI,CAACA,IAAL,EAAW;AACT,YAAMC,KAAK,CAAC,0CAAD,CAAX;AACD;AACDD,IAAAA,IAAI,CAACE,WAAL,CAAiBV,WAAW,CAACK,IAA7B;;AAEAM,sBAASC,MAAT;AACE,iCAAC,YAAD,IAAO,YAAUC,qBAAcC,WAA/B,EAA4C,GAAG,EAAE,aAACC,EAAD,UAASf,WAAW,CAACgB,QAAZ,GAAuBD,EAAhC,EAAjD,GADF;AAEEf,IAAAA,WAAW,CAACK,IAFd;AAGE,wBAAML,WAAW,CAACiB,KAAZ,CAAkBf,YAAlB,EAAgCC,MAAhC,EAAwCC,QAAxC,CAAN,EAHF;;AAKD,GAbD,MAaO;AACLJ,IAAAA,WAAW,CAACiB,KAAZ,CAAkBf,YAAlB,EAAgCC,MAAhC,EAAwCC,QAAxC;AACD;AACF,C,CAlBUJ,W;;AAoBGiB,K,GAAQ,UAACf,YAAD,EAAuBC,MAAvB,EAAkDC,QAAlD,EAAwE;AAC5F,MAAIJ,WAAW,CAACgB,QAAhB,EAA0B;AACxBhB,IAAAA,WAAW,CAACgB,QAAZ,CAAqBf,IAArB,CAA0BC,YAA1B,EAAwCC,MAAxC,EAAgDC,QAAhD;AACD;AACF,C,CAxBUJ,W;;AA0BGkB,K,GAAQ,YAAM;AAC1B,MAAIlB,WAAW,CAACgB,QAAhB,EAA0B;AACxBhB,IAAAA,WAAW,CAACgB,QAAZ,CAAqBE,KAArB;AACD;AACF,C,CA9BUlB,W;;;AAiCIgB,Q,GAA4B,I","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Nullable } from '../../typings/utility-types';\n\nimport { Toast, Action, ToastDataTids } from './Toast';\n\nexport class ToastStatic {\n  public static push = (notification: string, action?: Nullable<Action>, showTime?: number) => {\n    if (!ToastStatic.node) {\n      ToastStatic.node = document.createElement('div');\n      const { body } = document;\n      if (!body) {\n        throw Error('There is no \"body\" element in \"document\"');\n      }\n      body.appendChild(ToastStatic.node);\n\n      ReactDOM.render(\n        <Toast data-tid={ToastDataTids.toastStatic} ref={(el) => (ToastStatic.instance = el)} />,\n        ToastStatic.node,\n        () => ToastStatic._push(notification, action, showTime),\n      );\n    } else {\n      ToastStatic._push(notification, action, showTime);\n    }\n  };\n\n  public static _push = (notification: string, action?: Nullable<Action>, showTime?: number) => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.push(notification, action, showTime);\n    }\n  };\n\n  public static close = () => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.close();\n    }\n  };\n\n  private static node: HTMLDivElement;\n  private static instance: Nullable<Toast> = null;\n}\n"]}

package/cjs/components/Toast/ToastView.js

@@ -7,8 +7,11 @@ var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _rootNode = require("../../lib/rootNode");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+var _CloseButtonIcon = require("../../internal/CloseButtonIcon/CloseButtonIcon");
 
-var _ToastView = require("./ToastView.styles");var _excluded = ["action", "onClose"];var _class, _class2, _temp;var
+var _ToastView = require("./ToastView.styles");
+var _Toast = require("./Toast");var _excluded = ["action", "onClose"];var _class, _class2, _temp;var
 
 
 
@@ -62,22 +65,38 @@ ToastView = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/fun
       var action = props.action,onClose = props.onClose,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
 
       var link = action ? /*#__PURE__*/
-      _react.default.createElement("span", { "data-tid": "ToastView__action", className: _ToastView.styles.link(_this.theme), onClick: action.handler },
+      _react.default.createElement("span", { "data-tid": _Toast.ToastDataTids.action, className: _ToastView.styles.link(_this.theme), onClick: action.handler },
       action.label) :
 
       null;
 
       var close = action ? /*#__PURE__*/
       _react.default.createElement("span", { className: _ToastView.styles.closeWrapper(_this.theme) }, /*#__PURE__*/
-      _react.default.createElement("span", { "data-tid": "ToastView__close", className: _ToastView.styles.close(_this.theme), onClick: onClose }, /*#__PURE__*/
+      _react.default.createElement("span", { "data-tid": _Toast.ToastDataTids.close, className: _ToastView.styles.close(_this.theme), onClick: onClose }, /*#__PURE__*/
       _react.default.createElement(_CrossIcon.CrossIcon, null))) :
 
 
       null;
 
+      if ((0, _ThemeHelpers.isTheme2022)(_this.theme) && close) {
+        close = /*#__PURE__*/
+        _react.default.createElement("span", { className: _ToastView.styles.closeWrapper(_this.theme) }, /*#__PURE__*/
+        _react.default.createElement(_CloseButtonIcon.CloseButtonIcon, {
+          "data-tid": _Toast.ToastDataTids.close,
+          onClick: onClose,
+          size: parseInt(_this.theme.toastCloseSize),
+          side: 40,
+          color: _this.theme.toastCloseColor,
+          colorHover: _this.theme.toastCloseHoverColor,
+          tabbable: false }));
+
+
+
+      }
+
       return /*#__PURE__*/(
-        _react.default.createElement(_ZIndex.ZIndex, { priority: "Toast", className: _ToastView.styles.wrapper() }, /*#__PURE__*/
-        _react.default.createElement("div", (0, _extends2.default)({ "data-tid": "ToastView__root" }, rest, { className: _ToastView.styles.root(_this.theme), ref: _this.setRootNode }), /*#__PURE__*/
+        _react.default.createElement(_ZIndex.ZIndex, { priority: "Toast", className: _ToastView.styles.wrapper(_this.theme) }, /*#__PURE__*/
+        _react.default.createElement("div", (0, _extends2.default)({ "data-tid": _Toast.ToastDataTids.toastView }, rest, { className: _ToastView.styles.root(_this.theme), ref: _this.setRootNode }), /*#__PURE__*/
         _react.default.createElement("span", null, _this.props.children),
         link,
         close)));

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

@@ -1 +1 @@
-{"version":3,"sources":["ToastView.tsx"],"names":["ToastView","rootNode","renderMain","props","action","onClose","rest","link","styles","theme","handler","label","close","closeWrapper","wrapper","root","setRootNode","children","render","React","Component","propTypes","string","isRequired","func"],"mappings":"mcAAA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;;AAEA,+C;;;;;;;;;;;;;;;;;;;;AAoBaA,S,OADZC,kB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BSC,IAAAA,U,GAAa,UAACC,KAAD,EAAmD;AACtE,UAAQC,MAAR,GAAqCD,KAArC,CAAQC,MAAR,CAAgBC,OAAhB,GAAqCF,KAArC,CAAgBE,OAAhB,CAA4BC,IAA5B,+CAAqCH,KAArC;;AAEA,UAAMI,IAAI,GAAGH,MAAM;AACjB,6CAAM,YAAS,mBAAf,EAAmC,SAAS,EAAEI,kBAAOD,IAAP,CAAY,MAAKE,KAAjB,CAA9C,EAAuE,OAAO,EAAEL,MAAM,CAACM,OAAvF;AACGN,MAAAA,MAAM,CAACO,KADV,CADiB;;AAIf,UAJJ;;AAMA,UAAMC,KAAK,GAAGR,MAAM;AAClB,6CAAM,SAAS,EAAEI,kBAAOK,YAAP,CAAoB,MAAKJ,KAAzB,CAAjB;AACE,6CAAM,YAAS,kBAAf,EAAkC,SAAS,EAAED,kBAAOI,KAAP,CAAa,MAAKH,KAAlB,CAA7C,EAAuE,OAAO,EAAEJ,OAAhF;AACE,mCAAC,oBAAD,OADF,CADF,CADkB;;;AAMhB,UANJ;;AAQA;AACE,qCAAC,cAAD,IAAQ,QAAQ,EAAC,OAAjB,EAAyB,SAAS,EAAEG,kBAAOM,OAAP,EAApC;AACE,qEAAK,YAAS,iBAAd,IAAoCR,IAApC,IAA0C,SAAS,EAAEE,kBAAOO,IAAP,CAAY,MAAKN,KAAjB,CAArD,EAA8E,GAAG,EAAE,MAAKO,WAAxF;AACE,mDAAO,MAAKb,KAAL,CAAWc,QAAlB,CADF;AAEGV,QAAAA,IAFH;AAGGK,QAAAA,KAHH,CADF,CADF;;;;AASD,K,uDArCMM,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACT,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBAAO,6BAAC,4BAAD,EAAmB,MAAI,CAACN,KAAxB,EAAgC,MAAI,CAACD,UAArC,CAAP,CACD,CAJH,CADF,CAQD,C,oBA5B4BiB,eAAMC,S,WACrBC,S,GAAY,EACxB;AACJ;AACA,KACIjB,MAAM,EAAE,sBAAM,EACZO,KAAK,EAAEW,kBAAOC,UADF,EAEZb,OAAO,EAAEc,gBAAKD,UAFF,EAAN,CAJgB,EAQxB;AACJ;AACA,KACIN,QAAQ,EAAEK,kBAAOC,UAXO,EAYxBlB,OAAO,EAAEmB,eAZe,E","sourcesContent":["import React from 'react';\nimport { func, shape, string } from 'prop-types';\n\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './ToastView.styles';\n\nexport interface ToastViewProps extends CommonProps {\n  /**\n   * Toast content\n   */\n  children?: string;\n  /**\n   * Adds action handling and close icon for toast\n   */\n  action?: {\n    label: string;\n    handler: () => void;\n  } | null;\n  onClose?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n}\n\n@rootNode\nexport class ToastView extends React.Component<ToastViewProps> {\n  public static propTypes = {\n    /**\n     * Adds action handling and close icon for toast\n     */\n    action: shape({\n      label: string.isRequired,\n      handler: func.isRequired,\n    }),\n    /**\n     * Toast content\n     */\n    children: string.isRequired,\n    onClose: func,\n  };\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain = (props: CommonWrapperRestProps<ToastViewProps>) => {\n    const { action, onClose, ...rest } = props;\n\n    const link = action ? (\n      <span data-tid=\"ToastView__action\" className={styles.link(this.theme)} onClick={action.handler}>\n        {action.label}\n      </span>\n    ) : null;\n\n    const close = action ? (\n      <span className={styles.closeWrapper(this.theme)}>\n        <span data-tid=\"ToastView__close\" className={styles.close(this.theme)} onClick={onClose}>\n          <CrossIcon />\n        </span>\n      </span>\n    ) : null;\n\n    return (\n      <ZIndex priority=\"Toast\" className={styles.wrapper()}>\n        <div data-tid=\"ToastView__root\" {...rest} className={styles.root(this.theme)} ref={this.setRootNode}>\n          <span>{this.props.children}</span>\n          {link}\n          {close}\n        </div>\n      </ZIndex>\n    );\n  };\n}\n"]}
+{"version":3,"sources":["ToastView.tsx"],"names":["ToastView","rootNode","renderMain","props","action","onClose","rest","link","ToastDataTids","styles","theme","handler","label","close","closeWrapper","parseInt","toastCloseSize","toastCloseColor","toastCloseHoverColor","wrapper","toastView","root","setRootNode","children","render","React","Component","propTypes","string","isRequired","func"],"mappings":"mcAAA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA,gC;;;;;;;;;;;;;;;;;;;;AAoBaA,S,OADZC,kB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BSC,IAAAA,U,GAAa,UAACC,KAAD,EAAmD;AACtE,UAAQC,MAAR,GAAqCD,KAArC,CAAQC,MAAR,CAAgBC,OAAhB,GAAqCF,KAArC,CAAgBE,OAAhB,CAA4BC,IAA5B,+CAAqCH,KAArC;;AAEA,UAAMI,IAAI,GAAGH,MAAM;AACjB,6CAAM,YAAUI,qBAAcJ,MAA9B,EAAsC,SAAS,EAAEK,kBAAOF,IAAP,CAAY,MAAKG,KAAjB,CAAjD,EAA0E,OAAO,EAAEN,MAAM,CAACO,OAA1F;AACGP,MAAAA,MAAM,CAACQ,KADV,CADiB;;AAIf,UAJJ;;AAMA,UAAIC,KAAK,GAAGT,MAAM;AAChB,6CAAM,SAAS,EAAEK,kBAAOK,YAAP,CAAoB,MAAKJ,KAAzB,CAAjB;AACE,6CAAM,YAAUF,qBAAcK,KAA9B,EAAqC,SAAS,EAAEJ,kBAAOI,KAAP,CAAa,MAAKH,KAAlB,CAAhD,EAA0E,OAAO,EAAEL,OAAnF;AACE,mCAAC,oBAAD,OADF,CADF,CADgB;;;AAMd,UANJ;;AAQA,UAAI,+BAAY,MAAKK,KAAjB,KAA2BG,KAA/B,EAAsC;AACpCA,QAAAA,KAAK;AACH,+CAAM,SAAS,EAAEJ,kBAAOK,YAAP,CAAoB,MAAKJ,KAAzB,CAAjB;AACE,qCAAC,gCAAD;AACE,sBAAUF,qBAAcK,KAD1B;AAEE,UAAA,OAAO,EAAER,OAFX;AAGE,UAAA,IAAI,EAAEU,QAAQ,CAAC,MAAKL,KAAL,CAAWM,cAAZ,CAHhB;AAIE,UAAA,IAAI,EAAE,EAJR;AAKE,UAAA,KAAK,EAAE,MAAKN,KAAL,CAAWO,eALpB;AAME,UAAA,UAAU,EAAE,MAAKP,KAAL,CAAWQ,oBANzB;AAOE,UAAA,QAAQ,EAAE,KAPZ,GADF,CADF;;;;AAaD;;AAED;AACE,qCAAC,cAAD,IAAQ,QAAQ,EAAC,OAAjB,EAAyB,SAAS,EAAET,kBAAOU,OAAP,CAAe,MAAKT,KAApB,CAApC;AACE,qEAAK,YAAUF,qBAAcY,SAA7B,IAA4Cd,IAA5C,IAAkD,SAAS,EAAEG,kBAAOY,IAAP,CAAY,MAAKX,KAAjB,CAA7D,EAAsF,GAAG,EAAE,MAAKY,WAAhG;AACE,mDAAO,MAAKnB,KAAL,CAAWoB,QAAlB,CADF;AAEGhB,QAAAA,IAFH;AAGGM,QAAAA,KAHH,CADF,CADF;;;;AASD,K,uDArDMW,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACd,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBAAO,6BAAC,4BAAD,EAAmB,MAAI,CAACP,KAAxB,EAAgC,MAAI,CAACD,UAArC,CAAP,CACD,CAJH,CADF,CAQD,C,oBA5B4BuB,eAAMC,S,WACrBC,S,GAAY,EACxB;AACJ;AACA,KACIvB,MAAM,EAAE,sBAAM,EACZQ,KAAK,EAAEgB,kBAAOC,UADF,EAEZlB,OAAO,EAAEmB,gBAAKD,UAFF,EAAN,CAJgB,EAQxB;AACJ;AACA,KACIN,QAAQ,EAAEK,kBAAOC,UAXO,EAYxBxB,OAAO,EAAEyB,eAZe,E","sourcesContent":["import React from 'react';\nimport { func, shape, string } from 'prop-types';\n\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';\n\nimport { styles } from './ToastView.styles';\nimport { ToastDataTids } from './Toast';\n\nexport interface ToastViewProps extends CommonProps {\n  /**\n   * Toast content\n   */\n  children?: string;\n  /**\n   * Adds action handling and close icon for toast\n   */\n  action?: {\n    label: string;\n    handler: () => void;\n  } | null;\n  onClose?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n}\n\n@rootNode\nexport class ToastView extends React.Component<ToastViewProps> {\n  public static propTypes = {\n    /**\n     * Adds action handling and close icon for toast\n     */\n    action: shape({\n      label: string.isRequired,\n      handler: func.isRequired,\n    }),\n    /**\n     * Toast content\n     */\n    children: string.isRequired,\n    onClose: func,\n  };\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain = (props: CommonWrapperRestProps<ToastViewProps>) => {\n    const { action, onClose, ...rest } = props;\n\n    const link = action ? (\n      <span data-tid={ToastDataTids.action} className={styles.link(this.theme)} onClick={action.handler}>\n        {action.label}\n      </span>\n    ) : null;\n\n    let close = action ? (\n      <span className={styles.closeWrapper(this.theme)}>\n        <span data-tid={ToastDataTids.close} className={styles.close(this.theme)} onClick={onClose}>\n          <CrossIcon />\n        </span>\n      </span>\n    ) : null;\n\n    if (isTheme2022(this.theme) && close) {\n      close = (\n        <span className={styles.closeWrapper(this.theme)}>\n          <CloseButtonIcon\n            data-tid={ToastDataTids.close}\n            onClick={onClose}\n            size={parseInt(this.theme.toastCloseSize)}\n            side={40}\n            color={this.theme.toastCloseColor}\n            colorHover={this.theme.toastCloseHoverColor}\n            tabbable={false}\n          />\n        </span>\n      );\n    }\n\n    return (\n      <ZIndex priority=\"Toast\" className={styles.wrapper(this.theme)}>\n        <div data-tid={ToastDataTids.toastView} {...rest} className={styles.root(this.theme)} ref={this.setRootNode}>\n          <span>{this.props.children}</span>\n          {link}\n          {close}\n        </div>\n      </ZIndex>\n    );\n  };\n}\n"]}

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

@@ -1,7 +1,7 @@
 import { Theme } from '../../lib/theming/Theme';
 export declare const styles: {
     root(t: Theme): string;
-    wrapper(): string;
+    wrapper(t: Theme): string;
     closeWrapper(t: Theme): string;
     link(t: Theme): string;
     close(t: Theme): string;

package/cjs/components/Toast/ToastView.styles.js

@@ -1,5 +1,6 @@
-"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;
+"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 _ThemeHelpers = require("../../lib/theming/ThemeHelpers");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 var getVerticalPaddingsWithCompensation = function getVerticalPaddingsWithCompensation(theme) {
   var toastPaddingY = theme.toastPaddingY,fontFamilyCompensationBaseline = theme.fontFamilyCompensationBaseline;
@@ -26,14 +27,15 @@ var styles = (0, _Emotion.memoizeStyle)({
 
   },
 
-  wrapper: function wrapper() {
-    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n    "])));
+  wrapper: function wrapper(t) {
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n      border-radius: ", ";\n    "])),
 
 
 
 
 
 
+    t.toastBorderRadius);
 
   },
 
@@ -48,7 +50,9 @@ var styles = (0, _Emotion.memoizeStyle)({
   link: function link(t) {
     var _getVerticalPaddingsW3 = getVerticalPaddingsWithCompensation(t),paddingTop = _getVerticalPaddingsW3[0],paddingBottom = _getVerticalPaddingsW3[1];
     var marginRight = Math.round(parseInt(t.toastPaddingX) * 1.5) + "px";
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n\n      margin: -", " ", " -", " ", ";\n\n      padding: ", " 0 ", ";\n\n      &:hover {\n        text-decoration: underline;\n      }\n    "])),
+    var padding = (0, _ThemeHelpers.isTheme2022)(t) ? paddingTop + " " + paddingBottom : paddingTop + " 0 " + paddingBottom;
+
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n\n      margin: -", " ", " -", " ", ";\n\n      padding: ", ";\n\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n\n      &:active {\n        background: ", ";\n      }\n    "])),
     t.toastLinkColor,
 
 
@@ -56,10 +60,15 @@ var styles = (0, _Emotion.memoizeStyle)({
 
     paddingTop, marginRight, paddingBottom, t.toastPaddingX,
 
-    paddingTop, paddingBottom);
+    padding,
+
+
+    t.toastLinkBgHover,
+    t.toastLinkTextDecorationHover,
 
 
 
+    t.toastLinkBgActive);
 
 
   },