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

package/src/components/ModalPage/ModalPage.module.css

@@ -1,158 +1,159 @@
 .host {
-  inline-size: 100%;
-  block-size: 100%;
-  overflow: hidden;
-  position: absolute;
-  box-sizing: border-box;
-  pointer-events: none;
-}
+  --vkui_internal_ModalPage--userHeight: 100%;
+  --vkui_internal_ModalPage--desktopMaxWidth: 100%;
 
-.host:focus {
-  outline: none;
-}
-
-.desktop {
   display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.inWrap {
   inline-size: 100%;
-  block-size: 100%;
-  position: absolute;
-  inset-inline: 0;
-  inset-block-end: 0;
+  block-size: var(--vkui_internal_ModalPage--userHeight);
   margin-inline: auto;
-  display: flex;
-  align-items: flex-end;
-  pointer-events: initial;
-  transform: translateY(100%);
-  transition: transform 320ms var(--vkui--animation_easing_platform);
+  outline: none;
+  box-sizing: border-box;
 }
 
-.ios .inWrap {
-  transition: transform 400ms var(--vkui--animation_easing_platform);
-}
+/* Mobile */
+@media (--viewWidth-smallTabletMinus) {
+  .host {
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    max-inline-size: var(--vkui--size_popup_small--regular);
+    pointer-events: none;
+  }
 
-.desktop .inWrap {
-  position: relative;
-  align-items: initial;
-  margin-block: 32px;
-  margin-inline: 56px;
-  block-size: auto;
-  max-block-size: 640px;
-  opacity: 0;
-  transform: none;
-  transition: opacity 340ms var(--vkui--animation_easing_platform);
-}
+  .hostSafeAreaInsetTop {
+    max-block-size: calc(100% - var(--vkui_internal--safe_area_inset_top));
+  }
 
-@media (max-height: 672px) {
-  .desktop .inWrap {
-    max-block-size: calc(100% - 32px * 2);
+  .hostSafeAreaInsetTopWithCustomOffset {
+    max-block-size: calc(
+      100% - (var(--vkui_internal--safe_area_inset_top) + var(--vkui_internal--panel_header_height))
+    );
   }
 }
+/* Desktop */
+@media (--viewWidth-smallTabletPlus) {
+  .host {
+    position: relative;
+    margin-block: auto;
+    max-inline-size: var(--vkui_internal_ModalPage--desktopMaxWidth);
+    max-block-size: calc(100% - 64px); /* FIXME 64px??? */
+    block-size: auto;
+  }
 
-.sizeS .inWrap {
-  max-inline-size: var(--vkui--size_popup_small--regular);
-}
+  .hostMaxWidthS {
+    --vkui_internal_ModalPage--desktopMaxWidth: var(--vkui--size_popup_small--regular);
+  }
 
-.sizeM .inWrap {
-  max-inline-size: var(--vkui--size_popup_medium--regular);
-}
+  .hostMaxWidthM {
+    --vkui_internal_ModalPage--desktopMaxWidth: var(--vkui--size_popup_medium--regular);
+  }
 
-.sizeL .inWrap {
-  max-inline-size: var(--vkui--size_popup_large--regular);
+  .hostMaxWidthL {
+    --vkui_internal_ModalPage--desktopMaxWidth: var(--vkui--size_popup_large--regular);
+  }
 }
 
-.in {
-  background-color: var(--vkui--color_background_modal);
-  overflow: visible;
-  position: relative;
-  box-sizing: border-box;
+.document {
   inline-size: 100%;
-  block-size: 100%;
+  box-sizing: border-box;
+
+  /*
+   * Удерживает высоту в пределах 100% родителя при переполнении контента.
+   */
   display: flex;
+  flex-shrink: 1;
   flex-direction: column;
-  border-start-end-radius: var(--vkui--size_border_radius_paper--regular);
-  border-start-start-radius: var(--vkui--size_border_radius_paper--regular);
-
-  --vkui_internal--background: var(--vkui--color_background_modal);
 }
 
-.desktop .in {
-  block-size: auto;
-  box-shadow: var(--vkui--elevation3);
-  border-end-end-radius: var(--vkui--size_border_radius_paper--regular);
-  border-end-start-radius: var(--vkui--size_border_radius_paper--regular);
-}
+/* Mobile */
+@media (--viewWidth-smallTabletMinus) {
+  .document {
+    --vkui_internal_ModalPageDocument--snapPoint: auto;
+    --vkui_internal_ModalPageDocument--safeAreaInsetBottom: var(
+      --vkui_internal--safe_area_inset_bottom
+    );
+
+    position: absolute;
+    inset-inline-start: 0;
+    inset-block-end: 0;
+    block-size: var(--vkui_internal_ModalPageDocument--snapPoint);
+    max-block-size: 100%;
+    padding-block-end: var(--vkui_internal_ModalPageDocument--safeAreaInsetBottom);
+    pointer-events: auto;
+    touch-action: pan-y;
+    transform: translate3d(0, 0, 0);
+    transition: block-size 0.4s var(--vkui_internal--spring-easing);
+  }
 
-.header {
-  inline-size: 100%;
-}
+  .documentStateEnter {
+    transform: translate3d(0, 100%, 0);
+  }
 
-.contentWrap {
-  position: relative;
-  display: flex;
-  block-size: 100%;
-  flex-direction: column;
-  overflow: hidden;
-  border-end-start-radius: inherit;
-  border-end-end-radius: inherit;
-}
+  .documentStateEntering {
+    transform: translate3d(0, 0, 0);
+    transition: transform 0.5s var(--vkui_internal--slide-easing) 0.1s;
+  }
 
-.header:empty + .contentWrap {
-  border-radius: inherit;
-}
+  .documentStateExiting {
+    transform: translate3d(0, 100%, 0);
+    transition: transform 0.2s ease;
+  }
 
-.content {
-  block-size: 100%;
-  overflow-y: hidden;
-  overflow-x: hidden;
-  box-sizing: border-box;
+  .documentStateExited {
+    transform: translate3d(0, 100%, 0);
+  }
 }
+/* Desktop */
+@media (--viewWidth-smallTabletPlus) {
+  .document {
+    position: relative;
+    block-size: auto;
+  }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-.desktop .content,
-:global(.vkuiInternalModalRoot__modal--expandable) .content {
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
+  .documentStateEnter {
+    opacity: 0;
+  }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-.desktop .contentIn,
-:global(.vkuiInternalModalRoot__modal--expandable) .contentIn {
-  block-size: 100%;
-}
+  .documentStateEntering {
+    opacity: 1;
+    transition: opacity 0.2s ease-in 0.1s;
+  }
 
-/* существует для того, чтобы использовать в расчёте translateY
- * чтобы поднять ModalPage не только на высоту контента, но и на высоту bottom-inset
- * особенно важно для ModalPage c динамической высотой
- */
-.bottomInset {
-  block-size: var(--vkui_internal--safe_area_inset_bottom);
-  flex-shrink: 0;
-}
+  .documentStateExiting {
+    opacity: 0;
+    transition: opacity 0.1s ease-out;
+  }
 
-/**
- * CMP:
- * ModalRoot
- *
- * [дополнительно] также ищи в файле `ModalRoot__modal--expandable`
- */
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalModalRoot--touched) .inWrap {
-  transition: none;
+  .documentStateExited {
+    opacity: 0;
+  }
 }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalModalRoot--switching) .inWrap {
-  pointer-events: none;
+.children {
+  inline-size: 100%;
+  block-size: 100%;
+  border-start-start-radius: var(--vkui--size_border_radius_paper--regular);
+  border-start-end-radius: var(--vkui--size_border_radius_paper--regular);
+  background-color: var(--vkui--color_background_modal);
+  overflow: hidden;
+
+  /*
+   * Удерживает высоту в пределах 100% родителя при переполнении контента.
+   *
+   * - см. `ModalPageHeader`
+   * - см. `ModalPageContent`
+   * - см. `ModalPageFooter`
+   */
+  display: flex;
+  flex-shrink: 1;
+  flex-direction: column;
 }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalModalRoot__modal--collapsed) .content,
-:global(.vkuiInternalModalRoot__modal--dragging) .content {
-  overflow: hidden;
-  touch-action: pan-y;
+/* Desktop */
+@media (--viewWidth-smallTabletPlus) {
+  .children {
+    border-end-end-radius: var(--vkui--size_border_radius_paper--regular);
+    border-end-start-radius: var(--vkui--size_border_radius_paper--regular);
+    box-shadow: var(--vkui--elevation3);
+  }
 }

package/src/components/ModalPage/ModalPage.tsx

@@ -1,83 +1,12 @@
 'use client';
 
-import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
-import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
-import { useExternRef } from '../../hooks/useExternRef';
-import { useOrientationChange } from '../../hooks/useOrientationChange';
-import { usePlatform } from '../../hooks/usePlatform';
-import { getNavId, type NavIdProps } from '../../lib/getNavId';
-import { multiRef } from '../../lib/utils';
+import { useId } from 'react';
+import { ModalContext } from '../../context/ModalContext';
+import { getNavId } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
-import type { HTMLAttributesWithRootRef } from '../../types';
-import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
-import { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';
-import { RootComponent } from '../RootComponent/RootComponent';
-import { ModalPageContext } from './ModalPageContext';
-import styles from './ModalPage.module.css';
-
-const sizeClassName = {
-  s: styles.sizeS,
-  m: styles.sizeM,
-  l: styles.sizeL,
-};
-
-export interface ModalPageProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {
-  /**
-   * Шапка модальной страницы, `<ModalPageHeader />`
-   */
-  header?: React.ReactNode;
-  /**
-   * Задаёт контенту максимальную ширину для десктопной версии.
-   */
-  size?: 's' | 'm' | 'l' | number;
-  /**
-   * Задаёт модальному окну фиксированную высоту.
-   * Можно передать числовое значение в пикселях, а можно строкой, в том числе и в процентах "50%".
-   * В мобильной версии 'settlingHeight' будет считаться относительно заданного height.
-   */
-  height?: string | number;
-  /**
-   * Будет вызвано при начале открытия модалки.
-   */
-  onOpen?: VoidFunction;
-  /**
-   * Будет вызвано при окончательном открытии модалки.
-   */
-  onOpened?: VoidFunction;
-  /**
-   * Будет вызвано при начале закрытия модалки.
-   */
-  onClose?: VoidFunction;
-  /**
-   * Будет вызвано при окончательном закрытии модалки.
-   */
-  onClosed?: VoidFunction;
-  /**
-   * Процент, на который изначально будет открыта модальная страница. При `settlingHeight={100}` модальная страница раскрывается на всю высоту.
-   */
-  settlingHeight?: number;
-  /**
-   * Если высота контента в модальной странице может поменяться, нужно установить это свойство
-   */
-  dynamicContentHeight?: boolean;
-  getModalContentRef?: React.Ref<HTMLDivElement>;
-  /**
-   * Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)
-   */
-  hideCloseButton?: boolean;
-  modalContentTestId?: string;
-  /**
-   * `data-testid` для кнопки закрытия
-   */
-  modalDismissButtonTestId?: string;
-  /**
-   * Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)
-   *
-   * ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте
-   */
-  preventClose?: boolean;
-}
+import { useModalManager } from '../ModalRoot/useModalManager';
+import { ModalPageInternal } from './ModalPageInternal';
+import type { ModalPageProps } from './types';
 
 const warn = warnOnce('ModalPage');
 
@@ -85,100 +14,49 @@ const warn = warnOnce('ModalPage');
  * @see https://vkcom.github.io/VKUI/#/ModalPage
  */
 export const ModalPage = ({
-  children,
-  header,
-  size: sizeProp = 's',
+  id: idProp,
+  nav,
+  open = false,
+  modalOverlayTestId,
+  noFocusToDialog,
   onOpen,
   onOpened,
   onClose,
   onClosed,
-  settlingHeight, // 75
-  dynamicContentHeight,
-  getModalContentRef,
-  nav,
-  id: idProp,
-  hideCloseButton = false,
-  height,
-  modalContentTestId,
-  modalDismissButtonTestId,
-  getRootRef,
-  preventClose,
+  size = 's',
+  settlingHeight = 50,
+  keepMounted = false,
   ...restProps
-}: ModalPageProps): React.ReactNode => {
-  const generatingId = React.useId();
-  const id = idProp || generatingId;
-
-  const { updateModalHeight } = React.useContext(ModalRootContext);
-
-  const platform = usePlatform();
-  const orientation = useOrientationChange();
-  const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();
-
-  React.useEffect(() => {
-    if (dynamicContentHeight) {
-      updateModalHeight();
-    }
-  }, [children, dynamicContentHeight, orientation, updateModalHeight]);
-
-  const isCloseButtonShown = !hideCloseButton && isDesktop;
-  const size = isDesktop ? sizeProp : 's';
-
-  const modalContext = React.useContext(ModalRootContext);
-  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), 'page');
-  const rootRef = useExternRef(getRootRef, refs.modalElement);
-
-  const contextValue = React.useMemo(() => ({ labelId: `${id}-label` }), [id]);
+}: ModalPageProps) => {
+  const generatingId = useId();
+  const id = getNavId({ nav, id: idProp }, warn) || generatingId;
+
+  const { mounted, ...resolvedProps } = useModalManager({
+    id,
+    open,
+    keepMounted,
+    modalOverlayTestId,
+    noFocusToDialog,
+    onOpen,
+    onOpened,
+    onClose,
+    onClosed,
+  });
+
+  if (!mounted) {
+    return null;
+  }
 
   return (
-    <ModalPageContext.Provider value={contextValue}>
-      <RootComponent
-        {...restProps}
-        getRootRef={rootRef}
-        tabIndex={-1}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={contextValue.labelId}
+    <ModalContext.Provider value={id}>
+      <ModalPageInternal
         id={id}
-        baseClassName={classNames(
-          styles.host,
-          platform === 'ios' && styles.ios,
-          isDesktop && styles.desktop,
-          sizeX === 'regular' && 'vkuiInternalModalPage--sizeX-regular',
-          typeof size === 'string' && sizeClassName[size],
-        )}
-      >
-        <div
-          className={styles.inWrap}
-          style={{
-            maxWidth: typeof size === 'number' ? size : undefined,
-            height,
-          }}
-          ref={refs.innerElement}
-        >
-          <div className={styles.in}>
-            <div className={styles.header} ref={refs.headerElement}>
-              {header}
-            </div>
-
-            <div className={styles.contentWrap}>
-              <div
-                className={styles.content}
-                ref={multiRef<HTMLDivElement>(refs.contentElement, getModalContentRef)}
-                {...(modalContentTestId && { 'data-testid': modalContentTestId })}
-              >
-                <div className={styles.contentIn}>{children}</div>
-              </div>
-              <div ref={refs.bottomInset} className={styles.bottomInset} />
-            </div>
-            {isCloseButtonShown && (
-              <ModalDismissButton
-                data-testid={modalDismissButtonTestId}
-                onClick={onClose || modalContext.onClose}
-              />
-            )}
-          </div>
-        </div>
-      </RootComponent>
-    </ModalPageContext.Provider>
+        size={size}
+        aria-labelledby={`${id}-label`}
+        settlingHeight={settlingHeight}
+        {...resolvedProps}
+        {...restProps}
+      />
+    </ModalContext.Provider>
   );
 };