@skbkontur/react-ui 0.0.0-ecefada396 → 0.0.0-ee57da3e1e

package/components/Toast/Toast/Toast.js

@@ -1,28 +1,38 @@
 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 { 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";
+export var ToastDataTids = {
+  toastStatic: 'StaticToast',
+  toastView: 'ToastView__root',
+  action: 'ToastView__action',
+  close: 'ToastView__close'
+};
 /**
  * Показывает уведомления.
  *
- * Доступен статический метод: `Toast.push(notification, action?)`.
+ * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.
  * Однако, при его использовании не работает кастомизация и могут быть проблемы
  * с перекрытием уведомления другими элементами страницы.
  *
  * Рекомендуется использовать Toast через `ref` (см. примеры).
  */
 
-export var Toast = /*#__PURE__*/function (_React$Component) {
+export var Toast = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Toast, _React$Component);
 
-  Toast.push = function push(notification, action) {
-    ToastStatic.push(notification, action);
+  Toast.push = function push(notification, action, showTime) {
+    ToastStatic.push(notification, action, showTime);
   };
 
   Toast.close = function close() {
@@ -33,8 +43,8 @@ export var Toast = /*#__PURE__*/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 +55,13 @@ export var Toast = /*#__PURE__*/function (_React$Component) {
       });
     };
 
+    _this.setRootRef = function (element) {
+      _this.setRootNode(element); // @ts-expect-error: See: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/31065.
+
+
+      _this.rootRef.current = element;
+    };
+
     _this._clearTimer = function () {
       if (_this._timeout) {
         clearTimeout(_this._timeout);
@@ -53,10 +70,13 @@ export var Toast = /*#__PURE__*/function (_React$Component) {
     };
 
     _this._setTimer = function () {
+      var _this$state$showTime;
+
       _this._clearTimer();
 
-      var timeOut = _this.state.action ? 7 : 3;
-      _this._timeout = window.setTimeout(_this.close, timeOut * 1000);
+      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, showTime);
     };
 
     _this._refToast = function (element) {
@@ -66,7 +86,8 @@ export var Toast = /*#__PURE__*/function (_React$Component) {
     _this.state = {
       notification: null,
       action: null,
-      id: 0
+      id: 0,
+      showTime: null
     };
     return _this;
   }
@@ -84,15 +105,17 @@ export var Toast = /*#__PURE__*/function (_React$Component) {
   * Показывает тост с `notification` в качестве сообщения.
   * Тост автоматически скрывается через 3 или 7 секунд,
   * в зависимости от наличия у него кнопки `action`.
+  * Время показа можно задать вручную, передав `showTime`.
   *
   * @public
   * @param {string} notification
   * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`
   * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler
+  * @param {number} showTime Время существования Toast в миллисекундах
   */
   ;
 
-  _proto.push = function push(notification, action) {
+  _proto.push = function push(notification, action, showTime) {
     if (this.state.notification) {
       this.close();
     }
@@ -103,7 +126,8 @@ export var Toast = /*#__PURE__*/function (_React$Component) {
       return {
         notification: notification,
         action: action,
-        id: id + 1
+        id: id + 1,
+        showTime: showTime
       };
     }, this._setTimer);
   }
@@ -142,15 +166,17 @@ export var Toast = /*#__PURE__*/function (_React$Component) {
         exit: 150
       },
       enter: !isTestEnv,
-      exit: !isTestEnv
-    }, /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement(ToastView, _extends({
+      exit: !isTestEnv,
+      nodeRef: this.rootRef
+    }, /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootRef
+    }, this.props), /*#__PURE__*/React.createElement(ToastView, _extends({
       ref: this._refToast
     }, 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","CommonWrapper","isTestEnv","styles","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":"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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';\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 */\nexport class Toast extends React.Component<ToastProps, ToastState> {\n  public static __KONTUR_REACT_UI__ = 'Toast';\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\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      >\n        <CommonWrapper {...this.props}>\n          <ToastView ref={this._refToast} {...toastProps} />\n        </CommonWrapper>\n      </CSSTransition>\n    );\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":["React","CSSTransition","TransitionGroup","RenderContainer","CommonWrapper","isTestEnv","rootNode","styles","ToastView","ToastStatic","ToastDataTids","toastStatic","toastView","action","close","Toast","push","notification","showTime","props","_timeout","rootRef","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","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  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/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?)`.
  * Однако, при его использовании не работает кастомизация и могут быть проблемы
  * с перекрытием уведомления другими элементами страницы.
  *
@@ -26,10 +33,12 @@ export interface ToastProps extends CommonProps {
  */
 export declare class Toast extends React.Component<ToastProps, ToastState> {
     static __KONTUR_REACT_UI__: string;
-    static push(notification: string, action?: Action): void;
+    private setRootNode;
+    static push(notification: string, action?: Nullable<Action>, showTime?: number): void;
     static close(): void;
     _toast: Nullable<ToastView>;
     private _timeout;
+    private rootRef;
     constructor(props: ToastProps);
     componentWillUnmount(): void;
     render(): JSX.Element;
@@ -37,18 +46,21 @@ 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
      */
     close: () => void;
     private _renderToast;
+    private setRootRef;
     private _clearTimer;
     private _setTimer;
     private _refToast;

package/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/components/Toast/Toast.styles/Toast.styles.js

@@ -8,12 +8,12 @@ export var styles = memoizeStyle({
     return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      transform: translateY(-40px);\n    "])));
   },
   enterActive: function enterActive() {
-    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n      transform: translateY(0);\n    "])));
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n      transform: translateY(0) !important;\n    "])));
   },
   exit: function exit() {
     return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      transform: translateY(0);\n      opacity: 1;\n    "])));
   },
   exitActive: function exitActive() {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      opacity: 0.01;\n      transition: opacity 0.15s ease-out;\n    "])));
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      opacity: 0.01 !important;\n      transition: opacity 0.15s ease-out;\n    "])));
   }
 });

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"],"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"]}
+{"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) !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/components/Toast/ToastStatic/ToastStatic.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Toast } from "../Toast";
+import { Toast, ToastDataTids } from "../Toast";
 export var ToastStatic = function ToastStatic() {};
 
-ToastStatic.push = function (notification, action) {
+ToastStatic.push = function (notification, action, showTime) {
   if (!ToastStatic.node) {
     ToastStatic.node = document.createElement('div');
     var _document = document,
@@ -15,21 +15,21 @@ ToastStatic.push = function (notification, action) {
 
     body.appendChild(ToastStatic.node);
     ReactDOM.render( /*#__PURE__*/React.createElement(Toast, {
-      "data-tid": "StaticToast",
+      "data-tid": ToastDataTids.toastStatic,
       ref: function ref(el) {
         return ToastStatic.instance = el;
       }
     }), ToastStatic.node, function () {
-      return ToastStatic._push(notification, action);
+      return ToastStatic._push(notification, action, showTime);
     });
   } else {
-    ToastStatic._push(notification, action);
+    ToastStatic._push(notification, action, showTime);
   }
 };
 
-ToastStatic._push = function (notification, action) {
+ToastStatic._push = function (notification, action, showTime) {
   if (ToastStatic.instance) {
-    ToastStatic.instance.push(notification, action);
+    ToastStatic.instance.push(notification, action, showTime);
   }
 };
 
@@ -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;;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,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;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;;AAgCII,I,UAhCJJ,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"]}
+{"version":3,"sources":["ToastStatic.tsx"],"names":["React","ReactDOM","Toast","ToastDataTids","ToastStatic","push","notification","action","showTime","node","document","createElement","body","Error","appendChild","render","toastStatic","el","instance","_push","close"],"mappings":"AAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,QAAP,MAAqB,WAArB;;;;AAIA,SAASC,KAAT,EAAwBC,aAAxB,QAA6C,SAA7C;;AAEA,WAAaC,WAAb,6BAAaA,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;;AAEAR,IAAAA,QAAQ,CAACc,MAAT;AACE,wBAAC,KAAD,IAAO,YAAUZ,aAAa,CAACa,WAA/B,EAA4C,GAAG,EAAE,aAACC,EAAD,UAASb,WAAW,CAACc,QAAZ,GAAuBD,EAAhC,EAAjD,GADF;AAEEb,IAAAA,WAAW,CAACK,IAFd;AAGE,wBAAML,WAAW,CAACe,KAAZ,CAAkBb,YAAlB,EAAgCC,MAAhC,EAAwCC,QAAxC,CAAN,EAHF;;AAKD,GAbD,MAaO;AACLJ,IAAAA,WAAW,CAACe,KAAZ,CAAkBb,YAAlB,EAAgCC,MAAhC,EAAwCC,QAAxC;AACD;AACF,C,CAlBUJ,W;;AAoBGe,K,GAAQ,UAACb,YAAD,EAAuBC,MAAvB,EAAkDC,QAAlD,EAAwE;AAC5F,MAAIJ,WAAW,CAACc,QAAhB,EAA0B;AACxBd,IAAAA,WAAW,CAACc,QAAZ,CAAqBb,IAArB,CAA0BC,YAA1B,EAAwCC,MAAxC,EAAgDC,QAAhD;AACD;AACF,C,CAxBUJ,W;;AA0BGgB,K,GAAQ,YAAM;AAC1B,MAAIhB,WAAW,CAACc,QAAhB,EAA0B;AACxBd,IAAAA,WAAW,CAACc,QAAZ,CAAqBE,KAArB;AACD;AACF,C,CA9BUhB,W;;;AAiCIc,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/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/components/Toast/ToastView/ToastView.js

@@ -1,14 +1,22 @@
 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 { CommonWrapper } from "../../../internal/CommonWrapper";
+import { rootNode } from "../../../lib/rootNode";
+import { isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { CloseButtonIcon } from "../../../internal/CloseButtonIcon/CloseButtonIcon";
 import { styles } from "../ToastView.styles";
-export var ToastView = /*#__PURE__*/function (_React$Component) {
+import { ToastDataTids } from "../Toast";
+export var ToastView = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(ToastView, _React$Component);
 
   function ToastView() {
@@ -19,32 +27,47 @@ export var ToastView = /*#__PURE__*/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, ["action", "onClose"]);
+          rest = _objectWithoutPropertiesLoose(props, _excluded);
 
       var link = action ? /*#__PURE__*/React.createElement("span", {
-        "data-tid": "ToastView__action",
+        "data-tid": ToastDataTids.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",
+        "data-tid": ToastDataTids.close,
         className: styles.close(_this.theme),
         onClick: onClose
       }, /*#__PURE__*/React.createElement(CrossIcon, null))) : null;
+
+      if (isTheme2022(_this.theme) && close) {
+        close = /*#__PURE__*/React.createElement("span", {
+          className: styles.closeWrapper(_this.theme)
+        }, /*#__PURE__*/React.createElement(CloseButtonIcon, {
+          "data-tid": ToastDataTids.close,
+          onClick: onClose,
+          size: parseInt(_this.theme.toastCloseSize),
+          side: 40,
+          color: _this.theme.toastCloseColor,
+          colorHover: _this.theme.toastCloseHoverColor,
+          tabbable: false
+        }));
+      }
+
       return /*#__PURE__*/React.createElement(ZIndex, {
         priority: "Toast",
-        className: styles.wrapper()
+        className: styles.wrapper(_this.theme)
       }, /*#__PURE__*/React.createElement("div", _extends({
-        "data-tid": "ToastView__root"
+        "data-tid": ToastDataTids.toastView
       }, rest, {
-        className: styles.root(_this.theme)
+        className: styles.root(_this.theme),
+        ref: _this.setRootNode
       }), /*#__PURE__*/React.createElement("span", null, _this.props.children), link, close));
     };
 
@@ -63,8 +86,7 @@ export var ToastView = /*#__PURE__*/function (_React$Component) {
   };
 
   return ToastView;
-}(React.Component);
-ToastView.propTypes = {
+}(React.Component), _class2.propTypes = {
   /**
   * Adds action handling and close icon for toast
   */
@@ -78,4 +100,4 @@ ToastView.propTypes = {
   */
   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","CommonWrapper","styles","ToastView","theme","renderMain","props","action","onClose","rest","link","handler","label","close","closeWrapper","wrapper","root","children","render","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;;AAEA,SAAsBC,aAAtB,QAAmE,8BAAnE;;AAEA,SAASC,MAAT,QAAuB,oBAAvB;;;;;;;;;;;;;;;;;;;AAmBA,WAAaC,SAAb;;;;;;;;;;;;;;;;AAgBUC,IAAAA,KAhBV;;;;;;;;;;;;;AA6BUC,IAAAA,UA7BV,GA6BuB,UAACC,KAAD,EAAmD;AAC9DC,MAAAA,MAD8D,GACjCD,KADiC,CAC9DC,MAD8D,CACtDC,OADsD,GACjCF,KADiC,CACtDE,OADsD,CAC1CC,IAD0C,iCACjCH,KADiC;;AAGtE,UAAMI,IAAI,GAAGH,MAAM;AACjB,oCAAM,YAAS,mBAAf,EAAmC,SAAS,EAAEL,MAAM,CAACQ,IAAP,CAAY,MAAKN,KAAjB,CAA9C,EAAuE,OAAO,EAAEG,MAAM,CAACI,OAAvF;AACGJ,MAAAA,MAAM,CAACK,KADV,CADiB;;AAIf,UAJJ;;AAMA,UAAMC,KAAK,GAAGN,MAAM;AAClB,oCAAM,SAAS,EAAEL,MAAM,CAACY,YAAP,CAAoB,MAAKV,KAAzB,CAAjB;AACE,oCAAM,YAAS,kBAAf,EAAkC,SAAS,EAAEF,MAAM,CAACW,KAAP,CAAa,MAAKT,KAAlB,CAA7C,EAAuE,OAAO,EAAEI,OAAhF;AACE,0BAAC,SAAD,OADF,CADF,CADkB;;;AAMhB,UANJ;;AAQA;AACE,4BAAC,MAAD,IAAQ,QAAQ,EAAC,OAAjB,EAAyB,SAAS,EAAEN,MAAM,CAACa,OAAP,EAApC;AACE,8CAAK,YAAS,iBAAd,IAAoCN,IAApC,IAA0C,SAAS,EAAEP,MAAM,CAACc,IAAP,CAAY,MAAKZ,KAAjB,CAArD;AACE,0CAAO,MAAKE,KAAL,CAAWW,QAAlB,CADF;AAEGP,QAAAA,IAFH;AAGGG,QAAAA,KAHH,CADF,CADF;;;;AASD,KAvDH,uDAkBSK,MAlBT,GAkBE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACd,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBAAO,oBAAC,aAAD,EAAmB,MAAI,CAACE,KAAxB,EAAgC,MAAI,CAACD,UAArC,CAAP,CACD,CAJH,CADF,CAQD,CA3BH,oBAA+BX,KAAK,CAACyB,SAArC,EAAahB,S,CACGiB,S,GAAY,EACxB;AACJ;AACA,KACIb,MAAM,EAAEX,KAAK,CAAC,EACZgB,KAAK,EAAEf,MAAM,CAACwB,UADF,EAEZV,OAAO,EAAEhB,IAAI,CAAC0B,UAFF,EAAD,CAJW,EAQxB;AACJ;AACA,KACIJ,QAAQ,EAAEpB,MAAM,CAACwB,UAXO,EAYxBb,OAAO,EAAEb,IAZe,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';\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\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\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)}>\n          <span>{this.props.children}</span>\n          {link}\n          {close}\n        </div>\n      </ZIndex>\n    );\n  };\n}\n"]}
+{"version":3,"sources":["ToastView.tsx"],"names":["React","func","shape","string","CrossIcon","ZIndex","ThemeContext","CommonWrapper","rootNode","isTheme2022","CloseButtonIcon","styles","ToastDataTids","ToastView","renderMain","props","action","onClose","rest","link","theme","handler","label","close","closeWrapper","parseInt","toastCloseSize","toastCloseColor","toastCloseHoverColor","wrapper","toastView","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;AACA,SAASC,WAAT,QAA4B,gCAA5B;AACA,SAASC,eAAT,QAAgC,gDAAhC;;AAEA,SAASC,MAAT,QAAuB,oBAAvB;AACA,SAASC,aAAT,QAA8B,SAA9B;;;;;;;;;;;;;;;;;;;;AAoBA,WAAaC,SAAb,GADCL,QACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BUM,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,YAAUJ,aAAa,CAACI,MAA9B,EAAsC,SAAS,EAAEL,MAAM,CAACQ,IAAP,CAAY,MAAKC,KAAjB,CAAjD,EAA0E,OAAO,EAAEJ,MAAM,CAACK,OAA1F;AACGL,MAAAA,MAAM,CAACM,KADV,CADiB;;AAIf,UAJJ;;AAMA,UAAIC,KAAK,GAAGP,MAAM;AAChB,oCAAM,SAAS,EAAEL,MAAM,CAACa,YAAP,CAAoB,MAAKJ,KAAzB,CAAjB;AACE,oCAAM,YAAUR,aAAa,CAACW,KAA9B,EAAqC,SAAS,EAAEZ,MAAM,CAACY,KAAP,CAAa,MAAKH,KAAlB,CAAhD,EAA0E,OAAO,EAAEH,OAAnF;AACE,0BAAC,SAAD,OADF,CADF,CADgB;;;AAMd,UANJ;;AAQA,UAAIR,WAAW,CAAC,MAAKW,KAAN,CAAX,IAA2BG,KAA/B,EAAsC;AACpCA,QAAAA,KAAK;AACH,sCAAM,SAAS,EAAEZ,MAAM,CAACa,YAAP,CAAoB,MAAKJ,KAAzB,CAAjB;AACE,4BAAC,eAAD;AACE,sBAAUR,aAAa,CAACW,KAD1B;AAEE,UAAA,OAAO,EAAEN,OAFX;AAGE,UAAA,IAAI,EAAEQ,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,4BAAC,MAAD,IAAQ,QAAQ,EAAC,OAAjB,EAAyB,SAAS,EAAEjB,MAAM,CAACkB,OAAP,CAAe,MAAKT,KAApB,CAApC;AACE,8CAAK,YAAUR,aAAa,CAACkB,SAA7B,IAA4CZ,IAA5C,IAAkD,SAAS,EAAEP,MAAM,CAACoB,IAAP,CAAY,MAAKX,KAAjB,CAA7D,EAAsF,GAAG,EAAE,MAAKY,WAAhG;AACE,0CAAO,MAAKjB,KAAL,CAAWkB,QAAlB,CADF;AAEGd,QAAAA,IAFH;AAGGI,QAAAA,KAHH,CADF,CADF;;;;AASD,KAxEH,uDAmBSW,MAnBT,GAmBE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACd,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+Bd,KAAK,CAACmC,SAArC,WACgBC,SADhB,GAC4B,EACxB;AACJ;AACA,KACIpB,MAAM,EAAEd,KAAK,CAAC,EACZoB,KAAK,EAAEnB,MAAM,CAACkC,UADF,EAEZhB,OAAO,EAAEpB,IAAI,CAACoC,UAFF,EAAD,CAJW,EAQxB;AACJ;AACA,KACIJ,QAAQ,EAAE9B,MAAM,CAACkC,UAXO,EAYxBpB,OAAO,EAAEhB,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';\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/components/Toast/ToastView.d.ts

@@ -32,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;
 }