@vkontakte/vkui 4.23.0 → 4.25.2

package/src/components/ModalRoot/ModalRoot.tsx

@@ -1,34 +1,39 @@
-import * as React from 'react';
-import { Touch, TouchEvent } from '../Touch/Touch';
-import TouchRootContext from '../Touch/TouchContext';
-import { getClassName } from '../../helpers/getClassName';
-import { classNames } from '../../lib/classNames';
-import { setTransformStyle } from '../../lib/styles';
-import { rubber } from '../../lib/touch';
-import { ANDROID, IOS, VKCOM } from '../../lib/platform';
-import { transitionEvent } from '../../lib/supportEvents';
-import { HasPlatform } from '../../types';
-import { withPlatform } from '../../hoc/withPlatform';
-import { withContext } from '../../hoc/withContext';
-import ModalRootContext, { ModalRootContextInterface } from './ModalRootContext';
+import * as React from "react";
+import { Touch, TouchEvent } from "../Touch/Touch";
+import TouchRootContext from "../Touch/TouchContext";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { setTransformStyle } from "../../lib/styles";
+import { rubber } from "../../lib/touch";
+import { ANDROID, IOS, VKCOM } from "../../lib/platform";
+import { transitionEvent } from "../../lib/supportEvents";
+import { HasPlatform } from "../../types";
+import { withPlatform } from "../../hoc/withPlatform";
+import { withContext } from "../../hoc/withContext";
+import ModalRootContext, {
+  ModalRootContextInterface,
+} from "./ModalRootContext";
 import {
   ConfigProviderContext,
   ConfigProviderContextInterface,
   WebviewType,
-} from '../ConfigProvider/ConfigProviderContext';
-import { ModalsStateEntry, ModalType, TranslateRange } from './types';
-import { MODAL_PAGE_DEFAULT_PERCENT_HEIGHT } from './constants';
-import { DOMProps, withDOM } from '../../lib/dom';
-import { getNavId } from '../../lib/getNavId';
-import { warnOnce } from '../../lib/warnOnce';
-import { FocusTrap } from '../FocusTrap/FocusTrap';
-import { ModalTransitionProps, withModalManager } from './useModalManager';
-import './ModalRoot.css';
-
-const warn = warnOnce('ModalRoot');
-const IS_DEV = process.env.NODE_ENV === 'development';
-
-function numberInRange(number: number, range: TranslateRange) {
+} from "../ConfigProvider/ConfigProviderContext";
+import { ModalsStateEntry, ModalType, TranslateRange } from "./types";
+import { MODAL_PAGE_DEFAULT_PERCENT_HEIGHT } from "./constants";
+import { DOMProps, withDOM } from "../../lib/dom";
+import { getNavId } from "../../lib/getNavId";
+import { warnOnce } from "../../lib/warnOnce";
+import { FocusTrap } from "../FocusTrap/FocusTrap";
+import { ModalTransitionProps, withModalManager } from "./useModalManager";
+import "./ModalRoot.css";
+
+const warn = warnOnce("ModalRoot");
+const IS_DEV = process.env.NODE_ENV === "development";
+
+function numberInRange(number: number, range: TranslateRange | undefined) {
+  if (!range) {
+    return false;
+  }
   return number >= range[0] && number <= range[1];
 }
 
@@ -54,7 +59,10 @@ interface ModalRootState {
   dragging?: boolean;
 }
 
