@vkontakte/vkui 5.2.4 → 5.3.1

package/dist/components/ModalRoot/ModalRoot.js

@@ -1,655 +1,676 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["id"];
-import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
-import { clamp } from '../../helpers/math';
-import { withContext } from '../../hoc/withContext';
-import { withPlatform } from '../../hoc/withPlatform';
-import { withDOM } from '../../lib/dom';
-import { getNavId } from '../../lib/getNavId';
-import { Platform } from '../../lib/platform';
-import { setTransformStyle } from '../../lib/styles';
-import { transitionEvent } from '../../lib/supportEvents';
-import { rubber } from '../../lib/touch';
-import { warnOnce } from '../../lib/warnOnce';
-import { ConfigProviderContext, WebviewType } from '../ConfigProvider/ConfigProviderContext';
-import { FocusTrap } from '../FocusTrap/FocusTrap';
-import { Touch } from '../Touch/Touch';
-import TouchRootContext from '../Touch/TouchContext';
-import { ModalRootContext } from './ModalRootContext';
-import { MODAL_PAGE_DEFAULT_PERCENT_HEIGHT } from './constants';
-import { ModalType } from './types';
-import { withModalManager } from './useModalManager';
-var warn = warnOnce('ModalRoot');
+import _assert_this_initialized from "@swc/helpers/src/_assert_this_initialized.mjs";
+import _class_call_check from "@swc/helpers/src/_class_call_check.mjs";
+import _create_class from "@swc/helpers/src/_create_class.mjs";
+import _define_property from "@swc/helpers/src/_define_property.mjs";
+import _inherits from "@swc/helpers/src/_inherits.mjs";
+import _object_spread from "@swc/helpers/src/_object_spread.mjs";
+import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
+import _create_super from "@swc/helpers/src/_create_super.mjs";
+import * as React from "react";
+import { classNames } from "@vkontakte/vkjs";
+import { clamp } from "../../helpers/math";
+import { withContext } from "../../hoc/withContext";
+import { withPlatform } from "../../hoc/withPlatform";
+import { withDOM } from "../../lib/dom";
+import { getNavId } from "../../lib/getNavId";
+import { Platform } from "../../lib/platform";
+import { setTransformStyle } from "../../lib/styles";
+import { transitionEvent } from "../../lib/supportEvents";
+import { rubber } from "../../lib/touch";
+import { warnOnce } from "../../lib/warnOnce";
+import { ConfigProviderContext, WebviewType } from "../ConfigProvider/ConfigProviderContext";
+import { FocusTrap } from "../FocusTrap/FocusTrap";
+import { Touch } from "../Touch/Touch";
+import TouchRootContext from "../Touch/TouchContext";
+import { ModalRootContext } from "./ModalRootContext";
+import { MODAL_PAGE_DEFAULT_PERCENT_HEIGHT } from "./constants";
+import { ModalType } from "./types";
+import { withModalManager } from "./useModalManager";
+var warn = warnOnce("ModalRoot");
 function numberInRange(number, range) {
-  if (!range) {
-    return false;
-  }
-  return number >= range[0] && number <= range[1];
+    if (!range) {
+        return false;
+    }
+    return number >= range[0] && number <= range[1];
 }
 function rangeTranslate(number) {
-  return clamp(number, 0, 98);
+    return clamp(number, 0, 98);
 }
