@vkontakte/vkui 4.27.2 → 4.28.0

package/src/fonts/fonts.css

@@ -1,7 +0,0 @@
-@font-face {
-  font-family: "VK Sans Display";
-  src: url("./VK_Sans_Display_Medium.woff2") format("woff2"),
-    url("./VK_Sans_Display_Medium.woff") format("woff");
-  font-weight: 500;
-  font-display: fallback;
-}

package/src/helpers/avatar.ts

@@ -1,10 +0,0 @@
-import { InitialsAvatarNumberGradients } from "../components/InitialsAvatar/InitialsAvatar";
-
-/**
- * Вычисляет цвет InitialsAvatar на основании переданного идентификатора объекта
- */
-export function calcInitialsAvatarColor(
-  objectId: number
-): InitialsAvatarNumberGradients {
-  return ((objectId % 6) + 1) as InitialsAvatarNumberGradients;
-}

package/src/helpers/getClassName.ts

@@ -1,8 +0,0 @@
-import { PlatformType, platform } from "../lib/platform";
-
-export function getClassName(
-  base: string,
-  osname: PlatformType = platform()
-): string {
-  return `${base} ${base}--${osname}`;
-}

package/src/helpers/getScheme.ts

@@ -1,27 +0,0 @@
-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/math.ts

@@ -1,40 +0,0 @@
-export const clamp = (value: number, min: number, max: number) =>
-  Math.max(min, Math.min(value, max));
-
-export function precisionRound(number: number, precision = 1) {
-  let factor = Math.pow(10, precision);
-  return Math.round(number * factor) / factor;
-}
-
-function precision(number: number) {
-  return (`${number}`.split(".")[1] || "").length;
-}
-
-function decimatedClamp(val: number, min: number, max: number, step?: number) {
-  if (step == null || step <= 0) {
-    return clamp(val, min, max);
-  }
-  const prec = precision(step);
-  // Round value to nearest min + k1 * step
-  const decimatedOffset = precisionRound(
-    Math.round((val - min) / step) * step,
-    prec
-  );
-  // Round range length _down_ to nearest min + k2 * step
-  const decimatedRange = precisionRound(
-    Math.floor((max - min) / step) * step,
-    prec
-  );
-  return min + clamp(decimatedOffset, 0, decimatedRange);
-}
-
-export function rescale(
-  value: number,
-  from: [number, number],
-  to: [number, number],
-  options: { step?: number } = {}
-) {
-  const scaled =
-    ((value - from[0]) / (from[1] - from[0])) * (to[1] - to[0]) + to[0];
-  return decimatedClamp(scaled, to[0], to[1], options.step);
-}

package/src/helpers/scheme.ts

@@ -1,86 +0,0 @@
-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,86 +0,0 @@
-import * as React from "react";
-import {
-  AdaptivityContext,
-  SizeType,
-  ViewHeight,
-  ViewWidth,
-  AdaptivityContextInterface,
-  AdaptivityProps,
-  SizeProps,
-} from "../components/AdaptivityProvider/AdaptivityContext";
-
-export { SizeType, ViewWidth, ViewHeight };
-export type { AdaptivityProps };
-
-interface Config {
-  sizeX?: boolean;
-  sizeY?: boolean;
-  viewWidth?: boolean;
-  viewHeight?: boolean;
-  hasMouse?: boolean;
-  deviceHasHover?: boolean;
-}
-
-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;
-
-    if (props.sizeX || props.sizeY) {
-      update = true;
-    }
-
-    const sizeX = props.sizeX || context.sizeX;
-    const sizeY = props.sizeY || context.sizeY;
-    const viewWidth = context.viewWidth;
-    const viewHeight = context.viewHeight;
-    const hasMouse = context.hasMouse;
-    const deviceHasHover = context.deviceHasHover;
-
-    const adaptivityProps: {
-      sizeX?: SizeType;
-      sizeY?: SizeType;
-      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;
-    config.deviceHasHover
-      ? (adaptivityProps.deviceHasHover = deviceHasHover)
-      : undefined;
-
-    const target = <TargetComponent {...(props as T)} {...adaptivityProps} />;
-
-    if (update) {
-      return (
-        <AdaptivityContext.Provider
-          value={{
-            sizeX,
-            sizeY,
-            viewWidth,
-            viewHeight,
-            hasMouse,
-            deviceHasHover,
-          }}
-        >
-          {target}
-        </AdaptivityContext.Provider>
-      );
-    }
-
-    return target;
-  };
-
-  return AdaptivityConsumer;
-}

package/src/hoc/withContext.tsx

@@ -1,14 +0,0 @@
-import * as React from "react";
-
-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);
-
-    return <Component {...props} {...{ [prop]: context }} />;
-  }
-  return WithContext;
-}

package/src/hoc/withInsets.tsx

@@ -1,12 +0,0 @@
-import { useInsets } from "../hooks/useInsets";
-import { HasInsets } from "../types";
-
-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();
-    return <Component {...(props as T)} insets={insets} />;
-  }
-  return WithInsets;
-}

package/src/hoc/withPlatform.tsx

@@ -1,17 +0,0 @@
-import * as React from "react";
-import { SSRContext } from "../lib/SSR";
-import { HasPlatform } from "../types";
-import { ConfigProviderContext } from "../components/ConfigProvider/ConfigProviderContext";
-
-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);
-    return (
-      <Component {...(props as T)} platform={ssrContext.platform || platform} />
-    );
-  }
-  return WithPlatform;
-}

package/src/hooks/useAdaptivity.ts

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

package/src/hooks/useAppearance.ts

@@ -1,4 +0,0 @@
-import * as React from "react";
-import { AppearanceProviderContext } from "../components/AppearanceProvider/AppearanceProviderContext";
-
-export const useAppearance = () => React.useContext(AppearanceProviderContext);

package/src/hooks/useBrowserInfo.ts

@@ -1,11 +0,0 @@
-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);
-
-  return browserInfo;
-}

package/src/hooks/useEffectDev.ts

@@ -1,5 +0,0 @@
-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,17 +0,0 @@
-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

@@ -1,62 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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,35 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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 };
-}