@skbkontur/react-ui 1.12.1 → 2.0.0-beta.4

package/components/Toast/Toast.d.ts

@@ -1,54 +1,98 @@
-import * as React from 'react';
-import ToastView from './ToastView';
-import './Toast.module.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 __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` в качестве сообщения.
-     *
-     * `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 type { AriaAttributes } from 'react';
+import React from 'react';
+import type { ThemeIn } from '../../lib/theming/Theme.js';
+import type { Nullable } from '../../typings/utility-types.js';
+import type { CommonProps } from '../../internal/CommonWrapper/index.js';
+import type { TGetRootNode } from '../../lib/rootNode/index.js';
+import { ToastView } from './ToastView.js';
+export interface Action {
+    label: string;
+    handler: () => void;
+    'aria-label'?: string;
+}
+/**
+ * Состояния тоста:
+ *
+ * - default стиль для отображения по умолчанию
+ * - error стиль для отображения ошибок
+ **/
+export type ToastUse = 'default' | 'error';
+export interface ToastState {
+    notification: Nullable<React.ReactNode>;
+    action: Nullable<Action>;
+    id: number;
+    showTime: Nullable<number>;
+    showCloseIcon?: boolean;
+    currentUse: ToastUse;
+}
+export interface ToastProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {
+    /** Задает функцию, которая вызывается при возникновении тоста. */
+    onPush?: (notification: string, action?: Action) => void;
+    /** Задает функцию, которая вызывается при закрытии тоста. */
+    onClose?: (notification: string, action?: Action) => void;
+    /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */
+    theme?: ThemeIn;
+}
+/** Объект с конфигурацией отображения Toast-а */
+export interface ToastPushConfig {
+    action?: Nullable<Action>;
+    showTime?: number;
+    showCloseIcon?: boolean;
+    /**
+     * Определяет стили для тоста.
+     *
+     * - default стиль для отображения по умолчанию
+     * - error стиль для отображения ошибок
+     *
+     * По умолчанию будет использован стиль default.
+     **/
+    use?: ToastUse;
+}
+export type ToastPushApi = (notification: React.ReactNode, config?: ToastPushConfig) => void;
+export type ToastClose = () => void;
+export declare const ToastDataTids: {
+    readonly toastStatic: "StaticToast";
+    readonly toastView: "ToastView__root";
+    readonly action: "ToastView__action";
+    readonly close: "ToastView__close";
+};
+/**
+ * `Toast` — это короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его команды.
+ * Результат может быть положительным, отрицательным или нейтральным.
+ *
+ */
+export declare class Toast extends React.Component<ToastProps, ToastState> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    getRootNode: TGetRootNode;
+    private setRootNode;
+    private styles;
+    private emotion;
+    private theme;
+    _toast: Nullable<ToastView>;
+    private _timeout;
+    private rootRef;
+    constructor(props: ToastProps);
+    componentWillUnmount(): void;
+    render(): React.JSX.Element;
+    /**
+     * Показывает тост с `notification` в качестве сообщения.
+     * Тост автоматически скрывается через 3 или 7 секунд,
+     * в зависимости от наличия у него кнопки `action` внутри config-а.
+     * Время показа можно задать вручную, передав `showTime` внутри config-а.
+     *
+     * @public
+     * @param {React.ReactNode} notification
+     * @param {ToastPushConfig} config объект с конфигурацией отображения компонента Toast
+     */
+    push: ToastPushApi;
+    /**
+     * @public
+     */
+    close: () => void;
+    private _renderToast;
+    private setRootRef;
+    private _clearTimer;
+    private _setTimer;
+    private _refToast;
+}

package/components/Toast/Toast.js

@@ -1,113 +1,184 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = tslib_1.__importStar(require("react"));
-var RenderContainer_1 = tslib_1.__importDefault(require("../RenderContainer"));
-var react_transition_group_1 = require("react-transition-group");
-var ToastView_1 = tslib_1.__importDefault(require("./ToastView"));
-var ToastStatic_1 = tslib_1.__importDefault(require("./ToastStatic"));
-require("./Toast.module.css");
-/**
- * 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})`
- */
-var Toast = /** @class */function (_super) {
-  tslib_1.__extends(Toast, _super);
-  function Toast(props) {
-    var _this = _super.call(this, props) || this;
-    _this._timeout = null;
-    /**
-     * @public
-     */
-    _this.close = function () {
-      safelyCall(_this.props.onClose, _this.state.notification, _this.state.action);
-      _this.setState({ notification: null, action: null });
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
-    _this._clearTimer = function () {
-      if (_this._timeout) {
-        clearTimeout(_this._timeout);
-        _this._timeout = null;
-      }
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
     };
-    _this._setTimer = function () {
-      _this._clearTimer();
-      var timeOut = _this.state.action ? 7 : 3;
-      _this._timeout = window.setTimeout(_this.close, timeOut * 1000);
+    return __assign.apply(this, arguments);
+};
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import React from 'react';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import { ThemeFactory } from '../../lib/theming/ThemeFactory.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { RenderContainer } from '../../internal/RenderContainer/index.js';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { isTestEnv } from '../../lib/currentEnvironment.js';
+import { rootNode } from '../../lib/rootNode/index.js';
+import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
+import { getStyles } from './Toast.styles.js';
+import { ToastView } from './ToastView.js';
+export var ToastDataTids = {
+    toastStatic: 'StaticToast',
+    toastView: 'ToastView__root',
+    action: 'ToastView__action',
+    close: 'ToastView__close',
+};
+/**
+ * `Toast` — это короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его команды.
+ * Результат может быть положительным, отрицательным или нейтральным.
+ *
+ */
+var Toast = /** @class */ (function (_super) {
+    __extends(Toast, _super);
+    function Toast(props) {
+        var _this = _super.call(this, props) || this;
+        _this.rootRef = React.createRef();
+        /**
+         * Показывает тост с `notification` в качестве сообщения.
+         * Тост автоматически скрывается через 3 или 7 секунд,
+         * в зависимости от наличия у него кнопки `action` внутри config-а.
+         * Время показа можно задать вручную, передав `showTime` внутри config-а.
+         *
+         * @public
+         * @param {React.ReactNode} notification
+         * @param {ToastPushConfig} config объект с конфигурацией отображения компонента Toast
+         */
+        _this.push = function (notification, config) {
+            if (_this.state.notification) {
+                _this.close();
+            }
+            safelyCall(_this.props.onPush, notification, config === null || config === void 0 ? void 0 : config.action);
+            _this.setState(function (_a) {
+                var _b;
+                var id = _a.id;
+                return ({
+                    notification: notification,
+                    action: config === null || config === void 0 ? void 0 : config.action,
+                    id: id + 1,
+                    showTime: config === null || config === void 0 ? void 0 : config.showTime,
+                    showCloseIcon: config === null || config === void 0 ? void 0 : config.showCloseIcon,
+                    currentUse: (_b = config === null || config === void 0 ? void 0 : config.use) !== null && _b !== void 0 ? _b : 'default',
+                });
+            }, _this._setTimer);
+        };
+        /**
+         * @public
+         */
+        _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 () {
+            var _a;
+            _this._clearTimer();
+            var showTime = _this.state.action ? 7000 : 3000;
+            showTime = (_a = _this.state.showTime) !== null && _a !== void 0 ? _a : showTime;
+            _this._timeout = setTimeout(_this.close, showTime);
+        };
+        _this._refToast = function (element) {
+            _this._toast = element;
+        };
+        _this.state = {
+            notification: null,
+            action: null,
+            id: 0,
+            showTime: null,
+            showCloseIcon: false,
+            currentUse: 'default',
+        };
+        return _this;
+    }
+    Toast.prototype.componentWillUnmount = function () {
+        this._clearTimer();
     };
-    _this._refToast = function (element) {
-      _this._toast = element;
+    Toast.prototype.render = function () {
+        var _this = this;
+        this.styles = getStyles(this.emotion);
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = _this.props.theme ? ThemeFactory.create(_this.props.theme, theme) : theme;
+            return (React.createElement(ThemeContext.Provider, { value: _this.theme },
+                React.createElement(RenderContainer, null,
+                    React.createElement(TransitionGroup, null, _this._renderToast()))));
+        }));
     };
-    _this.state = {
-      notification: null,
-      action: null,
-      id: 0 };
-
-    return _this;
-  }
-  Toast.push = function (notification, action) {
-    ToastStatic_1["default"].push(notification, action);
-  };
-  Toast.close = function () {
-    ToastStatic_1["default"].close();
-  };
-  Toast.prototype.componentWillUnmount = function () {
-    this._clearTimer();
-  };
-  Toast.prototype.render = function () {
-    return React.createElement(RenderContainer_1["default"], null,
-    React.createElement(react_transition_group_1.TransitionGroup, null, this._renderToast()));
-  };
-  /**
-   * Показывает тост с `notification` в качестве сообщения.
-   *
-   * `action` опциональный параметр формата `{ label: string, handler: function }` добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler
-   * @public
-   * @param notification
-   * @param action
-   */
-  Toast.prototype.push = function (notification, action) {
-    if (this.state.notification) {
-      this.close();
+    Toast.prototype._renderToast = function () {
+        var _a = this.state, notification = _a.notification, action = _a.action, id = _a.id, showCloseIcon = _a.showCloseIcon, currentUse = _a.currentUse;
+        if (!notification) {
+            return null;
+        }
+        var toastProps = {
+            onMouseEnter: this._clearTimer,
+            onMouseLeave: this._setTimer,
+            onClose: this.close,
+            children: notification,
+            'aria-label': this.props['aria-label'],
+            action: action,
+            showCloseIcon: showCloseIcon,
+            use: currentUse,
+        };
+        return (React.createElement(CSSTransition, { key: id, classNames: {
+                enter: this.styles.enter(),
+                enterActive: this.styles.enterActive(),
+                exit: this.styles.exit(),
+                exitActive: this.styles.exitActive(),
+            }, timeout: {
+                enter: 200,
+                exit: 150,
+            }, enter: !isTestEnv, exit: !isTestEnv, nodeRef: this.rootRef },
+            React.createElement(CommonWrapper, __assign({ rootNodeRef: this.setRootRef }, this.props),
+                React.createElement(ToastView, __assign({ ref: this._refToast }, toastProps)))));
+    };
+    Toast.__KONTUR_REACT_UI__ = 'Toast';
+    Toast.displayName = 'Toast';
+    Toast = __decorate([
+        withRenderEnvironment,
+        rootNode
+    ], Toast);
+    return Toast;
+}(React.Component));
+export { Toast };
+function safelyCall(fn) {
+    var args = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        args[_i - 1] = arguments[_i];
     }
-    safelyCall(this.props.onPush, notification, action);
-    this.setState(function (_a) {
-      var id = _a.id;
-      return { notification: notification, action: action, id: id + 1 };
-    }, this._setTimer);
-  };
-  Toast.prototype._renderToast = function () {
-    var _a = this.state,notification = _a.notification,action = _a.action,id = _a.id;
-    if (!notification) {
-      return null;
+    if (fn) {
+        fn.apply(void 0, args);
     }
-    var toastProps = {
-      onMouseEnter: this._clearTimer,
-      onMouseLeave: this._setTimer,
-      onClose: this.close,
-      children: notification,
-      action: action };
-
-    return React.createElement(react_transition_group_1.CSSTransition, { key: id, classNames: "slide-and-fade", timeout: {
-        enter: 200,
-        exit: 150 } },
-
-    React.createElement(ToastView_1["default"], tslib_1.__assign({ ref: this._refToast }, toastProps)));
-  };
-  Toast.__KONTUR_REACT_UI__ = 'Toast';
-  return Toast;
-}(React.Component);
-exports["default"] = Toast;
-function safelyCall(fn) {
-  var args = [];
-  for (var _i = 1; _i < arguments.length; _i++) {
-    args[_i - 1] = arguments[_i];
-  }
-  if (fn) {
-    fn.apply(void 0, args);
-  }
-}
+}
+//# sourceMappingURL=Toast.js.map

