@vkontakte/vkui 4.20.0 → 4.22.1

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

@@ -13,8 +13,6 @@ var _jsxRuntime = require("../../lib/jsxRuntime");
 
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -43,8 +41,6 @@ var _styles = require("../../lib/styles");
 
 var _touch = require("../../lib/touch");
 
-var _utils = require("../../lib/utils");
-
 var _platform = require("../../lib/platform");
 
 var _supportEvents = require("../../lib/supportEvents");
@@ -69,6 +65,8 @@ var _warnOnce = require("../../lib/warnOnce");
 
 var _FocusTrap = require("../FocusTrap/FocusTrap");
 
+var _useModalManager = require("./useModalManager");
+
 var _excluded = ["id"];
 var warn = (0, _warnOnce.warnOnce)('ModalRoot');
 var IS_DEV = process.env.NODE_ENV === 'development';
@@ -91,9 +89,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
 
     (0, _classCallCheck2.default)(this, ModalRootTouchComponent);
     _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "modalsState", void 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "documentScrolling", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "activeTransitions", void 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "maskElementRef", void 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "viewportRef", /*#__PURE__*/React.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "maskAnimationFrame", void 0);
@@ -116,25 +112,15 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       return false;
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateModalTranslate", function () {
-      var activeModal = _this.state.activeModal || _this.state.nextModal;
-
-      if (!activeModal) {
-        return;
-      }
-
-      var modalState = _this.modalsState[activeModal];
+      var modalState = _this.getModalState(_this.props.activeModal);
 
