@skbkontur/react-ui 0.0.0-7dc91ef93e → 0.0.0-7f260475fb

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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","sourcesContent":["import type { AriaAttributes } from 'react';\nimport React from 'react';\n\nimport { locale } from '../../lib/locale/decorators.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport type { CommonProps } from '../../internal/CommonWrapper/types.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode//rootNodeDecorator.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon.js';\nimport { cx } from '../../lib/theming/Emotion.js';\n\nimport { styles } from './ToastView.styles.js';\nimport type { Action, ToastUse } from './Toast.js';\nimport { ToastDataTids } from './Toast.js';\nimport type { ToastLocale } from './locale/index.js';\nimport { ToastLocaleHelper } from './locale/index.js';\n\nexport interface ToastViewProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {\n  /** Задает контент тоста. */\n  children?: React.ReactNode;\n  /** Добавляет возможность действия и кнопку закрытия у тоста. */\n  action?: Nullable<Action>;\n  showCloseIcon?: boolean;\n  onClose?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n  /**\n   * Задаёт стили для отображения тоста в зависимости от назначения.\n   **/\n  use?: ToastUse;\n}\n\n@rootNode\n@locale('Toast', ToastLocaleHelper)\nexport class ToastView extends React.Component<ToastViewProps> {\n  private theme!: Theme;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n  private readonly locale!: ToastLocale;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain = () => {\n    const { action, showCloseIcon, onClose, onMouseEnter, onMouseLeave, use } = this.props;\n\n    const toastCloseColors =\n      use === 'error'\n        ? { hover: this.theme.toastCloseHoverColorError, default: this.theme.toastCloseColorError }\n        : { hover: this.theme.toastCloseHoverColor, default: this.theme.toastCloseColor };\n\n    const toastActionColorsClassName =\n      use === 'error' ? styles.toastActionErrorColor(this.theme) : styles.toastActionDefaultColor(this.theme);\n    const toastActionClassNames = cx(styles.link(this.theme), toastActionColorsClassName);\n\n    const link = action ? (\n      <button\n        aria-label={action['aria-label']}\n        data-tid={ToastDataTids.action}\n        className={toastActionClassNames}\n        onClick={action.handler}\n      >\n        {action.label}\n      </button>\n    ) : null;\n\n    const close =\n      action || showCloseIcon ? (\n        <span className={styles.closeWrapper(this.theme)}>\n          <CloseButtonIcon\n            aria-label={this.locale.closeButtonAriaLabel}\n            data-tid={ToastDataTids.close}\n            onClick={onClose}\n            size={parseInt(this.theme.toastCloseSize)}\n            side={40}\n            color={toastCloseColors.default}\n            colorHover={toastCloseColors.hover}\n            tabbable={false}\n          />\n        </span>\n      ) : null;\n\n    const rootClassName = cx(styles.root(this.theme), styles[use ?? 'default'](this.theme));\n\n    return (\n      <CommonWrapper {...this.props}>\n        <ZIndex priority=\"Toast\" className={styles.wrapper(this.theme)}>\n          <div\n            data-tid={ToastDataTids.toastView}\n            className={rootClassName}\n            ref={this.setRootNode}\n            onMouseEnter={onMouseEnter}\n            onMouseLeave={onMouseLeave}\n          >\n            <span>{this.props.children}</span>\n            {link}\n            {close}\n          </div>\n        </ZIndex>\n      </CommonWrapper>\n    );\n  };\n}\n"]}

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

@@ -1,7 +1,11 @@
-import { Theme } from '../../lib/theming/Theme';
-export declare const styles: {
-    root(t: Theme): string;
-    wrapper(t: Theme): string;
-    closeWrapper(t: Theme): string;
-    link(t: Theme): 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;
+};

package/components/Toast/ToastView.styles.js

