@skbkontur/react-ui 0.0.0-4c5579465d → 0.0.0-4da47ece08

package/cjs/components/Textarea/TextareaHelpers.js

@@ -1,6 +1,11 @@
-"use strict";exports.__esModule = true;exports.getTextAreaHeight = getTextAreaHeight;function getTextAreaHeight(params) {
+"use strict";exports.__esModule = true;exports.getTextAreaHeight = getTextAreaHeight;var _globalObject = require("@skbkontur/global-object");
+
+function getTextAreaHeight(params) {
+  if (!(0, _globalObject.isBrowser)(_globalObject.globalObject)) {
+    return null;
+  }
   var node = params.node,minRows = params.minRows,maxRows = params.maxRows,extraRow = params.extraRow;
-  var style = getComputedStyle(node);
+  var style = _globalObject.globalObject.getComputedStyle(node);
   var borderTop = style.borderTopWidth ? parseInt(style.borderTopWidth, 10) : 0;
   var borderBottom = style.borderBottomWidth ? parseInt(style.borderBottomWidth, 10) : 0;
   var lineHeight = style.lineHeight ? parseInt(style.lineHeight, 10) : 0;

package/cjs/components/Textarea/TextareaHelpers.js.map

@@ -1 +1 @@
-{"version":3,"sources":["TextareaHelpers.tsx"],"names":["getTextAreaHeight","params","node","minRows","maxRows","extraRow","style","getComputedStyle","borderTop","borderTopWidth","parseInt","borderBottom","borderBottomWidth","lineHeight","paddingTop","paddingBottom","minHeight","maxHeight","extraRowHeight","expectedHeight","scrollHeight","height","Math","min","max","exceededMaxHeight"],"mappings":"qFAAO,SAASA,iBAAT,CAA2BC,MAA3B,EAA4D;AACjE,MAAQC,IAAR,GAA6CD,MAA7C,CAAQC,IAAR,CAAcC,OAAd,GAA6CF,MAA7C,CAAcE,OAAd,CAAuBC,OAAvB,GAA6CH,MAA7C,CAAuBG,OAAvB,CAAgCC,QAAhC,GAA6CJ,MAA7C,CAAgCI,QAAhC;AACA,MAAMC,KAA0B,GAAGC,gBAAgB,CAACL,IAAD,CAAnD;AACA,MAAMM,SAAS,GAAGF,KAAK,CAACG,cAAN,GAAuBC,QAAQ,CAACJ,KAAK,CAACG,cAAP,EAAuB,EAAvB,CAA/B,GAA4D,CAA9E;AACA,MAAME,YAAY,GAAGL,KAAK,CAACM,iBAAN,GAA0BF,QAAQ,CAACJ,KAAK,CAACM,iBAAP,EAA0B,EAA1B,CAAlC,GAAkE,CAAvF;AACA,MAAMC,UAAU,GAAGP,KAAK,CAACO,UAAN,GAAmBH,QAAQ,CAACJ,KAAK,CAACO,UAAP,EAAmB,EAAnB,CAA3B,GAAoD,CAAvE;AACA,MAAMC,UAAU,GAAGR,KAAK,CAACQ,UAAN,GAAmBJ,QAAQ,CAACJ,KAAK,CAACQ,UAAP,EAAmB,EAAnB,CAA3B,GAAoD,CAAvE;AACA,MAAMC,aAAa,GAAGT,KAAK,CAACS,aAAN,GAAsBL,QAAQ,CAACJ,KAAK,CAACS,aAAP,EAAsB,EAAtB,CAA9B,GAA0D,CAAhF;AACA,MAAMC,SAAS,GAAGR,SAAS,GAAGG,YAAZ,GAA2BG,UAA3B,GAAwCC,aAAxC,GAAwDF,UAAU,GAAGV,OAAvF;AACA,MAAMc,SAAS,GAAGT,SAAS,GAAGG,YAAZ,GAA2BG,UAA3B,GAAwCC,aAAxC,GAAwDF,UAAU,GAAGT,OAAvF;AACA,MAAMc,cAAc,GAAGb,QAAQ,GAAGQ,UAAH,GAAgB,CAA/C;AACA,MAAMM,cAAc,GAAGjB,IAAI,CAACkB,YAAL,GAAoBZ,SAApB,GAAgCG,YAAhC,GAA+CO,cAAtE;AACA,SAAO;AACLG,IAAAA,MAAM,EAAEC,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAASL,cAAT,EAAyBH,SAAzB,CAAT,EAA8CC,SAA9C,CADH;AAELQ,IAAAA,iBAAiB,EAAEN,cAAc,GAAGF,SAAS,GAAGC,cAF3C,EAAP;;AAID","sourcesContent":["export function getTextAreaHeight(params: GetTextAreaHeightParams) {\n  const { node, minRows, maxRows, extraRow } = params;\n  const style: CSSStyleDeclaration = getComputedStyle(node);\n  const borderTop = style.borderTopWidth ? parseInt(style.borderTopWidth, 10) : 0;\n  const borderBottom = style.borderBottomWidth ? parseInt(style.borderBottomWidth, 10) : 0;\n  const lineHeight = style.lineHeight ? parseInt(style.lineHeight, 10) : 0;\n  const paddingTop = style.paddingTop ? parseInt(style.paddingTop, 10) : 0;\n  const paddingBottom = style.paddingBottom ? parseInt(style.paddingBottom, 10) : 0;\n  const minHeight = borderTop + borderBottom + paddingTop + paddingBottom + lineHeight * minRows;\n  const maxHeight = borderTop + borderBottom + paddingTop + paddingBottom + lineHeight * maxRows;\n  const extraRowHeight = extraRow ? lineHeight : 0;\n  const expectedHeight = node.scrollHeight + borderTop + borderBottom + extraRowHeight;\n  return {\n    height: Math.min(Math.max(expectedHeight, minHeight), maxHeight),\n    exceededMaxHeight: expectedHeight > maxHeight + extraRowHeight,\n  };\n}\n\ninterface GetTextAreaHeightParams {\n  node: HTMLTextAreaElement;\n  minRows: number;\n  maxRows: number;\n  extraRow: boolean;\n}\n"]}
+{"version":3,"sources":["TextareaHelpers.tsx"],"names":["getTextAreaHeight","params","globalObject","node","minRows","maxRows","extraRow","style","getComputedStyle","borderTop","borderTopWidth","parseInt","borderBottom","borderBottomWidth","lineHeight","paddingTop","paddingBottom","minHeight","maxHeight","extraRowHeight","expectedHeight","scrollHeight","height","Math","min","max","exceededMaxHeight"],"mappings":"qFAAA;;AAEO,SAASA,iBAAT,CAA2BC,MAA3B,EAA4D;AACjE,MAAI,CAAC,6BAAUC,0BAAV,CAAL,EAA8B;AAC5B,WAAO,IAAP;AACD;AACD,MAAQC,IAAR,GAA6CF,MAA7C,CAAQE,IAAR,CAAcC,OAAd,GAA6CH,MAA7C,CAAcG,OAAd,CAAuBC,OAAvB,GAA6CJ,MAA7C,CAAuBI,OAAvB,CAAgCC,QAAhC,GAA6CL,MAA7C,CAAgCK,QAAhC;AACA,MAAMC,KAAK,GAAGL,2BAAaM,gBAAb,CAA8BL,IAA9B,CAAd;AACA,MAAMM,SAAS,GAAGF,KAAK,CAACG,cAAN,GAAuBC,QAAQ,CAACJ,KAAK,CAACG,cAAP,EAAuB,EAAvB,CAA/B,GAA4D,CAA9E;AACA,MAAME,YAAY,GAAGL,KAAK,CAACM,iBAAN,GAA0BF,QAAQ,CAACJ,KAAK,CAACM,iBAAP,EAA0B,EAA1B,CAAlC,GAAkE,CAAvF;AACA,MAAMC,UAAU,GAAGP,KAAK,CAACO,UAAN,GAAmBH,QAAQ,CAACJ,KAAK,CAACO,UAAP,EAAmB,EAAnB,CAA3B,GAAoD,CAAvE;AACA,MAAMC,UAAU,GAAGR,KAAK,CAACQ,UAAN,GAAmBJ,QAAQ,CAACJ,KAAK,CAACQ,UAAP,EAAmB,EAAnB,CAA3B,GAAoD,CAAvE;AACA,MAAMC,aAAa,GAAGT,KAAK,CAACS,aAAN,GAAsBL,QAAQ,CAACJ,KAAK,CAACS,aAAP,EAAsB,EAAtB,CAA9B,GAA0D,CAAhF;AACA,MAAMC,SAAS,GAAGR,SAAS,GAAGG,YAAZ,GAA2BG,UAA3B,GAAwCC,aAAxC,GAAwDF,UAAU,GAAGV,OAAvF;AACA,MAAMc,SAAS,GAAGT,SAAS,GAAGG,YAAZ,GAA2BG,UAA3B,GAAwCC,aAAxC,GAAwDF,UAAU,GAAGT,OAAvF;AACA,MAAMc,cAAc,GAAGb,QAAQ,GAAGQ,UAAH,GAAgB,CAA/C;AACA,MAAMM,cAAc,GAAGjB,IAAI,CAACkB,YAAL,GAAoBZ,SAApB,GAAgCG,YAAhC,GAA+CO,cAAtE;AACA,SAAO;AACLG,IAAAA,MAAM,EAAEC,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAASL,cAAT,EAAyBH,SAAzB,CAAT,EAA8CC,SAA9C,CADH;AAELQ,IAAAA,iBAAiB,EAAEN,cAAc,GAAGF,SAAS,GAAGC,cAF3C,EAAP;;AAID","sourcesContent":["import { globalObject, isBrowser } from '@skbkontur/global-object';\n\nexport function getTextAreaHeight(params: GetTextAreaHeightParams) {\n  if (!isBrowser(globalObject)) {\n    return null;\n  }\n  const { node, minRows, maxRows, extraRow } = params;\n  const style = globalObject.getComputedStyle(node);\n  const borderTop = style.borderTopWidth ? parseInt(style.borderTopWidth, 10) : 0;\n  const borderBottom = style.borderBottomWidth ? parseInt(style.borderBottomWidth, 10) : 0;\n  const lineHeight = style.lineHeight ? parseInt(style.lineHeight, 10) : 0;\n  const paddingTop = style.paddingTop ? parseInt(style.paddingTop, 10) : 0;\n  const paddingBottom = style.paddingBottom ? parseInt(style.paddingBottom, 10) : 0;\n  const minHeight = borderTop + borderBottom + paddingTop + paddingBottom + lineHeight * minRows;\n  const maxHeight = borderTop + borderBottom + paddingTop + paddingBottom + lineHeight * maxRows;\n  const extraRowHeight = extraRow ? lineHeight : 0;\n  const expectedHeight = node.scrollHeight + borderTop + borderBottom + extraRowHeight;\n  return {\n    height: Math.min(Math.max(expectedHeight, minHeight), maxHeight),\n    exceededMaxHeight: expectedHeight > maxHeight + extraRowHeight,\n  };\n}\n\ninterface GetTextAreaHeightParams {\n  node: HTMLTextAreaElement;\n  minRows: number;\n  maxRows: number;\n  extraRow: boolean;\n}\n"]}

package/cjs/components/Textarea/TextareaWithSafari17Workaround.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * React textarea behaves incorrectly on first rendered in Safari version 17.*
+ * Reproduce: https://codesandbox.io/p/sandbox/textarea-and-textarea-safari-bug-9v95vz
+ */
+export declare const TextareaWithSafari17Workaround: import("../../lib/forwardRefAndName").ReactUIComponentWithRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>> & Record<never, never>;

package/cjs/components/Textarea/TextareaWithSafari17Workaround.js

@@ -0,0 +1,20 @@
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.TextareaWithSafari17Workaround = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react = _interopRequireDefault(require("react"));
+
+var _forwardRefAndName = require("../../lib/forwardRefAndName");
+
+/**
+ * React textarea behaves incorrectly on first rendered in Safari version 17.*
+ * Reproduce: https://codesandbox.io/p/sandbox/textarea-and-textarea-safari-bug-9v95vz
+ */
+var TextareaWithSafari17Workaround = (0, _forwardRefAndName.forwardRefAndName)(
+
+
+'TextareaWithSafari17Workaround', function (props, ref) {
+  var _React$useState = _react.default.useState(true),firstRender = _React$useState[0],setFirstRender = _React$useState[1];
+
+  _react.default.useEffect(function () {
+    firstRender && setFirstRender(false);
+  }, []);
+
+  return /*#__PURE__*/_react.default.createElement("textarea", (0, _extends2.default)({}, props, { value: firstRender ? '' : props.value, ref: ref }));
+});exports.TextareaWithSafari17Workaround = TextareaWithSafari17Workaround;

package/cjs/components/Textarea/TextareaWithSafari17Workaround.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["TextareaWithSafari17Workaround.tsx"],"names":["TextareaWithSafari17Workaround","props","ref","React","useState","firstRender","setFirstRender","useEffect","value"],"mappings":"sQAAA;;AAEA;;AAEA;AACA;AACA;AACA;AACO,IAAMA,8BAA8B,GAAG;;;AAG5C,gCAH4C,EAGV,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAClD,wBAAsCC,eAAMC,QAAN,CAAe,IAAf,CAAtC,CAAOC,WAAP,sBAAoBC,cAApB;;AAEAH,iBAAMI,SAAN,CAAgB,YAAM;AACpBF,IAAAA,WAAW,IAAIC,cAAc,CAAC,KAAD,CAA7B;AACD,GAFD,EAEG,EAFH;;AAIA,sBAAO,oEAAcL,KAAd,IAAqB,KAAK,EAAEI,WAAW,GAAG,EAAH,GAAQJ,KAAK,CAACO,KAArD,EAA4D,GAAG,EAAEN,GAAjE,IAAP;AACD,CAX6C,CAAvC,C","sourcesContent":["import React from 'react';\n\nimport { forwardRefAndName } from '../../lib/forwardRefAndName';\n\n/**\n * React textarea behaves incorrectly on first rendered in Safari version 17.*\n * Reproduce: https://codesandbox.io/p/sandbox/textarea-and-textarea-safari-bug-9v95vz\n */\nexport const TextareaWithSafari17Workaround = forwardRefAndName<\n  HTMLTextAreaElement,\n  React.TextareaHTMLAttributes<HTMLTextAreaElement>\n>('TextareaWithSafari17Workaround', (props, ref) => {\n  const [firstRender, setFirstRender] = React.useState(true);\n\n  React.useEffect(() => {\n    firstRender && setFirstRender(false);\n  }, []);\n\n  return <textarea {...props} value={firstRender ? '' : props.value} ref={ref} />;\n});\n"]}

package/cjs/components/Toast/Toast.d.ts

@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
+import { ThemeIn } from '../../lib/theming/Theme';
 import { Nullable } from '../../typings/utility-types';
 import { CommonProps } from '../../internal/CommonWrapper';
 import { ToastView } from './ToastView';
 export interface Action {
     label: string;
     handler: () => void;
+    'aria-label'?: string;
 }
 export interface ToastState {
     notification: Nullable<string>;
@@ -12,9 +14,14 @@ export interface ToastState {
     id: number;
     showTime: Nullable<number>;
 }
-export interface ToastProps extends CommonProps {
+export interface ToastProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {
     onPush?: (notification: string, action?: Action) => void;
     onClose?: (notification: string, action?: Action) => void;
+    /**
+     * Обычный объект с переменными темы.
+     * Он будет объединён с темой из контекста.
+     */
+    theme?: ThemeIn;
 }
 export declare const ToastDataTids: {
     readonly toastStatic: "StaticToast";
@@ -26,14 +33,16 @@ export declare const ToastDataTids: {
  * Показывает уведомления.
  *
  * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.
- * Однако, при его использовании не работает кастомизация и могут быть проблемы
- * с перекрытием уведомления другими элементами страницы.
+ * Однако, при его использовании не работает кастомизация, они не поддерживаются в `React@18`, а также могут быть проблемы с перекрытием уведомления другими элементами страницы.
+ *
+ * Для статических тостов <u>рекомендуется</u> использовать компонент [SingleToast](https://tech.skbkontur.ru/react-ui/#/Components/SingleToast) - в нём исправлены эти проблемы.
  *
- * Рекомендуется использовать Toast через `ref` (см. примеры).
  */
 export declare class Toast extends React.Component<ToastProps, ToastState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     private setRootNode;
+    private theme;
     static push(notification: string, action?: Nullable<Action>, showTime?: number): void;
     static close(): void;
     _toast: Nullable<ToastView>;

package/cjs/components/Toast/Toast.js

@@ -1,12 +1,15 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ToastDataTids = exports.Toast = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.ToastDataTids = exports.Toast = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _reactTransitionGroup = require("react-transition-group");
+var _globalObject = require("@skbkontur/global-object");
+
+var _ThemeFactory = require("../../lib/theming/ThemeFactory");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _RenderContainer = require("../../internal/RenderContainer");
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _currentEnvironment = require("../../lib/currentEnvironment");
 var _rootNode = require("../../lib/rootNode");
-var _SSRSafe = require("../../lib/SSRSafe");
 
 var _Toast = require("./Toast.styles");
 var _ToastView = require("./ToastView");
@@ -25,6 +28,12 @@ var _ToastStatic = require("./ToastStatic");var _class, _class2, _temp;
 
 
 
+
+
+
+
+
+
 
 
 
@@ -40,16 +49,19 @@ var ToastDataTids = {
  * Показывает уведомления.
  *
  * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.
- * Однако, при его использовании не работает кастомизация и могут быть проблемы
- * с перекрытием уведомления другими элементами страницы.
+ * Однако, при его использовании не работает кастомизация, они не поддерживаются в `React@18`, а также могут быть проблемы с перекрытием уведомления другими элементами страницы.
+ *
+ * Для статических тостов <u>рекомендуется</u> использовать компонент [SingleToast](https://tech.skbkontur.ru/react-ui/#/Components/SingleToast) - в нём исправлены эти проблемы.
  *
- * Рекомендуется использовать Toast через `ref` (см. примеры).
  */exports.ToastDataTids = ToastDataTids;var
 
 Toast = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Toast, _React$Component);Toast.
 
 
 
+
+
+
   push = function push(notification, action, showTime) {
     _ToastStatic.ToastStatic.push(notification, action, showTime);
   };Toast.
@@ -63,7 +75,16 @@ Toast = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
 
   function Toast(props) {var _this;
-    _this = _React$Component.call(this, props) || this;_this._timeout = null;_this.rootRef = /*#__PURE__*/_react.default.createRef();_this.
+    _this = _React$Component.call(this, props) || this;_this.rootRef = /*#__PURE__*/_react.default.createRef();_this.
+
+
+
+
+
+
+
+
+
 
 
 
@@ -151,6 +172,7 @@ Toast = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
 
 
+
 
 
     setRootRef = function (element) {
@@ -161,7 +183,7 @@ Toast = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
     _clearTimer = function () {
       if (_this._timeout) {
-        clearTimeout(_this._timeout);
+        _globalObject.globalObject.clearTimeout(_this._timeout);
         _this._timeout = null;
       }
     };_this.
@@ -171,13 +193,12 @@ Toast = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
       var showTime = _this.state.action ? 7000 : 3000;
       showTime = (_this$state$showTime = _this.state.showTime) != null ? _this$state$showTime : showTime;
-      //@ts-expect-error error
-      _this._timeout = _SSRSafe.globalThat.setTimeout(_this.close, showTime);
+      _this._timeout = _globalObject.globalObject.setTimeout(_this.close, showTime);
     };_this.
 
     _refToast = function (element) {
       _this._toast = element;
-    };_this.state = { notification: null, action: null, id: 0, showTime: null };return _this;}var _proto = Toast.prototype;_proto.componentWillUnmount = function componentWillUnmount() {this._clearTimer();};_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, this._renderToast()));} /**
+    };_this.state = { notification: null, action: null, id: 0, showTime: null };return _this;}var _proto = Toast.prototype;_proto.componentWillUnmount = function componentWillUnmount() {this._clearTimer();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = _this2.props.theme ? _ThemeFactory.ThemeFactory.create(_this2.props.theme, theme) : theme;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.TransitionGroup, null, _this2._renderToast())));});} /**
    * Показывает тост с `notification` в качестве сообщения.
    * Тост автоматически скрывается через 3 или 7 секунд,
    * в зависимости от наличия у него кнопки `action`.
@@ -190,4 +211,4 @@ Toast = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
    * @param {number} showTime Время существования Toast в миллисекундах
    */;_proto.push = function push(notification, action, showTime) {if (this.state.notification) {this.close();}safelyCall(this.props.onPush, notification, action);this.setState(function (_ref) {var id = _ref.id;return { notification: notification, action: action, id: id + 1, showTime: showTime };}, this._setTimer);} /**
    * @public
-   */;_proto._renderToast = function _renderToast() {var _this$state = this.state,notification = _this$state.notification,action = _this$state.action,id = _this$state.id;if (!notification) {return null;}var toastProps = { onMouseEnter: this._clearTimer, onMouseLeave: this._setTimer, onClose: this.close, children: notification, action: action };return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, { key: id, classNames: { enter: _Toast.styles.enter(), enterActive: _Toast.styles.enterActive(), exit: _Toast.styles.exit(), exitActive: _Toast.styles.exitActive() }, timeout: { enter: 200, exit: 150 }, enter: !_currentEnvironment.isTestEnv, exit: !_currentEnvironment.isTestEnv, nodeRef: this.rootRef }, /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootRef }, this.props), /*#__PURE__*/_react.default.createElement(_ToastView.ToastView, (0, _extends2.default)({ ref: this._refToast }, toastProps))));};return Toast;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Toast', _temp)) || _class;exports.Toast = Toast;function safelyCall(fn) {if (fn) {for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {args[_key - 1] = arguments[_key];}fn.apply(void 0, args);}}
+   */;_proto._renderToast = function _renderToast() {var _this$state = this.state,notification = _this$state.notification,action = _this$state.action,id = _this$state.id;if (!notification) {return null;}var toastProps = { onMouseEnter: this._clearTimer, onMouseLeave: this._setTimer, onClose: this.close, children: notification, 'aria-label': this.props['aria-label'], action: action };return /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, { key: id, classNames: { enter: _Toast.styles.enter(), enterActive: _Toast.styles.enterActive(), exit: _Toast.styles.exit(), exitActive: _Toast.styles.exitActive() }, timeout: { enter: 200, exit: 150 }, enter: !_currentEnvironment.isTestEnv, exit: !_currentEnvironment.isTestEnv, nodeRef: this.rootRef }, /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootRef }, this.props), /*#__PURE__*/_react.default.createElement(_ToastView.ToastView, (0, _extends2.default)({ ref: this._refToast }, toastProps))));};return Toast;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Toast', _class2.displayName = 'Toast', _temp)) || _class;exports.Toast = Toast;function safelyCall(fn) {if (fn) {for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {args[_key - 1] = arguments[_key];}fn.apply(void 0, args);}}

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

