@vkontakte/vkui 4.24.0 → 4.25.0

package/src/components/WriteBar/WriteBar.tsx

@@ -12,7 +12,7 @@ export interface WriteBarProps
     HasRootRef<HTMLDivElement>,
     HasRef<HTMLTextAreaElement> {
   /**
-   * Содержимое, отображаемое слево от поля ввода.
+   * Содержимое, отображаемое слева от поля ввода.
    */
   before?: React.ReactNode;
   /**
@@ -56,14 +56,14 @@ export const WriteBar: React.FC<WriteBarProps> = (props: WriteBarProps) => {
   const textareaRef = useExternRef(getRef);
   const textareaMinHeightRef = React.useRef<number | null>(null);
 
-  const resize = () => {
+  const resize = React.useCallback(() => {
     const textareaEl = textareaRef.current;
     if (!textareaEl) {
       return;
     }
 
     const { offsetHeight, scrollHeight } = textareaEl;
-    const style = window.getComputedStyle(textareaEl);
+    const style = window!.getComputedStyle(textareaEl);
     const paddingTop = parseInt(style.paddingTop);
     const paddingBottom = parseInt(style.paddingBottom);
 
@@ -86,7 +86,7 @@ export const WriteBar: React.FC<WriteBarProps> = (props: WriteBarProps) => {
     if (isFunction(onHeightChange)) {
       onHeightChange();
     }
-  };
+  }, [onHeightChange, textareaRef, window]);
 
   const onTextareaChange: React.ChangeEventHandler<HTMLTextAreaElement> = (
     event
@@ -102,7 +102,7 @@ export const WriteBar: React.FC<WriteBarProps> = (props: WriteBarProps) => {
 
   React.useEffect(() => {
     resize();
-  }, [value]);
+  }, [resize, value]);
 
   return (
     <div

package/src/components/WriteBarIcon/WriteBarIcon.tsx

@@ -46,7 +46,7 @@ export const WriteBarIcon: React.FC<WriteBarIconProps> = ({
   const platform = usePlatform();
 
   let icon: React.ReactNode;
-  let ariaLabel: string;
+  let ariaLabel: string | undefined = undefined;
 
   switch (mode) {
     case "attach":

package/src/helpers/getScheme.ts

@@ -0,0 +1,27 @@
+import { AppearanceType } from "@vkontakte/vk-bridge";
+import { PlatformType, VKCOM } from "../lib/platform";
+import { Scheme } from "./scheme";
+
+export interface GetSchemeProps {
+  platform?: PlatformType;
+  appearance: AppearanceType;
+}
+
+export function getScheme({ platform, appearance }: GetSchemeProps): Scheme {
+  switch (appearance) {
+    case "dark":
+      switch (platform) {
+        case VKCOM:
+          return Scheme.VKCOM_DARK;
+        default:
+          return Scheme.SPACE_GRAY;
+      }
+    case "light":
+      switch (platform) {
+        case VKCOM:
+          return Scheme.VKCOM_LIGHT;
+        default:
+          return Scheme.BRIGHT_LIGHT;
+      }
+  }
+}

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

@@ -4,7 +4,9 @@ import {
   SizeType,
   ViewHeight,
   ViewWidth,
+  AdaptivityContextInterface,
   AdaptivityProps,
+  SizeProps,
 } from "../components/AdaptivityProvider/AdaptivityContext";
 
 export { SizeType, ViewWidth, ViewHeight };
@@ -19,8 +21,13 @@ interface Config {
   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;
 
@@ -43,6 +50,7 @@ export function withAdaptivity<T>(TargetComponent: T, config: Config): T {
       hasMouse?: boolean;
       deviceHasHover?: boolean;
     } = {};
+
     config.sizeX ? (adaptivityProps.sizeX = sizeX) : undefined;
     config.sizeY ? (adaptivityProps.sizeY = sizeY) : undefined;
     config.viewWidth ? (adaptivityProps.viewWidth = viewWidth) : undefined;
@@ -52,8 +60,7 @@ export function withAdaptivity<T>(TargetComponent: T, config: Config): T {
       ? (adaptivityProps.deviceHasHover = deviceHasHover)
       : undefined;
 
-    // @ts-ignore
-    const target = <TargetComponent {...props} {...adaptivityProps} />;
+    const target = <TargetComponent {...(props as T)} {...adaptivityProps} />;
 
     if (update) {
       return (
@@ -73,7 +80,7 @@ export function withAdaptivity<T>(TargetComponent: T, config: Config): T {
     }
 
     return target;
-  }
+  };
 
-  return AdaptivityConsumer as unknown as T;
+  return AdaptivityConsumer;
 }

package/src/hoc/withContext.tsx

@@ -1,15 +1,14 @@
 import * as React from "react";
 
 export function withContext<T, X>(
-  Component: T,
+  Component: React.ComponentType<T>,
   Ctx: React.Context<X>,
   prop: string
-): T {
-  function WithContext(props: {}) {
+): 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 { 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 { 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

@@ -2,10 +2,11 @@ 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/useEnsuredControl.ts

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

package/src/hooks/useEventListener.ts

@@ -4,52 +4,59 @@ 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,
+  _cb:
+    | false
+    | null
+    | undefined
+    | ((ev: GlobalEventHandlersEventMap[K]) => void),
   _options?: AddEventListenerOptions
 ): EventListenerHandle;
-export function useEventListener(
+export function useEventListener<E extends Event>(
   event: string,
-  _cb: (ev: Event) => any,
+  _cb: false | null | undefined | ((ev: E) => void),
   _options?: AddEventListenerOptions
 ): EventListenerHandle;
-export function useEventListener(
-  event: string,
-  _cb: (ev: Event) => any,
+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

@@ -2,9 +2,10 @@ 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>();
+  ...externRefs: Array<React.Ref<T> | undefined | false>
+): React.MutableRefObject<T | null> {
+  const stableRef = React.useRef<T | null>(null);
+
   return React.useMemo(
     () => ({
       get current() {
@@ -12,9 +13,14 @@ export function useExternRef<T>(
       },
       set current(el) {
         stableRef.current = el;
-        externRefs.forEach((ref) => setRef(el, ref));
+        externRefs.forEach((ref) => {
+          if (ref) {
+            setRef(el, ref);
+          }
+        });
       },
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     externRefs
   );
 }

package/src/hooks/useGlobalEventListener.ts

@@ -4,26 +4,32 @@ import { useEventListener } from "./useEventListener";
 export function useGlobalEventListener<
   K extends keyof GlobalEventHandlersEventMap
 >(
-  element: HTMLElement | HTMLDocument | Window,
+  element: Document | HTMLElement | Window | null | undefined,
   event: K,
-  cb: false | null | ((ev: GlobalEventHandlersEventMap[K]) => any),
+  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),
+  cb: ((ev: E) => void) | null | false | undefined,
   options?: AddEventListenerOptions
 ): void;
-export function useGlobalEventListener(
-  element: any,
-  event: string,
-  cb: (ev: Event) => any,
+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,7 +1,14 @@
 import * as React from "react";
-import vkBridge, { Insets } from "@vkontakte/vk-bridge";
+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,
   top: null,

package/src/hooks/useKeyboard.ts

@@ -12,8 +12,10 @@ interface SoftwareKeyboardState {
  Работает на iOS и Android, где софт-клавиатура ресайзит viewport в браузерах
  */
 export function getPreciseKeyboardState(window: any): boolean {
-  const { availHeight } = window.screen;
-  const { innerHeight } = window;
+  const {
+    innerHeight,
+    screen: { availHeight },
+  } = window;
 
   const coveredViewportPercentage = Math.round(
     (1 - innerHeight / availHeight) * 100
@@ -21,23 +23,42 @@ export function getPreciseKeyboardState(window: any): boolean {
   return coveredViewportPercentage > 24;
 }
 
+const eventOptions = {
+  passive: true,
+  capture: false,
+};
+
 export function useKeyboard(): SoftwareKeyboardState {
   const { window, document } = useDOM();
 
-  const [keyboardState, setKeyboardState] =
-    React.useState<SoftwareKeyboardState>({
-      isOpened: false,
-      isPrecise: false,
-    });
+  const [isOpened, setIsOpened] = React.useState(false);
+  const [isPrecise, setIsPrecise] = React.useState(false);
 
   const transitionalTimeout = React.useRef<ReturnType<
     typeof setTimeout
   > | null>(null);
 
-  const eventOptions = {
-    passive: true,
-    capture: false,
-  };
+  const onFocus = React.useCallback(
+    (event: FocusEvent | true) => {
+      if (transitionalTimeout.current) {
+        clearTimeout(transitionalTimeout.current);
+      }
+
+      const isOpened =
+        (event === true || event.type === "focusin") &&
+        (document?.activeElement?.tagName === "INPUT" ||
+          document?.activeElement?.tagName === "TEXTAREA");
+      setIsOpened(isOpened);
+      setIsPrecise(false);
+
+      // Ожидаем прохождение анимации раскрытия клавиатуры
+      transitionalTimeout.current = setTimeout(() => {
+        setIsOpened(isOpened);
+        setIsPrecise(getPreciseKeyboardState(window));
+      }, 300);
+    },
+    [document?.activeElement?.tagName, window]
+  );
 
   /**
    У полей с autoFocus не отлавливаются события focus, для этого вызываем вручную,
@@ -47,26 +68,8 @@ export function useKeyboard(): SoftwareKeyboardState {
     onFocus(true);
   }, [onFocus]);
 
-  function onFocus(event: FocusEvent | true) {
-    clearTimeout(transitionalTimeout.current);
-
-    let returnObject = {
-      isOpened:
-        (event === true || event.type === "focusin") &&
-        (document.activeElement?.tagName === "INPUT" ||
-          document.activeElement?.tagName === "TEXTAREA"),
-      isPrecise: false,
-    };
-
-    // Ожидаем прохождение анимации раскрытия клавиатуры
-    transitionalTimeout.current = setTimeout(() => {
-      returnObject.isPrecise = getPreciseKeyboardState(window);
-      setKeyboardState(returnObject);
-    }, 300);
-  }
-
   useGlobalEventListener(document, "focusout", onFocus, eventOptions);
   useGlobalEventListener(document, "focusin", onFocus, eventOptions);
 
-  return keyboardState;
+  return { isOpened, isPrecise };
 }

package/src/hooks/usePatchChildrenRef.ts

@@ -12,8 +12,8 @@ const isDOMTypeElement = (
 
 const warn = warnOnce("usePatchChildrenRef");
 export const usePatchChildrenRef = <T = HTMLElement>(
-  children: ChildrenElement<T>
-): [React.MutableRefObject<T>, ChildrenElement<T>] => {
+  children?: ChildrenElement<T>
+): [React.MutableRefObject<T | null>, ChildrenElement<T> | undefined] => {
   const childRef =
     React.isValidElement(children) &&
     (isDOMTypeElement(children)
@@ -27,7 +27,7 @@ export const usePatchChildrenRef = <T = HTMLElement>(
           "получить ссылку на корневой dom-элемент этого компонента"
       );
     }
-  }, [children.type]);
+  }, [children?.type, patchedRef]);
   return [
     patchedRef,
     React.isValidElement(children)

package/src/hooks/usePlatform.ts

@@ -3,7 +3,7 @@ import { PlatformType } from "../lib/platform";
 import { SSRContext } from "../lib/SSR";
 import { ConfigProviderContext } from "../components/ConfigProvider/ConfigProviderContext";
 
-export function usePlatform(): PlatformType {
+export function usePlatform(): PlatformType | undefined {
   const ssrContext = React.useContext(SSRContext);
   const { platform } = React.useContext(ConfigProviderContext);
   return ssrContext.platform || platform;

package/src/hooks/useTimeout.ts

@@ -10,19 +10,23 @@ 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 set = React.useCallback((duration = options.current.duration) => {
-    clear();
-    if (canUseDOM) {
-      timeout.current = setTimeout(() => {
-        const { cb } = options.current;
-        typeof cb === "function" && cb();
-      }, duration);
+  const clear = React.useCallback(() => {
+    if (canUseDOM && timeout?.current) {
+      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();
+        }, duration);
+      }
+    },
+    [clear]
+  );
   useIsomorphicLayoutEffect(() => clear, []);
 
   return { set, clear };