@vkontakte/vkui 5.3.2 → 5.4.0

package/dist/cssm/components/ModalRoot/ModalRoot.module.css

@@ -1 +1,65 @@
-.vkuiModalRoot,.vkuiModalRoot__mask{height:100%;width:100%}.vkuiModalRoot__mask{animation:vkui-animation-fadeIn .32s ease;background:rgba(0,0,0,.4);left:0;opacity:1;position:absolute;top:0;transition:opacity 167ms ease-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vkuiModalRoot--touched .vkuiModalRoot__mask{transition:none}.vkuiModalRoot--switching .vkuiModalRoot__mask{pointer-events:none}.vkuiModalRoot__viewport{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0}:not(.vkuiModalRoot--desktop).vkuiModalRoot .vkuiModalRoot__viewport{top:0;top:var(--vkui_internal--safe_area_inset_top)}:not(.vkuiModalRoot--desktop).vkuiModalRoot--vkapps .vkuiModalRoot__viewport{top:calc(0px + 56px);top:calc(var(--vkui_internal--safe_area_inset_top) + var(--vkui--size_panel_header_height--regular))}.vkuiModalRoot__modal{box-sizing:border-box;height:100%;position:absolute;width:100%}@keyframes vkui-animation-fadeIn{0%{opacity:0}to{opacity:1}}
+.ModalRoot {
+  width: 100%;
+  height: 100%;
+}
+
+.ModalRoot__mask {
+  opacity: 1;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: rgba(0, 0, 0, 0.4);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  transition: opacity 167ms ease-out;
+  animation: vkui-animation-fadeIn 0.32s ease;
+}
+
+.ModalRoot--touched .ModalRoot__mask {
+  transition: none;
+}
+
+.ModalRoot--switching .ModalRoot__mask {
+  /** Во время автоматической анимации смены модалок с фоном взаимодействовать нельзя */
+  pointer-events: none;
+}
+
+.ModalRoot__viewport {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  pointer-events: none;
+}
+
+:not(.ModalRoot--desktop).ModalRoot .ModalRoot__viewport {
+  top: var(--vkui_internal--safe_area_inset_top);
+}
+
+:not(.ModalRoot--desktop).ModalRoot--vkapps .ModalRoot__viewport {
+  top: calc(
+    var(--vkui_internal--safe_area_inset_top) + var(--vkui--size_panel_header_height--regular)
+  );
+}
+
+.ModalRoot__modal {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+@keyframes vkui-animation-fadeIn {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}

package/dist/cssm/components/ModalRoot/ModalRootAdaptive.d.ts

@@ -1,24 +1,5 @@
-import * as React from 'react';
-export interface ModalRootProps {
-    activeModal?: string | null;
-    /**
-     * Будет вызвано при начале открытия активной модалки с её id
-     */
-    onOpen?(modalId: string): void;
-    /**
-     * Будет вызвано при окончательном открытии активной модалки с её id
-     */
-    onOpened?(modalId: string): void;
-    /**
-     * Будет вызвано при начале закрытия активной модалки с её id
-     */
-    onClose?(modalId: string): void;
-    /**
-     * Будет вызвано при окончательном закрытии активной модалки с её id
-     */
-    onClosed?(modalId: string): void;
-    children?: React.ReactNode;
-}
+/// <reference types="react" />
+import { ModalRootProps } from './types';
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalRoot
  */

package/dist/cssm/components/ModalRoot/ModalRootAdaptive.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalRoot/ModalRootAdaptive.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { ModalRootTouch } from './ModalRoot';\nimport { ModalRootDesktop } from './ModalRootDesktop';\n\nexport interface ModalRootProps {\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  children?: React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalRoot\n */\nexport const ModalRoot = (props: ModalRootProps) => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  useScrollLock(!!props.activeModal);\n\n  const RootComponent = isDesktop ? ModalRootDesktop : ModalRootTouch;\n\n  return <RootComponent {...props} />;\n};\n"],"names":["React","useAdaptivityWithJSMediaQueries","useScrollLock","ModalRootTouch","ModalRootDesktop","ModalRoot","props","isDesktop","activeModal","RootComponent"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,cAAc,QAAQ,cAAc;AAC7C,SAASC,gBAAgB,QAAQ,qBAAqB;AA2BtD;;CAEC,GACD,OAAO,MAAMC,YAAY,CAACC,QAA0B;IAClD,MAAM,EAAEC,UAAS,EAAE,GAAGN;IAEtBC,cAAc,CAAC,CAACI,MAAME,WAAW;IAEjC,MAAMC,gBAAgBF,YAAYH,mBAAmBD,cAAc;IAEnE,qBAAO,oBAACM,eAAkBH;AAC5B,EAAE"}
+{"version":3,"sources":["../../../../src/components/ModalRoot/ModalRootAdaptive.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { ModalRootTouch } from './ModalRoot';\nimport { ModalRootDesktop } from './ModalRootDesktop';\nimport { ModalRootProps } from './types';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalRoot\n */\nexport const ModalRoot = (props: ModalRootProps) => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  useScrollLock(!!props.activeModal);\n\n  const RootComponent = isDesktop ? ModalRootDesktop : ModalRootTouch;\n\n  return <RootComponent {...props} />;\n};\n"],"names":["React","useAdaptivityWithJSMediaQueries","useScrollLock","ModalRootTouch","ModalRootDesktop","ModalRoot","props","isDesktop","activeModal","RootComponent"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,+BAA+B,QAAQ,8CAA8C;AAC9F,SAASC,aAAa,QAAQ,2BAA2B;AACzD,SAASC,cAAc,QAAQ,cAAc;AAC7C,SAASC,gBAAgB,QAAQ,qBAAqB;AAGtD;;CAEC,GACD,OAAO,MAAMC,YAAY,CAACC,QAA0B;IAClD,MAAM,EAAEC,UAAS,EAAE,GAAGN;IAEtBC,cAAc,CAAC,CAACI,MAAME,WAAW;IAEjC,MAAMC,gBAAgBF,YAAYH,mBAAmBD,cAAc;IAEnE,qBAAO,oBAACM,eAAkBH;AAC5B,EAAE"}

package/dist/cssm/components/ModalRoot/ModalRootDesktop.d.ts

@@ -1,28 +1,3 @@
-import * as React from 'react';
-import { HasPlatform } from '../../types';
-import { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';
-export interface ModalRootProps extends HasPlatform {
-    activeModal?: string | null;
-    /**
-     * @ignore
-     */
-    configProvider?: ConfigProviderContextInterface;
-    children?: React.ReactNode;
-    /**
-     * Будет вызвано при начале открытия активной модалки с её id
-     */
-    onOpen?(modalId: string): void;
-    /**
-     * Будет вызвано при окончательном открытии активной модалки с её id
-     */
-    onOpened?(modalId: string): void;
-    /**
-     * Будет вызвано при начале закрытия активной модалки с её id
-     */
-    onClose?(modalId: string): void;
-    /**
-     * Будет вызвано при окончательном закрытии активной модалки с её id
-     */
-    onClosed?(modalId: string): void;
-}
-export declare const ModalRootDesktop: React.FC<Omit<ModalRootProps, "platform">>;
+/// <reference types="react" />
+import { ModalRootWithDOMProps } from './types';
+export declare const ModalRootDesktop: ({ activeModal: activeModalProp, children, onOpen, onOpened, onClose, onClosed, }: ModalRootWithDOMProps) => JSX.Element | null;

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

@@ -1,77 +1,74 @@
 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';
 import styles from './ModalRoot.module.css';
 const warn = warnOnce('ModalRoot');
-class ModalRootDesktopComponent extends React.Component {
-    constructor(props){
-        super(props);
-        this.maskElementRef = /*#__PURE__*/ React.createRef();
-        this.modalRootContext = {
-            updateModalHeight: ()=>undefined,
-            registerModal: ({ id , ...data })=>Object.assign(this.getModalState(id) ?? {}, data),
-            onClose: ()=>this.props.onExit(),
-            isInsideModal: true
-        };
-    }
-    maskElementRef;
-    maskAnimationFrame = undefined;
-    modalRootContext;
-    restoreFocusTo = undefined;
-    get timeout() {
-        return this.props.platform === Platform.IOS ? 400 : 320;
-    }
-    get modals() {
-        return React.Children.toArray(this.props.children);
-    }
-    getModalState(id) {
-        if (id === null) {
-            return undefined;
-        }
-        return this.props.getModalState(id);
-    }
-    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);
+export const ModalRootDesktop = ({ activeModal: activeModalProp , children , onOpen , onOpened , onClose , onClosed  })=>{
+    const maskElementRef = React.useRef(null);
+    const maskAnimationFrame = React.useRef(undefined);
+    const restoreFocusTo = React.useRef(undefined);
+    const { document  } = useDOM();
+    const { webviewType , platform  } = useConfigProvider();
+    const { activeModal , exitingModal , onExit , getModalState , enteringModal , onEnter , onEntered , onExited , history , delayEnter  } = useModalManager(activeModalProp, children, onOpen, onOpened, onClose, onClosed, noop);
+    const { waitTransitionFinish  } = useWaitTransitionFinish();
+    const prevProps = usePrevious({
+        exitingModal,
+        enteringModal,
+        activeModal
+    });
+    const modalRootContext = useObjectMemo({
+        updateModalHeight: ()=>undefined,
+        registerModal: ({ id , ...data })=>Object.assign(getModalState(id) ?? {}, data),
+        onClose: onExit,
+        isInsideModal: true
+    });
+    const timeout = platform === Platform.IOS ? 400 : 320;
+    const modals = React.Children.toArray(children);
+    /* Анимирует сдвиг модального окна */ const animateModalOpacity = (modalState, display)=>{
+        if (modalState?.innerElement) {
+            modalState.innerElement.style.transition = '';
+            modalState.innerElement.style.transitionDelay = display && delayEnter ? `${timeout}ms` : '';
+            modalState.innerElement.style.opacity = display ? '1' : '0';
         }
-        // focus restoration
-        if (this.props.activeModal && !prevProps.activeModal) {
-            this.restoreFocusTo = this.props.document?.activeElement ?? undefined;
+    };
+    /* Устанавливает прозрачность для полупрозрачной подложки */ const setMaskOpacity = (modalState, forceOpacity = null)=>{
+        if (forceOpacity === null && history?.[0] !== modalState.id) {
+            return;
         }
-        if (!this.props.activeModal && !this.props.exitingModal && this.restoreFocusTo) {
-            this.restoreFocusTo.focus();
-            this.restoreFocusTo = undefined;
+        if (maskAnimationFrame.current) {
+            cancelAnimationFrame(maskAnimationFrame.current);
         }
-    }
-    openModal(prevProps) {
-        const { enteringModal  } = this.props;
-        if (!enteringModal) {
+        maskAnimationFrame.current = requestAnimationFrame(()=>{
+            if (maskElementRef.current) {
+                const { translateY =0 , translateYCurrent =0  } = modalState;
+                const opacity = forceOpacity === null ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0 : forceOpacity;
+                maskElementRef.current.style.opacity = clamp(opacity, 0, 100).toString();
+            }
+        });
+    };
+    const openModal = ()=>{
+        if (!enteringModal || !prevProps) {
             return;
         }
-        const enteringState = this.getModalState(enteringModal);
-        this.props.onEnter();
+        const enteringState = getModalState(enteringModal);
+        onEnter();
         // Анимация открытия модального окна
         if (!prevProps.exitingModal) {
             requestAnimationFrame(()=>{
-                if (this.props.enteringModal === enteringModal) {
-                    this.waitTransitionFinish(enteringState, ()=>this.props.onEntered(enteringModal));
-                    this.animateModalOpacity(enteringState, true);
+                if (enteringModal === enteringModal) {
+                    waitTransitionFinish(enteringState?.innerElement, ()=>onEntered(enteringModal), timeout);
+                    animateModalOpacity(enteringState, true);
                 }
             });
             return;
@@ -81,89 +78,73 @@ class ModalRootDesktopComponent extends React.Component {
             enteringState.innerElement.style.transition = 'none';
             enteringState.innerElement.style.opacity = '1';
         }
-        this.props.onEntered(enteringModal);
-    }
-    closeModal(id) {
-        const prevModalState = this.getModalState(id);
+        onEntered(enteringModal);
+    };
+    const closeModal = (id)=>{
+        const prevModalState = getModalState(id);
         if (!prevModalState) {
             return;
         }
         // Анимация закрытия модального окна
-        if (!this.props.activeModal) {
+        if (!activeModal) {
             requestAnimationFrame(()=>{
-                this.waitTransitionFinish(prevModalState, ()=>this.props.onExited(id));
-                this.animateModalOpacity(prevModalState, false);
-                this.setMaskOpacity(prevModalState, 0);
+                waitTransitionFinish(prevModalState?.innerElement, ()=>onExited(id), timeout);
+                animateModalOpacity(prevModalState, false);
+                setMaskOpacity(prevModalState, 0);
             });
             return;
         }
         // Переход между модальными окнами без анимации
-        this.props.onExited(id);
-    }
-    waitTransitionFinish(modalState, eventHandler) {
-        if (transitionEvent.supported) {
-            const onceHandler = ()=>{
-                modalState?.innerElement?.removeEventListener(transitionEvent.name, onceHandler);
-                eventHandler();
-            };
-            modalState?.innerElement?.addEventListener(transitionEvent.name, onceHandler);
-        } else {
-            setTimeout(eventHandler, this.timeout);
+        onExited(id);
+    };
+    React.useEffect(()=>{
+        if (!prevProps) {
+            return;
         }
-    }
-    /* Анимирует сдвиг модалки */ animateModalOpacity(modalState, display) {
-        if (modalState?.innerElement) {
-            modalState.innerElement.style.transition = '';
-            modalState.innerElement.style.transitionDelay = display && this.props.delayEnter ? `${this.timeout}ms` : '';
-            modalState.innerElement.style.opacity = display ? '1' : '0';
+        // transition phase 2: animate exiting modal
+        if (exitingModal && exitingModal !== prevProps.exitingModal) {
+            closeModal(exitingModal);
         }
-    }
-    /* Устанавливает прозрачность для полупрозрачной подложки */ setMaskOpacity(modalState, forceOpacity = null) {
-        if (forceOpacity === null && this.props.history?.[0] !== modalState.id) {
-            return;
+        // transition phase 3: animate entering modal
+        if (enteringModal && enteringModal !== prevProps.enteringModal) {
+            openModal();
         }
-        if (this.maskAnimationFrame) {
-            cancelAnimationFrame(this.maskAnimationFrame);
+        // focus restoration
+        if (activeModal && !prevProps.activeModal) {
+            restoreFocusTo.current = document?.activeElement ?? undefined;
         }
-        this.maskAnimationFrame = requestAnimationFrame(()=>{
-            if (this.maskElementRef.current) {
-                const { translateY =0 , translateYCurrent =0  } = modalState;
-                const opacity = forceOpacity === null ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0 : forceOpacity;
-                this.maskElementRef.current.style.opacity = clamp(opacity, 0, 100).toString();
-            }
-        });
+        if (!activeModal && !exitingModal && restoreFocusTo.current) {
+            restoreFocusTo.current.focus();
+            restoreFocusTo.current = undefined;
+        }
+    });
+    if (!activeModal && !exitingModal) {
+        return null;
     }
-    render() {
-        const { exitingModal , activeModal  } = this.props;
-        if (!activeModal && !exitingModal) {
+    return /*#__PURE__*/ React.createElement(ModalRootContext.Provider, {
+        value: modalRootContext
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: classNames(styles['ModalRoot'], webviewType === WebviewType.VKAPPS && styles['ModalRoot--vkapps'], styles['ModalRoot--desktop'])
+    }, /*#__PURE__*/ React.createElement("div", {
+        className: styles['ModalRoot__mask'],
+        ref: maskElementRef,
+        onClick: onExit
+    }), /*#__PURE__*/ React.createElement("div", {
+        className: styles['ModalRoot__viewport']
+    }, modals.map((Modal)=>{
+        const modalId = getNavId(Modal.props, warn);
+        if (modalId !== activeModal && modalId !== exitingModal) {
             return null;
         }
-        return /*#__PURE__*/ React.createElement(ModalRootContext.Provider, {
-            value: this.modalRootContext
-        }, /*#__PURE__*/ React.createElement("div", {
-            className: classNames(styles['ModalRoot'], this.props.configProvider?.webviewType === WebviewType.VKAPPS && styles['ModalRoot--vkapps'], styles['ModalRoot--desktop'])
-        }, /*#__PURE__*/ React.createElement("div", {
-            className: styles['ModalRoot__mask'],
-            ref: this.maskElementRef,
-            onClick: this.props.onExit
-        }), /*#__PURE__*/ React.createElement("div", {
-            className: styles['ModalRoot__viewport']
-        }, this.modals.map((Modal)=>{
-            const modalId = getNavId(Modal.props, warn);
-            if (modalId !== activeModal && modalId !== exitingModal) {
-                return null;
-            }
-            const key = `modal-${modalId}`;
-            return /*#__PURE__*/ React.createElement(FocusTrap, {
-                restoreFocus: false,
-                onClose: this.props.onExit,
-                timeout: this.timeout,
-                key: key,
-                className: styles['ModalRoot__modal']
-            }, Modal);
-        }))));
-    }
-}
-export const ModalRootDesktop = withContext(withPlatform(withDOM(withModalManager()(ModalRootDesktopComponent))), ConfigProviderContext, 'configProvider');
+        const key = `modal-${modalId}`;
+        return /*#__PURE__*/ React.createElement(FocusTrap, {
+            restoreFocus: false,
+            onClose: onExit,
+            timeout: timeout,
+            key: key,
+            className: styles['ModalRoot__modal']
+        }, Modal);
+    }))));
+};
 
 //# sourceMappingURL=ModalRootDesktop.js.map

package/dist/cssm/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","styles","warn","ModalRootDesktopComponent","Component","constructor","props","maskElementRef","createRef","modalRootContext","updateModalHeight","undefined","registerModal","id","data","Object","assign","getModalState","onClose","onExit","isInsideModal","maskAnimationFrame","restoreFocusTo","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","ModalRootDesktop"],"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":["React","classNames","noop","clamp","useObjectMemo","usePrevious","useWaitTransitionFinish","useDOM","getNavId","Platform","warnOnce","useConfigProvider","WebviewType","FocusTrap","ModalRootContext","useModalManager","styles","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","id","data","Object","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/cssm/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/cssm/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/cssm/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/cssm/components/ModalRoot/useModalManager.js

@@ -157,7 +157,7 @@ export function modalTransitionReducer(state, action) {
         onClosed
     ]);
     const delayEnter = Boolean(transitionState.exitingModal && (isCard(activeModal) || isCard(transitionState.exitingModal)));
-    const getModalState = React.useCallback((id)=>modalsState[id], [
+    const getModalState = React.useCallback((id)=>id ? modalsState[id] : undefined, [
         modalsState
     ]);
     function onEnter() {
@@ -165,7 +165,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);
             }
         }
@@ -175,7 +175,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);
             }
         }