@prom-ui/core 1.5.0 → 1.6.0

package/Overlay/cjs/index.development.js

@@ -12,10 +12,13 @@ var Portal = require('@prom-ui/core/Portal');
 var Media = require('@prom-ui/core/Media');
 var Button = require('@prom-ui/core/Button');
 var Icon = require('@prom-ui/core/Icon');
-var Text = require('@prom-ui/core/Text');
 var useBodyTTag = require('@prom-ui/core/useBodyTTag');
 var Close = require('@prom-ui/icons/Close');
 var ArrowBack = require('@prom-ui/icons/ArrowBack');
+var errcatch = require('@evo/errcatch');
+var Link = require('@prom-ui/core/Link');
+var PromTroubleHappens = require('@prom-ui/icons/colors/PromTroubleHappens');
+var PromNoSignal = require('@prom-ui/icons/colors/PromNoSignal');
 var utils = require('react-scrolllock/dist/utils');
 var Swipe = require('react-easy-swipe');
 
@@ -44,6 +47,47 @@ var ScrollLock__default = /*#__PURE__*/_interopDefaultCompat(ScrollLock);
 var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
 var Swipe__default = /*#__PURE__*/_interopDefaultCompat(Swipe);
 
+function _iterableToArrayLimit(arr, i) {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
+    try {
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
+    } catch (err) {
+      _d = !0, _e = err;
+    } finally {
+      try {
+        if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+    return _arr;
+  }
+}
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -95,10 +139,46 @@ function _taggedTemplateLiteral(strings, raw) {
     }
   }));
 }
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
 
-var css = {"root":"Overlay__root___v0oYp","backdrop":"Overlay__backdrop___RvRWz","popup":"Overlay__popup___elIqJ","popup_placement_top":"Overlay__popup_placement_top___Llv4b","popup_placement_bottom":"Overlay__popup_placement_bottom___DJyNc","popup_placement_right":"Overlay__popup_placement_right___4DX3c","popup_placement_left":"Overlay__popup_placement_left___OwkR7","content":"Overlay__content___5qQ0k","header":"Overlay__header___LIk9z","header__grid":"Overlay__header__grid___SShy4","header__item":"Overlay__header__item___9fUzS","header__title":"Overlay__header__title___Vuilz Overlay__header__item___9fUzS","header__action":"Overlay__header__action___c-A8d Overlay__header__item___9fUzS","header__actionButton":"Overlay__header__actionButton___yYG24","header__actionIcon":"Overlay__header__actionIcon___La2ok","footer":"Overlay__footer___3Ca-G","enter":"Overlay__enter___OjeZp","exit":"Overlay__exit___HiHMU","enterActive":"Overlay__enterActive___Ne-Vn","exitActive":"Overlay__exitActive___6f7f1"};
+var css = {"root":"Overlay__root___v0oYp","backdrop":"Overlay__backdrop___RvRWz","popup":"Overlay__popup___elIqJ","popup_placement_top":"Overlay__popup_placement_top___Llv4b","popup_placement_bottom":"Overlay__popup_placement_bottom___DJyNc","popup_placement_right":"Overlay__popup_placement_right___4DX3c","popup_placement_left":"Overlay__popup_placement_left___OwkR7","content":"Overlay__content___5qQ0k","header":"Overlay__header___LIk9z","header__grid":"Overlay__header__grid___SShy4","header__item":"Overlay__header__item___9fUzS","header__title":"Overlay__header__title___Vuilz Overlay__header__item___9fUzS","header__titleText":"Overlay__header__titleText___pW2Vz","header__action":"Overlay__header__action___c-A8d Overlay__header__item___9fUzS","header__actionButton":"Overlay__header__actionButton___yYG24","header__actionIcon":"Overlay__header__actionIcon___La2ok","footer":"Overlay__footer___3Ca-G","enter":"Overlay__enter___OjeZp","exit":"Overlay__exit___HiHMU","enterActive":"Overlay__enterActive___Ne-Vn","exitActive":"Overlay__exitActive___6f7f1","errorContainer":"Overlay__errorContainer___8HVeJ","errorContainerLoading":"Overlay__errorContainerLoading___zsRUN","errorIcon":"Overlay__errorIcon___w5VL8","errorTitle":"Overlay__errorTitle___DJcp4","errorDescription":"Overlay__errorDescription___5bUeF","errorWrapReloadButton":"Overlay__errorWrapReloadButton___gwpLD","errorWrapCloseButton":"Overlay__errorWrapCloseButton___jM9l9","errorCloseButtonLoading":"Overlay__errorCloseButtonLoading___IXlT4"};
 
