@vkontakte/vkui 7.0.0-dev-efd91c.0 → 7.0.0-dev-efd91c.2

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalRoot/ModalRoot.tsx"],"sourcesContent":["'use client';\n\nimport * 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 { type DOMProps, withDOM } from '../../lib/dom';\nimport { getNavId } from '../../lib/getNavId';\nimport { rubber } from '../../lib/touch';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ConfigProviderContext } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { type CustomTouchEvent, Touch } from '../Touch/Touch';\nimport TouchRootContext from '../Touch/TouchContext';\nimport { ModalRootContext, type ModalRootContextInterface } from './ModalRootContext';\nimport { MODAL_PAGE_DEFAULT_PERCENT_HEIGHT } from './constants';\nimport type { ModalRootWithDOMProps, ModalsStateEntry, TranslateRange } from './types';\nimport { type ModalTransitionProps, withModalManager } from './useModalManager';\nimport styles from './ModalRoot.module.css';\n\nconst warn = warnOnce('ModalRoot');\n\nfunction numberInRange(number: number, range: TranslateRange | undefined) {\n  if (!range) {\n    return false;\n  }\n  return number >= range[0] && number <= range[1];\n}\n\nfunction rangeTranslate(number: number) {\n  return clamp(number, 0, 98);\n}\n\ninterface ModalRootState {\n  touchDown?: boolean;\n  dragging?: boolean;\n  modalOpenedLog: string[];\n}\n\nclass ModalRootTouchComponent extends React.Component<\n  ModalRootWithDOMProps & DOMProps & ModalTransitionProps,\n  ModalRootState\n> {\n  constructor(props: ModalRootWithDOMProps & ModalTransitionProps) {\n    super(props);\n    this.state = {\n      touchDown: false,\n      dragging: false,\n      modalOpenedLog: [],\n    };\n\n    this.maskElementRef = React.createRef();\n\n    this.modalRootContext = {\n      updateModalHeight: this.updateModalHeight,\n      registerModal: ({ id, ...data }) => Object.assign(this.props.getModalState(id) ?? {}, data),\n      onClose: () => this.props.onExit(),\n      isInsideModal: true,\n    };\n\n    this.frameIds = {};\n  }\n\n  private readonly maskElementRef: React.RefObject<HTMLDivElement>;\n  private readonly viewportRef = React.createRef<HTMLDivElement>();\n  private maskAnimationFrame: number | undefined = undefined;\n  private readonly modalRootContext: ModalRootContextInterface;\n  private readonly frameIds: {\n    [index: string]: number;\n  };\n  private restoreFocusTo: HTMLElement | undefined | null = undefined;\n\n  get timeout(): number {\n    return this.props.platform === 'ios' ? 400 : 320;\n  }\n\n  get document(): Document {\n    return this.props.document as Document;\n  }\n\n  get window(): Window {\n    return this.props.window as Window;\n  }\n\n  getModals() {\n    return React.Children.toArray(this.props.children) as React.ReactElement[];\n  }\n\n  componentDidMount() {\n    // Отслеживаем изменение размеров viewport\n    this.window?.addEventListener('resize', this.updateModalHeight, false);\n  }\n\n  componentWillUnmount() {\n    this.toggleDocumentScrolling(true);\n    this.window.removeEventListener('resize', this.updateModalHeight, false);\n  }\n\n  componentDidUpdate(prevProps: ModalRootWithDOMProps & ModalTransitionProps) {\n    // transition phase 2: animate exiting modal\n    if (this.props.exitingModal && this.props.exitingModal !== prevProps.exitingModal) {\n      this.closeModal(this.props.exitingModal);\n    }\n\n    // transition phase 3: animate entering modal\n    if (this.props.enteringModal && this.props.enteringModal !== prevProps.enteringModal) {\n      const enteringState = this.props.getModalState(this.props.enteringModal);\n      this.props.onEnter();\n      this.waitTransitionFinish(enteringState, () => {\n        if (enteringState) {\n          if (enteringState.innerElement) {\n            enteringState.innerElement.style.transitionDelay = '';\n          }\n          this.onEntered(enteringState);\n        }\n      });\n\n      if (enteringState?.innerElement) {\n        enteringState.innerElement.style.transitionDelay = this.props.delayEnter\n          ? `${this.timeout}ms`\n          : '';\n        this.animateTranslate(enteringState, enteringState.translateY);\n        this.setMaskOpacity(enteringState, 1);\n      }\n    }\n\n    // focus restoration\n    if (this.props.activeModal && !prevProps.activeModal) {\n      this.restoreFocusTo = this.document.activeElement as HTMLElement;\n    }\n    if (!this.props.activeModal && !this.props.exitingModal && this.restoreFocusTo) {\n      this.restoreFocusTo.focus();\n      this.restoreFocusTo = null;\n    }\n\n    this.toggleDocumentScrolling(!this.props.activeModal && !this.props.exitingModal);\n  }\n\n  /* Отключает скролл документа */\n  toggleDocumentScrolling(enabled: boolean) {\n    if (enabled) {\n      // восстанавливаем значение overscroll behavior\n      // eslint-disable-next-line no-restricted-properties\n      this.document.documentElement.classList.remove('vkui--disable-overscroll-behavior');\n    } else {\n      // отключаем нативный pull-to-refresh при открытом модальном окне\n      // чтобы он не срабатывал при закрытии модалки смахиванием вниз\n      // eslint-disable-next-line no-restricted-properties\n      this.document.documentElement.classList.add('vkui--disable-overscroll-behavior');\n    }\n  }\n\n  checkPageContentHeight() {\n    const modalState = this.props.getModalState(this.props.activeModal);\n\n    if (modalState?.type === 'page' && modalState?.modalElement) {\n      const prevModalState = { ...modalState };\n      initPageModal(modalState);\n      const currentModalState = { ...modalState };\n\n      let needAnimate = false;\n\n      if (prevModalState.expandable === currentModalState.expandable) {\n        if (prevModalState.translateYFrom !== currentModalState.translateYFrom) {\n          needAnimate = true;\n        }\n      } else {\n        needAnimate = true;\n      }\n\n      if (needAnimate) {\n        this.animateTranslate(modalState, modalState.translateY);\n      }\n    }\n  }\n\n  updateModalHeight = () => {\n    const modalState = this.props.getModalState(this.props.activeModal);\n\n    if (modalState && modalState.type === 'page') {\n      if (this.props.enteringModal) {\n        this.waitTransitionFinish(modalState, () => {\n          requestAnimationFrame(() => this.checkPageContentHeight());\n        });\n      } else {\n        requestAnimationFrame(() => this.checkPageContentHeight());\n      }\n    }\n  };\n\n  onEntered({ id, modalElement }: ModalsStateEntry) {\n    if (\n      !this.props.noFocusToDialog &&\n      modalElement &&\n      !modalElement.contains(this.document.activeElement)\n    ) {\n      modalElement.focus();\n    }\n\n    this.props.onEntered(id);\n  }\n\n  closeModal(id: string) {\n    // Сбрасываем состояния, которые могут помешать закрытию модального окна\n    this.setState({ touchDown: false });\n\n    const prevModalState = this.props.getModalState(id);\n\n    if (!prevModalState) {\n      id && warn(`closeActiveModal: модальное окно (страница) ${id} не существует`, 'error');\n      return;\n    }\n    if (!this.state.modalOpenedLog.length) {\n      this.setState((prevState) => ({\n        modalOpenedLog: [...prevState.modalOpenedLog, id],\n      }));\n    }\n    const nextModalState = this.props.getModalState(this.props.activeModal);\n    const nextIsPage = !!nextModalState && nextModalState.type === 'page';\n\n    const prevIsPage = !!prevModalState && prevModalState.type === 'page';\n    this.waitTransitionFinish(prevModalState, () => this.props.onExited(id));\n    const exitTranslate =\n      prevIsPage &&\n      nextIsPage &&\n      (prevModalState.translateY ?? 0) <= (nextModalState?.translateYFrom ?? 0) &&\n      !this.props.isBack\n        ? (nextModalState?.translateYFrom ?? 0) + 10\n        : 100;\n    this.animateTranslate(prevModalState, exitTranslate);\n\n    if (!nextModalState) {\n      // NOTE: was only for clean exit\n      this.setMaskOpacity(prevModalState, 0);\n      this.setState({ modalOpenedLog: [] });\n      prevModalState.translateY = undefined;\n      prevModalState.expandable = undefined;\n    } else if (nextModalState.id && !this.state.modalOpenedLog.includes(nextModalState.id)) {\n      nextModalState.translateY = undefined;\n      this.setState((prevState) => ({\n        modalOpenedLog: [...prevState.modalOpenedLog, nextModalState.id!],\n      }));\n    }\n  }\n\n  onTouchMove = (e: CustomTouchEvent) => {\n    if (this.props.exitingModal) {\n      return;\n    }\n    const modalState = this.props.getModalState(this.props.activeModal);\n    if (!modalState) {\n      return;\n    }\n\n    if (modalState.type === 'page') {\n      return this.onPageTouchMove(e, modalState);\n    }\n\n    if (modalState.type === 'card') {\n      return this.onCardTouchMove(e, modalState);\n    }\n  };\n\n  onPageTouchMove(event: CustomTouchEvent, modalState: ModalsStateEntry) {\n    const { shiftY, originalEvent } = event;\n    const target = originalEvent.target as HTMLElement;\n\n    if (!event.isY) {\n      if (this.viewportRef.current?.contains(target)) {\n        originalEvent.preventDefault();\n      }\n      return;\n    }\n\n    if (!modalState.innerElement?.contains(target)) {\n      return originalEvent.preventDefault();\n    }\n\n    originalEvent.stopPropagation();\n\n    const { expandable, contentScrolled, collapsed, expanded } = modalState;\n\n    if (!this.state.touchDown) {\n      modalState.touchStartContentScrollTop = modalState.contentElement?.scrollTop ?? 0;\n      this.setState({ touchDown: true });\n    }\n\n    if (contentScrolled) {\n      return;\n    }\n\n    if (modalState.touchMovePositive === null) {\n      modalState.touchMovePositive = shiftY > 0;\n    }\n\n    if (\n      !modalState.expandable ||\n      collapsed ||\n      (expanded && modalState.touchMovePositive && modalState.touchStartContentScrollTop === 0) ||\n      modalState.headerElement?.contains(target)\n    ) {\n      originalEvent.preventDefault();\n\n      if ((!expandable && shiftY < 0) || !this.window) {\n        return;\n      }\n\n      !this.state.dragging && this.setState({ dragging: true });\n\n      const shiftYPercent = (shiftY / this.window.innerHeight) * 100;\n      const shiftYCurrent = rubber(shiftYPercent, 72, 0.8, this.props.platform !== 'ios');\n\n      modalState.touchShiftYPercent = shiftYPercent;\n      modalState.translateYCurrent = rangeTranslate((modalState.translateY ?? 0) + shiftYCurrent);\n\n      this.animateTranslate(modalState, modalState.translateYCurrent);\n      this.setMaskOpacity(modalState);\n    }\n  }\n\n  onCardTouchMove(event: CustomTouchEvent, modalState: ModalsStateEntry) {\n    const { originalEvent, shiftY } = event;\n    const target = originalEvent.target as HTMLElement;\n    if (modalState.innerElement?.contains(target)) {\n      if (!this.state.touchDown) {\n        this.setState({ touchDown: true, dragging: true });\n      }\n\n      const shiftYPercent = (shiftY / modalState.innerElement.offsetHeight) * 100;\n      const shiftYCurrent = rubber(shiftYPercent, 72, 1.2, this.props.platform !== 'ios');\n\n      modalState.touchShiftYPercent = shiftYPercent;\n      modalState.translateYCurrent = Math.max(0, (modalState.translateY ?? 0) + shiftYCurrent);\n\n      this.animateTranslate(modalState, modalState.translateYCurrent);\n      this.setMaskOpacity(modalState);\n    }\n  }\n\n  onTouchEnd = (e: CustomTouchEvent) => {\n    const modalState = this.props.getModalState(this.props.activeModal);\n\n    if (modalState?.type === 'page') {\n      return this.onPageTouchEnd(e, modalState);\n    }\n\n    if (modalState?.type === 'card') {\n      return this.onCardTouchEnd(e, modalState);\n    }\n  };\n\n  onPageTouchEnd(event: CustomTouchEvent, modalState: ModalsStateEntry) {\n    const { startY, shiftY } = event;\n\n    modalState.contentScrolled = false;\n    modalState.touchMovePositive = null;\n\n    let setStateCallback;\n\n    if (this.state.dragging && this.window) {\n      const shiftYEndPercent = ((startY + shiftY) / this.window.innerHeight) * 100;\n\n      let translateY = modalState.translateYCurrent ?? 0;\n      const expectTranslateY =\n        (translateY / event.duration) *\n        240 *\n        0.6 *\n        ((modalState.touchShiftYPercent ?? 0) < 0 ? -1 : 1);\n      translateY = rangeTranslate(translateY + expectTranslateY);\n\n      if (modalState.settlingHeight !== 100) {\n        if (numberInRange(translateY, modalState.expandedRange)) {\n          translateY = modalState.expandedRange?.[0] ?? 0;\n        } else if (numberInRange(translateY, modalState.collapsedRange)) {\n          translateY = modalState.translateYFrom ?? 0;\n        } else if (numberInRange(translateY, modalState.hiddenRange)) {\n          translateY = modalState.preventClose ? modalState.translateYFrom ?? 0 : 100;\n        } else {\n          translateY = modalState.translateYFrom ?? 0;\n        }\n      } else {\n        if (numberInRange(translateY, [0, 25])) {\n          translateY = 0;\n        } else {\n          translateY = modalState.preventClose ? modalState.translateYFrom ?? 0 : 100;\n        }\n      }\n\n      if (translateY !== 100 && shiftYEndPercent >= 75 && !modalState.preventClose) {\n        translateY = 100;\n      }\n\n      modalState.translateY = translateY;\n      modalState.translateYCurrent = translateY;\n      modalState.collapsed = numberInRange(translateY, modalState.collapsedRange);\n      modalState.expanded = translateY === 0;\n      modalState.hidden = translateY === 100;\n\n      if (modalState.hidden) {\n        this.props.onExit();\n      }\n\n      setStateCallback = () => {\n        if (!modalState.hidden) {\n          this.animateTranslate(modalState, modalState.translateY);\n        }\n\n        this.setMaskOpacity(modalState);\n      };\n    }\n\n    this.setState(\n      {\n        touchDown: false,\n        dragging: false,\n      },\n      setStateCallback,\n    );\n  }\n\n  onCardTouchEnd({ duration }: CustomTouchEvent, modalState: ModalsStateEntry) {\n    let setStateCallback;\n\n    if (this.state.dragging) {\n      let translateY = modalState.translateYCurrent ?? 0;\n\n      const expectTranslateY =\n        (translateY / duration) * 240 * 0.6 * ((modalState.touchShiftYPercent ?? 0) < 0 ? -1 : 1);\n      translateY = Math.max(0, translateY + expectTranslateY);\n\n      if (translateY >= 30) {\n        translateY = 100;\n      } else {\n        translateY = 0;\n      }\n\n      modalState.translateY = translateY;\n      modalState.hidden = translateY === 100;\n\n      if (modalState.hidden) {\n        this.props.onExit();\n      }\n\n      setStateCallback = () => {\n        if (!modalState.hidden) {\n          this.animateTranslate(modalState, modalState.translateY);\n        }\n\n        this.setMaskOpacity(modalState);\n      };\n    }\n\n    this.setState(\n      {\n        touchDown: false,\n        dragging: false,\n      },\n      setStateCallback,\n    );\n  }\n\n  onScroll = (e: React.SyntheticEvent) => {\n    const activeModal = this.props.activeModal;\n\n    const target = e.target as HTMLElement;\n\n    if (!activeModal) {\n      return;\n    }\n    const modalState = this.props.getModalState(activeModal);\n    if (modalState?.type === 'page' && modalState?.contentElement?.contains(target)) {\n      modalState.contentScrolled = true;\n\n      if (modalState.contentScrollStopTimeout) {\n        clearTimeout(modalState.contentScrollStopTimeout);\n      }\n\n      modalState.contentScrollStopTimeout = setTimeout(() => {\n        if (modalState.contentScrolled) {\n          modalState.contentScrolled = false;\n        }\n      }, 250);\n    }\n  };\n\n  waitTransitionFinish(modalState: ModalsStateEntry | undefined, eventHandler: () => void) {\n    const el = modalState ? modalState.innerElement : null;\n    if (el) {\n      el.addEventListener('transitionend', eventHandler, { once: true });\n    } else {\n      setTimeout(eventHandler, this.timeout);\n    }\n  }\n\n  /**\n   * Анимирует сдвиг модалки\n   *\n   * @param {ModalsStateEntry} modalState\n   * @param {number} percent Процент сдвига: 0 – полностью открыта, 100 – полностью закрыта\n   */\n  animateTranslate(modalState: ModalsStateEntry, percent: number | undefined) {\n    const frameId = `animateTranslateFrame${modalState.id}`;\n\n    cancelAnimationFrame(this.frameIds[frameId]);\n\n    this.frameIds[frameId] = requestAnimationFrame(() => {\n      if (!modalState.innerElement) {\n        return;\n      }\n      modalState.innerElement.style.transform = `translate3d(0, ${percent}%, 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    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        this.maskElementRef.current.style.transitionDelay =\n          opacity && this.props.delayEnter ? `${this.timeout}ms` : '';\n      }\n    });\n  }\n\n  render() {\n    const { activeModal, exitingModal, enteringModal, modalOverlayTestId } = this.props;\n    const { touchDown, dragging } = this.state;\n\n    if (!activeModal && !exitingModal) {\n      return null;\n    }\n\n    return (\n      <TouchRootContext.Provider value={true}>\n        <ModalRootContext.Provider value={this.modalRootContext}>\n          <Touch\n            className={classNames(\n              styles.host,\n              this.props.configProvider?.hasCustomPanelHeaderAfter &&\n                styles.hasCustomPanelHeaderAfterSlot,\n              touchDown && classNames(styles.touched, 'vkuiInternalModalRoot--touched'),\n              !!(enteringModal || exitingModal) &&\n                classNames(styles.switching, 'vkuiInternalModalRoot--switching'),\n            )}\n            onMove={this.onTouchMove}\n            onEnd={this.onTouchEnd}\n            onScroll={this.onScroll}\n          >\n            <div\n              data-testid={modalOverlayTestId}\n              className={styles.mask}\n              onClick={this.props.onExit}\n              ref={this.maskElementRef}\n            />\n            <div className={styles.viewport} ref={this.viewportRef}>\n              {this.getModals().map((Modal) => {\n                const modalId = getNavId(Modal.props, warn);\n                const _modalState = this.props.getModalState(modalId);\n                if ((modalId !== activeModal && modalId !== exitingModal) || !_modalState) {\n                  return null;\n                }\n                const modalState = { ..._modalState };\n\n                const isPage = modalState.type === 'page';\n                const key = `modal-${modalId}`;\n\n                return (\n                  <FocusTrap\n                    key={key}\n                    onClose={this.props.onExit}\n                    timeout={this.timeout}\n                    className={classNames(\n                      styles.modal,\n\n                      dragging && 'vkuiInternalModalRoot__modal--dragging',\n\n                      isPage && modalState.expandable && 'vkuiInternalModalRoot__modal--expandable',\n                      isPage && modalState.collapsed && 'vkuiInternalModalRoot__modal--collapsed',\n                    )}\n                    autoFocus={false}\n                    restoreFocus={false}\n                  >\n                    {Modal}\n                  </FocusTrap>\n                );\n              })}\n            </div>\n          </Touch>\n        </ModalRootContext.Provider>\n      </TouchRootContext.Provider>\n    );\n  }\n}\n\nexport const ModalRootTouch: React.FC<ModalRootWithDOMProps> = withContext(\n  withPlatform(\n    withDOM<ModalRootWithDOMProps>(withModalManager(initModal)(ModalRootTouchComponent)),\n  ),\n  ConfigProviderContext,\n  'configProvider',\n);\n\n/**\n * Инициализирует модалку перед анимацией открытия\n */\nfunction initModal(modalState: ModalsStateEntry) {\n  switch (modalState.type) {\n    case 'page':\n      modalState.settlingHeight = modalState.settlingHeight || MODAL_PAGE_DEFAULT_PERCENT_HEIGHT;\n      return initPageModal(modalState);\n    case 'card':\n      return initCardModal(modalState);\n    default:\n      process.env.NODE_ENV === 'development' &&\n        warn(`initActiveModal: modalState.type=\"${modalState.type}\" не поддерживается`, 'error');\n  }\n}\n\nfunction initPageModal(modalState: ModalsStateEntry) {\n  const { contentElement, bottomInset } = modalState;\n  const contentElementHeight = calculateModalContentHeight(\n    contentElement?.firstElementChild as HTMLElement,\n    modalState.expandable,\n  );\n  const bottomInsetHeight = bottomInset?.offsetHeight || 0;\n  const contentHeight = contentElementHeight + bottomInsetHeight;\n  let prevTranslateY = modalState.translateY;\n  let prevExpandable = modalState.expandable;\n\n  modalState.expandable =\n    contentHeight > (contentElement?.clientHeight ?? 0) || modalState.settlingHeight === 100;\n\n  let collapsed = false;\n  let expanded = false;\n  let translateYFrom;\n  let translateY;\n  let expandedRange: TranslateRange;\n  let collapsedRange: TranslateRange | undefined;\n  let hiddenRange: TranslateRange;\n\n  const hasCollapsedState = Boolean(modalState.expandable && modalState.settlingHeight !== 100);\n  if (modalState.expandable) {\n    translateYFrom = 100 - (modalState.settlingHeight ?? 0);\n\n    const shiftHalf = translateYFrom / 2;\n    const visiblePart = 100 - translateYFrom;\n\n    expandedRange = [0, shiftHalf];\n    collapsedRange = hasCollapsedState ? [shiftHalf, translateYFrom + visiblePart / 4] : undefined;\n    hiddenRange = [translateYFrom + visiblePart / 4, 100];\n\n    collapsed = hasCollapsedState && translateYFrom > 0;\n    expanded = translateYFrom <= 0;\n    translateY = translateYFrom;\n  } else {\n    const headerHeight = modalState.headerElement?.offsetHeight ?? 0;\n    const height = contentHeight + headerHeight;\n\n    translateYFrom =\n      100 - (height / (modalState.innerElement?.parentElement?.offsetHeight ?? 0)) * 100;\n    translateY = translateYFrom;\n\n    expandedRange = [translateY, translateY + 25];\n    collapsedRange = undefined;\n    hiddenRange = [translateY + 25, translateY + 100];\n  }\n\n  // Свойство expandable может измениться из-за высоты контента, в таком случае на всю высоту не разворачиваем\n  const shouldExpand = prevExpandable && modalState.expandable;\n  // Если модалка может открываться на весь экран, и новый сдвиг больше предыдущего, то откроем её на весь экран\n  if ((shouldExpand && translateY > (prevTranslateY ?? 100)) || modalState.settlingHeight === 100) {\n    translateY = 0;\n  }\n\n  // Если модалка уже раскрыта обновляем состояния\n  if (translateY === 0) {\n    expanded = true;\n    collapsed = false;\n  }\n\n  modalState.expandedRange = expandedRange;\n  modalState.collapsedRange = collapsedRange;\n  modalState.hiddenRange = hiddenRange;\n  modalState.translateY = translateY;\n  modalState.translateYFrom = translateYFrom;\n  modalState.collapsed = collapsed;\n  modalState.expanded = expanded;\n}\n\nfunction initCardModal(modalState: ModalsStateEntry) {\n  modalState.translateY = 0;\n}\n\nfunction calculateModalContentHeight(\n  element: HTMLElement,\n  isExpandable: ModalsStateEntry['expandable'],\n) {\n  if (!isExpandable) {\n    return element.scrollHeight;\n  }\n\n  /*\n   * В режиме expandable мы назначаем контейнеру контента высоту 100%, что не даёт\n   * получить реальную высоту контента.\n   * Поэтому мы пересчитываем высоту, временно устанавливая height: auto;\n   * */\n  const currentHeightStyle = element.style.height;\n  element.style.height = 'auto';\n\n  const elementHeight = element.scrollHeight;\n  element.style.height = currentHeightStyle;\n\n  return elementHeight;\n}\n"],"names":["React","classNames","clamp","withContext","withPlatform","withDOM","getNavId","rubber","warnOnce","ConfigProviderContext","FocusTrap","Touch","TouchRootContext","ModalRootContext","MODAL_PAGE_DEFAULT_PERCENT_HEIGHT","withModalManager","styles","warn","numberInRange","number","range","rangeTranslate","ModalRootTouchComponent","Component","constructor","props","state","touchDown","dragging","modalOpenedLog","maskElementRef","createRef","modalRootContext","updateModalHeight","registerModal","id","data","Object","assign","getModalState","onClose","onExit","isInsideModal","frameIds","viewportRef","maskAnimationFrame","undefined","restoreFocusTo","timeout","platform","document","window","getModals","Children","toArray","children","componentDidMount","addEventListener","componentWillUnmount","toggleDocumentScrolling","removeEventListener","componentDidUpdate","prevProps","exitingModal","closeModal","enteringModal","enteringState","onEnter","waitTransitionFinish","innerElement","style","transitionDelay","onEntered","delayEnter","animateTranslate","translateY","setMaskOpacity","activeModal","activeElement","focus","enabled","documentElement","classList","remove","add","checkPageContentHeight","modalState","type","modalElement","prevModalState","initPageModal","currentModalState","needAnimate","expandable","translateYFrom","requestAnimationFrame","noFocusToDialog","contains","setState","length","prevState","nextModalState","nextIsPage","prevIsPage","onExited","exitTranslate","isBack","includes","onTouchMove","e","onPageTouchMove","onCardTouchMove","event","shiftY","originalEvent","target","isY","current","preventDefault","stopPropagation","contentScrolled","collapsed","expanded","touchStartContentScrollTop","contentElement","scrollTop","touchMovePositive","headerElement","shiftYPercent","innerHeight","shiftYCurrent","touchShiftYPercent","translateYCurrent","offsetHeight","Math","max","onTouchEnd","onPageTouchEnd","onCardTouchEnd","startY","setStateCallback","shiftYEndPercent","expectTranslateY","duration","settlingHeight","expandedRange","collapsedRange","hiddenRange","preventClose","hidden","onScroll","contentScrollStopTimeout","clearTimeout","setTimeout","eventHandler","el","once","percent","frameId","cancelAnimationFrame","transform","forceOpacity","history","opacity","toString","render","modalOverlayTestId","Provider","value","className","host","configProvider","hasCustomPanelHeaderAfter","hasCustomPanelHeaderAfterSlot","touched","switching","onMove","onEnd","div","data-testid","mask","onClick","ref","viewport","map","Modal","modalId","_modalState","isPage","key","modal","autoFocus","restoreFocus","ModalRootTouch","initModal","initCardModal","process","env","NODE_ENV","bottomInset","contentElementHeight","calculateModalContentHeight","firstElementChild","bottomInsetHeight","contentHeight","prevTranslateY","prevExpandable","clientHeight","hasCollapsedState","Boolean","shiftHalf","visiblePart","headerHeight","height","parentElement","shouldExpand","element","isExpandable","scrollHeight","currentHeightStyle","elementHeight"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/ModalRoot/ModalRoot.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { ModalPopoutPortal } from '../AppRoot/ModalPopoutPortal';\nimport { ModalOverlay } from '../ModalOverlay/ModalOverlay';\nimport { ModalRootContext, ModalRootOverlayContext } from './ModalRootContext';\nimport type { ModalRootProps } from './types';\n\nconst warn = warnOnce('ModalRoot');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalRoot\n */\nexport const ModalRoot = ({\n  activeModal,\n  children,\n  modalOverlayTestId,\n  noFocusToDialog,\n  usePortal,\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n}: ModalRootProps): React.ReactNode => {\n  const contextValue = React.useMemo(\n    () => ({\n      isInsideModal: true,\n\n      // base props\n      activeModal,\n      modalOverlayTestId,\n      noFocusToDialog,\n\n      // callbacks\n      onOpen,\n      onOpened,\n      onClose,\n      onClosed,\n\n      // TODO [>=8] Удалить метод\n      updateModalHeight:\n        /* istanbul ignore next: deprecated */\n        process.env.NODE_ENV === 'development'\n          ? () => {\n              warn('Метод updateModalHeight() устарел и будет удалён в VKUI v8');\n            }\n          : noop,\n\n      // TODO [>=8] Удалить метод\n      registerModal:\n        /* istanbul ignore next: deprecated */\n        process.env.NODE_ENV === 'development'\n          ? () => {\n              warn('Метод registerModal() устарел и будет удалён в VKUI v8');\n            }\n          : noop,\n    }),\n    [activeModal, modalOverlayTestId, noFocusToDialog, onClose, onClosed, onOpen, onOpened],\n  );\n  const modalOverlayRef = React.useRef<HTMLDivElement>(null);\n  return (\n    <ModalPopoutPortal usePortal={usePortal}>\n      <ModalRootContext.Provider value={contextValue}>\n        <ModalRootOverlayContext.Provider value={modalOverlayRef}>\n          <ModalOverlay visible={typeof activeModal === 'string'} getRootRef={modalOverlayRef} />\n          {children}\n        </ModalRootOverlayContext.Provider>\n      </ModalRootContext.Provider>\n    </ModalPopoutPortal>\n  );\n};\n"],"names":["React","noop","warnOnce","ModalPopoutPortal","ModalOverlay","ModalRootContext","ModalRootOverlayContext","warn","ModalRoot","activeModal","children","modalOverlayTestId","noFocusToDialog","usePortal","onOpen","onOpened","onClose","onClosed","contextValue","useMemo","isInsideModal","updateModalHeight","process","env","NODE_ENV","registerModal","modalOverlayRef","useRef","Provider","value","visible","getRootRef"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,IAAI,QAAQ,kBAAkB;AACvC,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,iBAAiB,QAAQ,kCAA+B;AACjE,SAASC,YAAY,QAAQ,kCAA+B;AAC5D,SAASC,gBAAgB,EAAEC,uBAAuB,QAAQ,wBAAqB;AAG/E,MAAMC,OAAOL,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMM,YAAY,CAAC,EACxBC,WAAW,EACXC,QAAQ,EACRC,kBAAkB,EAClBC,eAAe,EACfC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACO;IACf,MAAMC,eAAelB,MAAMmB,OAAO,CAChC,IAAO,CAAA;YACLC,eAAe;YAEf,aAAa;YACbX;YACAE;YACAC;YAEA,YAAY;YACZE;YACAC;YACAC;YACAC;YAEA,2BAA2B;YAC3BI,mBACE,oCAAoC,GACpCC,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACrB;gBACEjB,KAAK;YACP,IACAN;YAEN,2BAA2B;YAC3BwB,eACE,oCAAoC,GACpCH,QAAQC,GAAG,CAACC,QAAQ,KAAK,gBACrB;gBACEjB,KAAK;YACP,IACAN;QACR,CAAA,GACA;QAACQ;QAAaE;QAAoBC;QAAiBI;QAASC;QAAUH;QAAQC;KAAS;IAEzF,MAAMW,kBAAkB1B,MAAM2B,MAAM,CAAiB;IACrD,qBACE,KAACxB;QAAkBU,WAAWA;kBAC5B,cAAA,KAACR,iBAAiBuB,QAAQ;YAACC,OAAOX;sBAChC,cAAA,MAACZ,wBAAwBsB,QAAQ;gBAACC,OAAOH;;kCACvC,KAACtB;wBAAa0B,SAAS,OAAOrB,gBAAgB;wBAAUsB,YAAYL;;oBACnEhB;;;;;AAKX,EAAE"}

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

@@ -1,44 +1,17 @@
-import * as React from "react";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
-export const ModalRootContext = /*#__PURE__*/ React.createContext({
-    updateModalHeight: ()=>undefined,
-    registerModal: ()=>undefined,
+import { createContext } from "react";
+import { noop } from "@vkontakte/vkjs";
+/**
+ * Сохраняем `ref` компонента `ModalOverlay` из `ModalRoot` в контекст, чтобы можно было пробросить
+ * его до `ModalPage` и `ModalCard`.
+ *
+ * @private
+ */ export const ModalRootOverlayContext = /*#__PURE__*/ createContext({
+    current: null
+});
+export const ModalRootContext = /*#__PURE__*/ createContext({
+    updateModalHeight: noop,
+    registerModal: noop,
     isInsideModal: false
 });
-/**
- * All referenced elements must be static
- */ export function useModalRegistry(id, type) {
-    const modalContext = React.useContext(ModalRootContext);
-    const elements = React.useRef({}).current;
-    useIsomorphicLayoutEffect(()=>{
-        if (id !== undefined) {
-            modalContext.registerModal({
-                ...elements,
-                type,
-                id
-            });
-            // unset refs on  unmount to prevent leak
-            const reset = Object.keys(elements).reduce((acc, k)=>({
-                    ...acc,
-                    [k]: null
-                }), {
-                type,
-                id
-            });
-            return ()=>modalContext.registerModal(reset);
-        }
-        return undefined;
-    }, []);
-    const refs = React.useRef({
-        modalElement: (e)=>elements.modalElement = e,
-        innerElement: (e)=>elements.innerElement = e,
-        headerElement: (e)=>elements.headerElement = e,
-        contentElement: (e)=>elements.contentElement = e,
-        bottomInset: (e)=>elements.bottomInset = e
-    }).current;
-    return {
-        refs
-    };
-}
 
 //# sourceMappingURL=ModalRootContext.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalRoot/ModalRootContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { ModalElements, ModalsStateEntry, ModalType } from './types';\n\nexport type ModalRegistryEntry = ModalElements & Required<Pick<ModalsStateEntry, 'type' | 'id'>>;\ntype ModalRefs = { [k in keyof ModalElements]: (e: ModalElements[k]) => void };\n\nexport interface ModalRootContextInterface {\n  updateModalHeight: VoidFunction;\n  registerModal: (data: ModalRegistryEntry) => void;\n  onClose?: VoidFunction;\n  isInsideModal: boolean;\n}\n\nexport const ModalRootContext: React.Context<ModalRootContextInterface> =\n  React.createContext<ModalRootContextInterface>({\n    updateModalHeight: () => undefined,\n    registerModal: () => undefined,\n    isInsideModal: false,\n  });\n\n/**\n * All referenced elements must be static\n */\nexport function useModalRegistry(\n  id: string | undefined,\n  type: ModalType,\n): {\n  refs: Required<ModalRefs>;\n} {\n  const modalContext = React.useContext(ModalRootContext);\n  const elements = React.useRef<ModalElements>({}).current;\n  useIsomorphicLayoutEffect(() => {\n    if (id !== undefined) {\n      modalContext.registerModal({ ...elements, type, id });\n      // unset refs on  unmount to prevent leak\n      const reset = Object.keys(elements).reduce<ModalRegistryEntry>(\n        (acc, k) => ({ ...acc, [k]: null }),\n        { type, id },\n      );\n      return () => modalContext.registerModal(reset);\n    }\n    return undefined;\n  }, []);\n\n  const refs = React.useRef<Required<ModalRefs>>({\n    modalElement: (e) => (elements.modalElement = e),\n    innerElement: (e) => (elements.innerElement = e),\n    headerElement: (e) => (elements.headerElement = e),\n    contentElement: (e) => (elements.contentElement = e),\n    bottomInset: (e) => (elements.bottomInset = e),\n  }).current;\n  return { refs };\n}\n"],"names":["React","useIsomorphicLayoutEffect","ModalRootContext","createContext","updateModalHeight","undefined","registerModal","isInsideModal","useModalRegistry","id","type","modalContext","useContext","elements","useRef","current","reset","Object","keys","reduce","acc","k","refs","modalElement","e","innerElement","headerElement","contentElement","bottomInset"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yBAAyB,QAAQ,yCAAsC;AAahF,OAAO,MAAMC,iCACXF,MAAMG,aAAa,CAA4B;IAC7CC,mBAAmB,IAAMC;IACzBC,eAAe,IAAMD;IACrBE,eAAe;AACjB,GAAG;AAEL;;CAEC,GACD,OAAO,SAASC,iBACdC,EAAsB,EACtBC,IAAe;IAIf,MAAMC,eAAeX,MAAMY,UAAU,CAACV;IACtC,MAAMW,WAAWb,MAAMc,MAAM,CAAgB,CAAC,GAAGC,OAAO;IACxDd,0BAA0B;QACxB,IAAIQ,OAAOJ,WAAW;YACpBM,aAAaL,aAAa,CAAC;gBAAE,GAAGO,QAAQ;gBAAEH;gBAAMD;YAAG;YACnD,yCAAyC;YACzC,MAAMO,QAAQC,OAAOC,IAAI,CAACL,UAAUM,MAAM,CACxC,CAACC,KAAKC,IAAO,CAAA;oBAAE,GAAGD,GAAG;oBAAE,CAACC,EAAE,EAAE;gBAAK,CAAA,GACjC;gBAAEX;gBAAMD;YAAG;YAEb,OAAO,IAAME,aAAaL,aAAa,CAACU;QAC1C;QACA,OAAOX;IACT,GAAG,EAAE;IAEL,MAAMiB,OAAOtB,MAAMc,MAAM,CAAsB;QAC7CS,cAAc,CAACC,IAAOX,SAASU,YAAY,GAAGC;QAC9CC,cAAc,CAACD,IAAOX,SAASY,YAAY,GAAGD;QAC9CE,eAAe,CAACF,IAAOX,SAASa,aAAa,GAAGF;QAChDG,gBAAgB,CAACH,IAAOX,SAASc,cAAc,GAAGH;QAClDI,aAAa,CAACJ,IAAOX,SAASe,WAAW,GAAGJ;IAC9C,GAAGT,OAAO;IACV,OAAO;QAAEO;IAAK;AAChB"}
+{"version":3,"sources":["../../../../src/components/ModalRoot/ModalRootContext.tsx"],"sourcesContent":["import { createContext, type RefObject } from 'react';\nimport { noop } from '@vkontakte/vkjs';\nimport type { ModalRootContextInterface } from './types';\n\n/**\n * Сохраняем `ref` компонента `ModalOverlay` из `ModalRoot` в контекст, чтобы можно было пробросить\n * его до `ModalPage` и `ModalCard`.\n *\n * @private\n */\nexport const ModalRootOverlayContext = createContext<RefObject<HTMLDivElement>>({ current: null });\n\nexport const ModalRootContext = createContext<ModalRootContextInterface>({\n  updateModalHeight: noop,\n  registerModal: noop,\n  isInsideModal: false,\n});\n"],"names":["createContext","noop","ModalRootOverlayContext","current","ModalRootContext","updateModalHeight","registerModal","isInsideModal"],"mappings":"AAAA,SAASA,aAAa,QAAwB,QAAQ;AACtD,SAASC,IAAI,QAAQ,kBAAkB;AAGvC;;;;;CAKC,GACD,OAAO,MAAMC,wCAA0BF,cAAyC;IAAEG,SAAS;AAAK,GAAG;AAEnG,OAAO,MAAMC,iCAAmBJ,cAAyC;IACvEK,mBAAmBJ;IACnBK,eAAeL;IACfM,eAAe;AACjB,GAAG"}

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

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from "react";
+import { setRef } from "../../../lib/utils.js";
+import { ModalRootOverlayContext } from "../ModalRootContext.js";
+import styles from "./VisuallyHiddenModalOverlay.module.css";
+/**
+ * `ModalRoot` выставляет общий `ModalOverlay` для всех потомков, и чтобы не нарушить логику
+ * в `ModalPage` и `ModalCard`, в них прокидывается данный компонент, который визуально не виден,
+ * но при этом на нём сохраняется возможность взаимодействия.
+ *
+ * В `getRooRef` отдаёт ссылку на DOM общего `ModalOverlay`.
+ *
+ * @private
+ */ export const VisuallyHiddenModalOverlay = ({ visible: visibleExcluded, position: positionExcluded, getRootRef, ...restProps })=>{
+    const ref = useContext(ModalRootOverlayContext);
+    return /*#__PURE__*/ _jsx("div", {
+        ...restProps,
+        "aria-hidden": "true",
+        className: styles.host,
+        ref: function handleCurrentRefForForwardContextRef() {
+            setRef(ref.current, getRootRef);
+        }
+    });
+};
+
+//# sourceMappingURL=VisuallyHiddenModalOverlay.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/components/ModalRoot/VisuallyHiddenModalOverlay/VisuallyHiddenModalOverlay.tsx"],"sourcesContent":["'use client';\n\nimport { useContext } from 'react';\nimport { setRef } from '../../../lib/utils';\nimport type { ModalOverlayProps } from '../../ModalOverlay/ModalOverlay';\nimport { ModalRootOverlayContext } from '../ModalRootContext';\nimport styles from './VisuallyHiddenModalOverlay.module.css';\n\nexport type VisuallyHiddenModalOverlayProps = ModalOverlayProps;\n\n/**\n * `ModalRoot` выставляет общий `ModalOverlay` для всех потомков, и чтобы не нарушить логику\n * в `ModalPage` и `ModalCard`, в них прокидывается данный компонент, который визуально не виден,\n * но при этом на нём сохраняется возможность взаимодействия.\n *\n * В `getRooRef` отдаёт ссылку на DOM общего `ModalOverlay`.\n *\n * @private\n */\nexport const VisuallyHiddenModalOverlay = ({\n  visible: visibleExcluded,\n  position: positionExcluded,\n  getRootRef,\n  ...restProps\n}: VisuallyHiddenModalOverlayProps) => {\n  const ref = useContext(ModalRootOverlayContext);\n  return (\n    <div\n      {...restProps}\n      aria-hidden=\"true\"\n      className={styles.host}\n      ref={function handleCurrentRefForForwardContextRef() {\n        setRef(ref.current, getRootRef);\n      }}\n    />\n  );\n};\n"],"names":["useContext","setRef","ModalRootOverlayContext","styles","VisuallyHiddenModalOverlay","visible","visibleExcluded","position","positionExcluded","getRootRef","restProps","ref","div","aria-hidden","className","host","handleCurrentRefForForwardContextRef","current"],"mappings":"AAAA;;AAEA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,MAAM,QAAQ,wBAAqB;AAE5C,SAASC,uBAAuB,QAAQ,yBAAsB;AAC9D,OAAOC,YAAY,0CAA0C;AAI7D;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CAAC,EACzCC,SAASC,eAAe,EACxBC,UAAUC,gBAAgB,EAC1BC,UAAU,EACV,GAAGC,WAC6B;IAChC,MAAMC,MAAMX,WAAWE;IACvB,qBACE,KAACU;QACE,GAAGF,SAAS;QACbG,eAAY;QACZC,WAAWX,OAAOY,IAAI;QACtBJ,KAAK,SAASK;YACZf,OAAOU,IAAIM,OAAO,EAAER;QACtB;;AAGN,EAAE"}

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

@@ -0,0 +1,8 @@
+.host {
+  position: absolute;
+  inset: 0;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  -webkit-tap-highlight-color: transparent;
+}

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

@@ -1,3 +1,3 @@
-export { };
+/** TODO [>=8] Удалить deprecated типы */ export { };
 
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalRoot/types.ts"],"sourcesContent":["import type { DOMContextInterface } from '../../lib/dom';\nimport type { HasPlatform } from '../../types';\nimport type { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';\n\nexport type ModalType = 'page' | 'card';\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  bottomInset?: 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  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   * Отключает возможность закрыть модалку стандартными способами\n   */\n  preventClose?: boolean;\n}\n\nexport interface ModalRootProps {\n  activeModal?: string | null;\n  children: React.ReactElement | Iterable<React.ReactElement>;\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  /**\n   * `data-testid` для маски\n   */\n  modalOverlayTestId?: string;\n\n  /**\n   * Отключает фокус на контейнер диалогового окна при открытии.\n   */\n  noFocusToDialog?: boolean;\n}\n\nexport interface ModalRootWithDOMProps extends HasPlatform, ModalRootProps, DOMContextInterface {\n  /**\n   * @ignore\n   */\n  configProvider?: ConfigProviderContextInterface;\n}\n"],"names":[],"mappings":"AA6GA,WAKC"}
+{"version":3,"sources":["../../../../src/components/ModalRoot/types.ts"],"sourcesContent":["/** TODO [>=8] Удалить deprecated типы */\nimport type { AppRootPortalProps } from '../AppRoot/AppRootPortal';\n\n/**\n * @deprecated будет удалён в **VKUI v8**\n */\nexport type ModalType = 'page' | 'card';\n\n/**\n * @deprecated будет удалён в **VKUI v8**\n */\nexport type TranslateRange = [number, number];\n\n/**\n * @deprecated будет удалён в **VKUI v8**\n */\nexport interface ModalElements {\n  modalElement?: HTMLElement | null;\n  innerElement?: HTMLElement | null;\n  headerElement?: HTMLElement | null;\n  contentElement?: HTMLElement | null;\n  bottomInset?: HTMLElement | null;\n}\n\n/**\n * @deprecated будет удалён в **VKUI v8**\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  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   * Отключает возможность закрыть модалку стандартными способами\n   */\n  preventClose?: boolean;\n}\n\nexport type ModalRootActiveModal = string | null;\n\nexport type ModalRootCallbackFunction = (modalId: string) => void;\n\ntype ModalRootBaseProps = {\n  activeModal?: ModalRootActiveModal;\n\n  /**\n   * `data-testid` для маски\n   */\n  modalOverlayTestId?: string;\n\n  /**\n   * Отключает фокус на контейнер диалогового окна при открытии.\n   */\n  noFocusToDialog?: boolean;\n\n  usePortal?: AppRootPortalProps['usePortal'];\n\n  /**\n   * Будет вызвано при начале открытия активной модалки с её id\n   */\n  onOpen?: ModalRootCallbackFunction;\n\n  /**\n   * Будет вызвано при окончательном открытии активной модалки с её id\n   */\n  onOpened?: ModalRootCallbackFunction;\n\n  /**\n   * Будет вызвано при начале закрытия активной модалки с её id\n   */\n  onClose?: ModalRootCallbackFunction;\n\n  /**\n   * Будет вызвано при окончательном закрытии активной модалки с её id\n   */\n  onClosed?: ModalRootCallbackFunction;\n};\n\nexport interface ModalRootProps extends ModalRootBaseProps {\n  children: React.ReactElement | Iterable<React.ReactElement>;\n}\n\ntype ModalRootContextBaseInterface = {\n  /**\n   * Обозначает, в контексте ли модального окна мы сейчас.\n   */\n  isInsideModal: boolean;\n\n  /**\n   * С **VKUI v7** задача с обновлением высоты контента при `dynamicContentHeight` решается через CSS.\n   *\n   * @deprecated будет удалён в **VKUI v8**\n   */\n  updateModalHeight: VoidFunction;\n\n  /**\n   * С **VKUI v7** регистрация модальных окон больше не требуется.\n   *\n   * @deprecated будет удалён в **VKUI v8**\n   */\n  registerModal: (data: ModalElements & Required<Pick<ModalsStateEntry, 'type' | 'id'>>) => void;\n};\n\nexport interface ModalRootContextInterface\n  extends ModalRootContextBaseInterface,\n    ModalRootBaseProps {}\n\nexport interface UseModalRootContext extends ModalRootContextBaseInterface {\n  onClose?: VoidFunction;\n}\n"],"names":[],"mappings":"AAAA,uCAAuC,GAwJvC,WAEC"}

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

@@ -1,206 +1,48 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { isFunction, noop } from "@vkontakte/vkjs";
-import { getNavId } from "../../lib/getNavId.js";
+import { useContext, useState } from "react";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect.js";
-import { warnOnce } from "../../lib/warnOnce.js";
-function getModals(children) {
-    return React.Children.toArray(children);
-}
-const warn = warnOnce('ModalRoot');
-export function modalTransitionReducer(state, action) {
-    if (action.type === 'setActive' && action.id !== state.activeModal) {
-        const nextModal = action.id;
-        // preserve exiting modal if switching mid-transition
-        const prevModal = state.exitingModal || state.activeModal;
-        let history = state.history ? [
-            ...state.history
-        ] : [];
-        const isBack = Boolean(nextModal && history.includes(nextModal));
-        if (nextModal === null) {
-            history = [];
-        } else if (isBack) {
-            history = history.splice(0, history.indexOf(nextModal) + 1);
-        } else {
-            history.push(nextModal);
+import { ModalOverlay } from "../ModalOverlay/ModalOverlay.js";
+import { ModalRootContext } from "./ModalRootContext.js";
+import { VisuallyHiddenModalOverlay } from "./VisuallyHiddenModalOverlay/VisuallyHiddenModalOverlay.js";
+export const useModalManager = ({ id, open, keepMounted, modalOverlayTestId, noFocusToDialog, onOpen, onOpened, onClose, onClosed })=>{
+    const context = useContext(ModalRootContext);
+    const opened = context.isInsideModal ? context.activeModal === id : open;
+    const [unmounted, setUnmounted] = useState(keepMounted ? false : !opened);
+    useIsomorphicLayoutEffect(function unsetUnmounted() {
+        if (!keepMounted && opened) {
+            setUnmounted((prev)=>prev ? false : prev);
         }
+    }, [
+        opened,
+        keepMounted
+    ]);
+    if (unmounted) {
         return {
-            activeModal: nextModal,
-            // not entering yet
-            enteringModal: null,
-            exitingModal: prevModal,
-            history,
-            isBack
-        };
-    }
-    if (action.type === 'entered' && action.id === state.enteringModal) {
-        return {
-            ...state,
-            enteringModal: null
-        };
-    }
-    if (action.type === 'exited' && action.id === state.exitingModal) {
-        return {
-            ...state,
-            exitingModal: null
-        };
-    }
-    if (action.type === 'inited' && action.id === state.activeModal) {
-        return {
-            ...state,
-            enteringModal: action.id
+            mounted: false
         };
     }
-    return state;
-}
-/**
- * Реализует переход модалок. При смене activeModal m1 -> m2:
- * 1. activeModal: m1, exitingModal: null, enteringModal: null, триггер перехода
- * 2. activeModal: m2, exitingModal: m1, enteringModal: null, рендерим m2 чтобы прошел init, начинаем анимацию выхода
- * одновременный переход между ModalPage:
- *   3a. activeModal: m2, exitingModal: m1, enteringModal: m2
- *   4a. exitingModal и enteringModal переходят в null в порядке завершения анимации
- * ИЛИ дожидаемся скрытия ModalCard
- *   3b. activeModal: m2, exitingModal: null, enteringModal: m2
- *   4b. enteringModal переходит в null после завершения анимации
- * 5. activeModal: m2, exitingModal: null, enteringModal: null, переход закончен
- */ export function useModalManager(activeModal, children, onOpen = noop, onOpened = noop, onClose = noop, onClosed = noop, initModal = noop) {
-    const modalsState = React.useRef({}).current;
-    getModals(children).forEach((Modal)=>{
-        const modalProps = Modal.props;
-        const id = getNavId(modalProps, warn);
-        const state = id !== undefined && modalsState[id] || {
-            id: id ?? null
-        };
-        state.onOpen = Modal.props.onOpen;
-        state.onOpened = Modal.props.onOpened;
-        state.onClose = Modal.props.onClose;
-        state.onClosed = Modal.props.onClosed;
-        state.preventClose = Modal.props.preventClose;
-        // ModalPage props
-        if (typeof modalProps.settlingHeight === 'number') {
-            state.settlingHeight = modalProps.settlingHeight;
-        }
-        if (state.id !== null) {
-            modalsState[state.id] = state;
-        }
-    });
-    const isMissing = activeModal && !modalsState[activeModal];
-    const safeActiveModal = isMissing ? null : activeModal;
-    const [transitionState, dispatchTransition] = React.useReducer(modalTransitionReducer, {
-        activeModal: safeActiveModal,
-        enteringModal: null,
-        exitingModal: null,
-        history: safeActiveModal ? [
-            safeActiveModal
-        ] : [],
-        isBack: false
-    });
-    // Map props to state, render activeModal for init
-    useIsomorphicLayoutEffect(()=>{
-        // ignore non-existent activeModal
-        if (process.env.NODE_ENV === 'development' && isMissing) {
-            warn(`Переход невозможен - модальное окно (страница) ${activeModal} не существует`, 'error');
-        }
-        dispatchTransition({
-            type: 'setActive',
-            id: safeActiveModal ?? null
-        });
-    }, [
-        activeModal
-    ]);
-    // Init activeModal & set enteringModal
-    useIsomorphicLayoutEffect(()=>{
-        if (transitionState.activeModal) {
-            initModal(modalsState[transitionState.activeModal]);
-            dispatchTransition({
-                type: 'inited',
-                id: transitionState.activeModal
-            });
-        }
-    }, [
-        transitionState.activeModal
-    ]);
-    const isCard = (id)=>id != null && modalsState[id]?.type === 'card';
-    const onEntered = React.useCallback((id)=>{
-        if (id) {
-            const modalState = modalsState[id];
-            if (isFunction(modalState.onOpened)) {
-                modalState.onOpened();
-            } else if (isFunction(onOpened)) {
-                onOpened(id);
-            }
-        }
-        dispatchTransition({
-            type: 'entered',
-            id
-        });
-    }, [
-        modalsState,
-        onOpened
-    ]);
-    const onExited = React.useCallback((id)=>{
-        if (id) {
-            const modalState = modalsState[id];
-            if (isFunction(modalState.onClosed)) {
-                modalState.onClosed();
-            } else if (isFunction(onClosed)) {
-                onClosed(id);
-            }
-        }
-        dispatchTransition({
-            type: 'exited',
-            id
-        });
-    }, [
-        modalsState,
-        onClosed
-    ]);
-    const delayEnter = Boolean(transitionState.exitingModal && (isCard(activeModal) || isCard(transitionState.exitingModal)));
-    const getModalState = React.useCallback((id)=>id ? modalsState[id] : undefined, [
-        modalsState
-    ]);
-    function onEnter() {
-        const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];
-        if (modalState) {
-            if (isFunction(modalState.onOpen)) {
-                modalState.onOpen();
-            } else if (isFunction(onOpen) && modalState.id) {
-                onOpen(modalState.id);
+    return {
+        mounted: true,
+        open: opened,
+        noFocusToDialog: noFocusToDialog || context.noFocusToDialog,
+        modalOverlayTestId: modalOverlayTestId || context.modalOverlayTestId,
+        ModalOverlay: context.isInsideModal ? VisuallyHiddenModalOverlay : ModalOverlay,
+        onOpen: onOpen || getContextCallback(id, context.onOpen),
+        onOpened: onOpened || getContextCallback(id, context.onOpened),
+        onClose: onClose || getContextCallback(id, context.onClose),
+        onClosed: function handleClosed(...args) {
+            if (!keepMounted) {
+                setUnmounted(true);
             }
-        }
-    }
-    function onExit() {
-        const modalState = transitionState.activeModal && modalsState[transitionState.activeModal];
-        if (modalState && !modalState.preventClose) {
-            if (isFunction(modalState.onClose)) {
-                modalState.onClose();
-            } else if (isFunction(onClose) && modalState.id) {
-                onClose(modalState.id);
+            if (onClosed) {
+                onClosed(...args);
+            } else {
+                context.onClosed?.(id);
             }
         }
-    }
-    return {
-        onEnter,
-        onEntered,
-        onExit,
-        onExited,
-        ...transitionState,
-        delayEnter,
-        getModalState
-    };
-}
-export function withModalManager(initModal = noop) {
-    return function(Wrapped) {
-        return function WithModalManager(props) {
-            const transitionManager = useModalManager(props.activeModal, props.children, props.onOpen, props.onOpened, props.onClose, props.onClosed, initModal);
-            return /*#__PURE__*/ _jsx(Wrapped, {
-                ...props,
-                ...transitionManager
-            });
-        };
     };
+};
+function getContextCallback(id, fn) {
+    return fn ? ()=>fn(id) : undefined;
 }
 
 //# sourceMappingURL=useModalManager.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalRoot/useModalManager.tsx"],"sourcesContent":["'use client';\n\nimport * 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 type { HasChildren } from '../../types';\nimport type { ModalsState, ModalsStateEntry } 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.preventClose = Modal.props.preventClose;\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) => id != null && modalsState[id]?.type === '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 && !modalState.preventClose) {\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","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","preventClose","settlingHeight","isMissing","safeActiveModal","transitionState","dispatchTransition","useReducer","process","env","NODE_ENV","isCard","onEntered","useCallback","modalState","onExited","delayEnter","getModalState","onEnter","onExit","withModalManager","Wrapped","WithModalManager","transitionManager"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,IAAI,QAAQ,kBAAkB;AACnD,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,yBAAyB,QAAQ,yCAAsC;AAChF,SAASC,QAAQ,QAAQ,wBAAqB;AAqB9C,SAASC,UAAUC,QAA6C;IAC9D,OAAOP,MAAMQ,QAAQ,CAACC,OAAO,CAACF;AAChC;AAEA,MAAMG,OAAOL,SAAS;AAEtB,OAAO,SAASM,uBACdC,KAA2B,EAC3BC,MAGC;IAED,IAAIA,OAAOC,IAAI,KAAK,eAAeD,OAAOE,EAAE,KAAKH,MAAMI,WAAW,EAAE;QAClE,MAAMC,YAAYJ,OAAOE,EAAE;QAC3B,qDAAqD;QACrD,MAAMG,YAAYN,MAAMO,YAAY,IAAIP,MAAMI,WAAW;QACzD,IAAII,UAAUR,MAAMQ,OAAO,GAAG;eAAIR,MAAMQ,OAAO;SAAC,GAAG,EAAE;QACrD,MAAMC,SAASC,QAAQL,aAAaG,QAAQG,QAAQ,CAACN;QAErD,IAAIA,cAAc,MAAM;YACtBG,UAAU,EAAE;QACd,OAAO,IAAIC,QAAQ;YACjBD,UAAUA,QAAQI,MAAM,CAAC,GAAGJ,QAAQK,OAAO,CAACR,aAAa;QAC3D,OAAO;YACLG,QAAQM,IAAI,CAACT;QACf;QAEA,OAAO;YACLD,aAAaC;YACb,mBAAmB;YACnBU,eAAe;YACfR,cAAcD;YACdE;YACAC;QACF;IACF;IACA,IAAIR,OAAOC,IAAI,KAAK,aAAaD,OAAOE,EAAE,KAAKH,MAAMe,aAAa,EAAE;QAClE,OAAO;YAAE,GAAGf,KAAK;YAAEe,eAAe;QAAK;IACzC;IACA,IAAId,OAAOC,IAAI,KAAK,YAAYD,OAAOE,EAAE,KAAKH,MAAMO,YAAY,EAAE;QAChE,OAAO;YAAE,GAAGP,KAAK;YAAEO,cAAc;QAAK;IACxC;IACA,IAAIN,OAAOC,IAAI,KAAK,YAAYD,OAAOE,EAAE,KAAKH,MAAMI,WAAW,EAAE;QAC/D,OAAO;YAAE,GAAGJ,KAAK;YAAEe,eAAed,OAAOE,EAAE;QAAC;IAC9C;IACA,OAAOH;AACT;AAEA;;;;;;;;;;;CAWC,GACD,OAAO,SAASgB,gBACdZ,WAAsC,EACtCT,QAA6C,EAC7CsB,SAA+B3B,IAAI,EACnC4B,WAAiC5B,IAAI,EACrC6B,UAAgC7B,IAAI,EACpC8B,WAAiC9B,IAAI,EACrC+B,YAA+C/B,IAAI;IAEnD,MAAMgC,cAAclC,MAAMmC,MAAM,CAAc,CAAC,GAAGC,OAAO;IACzD9B,UAAUC,UAAU8B,OAAO,CAAC,CAACC;QAC3B,MAAMC,aAAaD,MAAME,KAAK;QAC9B,MAAMzB,KAAKZ,SAASoC,YAAY7B;QAChC,MAAME,QAA0B,AAACG,OAAO0B,aAAaP,WAAW,CAACnB,GAAG,IAAK;YACvEA,IAAIA,MAAM;QACZ;QAEAH,MAAMiB,MAAM,GAAGS,MAAME,KAAK,CAACX,MAAM;QACjCjB,MAAMkB,QAAQ,GAAGQ,MAAME,KAAK,CAACV,QAAQ;QACrClB,MAAMmB,OAAO,GAAGO,MAAME,KAAK,CAACT,OAAO;QACnCnB,MAAMoB,QAAQ,GAAGM,MAAME,KAAK,CAACR,QAAQ;QACrCpB,MAAM8B,YAAY,GAAGJ,MAAME,KAAK,CAACE,YAAY;QAC7C,kBAAkB;QAClB,IAAI,OAAOH,WAAWI,cAAc,KAAK,UAAU;YACjD/B,MAAM+B,cAAc,GAAGJ,WAAWI,cAAc;QAClD;QAEA,IAAI/B,MAAMG,EAAE,KAAK,MAAM;YACrBmB,WAAW,CAACtB,MAAMG,EAAE,CAAC,GAAGH;QAC1B;IACF;IAEA,MAAMgC,YAAY5B,eAAe,CAACkB,WAAW,CAAClB,YAAY;IAC1D,MAAM6B,kBAAkBD,YAAY,OAAO5B;IAC3C,MAAM,CAAC8B,iBAAiBC,mBAAmB,GAAG/C,MAAMgD,UAAU,CAACrC,wBAAwB;QACrFK,aAAa6B;QACblB,eAAe;QACfR,cAAc;QACdC,SAASyB,kBAAkB;YAACA;SAAgB,GAAG,EAAE;QACjDxB,QAAQ;IACV;IAEA,kDAAkD;IAClDjB,0BAA0B;QACxB,kCAAkC;QAClC,IAAI6C,QAAQC,GAAG,CAACC,QAAQ,KAAK,iBAAiBP,WAAW;YACvDlC,KAAK,CAAC,+CAA+C,EAAEM,YAAY,cAAc,CAAC,EAAE;QACtF;QACA+B,mBAAmB;YAAEjC,MAAM;YAAaC,IAAI8B,mBAAmB;QAAK;IACtE,GAAG;QAAC7B;KAAY;IAEhB,uCAAuC;IACvCZ,0BAA0B;QACxB,IAAI0C,gBAAgB9B,WAAW,EAAE;YAC/BiB,UAAUC,WAAW,CAACY,gBAAgB9B,WAAW,CAAC;YAClD+B,mBAAmB;gBAAEjC,MAAM;gBAAUC,IAAI+B,gBAAgB9B,WAAW;YAAC;QACvE;IACF,GAAG;QAAC8B,gBAAgB9B,WAAW;KAAC;IAEhC,MAAMoC,SAAS,CAACrC,KAAkCA,MAAM,QAAQmB,WAAW,CAACnB,GAAG,EAAED,SAAS;IAC1F,MAAMuC,YAAYrD,MAAMsD,WAAW,CACjC,CAACvC;QACC,IAAIA,IAAI;YACN,MAAMwC,aAAarB,WAAW,CAACnB,GAAG;YAElC,IAAId,WAAWsD,WAAWzB,QAAQ,GAAG;gBACnCyB,WAAWzB,QAAQ;YACrB,OAAO,IAAI7B,WAAW6B,WAAW;gBAC/BA,SAASf;YACX;QACF;QAEAgC,mBAAmB;YAAEjC,MAAM;YAAWC;QAAG;IAC3C,GACA;QAACmB;QAAaJ;KAAS;IAEzB,MAAM0B,WAAWxD,MAAMsD,WAAW,CAChC,CAACvC;QACC,IAAIA,IAAI;YACN,MAAMwC,aAAarB,WAAW,CAACnB,GAAG;YAElC,IAAId,WAAWsD,WAAWvB,QAAQ,GAAG;gBACnCuB,WAAWvB,QAAQ;YACrB,OAAO,IAAI/B,WAAW+B,WAAW;gBAC/BA,SAASjB;YACX;QACF;QAEAgC,mBAAmB;YAAEjC,MAAM;YAAUC;QAAG;IAC1C,GACA;QAACmB;QAAaF;KAAS;IAEzB,MAAMyB,aAAanC,QACjBwB,gBAAgB3B,YAAY,IAAKiC,CAAAA,OAAOpC,gBAAgBoC,OAAON,gBAAgB3B,YAAY,CAAA;IAE7F,MAAMuC,gBAAgB1D,MAAMsD,WAAW,CACrC,CAACvC,KAAmCA,KAAKmB,WAAW,CAACnB,GAAG,GAAG0B,WAC3D;QAACP;KAAY;IAGf,SAASyB;QACP,MAAMJ,aAAaT,gBAAgB9B,WAAW,IAAIkB,WAAW,CAACY,gBAAgB9B,WAAW,CAAC;QAC1F,IAAIuC,YAAY;YACd,IAAItD,WAAWsD,WAAW1B,MAAM,GAAG;gBACjC0B,WAAW1B,MAAM;YACnB,OAAO,IAAI5B,WAAW4B,WAAW0B,WAAWxC,EAAE,EAAE;gBAC9Cc,OAAO0B,WAAWxC,EAAE;YACtB;QACF;IACF;IAEA,SAAS6C;QACP,MAAML,aAAaT,gBAAgB9B,WAAW,IAAIkB,WAAW,CAACY,gBAAgB9B,WAAW,CAAC;QAC1F,IAAIuC,cAAc,CAACA,WAAWb,YAAY,EAAE;YAC1C,IAAIzC,WAAWsD,WAAWxB,OAAO,GAAG;gBAClCwB,WAAWxB,OAAO;YACpB,OAAO,IAAI9B,WAAW8B,YAAYwB,WAAWxC,EAAE,EAAE;gBAC/CgB,QAAQwB,WAAWxC,EAAE;YACvB;QACF;IACF;IAEA,OAAO;QACL4C;QACAN;QACAO;QACAJ;QACA,GAAGV,eAAe;QAClBW;QACAC;IACF;AACF;AAOA,OAAO,SAASG,iBAAiB5B,YAA2C/B,IAAI;IAC9E,OAAO,SACL4D,OAAmC;QAEnC,OAAO,SAASC,iBAAiBvB,KAAK;YACpC,MAAMwB,oBAAoBpC,gBACxBY,MAAMxB,WAAW,EACjBwB,MAAMjC,QAAQ,EACd,AAACiC,MAAcX,MAAM,EACrB,AAACW,MAAcV,QAAQ,EACvB,AAACU,MAAcT,OAAO,EACtB,AAACS,MAAcR,QAAQ,EACvBC;YAEF,qBAAO,KAAC6B;gBAAS,GAAItB,KAAK;gBAAW,GAAGwB,iBAAiB;;QAC3D;IACF;AACF"}
+{"version":3,"sources":["../../../../src/components/ModalRoot/useModalManager.tsx"],"sourcesContent":["import { useContext, useState } from 'react';\nimport { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';\nimport type { AnyFunction } from '../../types';\nimport { ModalOverlay, type ModalOverlayProps } from '../ModalOverlay/ModalOverlay';\nimport { ModalRootContext } from './ModalRootContext';\nimport { VisuallyHiddenModalOverlay } from './VisuallyHiddenModalOverlay/VisuallyHiddenModalOverlay';\nimport type { ModalRootCallbackFunction } from './types';\n\nexport interface UseModalManager {\n  id: string;\n  open: boolean;\n  keepMounted: boolean;\n  modalOverlayTestId?: string;\n  noFocusToDialog?: boolean;\n  onOpen?: AnyFunction;\n  onOpened?: AnyFunction;\n  onClose?: AnyFunction;\n  onClosed?: AnyFunction;\n}\n\nexport interface UseModalManagerResolvedProps {\n  open: boolean;\n  noFocusToDialog?: boolean;\n  modalOverlayTestId?: string;\n  ModalOverlay: React.ComponentType<ModalOverlayProps>;\n  onOpen?: AnyFunction;\n  onOpened?: AnyFunction;\n  onClose?: AnyFunction;\n  onClosed?: AnyFunction;\n}\n\nexport type UseModalManagerResult =\n  | { mounted: false }\n  | ({ mounted: true } & UseModalManagerResolvedProps);\n\nexport const useModalManager = ({\n  id,\n  open,\n  keepMounted,\n  modalOverlayTestId,\n  noFocusToDialog,\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n}: UseModalManager): UseModalManagerResult => {\n  const context = useContext(ModalRootContext);\n  const opened = context.isInsideModal ? context.activeModal === id : open;\n\n  const [unmounted, setUnmounted] = useState(keepMounted ? false : !opened);\n\n  useIsomorphicLayoutEffect(\n    function unsetUnmounted() {\n      if (!keepMounted && opened) {\n        setUnmounted((prev) => (prev ? false : prev));\n      }\n    },\n    [opened, keepMounted],\n  );\n\n  if (unmounted) {\n    return { mounted: false };\n  }\n\n  return {\n    mounted: true,\n    open: opened,\n    noFocusToDialog: noFocusToDialog || context.noFocusToDialog,\n    modalOverlayTestId: modalOverlayTestId || context.modalOverlayTestId,\n    ModalOverlay: context.isInsideModal ? VisuallyHiddenModalOverlay : ModalOverlay,\n    onOpen: onOpen || getContextCallback(id, context.onOpen),\n    onOpened: onOpened || getContextCallback(id, context.onOpened),\n    onClose: onClose || getContextCallback(id, context.onClose),\n    onClosed: function handleClosed(...args: any[]) {\n      if (!keepMounted) {\n        setUnmounted(true);\n      }\n\n      if (onClosed) {\n        onClosed(...args);\n      } else {\n        context.onClosed?.(id);\n      }\n    },\n  };\n};\n\nfunction getContextCallback(id: string, fn: ModalRootCallbackFunction | undefined) {\n  return fn ? () => fn(id) : undefined;\n}\n"],"names":["useContext","useState","useIsomorphicLayoutEffect","ModalOverlay","ModalRootContext","VisuallyHiddenModalOverlay","useModalManager","id","open","keepMounted","modalOverlayTestId","noFocusToDialog","onOpen","onOpened","onClose","onClosed","context","opened","isInsideModal","activeModal","unmounted","setUnmounted","unsetUnmounted","prev","mounted","getContextCallback","handleClosed","args","fn","undefined"],"mappings":"AAAA,SAASA,UAAU,EAAEC,QAAQ,QAAQ,QAAQ;AAC7C,SAASC,yBAAyB,QAAQ,yCAAsC;AAEhF,SAASC,YAAY,QAAgC,kCAA+B;AACpF,SAASC,gBAAgB,QAAQ,wBAAqB;AACtD,SAASC,0BAA0B,QAAQ,6DAA0D;AA8BrG,OAAO,MAAMC,kBAAkB,CAAC,EAC9BC,EAAE,EACFC,IAAI,EACJC,WAAW,EACXC,kBAAkB,EAClBC,eAAe,EACfC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACQ;IAChB,MAAMC,UAAUhB,WAAWI;IAC3B,MAAMa,SAASD,QAAQE,aAAa,GAAGF,QAAQG,WAAW,KAAKZ,KAAKC;IAEpE,MAAM,CAACY,WAAWC,aAAa,GAAGpB,SAASQ,cAAc,QAAQ,CAACQ;IAElEf,0BACE,SAASoB;QACP,IAAI,CAACb,eAAeQ,QAAQ;YAC1BI,aAAa,CAACE,OAAUA,OAAO,QAAQA;QACzC;IACF,GACA;QAACN;QAAQR;KAAY;IAGvB,IAAIW,WAAW;QACb,OAAO;YAAEI,SAAS;QAAM;IAC1B;IAEA,OAAO;QACLA,SAAS;QACThB,MAAMS;QACNN,iBAAiBA,mBAAmBK,QAAQL,eAAe;QAC3DD,oBAAoBA,sBAAsBM,QAAQN,kBAAkB;QACpEP,cAAca,QAAQE,aAAa,GAAGb,6BAA6BF;QACnES,QAAQA,UAAUa,mBAAmBlB,IAAIS,QAAQJ,MAAM;QACvDC,UAAUA,YAAYY,mBAAmBlB,IAAIS,QAAQH,QAAQ;QAC7DC,SAASA,WAAWW,mBAAmBlB,IAAIS,QAAQF,OAAO;QAC1DC,UAAU,SAASW,aAAa,GAAGC,IAAW;YAC5C,IAAI,CAAClB,aAAa;gBAChBY,aAAa;YACf;YAEA,IAAIN,UAAU;gBACZA,YAAYY;YACd,OAAO;gBACLX,QAAQD,QAAQ,GAAGR;YACrB;QACF;IACF;AACF,EAAE;AAEF,SAASkB,mBAAmBlB,EAAU,EAAEqB,EAAyC;IAC/E,OAAOA,KAAK,IAAMA,GAAGrB,MAAMsB;AAC7B"}

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

@@ -1,5 +1,21 @@
-import * as React from "react";
+import { useCallback, useContext } from "react";
 import { ModalRootContext } from "./ModalRootContext.js";
-export const useModalRootContext = ()=>React.useContext(ModalRootContext);
+export const useModalRootContext = ()=>{
+    const { activeModal, isInsideModal, onClose: onCloseContext, updateModalHeight, registerModal } = useContext(ModalRootContext);
+    const onClose = useCallback(()=>{
+        if (onCloseContext && activeModal !== null && activeModal !== undefined) {
+            onCloseContext(activeModal);
+        }
+    }, [
+        activeModal,
+        onCloseContext
+    ]);
+    return {
+        isInsideModal,
+        onClose,
+        updateModalHeight,
+        registerModal
+    };
+};
 
 //# sourceMappingURL=useModalRootContext.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/ModalRoot/useModalRootContext.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ModalRootContext, type ModalRootContextInterface } from './ModalRootContext';\n\nexport const useModalRootContext = (): ModalRootContextInterface =>\n  React.useContext(ModalRootContext);\n"],"names":["React","ModalRootContext","useModalRootContext","useContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAwC,wBAAqB;AAEtF,OAAO,MAAMC,sBAAsB,IACjCF,MAAMG,UAAU,CAACF,kBAAkB"}
+{"version":3,"sources":["../../../../src/components/ModalRoot/useModalRootContext.ts"],"sourcesContent":["import { useCallback, useContext } from 'react';\nimport { ModalRootContext } from './ModalRootContext';\nimport type { UseModalRootContext } from './types';\n\nexport const useModalRootContext = (): UseModalRootContext => {\n  const {\n    activeModal,\n    isInsideModal,\n    onClose: onCloseContext,\n    updateModalHeight,\n    registerModal,\n  } = useContext(ModalRootContext);\n\n  const onClose = useCallback(() => {\n    if (onCloseContext && activeModal !== null && activeModal !== undefined) {\n      onCloseContext(activeModal);\n    }\n  }, [activeModal, onCloseContext]);\n\n  return { isInsideModal, onClose, updateModalHeight, registerModal };\n};\n"],"names":["useCallback","useContext","ModalRootContext","useModalRootContext","activeModal","isInsideModal","onClose","onCloseContext","updateModalHeight","registerModal","undefined"],"mappings":"AAAA,SAASA,WAAW,EAAEC,UAAU,QAAQ,QAAQ;AAChD,SAASC,gBAAgB,QAAQ,wBAAqB;AAGtD,OAAO,MAAMC,sBAAsB;IACjC,MAAM,EACJC,WAAW,EACXC,aAAa,EACbC,SAASC,cAAc,EACvBC,iBAAiB,EACjBC,aAAa,EACd,GAAGR,WAAWC;IAEf,MAAMI,UAAUN,YAAY;QAC1B,IAAIO,kBAAkBH,gBAAgB,QAAQA,gBAAgBM,WAAW;YACvEH,eAAeH;QACjB;IACF,GAAG;QAACA;QAAaG;KAAe;IAEhC,OAAO;QAAEF;QAAeC;QAASE;QAAmBC;IAAc;AACpE,EAAE"}

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

@@ -1,10 +1,13 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { useModalRootContext } from "./useModalRootContext.js";
-export function withModalRootContext(Component) {
+/** TODO [>=8] Удалить HOC */ import * as React from "react";
+import { ModalRootContext } from "./ModalRootContext.js";
+/**
+ * @deprecated HOC не актуален и будет удалён в **VKUI v8**, т.к. вызывать `updateModalHeight()`
+ *  для модальных окон с `dynamicContentHeight` больше не требуется.
+ */ export function withModalRootContext(Component) {
     function WithModalRootContext(props) {
-        const { updateModalHeight } = useModalRootContext();
+        const { updateModalHeight } = React.useContext(ModalRootContext);
         return /*#__PURE__*/ _jsx(Component, {
             ...props,
             updateModalHeight: updateModalHeight