@vkontakte/vkui 5.3.2 → 5.4.1

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

@@ -8,243 +8,169 @@ Object.defineProperty(exports, "ModalRootDesktop", {
         return ModalRootDesktop;
     }
 });
-var _assertThisInitialized = require("@swc/helpers/lib/_assert_this_initialized.js").default;
-var _classCallCheck = require("@swc/helpers/lib/_class_call_check.js").default;
-var _createClass = require("@swc/helpers/lib/_create_class.js").default;
-var _defineProperty = require("@swc/helpers/lib/_define_property.js").default;
-var _inherits = require("@swc/helpers/lib/_inherits.js").default;
 var _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
 var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
-var _createSuper = require("@swc/helpers/lib/_create_super.js").default;
 var _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 var _vkjs = require("@vkontakte/vkjs");
 var _math = require("../../helpers/math");
-var _withContext = require("../../hoc/withContext");
-var _withPlatform = require("../../hoc/withPlatform");
+var _useObjectMemo = require("../../hooks/useObjectMemo");
+var _usePrevious = require("../../hooks/usePrevious");
+var _useWaitTransitionFinish = require("../../hooks/useWaitTransitionFinish");
 var _dom = require("../../lib/dom");
 var _getNavId = require("../../lib/getNavId");
 var _platform = require("../../lib/platform");
-var _supportEvents = require("../../lib/supportEvents");
 var _warnOnce = require("../../lib/warnOnce");
 var _configProviderContext = require("../ConfigProvider/ConfigProviderContext");
 var _focusTrap = require("../FocusTrap/FocusTrap");
 var _modalRootContext = require("./ModalRootContext");
 var _useModalManager = require("./useModalManager");
 var warn = (0, _warnOnce.warnOnce)("ModalRoot");