-var _templateObject, _templateObject2;
+var _templateObject$1, _templateObject2$1;
 var OverlayHeader = function OverlayHeader(_ref) {
   var isShowPrevButton = _ref.isShowPrevButton,
     isShowCloseButton = _ref.isShowCloseButton,
@@ -119,18 +199,15 @@ var OverlayHeader = function OverlayHeader(_ref) {
     "button-theme": "black-inherit",
     type: "button",
     onClick: onPrev,
-    "aria-label": t(_templateObject || (_templateObject = _taggedTemplateLiteral(["\u041D\u0430\u0437\u0430\u0434"]))),
+    "aria-label": t(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\u041D\u0430\u0437\u0430\u0434"]))),
     "data-qaid": "prev"
   }, /*#__PURE__*/React__namespace.default.createElement(Icon.Icon, {
     "icon-as": ArrowBack.SvgArrowBack,
     className: css.header__actionIcon
   }))), /*#__PURE__*/React__namespace.default.createElement("div", {
     className: css.header__title
-  }, typeof title === 'string' ? /*#__PURE__*/React__namespace.default.createElement(Text.Text, {
-    "text-align": "center",
-    "text-size": "h4",
-    "text-wrap": "ellipsis",
-    "text-weight": "bold",
+  }, typeof title === 'string' ? /*#__PURE__*/React__namespace.default.createElement("span", {
+    className: css.header__titleText,
     "data-qaid": "title"
   }, title) : title), /*#__PURE__*/React__namespace.default.createElement("div", {
     className: css.header__action
@@ -139,7 +216,7 @@ var OverlayHeader = function OverlayHeader(_ref) {
     "button-theme": "black-inherit",
     type: "button",
     onClick: onClose,
-    "aria-label": t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\u0417\u0430\u043A\u0440\u044B\u0442\u044C"]))),
+    "aria-label": t(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\u0417\u0430\u043A\u0440\u044B\u0442\u044C"]))),
     "data-qaid": "close"
   }, /*#__PURE__*/React__namespace.default.createElement(Icon.Icon, {
     "icon-as": Close.SvgClose,
@@ -147,6 +224,128 @@ var OverlayHeader = function OverlayHeader(_ref) {
   })))));
 };
 
