@skbkontur/react-ui 0.0.0-e55f22da73 → 0.0.0-f50cd2db6e

package/components/Toast/Toast/Toast.js

@@ -1,24 +1,28 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import React from 'react';
 import { CSSTransition, TransitionGroup } from 'react-transition-group';
 import { RenderContainer } from "../../../internal/RenderContainer";
-import { jsStyles } from "../Toast.styles";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { isTestEnv } from "../../../lib/currentEnvironment";
+import { rootNode } from "../../../lib/rootNode";
+import { styles } from "../Toast.styles";
 import { ToastView } from "../ToastView";
 import { ToastStatic } from "../ToastStatic";
-/**
-                                              * Toast manages notifications
-                                              * method `push` is sending notification,
-                                              * then automatically hides it after 3 or 7 seconds,
-                                              * depending on if this notification contains action or not.
-                                              *
-                                              * Can be used like `Toast.push('message')` or
-                                              * `Toast.push('message', {label: 'Cancel', handler: cancelHandler})`
-                                              */
-
-export var Toast =
-/*#__PURE__*/
-function (_React$Component) {
+export
+/**
+* Показывает уведомления.
+*
+* Доступен статический метод: `Toast.push(notification, action?)`.
+* Однако, при его использовании не работает кастомизация и могут быть проблемы
+* с перекрытием уведомления другими элементами страницы.
+*
+* Рекомендуется использовать Toast через `ref` (см. примеры).
+*/
+var Toast = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Toast, _React$Component);
 
   Toast.push = function push(notification, action) {
@@ -33,8 +37,8 @@ function (_React$Component) {
     var _this;
 
     _this = _React$Component.call(this, props) || this;
-    _this._toast = void 0;
     _this._timeout = null;
+    _this.rootRef = /*#__PURE__*/React.createRef();
 
     _this.close = function () {
       safelyCall(_this.props.onClose, _this.state.notification, _this.state.action);
@@ -45,6 +49,13 @@ function (_React$Component) {
       });
     };
 
+    _this.setRootRef = function (element) {
+      _this.setRootNode(element); // @ts-ignore
+
+
+      _this.rootRef.current = element;
+    };
+
     _this._clearTimer = function () {
       if (_this._timeout) {
         clearTimeout(_this._timeout);
@@ -78,16 +89,18 @@ function (_React$Component) {
   };
 
   _proto.render = function render() {
-    return React.createElement(RenderContainer, null, React.createElement(TransitionGroup, null, this._renderToast()));
+    return /*#__PURE__*/React.createElement(RenderContainer, null, /*#__PURE__*/React.createElement(TransitionGroup, null, this._renderToast()));
   }
-  /**
-   * Показывает тост с `notification` в качестве сообщения.
-   *
-   * `action` опциональный параметр формата `{ label: string, handler: function }` добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler
-   * @public
-   * @param notification
-   * @param action
-   */
+  /**
+  * Показывает тост с `notification` в качестве сообщения.
+  * Тост автоматически скрывается через 3 или 7 секунд,
+  * в зависимости от наличия у него кнопки `action`.
+  *
+  * @public
+  * @param {string} notification
+  * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`
+  * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler
+  */
   ;
 
   _proto.push = function push(notification, action) {
@@ -105,9 +118,9 @@ function (_React$Component) {
       };
     }, this._setTimer);
   }
-  /**
-   * @public
-   */
+  /**
+  * @public
+  */
   ;
 
   _proto._renderToast = function _renderToast() {
@@ -127,26 +140,30 @@ function (_React$Component) {
       children: notification,
       action: action
     };
-    return React.createElement(CSSTransition, {
+    return /*#__PURE__*/React.createElement(CSSTransition, {
       key: id,
       classNames: {
-        enter: jsStyles.enter(),
-        enterActive: jsStyles.enterActive(),
-        exit: jsStyles.exit(),
-        exitActive: jsStyles.exitActive()
+        enter: styles.enter(),
+        enterActive: styles.enterActive(),
+        exit: styles.exit(),
+        exitActive: styles.exitActive()
       },
       timeout: {
         enter: 200,
         exit: 150
-      }
-    }, React.createElement(ToastView, _extends({
+      },
+      enter: !isTestEnv,
+      exit: !isTestEnv,
+      nodeRef: this.rootRef
+    }, /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootRef
+    }, this.props), /*#__PURE__*/React.createElement(ToastView, _extends({
       ref: this._refToast
-    }, toastProps)));
+    }, toastProps))));
   };
 
   return Toast;
