@vkontakte/vkui 4.22.2 → 4.25.1

package/dist/cjs/components/ModalRoot/ModalRoot.js

@@ -68,10 +68,14 @@ var _FocusTrap = require("../FocusTrap/FocusTrap");
 var _useModalManager = require("./useModalManager");
 
 var _excluded = ["id"];
-var warn = (0, _warnOnce.warnOnce)('ModalRoot');
-var IS_DEV = process.env.NODE_ENV === 'development';
+var warn = (0, _warnOnce.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];
 }
 
@@ -89,13 +93,13 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
 
     (0, _classCallCheck2.default)(this, ModalRootTouchComponent);
     _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "documentScrolling", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "documentScrolling", false);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "maskElementRef", void 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "viewportRef", /*#__PURE__*/React.createRef());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "maskAnimationFrame", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "maskAnimationFrame", undefined);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "modalRootContext", void 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "frameIds", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "restoreFocusTo", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "restoreFocusTo", undefined);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "preventTouch", function (event) {
       if (!event) {
         return false;
@@ -155,15 +159,17 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTouchEnd", function (e) {
       var modalState = _this.getModalState(_this.props.activeModal);
 
-      if (modalState.type === _types.ModalType.PAGE) {
+      if ((modalState === null || modalState === void 0 ? void 0 : modalState.type) === _types.ModalType.PAGE) {
         return _this.onPageTouchEnd(e, modalState);
       }
 
-      if (modalState.type === _types.ModalType.CARD) {
+      if ((modalState === null || modalState === void 0 ? void 0 : modalState.type) === _types.ModalType.CARD) {
         return _this.onCardTouchEnd(e, modalState);
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onScroll", function (e) {
+      var _modalState$contentEl;
+
       var activeModal = _this.props.activeModal;
       var target = e.target;
 
@@ -173,9 +179,13 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
 
       var modalState = _this.getModalState(activeModal);
 
-      if (modalState.type === _types.ModalType.PAGE && modalState.contentElement.contains(target)) {
+      if ((modalState === null || modalState === void 0 ? void 0 : modalState.type) === _types.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;
@@ -222,6 +232,10 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getModalState",
     value: function getModalState(id) {
+      if (!id) {
+        return undefined;
+      }
+
       return this.props.getModalState(id);
     }
   }, {
@@ -234,14 +248,16 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
     value: function componentDidMount() {
       // Отслеживаем изменение размеров viewport (Необходимо для iOS)
       if (this.props.platform === _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",
@@ -258,12 +274,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
 
 
@@ -293,12 +314,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
         });
       }
@@ -330,7 +351,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({
@@ -349,7 +373,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) {
@@ -360,19 +384,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();
       }
 
@@ -383,7 +411,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
         });
@@ -397,10 +427,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;
         }
 
@@ -410,7 +442,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         var shiftYPercent = shiftY / this.window.innerHeight * 100;
         var shiftYCurrent = (0, _touch.rubber)(shiftYPercent, 72, 0.8, this.props.platform === _platform.ANDROID || this.props.platform === _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);
       }
@@ -418,11 +450,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,
@@ -433,7 +469,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         var shiftYPercent = shiftY / modalState.innerElement.offsetHeight * 100;
         var shiftYCurrent = (0, _touch.rubber)(shiftYPercent, 72, 1.2, this.props.platform === _platform.ANDROID || this.props.platform === _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);
       }
@@ -449,21 +485,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])) {
@@ -510,8 +554,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) {
@@ -545,12 +591,16 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
     key: "waitTransitionFinish",
     value: function waitTransitionFinish(modalState, eventHandler) {
       if (_supportEvents.transitionEvent.supported) {
+        var _modalState$innerElem4;
+
         var onceHandler = function onceHandler() {
-          modalState.innerElement.removeEventListener(_supportEvents.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(_supportEvents.transitionEvent.name, onceHandler);
           eventHandler();
         };
 
-        modalState.innerElement.addEventListener(_supportEvents.transitionEvent.name, onceHandler);
+        modalState === null || modalState === void 0 ? void 0 : (_modalState$innerElem4 = modalState.innerElement) === null || _modalState$innerElem4 === void 0 ? void 0 : _modalState$innerElem4.addEventListener(_supportEvents.transitionEvent.name, onceHandler);
       } else {
         setTimeout(eventHandler, this.timeout);
       }
@@ -576,19 +626,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();
         }
@@ -597,7 +653,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,
@@ -616,10 +673,10 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       }, (0, _jsxRuntime.createScopedElement)(_ModalRootContext.default.Provider, {
         value: this.modalRootContext
       }, (0, _jsxRuntime.createScopedElement)(_Touch.Touch, {
-        vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)('ModalRoot', this.props.platform), {
-          'ModalRoot--vkapps': this.props.configProvider.webviewType === _ConfigProviderContext.WebviewType.VKAPPS,
-          'ModalRoot--touched': touchDown,
-          'ModalRoot--switching': !!(enteringModal || exitingModal)
+        vkuiClass: (0, _classNames.classNames)((0, _getClassName.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) === _ConfigProviderContext.WebviewType.VKAPPS,
+          "ModalRoot--touched": touchDown,
+          "ModalRoot--switching": !!(enteringModal || exitingModal)
         }),
         onMove: this.onTouchMove,
         onEnd: this.onTouchEnd,
@@ -634,28 +691,34 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       }, this.getModals().map(function (Modal) {
         var modalId = (0, _getNavId.getNavId)(Modal.props, warn);
 
-        if (modalId !== activeModal && modalId !== exitingModal) {
+        var _modalState = _this7.getModalState(modalId);
+
+        if (modalId !== activeModal && modalId !== exitingModal || !_modalState) {
           return null;
         }
 
-        var modalState = (0, _objectSpread2.default)({}, _this7.getModalState(modalId));
+        var modalState = (0, _objectSpread2.default)({}, _modalState);
         var isPage = modalState.type === _types.ModalType.PAGE;
         var key = "modal-".concat(modalId);
         return (0, _jsxRuntime.createScopedElement)(_FocusTrap.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: (0, _classNames.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: (0, _classNames.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);
@@ -665,7 +728,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   return ModalRootTouchComponent;
 }(React.Component);
 
-var ModalRootTouch = (0, _withContext.withContext)((0, _withPlatform.withPlatform)((0, _dom.withDOM)((0, _useModalManager.withModalManager)(initModal)(ModalRootTouchComponent))), _ConfigProviderContext.ConfigProviderContext, 'configProvider');
+var ModalRootTouch = (0, _withContext.withContext)((0, _withPlatform.withPlatform)((0, _dom.withDOM)((0, _useModalManager.withModalManager)(initModal)(ModalRootTouchComponent))), _ConfigProviderContext.ConfigProviderContext, "configProvider");
 /**
  * Инициализирует модалку перед анимацией открытия
  */
@@ -682,15 +745,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;
@@ -700,7 +765,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];
@@ -710,9 +777,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];
@@ -720,7 +789,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;
   }