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

package/src/components/ModalRoot/ModalRootContext.tsx

@@ -1,54 +1,17 @@
-import * as React from 'react';
-import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import type { ModalElements, ModalsStateEntry, ModalType } from './types';
-
-export type ModalRegistryEntry = ModalElements & Required<Pick<ModalsStateEntry, 'type' | 'id'>>;
-type ModalRefs = { [k in keyof ModalElements]: (e: ModalElements[k]) => void };
-
-export interface ModalRootContextInterface {
-  updateModalHeight: VoidFunction;
-  registerModal: (data: ModalRegistryEntry) => void;
-  onClose?: VoidFunction;
-  isInsideModal: boolean;
-}
-
-export const ModalRootContext: React.Context<ModalRootContextInterface> =
-  React.createContext<ModalRootContextInterface>({
-    updateModalHeight: () => undefined,
-    registerModal: () => undefined,
-    isInsideModal: false,
-  });
+import { createContext, type RefObject } from 'react';
+import { noop } from '@vkontakte/vkjs';
+import type { ModalRootContextInterface } from './types';
 
 /**
- * All referenced elements must be static
+ * Сохраняем `ref` компонента `ModalOverlay` из `ModalRoot` в контекст, чтобы можно было пробросить
+ * его до `ModalPage` и `ModalCard`.
+ *
+ * @private
  */