+var getPopupStyle = function getPopupStyle(placement, size, maxSize) {
+  if (['top', 'bottom'].includes(placement)) {
+    return {
+      height: size,
+      maxHeight: maxSize
+    };
+  }
+  return {
+    width: size,
+    maxWidth: maxSize
+  };
+};
+var TIMEOUT_RELOAD_ERROR = 600;
+var getErrorType = function getErrorType() {
+  var _navigator;
+  return Boolean((_navigator = navigator) === null || _navigator === void 0 ? void 0 : _navigator.onLine) ? 'default' : 'offline';
+};
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var ErrorComponent = function ErrorComponent(_ref) {
+  var onClickReload = _ref.onClickReload,
+    onClose = _ref.onClose,
+    _ref$errorType = _ref.errorType,
+    errorType = _ref$errorType === void 0 ? 'default' : _ref$errorType,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading;
+  var _useBodyTTag = useBodyTTag.useBodyTTag(),
+    t = _useBodyTTag.t;
+  var errorData = {
+    "default": {
+      icon: PromTroubleHappens.SvgPromTroubleHappens,
+      title: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["\u041E\u0439, \u043A\u0430\u0436\u0435\u0442\u0441\u044F \u0447\u0442\u043E-\u0442\u043E \u043F\u043E\u0448\u043B\u043E \u043D\u0435 \u0442\u0430\u043A"]))),
+      description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\u041C\u044B \u0443\u0436\u0435 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043C\u0441\u044F \u0441 \u044D\u0442\u0438\u043C"])))
+    },
+    offline: {
+      icon: PromNoSignal.SvgPromNoSignal,
+      title: t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\u041D\u0435\u0442 \u0441\u043E\u0435\u0434\u0438\u043D\u0435\u043D\u0438\u044F"]))),
+      description: t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\u041F\u0440\u043E\u0432\u0435\u0440\u044C\u0442\u0435 \u043F\u043E\u0434\u043A\u043B\u044E\u0447\u0435\u043D\u0438\u0435 \u043A \u0418\u043D\u0442\u0435\u0440\u043D\u0435\u0442\u0443"])))
+    }
+  };
+  return /*#__PURE__*/React__namespace.default.createElement("div", {
+    className: classNames__default.default(css.errorContainer, _defineProperty({}, css.errorContainerLoading, loading)),
+    "data-qaid": "overlay_error_catch",
+    "data-testid": "overlay_error_catch"
+  }, /*#__PURE__*/React__namespace.default.createElement(Icon.Icon, {
+    className: css.errorIcon,
+    "icon-as": errorData[errorType].icon,
+    "data-qaid": "overlay_error_catch_icon",
+    "data-testid": "overlay_error_catch_icon"
+  }), /*#__PURE__*/React__namespace.default.createElement("div", {
+    className: css.errorTitle,
+    "data-qaid": "overlay_error_catch_title",
+    "data-testid": "overlay_error_catch_title"
+  }, errorData[errorType].title), /*#__PURE__*/React__namespace.default.createElement("div", {
+    className: css.errorDescription,
+    "data-qaid": "overlay_error_catch_description",
+    "data-testid": "overlay_error_catch_description"
+  }, errorData[errorType].description), /*#__PURE__*/React__namespace.default.createElement("div", {
+    className: css.errorWrapReloadButton
+  }, /*#__PURE__*/React__namespace.default.createElement(Button.Button, {
+    "button-theme": "violet",
+    "button-padding-left": "4xl",
+    "button-padding-right": "4xl",
+    type: "button",
+    onClick: onClickReload,
+    loading: loading,
+    "data-qaid": "overlay_error_catch_reload_button",
+    "data-testid": "overlay_error_catch_reload_button"
+  }, t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0435\u0449\u0435 \u0440\u0430\u0437"]))))), /*#__PURE__*/React__namespace.default.createElement("div", {
+    className: css.errorWrapCloseButton
+  }, /*#__PURE__*/React__namespace.default.createElement(Link.Link, {
+    className: loading ? css.errorCloseButtonLoading : undefined,
+    "link-as": "button",
+    "link-color": "blue-500",
+    type: "button",
+    onClick: onClose,
+    "data-qaid": "overlay_error_catch_close_button",
+    "data-testid": "overlay_error_catch_close_button"
+  }, t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\u0417\u0430\u043A\u0440\u044B\u0442\u044C"]))))));
+};
+ErrorComponent.displayName = 'ErrorComponent';
+var OverlayErrCatch = function OverlayErrCatch(_ref2) {
+  var children = _ref2.children,
+    name = _ref2.name,
+    onClose = _ref2.onClose;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isReload = _useState2[0],
+    setReload = _useState2[1];
+  var _useState3 = React.useState('default'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    errorType = _useState4[0],
+    setErrorType = _useState4[1];
+  React.useEffect(function () {
+    if (isReload) {
+      setTimeout(function () {
+        setErrorType(getErrorType());
+        setReload(false);
+      }, TIMEOUT_RELOAD_ERROR);
+    } else {
+      setErrorType(getErrorType());
+    }
+  }, [isReload]);
+  if (isReload) {
+    return /*#__PURE__*/React__namespace.default.createElement(ErrorComponent, {
+      errorType: errorType,
+      loading: true
+    });
+  }
+  return /*#__PURE__*/React__namespace.default.createElement(errcatch.ErrCatch, {
+    name: name,
+    errorComponent: /*#__PURE__*/React__namespace.default.createElement(ErrorComponent, {
+      onClose: onClose,
+      errorType: errorType,
+      onClickReload: function onClickReload() {
+        return setReload(true);
+      }
+    })
+  }, children);
+};
+OverlayErrCatch.displayName = 'OverlayErrCatch';
+
 // FORK FROM https://github.com/jossmac/react-scrolllock/blob/master/src/TouchScrollable.js
 
 var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
@@ -296,20 +495,7 @@ var SwipeClose = function SwipeClose(_ref) {
   }, children);
 };
 
-var getPopupStyle = function getPopupStyle(placement, size, maxSize) {
-  if (['top', 'bottom'].includes(placement)) {
-    return {
-      height: size,
-      maxHeight: maxSize
-    };
-  }
-  return {
-    width: size,
-    maxWidth: maxSize
-  };
-};
-
-var _excluded = ["children", "onClose", "onOpen", "onPrev", "onOpened", "onClosed", "isOpen", "isShowCloseButton", "isShowPrevButton", "isCloseOnEscape", "isCloseOnSwipe", "isCloseOutsideClick", "isAnimated", "isRenderPortal", "isScrollLock", "isScrollLockTouch", "header", "footer", "padding", "title", "placement", "size", "maxSize", "zIndex", "contentRef", "dataQaId"];
+var _excluded = ["children", "onClose", "onOpen", "onPrev", "onOpened", "onClosed", "isOpen", "isShowCloseButton", "isShowPrevButton", "isCloseOnEscape", "isCloseOnSwipe", "isCloseOutsideClick", "isAnimated", "isRenderPortal", "isScrollLock", "isScrollLockTouch", "header", "footer", "padding", "title", "placement", "size", "maxSize", "zIndex", "contentRef", "dataQaId", "errCatchName"];
 var DEFAULT_SIZE = 400;
 
 /**
@@ -357,6 +543,8 @@ var Overlay = function Overlay(_ref) {
     zIndex = _ref$zIndex === void 0 ? 5000 : _ref$zIndex,
     contentRef = _ref.contentRef,
     dataQaId = _ref.dataQaId,
+    _ref$errCatchName = _ref.errCatchName,
+    errCatchName = _ref$errCatchName === void 0 ? 'OverlayErrCatch' : _ref$errCatchName,
     props = _objectWithoutProperties(_ref, _excluded);
   var popupRef = React__namespace.useRef(null);
   var currentContentRef = contentRef || React__namespace.useRef(null);
@@ -442,7 +630,10 @@ var Overlay = function Overlay(_ref) {
     style: {
       padding: padding
     }
-  }, children))))))));
+  }, /*#__PURE__*/React__namespace.createElement(OverlayErrCatch, {
+    onClose: onClose,
+    name: errCatchName
+  }, children)))))))));
 };
 
 exports.Overlay = Overlay;

