@vkontakte/vkui 4.28.0 → 4.29.1

package/src/hooks/useDateInput.ts

@@ -0,0 +1,213 @@
+import * as React from "react";
+import { useBooleanState } from "./useBooleanState";
+import { useGlobalEventListener } from "./useGlobalEventListener";
+import { useDOM } from "../lib/dom";
+
+export interface UseDateInputDependencies<T, D> {
+  maxElement: number;
+  refs: Array<React.RefObject<T>>;
+  autoFocus?: boolean;
+  disabled?: boolean;
+  value?: D;
+  elementsConfig(index: number): {
+    length: number;
+    min: number;
+    max: number;
+  };
+  onInternalValueChange(value: string[]): void;
+  getInternalValue(value?: D | undefined): string[];
+  onChange?(value?: D | undefined): void;
+}
+
+export function useDateInput<T extends HTMLElement, D>({
+  maxElement,
+  refs,
+  autoFocus,
+  disabled,
+  elementsConfig,
+  onChange,
+  onInternalValueChange,
+  getInternalValue,
+  value,
+}: UseDateInputDependencies<T, D>) {
+  const { document } = useDOM();
+  const {
+    value: open,
+    setTrue: openCalendar,
+    setFalse: closeCalendar,
+  } = useBooleanState(false);
+  const rootRef = React.useRef<HTMLDivElement>(null);
+  const calendarRef = React.useRef<HTMLDivElement>(null);
+  const [internalValue, setInternalValue] = React.useState<string[]>([]);
+  const [focusedElement, setFocusedElement] = React.useState<number | null>(
+    null
+  );
+  const { window } = useDOM();
+
+  const removeFocusFromField = React.useCallback(() => {
+    if (open) {
+      setFocusedElement(null);
+      closeCalendar();
+      window!.getSelection()?.removeAllRanges();
+      setInternalValue(getInternalValue(value));
+    }
+  }, [closeCalendar, getInternalValue, open, value, window]);
+
+  const handleClickOutside = React.useCallback(
+    (e: MouseEvent) => {
+      if (
+        !rootRef.current?.contains(e.target as Node | null) &&
+        !calendarRef.current?.contains(e.target as Node | null)
+      ) {
+        removeFocusFromField();
+      }
+    },
+    [removeFocusFromField]
+  );
+
+  const selectFirst = React.useCallback(() => {
+    setFocusedElement(0);
+  }, []);
+
+  useGlobalEventListener(document, "click", handleClickOutside, {
+    capture: true,
+  });
+
+  React.useEffect(() => {
+    setInternalValue(getInternalValue(value));
+  }, [getInternalValue, value]);
+
+  React.useEffect(() => {
+    if (autoFocus) {
+      selectFirst();
+    }
+  }, [autoFocus, selectFirst]);
+
+  React.useEffect(() => {
+    if (disabled || focusedElement === null) {
+      return;
+    }
+
+    const range = window!.document.createRange();
+
+    let element = refs[focusedElement].current;
+
+    if (element) {
+      element.focus();
+      openCalendar();
+      range.selectNodeContents(element as Node);
+
+      const selection = window!.getSelection();
+      selection?.removeAllRanges();
+      selection?.addRange(range);
+    }
+  }, [disabled, focusedElement, openCalendar, refs, window]);
+
+  const clear = React.useCallback(() => {
+    onChange?.(undefined);
+    selectFirst();
+  }, [onChange, selectFirst]);
+
+  const handleFieldEnter = React.useCallback(() => {
+    if (!open) {
+      selectFirst();
+    }
+  }, [open, selectFirst]);
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLSpanElement>) => {
+      if (focusedElement === null) {
+        return;
+      }
+
+      const _value = [...internalValue];
+      const config = elementsConfig(focusedElement);
+
+      if (/^\d+$/.test(e.key)) {
+        if (_value[focusedElement].length >= config.length) {
+          _value[focusedElement] = e.key;
+        } else {
+          _value[focusedElement] += e.key;
+          if (
+            _value[focusedElement].length >= config.length &&
+            focusedElement < maxElement
+          ) {
+            setFocusedElement(focusedElement + 1);
+          }
+        }
+      } else if (e.key === "Backspace") {
+        if (!_value[focusedElement]) {
+          setFocusedElement(
+            focusedElement <= 0 ? maxElement : focusedElement - 1
+          );
+        } else {
+          _value[focusedElement] = _value[focusedElement].slice(0, -1);
+        }
+      } else if (e.key === "ArrowDown" || e.key === "Down") {
+        let currentValue = Number(_value[focusedElement]);
+        _value[focusedElement] = String(
+          currentValue <= config.min ? config.max : currentValue - 1
+        ).padStart(config.length, "0");
+      } else if (e.key === "ArrowUp" || e.key === "Up") {
+        let currentValue = Number(_value[focusedElement]);
+        _value[focusedElement] = String(
+          currentValue >= config.max ? config.min : currentValue + 1
+        ).padStart(config.length, "0");
+      } else if (
+        e.key === "Enter" ||
+        (e.key === "Tab" && focusedElement === maxElement) ||
+        (e.key === "Tab" && e.shiftKey && focusedElement === 0)
+      ) {
+        removeFocusFromField();
+        return;
+      } else if (
+        e.key === "ArrowLeft" ||
+        e.key === "Left" ||
+        (e.key === "Tab" && e.shiftKey)
+      ) {
+        setFocusedElement(
+          focusedElement <= 0 ? maxElement : focusedElement - 1
+        );
+      } else if (
+        e.key === "ArrowRight" ||
+        e.key === "Right" ||
+        e.key === "Tab"
+      ) {
+        setFocusedElement(
+          focusedElement >= maxElement ? 0 : focusedElement + 1
+        );
+      } else if (e.key === "Delete" || e.key === "Del") {
+        _value[focusedElement] = "";
+      } else {
+        return;
+      }
+
+      e.preventDefault();
+      setInternalValue(_value);
+      onInternalValueChange(_value);
+    },
+    [
+      elementsConfig,
+      focusedElement,
+      internalValue,
+      maxElement,
+      onInternalValueChange,
+      removeFocusFromField,
+    ]
+  );
+
+  return {
+    rootRef,
+    calendarRef,
+    open,
+    openCalendar,
+    closeCalendar,
+    internalValue,
+    focusedElement,
+    setFocusedElement,
+    handleKeyDown,
+    clear,
+    handleFieldEnter,
+    removeFocusFromField,
+  };
+}

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

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+export function useEnsuredControl<V, E>(
+  props: { value?: V; onChange?: (e: E) => any },
+  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);
+    },
+    [isControlled, props]
+  );
+  return [isControlled ? props.value : localValue, onChange];
+}