-export function useModalRegistry(
-  id: string | undefined,
-  type: ModalType,
-): {
-  refs: Required<ModalRefs>;
-} {
-  const modalContext = React.useContext(ModalRootContext);
-  const elements = React.useRef<ModalElements>({}).current;
-  useIsomorphicLayoutEffect(() => {
-    if (id !== undefined) {
-      modalContext.registerModal({ ...elements, type, id });
-      // unset refs on  unmount to prevent leak
-      const reset = Object.keys(elements).reduce<ModalRegistryEntry>(
-        (acc, k) => ({ ...acc, [k]: null }),
-        { type, id },
-      );
-      return () => modalContext.registerModal(reset);
-    }
-    return undefined;
-  }, []);
+export const ModalRootOverlayContext = createContext<RefObject<HTMLDivElement>>({ current: null });
 
-  const refs = React.useRef<Required<ModalRefs>>({
-    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 };
-}
+export const ModalRootContext = createContext<ModalRootContextInterface>({
+  updateModalHeight: noop,
+  registerModal: noop,
+  isInsideModal: false,
+});

package/src/components/ModalRoot/VisuallyHiddenModalOverlay/VisuallyHiddenModalOverlay.module.css

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

package/src/components/ModalRoot/VisuallyHiddenModalOverlay/VisuallyHiddenModalOverlay.tsx

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

package/src/components/ModalRoot/types.ts

@@ -1,13 +1,19 @@
-import type { DOMContextInterface } from '../../lib/dom';
-import type { HasPlatform } from '../../types';
-import type { ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';
+/** TODO [>=8] Удалить deprecated типы */
+import type { AppRootPortalProps } from '../AppRoot/AppRootPortal';
 
+/**
+ * @deprecated будет удалён в **VKUI v8**
+ */
 export type ModalType = 'page' | 'card';
 
+/**
+ * @deprecated будет удалён в **VKUI v8**
+ */
 export type TranslateRange = [number, number];
 
-export type ModalsState = { [index: string]: ModalsStateEntry };
-
+/**
+ * @deprecated будет удалён в **VKUI v8**
+ */
 export interface ModalElements {
   modalElement?: HTMLElement | null;
   innerElement?: HTMLElement | null;
@@ -16,6 +22,9 @@ export interface ModalElements {
   bottomInset?: HTMLElement | null;
 }
 
+/**
+ * @deprecated будет удалён в **VKUI v8**
+ */
 export interface ModalsStateEntry extends ModalElements {
   id: string | null;
   /**
@@ -72,44 +81,75 @@ export interface ModalsStateEntry extends ModalElements {
   preventClose?: boolean;
 }
 
-export interface ModalRootProps {
-  activeModal?: string | null;
-  children: React.ReactElement | Iterable<React.ReactElement>;
+export type ModalRootActiveModal = string | null;
+
+export type ModalRootCallbackFunction = (modalId: string) => void;
+
+type ModalRootBaseProps = {
+  activeModal?: ModalRootActiveModal;
+
+  /**
+   * `data-testid` для маски
+   */
+  modalOverlayTestId?: string;
+
+  /**
+   * Отключает фокус на контейнер диалогового окна при открытии.
+   */
+  noFocusToDialog?: boolean;
+
+  usePortal?: AppRootPortalProps['usePortal'];
 
   /**
    * Будет вызвано при начале открытия активной модалки с её id
    */
-  onOpen?: (modalId: string) => void;
+  onOpen?: ModalRootCallbackFunction;
 
   /**
    * Будет вызвано при окончательном открытии активной модалки с её id
    */
-  onOpened?: (modalId: string) => void;
+  onOpened?: ModalRootCallbackFunction;
 
   /**
    * Будет вызвано при начале закрытия активной модалки с её id
    */
-  onClose?: (modalId: string) => void;
+  onClose?: ModalRootCallbackFunction;
 
   /**
    * Будет вызвано при окончательном закрытии активной модалки с её id
    */
-  onClosed?: (modalId: string) => void;
+  onClosed?: ModalRootCallbackFunction;
+};
 
+export interface ModalRootProps extends ModalRootBaseProps {
+  children: React.ReactElement | Iterable<React.ReactElement>;
+}
+
+type ModalRootContextBaseInterface = {
   /**
-   * `data-testid` для маски
+   * Обозначает, в контексте ли модального окна мы сейчас.
    */
-  modalOverlayTestId?: string;
+  isInsideModal: boolean;
 
   /**
-   * Отключает фокус на контейнер диалогового окна при открытии.
+   * С **VKUI v7** задача с обновлением высоты контента при `dynamicContentHeight` решается через CSS.
+   *
+   * @deprecated будет удалён в **VKUI v8**
    */
-  noFocusToDialog?: boolean;
-}
+  updateModalHeight: VoidFunction;
 
-export interface ModalRootWithDOMProps extends HasPlatform, ModalRootProps, DOMContextInterface {
   /**
-   * @ignore
+   * С **VKUI v7** регистрация модальных окон больше не требуется.
+   *
+   * @deprecated будет удалён в **VKUI v8**
    */
-  configProvider?: ConfigProviderContextInterface;
+  registerModal: (data: ModalElements & Required<Pick<ModalsStateEntry, 'type' | 'id'>>) => void;
+};
+
+export interface ModalRootContextInterface
+  extends ModalRootContextBaseInterface,
+    ModalRootBaseProps {}
+
+export interface UseModalRootContext extends ModalRootContextBaseInterface {
+  onClose?: VoidFunction;
 }

package/src/components/ModalRoot/useModalManager.tsx

@@ -1,244 +1,90 @@
-'use client';
-
-import * as React from 'react';
-import { isFunction, noop } from '@vkontakte/vkjs';
-import { getNavId } from '../../lib/getNavId';
+import { useContext, useState } from 'react';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import { warnOnce } from '../../lib/warnOnce';
-import type { HasChildren } from '../../types';
-import type { ModalsState, ModalsStateEntry } from './types';
-
-interface ModalTransitionState {
-  activeModal?: string | null;
-  enteringModal?: string | null;
-  exitingModal?: string | null;
-  history?: string[];
-  isBack?: boolean | null;
+import type { AnyFunction } from '../../types';
+import { ModalOverlay, type ModalOverlayProps } from '../ModalOverlay/ModalOverlay';
+import { ModalRootContext } from './ModalRootContext';
+import { VisuallyHiddenModalOverlay } from './VisuallyHiddenModalOverlay/VisuallyHiddenModalOverlay';
+import type { ModalRootCallbackFunction } from './types';
+
+export interface UseModalManager {
+  id: string;
+  open: boolean;
+  keepMounted: boolean;
+  modalOverlayTestId?: string;
+  noFocusToDialog?: boolean;
+  onOpen?: AnyFunction;
+  onOpened?: AnyFunction;
+  onClose?: AnyFunction;
+  onClosed?: AnyFunction;
 }
 
-export interface ModalTransitionProps extends ModalTransitionState {
-  onEnter: VoidFunction;
-  onEntered: (id: string | null) => void;
-  onExit: VoidFunction;
-  onExited: (id: string | null) => void;
-  getModalState: (id: string | undefined | null) => ModalsStateEntry | undefined;
-  delayEnter: boolean;
+export interface UseModalManagerResolvedProps {
+  open: boolean;
+  noFocusToDialog?: boolean;
+  modalOverlayTestId?: string;
+  ModalOverlay: React.ComponentType<ModalOverlayProps>;
+  onOpen?: AnyFunction;
+  onOpened?: AnyFunction;
+  onClose?: AnyFunction;
+  onClosed?: AnyFunction;
 }
 
-function getModals(children: React.ReactNode | React.ReactNode[]) {
-  return React.Children.toArray(children) as React.ReactElement[];
-}
-
-const warn = warnOnce('ModalRoot');
-
-export function modalTransitionReducer(
-  state: ModalTransitionState,
-  action: {
-    type: 'setActive' | 'entered' | 'exited' | 'inited';
-    id: string | null;
-  },
-): ModalTransitionState {
-  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);
-    }
-
-    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 };
-  }
-  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: string | null | undefined,
-  children: React.ReactNode | React.ReactNode[],
-  onOpen: (id: string) => void = noop,
-  onOpened: (id: string) => void = noop,
-  onClose: (id: string) => void = noop,
-  onClosed: (id: string) => void = noop,
-  initModal: (state: ModalsStateEntry) => void = noop,
-): ModalTransitionProps {
-  const modalsState = React.useRef<ModalsState>({}).current;
-  getModals(children).forEach((Modal) => {
-    const modalProps = Modal.props;
-    const id = getNavId(modalProps, warn);
-    const state: ModalsStateEntry = (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: string | null | undefined) => id != null && modalsState[id]?.type === 'card';
-  const onEntered = React.useCallback(
-    (id: string | null) => {
-      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: string | null) => {
-      if (id) {
-        const modalState = modalsState[id];
-
-        if (isFunction(modalState.onClosed)) {
-          modalState.onClosed();
-        } else if (isFunction(onClosed)) {
-          onClosed(id);
-        }
+export type UseModalManagerResult =
+  | { mounted: false }
+  | ({ mounted: true } & UseModalManagerResolvedProps);
+
+export const useModalManager = ({
+  id,
+  open,
+  keepMounted,
+  modalOverlayTestId,
+  noFocusToDialog,
+  onOpen,
+  onOpened,
+  onClose,
+  onClosed,
+}: UseModalManager): UseModalManagerResult => {
+  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));
       }
-
-      dispatchTransition({ type: 'exited', id });
     },
-    [modalsState, onClosed],
-  );
-  const delayEnter = Boolean(
-    transitionState.exitingModal && (isCard(activeModal) || isCard(transitionState.exitingModal)),
-  );
-  const getModalState = React.useCallback(
-    (id: string | undefined | null) => (id ? modalsState[id] : undefined),
-    [modalsState],
+    [opened, keepMounted],
   );
 
-  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);
-      }
-    }
-  }
-
-  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 (unmounted) {
+    return { mounted: false };
   }
 
   return {
-    onEnter,
-    onEntered,
-    onExit,
-    onExited,
-    ...transitionState,
-    delayEnter,
-    getModalState,
-  };
-}
+    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: any[]) {
+      if (!keepMounted) {
+        setUnmounted(true);
+      }
 
-type WithModalManager<Props extends ModalTransitionProps> = HasChildren &
-  Omit<Props, keyof ModalTransitionProps> & {
-    activeModal?: string | null;
+      if (onClosed) {
+        onClosed(...args);
+      } else {
+        context.onClosed?.(id);
+      }
+    },
   };