-var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
-  _inherits(ModalRootTouchComponent, _React$Component);
-  var _super = _createSuper(ModalRootTouchComponent);
-  function ModalRootTouchComponent(props) {
-    var _this;
-    _classCallCheck(this, ModalRootTouchComponent);
-    _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "documentScrolling", false);
-    _defineProperty(_assertThisInitialized(_this), "maskElementRef", void 0);
-    _defineProperty(_assertThisInitialized(_this), "viewportRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "maskAnimationFrame", undefined);
-    _defineProperty(_assertThisInitialized(_this), "modalRootContext", void 0);
-    _defineProperty(_assertThisInitialized(_this), "frameIds", void 0);
-    _defineProperty(_assertThisInitialized(_this), "restoreFocusTo", undefined);
-    _defineProperty(_assertThisInitialized(_this), "preventTouch", function (event) {
-      if (!event) {
-        return false;
-      }
-      while (event.originalEvent) {
-        event = event.originalEvent;
-      }
-      if (event.preventDefault) {
-        event.preventDefault();
-      }
-      return false;
-    });
-    _defineProperty(_assertThisInitialized(_this), "updateModalTranslate", function () {
-      var modalState = _this.getModalState(_this.props.activeModal);
-      modalState && _this.animateTranslate(modalState, modalState.translateY);
-    });
-    _defineProperty(_assertThisInitialized(_this), "updateModalHeight", function () {
-      var modalState = _this.getModalState(_this.props.activeModal);
-      if (modalState && modalState.type === ModalType.PAGE && modalState.dynamicContentHeight) {
-        if (_this.props.enteringModal) {
-          _this.waitTransitionFinish(modalState, function () {
-            requestAnimationFrame(function () {
-              return _this.checkPageContentHeight();
-            });
-          });
-        } else {
-          requestAnimationFrame(function () {
-            return _this.checkPageContentHeight();
-          });
-        }
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "onTouchMove", function (e) {
-      if (_this.props.exitingModal) {
-        return;
-      }
-      var modalState = _this.getModalState(_this.props.activeModal);
-      if (!modalState) {
-        return;
-      }
-      if (modalState.type === ModalType.PAGE) {
-        return _this.onPageTouchMove(e, modalState);
-      }
-      if (modalState.type === ModalType.CARD) {
-        return _this.onCardTouchMove(e, modalState);
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "onTouchEnd", function (e) {
-      var modalState = _this.getModalState(_this.props.activeModal);
-      if ((modalState === null || modalState === void 0 ? void 0 : modalState.type) === ModalType.PAGE) {
-        return _this.onPageTouchEnd(e, modalState);
-      }
-      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;
-      if (!activeModal) {
-        return;
-      }
-      var modalState = _this.getModalState(activeModal);
-      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;
-        if (modalState.contentScrollStopTimeout) {
-          clearTimeout(modalState.contentScrollStopTimeout);
-        }
-        modalState.contentScrollStopTimeout = setTimeout(function () {
-          if (modalState.contentScrolled) {
-            modalState.contentScrolled = false;
-          }
-        }, 250);
-      }
-    });
-    _this.state = {
-      touchDown: false,
-      dragging: false
-    };
-    _this.maskElementRef = /*#__PURE__*/React.createRef();
-    _this.modalRootContext = {
-      updateModalHeight: _this.updateModalHeight,
-      registerModal: function registerModal(_ref) {
-        var _this$getModalState;
-        var id = _ref.id,
-          data = _objectWithoutProperties(_ref, _excluded);
-        return Object.assign((_this$getModalState = _this.getModalState(id)) !== null && _this$getModalState !== void 0 ? _this$getModalState : {}, data);
-      },
-      onClose: function onClose() {
-        return _this.props.onExit();
-      },
-      isInsideModal: true
-    };
-    _this.frameIds = {};
-    return _this;
-  }
-  _createClass(ModalRootTouchComponent, [{
-    key: "timeout",
-    get: function get() {
-      return this.props.platform === Platform.IOS ? 400 : 320;
-    }
-  }, {
-    key: "document",
-    get: function get() {
-      return this.props.document;
-    }
-  }, {
-    key: "window",
-    get: function get() {
-      return this.props.window;
-    }
-  }, {
-    key: "getModalState",
-    value: function getModalState(id) {
-      if (!id) {
-        return undefined;
-      }
-      return this.props.getModalState(id);
-    }
-  }, {
-    key: "getModals",
-    value: function getModals() {
-      return React.Children.toArray(this.props.children);
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      // Отслеживаем изменение размеров viewport (Необходимо для iOS)
-      if (this.props.platform === Platform.IOS) {
-        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);
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this2 = this;
-      // transition phase 2: animate exiting modal
-      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) {
-        var enteringModal = this.props.enteringModal;
-        var enteringState = this.getModalState(enteringModal);
-        this.props.onEnter();
-        this.waitTransitionFinish(enteringState, function () {
-          if (enteringState !== null && enteringState !== void 0 && enteringState.innerElement) {
-            enteringState.innerElement.style.transitionDelay = '';
-          }
-          _this2.props.onEntered(enteringModal);
+var ModalRootTouchComponent = /*#__PURE__*/ function(_React_Component) {
+    "use strict";
+    _inherits(ModalRootTouchComponent, _React_Component);
+    var _super = _create_super(ModalRootTouchComponent);
+    function ModalRootTouchComponent(props) {
+        _class_call_check(this, ModalRootTouchComponent);
+        var _this;
+        _this = _super.call(this, props);
+        _define_property(_assert_this_initialized(_this), "documentScrolling", false);
+        _define_property(_assert_this_initialized(_this), "maskElementRef", void 0);
+        _define_property(_assert_this_initialized(_this), "viewportRef", /*#__PURE__*/ React.createRef());
+        _define_property(_assert_this_initialized(_this), "maskAnimationFrame", undefined);
+        _define_property(_assert_this_initialized(_this), "modalRootContext", void 0);
+        _define_property(_assert_this_initialized(_this), "frameIds", void 0);
+        _define_property(_assert_this_initialized(_this), "restoreFocusTo", undefined);
+        _define_property(_assert_this_initialized(_this), "preventTouch", function(event) {
+            if (!event) {
+                return false;
+            }
+            while(event.originalEvent){
+                event = event.originalEvent;
+            }
+            if (event.preventDefault) {
+                event.preventDefault();
+            }
+            return false;
         });
-        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
-      if (this.props.activeModal && !prevProps.activeModal) {
-        this.restoreFocusTo = this.document.activeElement;
-      }
-      if (!this.props.activeModal && !this.props.exitingModal && this.restoreFocusTo) {
-        this.restoreFocusTo.focus();
-        this.restoreFocusTo = null;
-      }
-      this.toggleDocumentScrolling(!this.props.activeModal && !this.props.exitingModal);
-    }
-
-    /* Отключает скролл документа */
-  }, {
-    key: "toggleDocumentScrolling",
-    value: function toggleDocumentScrolling(enabled) {
-      if (this.documentScrolling === enabled) {
-        return;
-      }
-      this.documentScrolling = enabled;
-      if (enabled) {
-        // Здесь нужен последний аргумент с такими же параметрами, потому что
-        // некоторые браузеры на странных вендорах типа Meizu не удаляют обработчик.
-        // https://github.com/VKCOM/VKUI/issues/444
-        this.window.removeEventListener('touchmove', this.preventTouch, {
-          // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions нет поля passive
-          passive: false
+        _define_property(_assert_this_initialized(_this), "updateModalTranslate", function() {
+            var modalState = _this.getModalState(_this.props.activeModal);
+            modalState && _this.animateTranslate(modalState, modalState.translateY);
         });
-      } else {
-        this.window.addEventListener('touchmove', this.preventTouch, {
-          passive: false
+        _define_property(_assert_this_initialized(_this), "updateModalHeight", function() {
+            var modalState = _this.getModalState(_this.props.activeModal);
+            if (modalState && modalState.type === ModalType.PAGE && modalState.dynamicContentHeight) {
+                if (_this.props.enteringModal) {
+                    _this.waitTransitionFinish(modalState, function() {
+                        requestAnimationFrame(function() {
+                            return _this.checkPageContentHeight();
+                        });
+                    });
+                } else {
+                    requestAnimationFrame(function() {
+                        return _this.checkPageContentHeight();
+                    });
+                }
+            }
         });
-      }
-    }
-  }, {
-    key: "checkPageContentHeight",
-    value: function checkPageContentHeight() {
-      var modalState = this.getModalState(this.props.activeModal);
-      if ((modalState === null || modalState === void 0 ? void 0 : modalState.type) === ModalType.PAGE && modalState !== null && modalState !== void 0 && modalState.modalElement) {
-        var prevModalState = _objectSpread({}, modalState);
-        initPageModal(modalState);
-        var currentModalState = _objectSpread({}, modalState);
-        var needAnimate = false;
-        if (prevModalState.expandable === currentModalState.expandable) {
-          if (prevModalState.translateYFrom !== currentModalState.translateYFrom) {
-            needAnimate = true;
-          }
-        } else {
-          needAnimate = true;
-        }
-        if (needAnimate) {
-          this.animateTranslate(modalState, modalState.translateY);
-        }
-      }
-    }
-  }, {
-    key: "closeModal",
-    value: function closeModal(id) {
-      var _this3 = this,
-        _prevModalState$trans,
-        _nextModalState$trans,
-        _nextModalState$trans2;
-      // Сбрасываем состояния, которые могут помешать закрытию модального окна
-      this.setState({
-        touchDown: false
-      });
-      var prevModalState = this.getModalState(id);
-      if (!prevModalState) {
-        id && warn("closeActiveModal: \u043C\u043E\u0434\u0430\u043B\u044C\u043D\u043E\u0435 \u043E\u043A\u043D\u043E (\u0441\u0442\u0440\u0430\u043D\u0438\u0446\u0430) ".concat(id, " \u043D\u0435 \u0441\u0443\u0449\u0435\u0441\u0442\u0432\u0443\u0435\u0442"), 'error');
-        return;
-      }
-      var nextModalState = this.getModalState(this.props.activeModal);
-      var nextIsPage = !!nextModalState && nextModalState.type === ModalType.PAGE;
-      var prevIsPage = !!prevModalState && prevModalState.type === ModalType.PAGE;
-      this.waitTransitionFinish(prevModalState, function () {
-        return _this3.props.onExited(id);
-      });
-      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) {
-        // NOTE: was only for clean exit
-        this.setMaskOpacity(prevModalState, 0);
-      }
-    }
-  }, {
-    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) {
-        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$innerElem = modalState.innerElement) !== null && _modalState$innerElem !== void 0 && _modalState$innerElem.contains(target))) {
-        return originalEvent.preventDefault();
-      }
-      originalEvent.stopPropagation();
-      var expandable = modalState.expandable,
-        contentScrolled = modalState.contentScrolled,
-        collapsed = modalState.collapsed,
-        expanded = modalState.expanded;
-      if (!this.state.touchDown) {
-        var _modalState$contentEl2, _modalState$contentEl3;
-        modalState.touchStartContentScrollTop = (_modalState$contentEl2 = (_modalState$contentEl3 = modalState.contentElement) === null || _modalState$contentEl3 === void 0 ? void 0 : _modalState$contentEl3.scrollTop) !== null && _modalState$contentEl2 !== void 0 ? _modalState$contentEl2 : 0;
-        this.setState({
-          touchDown: true
+        _define_property(_assert_this_initialized(_this), "onTouchMove", function(e) {
+            if (_this.props.exitingModal) {
+                return;
+            }
+            var modalState = _this.getModalState(_this.props.activeModal);
+            if (!modalState) {
+                return;
+            }
+            if (modalState.type === ModalType.PAGE) {
+                return _this.onPageTouchMove(e, modalState);
+            }
+            if (modalState.type === ModalType.CARD) {
+                return _this.onCardTouchMove(e, modalState);
+            }
         });
-      }
-      if (contentScrolled) {
-        return;
-      }
-      if (modalState.touchMovePositive === null) {
-        modalState.touchMovePositive = shiftY > 0;
-      }
-      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 || !this.window) {
-          return;
-        }
-        !this.state.dragging && this.setState({
-          dragging: true
+        _define_property(_assert_this_initialized(_this), "onTouchEnd", function(e) {
+            var modalState = _this.getModalState(_this.props.activeModal);
+            if ((modalState === null || modalState === void 0 ? void 0 : modalState.type) === ModalType.PAGE) {
+                return _this.onPageTouchEnd(e, modalState);
+            }
+            if ((modalState === null || modalState === void 0 ? void 0 : modalState.type) === ModalType.CARD) {
+                return _this.onCardTouchEnd(e, modalState);
+            }
         });
-        var shiftYPercent = shiftY / this.window.innerHeight * 100;
-        var shiftYCurrent = rubber(shiftYPercent, 72, 0.8, this.props.platform !== Platform.IOS);
-        modalState.touchShiftYPercent = shiftYPercent;
-        modalState.translateYCurrent = rangeTranslate(((_modalState$translate = modalState.translateY) !== null && _modalState$translate !== void 0 ? _modalState$translate : 0) + shiftYCurrent);
-        this.animateTranslate(modalState, modalState.translateYCurrent);
-        this.setMaskOpacity(modalState);
-      }
-    }
-  }, {
-    key: "onCardTouchMove",
-    value: function onCardTouchMove(event, modalState) {
-      var _modalState$innerElem2;
-      var originalEvent = event.originalEvent,
-        shiftY = event.shiftY;
-      var target = originalEvent.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,
-            dragging: true
-          });
-        }
-        var shiftYPercent = shiftY / modalState.innerElement.offsetHeight * 100;
-        var shiftYCurrent = rubber(shiftYPercent, 72, 1.2, this.props.platform !== Platform.IOS);
-        modalState.touchShiftYPercent = shiftYPercent;
-        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);
-      }
-    }
-  }, {
-    key: "onPageTouchEnd",
-    value: function onPageTouchEnd(event, modalState) {
-      var _this4 = this;
-      var startY = event.startY,
-        shiftY = event.shiftY;
-      modalState.contentScrolled = false;
-      modalState.touchMovePositive = null;
-      var setStateCallback;
-      if (this.state.dragging && this.window) {
-        var _modalState$translate3, _modalState$touchShif;
-        var shiftYEndPercent = (startY + shiftY) / this.window.innerHeight * 100;
-        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)) {
-            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)) {
-            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 {
-            var _modalState$translate5;
-            translateY = (_modalState$translate5 = modalState.translateYFrom) !== null && _modalState$translate5 !== void 0 ? _modalState$translate5 : 0;
-          }
-        } else {
-          if (numberInRange(translateY, [0, 25])) {
-            translateY = 0;
-          } else {
-            translateY = 100;
-          }
-        }
-        if (translateY !== 100 && shiftYEndPercent >= 75) {
-          translateY = 100;
-        }
-        modalState.translateY = translateY;
-        modalState.translateYCurrent = translateY;
-        modalState.collapsed = translateY > 0 && translateY < shiftYEndPercent;
-        modalState.expanded = translateY === 0;
-        modalState.hidden = translateY === 100;
-        if (modalState.hidden) {
-          this.props.onExit();
-        }
-        setStateCallback = function setStateCallback() {
-          if (!modalState.hidden) {
-            _this4.animateTranslate(modalState, modalState.translateY);
-          }
-          _this4.setMaskOpacity(modalState);
-        };
-      }
-      this.setState({
-        touchDown: false,
-        dragging: false
-      }, setStateCallback);
-    }
-  }, {
-    key: "onCardTouchEnd",
-    value: function onCardTouchEnd(_ref2, modalState) {
-      var _this5 = this;
-      var duration = _ref2.duration;
-      var setStateCallback;
-      if (this.state.dragging) {
-        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) {
-          translateY = 100;
-        } else {
-          translateY = 0;
-        }
-        modalState.translateY = translateY;
-        modalState.hidden = translateY === 100;
-        if (modalState.hidden) {
-          this.props.onExit();
-        }
-        setStateCallback = function setStateCallback() {
-          if (!modalState.hidden) {
-            _this5.animateTranslate(modalState, modalState.translateY);
-          }
-          _this5.setMaskOpacity(modalState);
+        _define_property(_assert_this_initialized(_this), "onScroll", function(e) {
+            var _modalState_contentElement;
+            var activeModal = _this.props.activeModal;
+            var target = e.target;
+            if (!activeModal) {
+                return;
+            }
+            var modalState = _this.getModalState(activeModal);
+            if ((modalState === null || modalState === void 0 ? void 0 : modalState.type) === ModalType.PAGE && (modalState === null || modalState === void 0 ? void 0 : (_modalState_contentElement = modalState.contentElement) === null || _modalState_contentElement === void 0 ? void 0 : _modalState_contentElement.contains(target))) {
+                modalState.contentScrolled = true;
+                if (modalState.contentScrollStopTimeout) {
+                    clearTimeout(modalState.contentScrollStopTimeout);
+                }
+                modalState.contentScrollStopTimeout = setTimeout(function() {
+                    if (modalState.contentScrolled) {
+                        modalState.contentScrolled = false;
+                    }
+                }, 250);
+            }
+        });
+        _this.state = {
+            touchDown: false,
+            dragging: false
         };
-      }
-      this.setState({
-        touchDown: false,
-        dragging: false
-      }, setStateCallback);
-    }
-  }, {
-    key: "waitTransitionFinish",
-    value: function waitTransitionFinish(modalState, eventHandler) {
-      if (transitionEvent.supported) {
-        var _modalState$innerElem4;
-        var onceHandler = function 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();
+        _this.maskElementRef = /*#__PURE__*/ React.createRef();
+        var _this_getModalState;
+        _this.modalRootContext = {
+            updateModalHeight: _this.updateModalHeight,
+            registerModal: function(_param) {
+                var id = _param.id, data = _object_without_properties(_param, [
+                    "id"
+                ]);
+                return Object.assign((_this_getModalState = _this.getModalState(id)) !== null && _this_getModalState !== void 0 ? _this_getModalState : {}, data);
+            },
+            onClose: function() {
+                return _this.props.onExit();
+            },
+            isInsideModal: true
         };
-        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);
-      }
-    }
-
-    /**
-     * Анимирует сдвиг модалки
-     *
-     * @param {ModalsStateEntry} modalState
-     * @param {number} percent Процент сдвига: 0 – полностью открыта, 100 – полностью закрыта
-     */
-  }, {
-    key: "animateTranslate",
-    value: function animateTranslate(modalState, percent) {
-      var frameId = "animateTranslateFrame".concat(modalState.id);
-      cancelAnimationFrame(this.frameIds[frameId]);
-      this.frameIds[frameId] = requestAnimationFrame(function () {
-        setTransformStyle(modalState.innerElement, "translate3d(0, ".concat(percent, "%, 0)"));
-      });
+        _this.frameIds = {};
+        return _this;
     }
-
-    /* Устанавливает прозрачность для полупрозрачной подложки */
-  }, {
-    key: "setMaskOpacity",
-    value: function setMaskOpacity(modalState) {
-      var _this$props$history,
-        _this6 = this;
-      var forceOpacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
-      if (forceOpacity === null && ((_this$props$history = this.props.history) === null || _this$props$history === void 0 ? void 0 : _this$props$history[0]) !== modalState.id) {
-        return;
-      }
-      if (this.maskAnimationFrame) {
-        cancelAnimationFrame(this.maskAnimationFrame);
-      }
-      this.maskAnimationFrame = requestAnimationFrame(function () {
-        if (_this6.maskElementRef.current) {
-          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 = clamp(opacity, 0, 100).toString();
-        }
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props$configPro,
-        _this7 = this;
-      var _this$props = this.props,
-        activeModal = _this$props.activeModal,
-        exitingModal = _this$props.exitingModal,
-        enteringModal = _this$props.enteringModal;
-      var _this$state = this.state,
-        touchDown = _this$state.touchDown,
-        dragging = _this$state.dragging;
-      if (!activeModal && !exitingModal) {
-        return null;
-      }
-      return /*#__PURE__*/React.createElement(TouchRootContext.Provider, {
-        value: true
-      }, /*#__PURE__*/React.createElement(ModalRootContext.Provider, {
-        value: this.modalRootContext
-      }, /*#__PURE__*/React.createElement(Touch, {
-        className: classNames("vkuiModalRoot", ((_this$props$configPro = this.props.configProvider) === null || _this$props$configPro === void 0 ? void 0 : _this$props$configPro.webviewType) === WebviewType.VKAPPS && "vkuiModalRoot--vkapps", touchDown && "vkuiModalRoot--touched", !!(enteringModal || exitingModal) && "vkuiModalRoot--switching"),
-        onMove: this.onTouchMove,
-        onEnd: this.onTouchEnd,
-        onScroll: this.onScroll
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "vkuiModalRoot__mask",
-        onClick: this.props.onExit,
-        ref: this.maskElementRef
-      }), /*#__PURE__*/React.createElement("div", {
-        className: "vkuiModalRoot__viewport",
-        ref: this.viewportRef
-      }, this.getModals().map(function (Modal) {
-        var modalId = getNavId(Modal.props, warn);
-        var _modalState = _this7.getModalState(modalId);
-        if (modalId !== activeModal && modalId !== exitingModal || !_modalState) {
-          return null;
-        }
-        var modalState = _objectSpread({}, _modalState);
-        var isPage = modalState.type === ModalType.PAGE;
-        var key = "modal-".concat(modalId);
-        return /*#__PURE__*/React.createElement(FocusTrap, {
-          key: key,
-          getRootRef: function getRootRef(e) {
-            var modalState = _this7.getModalState(modalId);
-            if (modalState) {
-              modalState.modalElement = e;
+    _create_class(ModalRootTouchComponent, [
+        {
+            key: "timeout",
+            get: function get() {
+                return this.props.platform === Platform.IOS ? 400 : 320;
             }
-          },
-          onClose: _this7.props.onExit,
-          timeout: _this7.timeout,
-          className: classNames("vkuiModalRoot__modal", dragging && "vkuiModalRoot__modal--dragging", isPage && modalState.expandable && "vkuiModalRoot__modal--expandable", isPage && modalState.collapsed && "vkuiModalRoot__modal--collapsed"),
-          restoreFocus: false
-        }, Modal);
-      })))));
-    }
-  }]);
-  return ModalRootTouchComponent;
+        },
+        {
+            key: "document",
+            get: function get() {
+                return this.props.document;
+            }
+        },
+        {
+            key: "window",
+            get: function get() {
+                return this.props.window;
+            }
+        },
+        {
+            key: "getModalState",
+            value: function getModalState(id) {
+                if (!id) {
+                    return undefined;
+                }
+                return this.props.getModalState(id);
+            }
+        },
+        {
+            key: "getModals",
+            value: function getModals() {
+                return React.Children.toArray(this.props.children);
+            }
+        },
+        {
+            key: "componentDidMount",
+            value: function componentDidMount() {
+                // Отслеживаем изменение размеров viewport (Необходимо для iOS)
+                if (this.props.platform === Platform.IOS) {
+                    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);
+            }
+        },
+        {
+            key: "componentDidUpdate",
+            value: function componentDidUpdate(prevProps) {
+                var _this = this;
+                // transition phase 2: animate exiting modal
+                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) {
+                    var enteringModal = this.props.enteringModal;
+                    var enteringState = this.getModalState(enteringModal);
+                    this.props.onEnter();
+                    this.waitTransitionFinish(enteringState, function() {
+                        if (enteringState === null || enteringState === void 0 ? void 0 : enteringState.innerElement) {
+                            enteringState.innerElement.style.transitionDelay = "";
+                        }
+                        _this.props.onEntered(enteringModal);
+                    });
+                    if (enteringState === null || enteringState === void 0 ? void 0 : enteringState.innerElement) {
+                        enteringState.innerElement.style.transitionDelay = this.props.delayEnter ? "".concat(this.timeout, "ms") : "";
+                        this.animateTranslate(enteringState, enteringState.translateY);
+                    }
+                }
+                // focus restoration
+                if (this.props.activeModal && !prevProps.activeModal) {
+                    this.restoreFocusTo = this.document.activeElement;
+                }
+                if (!this.props.activeModal && !this.props.exitingModal && this.restoreFocusTo) {
+                    this.restoreFocusTo.focus();
+                    this.restoreFocusTo = null;
+                }
+                this.toggleDocumentScrolling(!this.props.activeModal && !this.props.exitingModal);
+            }
+        },
+        {
+            /* Отключает скролл документа */ key: "toggleDocumentScrolling",
+            value: function toggleDocumentScrolling(enabled) {
+                if (this.documentScrolling === enabled) {
+                    return;
+                }
+                this.documentScrolling = enabled;
+                if (enabled) {
+                    // Здесь нужен последний аргумент с такими же параметрами, потому что
+                    // некоторые браузеры на странных вендорах типа Meizu не удаляют обработчик.
+                    // https://github.com/VKCOM/VKUI/issues/444
+                    this.window.removeEventListener("touchmove", this.preventTouch, {
+                        // @ts-expect-error: TS2769 В интерфейсе EventListenerOptions нет поля passive
+                        passive: false
+                    });
+                } else {
+                    this.window.addEventListener("touchmove", this.preventTouch, {
+                        passive: false
+                    });
+                }
+            }
+        },
+        {
+            key: "checkPageContentHeight",
+            value: function checkPageContentHeight() {
+                var modalState = this.getModalState(this.props.activeModal);
+                if ((modalState === null || modalState === void 0 ? void 0 : modalState.type) === ModalType.PAGE && (modalState === null || modalState === void 0 ? void 0 : modalState.modalElement)) {
+                    var prevModalState = _object_spread({}, modalState);
+                    initPageModal(modalState);
+                    var currentModalState = _object_spread({}, modalState);
+                    var needAnimate = false;
+                    if (prevModalState.expandable === currentModalState.expandable) {
+                        if (prevModalState.translateYFrom !== currentModalState.translateYFrom) {
+                            needAnimate = true;
+                        }
+                    } else {
+                        needAnimate = true;
+                    }
+                    if (needAnimate) {
+                        this.animateTranslate(modalState, modalState.translateY);
+                    }
+                }
+            }
+        },
+        {
+            key: "closeModal",
+            value: function closeModal(id) {
+                var _this = this;
+                // Сбрасываем состояния, которые могут помешать закрытию модального окна
+                this.setState({
+                    touchDown: false
+                });
+                var prevModalState = this.getModalState(id);
+                if (!prevModalState) {
+                    id && warn("closeActiveModal: модальное окно (страница) ".concat(id, " не существует"), "error");
+                    return;
+                }
+                var nextModalState = this.getModalState(this.props.activeModal);
+                var nextIsPage = !!nextModalState && nextModalState.type === ModalType.PAGE;
+                var prevIsPage = !!prevModalState && prevModalState.type === ModalType.PAGE;
+                this.waitTransitionFinish(prevModalState, function() {
+                    return _this.props.onExited(id);
+                });
+                var _prevModalState_translateY, _nextModalState_translateYFrom, _nextModalState_translateYFrom1;
+                var exitTranslate = prevIsPage && nextIsPage && ((_prevModalState_translateY = prevModalState.translateY) !== null && _prevModalState_translateY !== void 0 ? _prevModalState_translateY : 0) <= ((_nextModalState_translateYFrom = nextModalState === null || nextModalState === void 0 ? void 0 : nextModalState.translateYFrom) !== null && _nextModalState_translateYFrom !== void 0 ? _nextModalState_translateYFrom : 0) && !this.props.isBack ? ((_nextModalState_translateYFrom1 = nextModalState === null || nextModalState === void 0 ? void 0 : nextModalState.translateYFrom) !== null && _nextModalState_translateYFrom1 !== void 0 ? _nextModalState_translateYFrom1 : 0) + 10 : 100;
+                this.animateTranslate(prevModalState, exitTranslate);
+                if (!nextModalState) {
+                    // NOTE: was only for clean exit
+                    this.setMaskOpacity(prevModalState, 0);
+                }
+            }
+        },
+        {
+            key: "onPageTouchMove",
+            value: function onPageTouchMove(event, modalState) {
+                var _modalState_innerElement, _modalState_headerElement;
+                var shiftY = event.shiftY, originalEvent = event.originalEvent;
+                var target = originalEvent.target;
+                if (!event.isY) {
+                    var _this_viewportRef_current;
+                    if ((_this_viewportRef_current = this.viewportRef.current) === null || _this_viewportRef_current === void 0 ? void 0 : _this_viewportRef_current.contains(target)) {
+                        originalEvent.preventDefault();
+                    }
+                    return;
+                }
+                if (!((_modalState_innerElement = modalState.innerElement) === null || _modalState_innerElement === void 0 ? void 0 : _modalState_innerElement.contains(target))) {
+                    return originalEvent.preventDefault();
+                }
+                originalEvent.stopPropagation();
+                var expandable = modalState.expandable, contentScrolled = modalState.contentScrolled, collapsed = modalState.collapsed, expanded = modalState.expanded;
+                if (!this.state.touchDown) {
+                    var _modalState_contentElement;
+                    var _modalState_contentElement_scrollTop;
+                    modalState.touchStartContentScrollTop = (_modalState_contentElement_scrollTop = (_modalState_contentElement = modalState.contentElement) === null || _modalState_contentElement === void 0 ? void 0 : _modalState_contentElement.scrollTop) !== null && _modalState_contentElement_scrollTop !== void 0 ? _modalState_contentElement_scrollTop : 0;
+                    this.setState({
+                        touchDown: true
+                    });
+                }
+                if (contentScrolled) {
+                    return;
+                }
+                if (modalState.touchMovePositive === null) {
+                    modalState.touchMovePositive = shiftY > 0;
+                }
+                if (!modalState.expandable || collapsed || expanded && modalState.touchMovePositive && modalState.touchStartContentScrollTop === 0 || ((_modalState_headerElement = modalState.headerElement) === null || _modalState_headerElement === void 0 ? void 0 : _modalState_headerElement.contains(target))) {
+                    originalEvent.preventDefault();
+                    if (!expandable && shiftY < 0 || !this.window) {
+                        return;
+                    }
+                    !this.state.dragging && this.setState({
+                        dragging: true
+                    });
+                    var shiftYPercent = shiftY / this.window.innerHeight * 100;
+                    var shiftYCurrent = rubber(shiftYPercent, 72, 0.8, this.props.platform !== Platform.IOS);
+                    modalState.touchShiftYPercent = shiftYPercent;
+                    var _modalState_translateY;
+                    modalState.translateYCurrent = rangeTranslate(((_modalState_translateY = modalState.translateY) !== null && _modalState_translateY !== void 0 ? _modalState_translateY : 0) + shiftYCurrent);
+                    this.animateTranslate(modalState, modalState.translateYCurrent);
+                    this.setMaskOpacity(modalState);
+                }
+            }
+        },
+        {
+            key: "onCardTouchMove",
+            value: function onCardTouchMove(event, modalState) {
+                var _modalState_innerElement;
+                var originalEvent = event.originalEvent, shiftY = event.shiftY;
+                var target = originalEvent.target;
+                if ((_modalState_innerElement = modalState.innerElement) === null || _modalState_innerElement === void 0 ? void 0 : _modalState_innerElement.contains(target)) {
+                    if (!this.state.touchDown) {
+                        this.setState({
+                            touchDown: true,
+                            dragging: true
+                        });
+                    }
+                    var shiftYPercent = shiftY / modalState.innerElement.offsetHeight * 100;
+                    var shiftYCurrent = rubber(shiftYPercent, 72, 1.2, this.props.platform !== Platform.IOS);
+                    modalState.touchShiftYPercent = shiftYPercent;
+                    var _modalState_translateY;
+                    modalState.translateYCurrent = Math.max(0, ((_modalState_translateY = modalState.translateY) !== null && _modalState_translateY !== void 0 ? _modalState_translateY : 0) + shiftYCurrent);
+                    this.animateTranslate(modalState, modalState.translateYCurrent);
+                    this.setMaskOpacity(modalState);
+                }
+            }
+        },
+        {
+            key: "onPageTouchEnd",
+            value: function onPageTouchEnd(event, modalState) {
+                var _this = this;
+                var startY = event.startY, shiftY = event.shiftY;
+                modalState.contentScrolled = false;
+                modalState.touchMovePositive = null;
+                var setStateCallback;
+                if (this.state.dragging && this.window) {
+                    var shiftYEndPercent = (startY + shiftY) / this.window.innerHeight * 100;
+                    var _modalState_translateYCurrent;
+                    var translateY = (_modalState_translateYCurrent = modalState.translateYCurrent) !== null && _modalState_translateYCurrent !== void 0 ? _modalState_translateYCurrent : 0;
+                    var _modalState_touchShiftYPercent;
+                    var expectTranslateY = translateY / event.duration * 240 * 0.6 * (((_modalState_touchShiftYPercent = modalState.touchShiftYPercent) !== null && _modalState_touchShiftYPercent !== void 0 ? _modalState_touchShiftYPercent : 0) < 0 ? -1 : 1);
+                    translateY = rangeTranslate(translateY + expectTranslateY);
+                    if (modalState.settlingHeight !== 100) {
+                        if (numberInRange(translateY, modalState.expandedRange)) {
+                            var _modalState_expandedRange;
+                            var _modalState_expandedRange_;
+                            translateY = (_modalState_expandedRange_ = (_modalState_expandedRange = modalState.expandedRange) === null || _modalState_expandedRange === void 0 ? void 0 : _modalState_expandedRange[0]) !== null && _modalState_expandedRange_ !== void 0 ? _modalState_expandedRange_ : 0;
+                        } else if (numberInRange(translateY, modalState.collapsedRange)) {
+                            var _modalState_translateYFrom;
+                            translateY = (_modalState_translateYFrom = modalState.translateYFrom) !== null && _modalState_translateYFrom !== void 0 ? _modalState_translateYFrom : 0;
+                        } else if (numberInRange(translateY, modalState.hiddenRange)) {
+                            translateY = 100;
+                        } else {
+                            var _modalState_translateYFrom1;
+                            translateY = (_modalState_translateYFrom1 = modalState.translateYFrom) !== null && _modalState_translateYFrom1 !== void 0 ? _modalState_translateYFrom1 : 0;
+                        }
+                    } else {
+                        if (numberInRange(translateY, [
+                            0,
+                            25
+                        ])) {
+                            translateY = 0;
+                        } else {
+                            translateY = 100;
+                        }
+                    }
+                    if (translateY !== 100 && shiftYEndPercent >= 75) {
+                        translateY = 100;
+                    }
+                    modalState.translateY = translateY;
+                    modalState.translateYCurrent = translateY;
+                    modalState.collapsed = translateY > 0 && translateY < shiftYEndPercent;
+                    modalState.expanded = translateY === 0;
+                    modalState.hidden = translateY === 100;
+                    if (modalState.hidden) {
+                        this.props.onExit();
+                    }
+                    setStateCallback = function() {
+                        if (!modalState.hidden) {
+                            _this.animateTranslate(modalState, modalState.translateY);
+                        }
+                        _this.setMaskOpacity(modalState);
+                    };
+                }
+                this.setState({
+                    touchDown: false,
+                    dragging: false
+                }, setStateCallback);
+            }
+        },
+        {
+            key: "onCardTouchEnd",
+            value: function onCardTouchEnd(param, modalState) {
+                var duration = param.duration;
+                var _this = this;
+                var setStateCallback;
+                if (this.state.dragging) {
+                    var _modalState_translateYCurrent;
+                    var translateY = (_modalState_translateYCurrent = modalState.translateYCurrent) !== null && _modalState_translateYCurrent !== void 0 ? _modalState_translateYCurrent : 0;
+                    var _modalState_touchShiftYPercent;
+                    var expectTranslateY = translateY / duration * 240 * 0.6 * (((_modalState_touchShiftYPercent = modalState.touchShiftYPercent) !== null && _modalState_touchShiftYPercent !== void 0 ? _modalState_touchShiftYPercent : 0) < 0 ? -1 : 1);
+                    translateY = Math.max(0, translateY + expectTranslateY);
+                    if (translateY >= 30) {
+                        translateY = 100;
+                    } else {
+                        translateY = 0;
+                    }
+                    modalState.translateY = translateY;
+                    modalState.hidden = translateY === 100;
+                    if (modalState.hidden) {
+                        this.props.onExit();
+                    }
+                    setStateCallback = function() {
+                        if (!modalState.hidden) {
+                            _this.animateTranslate(modalState, modalState.translateY);
+                        }
+                        _this.setMaskOpacity(modalState);
+                    };
+                }
+                this.setState({
+                    touchDown: false,
+                    dragging: false
+                }, setStateCallback);
+            }
+        },
+        {
+            key: "waitTransitionFinish",
+            value: function waitTransitionFinish(modalState, eventHandler) {
+                if (transitionEvent.supported) {
+                    var _modalState_innerElement;
+                    var onceHandler = function() {
+                        var _modalState_innerElement;
+                        modalState === null || modalState === void 0 ? void 0 : (_modalState_innerElement = modalState.innerElement) === null || _modalState_innerElement === void 0 ? void 0 : _modalState_innerElement.removeEventListener(transitionEvent.name, onceHandler);
+                        eventHandler();
+                    };
+                    modalState === null || modalState === void 0 ? void 0 : (_modalState_innerElement = modalState.innerElement) === null || _modalState_innerElement === void 0 ? void 0 : _modalState_innerElement.addEventListener(transitionEvent.name, onceHandler);
+                } else {
+                    setTimeout(eventHandler, this.timeout);
+                }
+            }
+        },
+        {
+            /**
+   * Анимирует сдвиг модалки
+   *
+   * @param {ModalsStateEntry} modalState
+   * @param {number} percent Процент сдвига: 0 – полностью открыта, 100 – полностью закрыта
+   */ key: "animateTranslate",
+            value: function animateTranslate(modalState, percent) {
+                var frameId = "animateTranslateFrame".concat(modalState.id);
+                cancelAnimationFrame(this.frameIds[frameId]);
+                this.frameIds[frameId] = requestAnimationFrame(function() {
+                    setTransformStyle(modalState.innerElement, "translate3d(0, ".concat(percent, "%, 0)"));
+                });
+            }
+        },
+        {
+            /* Устанавливает прозрачность для полупрозрачной подложки */ key: "setMaskOpacity",
+            value: function setMaskOpacity(modalState) {
+                var forceOpacity = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : null;
+                var _this = this;
+                var _this_props_history;
+                if (forceOpacity === null && ((_this_props_history = this.props.history) === null || _this_props_history === void 0 ? void 0 : _this_props_history[0]) !== modalState.id) {
+                    return;
+                }
+                if (this.maskAnimationFrame) {
+                    cancelAnimationFrame(this.maskAnimationFrame);
+                }
+                this.maskAnimationFrame = requestAnimationFrame(function() {
+                    if (_this.maskElementRef.current) {
+                        var _modalState_translateY = modalState.translateY, translateY = _modalState_translateY === void 0 ? 0 : _modalState_translateY, _modalState_translateYCurrent = modalState.translateYCurrent, translateYCurrent = _modalState_translateYCurrent === void 0 ? 0 : _modalState_translateYCurrent;
+                        var opacity = forceOpacity === null ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0 : forceOpacity;
+                        _this.maskElementRef.current.style.opacity = clamp(opacity, 0, 100).toString();
+                    }
+                });
+            }
+        },
+        {
+            key: "render",
+            value: function render() {
+                var _this = this;
+                var _this_props_configProvider;
+                var _this_props = this.props, activeModal = _this_props.activeModal, exitingModal = _this_props.exitingModal, enteringModal = _this_props.enteringModal;
+                var _this_state = this.state, touchDown = _this_state.touchDown, dragging = _this_state.dragging;
+                if (!activeModal && !exitingModal) {
+                    return null;
+                }
+                return /*#__PURE__*/ React.createElement(TouchRootContext.Provider, {
+                    value: true
+                }, /*#__PURE__*/ React.createElement(ModalRootContext.Provider, {
+                    value: this.modalRootContext
+                }, /*#__PURE__*/ React.createElement(Touch, {
+                    className: classNames("vkuiModalRoot", ((_this_props_configProvider = this.props.configProvider) === null || _this_props_configProvider === void 0 ? void 0 : _this_props_configProvider.webviewType) === WebviewType.VKAPPS && "vkuiModalRoot--vkapps", touchDown && classNames("vkuiModalRoot--touched", "vkuiInternalModalRoot--touched"), !!(enteringModal || exitingModal) && classNames("vkuiModalRoot--switching", "vkuiInternalModalRoot--switching")),
+                    onMove: this.onTouchMove,
+                    onEnd: this.onTouchEnd,
+                    onScroll: this.onScroll
+                }, /*#__PURE__*/ React.createElement("div", {
+                    className: "vkuiModalRoot__mask",
+                    onClick: this.props.onExit,
+                    ref: this.maskElementRef
+                }), /*#__PURE__*/ React.createElement("div", {
+                    className: "vkuiModalRoot__viewport",
+                    ref: this.viewportRef
+                }, this.getModals().map(function(Modal) {
+                    var modalId = getNavId(Modal.props, warn);
+                    var _modalState = _this.getModalState(modalId);
+                    if (modalId !== activeModal && modalId !== exitingModal || !_modalState) {
+                        return null;
+                    }
+                    var modalState = _object_spread({}, _modalState);
+                    var isPage = modalState.type === ModalType.PAGE;
+                    var key = "modal-".concat(modalId);
+                    return /*#__PURE__*/ React.createElement(FocusTrap, {
+                        key: key,
+                        getRootRef: function(e) {
+                            var modalState = _this.getModalState(modalId);
+                            if (modalState) {
+                                modalState.modalElement = e;
+                            }
+                        },
+                        onClose: _this.props.onExit,
+                        timeout: _this.timeout,
+                        className: classNames("vkuiModalRoot__modal", dragging && "vkuiInternalModalRoot__modal--dragging", isPage && modalState.expandable && "vkuiInternalModalRoot__modal--expandable", isPage && modalState.collapsed && "vkuiInternalModalRoot__modal--collapsed"),
+                        restoreFocus: false
+                    }, Modal);
+                })))));
+            }
+        }
+    ]);
+    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");
 /**
  * Инициализирует модалку перед анимацией открытия
- */
-function initModal(modalState) {
-  switch (modalState.type) {
-    case ModalType.PAGE:
-      modalState.settlingHeight = modalState.settlingHeight || MODAL_PAGE_DEFAULT_PERCENT_HEIGHT;
-      return initPageModal(modalState);
-    case ModalType.CARD:
-      return initCardModal(modalState);
-    default:
-      process.env.NODE_ENV === 'development' && warn("initActiveModal: modalState.type=\"".concat(modalState.type, "\" \u043D\u0435 \u043F\u043E\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442\u0441\u044F"), 'error');
-  }
+ */ function initModal(modalState) {
+    switch(modalState.type){
+        case ModalType.PAGE:
+            modalState.settlingHeight = modalState.settlingHeight || MODAL_PAGE_DEFAULT_PERCENT_HEIGHT;
+            return initPageModal(modalState);
+        case ModalType.CARD:
+            return initCardModal(modalState);
+        default:
+            process.env.NODE_ENV === "development" && warn('initActiveModal: modalState.type="'.concat(modalState.type, '" не поддерживается'), "error");
+    }
 }
 function initPageModal(modalState) {
-  var _contentElement$clien;
-  var contentElement = modalState.contentElement;
-  var contentHeight = (contentElement === null || contentElement === void 0 ? void 0 : contentElement.firstElementChild).offsetHeight;
-  var prevTranslateY = modalState.translateY;
-  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;
-  var translateY;
-  var expandedRange;
-  var collapsedRange;
-  var hiddenRange;
-  if (modalState.expandable) {
-    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];
-    collapsedRange = [shiftHalf, translateYFrom + visiblePart / 4];
-    hiddenRange = [translateYFrom + visiblePart / 4, 100];
-    collapsed = translateYFrom > 0;
-    expanded = translateYFrom <= 0;
-    translateY = translateYFrom;
-  } else {
-    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$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];
-    hiddenRange = [translateY + 25, translateY + 100];
-  }
-
-  // Если модалка может открываться на весь экран, и новый сдвиг больше предыдущего, то откроем её на весь экран
-  if (modalState.expandable && translateY > (prevTranslateY !== null && prevTranslateY !== void 0 ? prevTranslateY : 100) || modalState.settlingHeight === 100) {
-    translateY = 0;
-  }
-
-  // Если модалка уже раскрыта обновляем состояния
-  if (translateY === 0) {
-    expanded = true;
-    collapsed = false;
-  }
-  modalState.expandedRange = expandedRange;
-  modalState.collapsedRange = collapsedRange;
-  modalState.hiddenRange = hiddenRange;
-  modalState.translateY = translateY;
-  modalState.translateYFrom = translateYFrom;
-  modalState.collapsed = collapsed;
-  modalState.expanded = expanded;
+    var contentElement = modalState.contentElement;
+    var contentHeight = (contentElement === null || contentElement === void 0 ? void 0 : contentElement.firstElementChild).offsetHeight;
+    var prevTranslateY = modalState.translateY;
+    var _contentElement_clientHeight;
+    modalState.expandable = contentHeight > ((_contentElement_clientHeight = contentElement === null || contentElement === void 0 ? void 0 : contentElement.clientHeight) !== null && _contentElement_clientHeight !== void 0 ? _contentElement_clientHeight : 0) || modalState.settlingHeight === 100;
+    var collapsed = false;
+    var expanded = false;
+    var translateYFrom;
+    var translateY;
+    var expandedRange;
+    var collapsedRange;
+    var hiddenRange;
+    if (modalState.expandable) {
+        var _modalState_settlingHeight;
+        translateYFrom = 100 - ((_modalState_settlingHeight = modalState.settlingHeight) !== null && _modalState_settlingHeight !== void 0 ? _modalState_settlingHeight : 0);
+        var shiftHalf = translateYFrom / 2;
+        var visiblePart = 100 - translateYFrom;
+        expandedRange = [
+            0,
+            shiftHalf
+        ];
+        collapsedRange = [
+            shiftHalf,
+            translateYFrom + visiblePart / 4
+        ];
+        hiddenRange = [
+            translateYFrom + visiblePart / 4,
+            100
+        ];
+        collapsed = translateYFrom > 0;
+        expanded = translateYFrom <= 0;
+        translateY = translateYFrom;
+    } else {
+        var _modalState_headerElement, _modalState_innerElement, _modalState_innerElement_parentElement;
+        var _modalState_headerElement_offsetHeight;
+        var headerHeight = (_modalState_headerElement_offsetHeight = (_modalState_headerElement = modalState.headerElement) === null || _modalState_headerElement === void 0 ? void 0 : _modalState_headerElement.offsetHeight) !== null && _modalState_headerElement_offsetHeight !== void 0 ? _modalState_headerElement_offsetHeight : 0;
+        var height = contentHeight + headerHeight;
+        var _modalState_innerElement_parentElement_offsetHeight;
+        translateYFrom = 100 - height / ((_modalState_innerElement_parentElement_offsetHeight = (_modalState_innerElement = modalState.innerElement) === null || _modalState_innerElement === void 0 ? void 0 : (_modalState_innerElement_parentElement = _modalState_innerElement.parentElement) === null || _modalState_innerElement_parentElement === void 0 ? void 0 : _modalState_innerElement_parentElement.offsetHeight) !== null && _modalState_innerElement_parentElement_offsetHeight !== void 0 ? _modalState_innerElement_parentElement_offsetHeight : 0) * 100;
+        translateY = translateYFrom;
+        expandedRange = [
+            translateY,
+            translateY + 25
+        ];
+        collapsedRange = [
+            translateY + 25,
+            translateY + 25
+        ];
+        hiddenRange = [
+            translateY + 25,
+            translateY + 100
+        ];
+    }
+    // Если модалка может открываться на весь экран, и новый сдвиг больше предыдущего, то откроем её на весь экран
+    if (modalState.expandable && translateY > (prevTranslateY !== null && prevTranslateY !== void 0 ? prevTranslateY : 100) || modalState.settlingHeight === 100) {
+        translateY = 0;
+    }
+    // Если модалка уже раскрыта обновляем состояния
+    if (translateY === 0) {
+        expanded = true;
+        collapsed = false;
+    }
+    modalState.expandedRange = expandedRange;
+    modalState.collapsedRange = collapsedRange;
+    modalState.hiddenRange = hiddenRange;
+    modalState.translateY = translateY;
+    modalState.translateYFrom = translateYFrom;
+    modalState.collapsed = collapsed;
+    modalState.expanded = expanded;
 }
 function initCardModal(modalState) {
-  modalState.translateY = 0;
+    modalState.translateY = 0;
 }
+
 //# sourceMappingURL=ModalRoot.js.map