package/src/hooks/useEventListener.ts

@@ -0,0 +1,62 @@
+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 | Window) => void;
+  remove: () => void;
+}
+
+export function useEventListener<K extends keyof GlobalEventHandlersEventMap>(
+  event: K,
+  _cb:
+    | false
+    | null
+    | undefined
+    | ((ev: GlobalEventHandlersEventMap[K]) => void),
+  _options?: AddEventListenerOptions
+): EventListenerHandle;
+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((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 | 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

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { setRef } from "../lib/utils";
+
+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

@@ -0,0 +1,35 @@
+import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect";
+import { useEventListener } from "./useEventListener";
+
+export function useGlobalEventListener<
+  K extends keyof GlobalEventHandlersEventMap
+>(
+  element: Document | HTMLElement | Window | null | undefined,
+  event: K,
+  cb: ((ev: GlobalEventHandlersEventMap[K]) => void) | null | false | undefined,
+  options?: AddEventListenerOptions
+): void;
+export function useGlobalEventListener<E extends Event>(
+  element: Document | HTMLElement | Window | null | undefined,
+  event: string,
+  cb: ((ev: E) => void) | null | false | undefined,
+  options?: AddEventListenerOptions
+): void;
+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(() => {
+    if (cb && element) {
+      listener.add(element);
+    } else {
+      listener.remove();
+    }
+  }, [Boolean(cb), Boolean(element)]);
+}

package/src/hooks/useInsets.ts

@@ -0,0 +1,69 @@
+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,
+  top: null,
+  left: null,
+  right: null,
+};
+
+interface BridgeEvent {
+  detail: {
+    type: string;
+    data: {
+      [index: string]: any;
+    };
+  };
+}
+
+function resolveInsets(e: BridgeEvent): Insets | null {
+  const { type, data } = e.detail;
+  switch (type) {
+    case "VKWebAppUpdateConfig":
+    case "VKWebAppUpdateInsets": // Устаревшее событие vk-bridge
+      const { insets } = data;
+      if (insets) {
+        return {
+          ...insets,
+          bottom: insets.bottom > 150 ? 0 : insets.bottom, // если больше 150 – значит открылась клава и она сама работает как инсет, то есть наш нужно занулить
+        };
+      }
+  }
+  return null;
+}
+
+vkBridge.subscribe((e: BridgeEvent) => {
+  const insets = resolveInsets(e);
+  if (insets) {
+    initialState = insets;
+  }
+});
+
+export function useInsets(): Insets {
+  const [insets, setInsets] = React.useState<Insets>(initialState);
+
+  useIsomorphicLayoutEffect(() => {
+    function connectListener(e: BridgeEvent) {
+      const insets = resolveInsets(e);
+      if (insets) {
+        setInsets(insets);
+      }
+    }
+
+    vkBridge.subscribe(connectListener);
+    return () => {
+      vkBridge.unsubscribe(connectListener);
+    };
+  }, []);
+
+  return insets;
+}