package/Overlay/cjs/index.development.v2.js

@@ -12,10 +12,13 @@ var Portal = require('@prom-ui/core/Portal');
 var Media = require('@prom-ui/core/Media');
 var Button = require('@prom-ui/core/Button');
 var Icon = require('@prom-ui/core/Icon');
-var Text = require('@prom-ui/core/Text');
 var useBodyTTag = require('@prom-ui/core/useBodyTTag');
 var Close = require('@prom-ui/icons/Close');
 var ArrowBack = require('@prom-ui/icons/ArrowBack');
+var errcatch = require('@evo/errcatch');
+var Link = require('@prom-ui/core/Link');
+var PromTroubleHappens = require('@prom-ui/icons/colors/PromTroubleHappens');
+var PromNoSignal = require('@prom-ui/icons/colors/PromNoSignal');
 var utils = require('react-scrolllock/dist/utils');
 var Swipe = require('react-easy-swipe');
 
@@ -44,6 +47,47 @@ var ScrollLock__default = /*#__PURE__*/_interopDefaultCompat(ScrollLock);
 var classNames__default = /*#__PURE__*/_interopDefaultCompat(classNames);
 var Swipe__default = /*#__PURE__*/_interopDefaultCompat(Swipe);
 
+function _iterableToArrayLimit(arr, i) {
+  var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+  if (null != _i) {
+    var _s,
+      _e,
+      _x,
+      _r,
+      _arr = [],
+      _n = !0,
+      _d = !1;
+    try {
+      if (_x = (_i = _i.call(arr)).next, 0 === i) {
+        if (Object(_i) !== _i) return;
+        _n = !1;
+      } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
+    } catch (err) {
+      _d = !0, _e = err;
+    } finally {
+      try {
+        if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return;
+      } finally {
+        if (_d) throw _e;
+      }
+    }
+    return _arr;
+  }
+}
+function _defineProperty(obj, key, value) {
+  key = _toPropertyKey(key);
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+  return obj;
+}
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -95,10 +139,46 @@ function _taggedTemplateLiteral(strings, raw) {
     }
   }));
 }
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
+}
 
