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

package/src/components/View/useLayoutEffectCall.tsx

@@ -1,42 +1,20 @@
 import * as React from 'react';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 
-class LayoutEffectCall {
-  #fns: Array<() => void> = [];
-
-  /**
-   * Выполняет переданные функции
-   */
-  run() {
-    for (const fn of this.#fns) {
-      fn();
-    }
-
-    this.#fns = [];
-  }
-
-  /**
-   * Вызовет функцию после изменения DOM, но до того как пользователь увидит
-   * изменения
-   */
-  add = (fn: () => void) => {
-    this.#fns.push(fn);
-  };
-}
-
 /**
  * Возвращает функцию которая вызывает callback после изменения DOM, но до того
  * как пользователь увидит изменения
  */
 export function useLayoutEffectCall() {
-  const ref = React.useRef<LayoutEffectCall | null>(null);
-  if (!ref.current) {
-    ref.current = new LayoutEffectCall();
-  }
+  const [fns] = React.useState<Array<() => void>>(() => []);
 
   useIsomorphicLayoutEffect(() => {
-    ref.current!.run();
+    while (fns.length > 0) {
+      fns.pop()!();
+    }
   });
 
-  return ref.current.add;
+  const add = React.useCallback((fn: () => void) => fns.push(fn), [fns]);
+
+  return add;
 }

package/src/context/ModalContext.tsx

@@ -0,0 +1,18 @@
+import { createContext, useContext } from 'react';
+
+/** @private */
+export type ModalContextInterface = string;
+
+/** @private */
+export const ModalContext = createContext<ModalContextInterface | null>(null);
+
+/** @private */
+export type UseModalContextResult =
+  | { id: null; labelId?: undefined }
+  | { id: string; labelId: string };
+
+/** @private */
+export const useModalContext = (): UseModalContextResult => {
+  const id = useContext(ModalContext);
+  return id === null ? { id } : { id, labelId: `${id}-label` };
+};

package/src/helpers/range.ts

@@ -24,3 +24,7 @@ export function rangeIncrement(from: number, to: number, step = 1): number[] {
 
   return range(from, to, step);
 }
+
+export function inRange(number: number, from: number, to: number) {
+  return number >= from && number <= to;
+}

package/src/hooks/useObjectMemo.ts

@@ -1,7 +1,13 @@
 import * as React from 'react';
 import { isEqual } from '@vkontakte/vkjs';
 
