@vkontakte/vkui 4.22.2 → 4.25.1

package/src/helpers/scheme.ts

@@ -0,0 +1,86 @@
+import { AppearanceSchemeType, AppearanceType } from "@vkontakte/vk-bridge";
+import { PlatformType, VKCOM } from "../lib/platform";
+import { warnOnce } from "../lib/warnOnce";
+import { getScheme } from "./getScheme";
+
+export enum Scheme {
+  /**
+   * @deprecated будет удалено в 5.0.0
+   * версия оставлена для совместимости со старыми версиями клиентов
+   */
+  DEPRECATED_CLIENT_LIGHT = "client_light",
+  /**
+   * @deprecated будет удалено в 5.0.0
+   * версия оставлена для совместимости со старыми версиями клиентов
+   */
+  DEPRECATED_CLIENT_DARK = "client_dark",
+  /**
+   * @deprecated будет удалено в 5.0.0
+   * версия оставлена для совместимости с vkcom, когда там была только одна схема
+   */
+  VKCOM = "vkcom",
+
+  BRIGHT_LIGHT = "bright_light",
+  SPACE_GRAY = "space_gray",
+  VKCOM_LIGHT = "vkcom_light",
+  VKCOM_DARK = "vkcom_dark",
+}
+
+export type AppearanceScheme =
+  | AppearanceSchemeType
+  | Scheme.VKCOM
+  | Scheme.VKCOM_DARK
+  | Scheme.VKCOM_LIGHT
+  | "inherit";
+
+export enum Appearance {
+  DARK = "dark",
+  LIGHT = "light",
+}
+
+const warn = warnOnce("scheme");
+
+export interface NormalizeSchemeProps {
+  platform: PlatformType;
+  scheme?: AppearanceScheme;
+  appearance?: AppearanceType;
+}
+
+export function normalizeScheme({
+  platform,
+  scheme,
+  appearance,
+}: NormalizeSchemeProps): Scheme | "inherit" {
+  if (appearance) {
+    return getScheme({ platform, appearance });
+  }
+
+  if (scheme === "inherit") {
+    return scheme;
+  }
+  if (scheme === Scheme.VKCOM) {
+    process.env.NODE_ENV === "development" &&
+      warn(
+        `Схема "${Scheme.VKCOM}" устарела и будет удалена 5.0.0. Вместо неё используйте "${Scheme.VKCOM_LIGHT}"`
+      );
+    return Scheme.VKCOM_LIGHT;
+  }
+  if (
+    platform === VKCOM &&
+    (scheme === Scheme.BRIGHT_LIGHT || scheme === Scheme.SPACE_GRAY)
+  ) {
+    process.env.NODE_ENV === "development" &&
+      warn(
+        `Платформа "vkcom" и схема "${scheme}" несовместимы. С этой платформой можно использовать схемы "${Scheme.VKCOM_LIGHT}" или "${Scheme.VKCOM_DARK}"`
+      );
+    return Scheme.VKCOM_LIGHT;
+  }
+  switch (scheme) {
+    case Scheme.DEPRECATED_CLIENT_LIGHT:
+      return Scheme.BRIGHT_LIGHT;
+    case Scheme.DEPRECATED_CLIENT_DARK:
+      return Scheme.SPACE_GRAY;
+    default:
+      return scheme as Scheme;
+  }
+}

package/src/hoc/withAdaptivity.tsx

@@ -1,11 +1,13 @@
-import * as React from 'react';
+import * as React from "react";
 import {
   AdaptivityContext,
   SizeType,
   ViewHeight,
   ViewWidth,
+  AdaptivityContextInterface,
   AdaptivityProps,
-} from '../components/AdaptivityProvider/AdaptivityContext';
+  SizeProps,
+} from "../components/AdaptivityProvider/AdaptivityContext";
 
 export { SizeType, ViewWidth, ViewHeight };
 export type { AdaptivityProps };
