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

package/src/components/ModalCard/ModalCardInternal.tsx

@@ -0,0 +1,175 @@
+'use client';
+
+import { type ComponentType, type KeyboardEvent, type ReactNode, useCallback } from 'react';
+import { classNames, noop } from '@vkontakte/vkjs';
+import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useFocusTrap } from '../../hooks/useFocusTrap';
+import { usePlatform } from '../../hooks/usePlatform';
+import { useVirtualKeyboardState } from '../../hooks/useVirtualKeyboardState';
+import { Keys, pressedKey } from '../../lib/accessibility';
+import { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation';
+import { useBottomSheet } from '../../lib/sheet';
+import { useScrollLock } from '../AppRoot/ScrollContext';
+import { ModalCardBase } from '../ModalCardBase/ModalCardBase';
+import { ModalOutlet } from '../ModalOutlet/ModalOutlet';
+import {
+  ModalOverlay as ModalOverlayDefault,
+  type ModalOverlayProps,
+} from '../ModalOverlay/ModalOverlay';
+import type { ModalCardProps } from './types';
+import styles from './ModalCard.module.css';
+
+const sizeByPlatformClassNames = {
+  vkcom: styles['hostMaxWidthS'],
+  ios: styles['hostMaxWidthM'],
+  android: styles['hostMaxWidthL'],
+};
+
+const transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>> = {
+  appear: styles['hostStateEnter'],
+  appearing: styles['hostStateEntering'],
+
+  enter: styles['hostStateEnter'],
+  entering: styles['hostStateEntering'],
+
+  exiting: styles['hostStateExiting'],
+  exited: styles['hostStateExited'],
+};
+
+export interface ModalCardInternalProps extends Omit<ModalCardProps, 'nav' | 'keepMounted'> {
+  ModalOverlay?: ComponentType<ModalOverlayProps>;
+}
+
+/**
+ * В компоненте заложена вся логика модального окна.
+ *
+ * @private
+ */
+export const ModalCardInternal = ({
+  icon,
+  title,
+  titleComponent,
+  description,
+  descriptionComponent,
+  children,
+  actions,
+  size,
+  open,
+  style: styleProp,
+  className,
+  preventClose,
+  ModalOverlay = ModalOverlayDefault,
+  modalOverlayTestId,
+  modalDismissButtonTestId,
+  getRootRef,
+  dismissButtonMode,
+  dismissLabel,
+  noFocusToDialog,
+  onOpen,
+  onOpened,
+  onClose = noop,
+  onClosed,
+  ...restProps
+}: ModalCardInternalProps): ReactNode => {
+  const platform = usePlatform();
+  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 { isDesktop } = useAdaptivityWithJSMediaQueries();
+  const bottomSheetEnabled = !isDesktop && !preventClose && transitionState !== 'exited';
+
+  const { opened: keyboardOpened } = useVirtualKeyboardState(bottomSheetEnabled);
+  const [{ setSheetEl, setBackdropEl }, bottomSheetEventHandlers] = useBottomSheet(
+    bottomSheetEnabled,
+    {
+      blocked: keyboardOpened,
+      initialSnapPoint: 'auto',
+      sheetCSSProperty: '--vkui_internal_ModalCard--translateY',
+      backdropCSSProperty: '--vkui_internal--modal-overlay--opacity',
+      onDismiss() {
+        onClose?.('swipe-down');
+      },
+    },
+  );
+  const handleRef = useExternRef<HTMLDivElement>(setSheetEl, ref, getRootRef);
+  const style = keyboardOpened
+    ? {
+        ...styleProp,
+        '--vkui_internal_ModalCard--safeAreaInsetBottom': '0px',
+      }
+    : styleProp;
+  const modalOverlay = (
+    <ModalOverlay
+      getRootRef={setBackdropEl}
+      data-testid={modalOverlayTestId}
+      visible={open}
+      onClick={
+        closable
+          ? function handleBackdropClick(event) {
+              onClose('click-overlay', event);
+            }
+          : undefined
+      }
+    />
+  );
+  const handleEscKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLElement>) => {
+      if (closable && pressedKey(event) === Keys.ESCAPE) {
+        onClose('escape-key');
+      }
+    },
+    [closable, onClose],
+  );
+
+  useScrollLock(!hidden);
+  useFocusTrap(ref, { autoFocus: !noFocusToDialog, disabled: !opened || hidden });
+
+  return (
+    <ModalOutlet hidden={hidden} onKeyDown={handleEscKeyDown}>
+      {modalOverlay}
+      <ModalCardBase
+        {...restProps}
+        tabIndex={-1}
+        role="dialog"
+        aria-modal="true"
+        getRootRef={handleRef}
+        style={style}
+        className={classNames(
+          styles.host,
+          sizeByPlatformClassNames[platform],
+          transitionStateClassNames[transitionState],
+          className,
+        )}
+        onTransitionEnd={onTransitionEnd}
+        {...bottomSheetEventHandlers}
+        icon={icon}
+        title={title}
+        titleComponent={titleComponent}
+        description={description}
+        descriptionComponent={descriptionComponent}
+        actions={actions}
+        onClose={() => onClose('click-close-button')}
+        size={size}
+        modalDismissButtonTestId={modalDismissButtonTestId}
+        dismissButtonMode={dismissButtonMode}
+        dismissLabel={dismissLabel}
+      >
+        {children}
+      </ModalCardBase>
+    </ModalOutlet>
+  );
+};