+};
 
-export function withModalManager(initModal: (a: ModalsStateEntry) => void = noop) {
-  return function <Props extends ModalTransitionProps>(
-    Wrapped: React.ComponentType<Props>,
-  ): React.ComponentType<WithModalManager<Props>> {
-    return function WithModalManager(props) {
-      const transitionManager = useModalManager(
-        props.activeModal,
-        props.children,
-        (props as any).onOpen,
-        (props as any).onOpened,
-        (props as any).onClose,
-        (props as any).onClosed,
-        initModal,
-      );
-      return <Wrapped {...(props as any)} {...transitionManager} />;
-    };
-  };
+function getContextCallback(id: string, fn: ModalRootCallbackFunction | undefined) {
+  return fn ? () => fn(id) : undefined;
 }

package/src/components/ModalRoot/useModalRootContext.ts

@@ -0,0 +1,21 @@
+import { useCallback, useContext } from 'react';
+import { ModalRootContext } from './ModalRootContext';
+import type { UseModalRootContext } from './types';
+
+export const useModalRootContext = (): 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 };
+};

package/src/components/ModalRoot/withModalRootContext.tsx

@@ -1,16 +1,21 @@
 'use client';
 
+/** TODO [>=8] Удалить HOC */
 import * as React from 'react';
-import type { ModalRootContextInterface } from './ModalRootContext';
-import { useModalRootContext } from './useModalRootContext';
+import { ModalRootContext } from './ModalRootContext';
+import type { ModalRootContextInterface } from './types';
 
 type PickedProps = Pick<ModalRootContextInterface, 'updateModalHeight'>;
 
