@vkontakte/vkui 4.23.0 → 4.25.2

package/dist/components/ModalRoot/ModalRoot.js

@@ -8,7 +8,7 @@ import _createSuper from "@babel/runtime/helpers/createSuper";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["id"];
 import { createScopedElement } from "../../lib/jsxRuntime";
-import * as React from 'react';
+import * as React from "react";
 import { Touch } from "../Touch/Touch";
 import TouchRootContext from "../Touch/TouchContext";
 import { getClassName } from "../../helpers/getClassName";
@@ -28,10 +28,14 @@ import { getNavId } from "../../lib/getNavId";
 import { warnOnce } from "../../lib/warnOnce";
 import { FocusTrap } from "../FocusTrap/FocusTrap";
 import { withModalManager } from "./useModalManager";
-var warn = warnOnce('ModalRoot');
-var IS_DEV = process.env.NODE_ENV === 'development';
+var warn = warnOnce("ModalRoot");
+var IS_DEV = process.env.NODE_ENV === "development";
 
 function numberInRange(number, range) {
+  if (!range) {
+    return false;
+  }
+
   return number >= range[0] && number <= range[1];
 }
 
@@ -51,19 +55,19 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
 
-    _defineProperty(_assertThisInitialized(_this), "documentScrolling", void 0);
+    _defineProperty(_assertThisInitialized(_this), "documentScrolling", false);
 
     _defineProperty(_assertThisInitialized(_this), "maskElementRef", void 0);
 
     _defineProperty(_assertThisInitialized(_this), "viewportRef", /*#__PURE__*/React.createRef());
 
-    _defineProperty(_assertThisInitialized(_this), "maskAnimationFrame", void 0);
+    _defineProperty(_assertThisInitialized(_this), "maskAnimationFrame", undefined);
 
     _defineProperty(_assertThisInitialized(_this), "modalRootContext", void 0);
 
     _defineProperty(_assertThisInitialized(_this), "frameIds", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "restoreFocusTo", void 0);
