@skbkontur/react-ui 0.0.0-0fe669bb2d → 0.0.0-0ffbe8b468

package/cjs/components/Toast/Toast.md

@@ -13,6 +13,34 @@ function showComplexNotification() {
 <Button onClick={showComplexNotification}>Show notification</Button>;
 ```
 
+C кастомным showTime
+
+```jsx harmony
+import { Button, Toast } from '@skbkontur/react-ui';
+
+function showComplexNotification() {
+  Toast.push('Successfully saved', {
+    label: 'Cancel',
+    handler: () => Toast.push('Canceled'),
+  }, 15000);
+}
+
+<Button onClick={showComplexNotification}>Show notification</Button>;
+```
+
+C кастомным showTime без action
+
+
+```jsx harmony
+import { Button, Toast } from '@skbkontur/react-ui';
+
+function showComplexNotification() {
+  Toast.push('Successfully saved', null, 15000);
+}
+
+<Button onClick={showComplexNotification}>Show notification</Button>;
+```
+
 Использование `ref`
 
 ```jsx harmony
@@ -39,3 +67,108 @@ 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/ToastStatic.d.ts

@@ -1,7 +1,8 @@
+import { Nullable } from '../../typings/utility-types';
 import { Action } from './Toast';
 export declare class ToastStatic {
-    static push: (notification: string, action?: Action | undefined) => void;
-    static _push: (notification: string, action?: Action | undefined) => void;
+    static push: (notification: string, action?: Nullable<Action>, showTime?: number | undefined) => void;
+    static _push: (notification: string, action?: Nullable<Action>, showTime?: number | undefined) => void;
     static close: () => void;
     private static node;
     private static instance;

package/cjs/components/Toast/ToastStatic.js

@@ -6,7 +6,7 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 var _Toast = require("./Toast");var
 
 ToastStatic = function ToastStatic() {};exports.ToastStatic = ToastStatic;ToastStatic.
-push = function (notification, action) {
+push = function (notification, action, showTime) {
   if (!ToastStatic.node) {
     ToastStatic.node = document.createElement('div');
     var _document = document,body = _document.body;
@@ -18,16 +18,16 @@ push = function (notification, action) {
     _reactDom.default.render( /*#__PURE__*/
     _react.default.createElement(_Toast.Toast, { "data-tid": _Toast.ToastDataTids.toastStatic, ref: function ref(el) {return ToastStatic.instance = el;} }),
     ToastStatic.node,
-    function () {return ToastStatic._push(notification, action);});
+    function () {return ToastStatic._push(notification, action, showTime);});
 
   } else {
-    ToastStatic._push(notification, action);
+    ToastStatic._push(notification, action, showTime);
   }
 };ToastStatic.
 
-_push = function (notification, action) {
+_push = function (notification, action, showTime) {
   if (ToastStatic.instance) {
-    ToastStatic.instance.push(notification, action);
+    ToastStatic.instance.push(notification, action, showTime);
   }
 };ToastStatic.
 

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

@@ -1 +1 @@
-{"version":3,"sources":["ToastStatic.tsx"],"names":["ToastStatic","push","notification","action","node","document","createElement","body","Error","appendChild","ReactDOM","render","ToastDataTids","toastStatic","el","instance","_push","close"],"mappings":"yJAAA;AACA;;;;AAIA,gC;;AAEaA,W,+DAAAA,W;AACGC,I,GAAO,UAACC,YAAD,EAAuBC,MAAvB,EAA2C;AAC9D,MAAI,CAACH,WAAW,CAACI,IAAjB,EAAuB;AACrBJ,IAAAA,WAAW,CAACI,IAAZ,GAAmBC,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAnB;AACA,oBAAiBD,QAAjB,CAAQE,IAAR,aAAQA,IAAR;AACA,QAAI,CAACA,IAAL,EAAW;AACT,YAAMC,KAAK,CAAC,0CAAD,CAAX;AACD;AACDD,IAAAA,IAAI,CAACE,WAAL,CAAiBT,WAAW,CAACI,IAA7B;;AAEAM,sBAASC,MAAT;AACE,iCAAC,YAAD,IAAO,YAAUC,qBAAcC,WAA/B,EAA4C,GAAG,EAAE,aAACC,EAAD,UAASd,WAAW,CAACe,QAAZ,GAAuBD,EAAhC,EAAjD,GADF;AAEEd,IAAAA,WAAW,CAACI,IAFd;AAGE,wBAAMJ,WAAW,CAACgB,KAAZ,CAAkBd,YAAlB,EAAgCC,MAAhC,CAAN,EAHF;;AAKD,GAbD,MAaO;AACLH,IAAAA,WAAW,CAACgB,KAAZ,CAAkBd,YAAlB,EAAgCC,MAAhC;AACD;AACF,C,CAlBUH,W;;AAoBGgB,K,GAAQ,UAACd,YAAD,EAAuBC,MAAvB,EAA2C;AAC/D,MAAIH,WAAW,CAACe,QAAhB,EAA0B;AACxBf,IAAAA,WAAW,CAACe,QAAZ,CAAqBd,IAArB,CAA0BC,YAA1B,EAAwCC,MAAxC;AACD;AACF,C,CAxBUH,W;;AA0BGiB,K,GAAQ,YAAM;AAC1B,MAAIjB,WAAW,CAACe,QAAhB,EAA0B;AACxBf,IAAAA,WAAW,CAACe,QAAZ,CAAqBE,KAArB;AACD;AACF,C,CA9BUjB,W;;;AAiCIe,Q,GAA4B,I","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\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?: Action) => {\n    if (!ToastStatic.node) {\n      ToastStatic.node = document.createElement('div');\n      const { body } = document;\n      if (!body) {\n        throw Error('There is no \"body\" element in \"document\"');\n      }\n      body.appendChild(ToastStatic.node);\n\n      ReactDOM.render(\n        <Toast data-tid={ToastDataTids.toastStatic} ref={(el) => (ToastStatic.instance = el)} />,\n        ToastStatic.node,\n        () => ToastStatic._push(notification, action),\n      );\n    } else {\n      ToastStatic._push(notification, action);\n    }\n  };\n\n  public static _push = (notification: string, action?: Action) => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.push(notification, action);\n    }\n  };\n\n  public static close = () => {\n    if (ToastStatic.instance) {\n      ToastStatic.instance.close();\n    }\n  };\n\n  private static node: HTMLDivElement;\n  private static instance: Nullable<Toast> = null;\n}\n"]}
+{"version":3,"sources":["ToastStatic.tsx"],"names":["ToastStatic","push","notification","action","showTime","node","document","createElement","body","Error","appendChild","ReactDOM","render","ToastDataTids","toastStatic","el","instance","_push","close"],"mappings":"yJAAA;AACA;;;;AAIA,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,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAAnB;AACA,oBAAiBD,QAAjB,CAAQE,IAAR,aAAQA,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';\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 = document.createElement('div');\n      const { body } = document;\n      if (!body) {\n        throw Error('There is no \"body\" element in \"document\"');\n      }\n      body.appendChild(ToastStatic.node);\n\n      ReactDOM.render(\n        <Toast data-tid={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,16 +1,20 @@
 "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"));
 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");
 
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _rootNode = require("../../lib/rootNode");
+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
 
 
 
@@ -28,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.
 
 
 
@@ -63,19 +67,46 @@ 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))) :
 
 
       null;
 
