@vkontakte/vkui 4.19.0 → 4.22.0

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

@@ -11,8 +11,6 @@ exports.ModalRootDesktop = void 0;
 
 var _jsxRuntime = require("../../lib/jsxRuntime");
 
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -31,8 +29,6 @@ var React = _interopRequireWildcard(require("react"));
 
 var _classNames = require("../../lib/classNames");
 
-var _utils = require("../../lib/utils");
-
 var _supportEvents = require("../../lib/supportEvents");
 
 var _withPlatform = require("../../hoc/withPlatform");
@@ -43,8 +39,6 @@ var _ModalRootContext = _interopRequireDefault(require("./ModalRootContext"));
 
 var _ConfigProviderContext = require("../ConfigProvider/ConfigProviderContext");
 
-var _types = require("./types");
-
 var _platform = require("../../lib/platform");
 
 var _getClassName = require("../../helpers/getClassName");
@@ -55,9 +49,12 @@ var _getNavId = require("../../lib/getNavId");
 
 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';
 
 var ModalRootDesktopComponent = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(ModalRootDesktopComponent, _React$Component);
@@ -69,75 +66,11 @@ var ModalRootDesktopComponent = /*#__PURE__*/function (_React$Component) {
 
     (0, _classCallCheck2.default)(this, ModalRootDesktopComponent);
     _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "modalsState", void 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "maskElementRef", void 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "maskAnimationFrame", void 0);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "modalRootContext", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "activeTransitions", void 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDownEsc", function (e) {
-      if (e.key === 'Escape') {
-        _this.triggerActiveModalClose();
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentWillUnmount", function () {
-      _this.props.document.removeEventListener('keydown', _this.handleKeyDownEsc);
-    });
-    (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 = [];
-      }
-
-      _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) {
-      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
-    };
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "restoreFocusTo", void 0);
     _this.maskElementRef = /*#__PURE__*/React.createRef();
