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

package/components/Toast/Toast/Toast.js

@@ -0,0 +1,163 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+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 { styles } from "../Toast.styles";
+import { ToastView } from "../ToastView";
+import { ToastStatic } from "../ToastStatic";
+/**
+ * Показывает уведомления.
+ *
+ * Доступен статический метод: `Toast.push(notification, action?)`.
+ * Однако, при его использовании не работает кастомизация и могут быть проблемы
+ * с перекрытием уведомления другими элементами страницы.
+ *
+ * Рекомендуется использовать Toast через `ref` (см. примеры).
+ */
+
+export var Toast = /*#__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._toast = void 0;
+    _this._timeout = null;
+
+    _this.close = function () {
+      safelyCall(_this.props.onClose, _this.state.notification, _this.state.action);
+
+      _this.setState({
+        notification: null,
+        action: null
+      });
+    };
+
+    _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
+    }, /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement(ToastView, _extends({
+      ref: this._refToast
+    }, toastProps))));
+  };
+
+  return Toast;
+}(React.Component);
+Toast.__KONTUR_REACT_UI__ = 'Toast';
+
+function safelyCall(fn) {
+  if (fn) {
+    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
+    fn.apply(void 0, args);
+  }
+}

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

@@ -0,0 +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":"gIAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,SAASC,aAAT,EAAwBC,eAAxB,QAA+C,wBAA/C;;AAEA,SAASC,eAAT,QAAgC,gCAAhC;;AAEA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,SAAT,QAA0B,8BAA1B;;AAEA,SAASC,MAAT,QAAuB,gBAAvB;AACA,SAASC,SAAT,QAA0C,aAA1C;AACA,SAASC,WAAT,QAA4B,eAA5B;;;;;;;;;;;;;;;;;;AAkBA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CxBH,IAAAA,KA5CwB,GA4ChB,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,KA/C8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuFvBS,IAAAA,WAvFuB,GAuFT,YAAM;AAC1B,UAAI,MAAKL,QAAT,EAAmB;AACjBM,QAAAA,YAAY,CAAC,MAAKN,QAAN,CAAZ;AACA,cAAKA,QAAL,GAAgB,IAAhB;AACD;AACF,KA5F8B;;AA8FvBO,IAAAA,SA9FuB,GA8FX,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,KApG8B;;AAsGvBG,IAAAA,SAtGuB,GAsGX,UAACC,OAAD,EAAwB;AAC1C,YAAKb,MAAL,GAAca,OAAd;AACD,KAxG8B,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,oBACE,oBAAC,eAAD,qBACE,oBAAC,eAAD,QAAkB,KAAKC,YAAL,EAAlB,CADF,CADF,CAKD,CAjCH,CAmCE;AACF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,KA5CA,QA6CStB,IA7CT,GA6CE,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,CArDH,CAuDE;AACF;AACA,KAzDA,QA+DUS,YA/DV,GA+DE,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,oBACE,oBAAC,aAAD,IACE,GAAG,EAAEiB,EADP,EAEE,UAAU,EAAE,EACVS,KAAK,EAAEhC,MAAM,CAACgC,KAAP,EADG,EAEVC,WAAW,EAAEjC,MAAM,CAACiC,WAAP,EAFH,EAGVC,IAAI,EAAElC,MAAM,CAACkC,IAAP,EAHI,EAIVC,UAAU,EAAEnC,MAAM,CAACmC,UAAP,EAJF,EAFd,EAQE,OAAO,EAAE,EACPH,KAAK,EAAE,GADA,EAEPE,IAAI,EAAE,GAFC,EARX,EAYE,KAAK,EAAE,CAACnC,SAZV,EAaE,IAAI,EAAE,CAACA,SAbT,iBAeE,oBAAC,aAAD,EAAmB,KAAKS,KAAxB,eACE,oBAAC,SAAD,aAAW,GAAG,EAAE,KAAKa,SAArB,IAAoCO,UAApC,EADF,CAfF,CADF,CAqBD,CAnGH,gBAA2BlC,KAAK,CAAC0C,SAAjC,EAAajC,K,CACGkC,mB,GAAsB,O,CAwHtC,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';\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"]}

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,53 +1,55 @@
-import * as React from 'react';
-import ToastView from './ToastView';
-import './Toast.less';
-import { Nullable } from '../../typings/utility-types';
-export interface Action {
-    label: string;
-    handler: () => void;
-}
-export interface ToastState {
-    notification: Nullable<string>;
-    action: Nullable<Action>;
-    id: number;
-}
-export interface ToastProps {
-    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})`
- */
-declare class Toast extends React.Component<ToastProps, ToastState> {
-    static push(notification: string, action?: Action): void;
-    static close(): void;
-    _toast: Nullable<ToastView>;
-    private _timeout;
-    constructor(props: ToastProps);
-    componentWillUnmount(): void;
-    render(): JSX.Element;
-    /**
-     * Показывает тост с `notification` в качестве сообщения.
-     *
-     * `action` опциональный параметр формата `{ label: string, handler: function }` добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler
-     * @public
-     * @param notification
-     * @param action
-     */
-    push(notification: string, action?: Action): void;
-    /**
-     * @public
-     */
-    close: () => void;
-    private _renderToast;
-    private _clearTimer;
-    private _setTimer;
-    private _refToast;
-}
-export default Toast;
+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;
+}
+export interface ToastState {
+    notification: Nullable<string>;
+    action: Nullable<Action>;
+    id: number;
+}
+export interface ToastProps extends CommonProps {
+    onPush?: (notification: string, action?: Action) => void;
+    onClose?: (notification: string, action?: Action) => void;
+}
+/**
+ * Показывает уведомления.
+ *
+ * Доступен статический метод: `Toast.push(notification, action?)`.
+ * Однако, при его использовании не работает кастомизация и могут быть проблемы
+ * с перекрытием уведомления другими элементами страницы.
+ *
+ * Рекомендуется использовать Toast через `ref` (см. примеры).
+ */
+export declare class Toast extends React.Component<ToastProps, ToastState> {
+    static __KONTUR_REACT_UI__: string;
+    static push(notification: string, action?: Action): void;
+    static close(): void;
+    _toast: Nullable<ToastView>;
+    private _timeout;
+    constructor(props: ToastProps);
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+    /**
+     * Показывает тост с `notification` в качестве сообщения.
+     * Тост автоматически скрывается через 3 или 7 секунд,
+     * в зависимости от наличия у него кнопки `action`.
+     *
+     * @public
+     * @param {string} notification
+     * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`
+     * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler
+     */
+    push(notification: string, action?: Action): void;
+    /**
+     * @public
+     */
+    close: () => void;
+    private _renderToast;
+    private _clearTimer;
+    private _setTimer;
+    private _refToast;
+}

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);\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    "])));
+  }
+});

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);\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/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,43 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Toast } 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": "StaticToast",
+      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.node = void 0;
+ToastStatic.instance = null;

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

@@ -0,0 +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"]}

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 {
-    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;
+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 close: () => void;
+    private static node;
+    private static instance;
+}

package/components/Toast/ToastView/ToastView.js

@@ -0,0 +1,81 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+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 { styles } from "../ToastView.styles";
+export var ToastView = /*#__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.theme = void 0;
+
+    _this.renderMain = function (props) {
+      var action = props.action,
+          onClose = props.onClose,
+          rest = _objectWithoutPropertiesLoose(props, ["action", "onClose"]);
+
+      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)
+      }), /*#__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);
+ToastView.propTypes = {
+  /**
+  * Adds action handling and close icon for toast
+  */
+  action: shape({
+    label: string.isRequired,
+    handler: func.isRequired
+  }),
+
+  /**
+  * Toast content
+  */
+  children: string.isRequired,
+  onClose: func
+};

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

@@ -0,0 +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"]}

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