+      if ((0, _ThemeHelpers.isTheme2022)(_this.theme) && close) {
+        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),
+          side: 40,
+          color: _this.theme.toastCloseColor,
+          colorHover: _this.theme.toastCloseHoverColor,
+          tabbable: false }));
+
+
+
+      }
+
       return /*#__PURE__*/(
         _react.default.createElement(_ZIndex.ZIndex, { priority: "Toast", className: _ToastView.styles.wrapper(_this.theme) }, /*#__PURE__*/
         _react.default.createElement("div", (0, _extends2.default)({ "data-tid": _Toast.ToastDataTids.toastView }, rest, { className: _ToastView.styles.root(_this.theme), ref: _this.setRootNode }), /*#__PURE__*/
@@ -89,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","wrapper","toastView","root","setRootNode","children","render","React","Component","propTypes","string","isRequired","func"],"mappings":"mcAAA;AACA;;AAEA;AACA;AACA;;AAEA;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,UAAMC,KAAK,GAAGT,MAAM;AAClB,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,CADkB;;;AAMhB,UANJ;;AAQA;AACE,qCAAC,cAAD,IAAQ,QAAQ,EAAC,OAAjB,EAAyB,SAAS,EAAEI,kBAAOM,OAAP,CAAe,MAAKL,KAApB,CAApC;AACE,qEAAK,YAAUF,qBAAcQ,SAA7B,IAA4CV,IAA5C,IAAkD,SAAS,EAAEG,kBAAOQ,IAAP,CAAY,MAAKP,KAAjB,CAA7D,EAAsF,GAAG,EAAE,MAAKQ,WAAhG;AACE,mDAAO,MAAKf,KAAL,CAAWgB,QAAlB,CADF;AAEGZ,QAAAA,IAFH;AAGGM,QAAAA,KAHH,CADF,CADF;;;;AASD,K,uDArCMO,M,GAAP,kBAAgB,mBACd,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACV,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,oBA5B4BmB,eAAMC,S,WACrBC,S,GAAY,EACxB;AACJ;AACA,KACInB,MAAM,EAAE,sBAAM,EACZQ,KAAK,EAAEY,kBAAOC,UADF,EAEZd,OAAO,EAAEe,gBAAKD,UAFF,EAAN,CAJgB,EAQxB;AACJ;AACA,KACIN,QAAQ,EAAEK,kBAAOC,UAXO,EAYxBpB,OAAO,EAAEqB,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';\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    const 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    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"]}

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

@@ -1,5 +1,6 @@
-"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, _templateObject5;
+"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 _ThemeHelpers = require("../../lib/theming/ThemeHelpers");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 var getVerticalPaddingsWithCompensation = function getVerticalPaddingsWithCompensation(theme) {
   var toastPaddingY = theme.toastPaddingY,fontFamilyCompensationBaseline = theme.fontFamilyCompensationBaseline;
@@ -49,18 +50,28 @@ var styles = (0, _Emotion.memoizeStyle)({
   link: function link(t) {
     var _getVerticalPaddingsW3 = getVerticalPaddingsWithCompensation(t),paddingTop = _getVerticalPaddingsW3[0],paddingBottom = _getVerticalPaddingsW3[1];
     var marginRight = Math.round(parseInt(t.toastPaddingX) * 1.5) + "px";
-    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n\n      margin: -", " ", " -", " ", ";\n\n      padding: ", " 0 ", ";\n\n      &:hover {\n        text-decoration: underline;\n      }\n    "])),
+    var padding = (0, _ThemeHelpers.isTheme2022)(t) ? paddingTop + " " + paddingBottom : paddingTop + " 0 " + paddingBottom;
+
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      border: none;\n      font: inherit;\n      color: ", ";\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n      background-color: transparent;\n\n      margin: -", " ", " -", " ", ";\n\n      padding: ", ";\n      transition: background ", " ", ";\n      &:hover {\n        background: ", ";\n        text-decoration: ", ";\n      }\n\n      &:active {\n        background: ", ";\n      }\n    "])),
+
+
     t.toastLinkColor,
 
 
 
 
+
     paddingTop, marginRight, paddingBottom, t.toastPaddingX,
 
-    paddingTop, paddingBottom);
+    padding,
+    t.transitionDuration, t.transitionTimingFunction,
+
+    t.toastLinkBgHover,
+    t.toastLinkTextDecorationHover,
 
 
 
+    t.toastLinkBgActive);
 
 
   },

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

@@ -1 +1 @@
-{"version":3,"sources":["ToastView.styles.ts"],"names":["getVerticalPaddingsWithCompensation","theme","toastPaddingY","fontFamilyCompensationBaseline","paddingY","parseInt","compensation","styles","root","t","paddingTop","paddingBottom","css","toastBg","toastBorderRadius","toastBorder","toastColor","toastFontSize","toastLineHeight","toastPaddingX","toastTop","wrapper","closeWrapper","toastClosePadding","link","marginRight","Math","round","toastLinkColor","close","toastCloseColor","toastCloseSize","toastCloseHoverColor"],"mappings":"4QAAA,oD;;;AAGA,IAAMA,mCAAmC,GAAG,SAAtCA,mCAAsC,CAACC,KAAD,EAAkB;AAC5D,MAAQC,aAAR,GAA0DD,KAA1D,CAAQC,aAAR,CAAuBC,8BAAvB,GAA0DF,KAA1D,CAAuBE,8BAAvB;AACA,MAAMC,QAAQ,GAAGC,QAAQ,CAACH,aAAD,CAAzB;AACA,MAAMI,YAAY,GAAGD,QAAQ,CAACF,8BAAD,CAA7B;AACA,SAAO,CAAIC,QAAQ,GAAGE,YAAf,SAAoCF,QAAQ,GAAGE,YAA/C,QAAP;AACD,CALD;;AAOO,IAAMC,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,gCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,4BAAmBC,aAAnB;AACA,eAAOC,YAAP;AACgBH,IAAAA,CAAC,CAACI,OADlB;AAEmBJ,IAAAA,CAAC,CAACK,iBAFrB;AAGYL,IAAAA,CAAC,CAACM,WAHd;AAIWN,IAAAA,CAAC,CAACO,UAJb;;AAMeP,IAAAA,CAAC,CAACQ,aANjB;AAOiBR,IAAAA,CAAC,CAACS,eAPnB;;AASaR,IAAAA,UATb,EAS2BD,CAAC,CAACU,aAT7B,EAS8CR,aAT9C;;AAWSF,IAAAA,CAAC,CAACW,QAXX;;AAaD,GAhBgC;;AAkBjCC,EAAAA,OAlBiC,mBAkBzBZ,CAlByB,EAkBf;AAChB,eAAOG,YAAP;;;;;;;AAOmBH,IAAAA,CAAC,CAACK,iBAPrB;;AASD,GA5BgC;;AA8BjCQ,EAAAA,YA9BiC,wBA8BpBb,CA9BoB,EA8BV;AACrB,iCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,6BAAmBC,aAAnB;AACA,eAAOC,YAAP;;AAEaF,IAAAA,UAFb,EAE4BD,CAAC,CAACU,aAF9B,EAEgDR,aAFhD,EAEkEF,CAAC,CAACc,iBAFpE;;AAID,GApCgC;;AAsCjCC,EAAAA,IAtCiC,gBAsC5Bf,CAtC4B,EAsClB;AACb,iCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,6BAAmBC,aAAnB;AACA,QAAMc,WAAW,GAAMC,IAAI,CAACC,KAAL,CAAWtB,QAAQ,CAACI,CAAC,CAACU,aAAH,CAAR,GAA4B,GAAvC,CAAN,OAAjB;AACA,eAAOP,YAAP;AACWH,IAAAA,CAAC,CAACmB,cADb;;;;;AAMalB,IAAAA,UANb,EAM2Be,WAN3B,EAM2Cd,aAN3C,EAM4DF,CAAC,CAACU,aAN9D;;AAQaT,IAAAA,UARb,EAQ6BC,aAR7B;;;;;;AAcD,GAvDgC;;AAyDjCkB,EAAAA,KAzDiC,iBAyD3BpB,CAzD2B,EAyDjB;AACd,eAAOG,YAAP;;AAEWH,IAAAA,CAAC,CAACqB,eAFb;;;AAKYrB,IAAAA,CAAC,CAACsB,cALd;;AAOatB,IAAAA,CAAC,CAACc,iBAPf;;AASWd,IAAAA,CAAC,CAACsB,cATb;;;AAYatB,IAAAA,CAAC,CAACuB,oBAZf;;;AAeD,GAzEgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nconst getVerticalPaddingsWithCompensation = (theme: Theme) => {\n  const { toastPaddingY, fontFamilyCompensationBaseline } = theme;\n  const paddingY = parseInt(toastPaddingY);\n  const compensation = parseInt(fontFamilyCompensationBaseline);\n  return [`${paddingY - compensation}px`, `${paddingY + compensation}px`];\n};\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n    return css`\n      background: ${t.toastBg};\n      border-radius: ${t.toastBorderRadius};\n      border: ${t.toastBorder};\n      color: ${t.toastColor};\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  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] = getVerticalPaddingsWithCompensation(t);\n    return css`\n      display: flex;\n      margin: -${paddingTop} -${t.toastPaddingX} -${paddingBottom} -${t.toastClosePadding};\n    `;\n  },\n\n  link(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n    const marginRight = `${Math.round(parseInt(t.toastPaddingX) * 1.5)}px`;\n    return css`\n      color: ${t.toastLinkColor};\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n\n      margin: -${paddingTop} ${marginRight} -${paddingBottom} ${t.toastPaddingX};\n\n      padding: ${paddingTop} 0 ${paddingBottom};\n\n      &:hover {\n        text-decoration: underline;\n      }\n    `;\n  },\n\n  close(t: Theme) {\n    return css`\n      box-sizing: content-box !important; // fix \"reset.css\" problem\n      color: ${t.toastCloseColor};\n      cursor: pointer;\n      display: inline-block;\n      height: ${t.toastCloseSize};\n      line-height: 0;\n      padding: ${t.toastClosePadding};\n      text-align: center;\n      width: ${t.toastCloseSize};\n\n      &:hover {\n        color: ${t.toastCloseHoverColor};\n      }\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["ToastView.styles.ts"],"names":["getVerticalPaddingsWithCompensation","theme","toastPaddingY","fontFamilyCompensationBaseline","paddingY","parseInt","compensation","styles","root","t","paddingTop","paddingBottom","css","toastBg","toastBorderRadius","toastBorder","toastColor","toastFontSize","toastLineHeight","toastPaddingX","toastTop","wrapper","closeWrapper","toastClosePadding","link","marginRight","Math","round","padding","toastLinkColor","transitionDuration","transitionTimingFunction","toastLinkBgHover","toastLinkTextDecorationHover","toastLinkBgActive","close","toastCloseColor","toastCloseSize","toastCloseHoverColor"],"mappings":"4QAAA;;AAEA,8D;;AAEA,IAAMA,mCAAmC,GAAG,SAAtCA,mCAAsC,CAACC,KAAD,EAAkB;AAC5D,MAAQC,aAAR,GAA0DD,KAA1D,CAAQC,aAAR,CAAuBC,8BAAvB,GAA0DF,KAA1D,CAAuBE,8BAAvB;AACA,MAAMC,QAAQ,GAAGC,QAAQ,CAACH,aAAD,CAAzB;AACA,MAAMI,YAAY,GAAGD,QAAQ,CAACF,8BAAD,CAA7B;AACA,SAAO,CAAIC,QAAQ,GAAGE,YAAf,SAAoCF,QAAQ,GAAGE,YAA/C,QAAP;AACD,CALD;;AAOO,IAAMC,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,gCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,4BAAmBC,aAAnB;AACA,eAAOC,YAAP;AACgBH,IAAAA,CAAC,CAACI,OADlB;AAEmBJ,IAAAA,CAAC,CAACK,iBAFrB;AAGYL,IAAAA,CAAC,CAACM,WAHd;AAIWN,IAAAA,CAAC,CAACO,UAJb;;AAMeP,IAAAA,CAAC,CAACQ,aANjB;AAOiBR,IAAAA,CAAC,CAACS,eAPnB;;AASaR,IAAAA,UATb,EAS2BD,CAAC,CAACU,aAT7B,EAS8CR,aAT9C;;AAWSF,IAAAA,CAAC,CAACW,QAXX;;AAaD,GAhBgC;;AAkBjCC,EAAAA,OAlBiC,mBAkBzBZ,CAlByB,EAkBf;AAChB,eAAOG,YAAP;;;;;;;AAOmBH,IAAAA,CAAC,CAACK,iBAPrB;;AASD,GA5BgC;;AA8BjCQ,EAAAA,YA9BiC,wBA8BpBb,CA9BoB,EA8BV;AACrB,iCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,6BAAmBC,aAAnB;AACA,eAAOC,YAAP;;AAEaF,IAAAA,UAFb,EAE4BD,CAAC,CAACU,aAF9B,EAEgDR,aAFhD,EAEkEF,CAAC,CAACc,iBAFpE;;AAID,GApCgC;;AAsCjCC,EAAAA,IAtCiC,gBAsC5Bf,CAtC4B,EAsClB;AACb,iCAAoCT,mCAAmC,CAACS,CAAD,CAAvE,CAAOC,UAAP,6BAAmBC,aAAnB;AACA,QAAMc,WAAW,GAAMC,IAAI,CAACC,KAAL,CAAWtB,QAAQ,CAACI,CAAC,CAACU,aAAH,CAAR,GAA4B,GAAvC,CAAN,OAAjB;AACA,QAAMS,OAAO,GAAG,+BAAYnB,CAAZ,IAAoBC,UAApB,SAAkCC,aAAlC,GAAuDD,UAAvD,WAAuEC,aAAvF;;AAEA,eAAOC,YAAP;;;AAGWH,IAAAA,CAAC,CAACoB,cAHb;;;;;;AASanB,IAAAA,UATb,EAS2Be,WAT3B,EAS2Cd,aAT3C,EAS4DF,CAAC,CAACU,aAT9D;;AAWaS,IAAAA,OAXb;AAY2BnB,IAAAA,CAAC,CAACqB,kBAZ7B,EAYmDrB,CAAC,CAACsB,wBAZrD;;AAckBtB,IAAAA,CAAC,CAACuB,gBAdpB;AAeuBvB,IAAAA,CAAC,CAACwB,4BAfzB;;;;AAmBkBxB,IAAAA,CAAC,CAACyB,iBAnBpB;;;AAsBD,GAjEgC;;AAmEjCC,EAAAA,KAnEiC,iBAmE3B1B,CAnE2B,EAmEjB;AACd,eAAOG,YAAP;;AAEWH,IAAAA,CAAC,CAAC2B,eAFb;;;AAKY3B,IAAAA,CAAC,CAAC4B,cALd;;AAOa5B,IAAAA,CAAC,CAACc,iBAPf;;AASWd,IAAAA,CAAC,CAAC4B,cATb;;;AAYa5B,IAAAA,CAAC,CAAC6B,oBAZf;;;AAeD,GAnFgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\n\nconst getVerticalPaddingsWithCompensation = (theme: Theme) => {\n  const { toastPaddingY, fontFamilyCompensationBaseline } = theme;\n  const paddingY = parseInt(toastPaddingY);\n  const compensation = parseInt(fontFamilyCompensationBaseline);\n  return [`${paddingY - compensation}px`, `${paddingY + compensation}px`];\n};\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n    return css`\n      background: ${t.toastBg};\n      border-radius: ${t.toastBorderRadius};\n      border: ${t.toastBorder};\n      color: ${t.toastColor};\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  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] = getVerticalPaddingsWithCompensation(t);\n    return css`\n      display: flex;\n      margin: -${paddingTop} -${t.toastPaddingX} -${paddingBottom} -${t.toastClosePadding};\n    `;\n  },\n\n  link(t: Theme) {\n    const [paddingTop, paddingBottom] = getVerticalPaddingsWithCompensation(t);\n    const marginRight = `${Math.round(parseInt(t.toastPaddingX) * 1.5)}px`;\n    const padding = isTheme2022(t) ? `${paddingTop} ${paddingBottom}` : `${paddingTop} 0 ${paddingBottom}`;\n\n    return css`\n      border: none;\n      font: inherit;\n      color: ${t.toastLinkColor};\n      cursor: pointer;\n      display: inline-block;\n      font-weight: 600;\n      background-color: transparent;\n\n      margin: -${paddingTop} ${marginRight} -${paddingBottom} ${t.toastPaddingX};\n\n      padding: ${padding};\n      transition: background ${t.transitionDuration} ${t.transitionTimingFunction};\n      &:hover {\n        background: ${t.toastLinkBgHover};\n        text-decoration: ${t.toastLinkTextDecorationHover};\n      }\n\n      &:active {\n        background: ${t.toastLinkBgActive};\n      }\n    `;\n  },\n\n  close(t: Theme) {\n    return css`\n      box-sizing: content-box !important; // fix \"reset.css\" problem\n      color: ${t.toastCloseColor};\n      cursor: pointer;\n      display: inline-block;\n      height: ${t.toastCloseSize};\n      line-height: 0;\n      padding: ${t.toastClosePadding};\n      text-align: center;\n      width: ${t.toastCloseSize};\n\n      &:hover {\n        color: ${t.toastCloseHoverColor};\n      }\n    `;\n  },\n});\n"]}

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

@@ -0,0 +1,4 @@
+import { LocaleHelper } from '../../../lib/locale/LocaleHelper';
+import { ToastLocale } from './types';
+export * from './types';
+export declare const ToastLocaleHelper: LocaleHelper<ToastLocale>;

package/cjs/components/Toast/locale/index.js

@@ -0,0 +1,11 @@
+"use strict";exports.__esModule = true;var _exportNames = { ToastLocaleHelper: true };exports.ToastLocaleHelper = void 0;var _LocaleHelper = require("../../../lib/locale/LocaleHelper");
+
+var _en = require("./locales/en");
+var _ru = require("./locales/ru");
+
+
+var _types = require("./types");Object.keys(_types).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _types[key]) return;exports[key] = _types[key];});
+
+var ToastLocaleHelper = new _LocaleHelper.LocaleHelper({
+  ru_RU: _ru.componentsLocales,
+  en_GB: _en.componentsLocales });exports.ToastLocaleHelper = ToastLocaleHelper;

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":["ToastLocaleHelper","LocaleHelper","ru_RU","en_GB"],"mappings":"yHAAA;;AAEA;AACA;;;AAGA;;AAEO,IAAMA,iBAAiB,GAAG,IAAIC,0BAAJ,CAA8B;AAC7DC,EAAAA,KAAK,EAALA,qBAD6D;AAE7DC,EAAAA,KAAK,EAALA,qBAF6D,EAA9B,CAA1B,C","sourcesContent":["import { LocaleHelper } from '../../../lib/locale/LocaleHelper';\n\nimport { componentsLocales as en_GB } from './locales/en';\nimport { componentsLocales as ru_RU } from './locales/ru';\nimport { ToastLocale } from './types';\n\nexport * from './types';\n\nexport const ToastLocaleHelper = new LocaleHelper<ToastLocale>({\n  ru_RU,\n  en_GB,\n});\n"]}

package/cjs/components/Toast/locale/locales/en.d.ts

@@ -0,0 +1,2 @@
+import { ToastLocale } from '../types';
+export declare const componentsLocales: ToastLocale;

package/cjs/components/Toast/locale/locales/en.js

@@ -0,0 +1,4 @@
+"use strict";exports.__esModule = true;exports.componentsLocales = void 0;
+
+var componentsLocales = {
+  closeButtonAriaLabel: 'Close notification' };exports.componentsLocales = componentsLocales;

package/cjs/components/Toast/locale/locales/en.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["en.ts"],"names":["componentsLocales","closeButtonAriaLabel"],"mappings":";;AAEO,IAAMA,iBAA8B,GAAG;AAC5CC,EAAAA,oBAAoB,EAAE,oBADsB,EAAvC,C","sourcesContent":["import { ToastLocale } from '../types';\n\nexport const componentsLocales: ToastLocale = {\n  closeButtonAriaLabel: 'Close notification',\n};\n"]}

