@vkontakte/vkui 4.28.0 → 4.28.1

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;
+}

package/src/hooks/usePagination.ts

@@ -0,0 +1,96 @@
+import * as React from "react";
+
+interface UsePagintaionProps {
+  /**
+   * Текущая страница.
+   */
+  currentPage?: number;
+  /**
+   * Кол-во всегда видимых страниц по краям текущей страницы.
+   */
+  siblingCount?: number;
+  /**
+   * Кол-во всегда видимых страниц в начале и в конце.
+   */
+  boundaryCount?: number;
+  /**
+   * Общее кол-во страниц.
+   */
+  totalPages?: number;
+}
+
+export type PaginationPageType = "start-ellipsis" | "end-ellipsis" | number;
+
+export type UsePaginationResult = PaginationPageType[];
+
+/**
+ * Хук взаимствован у @mui с некоторыми изменениями.
+ *  [usePagination.js](https://github.com/mui/material-ui/blob/master/packages/mui-material/src/usePagination/usePagination.js).
+ *
+ * Примеры вывода:
+ *           v
+ * [1, 2, 3, 4, 5, 'end-ellipsis', 10]
+ *                          v
+ * [1, 'start-ellipsis', 4, 5, 6, 'end-ellipsis', 10]
+ *                          v
+ * [1, 'start-ellipsis', 6, 7, 8, 9, 10]
+ */
+export const usePagination = ({
+  currentPage = 1,
+  siblingCount = 1,
+  boundaryCount = 1,
+  totalPages: endPage = 1,
+}: UsePagintaionProps = {}): UsePaginationResult =>
+  React.useMemo(() => {
+    const range = (from: number, to: number, step = 1) => {
+      const range = [];
+      let i = from;
+
+      while (i <= to) {
+        range.push(i);
+        i += step;
+      }
+
+      return range;
+    };
+
+    const startPages = range(1, Math.min(boundaryCount, endPage));
+    const endPages = range(
+      Math.max(endPage - boundaryCount + 1, boundaryCount + 1),
+      endPage
+    );
+
+    const lowerBoundaryWhenCurrentPageHigh =
+      endPage - boundaryCount - 1 - 2 * siblingCount;
+    const siblingsStart = Math.max(
+      Math.min(currentPage - siblingCount, lowerBoundaryWhenCurrentPageHigh),
+      boundaryCount + 2
+    );
+
+    const upperBounadryWhenCurrentPageLow =
+      boundaryCount + 2 + 2 * siblingCount;
+    const siblingsEnd = Math.min(
+      Math.max(currentPage + siblingCount, upperBounadryWhenCurrentPageLow),
+      endPages.length > 0 ? endPages[0] - 2 : endPage - 1
+    );
+
+    const pages: UsePaginationResult = startPages;
+
+    if (siblingsStart > boundaryCount + 2) {
+      pages.push("start-ellipsis");
+    } else if (boundaryCount + 1 < endPage - boundaryCount) {
+      pages.push(boundaryCount + 1);
+    }
+
+    pages.push(...range(siblingsStart, siblingsEnd));
+
+    if (siblingsEnd < endPage - boundaryCount - 1) {
+      pages.push("end-ellipsis");
+    } else if (endPage - boundaryCount > boundaryCount) {
+      pages.push(endPage - boundaryCount);
+    }
+
+    pages.push(...endPages);
+
+    return pages;
+  }, [currentPage, endPage, siblingCount, boundaryCount]);

package/src/hooks/usePatchChildrenRef.ts

@@ -0,0 +1,39 @@
+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 warn = warnOnce("usePatchChildrenRef");
+export const usePatchChildrenRef = <T = HTMLElement>(
+  children?: ChildrenElement<T>
+): [React.MutableRefObject<T | null>, ChildrenElement<T> | undefined] => {
+  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-элемент этого компонента"
+      );
+    }
+  }, [children?.type, patchedRef]);
+  return [
+    patchedRef,
+    React.isValidElement(children)
+      ? React.cloneElement(children, {
+          [isDOMTypeElement(children) ? "ref" : "getRootRef"]: patchedRef,
+        })
+      : children,
+  ];
+};

package/src/hooks/usePlatform.ts

@@ -0,0 +1,10 @@
+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);
+  const { platform } = React.useContext(ConfigProviderContext);
+  return ssrContext.platform || platform;
+}

package/src/hooks/useTimeout.ts

@@ -0,0 +1,33 @@
+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 });
+  useIsomorphicLayoutEffect(() => {
+    options.current.cb = cb;
+    options.current.duration = duration;
+  }, [cb, duration]);
+
+  const timeout = React.useRef<ReturnType<typeof setTimeout>>();
+  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 };
+}

package/src/hooks/useWaitTransitionFinish.ts

@@ -0,0 +1,28 @@
+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 | null,
+    eventHandler: VoidFunction,
+    durationFallback: number
+  ) => {
+    if (element) {
+      if (transitionEvent.supported && transitionEvent.name) {
+        element.removeEventListener(transitionEvent.name, eventHandler);
+        element.addEventListener(transitionEvent.name, eventHandler);
+      } else {
+        if (timeoutRef?.current) {
+          clearTimeout(timeoutRef.current);
+        }
+        timeoutRef.current = setTimeout(eventHandler, durationFallback);
+      }
+    }
+  };
+
+  return {
+    waitTransitionFinish,
+  };
+};