-var css = {"root":"Overlay__root___-yvLz","backdrop":"Overlay__backdrop___MKZgL","popup":"Overlay__popup___RJENA","popup_placement_top":"Overlay__popup_placement_top___ERdxO","popup_placement_bottom":"Overlay__popup_placement_bottom___MJb6v","popup_placement_right":"Overlay__popup_placement_right___nL79b","popup_placement_left":"Overlay__popup_placement_left___p-p5e","content":"Overlay__content___uHLyZ","header":"Overlay__header___ntf6X","header__grid":"Overlay__header__grid___-OCio","header__item":"Overlay__header__item___gjOzy","header__title":"Overlay__header__title___-s4aZ Overlay__header__item___gjOzy","header__action":"Overlay__header__action___fzZrE Overlay__header__item___gjOzy","header__actionButton":"Overlay__header__actionButton___CC-hv","header__actionIcon":"Overlay__header__actionIcon___LoRyP","footer":"Overlay__footer___nE-cV","enter":"Overlay__enter___v7DoD","exit":"Overlay__exit___E0PkA","enterActive":"Overlay__enterActive___RFXzo","exitActive":"Overlay__exitActive___a2xd2"};
+var css = {"root":"Overlay__root___-yvLz","backdrop":"Overlay__backdrop___MKZgL","popup":"Overlay__popup___RJENA","popup_placement_top":"Overlay__popup_placement_top___ERdxO","popup_placement_bottom":"Overlay__popup_placement_bottom___MJb6v","popup_placement_right":"Overlay__popup_placement_right___nL79b","popup_placement_left":"Overlay__popup_placement_left___p-p5e","content":"Overlay__content___uHLyZ","header":"Overlay__header___ntf6X","header__grid":"Overlay__header__grid___-OCio","header__item":"Overlay__header__item___gjOzy","header__title":"Overlay__header__title___-s4aZ Overlay__header__item___gjOzy","header__titleText":"Overlay__header__titleText___zkpK2","header__action":"Overlay__header__action___fzZrE Overlay__header__item___gjOzy","header__actionButton":"Overlay__header__actionButton___CC-hv","header__actionIcon":"Overlay__header__actionIcon___LoRyP","footer":"Overlay__footer___nE-cV","enter":"Overlay__enter___v7DoD","exit":"Overlay__exit___E0PkA","enterActive":"Overlay__enterActive___RFXzo","exitActive":"Overlay__exitActive___a2xd2","errorContainer":"Overlay__errorContainer___6Vqfn","errorContainerLoading":"Overlay__errorContainerLoading___1NWwx","errorIcon":"Overlay__errorIcon___B2x3n","errorTitle":"Overlay__errorTitle___xzjW5","errorDescription":"Overlay__errorDescription___9ITQZ","errorWrapReloadButton":"Overlay__errorWrapReloadButton___TztMO","errorWrapCloseButton":"Overlay__errorWrapCloseButton___6pk7M","errorCloseButtonLoading":"Overlay__errorCloseButtonLoading___4NTmf"};
 