package/src/hooks/useKeyboard.ts

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { useDOM } from "../lib/dom";
+import { useGlobalEventListener } from "./useGlobalEventListener";
+
+interface SoftwareKeyboardState {
+  isOpened: boolean;
+  isPrecise: boolean;
+}
+
+/**
+ Проверяет, закрыла ли клавиатура часть экрана, 24% подошло к большинству устройств
+ Работает на iOS и Android, где софт-клавиатура ресайзит viewport в браузерах
+ */
+export function getPreciseKeyboardState(window: any): boolean {
+  const {
+    innerHeight,
+    screen: { availHeight },
+  } = window;
+
+  const coveredViewportPercentage = Math.round(
+    (1 - innerHeight / availHeight) * 100
+  );
+  return coveredViewportPercentage > 24;
+}
+
+const eventOptions = {
+  passive: true,
+  capture: false,
+};
+
+export function useKeyboard(): SoftwareKeyboardState {
+  const { window, document } = useDOM();
+
+  const [isOpened, setIsOpened] = React.useState(false);
+  const [isPrecise, setIsPrecise] = React.useState(false);
+
+  const transitionalTimeout = React.useRef<ReturnType<
+    typeof setTimeout
+  > | null>(null);
+
+  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, для этого вызываем вручную,
+   чтобы иметь хоть какое-то понимание происходящего.
+   */
+  React.useEffect(() => {
+    onFocus(true);
+  }, [onFocus]);
+
+  useGlobalEventListener(document, "focusout", onFocus, eventOptions);
+  useGlobalEventListener(document, "focusin", onFocus, eventOptions);
+
+  return { isOpened, isPrecise };
+}

package/src/hooks/useKeyboardInputTracker.ts

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

package/src/hooks/useObjectMemo.ts

@@ -0,0 +1,16 @@
+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])
+  );
+}
+
+export function useObjectMemo<T>(object: T): T {
+  const cache = React.useRef(object);
+  if (!objectEquals(cache.current, object)) {
+    cache.current = object;
+  }
+  return cache.current;
+}

package/src/hooks/useOrientationChange.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { useDOM } from "../lib/dom";
+import { useGlobalEventListener } from "./useGlobalEventListener";
+
+type Orientation = "portrait" | "landscape";
+
+/**
+ * Возвращает текущую ориентация экрана на человеческом языке.
+ * Учитывает особенности API на разных платформах.
+ */
+function getOrientation(window: Window | undefined): Orientation {
+  if (!window) {
+    return "portrait";
+  }
+
+  const angle = Math.abs(
+    window.screen?.orientation?.angle ?? Number(window.orientation)
+  );
+
+  return angle === 90 ? "landscape" : "portrait";
+}
+
+/**
+ * Возвращает текущую ориентация экрана на человеческом языке.
+ * Обновляется при изменении ориентации.
+ */
+export function useOrientationChange(): Orientation {
+  const { window } = useDOM();
+
+  const [orientation, setOrientation] = React.useState(() =>
+    getOrientation(window)
+  );
+
+  useGlobalEventListener(window, "orientationchange", () =>
+    setOrientation(getOrientation(window))
+  );
+
+  return orientation;
+}