@skbkontur/react-ui 0.0.0-375e096002 → 0.0.0-388db940ca

package/components/Toast/Toast.d.ts

@@ -1,52 +1,118 @@
-import React from 'react';
-import { Nullable } from '../../typings/utility-types';
-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 {
-    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})`
- */
-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` в качестве сообщения.
-     *
-     * `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;
-}
+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/types.js';
+import type { TGetRootNode } from '../../lib/rootNode//rootNodeDecorator.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;
+}
+/** @deprecated выпилить старый подход к api push Toast-а в react-ui 6.0 */
+export type ToastPush = (notification: React.ReactNode, action?: Nullable<Action>, showTime?: number, showCloseIcon?: boolean) => void;
+/** Объект с конфигурацией отображения Toast-а */
+export interface ToastPushConfig {
+    action?: Nullable<Action>;
+    showTime?: number;
+    showCloseIcon?: boolean;
+    /**
+     * Определяет стили для тоста.
+     *
+     * - default стиль для отображения по-умолчанию
+     * - error стиль для отображения ошибок
+     *
+     * По-умолчанию будет использован стиль default.
+     **/
+    use?: ToastUse;
+}
+/** TODO: Новый Api для метода push в Toast. Станет api по-умолчанию с версии 6.0. В мажоре нужно будет убрать New из названия */
+export type ToastNewPushApi = (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` — это короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его команды.
+ * Результат может быть положительным, отрицательным или нейтральным.
+ *
+ * Метод `push` через ref поддерживает два api.
+ *
+ * 1. Устаревший с последовательной передачей аргументов: `toastRef.current.push('Hi', { label: 'Cancel', handler: () => {} }, 15000)`
+ * 2. Новый с передачей объекта конфигурации: `toastRef.current.push('Hi', { action: { label: 'Cancel', handler: () => {} }, showTime: 15000 })`
+ *
+ * Устаревший подход с передачей аргументов последовательным образом **будет удалён** в следующей мажорной версии.
+ */
+export declare class Toast extends React.Component<ToastProps, ToastState> {
+    static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    getRootNode: TGetRootNode;
+    private setRootNode;
+    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
+     *
+     * @description Сейчас есть поддержка старого api метода push с передачей аргументов последовательно, но с версии 6.0 этот функционал будет удалён.
+     * @example
+     * // Будет удален в 6.0
+     * push('notification', { label: "cat meow", handler: () => {} }, 15_000, false, "error")
+     *
+     * @example
+     * // Останется в > 6.0
+     * push('notification', { action: { label: "cat meow", handler: () => {} }, showTime: 15_000, showCloseIcon: false, use: "error" })
+     */
+    push(notification: React.ReactNode, configOrAction?: ToastPushConfig | Nullable<Action>, showTime?: number, showCloseIcon?: boolean, use?: ToastUse): void;
+    /**
+     * @public
+     */
+    close: () => void;
+    private _renderToast;
+    private setRootRef;
+    private _clearTimer;
+    private _setTimer;
+    private _refToast;
+}
+export declare function isNewToastPushApi(value: unknown): value is ToastPushConfig;
+export declare function isOldToastPushApi(value: unknown): value is Action;
+/** Хелпер для случая, когда передаём только текст */
+export declare function isEmptySecondArg(value: unknown): value is null | undefined;

package/components/Toast/Toast.js

