@skbkontur/react-ui 0.0.0-38b6d1ada0 → 0.0.0-4bd3603e53

package/components/Toast/Toast/Toast.js

@@ -0,0 +1,182 @@
+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 через `ref` (см. примеры).
+ */
+
+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.close = function close() {
+    ToastStatic.close();
+  };
+
+  function Toast(props) {
+    var _this;
+
+    _this = _React$Component.call(this, props) || this;
+    _this._timeout = null;
+    _this.rootRef = /*#__PURE__*/React.createRef();
+
+    _this.close = function () {
+      safelyCall(_this.props.onClose, _this.state.notification, _this.state.action);
+
+      _this.setState({
+        notification: null,
+        action: null
+      });
+    };
+
+    _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);
+        _this._timeout = null;
+      }
+    };
+
+    _this._setTimer = function () {
+      _this._clearTimer();
+
+      var timeOut = _this.state.action ? 7 : 3;
+      _this._timeout = window.setTimeout(_this.close, timeOut * 1000);
+    };
+
+    _this._refToast = function (element) {
+      _this._toast = element;
+    };
+
+    _this.state = {
+      notification: null,
+      action: null,
+      id: 0
+    };
+    return _this;
+  }
+
+  var _proto = Toast.prototype;
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    this._clearTimer();
+  };
+
+  _proto.render = function render() {
+    return /*#__PURE__*/React.createElement(RenderContainer, null, /*#__PURE__*/React.createElement(TransitionGroup, null, this._renderToast()));
+  }
+  /**
+  * Показывает тост с `notification` в качестве сообщения.
+  * Тост автоматически скрывается через 3 или 7 секунд,
+  * в зависимости от наличия у него кнопки `action`.
+  *
+  * @public
+  * @param {string} notification
+  * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`
+  * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler
+  */
+  ;
+
+  _proto.push = function push(notification, action) {
+    if (this.state.notification) {
+      this.close();
+    }
+
+    safelyCall(this.props.onPush, notification, action);
+    this.setState(function (_ref) {
+      var id = _ref.id;
+      return {
+        notification: notification,
+        action: action,
+        id: id + 1
+      };
+    }, this._setTimer);
+  }
+  /**
+  * @public
+  */
+  ;
+
+  _proto._renderToast = function _renderToast() {
+    var _this$state = this.state,
+        notification = _this$state.notification,
+        action = _this$state.action,
+        id = _this$state.id;
+
+    if (!notification) {
+      return null;
+    }
+
+    var toastProps = {
+      onMouseEnter: this._clearTimer,
+      onMouseLeave: this._setTimer,
+      onClose: this.close,
+      children: notification,
+      action: action
+    };
+    return /*#__PURE__*/React.createElement(CSSTransition, {
+      key: id,
+      classNames: {
+        enter: styles.enter(),
+        enterActive: styles.enterActive(),
+        exit: styles.exit(),
+        exitActive: styles.exitActive()
+      },
+      timeout: {
+        enter: 200,
+        exit: 150
+      },
+      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))));
+  };
+
+  return Toast;
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Toast', _temp)) || _class;
+
+function safelyCall(fn) {
+  if (fn) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
+    fn.apply(void 0, args);
+  }
+}

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

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

package/components/Toast/Toast/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Toast/Toast.js",
+  "module": "Toast",
+  "types": "../Toast.d.ts",
+  "sideEffects": false
+}

package/components/Toast/Toast.d.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import ToastView from './ToastView';
-import './Toast.module.less';
+import React from 'react';
 import { Nullable } from '../../typings/utility-types';
+import { CommonProps } from '../../internal/CommonWrapper';
+import { ToastView } from './ToastView';
 export interface Action {
     label: string;
     handler: () => void;
@@ -11,35 +11,45 @@ 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;
 }
+export declare const ToastDataTids: {
+    readonly toastStatic: "StaticToast";
+    readonly toastView: "ToastView__root";
+    readonly action: "ToastView__action";
+    readonly close: "ToastView__close";
+};
 /**
- * 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` (см. примеры).
  */
-declare class Toast extends React.Component<ToastProps, ToastState> {
+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;
     /**
@@ -47,8 +57,8 @@ declare class Toast extends React.Component<ToastProps, ToastState> {
      */
     close: () => void;
     private _renderToast;
+    private setRootRef;
     private _clearTimer;
     private _setTimer;
     private _refToast;
 }