@@ -0,0 +1,42 @@
+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';
+var getVerticalPaddings = function (theme) {
+    var toastPaddingY = theme.toastPaddingY;
+    var paddingY = parseInt(toastPaddingY);
+    return ["".concat(paddingY, "px"), "".concat(paddingY, "px")];
+};
+export var styles = memoizeStyle({
+    root: function (t) {
+        var _a = getVerticalPaddings(t), paddingTop = _a[0], paddingBottom = _a[1];
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      border-radius: ", ";\n      border: ", ";\n      display: inline-flex;\n      font-size: ", ";\n      line-height: ", ";\n      opacity: 1;\n      padding: ", " ", " ", ";\n      position: relative;\n      top: ", ";\n    "], ["\n      border-radius: ", ";\n      border: ", ";\n      display: inline-flex;\n      font-size: ", ";\n      line-height: ", ";\n      opacity: 1;\n      padding: ", " ", " ", ";\n      position: relative;\n      top: ", ";\n    "])), t.toastBorderRadius, t.toastBorder, t.toastFontSize, t.toastLineHeight, paddingTop, t.toastPaddingX, paddingBottom, t.toastTop);
+    },
+    default: function (t) {
+        return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n    "], ["\n      background: ", ";\n      color: ", ";\n    "])), t.toastBg, t.toastColor);
+    },
+    error: function (t) {
+        return css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n      background: ", ";\n      color: ", ";\n    "], ["\n      background: ", ";\n      color: ", ";\n    "])), t.toastErrorBg, t.toastColorError);
+    },
+    wrapper: function (t) {
+        return css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n      border-radius: ", ";\n    "], ["\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n      border-radius: ", ";\n    "])), t.toastBorderRadius);
+    },
+    closeWrapper: function (t) {
+        var _a = getVerticalPaddings(t), paddingTop = _a[0], paddingBottom = _a[1];
+        return css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      display: flex;\n      margin: -", " -", " -", " 0;\n    "], ["\n      display: flex;\n      margin: -", " -", " -", " 0;\n    "])), paddingTop, t.toastPaddingX, paddingBottom);
+    },
+    link: function (t) {
+        var _a = getVerticalPaddings(t), paddingTop = _a[0], paddingBottom = _a[1];
+        var padding = "".concat(paddingTop, " ").concat(t.toastLinkPadding);
+        return css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      border: none;\n      font: inherit;\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n      background-color: transparent;\n\n      margin: -", " 0 -", " ", ";\n\n      padding: ", ";\n      transition: background ", " ", ";\n    "], ["\n      border: none;\n      font: inherit;\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n      background-color: transparent;\n\n      margin: -", " 0 -", " ", ";\n\n      padding: ", ";\n      transition: background ", " ", ";\n    "])), paddingTop, paddingBottom, t.toastPaddingX, padding, t.transitionDuration, t.transitionTimingFunction);
+    },
+    toastActionErrorColor: function (t) {
+        return css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      color: ", ";\n\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n\n      &:active {\n        background: ", ";\n        color: ", ";\n      }\n    "], ["\n      color: ", ";\n\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n\n      &:active {\n        background: ", ";\n        color: ", ";\n      }\n    "])), t.toastLinkColorError, t.toastLinkBgHoverError, t.toastLinkTextDecorationHover, t.toastLinkBgActiveError, t.toastLinkColorActiveError);
+    },
+    toastActionDefaultColor: function (t) {
+        return css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      color: ", ";\n\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n\n      &:active {\n        background: ", ";\n      }\n    "], ["\n      color: ", ";\n\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n\n      &:active {\n        background: ", ";\n      }\n    "])), t.toastLinkColor, t.toastLinkBgHover, t.toastLinkTextDecorationHover, t.toastLinkBgActive);
+    },
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8;
+//# sourceMappingURL=ToastView.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToastView.styles.js","sourceRoot":"","sources":["../../../components/Toast/ToastView.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\n\nconst getVerticalPaddings = (theme: Theme) => {\n  const { toastPaddingY } = theme;\n  const paddingY = parseInt(toastPaddingY);\n\n  return [`${paddingY}px`, `${paddingY}px`];\n};\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddings(t);\n    return css`\n      border-radius: ${t.toastBorderRadius};\n      border: ${t.toastBorder};\n      display: inline-flex;\n      font-size: ${t.toastFontSize};\n      line-height: ${t.toastLineHeight};\n      opacity: 1;\n      padding: ${paddingTop} ${t.toastPaddingX} ${paddingBottom};\n      position: relative;\n      top: ${t.toastTop};\n    `;\n  },\n\n  default(t: Theme) {\n    return css`\n      background: ${t.toastBg};\n      color: ${t.toastColor};\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      background: ${t.toastErrorBg};\n      color: ${t.toastColorError};\n    `;\n  },\n\n  wrapper(t: Theme) {\n    return css`\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      height: 0;\n      text-align: center;\n      border-radius: ${t.toastBorderRadius};\n    `;\n  },\n\n  closeWrapper(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddings(t);\n    return css`\n      display: flex;\n      margin: -${paddingTop} -${t.toastPaddingX} -${paddingBottom} 0;\n    `;\n  },\n\n  link(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddings(t);\n    const padding = `${paddingTop} ${t.toastLinkPadding}`;\n\n    return css`\n      border: none;\n      font: inherit;\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n      background-color: transparent;\n\n      margin: -${paddingTop} 0 -${paddingBottom} ${t.toastPaddingX};\n\n      padding: ${padding};\n      transition: background ${t.transitionDuration} ${t.transitionTimingFunction};\n    `;\n  },\n\n  toastActionErrorColor(t: Theme) {\n    return css`\n      color: ${t.toastLinkColorError};\n\n      &:hover {\n        background: ${t.toastLinkBgHoverError};\n        text-decoration: ${t.toastLinkTextDecorationHover};\n      }\n\n      &:active {\n        background: ${t.toastLinkBgActiveError};\n        color: ${t.toastLinkColorActiveError};\n      }\n    `;\n  },\n\n  toastActionDefaultColor(t: Theme) {\n    return css`\n      color: ${t.toastLinkColor};\n\n      &:hover {\n        background: ${t.toastLinkBgHover};\n        text-decoration: ${t.toastLinkTextDecorationHover};\n      }\n\n      &:active {\n        background: ${t.toastLinkBgActive};\n      }\n    `;\n  },\n});\n"]}

package/components/Toast/__creevey__/Toast.creevey.d.mts

@@ -1 +1 @@
-export {};
+export {};

package/components/Toast/__creevey__/Toast.creevey.mjs

@@ -0,0 +1,118 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { kind, story, test } from 'creevey';
+import { delay } from '../../../lib/delay.mjs';
+var kindTests = function () {
+    test('toastShown', function (context) { return __awaiter(void 0, void 0, void 0, function () {
+        var showToast, _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    showToast = context.webdriver.findElement({ css: '[data-tid~="show-toast"]' });
+                    return [4 /*yield*/, context.webdriver.actions({ bridge: true }).click(showToast).move({ x: 0, y: 0 }).click().perform()];
+                case 1:
+                    _c.sent();
+                    return [4 /*yield*/, delay(1000)];
+                case 2:
+                    _c.sent();
+                    _b = (_a = context).matchImage;
+                    return [4 /*yield*/, context.takeScreenshot()];
+                case 3: return [4 /*yield*/, _b.apply(_a, [_c.sent()])];
+                case 4:
+                    _c.sent();
+                    return [2 /*return*/];
+            }
+        });
+    }); });
+};
+kind('Toast', function () {
+    story('SimpleNotification', function () {
+        kindTests();
+    });
+    story('TestNotifier', function () {
+        kindTests();
+    });
+    story('UseErrorExample', function () {
+        kindTests();
+    });
+    story('ComplexNotification', function () {
+        kindTests();
+    });
+    story('complex', function () {
+        kindTests();
+    });
+    story('button', function () {
+        kindTests();
+    });
+    story('data-tid', function () {
+        kindTests();
+    });
+    story('onClick', function () {
+        kindTests();
+    });
+    story('Toast', function () {
+        kindTests();
+    });
+    story('push', function () {
+        kindTests();
+    });
+    story('ToastWithCross', function () {
+        test('idle', function (context) { return __awaiter(void 0, void 0, void 0, function () {
+            var showInstanceToastButton, instanceToast;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        showInstanceToastButton = context.webdriver.findElement({ css: '[data-tid="show-instance-toast"]' });
+                        return [4 /*yield*/, context.webdriver.actions({ bridge: true }).pause(100).click(showInstanceToastButton).perform()];
+                    case 1:
+                        _a.sent();
+                        return [4 /*yield*/, delay(1000)];
+                    case 2:
+                        _a.sent();
+                        return [4 /*yield*/, context.takeScreenshot()];
+                    case 3:
+                        instanceToast = _a.sent();
+                        return [4 /*yield*/, context.matchImages({ instanceToast: instanceToast })];
+                    case 4:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); });
+    });
+});
+//# sourceMappingURL=Toast.creevey.mjs.map

package/components/Toast/__creevey__/Toast.creevey.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.creevey.mjs","sourceRoot":"","sources":["../../../../components/Toast/__creevey__/Toast.creevey.mts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE5C,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAC;AAE/C,IAAM,SAAS,GAAG;IAChB,IAAI,CAAC,YAAY,EAAE,UAAO,OAAO;;;;;oBACzB,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG,EAAE,0BAA0B,EAAE,CAAC,CAAC;oBACrF,qBAAM,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,KAAK,EAAE,CAAC,OAAO,EAAE,EAAA;;oBAAzG,SAAyG,CAAC;oBAC1G,qBAAM,KAAK,CAAC,IAAI,CAAC,EAAA;;oBAAjB,SAAiB,CAAC;oBACZ,KAAA,CAAA,KAAA,OAAO,CAAA,CAAC,UAAU,CAAA;oBAAC,qBAAM,OAAO,CAAC,cAAc,EAAE,EAAA;wBAAvD,qBAAM,cAAmB,SAA8B,EAAC,EAAA;;oBAAxD,SAAwD,CAAC;;;;SAC1D,CAAC,CAAC;AACL,CAAC,CAAC;AAEF,IAAI,CAAC,OAAO,EAAE;IACZ,KAAK,CAAC,oBAAoB,EAAE;QAC1B,SAAS,EAAE,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,cAAc,EAAE;QACpB,SAAS,EAAE,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,iBAAiB,EAAE;QACvB,SAAS,EAAE,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,qBAAqB,EAAE;QAC3B,SAAS,EAAE,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,SAAS,EAAE;QACf,SAAS,EAAE,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,QAAQ,EAAE;QACd,SAAS,EAAE,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,UAAU,EAAE;QAChB,SAAS,EAAE,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,SAAS,EAAE;QACf,SAAS,EAAE,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,OAAO,EAAE;QACb,SAAS,EAAE,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,MAAM,EAAE;QACZ,SAAS,EAAE,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,KAAK,CAAC,gBAAgB,EAAE;QACtB,IAAI,CAAC,MAAM,EAAE,UAAO,OAAO;;;;;wBACnB,uBAAuB,GAAG,OAAO,CAAC,SAAS,CAAC,WAAW,CAAC,EAAE,GAAG,EAAE,kCAAkC,EAAE,CAAC,CAAC;wBAE3G,qBAAM,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,uBAAuB,CAAC,CAAC,OAAO,EAAE,EAAA;;wBAArG,SAAqG,CAAC;wBACtG,qBAAM,KAAK,CAAC,IAAI,CAAC,EAAA;;wBAAjB,SAAiB,CAAC;wBACI,qBAAM,OAAO,CAAC,cAAc,EAAE,EAAA;;wBAA9C,aAAa,GAAG,SAA8B;wBAEpD,qBAAM,OAAO,CAAC,WAAW,CAAC,EAAE,aAAa,eAAA,EAAE,CAAC,EAAA;;wBAA5C,SAA4C,CAAC;;;;aAC9C,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { kind, story, test } from 'creevey';\n\nimport { delay } from '../../../lib/delay.mjs';\n\nconst kindTests = () => {\n  test('toastShown', async (context) => {\n    const showToast = context.webdriver.findElement({ css: '[data-tid~=\"show-toast\"]' });\n    await context.webdriver.actions({ bridge: true }).click(showToast).move({ x: 0, y: 0 }).click().perform();\n    await delay(1000);\n    await context.matchImage(await context.takeScreenshot());\n  });\n};\n\nkind('Toast', () => {\n  story('SimpleNotification', () => {\n    kindTests();\n  });\n\n  story('TestNotifier', () => {\n    kindTests();\n  });\n\n  story('UseErrorExample', () => {\n    kindTests();\n  });\n\n  story('ComplexNotification', () => {\n    kindTests();\n  });\n\n  story('complex', () => {\n    kindTests();\n  });\n\n  story('button', () => {\n    kindTests();\n  });\n\n  story('data-tid', () => {\n    kindTests();\n  });\n\n  story('onClick', () => {\n    kindTests();\n  });\n\n  story('Toast', () => {\n    kindTests();\n  });\n\n  story('push', () => {\n    kindTests();\n  });\n\n  story('ToastWithCross', () => {\n    test('idle', async (context) => {\n      const showInstanceToastButton = context.webdriver.findElement({ css: '[data-tid=\"show-instance-toast\"]' });\n\n      await context.webdriver.actions({ bridge: true }).pause(100).click(showInstanceToastButton).perform();\n      await delay(1000);\n      const instanceToast = await context.takeScreenshot();\n\n      await context.matchImages({ instanceToast });\n    });\n  });\n});\n"]}

package/components/Toast/__stories__/Toast.stories.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { Meta } from '../../../typings/stories.js';
+declare const meta: Meta;
+export default meta;
+export declare const SimpleNotification: {
+    (): React.JSX.Element;
+    storyName: string;
+};
+export declare const ComplexNotification: {
+    (): React.JSX.Element;
+    storyName: string;
+};
+export declare const UseErrorExample: {
+    (): React.JSX.Element;
+    storyName: string;
+};
+export declare const ReactNodeExample: {
+    (): React.JSX.Element;
+    storyName: string;
+};
+export declare const ToastWithCross: () => React.JSX.Element;

package/components/Toast/__stories__/Toast.stories.js

@@ -0,0 +1,71 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Toast } from '../Toast.js';
+import { Gapped } from '../../Gapped/index.js';
+var TestNotifier = function (_a) {
+    var complex = _a.complex, use = _a.use;
+    var toastRef = React.useRef(null);
+    var showNotification = function () {
+        var toast = toastRef.current;
+        if (toast) {
+            complex
+                ? toast.push('Successfully saved', {
+                    action: {
+                        label: 'Cancel',
+                        handler: action('cancel_save'),
+                    },
+                    showTime: 1000000,
+                })
+                : toast.push('Successfully saved', { use: use });
+        }
+    };
+    return (React.createElement("div", null,
+        React.createElement(Toast, { ref: toastRef, onClose: action('close'), onPush: action('push') }),
+        React.createElement("button", { "data-tid": "show-toast", onClick: showNotification }, "Show Toast")));
+};
+var meta = {
+    title: 'Toast',
+    component: Toast,
+    decorators: [
+        function (Story) { return (React.createElement("div", { 
+            // make some space for Toast
+            style: {
+                padding: '30px 0',
+            } },
+            React.createElement(Story, null))); },
+    ],
+    parameters: {
+        creevey: {
+            captureElement: 'body',
+            skip: { 'flickering screenshot': { in: /^(?!\b(firefox))/, tests: 'toastShown' } },
+        },
+    },
+};
+export default meta;
+export var SimpleNotification = function () { return React.createElement(TestNotifier, null); };
+SimpleNotification.storyName = 'simple notification';
+export var ComplexNotification = function () { return React.createElement(TestNotifier, { complex: true }); };
+ComplexNotification.storyName = 'complex notification';
+export var UseErrorExample = function () { return React.createElement(TestNotifier, { use: "error" }); };
+UseErrorExample.storyName = 'use error example';
+export var ReactNodeExample = function () {
+    var toastRef = React.useRef(null);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Toast, { ref: toastRef }),
+        React.createElement("button", { "data-tid": "show-toast", onClick: function () { var _a; return (_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.push(React.createElement("div", null, "ReactNode example")); } }, "Show toast")));
+};
+ReactNodeExample.storyName = 'react node example';
+export var ToastWithCross = function () {
+    var toastRef = React.useRef(null);
+    var showNotification = function () {
+        var toast = toastRef.current;
+        if (toast) {
+            toast.push('Toast throw instance method', { action: null, showTime: 10000, showCloseIcon: true });
+        }
+    };
+    return (React.createElement(Gapped, null,
+        React.createElement("div", null,
+            React.createElement(Toast, { ref: toastRef }),
+            React.createElement("button", { "data-tid": "show-instance-toast", onClick: showNotification }, "Show Toast"))));
+};
+//# sourceMappingURL=Toast.stories.js.map

