@vkontakte/vkui 4.23.0 → 4.24.0

package/src/hoc/withInsets.tsx

@@ -1,4 +1,4 @@
-import { useInsets } from '../hooks/useInsets';
+import { useInsets } from "../hooks/useInsets";
 
 export function withInsets<T>(Component: T): T {
   function WithInsets(props: {}) {

package/src/hoc/withPlatform.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { SSRContext } from '../lib/SSR';
-import { ConfigProviderContext } from '../components/ConfigProvider/ConfigProviderContext';
+import * as React from "react";
+import { SSRContext } from "../lib/SSR";
+import { ConfigProviderContext } from "../components/ConfigProvider/ConfigProviderContext";
 
 export function withPlatform<T>(Component: T): T {
   function WithPlatform(props: {}) {

package/src/hooks/useAdaptivity.ts

@@ -1,5 +1,8 @@
-import * as React from 'react';
-import { AdaptivityContext, AdaptivityProps } from '../components/AdaptivityProvider/AdaptivityContext';
+import * as React from "react";
+import {
+  AdaptivityContext,
+  AdaptivityProps,
+} from "../components/AdaptivityProvider/AdaptivityContext";
 
 export type { AdaptivityProps };
 

package/src/hooks/useAppearance.ts

@@ -1,4 +1,5 @@
-import * as React from 'react';
-import { ConfigProviderContext } from '../components/ConfigProvider/ConfigProviderContext';
+import * as React from "react";
+import { ConfigProviderContext } from "../components/ConfigProvider/ConfigProviderContext";
 
-export const useAppearance = () => React.useContext(ConfigProviderContext).appearance;
+export const useAppearance = () =>
+  React.useContext(ConfigProviderContext).appearance;

package/src/hooks/useBrowserInfo.ts

@@ -1,11 +1,11 @@
-import * as React from 'react';
-import { SSRContext } from '../lib/SSR';
-import { BrowserInfo, computeBrowserInfo } from '../lib/browser';
+import * as React from "react";
+import { SSRContext } from "../lib/SSR";
+import { BrowserInfo, computeBrowserInfo } from "../lib/browser";
 
 export function useBrowserInfo(): BrowserInfo {
   const ssrContext = React.useContext(SSRContext);
-  const browserInfo = ssrContext.browserInfo ||
-    computeBrowserInfo(ssrContext.userAgent);
+  const browserInfo =
+    ssrContext.browserInfo || computeBrowserInfo(ssrContext.userAgent);
 
   return browserInfo;
 }

package/src/hooks/useEffectDev.ts

@@ -0,0 +1,5 @@
+import { useEffect } from "react";
+import { noop } from "../lib/utils";
+
+export const useEffectDev =
+  process.env.NODE_ENV === "development" ? useEffect : noop;

package/src/hooks/useEnsuredControl.ts

@@ -1,14 +1,17 @@
-import * as React from 'react';
+import * as React from "react";
 
 export function useEnsuredControl<V, E>(
   props: { value?: V; onChange?: (e: E) => any },
-  options: { defaultValue: V },
+  options: { defaultValue: V }
 ): [V, (e: E) => any] {
-  const isControlled = props.hasOwnProperty('value');
+  const isControlled = props.hasOwnProperty("value");
   const [localValue, setLocalValue] = React.useState(options.defaultValue);
-  const onChange = React.useCallback((e) => {
-    !isControlled && setLocalValue(e.target.value);
-    props.onChange && props.onChange(e);
-  }, [props.onChange]);
+  const onChange = React.useCallback(
+    (e) => {
+      !isControlled && setLocalValue(e.target.value);
+      props.onChange && props.onChange(e);
+    },
+    [props.onChange]
+  );
   return [isControlled ? props.value : localValue, onChange];
 }

package/src/hooks/useEventListener.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { noop } from '../lib/utils';
-import { canUseDOM } from '../lib/dom';
-import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
+import * as React from "react";
+import { noop } from "../lib/utils";
+import { canUseDOM } from "../lib/dom";
+import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect";
 
 interface EventListenerHandle {
   add: (el: HTMLElement | Document) => void;
@@ -11,15 +11,26 @@ interface EventListenerHandle {
 export function useEventListener<K extends keyof GlobalEventHandlersEventMap>(
   event: K,
   _cb: (ev: GlobalEventHandlersEventMap[K]) => any,
-  _options?: AddEventListenerOptions,
+  _options?: AddEventListenerOptions
 ): EventListenerHandle;
-export function useEventListener(event: string, _cb: (ev: Event) => any, _options?: AddEventListenerOptions): EventListenerHandle;
-export function useEventListener(event: string, _cb: (ev: Event) => any, _options?: AddEventListenerOptions) {
+export function useEventListener(
+  event: string,
+  _cb: (ev: Event) => any,
+  _options?: AddEventListenerOptions
+): EventListenerHandle;
+export function useEventListener(
+  event: string,
+  _cb: (ev: Event) => any,
+  _options?: AddEventListenerOptions
+) {
   const cbRef = React.useRef(_cb);
   useIsomorphicLayoutEffect(() => {
     cbRef.current = _cb;
   }, [_cb]);
-  const cb = React.useCallback<typeof _cb>((e) => cbRef.current && cbRef.current(e), []);
+  const cb = React.useCallback<typeof _cb>(
+    (e) => cbRef.current && cbRef.current(e),
+    []
+  );
 
   const detach = React.useRef(noop);
   const remove = React.useCallback(() => {

package/src/hooks/useExternRef.ts

@@ -1,15 +1,20 @@
-import * as React from 'react';
-import { setRef } from '../lib/utils';
+import * as React from "react";
+import { setRef } from "../lib/utils";
 
-export function useExternRef<T>(...externRefs: Array<React.Ref<T>>): React.MutableRefObject<T> {
+export function useExternRef<T>(
+  ...externRefs: Array<React.Ref<T>>
+): React.MutableRefObject<T> {
   const stableRef = React.useRef<T>();
-  return React.useMemo(() => ({
-    get current() {
-      return stableRef.current;
-    },
-    set current(el) {
-      stableRef.current = el;
-      externRefs.forEach((ref) => setRef(el, ref));
-    },
-  }), externRefs);
+  return React.useMemo(
+    () => ({
+      get current() {
+        return stableRef.current;
+      },
+      set current(el) {
+        stableRef.current = el;
+        externRefs.forEach((ref) => setRef(el, ref));
+      },
+    }),
+    externRefs
+  );
 }

package/src/hooks/useFocusVisible.ts

@@ -0,0 +1,31 @@
+import { useContext, useState, useCallback, FocusEvent } from "react";
+import { AppRootContext } from "../components/AppRoot/AppRootContext";
+
+export function useFocusVisible() {
+  const [isFocused, setIsFocused] = useState(false);
+  const { keyboardInput } = useContext(AppRootContext);
+
+  const onFocus = useCallback(
+    (event: FocusEvent<HTMLElement>) => {
+      event.stopPropagation();
+      setIsFocused(true);
+    },
+    [setIsFocused]
+  );
+
+  const onBlur = useCallback(
+    (event: FocusEvent<HTMLElement>) => {
+      event.stopPropagation();
+      setIsFocused(false);
+    },
+    [setIsFocused]
+  );
+
+  const focusVisible = keyboardInput && isFocused;
+
+  return {
+    focusVisible,
+    onFocus,
+    onBlur,
+  };
+}

package/src/hooks/useGlobalEventListener.ts

@@ -1,19 +1,29 @@
-import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
-import { useEventListener } from './useEventListener';
+import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect";
+import { useEventListener } from "./useEventListener";
 
-export function useGlobalEventListener<K extends keyof GlobalEventHandlersEventMap>(
+export function useGlobalEventListener<
+  K extends keyof GlobalEventHandlersEventMap
+>(
   element: HTMLElement | HTMLDocument | Window,
   event: K,
   cb: false | null | ((ev: GlobalEventHandlersEventMap[K]) => any),
-  options?: AddEventListenerOptions,
+  options?: AddEventListenerOptions
 ): void;
 export function useGlobalEventListener(
   element: HTMLElement | HTMLDocument | Window,
   event: string,
   cb: false | null | ((ev: Event) => any),
-  options?: AddEventListenerOptions,
+  options?: AddEventListenerOptions
 ): void;
-export function useGlobalEventListener(element: any, event: string, cb: (ev: Event) => any, options?: AddEventListenerOptions) {
+export function useGlobalEventListener(
+  element: any,
+  event: string,
+  cb: (ev: Event) => any,
+  options?: AddEventListenerOptions
+) {
   const listener = useEventListener(event, cb, options);
-  useIsomorphicLayoutEffect(() => cb ? listener.add(element) : listener.remove(), [Boolean(cb)]);
+  useIsomorphicLayoutEffect(
+    () => (cb ? listener.add(element) : listener.remove()),
+    [Boolean(cb)]
+  );
 }

package/src/hooks/useInsets.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import vkBridge, { Insets } from '@vkontakte/vk-bridge';
-import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
+import * as React from "react";
+import vkBridge, { Insets } from "@vkontakte/vk-bridge";
+import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect";
 
 let initialState: Insets = {
   bottom: null,
@@ -21,8 +21,8 @@ interface BridgeEvent {
 function resolveInsets(e: BridgeEvent): Insets | null {
   const { type, data } = e.detail;
   switch (type) {
-    case 'VKWebAppUpdateConfig':
-    case 'VKWebAppUpdateInsets': // Устаревшее событие vk-bridge
+    case "VKWebAppUpdateConfig":
+    case "VKWebAppUpdateInsets": // Устаревшее событие vk-bridge
       const { insets } = data;
       if (insets) {
         return {

package/src/hooks/useKeyboard.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { useDOM } from '../lib/dom';
-import { useGlobalEventListener } from './useGlobalEventListener';
+import * as React from "react";
+import { useDOM } from "../lib/dom";
+import { useGlobalEventListener } from "./useGlobalEventListener";
 
 interface SoftwareKeyboardState {
   isOpened: boolean;
@@ -15,19 +15,24 @@ export function getPreciseKeyboardState(window: any): boolean {
   const { availHeight } = window.screen;
   const { innerHeight } = window;
 
-  const coveredViewportPercentage = Math.round((1 - innerHeight / availHeight) * 100);
+  const coveredViewportPercentage = Math.round(
+    (1 - innerHeight / availHeight) * 100
+  );
   return coveredViewportPercentage > 24;
 }
 
 export function useKeyboard(): SoftwareKeyboardState {
   const { window, document } = useDOM();
 
-  const [keyboardState, setKeyboardState] = React.useState<SoftwareKeyboardState>({
-    isOpened: false,
-    isPrecise: false,
-  });
+  const [keyboardState, setKeyboardState] =
+    React.useState<SoftwareKeyboardState>({
+      isOpened: false,
+      isPrecise: false,
+    });
 
-  const transitionalTimeout = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const transitionalTimeout = React.useRef<ReturnType<
+    typeof setTimeout
+  > | null>(null);
 
   const eventOptions = {
     passive: true,
@@ -46,10 +51,10 @@ export function useKeyboard(): SoftwareKeyboardState {
     clearTimeout(transitionalTimeout.current);
 
     let returnObject = {
-      isOpened: (event === true || event.type === 'focusin') && (
-        document.activeElement?.tagName === 'INPUT' ||
-        document.activeElement?.tagName === 'TEXTAREA'
-      ),
+      isOpened:
+        (event === true || event.type === "focusin") &&
+        (document.activeElement?.tagName === "INPUT" ||
+          document.activeElement?.tagName === "TEXTAREA"),
       isPrecise: false,
     };
 
@@ -60,8 +65,8 @@ export function useKeyboard(): SoftwareKeyboardState {
     }, 300);
   }
 
-  useGlobalEventListener(document, 'focusout', onFocus, eventOptions);
-  useGlobalEventListener(document, 'focusin', onFocus, eventOptions);
+  useGlobalEventListener(document, "focusout", onFocus, eventOptions);
+  useGlobalEventListener(document, "focusin", onFocus, eventOptions);
 
   return keyboardState;
 }

package/src/hooks/useKeyboardInputTracker.ts

@@ -1,12 +1,13 @@
-import * as React from 'react';
-import { Keys, pressedKey } from '../lib/accessibility';
-import { useDOM } from '../lib/dom';
-import { useGlobalEventListener } from './useGlobalEventListener';
+import * as React from "react";
+import { Keys, pressedKey } from "../lib/accessibility";
+import { useDOM } from "../lib/dom";
+import { useGlobalEventListener } from "./useGlobalEventListener";
 
 export function useKeyboardInputTracker(): boolean {
   const { document } = useDOM();
 
-  const [isKeyboardInputActive, toggleKeyboardInput] = React.useState<boolean>(false);
+  const [isKeyboardInputActive, toggleKeyboardInput] =
+    React.useState<boolean>(false);
 
   const enableKeyboardInput = React.useCallback((e: KeyboardEvent) => {
     if (pressedKey(e) === Keys.TAB) {
@@ -23,9 +24,24 @@ export function useKeyboardInputTracker(): boolean {
     capture: true,
   };
 
-  useGlobalEventListener(document, 'keydown', enableKeyboardInput, eventOptions);
-  useGlobalEventListener(document, 'mousedown', disableKeyboardInput, eventOptions);
-  useGlobalEventListener(document, 'touchstart', disableKeyboardInput, eventOptions);
+  useGlobalEventListener(
+    document,
+    "keydown",
+    enableKeyboardInput,
+    eventOptions
+  );
+  useGlobalEventListener(
+    document,
+    "mousedown",
+    disableKeyboardInput,
+    eventOptions
+  );
+  useGlobalEventListener(
+    document,
+    "touchstart",
+    disableKeyboardInput,
+    eventOptions
+  );
 
   return isKeyboardInputActive;
 }

package/src/hooks/useObjectMemo.ts

@@ -1,8 +1,10 @@
-import * as React from 'react';
+import * as React from "react";
 
 export function objectEquals(o1: any, o2: any) {
-  return Object.keys(o1).length === Object.keys(o2).length &&
-    Object.keys(o1).every((k) => o1[k] === o2[k]);
+  return (
+    Object.keys(o1).length === Object.keys(o2).length &&
+    Object.keys(o1).every((k) => o1[k] === o2[k])
+  );
 }
 
 export function useObjectMemo<T>(object: T): T {

package/src/hooks/usePatchChildrenRef.ts

@@ -1,24 +1,39 @@
-import * as React from 'react';
-import { useExternRef } from './useExternRef';
-import { warnOnce } from '../lib/warnOnce';
+import * as React from "react";
+import { useExternRef } from "./useExternRef";
+import { warnOnce } from "../lib/warnOnce";
 
 type ChildrenElement<T> = React.ReactElement<{ getRootRef?: React.Ref<T> }>;
 
-const isDOMTypeElement = (element: React.ReactElement): element is React.DOMElement<any, any> => {
-  return typeof element.type === 'string';
+const isDOMTypeElement = (
+  element: React.ReactElement
+): element is React.DOMElement<any, any> => {
+  return typeof element.type === "string";
 };
 
-const warn = warnOnce('usePatchChildrenRef');
-export const usePatchChildrenRef = <T = HTMLElement>(children: ChildrenElement<T>): [React.MutableRefObject<T>, ChildrenElement<T>] => {
-  const childRef = React.isValidElement(children) && (isDOMTypeElement(children) ? children.ref as React.Ref<T> : children.props.getRootRef);
+const warn = warnOnce("usePatchChildrenRef");
+export const usePatchChildrenRef = <T = HTMLElement>(
+  children: ChildrenElement<T>
+): [React.MutableRefObject<T>, ChildrenElement<T>] => {
+  const childRef =
+    React.isValidElement(children) &&
+    (isDOMTypeElement(children)
+      ? (children.ref as React.Ref<T>)
+      : children.props.getRootRef);
   const patchedRef = useExternRef<T>(childRef);
   React.useEffect(() => {
-    if (!patchedRef.current && process.env.NODE_ENV === 'development') {
-      warn('Кажется, в `children` передан компонент, который не поддерживает свойство `getRootRef`. Мы не можем' +
-        'получить ссылку на корневой dom-элемент этого компонента');
+    if (!patchedRef.current && process.env.NODE_ENV === "development") {
+      warn(
+        "Кажется, в `children` передан компонент, который не поддерживает свойство `getRootRef`. Мы не можем" +
+          "получить ссылку на корневой dom-элемент этого компонента"
+      );
     }
   }, [children.type]);
-  return [patchedRef, React.isValidElement(children) ? React.cloneElement(children, {
-    [isDOMTypeElement(children) ? 'ref' : 'getRootRef']: patchedRef,
-  }) : children];
+  return [
+    patchedRef,
+    React.isValidElement(children)
+      ? React.cloneElement(children, {
+          [isDOMTypeElement(children) ? "ref" : "getRootRef"]: patchedRef,
+        })
+      : children,
+  ];
 };

package/src/hooks/usePlatform.ts

@@ -1,7 +1,7 @@
-import * as React from 'react';
-import { PlatformType } from '../lib/platform';
-import { SSRContext } from '../lib/SSR';
-import { ConfigProviderContext } from '../components/ConfigProvider/ConfigProviderContext';
+import * as React from "react";
+import { PlatformType } from "../lib/platform";
+import { SSRContext } from "../lib/SSR";
+import { ConfigProviderContext } from "../components/ConfigProvider/ConfigProviderContext";
 
 export function usePlatform(): PlatformType {
   const ssrContext = React.useContext(SSRContext);

package/src/hooks/useTimeout.ts

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
-import { canUseDOM } from '../lib/dom';
+import * as React from "react";
+import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect";
+import { canUseDOM } from "../lib/dom";
 
 export function useTimeout(cb: () => any, duration: number) {
   const options = React.useRef({ cb, duration });
@@ -10,13 +10,16 @@ export function useTimeout(cb: () => any, duration: number) {
   }, [cb, duration]);
 
   const timeout = React.useRef<ReturnType<typeof setTimeout>>();
-  const clear = React.useCallback(() => canUseDOM && clearTimeout(timeout.current), []);
+  const clear = React.useCallback(
+    () => canUseDOM && clearTimeout(timeout.current),
+    []
+  );
   const set = React.useCallback((duration = options.current.duration) => {
     clear();
     if (canUseDOM) {
       timeout.current = setTimeout(() => {
         const { cb } = options.current;
-        typeof cb === 'function' && cb();
+        typeof cb === "function" && cb();
       }, duration);
     }
   }, []);

package/src/hooks/useWaitTransitionFinish.ts

@@ -1,10 +1,14 @@
-import * as React from 'react';
-import { transitionEvent } from '../lib/supportEvents';
+import * as React from "react";
+import { transitionEvent } from "../lib/supportEvents";
 
 export const useWaitTransitionFinish = () => {
   const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
 
-  const waitTransitionFinish = (element: HTMLElement, eventHandler: VoidFunction, durationFallback: number) => {
+  const waitTransitionFinish = (
+    element: HTMLElement,
+    eventHandler: VoidFunction,
+    durationFallback: number
+  ) => {
     if (element) {
       if (transitionEvent.supported) {
         element.removeEventListener(transitionEvent.name, eventHandler);