@vkontakte/vkui 8.1.3 → 8.2.0

package/src/hooks/useFocusVisible.ts

@@ -1,5 +1,5 @@
-import { type FocusEvent, useCallback, useContext, useState } from 'react';
-import { AppRootContext } from '../components/AppRoot/AppRootContext';
+import { type FocusEvent, useCallback, useState } from 'react';
+import { useKeyboardInputTracker } from './useKeyboardInputTracker';
 
 /**
  * Определяет фокус элемента, когда его наличие необходимо обозначить визуально.
@@ -14,29 +14,21 @@ export function useFocusVisible(): {
   onFocus: (event: FocusEvent<HTMLElement>) => void;
   onBlur: (event: FocusEvent<HTMLElement>) => void;
 } {
-  const [isFocused, setIsFocused] = useState(false);
-
-  // FIXME: Избавиться от чека контекста, так как без AppRoot не работает фокус
-  const withKeyboardInputCheck = true;
-  const { keyboardInput } = useContext(AppRootContext);
+  const [focusVisible, setFocusVisible] = useState(false);
+  const keyboardInputRef = useKeyboardInputTracker();
 
   const onFocus = useCallback(
     (event: FocusEvent<HTMLElement>) => {
       event.stopPropagation();
-      setIsFocused(true);
-    },
-    [setIsFocused],
-  );
-
-  const onBlur = useCallback(
-    (event: FocusEvent<HTMLElement>) => {
-      event.stopPropagation();
-      setIsFocused(false);
+      setFocusVisible(Boolean(keyboardInputRef.current));
     },
-    [setIsFocused],
+    [keyboardInputRef],
   );
 
-  const focusVisible = withKeyboardInputCheck ? keyboardInput && isFocused : isFocused;
+  const onBlur = useCallback((event: FocusEvent<HTMLElement>) => {
+    event.stopPropagation();
+    setFocusVisible(false);
+  }, []);
 
   return {
     focusVisible,

package/src/hooks/useFocusWithin.ts

@@ -1,36 +1,39 @@
 import * as React from 'react';
-import { useDOM } from '../lib/dom';
 import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
 
 const isFocusWithin = <T extends Element>(ref: T, document: Document) =>
   ref.contains(document.activeElement);
 
 export function useFocusWithin(ref: React.RefObject<HTMLElement | null>): boolean {
-  const { document } = useDOM();
   const [focusWithin, setFocusWithin] = React.useState<boolean>(false);
 
-  useIsomorphicLayoutEffect(function handleAutoFocus() {
-    /* istanbul ignore if: невозможный кейс, т.к. в SSR эффекты не вызываются. Проверка на будущее, если вдруг эффект будет вызываться. */
-    if (!document) {
-      return;
-    }
-
-    const handleFocusOrBlurEvents = () => {
-      if (ref.current) {
-        setFocusWithin(isFocusWithin(ref.current, document));
+  useIsomorphicLayoutEffect(
+    function handleAutoFocus() {
+      /* istanbul ignore if: невозможный кейс, т.к. в SSR эффекты не вызываются. Проверка на будущее, если вдруг эффект будет вызываться. */
+      if (!ref.current) {
+        return;
       }
-    };
-
-    // Вызываем в начале, чтобы проверить autoFocus
-    void handleFocusOrBlurEvents();
-
-    document.addEventListener('focus', handleFocusOrBlurEvents, { capture: true });
-    document.addEventListener('blur', handleFocusOrBlurEvents, { capture: true });
-    return () => {
-      document.removeEventListener('focus', handleFocusOrBlurEvents, { capture: true });
-      document.removeEventListener('blur', handleFocusOrBlurEvents, { capture: true });
-    };
-  }, []);
+
+      const document = ref.current.ownerDocument;
+
+      const handleFocusOrBlurEvents = () => {
+        if (ref.current) {
+          setFocusWithin(isFocusWithin(ref.current, document));
+        }
+      };
+
+      // Вызываем в начале, чтобы проверить autoFocus
+      void handleFocusOrBlurEvents();
+
+      document.addEventListener('focus', handleFocusOrBlurEvents, { capture: true });
+      document.addEventListener('blur', handleFocusOrBlurEvents, { capture: true });
+      return () => {
+        document.removeEventListener('focus', handleFocusOrBlurEvents, { capture: true });
+        document.removeEventListener('blur', handleFocusOrBlurEvents, { capture: true });
+      };
+    },
+    [ref],
+  );
 
   return focusWithin;
 }

package/src/hooks/useGlobalEscKeyDown.ts