-      _this.animateTranslate(modalState, modalState.translateY);
+      modalState && _this.animateTranslate(modalState, modalState.translateY);
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateModalHeight", function () {
-      var _this$state = _this.state,
-          activeModal = _this$state.activeModal,
-          nextModal = _this$state.nextModal;
-      var modalId = activeModal || nextModal;
-      var modalState = modalId ? _this.modalsState[modalId] : undefined;
+      var modalState = _this.getModalState(_this.props.activeModal);
 
       if (modalState && modalState.type === _types.ModalType.PAGE && modalState.dynamicContentHeight) {
-        if (_this.state.switching) {
+        if (_this.props.enteringModal) {
           _this.waitTransitionFinish(modalState, function () {
             requestAnimationFrame(function () {
               return _this.checkPageContentHeight();
@@ -148,18 +134,16 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTouchMove", function (e) {
-      if (_this.state.switching) {
+      if (_this.props.exitingModal) {
         return;
       }
 
-      var activeModal = _this.state.activeModal || _this.state.nextModal;
+      var modalState = _this.getModalState(_this.props.activeModal);
 
-      if (!activeModal) {
+      if (!modalState) {
         return;
       }
 
-      var modalState = _this.modalsState[activeModal];
-
       if (modalState.type === _types.ModalType.PAGE) {
         return _this.onPageTouchMove(e, modalState);
       }
@@ -169,13 +153,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTouchEnd", function (e) {
-      var activeModal = _this.state.activeModal || _this.state.nextModal;
-
-      if (!activeModal) {
-        return;
-      }
-
-      var modalState = _this.modalsState[activeModal];
+      var modalState = _this.getModalState(_this.props.activeModal);
 
       if (modalState.type === _types.ModalType.PAGE) {
         return _this.onPageTouchEnd(e, modalState);
@@ -186,14 +164,14 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onScroll", function (e) {
-      var activeModal = _this.state.activeModal;
+      var activeModal = _this.props.activeModal;
       var target = e.target;
 
       if (!activeModal) {
         return;
       }
 
-      var modalState = _this.modalsState[activeModal];
+      var modalState = _this.getModalState(activeModal);
 
       if (modalState.type === _types.ModalType.PAGE && modalState.contentElement.contains(target)) {
         modalState.contentScrolled = true;
@@ -205,82 +183,21 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         }, 250);
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "prevNextSwitchEndHandler", function () {
-      _this.activeTransitions = Math.max(0, _this.activeTransitions - 1);
-
-      if (_this.activeTransitions > 0) {
-        return;
-      }
-
-      var activeModal = _this.state.nextModal;
-      var newState = {
-        prevModal: null,
-        nextModal: null,
-        visibleModals: [activeModal],
-        activeModal: activeModal,
-        animated: false,
-        switching: false
-      };
-
-      if (!activeModal) {
-        newState.history = [];
-
-        if (_this.restoreFocusTo) {
-          _this.restoreFocusTo.focus();
-        }
-      }
-
-      _this.setState(newState);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "triggerActiveModalClose", function () {
-      var activeModalState = _this.modalsState[_this.state.activeModal];
-
-      if (activeModalState) {
-        _this.doCloseModal(activeModalState);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "doCloseModal", function (modalState) {
-      // Сбрасываем состояния, которые могут помешать закрытию модального окна
-      _this.setState({
-        touchDown: false,
-        switching: false
-      });
-
-      if ((0, _utils.isFunction)(modalState.onClose)) {
-        modalState.onClose();
-      } else if ((0, _utils.isFunction)(_this.props.onClose)) {
-        _this.props.onClose(modalState.id);
-      } else if (IS_DEV) {
-        warn('onClose is undefined');
-      }
-    });
-    var _activeModal = props.activeModal;
     _this.state = {
-      activeModal: null,
-      prevModal: null,
-      nextModal: _activeModal,
-      visibleModals: _activeModal ? [_activeModal] : [],
-      animated: !!_activeModal,
-      switching: false,
-      history: _activeModal ? [_activeModal] : [],
-      isBack: false,
-      inited: false,
       touchDown: false,
       dragging: false
     };
-    _this.activeTransitions = 0;
     _this.maskElementRef = /*#__PURE__*/React.createRef();
-
-    _this.initModalsState();
-
     _this.modalRootContext = {
       updateModalHeight: _this.updateModalHeight,
       registerModal: function registerModal(_ref) {
         var id = _ref.id,
             data = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-        return Object.assign(_this.modalsState[id], data);
+        return Object.assign(_this.getModalState(id), data);
+      },
+      onClose: function onClose() {
+        return _this.props.closeActiveModal();
       },
-      onClose: _this.triggerActiveModalClose,
       isInsideModal: true
     };
     _this.frameIds = {};
@@ -302,99 +219,64 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
     get: function get() {
       return this.props.window;
     }
+  }, {
+    key: "getModalState",
+    value: function getModalState(id) {
+      return this.props.getModalState(id);
+    }
   }, {
     key: "getModals",
     value: function getModals() {
       return React.Children.toArray(this.props.children);
     }
-  }, {
-    key: "initModalsState",
-    value: function initModalsState() {
-      this.modalsState = this.getModals().reduce(function (acc, Modal) {
-        var modalProps = Modal.props;
-        var state = {
-          id: (0, _getNavId.getNavId)(modalProps, warn),
-          onClose: Modal.props.onClose,
-          dynamicContentHeight: !!modalProps.dynamicContentHeight
-        }; // ModalPage props
-
-        if (typeof modalProps.settlingHeight === 'number') {
-          state.settlingHeight = modalProps.settlingHeight;
-        }
-
-        acc[state.id] = state;
-        return acc;
-      }, {});
-    }
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      this.initActiveModal();
+      // Отслеживаем изменение размеров viewport (Необходимо для iOS)
+      if (this.props.platform === _platform.IOS) {
+        this.window.addEventListener('resize', this.updateModalTranslate, false);
+      }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.toggleDocumentScrolling(true);
-
-      if (this.props.platform === _platform.IOS) {
-        this.window.removeEventListener('resize', this.updateModalTranslate, false);
-      }
+      this.window.removeEventListener('resize', this.updateModalTranslate, false);
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
+    value: function componentDidUpdate(prevProps) {
       var _this2 = this;
 
-      if (this.props.activeModal !== prevProps.activeModal && !this.state.switching) {
-        var nextModal = this.props.activeModal;
-        var prevModal = prevProps.activeModal;
+      // 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 (IS_DEV && nextModal !== null && !this.modalsState[nextModal]) {
-          return warn("[componentDidUpdate] nextModal ".concat(nextModal, " not found"));
-        }
 
-        var history = (0, _toConsumableArray2.default)(this.state.history);
-        var isBack = false;
+      if (this.props.enteringModal && this.props.enteringModal !== prevProps.enteringModal) {
+        var enteringModal = this.props.enteringModal;
+        var enteringState = this.getModalState(enteringModal);
+        this.waitTransitionFinish(enteringState, function () {
+          enteringState.innerElement.style.transitionDelay = null;
 
-        if (nextModal === null) {
-          history = [];
-        } else if (history.includes(nextModal)) {
-          history = history.splice(0, history.indexOf(nextModal) + 1);
-          isBack = true;
-        } else {
-          history.push(nextModal);
-        }
-
-        return this.setState({
-          activeModal: null,
-          nextModal: nextModal,
-          prevModal: prevModal,
-          visibleModals: [nextModal, prevModal],
-          history: history,
-          isBack: isBack,
-          animated: true,
-          inited: false,
-          switching: false
-        }, function () {
-          if (nextModal === null) {
-            _this2.closeActiveModal();
-          } else {
-            _this2.initActiveModal();
-          }
+          _this2.props.onEnter(enteringModal);
         });
-      }
+        enteringState.innerElement.style.transitionDelay = this.props.delayEnter ? "".concat(this.timeout, "ms") : null;
+        this.animateTranslate(enteringState, enteringState.translateY);
+      } // focus restoration
 
-      if (this.state.switching && !prevState.switching) {
-        requestAnimationFrame(function () {
-          return _this2.switchPrevNext();
-        });
+
+      if (this.props.activeModal && !prevProps.activeModal) {
+        this.restoreFocusTo = this.document.activeElement;
       }
 
-      if (!this.state.activeModal && !this.state.prevModal && !this.state.nextModal) {
-        this.toggleDocumentScrolling(true);
-      } else {
-        this.toggleDocumentScrolling(false);
+      if (!this.props.activeModal && !this.props.exitingModal && this.restoreFocusTo) {
+        this.restoreFocusTo.focus();
+        this.restoreFocusTo = null;
       }
+
+      this.toggleDocumentScrolling(!this.props.activeModal && !this.props.exitingModal);
     }
     /* Отключает скролл документа */
 
@@ -421,112 +303,14 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         });
       }
     }
-  }, {
-    key: "initActiveModal",
-    value:
-    /**
-     * Инициализирует модалку перед анимацией открытия
-     */
-    function initActiveModal() {
-      var activeModal = this.state.activeModal || this.state.nextModal;
-
-      if (!activeModal) {
-        return;
-      }
-
-      var modalState = this.modalsState[activeModal]; // Отслеживаем изменение размеров viewport (Необходимо для iOS)
-
-      if (this.props.platform === _platform.IOS) {
-        this.window.addEventListener('resize', this.updateModalTranslate, false);
-      }
-
-      switch (modalState.type) {
-        case _types.ModalType.PAGE:
-          modalState.settlingHeight = modalState.settlingHeight || _constants.MODAL_PAGE_DEFAULT_PERCENT_HEIGHT;
-          this.initPageModal(modalState);
-          break;
-
-        case _types.ModalType.CARD:
-          this.initCardModal(modalState);
-          break;
-
-        default:
-          if (IS_DEV) {
-            warn('[initActiveModal] modalState.type is unknown');
-          }
-
-      }
-
-      this.setState({
-        inited: true,
-        switching: true
-      });
-    }
-  }, {
-    key: "initPageModal",
-    value: function initPageModal(modalState) {
-      var contentElement = modalState.contentElement;
-      var contentHeight = contentElement.firstElementChild.offsetHeight;
-      var prevTranslateY = modalState.translateY;
-      modalState.expandable = contentHeight > contentElement.clientHeight || modalState.settlingHeight === 100;
-      var collapsed = false;
-      var expanded = false;
-      var translateYFrom;
-      var translateY;
-      var expandedRange;
-      var collapsedRange;
-      var hiddenRange;
-
-      if (modalState.expandable) {
-        translateYFrom = 100 - modalState.settlingHeight;
-        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 headerHeight = modalState.headerElement.offsetHeight;
-        var height = contentHeight + headerHeight;
-        translateYFrom = 100 - height / modalState.innerElement.parentElement.offsetHeight * 100;
-        translateY = translateYFrom;
-        expandedRange = [translateY, translateY + 25];
-        collapsedRange = [translateY + 25, translateY + 25];
-        hiddenRange = [translateY + 25, translateY + 100];
-      } // Если модалка может открываться на весь экран, и новый сдвиг больше предыдущего, то откроем её на весь экран
-
-
-      if (modalState.expandable && translateY > prevTranslateY || modalState.settlingHeight === 100) {
-        translateY = 0;
-      }
-
-      modalState.expandedRange = expandedRange;
-      modalState.collapsedRange = collapsedRange;
-      modalState.hiddenRange = hiddenRange;
-      modalState.translateY = translateY;
-      modalState.translateYFrom = translateYFrom;
-      modalState.collapsed = collapsed;
-      modalState.expanded = expanded;
-    }
-  }, {
-    key: "initCardModal",
-    value: function initCardModal(modalState) {
-      modalState.translateY = 0;
-    }
   }, {
     key: "checkPageContentHeight",
     value: function checkPageContentHeight() {
-      var _this$state2 = this.state,
-          activeModal = _this$state2.activeModal,
-          nextModal = _this$state2.nextModal;
-      var modalId = activeModal || nextModal;
-      var modalState = this.modalsState[modalId];
+      var modalState = this.getModalState(this.props.activeModal);
 
       if ((modalState === null || modalState === void 0 ? void 0 : modalState.type) === _types.ModalType.PAGE && modalState !== null && modalState !== void 0 && modalState.modalElement) {
         var prevModalState = (0, _objectSpread2.default)({}, modalState);
-        this.initPageModal(modalState);
+        initPageModal(modalState);
         var currentModalState = (0, _objectSpread2.default)({}, modalState);
         var needAnimate = false;
 
@@ -544,28 +328,34 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       }
     }
   }, {
-    key: "closeActiveModal",
-    value: function closeActiveModal() {
+    key: "closeModal",
+    value: function closeModal(id) {
+      var _this3 = this;
+
       // Сбрасываем состояния, которые могут помешать закрытию модального окна
       this.setState({
-        touchDown: false,
-        switching: false
+        touchDown: false
       });
+      var prevModalState = this.getModalState(id);
 
-      if (this.props.platform === _platform.IOS) {
-        this.window.removeEventListener('resize', this.updateModalTranslate, false);
+      if (!prevModalState) {
+        id && warn("[closeActiveModal] Modal ".concat(id, " does not exist - not closing"));
+        return;
       }
 
-      var prevModal = this.state.prevModal;
+      var nextModalState = this.getModalState(this.props.activeModal);
+      var nextIsPage = !!nextModalState && nextModalState.type === _types.ModalType.PAGE;
+      var prevIsPage = !!prevModalState && prevModalState.type === _types.ModalType.PAGE;
+      this.waitTransitionFinish(prevModalState, function () {
+        return _this3.props.onExit(id);
+      });
+      var exitTranslate = prevIsPage && nextIsPage && prevModalState.translateY <= nextModalState.translateYFrom && !this.props.isBack ? nextModalState.translateYFrom + 10 : 100;
+      this.animateTranslate(prevModalState, exitTranslate);
 
-      if (!prevModal) {
-        return warn("[closeActiveModal] prevModal is ".concat(prevModal));
+      if (!nextModalState) {
+        // NOTE: was only for clean exit
+        this.setMaskOpacity(prevModalState, 0);
       }
-
-      var prevModalState = this.modalsState[prevModal];
-      this.waitTransitionFinish(prevModalState, this.prevNextSwitchEndHandler);
-      this.animateTranslate(prevModalState, 100);
-      this.setMaskOpacity(prevModalState, 0);
     }
   }, {
     key: "onPageTouchMove",
@@ -651,7 +441,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "onPageTouchEnd",
     value: function onPageTouchEnd(event, modalState) {
-      var _this3 = this;
+      var _this4 = this;
 
       var startY = event.startY,
           shiftY = event.shiftY;
@@ -694,15 +484,15 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         modalState.hidden = translateY === 100;
 
         if (modalState.hidden) {
-          this.doCloseModal(modalState);
+          this.props.closeActiveModal();
         }
 
         setStateCallback = function setStateCallback() {
           if (!modalState.hidden) {
-            _this3.animateTranslate(modalState, modalState.translateY);
+            _this4.animateTranslate(modalState, modalState.translateY);
           }
 
-          _this3.setMaskOpacity(modalState);
+          _this4.setMaskOpacity(modalState);
         };
       }
 
@@ -714,7 +504,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "onCardTouchEnd",
     value: function onCardTouchEnd(_ref2, modalState) {
-      var _this4 = this;
+      var _this5 = this;
 
       var duration = _ref2.duration;
       var setStateCallback;
@@ -734,15 +524,15 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         modalState.hidden = translateY === 100;
 
         if (modalState.hidden) {
-          this.doCloseModal(modalState);
+          this.props.closeActiveModal();
         }
 
         setStateCallback = function setStateCallback() {
           if (!modalState.hidden) {
-            _this4.animateTranslate(modalState, modalState.translateY);
+            _this5.animateTranslate(modalState, modalState.translateY);
           }
 
-          _this4.setMaskOpacity(modalState);
+          _this5.setMaskOpacity(modalState);
         };
       }
 
@@ -765,76 +555,20 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         setTimeout(eventHandler, this.timeout);
       }
     }
-  }, {
-    key: "switchPrevNext",
-    value: function switchPrevNext() {
-      var _this5 = this;
-
-      var _this$state3 = this.state,
-          prevModal = _this$state3.prevModal,
-          nextModal = _this$state3.nextModal;
-      var prevModalState = this.modalsState[prevModal];
-      var nextModalState = this.modalsState[nextModal];
-
-      if (IS_DEV && !prevModalState && !nextModalState) {
-        return warn("[switchPrevNext] prevModal is ".concat(prevModal, ", nextModal is ").concat(nextModal));
-      }
-
-      var prevIsPage = !!prevModalState && prevModalState.type === _types.ModalType.PAGE;
-      var prevIsCard = !!prevModalState && prevModalState.type === _types.ModalType.CARD;
-      var nextIsPage = !!nextModalState && nextModalState.type === _types.ModalType.PAGE;
-      var nextIsCard = !!nextModalState && nextModalState.type === _types.ModalType.CARD; // Ждём полного скрытия предыдущей модалки
-
-      if (prevModalState && (nextIsCard || prevIsCard && nextIsPage)) {
-        this.waitTransitionFinish(prevModalState, function () {
-          _this5.activeTransitions += 1;
-
-          _this5.waitTransitionFinish(nextModalState, _this5.prevNextSwitchEndHandler);
-
-          _this5.animateTranslate(nextModalState, nextModalState.translateY);
-        });
-        return this.animateTranslate(prevModalState, 100);
-      }
-
-      if (prevModalState && nextIsPage) {
-        this.activeTransitions += 1;
-        this.waitTransitionFinish(prevModalState, this.prevNextSwitchEndHandler);
-
-        if (prevIsPage && prevModalState.translateY <= nextModalState.translateYFrom && !this.state.isBack) {
-          this.animateTranslate(prevModalState, nextModalState.translateYFrom + 10);
-        } else {
-          this.animateTranslate(prevModalState, 100);
-        }
-      }
-
-      if (!prevModal && this.document.activeElement) {
-        this.restoreFocusTo = this.document.activeElement;
-      }
-
-      this.activeTransitions += 1;
-      this.waitTransitionFinish(nextModalState, this.prevNextSwitchEndHandler);
-      this.animateTranslate(nextModalState, nextModalState.translateY);
-    }
-  }, {
-    key: "animateTranslate",
-    value:
     /**
      * Анимирует сдвиг модалки
      *
      * @param {ModalsStateEntry} modalState
      * @param {number} percent Процент сдвига: 0 – полностью открыта, 100 – полностью закрыта
      */
-    function animateTranslate(modalState, percent) {
+
+  }, {
+    key: "animateTranslate",
+    value: function animateTranslate(modalState, percent) {
       var frameId = "animateTranslateFrame".concat(modalState.id);
       cancelAnimationFrame(this.frameIds[frameId]);
       this.frameIds[frameId] = requestAnimationFrame(function () {
         (0, _styles.setTransformStyle)(modalState.innerElement, "translate3d(0, ".concat(percent, "%, 0)"));
-
-        if (modalState.type === _types.ModalType.PAGE && modalState.footerElement) {
-          var footerHeight = modalState.footerElement.offsetHeight;
-          var factor = modalState.innerElement.offsetHeight * (percent / 100);
-          (0, _styles.setTransformStyle)(modalState.footerElement, "translateY(calc(".concat(footerHeight, "px * -").concat(factor / footerHeight, "))"));
-        }
       });
     }
     /* Устанавливает прозрачность для полупрозрачной подложки */
@@ -846,7 +580,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
 
       var forceOpacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
 
-      if (forceOpacity === null && this.state.history[0] !== modalState.id) {
+      if (forceOpacity === null && this.props.history[0] !== modalState.id) {
         return;
       }
 
@@ -860,26 +594,20 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         }
       });
     }
-    /**
-     * Закрывает текущую модалку
-     */
-
   }, {
     key: "render",
     value: function render() {
       var _this7 = this;
 
-      var _this$state4 = this.state,
-          prevModal = _this$state4.prevModal,
-          activeModal = _this$state4.activeModal,
-          nextModal = _this$state4.nextModal,
-          visibleModals = _this$state4.visibleModals,
-          animated = _this$state4.animated,
-          touchDown = _this$state4.touchDown,
-          dragging = _this$state4.dragging,
-          switching = _this$state4.switching;
-
-      if (!activeModal && !prevModal && !nextModal && !animated) {
+      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;
       }
 
@@ -891,14 +619,14 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         vkuiClass: (0, _classNames.classNames)((0, _getClassName.getClassName)('ModalRoot', this.props.platform), {
           'ModalRoot--vkapps': this.props.configProvider.webviewType === _ConfigProviderContext.WebviewType.VKAPPS,
           'ModalRoot--touched': touchDown,
-          'ModalRoot--switching': switching
+          'ModalRoot--switching': !!(enteringModal || exitingModal)
         }),
         onMove: this.onTouchMove,
         onEnd: this.onTouchEnd,
         onScroll: this.onScroll
       }, (0, _jsxRuntime.createScopedElement)("div", {
         vkuiClass: "ModalRoot__mask",
-        onClick: this.triggerActiveModalClose,
+        onClick: this.props.closeActiveModal,
         ref: this.maskElementRef
       }), (0, _jsxRuntime.createScopedElement)("div", {
         vkuiClass: "ModalRoot__viewport",
@@ -906,24 +634,24 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       }, this.getModals().map(function (Modal) {
         var modalId = (0, _getNavId.getNavId)(Modal.props, warn);
 
-        if (!visibleModals.includes(modalId)) {
+        if (modalId !== activeModal && modalId !== exitingModal) {
           return null;
         }
 
-        var modalState = (0, _objectSpread2.default)({}, _this7.modalsState[modalId]);
+        var modalState = (0, _objectSpread2.default)({}, _this7.getModalState(modalId));
         var isPage = modalState.type === _types.ModalType.PAGE;
         var key = "modal-".concat(modalId);
         return (0, _jsxRuntime.createScopedElement)(_FocusTrap.FocusTrap, {
           key: key,
           getRootRef: function getRootRef(e) {
-            return _this7.modalsState[modalId].modalElement = e;
+            return _this7.getModalState(modalId).modalElement = e;
           },
-          onClose: _this7.triggerActiveModalClose,
+          onClose: _this7.props.closeActiveModal,
           timeout: _this7.timeout,
           vkuiClass: (0, _classNames.classNames)('ModalRoot__modal', {
             'ModalRoot__modal--active': modalId === activeModal,
-            'ModalRoot__modal--prev': modalId === prevModal,
-            'ModalRoot__modal--next': modalId === nextModal,
+            '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,
@@ -937,6 +665,75 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   return ModalRootTouchComponent;
 }(React.Component);
 
-var ModalRootTouch = (0, _withContext.withContext)((0, _withPlatform.withPlatform)((0, _dom.withDOM)(ModalRootTouchComponent)), _ConfigProviderContext.ConfigProviderContext, 'configProvider');
+var ModalRootTouch = (0, _withContext.withContext)((0, _withPlatform.withPlatform)((0, _dom.withDOM)((0, _useModalManager.withModalManager)(initModal)(ModalRootTouchComponent))), _ConfigProviderContext.ConfigProviderContext, 'configProvider');
+/**
+ * Инициализирует модалку перед анимацией открытия
+ */
+
 exports.ModalRootTouch = ModalRootTouch;
+
+function initModal(modalState) {
+  switch (modalState.type) {
+    case _types.ModalType.PAGE:
+      modalState.settlingHeight = modalState.settlingHeight || _constants.MODAL_PAGE_DEFAULT_PERCENT_HEIGHT;
+      return initPageModal(modalState);
+
+    case _types.ModalType.CARD:
+      return initCardModal(modalState);
+
+    default:
+      IS_DEV && warn('[initActiveModal] modalState.type is unknown');
+  }
+}
+
+function initPageModal(modalState) {
+  var contentElement = modalState.contentElement;
+  var contentHeight = contentElement.firstElementChild.offsetHeight;
+  var prevTranslateY = modalState.translateY;
+  modalState.expandable = contentHeight > contentElement.clientHeight || modalState.settlingHeight === 100;
+  var collapsed = false;
+  var expanded = false;
+  var translateYFrom;
+  var translateY;
+  var expandedRange;
+  var collapsedRange;
+  var hiddenRange;
+
+  if (modalState.expandable) {
+    translateYFrom = 100 - modalState.settlingHeight;
+    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 headerHeight = modalState.headerElement.offsetHeight;
+    var height = contentHeight + headerHeight;
+    translateYFrom = 100 - height / modalState.innerElement.parentElement.offsetHeight * 100;
+    translateY = translateYFrom;
+    expandedRange = [translateY, translateY + 25];
+    collapsedRange = [translateY + 25, translateY + 25];
+    hiddenRange = [translateY + 25, translateY + 100];
+  } // Если модалка может открываться на весь экран, и новый сдвиг больше предыдущего, то откроем её на весь экран
+
+
+  if (modalState.expandable && translateY > prevTranslateY || modalState.settlingHeight === 100) {
+    translateY = 0;
+  }
+
+  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;
+}
 //# sourceMappingURL=ModalRoot.js.map