+/**
+ * @deprecated используйте React.useMemo
+ */
 export function useObjectMemo<T>(object: T): T {
+  /**
+   * Запись и чтение во время рендеринга в useRef запрещена
+   */
   const cache = React.useRef(object);
   if (!isEqual(cache.current, object)) {
     cache.current = object;

package/src/hooks/usePrevious.ts

@@ -1,5 +1,8 @@
 import * as React from 'react';
 
+/**
+ * @deprecated постарайтесь избавится от этого хука или используйте `useStateWithPrev`
+ */
 export function usePrevious<T>(value: T): T | undefined {
   const ref = React.useRef<T | undefined>();
 
@@ -7,5 +10,11 @@ export function usePrevious<T>(value: T): T | undefined {
     ref.current = value;
   });
 
+  /**
+   * ref.current нельзя читать во время рендеринга
+   *
+   * - see https://react.dev/reference/react/useRef
+   * - also https://react.dev/reference/react/useState#storing-information-from-previous-renders
+   */
   return ref.current;
 }

package/src/hooks/useStableCallback.ts

@@ -17,5 +17,5 @@ export function useStableCallback<Args extends unknown[], Return>(
   useIsomorphicLayoutEffect(() => {
     ref.current = fn;
   });
-  return React.useRef((...args: Args) => (0, ref.current)(...args)).current;
+  return React.useCallback((...args: Args) => (0, ref.current)(...args), []);
 }

package/src/hooks/useStateWithPrev.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+
+function basicStateInitializer<S>(initialArg: S | (() => S)): S {
+  return initialArg instanceof Function ? initialArg() : initialArg;
+}
+
+function initializer<T>(initialArg: T | (() => T)): [T, T | undefined] {
+  const initialState = basicStateInitializer(initialArg);
+
+  return [initialState, undefined];
+}
+
+function basicStateReducer<S>(state: S, action: React.SetStateAction<S>): S {
+  return action instanceof Function ? action(state) : action;
+}
+
+function reducer<T>(
+  [prevState]: [T, T | undefined],
+  action: React.SetStateAction<T>,
+): [T, T | undefined] {
+  const newState = basicStateReducer(prevState, action);
+
+  return [newState, prevState];
+}
+
+/**
+ * Возвращает значение с текущим и предыдущим состоянием
+ *
+ * # Пример
+ *
+ * ```ts
+ * const [[count, prevCount], setCount] = useStateWithPrev(initialState);
+ * ```
+ */
+export function useStateWithPrev<T>(
+  initialState: T | (() => T),
+): [[T, T | undefined], React.Dispatch<React.SetStateAction<T>>] {
+  return React.useReducer<React.Reducer<[T, T | undefined], React.SetStateAction<T>>, undefined>(
+    reducer,
+    undefined,
+    () => initializer(initialState),
+  );
+}

package/src/hooks/useSyncHTMLWithBaseVKUIClasses.ts

@@ -0,0 +1,39 @@
+import type * as React from 'react';
+import { getParentElement } from '../components/AppRoot/helpers';
+import { type AppRootMode } from '../components/AppRoot/types';
+import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
+
+export function useSyncHTMLWithBaseVKUIClasses({
+  appRootRef,
+  mode,
+  enable,
+}: {
+  appRootRef: React.RefObject<HTMLElement>;
+  mode: AppRootMode;
+  enable: boolean;
+}) {
+  useIsomorphicLayoutEffect(() => {
+    if (!enable) {
+      return;
+    }
+
+    const htmlElement = appRootRef.current?.ownerDocument.documentElement;
+    const parentElement = getParentElement(appRootRef.current);
+
+    if (mode === 'full') {
+      /* eslint-disable-next-line no-restricted-properties */
+      htmlElement?.classList.add('vkui');
+    }
+    /* eslint-disable-next-line no-restricted-properties */
+    parentElement?.classList.add('vkui__root');
+
+    return () => {
+      if (mode === 'full') {
+        /* eslint-disable-next-line no-restricted-properties */
+        htmlElement?.classList.remove('vkui');
+      }
+      /* eslint-disable-next-line no-restricted-properties */
+      parentElement?.classList.remove('vkui__root');
+    };
+  }, []);
+}

package/src/hooks/useSyncHTMLWithTokens.ts

@@ -0,0 +1,27 @@
+import { useTokensClassName } from '../lib/tokens/useTokenClassName';
+import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
+
+export function useSyncHTMLWithTokens({
+  appRootRef,
+  enable,
+}: {
+  appRootRef: React.RefObject<HTMLElement>;
+  enable: boolean;
+}) {
+  const tokenClassName = useTokensClassName();
+
+  useIsomorphicLayoutEffect(() => {
+    if (!enable) {
+      return;
+    }
+
+    const htmlElement = appRootRef.current?.ownerDocument.documentElement;
+    /* eslint-disable-next-line no-restricted-properties */
+    htmlElement?.classList.add(tokenClassName);
+
+    return () => {
+      /* eslint-disable-next-line no-restricted-properties */
+      htmlElement?.classList.remove(tokenClassName);
+    };
+  }, [tokenClassName]);
+}

package/src/hooks/useVirtualKeyboardState.ts

@@ -0,0 +1,152 @@
+import { useEffect, useRef, useState } from 'react';
+import { debounce, throttle } from '@vkontakte/vkjs';
+import {
+  getVisualViewport,
+  isHTMLContentEditableElement,
+  useDOM,
+  type VisualViewport,
+} from '../lib/dom';
+
+export type VirtualKeyboardState = { opened: boolean };
+
+/**
+ * > см. [Неудобно работать с клавиатурой в ModalPage на iOS #3792](https://github.com/VKCOM/VKUI/discussions/3792)
+ *
+ * Для реализации модальных окон для тач-устройств, мы вынуждены отслеживать открытие виртуальной
+ * клавиатуры. По состоянию `opened` компоненты должны временно блокировать дальнейшее взаимодействие
+ * с ними. Например, отключить закрытие по свайпу, чтобы не мешать пользователю работать с полями
+ * ввода.
+ *
+ * Помимо этого в **Safari** и в **Chrome Android** нам нужно отслеживать прокрутку области видимости
+ * пользователем, т.к. в упомянутых браузерах, виртуальная клавиатура поднимает контент вверх
+ * не изменяя её высоту. Из-за этого появляется возможность прокручивать `window`, что визуально
+ * выглядит плохо. В хуке мы ловим фокус на поле ввода и далее, если это тач-устройство, то
+ * отлавливаем события прокрутки на `window`, чтобы сохранять текущую её позицию через `scrollTo(x, y)`.
+ *
+ * **Troubleshooting**
+ *
+ * - в **Safari** и в **Chrome Android** шапка будет выдвигаться вверх – хаки с выставлением `offsetTop`
+ *   из `VisualViewport` порождают reflow/repaint и прыгания контента;
+ * - в **Safari** изменение высоты виртуальной клавиатуры, например, на выбор эмодзи, не поднимет
+ *   `VisualViewport` из-за чего клавиатура может частично перекрыть элементы интерфейса.
+ *
+ * **Полезные ссылки**
+ *
+ * - [The Eccentric Ways of iOS Safari with the Keyboard](https://web.archive.org/web/20240920081850/https://blog.opendigerati.com/the-eccentric-ways-of-ios-safari-with-the-keyboard-b5aa3f34228d?gi=5411141a13e0)
+ * - [Dealing with the visual viewport](https://web.archive.org/web/20240920082109/https://rdavis.io/articles/dealing-with-the-visual-viewport)
+ * - [How to get the document height in iOS Safari when the on-screen keyboard is open](https://web.archive.org/web/20240920082743/https://martijnhols.nl/gists/how-to-get-document-height-ios-safari-osk)
+ */
+export function useVirtualKeyboardState(enabled = true): VirtualKeyboardState {
+  const { window, document } = useDOM();
+
+  const [focusedEl, setFocusedEl] = useState<Element | null>(null);
+  const [keyboardOpened, setKeyboardOpened] = useState(false);
+
+  const prevVisualViewportRef = useRef<VisualViewport | null>(null);
+
+  useEffect(
+    function handleFocusedEl() {
+      if (!enabled || !window || !document) {
+        return;
+      }
+
+      const handleFocus = (event: FocusEvent | true) => {
+        const activeElement = event === true ? document.activeElement : (event.target as Element);
+
+        if (isHTMLContentEditableElement(activeElement)) {
+          const patchedEvent = event === true ? { type: 'focusin' } : event;
+          switch (patchedEvent.type) {
+            case 'focusin':
+              prevVisualViewportRef.current = getVisualViewport(window);
+              setFocusedEl(activeElement);
+              break;
+            case 'focusout':
+              prevVisualViewportRef.current = null;
+              setKeyboardOpened(false);
+              setFocusedEl(null);
+              break;
+          }
+        }
+      };
+
+      /**
+       * У полей с autoFocus не отлавливаются события `focus`, для этого вызываем обработчик
+       * вручную, чтобы иметь хоть какое-то понимание происходящего.
+       */
+      handleFocus(true);
+
+      const eventOptions = { passive: true, capture: false };
+      document.addEventListener('focusin', handleFocus, eventOptions);
+      document.addEventListener('focusout', handleFocus, eventOptions);
+
+      return () => {
+        prevVisualViewportRef.current = null;
+        document.removeEventListener('focusin', handleFocus, eventOptions);
+        document.removeEventListener('focusout', handleFocus, eventOptions);
+      };
+    },
+    [enabled, window, document],
+  );
+
+  useEffect(
+    function handleVirtualKeyboardOpened() {
+      if (!focusedEl || !window) {
+        return;
+      }
+
+      const handleResize = debounce(() => {
+        /* istanbul ignore if: нереалистичный кейс, проверяем в угоду TypeScript */
+        if (prevVisualViewportRef.current === null) {
+          return;
+        }
+
+        const nextVisualViewport = getVisualViewport(window);
+
+        const { offsetTop: prevOffsetTop, height: prevHeight } = prevVisualViewportRef.current;
+        const { offsetTop: nextOffsetTop, height: nextHeight } = nextVisualViewport;
+        if (prevOffsetTop !== nextOffsetTop || prevHeight !== nextHeight) {
+          setKeyboardOpened(true);
+          prevVisualViewportRef.current = nextVisualViewport;
+        }
+      }, 100);
+
+      if (window.visualViewport) {
+        window.visualViewport.addEventListener('resize', handleResize);
+      } else {
+        window.addEventListener('resize', handleResize);
+      }
+
+      return function dispose() {
+        if (window.visualViewport) {
+          window.visualViewport.removeEventListener('resize', handleResize);
+        } else {
+          window.removeEventListener('resize', handleResize);
+        }
+      };
+    },
+    [focusedEl, window],
+  );
+
+  useEffect(
+    function preventWindowScrollIfKeyboardOpened() {
+      if (!keyboardOpened || !window) {
+        return;
+      }
+
+      const prevent = throttle(() => {
+        if (prevVisualViewportRef.current) {
+          window.scrollTo(0, prevVisualViewportRef.current.offsetTop);
+        }
+      }, 100);
+
+      window.addEventListener('scroll', prevent, { passive: true });
+
+      return function dispose() {
+        window.removeEventListener('scroll', prevent);
+      };
+    },
+    [keyboardOpened, window],
+  );
+
+  return { opened: keyboardOpened };
+}

package/src/index.ts

@@ -142,16 +142,22 @@ export type {
 /**
  * Modals
  */
-export { ModalRoot } from './components/ModalRoot/ModalRootAdaptive';
-export type { ModalRootProps } from './components/ModalRoot/types';
+export { ModalRoot } from './components/ModalRoot/ModalRoot';
+export type {
+  ModalRootProps,
+  ModalRootContextInterface,
+  UseModalRootContext,
+} from './components/ModalRoot/types';
 export { withModalRootContext } from './components/ModalRoot/withModalRootContext';
 export { ModalRootContext } from './components/ModalRoot/ModalRootContext';
+export { useModalRootContext } from './components/ModalRoot/useModalRootContext';
+export { ModalPageContent } from './components/ModalPageContent/ModalPageContent';
 export { ModalPage } from './components/ModalPage/ModalPage';
-export type { ModalPageProps } from './components/ModalPage/ModalPage';
+export type { ModalPageProps } from './components/ModalPage/types';
 export { ModalPageHeader } from './components/ModalPageHeader/ModalPageHeader';
 export type { ModalPageHeaderProps } from './components/ModalPageHeader/ModalPageHeader';
 export { ModalCard } from './components/ModalCard/ModalCard';
-export type { ModalCardProps } from './components/ModalCard/ModalCard';
+export type { ModalCardProps } from './components/ModalCard/types';
 export { ModalDismissButton } from './components/ModalDismissButton/ModalDismissButton';
 export type { ModalDismissButtonProps } from './components/ModalDismissButton/ModalDismissButton';
 
@@ -356,14 +362,24 @@ export type { SkeletonProps } from './components/Skeleton/Skeleton';
  */
 export { Div } from './components/Div/Div';
 export type { DivProps } from './components/Div/Div';
+export {
+  DEFAULT_ARROW_HEIGHT,
+  DEFAULT_ARROW_WIDTH,
+  DEFAULT_ARROW_PADDING,
+  DefaultIcon,
+} from './components/FloatingArrow/DefaultIcon';
+export { FloatingArrow } from './components/FloatingArrow/FloatingArrow';
+export type { FloatingArrowProps } from './components/FloatingArrow/FloatingArrow';
 export { Touch } from './components/Touch/Touch';
 export type { TouchProps, CustomTouchEvent } from './components/Touch/Touch';
 export { PanelSpinner } from './components/PanelSpinner/PanelSpinner';
 export type { PanelSpinnerProps } from './components/PanelSpinner/PanelSpinner';
 export { PanelHeaderClose } from './components/PanelHeaderClose/PanelHeaderClose';
+export type { PanelHeaderCloseProps } from './components/PanelHeaderClose/PanelHeaderClose';
 export { PanelHeaderBack } from './components/PanelHeaderBack/PanelHeaderBack';
 export type { PanelHeaderBackProps } from './components/PanelHeaderBack/PanelHeaderBack';
 export { PanelHeaderSubmit } from './components/PanelHeaderSubmit/PanelHeaderSubmit';
+export type { PanelHeaderSubmitProps } from './components/PanelHeaderSubmit/PanelHeaderSubmit';
 export { PanelHeaderEdit } from './components/PanelHeaderEdit/PanelHeaderEdit';
 export type { PanelHeaderEditProps } from './components/PanelHeaderEdit/PanelHeaderEdit';
 export { ModalCardBase } from './components/ModalCardBase/ModalCardBase';
@@ -428,7 +444,6 @@ export { useNavTransition } from './components/NavTransitionContext/NavTransitio
 export { useNavDirection } from './components/NavTransitionDirectionContext/NavTransitionDirectionContext';
 export { useNavId } from './components/NavIdContext/useNavId';
 export type { TransitionDirection } from './components/NavTransitionDirectionContext/NavTransitionDirectionContext';
-export { useModalRootContext } from './components/ModalRoot/useModalRootContext';
 
 /**
  * Utils
@@ -471,5 +486,7 @@ export type { TransitionContextProps } from './components/NavTransitionContext/N
  */
 export { ViewInfinite as unstable_ViewInfinite } from './components/View/ViewInfinite';
 export type { ViewInfiniteProps as unstable_ViewInfiniteProps } from './components/View/ViewInfinite';
+export { ModalPageFooter as unstable_ModalPageFooter } from './components/ModalPageFooter/ModalPageFooter';
+export type { ModalPageFooterProps as unstable_ModalPageFooterProps } from './components/ModalPageFooter/ModalPageFooter';
 
 import './styles/common.css';

package/src/lib/SSR.tsx

@@ -2,9 +2,7 @@
 
 import * as React from 'react';
 import { ConfigProviderOverride } from '../components/ConfigProvider/ConfigProviderOverride';
-import { useObjectMemo } from '../hooks/useObjectMemo';
 import { type BrowserInfo, computeBrowserInfo } from './browser';
-import { DOMContext, getDOM } from './dom';
 import { platform as getPlatform } from './platform';
 
 export interface SSRWrapperProps {
@@ -21,11 +19,7 @@ export const SSRWrapper: React.FC<SSRWrapperProps> = ({ userAgent, browserInfo,
     browserInfo = computeBrowserInfo(userAgent);
   }
 
-  const dom = useObjectMemo(getDOM());
-
   return (
-    <ConfigProviderOverride platform={getPlatform(browserInfo)}>
-      <DOMContext.Provider value={dom}>{children}</DOMContext.Provider>
-    </ConfigProviderOverride>
+    <ConfigProviderOverride platform={getPlatform(browserInfo)}>{children}</ConfigProviderOverride>
   );
 };

package/src/lib/adaptivity/functions.ts

@@ -1,6 +1,7 @@
 import type { Exact } from '../../types';
+import { getWindow } from '../dom';
 import { type PlatformType } from '../platform';
-import { BREAKPOINTS } from './breakpoints';
+import { BREAKPOINTS, MEDIA_QUERIES } from './breakpoints';
 import {
   type SizeTypeValues,
   VIEW_WIDTH_TO_CSS_BREAKPOINT_MAP,
@@ -138,6 +139,12 @@ export function tryToCheckIsDesktop(
   return (widthIsLikeDesktop && otherParametersIsLikeDesktop) || IS_VKCOM_CRUTCH;
 }
 
+export function isSmallTablePlus(el: HTMLElement) {
+  const win = getWindow(el);
+  // eslint-disable-next-line no-restricted-properties
+  return win ? win.matchMedia(MEDIA_QUERIES.SMALL_TABLET_PLUS).matches : false;
+}
+
 /**
  * Конвертирует `viewWidth` в CSS брейкпоинты (см. тесты для наглядности).
  *

package/src/lib/animation/useCSSKeyframesAnimationController.ts

@@ -1,6 +1,5 @@
-import { useState } from 'react';
+import * as React from 'react';
 import { noop } from '@vkontakte/vkjs';
-import { usePrevious } from '../../hooks/usePrevious';
 import { useStableCallback } from '../../hooks/useStableCallback';
 import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
 
@@ -29,10 +28,14 @@ export const useCSSKeyframesAnimationController = (
   }: UseCSSAnimationControllerCallback = {},
   disableInitAnimation = false,
 ): [AnimationState, AnimationHandlers] => {
-  const [state, setState] = useState<AnimationState>(() =>
+  const [state, setState] = React.useState<AnimationState>(() =>
     disableInitAnimation ? (stateProp === 'enter' ? 'entered' : 'exited') : stateProp,
   );
-  const prevState = usePrevious(stateProp);
+
+  const prevStateRef = React.useRef<'enter' | 'exit' | undefined>(undefined);
+  React.useEffect(() => {
+    prevStateRef.current = stateProp;
+  });
 
   const onAnimationStart = () => {
     if (state === 'enter') {
@@ -67,6 +70,8 @@ export const useCSSKeyframesAnimationController = (
 
   useIsomorphicLayoutEffect(
     function updateState() {
+      const prevState = prevStateRef.current;
+
       if (prevState === stateProp) {
         return;
       }
@@ -89,7 +94,7 @@ export const useCSSKeyframesAnimationController = (
           break;
       }
     },
-    [state, prevState, stateProp, onEnter, onExit],
+    [state, stateProp, onEnter, onExit],
   );
 
   return [state, { onAnimationStart, onAnimationEnd }];

package/src/lib/animation/useCSSTransition.ts

@@ -1,13 +1,7 @@
-import {
-  type TransitionEvent,
-  type TransitionEventHandler,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { type TransitionEvent, type TransitionEventHandler, useEffect, useRef } from 'react';
 import { noop } from '@vkontakte/vkjs';
-import { usePrevious } from '../../hooks/usePrevious';
 import { useStableCallback } from '../../hooks/useStableCallback';
+import { useStateWithPrev } from '../../hooks/useStateWithPrev';
 
 /* istanbul ignore next: особенность рендера в браузере когда меняется className, в Jest не воспроизвести */
 const forceReflowForFixNewMountedElement = (node: Element | null) => void node?.scrollTop;
@@ -72,7 +66,7 @@ export const useCSSTransition = <Ref extends Element = Element>(
   const onExited = useStableCallback(onExitedProp || noop);
 
   const ref = useRef<Ref | null>(null);
-  const [state, setState] = useState<UseCSSTransitionState>(() => {
+  const [[state, prevState], setState] = useStateWithPrev<UseCSSTransitionState>(() => {
     if (!inProp) {
       return 'exited';
     }
@@ -84,7 +78,6 @@ export const useCSSTransition = <Ref extends Element = Element>(
 
     return 'entered';
   });
-  const prevState = usePrevious(state);
 
   useEffect(
     function updateState() {
@@ -158,6 +151,7 @@ export const useCSSTransition = <Ref extends Element = Element>(
 
       state,
       prevState,
+      setState,
 
       enableAppear,
       enableEnter,