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

package/src/components/ModalPage/ModalPageInternal.tsx

@@ -0,0 +1,229 @@
+'use client';
+
+import { type ComponentType, type KeyboardEvent, useCallback } from 'react';
+import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
+import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useVirtualKeyboardState } from '../../hooks/useVirtualKeyboardState';
+import { Keys, pressedKey } from '../../lib/accessibility';
+import { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation';
+import { BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE, useBottomSheet } from '../../lib/sheet';
+import type { CSSCustomProperties } from '../../types';
+import { useScrollLock } from '../AppRoot/ScrollContext';
+import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
+import { FocusTrap } from '../FocusTrap/FocusTrap';
+import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
+import { ModalOutlet } from '../ModalOutlet/ModalOutlet';
+import {
+  ModalOverlay as ModalOverlayDefault,
+  type ModalOverlayProps,
+} from '../ModalOverlay/ModalOverlay';
+import { ModalPageContent } from '../ModalPageContent/ModalPageContent';
+import type { ModalPageProps } from './types';
+import styles from './ModalPage.module.css';
+
+const transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>> = {
+  appear: styles['documentStateEnter'],
+  appearing: styles['documentStateEntering'],
+
+  enter: styles['documentStateEnter'],
+  entering: styles['documentStateEntering'],
+
+  exiting: styles['documentStateExiting'],
+  exited: styles['documentStateExited'],
+};
+
+export interface ModalPageInternalProps extends Omit<ModalPageProps, 'nav' | 'keepMounted'> {
+  ModalOverlay?: ComponentType<ModalOverlayProps>;
+}
+
+/**
+ * В компоненте заложена вся логика модального окна.
+ *
+ * @private
+ */
+export const ModalPageInternal = ({
+  open,
+  header,
+  footer,
+  size: desktopMaxWidth,
+  height,
+  children,
+  className,
+  style,
+  dynamicContentHeight,
+  settlingHeight,
+  getModalContentRef,
+  ModalOverlay = ModalOverlayDefault,
+  modalOverlayTestId,
+  modalContentTestId,
+  modalDismissButtonTestId,
+  noFocusToDialog,
+  hideCloseButton,
+  preventClose,
+  disableContentPanningGesture,
+  onOpen,
+  onOpened,
+  onClose = noop,
+  onClosed,
+  ...restProps
+}: ModalPageInternalProps) => {
+  const { hasCustomPanelHeaderAfter } = useConfigProvider();
+  const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(open, {
+    enableAppear: true,
+    onEnter() {
+      onOpen?.();
+    },
+    onEntered() {
+      onOpened?.();
+    },
+    onExited() {
+      onClosed?.();
+    },
+  });
+  const opened = transitionState === 'appeared' || transitionState === 'entered';
+  const hidden = transitionState === 'exited';
+  const closable = !preventClose && opened;
+
+  const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();
+  const bottomSheetEnabled = !isDesktop && !preventClose && transitionState !== 'exited';
+  const { opened: keyboardOpened } = useVirtualKeyboardState(bottomSheetEnabled);
+
+  const [{ initialStyle, setSheetEl, setSheetScrollEl, setBackdropEl }, bottomSheetEventHandlers] =
+    useBottomSheet(bottomSheetEnabled, {
+      blocked: keyboardOpened,
+      initialSnapPoint: dynamicContentHeight ? 'auto' : settlingHeight,
+      sheetCSSProperty: '--vkui_internal_ModalPageDocument--snapPoint',
+      backdropCSSProperty: '--vkui_internal--modal-overlay--opacity',
+      onDismiss() {
+        onClose('swipe-down');
+      },
+    });
+  const documentStyle = keyboardOpened
+    ? {
+        '--vkui_internal_ModalPageDocument--safeAreaInsetBottom': '0px',
+        ...initialStyle,
+      }
+    : initialStyle;
+  const handleSheetRef = useExternRef<HTMLDivElement>(setSheetEl, ref);
+  const handleSheetScrollRef = useExternRef<HTMLDivElement>(setSheetScrollEl, getModalContentRef);
+
+  const disableContentPanningGestureProp = disableContentPanningGesture
+    ? BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE
+    : undefined;
+  const [desktopMaxWidthClassName, desktopMaxWidthStyle] = resolveDesktopMaxWidth(desktopMaxWidth);
+
+  const modalOverlay = (
+    <ModalOverlay
+      getRootRef={setBackdropEl}
+      data-testid={modalOverlayTestId}
+      visible={open}
+      onClick={
+        closable
+          ? function handleBackdropClick(event) {
+              onClose('click-overlay', event);
+            }
+          : undefined
+      }
+    />
+  );
+  const closeButton =
+    hideCloseButton || !isDesktop ? null : (
+      <ModalDismissButton
+        data-testid={modalDismissButtonTestId}
+        onClick={
+          closable
+            ? function handleDismissButtonClick(event) {
+                onClose('click-close-button', event);
+              }
+            : undefined
+        }
+      />
+    );
+  const handleEscKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLElement>) => {
+      if (closable && pressedKey(event) === Keys.ESCAPE) {
+        onClose('escape-key');
+      }
+    },
+    [closable, onClose],
+  );
+
+  useScrollLock(!hidden);
+
+  return (
+    <ModalOutlet hidden={hidden} onKeyDown={handleEscKeyDown}>
+      {modalOverlay}
+      <FocusTrap
+        {...restProps}
+        autoFocus={!noFocusToDialog}
+        role="dialog"
+        aria-modal="true"
+        disabled={!opened || hidden}
+        className={classNames(
+          className,
+          styles.host,
+          sizeX === 'regular' && 'vkuiInternalModalPage--sizeX-regular',
+          hasCustomPanelHeaderAfter
+            ? styles.hostSafeAreaInsetTopWithCustomOffset
+            : styles.hostSafeAreaInsetTop,
+          desktopMaxWidthClassName,
+        )}
+        style={{
+          ...style,
+          ...desktopMaxWidthStyle,
+          ...getHeightCSSVariable(height),
+        }}
+      >
+        <div
+          {...bottomSheetEventHandlers}
+          ref={handleSheetRef}
+          role="document"
+          style={documentStyle}
+          className={classNames(styles.document, transitionStateClassNames[transitionState])}
+          onTransitionEnd={onTransitionEnd}
+        >
+          <div className={styles.children}>
+            {hasReactNode(header) && header}
+            <ModalPageContent
+              getRootRef={handleSheetScrollRef}
+              data-testid={modalContentTestId}
+              {...disableContentPanningGestureProp}
+            >
+              {children}
+            </ModalPageContent>
+            {hasReactNode(footer) && footer}
+          </div>
+          {closeButton}
+        </div>
+      </FocusTrap>
+    </ModalOutlet>
+  );
+};
+
+const desktopMaxWidthClassNames = {
+  s: styles['hostMaxWidthS'],
+  m: styles['hostMaxWidthM'],
+  l: styles['hostMaxWidthL'],
+};
+
+function resolveDesktopMaxWidth(
+  desktopMaxWidth: ModalPageInternalProps['size'] = 's',
+): [string | undefined, CSSCustomProperties | undefined] {
+  if (typeof desktopMaxWidth === 'string') {
+    return [desktopMaxWidthClassNames[desktopMaxWidth], undefined];
+  }
+
+  return [
+    undefined,
+    typeof desktopMaxWidth === 'number'
+      ? { '--vkui_internal_ModalPage--desktopMaxWidth': `${desktopMaxWidth}px` }
+      : undefined,
+  ];
+}
+
+function getHeightCSSVariable(height?: number | string): CSSCustomProperties | undefined {
+  return height !== undefined
+    ? { '--vkui_internal_ModalPage--userHeight': `${height}` }
+    : undefined;
+}