+    _defineProperty(_assertThisInitialized(_this), "restoreFocusTo", undefined);
 
     _defineProperty(_assertThisInitialized(_this), "preventTouch", function (event) {
       if (!event) {
@@ -128,16 +132,18 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onTouchEnd", function (e) {
       var modalState = _this.getModalState(_this.props.activeModal);
 
-      if (modalState.type === ModalType.PAGE) {
+      if ((modalState === null || modalState === void 0 ? void 0 : modalState.type) === ModalType.PAGE) {
         return _this.onPageTouchEnd(e, modalState);
       }
 
-      if (modalState.type === ModalType.CARD) {
+      if ((modalState === null || modalState === void 0 ? void 0 : modalState.type) === ModalType.CARD) {
         return _this.onCardTouchEnd(e, modalState);
       }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onScroll", function (e) {
+      var _modalState$contentEl;
+
       var activeModal = _this.props.activeModal;
       var target = e.target;
 
@@ -147,9 +153,13 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
 
       var modalState = _this.getModalState(activeModal);
 
-      if (modalState.type === ModalType.PAGE && modalState.contentElement.contains(target)) {
+      if ((modalState === null || modalState === void 0 ? void 0 : modalState.type) === ModalType.PAGE && modalState !== null && modalState !== void 0 && (_modalState$contentEl = modalState.contentElement) !== null && _modalState$contentEl !== void 0 && _modalState$contentEl.contains(target)) {
         modalState.contentScrolled = true;
-        clearTimeout(modalState.contentScrollStopTimeout);
+
+        if (modalState.contentScrollStopTimeout) {
+          clearTimeout(modalState.contentScrollStopTimeout);
+        }
+
         modalState.contentScrollStopTimeout = setTimeout(function () {
           if (modalState.contentScrolled) {
             modalState.contentScrolled = false;
@@ -198,6 +208,10 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getModalState",
     value: function getModalState(id) {
+      if (!id) {
+        return undefined;
+      }
+
       return this.props.getModalState(id);
     }
   }, {
@@ -210,14 +224,16 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
     value: function componentDidMount() {
       // Отслеживаем изменение размеров viewport (Необходимо для iOS)
       if (this.props.platform === IOS) {
-        this.window.addEventListener('resize', this.updateModalTranslate, false);
+        var _this$window;
+
+        (_this$window = this.window) === null || _this$window === void 0 ? void 0 : _this$window.addEventListener("resize", this.updateModalTranslate, false);
       }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.toggleDocumentScrolling(true);
-      this.window.removeEventListener('resize', this.updateModalTranslate, false);
+      this.window.removeEventListener("resize", this.updateModalTranslate, false);
     }
   }, {
     key: "componentDidUpdate",
@@ -234,12 +250,17 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         var enteringModal = this.props.enteringModal;
         var enteringState = this.getModalState(enteringModal);
         this.waitTransitionFinish(enteringState, function () {
-          enteringState.innerElement.style.transitionDelay = null;
+          if (enteringState !== null && enteringState !== void 0 && enteringState.innerElement) {
+            enteringState.innerElement.style.transitionDelay = "";
+          }
 
           _this2.props.onEnter(enteringModal);
         });
-        enteringState.innerElement.style.transitionDelay = this.props.delayEnter ? "".concat(this.timeout, "ms") : null;
-        this.animateTranslate(enteringState, enteringState.translateY);
+
+        if (enteringState !== null && enteringState !== void 0 && enteringState.innerElement) {
+          enteringState.innerElement.style.transitionDelay = this.props.delayEnter ? "".concat(this.timeout, "ms") : "";
+          this.animateTranslate(enteringState, enteringState.translateY);
+        }
       } // focus restoration
 
 
@@ -269,12 +290,12 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         // Здесь нужен последний аргумент с такими же параметрами, потому что
         // некоторые браузеры на странных вендорах типа Meizu не удаляют обработчик.
         // https://github.com/VKCOM/VKUI/issues/444
-        // @ts-ignore (В интерфейсе EventListenerOptions нет поля passive)
-        this.window.removeEventListener('touchmove', this.preventTouch, {
+        this.window.removeEventListener("touchmove", this.preventTouch, {
+          // @ts-ignore (В интерфейсе EventListenerOptions нет поля passive)
           passive: false
         });
       } else {
-        this.window.addEventListener('touchmove', this.preventTouch, {
+        this.window.addEventListener("touchmove", this.preventTouch, {
           passive: false
         });
       }
@@ -309,7 +330,10 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "closeModal",
     value: function closeModal(id) {
-      var _this3 = this;
+      var _this3 = this,
+          _prevModalState$trans,
+          _nextModalState$trans,
+          _nextModalState$trans2;
 
       // Сбрасываем состояния, которые могут помешать закрытию модального окна
       this.setState({
@@ -328,7 +352,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       this.waitTransitionFinish(prevModalState, function () {
         return _this3.props.onExit(id);
       });
-      var exitTranslate = prevIsPage && nextIsPage && prevModalState.translateY <= nextModalState.translateYFrom && !this.props.isBack ? nextModalState.translateYFrom + 10 : 100;
+      var exitTranslate = prevIsPage && nextIsPage && ((_prevModalState$trans = prevModalState.translateY) !== null && _prevModalState$trans !== void 0 ? _prevModalState$trans : 0) <= ((_nextModalState$trans = nextModalState === null || nextModalState === void 0 ? void 0 : nextModalState.translateYFrom) !== null && _nextModalState$trans !== void 0 ? _nextModalState$trans : 0) && !this.props.isBack ? ((_nextModalState$trans2 = nextModalState === null || nextModalState === void 0 ? void 0 : nextModalState.translateYFrom) !== null && _nextModalState$trans2 !== void 0 ? _nextModalState$trans2 : 0) + 10 : 100;
       this.animateTranslate(prevModalState, exitTranslate);
 
       if (!nextModalState) {
@@ -339,19 +363,23 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "onPageTouchMove",
     value: function onPageTouchMove(event, modalState) {
+      var _modalState$innerElem, _modalState$headerEle;
+
       var shiftY = event.shiftY,
           originalEvent = event.originalEvent;
       var target = originalEvent.target;
 
       if (!event.isY) {
-        if (this.viewportRef.current.contains(target)) {
+        var _this$viewportRef$cur;
+
+        if ((_this$viewportRef$cur = this.viewportRef.current) !== null && _this$viewportRef$cur !== void 0 && _this$viewportRef$cur.contains(target)) {
           originalEvent.preventDefault();
         }
 
         return;
       }
 
-      if (!modalState.innerElement.contains(target)) {
+      if (!((_modalState$innerElem = modalState.innerElement) !== null && _modalState$innerElem !== void 0 && _modalState$innerElem.contains(target))) {
         return originalEvent.preventDefault();
       }
 
@@ -362,7 +390,9 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
           expanded = modalState.expanded;
 
       if (!this.state.touchDown) {
-        modalState.touchStartContentScrollTop = modalState.contentElement.scrollTop;
+        var _modalState$contentEl2;
+
+        modalState.touchStartContentScrollTop = (_modalState$contentEl2 = modalState.contentElement) === null || _modalState$contentEl2 === void 0 ? void 0 : _modalState$contentEl2.scrollTop;
         this.setState({
           touchDown: true
         });
@@ -376,10 +406,12 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         modalState.touchMovePositive = shiftY > 0;
       }
 
-      if (!modalState.expandable || collapsed || expanded && modalState.touchMovePositive && modalState.touchStartContentScrollTop === 0 || modalState.headerElement.contains(target)) {
+      if (!modalState.expandable || collapsed || expanded && modalState.touchMovePositive && modalState.touchStartContentScrollTop === 0 || (_modalState$headerEle = modalState.headerElement) !== null && _modalState$headerEle !== void 0 && _modalState$headerEle.contains(target)) {
+        var _modalState$translate;
+
         originalEvent.preventDefault();
 
-        if (!expandable && shiftY < 0) {
+        if (!expandable && shiftY < 0 || !this.window) {
           return;
         }
 
@@ -389,7 +421,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         var shiftYPercent = shiftY / this.window.innerHeight * 100;
         var shiftYCurrent = rubber(shiftYPercent, 72, 0.8, this.props.platform === ANDROID || this.props.platform === VKCOM);
         modalState.touchShiftYPercent = shiftYPercent;
-        modalState.translateYCurrent = rangeTranslate(modalState.translateY + shiftYCurrent);
+        modalState.translateYCurrent = rangeTranslate(((_modalState$translate = modalState.translateY) !== null && _modalState$translate !== void 0 ? _modalState$translate : 0) + shiftYCurrent);
         this.animateTranslate(modalState, modalState.translateYCurrent);
         this.setMaskOpacity(modalState);
       }
@@ -397,11 +429,15 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "onCardTouchMove",
     value: function onCardTouchMove(event, modalState) {
+      var _modalState$innerElem2;
+
       var originalEvent = event.originalEvent,
           shiftY = event.shiftY;
       var target = originalEvent.target;
 
-      if (modalState.innerElement.contains(target)) {
+      if ((_modalState$innerElem2 = modalState.innerElement) !== null && _modalState$innerElem2 !== void 0 && _modalState$innerElem2.contains(target)) {
+        var _modalState$translate2;
+
         if (!this.state.touchDown) {
           this.setState({
             touchDown: true,
@@ -412,7 +448,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         var shiftYPercent = shiftY / modalState.innerElement.offsetHeight * 100;
         var shiftYCurrent = rubber(shiftYPercent, 72, 1.2, this.props.platform === ANDROID || this.props.platform === VKCOM);
         modalState.touchShiftYPercent = shiftYPercent;
-        modalState.translateYCurrent = Math.max(0, modalState.translateY + shiftYCurrent);
+        modalState.translateYCurrent = Math.max(0, ((_modalState$translate2 = modalState.translateY) !== null && _modalState$translate2 !== void 0 ? _modalState$translate2 : 0) + shiftYCurrent);
         this.animateTranslate(modalState, modalState.translateYCurrent);
         this.setMaskOpacity(modalState);
       }
@@ -428,21 +464,29 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       modalState.touchMovePositive = null;
       var setStateCallback;
 
-      if (this.state.dragging) {
+      if (this.state.dragging && this.window) {
+        var _modalState$translate3, _modalState$touchShif;
+
         var shiftYEndPercent = (startY + shiftY) / this.window.innerHeight * 100;
-        var translateY = modalState.translateYCurrent;
-        var expectTranslateY = translateY / event.duration * 240 * 0.6 * (modalState.touchShiftYPercent < 0 ? -1 : 1);
+        var translateY = (_modalState$translate3 = modalState.translateYCurrent) !== null && _modalState$translate3 !== void 0 ? _modalState$translate3 : 0;
+        var expectTranslateY = translateY / event.duration * 240 * 0.6 * (((_modalState$touchShif = modalState.touchShiftYPercent) !== null && _modalState$touchShif !== void 0 ? _modalState$touchShif : 0) < 0 ? -1 : 1);
         translateY = rangeTranslate(translateY + expectTranslateY);
 
         if (modalState.settlingHeight !== 100) {
           if (numberInRange(translateY, modalState.expandedRange)) {
-            translateY = modalState.expandedRange[0];
+            var _modalState$expandedR, _modalState$expandedR2;
+
+            translateY = (_modalState$expandedR = (_modalState$expandedR2 = modalState.expandedRange) === null || _modalState$expandedR2 === void 0 ? void 0 : _modalState$expandedR2[0]) !== null && _modalState$expandedR !== void 0 ? _modalState$expandedR : 0;
           } else if (numberInRange(translateY, modalState.collapsedRange)) {
-            translateY = modalState.translateYFrom;
+            var _modalState$translate4;
+
+            translateY = (_modalState$translate4 = modalState.translateYFrom) !== null && _modalState$translate4 !== void 0 ? _modalState$translate4 : 0;
           } else if (numberInRange(translateY, modalState.hiddenRange)) {
             translateY = 100;
           } else {
-            translateY = modalState.translateYFrom;
+            var _modalState$translate5;
+
+            translateY = (_modalState$translate5 = modalState.translateYFrom) !== null && _modalState$translate5 !== void 0 ? _modalState$translate5 : 0;
           }
         } else {
           if (numberInRange(translateY, [0, 25])) {
@@ -489,8 +533,10 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       var setStateCallback;
 
       if (this.state.dragging) {
-        var translateY = modalState.translateYCurrent;
-        var expectTranslateY = translateY / duration * 240 * 0.6 * (modalState.touchShiftYPercent < 0 ? -1 : 1);
+        var _modalState$translate6, _modalState$touchShif2;
+
+        var translateY = (_modalState$translate6 = modalState.translateYCurrent) !== null && _modalState$translate6 !== void 0 ? _modalState$translate6 : 0;
+        var expectTranslateY = translateY / duration * 240 * 0.6 * (((_modalState$touchShif2 = modalState.touchShiftYPercent) !== null && _modalState$touchShif2 !== void 0 ? _modalState$touchShif2 : 0) < 0 ? -1 : 1);
         translateY = Math.max(0, translateY + expectTranslateY);
 
         if (translateY >= 30) {
@@ -524,12 +570,16 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
     key: "waitTransitionFinish",
     value: function waitTransitionFinish(modalState, eventHandler) {
       if (transitionEvent.supported) {
+        var _modalState$innerElem4;
+
         var onceHandler = function onceHandler() {
-          modalState.innerElement.removeEventListener(transitionEvent.name, onceHandler);
+          var _modalState$innerElem3;
+
+          modalState === null || modalState === void 0 ? void 0 : (_modalState$innerElem3 = modalState.innerElement) === null || _modalState$innerElem3 === void 0 ? void 0 : _modalState$innerElem3.removeEventListener(transitionEvent.name, onceHandler);
           eventHandler();
         };
 
-        modalState.innerElement.addEventListener(transitionEvent.name, onceHandler);
+        modalState === null || modalState === void 0 ? void 0 : (_modalState$innerElem4 = modalState.innerElement) === null || _modalState$innerElem4 === void 0 ? void 0 : _modalState$innerElem4.addEventListener(transitionEvent.name, onceHandler);
       } else {
         setTimeout(eventHandler, this.timeout);
       }
@@ -555,19 +605,25 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "setMaskOpacity",
     value: function setMaskOpacity(modalState) {
-      var _this6 = this;
+      var _this$props$history,
+          _this6 = this;
 
       var forceOpacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
 
-      if (forceOpacity === null && this.props.history[0] !== modalState.id) {
+      if (forceOpacity === null && ((_this$props$history = this.props.history) === null || _this$props$history === void 0 ? void 0 : _this$props$history[0]) !== modalState.id) {
         return;
       }
 
-      cancelAnimationFrame(this.maskAnimationFrame);
+      if (this.maskAnimationFrame) {
+        cancelAnimationFrame(this.maskAnimationFrame);
+      }
+
       this.maskAnimationFrame = requestAnimationFrame(function () {
         if (_this6.maskElementRef.current) {
-          var translateY = modalState.translateY,
-              translateYCurrent = modalState.translateYCurrent;
+          var _modalState$translate7 = modalState.translateY,
+              translateY = _modalState$translate7 === void 0 ? 0 : _modalState$translate7,
+              _modalState$translate8 = modalState.translateYCurrent,
+              translateYCurrent = _modalState$translate8 === void 0 ? 0 : _modalState$translate8;
           var opacity = forceOpacity === null ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0 : forceOpacity;
           _this6.maskElementRef.current.style.opacity = Math.max(0, Math.min(100, opacity)).toString();
         }
@@ -576,7 +632,8 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this7 = this;
+      var _this$props$configPro,
+          _this7 = this;
 
       var _this$props = this.props,
           activeModal = _this$props.activeModal,
@@ -595,10 +652,10 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       }, createScopedElement(ModalRootContext.Provider, {
         value: this.modalRootContext
       }, createScopedElement(Touch, {
-        vkuiClass: classNames(getClassName('ModalRoot', this.props.platform), {
-          'ModalRoot--vkapps': this.props.configProvider.webviewType === WebviewType.VKAPPS,
-          'ModalRoot--touched': touchDown,
-          'ModalRoot--switching': !!(enteringModal || exitingModal)
+        vkuiClass: classNames(getClassName("ModalRoot", this.props.platform), {
+          "ModalRoot--vkapps": ((_this$props$configPro = this.props.configProvider) === null || _this$props$configPro === void 0 ? void 0 : _this$props$configPro.webviewType) === WebviewType.VKAPPS,
+          "ModalRoot--touched": touchDown,
+          "ModalRoot--switching": !!(enteringModal || exitingModal)
         }),
         onMove: this.onTouchMove,
         onEnd: this.onTouchEnd,
@@ -613,29 +670,35 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       }, this.getModals().map(function (Modal) {
         var modalId = getNavId(Modal.props, warn);
 
-        if (modalId !== activeModal && modalId !== exitingModal) {
+        var _modalState = _this7.getModalState(modalId);
+
+        if (modalId !== activeModal && modalId !== exitingModal || !_modalState) {
           return null;
         }
 
-        var modalState = _objectSpread({}, _this7.getModalState(modalId));
+        var modalState = _objectSpread({}, _modalState);
 
         var isPage = modalState.type === ModalType.PAGE;
         var key = "modal-".concat(modalId);
         return createScopedElement(FocusTrap, {
           key: key,
           getRootRef: function getRootRef(e) {
-            return _this7.getModalState(modalId).modalElement = e;
+            var modalState = _this7.getModalState(modalId);
+
+            if (modalState) {
+              modalState.modalElement = e;
+            }
           },
           onClose: _this7.props.closeActiveModal,
           timeout: _this7.timeout,
-          vkuiClass: classNames('ModalRoot__modal', {
-            'ModalRoot__modal--active': modalId === activeModal,
-            'ModalRoot__modal--prev': modalId === exitingModal,
-            'ModalRoot__modal--next': exitingModal && modalId === activeModal || modalId === enteringModal,
-            'ModalRoot__modal--dragging': dragging,
-            'ModalRoot__modal--expandable': isPage && modalState.expandable,
-            'ModalRoot__modal--expanded': isPage && modalState.expanded,
-            'ModalRoot__modal--collapsed': isPage && modalState.collapsed
+          vkuiClass: classNames("ModalRoot__modal", {
+            "ModalRoot__modal--active": modalId === activeModal,
+            "ModalRoot__modal--prev": modalId === exitingModal,
+            "ModalRoot__modal--next": exitingModal && modalId === activeModal || modalId === enteringModal,
+            "ModalRoot__modal--dragging": dragging,
+            "ModalRoot__modal--expandable": isPage && modalState.expandable,
+            "ModalRoot__modal--expanded": isPage && modalState.expanded,
+            "ModalRoot__modal--collapsed": isPage && modalState.collapsed
           }),
           restoreFocus: false
         }, Modal);
@@ -646,7 +709,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   return ModalRootTouchComponent;
 }(React.Component);
 
-export var ModalRootTouch = withContext(withPlatform(withDOM(withModalManager(initModal)(ModalRootTouchComponent))), ConfigProviderContext, 'configProvider');
+export var ModalRootTouch = withContext(withPlatform(withDOM(withModalManager(initModal)(ModalRootTouchComponent))), ConfigProviderContext, "configProvider");
 /**
  * Инициализирует модалку перед анимацией открытия
  */
@@ -661,15 +724,17 @@ function initModal(modalState) {
       return initCardModal(modalState);
 
     default:
-      IS_DEV && warn('[initActiveModal] modalState.type is unknown');
+      IS_DEV && warn("[initActiveModal] modalState.type is unknown");
   }
 }
 
 function initPageModal(modalState) {
+  var _contentElement$clien;
+
   var contentElement = modalState.contentElement;
-  var contentHeight = contentElement.firstElementChild.offsetHeight;
+  var contentHeight = (contentElement === null || contentElement === void 0 ? void 0 : contentElement.firstElementChild).offsetHeight;
   var prevTranslateY = modalState.translateY;
-  modalState.expandable = contentHeight > contentElement.clientHeight || modalState.settlingHeight === 100;
+  modalState.expandable = contentHeight > ((_contentElement$clien = contentElement === null || contentElement === void 0 ? void 0 : contentElement.clientHeight) !== null && _contentElement$clien !== void 0 ? _contentElement$clien : 0) || modalState.settlingHeight === 100;
   var collapsed = false;
   var expanded = false;
   var translateYFrom;
@@ -679,7 +744,9 @@ function initPageModal(modalState) {
   var hiddenRange;
 
   if (modalState.expandable) {
-    translateYFrom = 100 - modalState.settlingHeight;
+    var _modalState$settlingH;
+
+    translateYFrom = 100 - ((_modalState$settlingH = modalState.settlingHeight) !== null && _modalState$settlingH !== void 0 ? _modalState$settlingH : 0);
     var shiftHalf = translateYFrom / 2;
     var visiblePart = 100 - translateYFrom;
     expandedRange = [0, shiftHalf];
@@ -689,9 +756,11 @@ function initPageModal(modalState) {
     expanded = translateYFrom <= 0;
     translateY = translateYFrom;
   } else {
-    var headerHeight = modalState.headerElement.offsetHeight;
+    var _modalState$headerEle2, _modalState$headerEle3, _modalState$innerElem5, _modalState$innerElem6, _modalState$innerElem7;
+
+    var headerHeight = (_modalState$headerEle2 = (_modalState$headerEle3 = modalState.headerElement) === null || _modalState$headerEle3 === void 0 ? void 0 : _modalState$headerEle3.offsetHeight) !== null && _modalState$headerEle2 !== void 0 ? _modalState$headerEle2 : 0;
     var height = contentHeight + headerHeight;
-    translateYFrom = 100 - height / modalState.innerElement.parentElement.offsetHeight * 100;
+    translateYFrom = 100 - height / ((_modalState$innerElem5 = (_modalState$innerElem6 = modalState.innerElement) === null || _modalState$innerElem6 === void 0 ? void 0 : (_modalState$innerElem7 = _modalState$innerElem6.parentElement) === null || _modalState$innerElem7 === void 0 ? void 0 : _modalState$innerElem7.offsetHeight) !== null && _modalState$innerElem5 !== void 0 ? _modalState$innerElem5 : 0) * 100;
     translateY = translateYFrom;
     expandedRange = [translateY, translateY + 25];
     collapsedRange = [translateY + 25, translateY + 25];
@@ -699,7 +768,7 @@ function initPageModal(modalState) {
   } // Если модалка может открываться на весь экран, и новый сдвиг больше предыдущего, то откроем её на весь экран
 
 
-  if (modalState.expandable && translateY > prevTranslateY || modalState.settlingHeight === 100) {
+  if (modalState.expandable && translateY > (prevTranslateY !== null && prevTranslateY !== void 0 ? prevTranslateY : 0) || modalState.settlingHeight === 100) {
     translateY = 0;
   }