package/components/Toast/__stories__/Toast.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.stories.js","sourceRoot":"","sources":["../../../../components/Toast/__stories__/Toast.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport type { Meta } from '../../../typings/stories.js';\nimport type { ToastUse } from '../Toast.js';\nimport { Toast } from '../Toast.js';\nimport { Gapped } from '../../Gapped/index.js';\n\nconst TestNotifier = ({ complex, use }: { complex?: boolean; use?: ToastUse }) => {\n  const toastRef = React.useRef<Toast>(null);\n  const showNotification = () => {\n    const { current: toast } = toastRef;\n    if (toast) {\n      complex\n        ? toast.push('Successfully saved', {\n            action: {\n              label: 'Cancel',\n              handler: action('cancel_save'),\n            },\n            showTime: 1000000,\n          })\n        : toast.push('Successfully saved', { use });\n    }\n  };\n\n  return (\n    <div>\n      <Toast ref={toastRef} onClose={action('close')} onPush={action('push')} />\n      <button data-tid=\"show-toast\" onClick={showNotification}>\n        Show Toast\n      </button>\n    </div>\n  );\n};\n\nconst meta: Meta = {\n  title: 'Toast',\n  component: Toast,\n  decorators: [\n    (Story: () => JSX.Element) => (\n      <div\n        // make some space for Toast\n        style={{\n          padding: '30px 0',\n        }}\n      >\n        <Story />\n      </div>\n    ),\n  ],\n  parameters: {\n    creevey: {\n      captureElement: 'body',\n      skip: { 'flickering screenshot': { in: /^(?!\\b(firefox))/, tests: 'toastShown' } },\n    },\n  },\n};\n\nexport default meta;\n\nexport const SimpleNotification = () => <TestNotifier />;\nSimpleNotification.storyName = 'simple notification';\n\nexport const ComplexNotification = () => <TestNotifier complex />;\nComplexNotification.storyName = 'complex notification';\n\nexport const UseErrorExample = () => <TestNotifier use=\"error\" />;\nUseErrorExample.storyName = 'use error example';\n\nexport const ReactNodeExample = () => {\n  const toastRef = React.useRef<Toast>(null);\n\n  return (\n    <>\n      <Toast ref={toastRef} />\n      <button data-tid=\"show-toast\" onClick={() => toastRef.current?.push(<div>ReactNode example</div>)}>\n        Show toast\n      </button>\n    </>\n  );\n};\nReactNodeExample.storyName = 'react node example';\n\nexport const ToastWithCross = () => {\n  const toastRef = React.useRef<Toast>(null);\n  const showNotification = () => {\n    const { current: toast } = toastRef;\n\n    if (toast) {\n      toast.push('Toast throw instance method', { action: null, showTime: 10_000, showCloseIcon: true });\n    }\n  };\n\n  return (\n    <Gapped>\n      <div>\n        <Toast ref={toastRef} />\n        <button data-tid=\"show-instance-toast\" onClick={showNotification}>\n          Show Toast\n        </button>\n      </div>\n    </Gapped>\n  );\n};\n"]}