package/src/components/ModalPage/types.ts

@@ -0,0 +1,112 @@
+import type { CSSProperties, ReactNode, Ref, UIEvent } from 'react';
+import type { NavIdProps } from '../../lib/getNavId';
+import type { HTMLAttributesWithRootRef } from '../../types';
+
+export type ModalPageCloseReason =
+  | 'click-overlay'
+  | 'click-close-button'
+  | 'escape-key'
+  | 'swipe-down';
+
+type OmittedStyleAttribute = {
+  style?: Omit<CSSProperties, 'height' | 'maxWidth' | 'maxHeight'>;
+};
+
+export interface ModalPageProps
+  extends NavIdProps,
+    Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'id' | 'style'>,
+    OmittedStyleAttribute {
+  /**
+   * Состояние видимости.
+   *
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Сохранять ли компонент в DOM при `open={false}`.
+   *
+   * @default false
+   */
+  keepMounted?: boolean;
+  /**
+   * Шапка модальной страницы, `<ModalPageHeader />`
+   */
+  header?: ReactNode;
+  /**
+   * Подвал модальной страницы, `<ModalPageFooter />`
+   */
+  footer?: ReactNode;
+  /**
+   * Задаёт контенту максимальную ширину на десктопе.
+   */
+  size?: 's' | 'm' | 'l' | number;
+  /**
+   * Задаёт модальному окну фиксированную высоту.
+   * Можно передать числовое значение в пикселях, а можно строкой, в том числе и в процентах "50%".
+   * В мобильной версии 'settlingHeight' будет считаться относительно заданного height.
+   */
+  height?: string | number;
+  /**
+   * Процент, на который изначально будет открыта модальная страница.
+   *
+   * > ⚠️ Следует использовать следующие значения: `25`, `50`, `75`, `100`.
+   * > При передаче `< 25` значение приведётся к `25`, при передаче `> 75` значение приведётся к `75`.
+   *
+   * Игнорируется при включении `dynamicContentHeight`.
+   */
+  settlingHeight?: number;
+  /**
+   * Если высота контента в модальной странице может поменяться, нужно установить это свойство.
+   */
+  dynamicContentHeight?: boolean;
+  /**
+   * Отключает фокус на интерактивный элемент после открытия модалки.
+   */
+  noFocusToDialog?: boolean;
+  /**
+   * Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)
+   */
+  hideCloseButton?: boolean;
+  /**
+   * `data-testid` для содержимого модального окна.
+   */
+  modalContentTestId?: string;
+  /**
+   * Возвращает DOM-элемент содержимого модального окна.
+   */
+  getModalContentRef?: Ref<HTMLDivElement>;
+  /**
+   * `data-testid` для оверлея.
+   */
+  modalOverlayTestId?: string;
+  /**
+   * `data-testid` для кнопки закрытия.
+   */
+  modalDismissButtonTestId?: string;
+  /**
+   * Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)
+   *
+   * ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте
+   */
+  preventClose?: boolean;
+  /**
+   * Отключает раскрытие и закрытие панели в мобильном виде.
+   */
+  disableContentPanningGesture?: boolean;
+  /**
+   * Будет вызвано при начале открытия модалки.
+   */
+  onOpen?: VoidFunction;
+  /**
+   * Будет вызвано при окончательном открытии модалки.
+   */
+  onOpened?: VoidFunction;
+  /**
+   * Будет вызвано при начале закрытия модалки.
+   */
+  onClose?: (reason: ModalPageCloseReason, event?: UIEvent<HTMLElement>) => void;
+  /**
+   * Будет вызвано при окончательном закрытии модалки.
+   */
+  onClosed?: VoidFunction;
+}

