@vkontakte/vkui 5.3.2 → 5.4.1

package/dist/components/ModalRoot/ModalRootDesktop.js

@@ -1,239 +1,165 @@
-import _assert_this_initialized from "@swc/helpers/src/_assert_this_initialized.mjs";
-import _class_call_check from "@swc/helpers/src/_class_call_check.mjs";
-import _create_class from "@swc/helpers/src/_create_class.mjs";
-import _define_property from "@swc/helpers/src/_define_property.mjs";
-import _inherits from "@swc/helpers/src/_inherits.mjs";
 import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
-import _create_super from "@swc/helpers/src/_create_super.mjs";
 import * as React from "react";
-import { classNames } from "@vkontakte/vkjs";
+import { classNames, noop } from "@vkontakte/vkjs";
 import { clamp } from "../../helpers/math";
-import { withContext } from "../../hoc/withContext";
-import { withPlatform } from "../../hoc/withPlatform";
-import { withDOM } from "../../lib/dom";
+import { useObjectMemo } from "../../hooks/useObjectMemo";
+import { usePrevious } from "../../hooks/usePrevious";
+import { useWaitTransitionFinish } from "../../hooks/useWaitTransitionFinish";
+import { useDOM } from "../../lib/dom";
 import { getNavId } from "../../lib/getNavId";
 import { Platform } from "../../lib/platform";
-import { transitionEvent } from "../../lib/supportEvents";
 import { warnOnce } from "../../lib/warnOnce";
-import { ConfigProviderContext, WebviewType } from "../ConfigProvider/ConfigProviderContext";
+import { useConfigProvider, WebviewType } from "../ConfigProvider/ConfigProviderContext";
 import { FocusTrap } from "../FocusTrap/FocusTrap";
 import { ModalRootContext } from "./ModalRootContext";
-import { withModalManager } from "./useModalManager";
+import { useModalManager } from "./useModalManager";
 var warn = warnOnce("ModalRoot");