package/components/Toast/__stories__/ToastView.stories.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+declare const _default: {
+    title: string;
+    parameters: {
+        creevey: {
+            skip: boolean;
+        };
+    };
+};
+export default _default;
+export declare const SimpleToast: {
+    (): React.JSX.Element;
+    storyName: string;
+};
+export declare const ErrorToast: {
+    (): React.JSX.Element;
+    storyName: string;
+};
+export declare const WithAction: {
+    (): React.JSX.Element;
+    storyName: string;
+};

package/components/Toast/__stories__/ToastView.stories.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { ToastView as Toast } from '../ToastView.js';
+export default { title: 'ToastView', parameters: { creevey: { skip: true } } };
+export var SimpleToast = function () { return React.createElement(Toast, null, "Changes saved"); };
+SimpleToast.storyName = 'simple toast';
+export var ErrorToast = function () { return React.createElement(Toast, { use: "error" }, "Oops"); };
+ErrorToast.storyName = 'error toast';
+export var WithAction = function () { return (React.createElement(Toast, { action: { label: 'Cancel', handler: action('action') }, onClose: action('close') }, "Changes saved")); };
+WithAction.storyName = 'with action';
+//# sourceMappingURL=ToastView.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ToastView.stories.js","sourceRoot":"","sources":["../../../../components/Toast/__stories__/ToastView.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAElD,OAAO,EAAE,SAAS,IAAI,KAAK,EAAE,MAAM,iBAAiB,CAAC;AAErD,eAAe,EAAE,KAAK,EAAE,WAAW,EAAE,UAAU,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC;AAE/E,MAAM,CAAC,IAAM,WAAW,GAAG,cAAM,OAAA,oBAAC,KAAK,wBAAsB,EAA5B,CAA4B,CAAC;AAC9D,WAAW,CAAC,SAAS,GAAG,cAAc,CAAC;AAEvC,MAAM,CAAC,IAAM,UAAU,GAAG,cAAM,OAAA,oBAAC,KAAK,IAAC,GAAG,EAAC,OAAO,WAAa,EAA/B,CAA+B,CAAC;AAChE,UAAU,CAAC,SAAS,GAAG,aAAa,CAAC;AAErC,MAAM,CAAC,IAAM,UAAU,GAAG,cAAM,OAAA,CAC9B,oBAAC,KAAK,IAAC,MAAM,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,CAAC,QAAQ,CAAC,EAAE,EAAE,OAAO,EAAE,MAAM,CAAC,OAAO,CAAC,oBAE/E,CACT,EAJ+B,CAI/B,CAAC;AACF,UAAU,CAAC,SAAS,GAAG,aAAa,CAAC","sourcesContent":["import React from 'react';\nimport { action } from '@storybook/addon-actions';\n\nimport { ToastView as Toast } from '../ToastView.js';\n\nexport default { title: 'ToastView', parameters: { creevey: { skip: true } } };\n\nexport const SimpleToast = () => <Toast>Changes saved</Toast>;\nSimpleToast.storyName = 'simple toast';\n\nexport const ErrorToast = () => <Toast use=\"error\">Oops</Toast>;\nErrorToast.storyName = 'error toast';\n\nexport const WithAction = () => (\n  <Toast action={{ label: 'Cancel', handler: action('action') }} onClose={action('close')}>\n    Changes saved\n  </Toast>\n);\nWithAction.storyName = 'with action';\n"]}