package/src/components/ModalPageContent/ModalPageContent.module.css

@@ -0,0 +1,4 @@
+.host {
+  /* см. `.children {}` в `ModalPage` */
+  flex: 1 1 100%;
+}

package/src/components/ModalPageContent/ModalPageContent.tsx

@@ -0,0 +1,25 @@
+'use client';
+
+import { classNames } from '@vkontakte/vkjs';
+import type { HTMLAttributesWithRootRef } from '../../types';
+import { CustomScrollView } from '../CustomScrollView/CustomScrollView';
+import styles from './ModalPageContent.module.css';
+
+export type ModalPageContentProps = HTMLAttributesWithRootRef<HTMLDivElement>;
+
+export const ModalPageContent = ({
+  children,
+  className,
+  getRootRef,
+  ...restProps
+}: ModalPageContentProps) => {
+  return (
+    <CustomScrollView
+      className={classNames(className, styles.host)}
+      getRootRef={getRootRef}
+      {...restProps}
+    >
+      {children}
+    </CustomScrollView>
+  );
+};

package/src/components/ModalPageFooter/ModalPageFooter.module.css

@@ -0,0 +1,33 @@
+.host {
+  position: relative;
+  inline-size: 100%;
+  border-end-start-radius: inherit;
+  border-end-end-radius: inherit;
+  background-color: var(--vkui--color_background_modal);
+  box-sizing: border-box;
+
+  /* см. `.children {}` в `ModalPage` */
+  flex: 0 0 auto;
+}
+
+.Separator {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline: 0;
+}
+
+/* Mobile */
+@media (--viewWidth-smallTabletMinus) {
+  .padded {
+    padding-block: var(--vkui--size_base_padding_vertical--regular);
+    padding-inline: var(--vkui--size_base_padding_horizontal--regular);
+  }
+}
+
+/* Desktop */
+@media (--viewWidth-smallTabletPlus) {
+  .padded {
+    padding-block: 18px;
+    padding-inline: 16px;
+  }
+}

