@vkontakte/vkui 4.24.0 → 4.25.0

package/dist/cjs/components/ModalPageHeader/ModalPageHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalPageHeader/ModalPageHeader.tsx"],"names":["ModalPageHeader","props","platform","sizeX","left","right","children","separator","getRef","restProps","isPrimitive","hasSeparator","VKCOM","defaultProps"],"mappings":";;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;AAiBA,IAAMA,eAA8D,GAAG,SAAjEA,eAAiE,CACrEC,KADqE,EAElE;AACH,MAAMC,QAAQ,GAAG,+BAAjB;;AACA,uBAAkB,oCAAlB;AAAA,MAAQC,KAAR,kBAAQA,KAAR;;AACA,MAAQC,IAAR,GAAmEH,KAAnE,CAAQG,IAAR;AAAA,MAAcC,KAAd,GAAmEJ,KAAnE,CAAcI,KAAd;AAAA,MAAqBC,QAArB,GAAmEL,KAAnE,CAAqBK,QAArB;AAAA,MAA+BC,SAA/B,GAAmEN,KAAnE,CAA+BM,SAA/B;AAAA,MAA0CC,MAA1C,GAAmEP,KAAnE,CAA0CO,MAA1C;AAAA,MAAqDC,SAArD,0CAAmER,KAAnE;AACA,MAAMS,WAAW,GAAG,iCAAqBJ,QAArB,CAApB;AACA,MAAMK,YAAY,GAAGJ,SAAS,IAAIL,QAAQ,KAAKU,eAA/C;AAEA,SACE,uEACMH,SADN;AAEE,IAAA,SAAS,EAAE,4BACT,gCAAa,iBAAb,EAAgCP,QAAhC,CADS,mCAEiBC,KAFjB,EAFb;AAME,IAAA,GAAG,EAAEK;AANP,MAQE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KAAwCJ,IAAxC,CADF,EAGE;AAAK,IAAA,SAAS,EAAC;AAAf,KACE;AAAK,IAAA,SAAS,EAAC;AAAf,KACGM,WAAW,GAAG,mDAAOJ,QAAP,CAAH,GAA6BA,QAD3C,CADF,CAHF,EASE;AAAK,IAAA,SAAS,EAAC;AAAf,KAAyCD,KAAzC,CATF,CARF,EAoBGM,YAAY,IACX,qCAAC,kBAAD;AAAW,IAAA,IAAI,MAAf;AAAgB,IAAA,SAAS,EAAC;AAA1B,IArBJ,CADF;AA0BD,CAnCD;;AAqCAX,eAAe,CAACa,YAAhB,GAA+B;AAC7BN,EAAAA,SAAS,EAAE;AADkB,CAA/B;eAIeP,e","sourcesContent":["import * as React from \"react\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { classNames } from \"../../lib/classNames\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { HasRef } from \"../../types\";\nimport { isPrimitiveReactNode } from \"../../lib/utils\";\nimport { VKCOM } from \"../../lib/platform\";\nimport Separator from \"../Separator/Separator\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport \"./ModalPageHeader.css\";\n\nexport interface ModalPageHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    HasRef<HTMLDivElement> {\n  /**\n   * Иконки, отображаемые слева\n   */\n  left?: React.ReactNode;\n  /**\n   * Иконки, отображаемые справа\n   */\n  right?: React.ReactNode;\n  separator?: boolean;\n}\n\nconst ModalPageHeader: React.FunctionComponent<ModalPageHeaderProps> = (\n  props: ModalPageHeaderProps\n) => {\n  const platform = usePlatform();\n  const { sizeX } = useAdaptivity();\n  const { left, right, children, separator, getRef, ...restProps } = props;\n  const isPrimitive = isPrimitiveReactNode(children);\n  const hasSeparator = separator && platform === VKCOM;\n\n  return (\n    <div\n      {...restProps}\n      vkuiClass={classNames(\n        getClassName(\"ModalPageHeader\", platform),\n        `ModalPageHeader--sizeX-${sizeX}`\n      )}\n      ref={getRef}\n    >\n      <div vkuiClass=\"ModalPageHeader__in\">\n        <div vkuiClass=\"ModalPageHeader__left\">{left}</div>\n\n        <div vkuiClass=\"ModalPageHeader__content\">\n          <div vkuiClass=\"ModalPageHeader__content-in\">\n            {isPrimitive ? <span>{children}</span> : children}\n          </div>\n        </div>\n\n        <div vkuiClass=\"ModalPageHeader__right\">{right}</div>\n      </div>\n\n      {hasSeparator && (\n        <Separator wide vkuiClass=\"ModalPageHeader__separator\" />\n      )}\n    </div>\n  );\n};\n\nModalPageHeader.defaultProps = {\n  separator: true,\n};\n\nexport default ModalPageHeader;\n"],"file":"ModalPageHeader.js"}
+{"version":3,"sources":["../../../../src/components/ModalPageHeader/ModalPageHeader.tsx"],"names":["ModalPageHeader","children","separator","getRef","restProps","platform","viewWidth","viewHeight","hasMouse","hasSeparator","VKCOM","isDesktop","ViewWidth","SMALL_TABLET","ViewHeight","MEDIUM","defaultProps"],"mappings":";;;;;;;;;;;;;;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAQA,IAAMA,eAA8D,GAAG,SAAjEA,eAAiE,OAK3C;AAAA,MAJ1BC,QAI0B,QAJ1BA,QAI0B;AAAA,MAH1BC,SAG0B,QAH1BA,SAG0B;AAAA,MAF1BC,MAE0B,QAF1BA,MAE0B;AAAA,MADvBC,SACuB;AAC1B,MAAMC,QAAQ,GAAG,+BAAjB;;AACA,uBAA4C,oCAA5C;AAAA,MAAQC,SAAR,kBAAQA,SAAR;AAAA,MAAmBC,UAAnB,kBAAmBA,UAAnB;AAAA,MAA+BC,QAA/B,kBAA+BA,QAA/B;;AACA,MAAMC,YAAY,GAAGP,SAAS,IAAIG,QAAQ,KAAKK,eAA/C;AACA,MAAMC,SAAS,GACbL,SAAS,IAAIM,6BAAUC,YAAvB,KACCL,QAAQ,IAAID,UAAU,IAAIO,8BAAWC,MADtC,CADF;AAIA,SACE;AACE,IAAA,SAAS,EAAE,4BAAW,gCAAa,iBAAb,EAAgCV,QAAhC,CAAX,EAAsD;AAC/D,kCAA4BM;AADmC,KAAtD,CADb;AAIE,IAAA,GAAG,EAAER;AAJP,KAME,qCAAC,oBAAD;AACE,IAAA,SAAS,EAAC;AADZ,KAEMC,SAFN;AAGE,IAAA,KAAK,EAAE,KAHT;AAIE,IAAA,SAAS,EAAE,KAJb;AAKE,IAAA,WAAW;AALb,MAOGH,QAPH,CANF,EAeGQ,YAAY,IAAI,qCAAC,kBAAD;AAAW,IAAA,IAAI;AAAf,IAfnB,CADF;AAmBD,CAhCD;;AAkCAT,eAAe,CAACgB,YAAhB,GAA+B;AAC7Bd,EAAAA,SAAS,EAAE;AADkB,CAA/B,C,CAIA;;eACeF,e","sourcesContent":["import * as React from \"react\";\nimport { usePlatform } from \"../../hooks/usePlatform\";\nimport { HasRef } from \"../../types\";\nimport { VKCOM } from \"../../lib/platform\";\nimport PanelHeader, { PanelHeaderProps } from \"../PanelHeader/PanelHeader\";\nimport Separator from \"../Separator/Separator\";\nimport { useAdaptivity } from \"../../hooks/useAdaptivity\";\nimport { classNames } from \"../../lib/classNames\";\nimport { getClassName } from \"../../helpers/getClassName\";\nimport { ViewHeight, ViewWidth } from \"../AdaptivityProvider/AdaptivityContext\";\nimport \"./ModalPageHeader.css\";\n\nexport interface ModalPageHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Omit<PanelHeaderProps, \"fixed\" | \"shadow\">,\n    HasRef<HTMLDivElement> {}\n\nconst ModalPageHeader: React.FunctionComponent<ModalPageHeaderProps> = ({\n  children,\n  separator,\n  getRef,\n  ...restProps\n}: ModalPageHeaderProps) => {\n  const platform = usePlatform();\n  const { viewWidth, viewHeight, hasMouse } = useAdaptivity();\n  const hasSeparator = separator && platform === VKCOM;\n  const isDesktop =\n    viewWidth >= ViewWidth.SMALL_TABLET &&\n    (hasMouse || viewHeight >= ViewHeight.MEDIUM);\n\n  return (\n    <div\n      vkuiClass={classNames(getClassName(\"ModalPageHeader\", platform), {\n        \"ModalPageHeader--desktop\": isDesktop,\n      })}\n      ref={getRef}\n    >\n      <PanelHeader\n        vkuiClass=\"ModalPageHeader__in\"\n        {...restProps}\n        fixed={false}\n        separator={false}\n        transparent\n      >\n        {children}\n      </PanelHeader>\n      {hasSeparator && <Separator wide />}\n    </div>\n  );\n};\n\nModalPageHeader.defaultProps = {\n  separator: true,\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default ModalPageHeader;\n"],"file":"ModalPageHeader.js"}

package/dist/cjs/components/ModalRoot/ModalRoot.d.ts

@@ -13,4 +13,4 @@ export interface ModalRootProps extends HasPlatform {
      */
     configProvider?: ConfigProviderContextInterface;
 }
-export declare const ModalRootTouch: React.FC<ModalRootProps>;
+export declare const ModalRootTouch: React.FC<Pick<ModalRootProps, "configProvider" | "onClose" | "activeModal">>;

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

@@ -72,6 +72,10 @@ 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,7 +248,9 @@ 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);
       }
     }
   }, {
@@ -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
 
 
@@ -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 === null || modalState === void 0 ? void 0 : 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 === null || modalState === void 0 ? void 0 : 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,
@@ -617,7 +674,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         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--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)
         }),
@@ -634,17 +691,23 @@ 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,
@@ -687,10 +750,12 @@ function initModal(modalState) {
 }
 
 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;
   }