@@ -0,0 +1,225 @@
+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 __());
+    };
+})();
+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;
+    };
+    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 { globalObject } from '@skbkontur/global-object';
+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 { styles } from './Toast.styles.js';
+import { ToastView } from './ToastView.js';
+export var ToastDataTids = {
+    toastStatic: 'StaticToast',
+    toastView: 'ToastView__root',
+    action: 'ToastView__action',
+    close: 'ToastView__close',
+};
+/**
+ * `Toast` — это короткое немодальное уведомление, которое сообщает пользователю о результате выполнения его команды.
+ * Результат может быть положительным, отрицательным или нейтральным.
+ *
+ * Метод `push` через ref поддерживает два api.
+ *
+ * 1. Устаревший с последовательной передачей аргументов: `toastRef.current.push('Hi', { label: 'Cancel', handler: () => {} }, 15000)`
+ * 2. Новый с передачей объекта конфигурации: `toastRef.current.push('Hi', { action: { label: 'Cancel', handler: () => {} }, showTime: 15000 })`
+ *
+ * Устаревший подход с передачей аргументов последовательным образом **будет удалён** в следующей мажорной версии.
+ */
+var Toast = /** @class */ (function (_super) {
+    __extends(Toast, _super);
+    function Toast(props) {
+        var _this = _super.call(this, props) || this;
+        _this.rootRef = React.createRef();
+        /**
+         * @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) {
+                globalObject.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 = globalObject.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();
+    };
+    Toast.prototype.render = function () {
+        var _this = this;
+        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()))));
+        }));
+    };
+    /**
+     * Показывает тост с `notification` в качестве сообщения.
+     * Тост автоматически скрывается через 3 или 7 секунд,
+     * в зависимости от наличия у него кнопки `action` внутри config-а.
+     * Время показа можно задать вручную, передав `showTime` внутри config-а.
+     *
+     * @public
+     * @param {React.ReactNode} notification
+     * @param {ToastPushConfig} config объект с конфигурацией отображения компонента Toast
+     *
+     * @description Сейчас есть поддержка старого api метода push с передачей аргументов последовательно, но с версии 6.0 этот функционал будет удалён.
+     * @example
+     * // Будет удален в 6.0
+     * push('notification', { label: "cat meow", handler: () => {} }, 15_000, false, "error")
+     *
+     * @example
+     * // Останется в > 6.0
+     * push('notification', { action: { label: "cat meow", handler: () => {} }, showTime: 15_000, showCloseIcon: false, use: "error" })
+     */
+    Toast.prototype.push = function (notification, configOrAction, showTime, showCloseIcon, use) {
+        if (this.state.notification) {
+            this.close();
+        }
+        if (isNewToastPushApi(configOrAction)) {
+            var action_1 = configOrAction.action, showTime_1 = configOrAction.showTime, showCloseIcon_1 = configOrAction.showCloseIcon, use_1 = configOrAction.use;
+            safelyCall(this.props.onPush, notification, action_1);
+            this.setState(function (_a) {
+                var id = _a.id;
+                return ({
+                    notification: notification,
+                    action: action_1,
+                    id: id + 1,
+                    showTime: showTime_1,
+                    showCloseIcon: showCloseIcon_1,
+                    currentUse: use_1 !== null && use_1 !== void 0 ? use_1 : 'default',
+                });
+            }, this._setTimer);
+        }
+        /** @deprecated выпилить старый подход к api push Toast-а в react-ui 6.0 */
+        if (isOldToastPushApi(configOrAction) || isEmptySecondArg(configOrAction)) {
+            var action_2 = configOrAction;
+            safelyCall(this.props.onPush, notification, action_2);
+            this.setState(function (_a) {
+                var id = _a.id;
+                return ({
+                    notification: notification,
+                    action: action_2,
+                    id: id + 1,
+                    showTime: showTime,
+                    showCloseIcon: showCloseIcon,
+                    currentUse: use !== null && use !== void 0 ? use : 'default',
+                });
+            }, this._setTimer);
+        }
+    };
+    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: styles.enter(),
+                enterActive: styles.enterActive(),
+                exit: styles.exit(),
+                exitActive: 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([
+        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];
+    }
+    if (fn) {
+        fn.apply(void 0, args);
+    }
+}
+export function isNewToastPushApi(value) {
+    return Boolean(value && typeof value === 'object' && !('label' in value));
+}
+export function isOldToastPushApi(value) {
+    return Boolean(value && typeof value === 'object' && 'label' in value);
+}
+/** Хелпер для случая, когда передаём только текст */
+export function isEmptySecondArg(value) {
+    return !value;
+}
+//# sourceMappingURL=Toast.js.map

package/components/Toast/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sourceRoot":"","sources":["../../../components/Toast/Toast.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AAExE,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,mCAAmC,CAAC;AAEjE,OAAO,EAAE,eAAe,EAAE,MAAM,yCAAyC,CAAC;AAG1E,OAAO,EAAE,aAAa,EAAE,MAAM,uCAAuC,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAE5D,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAiE3C,MAAM,CAAC,IAAM,aAAa,GAAG;IAC3B,WAAW,EAAE,aAAa;IAC1B,SAAS,EAAE,iBAAiB;IAC5B,MAAM,EAAE,mBAAmB;IAC3B,KAAK,EAAE,kBAAkB;CACjB,CAAC;AAEX;;;;;;;;;;GAUG;AAEH;IAA2B,yBAAuC;IAYhE,eAAY,KAAiB;QAC3B,YAAA,MAAK,YAAC,KAAK,CAAC,SAAC;QAHP,aAAO,GAAG,KAAK,CAAC,SAAS,EAAe,CAAC;QAsGjD;;WAEG;QACI,WAAK,GAAG;YACb,UAAU,CAAC,KAAI,CAAC,KAAK,CAAC,OAAO,EAAE,KAAI,CAAC,KAAK,CAAC,YAAY,EAAE,KAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;YAC3E,KAAI,CAAC,QAAQ,CAAC,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC;QACtD,CAAC,CAAC;QA4CM,gBAAU,GAAG,UAAC,OAA0B;YAC9C,KAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;YAC1B,0FAA0F;YAC1F,KAAI,CAAC,OAAO,CAAC,OAAO,GAAG,OAAO,CAAC;QACjC,CAAC,CAAC;QAEM,iBAAW,GAAG;YACpB,IAAI,KAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,YAAY,CAAC,YAAY,CAAC,KAAI,CAAC,QAAQ,CAAC,CAAC;gBACzC,KAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACvB,CAAC;QACH,CAAC,CAAC;QAEM,eAAS,GAAG;;YAClB,KAAI,CAAC,WAAW,EAAE,CAAC;YAEnB,IAAI,QAAQ,GAAG,KAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC;YAC/C,QAAQ,GAAG,MAAA,KAAI,CAAC,KAAK,CAAC,QAAQ,mCAAI,QAAQ,CAAC;YAC3C,KAAI,CAAC,QAAQ,GAAG,YAAY,CAAC,UAAU,CAAC,KAAI,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;QAChE,CAAC,CAAC;QAEM,eAAS,GAAG,UAAC,OAAkB;YACrC,KAAI,CAAC,MAAM,GAAG,OAAO,CAAC;QACxB,CAAC,CAAC;QA3KA,KAAI,CAAC,KAAK,GAAG;YACX,YAAY,EAAE,IAAI;YAClB,MAAM,EAAE,IAAI;YACZ,EAAE,EAAE,CAAC;YACL,QAAQ,EAAE,IAAI;YACd,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,SAAS;SACtB,CAAC;;IACJ,CAAC;IAEM,oCAAoB,GAA3B;QACE,IAAI,CAAC,WAAW,EAAE,CAAC;IACrB,CAAC;IAEM,sBAAM,GAAb;QAAA,iBAeC;QAdC,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,QACnB,UAAC,KAAK;YACL,KAAI,CAAC,KAAK,GAAG,KAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,MAAM,CAAC,KAAI,CAAC,KAAK,CAAC,KAAc,EAAE,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAC9F,OAAO,CACL,oBAAC,YAAY,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAI,CAAC,KAAK;gBACtC,oBAAC,eAAe;oBACd,oBAAC,eAAe,QAAE,KAAI,CAAC,YAAY,EAAE,CAAmB,CACxC,CACI,CACzB,CAAC;QACJ,CAAC,CACqB,CACzB,CAAC;IACJ,CAAC;IAED;;;;;;;;;;;;;;;;;;OAkBG;IACI,oBAAI,GAAX,UACE,YAA6B,EAC7B,cAAmD,EACnD,QAAiB,EACjB,aAAuB,EACvB,GAAc;QAEd,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;YAC5B,IAAI,CAAC,KAAK,EAAE,CAAC;QACf,CAAC;QAED,IAAI,iBAAiB,CAAC,cAAc,CAAC,EAAE,CAAC;YAC9B,IAAA,QAAM,GAAmC,cAAc,OAAjD,EAAE,UAAQ,GAAyB,cAAc,SAAvC,EAAE,eAAa,GAAU,cAAc,cAAxB,EAAE,KAAG,GAAK,cAAc,IAAnB,CAAoB;YAEhE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,YAAY,EAAE,QAAM,CAAC,CAAC;YAEpD,IAAI,CAAC,QAAQ,CACX,UAAC,EAAM;oBAAJ,EAAE,QAAA;gBAAO,OAAA,CAAC;oBACX,YAAY,cAAA;oBACZ,MAAM,UAAA;oBACN,EAAE,EAAE,EAAE,GAAG,CAAC;oBACV,QAAQ,YAAA;oBACR,aAAa,iBAAA;oBACb,UAAU,EAAE,KAAG,aAAH,KAAG,cAAH,KAAG,GAAI,SAAS;iBAC7B,CAAC;YAPU,CAOV,EACF,IAAI,CAAC,SAAS,CACf,CAAC;QACJ,CAAC;QAED,2EAA2E;QAC3E,IAAI,iBAAiB,CAAC,cAAc,CAAC,IAAI,gBAAgB,CAAC,cAAc,CAAC,EAAE,CAAC;YAC1E,IAAM,QAAM,GAAG,cAAc,CAAC;YAC9B,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,YAAY,EAAE,QAAM,CAAC,CAAC;YAEpD,IAAI,CAAC,QAAQ,CACX,UAAC,EAAM;oBAAJ,EAAE,QAAA;gBAAO,OAAA,CAAC;oBACX,YAAY,cAAA;oBACZ,MAAM,UAAA;oBACN,EAAE,EAAE,EAAE,GAAG,CAAC;oBACV,QAAQ,UAAA;oBACR,aAAa,eAAA;oBACb,UAAU,EAAE,GAAG,aAAH,GAAG,cAAH,GAAG,GAAI,SAAS;iBAC7B,CAAC;YAPU,CAOV,EACF,IAAI,CAAC,SAAS,CACf,CAAC;QACJ,CAAC;IACH,CAAC;IAUO,4BAAY,GAApB;QACQ,IAAA,KAA0D,IAAI,CAAC,KAAK,EAAlE,YAAY,kBAAA,EAAE,MAAM,YAAA,EAAE,EAAE,QAAA,EAAE,aAAa,mBAAA,EAAE,UAAU,gBAAe,CAAC;QAE3E,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,OAAO,IAAI,CAAC;QACd,CAAC;QAED,IAAM,UAAU,GAAmB;YACjC,YAAY,EAAE,IAAI,CAAC,WAAW;YAC9B,YAAY,EAAE,IAAI,CAAC,SAAS;YAC5B,OAAO,EAAE,IAAI,CAAC,KAAK;YACnB,QAAQ,EAAE,YAAY;YACtB,YAAY,EAAE,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC;YACtC,MAAM,QAAA;YACN,aAAa,eAAA;YACb,GAAG,EAAE,UAAU;SAChB,CAAC;QAEF,OAAO,CACL,oBAAC,aAAa,IACZ,GAAG,EAAE,EAAE,EACP,UAAU,EAAE;gBACV,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE;gBACrB,WAAW,EAAE,MAAM,CAAC,WAAW,EAAE;gBACjC,IAAI,EAAE,MAAM,CAAC,IAAI,EAAE;gBACnB,UAAU,EAAE,MAAM,CAAC,UAAU,EAAE;aAChC,EACD,OAAO,EAAE;gBACP,KAAK,EAAE,GAAG;gBACV,IAAI,EAAE,GAAG;aACV,EACD,KAAK,EAAE,CAAC,SAAS,EACjB,IAAI,EAAE,CAAC,SAAS,EAChB,OAAO,EAAE,IAAI,CAAC,OAAO;YAErB,oBAAC,aAAa,aAAC,WAAW,EAAE,IAAI,CAAC,UAAU,IAAM,IAAI,CAAC,KAAK;gBACzD,oBAAC,SAAS,aAAC,GAAG,EAAE,IAAI,CAAC,SAAS,IAAM,UAAU,EAAI,CACpC,CACF,CACjB,CAAC;IACJ,CAAC;IA/Ja,yBAAmB,GAAG,OAAO,AAAV,CAAW;IAC9B,iBAAW,GAAG,OAAO,AAAV,CAAW;IAFzB,KAAK;QADjB,QAAQ;OACI,KAAK,CA0LjB;IAAD,YAAC;CAAA,AA1LD,CAA2B,KAAK,CAAC,SAAS,GA0LzC;SA1LY,KAAK;AA4LlB,SAAS,UAAU,CAAC,EAA8B;IAAE,cAAc;SAAd,UAAc,EAAd,qBAAc,EAAd,IAAc;QAAd,6BAAc;;IAChE,IAAI,EAAE,EAAE,CAAC;QACP,EAAE,eAAI,IAAI,EAAE;IACd,CAAC;AACH,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,KAAc;IAC9C,OAAO,OAAO,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC;AAC5E,CAAC;AAED,MAAM,UAAU,iBAAiB,CAAC,KAAc;IAC9C,OAAO,OAAO,CAAC,KAAK,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,OAAO,IAAI,KAAK,CAAC,CAAC;AACzE,CAAC;AAED,qDAAqD;AACrD,MAAM,UAAU,gBAAgB,CAAC,KAAc;IAC7C,OAAO,CAAC,KAAK,CAAC;AAChB,CAAC"}

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

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

package/components/Toast/Toast.styles.js

@@ -0,0 +1,21 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { css, memoizeStyle } from '../../lib/theming/Emotion.js';
+export var styles = memoizeStyle({
+    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":";;;;AAAA,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAEjE,MAAM,CAAC,IAAM,MAAM,GAAG,YAAY,CAAC;IACjC,KAAK;QACH,OAAO,GAAG,gHAAA,6CAET,KAAC;IACJ,CAAC;IACD,WAAW;QACT,OAAO,GAAG,4LAAA,yHAGT,KAAC;IACJ,CAAC;IACD,IAAI;QACF,OAAO,GAAG,+HAAA,4DAGT,KAAC;IACJ,CAAC;IACD,UAAU;QACR,OAAO,GAAG,uJAAA,oFAGT,KAAC;IACJ,CAAC;CACF,CAAC,CAAC"}

package/components/Toast/ToastView.d.ts

@@ -1,36 +1,28 @@
-import React from 'react';
-export interface ToastViewProps {
-    /**
-     * 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;
-}
+import type { AriaAttributes } from 'react';
+import React from 'react';
+import type { Nullable } from '../../typings/utility-types.js';
+import type { CommonProps } from '../../internal/CommonWrapper/types.js';
+import type { TGetRootNode } from '../../lib/rootNode//rootNodeDecorator.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 theme;
+    getRootNode: TGetRootNode;
+    private setRootNode;
+    private readonly locale;
+    render(): React.JSX.Element;
+    private renderMain;
+}

package/components/Toast/ToastView.js

@@ -0,0 +1,82 @@
+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 __());
+    };
+})();
+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;
+    };
+    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 { locale } from '../../lib/locale/decorators.js';
+import { ZIndex } from '../../internal/ZIndex/index.js';
+import { ThemeContext } from '../../lib/theming/ThemeContext.js';
+import { CommonWrapper } from '../../internal/CommonWrapper/index.js';
+import { rootNode } from '../../lib/rootNode/index.js';
+import { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon.js';
+import { cx } from '../../lib/theming/Emotion.js';
+import { styles } from './ToastView.styles.js';
+import { ToastDataTids } from './Toast.js';
+import { ToastLocaleHelper } from './locale/index.js';
+var ToastView = /** @class */ (function (_super) {
+    __extends(ToastView, _super);
+    function ToastView() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.renderMain = function () {
+            var _a = _this.props, action = _a.action, showCloseIcon = _a.showCloseIcon, onClose = _a.onClose, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, use = _a.use;
+            var toastCloseColors = use === 'error'
+                ? { hover: _this.theme.toastCloseHoverColorError, default: _this.theme.toastCloseColorError }
+                : { hover: _this.theme.toastCloseHoverColor, default: _this.theme.toastCloseColor };
+            var toastActionColorsClassName = use === 'error' ? styles.toastActionErrorColor(_this.theme) : styles.toastActionDefaultColor(_this.theme);
+            var toastActionClassNames = cx(styles.link(_this.theme), toastActionColorsClassName);
+            var link = action ? (React.createElement("button", { "aria-label": action['aria-label'], "data-tid": ToastDataTids.action, className: toastActionClassNames, onClick: action.handler }, action.label)) : null;
+            var close = action || showCloseIcon ? (React.createElement("span", { className: styles.closeWrapper(_this.theme) },
+                React.createElement(CloseButtonIcon, { "aria-label": _this.locale.closeButtonAriaLabel, "data-tid": ToastDataTids.close, onClick: onClose, size: parseInt(_this.theme.toastCloseSize), side: 40, color: toastCloseColors.default, colorHover: toastCloseColors.hover, tabbable: false }))) : null;
+            var rootClassName = cx(styles.root(_this.theme), styles[use !== null && use !== void 0 ? use : 'default'](_this.theme));
+            return (React.createElement(CommonWrapper, __assign({}, _this.props),
+                React.createElement(ZIndex, { priority: "Toast", className: styles.wrapper(_this.theme) },
+                    React.createElement("div", { "data-tid": ToastDataTids.toastView, className: rootClassName, ref: _this.setRootNode, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave },
+                        React.createElement("span", null, _this.props.children),
+                        link,
+                        close))));
+        };
+        return _this;
+    }
+    ToastView.prototype.render = function () {
+        var _this = this;
+        return (React.createElement(ThemeContext.Consumer, null, function (theme) {
+            _this.theme = theme;
+            return _this.renderMain();
+        }));
+    };
+    ToastView = __decorate([
+        rootNode,
+        locale('Toast', ToastLocaleHelper)
+    ], ToastView);
+    return ToastView;
+}(React.Component));
+export { ToastView };
+//# sourceMappingURL=ToastView.js.map

package/components/Toast/ToastView.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastView.js","sourceRoot":"","sources":["../../../components/Toast/ToastView.tsx"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,11 @@
-export declare const jsStyles: {
-    root(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    wrapper(): string;
-    closeWrapper(): string;
-    link(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-    close(t: Readonly<typeof import("../../internal/themes/DefaultTheme").DefaultTheme>): string;
-};
+import type { Theme } from '../../lib/theming/Theme.js';
+export declare const styles: {
+    root(t: Theme): string;
+    default(t: Theme): string;
+    error(t: Theme): string;
+    wrapper(t: Theme): string;
+    closeWrapper(t: Theme): string;
+    link(t: Theme): string;
+    toastActionErrorColor(t: Theme): string;
+    toastActionDefaultColor(t: Theme): string;
+};