package/src/components/ModalPageFooter/ModalPageFooter.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import type { HTMLAttributesWithRootRef } from '../../types';
+import { RootComponent } from '../RootComponent/RootComponent';
+import { Separator } from '../Separator/Separator';
+import styles from './ModalPageFooter.module.css';
+
+export interface ModalPageFooterProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+  noSeparator?: boolean;
+  noPadding?: boolean;
+}
+
+export const ModalPageFooter = ({
+  noSeparator = false,
+  noPadding = false,
+  children,
+  ...restProps
+}: ModalPageFooterProps) => {
+  const { sizeX } = useAdaptivityWithJSMediaQueries();
+  return (
+    <RootComponent
+      baseClassName={classNames(styles.host, !noPadding && styles.padded)}
+      {...restProps}
+    >
+      {!noSeparator && <Separator className={styles.Separator} padding={sizeX !== 'regular'} />}
+      {children}
+    </RootComponent>
+  );
+};

package/src/components/ModalPageHeader/ModalPageHeader.module.css

@@ -1,12 +1,18 @@
 .host {
   --vkui_internal--safe_area_inset_top: 0;
+
+  border-start-start-radius: inherit;
+  border-start-end-radius: inherit;
+
+  /* см. `.children {}` в `ModalPage` */
+  flex: 0 0 auto;
 }
 
-.withGaps {
+.hostWithGaps {
   padding-inline: 4px;
 }
 
-.desktop.withGaps {
+.hostDesktop.hostWithGaps {
   padding-inline: 8px;
 }
 

package/src/components/ModalPageHeader/ModalPageHeader.tsx

@@ -2,10 +2,10 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { useModalContext } from '../../context/ModalContext';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { usePlatform } from '../../hooks/usePlatform';
 import type { HasRef, HasRootRef } from '../../types';
-import { ModalPageContext } from '../ModalPage/ModalPageContext';
 import { PanelHeader, type PanelHeaderProps } from '../PanelHeader/PanelHeader';
 import { Separator } from '../Separator/Separator';
 import styles from './ModalPageHeader.module.css';
@@ -31,15 +31,15 @@ export const ModalPageHeader = ({
 }: ModalPageHeaderProps): React.ReactNode => {
   const platform = usePlatform();
   const { isDesktop, sizeX } = useAdaptivityWithJSMediaQueries();
-  const { labelId } = React.useContext(ModalPageContext);
+  const modalContext = useModalContext();
 
   return (
     <>
       <div
         className={classNames(
           styles.host,
-          platform !== 'vkcom' && styles.withGaps,
-          isDesktop && styles.desktop,
+          platform !== 'vkcom' && styles.hostWithGaps,
+          isDesktop && styles.hostDesktop,
         )}
         ref={getRootRef}
       >
@@ -47,7 +47,7 @@ export const ModalPageHeader = ({
           className={classNames('vkuiInternalModalPageHeader__in', className)}
           typographyProps={{
             Component: 'h2',
-            id: labelId,
+            id: modalContext.labelId,
             ...typographyProps,
           }}
           {...restProps}