package/src/components/ModalCard/types.ts

@@ -0,0 +1,51 @@
+import type { UIEvent } from 'react';
+import type { NavIdProps } from '../../lib/getNavId';
+import type { UseBottomSheetHandlers } from '../../lib/sheet';
+import type { ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';
+
+export type ModalCardCloseReason =
+  | 'click-overlay'
+  | 'click-close-button'
+  | 'escape-key'
+  | 'swipe-down';
+
+export interface ModalCardProps
+  extends NavIdProps,
+    Omit<ModalCardBaseProps, 'id' | 'onClose' | 'onTransitionEnd' | keyof UseBottomSheetHandlers> {
+  /**
+   * Состояние видимости.
+   *
+   * @default false
+   */
+  open?: boolean;
+  /**
+   * Сохранять ли компонент в DOM при `open={false}`.
+   *
+   * @default false
+   */
+  keepMounted?: boolean;
+  /**
+   * Отключает фокус на интерактивный элемент после открытия модалки.
+   */
+  noFocusToDialog?: boolean;
+  /**
+   * `data-testid` для оверлея.
+   */
+  modalOverlayTestId?: string;
+  /**
+   * Будет вызвано при начале открытия модалки.
+   */
+  onOpen?: VoidFunction;
+  /**
+   * Будет вызвано при окончательном открытии модалки.
+   */
+  onOpened?: VoidFunction;
+  /**
+   * Будет вызвано при начале закрытия модалки.
+   */
+  onClose?: (reason: ModalCardCloseReason, event?: UIEvent<HTMLElement>) => void;
+  /**
+   * Будет вызвано при окончательном закрытии модалки.
+   */
+  onClosed?: VoidFunction;
+}

package/src/components/ModalCardBase/ModalCardBase.module.css

@@ -4,7 +4,6 @@
   background: var(--vkui--color_background_modal);
   border-radius: 12px;
   padding: 16px;
-  margin-block-end: var(--vkui_internal--safe_area_inset_bottom);
   display: flex;
   flex-direction: column;
   justify-content: center;

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
-import { useKeyboard } from '../../hooks/useKeyboard';
 import { usePlatform } from '../../hooks/usePlatform';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { AdaptivityContext } from '../AdaptivityProvider/AdaptivityContext';
@@ -106,7 +105,6 @@ export const ModalCardBase = ({
 }: ModalCardBaseProps): React.ReactNode => {
   const platform = usePlatform();
   const { isDesktop } = useAdaptivityWithJSMediaQueries();
-  const isSoftwareKeyboardOpened = useKeyboard().isOpened;
 
   const size = isDesktop ? sizeProp : undefined;
   const withSafeZone =
@@ -130,12 +128,7 @@ export const ModalCardBase = ({
         ...style,
       }}
     >
-      <div
-        className={classNames(
-          styles.container,
-          isSoftwareKeyboardOpened && styles.containerSoftwareKeyboardOpened,
-        )}
-      >
+      <div className={styles.container}>
         {hasReactNode(icon) && <div className={styles.icon}>{icon}</div>}
         {hasReactNode(title) && (
           <Title level="2" weight="2" className={styles.title} Component={titleComponent}>

package/src/components/ModalOutlet/ModalOutlet.module.css

@@ -0,0 +1,16 @@
+.host:not([hidden]) {
+  isolation: isolate;
+  position: fixed;
+  inset: 0;
+  z-index: var(--vkui--z_index_modal);
+  overflow: hidden;
+}
+
+/* Desktop */
+@media (--viewWidth-smallTabletPlus) {
+  .host:not([hidden]) {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+}

package/src/components/ModalOutlet/ModalOutlet.tsx

@@ -0,0 +1,31 @@
+import { classNames } from '@vkontakte/vkjs';
+import type { HTMLAttributesWithRootRef } from '../../types';
+import styles from './ModalOutlet.module.css';
+
+export interface ModalOutletProps
+  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'hidden' | 'aria-hidden'> {
+  hidden?: boolean;
+}
+
+/**
+ * @private
+ */
+export const ModalOutlet = ({
+  className,
+  hidden,
+  children,
+  getRootRef,
+  ...restProps
+}: ModalOutletProps) => {
+  return (
+    <div
+      ref={getRootRef}
+      className={classNames(className, styles.host)}
+      hidden={hidden}
+      aria-hidden={hidden}
+      {...restProps}
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/ModalOverlay/ModalOverlay.module.css

@@ -0,0 +1,65 @@
+.host {
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: opacity 0.3s linear;
+  will-change: opacity;
+}
+
+.nonInteractive {
+  pointer-events: none;
+  touch-action: none;
+}
+
+.hostPositionAbsolute {
+  position: absolute;
+}
+
+.hostPositionFixed {
+  position: fixed;
+}
+
+.hostStateEnter {
+  opacity: 0;
+  transition-property: none;
+}
+
+.hostStateEntering {
+  opacity: var(--vkui_internal--modal-overlay--opacity);
+}
+
+.hostStateEntered {
+  opacity: var(--vkui_internal--modal-overlay--opacity);
+}
+
+.hostStateExit {
+  opacity: var(--vkui_internal--modal-overlay--opacity);
+  transition-property: none;
+}
+
+.hostStateExiting {
+  opacity: 0;
+}
+
+.hostStateExited {
+  opacity: 0;
+  transition-property: none;
+}
+/* Mobile */
+@media (--viewWidth-smallTabletMinus) {
+  .hostStateEntering,
+  .hostStateExiting {
+    transition-duration: var(--vkui--animation_duration_l);
+  }
+}
+/* Desktop */
+@media (--viewWidth-smallTabletPlus) {
+  .hostStateEntering {
+    transition-duration: 0.2s;
+  }
+
+  .hostStateExiting {
+    transition-duration: 0.1s;
+  }
+}

package/src/components/ModalOverlay/ModalOverlay.tsx

@@ -0,0 +1,66 @@
+'use client';
+
+import type { DataHTMLAttributes } from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useExternRef } from '../../hooks/useExternRef';
+import { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation/useCSSTransition';
+import type { HasRootRef } from '../../types';
+import styles from './ModalOverlay.module.css';
+
+const positionClassNames = {
+  absolute: styles.hostPositionAbsolute,
+  fixed: styles.hostPositionFixed,
+};
+
+const transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>> = {
+  appear: styles['hostStateEnter'],
+  appearing: styles['hostStateEntering'],
+  appeared: styles['hostStateEntered'],
+  enter: styles['hostStateEnter'],
+  entering: styles['hostStateEntering'],
+  entered: styles['hostStateEntered'],
+  exit: styles['hostStateExit'],
+  exiting: styles['hostStateExiting'],
+  exited: styles['hostStateExited'],
+};
+
+export interface ModalOverlayProps
+  extends DataHTMLAttributes<HTMLDivElement>,
+    HasRootRef<HTMLDivElement> {
+  visible?: boolean;
+  position?: 'absolute' | 'fixed';
+  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+
+/**
+ * @private
+ */
+export const ModalOverlay = ({
+  visible = false,
+  position = 'absolute',
+  getRootRef,
+  onClick,
+  ...restProps
+}: ModalOverlayProps) => {
+  const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(visible, {
+    enableAppear: true,
+  });
+  const handleRef = useExternRef(getRootRef, ref);
+
+  return (
+    <div
+      {...restProps}
+      ref={handleRef}
+      aria-hidden="true"
+      hidden={transitionState === 'exited'}
+      className={classNames(
+        styles.host,
+        onClick === undefined && styles.nonInteractive,
+        positionClassNames[position],
+        transitionStateClassNames[transitionState],
+      )}
+      onClick={onClick}
+      onTransitionEnd={onTransitionEnd}
+    />
+  );
+};