-class ModalRootTouchComponent extends React.Component<ModalRootProps & DOMProps & ModalTransitionProps, ModalRootState> {
+class ModalRootTouchComponent extends React.Component<
+  ModalRootProps & DOMProps & ModalTransitionProps,
+  ModalRootState
+> {
   constructor(props: ModalRootProps & ModalTransitionProps) {
     super(props);
     this.state = {
@@ -66,7 +74,8 @@ class ModalRootTouchComponent extends React.Component<ModalRootProps & DOMProps
 
     this.modalRootContext = {
       updateModalHeight: this.updateModalHeight,
-      registerModal: ({ id, ...data }) => Object.assign(this.getModalState(id), data),
+      registerModal: ({ id, ...data }) =>
+        Object.assign(this.getModalState(id), data),
       onClose: () => this.props.closeActiveModal(),
       isInsideModal: true,
     };
@@ -74,29 +83,34 @@ class ModalRootTouchComponent extends React.Component<ModalRootProps & DOMProps
     this.frameIds = {};
   }
 
-  private documentScrolling: boolean;
+  private documentScrolling = false;
   private readonly maskElementRef: React.RefObject<HTMLDivElement>;
   private readonly viewportRef = React.createRef<HTMLDivElement>();
-  private maskAnimationFrame: number;
+  private maskAnimationFrame: number | undefined = undefined;
   private readonly modalRootContext: ModalRootContextInterface;
   private readonly frameIds: {
     [index: string]: number;
   };
-  private restoreFocusTo: HTMLElement;
+  private restoreFocusTo: HTMLElement | undefined | null = undefined;
 
   get timeout(): number {
-    return this.props.platform === ANDROID || this.props.platform === VKCOM ? 320 : 400;
+    return this.props.platform === ANDROID || this.props.platform === VKCOM
+      ? 320
+      : 400;
   }
 
-  get document(): Document {
+  get document() {
     return this.props.document;
   }
 
-  get window(): Window {
+  get window() {
     return this.props.window;
   }
 
-  getModalState(id: string) {
+  getModalState(id: string | undefined | null) {
+    if (!id) {
+      return undefined;
+    }
     return this.props.getModalState(id);
   }
 
@@ -107,43 +121,66 @@ class ModalRootTouchComponent extends React.Component<ModalRootProps & DOMProps
   componentDidMount() {
     // Отслеживаем изменение размеров viewport (Необходимо для iOS)
     if (this.props.platform === IOS) {
-      this.window.addEventListener('resize', this.updateModalTranslate, false);
+      this.window?.addEventListener("resize", this.updateModalTranslate, false);
     }
   }
 
   componentWillUnmount() {
     this.toggleDocumentScrolling(true);
-    this.window.removeEventListener('resize', this.updateModalTranslate, false);
+    this.window!.removeEventListener(
+      "resize",
+      this.updateModalTranslate,
+      false
+    );
   }
 
   componentDidUpdate(prevProps: ModalRootProps & ModalTransitionProps) {
     // transition phase 2: animate exiting modal
-    if (this.props.exitingModal && this.props.exitingModal !== prevProps.exitingModal) {
+    if (
+      this.props.exitingModal &&
+      this.props.exitingModal !== prevProps.exitingModal
+    ) {
       this.closeModal(this.props.exitingModal);
     }
 
     // transition phase 3: animate entering modal
-    if (this.props.enteringModal && this.props.enteringModal !== prevProps.enteringModal) {
+    if (
+      this.props.enteringModal &&
+      this.props.enteringModal !== prevProps.enteringModal
+    ) {
       const { enteringModal } = this.props;
       const enteringState = this.getModalState(enteringModal);
       this.waitTransitionFinish(enteringState, () => {
-        enteringState.innerElement.style.transitionDelay = null;
+        if (enteringState?.innerElement) {
+          enteringState.innerElement.style.transitionDelay = "";
+        }
         this.props.onEnter(enteringModal);
       });
-      enteringState.innerElement.style.transitionDelay = this.props.delayEnter ? `${this.timeout}ms` : null;
-      this.animateTranslate(enteringState, enteringState.translateY);
+
+      if (enteringState?.innerElement) {
+        enteringState.innerElement.style.transitionDelay = this.props.delayEnter
+          ? `${this.timeout}ms`
+          : "";
+        this.animateTranslate(enteringState, enteringState.translateY);
+      }
     }
 
     // focus restoration
     if (this.props.activeModal && !prevProps.activeModal) {
-      this.restoreFocusTo = this.document.activeElement as HTMLElement;
+      this.restoreFocusTo = this.document!.activeElement as HTMLElement;
     }
-    if (!this.props.activeModal && !this.props.exitingModal && this.restoreFocusTo) {
+    if (
+      !this.props.activeModal &&
+      !this.props.exitingModal &&
+      this.restoreFocusTo
+    ) {
       this.restoreFocusTo.focus();
       this.restoreFocusTo = null;
     }
 
-    this.toggleDocumentScrolling(!this.props.activeModal && !this.props.exitingModal);
+    this.toggleDocumentScrolling(
+      !this.props.activeModal && !this.props.exitingModal
+    );
   }
 
   /* Отключает скролл документа */
@@ -157,10 +194,14 @@ class ModalRootTouchComponent extends React.Component<ModalRootProps & DOMProps
       // Здесь нужен последний аргумент с такими же параметрами, потому что
       // некоторые браузеры на странных вендорах типа Meizu не удаляют обработчик.
       // https://github.com/VKCOM/VKUI/issues/444
-      // @ts-ignore (В интерфейсе EventListenerOptions нет поля passive)
-      this.window.removeEventListener('touchmove', this.preventTouch, { passive: false });
+      this.window!.removeEventListener("touchmove", this.preventTouch, {
+        // @ts-ignore (В интерфейсе EventListenerOptions нет поля passive)
+        passive: false,
+      });
     } else {
-      this.window.addEventListener('touchmove', this.preventTouch, { passive: false });
+      this.window!.addEventListener("touchmove", this.preventTouch, {
+        passive: false,
+      });
     }
   }
 
@@ -193,7 +234,9 @@ class ModalRootTouchComponent extends React.Component<ModalRootProps & DOMProps
       let needAnimate = false;
 
       if (prevModalState.expandable === currentModalState.expandable) {
-        if (prevModalState.translateYFrom !== currentModalState.translateYFrom) {
+        if (
+          prevModalState.translateYFrom !== currentModalState.translateYFrom
+        ) {
           needAnimate = true;
         }
       } else {
@@ -209,7 +252,11 @@ class ModalRootTouchComponent extends React.Component<ModalRootProps & DOMProps
   updateModalHeight = () => {
     const modalState = this.getModalState(this.props.activeModal);
 
-    if (modalState && modalState.type === ModalType.PAGE && modalState.dynamicContentHeight) {
+    if (
+      modalState &&
+      modalState.type === ModalType.PAGE &&
+      modalState.dynamicContentHeight
+    ) {
       if (this.props.enteringModal) {
         this.waitTransitionFinish(modalState, () => {
           requestAnimationFrame(() => this.checkPageContentHeight());
@@ -232,13 +279,20 @@ class ModalRootTouchComponent extends React.Component<ModalRootProps & DOMProps
     }
 
     const nextModalState = this.getModalState(this.props.activeModal);
-    const nextIsPage = !!nextModalState && nextModalState.type === ModalType.PAGE;
+    const nextIsPage =
+      !!nextModalState && nextModalState.type === ModalType.PAGE;
 
-    const prevIsPage = !!prevModalState && prevModalState.type === ModalType.PAGE;
+    const prevIsPage =
+      !!prevModalState && prevModalState.type === ModalType.PAGE;
     this.waitTransitionFinish(prevModalState, () => this.props.onExit(id));
-    const exitTranslate = prevIsPage && nextIsPage && prevModalState.translateY <= nextModalState.translateYFrom && !this.props.isBack
-      ? nextModalState.translateYFrom + 10
-      : 100;
+    const exitTranslate =
+      prevIsPage &&
+      nextIsPage &&
+      (prevModalState.translateY ?? 0) <=
+        (nextModalState?.translateYFrom ?? 0) &&
+      !this.props.isBack
+        ? (nextModalState?.translateYFrom ?? 0) + 10
+        : 100;
     this.animateTranslate(prevModalState, exitTranslate);
 
     if (!nextModalState) {
@@ -270,13 +324,13 @@ class ModalRootTouchComponent extends React.Component<ModalRootProps & DOMProps
     const target = originalEvent.target as HTMLElement;
 
     if (!event.isY) {
-      if (this.viewportRef.current.contains(target)) {
+      if (this.viewportRef.current?.contains(target)) {
         originalEvent.preventDefault();
       }
       return;
     }
 
-    if (!modalState.innerElement.contains(target)) {
+    if (!modalState.innerElement?.contains(target)) {
       return originalEvent.preventDefault();
     }
 
@@ -285,7 +339,8 @@ class ModalRootTouchComponent extends React.Component<ModalRootProps & DOMProps
     const { expandable, contentScrolled, collapsed, expanded } = modalState;
 
     if (!this.state.touchDown) {
-      modalState.touchStartContentScrollTop = modalState.contentElement.scrollTop;
+      modalState.touchStartContentScrollTop =
+        modalState.contentElement?.scrollTop;
       this.setState({ touchDown: true });
     }
 
@@ -300,22 +355,31 @@ class ModalRootTouchComponent extends React.Component<ModalRootProps & DOMProps
     if (
       !modalState.expandable ||
       collapsed ||
-      expanded && modalState.touchMovePositive && modalState.touchStartContentScrollTop === 0 ||
-      modalState.headerElement.contains(target)
+      (expanded &&
+        modalState.touchMovePositive &&
+        modalState.touchStartContentScrollTop === 0) ||
+      modalState.headerElement?.contains(target)
     ) {
       originalEvent.preventDefault();
 
-      if (!expandable && shiftY < 0) {
+      if ((!expandable && shiftY < 0) || !this.window) {
         return;
       }
 
       !this.state.dragging && this.setState({ dragging: true });
 
-      const shiftYPercent = shiftY / this.window.innerHeight * 100;
-      const shiftYCurrent = rubber(shiftYPercent, 72, 0.8, this.props.platform === ANDROID || this.props.platform === VKCOM);
+      const shiftYPercent = (shiftY / this.window.innerHeight) * 100;
+      const 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.translateY ?? 0) + shiftYCurrent
+      );
 
       this.animateTranslate(modalState, modalState.translateYCurrent);
       this.setMaskOpacity(modalState);
@@ -325,16 +389,25 @@ class ModalRootTouchComponent extends React.Component<ModalRootProps & DOMProps
   onCardTouchMove(event: TouchEvent, modalState: ModalsStateEntry) {
     const { originalEvent, shiftY } = event;
     const target = originalEvent.target as HTMLElement;
-    if (modalState.innerElement.contains(target)) {
+    if (modalState.innerElement?.contains(target)) {
       if (!this.state.touchDown) {
         this.setState({ touchDown: true, dragging: true });
       }
 
-      const shiftYPercent = shiftY / modalState.innerElement.offsetHeight * 100;
-      const shiftYCurrent = rubber(shiftYPercent, 72, 1.2, this.props.platform === ANDROID || this.props.platform === VKCOM);
+      const shiftYPercent =
+        (shiftY / modalState.innerElement.offsetHeight) * 100;
+      const 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.translateY ?? 0) + shiftYCurrent
+      );
 
       this.animateTranslate(modalState, modalState.translateYCurrent);
       this.setMaskOpacity(modalState);
@@ -344,11 +417,11 @@ class ModalRootTouchComponent extends React.Component<ModalRootProps & DOMProps
   onTouchEnd = (e: TouchEvent) => {
     const modalState = this.getModalState(this.props.activeModal);
 
-    if (modalState.type === ModalType.PAGE) {
+    if (modalState?.type === ModalType.PAGE) {
       return this.onPageTouchEnd(e, modalState);
     }
 
-    if (modalState.type === ModalType.CARD) {
+    if (modalState?.type === ModalType.CARD) {
       return this.onCardTouchEnd(e, modalState);
     }
   };
@@ -361,22 +434,27 @@ class ModalRootTouchComponent extends React.Component<ModalRootProps & DOMProps
 
     let setStateCallback;
 
-    if (this.state.dragging) {
-      const shiftYEndPercent = (startY + shiftY) / this.window.innerHeight * 100;
+    if (this.state.dragging && this.window) {
+      const shiftYEndPercent =
+        ((startY + shiftY) / this.window.innerHeight) * 100;
 
-      let translateY = modalState.translateYCurrent;
-      const expectTranslateY = translateY / event.duration * 240 * 0.6 * (modalState.touchShiftYPercent < 0 ? -1 : 1);
+      let translateY = modalState.translateYCurrent ?? 0;
+      const expectTranslateY =
+        (translateY / event.duration) *
+        240 *
+        0.6 *
+        ((modalState.touchShiftYPercent ?? 0) < 0 ? -1 : 1);
       translateY = rangeTranslate(translateY + expectTranslateY);
 
       if (modalState.settlingHeight !== 100) {
         if (numberInRange(translateY, modalState.expandedRange)) {
-          translateY = modalState.expandedRange[0];
+          translateY = modalState.expandedRange?.[0] ?? 0;
         } else if (numberInRange(translateY, modalState.collapsedRange)) {
-          translateY = modalState.translateYFrom;
+          translateY = modalState.translateYFrom ?? 0;
         } else if (numberInRange(translateY, modalState.hiddenRange)) {
           translateY = 100;
         } else {
-          translateY = modalState.translateYFrom;
+          translateY = modalState.translateYFrom ?? 0;
         }
       } else {
         if (numberInRange(translateY, [0, 25])) {
@@ -409,19 +487,26 @@ class ModalRootTouchComponent extends React.Component<ModalRootProps & DOMProps
       };
     }
 
-    this.setState({
-      touchDown: false,
-      dragging: false,
-    }, setStateCallback);
+    this.setState(
+      {
+        touchDown: false,
+        dragging: false,
+      },
+      setStateCallback
+    );
   }
 
   onCardTouchEnd({ duration }: TouchEvent, modalState: ModalsStateEntry) {
     let setStateCallback;
 
     if (this.state.dragging) {
-      let translateY = modalState.translateYCurrent;
+      let translateY = modalState.translateYCurrent ?? 0;
 
-      const expectTranslateY = translateY / duration * 240 * 0.6 * (modalState.touchShiftYPercent < 0 ? -1 : 1);
+      const expectTranslateY =
+        (translateY / duration) *
+        240 *
+        0.6 *
+        ((modalState.touchShiftYPercent ?? 0) < 0 ? -1 : 1);
       translateY = Math.max(0, translateY + expectTranslateY);
 
       if (translateY >= 30) {
@@ -446,10 +531,13 @@ class ModalRootTouchComponent extends React.Component<ModalRootProps & DOMProps
       };
     }
 
-    this.setState({
-      touchDown: false,
-      dragging: false,
-    }, setStateCallback);
+    this.setState(
+      {
+        touchDown: false,
+        dragging: false,
+      },
+      setStateCallback
+    );
   }
 
   onScroll = (e: React.SyntheticEvent) => {
@@ -461,10 +549,15 @@ class ModalRootTouchComponent extends React.Component<ModalRootProps & DOMProps
       return;
     }
     const modalState = this.getModalState(activeModal);
-    if (modalState.type === ModalType.PAGE && modalState.contentElement.contains(target)) {
+    if (
+      modalState?.type === ModalType.PAGE &&
+      modalState?.contentElement?.contains(target)
+    ) {
       modalState.contentScrolled = true;
 
-      clearTimeout(modalState.contentScrollStopTimeout);
+      if (modalState.contentScrollStopTimeout) {
+        clearTimeout(modalState.contentScrollStopTimeout);
+      }
 
       modalState.contentScrollStopTimeout = setTimeout(() => {
         if (modalState.contentScrolled) {
@@ -474,14 +567,23 @@ class ModalRootTouchComponent extends React.Component<ModalRootProps & DOMProps
     }
   };
 
-  waitTransitionFinish(modalState: ModalsStateEntry, eventHandler: () => void) {
+  waitTransitionFinish(
+    modalState: ModalsStateEntry | undefined,
+    eventHandler: () => void
+  ) {
     if (transitionEvent.supported) {
       const onceHandler = () => {
-        modalState.innerElement.removeEventListener(transitionEvent.name, onceHandler);
+        modalState?.innerElement?.removeEventListener(
+          transitionEvent.name as string,
+          onceHandler
+        );
         eventHandler();
       };
 
-      modalState.innerElement.addEventListener(transitionEvent.name, onceHandler);
+      modalState?.innerElement?.addEventListener(
+        transitionEvent.name as string,
+        onceHandler
+      );
     } else {
       setTimeout(eventHandler, this.timeout);
     }
@@ -493,29 +595,42 @@ class ModalRootTouchComponent extends React.Component<ModalRootProps & DOMProps
    * @param {ModalsStateEntry} modalState
    * @param {number} percent Процент сдвига: 0 – полностью открыта, 100 – полностью закрыта
    */
-  animateTranslate(modalState: ModalsStateEntry, percent: number) {
+  animateTranslate(modalState: ModalsStateEntry, percent: number | undefined) {
     const frameId = `animateTranslateFrame${modalState.id}`;
 
     cancelAnimationFrame(this.frameIds[frameId]);
 
     this.frameIds[frameId] = requestAnimationFrame(() => {
-      setTransformStyle(modalState.innerElement, `translate3d(0, ${percent}%, 0)`);
+      setTransformStyle(
+        modalState.innerElement,
+        `translate3d(0, ${percent}%, 0)`
+      );
     });
   }
 
   /* Устанавливает прозрачность для полупрозрачной подложки */
-  setMaskOpacity(modalState: ModalsStateEntry, forceOpacity: number = null) {
-    if (forceOpacity === null && this.props.history[0] !== modalState.id) {
+  setMaskOpacity(
+    modalState: ModalsStateEntry,
+    forceOpacity: number | null = null
+  ) {
+    if (forceOpacity === null && this.props.history?.[0] !== modalState.id) {
       return;
     }
-
-    cancelAnimationFrame(this.maskAnimationFrame);
+    if (this.maskAnimationFrame) {
+      cancelAnimationFrame(this.maskAnimationFrame);
+    }
     this.maskAnimationFrame = requestAnimationFrame(() => {
       if (this.maskElementRef.current) {
-        const { translateY, translateYCurrent } = modalState;
-
-        const opacity = forceOpacity === null ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0 : forceOpacity;
-        this.maskElementRef.current.style.opacity = Math.max(0, Math.min(100, opacity)).toString();
+        const { translateY = 0, translateYCurrent = 0 } = modalState;
+
+        const opacity =
+          forceOpacity === null
+            ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0
+            : forceOpacity;
+        this.maskElementRef.current.style.opacity = Math.max(
+          0,
+          Math.min(100, opacity)
+        ).toString();
       }
     });
   }
@@ -532,11 +647,15 @@ class ModalRootTouchComponent extends React.Component<ModalRootProps & DOMProps
       <TouchRootContext.Provider value={true}>
         <ModalRootContext.Provider value={this.modalRootContext}>
           <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.configProvider?.webviewType === WebviewType.VKAPPS,
+                "ModalRoot--touched": touchDown,
+                "ModalRoot--switching": !!(enteringModal || exitingModal),
+              }
+            )}
             onMove={this.onTouchMove}
             onEnd={this.onTouchEnd}
             onScroll={this.onScroll}
@@ -549,10 +668,14 @@ class ModalRootTouchComponent extends React.Component<ModalRootProps & DOMProps
             <div vkuiClass="ModalRoot__viewport" ref={this.viewportRef}>
               {this.getModals().map((Modal) => {
                 const modalId = getNavId(Modal.props, warn);
-                if (modalId !== activeModal && modalId !== exitingModal) {
+                const _modalState = this.getModalState(modalId);
+                if (
+                  (modalId !== activeModal && modalId !== exitingModal) ||
+                  !_modalState
+                ) {
                   return null;
                 }
-                const modalState = { ...this.getModalState(modalId) };
+                const modalState = { ..._modalState };
 
                 const isPage = modalState.type === ModalType.PAGE;
                 const key = `modal-${modalId}`;
@@ -560,22 +683,34 @@ class ModalRootTouchComponent extends React.Component<ModalRootProps & DOMProps
                 return (
                   <FocusTrap
                     key={key}
-                    getRootRef={(e) => this.getModalState(modalId).modalElement = e}
+                    getRootRef={(e) => {
+                      const modalState = this.getModalState(modalId);
+                      if (modalState) {
+                        modalState.modalElement = e;
+                      }
+                    }}
                     onClose={this.props.closeActiveModal}
                     timeout={this.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}</FocusTrap>
+                  >
+                    {Modal}
+                  </FocusTrap>
                 );
               })}
             </div>
@@ -586,9 +721,15 @@ class ModalRootTouchComponent extends React.Component<ModalRootProps & DOMProps
   }
 }
 
-export const ModalRootTouch = withContext(withPlatform(withDOM<ModalRootProps>(
-  withModalManager(initModal)(ModalRootTouchComponent),
-)), ConfigProviderContext, 'configProvider');
+export const ModalRootTouch = withContext(
+  withPlatform(
+    withDOM<ModalRootProps>(
+      withModalManager(initModal)(ModalRootTouchComponent)
+    )
+  ),
+  ConfigProviderContext,
+  "configProvider"
+);
 
 /**
  * Инициализирует модалку перед анимацией открытия
@@ -596,22 +737,26 @@ export const ModalRootTouch = withContext(withPlatform(withDOM<ModalRootProps>(
 function initModal(modalState: ModalsStateEntry) {
   switch (modalState.type) {
     case ModalType.PAGE:
-      modalState.settlingHeight = modalState.settlingHeight || MODAL_PAGE_DEFAULT_PERCENT_HEIGHT;
+      modalState.settlingHeight =
+        modalState.settlingHeight || MODAL_PAGE_DEFAULT_PERCENT_HEIGHT;
       return initPageModal(modalState);
     case ModalType.CARD:
       return initCardModal(modalState);
     default:
-      IS_DEV && warn('[initActiveModal] modalState.type is unknown');
+      IS_DEV && warn("[initActiveModal] modalState.type is unknown");
   }
 }
 
 function initPageModal(modalState: ModalsStateEntry) {
   const { contentElement } = modalState;
-  const contentHeight = (contentElement.firstElementChild as HTMLElement).offsetHeight;
+  const contentHeight = (contentElement?.firstElementChild as HTMLElement)
+    .offsetHeight;
 
   let prevTranslateY = modalState.translateY;
 
-  modalState.expandable = contentHeight > contentElement.clientHeight || modalState.settlingHeight === 100;
+  modalState.expandable =
+    contentHeight > (contentElement?.clientHeight ?? 0) ||
+    modalState.settlingHeight === 100;
 
   let collapsed = false;
   let expanded = false;
@@ -622,7 +767,7 @@ function initPageModal(modalState: ModalsStateEntry) {
   let hiddenRange: TranslateRange;
 
   if (modalState.expandable) {
-    translateYFrom = 100 - modalState.settlingHeight;
+    translateYFrom = 100 - (modalState.settlingHeight ?? 0);
 
     const shiftHalf = translateYFrom / 2;
     const visiblePart = 100 - translateYFrom;
@@ -635,10 +780,13 @@ function initPageModal(modalState: ModalsStateEntry) {
     expanded = translateYFrom <= 0;
     translateY = translateYFrom;
   } else {
-    const headerHeight = modalState.headerElement.offsetHeight;
+    const headerHeight = modalState.headerElement?.offsetHeight ?? 0;
     const height = contentHeight + headerHeight;
 
-    translateYFrom = 100 - height / modalState.innerElement.parentElement.offsetHeight * 100;
+    translateYFrom =
+      100 -
+      (height / (modalState.innerElement?.parentElement?.offsetHeight ?? 0)) *
+        100;
     translateY = translateYFrom;
 
     expandedRange = [translateY, translateY + 25];
@@ -647,7 +795,10 @@ function initPageModal(modalState: ModalsStateEntry) {
   }
 
   // Если модалка может открываться на весь экран, и новый сдвиг больше предыдущего, то откроем её на весь экран
-  if (modalState.expandable && translateY > prevTranslateY || modalState.settlingHeight === 100) {
+  if (
+    (modalState.expandable && translateY > (prevTranslateY ?? 0)) ||
+    modalState.settlingHeight === 100
+  ) {
     translateY = 0;
   }