-    _this.activeTransitions = 0;
-
-    _this.initModalsState();
-
     _this.modalRootContext = {
       updateModalHeight: function updateModalHeight() {
         return undefined;
@@ -145,142 +78,85 @@ var ModalRootDesktopComponent = /*#__PURE__*/function (_React$Component) {
       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
     };
     return _this;
   }
 
   (0, _createClass2.default)(ModalRootDesktopComponent, [{
-    key: "modals",
+    key: "timeout",
     get: function get() {
-      return React.Children.toArray(this.props.children);
+      return this.props.platform === _platform.ANDROID || this.props.platform === _platform.VKCOM ? 320 : 400;
     }
   }, {
-    key: "initModalsState",
-    value: function initModalsState() {
-      this.modalsState = this.modals.reduce(function (acc, Modal) {
-        var modalProps = Modal.props;
-        var state = {
-          id: (0, _getNavId.getNavId)(Modal.props, 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: "modals",
+    get: function get() {
+      return React.Children.toArray(this.props.children);
     }
   }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.initActiveModal();
-      this.props.document.addEventListener('keydown', this.handleKeyDownEsc);
+    key: "getModalState",
+    value: function getModalState(id) {
+      return this.props.getModalState(id);
     }
   }, {
     key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
+    value: function componentDidUpdate(prevProps) {
       var _this2 = this;
 
-      if (this.props.activeModal !== prevProps.activeModal) {
-        var nextModal = this.props.activeModal;
-        var prevModal = prevProps.activeModal;
-
-        if (IS_DEV && nextModal !== null && !this.modalsState[nextModal]) {
-          return warn("[ModalRoot.componentDidUpdate] nextModal ".concat(nextModal, " not found"));
-        }
+      // 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
 
-        var history = (0, _toConsumableArray2.default)(this.state.history);
-        var isBack = false;
 
-        if (nextModal === null) {
-          history = [];
-        } else if (history.includes(nextModal)) {
-          history = history.splice(0, history.indexOf(nextModal) + 1);
-          isBack = true;
-        } else {
-          history.push(nextModal);
-        }
+      if (this.props.enteringModal && this.props.enteringModal !== prevProps.enteringModal) {
+        var enteringModal = this.props.enteringModal;
+        var enteringState = this.getModalState(enteringModal);
+        requestAnimationFrame(function () {
+          if (_this2.props.enteringModal === enteringModal) {
+            _this2.waitTransitionFinish(enteringState, function () {
+              return _this2.props.onEnter(enteringModal);
+            });
 
-        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.animateModalOpacity(enteringState, true);
           }
         });
+      } // focus restoration
+
+
+      if (this.props.activeModal && !prevProps.activeModal) {
+        this.restoreFocusTo = this.props.document.activeElement;
       }
 
-      if (this.state.switching && !prevState.switching) {
-        requestAnimationFrame(function () {
-          return _this2.switchPrevNext();
-        });
+      if (!this.props.activeModal && !this.props.exitingModal && this.restoreFocusTo) {
+        this.restoreFocusTo.focus();
+        this.restoreFocusTo = null;
       }
     }
-    /**
-     * Инициализирует модалку перед анимацией открытия
-     */
-
   }, {
-    key: "initActiveModal",
-    value: function initActiveModal() {
-      var activeModal = this.state.activeModal || this.state.nextModal;
-
-      if (!activeModal) {
-        return;
-      }
-
-      var modalState = this.modalsState[activeModal];
-
-      switch (modalState.type) {
-        case _types.ModalType.PAGE:
-          modalState.settlingHeight = modalState.settlingHeight || 75;
-          break;
+    key: "closeModal",
+    value: function closeModal(id) {
+      var _this3 = this;
 
-        case _types.ModalType.CARD:
-          break;
-
-        default:
-          if (IS_DEV) {
-            warn('[initActiveModal] modalState.type is unknown');
-          }
+      var prevModalState = this.getModalState(id);
 
+      if (!prevModalState) {
+        return;
       }
 
-      this.setState({
-        inited: true,
-        switching: true
+      this.waitTransitionFinish(prevModalState, function () {
+        return _this3.props.onExit(id);
       });
-    }
-  }, {
-    key: "closeActiveModal",
-    value: function closeActiveModal() {
-      var prevModal = this.state.prevModal;
+      this.animateModalOpacity(prevModalState, false);
 
-      if (IS_DEV && !prevModal) {
-        return warn("[closeActiveModal] prevModal is ".concat(prevModal));
+      if (!this.props.activeModal) {
+        this.setMaskOpacity(prevModalState, 0);
       }
-
-      var prevModalState = this.modalsState[prevModal];
-      this.waitTransitionFinish(prevModalState, this.prevNextSwitchEndHandler);
-      this.animateModalOpacity(prevModalState, false);
-      this.setMaskOpacity(prevModalState, 0);
     }
   }, {
     key: "waitTransitionFinish",
@@ -293,60 +169,15 @@ var ModalRootDesktopComponent = /*#__PURE__*/function (_React$Component) {
 
         modalState.innerElement.addEventListener(_supportEvents.transitionEvent.name, onceHandler);
       } else {
-        setTimeout(eventHandler, this.props.platform === _platform.ANDROID || this.props.platform === _platform.VKCOM ? 320 : 400);
+        setTimeout(eventHandler, this.timeout);
       }
     }
-  }, {
-    key: "switchPrevNext",
-    value: function switchPrevNext() {
-      var _this3 = this;
-
-      var _this$state = this.state,
-          prevModal = _this$state.prevModal,
-          nextModal = _this$state.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 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.activeTransitions += 1;
-        this.waitTransitionFinish(prevModalState, function () {
-          _this3.waitTransitionFinish(nextModalState, _this3.prevNextSwitchEndHandler);
-
-          _this3.animateModalOpacity(nextModalState, true);
-        });
-        requestAnimationFrame(function () {
-          _this3.animateModalOpacity(prevModalState, false);
-        });
-        return;
-      }
-
-      if (prevModalState && nextIsPage) {
-        this.activeTransitions += 1;
-        this.waitTransitionFinish(prevModalState, this.prevNextSwitchEndHandler);
-        requestAnimationFrame(function () {
-          _this3.animateModalOpacity(prevModalState, false);
-        });
-      }
+    /* Анимирует сдивг модалки */
 
-      this.activeTransitions += 1;
-      this.waitTransitionFinish(nextModalState, this.prevNextSwitchEndHandler);
-      requestAnimationFrame(function () {
-        _this3.animateModalOpacity(nextModalState, true);
-      });
-    }
   }, {
     key: "animateModalOpacity",
-    value:
-    /* Анимирует сдивг модалки */
-    function animateModalOpacity(modalState, display) {
+    value: function animateModalOpacity(modalState, display) {
+      modalState.innerElement.style.transitionDelay = display && this.props.delayEnter ? "".concat(this.timeout, "ms") : null;
       modalState.innerElement.style.opacity = display ? '1' : '0';
     }
     /* Устанавливает прозрачность для полупрозрачной подложки */
@@ -358,7 +189,7 @@ var ModalRootDesktopComponent = /*#__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;
       }
 
@@ -372,21 +203,17 @@ var ModalRootDesktopComponent = /*#__PURE__*/function (_React$Component) {
         }
       });
     }
-    /**
-     * Закрывает текущую модалку
-     */
-
   }, {
     key: "render",
     value: function render() {
-      var _this$state2 = this.state,
-          prevModal = _this$state2.prevModal,
-          activeModal = _this$state2.activeModal,
-          nextModal = _this$state2.nextModal,
-          visibleModals = _this$state2.visibleModals,
-          animated = _this$state2.animated;
-
-      if (!activeModal && !prevModal && !nextModal && !animated) {
+      var _this5 = this;
+
+      var _this$props = this.props,
+          exitingModal = _this$props.exitingModal,
+          activeModal = _this$props.activeModal,
+          enteringModal = _this$props.enteringModal;
+
+      if (!activeModal && !exitingModal) {
         return null;
       }
 
@@ -398,24 +225,27 @@ var ModalRootDesktopComponent = /*#__PURE__*/function (_React$Component) {
         }, 'ModalRoot--desktop')
       }, (0, _jsxRuntime.createScopedElement)("div", {
         vkuiClass: "ModalRoot__mask",
-        onClick: this.triggerActiveModalClose,
-        ref: this.maskElementRef
+        ref: this.maskElementRef,
+        onClick: this.props.closeActiveModal
       }), (0, _jsxRuntime.createScopedElement)("div", {
         vkuiClass: "ModalRoot__viewport"
       }, this.modals.map(function (Modal) {
         var modalId = (0, _getNavId.getNavId)(Modal.props, warn);
 
-        if (!visibleModals.includes(modalId)) {
+        if (modalId !== activeModal && modalId !== exitingModal) {
           return null;
         }
 
         var key = "modal-".concat(modalId);
-        return (0, _jsxRuntime.createScopedElement)("div", {
+        return (0, _jsxRuntime.createScopedElement)(_FocusTrap.FocusTrap, {
+          restoreFocus: false,
+          onClose: _this5.props.closeActiveModal,
+          timeout: _this5.timeout,
           key: key,
           vkuiClass: (0, _classNames.classNames)('ModalRoot__modal', {
-            'ModalRoot__modal--active': modalId === activeModal,
-            'ModalRoot__modal--prev': modalId === prevModal,
-            'ModalRoot__modal--next': modalId === nextModal
+            'ModalRoot__modal--active': !exitingModal && !enteringModal && modalId === activeModal,
+            'ModalRoot__modal--prev': modalId === exitingModal,
+            'ModalRoot__modal--next': exitingModal && modalId === activeModal
           })
         }, Modal);
       }))));
@@ -424,6 +254,6 @@ var ModalRootDesktopComponent = /*#__PURE__*/function (_React$Component) {
   return ModalRootDesktopComponent;
 }(React.Component);
 
-var ModalRootDesktop = (0, _withContext.withContext)((0, _withPlatform.withPlatform)((0, _dom.withDOM)(ModalRootDesktopComponent)), _ConfigProviderContext.ConfigProviderContext, 'configProvider');
+var ModalRootDesktop = (0, _withContext.withContext)((0, _withPlatform.withPlatform)((0, _dom.withDOM)((0, _useModalManager.withModalManager)()(ModalRootDesktopComponent))), _ConfigProviderContext.ConfigProviderContext, 'configProvider');
 exports.ModalRootDesktop = ModalRootDesktop;
 //# sourceMappingURL=ModalRootDesktop.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"names":["warn","IS_DEV","process","env","NODE_ENV","ModalRootDesktopComponent","props","e","key","triggerActiveModalClose","document","removeEventListener","handleKeyDownEsc","activeTransitions","Math","max","activeModal","state","nextModal","newState","prevModal","visibleModals","animated","switching","history","setState","activeModalState","modalsState","doCloseModal","modalState","onClose","id","isBack","inited","maskElementRef","React","createRef","initModalsState","modalRootContext","updateModalHeight","undefined","registerModal","data","Object","assign","isInsideModal","Children","toArray","children","modals","reduce","acc","Modal","modalProps","dynamicContentHeight","settlingHeight","initActiveModal","addEventListener","prevProps","prevState","includes","splice","indexOf","push","closeActiveModal","requestAnimationFrame","switchPrevNext","type","ModalType","PAGE","CARD","prevModalState","waitTransitionFinish","prevNextSwitchEndHandler","animateModalOpacity","setMaskOpacity","eventHandler","transitionEvent","supported","onceHandler","innerElement","name","setTimeout","platform","ANDROID","VKCOM","nextModalState","prevIsCard","nextIsPage","nextIsCard","display","style","opacity","forceOpacity","cancelAnimationFrame","maskAnimationFrame","current","translateY","translateYCurrent","min","toString","configProvider","webviewType","WebviewType","VKAPPS","map","modalId","Component","ModalRootDesktop","ConfigProviderContext"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { isFunction } from '../../lib/utils';\nimport { transitionEvent } from '../../lib/supportEvents';\nimport { HasPlatform } from '../../types';\nimport { withPlatform } from '../../hoc/withPlatform';\nimport { withContext } from '../../hoc/withContext';\nimport ModalRootContext, { ModalRootContextInterface } from './ModalRootContext';\nimport {\n  ConfigProviderContext,\n  ConfigProviderContextInterface,\n  WebviewType,\n} from '../ConfigProvider/ConfigProviderContext';\nimport { ModalsStateEntry, ModalType } from './types';\nimport { ANDROID, VKCOM } from '../../lib/platform';\nimport { getClassName } from '../../helpers/getClassName';\nimport { DOMProps, withDOM } from '../../lib/dom';\nimport { getNavId } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport './ModalRoot.css';\n\nconst warn = warnOnce('ModalRoot');\nconst IS_DEV = process.env.NODE_ENV === 'development';\n\nexport interface ModalRootProps extends HasPlatform {\n  activeModal?: string | null;\n  /**\n   * @ignore\n   */\n  configProvider?: ConfigProviderContextInterface;\n\n  /**\n   * Будет вызвано при закрытии активной модалки с её id\n   */\n  onClose?(modalId: string): void;\n}\n\ninterface ModalRootState {\n  activeModal?: string;\n  prevModal?: string;\n  nextModal?: string;\n  visibleModals?: string[];\n  animated?: boolean;\n  switching?: boolean;\n  history?: string[];\n  isBack?: boolean;\n  inited?: boolean;\n}\n\nclass ModalRootDesktopComponent extends React.Component<ModalRootProps & DOMProps, ModalRootState> {\n  constructor(props: ModalRootProps) {\n    super(props);\n\n    const activeModal = props.activeModal;\n\n    this.state = {\n      activeModal: null,\n      prevModal: null,\n      nextModal: activeModal,\n      visibleModals: activeModal ? [activeModal] : [],\n      animated: !!activeModal,\n      switching: false,\n      history: activeModal ? [activeModal] : [],\n      isBack: false,\n      inited: false,\n    };\n\n    this.maskElementRef = React.createRef();\n    this.activeTransitions = 0;\n\n    this.initModalsState();\n\n    this.modalRootContext = {\n      updateModalHeight: () => undefined,\n      registerModal: ({ id, ...data }) => Object.assign(this.modalsState[id], data),\n      onClose: this.triggerActiveModalClose,\n      isInsideModal: true,\n    };\n  }\n\n  private modalsState: { [id: string]: ModalsStateEntry };\n  private readonly maskElementRef: React.RefObject<HTMLDivElement>;\n  private maskAnimationFrame: number;\n  private readonly modalRootContext: ModalRootContextInterface;\n\n  activeTransitions: number;\n\n  get modals() {\n    return React.Children.toArray(this.props.children) as React.ReactElement[];\n  }\n\n  initModalsState() {\n    this.modalsState = this.modals.reduce<{ [id: string]: ModalsStateEntry }>((acc, Modal) => {\n      const modalProps = Modal.props;\n      const state: ModalsStateEntry = {\n        id: getNavId(Modal.props, warn),\n        onClose: Modal.props.onClose,\n        dynamicContentHeight: !!modalProps.dynamicContentHeight,\n      };\n\n      // ModalPage props\n      if (typeof modalProps.settlingHeight === 'number') {\n        state.settlingHeight = modalProps.settlingHeight;\n      }\n\n      acc[state.id] = state;\n      return acc;\n    }, {});\n  }\n\n  handleKeyDownEsc = (e: KeyboardEvent): void => {\n    if (e.key === 'Escape') {\n      this.triggerActiveModalClose();\n    }\n  };\n\n  componentDidMount() {\n    this.initActiveModal();\n    this.props.document.addEventListener('keydown', this.handleKeyDownEsc);\n  }\n\n  componentWillUnmount = () => {\n    this.props.document.removeEventListener('keydown', this.handleKeyDownEsc);\n  };\n\n  componentDidUpdate(prevProps: ModalRootProps, prevState: ModalRootState) {\n    if (this.props.activeModal !== prevProps.activeModal) {\n      const nextModal = this.props.activeModal;\n      const prevModal = prevProps.activeModal;\n\n      if (IS_DEV && nextModal !== null && !this.modalsState[nextModal]) {\n        return warn(`[ModalRoot.componentDidUpdate] nextModal ${nextModal} not found`);\n      }\n\n      let history = [...this.state.history];\n      let isBack = false;\n\n      if (nextModal === null) {\n        history = [];\n      } else if (history.includes(nextModal)) {\n        history = history.splice(0, history.indexOf(nextModal) + 1);\n        isBack = true;\n      } else {\n        history.push(nextModal);\n      }\n\n      return this.setState({\n        activeModal: null,\n        nextModal,\n        prevModal,\n        visibleModals: [nextModal, prevModal],\n        history,\n        isBack,\n        animated: true,\n        inited: false,\n        switching: false,\n      }, () => {\n        if (nextModal === null) {\n          this.closeActiveModal();\n        } else {\n          this.initActiveModal();\n        }\n      });\n    }\n\n    if (this.state.switching && !prevState.switching) {\n      requestAnimationFrame(() => this.switchPrevNext());\n    }\n  }\n\n  /**\n   * Инициализирует модалку перед анимацией открытия\n   */\n  initActiveModal() {\n    const activeModal = this.state.activeModal || this.state.nextModal;\n    if (!activeModal) {\n      return;\n    }\n\n    const modalState = this.modalsState[activeModal];\n\n    switch (modalState.type) {\n      case ModalType.PAGE:\n        modalState.settlingHeight = modalState.settlingHeight || 75;\n        break;\n\n      case ModalType.CARD:\n        break;\n\n      default:\n        if (IS_DEV) {\n          warn('[initActiveModal] modalState.type is unknown');\n        }\n    }\n\n    this.setState({ inited: true, switching: true });\n  }\n\n  closeActiveModal() {\n    const { prevModal } = this.state;\n    if (IS_DEV && !prevModal) {\n      return warn(`[closeActiveModal] prevModal is ${prevModal}`);\n    }\n\n    const prevModalState = this.modalsState[prevModal];\n\n    this.waitTransitionFinish(prevModalState, this.prevNextSwitchEndHandler);\n    this.animateModalOpacity(prevModalState, false);\n    this.setMaskOpacity(prevModalState, 0);\n  }\n\n  waitTransitionFinish(modalState: ModalsStateEntry, eventHandler: () => void) {\n    if (transitionEvent.supported) {\n      const onceHandler = () => {\n        modalState.innerElement.removeEventListener(transitionEvent.name, onceHandler);\n        eventHandler();\n      };\n\n      modalState.innerElement.addEventListener(transitionEvent.name, onceHandler);\n    } else {\n      setTimeout(eventHandler, this.props.platform === ANDROID || this.props.platform === VKCOM ? 320 : 400);\n    }\n  }\n\n  switchPrevNext() {\n    const { prevModal, nextModal } = this.state;\n\n    const prevModalState = this.modalsState[prevModal];\n    const nextModalState = this.modalsState[nextModal];\n\n    if (IS_DEV && !prevModalState && !nextModalState) {\n      return warn(`[switchPrevNext] prevModal is ${prevModal}, nextModal is ${nextModal}`);\n    }\n\n    const prevIsCard = !!prevModalState && prevModalState.type === ModalType.CARD;\n\n    const nextIsPage = !!nextModalState && nextModalState.type === ModalType.PAGE;\n    const nextIsCard = !!nextModalState && nextModalState.type === ModalType.CARD;\n\n    // Ждём полного скрытия предыдущей модалки\n    if (prevModalState && (nextIsCard || prevIsCard && nextIsPage)) {\n      this.activeTransitions += 1;\n      this.waitTransitionFinish(prevModalState, () => {\n        this.waitTransitionFinish(nextModalState, this.prevNextSwitchEndHandler);\n        this.animateModalOpacity(nextModalState, true);\n      });\n\n      requestAnimationFrame(() => {\n        this.animateModalOpacity(prevModalState, false);\n      });\n\n      return;\n    }\n\n    if (prevModalState && nextIsPage) {\n      this.activeTransitions += 1;\n      this.waitTransitionFinish(prevModalState, this.prevNextSwitchEndHandler);\n      requestAnimationFrame(() => {\n        this.animateModalOpacity(prevModalState, false);\n      });\n    }\n\n    this.activeTransitions += 1;\n    this.waitTransitionFinish(nextModalState, this.prevNextSwitchEndHandler);\n    requestAnimationFrame(() => {\n      this.animateModalOpacity(nextModalState, true);\n    });\n  }\n\n  prevNextSwitchEndHandler = () => {\n    this.activeTransitions = Math.max(0, this.activeTransitions - 1);\n    if (this.activeTransitions > 0) {\n      return;\n    }\n\n    const activeModal = this.state.nextModal;\n\n    const newState: ModalRootState = {\n      prevModal: null,\n      nextModal: null,\n      visibleModals: [activeModal],\n      activeModal: activeModal,\n      animated: false,\n      switching: false,\n    };\n\n    if (!activeModal) {\n      newState.history = [];\n    }\n\n    this.setState(newState);\n  };\n\n  /* Анимирует сдивг модалки */\n  animateModalOpacity(modalState: ModalsStateEntry, display: boolean) {\n    modalState.innerElement.style.opacity = display ? '1' : '0';\n  }\n\n  /* Устанавливает прозрачность для полупрозрачной подложки */\n  setMaskOpacity(modalState: ModalsStateEntry, forceOpacity: number = null) {\n    if (forceOpacity === null && this.state.history[0] !== modalState.id) {\n      return;\n    }\n\n    cancelAnimationFrame(this.maskAnimationFrame);\n    this.maskAnimationFrame = requestAnimationFrame(() => {\n      if (this.maskElementRef.current) {\n        const { translateY, translateYCurrent } = modalState;\n\n        const opacity = forceOpacity === null ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0 : forceOpacity;\n        this.maskElementRef.current.style.opacity = Math.max(0, Math.min(100, opacity)).toString();\n      }\n    });\n  }\n\n  /**\n   * Закрывает текущую модалку\n   */\n  triggerActiveModalClose = () => {\n    const activeModalState = this.modalsState[this.state.activeModal];\n    if (activeModalState) {\n      this.doCloseModal(activeModalState);\n    }\n  };\n\n  private readonly doCloseModal = (modalState: ModalsStateEntry) => {\n    if (isFunction(modalState.onClose)) {\n      modalState.onClose();\n    } else if (isFunction(this.props.onClose)) {\n      this.props.onClose(modalState.id);\n    } else if (IS_DEV) {\n      warn('onClose is undefined');\n    }\n  };\n\n  render() {\n    const { prevModal, activeModal, nextModal, visibleModals, animated } = this.state;\n\n    if (!activeModal && !prevModal && !nextModal && !animated) {\n      return null;\n    }\n\n    return (\n      <ModalRootContext.Provider value={this.modalRootContext}>\n        <div\n          vkuiClass={classNames(getClassName('ModalRoot', this.props.platform), {\n            'ModalRoot--vkapps': this.props.configProvider.webviewType === WebviewType.VKAPPS,\n          }, 'ModalRoot--desktop')}\n        >\n          <div\n            vkuiClass=\"ModalRoot__mask\"\n            onClick={this.triggerActiveModalClose}\n            ref={this.maskElementRef}\n          />\n          <div vkuiClass=\"ModalRoot__viewport\">\n            {this.modals.map((Modal: React.ReactElement) => {\n              const modalId = getNavId(Modal.props, warn);\n              if (!visibleModals.includes(modalId)) {\n                return null;\n              }\n\n              const key = `modal-${modalId}`;\n\n              return (\n                <div\n                  key={key}\n                  vkuiClass={classNames('ModalRoot__modal', {\n                    'ModalRoot__modal--active': modalId === activeModal,\n                    'ModalRoot__modal--prev': modalId === prevModal,\n                    'ModalRoot__modal--next': modalId === nextModal,\n                  })}\n                >{Modal}</div>\n              );\n            })}\n          </div>\n        </div>\n      </ModalRootContext.Provider>\n    );\n  }\n}\n\nexport const ModalRootDesktop = withContext(withPlatform(withDOM<ModalRootProps>(ModalRootDesktopComponent)), ConfigProviderContext, 'configProvider');\n"],"file":"ModalRootDesktop.js"}
+{"version":3,"sources":["../../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"names":["warn","ModalRootDesktopComponent","props","maskElementRef","React","createRef","modalRootContext","updateModalHeight","undefined","registerModal","id","data","Object","assign","getModalState","onClose","closeActiveModal","isInsideModal","platform","ANDROID","VKCOM","Children","toArray","children","prevProps","exitingModal","closeModal","enteringModal","enteringState","requestAnimationFrame","waitTransitionFinish","onEnter","animateModalOpacity","activeModal","restoreFocusTo","document","activeElement","focus","prevModalState","onExit","setMaskOpacity","modalState","eventHandler","transitionEvent","supported","onceHandler","innerElement","removeEventListener","name","addEventListener","setTimeout","timeout","display","style","transitionDelay","delayEnter","opacity","forceOpacity","history","cancelAnimationFrame","maskAnimationFrame","current","translateY","translateYCurrent","Math","max","min","toString","configProvider","webviewType","WebviewType","VKAPPS","modals","map","Modal","modalId","key","Component","ModalRootDesktop","ConfigProviderContext"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { classNames } from '../../lib/classNames';\nimport { transitionEvent } from '../../lib/supportEvents';\nimport { HasPlatform } from '../../types';\nimport { withPlatform } from '../../hoc/withPlatform';\nimport { withContext } from '../../hoc/withContext';\nimport ModalRootContext, { ModalRootContextInterface } from './ModalRootContext';\nimport {\n  ConfigProviderContext,\n  ConfigProviderContextInterface,\n  WebviewType,\n} from '../ConfigProvider/ConfigProviderContext';\nimport { ModalsStateEntry } from './types';\nimport { ANDROID, VKCOM } from '../../lib/platform';\nimport { getClassName } from '../../helpers/getClassName';\nimport { DOMProps, withDOM } from '../../lib/dom';\nimport { getNavId } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalTransitionProps, withModalManager } from './useModalManager';\nimport './ModalRoot.css';\n\nconst warn = warnOnce('ModalRoot');\n\nexport interface ModalRootProps extends HasPlatform {\n  activeModal?: string | null;\n  /**\n   * @ignore\n   */\n  configProvider?: ConfigProviderContextInterface;\n\n  /**\n   * Будет вызвано при закрытии активной модалки с её id\n   */\n  onClose?(modalId: string): void;\n}\n\nclass ModalRootDesktopComponent extends React.Component<ModalRootProps & DOMProps & ModalTransitionProps> {\n  constructor(props: ModalRootProps & ModalTransitionProps) {\n    super(props);\n\n    this.maskElementRef = React.createRef();\n\n    this.modalRootContext = {\n      updateModalHeight: () => undefined,\n      registerModal: ({ id, ...data }) => Object.assign(this.getModalState(id), data),\n      onClose: () => this.props.closeActiveModal(),\n      isInsideModal: true,\n    };\n  }\n\n  private readonly maskElementRef: React.RefObject<HTMLDivElement>;\n  private maskAnimationFrame: number;\n  private readonly modalRootContext: ModalRootContextInterface;\n  private restoreFocusTo: HTMLElement;\n\n  private get timeout() {\n    return this.props.platform === ANDROID || this.props.platform === VKCOM ? 320 : 400;\n  }\n\n  private get modals() {\n    return React.Children.toArray(this.props.children) as React.ReactElement[];\n  }\n\n  getModalState(id: string) {\n    return this.props.getModalState(id);\n  }\n\n  componentDidUpdate(prevProps: ModalRootProps & ModalTransitionProps) {\n    // transition phase 2: animate exiting modal\n    if (this.props.exitingModal && this.props.exitingModal !== prevProps.exitingModal) {\n      this.closeModal(this.props.exitingModal);\n    }\n\n    // transition phase 3: animate entering modal\n    if (this.props.enteringModal && this.props.enteringModal !== prevProps.enteringModal) {\n      const { enteringModal } = this.props;\n      const enteringState = this.getModalState(enteringModal);\n      requestAnimationFrame(() => {\n        if (this.props.enteringModal === enteringModal) {\n          this.waitTransitionFinish(enteringState, () => this.props.onEnter(enteringModal));\n          this.animateModalOpacity(enteringState, true);\n        }\n      });\n    }\n\n    // focus restoration\n    if (this.props.activeModal && !prevProps.activeModal) {\n      this.restoreFocusTo = this.props.document.activeElement as HTMLElement;\n    }\n    if (!this.props.activeModal && !this.props.exitingModal && this.restoreFocusTo) {\n      this.restoreFocusTo.focus();\n      this.restoreFocusTo = null;\n    }\n  }\n\n  closeModal(id: string) {\n    const prevModalState = this.getModalState(id);\n    if (!prevModalState) {\n      return;\n    }\n\n    this.waitTransitionFinish(prevModalState, () => this.props.onExit(id));\n    this.animateModalOpacity(prevModalState, false);\n    if (!this.props.activeModal) {\n      this.setMaskOpacity(prevModalState, 0);\n    }\n  }\n\n  waitTransitionFinish(modalState: ModalsStateEntry, eventHandler: () => void) {\n    if (transitionEvent.supported) {\n      const onceHandler = () => {\n        modalState.innerElement.removeEventListener(transitionEvent.name, onceHandler);\n        eventHandler();\n      };\n\n      modalState.innerElement.addEventListener(transitionEvent.name, onceHandler);\n    } else {\n      setTimeout(eventHandler, this.timeout);\n    }\n  }\n\n  /* Анимирует сдивг модалки */\n  animateModalOpacity(modalState: ModalsStateEntry, display: boolean) {\n    modalState.innerElement.style.transitionDelay = display && this.props.delayEnter ? `${this.timeout}ms` : null;\n    modalState.innerElement.style.opacity = display ? '1' : '0';\n  }\n\n  /* Устанавливает прозрачность для полупрозрачной подложки */\n  setMaskOpacity(modalState: ModalsStateEntry, forceOpacity: number = null) {\n    if (forceOpacity === null && this.props.history[0] !== modalState.id) {\n      return;\n    }\n\n    cancelAnimationFrame(this.maskAnimationFrame);\n    this.maskAnimationFrame = requestAnimationFrame(() => {\n      if (this.maskElementRef.current) {\n        const { translateY, translateYCurrent } = modalState;\n\n        const opacity = forceOpacity === null ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0 : forceOpacity;\n        this.maskElementRef.current.style.opacity = Math.max(0, Math.min(100, opacity)).toString();\n      }\n    });\n  }\n\n  render() {\n    const { exitingModal, activeModal, enteringModal } = this.props;\n\n    if (!activeModal && !exitingModal) {\n      return null;\n    }\n\n    return (\n      <ModalRootContext.Provider value={this.modalRootContext}>\n        <div\n          vkuiClass={classNames(getClassName('ModalRoot', this.props.platform), {\n            'ModalRoot--vkapps': this.props.configProvider.webviewType === WebviewType.VKAPPS,\n          }, 'ModalRoot--desktop')}\n        >\n          <div\n            vkuiClass=\"ModalRoot__mask\"\n            ref={this.maskElementRef}\n            onClick={this.props.closeActiveModal}\n          />\n          <div vkuiClass=\"ModalRoot__viewport\">\n            {this.modals.map((Modal: React.ReactElement) => {\n              const modalId = getNavId(Modal.props, warn);\n              if (modalId !== activeModal && modalId !== exitingModal) {\n                return null;\n              }\n\n              const key = `modal-${modalId}`;\n\n              return (\n                <FocusTrap\n                  restoreFocus={false}\n                  onClose={this.props.closeActiveModal}\n                  timeout={this.timeout}\n                  key={key}\n                  vkuiClass={classNames('ModalRoot__modal', {\n                    'ModalRoot__modal--active': !exitingModal && !enteringModal && modalId === activeModal,\n                    'ModalRoot__modal--prev': modalId === exitingModal,\n                    'ModalRoot__modal--next': exitingModal && modalId === activeModal,\n                  })}\n                >{Modal}</FocusTrap>\n              );\n            })}\n          </div>\n        </div>\n      </ModalRootContext.Provider>\n    );\n  }\n}\n\nexport const ModalRootDesktop = withContext(\n  withPlatform(\n    withDOM<ModalRootProps>(\n      withModalManager()(ModalRootDesktopComponent),\n    ),\n  ),\n  ConfigProviderContext, 'configProvider');\n"],"file":"ModalRootDesktop.js"}

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

@@ -11,7 +11,6 @@ export interface ModalElements {
     innerElement?: HTMLElement | null;
     headerElement?: HTMLElement | null;
     contentElement?: HTMLElement | null;
-    footerElement?: HTMLElement | null;
 }
 export interface ModalsStateEntry extends ModalElements {
     id: string;

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalRoot/types.ts"],"names":["ModalType"],"mappings":";;;;;;IAAYA,S;;;WAAAA,S;AAAAA,EAAAA,S;AAAAA,EAAAA,S;GAAAA,S,yBAAAA,S","sourcesContent":["export enum ModalType {\n  PAGE = 'page',\n  CARD = 'card',\n}\n\nexport type TranslateRange = [number, number];\n\nexport type ModalsState = { [index: string]: ModalsStateEntry };\n\nexport interface ModalElements {\n  modalElement?: HTMLElement | null;\n  innerElement?: HTMLElement | null;\n  headerElement?: HTMLElement | null;\n  contentElement?: HTMLElement | null;\n  footerElement?: HTMLElement | null;\n}\n\nexport interface ModalsStateEntry extends ModalElements {\n  id: string;\n  onClose?: () => any;\n  type?: ModalType;\n\n  settlingHeight?: number;\n  dynamicContentHeight?: boolean;\n  expandable?: boolean;\n\n  /**\n   * Процент текущего сдвига модалки\n   */\n  translateY?: number;\n  /**\n   * Процент сдвига модалки в изначальном состоянии\n   */\n  translateYFrom?: number;\n  /**\n   * Процент сдвига модалки во время взаимодействия с ней (потянуть, чтобы открыть или закрыть)\n   */\n  translateYCurrent?: number;\n\n  touchStartContentScrollTop?: number;\n  touchMovePositive?: boolean | null;\n  touchShiftYPercent?: number;\n\n  expanded?: boolean;\n  collapsed?: boolean;\n  hidden?: boolean;\n\n  contentScrolled?: boolean;\n  contentScrollStopTimeout?: ReturnType<typeof setTimeout>;\n\n  expandedRange?: TranslateRange;\n  collapsedRange?: TranslateRange;\n  hiddenRange?: TranslateRange;\n}\n"],"file":"types.js"}
+{"version":3,"sources":["../../../../src/components/ModalRoot/types.ts"],"names":["ModalType"],"mappings":";;;;;;IAAYA,S;;;WAAAA,S;AAAAA,EAAAA,S;AAAAA,EAAAA,S;GAAAA,S,yBAAAA,S","sourcesContent":["export enum ModalType {\n  PAGE = 'page',\n  CARD = 'card',\n}\n\nexport type TranslateRange = [number, number];\n\nexport type ModalsState = { [index: string]: ModalsStateEntry };\n\nexport interface ModalElements {\n  modalElement?: HTMLElement | null;\n  innerElement?: HTMLElement | null;\n  headerElement?: HTMLElement | null;\n  contentElement?: HTMLElement | null;\n}\n\nexport interface ModalsStateEntry extends ModalElements {\n  id: string;\n  onClose?: () => any;\n  type?: ModalType;\n\n  settlingHeight?: number;\n  dynamicContentHeight?: boolean;\n  expandable?: boolean;\n\n  /**\n   * Процент текущего сдвига модалки\n   */\n  translateY?: number;\n  /**\n   * Процент сдвига модалки в изначальном состоянии\n   */\n  translateYFrom?: number;\n  /**\n   * Процент сдвига модалки во время взаимодействия с ней (потянуть, чтобы открыть или закрыть)\n   */\n  translateYCurrent?: number;\n\n  touchStartContentScrollTop?: number;\n  touchMovePositive?: boolean | null;\n  touchShiftYPercent?: number;\n\n  expanded?: boolean;\n  collapsed?: boolean;\n  hidden?: boolean;\n\n  contentScrolled?: boolean;\n  contentScrollStopTimeout?: ReturnType<typeof setTimeout>;\n\n  expandedRange?: TranslateRange;\n  collapsedRange?: TranslateRange;\n  hiddenRange?: TranslateRange;\n}\n"],"file":"types.js"}

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

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { ModalsStateEntry } from './types';
+interface ModalTransitionState {
+    activeModal?: string;
+    enteringModal?: string;
+    exitingModal?: string;
+    history?: string[];
+    isBack?: boolean;
+}
+export interface ModalTransitionProps extends ModalTransitionState {
+    onEnter: (id: string) => void;
+    onExit: (id: string) => void;
+    getModalState: (id: string) => ModalsStateEntry;
+    closeActiveModal: VoidFunction;
+    delayEnter: boolean;
+}
+export declare function modalTransitionReducer(state: ModalTransitionState, action: {
+    type: 'setActive' | 'entered' | 'exited' | 'inited';
+    id: string;
+}): ModalTransitionState;
+/**
+ * Реализует переход модалок. При смене activeModal m1 -> m2:
+ * 1. activeModal: m1, exitingModal: null, enteringModal: null, триггер перехода
+ * 2. activeModal: m2, exitingModal: m1, enteringModal: null, рендерим m2 чтобы прошел init, начинаем анимацию выхода
+ * одновременный переход между ModalPage:
+ *   3a. activeModal: m2, exitingModal: m1, enteringModal: m2
+ *   4a. exitingModal и enteringModal переходят в null в порядке завершения анимации
+ * ИЛИ дожидаемся скрытия ModalCard
+ *   3b. activeModal: m2, exitingModal: null, enteringModal: m2
+ *   4b. enteringModal переходит в null после завершения анимации
+ * 5. activeModal: m2, exitingModal: null, enteringModal: null, переход закончен
+ */
+export declare function useModalManager(activeModal: string, children: React.ReactNode | React.ReactNode[], onClose: (id: string) => void, initModal?: (state: ModalsStateEntry) => void): ModalTransitionProps;
+export declare function withModalManager(initModal?: (a: ModalsStateEntry) => void): <Props extends ModalTransitionProps>(Wrapped: React.ComponentType<Props>) => React.FC<Pick<Props, Exclude<keyof Props, "isBack" | "onEnter" | "history" | "onExit" | "getModalState" | "closeActiveModal" | "delayEnter" | "activeModal" | "enteringModal" | "exitingModal">> & {
+    activeModal: string;
+}>;
+export {};