package/components/Toast/__tests__/Toast-test.d.ts

@@ -0,0 +1 @@
+export {};

package/components/Toast/__tests__/Toast-test.js

@@ -0,0 +1,170 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import React from 'react';
+import { render, screen, act, fireEvent } from '@testing-library/react';
+import { Toast, ToastDataTids } from '../Toast.js';
+vi.useFakeTimers();
+describe('Toast', function () {
+    it('renders', function () {
+        act(function () {
+            expect(function () { return render(React.createElement(Toast, null)); }).not.toThrow();
+        });
+    });
+    it("doesn't throw on push", function () {
+        var toastRef = React.createRef();
+        render(React.createElement(Toast, { ref: toastRef }));
+        act(function () {
+            expect(function () { var _a; return (_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.push('message'); }).not.toThrow();
+        });
+    });
+    it('shows right message', function () {
+        var message = 'message';
+        var toastRef = React.createRef();
+        render(React.createElement(Toast, { ref: toastRef }));
+        act(function () {
+            var _a;
+            (_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.push(message);
+        });
+        expect(screen.getByTestId(ToastDataTids.toastView)).toHaveTextContent(message);
+    });
+    it('hides message after interval', function () {
+        var toastRef = React.createRef();
+        render(React.createElement(Toast, { ref: toastRef }));
+        act(function () {
+            var _a;
+            (_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.push('message');
+        });
+        act(function () {
+            vi.runAllTimers();
+        });
+        expect(screen.queryByTestId(ToastDataTids.toastView)).not.toBeInTheDocument();
+    });
+    it('calls onPush at push', function () {
+        var toastRef = React.createRef();
+        var onPush = vi.fn();
+        render(React.createElement(Toast, { onPush: onPush, ref: toastRef }));
+        act(function () {
+            var _a;
+            (_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.push('somemessage');
+        });
+        act(function () {
+            vi.runAllTimers();
+        });
+        expect(onPush.mock.calls[0][0]).toBe('somemessage');
+        expect(onPush.mock.calls).toHaveLength(1);
+    });
+    it('calls onClose after close', function () {
+        var toastRef = React.createRef();
+        var onClose = vi.fn();
+        render(React.createElement(Toast, { onClose: onClose, ref: toastRef }));
+        act(function () {
+            var _a;
+            (_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.push('message');
+        });
+        act(function () {
+            vi.runAllTimers();
+        });
+        expect(onClose.mock.calls[0][0]).toBe('message');
+        expect(onClose.mock.calls).toHaveLength(1);
+    });
+    /** @deprecated используется старый api метод push */
+    it('support actions in tosts', function () {
+        var actionLabel = 'action';
+        var toastRef = React.createRef();
+        render(React.createElement(Toast, { ref: toastRef }));
+        act(function () {
+            var _a;
+            (_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.push('message', {
+                label: actionLabel,
+                handler: function () { return undefined; },
+            });
+        });
+        expect(screen.getByTestId(ToastDataTids.action)).toBeInTheDocument();
+        expect(screen.getByTestId(ToastDataTids.action)).toHaveTextContent(actionLabel);
+    });
+    /** TODO: в версии 6.0 будет единственным доступным api метода push */
+    it('support actions in tosts with new api', function () {
+        var actionLabel = 'action';
+        var toastRef = React.createRef();
+        render(React.createElement(Toast, { ref: toastRef }));
+        act(function () {
+            var _a;
+            (_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.push('message', {
+                action: {
+                    label: actionLabel,
+                    handler: function () { return undefined; },
+                },
+            });
+        });
+        expect(screen.getByTestId(ToastDataTids.action)).toBeInTheDocument();
+        expect(screen.getByTestId(ToastDataTids.action)).toHaveTextContent(actionLabel);
+    });
+    it('passes right actions in tosts', function () { return __awaiter(void 0, void 0, void 0, function () {
+        var toastRef, handler;
+        return __generator(this, function (_a) {
+            toastRef = React.createRef();
+            handler = vi.fn();
+            render(React.createElement(Toast, { ref: toastRef }));
+            act(function () {
+                var _a;
+                (_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.push('message', {
+                    action: {
+                        label: 'action',
+                        handler: handler,
+                    },
+                });
+            });
+            act(function () {
+                fireEvent.click(screen.getByTestId(ToastDataTids.action));
+            });
+            expect(handler).toHaveBeenCalled();
+            return [2 /*return*/];
+        });
+    }); });
+    it('has correct data-tids', function () {
+        var toastRef = React.createRef();
+        var customDataTid = 'custom-data-tid';
+        render(React.createElement(Toast, { "data-tid": customDataTid, ref: toastRef }));
+        act(function () {
+            var _a;
+            (_a = toastRef.current) === null || _a === void 0 ? void 0 : _a.push('message');
+        });
+        expect(screen.getByTestId(customDataTid)).toBeInTheDocument();
+        expect(screen.getByTestId(ToastDataTids.toastView)).toBeInTheDocument();
+    });
+});
+//# sourceMappingURL=Toast-test.js.map