@@ -1,13 +1,7 @@
-import { useRef } from 'react';
 import { Keys, pressedKey } from '../lib/accessibility';
 import { useDOM } from '../lib/dom';
 import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
 
-const EVENT_OPTIONS = {
-  passive: true,
-  capture: true,
-};
-
 /**
  * Завязывается на document.
  *
@@ -16,15 +10,11 @@ const EVENT_OPTIONS = {
 export const useGlobalEscKeyDown = (
   init: boolean,
   callback?: ((event: KeyboardEvent) => void) | undefined,
-  optionsProp?: AddEventListenerOptions | undefined,
+  optionsProp: AddEventListenerOptions | undefined = {},
 ): void => {
   const { document } = useDOM();
 
-  const options = useRef<AddEventListenerOptions>(optionsProp || EVENT_OPTIONS);
-
-  useIsomorphicLayoutEffect(() => {
-    options.current = optionsProp || EVENT_OPTIONS;
-  }, [options]);
+  const { capture = true, passive = true, once = false, signal } = optionsProp;
 
   useIsomorphicLayoutEffect(() => {
     if (!document || !init || !callback) {
@@ -35,9 +25,16 @@ export const useGlobalEscKeyDown = (
         callback(event);
       }
     };
-    document.addEventListener('keydown', handleKeyDown, options.current);
+    const options: AddEventListenerOptions = {
+      capture,
+      passive,
+      once,
+      ...(signal !== undefined ? { signal } : {}),
+    };
+
+    document.addEventListener('keydown', handleKeyDown, options);
     return () => {
-      document.removeEventListener('keydown', handleKeyDown, options.current);
+      document.removeEventListener('keydown', handleKeyDown, options);
     };
-  }, [init, document, callback]);
+  }, [init, document, callback, capture, passive, once, signal]);
 };

package/src/hooks/useGlobalOnClickOutside.ts

@@ -1,6 +1,7 @@
 import type * as React from 'react';
 import { isElement, useDOM } from '../lib/dom';
 import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
+import { useStableCallback } from './useStableCallback';
 
 export const useGlobalOnEventOutside = <
   T extends React.RefObject<ElementType | null> | undefined | null,
@@ -11,6 +12,7 @@ export const useGlobalOnEventOutside = <
   ...refs: T[]
 ): void => {
   const { document } = useDOM();
+  const stableCallback = useStableCallback(callback);
   useIsomorphicLayoutEffect(() => {
     const someRefNotNull = refs.some((ref) => ref && ref.current !== null);
     if (!document || !someRefNotNull) {
@@ -22,7 +24,7 @@ export const useGlobalOnEventOutside = <
         isElement(targetEl) &&
         refs.some((ref) => ref && ref.current && ref.current.contains(targetEl));
       if (!someRefHasTargetEl) {
-        callback(event);
+        stableCallback(event);
       }
     };
     document.addEventListener(event, handleClick, {
@@ -32,7 +34,8 @@ export const useGlobalOnEventOutside = <
     return () => {
       document.removeEventListener(event, handleClick, true);
     };
-  }, [document, callback, ...refs]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [document, stableCallback, event, ...refs]);
 };
 
 /**

package/src/hooks/useKeyboardInputTracker.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import type * as React from 'react';
 import { isKeyboardFocusingStarted } from '../lib/accessibility';
 import { useDOM } from '../lib/dom';
 import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
@@ -11,76 +11,89 @@ const EVENT_OPTIONS = {
   capture: true,
 };
 
-/**
- * Чтобы оптимизировать рендер, сохраняем в ref.
- *
- * В контекст можно передать через getter, подробнее в примере ниже.
- *
- * ```tsx
- * const keyboardInputTrackerRef = useKeyboardInputTracker();
- * <SomeContext.Provider value={{
- *  get keyboardInput() {
- *    return keyboardInputTrackerRef.current;
- *  }
- * }}>
- *  {children}
- * </SomeContext.Provider>
- * ```
- *
- * @private
- */
-export function useKeyboardInputTracker(): React.RefObject<boolean> {
-  const { document } = useDOM();
-  const keyboardFocusingStartedRef = React.useRef(false);
+let keyboardInputState = false;
+let mountedTrackers = 0;
+let detachListeners: null | (() => void) = null;
 
-  useIsomorphicLayoutEffect(() => {
-    /* istanbul ignore if: невозможный кейс, т.к. в SSR эффекты не вызываются. Проверка на будущее, если вдруг эффект будет вызываться. */
-    if (!document) {
-      return;
+const keyboardFocusingStartedRef: React.RefObject<boolean> = {
+  get current() {
+    return keyboardInputState;
+  },
+};
+
+const setKeyboardInputState = (nextValue: boolean) => {
+  if (keyboardInputState !== nextValue) {
+    keyboardInputState = nextValue;
+  }
+};
+
+const attachKeyboardInputListeners = (document: Document) => {
+  const handleKeydown = (event: KeyboardEvent) => {
+    if (isKeyboardFocusingStarted(event)) {
+      setKeyboardInputState(true);
     }
+  };
 
-    const handleKeydown = (event: KeyboardEvent) => {
-      if (isKeyboardFocusingStarted(event)) {
-        keyboardFocusingStartedRef.current = true;
-      }
-    };
+  const handleCustomEnableKeyboardEvent = () => {
+    setKeyboardInputState(true);
+  };
 
-    const handleCustomEnableKeyboardEvent = () => {
-      keyboardFocusingStartedRef.current = true;
-    };
+  const handleCustomDisableKeyboardEvent = () => {
+    setKeyboardInputState(false);
+  };
 
-    const handleCustomDisableKeyboardEvent = () => {
-      keyboardFocusingStartedRef.current = false;
-    };
+  document.addEventListener('keydown', handleKeydown, EVENT_OPTIONS);
+  document.addEventListener(
+    ENABLE_KEYBOARD_INPUT_EVENT_NAME,
+    handleCustomEnableKeyboardEvent,
+    EVENT_OPTIONS,
+  );
+  document.addEventListener(
+    DISABLE_KEYBOARD_INPUT_EVENT_NAME,
+    handleCustomDisableKeyboardEvent,
+    EVENT_OPTIONS,
+  );
+  document.addEventListener('mousedown', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
+  document.addEventListener('touchstart', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
 
-    document.addEventListener('keydown', handleKeydown, EVENT_OPTIONS);
-    document.addEventListener(
+  return () => {
+    document.removeEventListener('keydown', handleKeydown, EVENT_OPTIONS);
+    document.removeEventListener(
       ENABLE_KEYBOARD_INPUT_EVENT_NAME,
       handleCustomEnableKeyboardEvent,
       EVENT_OPTIONS,
     );
-    document.addEventListener(
+    document.removeEventListener(
       DISABLE_KEYBOARD_INPUT_EVENT_NAME,
       handleCustomDisableKeyboardEvent,
       EVENT_OPTIONS,
     );
-    document.addEventListener('mousedown', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
-    document.addEventListener('touchstart', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
+    document.removeEventListener('mousedown', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
+    document.removeEventListener('touchstart', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
+  };
+};
+
+export function useKeyboardInputTracker(): React.RefObject<boolean> {
+  const { document } = useDOM();
+
+  useIsomorphicLayoutEffect(() => {
+    /* istanbul ignore if: невозможный кейс, т.к. в SSR эффекты не вызываются. Проверка на будущее, если вдруг эффект будет вызываться. */
+    if (!document) {
+      return;
+    }
+
+    mountedTrackers += 1;
+
+    if (!detachListeners) {
+      detachListeners = attachKeyboardInputListeners(document);
+    }
 
     return () => {
-      document.removeEventListener('keydown', handleKeydown, EVENT_OPTIONS);
-      document.removeEventListener(
-        ENABLE_KEYBOARD_INPUT_EVENT_NAME,
-        handleCustomEnableKeyboardEvent,
-        EVENT_OPTIONS,
-      );
-      document.removeEventListener(
-        DISABLE_KEYBOARD_INPUT_EVENT_NAME,
-        handleCustomDisableKeyboardEvent,
-        EVENT_OPTIONS,
-      );
-      document.removeEventListener('mousedown', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
-      document.removeEventListener('touchstart', handleCustomDisableKeyboardEvent, EVENT_OPTIONS);
+      mountedTrackers -= 1;
+      if (mountedTrackers === 0 && detachListeners) {
+        detachListeners();
+        detachListeners = null;
+      }
     };
   }, [document]);
 

package/src/hooks/useLatestRef.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
+
+export function useLatestRef<T>(value: T): React.RefObject<T> {
+  const ref = React.useRef(value);
+
+  useIsomorphicLayoutEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref;
+}

package/src/hooks/useLocale.ts

@@ -1,7 +1,6 @@
-import { useConfigProvider } from '../components/ConfigProvider/ConfigProviderContext';
+import * as React from 'react';
+import { LocaleContext } from '../components/ConfigProvider/ConfigProviderSubContexts';
 
 export function useLocale(): string {
-  const { locale } = useConfigProvider();
-
-  return locale;
+  return React.useContext(LocaleContext);
 }

package/src/hooks/useMediaQueryMatch.ts

@@ -28,7 +28,7 @@ export function useMediaQueryMatches(
     };
     match.addEventListener('change', handleMediaQueryChange);
     return () => match.removeEventListener('change', handleMediaQueryChange);
-  }, [media, window]);
+  }, [disable, media, window]);
 
   return matches;
 }

package/src/hooks/useMutationObserver.ts

@@ -2,7 +2,7 @@ import type * as React from 'react';
 import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
 import { useStableCallback } from './useStableCallback';
 
-export const DEFAULT_MUTATION_OBSERVER_OPTIONS: MutationObserverInit = {
+const DEFAULT_MUTATION_OBSERVER_OPTIONS: MutationObserverInit = {
   subtree: true,
   childList: true,
 };
@@ -10,7 +10,6 @@ export const DEFAULT_MUTATION_OBSERVER_OPTIONS: MutationObserverInit = {
 export const useMutationObserver = (
   ref: React.RefObject<HTMLElement | null> | null,
   callback: () => void,
-  options: MutationObserverInit = DEFAULT_MUTATION_OBSERVER_OPTIONS,
 ): void => {
   const stableCallback = useStableCallback(callback);
 
@@ -19,7 +18,7 @@ export const useMutationObserver = (
       return;
     }
     const observer = new MutationObserver(stableCallback);
-    observer.observe(ref.current, options);
+    observer.observe(ref.current, DEFAULT_MUTATION_OBSERVER_OPTIONS);
     return () => observer.disconnect();
   }, [ref, stableCallback]);
 };

package/src/hooks/usePlatform.ts

@@ -1,8 +1,7 @@
-import { useConfigProvider } from '../components/ConfigProvider/ConfigProviderContext';
+import * as React from 'react';
+import { PlatformContext } from '../components/ConfigProvider/ConfigProviderSubContexts';
 import type { PlatformType } from '../lib/platform';
 
 export function usePlatform(): PlatformType {
-  const { platform } = useConfigProvider();
-
-  return platform;
+  return React.useContext(PlatformContext);
 }

package/src/hooks/useResizeObserver.ts

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
 import type * as React from 'react';
-import { useDOM } from '../lib/dom';
+import { isWindow } from '../lib/dom';
 import { isRefObject } from '../lib/isRefObject';
 import { useStableCallback } from './useStableCallback';
 
@@ -12,15 +12,14 @@ export function useResizeObserver(
   callback: (element: HTMLElement | Window) => void,
 ): void {
   const stableCallback = useStableCallback(callback);
-  const { window } = useDOM();
 
   useEffect(
     function addResizeObserverHandler() {
-      if (!ref || !window) {
+      if (!ref) {
         return;
       }
 
-      if (ref === window) {
+      if (isWindow(ref)) {
         const onResize = () => stableCallback(ref);
         ref.addEventListener('resize', onResize);
         return () => ref.removeEventListener('resize', onResize);
@@ -40,6 +39,6 @@ export function useResizeObserver(
 
       return () => observer.disconnect();
     },
-    [ref, stableCallback, window],
+    [ref, stableCallback],
   );
 }

package/src/hooks/useSyncHTMLWithBaseVKUIClasses.ts

@@ -49,5 +49,5 @@ export function useSyncHTMLWithBaseVKUIClasses({
       /* eslint-disable-next-line no-restricted-properties */
       parentElement?.classList.remove(...parentElementClasses);
     };
-  }, [mode, enable, layout]);
+  }, [mode, enable, layout, appRootRef]);
 }

package/src/hooks/useSyncHTMLWithTokens.ts

@@ -23,5 +23,5 @@ export function useSyncHTMLWithTokens({
       /* eslint-disable-next-line no-restricted-properties */
       htmlElement?.classList.remove(tokenClassName);
     };
-  }, [tokenClassName]);
+  }, [enable, tokenClassName, appRootRef]);
 }

package/src/hooks/useWaitTransitionFinish.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { noop } from '@vkontakte/vkjs';
-import { useDOM } from '../lib/dom';
 
 export const useWaitTransitionFinish = (): ((
   element: HTMLElement | undefined | null,
@@ -8,7 +7,6 @@ export const useWaitTransitionFinish = (): ((
   durationFallback: number,
 ) => void) => {
   const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
-  const { document } = useDOM();
   const detach = React.useRef(noop);
 
   const remove = React.useCallback(() => {
@@ -22,22 +20,24 @@ export const useWaitTransitionFinish = (): ((
       eventHandler: (e?: TransitionEvent) => void,
       durationFallback: number,
     ) => {
-      if (element) {
-        if (!document?.hidden) {
-          remove();
-          element.addEventListener('transitionend', eventHandler);
-          detach.current = () => {
-            element.removeEventListener('transitionend', eventHandler);
-          };
-        } else {
-          if (timeoutRef?.current) {
-            clearTimeout(timeoutRef.current);
-          }
-          timeoutRef.current = setTimeout(eventHandler, durationFallback);
+      if (!element) {
+        return;
+      }
+
+      if (!element.ownerDocument.hidden) {
+        remove();
+        element.addEventListener('transitionend', eventHandler);
+        detach.current = () => {
+          element.removeEventListener('transitionend', eventHandler);
+        };
+      } else {
+        if (timeoutRef?.current) {
+          clearTimeout(timeoutRef.current);
         }
+        timeoutRef.current = setTimeout(eventHandler, durationFallback);
       }
     },
-    [document, remove, timeoutRef],
+    [remove, timeoutRef],
   );
 
   return waitTransitionFinish;

package/src/index.ts

@@ -262,6 +262,7 @@ export { TabsItem } from './components/TabsItem/TabsItem';
 export type { TabsItemProps } from './components/TabsItem/TabsItem';
 export { Spinner } from './components/Spinner/Spinner';
 export type { SpinnerProps } from './components/Spinner/Spinner';
+export { ExpressiveSpinner as unstable_ExpressiveSpinner } from './components/Spinner/ExpressiveSpinner/ExpressiveSpinner';
 export { PullToRefresh } from './components/PullToRefresh/PullToRefresh';
 export type { PullToRefreshProps } from './components/PullToRefresh/PullToRefresh';
 export { Link } from './components/Link/Link';

package/src/lib/array.ts

@@ -0,0 +1,19 @@
+import { type Writeable } from '@vkontakte/vkjs';
+
+/**
+ * Поверхностно копирует массив
+ *
+ * ```ts
+ * import * as array from './array';
+ * import * as assert from 'node:assert/strict';
+ *
+ * const originalArray = [1, 2, 3];
+ * const copiedArray = array.copy(originalArray);
+ *
+ * assert.deepEqual(copiedArray, originalArray);
+ * assert.notEqual(copiedArray, originalArray);
+ * ```
+ */
+export function copy<T extends Pick<unknown[], 'slice'>>(array: T): Writeable<T> {
+  return array.slice(0) as unknown as T;
+}

package/src/lib/curve.ts

@@ -0,0 +1,36 @@
+/**
+ *  Кубическая кривая Безье для одномерного пространства
+ */
+export function cubicBezierOneDimensional(
+  p0: number,
+  p1: number,
+  p2: number,
+  p3: number,
+  t: number,
+) {
+  const cx = 3 * (p1 - p0);
+  const bx = 3 * (p2 - p1) - cx;
+  const ax = p3 - p0 - cx - bx;
+  const x = ax * Math.pow(t, 3) + bx * Math.pow(t, 2) + cx * t + p0;
+  return x;
+}
+
+/**
+ * Кубическая кривая Безье для двумерного пространства
+ */
+export function cubicBezierTwoDimensional(
+  x0: number,
+  y0: number,
+  x1: number,
+  y1: number,
+  x2: number,
+  y2: number,
+  x3: number,
+  y3: number,
+  t: number,
+): [number, number] {
+  const x = cubicBezierOneDimensional(x0, x1, x2, x3, t);
+  const y = cubicBezierOneDimensional(y0, y1, y2, y3, t);
+
+  return [x, y];
+}

package/src/lib/dom.tsx

@@ -52,10 +52,12 @@ export const useDOM = (): DOMContextInterface => {
  * В случае, если используется DOMContext, при проверке 'node instanceOf Window' – Window может быть
  * другим объектом.
  */
-export const isWindow = (
-  node: Element | Window | VisualViewport | undefined | null,
-): node is Window => {
-  return node !== null && node !== undefined && 'navigator' in node;
+export const isWindow = (value: unknown): value is Window => {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    (value as Record<string, unknown>).window === value
+  );
 };
 
 export const isBody = (
@@ -213,6 +215,10 @@ export const getDocumentBody = (node?: any): HTMLElement => getWindow(node).docu
 export const getActiveElementByAnotherElement = (el: Element | null): Element | null =>
   el ? el.ownerDocument.activeElement : null;
 
+export function isActiveElement(el: Element): boolean {
+  return el === el.ownerDocument.activeElement;
+}
+
 export const contains = (parent?: Element | null, child?: Element | null): boolean => {
   return parent && child ? parent.contains(child) : false;
 };