@@ -16,10 +18,16 @@ interface Config {
   viewWidth?: boolean;
   viewHeight?: boolean;
   hasMouse?: boolean;
+  deviceHasHover?: boolean;
 }
 
-export function withAdaptivity<T>(TargetComponent: T, config: Config): T {
-  function AdaptivityConsumer(props: AdaptivityProps) {
+export function withAdaptivity<T extends AdaptivityProps>(
+  TargetComponent: React.ComponentType<T>,
+  config: Config
+): React.FC<Omit<T, keyof AdaptivityContextInterface> & SizeProps> {
+  const AdaptivityConsumer: React.ComponentType<
+    Omit<T, keyof AdaptivityContextInterface> & SizeProps
+  > = (props: Omit<T, keyof AdaptivityContextInterface> & SizeProps) => {
     const context = React.useContext(AdaptivityContext);
     let update = false;
 
@@ -32,6 +40,7 @@ export function withAdaptivity<T>(TargetComponent: T, config: Config): T {
     const viewWidth = context.viewWidth;
     const viewHeight = context.viewHeight;
     const hasMouse = context.hasMouse;
+    const deviceHasHover = context.deviceHasHover;
 
     const adaptivityProps: {
       sizeX?: SizeType;
@@ -39,24 +48,39 @@ export function withAdaptivity<T>(TargetComponent: T, config: Config): T {
       viewWidth?: ViewWidth;
       viewHeight?: ViewHeight;
       hasMouse?: boolean;
+      deviceHasHover?: boolean;
     } = {};
-    config.sizeX ? adaptivityProps.sizeX = sizeX : undefined;
-    config.sizeY ? adaptivityProps.sizeY = sizeY : undefined;
-    config.viewWidth ? adaptivityProps.viewWidth = viewWidth : undefined;
-    config.viewHeight ? adaptivityProps.viewHeight = viewHeight : undefined;
-    config.hasMouse ? adaptivityProps.hasMouse = hasMouse : undefined;
 
-    // @ts-ignore
-    const target = <TargetComponent {...props} {...adaptivityProps} />;
+    config.sizeX ? (adaptivityProps.sizeX = sizeX) : undefined;
+    config.sizeY ? (adaptivityProps.sizeY = sizeY) : undefined;
+    config.viewWidth ? (adaptivityProps.viewWidth = viewWidth) : undefined;
+    config.viewHeight ? (adaptivityProps.viewHeight = viewHeight) : undefined;
+    config.hasMouse ? (adaptivityProps.hasMouse = hasMouse) : undefined;
+    config.deviceHasHover
+      ? (adaptivityProps.deviceHasHover = deviceHasHover)
+      : undefined;
+
+    const target = <TargetComponent {...(props as T)} {...adaptivityProps} />;
 
     if (update) {
-      return <AdaptivityContext.Provider value={{ sizeX, sizeY, viewWidth, viewHeight, hasMouse }}>
-        {target}
-      </AdaptivityContext.Provider>;
+      return (
+        <AdaptivityContext.Provider
+          value={{
+            sizeX,
+            sizeY,
+            viewWidth,
+            viewHeight,
+            hasMouse,
+            deviceHasHover,
+          }}
+        >
+          {target}
+        </AdaptivityContext.Provider>
+      );
     }
 
     return target;
-  }
+  };
 
-  return AdaptivityConsumer as unknown as T;
+  return AdaptivityConsumer;
 }

package/src/hoc/withContext.tsx

@@ -1,11 +1,14 @@
-import * as React from 'react';
+import * as React from "react";
 
-export function withContext<T, X>(Component: T, Ctx: React.Context<X>, prop: string): T {
-  function WithContext(props: {}) {
+export function withContext<T, X>(
+  Component: React.ComponentType<T>,
+  Ctx: React.Context<X>,
+  prop: string
+): React.FC<T> {
+  function WithContext(props: T) {
     const context = React.useContext<X>(Ctx);
 
-    // @ts-ignore
     return <Component {...props} {...{ [prop]: context }} />;
   }
-  return WithContext as unknown as T;
+  return WithContext;
 }

package/src/hoc/withInsets.tsx

@@ -1,10 +1,12 @@
-import { useInsets } from '../hooks/useInsets';
+import { useInsets } from "../hooks/useInsets";
+import { HasInsets } from "../types";
 
-export function withInsets<T>(Component: T): T {
-  function WithInsets(props: {}) {
+export function withInsets<T extends HasInsets>(
+  Component: React.ComponentType<T>
+): React.FC<Omit<T, keyof HasInsets>> {
+  function WithInsets(props: Omit<T, keyof HasInsets>) {
     const insets = useInsets();
-    // @ts-ignore
-    return <Component {...props} insets={insets} />;
+    return <Component {...(props as T)} insets={insets} />;
   }
-  return WithInsets as unknown as T;
+  return WithInsets;
 }

package/src/hoc/withPlatform.tsx

@@ -1,13 +1,17 @@
-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 { HasPlatform } from "../types";
+import { ConfigProviderContext } from "../components/ConfigProvider/ConfigProviderContext";
 
-export function withPlatform<T>(Component: T): T {
-  function WithPlatform(props: {}) {
+export function withPlatform<T extends HasPlatform>(
+  Component: React.ComponentType<T>
+): React.FC<Omit<T, keyof HasPlatform>> {
+  function WithPlatform(props: Omit<T, keyof HasPlatform>) {
     const ssrContext = React.useContext(SSRContext);
     const { platform } = React.useContext(ConfigProviderContext);
-    // @ts-ignore
-    return <Component {...props} platform={ssrContext.platform || platform} />;
+    return (
+      <Component {...(props as T)} platform={ssrContext.platform || platform} />
+    );
   }
-  return WithPlatform as unknown as T;
+  return WithPlatform;
 }

package/src/hooks/useAdaptivity.ts

@@ -1,8 +1,12 @@
-import * as React from 'react';
-import { AdaptivityContext, AdaptivityProps } from '../components/AdaptivityProvider/AdaptivityContext';
+import * as React from "react";
+import {
+  AdaptivityContext,
+  AdaptivityProps,
+  AdaptivityContextInterface,
+} from "../components/AdaptivityProvider/AdaptivityContext";
 
 export type { AdaptivityProps };
 
-export const useAdaptivity = (): AdaptivityProps => {
+export const useAdaptivity = (): AdaptivityContextInterface => {
   return React.useContext(AdaptivityContext);
 };

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 },
-): [V, (e: E) => any] {
-  const isControlled = props.hasOwnProperty('value');
+  options: { defaultValue: V }
+): [V | undefined, (e: E) => any] {
+  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);
+    },
+    [isControlled, props]
+  );
   return [isControlled ? props.value : localValue, onChange];
 }

package/src/hooks/useEventListener.ts

@@ -1,44 +1,62 @@
-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;
+  add: (el: HTMLElement | Document | Window) => void;
   remove: () => void;
 }
 
 export function useEventListener<K extends keyof GlobalEventHandlersEventMap>(
   event: K,
-  _cb: (ev: GlobalEventHandlersEventMap[K]) => any,
-  _options?: AddEventListenerOptions,
+  _cb:
+    | false
+    | null
+    | undefined
+    | ((ev: GlobalEventHandlersEventMap[K]) => void),
+  _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<E extends Event>(
+  event: string,
+  _cb: false | null | undefined | ((ev: E) => void),
+  _options?: AddEventListenerOptions
+): EventListenerHandle;
+export function useEventListener<
+  E extends Event,
+  K extends keyof GlobalEventHandlersEventMap
+>(
+  event: string | K,
+  _cb: false | null | undefined | ((ev: E) => void),
+  _options?: AddEventListenerOptions
+): EventListenerHandle {
   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((e) => cbRef.current && cbRef.current(e), []);
 
   const detach = React.useRef(noop);
   const remove = React.useCallback(() => {
     detach.current();
     detach.current = noop;
   }, []);
-  const add = React.useCallback((el: HTMLElement | Document) => {
-    if (!canUseDOM) {
-      return;
-    }
-    remove();
-    if (!el) {
-      return;
-    }
-    const options = { ..._options };
-    el.addEventListener(event, cb, options);
-    detach.current = () => el.removeEventListener(event, cb, options);
-  }, []);
-  React.useEffect(() => remove, []);
+  const add = React.useCallback(
+    (el: HTMLElement | Document | Window) => {
+      if (!canUseDOM) {
+        return;
+      }
+      remove();
+      if (!el) {
+        return;
+      }
+      const options = { ..._options };
+      el.addEventListener(event, cb, options);
+      detach.current = () => el.removeEventListener(event, cb, options);
+    },
+    [_options, cb, event, remove]
+  );
+  React.useEffect(() => remove, [remove]);
 
   return { add, remove };
 }

package/src/hooks/useExternRef.ts

@@ -1,15 +1,26 @@
-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> {
-  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);
+export function useExternRef<T>(
+  ...externRefs: Array<React.Ref<T> | undefined | false>
+): React.MutableRefObject<T | null> {
+  const stableRef = React.useRef<T | null>(null);
+
+  return React.useMemo(
+    () => ({
+      get current() {
+        return stableRef.current;
+      },
+      set current(el) {
+        stableRef.current = el;
+        externRefs.forEach((ref) => {
+          if (ref) {
+            setRef(el, ref);
+          }
+        });
+      },
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    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,35 @@
-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>(
-  element: HTMLElement | HTMLDocument | Window,
+export function useGlobalEventListener<
+  K extends keyof GlobalEventHandlersEventMap
+>(
+  element: Document | HTMLElement | Window | null | undefined,
   event: K,
-  cb: false | null | ((ev: GlobalEventHandlersEventMap[K]) => any),
-  options?: AddEventListenerOptions,
+  cb: ((ev: GlobalEventHandlersEventMap[K]) => void) | null | false | undefined,
+  options?: AddEventListenerOptions
 ): void;
-export function useGlobalEventListener(
-  element: HTMLElement | HTMLDocument | Window,
+export function useGlobalEventListener<E extends Event>(
+  element: Document | HTMLElement | Window | null | undefined,
   event: string,
-  cb: false | null | ((ev: Event) => any),
-  options?: AddEventListenerOptions,
+  cb: ((ev: E) => void) | null | false | undefined,
+  options?: AddEventListenerOptions
 ): void;
-export function useGlobalEventListener(element: any, event: string, cb: (ev: Event) => any, options?: AddEventListenerOptions) {
+export function useGlobalEventListener<
+  K extends keyof GlobalEventHandlersEventMap,
+  E extends Event
+>(
+  element: Document | HTMLElement | Window | null | undefined,
+  event: K | string,
+  cb: ((ev: E) => void) | null | false | undefined,
+  options?: AddEventListenerOptions
+) {
   const listener = useEventListener(event, cb, options);
-  useIsomorphicLayoutEffect(() => cb ? listener.add(element) : listener.remove(), [Boolean(cb)]);
+  useIsomorphicLayoutEffect(() => {
+    if (cb && element) {
+      listener.add(element);
+    } else {
+      listener.remove();
+    }
+  }, [Boolean(cb), Boolean(element)]);
 }

package/src/hooks/useInsets.ts

@@ -1,6 +1,13 @@
-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 as BridgeInsets } from "@vkontakte/vk-bridge";
+import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect";
+
+export interface Insets {
+  bottom: BridgeInsets["bottom"] | null;
+  top: BridgeInsets["top"] | null;
+  left: BridgeInsets["left"] | null;
+  right: BridgeInsets["right"] | null;
+}
 
 let initialState: Insets = {
   bottom: null,
@@ -21,8 +28,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 {