package/cjs/components/Toast/locale/locales/ru.d.ts

@@ -0,0 +1,2 @@
+import { ToastLocale } from '../types';
+export declare const componentsLocales: ToastLocale;

package/cjs/components/Toast/locale/locales/ru.js

@@ -0,0 +1,4 @@
+"use strict";exports.__esModule = true;exports.componentsLocales = void 0;
+
+var componentsLocales = {
+  closeButtonAriaLabel: 'Закрыть уведомление' };exports.componentsLocales = componentsLocales;

package/cjs/components/Toast/locale/locales/ru.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ru.ts"],"names":["componentsLocales","closeButtonAriaLabel"],"mappings":";;AAEO,IAAMA,iBAA8B,GAAG;AAC5CC,EAAAA,oBAAoB,EAAE,qBADsB,EAAvC,C","sourcesContent":["import { ToastLocale } from '../types';\n\nexport const componentsLocales: ToastLocale = {\n  closeButtonAriaLabel: 'Закрыть уведомление',\n};\n"]}

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

@@ -0,0 +1,3 @@
+export interface ToastLocale {
+    closeButtonAriaLabel: string;
+}

package/cjs/components/Toast/locale/types.js

@@ -0,0 +1 @@
+"use strict";exports.__esModule = true;

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[]}

