@vkontakte/vkui 5.3.2 → 5.4.1

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":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,KAAK,QAAQ,qBAAqB;AAC3C,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,uBAAuB,QAAQ,sCAAsC;AAC9E,SAASC,MAAM,QAAQ,gBAAgB;AACvC,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,QAAQ,QAAQ,qBAAqB;AAC9C,SAASC,iBAAiB,EAAEC,WAAW,QAAQ,0CAA0C;AACzF,SAASC,SAAS,QAAQ,yBAAyB;AACnD,SAASC,gBAAgB,QAAmC,qBAAqB;AAEjF,SAASC,eAAe,QAAQ,oBAAoB;AACpD,OAAOC,YAAY,yBAAyB;AAE5C,MAAMC,OAAOP,SAAS;AAEtB,OAAO,MAAMQ,mBAAmB,CAAC,EAC/BC,aAAaC,gBAAe,EAC5BC,SAAQ,EACRC,OAAM,EACNC,SAAQ,EACRC,QAAO,EACPC,SAAQ,EACc,GAAK;IAC3B,MAAMC,iBAAiB1B,MAAM2B,MAAM,CAAiB,IAAI;IACxD,MAAMC,qBAAqB5B,MAAM2B,MAAM,CAAqBE;IAC5D,MAAMC,iBAAiB9B,MAAM2B,MAAM,CAA0BE;IAE7D,MAAM,EAAEE,SAAQ,EAAE,GAAGxB;IACrB,MAAM,EAAEyB,YAAW,EAAEC,SAAQ,EAAE,GAAGtB;IAClC,MAAM,EACJQ,YAAW,EACXe,aAAY,EACZC,OAAM,EACNC,cAAa,EACbC,cAAa,EACbC,QAAO,EACPC,UAAS,EACTC,SAAQ,EACRC,QAAO,EACPC,WAAU,EACX,GAAG3B,gBAAgBK,iBAAiBC,UAAUC,QAAQC,UAAUC,SAASC,UAAUvB;IAEpF,MAAM,EAAEyC,qBAAoB,EAAE,GAAGrC;IACjC,MAAMsC,YAAYvC,YAAY;QAC5B6B;QACAG;QACAlB;IACF;IACA,MAAM0B,mBAA8CzC,cAAc;QAChE0C,mBAAmB,IAAMjB;QACzBkB,eAAe,CAAC,EAAEC,GAAE,EAAE,GAAGC,MAAM,GAAKC,OAAOC,MAAM,CAACf,cAAcY,OAAO,CAAC,GAAGC;QAC3EzB,SAASW;QACTiB,eAAe,IAAI;IACrB;IAEA,MAAMC,UAAUpB,aAAaxB,SAAS6C,GAAG,GAAG,MAAM,GAAG;IACrD,MAAMC,SAASvD,MAAMwD,QAAQ,CAACC,OAAO,CAACpC;IAEtC,mCAAmC,GACnC,MAAMqC,sBAAsB,CAACC,YAA0CC,UAAqB;QAC1F,IAAID,YAAYE,cAAc;YAC5BF,WAAWE,YAAY,CAACC,KAAK,CAACC,UAAU,GAAG;YAC3CJ,WAAWE,YAAY,CAACC,KAAK,CAACE,eAAe,GAAGJ,WAAWlB,aAAa,CAAC,EAAEW,QAAQ,EAAE,CAAC,GAAG,EAAE;YAC3FM,WAAWE,YAAY,CAACC,KAAK,CAACG,OAAO,GAAGL,UAAU,MAAM,GAAG;QAC7D,CAAC;IACH;IAEA,0DAA0D,GAC1D,MAAMM,iBAAiB,CAACP,YAA8BQ,eAA8B,IAAI,GAAK;QAC3F,IAAIA,iBAAiB,IAAI,IAAI1B,SAAS,CAAC,EAAE,KAAKkB,WAAWX,EAAE,EAAE;YAC3D;QACF,CAAC;QAED,IAAIpB,mBAAmBwC,OAAO,EAAE;YAC9BC,qBAAqBzC,mBAAmBwC,OAAO;QACjD,CAAC;QACDxC,mBAAmBwC,OAAO,GAAGE,sBAAsB,IAAM;YACvD,IAAI5C,eAAe0C,OAAO,EAAE;gBAC1B,MAAM,EAAEG,YAAa,EAAC,EAAEC,mBAAoB,EAAC,EAAE,GAAGb;gBAElD,MAAMM,UACJE,iBAAiB,IAAI,GACjB,IAAI,AAACK,CAAAA,oBAAoBD,UAAS,IAAM,CAAA,MAAMA,UAAS,KAAM,IAC7DJ,YAAY;gBAClBzC,eAAe0C,OAAO,CAACN,KAAK,CAACG,OAAO,GAAG9D,MAAM8D,SAAS,GAAG,KAAKQ,QAAQ;YACxE,CAAC;QACH;IACF;IAEA,MAAMC,YAAY,IAAM;QACtB,IAAI,CAACrC,iBAAiB,CAACO,WAAW;YAChC;QACF,CAAC;QAED,MAAM+B,gBAAgBvC,cAAcC;QACpCC;QAEA,oCAAoC;QACpC,IAAI,CAACM,UAAUV,YAAY,EAAE;YAC3BoC,sBAAsB,IAAM;gBAC1B,IAAIjC,kBAAkBA,eAAe;oBACnCM,qBACEgC,eAAed,cACf,IAAMtB,UAAUF,gBAChBgB;oBAEFK,oBAAoBiB,eAAe,IAAI;gBACzC,CAAC;YACH;YAEA;QACF,CAAC;QAED,+CAA+C;QAC/C,IAAIA,eAAed,cAAc;YAC/Bc,cAAcd,YAAY,CAACC,KAAK,CAACC,UAAU,GAAG;YAC9CY,cAAcd,YAAY,CAACC,KAAK,CAACG,OAAO,GAAG;QAC7C,CAAC;QAED1B,UAAUF;IACZ;IAEA,MAAMuC,aAAa,CAAC5B,KAAe;QACjC,MAAM6B,iBAAiBzC,cAAcY;QACrC,IAAI,CAAC6B,gBAAgB;YACnB;QACF,CAAC;QAED,oCAAoC;QACpC,IAAI,CAAC1D,aAAa;YAChBmD,sBAAsB,IAAM;gBAC1B3B,qBAAqBkC,gBAAgBhB,cAAc,IAAMrB,SAASQ,KAAKK;gBACvEK,oBAAoBmB,gBAAgB,KAAK;gBACzCX,eAAeW,gBAAgB;YACjC;YAEA;QACF,CAAC;QAED,+CAA+C;QAC/CrC,SAASQ;IACX;IAEAhD,MAAM8E,SAAS,CAAC,IAAM;QACpB,IAAI,CAAClC,WAAW;YACd;QACF,CAAC;QAED,4CAA4C;QAC5C,IAAIV,gBAAgBA,iBAAiBU,UAAUV,YAAY,EAAE;YAC3D0C,WAAW1C;QACb,CAAC;QAED,6CAA6C;QAC7C,IAAIG,iBAAiBA,kBAAkBO,UAAUP,aAAa,EAAE;YAC9DqC;QACF,CAAC;QAED,oBAAoB;QACpB,IAAIvD,eAAe,CAACyB,UAAUzB,WAAW,EAAE;YACzCW,eAAesC,OAAO,GAAIrC,UAAUgD,iBAAiBlD;QACvD,CAAC;QACD,IAAI,CAACV,eAAe,CAACe,gBAAgBJ,eAAesC,OAAO,EAAE;YAC3DtC,eAAesC,OAAO,CAACY,KAAK;YAC5BlD,eAAesC,OAAO,GAAGvC;QAC3B,CAAC;IACH;IAEA,IAAI,CAACV,eAAe,CAACe,cAAc;QACjC,OAAO,IAAI;IACb,CAAC;IAED,qBACE,oBAACpB,iBAAiBmE,QAAQ;QAACC,OAAOrC;qBAChC,oBAACsC;QACCC,WAAWnF,WACTe,MAAM,CAAC,YAAY,EACnBgB,gBAAgBpB,YAAYyE,MAAM,IAAIrE,MAAM,CAAC,oBAAoB,EACjEA,MAAM,CAAC,qBAAqB;qBAG9B,oBAACmE;QAAIC,WAAWpE,MAAM,CAAC,kBAAkB;QAAEsE,KAAK5D;QAAgB6D,SAASpD;sBACzE,oBAACgD;QAAIC,WAAWpE,MAAM,CAAC,sBAAsB;OAC1CuC,OAAOiC,GAAG,CAAC,CAACC,QAA8B;QACzC,MAAMC,UAAUlF,SAASiF,MAAME,KAAK,EAAE1E;QACtC,IAAIyE,YAAYvE,eAAeuE,YAAYxD,cAAc;YACvD,OAAO,IAAI;QACb,CAAC;QAED,MAAM0D,MAAM,CAAC,MAAM,EAAEF,QAAQ,CAAC;QAE9B,qBACE,oBAAC7E;YACCgF,cAAc,KAAK;YACnBrE,SAASW;YACTkB,SAASA;YACTuC,KAAKA;YACLR,WAAWpE,MAAM,CAAC,mBAAmB;WAEpCyE;IAGP;AAKV,EAAE"}

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);
             }
         }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalRoot/useModalManager.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isFunction, noop } from '@vkontakte/vkjs';\nimport { getNavId } from '../../lib/getNavId';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalsState, ModalsStateEntry, ModalType } from './types';\n\ninterface ModalTransitionState {\n  activeModal?: string | null;\n  enteringModal?: string | null;\n  exitingModal?: string | null;\n\n  history?: string[];\n  isBack?: boolean | null;\n}\n\nexport interface ModalTransitionProps extends ModalTransitionState {\n  onEnter: VoidFunction;\n  onEntered: (id: string | null) => void;\n  onExit: VoidFunction;\n  onExited: (id: string | null) => void;\n  getModalState: (id: string) => ModalsStateEntry;\n  delayEnter: boolean;\n}\n\nfunction getModals(children: React.ReactNode | React.ReactNode[]) {\n  return React.Children.toArray(children) as React.ReactElement[];\n}\n\nconst warn = warnOnce('ModalRoot');\n\nexport function modalTransitionReducer(\n  state: ModalTransitionState,\n  action: {\n    type: 'setActive' | 'entered' | 'exited' | 'inited';\n    id: string | null;\n  },\n): ModalTransitionState {\n  if (action.type === 'setActive' && action.id !== state.activeModal) {\n    const nextModal = action.id;\n    // preserve exiting modal if switching mid-transition\n    const prevModal = state.exitingModal || state.activeModal;\n    let history = state.history ? [...state.history] : [];\n    const isBack = Boolean(nextModal && history.includes(nextModal));\n\n    if (nextModal === null) {\n      history = [];\n    } else if (isBack) {\n      history = history.splice(0, history.indexOf(nextModal) + 1);\n    } else {\n      history.push(nextModal);\n    }\n\n    return {\n      activeModal: nextModal,\n      // not entering yet\n      enteringModal: null,\n      exitingModal: prevModal,\n      history,\n      isBack,\n    };\n  }\n  if (action.type === 'entered' && action.id === state.enteringModal) {\n    return { ...state, enteringModal: null };\n  }\n  if (action.type === 'exited' && action.id === state.exitingModal) {\n    return { ...state, exitingModal: null };\n  }\n  if (action.type === 'inited' && action.id === state.activeModal) {\n    return { ...state, enteringModal: action.id };\n  }\n  return state;\n}\n\n/**\n * Реализует переход модалок. При смене activeModal m1 -> m2:\n * 1. activeModal: m1, exitingModal: null, enteringModal: null, триггер перехода\n * 2. activeModal: m2, exitingModal: m1, enteringModal: null, рендерим m2 чтобы прошел init, начинаем анимацию выхода\n * одновременный переход между ModalPage:\n *   3a. activeModal: m2, exitingModal: m1, enteringModal: m2\n *   4a. exitingModal и enteringModal переходят в null в порядке завершения анимации\n * ИЛИ дожидаемся скрытия ModalCard\n *   3b. activeModal: m2, exitingModal: null, enteringModal: m2\n *   4b. enteringModal переходит в null после завершения анимации\n * 5. activeModal: m2, exitingModal: null, enteringModal: null, переход закончен\n */\nexport function useModalManager(\n  activeModal: string | null | undefined,\n  children: React.ReactNode | React.ReactNode[],\n  onOpen: (id: string) => void = noop,\n  onOpened: (id: string) => void = noop,\n  onClose: (id: string) => void = noop,\n  onClosed: (id: string) => void = noop,\n  initModal: (state: ModalsStateEntry) => void = noop,\n): ModalTransitionProps {\n  const modalsState = React.useRef<ModalsState>({}).current;\n  getModals(children).forEach((Modal) => {\n    const modalProps = Modal.props;\n    const id = getNavId(modalProps, warn);\n    const state: ModalsStateEntry = (id !== undefined && modalsState[id]) || {\n      id: id ?? null,\n    };\n\n    state.onOpen = Modal.props.onOpen;\n    state.onOpened = Modal.props.onOpened;\n    state.onClose = Modal.props.onClose;\n    state.onClosed = Modal.props.onClosed;\n    state.dynamicContentHeight = !!modalProps.dynamicContentHeight;\n    // ModalPage props\n    if (typeof modalProps.settlingHeight === 'number') {\n      state.settlingHeight = modalProps.settlingHeight;\n    }\n\n    if (state.id !== null) {\n      modalsState[state.id] = state;\n    }\n  });\n\n  const isMissing = activeModal && !modalsState[activeModal];\n  const safeActiveModal = isMissing ? null : activeModal;\n  const [transitionState, dispatchTransition] = React.useReducer(modalTransitionReducer, {\n    activeModal: safeActiveModal,\n    enteringModal: null,\n    exitingModal: null,\n    history: safeActiveModal ? [safeActiveModal] : [],\n    isBack: false,\n  });\n\n  // Map props to state, render activeModal for init\n  useIsomorphicLayoutEffect(() => {\n    // ignore non-existent activeModal\n    if (process.env.NODE_ENV === 'development' && isMissing) {\n      warn(`Переход невозможен - модальное окно (страница) ${activeModal} не существует`, 'error');\n    }\n    dispatchTransition({ type: 'setActive', id: safeActiveModal ?? null });\n  }, [activeModal]);\n\n  // Init activeModal & set enteringModal\n  useIsomorphicLayoutEffect(() => {\n    if (transitionState.activeModal) {\n      initModal(modalsState[transitionState.activeModal]);\n      dispatchTransition({ type: 'inited', id: transitionState.activeModal });\n    }\n  }, [transitionState.activeModal]);\n\n  const isCard = (id: string | null | undefined) =>\n    id != null && modalsState[id]?.type === ModalType.CARD;\n  const onEntered = React.useCallback(\n    (id: string | null) => {\n      if (id) {\n        const modalState = modalsState[id];\n\n        if (isFunction(modalState.onOpened)) {\n          modalState.onOpened();\n        } else if (isFunction(onOpened)) {\n          onOpened(id);\n        }\n      }\n\n      dispatchTransition({ type: 'entered', id });\n    },\n    [modalsState, onOpened],\n  );\n  const onExited = React.useCallback(\n    (id: string | null) => {\n      if (id) {\n        const modalState = modalsState[id];\n\n        if (isFunction(modalState.onClosed)) {\n          modalState.onClosed();\n        } else if (isFunction(onClosed)) {\n          onClosed(id);\n        }\n      }\n\n      dispatchTransition({ type: 'exited', id });\n    },\n    [modalsState, onClosed],\n  );\n  const delayEnter = Boolean(\n    transitionState.exitingModal && (isCard(activeModal) || isCard(transitionState.exitingModal)),\n  );\n  const getModalState = React.useCallback((id: string) => modalsState[id], [modalsState]);\n\n  function onEnter() {\n    const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];\n    if (modalState) {\n      if (isFunction(modalState.onOpen)) {\n        modalState.onOpen();\n      } else if (isFunction(onOpen)) {\n        onOpen(modalState.id);\n      }\n    }\n  }\n\n  function onExit() {\n    const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];\n    if (modalState) {\n      if (isFunction(modalState.onClose)) {\n        modalState.onClose();\n      } else if (isFunction(onClose)) {\n        onClose(modalState.id);\n      }\n    }\n  }\n\n  return {\n    onEnter,\n    onEntered,\n    onExit,\n    onExited,\n    ...transitionState,\n    delayEnter,\n    getModalState,\n  };\n}\n\nexport function withModalManager(initModal: (a: ModalsStateEntry) => void = noop) {\n  return function <Props extends ModalTransitionProps>(\n    Wrapped: React.ComponentType<Props>,\n  ): React.ComponentType<\n    Omit<Props, keyof ModalTransitionProps> & {\n      activeModal?: string | null;\n      children?: React.ReactNode;\n    }\n  > {\n    return function WithModalManager(props) {\n      const transitionManager = useModalManager(\n        props.activeModal,\n        props.children,\n        (props as any).onOpen,\n        (props as any).onOpened,\n        (props as any).onClose,\n        (props as any).onClosed,\n        initModal,\n      );\n      return <Wrapped {...(props as any)} {...transitionManager} />;\n    };\n  };\n}\n"],"names":["React","isFunction","noop","getNavId","useIsomorphicLayoutEffect","warnOnce","ModalType","getModals","children","Children","toArray","warn","modalTransitionReducer","state","action","type","id","activeModal","nextModal","prevModal","exitingModal","history","isBack","Boolean","includes","splice","indexOf","push","enteringModal","useModalManager","onOpen","onOpened","onClose","onClosed","initModal","modalsState","useRef","current","forEach","Modal","modalProps","props","undefined","dynamicContentHeight","settlingHeight","isMissing","safeActiveModal","transitionState","dispatchTransition","useReducer","process","env","NODE_ENV","isCard","CARD","onEntered","useCallback","modalState","onExited","delayEnter","getModalState","onEnter","onExit","withModalManager","Wrapped","WithModalManager","transitionManager"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ModalRoot/useModalManager.tsx"],"sourcesContent":["import * as React from 'react';\nimport { isFunction, noop } from '@vkontakte/vkjs';\nimport { getNavId } from '../../lib/getNavId';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { HasChildren } from '../../types';\nimport { ModalsState, ModalsStateEntry, ModalType } from './types';\n\ninterface ModalTransitionState {\n  activeModal?: string | null;\n  enteringModal?: string | null;\n  exitingModal?: string | null;\n  history?: string[];\n  isBack?: boolean | null;\n}\n\nexport interface ModalTransitionProps extends ModalTransitionState {\n  onEnter: VoidFunction;\n  onEntered: (id: string | null) => void;\n  onExit: VoidFunction;\n  onExited: (id: string | null) => void;\n  getModalState: (id: string | undefined | null) => ModalsStateEntry | undefined;\n  delayEnter: boolean;\n}\n\nfunction getModals(children: React.ReactNode | React.ReactNode[]) {\n  return React.Children.toArray(children) as React.ReactElement[];\n}\n\nconst warn = warnOnce('ModalRoot');\n\nexport function modalTransitionReducer(\n  state: ModalTransitionState,\n  action: {\n    type: 'setActive' | 'entered' | 'exited' | 'inited';\n    id: string | null;\n  },\n): ModalTransitionState {\n  if (action.type === 'setActive' && action.id !== state.activeModal) {\n    const nextModal = action.id;\n    // preserve exiting modal if switching mid-transition\n    const prevModal = state.exitingModal || state.activeModal;\n    let history = state.history ? [...state.history] : [];\n    const isBack = Boolean(nextModal && history.includes(nextModal));\n\n    if (nextModal === null) {\n      history = [];\n    } else if (isBack) {\n      history = history.splice(0, history.indexOf(nextModal) + 1);\n    } else {\n      history.push(nextModal);\n    }\n\n    return {\n      activeModal: nextModal,\n      // not entering yet\n      enteringModal: null,\n      exitingModal: prevModal,\n      history,\n      isBack,\n    };\n  }\n  if (action.type === 'entered' && action.id === state.enteringModal) {\n    return { ...state, enteringModal: null };\n  }\n  if (action.type === 'exited' && action.id === state.exitingModal) {\n    return { ...state, exitingModal: null };\n  }\n  if (action.type === 'inited' && action.id === state.activeModal) {\n    return { ...state, enteringModal: action.id };\n  }\n  return state;\n}\n\n/**\n * Реализует переход модалок. При смене activeModal m1 -> m2:\n * 1. activeModal: m1, exitingModal: null, enteringModal: null, триггер перехода\n * 2. activeModal: m2, exitingModal: m1, enteringModal: null, рендерим m2 чтобы прошел init, начинаем анимацию выхода\n * одновременный переход между ModalPage:\n *   3a. activeModal: m2, exitingModal: m1, enteringModal: m2\n *   4a. exitingModal и enteringModal переходят в null в порядке завершения анимации\n * ИЛИ дожидаемся скрытия ModalCard\n *   3b. activeModal: m2, exitingModal: null, enteringModal: m2\n *   4b. enteringModal переходит в null после завершения анимации\n * 5. activeModal: m2, exitingModal: null, enteringModal: null, переход закончен\n */\nexport function useModalManager(\n  activeModal: string | null | undefined,\n  children: React.ReactNode | React.ReactNode[],\n  onOpen: (id: string) => void = noop,\n  onOpened: (id: string) => void = noop,\n  onClose: (id: string) => void = noop,\n  onClosed: (id: string) => void = noop,\n  initModal: (state: ModalsStateEntry) => void = noop,\n): ModalTransitionProps {\n  const modalsState = React.useRef<ModalsState>({}).current;\n  getModals(children).forEach((Modal) => {\n    const modalProps = Modal.props;\n    const id = getNavId(modalProps, warn);\n    const state: ModalsStateEntry = (id !== undefined && modalsState[id]) || {\n      id: id ?? null,\n    };\n\n    state.onOpen = Modal.props.onOpen;\n    state.onOpened = Modal.props.onOpened;\n    state.onClose = Modal.props.onClose;\n    state.onClosed = Modal.props.onClosed;\n    state.dynamicContentHeight = !!modalProps.dynamicContentHeight;\n    // ModalPage props\n    if (typeof modalProps.settlingHeight === 'number') {\n      state.settlingHeight = modalProps.settlingHeight;\n    }\n\n    if (state.id !== null) {\n      modalsState[state.id] = state;\n    }\n  });\n\n  const isMissing = activeModal && !modalsState[activeModal];\n  const safeActiveModal = isMissing ? null : activeModal;\n  const [transitionState, dispatchTransition] = React.useReducer(modalTransitionReducer, {\n    activeModal: safeActiveModal,\n    enteringModal: null,\n    exitingModal: null,\n    history: safeActiveModal ? [safeActiveModal] : [],\n    isBack: false,\n  });\n\n  // Map props to state, render activeModal for init\n  useIsomorphicLayoutEffect(() => {\n    // ignore non-existent activeModal\n    if (process.env.NODE_ENV === 'development' && isMissing) {\n      warn(`Переход невозможен - модальное окно (страница) ${activeModal} не существует`, 'error');\n    }\n    dispatchTransition({ type: 'setActive', id: safeActiveModal ?? null });\n  }, [activeModal]);\n\n  // Init activeModal & set enteringModal\n  useIsomorphicLayoutEffect(() => {\n    if (transitionState.activeModal) {\n      initModal(modalsState[transitionState.activeModal]);\n      dispatchTransition({ type: 'inited', id: transitionState.activeModal });\n    }\n  }, [transitionState.activeModal]);\n\n  const isCard = (id: string | null | undefined) =>\n    id != null && modalsState[id]?.type === ModalType.CARD;\n  const onEntered = React.useCallback(\n    (id: string | null) => {\n      if (id) {\n        const modalState = modalsState[id];\n\n        if (isFunction(modalState.onOpened)) {\n          modalState.onOpened();\n        } else if (isFunction(onOpened)) {\n          onOpened(id);\n        }\n      }\n\n      dispatchTransition({ type: 'entered', id });\n    },\n    [modalsState, onOpened],\n  );\n  const onExited = React.useCallback(\n    (id: string | null) => {\n      if (id) {\n        const modalState = modalsState[id];\n\n        if (isFunction(modalState.onClosed)) {\n          modalState.onClosed();\n        } else if (isFunction(onClosed)) {\n          onClosed(id);\n        }\n      }\n\n      dispatchTransition({ type: 'exited', id });\n    },\n    [modalsState, onClosed],\n  );\n  const delayEnter = Boolean(\n    transitionState.exitingModal && (isCard(activeModal) || isCard(transitionState.exitingModal)),\n  );\n  const getModalState = React.useCallback(\n    (id: string | undefined | null) => (id ? modalsState[id] : undefined),\n    [modalsState],\n  );\n\n  function onEnter() {\n    const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];\n    if (modalState) {\n      if (isFunction(modalState.onOpen)) {\n        modalState.onOpen();\n      } else if (isFunction(onOpen) && modalState.id) {\n        onOpen(modalState.id);\n      }\n    }\n  }\n\n  function onExit() {\n    const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];\n    if (modalState) {\n      if (isFunction(modalState.onClose)) {\n        modalState.onClose();\n      } else if (isFunction(onClose) && modalState.id) {\n        onClose(modalState.id);\n      }\n    }\n  }\n\n  return {\n    onEnter,\n    onEntered,\n    onExit,\n    onExited,\n    ...transitionState,\n    delayEnter,\n    getModalState,\n  };\n}\n\ntype WithModalManager<Props extends ModalTransitionProps> = HasChildren &\n  Omit<Props, keyof ModalTransitionProps> & {\n    activeModal?: string | null;\n  };\n\nexport function withModalManager(initModal: (a: ModalsStateEntry) => void = noop) {\n  return function <Props extends ModalTransitionProps>(\n    Wrapped: React.ComponentType<Props>,\n  ): React.ComponentType<WithModalManager<Props>> {\n    return function WithModalManager(props) {\n      const transitionManager = useModalManager(\n        props.activeModal,\n        props.children,\n        (props as any).onOpen,\n        (props as any).onOpened,\n        (props as any).onClose,\n        (props as any).onClosed,\n        initModal,\n      );\n      return <Wrapped {...(props as any)} {...transitionManager} />;\n    };\n  };\n}\n"],"names":["React","isFunction","noop","getNavId","useIsomorphicLayoutEffect","warnOnce","ModalType","getModals","children","Children","toArray","warn","modalTransitionReducer","state","action","type","id","activeModal","nextModal","prevModal","exitingModal","history","isBack","Boolean","includes","splice","indexOf","push","enteringModal","useModalManager","onOpen","onOpened","onClose","onClosed","initModal","modalsState","useRef","current","forEach","Modal","modalProps","props","undefined","dynamicContentHeight","settlingHeight","isMissing","safeActiveModal","transitionState","dispatchTransition","useReducer","process","env","NODE_ENV","isCard","CARD","onEntered","useCallback","modalState","onExited","delayEnter","getModalState","onEnter","onExit","withModalManager","Wrapped","WithModalManager","transitionManager"],"mappings":"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"}

package/dist/cssm/components/NativeSelect/NativeSelect.d.ts

@@ -2,10 +2,14 @@ import * as React from 'react';
 import { HasAlign, HasRef, HasRootRef } from '../../types';
 import { FormFieldProps } from '../FormField/FormField';
 import type { SelectType } from '../Select/Select';
-export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement>, HasRef<HTMLSelectElement>, HasRootRef<HTMLLabelElement>, HasAlign, Pick<FormFieldProps, 'status'> {
+export interface NativeSelectProps extends React.SelectHTMLAttributes<HTMLSelectElement>, HasRef<HTMLSelectElement>, HasRootRef<HTMLLabelElement>, HasAlign, Pick<FormFieldProps, 'before' | 'status'> {
     placeholder?: string;
     multiline?: boolean;
     selectType?: SelectType;
+    /**
+     * Иконка раскрывающегося списка
+     */
+    icon?: React.ReactNode;
 }
 export interface SelectState {
     value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];
@@ -15,5 +19,5 @@ export interface SelectState {
 /**
  * @see https://vkcom.github.io/VKUI/#/NativeSelect
  */
-declare const NativeSelect: ({ style, defaultValue, align, placeholder, children, className, getRef, getRootRef, disabled, multiline, selectType, status, onChange: onChangeProp, value: valueProp, ...restProps }: NativeSelectProps) => JSX.Element;
+declare const NativeSelect: ({ style, defaultValue, align, placeholder, children, className, getRef, getRootRef, disabled, multiline, selectType, status, icon, before, onChange: onChangeProp, value: valueProp, ...restProps }: NativeSelectProps) => JSX.Element;
 export { NativeSelect };

package/dist/cssm/components/NativeSelect/NativeSelect.js

@@ -15,7 +15,7 @@ const sizeYClassNames = {
 };
 /**
  * @see https://vkcom.github.io/VKUI/#/NativeSelect
- */ const NativeSelect = ({ style , defaultValue ='' , align , placeholder , children , className , getRef , getRootRef , disabled , multiline , selectType ='default' , status , onChange: onChangeProp , value: valueProp , ...restProps })=>{
+ */ const NativeSelect = ({ style , defaultValue ='' , align , placeholder , children , className , getRef , getRootRef , disabled , multiline , selectType ='default' , status , icon =/*#__PURE__*/ React.createElement(DropdownIcon, null) , before , onChange: onChangeProp , value: valueProp , ...restProps })=>{
     const [title, setTitle] = React.useState('');
     const [empty, setEmpty] = React.useState(false);
     const [value, onChange] = useEnsuredControl({
@@ -38,11 +38,12 @@ const sizeYClassNames = {
     ]);
     return /*#__PURE__*/ React.createElement(FormField, {
         Component: "label",
-        className: classNames(styles['Select'], 'vkuiInternalNativeSelect', empty && styles['Select--empty'], multiline && styles['Select--multiline'], placeholder?.length && styles['Select--hasPlaceholder'], align === 'center' && styles['Select--align-center'], align === 'right' && styles['Select--align-right'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className),
+        className: classNames(styles['Select'], 'vkuiInternalNativeSelect', before && styles['Select--hasBefore'], empty && styles['Select--empty'], multiline && styles['Select--multiline'], align === 'center' && styles['Select--align-center'], align === 'right' && styles['Select--align-right'], sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY], className),
         style: style,
         getRootRef: getRootRef,
         disabled: disabled,
-        after: /*#__PURE__*/ React.createElement(DropdownIcon, null),
+        before: before,
+        after: icon,
         status: status
     }, /*#__PURE__*/ React.createElement("select", {
         ...restProps,