@@ -1 +1 @@
-{"version":3,"sources":["Toast.tsx"],"names":["ToastDataTids","toastStatic","toastView","action","close","Toast","rootNode","push","notification","showTime","ToastStatic","props","_timeout","rootRef","React","createRef","safelyCall","onClose","state","setState","setRootRef","element","setRootNode","current","_clearTimer","clearTimeout","_setTimer","globalThat","setTimeout","_refToast","_toast","id","componentWillUnmount","render","_renderToast","onPush","toastProps","onMouseEnter","onMouseLeave","children","enter","styles","enterActive","exit","exitActive","isTestEnv","Component","__KONTUR_REACT_UI__","fn","args"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\n\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { Nullable } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { globalThat } from '../../lib/SSRSafe';\n\nimport { styles } from './Toast.styles';\nimport { ToastView, ToastViewProps } from './ToastView';\nimport { ToastStatic } from './ToastStatic';\n\nexport interface Action {\n  label: string;\n  handler: () => void;\n}\n\nexport interface ToastState {\n  notification: Nullable<string>;\n  action: Nullable<Action>;\n  id: number;\n  showTime: Nullable<number>;\n}\n\nexport interface ToastProps extends CommonProps {\n  onPush?: (notification: string, action?: Action) => void;\n  onClose?: (notification: string, action?: Action) => void;\n}\n\nexport const ToastDataTids = {\n  toastStatic: 'StaticToast',\n  toastView: 'ToastView__root',\n  action: 'ToastView__action',\n  close: 'ToastView__close',\n} as const;\n\n/**\n * Показывает уведомления.\n *\n * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.\n * Однако, при его использовании не работает кастомизация и могут быть проблемы\n * с перекрытием уведомления другими элементами страницы.\n *\n * Рекомендуется использовать Toast через `ref` (см. примеры).\n */\n@rootNode\nexport class Toast extends React.Component<ToastProps, ToastState> {\n  public static __KONTUR_REACT_UI__ = 'Toast';\n  private setRootNode!: TSetRootNode;\n\n  public static push(notification: string, action?: Nullable<Action>, showTime?: number) {\n    ToastStatic.push(notification, action, showTime);\n  }\n\n  public static close() {\n    ToastStatic.close();\n  }\n\n  public _toast: Nullable<ToastView>;\n  private _timeout: Nullable<number> = null;\n  private rootRef = React.createRef<HTMLElement>();\n\n  constructor(props: ToastProps) {\n    super(props);\n    this.state = {\n      notification: null,\n      action: null,\n      id: 0,\n      showTime: null,\n    };\n  }\n\n  public componentWillUnmount() {\n    this._clearTimer();\n  }\n\n  public render() {\n    return (\n      <RenderContainer>\n        <TransitionGroup>{this._renderToast()}</TransitionGroup>\n      </RenderContainer>\n    );\n  }\n\n  /**\n   * Показывает тост с `notification` в качестве сообщения.\n   * Тост автоматически скрывается через 3 или 7 секунд,\n   * в зависимости от наличия у него кнопки `action`.\n   * Время показа можно задать вручную, передав `showTime`.\n   *\n   * @public\n   * @param {string} notification\n   * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`\n   * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler\n   * @param {number} showTime Время существования Toast в миллисекундах\n   */\n  public push(notification: string, action?: Nullable<Action>, showTime?: number) {\n    if (this.state.notification) {\n      this.close();\n    }\n\n    safelyCall(this.props.onPush, notification, action);\n\n    this.setState(({ id }) => ({ notification, action, id: id + 1, showTime }), this._setTimer);\n  }\n\n  /**\n   * @public\n   */\n  public close = () => {\n    safelyCall(this.props.onClose, this.state.notification, this.state.action);\n    this.setState({ notification: null, action: null });\n  };\n\n  private _renderToast() {\n    const { notification, action, id } = this.state;\n\n    if (!notification) {\n      return null;\n    }\n\n    const toastProps: ToastViewProps = {\n      onMouseEnter: this._clearTimer,\n      onMouseLeave: this._setTimer,\n      onClose: this.close,\n      children: notification,\n      action,\n    };\n\n    return (\n      <CSSTransition\n        key={id}\n        classNames={{\n          enter: styles.enter(),\n          enterActive: styles.enterActive(),\n          exit: styles.exit(),\n          exitActive: styles.exitActive(),\n        }}\n        timeout={{\n          enter: 200,\n          exit: 150,\n        }}\n        enter={!isTestEnv}\n        exit={!isTestEnv}\n        nodeRef={this.rootRef}\n      >\n        <CommonWrapper rootNodeRef={this.setRootRef} {...this.props}>\n          <ToastView ref={this._refToast} {...toastProps} />\n        </CommonWrapper>\n      </CSSTransition>\n    );\n  }\n\n  private setRootRef = (element: Nullable<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    //@ts-expect-error error\n    this._timeout = globalThat.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"]}
+{"version":3,"sources":["Toast.tsx"],"names":["ToastDataTids","toastStatic","toastView","action","close","Toast","rootNode","push","notification","showTime","ToastStatic","props","rootRef","React","createRef","safelyCall","onClose","state","setState","setRootRef","element","setRootNode","current","_clearTimer","_timeout","globalObject","clearTimeout","_setTimer","setTimeout","_refToast","_toast","id","componentWillUnmount","render","theme","ThemeFactory","create","_renderToast","onPush","toastProps","onMouseEnter","onMouseLeave","children","enter","styles","enterActive","exit","exitActive","isTestEnv","Component","__KONTUR_REACT_UI__","displayName","fn","args"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport { CSSTransition, TransitionGroup } from 'react-transition-group';\nimport { globalObject, SafeTimer } from '@skbkontur/global-object';\n\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { Nullable } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Toast.styles';\nimport { ToastView, ToastViewProps } from './ToastView';\nimport { ToastStatic } from './ToastStatic';\n\nexport interface Action {\n  label: string;\n  handler: () => void;\n  'aria-label'?: string;\n}\n\nexport interface ToastState {\n  notification: Nullable<string>;\n  action: Nullable<Action>;\n  id: number;\n  showTime: Nullable<number>;\n}\n\nexport interface ToastProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {\n  onPush?: (notification: string, action?: Action) => void;\n  onClose?: (notification: string, action?: Action) => void;\n  /**\n   * Обычный объект с переменными темы.\n   * Он будет объединён с темой из контекста.\n   */\n  theme?: ThemeIn;\n}\n\nexport const ToastDataTids = {\n  toastStatic: 'StaticToast',\n  toastView: 'ToastView__root',\n  action: 'ToastView__action',\n  close: 'ToastView__close',\n} as const;\n\n/**\n * Показывает уведомления.\n *\n * Доступен статический метод: `Toast.push(notification, action?, showTime?)`.\n * Однако, при его использовании не работает кастомизация, они не поддерживаются в `React@18`, а также могут быть проблемы с перекрытием уведомления другими элементами страницы.\n *\n * Для статических тостов <u>рекомендуется</u> использовать компонент [SingleToast](https://tech.skbkontur.ru/react-ui/#/Components/SingleToast) - в нём исправлены эти проблемы.\n *\n */\n@rootNode\nexport class Toast extends React.Component<ToastProps, ToastState> {\n  public static __KONTUR_REACT_UI__ = 'Toast';\n  public static displayName = 'Toast';\n\n  private setRootNode!: TSetRootNode;\n  private theme!: Theme;\n\n  public static push(notification: string, action?: Nullable<Action>, showTime?: number) {\n    ToastStatic.push(notification, action, showTime);\n  }\n\n  public static close() {\n    ToastStatic.close();\n  }\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    };\n  }\n\n  public componentWillUnmount() {\n    this._clearTimer();\n  }\n\n  public render() {\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`.\n   * Время показа можно задать вручную, передав `showTime`.\n   *\n   * @public\n   * @param {string} notification\n   * @param {Action} action `action` опциональный параметр формата `{ label: string, handler: function }`\n   * добавляет кнопку в виде ссылки при клике на которую вызывается переданный handler\n   * @param {number} showTime Время существования Toast в миллисекундах\n   */\n  public push(notification: string, action?: Nullable<Action>, showTime?: number) {\n    if (this.state.notification) {\n      this.close();\n    }\n\n    safelyCall(this.props.onPush, notification, action);\n\n    this.setState(({ id }) => ({ notification, action, id: id + 1, showTime }), this._setTimer);\n  }\n\n  /**\n   * @public\n   */\n  public close = () => {\n    safelyCall(this.props.onClose, this.state.notification, this.state.action);\n    this.setState({ notification: null, action: null });\n  };\n\n  private _renderToast() {\n    const { notification, action, id } = this.state;\n\n    if (!notification) {\n      return null;\n    }\n\n    const toastProps: ToastViewProps = {\n      onMouseEnter: this._clearTimer,\n      onMouseLeave: this._setTimer,\n      onClose: this.close,\n      children: notification,\n      'aria-label': this.props['aria-label'],\n      action,\n    };\n\n    return (\n      <CSSTransition\n        key={id}\n        classNames={{\n          enter: styles.enter(),\n          enterActive: styles.enterActive(),\n          exit: styles.exit(),\n          exitActive: styles.exitActive(),\n        }}\n        timeout={{\n          enter: 200,\n          exit: 150,\n        }}\n        enter={!isTestEnv}\n        exit={!isTestEnv}\n        nodeRef={this.rootRef}\n      >\n        <CommonWrapper rootNodeRef={this.setRootRef} {...this.props}>\n          <ToastView ref={this._refToast} {...toastProps} />\n        </CommonWrapper>\n      </CSSTransition>\n    );\n  }\n\n  private setRootRef = (element: Nullable<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      globalObject.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 = globalObject.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/cjs/components/Toast/Toast.md

@@ -67,108 +67,3 @@ class Toaster extends React.Component {
 
 <Toaster />;
 ```
-
-### SuperToast
-
-Вы можете объединить удобство статических методов и кастамизируемость классического способа через `ref`.
-Для этого можно добавить обёртку, которая позволяет Toast работать по примеру GlobalLoader.
-
-Т.е. кастомный Toast можно добавить в единственном месте в проекте, а статические методы будут всегда использовать последний отрендеренный экземпляр Toast:
-
-Также в обёртке можно изменить логику появления всплывашки, по рекомендации Гайдов:
-https://guides.kontur.ru/components/toast/#08
-```static
-«Всегда показывается только 1 тост. Перед появлением следующего тоста, текущий скрывается, даже если время его показа еще не истекло»
-```
-
-Для этого немного изменим метод `SuperToast.close` с помощью специального метода `ReactDOM.flushSync`.
-
-Итоговый вариант:
-```js static
-const SuperToast = (props) => <Toast ref={SuperToast.ref} {...props} />;
-SuperToast.ref = React.createRef();
-SuperToast.push = (...args) => {
-  SuperToast.close();
-  SuperToast.ref.current && SuperToast.ref.current.push(...args);
-};
-SuperToast.close = () => {
-  ReactDOM.flushSync(() => {
-    SuperToast.ref.current && SuperToast.ref.current.close();
-  });
-};
-
-```
-
-
-Версия на typescript:
-```typescript static
-class SuperToast extends React.Component<ToastProps> {
-  public static ref = React.createRef<Toast>();
-  public static push: typeof Toast.push = (...args) => {
-    SuperToast.close();
-    SuperToast.ref.current?.push(...args);
-  };
-  public static close: typeof Toast.close = () => {
-    ReactDOM.flushSync(() => SuperToast.ref.current?.close());
-  };
-  render = () => {
-    return <Toast ref={SuperToast.ref} {...this.props} />;
-  };
-}
-```
-
-
-```jsx harmony
-import { Button, Toast, ThemeContext, ThemeFactory, THEME_2022 } from '@skbkontur/react-ui';
-import ReactDOM from 'react-dom';
-
-const SuperToast = (props) => <Toast ref={SuperToast.ref} {...props} />;
-SuperToast.ref = React.createRef();
-SuperToast.push = (...args) => {
-  SuperToast.close();
-  SuperToast.ref.current && SuperToast.ref.current.push(...args);
-};
-SuperToast.close = () => {
-  ReactDOM.flushSync(() => {
-    SuperToast.ref.current && SuperToast.ref.current.close();
-  });
-};
-
-const RedToast = () => (
-  <ThemeContext.Consumer>
-    {(theme) => {
-      return <ThemeContext.Provider
-        value={ThemeFactory.create(
-          {
-            toastBg: "rgba(210, 15, 0, 0.76)",
-            toastLinkBgActive: "rgba(210, 15, 0, 0.76)"
-          },
-          theme
-        )}
-      >
-        <SuperToast />
-      </ThemeContext.Provider>
-    }}
-  </ThemeContext.Consumer>
-);
-
-const rand = () => "Пример красного тоста №" + Math.round(Math.random() * 100).toString();
-
-const push = () => {
-  SuperToast.push(rand(), {
-    label: "Cancel",
-    handler: () => SuperToast.push("Canceled")
-  });
-};
-
-<div>
-  <RedToast />
-  <span />
-  <span />
-  <span />
-  <Button onClick={push}>
-    Show super red toast
-  </Button>
-</div>
-;
-```

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

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 var styles = (0, _Emotion.memoizeStyle)({
   enter: function enter() {

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

@@ -1 +1 @@
-{"version":3,"sources":["Toast.styles.ts"],"names":["styles","enter","css","enterActive","exit","exitActive"],"mappings":"4QAAA,oD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,KADiC,mBACzB;AACN,eAAOC,YAAP;;;AAGD,GALgC;AAMjCC,EAAAA,WANiC,yBAMnB;AACZ,eAAOD,YAAP;;;;AAID,GAXgC;AAYjCE,EAAAA,IAZiC,kBAY1B;AACL,eAAOF,YAAP;;;;AAID,GAjBgC;AAkBjCG,EAAAA,UAlBiC,wBAkBpB;AACX,eAAOH,YAAP;;;;AAID,GAvBgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  enter() {\n    return css`\n      transform: translateY(-40px);\n    `;\n  },\n  enterActive() {\n    return css`\n      transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n      transform: translateY(0) !important;\n    `;\n  },\n  exit() {\n    return css`\n      transform: translateY(0);\n      opacity: 1;\n    `;\n  },\n  exitActive() {\n    return css`\n      opacity: 0.01 !important;\n      transition: opacity 0.15s ease-out;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Toast.styles.ts"],"names":["styles","enter","css","enterActive","exit","exitActive"],"mappings":"oRAAA,oD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,KADiC,mBACzB;AACN,eAAOC,YAAP;;;AAGD,GALgC;AAMjCC,EAAAA,WANiC,yBAMnB;AACZ,eAAOD,YAAP;;;;AAID,GAXgC;AAYjCE,EAAAA,IAZiC,kBAY1B;AACL,eAAOF,YAAP;;;;AAID,GAjBgC;AAkBjCG,EAAAA,UAlBiC,wBAkBpB;AACX,eAAOH,YAAP;;;;AAID,GAvBgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  enter() {\n    return css`\n      transform: translateY(-40px);\n    `;\n  },\n  enterActive() {\n    return css`\n      transition: transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1);\n      transform: translateY(0) !important;\n    `;\n  },\n  exit() {\n    return css`\n      transform: translateY(0);\n      opacity: 1;\n    `;\n  },\n  exitActive() {\n    return css`\n      opacity: 0.01 !important;\n      transition: opacity 0.15s ease-out;\n    `;\n  },\n});\n"]}

package/cjs/components/Toast/ToastStatic.js

@@ -1,16 +1,16 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ToastStatic = void 0;var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.ToastStatic = void 0;var _react = _interopRequireDefault(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
+var _globalObject = require("@skbkontur/global-object");
 
 
-var _SSRSafe = require("../../lib/SSRSafe");
 
 var _Toast = require("./Toast");var
 
 ToastStatic = function ToastStatic() {};exports.ToastStatic = ToastStatic;ToastStatic.
 push = function (notification, action, showTime) {
-  if (!ToastStatic.node) {
-    ToastStatic.node = _SSRSafe.renderTarget.createElement('div');
-    var body = _SSRSafe.renderTarget.body;
+  if (!ToastStatic.node && _globalObject.globalObject.document) {
+    ToastStatic.node = _globalObject.globalObject.document.createElement('div');
+    var body = _globalObject.globalObject.document.body;
     if (!body) {
       throw Error('There is no "body" element in "document"');
     }

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

@@ -1 +1 @@
-{"version":3,"sources":["ToastStatic.tsx"],"names":["ToastStatic","push","notification","action","showTime","node","renderTarget","createElement","body","Error","appendChild","ReactDOM","render","ToastDataTids","toastStatic","el","instance","_push","close"],"mappings":"yJAAA;AACA;;;AAGA;;AAEA,gC;;AAEaA,W,+DAAAA,W;AACGC,I,GAAO,UAACC,YAAD,EAAuBC,MAAvB,EAAkDC,QAAlD,EAAwE;AAC3F,MAAI,CAACJ,WAAW,CAACK,IAAjB,EAAuB;AACrBL,IAAAA,WAAW,CAACK,IAAZ,GAAmBC,sBAAaC,aAAb,CAA2B,KAA3B,CAAnB;AACA,QAAQC,IAAR,GAAiBF,qBAAjB,CAAQE,IAAR;AACA,QAAI,CAACA,IAAL,EAAW;AACT,YAAMC,KAAK,CAAC,0CAAD,CAAX;AACD;AACDD,IAAAA,IAAI,CAACE,WAAL,CAAiBV,WAAW,CAACK,IAA7B;;AAEAM,sBAASC,MAAT;AACE,iCAAC,YAAD,IAAO,YAAUC,qBAAcC,WAA/B,EAA4C,GAAG,EAAE,aAACC,EAAD,UAASf,WAAW,CAACgB,QAAZ,GAAuBD,EAAhC,EAAjD,GADF;AAEEf,IAAAA,WAAW,CAACK,IAFd;AAGE,wBAAML,WAAW,CAACiB,KAAZ,CAAkBf,YAAlB,EAAgCC,MAAhC,EAAwCC,QAAxC,CAAN,EAHF;;AAKD,GAbD,MAaO;AACLJ,IAAAA,WAAW,CAACiB,KAAZ,CAAkBf,YAAlB,EAAgCC,MAAhC,EAAwCC,QAAxC;AACD;AACF,C,CAlBUJ,W;;AAoBGiB,K,GAAQ,UAACf,YAAD,EAAuBC,MAAvB,EAAkDC,QAAlD,EAAwE;AAC5F,MAAIJ,WAAW,CAACgB,QAAhB,EAA0B;AACxBhB,IAAAA,WAAW,CAACgB,QAAZ,CAAqBf,IAArB,CAA0BC,YAA1B,EAAwCC,MAAxC,EAAgDC,QAAhD;AACD;AACF,C,CAxBUJ,W;;AA0BGkB,K,GAAQ,YAAM;AAC1B,MAAIlB,WAAW,CAACgB,QAAhB,EAA0B;AACxBhB,IAAAA,WAAW,CAACgB,QAAZ,CAAqBE,KAArB;AACD;AACF,C,CA9BUlB,W;;;AAiCIgB,Q,GAA4B,I","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { renderTarget } from '../../lib/SSRSafe';\n\nimport { Toast, Action, ToastDataTids } from './Toast';\n\nexport class ToastStatic {\n  public static push = (notification: string, action?: Nullable<Action>, showTime?: number) => {\n    if (!ToastStatic.node) {\n      ToastStatic.node = renderTarget.createElement('div');\n      const { body } = renderTarget;\n      if (!body) {\n        throw Error('There is no \"body\" element in \"document\"');\n      }\n      body.appendChild(ToastStatic.node);\n\n      ReactDOM.render(\n        <Toast data-tid={ToastDataTids.toastStatic} ref={(el) => (ToastStatic.instance = el)} />,\n        ToastStatic.node,\n        () => ToastStatic._push(notification, action, showTime),\n      );\n    } else {\n      ToastStatic._push(notification, action, showTime);\n    }\n  };\n\n  public static _push = (notification: string, action?: Nullable<Action>, showTime?: number) => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.push(notification, action, showTime);\n    }\n  };\n\n  public static close = () => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.close();\n    }\n  };\n\n  private static node: HTMLDivElement;\n  private static instance: Nullable<Toast> = null;\n}\n"]}
+{"version":3,"sources":["ToastStatic.tsx"],"names":["ToastStatic","push","notification","action","showTime","node","globalObject","document","createElement","body","Error","appendChild","ReactDOM","render","ToastDataTids","toastStatic","el","instance","_push","close"],"mappings":"iKAAA;AACA;AACA;;;;AAIA,gC;;AAEaA,W,+DAAAA,W;AACGC,I,GAAO,UAACC,YAAD,EAAuBC,MAAvB,EAAkDC,QAAlD,EAAwE;AAC3F,MAAI,CAACJ,WAAW,CAACK,IAAb,IAAqBC,2BAAaC,QAAtC,EAAgD;AAC9CP,IAAAA,WAAW,CAACK,IAAZ,GAAmBC,2BAAaC,QAAb,CAAsBC,aAAtB,CAAoC,KAApC,CAAnB;AACA,QAAQC,IAAR,GAAiBH,2BAAaC,QAA9B,CAAQE,IAAR;AACA,QAAI,CAACA,IAAL,EAAW;AACT,YAAMC,KAAK,CAAC,0CAAD,CAAX;AACD;AACDD,IAAAA,IAAI,CAACE,WAAL,CAAiBX,WAAW,CAACK,IAA7B;;AAEAO,sBAASC,MAAT;AACE,iCAAC,YAAD,IAAO,YAAUC,qBAAcC,WAA/B,EAA4C,GAAG,EAAE,aAACC,EAAD,UAAShB,WAAW,CAACiB,QAAZ,GAAuBD,EAAhC,EAAjD,GADF;AAEEhB,IAAAA,WAAW,CAACK,IAFd;AAGE,wBAAML,WAAW,CAACkB,KAAZ,CAAkBhB,YAAlB,EAAgCC,MAAhC,EAAwCC,QAAxC,CAAN,EAHF;;AAKD,GAbD,MAaO;AACLJ,IAAAA,WAAW,CAACkB,KAAZ,CAAkBhB,YAAlB,EAAgCC,MAAhC,EAAwCC,QAAxC;AACD;AACF,C,CAlBUJ,W;;AAoBGkB,K,GAAQ,UAAChB,YAAD,EAAuBC,MAAvB,EAAkDC,QAAlD,EAAwE;AAC5F,MAAIJ,WAAW,CAACiB,QAAhB,EAA0B;AACxBjB,IAAAA,WAAW,CAACiB,QAAZ,CAAqBhB,IAArB,CAA0BC,YAA1B,EAAwCC,MAAxC,EAAgDC,QAAhD;AACD;AACF,C,CAxBUJ,W;;AA0BGmB,K,GAAQ,YAAM;AAC1B,MAAInB,WAAW,CAACiB,QAAhB,EAA0B;AACxBjB,IAAAA,WAAW,CAACiB,QAAZ,CAAqBE,KAArB;AACD;AACF,C,CA9BUnB,W;;;AAiCIiB,Q,GAA4B,I","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { Nullable } from '../../typings/utility-types';\n\nimport { Toast, Action, ToastDataTids } from './Toast';\n\nexport class ToastStatic {\n  public static push = (notification: string, action?: Nullable<Action>, showTime?: number) => {\n    if (!ToastStatic.node && globalObject.document) {\n      ToastStatic.node = globalObject.document.createElement('div');\n      const { body } = globalObject.document;\n      if (!body) {\n        throw Error('There is no \"body\" element in \"document\"');\n      }\n      body.appendChild(ToastStatic.node);\n\n      ReactDOM.render(\n        <Toast data-tid={ToastDataTids.toastStatic} ref={(el) => (ToastStatic.instance = el)} />,\n        ToastStatic.node,\n        () => ToastStatic._push(notification, action, showTime),\n      );\n    } else {\n      ToastStatic._push(notification, action, showTime);\n    }\n  };\n\n  public static _push = (notification: string, action?: Nullable<Action>, showTime?: number) => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.push(notification, action, showTime);\n    }\n  };\n\n  public static close = () => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.close();\n    }\n  };\n\n  private static node: HTMLDivElement;\n  private static instance: Nullable<Toast> = null;\n}\n"]}

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

@@ -1,6 +1,8 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
+import { Nullable } from '../../typings/utility-types';
 import { CommonProps } from '../../internal/CommonWrapper';
-export interface ToastViewProps extends CommonProps {
+import { Action } from './Toast';
+export interface ToastViewProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {
     /**
      * Toast content
      */
@@ -8,10 +10,7 @@ export interface ToastViewProps extends CommonProps {
     /**
      * Adds action handling and close icon for toast
      */
-    action?: {
-        label: string;
-        handler: () => void;
-    } | null;
+    action?: Nullable<Action>;
     onClose?: () => void;
     onMouseEnter?: () => void;
     onMouseLeave?: () => void;
@@ -33,6 +32,7 @@ export declare class ToastView extends React.Component<ToastViewProps> {
     };
     private theme;
     private setRootNode;
+    private readonly locale;
     render(): JSX.Element;
     private renderMain;
 }

package/cjs/components/Toast/ToastView.js

@@ -1,6 +1,8 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.ToastView = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.ToastView = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = require("prop-types");
 
+var _decorators = require("../../lib/locale/decorators");
+
 var _CrossIcon = require("../../internal/icons/CrossIcon");
 var _ZIndex = require("../../internal/ZIndex");
 var _ThemeContext = require("../../lib/theming/ThemeContext");
@@ -11,8 +13,8 @@ var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
 var _CloseButtonIcon = require("../../internal/CloseButtonIcon/CloseButtonIcon");
 
 var _ToastView = require("./ToastView.styles");
-var _Toast = require("./Toast");var _excluded = ["action", "onClose"];var _class, _class2, _temp;var
-
+var _Toast = require("./Toast");
+var _locale = require("./locale");var _excluded = ["action", "onClose"];var _dec, _class, _class2, _temp;var
 
 
 
@@ -30,8 +32,8 @@ var _Toast = require("./Toast");var _excluded = ["action", "onClose"];var _class
 
 
 
+ToastView = (_dec = (0, _decorators.locale)('Toast', _locale.ToastLocaleHelper), (0, _rootNode.rootNode)(_class = _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(ToastView, _React$Component);function ToastView() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
-ToastView = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(ToastView, _React$Component);function ToastView() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -65,14 +67,24 @@ ToastView = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/fun
       var action = props.action,onClose = props.onClose,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
 
       var link = action ? /*#__PURE__*/
-      _react.default.createElement("span", { "data-tid": _Toast.ToastDataTids.action, className: _ToastView.styles.link(_this.theme), onClick: action.handler },
+      _react.default.createElement("button", {
+        "aria-label": action['aria-label'],
+        "data-tid": _Toast.ToastDataTids.action,
+        className: _ToastView.styles.link(_this.theme),
+        onClick: action.handler },
+
       action.label) :
 
       null;
 
       var close = action ? /*#__PURE__*/
       _react.default.createElement("span", { className: _ToastView.styles.closeWrapper(_this.theme) }, /*#__PURE__*/
-      _react.default.createElement("span", { "data-tid": _Toast.ToastDataTids.close, className: _ToastView.styles.close(_this.theme), onClick: onClose }, /*#__PURE__*/
+      _react.default.createElement("span", {
+        "aria-label": _this.locale.closeButtonAriaLabel,
+        "data-tid": _Toast.ToastDataTids.close,
+        className: _ToastView.styles.close(_this.theme),
+        onClick: onClose }, /*#__PURE__*/
+
       _react.default.createElement(_CrossIcon.CrossIcon, null))) :
 
 
@@ -82,6 +94,7 @@ ToastView = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/fun
         close = /*#__PURE__*/
         _react.default.createElement("span", { className: _ToastView.styles.closeWrapper(_this.theme) }, /*#__PURE__*/
         _react.default.createElement(_CloseButtonIcon.CloseButtonIcon, {
+          "aria-label": _this.locale.closeButtonAriaLabel,
           "data-tid": _Toast.ToastDataTids.close,
           onClick: onClose,
           size: parseInt(_this.theme.toastCloseSize),
@@ -107,4 +120,4 @@ ToastView = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/fun
    * Adds action handling and close icon for toast
    */action: (0, _propTypes.shape)({ label: _propTypes.string.isRequired, handler: _propTypes.func.isRequired }), /**
    * Toast content
-   */children: _propTypes.string.isRequired, onClose: _propTypes.func }, _temp)) || _class;exports.ToastView = ToastView;
+   */children: _propTypes.string.isRequired, onClose: _propTypes.func }, _temp)) || _class) || _class);exports.ToastView = ToastView;

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

@@ -1 +1 @@
-{"version":3,"sources":["ToastView.tsx"],"names":["ToastView","rootNode","renderMain","props","action","onClose","rest","link","ToastDataTids","styles","theme","handler","label","close","closeWrapper","parseInt","toastCloseSize","toastCloseColor","toastCloseHoverColor","wrapper","toastView","root","setRootNode","children","render","React","Component","propTypes","string","isRequired","func"],"mappings":"mcAAA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA,gC;;;;;;;;;;;;;;;;;;;;AAoBaA,S,OADZC,kB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BSC,IAAAA,U,GAAa,UAACC,KAAD,EAAmD;AACtE,UAAQC,MAAR,GAAqCD,KAArC,CAAQC,MAAR,CAAgBC,OAAhB,GAAqCF,KAArC,CAAgBE,OAAhB,CAA4BC,IAA5B,+CAAqCH,KAArC;;AAEA,UAAMI,IAAI,GAAGH,MAAM;AACjB,6CAAM,YAAUI,qBAAcJ,MAA9B,EAAsC,SAAS,EAAEK,kBAAOF,IAAP,CAAY,MAAKG,KAAjB,CAAjD,EAA0E,OAAO,EAAEN,MAAM,CAACO,OAA1F;AACGP,MAAAA,MAAM,CAACQ,KADV,CADiB;;AAIf,UAJJ;;AAMA,UAAIC,KAAK,GAAGT,MAAM;AAChB,6CAAM,SAAS,EAAEK,kBAAOK,YAAP,CAAoB,MAAKJ,KAAzB,CAAjB;AACE,6CAAM,YAAUF,qBAAcK,KAA9B,EAAqC,SAAS,EAAEJ,kBAAOI,KAAP,CAAa,MAAKH,KAAlB,CAAhD,EAA0E,OAAO,EAAEL,OAAnF;AACE,mCAAC,oBAAD,OADF,CADF,CADgB;;;AAMd,UANJ;;AAQA,UAAI,+BAAY,MAAKK,KAAjB,KAA2BG,KAA/B,EAAsC;AACpCA,QAAAA,KAAK;AACH,+CAAM,SAAS,EAAEJ,kBAAOK,YAAP,CAAoB,MAAKJ,KAAzB,CAAjB;AACE,qCAAC,gCAAD;AACE,sBAAUF,qBAAcK,KAD1B;AAEE,UAAA,OAAO,EAAER,OAFX;AAGE,UAAA,IAAI,EAAEU,QAAQ,CAAC,MAAKL,KAAL,CAAWM,cAAZ,CAHhB;AAIE,UAAA,IAAI,EAAE,EAJR;AAKE,UAAA,KAAK,EAAE,MAAKN,KAAL,CAAWO,eALpB;AAME,UAAA,UAAU,EAAE,MAAKP,KAAL,CAAWQ,oBANzB;AAOE,UAAA,QAAQ,EAAE,KAPZ,GADF,CADF;;;;AAaD;;AAED;AACE,qCAAC,cAAD,IAAQ,QAAQ,EAAC,OAAjB,EAAyB,SAAS,EAAET,kBAAOU,OAAP,CAAe,MAAKT,KAApB,CAApC;AACE,qEAAK,YAAUF,qBAAcY,SAA7B,IAA4Cd,IAA5C,IAAkD,SAAS,EAAEG,kBAAOY,IAAP,CAAY,MAAKX,KAAjB,CAA7D,EAAsF,GAAG,EAAE,MAAKY,WAAhG;AACE,mDAAO,MAAKnB,KAAL,CAAWoB,QAAlB,CADF;AAEGhB,QAAAA,IAFH;AAGGM,QAAAA,KAHH,CADF,CADF;;;;AASD,K,uDArDMW,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACd,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,oBAAO,6BAAC,4BAAD,EAAmB,MAAI,CAACP,KAAxB,EAAgC,MAAI,CAACD,UAArC,CAAP,CACD,CAJH,CADF,CAQD,C,oBA5B4BuB,eAAMC,S,WACrBC,S,GAAY,EACxB;AACJ;AACA,KACIvB,MAAM,EAAE,sBAAM,EACZQ,KAAK,EAAEgB,kBAAOC,UADF,EAEZlB,OAAO,EAAEmB,gBAAKD,UAFF,EAAN,CAJgB,EAQxB;AACJ;AACA,KACIN,QAAQ,EAAEK,kBAAOC,UAXO,EAYxBxB,OAAO,EAAEyB,eAZe,E","sourcesContent":["import React from 'react';\nimport { func, shape, string } from 'prop-types';\n\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';\n\nimport { styles } from './ToastView.styles';\nimport { ToastDataTids } from './Toast';\n\nexport interface ToastViewProps extends CommonProps {\n  /**\n   * Toast content\n   */\n  children?: string;\n  /**\n   * Adds action handling and close icon for toast\n   */\n  action?: {\n    label: string;\n    handler: () => void;\n  } | null;\n  onClose?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n}\n\n@rootNode\nexport class ToastView extends React.Component<ToastViewProps> {\n  public static propTypes = {\n    /**\n     * Adds action handling and close icon for toast\n     */\n    action: shape({\n      label: string.isRequired,\n      handler: func.isRequired,\n    }),\n    /**\n     * Toast content\n     */\n    children: string.isRequired,\n    onClose: func,\n  };\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain = (props: CommonWrapperRestProps<ToastViewProps>) => {\n    const { action, onClose, ...rest } = props;\n\n    const link = action ? (\n      <span data-tid={ToastDataTids.action} className={styles.link(this.theme)} onClick={action.handler}>\n        {action.label}\n      </span>\n    ) : null;\n\n    let close = action ? (\n      <span className={styles.closeWrapper(this.theme)}>\n        <span data-tid={ToastDataTids.close} className={styles.close(this.theme)} onClick={onClose}>\n          <CrossIcon />\n        </span>\n      </span>\n    ) : null;\n\n    if (isTheme2022(this.theme) && close) {\n      close = (\n        <span className={styles.closeWrapper(this.theme)}>\n          <CloseButtonIcon\n            data-tid={ToastDataTids.close}\n            onClick={onClose}\n            size={parseInt(this.theme.toastCloseSize)}\n            side={40}\n            color={this.theme.toastCloseColor}\n            colorHover={this.theme.toastCloseHoverColor}\n            tabbable={false}\n          />\n        </span>\n      );\n    }\n\n    return (\n      <ZIndex priority=\"Toast\" className={styles.wrapper(this.theme)}>\n        <div data-tid={ToastDataTids.toastView} {...rest} className={styles.root(this.theme)} ref={this.setRootNode}>\n          <span>{this.props.children}</span>\n          {link}\n          {close}\n        </div>\n      </ZIndex>\n    );\n  };\n}\n"]}
+{"version":3,"sources":["ToastView.tsx"],"names":["ToastView","ToastLocaleHelper","rootNode","renderMain","props","action","onClose","rest","link","ToastDataTids","styles","theme","handler","label","close","closeWrapper","locale","closeButtonAriaLabel","parseInt","toastCloseSize","toastCloseColor","toastCloseHoverColor","wrapper","toastView","root","setRootNode","children","render","React","Component","propTypes","string","isRequired","func"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport { func, shape, string } from 'prop-types';\n\nimport { locale } from '../../lib/locale/decorators';\nimport { Nullable } from '../../typings/utility-types';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { CloseButtonIcon } from '../../internal/CloseButtonIcon/CloseButtonIcon';\n\nimport { styles } from './ToastView.styles';\nimport { Action, ToastDataTids } from './Toast';\nimport { ToastLocale, ToastLocaleHelper } from './locale';\n\nexport interface ToastViewProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps {\n  /**\n   * Toast content\n   */\n  children?: string;\n  /**\n   * Adds action handling and close icon for toast\n   */\n  action?: Nullable<Action>;\n  onClose?: () => void;\n  onMouseEnter?: () => void;\n  onMouseLeave?: () => void;\n}\n\n@rootNode\n@locale('Toast', ToastLocaleHelper)\nexport class ToastView extends React.Component<ToastViewProps> {\n  public static propTypes = {\n    /**\n     * Adds action handling and close icon for toast\n     */\n    action: shape({\n      label: string.isRequired,\n      handler: func.isRequired,\n    }),\n    /**\n     * Toast content\n     */\n    children: string.isRequired,\n    onClose: func,\n  };\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n  private readonly locale!: ToastLocale;\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return <CommonWrapper {...this.props}>{this.renderMain}</CommonWrapper>;\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain = (props: CommonWrapperRestProps<ToastViewProps>) => {\n    const { action, onClose, ...rest } = props;\n\n    const link = action ? (\n      <button\n        aria-label={action['aria-label']}\n        data-tid={ToastDataTids.action}\n        className={styles.link(this.theme)}\n        onClick={action.handler}\n      >\n        {action.label}\n      </button>\n    ) : null;\n\n    let close = action ? (\n      <span className={styles.closeWrapper(this.theme)}>\n        <span\n          aria-label={this.locale.closeButtonAriaLabel}\n          data-tid={ToastDataTids.close}\n          className={styles.close(this.theme)}\n          onClick={onClose}\n        >\n          <CrossIcon />\n        </span>\n      </span>\n    ) : null;\n\n    if (isTheme2022(this.theme) && close) {\n      close = (\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={this.theme.toastCloseColor}\n            colorHover={this.theme.toastCloseHoverColor}\n            tabbable={false}\n          />\n        </span>\n      );\n    }\n\n    return (\n      <ZIndex priority=\"Toast\" className={styles.wrapper(this.theme)}>\n        <div data-tid={ToastDataTids.toastView} {...rest} className={styles.root(this.theme)} ref={this.setRootNode}>\n          <span>{this.props.children}</span>\n          {link}\n          {close}\n        </div>\n      </ZIndex>\n    );\n  };\n}\n"]}