package/cjs/components/Toggle/Toggle.d.ts

@@ -1,7 +1,12 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { CommonProps } from '../../internal/CommonWrapper';
-export interface ToggleProps extends CommonProps {
+import { SizeProp } from '../../lib/types/props';
+/**
+ * @deprecated use SizeProp
+ */
+export declare type ToggleSize = SizeProp;
+export interface ToggleProps extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>, CommonProps {
     children?: React.ReactNode;
     /**
      * Положение `children` относительно переключателя.
@@ -47,6 +52,8 @@ export interface ToggleProps extends CommonProps {
      * Если true, выставляет фокус на `тогле` после загрузки страницы.
      */
     autoFocus?: boolean;
+    /** Размер */
+    size?: SizeProp;
     /**
      * Событие вызывающееся, когда `тогл` получает фокус.
      */
@@ -63,6 +70,10 @@ export interface ToggleProps extends CommonProps {
      * HTML-атрибут `id` для передачи во внутренний `<input />`.
      */
     id?: string;
+    /**
+     * Не показывать анимацию
+     */
+    disableAnimations?: boolean;
 }
 export interface ToggleState {
     checked?: boolean;
@@ -71,7 +82,7 @@ export interface ToggleState {
 export declare const ToggleDataTids: {
     readonly root: "Toggle__root";
 };
-declare type DefaultProps = Required<Pick<ToggleProps, 'disabled' | 'loading' | 'captionPosition'>>;
+declare type DefaultProps = Required<Pick<ToggleProps, 'disabled' | 'loading' | 'captionPosition' | 'disableAnimations' | 'size'>>;
 /**
  * _Примечание:_ под тоглом понимается полный компонент т.е. надпись + переключатель, а не просто переключатель.
  */
@@ -99,6 +110,13 @@ export declare class Toggle extends React.Component<ToggleProps, ToggleState> {
      */
     focus: () => void;
     render(): JSX.Element;
+    private getContainerSizeClassName;
+    private getHandleSizeClassName;
+    private getButtonSizeClassName;
+    private getRootSizeClassName;
+    private getInputSizeClassName;
+    private getActiveHandleSizeClassName;
+    private getCaptionSizeClassName;
     private renderMain;
     private inputRef;
     private handleChange;