-var ModalRootDesktopComponent = /*#__PURE__*/ function(_React_Component) {
-    "use strict";
-    _inherits(ModalRootDesktopComponent, _React_Component);
-    var _super = _create_super(ModalRootDesktopComponent);
-    function ModalRootDesktopComponent(props) {
-        _class_call_check(this, ModalRootDesktopComponent);
-        var _this;
-        _this = _super.call(this, props);
-        _define_property(_assert_this_initialized(_this), "maskElementRef", void 0);
-        _define_property(_assert_this_initialized(_this), "maskAnimationFrame", undefined);
-        _define_property(_assert_this_initialized(_this), "modalRootContext", void 0);
-        _define_property(_assert_this_initialized(_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 = _object_without_properties(_param, [
-                    "id"
-                ]);
-                return Object.assign((_this_getModalState = _this.getModalState(id)) !== null && _this_getModalState !== void 0 ? _this_getModalState : {}, data);
-            },
-            onClose: function() {
-                return _this.props.onExit();
-            },
-            isInsideModal: true
-        };
-        return _this;
-    }
-    _create_class(ModalRootDesktopComponent, [
-        {
-            key: "timeout",
-            get: function get() {
-                return this.props.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);
-            }
+export 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 = useDOM().document;
+    var _useConfigProvider = useConfigProvider(), webviewType = _useConfigProvider.webviewType, platform = _useConfigProvider.platform;
+    var _useModalManager = useModalManager(activeModalProp, children, onOpen, onOpened, onClose, onClosed, noop), activeModal = _useModalManager.activeModal, exitingModal = _useModalManager.exitingModal, onExit = _useModalManager.onExit, getModalState = _useModalManager.getModalState, enteringModal = _useModalManager.enteringModal, onEnter = _useModalManager.onEnter, onEntered = _useModalManager.onEntered, onExited = _useModalManager.onExited, history = _useModalManager.history, delayEnter = _useModalManager.delayEnter;
+    var waitTransitionFinish = useWaitTransitionFinish().waitTransitionFinish;
+    var prevProps = usePrevious({
+        exitingModal: exitingModal,
+        enteringModal: enteringModal,
+        activeModal: activeModal
+    });
+    var _getModalState;
+    var modalRootContext = 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 = _object_without_properties(_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 (transitionEvent.supported) {
-                    var _modalState_innerElement;
-                    var onceHandler = function() {
-                        var _modalState_innerElement;
-                        modalState === null || modalState === void 0 ? void 0 : (_modalState_innerElement = modalState.innerElement) === null || _modalState_innerElement === void 0 ? void 0 : _modalState_innerElement.removeEventListener(transitionEvent.name, onceHandler);
-                        eventHandler();
-                    };
-                    modalState === null || modalState === void 0 ? void 0 : (_modalState_innerElement = modalState.innerElement) === null || _modalState_innerElement === void 0 ? void 0 : _modalState_innerElement.addEventListener(transitionEvent.name, onceHandler);
-                } else {
-                    setTimeout(eventHandler, this.timeout);
-                }
-            }
-        },
-        {
-            /* Анимирует сдвиг модалки */ 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 = clamp(opacity, 0, 100).toString();
-                    }
-                });
+        onClose: onExit,
+        isInsideModal: true
+    });
+    var timeout = 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 = 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.Provider, {
-                    value: this.modalRootContext
-                }, /*#__PURE__*/ React.createElement("div", {
-                    className: classNames("vkuiModalRoot", ((_this_props_configProvider = this.props.configProvider) === null || _this_props_configProvider === void 0 ? void 0 : _this_props_configProvider.webviewType) === WebviewType.VKAPPS && "vkuiModalRoot--vkapps", "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 = getNavId(Modal.props, warn);
-                    if (modalId !== activeModal && modalId !== exitingModal) {
-                        return null;
-                    }
-                    var key = "modal-".concat(modalId);
-                    return /*#__PURE__*/ React.createElement(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.Provider, {
+        value: modalRootContext
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: classNames("vkuiModalRoot", webviewType === 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 = getNavId(Modal.props, warn);
+        if (modalId !== activeModal && modalId !== exitingModal) {
+            return null;
         }
-    ]);
-    return ModalRootDesktopComponent;
-}(React.Component);
-export var ModalRootDesktop = withContext(withPlatform(withDOM(withModalManager()(ModalRootDesktopComponent))), ConfigProviderContext, "configProvider");
+        var key = "modal-".concat(modalId);
+        return /*#__PURE__*/ React.createElement(FocusTrap, {
+            restoreFocus: false,
+            onClose: onExit,
+            timeout: timeout,
+            key: key,
+            className: "vkuiModalRoot__modal"
+        }, Modal);
+    }))));
+};
 
 //# sourceMappingURL=ModalRootDesktop.js.map