-var _templateObject, _templateObject2;
+var _templateObject$1, _templateObject2$1;
 var OverlayHeader = function OverlayHeader(_ref) {
   var isShowPrevButton = _ref.isShowPrevButton,
     isShowCloseButton = _ref.isShowCloseButton,
@@ -119,18 +199,15 @@ var OverlayHeader = function OverlayHeader(_ref) {
     "button-theme": "black-inherit",
     type: "button",
     onClick: onPrev,
-    "aria-label": t(_templateObject || (_templateObject = _taggedTemplateLiteral(["\u041D\u0430\u0437\u0430\u0434"]))),
+    "aria-label": t(_templateObject$1 || (_templateObject$1 = _taggedTemplateLiteral(["\u041D\u0430\u0437\u0430\u0434"]))),
     "data-qaid": "prev"
   }, /*#__PURE__*/React__namespace.default.createElement(Icon.Icon, {
     "icon-as": ArrowBack.SvgArrowBack,
     className: css.header__actionIcon
   }))), /*#__PURE__*/React__namespace.default.createElement("div", {
     className: css.header__title
-  }, typeof title === 'string' ? /*#__PURE__*/React__namespace.default.createElement(Text.Text, {
-    "text-align": "center",
-    "text-size": "h4",
-    "text-wrap": "ellipsis",
-    "text-weight": "bold",
+  }, typeof title === 'string' ? /*#__PURE__*/React__namespace.default.createElement("span", {
+    className: css.header__titleText,
     "data-qaid": "title"
   }, title) : title), /*#__PURE__*/React__namespace.default.createElement("div", {
     className: css.header__action
@@ -139,7 +216,7 @@ var OverlayHeader = function OverlayHeader(_ref) {
     "button-theme": "black-inherit",
     type: "button",
     onClick: onClose,
-    "aria-label": t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\u0417\u0430\u043A\u0440\u044B\u0442\u044C"]))),
+    "aria-label": t(_templateObject2$1 || (_templateObject2$1 = _taggedTemplateLiteral(["\u0417\u0430\u043A\u0440\u044B\u0442\u044C"]))),
     "data-qaid": "close"
   }, /*#__PURE__*/React__namespace.default.createElement(Icon.Icon, {
     "icon-as": Close.SvgClose,
@@ -147,6 +224,128 @@ var OverlayHeader = function OverlayHeader(_ref) {
   })))));
 };
 