package/components/Toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sourceRoot":"","sources":["Toast.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../components/Toast/Toast.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport type { SafeTimer } from '../../lib/globalObject.js';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { Theme, ThemeIn } from '../../lib/theming/Theme.js';\nimport { RenderContainer } from '../../internal/RenderContainer/index.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { isTestEnv } from '../../lib/currentEnvironment.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\n\nimport { getStyles } from './Toast.styles.js';\nimport type { ToastViewProps } from './ToastView.js';\nimport { ToastView } from './ToastView.js';\n\nexport interface Action {\n  label: string;\n  handler: () => void;\n  'aria-label'?: string;\n}\n\n/**\n * Состояния тоста:\n *\n * - default стиль для отображения по умолчанию\n * - error стиль для отображения ошибок\n **/\nexport type ToastUse = 'default' | 'error';\n\nexport interface ToastState {\n  notification: Nullable<React.ReactNode>;\n  action: Nullable<Action>;\n  id: number;\n  showTime: Nullable<number>;\n  showCloseIcon?: boolean;\n  currentUse: ToastUse;\n}\n\nexport interface ToastProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {\n  /** Задает функцию, которая вызывается при возникновении тоста. */\n  onPush?: (notification: string, action?: Action) => void;\n\n  /** Задает функцию, которая вызывается при закрытии тоста. */\n  onClose?: (notification: string, action?: Action) => void;\n\n  /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */\n  theme?: ThemeIn;\n}\n\n/** Объект с конфигурацией отображения Toast-а */\nexport interface ToastPushConfig {\n  action?: Nullable<Action>;\n  showTime?: number;\n  showCloseIcon?: boolean;\n  /**\n   * Определяет стили для тоста.\n   *\n   * - default стиль для отображения по умолчанию\n   * - error стиль для отображения ошибок\n   *\n   * По умолчанию будет использован стиль default.\n   **/\n  use?: ToastUse;\n}\n\nexport type ToastPushApi = (notification: React.ReactNode, config?: ToastPushConfig) => void;\n\nexport type ToastClose = () => void;\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 * `Toast` — это короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его команды.\n * Результат может быть положительным, отрицательным или нейтральным.\n *\n */\n@withRenderEnvironment\n@rootNode\nexport class Toast extends React.Component<ToastProps, ToastState> {\n  public static __KONTUR_REACT_UI__ = 'Toast';\n  public static displayName = 'Toast';\n\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private styles!: ReturnType<typeof getStyles>;\n  private emotion!: Emotion;\n  private theme!: Theme;\n\n  public _toast: Nullable<ToastView>;\n  private _timeout: SafeTimer;\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      showCloseIcon: false,\n      currentUse: 'default',\n    };\n  }\n\n  public componentWillUnmount() {\n    this._clearTimer();\n  }\n\n  public render(): React.JSX.Element {\n    this.styles = getStyles(this.emotion);\n\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme;\n          return (\n            <ThemeContext.Provider value={this.theme}>\n              <RenderContainer>\n                <TransitionGroup>{this._renderToast()}</TransitionGroup>\n              </RenderContainer>\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  /**\n   * Показывает тост с `notification` в качестве сообщения.\n   * Тост автоматически скрывается через 3 или 7 секунд,\n   * в зависимости от наличия у него кнопки `action` внутри config-а.\n   * Время показа можно задать вручную, передав `showTime` внутри config-а.\n   *\n   * @public\n   * @param {React.ReactNode} notification\n   * @param {ToastPushConfig} config объект с конфигурацией отображения компонента Toast\n   */\n  public push: ToastPushApi = (notification: React.ReactNode, config?: ToastPushConfig) => {\n    if (this.state.notification) {\n      this.close();\n    }\n\n    safelyCall(this.props.onPush, notification, config?.action);\n\n    this.setState(\n      ({ id }) => ({\n        notification,\n        action: config?.action,\n        id: id + 1,\n        showTime: config?.showTime,\n        showCloseIcon: config?.showCloseIcon,\n        currentUse: config?.use ?? 'default',\n      }),\n      this._setTimer,\n    );\n  };\n\n  /**\n   * @public\n   */\n  public close = (): void => {\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, showCloseIcon, currentUse } = 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      'aria-label': this.props['aria-label'],\n      action,\n      showCloseIcon,\n      use: currentUse,\n    };\n\n    return (\n      <CSSTransition\n        key={id}\n        classNames={{\n          enter: this.styles.enter(),\n          enterActive: this.styles.enterActive(),\n          exit: this.styles.exit(),\n          exitActive: this.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    this._timeout = 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.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const getStyles: import("../../lib/theming/Emotion.js").StylesGetter<{
+    enter(): string;
+    enterActive(): string;
+    exit(): string;
+    exitActive(): string;
+}>;

package/components/Toast/Toast.styles.js

@@ -0,0 +1,24 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { memoizeGetStyles } from '../../lib/theming/Emotion.js';
+export var getStyles = memoizeGetStyles(function (_a) {
+    var css = _a.css;
+    return ({
+        enter: function () {
+            return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      transform: translateY(-40px);\n    "], ["\n      transform: translateY(-40px);\n    "])));
+        },
+        enterActive: function () {
+            return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n      transform: translateY(0) !important;\n    "], ["\n      transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n      transform: translateY(0) !important;\n    "])));
+        },
+        exit: function () {
+            return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      transform: translateY(0);\n      opacity: 1;\n    "], ["\n      transform: translateY(0);\n      opacity: 1;\n    "])));
+        },
+        exitActive: function () {
+            return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      opacity: 0.01 !important;\n      transition: opacity 0.15s ease-out;\n    "], ["\n      opacity: 0.01 !important;\n      transition: opacity 0.15s ease-out;\n    "])));
+        },
+    });
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+//# sourceMappingURL=Toast.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.styles.js","sourceRoot":"","sources":["../../../components/Toast/Toast.styles.ts"],"names":[],"mappings":";;;;AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAEhE,MAAM,CAAC,IAAM,SAAS,GAAG,gBAAgB,CAAC,UAAC,EAAgB;QAAd,GAAG,SAAA;IAAgB,OAAA,CAAC;QAC/D,KAAK;YACH,OAAO,GAAG,gHAAA,6CAET,KAAC;QACJ,CAAC;QACD,WAAW;YACT,OAAO,GAAG,4LAAA,yHAGT,KAAC;QACJ,CAAC;QACD,IAAI;YACF,OAAO,GAAG,+HAAA,4DAGT,KAAC;QACJ,CAAC;QACD,UAAU;YACR,OAAO,GAAG,uJAAA,oFAGT,KAAC;QACJ,CAAC;KACF,CAAC;AAxB8D,CAwB9D,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeGetStyles } from '../../lib/theming/Emotion.js';\n\nexport const getStyles = memoizeGetStyles(({ css }: Emotion) => ({\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/ToastView.d.ts

@@ -1,33 +1,31 @@
-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 for toast
-         */
-        action: PropTypes.Requireable<PropTypes.InferProps<{
-            label: PropTypes.Validator<string>;
-            handler: PropTypes.Validator<(...args: any[]) => any>;
-        }>>;
-        /**
-         * Toast content
-         */
-        children: PropTypes.Validator<string>;
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    private theme;
-    render(): JSX.Element;
-    private renderMain;
-}
-export default ToastView;
+import type { AriaAttributes } from 'react';
+import React from 'react';
+import type { Nullable } from '../../typings/utility-types.js';
+import type { CommonProps } from '../../internal/CommonWrapper/index.js';
+import type { TGetRootNode } from '../../lib/rootNode/index.js';
+import type { Action, ToastUse } from './Toast.js';
+export interface ToastViewProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {
+    /** Задает контент тоста. */
+    children?: React.ReactNode;
+    /** Добавляет возможность действия и кнопку закрытия у тоста. */
+    action?: Nullable<Action>;
+    showCloseIcon?: boolean;
+    onClose?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    /**
+     * Задаёт стили для отображения тоста в зависимости от назначения.
+     **/
+    use?: ToastUse;
+}
+export declare class ToastView extends React.Component<ToastViewProps> {
+    private styles;
+    private emotion;
+    private cx;
+    private theme;
+    getRootNode: TGetRootNode;
+    private setRootNode;
+    private readonly locale;
+    render(): React.JSX.Element;
+    private renderMain;
+}