package/dist/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":["React","classNames","clamp","withContext","withPlatform","withDOM","getNavId","Platform","transitionEvent","warnOnce","ConfigProviderContext","WebviewType","FocusTrap","ModalRootContext","withModalManager","warn","ModalRootDesktopComponent","props","maskElementRef","maskAnimationFrame","undefined","modalRootContext","restoreFocusTo","createRef","updateModalHeight","registerModal","Object","id","data","assign","getModalState","onClose","onExit","isInsideModal","timeout","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","supported","onceHandler","removeEventListener","name","addEventListener","setTimeout","display","transitionDelay","delayEnter","forceOpacity","history","cancelAnimationFrame","current","translateY","translateYCurrent","toString","render","Provider","value","div","className","configProvider","webviewType","VKAPPS","ref","onClick","map","Modal","modalId","key","restoreFocus","Component","ModalRootDesktop"],"mappings":";;;;;;;AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,WAAW,QAAQ,wBAAwB;AACpD,SAASC,YAAY,QAAQ,yBAAyB;AACtD,SAAmBC,OAAO,QAAQ,gBAAgB;AAClD,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,QAAQ,QAAQ,qBAAqB;AAE9C,SACEC,qBAAqB,EAErBC,WAAW,QACN,0CAA0C;AACjD,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,gBAAgB,QAAmC,qBAAqB;AAEjF,SAA+BC,gBAAgB,QAAQ,oBAAoB;AAG3E,IAAMC,OAAON,SAAS;AA+BtB,IAAA,AAAMO,0CA6MH,AA7MH;;cAAMA;+BAAAA;aAAAA,0BAGQC,KAA4C;gCAHpDD;;kCAIIC;QAYR,kDAAiBC,kBAAjB,KAAA;QACA,kDAAQC,sBAAyCC;QACjD,kDAAiBC,oBAAjB,KAAA;QACA,kDAAQC,kBAA0CF;QAbhD,MAAKF,cAAc,iBAAGlB,MAAMuB,SAAS;YAIe;QAFpD,MAAKF,gBAAgB,GAAG;YACtBG,mBAAmB;uBAAMJ;;YACzBK,eAAe,iBAAqBC;oBAAlBC,YAAAA,IAAOC;oBAAPD;;uBAAkBD,OAAOG,MAAM,CAAC,CAAA,sBAAA,MAAKC,aAAa,CAACH,iBAAnB,iCAAA,sBAA0B,CAAC,CAAC,EAAEC;YAAI;YACpFG,SAAS;uBAAM,MAAKd,KAAK,CAACe,MAAM;;YAChCC,eAAe,IAAI;QACrB;;;kBAbEjB;;YAqBQkB,KAAAA;iBAAZ,eAAsB;gBACpB,OAAO,IAAI,CAACjB,KAAK,CAACkB,QAAQ,KAAK5B,SAAS6B,GAAG,GAAG,MAAM,GAAG;YACzD;;;YAEYC,KAAAA;iBAAZ,eAAqB;gBACnB,OAAOrC,MAAMsC,QAAQ,CAACC,OAAO,CAAC,IAAI,CAACtB,KAAK,CAACuB,QAAQ;YACnD;;;YAEAV,KAAAA;mBAAAA,SAAAA,cAAcH,EAAiB,EAAE;gBAC/B,IAAIA,OAAO,IAAI,EAAE;oBACf,OAAOP;gBACT,CAAC;gBACD,OAAO,IAAI,CAACH,KAAK,CAACa,aAAa,CAACH;YAClC;;;YAEAc,KAAAA;mBAAAA,SAAAA,mBAAmBC,SAAgD,EAAE;gBACnE,4CAA4C;gBAC5C,IAAI,IAAI,CAACzB,KAAK,CAAC0B,YAAY,IAAI,IAAI,CAAC1B,KAAK,CAAC0B,YAAY,KAAKD,UAAUC,YAAY,EAAE;oBACjF,IAAI,CAACC,UAAU,CAAC,IAAI,CAAC3B,KAAK,CAAC0B,YAAY;gBACzC,CAAC;gBAED,6CAA6C;gBAC7C,IAAI,IAAI,CAAC1B,KAAK,CAAC4B,aAAa,IAAI,IAAI,CAAC5B,KAAK,CAAC4B,aAAa,KAAKH,UAAUG,aAAa,EAAE;oBACpF,IAAI,CAACC,SAAS,CAACJ;gBACjB,CAAC;gBAED,oBAAoB;gBACpB,IAAI,IAAI,CAACzB,KAAK,CAAC8B,WAAW,IAAI,CAACL,UAAUK,WAAW,EAAE;wBAC7B;wBAAA;oBAAvB,IAAI,CAACzB,cAAc,GAAI,CAAA,qCAAA,CAAA,uBAAA,IAAI,CAACL,KAAK,CAAC+B,QAAQ,cAAnB,kCAAA,KAAA,IAAA,qBAAqBC,aAAa,cAAlC,gDAAA,qCAAsC7B,SAAS;gBAGxE,CAAC;gBACD,IAAI,CAAC,IAAI,CAACH,KAAK,CAAC8B,WAAW,IAAI,CAAC,IAAI,CAAC9B,KAAK,CAAC0B,YAAY,IAAI,IAAI,CAACrB,cAAc,EAAE;oBAC9E,IAAI,CAACA,cAAc,CAAC4B,KAAK;oBACzB,IAAI,CAAC5B,cAAc,GAAGF;gBACxB,CAAC;YACH;;;YAEA0B,KAAAA;mBAAAA,SAAAA,UAAUJ,SAAgD,EAAE;;gBAC1D,IAAM,AAAEG,gBAAkB,IAAI,CAAC5B,KAAK,CAA5B4B;gBACR,IAAI,CAACA,eAAe;oBAClB;gBACF,CAAC;gBAED,IAAMM,gBAAgB,IAAI,CAACrB,aAAa,CAACe;gBACzC,IAAI,CAAC5B,KAAK,CAACmC,OAAO;gBAElB,oCAAoC;gBACpC,IAAI,CAACV,UAAUC,YAAY,EAAE;oBAC3BU,sBAAsB,WAAM;wBAC1B,IAAI,MAAKpC,KAAK,CAAC4B,aAAa,KAAKA,eAAe;4BAC9C,MAAKS,oBAAoB,CAACH,eAAe;uCAAM,MAAKlC,KAAK,CAACsC,SAAS,CAACV;;4BACpE,MAAKW,mBAAmB,CAACL,eAAe,IAAI;wBAC9C,CAAC;oBACH;oBAEA;gBACF,CAAC;gBAED,+CAA+C;gBAC/C,IAAIA,0BAAAA,2BAAAA,KAAAA,IAAAA,cAAeM,YAAY,EAAE;oBAC/BN,cAAcM,YAAY,CAACC,KAAK,CAACC,UAAU,GAAG;oBAC9CR,cAAcM,YAAY,CAACC,KAAK,CAACE,OAAO,GAAG;gBAC7C,CAAC;gBAED,IAAI,CAAC3C,KAAK,CAACsC,SAAS,CAACV;YACvB;;;YAEAD,KAAAA;mBAAAA,SAAAA,WAAWjB,EAAU,EAAE;;gBACrB,IAAMkC,iBAAiB,IAAI,CAAC/B,aAAa,CAACH;gBAC1C,IAAI,CAACkC,gBAAgB;oBACnB;gBACF,CAAC;gBAED,oCAAoC;gBACpC,IAAI,CAAC,IAAI,CAAC5C,KAAK,CAAC8B,WAAW,EAAE;oBAC3BM,sBAAsB,WAAM;wBAC1B,MAAKC,oBAAoB,CAACO,gBAAgB;mCAAM,MAAK5C,KAAK,CAAC6C,QAAQ,CAACnC;;wBACpE,MAAK6B,mBAAmB,CAACK,gBAAgB,KAAK;wBAC9C,MAAKE,cAAc,CAACF,gBAAgB;oBACtC;oBAEA;gBACF,CAAC;gBAED,+CAA+C;gBAC/C,IAAI,CAAC5C,KAAK,CAAC6C,QAAQ,CAACnC;YACtB;;;YAEA2B,KAAAA;mBAAAA,SAAAA,qBAAqBU,UAAwC,EAAEC,YAAwB,EAAE;gBACvF,IAAIzD,gBAAgB0D,SAAS,EAAE;wBAM7BF;oBALA,IAAMG,cAAc,WAAM;4BACxBH;wBAAAA,uBAAAA,wBAAAA,KAAAA,IAAAA,CAAAA,2BAAAA,WAAYP,YAAY,cAAxBO,sCAAAA,KAAAA,IAAAA,yBAA0BI,oBAAoB5D,gBAAgB6D,IAAI,EAAYF;wBAC9EF;oBACF;oBAEAD,uBAAAA,wBAAAA,KAAAA,IAAAA,CAAAA,2BAAAA,WAAYP,YAAY,cAAxBO,sCAAAA,KAAAA,IAAAA,yBAA0BM,iBAAiB9D,gBAAgB6D,IAAI,EAAYF;gBAC7E,OAAO;oBACLI,WAAWN,cAAc,IAAI,CAAC/B,OAAO;gBACvC,CAAC;YACH;;;YAEA,2BAA2B,GAC3BsB,KAAAA;mBAAAA,SAAAA,oBAAoBQ,UAAwC,EAAEQ,OAAgB,EAAE;gBAC9E,IAAIR,uBAAAA,wBAAAA,KAAAA,IAAAA,WAAYP,YAAY,EAAE;oBAC5BO,WAAWP,YAAY,CAACC,KAAK,CAACC,UAAU,GAAG;oBAC3CK,WAAWP,YAAY,CAACC,KAAK,CAACe,eAAe,GAC3CD,WAAW,IAAI,CAACvD,KAAK,CAACyD,UAAU,GAAG,AAAC,GAAe,OAAb,IAAI,CAACxC,OAAO,EAAC,QAAM,EAAE;oBAC7D8B,WAAWP,YAAY,CAACC,KAAK,CAACE,OAAO,GAAGY,UAAU,MAAM,GAAG;gBAC7D,CAAC;YACH;;;YAEA,0DAA0D,GAC1DT,KAAAA;mBAAAA,SAAAA,eAAeC,UAA4B,EAAsC;oBAApCW,eAAAA,iEAA8B,IAAI;;oBAChD;gBAA7B,IAAIA,iBAAiB,IAAI,IAAI,CAAA,CAAA,sBAAA,IAAI,CAAC1D,KAAK,CAAC2D,OAAO,cAAlB,iCAAA,KAAA,IAAA,mBAAoB,CAAC,EAAE,AAAD,MAAMZ,WAAWrC,EAAE,EAAE;oBACtE;gBACF,CAAC;gBAED,IAAI,IAAI,CAACR,kBAAkB,EAAE;oBAC3B0D,qBAAqB,IAAI,CAAC1D,kBAAkB;gBAC9C,CAAC;gBACD,IAAI,CAACA,kBAAkB,GAAGkC,sBAAsB,WAAM;oBACpD,IAAI,MAAKnC,cAAc,CAAC4D,OAAO,EAAE;wBAC/B,6BAAkDd,WAA1Ce,YAAAA,iDAAa,4DAA6Bf,WAA1BgB,mBAAAA,+DAAoB;wBAE5C,IAAMpB,UACJe,iBAAiB,IAAI,GACjB,IAAI,AAACK,CAAAA,oBAAoBD,UAAS,IAAM,CAAA,MAAMA,UAAS,KAAM,IAC7DJ,YAAY;wBAClB,MAAKzD,cAAc,CAAC4D,OAAO,CAACpB,KAAK,CAACE,OAAO,GAAG1D,MAAM0D,SAAS,GAAG,KAAKqB,QAAQ;oBAC7E,CAAC;gBACH;YACF;;;YAEAC,KAAAA;mBAAAA,SAAAA,SAAS;;oBAYC;gBAXR,IAAsC,cAAA,IAAI,CAACjE,KAAK,EAAxC0B,eAA8B,YAA9BA,cAAcI,cAAgB,YAAhBA;gBAEtB,IAAI,CAACA,eAAe,CAACJ,cAAc;oBACjC,OAAO,IAAI;gBACb,CAAC;gBAED,qBACE,oBAAC9B,iBAAiBsE,QAAQ;oBAACC,OAAO,IAAI,CAAC/D,gBAAgB;iCACrD,oBAACgE;oBACCC,WAAWrF,4BAET,CAAA,CAAA,6BAAA,IAAI,CAACgB,KAAK,CAACsE,cAAc,cAAzB,wCAAA,KAAA,IAAA,2BAA2BC,WAAW,AAAD,MAAM7E,YAAY8E,MAAM;iCAK/D,oBAACJ;oBACCC,SAAS;oBACTI,KAAK,IAAI,CAACxE,cAAc;oBACxByE,SAAS,IAAI,CAAC1E,KAAK,CAACe,MAAM;kCAE5B,oBAACqD;oBAAIC,SAAS;mBACX,IAAI,CAACjD,MAAM,CAACuD,GAAG,CAAC,SAACC,OAA8B;oBAC9C,IAAMC,UAAUxF,SAASuF,MAAM5E,KAAK,EAAEF;oBACtC,IAAI+E,YAAY/C,eAAe+C,YAAYnD,cAAc;wBACvD,OAAO,IAAI;oBACb,CAAC;oBAED,IAAMoD,MAAM,AAAC,SAAgB,OAARD;oBAErB,qBACE,oBAAClF;wBACCoF,cAAc,KAAK;wBACnBjE,SAAS,MAAKd,KAAK,CAACe,MAAM;wBAC1BE,SAAS,MAAKA,OAAO;wBACrB6D,KAAKA;wBACLT,SAAS;uBAERO;gBAGP;YAKV;;;WA1MI7E;EAAkChB,MAAMiG,SAAS;AA6MvD,OAAO,IAAMC,mBAAmB/F,YAC9BC,aAAaC,QAAwBS,mBAAmBE,8BACxDN,uBACA,kBACA"}
+{"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":["React","classNames","noop","clamp","useObjectMemo","usePrevious","useWaitTransitionFinish","useDOM","getNavId","Platform","warnOnce","useConfigProvider","WebviewType","FocusTrap","ModalRootContext","useModalManager","warn","ModalRootDesktop","activeModal","activeModalProp","children","onOpen","onOpened","onClose","onClosed","maskElementRef","useRef","maskAnimationFrame","undefined","restoreFocusTo","document","webviewType","platform","exitingModal","onExit","getModalState","enteringModal","onEnter","onEntered","onExited","history","delayEnter","waitTransitionFinish","prevProps","modalRootContext","updateModalHeight","registerModal","Object","id","data","assign","isInsideModal","timeout","IOS","modals","Children","toArray","animateModalOpacity","modalState","display","innerElement","style","transition","transitionDelay","opacity","setMaskOpacity","forceOpacity","current","cancelAnimationFrame","requestAnimationFrame","translateY","translateYCurrent","toString","openModal","enteringState","closeModal","prevModalState","useEffect","activeElement","focus","Provider","value","div","className","VKAPPS","ref","onClick","map","Modal","modalId","props","key","restoreFocus"],"mappings":"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"}

package/dist/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/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":"WAAO;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":"WAIO;UAAKA,SAAS;IAATA,UACVC,UAAO;IADGD,UAEVE,UAAO;GAFGF,cAAAA"}

package/dist/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/components/ModalRoot/useModalManager.js

@@ -70,7 +70,7 @@ export function modalTransitionReducer(state, action) {
         if (modalState) {
             if (isFunction(modalState.onOpen)) {
                 modalState.onOpen();
-            } else if (isFunction(onOpen)) {
+            } else if (isFunction(onOpen) && modalState.id) {
                 onOpen(modalState.id);
             }
         }
@@ -80,7 +80,7 @@ export function modalTransitionReducer(state, action) {
         if (modalState) {
             if (isFunction(modalState.onClose)) {
                 modalState.onClose();
-            } else if (isFunction(onClose)) {
+            } else if (isFunction(onClose) && modalState.id) {
                 onClose(modalState.id);
             }
         }
@@ -181,7 +181,7 @@ export function modalTransitionReducer(state, action) {
     ]);
     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
     ]);