-export default Toast;

package/components/Toast/Toast.md

@@ -0,0 +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 />;
+```

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

@@ -0,0 +1,19 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  enter: function enter() {
+    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) !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 !important;\n      transition: opacity 0.15s ease-out;\n    "])));
+  }
+});

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

@@ -0,0 +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) !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/Toast.styles/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Toast/Toast.styles.js",
+  "module": "Toast.styles",
+  "types": "../Toast.styles.d.ts",
+  "sideEffects": false
+}

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

@@ -0,0 +1,6 @@
+export declare const styles: {
+    enter(): string;
+    enterActive(): string;
+    exit(): string;
+    exitActive(): string;
+};

package/components/Toast/ToastStatic/ToastStatic.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Toast, ToastDataTids } from "../Toast";
+export var ToastStatic = function ToastStatic() {};
+
+ToastStatic.push = function (notification, action) {
+  if (!ToastStatic.node) {
+    ToastStatic.node = document.createElement('div');
+    var _document = document,
+        body = _document.body;
+
+    if (!body) {
+      throw Error('There is no "body" element in "document"');
+    }
+
+    body.appendChild(ToastStatic.node);
+    ReactDOM.render( /*#__PURE__*/React.createElement(Toast, {
+      "data-tid": ToastDataTids.toastStatic,
+      ref: function ref(el) {
+        return ToastStatic.instance = el;
+      }
+    }), ToastStatic.node, function () {
+      return ToastStatic._push(notification, action);
+    });
+  } else {
+    ToastStatic._push(notification, action);
+  }
+};
+
+ToastStatic._push = function (notification, action) {
+  if (ToastStatic.instance) {
+    ToastStatic.instance.push(notification, action);
+  }
+};
+
+ToastStatic.close = function () {
+  if (ToastStatic.instance) {
+    ToastStatic.instance.close();
+  }
+};
+
+ToastStatic.instance = null;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ToastStatic.tsx"],"names":["React","ReactDOM","Toast","ToastDataTids","ToastStatic","push","notification","action","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,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;;AAEAP,IAAAA,QAAQ,CAACa,MAAT;AACE,wBAAC,KAAD,IAAO,YAAUX,aAAa,CAACY,WAA/B,EAA4C,GAAG,EAAE,aAACC,EAAD,UAASZ,WAAW,CAACa,QAAZ,GAAuBD,EAAhC,EAAjD,GADF;AAEEZ,IAAAA,WAAW,CAACI,IAFd;AAGE,wBAAMJ,WAAW,CAACc,KAAZ,CAAkBZ,YAAlB,EAAgCC,MAAhC,CAAN,EAHF;;AAKD,GAbD,MAaO;AACLH,IAAAA,WAAW,CAACc,KAAZ,CAAkBZ,YAAlB,EAAgCC,MAAhC;AACD;AACF,C,CAlBUH,W;;AAoBGc,K,GAAQ,UAACZ,YAAD,EAAuBC,MAAvB,EAA2C;AAC/D,MAAIH,WAAW,CAACa,QAAhB,EAA0B;AACxBb,IAAAA,WAAW,CAACa,QAAZ,CAAqBZ,IAArB,CAA0BC,YAA1B,EAAwCC,MAAxC;AACD;AACF,C,CAxBUH,W;;AA0BGe,K,GAAQ,YAAM;AAC1B,MAAIf,WAAW,CAACa,QAAhB,EAA0B;AACxBb,IAAAA,WAAW,CAACa,QAAZ,CAAqBE,KAArB;AACD;AACF,C,CA9BUf,W;;;AAiCIa,Q,GAA4B,I","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Nullable } from '../../typings/utility-types';\n\nimport { Toast, Action, ToastDataTids } 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={ToastDataTids.toastStatic} 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/ToastStatic/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Toast/ToastStatic.js",
+  "module": "ToastStatic",
+  "types": "../ToastStatic.d.ts",
+  "sideEffects": false
+}

package/components/Toast/ToastStatic.d.ts

@@ -1,9 +1,8 @@
 import { Action } from './Toast';
-declare class ToastStatic {
+export declare class ToastStatic {
     static push: (notification: string, action?: Action | undefined) => void;
     static _push: (notification: string, action?: Action | undefined) => void;
     static close: () => void;
     private static node;
     private static instance;
 }
-export default ToastStatic;

package/components/Toast/ToastView/ToastView.js

@@ -0,0 +1,86 @@
+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 { styles } from "../ToastView.styles";
+import { ToastDataTids } from "../Toast";
+export var ToastView = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(ToastView, _React$Component);
+
+  function ToastView() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+
+    _this.renderMain = function (props) {
+      var action = props.action,
+          onClose = props.onClose,
+          rest = _objectWithoutPropertiesLoose(props, _excluded);
+
+      var link = action ? /*#__PURE__*/React.createElement("span", {
+        "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": ToastDataTids.close,
+        className: styles.close(_this.theme),
+        onClick: onClose
+      }, /*#__PURE__*/React.createElement(CrossIcon, null))) : null;
+      return /*#__PURE__*/React.createElement(ZIndex, {
+        priority: "Toast",
+        className: styles.wrapper(_this.theme)
+      }, /*#__PURE__*/React.createElement("div", _extends({
+        "data-tid": ToastDataTids.toastView
+      }, rest, {
+        className: styles.root(_this.theme),
+        ref: _this.setRootNode
+      }), /*#__PURE__*/React.createElement("span", null, _this.props.children), link, close));
+    };
+
+    return _this;
+  }
+
+  var _proto = ToastView.prototype;
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      _this2.theme = theme;
+      return /*#__PURE__*/React.createElement(CommonWrapper, _this2.props, _this2.renderMain);
+    });
+  };
+
+  return ToastView;
+}(React.Component), _class2.propTypes = {
+  /**
+  * Adds action handling and close icon for toast
+  */
+  action: shape({
+    label: string.isRequired,
+    handler: func.isRequired
+  }),
+
+  /**
+  * Toast content
+  */
+  children: string.isRequired,
+  onClose: func
+}, _temp)) || _class;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["ToastView.tsx"],"names":["React","func","shape","string","CrossIcon","ZIndex","ThemeContext","CommonWrapper","rootNode","styles","ToastDataTids","ToastView","renderMain","props","action","onClose","rest","link","theme","handler","label","close","closeWrapper","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;;AAEA,SAASC,MAAT,QAAuB,oBAAvB;AACA,SAASC,aAAT,QAA8B,SAA9B;;;;;;;;;;;;;;;;;;;;AAoBA,WAAaC,SAAb,GADCH,QACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BUI,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,UAAMC,KAAK,GAAGP,MAAM;AAClB,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,CADkB;;;AAMhB,UANJ;;AAQA;AACE,4BAAC,MAAD,IAAQ,QAAQ,EAAC,OAAjB,EAAyB,SAAS,EAAEN,MAAM,CAACc,OAAP,CAAe,MAAKL,KAApB,CAApC;AACE,8CAAK,YAAUR,aAAa,CAACc,SAA7B,IAA4CR,IAA5C,IAAkD,SAAS,EAAEP,MAAM,CAACgB,IAAP,CAAY,MAAKP,KAAjB,CAA7D,EAAsF,GAAG,EAAE,MAAKQ,WAAhG;AACE,0CAAO,MAAKb,KAAL,CAAWc,QAAlB,CADF;AAEGV,QAAAA,IAFH;AAGGI,QAAAA,KAHH,CADF,CADF;;;;AASD,KAxDH,uDAmBSO,MAnBT,GAmBE,kBAAgB,mBACd,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACV,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+BZ,KAAK,CAAC6B,SAArC,WACgBC,SADhB,GAC4B,EACxB;AACJ;AACA,KACIhB,MAAM,EAAEZ,KAAK,CAAC,EACZkB,KAAK,EAAEjB,MAAM,CAAC4B,UADF,EAEZZ,OAAO,EAAElB,IAAI,CAAC8B,UAFF,EAAD,CAJW,EAQxB;AACJ;AACA,KACIJ,QAAQ,EAAExB,MAAM,CAAC4B,UAXO,EAYxBhB,OAAO,EAAEd,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';\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    const 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    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/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Toast/ToastView.js",
+  "module": "ToastView",
+  "types": "../ToastView.d.ts",
+  "sideEffects": false
+}

package/components/Toast/ToastView.d.ts

@@ -1,33 +1,38 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { Nullable } from '../../typings/utility-types';
-export interface ToastViewProps {
+import React from 'react';
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface ToastViewProps extends CommonProps {
+    /**
+     * Toast content
+     */
     children?: string;
-    action?: Nullable<{
+    /**
+     * Adds action handling and close icon for toast
+     */
+    action?: {
         label: string;
         handler: () => void;
-    }>;
+    } | null;
     onClose?: () => void;
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;
 }
-declare class ToastView extends React.Component<ToastViewProps> {
+export declare class ToastView extends React.Component<ToastViewProps> {
     static propTypes: {
         /**
          * Adds action handling and close icon for toast
          */
-        action: PropTypes.Requireable<PropTypes.InferProps<{
-            label: PropTypes.Validator<string>;
-            handler: PropTypes.Validator<(...args: any[]) => any>;
+        action: import("prop-types").Requireable<import("prop-types").InferProps<{
+            label: import("prop-types").Validator<string>;
+            handler: import("prop-types").Validator<(...args: any[]) => any>;
         }>>;
         /**
          * Toast content
          */
-        children: PropTypes.Validator<string>;
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
+        children: import("prop-types").Validator<string>;
+        onClose: import("prop-types").Requireable<(...args: any[]) => any>;
     };
     private theme;
+    private setRootNode;
     render(): JSX.Element;
     private renderMain;
 }
-export default ToastView;

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

@@ -0,0 +1,44 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+
+var getVerticalPaddingsWithCompensation = function getVerticalPaddingsWithCompensation(theme) {
+  var toastPaddingY = theme.toastPaddingY,
+      fontFamilyCompensationBaseline = theme.fontFamilyCompensationBaseline;
+  var paddingY = parseInt(toastPaddingY);
+  var compensation = parseInt(fontFamilyCompensationBaseline);
+  return [paddingY - compensation + "px", paddingY + compensation + "px"];
+};
+
+export var styles = memoizeStyle({
+  root: function root(t) {
+    var _getVerticalPaddingsW = getVerticalPaddingsWithCompensation(t),
+        paddingTop = _getVerticalPaddingsW[0],
+        paddingBottom = _getVerticalPaddingsW[1];
+
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      background: ", ";\n      border-radius: ", ";\n      border: ", ";\n      color: ", ";\n      display: inline-flex;\n      font-size: ", ";\n      line-height: ", ";\n      opacity: 1;\n      padding: ", " ", " ", ";\n      position: relative;\n      top: ", ";\n    "])), t.toastBg, t.toastBorderRadius, t.toastBorder, t.toastColor, t.toastFontSize, t.toastLineHeight, paddingTop, t.toastPaddingX, paddingBottom, t.toastTop);
+  },
+  wrapper: function wrapper(t) {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n      border-radius: ", ";\n    "])), t.toastBorderRadius);
+  },
+  closeWrapper: function closeWrapper(t) {
+    var _getVerticalPaddingsW2 = getVerticalPaddingsWithCompensation(t),
+        paddingTop = _getVerticalPaddingsW2[0],
+        paddingBottom = _getVerticalPaddingsW2[1];
+
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      display: flex;\n      margin: -", " -", " -", " -", ";\n    "])), paddingTop, t.toastPaddingX, paddingBottom, t.toastClosePadding);
+  },
+  link: function link(t) {
+    var _getVerticalPaddingsW3 = getVerticalPaddingsWithCompensation(t),
+        paddingTop = _getVerticalPaddingsW3[0],
+        paddingBottom = _getVerticalPaddingsW3[1];
+
+    var marginRight = Math.round(parseInt(t.toastPaddingX) * 1.5) + "px";
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n\n      margin: -", " ", " -", " ", ";\n\n      padding: ", " 0 ", ";\n\n      &:hover {\n        text-decoration: underline;\n      }\n    "])), t.toastLinkColor, paddingTop, marginRight, paddingBottom, t.toastPaddingX, paddingTop, paddingBottom);
+  },
+  close: function close(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      box-sizing: content-box !important; // fix \"reset.css\" problem\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      height: ", ";\n      line-height: 0;\n      padding: ", ";\n      text-align: center;\n      width: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])), t.toastCloseColor, t.toastCloseSize, t.toastClosePadding, t.toastCloseSize, t.toastCloseHoverColor);
+  }
+});