-var ModalRootDesktopComponent = /*#__PURE__*/ function(_React_Component) {
-    "use strict";
-    _inherits(ModalRootDesktopComponent, _React_Component);
-    var _super = _createSuper(ModalRootDesktopComponent);
-    function ModalRootDesktopComponent(props) {
-        _classCallCheck(this, ModalRootDesktopComponent);
-        var _this;
-        _this = _super.call(this, props);
-        _defineProperty(_assertThisInitialized(_this), "maskElementRef", void 0);
-        _defineProperty(_assertThisInitialized(_this), "maskAnimationFrame", undefined);
-        _defineProperty(_assertThisInitialized(_this), "modalRootContext", void 0);
-        _defineProperty(_assertThisInitialized(_this), "restoreFocusTo", undefined);
-        _this.maskElementRef = /*#__PURE__*/ _react.createRef();
-        var _this_getModalState;
-        _this.modalRootContext = {
-            updateModalHeight: function() {
-                return undefined;
-            },
-            registerModal: function(_param) {
-                var id = _param.id, data = _objectWithoutProperties(_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
-        };
-        return _this;
-    }
-    _createClass(ModalRootDesktopComponent, [
-        {
-            key: "timeout",
-            get: function get() {
-                return this.props.platform === _platform.Platform.IOS ? 400 : 320;
-            }
-        },
-        {
-            key: "modals",
-            get: function get() {
-                return _react.Children.toArray(this.props.children);
-            }
-        },
-        {
-            key: "getModalState",
-            value: function getModalState(id) {
-                if (id === null) {
-                    return undefined;
-                }
-                return this.props.getModalState(id);
-            }
+var ModalRootDesktop = function(param) {
+    var activeModalProp = param.activeModal, children = param.children, onOpen = param.onOpen, onOpened = param.onOpened, onClose = param.onClose, onClosed = param.onClosed;
+    var maskElementRef = _react.useRef(null);
+    var maskAnimationFrame = _react.useRef(undefined);
+    var restoreFocusTo = _react.useRef(undefined);
+    var document = (0, _dom.useDOM)().document;
+    var _useConfigProvider = (0, _configProviderContext.useConfigProvider)(), webviewType = _useConfigProvider.webviewType, platform = _useConfigProvider.platform;
+    var _useModalManager1 = (0, _useModalManager.useModalManager)(activeModalProp, children, onOpen, onOpened, onClose, onClosed, _vkjs.noop), activeModal = _useModalManager1.activeModal, exitingModal = _useModalManager1.exitingModal, onExit = _useModalManager1.onExit, getModalState = _useModalManager1.getModalState, enteringModal = _useModalManager1.enteringModal, onEnter = _useModalManager1.onEnter, onEntered = _useModalManager1.onEntered, onExited = _useModalManager1.onExited, history = _useModalManager1.history, delayEnter = _useModalManager1.delayEnter;
+    var waitTransitionFinish = (0, _useWaitTransitionFinish.useWaitTransitionFinish)().waitTransitionFinish;
+    var prevProps = (0, _usePrevious.usePrevious)({
+        exitingModal: exitingModal,
+        enteringModal: enteringModal,
+        activeModal: activeModal
+    });
+    var _getModalState;
+    var modalRootContext = (0, _useObjectMemo.useObjectMemo)({
+        updateModalHeight: function() {
+            return undefined;
         },
-        {
-            key: "componentDidUpdate",
-            value: function componentDidUpdate(prevProps) {
-                // 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) {
-                    this.openModal(prevProps);
-                }
-                // focus restoration
-                if (this.props.activeModal && !prevProps.activeModal) {
-                    var _this_props_document;
-                    var _this_props_document_activeElement;
-                    this.restoreFocusTo = (_this_props_document_activeElement = (_this_props_document = this.props.document) === null || _this_props_document === void 0 ? void 0 : _this_props_document.activeElement) !== null && _this_props_document_activeElement !== void 0 ? _this_props_document_activeElement : undefined;
-                }
-                if (!this.props.activeModal && !this.props.exitingModal && this.restoreFocusTo) {
-                    this.restoreFocusTo.focus();
-                    this.restoreFocusTo = undefined;
-                }
-            }
+        registerModal: function(_param) {
+            var id = _param.id, data = _objectWithoutProperties(_param, [
+                "id"
+            ]);
+            return Object.assign((_getModalState = getModalState(id)) !== null && _getModalState !== void 0 ? _getModalState : {}, data);
         },
-        {
-            key: "openModal",
-            value: function openModal(prevProps) {
-                var _this = this;
-                var enteringModal = this.props.enteringModal;
-                if (!enteringModal) {
-                    return;
-                }
-                var enteringState = this.getModalState(enteringModal);
-                this.props.onEnter();
-                // Анимация открытия модального окна
-                if (!prevProps.exitingModal) {
-                    requestAnimationFrame(function() {
-                        if (_this.props.enteringModal === enteringModal) {
-                            _this.waitTransitionFinish(enteringState, function() {
-                                return _this.props.onEntered(enteringModal);
-                            });
-                            _this.animateModalOpacity(enteringState, true);
-                        }
-                    });
-                    return;
-                }
-                // Переход между модальными окнами без анимации
-                if (enteringState === null || enteringState === void 0 ? void 0 : enteringState.innerElement) {
-                    enteringState.innerElement.style.transition = "none";
-                    enteringState.innerElement.style.opacity = "1";
-                }
-                this.props.onEntered(enteringModal);
-            }
-        },
-        {
-            key: "closeModal",
-            value: function closeModal(id) {
-                var _this = this;
-                var prevModalState = this.getModalState(id);
-                if (!prevModalState) {
-                    return;
-                }
-                // Анимация закрытия модального окна
-                if (!this.props.activeModal) {
-                    requestAnimationFrame(function() {
-                        _this.waitTransitionFinish(prevModalState, function() {
-                            return _this.props.onExited(id);
-                        });
-                        _this.animateModalOpacity(prevModalState, false);
-                        _this.setMaskOpacity(prevModalState, 0);
-                    });
-                    return;
-                }
-                // Переход между модальными окнами без анимации
-                this.props.onExited(id);
-            }
-        },
-        {
-            key: "waitTransitionFinish",
-            value: function waitTransitionFinish(modalState, eventHandler) {
-                if (_supportEvents.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(_supportEvents.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(_supportEvents.transitionEvent.name, onceHandler);
-                } else {
-                    setTimeout(eventHandler, this.timeout);
-                }
-            }
-        },
-        {
-            /* Анимирует сдвиг модалки */ key: "animateModalOpacity",
-            value: function animateModalOpacity(modalState, display) {
-                if (modalState === null || modalState === void 0 ? void 0 : modalState.innerElement) {
-                    modalState.innerElement.style.transition = "";
-                    modalState.innerElement.style.transitionDelay = display && this.props.delayEnter ? "".concat(this.timeout, "ms") : "";
-                    modalState.innerElement.style.opacity = display ? "1" : "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 = (0, _math.clamp)(opacity, 0, 100).toString();
-                    }
-                });
+        onClose: onExit,
+        isInsideModal: true
+    });
+    var timeout = platform === _platform.Platform.IOS ? 400 : 320;
+    var modals = _react.Children.toArray(children);
+    /* Анимирует сдвиг модального окна */ var animateModalOpacity = function(modalState, display) {
+        if (modalState === null || modalState === void 0 ? void 0 : modalState.innerElement) {
+            modalState.innerElement.style.transition = "";
+            modalState.innerElement.style.transitionDelay = display && delayEnter ? "".concat(timeout, "ms") : "";
+            modalState.innerElement.style.opacity = display ? "1" : "0";
+        }
+    };
+    /* Устанавливает прозрачность для полупрозрачной подложки */ var setMaskOpacity = function(modalState) {
+        var forceOpacity = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : null;
+        if (forceOpacity === null && (history === null || history === void 0 ? void 0 : history[0]) !== modalState.id) {
+            return;
+        }
+        if (maskAnimationFrame.current) {
+            cancelAnimationFrame(maskAnimationFrame.current);
+        }
+        maskAnimationFrame.current = requestAnimationFrame(function() {
+            if (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;
+                maskElementRef.current.style.opacity = (0, _math.clamp)(opacity, 0, 100).toString();
             }
-        },
-        {
-            key: "render",
-            value: function render() {
-                var _this = this;
-                var _this_props_configProvider;
-                var _this_props = this.props, exitingModal = _this_props.exitingModal, activeModal = _this_props.activeModal;
-                if (!activeModal && !exitingModal) {
-                    return null;
+        });
+    };
+    var openModal = function() {
+        if (!enteringModal || !prevProps) {
+            return;
+        }
+        var enteringState = getModalState(enteringModal);
+        onEnter();
+        // Анимация открытия модального окна
+        if (!prevProps.exitingModal) {
+            requestAnimationFrame(function() {
+                if (enteringModal === enteringModal) {
+                    waitTransitionFinish(enteringState === null || enteringState === void 0 ? void 0 : enteringState.innerElement, function() {
+                        return onEntered(enteringModal);
+                    }, timeout);
+                    animateModalOpacity(enteringState, true);
                 }
-                return /*#__PURE__*/ _react.createElement(_modalRootContext.ModalRootContext.Provider, {
-                    value: this.modalRootContext
-                }, /*#__PURE__*/ _react.createElement("div", {
-                    className: (0, _vkjs.classNames)("vkuiModalRoot", ((_this_props_configProvider = this.props.configProvider) === null || _this_props_configProvider === void 0 ? void 0 : _this_props_configProvider.webviewType) === _configProviderContext.WebviewType.VKAPPS && "vkuiModalRoot--vkapps", "vkuiModalRoot--desktop")
-                }, /*#__PURE__*/ _react.createElement("div", {
-                    className: "vkuiModalRoot__mask",
-                    ref: this.maskElementRef,
-                    onClick: this.props.onExit
-                }), /*#__PURE__*/ _react.createElement("div", {
-                    className: "vkuiModalRoot__viewport"
-                }, this.modals.map(function(Modal) {
-                    var modalId = (0, _getNavId.getNavId)(Modal.props, warn);
-                    if (modalId !== activeModal && modalId !== exitingModal) {
-                        return null;
-                    }
-                    var key = "modal-".concat(modalId);
-                    return /*#__PURE__*/ _react.createElement(_focusTrap.FocusTrap, {
-                        restoreFocus: false,
-                        onClose: _this.props.onExit,
-                        timeout: _this.timeout,
-                        key: key,
-                        className: "vkuiModalRoot__modal"
-                    }, Modal);
-                }))));
-            }
+            });
+            return;
+        }
+        // Переход между модальными окнами без анимации
+        if (enteringState === null || enteringState === void 0 ? void 0 : enteringState.innerElement) {
+            enteringState.innerElement.style.transition = "none";
+            enteringState.innerElement.style.opacity = "1";
+        }
+        onEntered(enteringModal);
+    };
+    var closeModal = function(id) {
+        var prevModalState = getModalState(id);
+        if (!prevModalState) {
+            return;
+        }
+        // Анимация закрытия модального окна
+        if (!activeModal) {
+            requestAnimationFrame(function() {
+                waitTransitionFinish(prevModalState === null || prevModalState === void 0 ? void 0 : prevModalState.innerElement, function() {
+                    return onExited(id);
+                }, timeout);
+                animateModalOpacity(prevModalState, false);
+                setMaskOpacity(prevModalState, 0);
+            });
+            return;
+        }
+        // Переход между модальными окнами без анимации
+        onExited(id);
+    };
+    _react.useEffect(function() {
+        if (!prevProps) {
+            return;
+        }
+        // transition phase 2: animate exiting modal
+        if (exitingModal && exitingModal !== prevProps.exitingModal) {
+            closeModal(exitingModal);
+        }
+        // transition phase 3: animate entering modal
+        if (enteringModal && enteringModal !== prevProps.enteringModal) {
+            openModal();
+        }
+        // focus restoration
+        if (activeModal && !prevProps.activeModal) {
+            var _document_activeElement;
+            restoreFocusTo.current = (_document_activeElement = document === null || document === void 0 ? void 0 : document.activeElement) !== null && _document_activeElement !== void 0 ? _document_activeElement : undefined;
+        }
+        if (!activeModal && !exitingModal && restoreFocusTo.current) {
+            restoreFocusTo.current.focus();
+            restoreFocusTo.current = undefined;
+        }
+    });
+    if (!activeModal && !exitingModal) {
+        return null;
+    }
+    return /*#__PURE__*/ _react.createElement(_modalRootContext.ModalRootContext.Provider, {
+        value: modalRootContext
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: (0, _vkjs.classNames)("vkuiModalRoot", webviewType === _configProviderContext.WebviewType.VKAPPS && "vkuiModalRoot--vkapps", "vkuiModalRoot--desktop")
+    }, /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiModalRoot__mask",
+        ref: maskElementRef,
+        onClick: onExit
+    }), /*#__PURE__*/ _react.createElement("div", {
+        className: "vkuiModalRoot__viewport"
+    }, modals.map(function(Modal) {
+        var modalId = (0, _getNavId.getNavId)(Modal.props, warn);
+        if (modalId !== activeModal && modalId !== exitingModal) {
+            return null;
         }
-    ]);
-    return ModalRootDesktopComponent;
-}(_react.Component);
-var ModalRootDesktop = (0, _withContext.withContext)((0, _withPlatform.withPlatform)((0, _dom.withDOM)((0, _useModalManager.withModalManager)()(ModalRootDesktopComponent))), _configProviderContext.ConfigProviderContext, "configProvider");
+        var key = "modal-".concat(modalId);
+        return /*#__PURE__*/ _react.createElement(_focusTrap.FocusTrap, {
+            restoreFocus: false,
+            onClose: onExit,
+            timeout: timeout,
+            key: key,
+            className: "vkuiModalRoot__modal"
+        }, Modal);
+    }))));
+};
 
 //# sourceMappingURL=ModalRootDesktop.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { withContext } from '../../hoc/withContext';\nimport { withPlatform } from '../../hoc/withPlatform';\nimport { DOMProps, withDOM } from '../../lib/dom';\nimport { getNavId } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { transitionEvent } from '../../lib/supportEvents';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasPlatform } from '../../types';\nimport {\n  ConfigProviderContext,\n  ConfigProviderContextInterface,\n  WebviewType,\n} from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalRootContext, ModalRootContextInterface } from './ModalRootContext';\nimport { ModalsStateEntry } from './types';\nimport { ModalTransitionProps, withModalManager } from './useModalManager';\nimport styles from './ModalRoot.module.css';\n\nconst warn = warnOnce('ModalRoot');\n\nexport interface ModalRootProps extends HasPlatform {\n  activeModal?: string | null;\n  /**\n   * @ignore\n   */\n  configProvider?: ConfigProviderContextInterface;\n  children?: React.ReactNode;\n\n  /**\n   * Будет вызвано при начале открытия активной модалки с её id\n   */\n  onOpen?(modalId: string): void;\n\n  /**\n   * Будет вызвано при окончательном открытии активной модалки с её id\n   */\n  onOpened?(modalId: string): void;\n\n  /**\n   * Будет вызвано при начале закрытия активной модалки с её id\n   */\n  onClose?(modalId: string): void;\n\n  /**\n   * Будет вызвано при окончательном закрытии активной модалки с её id\n   */\n  onClosed?(modalId: string): void;\n}\n\nclass ModalRootDesktopComponent extends React.Component<\n  ModalRootProps & DOMProps & ModalTransitionProps\n> {\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.onExit(),\n      isInsideModal: true,\n    };\n  }\n\n  private readonly maskElementRef: React.RefObject<HTMLDivElement>;\n  private maskAnimationFrame: number | undefined = undefined;\n  private readonly modalRootContext: ModalRootContextInterface;\n  private restoreFocusTo: HTMLElement | undefined = undefined;\n\n  private get timeout() {\n    return this.props.platform === Platform.IOS ? 400 : 320;\n  }\n\n  private get modals() {\n    return React.Children.toArray(this.props.children) as React.ReactElement[];\n  }\n\n  getModalState(id: string | null) {\n    if (id === null) {\n      return undefined;\n    }\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      this.openModal(prevProps);\n    }\n\n    // focus restoration\n    if (this.props.activeModal && !prevProps.activeModal) {\n      this.restoreFocusTo = (this.props.document?.activeElement ?? undefined) as\n        | HTMLElement\n        | undefined;\n    }\n    if (!this.props.activeModal && !this.props.exitingModal && this.restoreFocusTo) {\n      this.restoreFocusTo.focus();\n      this.restoreFocusTo = undefined;\n    }\n  }\n\n  openModal(prevProps: ModalRootProps & ModalTransitionProps) {\n    const { enteringModal } = this.props;\n    if (!enteringModal) {\n      return;\n    }\n\n    const enteringState = this.getModalState(enteringModal);\n    this.props.onEnter();\n\n    // Анимация открытия модального окна\n    if (!prevProps.exitingModal) {\n      requestAnimationFrame(() => {\n        if (this.props.enteringModal === enteringModal) {\n          this.waitTransitionFinish(enteringState, () => this.props.onEntered(enteringModal));\n          this.animateModalOpacity(enteringState, true);\n        }\n      });\n\n      return;\n    }\n\n    // Переход между модальными окнами без анимации\n    if (enteringState?.innerElement) {\n      enteringState.innerElement.style.transition = 'none';\n      enteringState.innerElement.style.opacity = '1';\n    }\n\n    this.props.onEntered(enteringModal);\n  }\n\n  closeModal(id: string) {\n    const prevModalState = this.getModalState(id);\n    if (!prevModalState) {\n      return;\n    }\n\n    // Анимация закрытия модального окна\n    if (!this.props.activeModal) {\n      requestAnimationFrame(() => {\n        this.waitTransitionFinish(prevModalState, () => this.props.onExited(id));\n        this.animateModalOpacity(prevModalState, false);\n        this.setMaskOpacity(prevModalState, 0);\n      });\n\n      return;\n    }\n\n    // Переход между модальными окнами без анимации\n    this.props.onExited(id);\n  }\n\n  waitTransitionFinish(modalState: ModalsStateEntry | undefined, eventHandler: () => void) {\n    if (transitionEvent.supported) {\n      const onceHandler = () => {\n        modalState?.innerElement?.removeEventListener(transitionEvent.name as string, onceHandler);\n        eventHandler();\n      };\n\n      modalState?.innerElement?.addEventListener(transitionEvent.name as string, onceHandler);\n    } else {\n      setTimeout(eventHandler, this.timeout);\n    }\n  }\n\n  /* Анимирует сдвиг модалки */\n  animateModalOpacity(modalState: ModalsStateEntry | undefined, display: boolean) {\n    if (modalState?.innerElement) {\n      modalState.innerElement.style.transition = '';\n      modalState.innerElement.style.transitionDelay =\n        display && this.props.delayEnter ? `${this.timeout}ms` : '';\n      modalState.innerElement.style.opacity = display ? '1' : '0';\n    }\n  }\n\n  /* Устанавливает прозрачность для полупрозрачной подложки */\n  setMaskOpacity(modalState: ModalsStateEntry, forceOpacity: number | null = null) {\n    if (forceOpacity === null && this.props.history?.[0] !== modalState.id) {\n      return;\n    }\n\n    if (this.maskAnimationFrame) {\n      cancelAnimationFrame(this.maskAnimationFrame);\n    }\n    this.maskAnimationFrame = requestAnimationFrame(() => {\n      if (this.maskElementRef.current) {\n        const { translateY = 0, translateYCurrent = 0 } = modalState;\n\n        const opacity =\n          forceOpacity === null\n            ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0\n            : forceOpacity;\n        this.maskElementRef.current.style.opacity = clamp(opacity, 0, 100).toString();\n      }\n    });\n  }\n\n  render() {\n    const { exitingModal, activeModal } = this.props;\n\n    if (!activeModal && !exitingModal) {\n      return null;\n    }\n\n    return (\n      <ModalRootContext.Provider value={this.modalRootContext}>\n        <div\n          className={classNames(\n            styles['ModalRoot'],\n            this.props.configProvider?.webviewType === WebviewType.VKAPPS &&\n              styles['ModalRoot--vkapps'],\n            styles['ModalRoot--desktop'],\n          )}\n        >\n          <div\n            className={styles['ModalRoot__mask']}\n            ref={this.maskElementRef}\n            onClick={this.props.onExit}\n          />\n          <div className={styles['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.onExit}\n                  timeout={this.timeout}\n                  key={key}\n                  className={styles['ModalRoot__modal']}\n                >\n                  {Modal}\n                </FocusTrap>\n              );\n            })}\n          </div>\n        </div>\n      </ModalRootContext.Provider>\n    );\n  }\n}\n\nexport const ModalRootDesktop = withContext(\n  withPlatform(withDOM<ModalRootProps>(withModalManager()(ModalRootDesktopComponent))),\n  ConfigProviderContext,\n  'configProvider',\n);\n"],"names":["ModalRootDesktop","warn","warnOnce","ModalRootDesktopComponent","props","maskElementRef","maskAnimationFrame","undefined","modalRootContext","restoreFocusTo","React","createRef","updateModalHeight","registerModal","Object","id","data","assign","getModalState","onClose","onExit","isInsideModal","timeout","platform","Platform","IOS","modals","Children","toArray","children","componentDidUpdate","prevProps","exitingModal","closeModal","enteringModal","openModal","activeModal","document","activeElement","focus","enteringState","onEnter","requestAnimationFrame","waitTransitionFinish","onEntered","animateModalOpacity","innerElement","style","transition","opacity","prevModalState","onExited","setMaskOpacity","modalState","eventHandler","transitionEvent","supported","onceHandler","removeEventListener","name","addEventListener","setTimeout","display","transitionDelay","delayEnter","forceOpacity","history","cancelAnimationFrame","current","translateY","translateYCurrent","clamp","toString","render","ModalRootContext","Provider","value","div","className","classNames","configProvider","webviewType","WebviewType","VKAPPS","ref","onClick","map","Modal","modalId","getNavId","key","FocusTrap","restoreFocus","Component","withContext","withPlatform","withDOM","withModalManager","ConfigProviderContext"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"sourcesContent":["import * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId } from '../../lib/getNavId';\nimport { Platform } from '../../lib/platform';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useConfigProvider, WebviewType } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalRootContext, ModalRootContextInterface } from './ModalRootContext';\nimport { ModalRootWithDOMProps, ModalsStateEntry } from './types';\nimport { useModalManager } from './useModalManager';\nimport styles from './ModalRoot.module.css';\n\nconst warn = warnOnce('ModalRoot');\n\nexport const ModalRootDesktop = ({\n  activeModal: activeModalProp,\n  children,\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n}: ModalRootWithDOMProps) => {\n  const maskElementRef = React.useRef<HTMLDivElement>(null);\n  const maskAnimationFrame = React.useRef<number | undefined>(undefined);\n  const restoreFocusTo = React.useRef<HTMLElement | undefined>(undefined);\n\n  const { document } = useDOM();\n  const { webviewType, platform } = useConfigProvider();\n  const {\n    activeModal,\n    exitingModal,\n    onExit,\n    getModalState,\n    enteringModal,\n    onEnter,\n    onEntered,\n    onExited,\n    history,\n    delayEnter,\n  } = useModalManager(activeModalProp, children, onOpen, onOpened, onClose, onClosed, noop);\n\n  const { waitTransitionFinish } = useWaitTransitionFinish();\n  const prevProps = usePrevious({\n    exitingModal,\n    enteringModal,\n    activeModal,\n  });\n  const modalRootContext: ModalRootContextInterface = useObjectMemo({\n    updateModalHeight: () => undefined,\n    registerModal: ({ id, ...data }) => Object.assign(getModalState(id) ?? {}, data),\n    onClose: onExit,\n    isInsideModal: true,\n  });\n\n  const timeout = platform === Platform.IOS ? 400 : 320;\n  const modals = React.Children.toArray(children) as React.ReactElement[];\n\n  /* Анимирует сдвиг модального окна */\n  const animateModalOpacity = (modalState: ModalsStateEntry | undefined, display: boolean) => {\n    if (modalState?.innerElement) {\n      modalState.innerElement.style.transition = '';\n      modalState.innerElement.style.transitionDelay = display && delayEnter ? `${timeout}ms` : '';\n      modalState.innerElement.style.opacity = display ? '1' : '0';\n    }\n  };\n\n  /* Устанавливает прозрачность для полупрозрачной подложки */\n  const setMaskOpacity = (modalState: ModalsStateEntry, forceOpacity: number | null = null) => {\n    if (forceOpacity === null && history?.[0] !== modalState.id) {\n      return;\n    }\n\n    if (maskAnimationFrame.current) {\n      cancelAnimationFrame(maskAnimationFrame.current);\n    }\n    maskAnimationFrame.current = requestAnimationFrame(() => {\n      if (maskElementRef.current) {\n        const { translateY = 0, translateYCurrent = 0 } = modalState;\n\n        const opacity =\n          forceOpacity === null\n            ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0\n            : forceOpacity;\n        maskElementRef.current.style.opacity = clamp(opacity, 0, 100).toString();\n      }\n    });\n  };\n\n  const openModal = () => {\n    if (!enteringModal || !prevProps) {\n      return;\n    }\n\n    const enteringState = getModalState(enteringModal);\n    onEnter();\n\n    // Анимация открытия модального окна\n    if (!prevProps.exitingModal) {\n      requestAnimationFrame(() => {\n        if (enteringModal === enteringModal) {\n          waitTransitionFinish(\n            enteringState?.innerElement,\n            () => onEntered(enteringModal),\n            timeout,\n          );\n          animateModalOpacity(enteringState, true);\n        }\n      });\n\n      return;\n    }\n\n    // Переход между модальными окнами без анимации\n    if (enteringState?.innerElement) {\n      enteringState.innerElement.style.transition = 'none';\n      enteringState.innerElement.style.opacity = '1';\n    }\n\n    onEntered(enteringModal);\n  };\n\n  const closeModal = (id: string) => {\n    const prevModalState = getModalState(id);\n    if (!prevModalState) {\n      return;\n    }\n\n    // Анимация закрытия модального окна\n    if (!activeModal) {\n      requestAnimationFrame(() => {\n        waitTransitionFinish(prevModalState?.innerElement, () => onExited(id), timeout);\n        animateModalOpacity(prevModalState, false);\n        setMaskOpacity(prevModalState, 0);\n      });\n\n      return;\n    }\n\n    // Переход между модальными окнами без анимации\n    onExited(id);\n  };\n\n  React.useEffect(() => {\n    if (!prevProps) {\n      return;\n    }\n\n    // transition phase 2: animate exiting modal\n    if (exitingModal && exitingModal !== prevProps.exitingModal) {\n      closeModal(exitingModal);\n    }\n\n    // transition phase 3: animate entering modal\n    if (enteringModal && enteringModal !== prevProps.enteringModal) {\n      openModal();\n    }\n\n    // focus restoration\n    if (activeModal && !prevProps.activeModal) {\n      restoreFocusTo.current = (document?.activeElement ?? undefined) as HTMLElement | undefined;\n    }\n    if (!activeModal && !exitingModal && restoreFocusTo.current) {\n      restoreFocusTo.current.focus();\n      restoreFocusTo.current = undefined;\n    }\n  });\n\n  if (!activeModal && !exitingModal) {\n    return null;\n  }\n\n  return (\n    <ModalRootContext.Provider value={modalRootContext}>\n      <div\n        className={classNames(\n          styles['ModalRoot'],\n          webviewType === WebviewType.VKAPPS && styles['ModalRoot--vkapps'],\n          styles['ModalRoot--desktop'],\n        )}\n      >\n        <div className={styles['ModalRoot__mask']} ref={maskElementRef} onClick={onExit} />\n        <div className={styles['ModalRoot__viewport']}>\n          {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={onExit}\n                timeout={timeout}\n                key={key}\n                className={styles['ModalRoot__modal']}\n              >\n                {Modal}\n              </FocusTrap>\n            );\n          })}\n        </div>\n      </div>\n    </ModalRootContext.Provider>\n  );\n};\n"],"names":["ModalRootDesktop","warn","warnOnce","activeModal","activeModalProp","children","onOpen","onOpened","onClose","onClosed","maskElementRef","React","useRef","maskAnimationFrame","undefined","restoreFocusTo","document","useDOM","useConfigProvider","webviewType","platform","useModalManager","noop","exitingModal","onExit","getModalState","enteringModal","onEnter","onEntered","onExited","history","delayEnter","waitTransitionFinish","useWaitTransitionFinish","prevProps","usePrevious","modalRootContext","useObjectMemo","updateModalHeight","registerModal","Object","id","data","assign","isInsideModal","timeout","Platform","IOS","modals","Children","toArray","animateModalOpacity","modalState","display","innerElement","style","transition","transitionDelay","opacity","setMaskOpacity","forceOpacity","current","cancelAnimationFrame","requestAnimationFrame","translateY","translateYCurrent","clamp","toString","openModal","enteringState","closeModal","prevModalState","useEffect","activeElement","focus","ModalRootContext","Provider","value","div","className","classNames","WebviewType","VKAPPS","ref","onClick","map","Modal","modalId","getNavId","props","key","FocusTrap","restoreFocus"],"mappings":"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"}

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

@@ -1,3 +1,6 @@
+import { DOMContextInterface } from '../../lib/dom';
+import { HasChildren, HasPlatform } from '../../types';
+import { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';
 export declare enum ModalType {
     PAGE = "page",
     CARD = "card"
@@ -58,3 +61,28 @@ export interface ModalsStateEntry extends ModalElements {
     collapsedRange?: TranslateRange;
     hiddenRange?: TranslateRange;
 }
+export interface ModalRootProps extends HasChildren {
+    activeModal?: string | null;
+    /**
+     * Будет вызвано при начале открытия активной модалки с её id
+     */
+    onOpen?(modalId: string): void;
+    /**
+     * Будет вызвано при окончательном открытии активной модалки с её id
+     */
+    onOpened?(modalId: string): void;
+    /**
+     * Будет вызвано при начале закрытия активной модалки с её id
+     */
+    onClose?(modalId: string): void;
+    /**
+     * Будет вызвано при окончательном закрытии активной модалки с её id
+     */
+    onClosed?(modalId: string): void;
+}
+export interface ModalRootWithDOMProps extends HasPlatform, ModalRootProps, DOMContextInterface {
+    /**
+     * @ignore
+     */
+    configProvider?: ConfigProviderContextInterface;
+}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalRoot/types.ts"],"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 | null;\n  /**\n   * Событие начала открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Событие открытия модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Событие начала закрытия модалки.\n   */\n  onClose?: VoidFunction;\n  /**\n   * Событие закрытия модалки.\n   */\n  onClosed?: VoidFunction;\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"],"names":["ModalType","PAGE","CARD"],"mappings":";;;;;;;;;;IAAO;UAAKA,SAAS;IAATA,UACVC,UAAO;IADGD,UAEVE,UAAO;GAFGF,cAAAA"}
+{"version":3,"sources":["../../../../src/components/ModalRoot/types.ts"],"sourcesContent":["import { DOMContextInterface } from '../../lib/dom';\nimport { HasChildren, HasPlatform } from '../../types';\nimport { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';\n\nexport 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 | null;\n  /**\n   * Событие начала открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Событие открытия модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Событие начала закрытия модалки.\n   */\n  onClose?: VoidFunction;\n  /**\n   * Событие закрытия модалки.\n   */\n  onClosed?: VoidFunction;\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\nexport interface ModalRootProps extends HasChildren {\n  activeModal?: string | null;\n\n  /**\n   * Будет вызвано при начале открытия активной модалки с её id\n   */\n  onOpen?(modalId: string): void;\n\n  /**\n   * Будет вызвано при окончательном открытии активной модалки с её id\n   */\n  onOpened?(modalId: string): void;\n\n  /**\n   * Будет вызвано при начале закрытия активной модалки с её id\n   */\n  onClose?(modalId: string): void;\n\n  /**\n   * Будет вызвано при окончательном закрытии активной модалки с её id\n   */\n  onClosed?(modalId: string): void;\n}\n\nexport interface ModalRootWithDOMProps extends HasPlatform, ModalRootProps, DOMContextInterface {\n  /**\n   * @ignore\n   */\n  configProvider?: ConfigProviderContextInterface;\n}\n"],"names":["ModalType","PAGE","CARD"],"mappings":";;;;;;;;;;IAIO;UAAKA,SAAS;IAATA,UACVC,UAAO;IADGD,UAEVE,UAAO;GAFGF,cAAAA"}

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { HasChildren } from '../../types';
 import { ModalsStateEntry } from './types';
 interface ModalTransitionState {
     activeModal?: string | null;
@@ -12,7 +13,7 @@ export interface ModalTransitionProps extends ModalTransitionState {
     onEntered: (id: string | null) => void;
     onExit: VoidFunction;
     onExited: (id: string | null) => void;
-    getModalState: (id: string) => ModalsStateEntry;
+    getModalState: (id: string | undefined | null) => ModalsStateEntry | undefined;
     delayEnter: boolean;
 }
 export declare function modalTransitionReducer(state: ModalTransitionState, action: {
@@ -32,8 +33,8 @@ export declare function modalTransitionReducer(state: ModalTransitionState, acti
  * 5. activeModal: m2, exitingModal: null, enteringModal: null, переход закончен
  */
 export declare function useModalManager(activeModal: string | null | undefined, children: React.ReactNode | React.ReactNode[], onOpen?: (id: string) => void, onOpened?: (id: string) => void, onClose?: (id: string) => void, onClosed?: (id: string) => void, initModal?: (state: ModalsStateEntry) => void): ModalTransitionProps;
-export declare function withModalManager(initModal?: (a: ModalsStateEntry) => void): <Props extends ModalTransitionProps>(Wrapped: React.ComponentType<Props>) => React.ComponentType<Omit<Props, keyof ModalTransitionProps> & {
-    activeModal?: string | null | undefined;
-    children?: React.ReactNode;
-}>;
+type WithModalManager<Props extends ModalTransitionProps> = HasChildren & Omit<Props, keyof ModalTransitionProps> & {
+    activeModal?: string | null;
+};
+export declare function withModalManager(initModal?: (a: ModalsStateEntry) => void): <Props extends ModalTransitionProps>(Wrapped: React.ComponentType<Props>) => React.ComponentType<WithModalManager<Props>>;
 export {};

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

@@ -81,7 +81,7 @@ function useModalManager(activeModal, children) {
         if (modalState) {
             if ((0, _vkjs.isFunction)(modalState.onOpen)) {
                 modalState.onOpen();
-            } else if ((0, _vkjs.isFunction)(onOpen)) {
+            } else if ((0, _vkjs.isFunction)(onOpen) && modalState.id) {
                 onOpen(modalState.id);
             }
         }
@@ -91,7 +91,7 @@ function useModalManager(activeModal, children) {
         if (modalState) {
             if ((0, _vkjs.isFunction)(modalState.onClose)) {
                 modalState.onClose();
-            } else if ((0, _vkjs.isFunction)(onClose)) {
+            } else if ((0, _vkjs.isFunction)(onClose) && modalState.id) {
                 onClose(modalState.id);
             }
         }
@@ -192,7 +192,7 @@ function useModalManager(activeModal, children) {
     ]);
     var delayEnter = Boolean(transitionState.exitingModal && (isCard(activeModal) || isCard(transitionState.exitingModal)));
     var getModalState = _react.useCallback(function(id) {
-        return modalsState[id];
+        return id ? modalsState[id] : undefined;
     }, [
         modalsState
     ]);