@vkontakte/vkui 4.28.0 → 4.28.1

package/src/fonts/fonts.css

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

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

package/src/helpers/getClassName.ts

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

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/math.ts

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

@@ -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/helpers/typography.ts

@@ -0,0 +1,24 @@
+export function resolveWeight(
+  weight?:
+    | "regular"
+    | "medium"
+    | "semibold"
+    | "bold"
+    | "heavy"
+    | "1"
+    | "2"
+    | "3"
+): "1" | "2" | "3" | undefined {
+  switch (weight) {
+    case "regular":
+      return "3";
+    case "semibold":
+      return "2";
+    case "medium":
+    case "bold":
+    case "heavy":
+      return "1";
+    default:
+      return weight;
+  }
+}

package/src/hoc/withAdaptivity.tsx

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

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

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

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

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

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

package/src/hooks/useBooleanState.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+export const useBooleanState = (defaultValue = false) => {
+  const [value, setValue] = React.useState(defaultValue);
+
+  const setTrue = React.useCallback(() => {
+    setValue(true);
+  }, []);
+
+  const setFalse = React.useCallback(() => {
+    setValue(false);
+  }, []);
+
+  const toggle = React.useCallback(() => {
+    setValue(!value);
+  }, [value]);
+
+  return { value, setTrue, setFalse, toggle };
+};

package/src/hooks/useBrowserInfo.ts

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

@@ -0,0 +1,78 @@
+import * as React from "react";
+import {
+  subMonths,
+  addMonths,
+  isSameDay,
+  isBefore,
+  endOfDay,
+  isAfter,
+  startOfDay,
+} from "date-fns";
+
+export interface UseCalendarDependencies {
+  value?: Array<Date | null> | Date;
+  disablePast?: boolean;
+  disableFuture?: boolean;
+  shouldDisableDate?(value: Date): boolean;
+}
+
+export function useCalendar({
+  value,
+  disablePast,
+  disableFuture,
+  shouldDisableDate,
+}: UseCalendarDependencies) {
+  const [viewDate, setViewDate] = React.useState(
+    (Array.isArray(value) ? value[0] : value) ?? new Date()
+  );
+  const [focusedDay, setFocusedDay] = React.useState<Date>();
+
+  const setPrevMonth = React.useCallback(
+    () => setViewDate(subMonths(viewDate, 1)),
+    [viewDate]
+  );
+  const setNextMonth = React.useCallback(
+    () => setViewDate(addMonths(viewDate, 1)),
+    [viewDate]
+  );
+
+  const isDayFocused = React.useCallback(
+    (day: Date) => Boolean(focusedDay && isSameDay(day, focusedDay)),
+    [focusedDay]
+  );
+
+  const isDayDisabled = React.useCallback(
+    (day: Date) => {
+      const now = new Date();
+      let disabled = false;
+      if (disablePast) {
+        disabled = isBefore(endOfDay(day), now);
+      }
+      if (disableFuture) {
+        disabled = isAfter(startOfDay(day), now);
+      }
+      if (shouldDisableDate) {
+        disabled = shouldDisableDate(day);
+      }
+
+      return disabled;
+    },
+    [disableFuture, disablePast, shouldDisableDate]
+  );
+
+  const resetSelectedDay = React.useCallback(() => {
+    setFocusedDay(undefined);
+  }, [setFocusedDay]);
+
+  return {
+    viewDate,
+    setViewDate,
+    setPrevMonth,
+    setNextMonth,
+    focusedDay,
+    setFocusedDay,
+    isDayFocused,
+    isDayDisabled,
+    resetSelectedDay,
+  };
+}

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;