+var getPopupStyle = function getPopupStyle(placement, size, maxSize) {
+  if (['top', 'bottom'].includes(placement)) {
+    return {
+      height: size,
+      maxHeight: maxSize
+    };
+  }
+  return {
+    width: size,
+    maxWidth: maxSize
+  };
+};
+var TIMEOUT_RELOAD_ERROR = 600;
+var getErrorType = function getErrorType() {
+  var _navigator;
+  return Boolean((_navigator = navigator) === null || _navigator === void 0 ? void 0 : _navigator.onLine) ? 'default' : 'offline';
+};
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var ErrorComponent = function ErrorComponent(_ref) {
+  var onClickReload = _ref.onClickReload,
+    onClose = _ref.onClose,
+    _ref$errorType = _ref.errorType,
+    errorType = _ref$errorType === void 0 ? 'default' : _ref$errorType,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading;
+  var _useBodyTTag = useBodyTTag.useBodyTTag(),
+    t = _useBodyTTag.t;
+  var errorData = {
+    "default": {
+      icon: PromTroubleHappens.SvgPromTroubleHappens,
+      title: t(_templateObject || (_templateObject = _taggedTemplateLiteral(["\u041E\u0439, \u043A\u0430\u0436\u0435\u0442\u0441\u044F \u0447\u0442\u043E-\u0442\u043E \u043F\u043E\u0448\u043B\u043E \u043D\u0435 \u0442\u0430\u043A"]))),
+      description: t(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\u041C\u044B \u0443\u0436\u0435 \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0435\u043C\u0441\u044F \u0441 \u044D\u0442\u0438\u043C"])))
+    },
+    offline: {
+      icon: PromNoSignal.SvgPromNoSignal,
+      title: t(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\u041D\u0435\u0442 \u0441\u043E\u0435\u0434\u0438\u043D\u0435\u043D\u0438\u044F"]))),
+      description: t(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\u041F\u0440\u043E\u0432\u0435\u0440\u044C\u0442\u0435 \u043F\u043E\u0434\u043A\u043B\u044E\u0447\u0435\u043D\u0438\u0435 \u043A \u0418\u043D\u0442\u0435\u0440\u043D\u0435\u0442\u0443"])))
+    }
+  };
+  return /*#__PURE__*/React__namespace.default.createElement("div", {
+    className: classNames__default.default(css.errorContainer, _defineProperty({}, css.errorContainerLoading, loading)),
+    "data-qaid": "overlay_error_catch",
+    "data-testid": "overlay_error_catch"
+  }, /*#__PURE__*/React__namespace.default.createElement(Icon.Icon, {
+    className: css.errorIcon,
+    "icon-as": errorData[errorType].icon,
+    "data-qaid": "overlay_error_catch_icon",
+    "data-testid": "overlay_error_catch_icon"
+  }), /*#__PURE__*/React__namespace.default.createElement("div", {
+    className: css.errorTitle,
+    "data-qaid": "overlay_error_catch_title",
+    "data-testid": "overlay_error_catch_title"
+  }, errorData[errorType].title), /*#__PURE__*/React__namespace.default.createElement("div", {
+    className: css.errorDescription,
+    "data-qaid": "overlay_error_catch_description",
+    "data-testid": "overlay_error_catch_description"
+  }, errorData[errorType].description), /*#__PURE__*/React__namespace.default.createElement("div", {
+    className: css.errorWrapReloadButton
+  }, /*#__PURE__*/React__namespace.default.createElement(Button.Button, {
+    "button-theme": "violet",
+    "button-padding-left": "4xl",
+    "button-padding-right": "4xl",
+    type: "button",
+    onClick: onClickReload,
+    loading: loading,
+    "data-qaid": "overlay_error_catch_reload_button",
+    "data-testid": "overlay_error_catch_reload_button"
+  }, t(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\u041F\u043E\u043F\u0440\u043E\u0431\u043E\u0432\u0430\u0442\u044C \u0435\u0449\u0435 \u0440\u0430\u0437"]))))), /*#__PURE__*/React__namespace.default.createElement("div", {
+    className: css.errorWrapCloseButton
+  }, /*#__PURE__*/React__namespace.default.createElement(Link.Link, {
+    className: loading ? css.errorCloseButtonLoading : undefined,
+    "link-as": "button",
+    "link-color": "blue-500",
+    type: "button",
+    onClick: onClose,
+    "data-qaid": "overlay_error_catch_close_button",
+    "data-testid": "overlay_error_catch_close_button"
+  }, t(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\u0417\u0430\u043A\u0440\u044B\u0442\u044C"]))))));
+};
+ErrorComponent.displayName = 'ErrorComponent';
+var OverlayErrCatch = function OverlayErrCatch(_ref2) {
+  var children = _ref2.children,
+    name = _ref2.name,
+    onClose = _ref2.onClose;
+  var _useState = React.useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isReload = _useState2[0],
+    setReload = _useState2[1];
+  var _useState3 = React.useState('default'),
+    _useState4 = _slicedToArray(_useState3, 2),
+    errorType = _useState4[0],
+    setErrorType = _useState4[1];
+  React.useEffect(function () {
+    if (isReload) {
+      setTimeout(function () {
+        setErrorType(getErrorType());
+        setReload(false);
+      }, TIMEOUT_RELOAD_ERROR);
+    } else {
+      setErrorType(getErrorType());
+    }
+  }, [isReload]);
+  if (isReload) {
+    return /*#__PURE__*/React__namespace.default.createElement(ErrorComponent, {
+      errorType: errorType,
+      loading: true
+    });
+  }
+  return /*#__PURE__*/React__namespace.default.createElement(errcatch.ErrCatch, {
+    name: name,
+    errorComponent: /*#__PURE__*/React__namespace.default.createElement(ErrorComponent, {
+      onClose: onClose,
+      errorType: errorType,
+      onClickReload: function onClickReload() {
+        return setReload(true);
+      }
+    })
+  }, children);
+};
+OverlayErrCatch.displayName = 'OverlayErrCatch';
+
 // FORK FROM https://github.com/jossmac/react-scrolllock/blob/master/src/TouchScrollable.js
 
 var canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
@@ -296,20 +495,7 @@ var SwipeClose = function SwipeClose(_ref) {
   }, children);
 };
 
-var getPopupStyle = function getPopupStyle(placement, size, maxSize) {
-  if (['top', 'bottom'].includes(placement)) {
-    return {
-      height: size,
-      maxHeight: maxSize
-    };
-  }
-  return {
-    width: size,
-    maxWidth: maxSize
-  };
-};
-
-var _excluded = ["children", "onClose", "onOpen", "onPrev", "onOpened", "onClosed", "isOpen", "isShowCloseButton", "isShowPrevButton", "isCloseOnEscape", "isCloseOnSwipe", "isCloseOutsideClick", "isAnimated", "isRenderPortal", "isScrollLock", "isScrollLockTouch", "header", "footer", "padding", "title", "placement", "size", "maxSize", "zIndex", "contentRef", "dataQaId"];
+var _excluded = ["children", "onClose", "onOpen", "onPrev", "onOpened", "onClosed", "isOpen", "isShowCloseButton", "isShowPrevButton", "isCloseOnEscape", "isCloseOnSwipe", "isCloseOutsideClick", "isAnimated", "isRenderPortal", "isScrollLock", "isScrollLockTouch", "header", "footer", "padding", "title", "placement", "size", "maxSize", "zIndex", "contentRef", "dataQaId", "errCatchName"];
 var DEFAULT_SIZE = 400;
 
 /**
@@ -357,6 +543,8 @@ var Overlay = function Overlay(_ref) {
     zIndex = _ref$zIndex === void 0 ? 5000 : _ref$zIndex,
     contentRef = _ref.contentRef,
     dataQaId = _ref.dataQaId,
+    _ref$errCatchName = _ref.errCatchName,
+    errCatchName = _ref$errCatchName === void 0 ? 'OverlayErrCatch' : _ref$errCatchName,
     props = _objectWithoutProperties(_ref, _excluded);
   var popupRef = React__namespace.useRef(null);
   var currentContentRef = contentRef || React__namespace.useRef(null);
@@ -442,7 +630,10 @@ var Overlay = function Overlay(_ref) {
     style: {
       padding: padding
     }
-  }, children))))))));
+  }, /*#__PURE__*/React__namespace.createElement(OverlayErrCatch, {
+    onClose: onClose,
+    name: errCatchName
+  }, children)))))))));
 };
 
 exports.Overlay = Overlay;