-}(React.Component);
-Toast.__KONTUR_REACT_UI__ = 'Toast';
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Toast', _temp)) || _class;
 
 function safelyCall(fn) {
   if (fn) {

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

@@ -1 +1 @@
-{"version":3,"sources":["Toast.tsx"],"names":["React","CSSTransition","TransitionGroup","RenderContainer","jsStyles","ToastView","ToastStatic","Toast","push","notification","action","close","props","_toast","_timeout","safelyCall","onClose","state","setState","_clearTimer","clearTimeout","_setTimer","timeOut","window","setTimeout","_refToast","element","id","componentWillUnmount","render","_renderToast","onPush","toastProps","onMouseEnter","onMouseLeave","children","enter","enterActive","exit","exitActive","Component","__KONTUR_REACT_UI__","fn","args"],"mappings":"gIAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,aAAT,EAAwBC,eAAxB,QAA+C,wBAA/C;;AAEA,SAASC,eAAT,QAAgC,gCAAhC;;;AAGA,SAASC,QAAT,QAAyB,gBAAzB;AACA,SAASC,SAAT,QAA0C,aAA1C;AACA,SAASC,WAAT,QAA4B,eAA5B;;;;;;;;;;;;;;;;;;AAkBA;;;;;;;;;AASA,WAAaC,KAAb;;;AAGgBC,EAAAA,IAHhB,GAGE,cAAmBC,YAAnB,EAAyCC,MAAzC,EAA0D;AACxDJ,IAAAA,WAAW,CAACE,IAAZ,CAAiBC,YAAjB,EAA+BC,MAA/B;AACD,GALH;;AAOgBC,EAAAA,KAPhB,GAOE,iBAAsB;AACpBL,IAAAA,WAAW,CAACK,KAAZ;AACD,GATH;;;;;AAcE,iBAAYC,KAAZ,EAA+B;AAC7B,wCAAMA,KAAN,UAD6B,MAHxBC,MAGwB,gBAFvBC,QAEuB,GAFM,IAEN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0CxBH,IAAAA,KA1CwB,GA0ChB,YAAM;AACnBI,MAAAA,UAAU,CAAC,MAAKH,KAAL,CAAWI,OAAZ,EAAqB,MAAKC,KAAL,CAAWR,YAAhC,EAA8C,MAAKQ,KAAL,CAAWP,MAAzD,CAAV;AACA,YAAKQ,QAAL,CAAc,EAAET,YAAY,EAAE,IAAhB,EAAsBC,MAAM,EAAE,IAA9B,EAAd;AACD,KA7C8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiFvBS,IAAAA,WAjFuB,GAiFT,YAAM;AAC1B,UAAI,MAAKL,QAAT,EAAmB;AACjBM,QAAAA,YAAY,CAAC,MAAKN,QAAN,CAAZ;AACA,cAAKA,QAAL,GAAgB,IAAhB;AACD;AACF,KAtF8B;;AAwFvBO,IAAAA,SAxFuB,GAwFX,YAAM;AACxB,YAAKF,WAAL;;AAEA,UAAMG,OAAO,GAAG,MAAKL,KAAL,CAAWP,MAAX,GAAoB,CAApB,GAAwB,CAAxC;;AAEA,YAAKI,QAAL,GAAgBS,MAAM,CAACC,UAAP,CAAkB,MAAKb,KAAvB,EAA8BW,OAAO,GAAG,IAAxC,CAAhB;AACD,KA9F8B;;AAgGvBG,IAAAA,SAhGuB,GAgGX,UAACC,OAAD,EAAwB;AAC1C,YAAKb,MAAL,GAAca,OAAd;AACD,KAlG8B,CAE7B,MAAKT,KAAL,GAAa,EACXR,YAAY,EAAE,IADH,EAEXC,MAAM,EAAE,IAFG,EAGXiB,EAAE,EAAE,CAHO,EAAb,CAF6B,aAO9B,CArBH,oCAuBSC,oBAvBT,GAuBE,gCAA8B,CAC5B,KAAKT,WAAL,GACD,CAzBH,QA2BSU,MA3BT,GA2BE,kBAAgB,CACd,OACE,oBAAC,eAAD,QACE,oBAAC,eAAD,QAAkB,KAAKC,YAAL,EAAlB,CADF,CADF,CAKD,CAjCH,CAmCE;;;;;;;0VAnCF,QA2CStB,IA3CT,GA2CE,cAAYC,YAAZ,EAAkCC,MAAlC,EAAmD,CACjD,IAAI,KAAKO,KAAL,CAAWR,YAAf,EAA6B,CAC3B,KAAKE,KAAL,GACD,CAEDI,UAAU,CAAC,KAAKH,KAAL,CAAWmB,MAAZ,EAAoBtB,YAApB,EAAkCC,MAAlC,CAAV,CAEA,KAAKQ,QAAL,CAAc,qBAAGS,EAAH,QAAGA,EAAH,QAAa,EAAElB,YAAY,EAAZA,YAAF,EAAgBC,MAAM,EAANA,MAAhB,EAAwBiB,EAAE,EAAEA,EAAE,GAAG,CAAjC,EAAb,EAAd,EAAkE,KAAKN,SAAvE,EACD,CAnDH,CAqDE;;wnBArDF,QA6DUS,YA7DV,GA6DE,wBAAuB,mBACgB,KAAKb,KADrB,CACbR,YADa,eACbA,YADa,CACCC,MADD,eACCA,MADD,CACSiB,EADT,eACSA,EADT,CAGrB,IAAI,CAAClB,YAAL,EAAmB,CACjB,OAAO,IAAP,CACD,CAED,IAAMuB,UAA0B,GAAG,EACjCC,YAAY,EAAE,KAAKd,WADc,EAEjCe,YAAY,EAAE,KAAKb,SAFc,EAGjCL,OAAO,EAAE,KAAKL,KAHmB,EAIjCwB,QAAQ,EAAE1B,YAJuB,EAKjCC,MAAM,EAANA,MALiC,EAAnC,CAQA,OACE,oBAAC,aAAD,IACE,GAAG,EAAEiB,EADP,EAEE,UAAU,EAAE,EACVS,KAAK,EAAEhC,QAAQ,CAACgC,KAAT,EADG,EAEVC,WAAW,EAAEjC,QAAQ,CAACiC,WAAT,EAFH,EAGVC,IAAI,EAAElC,QAAQ,CAACkC,IAAT,EAHI,EAIVC,UAAU,EAAEnC,QAAQ,CAACmC,UAAT,EAJF,EAFd,EAQE,OAAO,EAAE,EACPH,KAAK,EAAE,GADA,EAEPE,IAAI,EAAE,GAFC,EARX,IAaE,oBAAC,SAAD,aAAW,GAAG,EAAE,KAAKb,SAArB,IAAoCO,UAApC,EAbF,CADF,CAiBD,CA7FH,gBAA2BhC,KAAK,CAACwC,SAAjC,EAAajC,K,CACGkC,mB,GAAsB,O,CAkHtC,SAAS1B,UAAT,CAAoB2B,EAApB,EAAoE,CAClE,IAAIA,EAAJ,EAAQ,mCAD6CC,IAC7C,uEAD6CA,IAC7C,8BACND,EAAE,MAAF,SAAMC,IAAN,EACD,CACF","sourcesContent":["import React from 'react';\r\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\r\n\r\nimport { RenderContainer } from '../../internal/RenderContainer';\r\nimport { Nullable } from '../../typings/utility-types';\r\n\r\nimport { jsStyles } from './Toast.styles';\r\nimport { ToastView, ToastViewProps } from './ToastView';\r\nimport { ToastStatic } from './ToastStatic';\r\n\r\nexport interface Action {\r\n  label: string;\r\n  handler: () => void;\r\n}\r\n\r\nexport interface ToastState {\r\n  notification: Nullable<string>;\r\n  action: Nullable<Action>;\r\n  id: number;\r\n}\r\n\r\nexport interface ToastProps {\r\n  onPush?: (notification: string, action?: Action) => void;\r\n  onClose?: (notification: string, action?: Action) => void;\r\n}\r\n\r\n/**\r\n * Toast manages notifications\r\n * method `push` is sending notification,\r\n * then automatically hides it after 3 or 7 seconds,\r\n * depending on if this notification contains action or not.\r\n *\r\n * Can be used like `Toast.push('message')` or\r\n * `Toast.push('message', {label: 'Cancel', handler: cancelHandler})`\r\n */\r\nexport class Toast extends React.Component<ToastProps, ToastState> {\r\n  public static __KONTUR_REACT_UI__ = 'Toast';\r\n\r\n  public static push(notification: string, action?: Action) {\r\n    ToastStatic.push(notification, action);\r\n  }\r\n\r\n  public static close() {\r\n    ToastStatic.close();\r\n  }\r\n\r\n  public _toast: Nullable<ToastView>;\r\n  private _timeout: Nullable<number> = null;\r\n\r\n  constructor(props: ToastProps) {\r\n    super(props);\r\n    this.state = {\r\n      notification: null,\r\n      action: null,\r\n      id: 0,\r\n    };\r\n  }\r\n\r\n  public componentWillUnmount() {\r\n    this._clearTimer();\r\n  }\r\n\r\n  public render() {\r\n    return (\r\n      <RenderContainer>\r\n        <TransitionGroup>{this._renderToast()}</TransitionGroup>\r\n      </RenderContainer>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Показывает тост с `notification` в качестве сообщения.\r\n   *\r\n   * `action` опциональный параметр формата `{ label: string, handler: function }` добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler\r\n   * @public\r\n   * @param notification\r\n   * @param action\r\n   */\r\n  public push(notification: string, action?: Action) {\r\n    if (this.state.notification) {\r\n      this.close();\r\n    }\r\n\r\n    safelyCall(this.props.onPush, notification, action);\r\n\r\n    this.setState(({ id }) => ({ notification, action, id: id + 1 }), this._setTimer);\r\n  }\r\n\r\n  /**\r\n   * @public\r\n   */\r\n  public close = () => {\r\n    safelyCall(this.props.onClose, this.state.notification, this.state.action);\r\n    this.setState({ notification: null, action: null });\r\n  };\r\n\r\n  private _renderToast() {\r\n    const { notification, action, id } = this.state;\r\n\r\n    if (!notification) {\r\n      return null;\r\n    }\r\n\r\n    const toastProps: ToastViewProps = {\r\n      onMouseEnter: this._clearTimer,\r\n      onMouseLeave: this._setTimer,\r\n      onClose: this.close,\r\n      children: notification,\r\n      action,\r\n    };\r\n\r\n    return (\r\n      <CSSTransition\r\n        key={id}\r\n        classNames={{\r\n          enter: jsStyles.enter(),\r\n          enterActive: jsStyles.enterActive(),\r\n          exit: jsStyles.exit(),\r\n          exitActive: jsStyles.exitActive(),\r\n        }}\r\n        timeout={{\r\n          enter: 200,\r\n          exit: 150,\r\n        }}\r\n      >\r\n        <ToastView ref={this._refToast} {...toastProps} />\r\n      </CSSTransition>\r\n    );\r\n  }\r\n\r\n  private _clearTimer = () => {\r\n    if (this._timeout) {\r\n      clearTimeout(this._timeout);\r\n      this._timeout = null;\r\n    }\r\n  };\r\n\r\n  private _setTimer = () => {\r\n    this._clearTimer();\r\n\r\n    const timeOut = this.state.action ? 7 : 3;\r\n\r\n    this._timeout = window.setTimeout(this.close, timeOut * 1000);\r\n  };\r\n\r\n  private _refToast = (element: ToastView) => {\r\n    this._toast = element;\r\n  };\r\n}\r\n\r\nfunction safelyCall(fn: Nullable<(a?: any) => any>, ...args: any[]) {\r\n  if (fn) {\r\n    fn(...args);\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["Toast.tsx"],"names":["React","CSSTransition","TransitionGroup","RenderContainer","CommonWrapper","isTestEnv","rootNode","styles","ToastView","ToastStatic","Toast","push","notification","action","close","props","_timeout","rootRef","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","enterActive","exit","exitActive","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"]}

package/components/Toast/Toast.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Nullable } from '../../typings/utility-types';
+import { CommonProps } from '../../internal/CommonWrapper';
 import { ToastView } from './ToastView';
 export interface Action {
     label: string;
@@ -10,35 +11,39 @@ export interface ToastState {
     action: Nullable<Action>;
     id: number;
 }
-export interface ToastProps {
+export interface ToastProps extends CommonProps {
     onPush?: (notification: string, action?: Action) => void;
     onClose?: (notification: string, action?: Action) => void;
 }
 /**
- * Toast manages notifications
- * method `push` is sending notification,
- * then automatically hides it after 3 or 7 seconds,
- * depending on if this notification contains action or not.
+ * Показывает уведомления.
  *
- * Can be used like `Toast.push('message')` or
- * `Toast.push('message', {label: 'Cancel', handler: cancelHandler})`
+ * Доступен статический метод: `Toast.push(notification, action?)`.
+ * Однако, при его использовании не работает кастомизация и могут быть проблемы
+ * с перекрытием уведомления другими элементами страницы.
+ *
+ * Рекомендуется использовать Toast через `ref` (см. примеры).
  */
 export declare class Toast extends React.Component<ToastProps, ToastState> {
     static __KONTUR_REACT_UI__: string;
+    private setRootNode;
     static push(notification: string, action?: Action): void;
     static close(): void;
     _toast: Nullable<ToastView>;
     private _timeout;
+    private rootRef;
     constructor(props: ToastProps);
     componentWillUnmount(): void;
     render(): JSX.Element;
     /**
      * Показывает тост с `notification` в качестве сообщения.
+     * Тост автоматически скрывается через 3 или 7 секунд,
+     * в зависимости от наличия у него кнопки `action`.
      *
-     * `action` опциональный параметр формата `{ label: string, handler: function }` добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler
      * @public
-     * @param notification
-     * @param action
+     * @param {string} notification
+     * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`
+     * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler
      */
     push(notification: string, action?: Action): void;
     /**
@@ -46,6 +51,7 @@ export declare class Toast extends React.Component<ToastProps, ToastState> {
      */
     close: () => void;
     private _renderToast;
+    private setRootRef;
     private _clearTimer;
     private _setTimer;
     private _refToast;

package/components/Toast/Toast.md

@@ -1,41 +1,41 @@
-Вызов статических методов
-
-```jsx harmony
-import { Button, Toast } from '@skbkontur/react-ui';
-
-function showComplexNotification() {
-  Toast.push('Successfully saved', {
-    label: 'Cancel',
-    handler: () => Toast.push('Canceled'),
-  });
-}
-
-<Button onClick={showComplexNotification}>Show notification</Button>;
-```
-
-Использование `ref`
-
-```jsx harmony
-import { Button, Toast } from '@skbkontur/react-ui';
-
-class Toaster extends React.Component {
-  showNotification() {
-    this.notifier.push('Successfully');
-  }
-
-  render() {
-    return (
-      <div>
-        <Toast
-          ref={el => {
-            this.notifier = el;
-          }}
-        />
-        <Button onClick={() => this.showNotification()}>Show notification</Button>
-      </div>
-    );
-  }
-}
-
-<Toaster />;
-```
+Вызов статических методов
+
+```jsx harmony
+import { Button, Toast } from '@skbkontur/react-ui';
+
+function showComplexNotification() {
+  Toast.push('Successfully saved', {
+    label: 'Cancel',
+    handler: () => Toast.push('Canceled'),
+  });
+}
+
+<Button onClick={showComplexNotification}>Show notification</Button>;
+```
+
+Использование `ref`
+
+```jsx harmony
+import { Button, Toast } from '@skbkontur/react-ui';
+
+class Toaster extends React.Component {
+  showNotification() {
+    this.notifier.push('Successfully');
+  }
+
+  render() {
+    return (
+      <div>
+        <Toast
+          ref={el => {
+            this.notifier = el;
+          }}
+        />
+        <Button onClick={() => this.showNotification()}>Show notification</Button>
+      </div>
+    );
+  }
+}
+
+<Toaster />;
+```

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

@@ -1,58 +1,19 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n      opacity: 0.01;\n      transition: opacity 0.15s ease-out;\n    "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n      transform: translateY(0);\n      opacity: 1;\n    "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n      transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n      transform: translateY(0);\n    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      transform: translateY(-40px);\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
+export var styles = memoizeStyle({
   enter: function enter() {
-    return css(_templateObject());
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      transform: translateY(-40px);\n    "])));
   },
   enterActive: function enterActive() {
-    return css(_templateObject2());
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n      transform: translateY(0);\n    "])));
   },
   exit: function exit() {
-    return css(_templateObject3());
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      transform: translateY(0);\n      opacity: 1;\n    "])));
   },
   exitActive: function exitActive() {
-    return css(_templateObject4());
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      opacity: 0.01;\n      transition: opacity 0.15s ease-out;\n    "])));
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

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

@@ -1 +1 @@
-{"version":3,"sources":["Toast.styles.ts"],"names":["css","memoizeStyle","styles","enter","enterActive","exit","exitActive","jsStyles"],"mappings":"y8BAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,IAAMC,MAAM,GAAG;AACbC,EAAAA,KADa,mBACL;AACN,WAAOH,GAAP;;;AAGD,GALY;AAMbI,EAAAA,WANa,yBAMC;AACZ,WAAOJ,GAAP;;;;AAID,GAXY;AAYbK,EAAAA,IAZa,kBAYN;AACL,WAAOL,GAAP;;;;AAID,GAjBY;AAkBbM,EAAAA,UAlBa,wBAkBA;AACX,WAAON,GAAP;;;;AAID,GAvBY,EAAf;;;AA0BA,OAAO,IAAMO,QAAQ,GAAGN,YAAY,CAACC,MAAD,CAA7B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\r\n\r\nconst styles = {\r\n  enter() {\r\n    return css`\r\n      transform: translateY(-40px);\r\n    `;\r\n  },\r\n  enterActive() {\r\n    return css`\r\n      transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\r\n      transform: translateY(0);\r\n    `;\r\n  },\r\n  exit() {\r\n    return css`\r\n      transform: translateY(0);\r\n      opacity: 1;\r\n    `;\r\n  },\r\n  exitActive() {\r\n    return css`\r\n      opacity: 0.01;\r\n      transition: opacity 0.15s ease-out;\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Toast.styles.ts"],"names":["css","memoizeStyle","styles","enter","enterActive","exit","exitActive"],"mappings":"0KAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,KADiC,mBACzB;AACN,WAAOH,GAAP;;;AAGD,GALgC;AAMjCI,EAAAA,WANiC,yBAMnB;AACZ,WAAOJ,GAAP;;;;AAID,GAXgC;AAYjCK,EAAAA,IAZiC,kBAY1B;AACL,WAAOL,GAAP;;;;AAID,GAjBgC;AAkBjCM,EAAAA,UAlBiC,wBAkBpB;AACX,WAAON,GAAP;;;;AAID,GAvBgC,EAAD,CAA3B","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"]}

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

@@ -1,4 +1,4 @@
-export declare const jsStyles: {
+export declare const styles: {
     enter(): string;
     enterActive(): string;
     exit(): string;

package/components/Toast/ToastStatic/ToastStatic.js

@@ -14,7 +14,7 @@ ToastStatic.push = function (notification, action) {
     }
 
     body.appendChild(ToastStatic.node);
-    ReactDOM.render(React.createElement(Toast, {
+    ReactDOM.render( /*#__PURE__*/React.createElement(Toast, {
       "data-tid": "StaticToast",
       ref: function ref(el) {
         return ToastStatic.instance = el;
@@ -39,5 +39,4 @@ ToastStatic.close = function () {
   }
 };
 
-ToastStatic.node = void 0;
 ToastStatic.instance = null;

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

@@ -1 +1 @@
-{"version":3,"sources":["ToastStatic.tsx"],"names":["React","ReactDOM","Toast","ToastStatic","push","notification","action","node","document","createElement","body","Error","appendChild","render","el","instance","_push","close"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,MAAqB,WAArB;;;;AAIA,SAASC,KAAT,QAA8B,SAA9B;;;AAGA,WAAaC,WAAb,6BAAaA,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,CADqB;AAEJD,IAAAA,QAFI,CAEbE,IAFa,aAEbA,IAFa;AAGrB,QAAI,CAACA,IAAL,EAAW;AACT,YAAMC,KAAK,CAAC,0CAAD,CAAX;AACD;AACDD,IAAAA,IAAI,CAACE,WAAL,CAAiBT,WAAW,CAACI,IAA7B;;AAEAN,IAAAA,QAAQ,CAACY,MAAT,CAAgB,oBAAC,KAAD,IAAO,YAAS,aAAhB,EAA8B,GAAG,EAAE,aAAAC,EAAE,UAAKX,WAAW,CAACY,QAAZ,GAAuBD,EAA5B,EAArC,GAAhB,EAA0FX,WAAW,CAACI,IAAtG,EAA4G;AAC1GJ,QAAAA,WAAW,CAACa,KAAZ,CAAkBX,YAAlB,EAAgCC,MAAhC,CAD0G,GAA5G;;AAGD,GAXD,MAWO;AACLH,IAAAA,WAAW,CAACa,KAAZ,CAAkBX,YAAlB,EAAgCC,MAAhC;AACD;AACF,C,CAhBUH,W;;AAkBGa,K,GAAQ,UAACX,YAAD,EAAuBC,MAAvB,EAA2C;AAC/D,MAAIH,WAAW,CAACY,QAAhB,EAA0B;AACxBZ,IAAAA,WAAW,CAACY,QAAZ,CAAqBX,IAArB,CAA0BC,YAA1B,EAAwCC,MAAxC;AACD;AACF,C,CAtBUH,W;;AAwBGc,K,GAAQ,YAAM;AAC1B,MAAId,WAAW,CAACY,QAAhB,EAA0B;AACxBZ,IAAAA,WAAW,CAACY,QAAZ,CAAqBE,KAArB;AACD;AACF,C,CA5BUd,W;;AA8BII,I,UA9BJJ,W;AA+BIY,Q,GAA4B,I","sourcesContent":["import React from 'react';\r\nimport ReactDOM from 'react-dom';\r\n\r\nimport { Nullable } from '../../typings/utility-types';\r\n\r\nimport { Toast, Action } from './Toast';\r\n\r\n\r\nexport class ToastStatic {\r\n  public static push = (notification: string, action?: Action) => {\r\n    if (!ToastStatic.node) {\r\n      ToastStatic.node = document.createElement('div');\r\n      const { body } = document;\r\n      if (!body) {\r\n        throw Error('There is no \"body\" element in \"document\"');\r\n      }\r\n      body.appendChild(ToastStatic.node);\r\n\r\n      ReactDOM.render(<Toast data-tid=\"StaticToast\" ref={el => (ToastStatic.instance = el)} />, ToastStatic.node, () =>\r\n        ToastStatic._push(notification, action),\r\n      );\r\n    } else {\r\n      ToastStatic._push(notification, action);\r\n    }\r\n  };\r\n\r\n  public static _push = (notification: string, action?: Action) => {\r\n    if (ToastStatic.instance) {\r\n      ToastStatic.instance.push(notification, action);\r\n    }\r\n  };\r\n\r\n  public static close = () => {\r\n    if (ToastStatic.instance) {\r\n      ToastStatic.instance.close();\r\n    }\r\n  };\r\n\r\n  private static node: HTMLDivElement;\r\n  private static instance: Nullable<Toast> = null;\r\n}\r\n"]}
+{"version":3,"sources":["ToastStatic.tsx"],"names":["React","ReactDOM","Toast","ToastStatic","push","notification","action","node","document","createElement","body","Error","appendChild","render","el","instance","_push","close"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,MAAqB,WAArB;;;;AAIA,SAASC,KAAT,QAA8B,SAA9B;;AAEA,WAAaC,WAAb,6BAAaA,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;;AAEAN,IAAAA,QAAQ,CAACY,MAAT;AACE,wBAAC,KAAD,IAAO,YAAS,aAAhB,EAA8B,GAAG,EAAE,aAACC,EAAD,UAASX,WAAW,CAACY,QAAZ,GAAuBD,EAAhC,EAAnC,GADF;AAEEX,IAAAA,WAAW,CAACI,IAFd;AAGE,wBAAMJ,WAAW,CAACa,KAAZ,CAAkBX,YAAlB,EAAgCC,MAAhC,CAAN,EAHF;;AAKD,GAbD,MAaO;AACLH,IAAAA,WAAW,CAACa,KAAZ,CAAkBX,YAAlB,EAAgCC,MAAhC;AACD;AACF,C,CAlBUH,W;;AAoBGa,K,GAAQ,UAACX,YAAD,EAAuBC,MAAvB,EAA2C;AAC/D,MAAIH,WAAW,CAACY,QAAhB,EAA0B;AACxBZ,IAAAA,WAAW,CAACY,QAAZ,CAAqBX,IAArB,CAA0BC,YAA1B,EAAwCC,MAAxC;AACD;AACF,C,CAxBUH,W;;AA0BGc,K,GAAQ,YAAM;AAC1B,MAAId,WAAW,CAACY,QAAhB,EAA0B;AACxBZ,IAAAA,WAAW,CAACY,QAAZ,CAAqBE,KAArB;AACD;AACF,C,CA9BUd,W;;;AAiCIY,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"]}

package/components/Toast/ToastView/ToastView.js

@@ -1,15 +1,19 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+var _excluded = ["action", "onClose"];
+
+var _class, _class2, _temp;
+
 import React from 'react';
 import { func, shape, string } from 'prop-types';
 import { CrossIcon } from "../../../internal/icons/CrossIcon";
 import { ZIndex } from "../../../internal/ZIndex";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { jsStyles } from "../ToastView.styles";
-export var ToastView =
-/*#__PURE__*/
-function (_React$Component) {
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { rootNode } from "../../../lib/rootNode";
+import { styles } from "../ToastView.styles";
+export var ToastView = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ToastView, _React$Component);
 
   function ToastView() {
@@ -20,7 +24,35 @@ function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.theme = void 0;
+
+    _this.renderMain = function (props) {
+      var action = props.action,
+          onClose = props.onClose,
+          rest = _objectWithoutPropertiesLoose(props, _excluded);
+
+      var link = action ? /*#__PURE__*/React.createElement("span", {
+        "data-tid": "ToastView__action",
+        className: styles.link(_this.theme),
+        onClick: action.handler
+      }, action.label) : null;
+      var close = action ? /*#__PURE__*/React.createElement("span", {
+        className: styles.closeWrapper(_this.theme)
+      }, /*#__PURE__*/React.createElement("span", {
+        "data-tid": "ToastView__close",
+        className: styles.close(_this.theme),
+        onClick: onClose
+      }, /*#__PURE__*/React.createElement(CrossIcon, null))) : null;
+      return /*#__PURE__*/React.createElement(ZIndex, {
+        priority: "Toast",
+        className: styles.wrapper()
+      }, /*#__PURE__*/React.createElement("div", _extends({
+        "data-tid": "ToastView__root"
+      }, rest, {
+        className: styles.root(_this.theme),
+        ref: _this.setRootNode
+      }), /*#__PURE__*/React.createElement("span", null, _this.props.children), link, close));
+    };
+
     return _this;
   }
 
@@ -29,52 +61,25 @@ function (_React$Component) {
   _proto.render = function render() {
     var _this2 = this;
 
-    return React.createElement(ThemeContext.Consumer, null, function (theme) {
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
       _this2.theme = theme;
-      return _this2.renderMain();
+      return /*#__PURE__*/React.createElement(CommonWrapper, _this2.props, _this2.renderMain);
     });
   };
 
-  _proto.renderMain = function renderMain() {
-    var _this$props = this.props,
-        children = _this$props.children,
-        action = _this$props.action,
-        onClose = _this$props.onClose,
-        rest = _objectWithoutPropertiesLoose(_this$props, ["children", "action", "onClose"]);
-
-    var link = action ? React.createElement("span", {
-      className: jsStyles.link(this.theme),
-      onClick: action.handler
-    }, action.label) : null;
-    var close = action ? React.createElement("span", {
-      className: jsStyles.closeWrapper()
-    }, React.createElement("span", {
-      className: jsStyles.close(this.theme),
-      onClick: onClose
-    }, React.createElement(CrossIcon, null))) : null;
-    return React.createElement(ZIndex, {
-      priority: "Toast",
-      className: jsStyles.wrapper()
-    }, React.createElement("div", _extends({
-      "data-tid": "ToastView__root",
-      className: jsStyles.root(this.theme)
-    }, rest), React.createElement("span", null, children), link, close));
-  };
-
   return ToastView;
-}(React.Component);
-ToastView.propTypes = {
-  /**
-   * Adds action handling and close icon for toast
-   */
+}(React.Component), _class2.propTypes = {
+  /**
+  * Adds action handling and close icon for toast
+  */
   action: shape({
     label: string.isRequired,
     handler: func.isRequired
   }),
 
-  /**
-   * Toast content
-   */
+  /**
+  * Toast content
+  */
   children: string.isRequired,
   onClose: func
-};
+}, _temp)) || _class;

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

@@ -1 +1 @@
-{"version":3,"sources":["ToastView.tsx"],"names":["React","func","shape","string","CrossIcon","ZIndex","ThemeContext","jsStyles","ToastView","theme","render","renderMain","props","children","action","onClose","rest","link","handler","label","close","closeWrapper","wrapper","root","Component","propTypes","isRequired"],"mappings":"oOAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,KAAf,EAAsBC,MAAtB,QAAoC,YAApC;;AAEA,SAASC,SAAT,QAA0B,gCAA1B;AACA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SAASC,YAAT,QAA6B,gCAA7B;;;AAGA,SAASC,QAAT,QAAyB,oBAAzB;;;;;;;;;;;;;;;;;;;AAmBA,WAAaC,SAAb;;;;;;;;;;;;;;;;AAgBUC,IAAAA,KAhBV;;AAkBSC,EAAAA,MAlBT,GAkBE,kBAAgB;AACd;AACE,0BAAC,YAAD,CAAc,QAAd;AACG,gBAAAD,KAAK,EAAI;AACR,QAAA,MAAI,CAACA,KAAL,GAAaA,KAAb;AACA,eAAO,MAAI,CAACE,UAAL,EAAP;AACD,OAJH,CADF;;;AAQD,GA3BH;;AA6BUA,EAAAA,UA7BV,GA6BE,sBAAqB;AAC4B,SAAKC,KADjC,CACXC,QADW,eACXA,QADW,CACDC,MADC,eACDA,MADC,CACOC,OADP,eACOA,OADP,CACmBC,IADnB;;AAGnB,QAAMC,IAAI,GAAGH,MAAM;AACjB,kCAAM,SAAS,EAAEP,QAAQ,CAACU,IAAT,CAAc,KAAKR,KAAnB,CAAjB,EAA4C,OAAO,EAAEK,MAAM,CAACI,OAA5D;AACGJ,IAAAA,MAAM,CAACK,KADV,CADiB;;AAIf,QAJJ;;AAMA,QAAMC,KAAK,GAAGN,MAAM;AAClB,kCAAM,SAAS,EAAEP,QAAQ,CAACc,YAAT,EAAjB;AACE,kCAAM,SAAS,EAAEd,QAAQ,CAACa,KAAT,CAAe,KAAKX,KAApB,CAAjB,EAA6C,OAAO,EAAEM,OAAtD;AACE,wBAAC,SAAD,OADF,CADF,CADkB;;;AAMhB,QANJ;;AAQA;AACE,0BAAC,MAAD,IAAQ,QAAQ,EAAC,OAAjB,EAAyB,SAAS,EAAER,QAAQ,CAACe,OAAT,EAApC;AACE,4CAAK,YAAS,iBAAd,EAAgC,SAAS,EAAEf,QAAQ,CAACgB,IAAT,CAAc,KAAKd,KAAnB,CAA3C,IAA0EO,IAA1E;AACE,wCAAOH,QAAP,CADF;AAEGI,MAAAA,IAFH;AAGGG,MAAAA,KAHH,CADF,CADF;;;;AASD,GAvDH,oBAA+BpB,KAAK,CAACwB,SAArC,EAAahB,S,CACGiB,S,GAAY,EACxB;;mEAGAX,MAAM,EAAEZ,KAAK,CAAC,EACZiB,KAAK,EAAEhB,MAAM,CAACuB,UADF,EAEZR,OAAO,EAAEjB,IAAI,CAACyB,UAFF,EAAD,CAJW,EAQxB;;6IAGAb,QAAQ,EAAEV,MAAM,CAACuB,UAXO,EAYxBX,OAAO,EAAEd,IAZe,E","sourcesContent":["import React from 'react';\r\nimport { func, shape, string } from 'prop-types';\r\n\r\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\r\nimport { ZIndex } from '../../internal/ZIndex';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nimport { jsStyles } from './ToastView.styles';\r\n\r\nexport interface ToastViewProps {\r\n  /**\r\n   * Toast content\r\n   */\r\n  children?: string;\r\n  /**\r\n   * Adds action handling and close icon for toast\r\n   */\r\n  action?: {\r\n    label: string;\r\n    handler: () => void;\r\n  } | null;\r\n  onClose?: () => void;\r\n  onMouseEnter?: () => void;\r\n  onMouseLeave?: () => void;\r\n}\r\n\r\nexport class ToastView extends React.Component<ToastViewProps> {\r\n  public static propTypes = {\r\n    /**\r\n     * Adds action handling and close icon for toast\r\n     */\r\n    action: shape({\r\n      label: string.isRequired,\r\n      handler: func.isRequired,\r\n    }),\r\n    /**\r\n     * Toast content\r\n     */\r\n    children: string.isRequired,\r\n    onClose: func,\r\n  };\r\n\r\n  private theme!: Theme;\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const { children, action, onClose, ...rest } = this.props;\r\n\r\n    const link = action ? (\r\n      <span className={jsStyles.link(this.theme)} onClick={action.handler}>\r\n        {action.label}\r\n      </span>\r\n    ) : null;\r\n\r\n    const close = action ? (\r\n      <span className={jsStyles.closeWrapper()}>\r\n        <span className={jsStyles.close(this.theme)} onClick={onClose}>\r\n          <CrossIcon />\r\n        </span>\r\n      </span>\r\n    ) : null;\r\n\r\n    return (\r\n      <ZIndex priority=\"Toast\" className={jsStyles.wrapper()}>\r\n        <div data-tid=\"ToastView__root\" className={jsStyles.root(this.theme)} {...rest}>\r\n          <span>{children}</span>\r\n          {link}\r\n          {close}\r\n        </div>\r\n      </ZIndex>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"sources":["ToastView.tsx"],"names":["React","func","shape","string","CrossIcon","ZIndex","ThemeContext","CommonWrapper","rootNode","styles","ToastView","renderMain","props","action","onClose","rest","link","theme","handler","label","close","closeWrapper","wrapper","root","setRootNode","children","render","Component","propTypes","isRequired"],"mappings":"qSAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,IAAT,EAAeC,KAAf,EAAsBC,MAAtB,QAAoC,YAApC;;AAEA,SAASC,SAAT,QAA0B,gCAA1B;AACA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAAsBC,aAAtB,QAAmE,8BAAnE;AACA,SAASC,QAAT,QAAuC,oBAAvC;;AAEA,SAASC,MAAT,QAAuB,oBAAvB;;;;;;;;;;;;;;;;;;;;AAoBA,WAAaC,SAAb,GADCF,QACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BUG,IAAAA,UA9BV,GA8BuB,UAACC,KAAD,EAAmD;AACtE,UAAQC,MAAR,GAAqCD,KAArC,CAAQC,MAAR,CAAgBC,OAAhB,GAAqCF,KAArC,CAAgBE,OAAhB,CAA4BC,IAA5B,iCAAqCH,KAArC;;AAEA,UAAMI,IAAI,GAAGH,MAAM;AACjB,oCAAM,YAAS,mBAAf,EAAmC,SAAS,EAAEJ,MAAM,CAACO,IAAP,CAAY,MAAKC,KAAjB,CAA9C,EAAuE,OAAO,EAAEJ,MAAM,CAACK,OAAvF;AACGL,MAAAA,MAAM,CAACM,KADV,CADiB;;AAIf,UAJJ;;AAMA,UAAMC,KAAK,GAAGP,MAAM;AAClB,oCAAM,SAAS,EAAEJ,MAAM,CAACY,YAAP,CAAoB,MAAKJ,KAAzB,CAAjB;AACE,oCAAM,YAAS,kBAAf,EAAkC,SAAS,EAAER,MAAM,CAACW,KAAP,CAAa,MAAKH,KAAlB,CAA7C,EAAuE,OAAO,EAAEH,OAAhF;AACE,0BAAC,SAAD,OADF,CADF,CADkB;;;AAMhB,UANJ;;AAQA;AACE,4BAAC,MAAD,IAAQ,QAAQ,EAAC,OAAjB,EAAyB,SAAS,EAAEL,MAAM,CAACa,OAAP,EAApC;AACE,8CAAK,YAAS,iBAAd,IAAoCP,IAApC,IAA0C,SAAS,EAAEN,MAAM,CAACc,IAAP,CAAY,MAAKN,KAAjB,CAArD,EAA8E,GAAG,EAAE,MAAKO,WAAxF;AACE,0CAAO,MAAKZ,KAAL,CAAWa,QAAlB,CADF;AAEGT,QAAAA,IAFH;AAGGI,QAAAA,KAHH,CADF,CADF;;;;AASD,KAxDH,uDAmBSM,MAnBT,GAmBE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACT,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBAAO,oBAAC,aAAD,EAAmB,MAAI,CAACL,KAAxB,EAAgC,MAAI,CAACD,UAArC,CAAP,CACD,CAJH,CADF,CAQD,CA5BH,oBAA+BX,KAAK,CAAC2B,SAArC,WACgBC,SADhB,GAC4B,EACxB;AACJ;AACA,KACIf,MAAM,EAAEX,KAAK,CAAC,EACZiB,KAAK,EAAEhB,MAAM,CAAC0B,UADF,EAEZX,OAAO,EAAEjB,IAAI,CAAC4B,UAFF,EAAD,CAJW,EAQxB;AACJ;AACA,KACIJ,QAAQ,EAAEtB,MAAM,CAAC0B,UAXO,EAYxBf,OAAO,EAAEb,IAZe,EAD5B","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"]}

package/components/Toast/ToastView.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-export interface ToastViewProps {
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface ToastViewProps extends CommonProps {
     /**
      * Toast content
      */
@@ -31,6 +32,7 @@ export declare class ToastView extends React.Component<ToastViewProps> {
         onClose: import("prop-types").Requireable<(...args: any[]) => any>;
     };
     private theme;
+    private setRootNode;
     render(): JSX.Element;
     private renderMain;
 }