+/**
+ * @deprecated HOC не актуален и будет удалён в **VKUI v8**, т.к. вызывать `updateModalHeight()`
+ *  для модальных окон с `dynamicContentHeight` больше не требуется.
+ */
 export function withModalRootContext<P extends PickedProps>(
   Component: React.ComponentType<P>,
 ): React.ComponentType<Omit<P, keyof PickedProps>> {
   function WithModalRootContext(props: Omit<P, keyof PickedProps>) {
-    const { updateModalHeight } = useModalRootContext();
+    const { updateModalHeight } = React.useContext(ModalRootContext);
 
     return <Component {...(props as P)} updateModalHeight={updateModalHeight} />;
   }

package/src/components/NativeSelect/NativeSelect.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { type ChangeEventHandler } from 'react';
+import { type ChangeEvent, type ChangeEventHandler } from 'react';
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
@@ -61,8 +61,11 @@ export interface NativeSelectProps
   defaultValue?: SelectValue;
   /**
    * Коллбэк срабатывающий при изменении выбранного значения.
+   * Вторым параметром прокидывается новое значение
+   *
+   * > ⚠️ Лучше использовать второй параметр при работе с компонентом
    */
-  onChange?: (newValue: SelectValue) => void;
+  onChange?: (e: ChangeEvent<HTMLSelectElement>, newValue: SelectValue) => void;
   placeholder?: string;
   multiline?: boolean;
   selectType?: SelectType;
@@ -72,12 +75,6 @@ export interface NativeSelectProps
   icon?: React.ReactNode;
 }
 
-export interface SelectState {
-  value?: React.SelectHTMLAttributes<HTMLSelectElement>['value'];
-  title?: string;
-  notSelected?: boolean;
-}
-
 /**
  * @see https://vkcom.github.io/VKUI/#/NativeSelect
  */
@@ -115,7 +112,13 @@ const NativeSelect = ({
 
   const _onChange: ChangeEventHandler<HTMLSelectElement> = (e) => {
     const newValue = remapFromNativeValueToSelectValue(e.target.value);
-    onChange?.(newValue);
+    if (e.target.value === NOT_SELECTED.NATIVE) {
+      e.target.value = '';
+    }
+    if (e.currentTarget.value === NOT_SELECTED.NATIVE) {
+      e.currentTarget.value = '';
+    }
+    onChange?.(e, newValue);
   };
   useIsomorphicLayoutEffect(checkSelectedOption, [children]);