@vkontakte/vkui 4.28.0 → 4.29.1

package/src/lib/getNavId.ts

@@ -0,0 +1,15 @@
+import { WarnOnceHandler } from "./warnOnce";
+
+export interface NavIdProps {
+  /** Уникальный идентификатор навигационного элемента (вместо id) */
+  nav?: string;
+  id?: string;
+}
+
+export function getNavId(props: NavIdProps, warn?: WarnOnceHandler) {
+  const id = props.nav || props.id;
+  if (process.env.NODE_ENV === "development" && !id && warn) {
+    warn('Навигационный элемент должен иметь свойство "nav" или "id"', "error");
+  }
+  return id;
+}

package/src/lib/is.ts

@@ -0,0 +1,10 @@
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
+export function is(x: any, y: any) {
+  return (
+    (x === y &&
+      // -0 is not +0
+      (x !== 0 || 1 / x === 1 / y)) ||
+    // both NaN
+    (x !== x && y !== y)
+  );
+}

package/src/lib/isRefObject.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+export const isRefObject = <T, E = Element>(
+  refObject: React.RefObject<E> | T
+): refObject is React.RefObject<E> => {
+  return (
+    typeof refObject === "object" &&
+    refObject !== null &&
+    (refObject as React.RefObject<E>).hasOwnProperty("current")
+  );
+};

package/src/lib/jsxRuntime.d.ts

@@ -0,0 +1,6 @@
+import { createScopedElement as _jsxFactory } from "./jsxRuntime";
+type jsxFactory = typeof _jsxFactory;
+
+declare global {
+  const createScopedElement: jsxFactory;
+}

package/src/lib/jsxRuntime.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { prefixClass } from "./prefixClass";
+
+function processProps(props: any) {
+  const newProps: any = {};
+  for (let key in props) {
+    if (
+      Object.prototype.hasOwnProperty.call(props, key) &&
+      key !== "vkuiClass"
+    ) {
+      newProps[key] = props[key];
+    }
+  }
+  if (props.vkuiClass) {
+    const className: string = props.className;
+    const resolved = prefixClass(props.vkuiClass);
+    newProps.className = className ? className + " " + resolved : resolved;
+  }
+  return newProps;
+}
+
+function createScopedElement(_type: any, props?: any) {
+  let args = arguments;
+
+  if (!props || !("vkuiClass" in props)) {
+    return React.createElement.apply(undefined, args as any);
+  }
+
+  let argsLength = args.length;
+  let createElementArgArray = new Array(argsLength);
+  createElementArgArray[0] = args[0];
+  createElementArgArray[1] = processProps(props);
+
+  for (let i = 2; i < argsLength; i++) {
+    createElementArgArray[i] = args[i];
+  }
+
+  return React.createElement.apply(null, createElementArgArray as any);
+}
+
+createScopedElement.Fragment = React.Fragment;
+
+export { createScopedElement };

package/src/lib/offset.ts

@@ -0,0 +1,17 @@
+export interface OffsetRectInterface {
+  top: number | undefined;
+  left: number | undefined;
+  width: number | undefined;
+  height: number | undefined;
+}
+
+export function getOffsetRect(elem: HTMLElement | null): OffsetRectInterface {
+  const box = elem?.getBoundingClientRect();
+
+  return {
+    top: box?.top,
+    left: box?.left,
+    width: elem?.offsetWidth,
+    height: elem?.offsetHeight,
+  };
+}

package/src/lib/platform.ts

@@ -0,0 +1,70 @@
+import { BrowserInfo, computeBrowserInfo } from "./browser";
+import { querystring } from "@vkontakte/vkjs";
+import { canUseDOM } from "./dom";
+
+export enum Platform {
+  ANDROID = "android",
+  IOS = "ios",
+  VKCOM = "vkcom",
+}
+
+const PLATFORM_ALIAS = {
+  desktop_web: Platform.VKCOM,
+};
+
+function isPlatformAlias(
+  platformAlias: string
+): platformAlias is keyof typeof PLATFORM_ALIAS {
+  return platformAlias in PLATFORM_ALIAS;
+}
+
+/**
+ * Значение, которое передаётся в качестве query-параметра при открытии VK Mini Apps
+ * @see {@link https://dev.vk.com/mini-apps/development/launch-params#vk_platform vk_platform}
+ */
+function getPlatformByQueryString(queryString: string): Platform | undefined {
+  const parsedQuery = querystring.parse(queryString);
+  const platformAliasByQuery = parsedQuery["vk_platform"];
+
+  return typeof platformAliasByQuery === "string" &&
+    isPlatformAlias(platformAliasByQuery)
+    ? PLATFORM_ALIAS[platformAliasByQuery]
+    : undefined;
+}
+
+const platformByQueryString = canUseDOM
+  ? getPlatformByQueryString(location.search)
+  : undefined;
+
+export const ANDROID = Platform.ANDROID;
+export const IOS = Platform.IOS;
+export const VKCOM = Platform.VKCOM;
+
+export type PlatformType =
+  | Platform.ANDROID
+  | Platform.IOS
+  | Platform.VKCOM
+  | string;
+
+export function platform(browserInfo?: BrowserInfo): PlatformType {
+  if (platformByQueryString) {
+    return platformByQueryString;
+  }
+
+  if (!browserInfo) {
+    browserInfo = computeBrowserInfo();
+  }
+
+  return browserInfo.system === "ios" ? IOS : ANDROID;
+}
+
+const platformName = platform();
+
+/**
+ * @deprecated для определения платформы используйте withPlatform или usePlatform
+ */
+export const IS_PLATFORM_IOS: boolean = platformName === IOS;
+/**
+ * @deprecated для определения платформы используйте withPlatform или usePlatform
+ */
+export const IS_PLATFORM_ANDROID: boolean = platformName === ANDROID;

package/src/lib/polyfills.ts

@@ -0,0 +1,96 @@
+/* eslint-disable */
+import { canUseDOM } from "./dom";
+
+export type MatchesMethod = (css: string) => boolean;
+
+export interface OldElement extends Element {
+  matchesSelector?: MatchesMethod;
+  mozMatchesSelector?: MatchesMethod;
+  msMatchesSelector?: MatchesMethod;
+}
+
+if (canUseDOM) {
+  const ElementProto = Element.prototype;
+
+  // Element.prototype.matches
+  if (!ElementProto.matches) {
+    ElementProto.matches =
+      (ElementProto as OldElement).matchesSelector ||
+      ElementProto.webkitMatchesSelector ||
+      (ElementProto as OldElement).mozMatchesSelector ||
+      (ElementProto as OldElement).msMatchesSelector;
+  }
+
+  // Element.prototype.closest
+  if (!ElementProto.closest) {
+    ElementProto.closest = function (css: string): Element | null {
+      let node: Element | null = this;
+      while (node) {
+        if (node.matches(css)) {
+          return node;
+        } else {
+          node = node.parentElement;
+        }
+      }
+      return null;
+    };
+  }
+}
+
+// Array.prototype.includes
+if (!Array.prototype.includes) {
+  Object.defineProperty(Array.prototype, "includes", {
+    value: function (searchElement: any, fromIndex: number) {
+      if (this == null) {
+        throw new TypeError('"this" is null or not defined');
+      }
+      const o = Object(this);
+      const len = o.length >>> 0;
+      if (len === 0) {
+        return false;
+      }
+      const n = fromIndex | 0;
+      let k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);
+      function sameValueZero(x: any, y: any) {
+        return (
+          x === y ||
+          (typeof x === "number" &&
+            typeof y === "number" &&
+            isNaN(x) &&
+            isNaN(y))
+        );
+      }
+      while (k < len) {
+        if (sameValueZero(o[k], searchElement)) {
+          return true;
+        }
+        k++;
+      }
+      return false;
+    },
+  });
+}
+
+// Array.prototype.find
+if (!Array.prototype.find) {
+  Object.defineProperty(Array.prototype, "find", {
+    value: function (callback: Parameters<Array<any>["find"]>[0]) {
+      if (this === null) {
+        throw new TypeError("Array.prototype.find called on null or undefined");
+      } else if (typeof callback !== "function") {
+        throw new TypeError("callback must be a function");
+      }
+
+      let list = Object(this);
+      let length = list.length >>> 0;
+      let thisArg = arguments[1];
+
+      for (let i = 0; i < length; i++) {
+        let element = list[i];
+        if (callback.call(thisArg, element, i, list)) {
+          return element;
+        }
+      }
+    },
+  });
+}

package/src/lib/prefixClass.ts

@@ -0,0 +1,34 @@
+import { classScopingMode } from "./classScopingMode";
+
+const hasTransformable = /\b(?=[A-Z])/g;
+const noConflictCache: any = {};
+const legacyCache: any = {};
+function prefixSingle(scopedStyle: string): string {
+  const { noConflict } = classScopingMode;
+  const cache = noConflict ? noConflictCache : legacyCache;
+  if (cache[scopedStyle]) {
+    return cache[scopedStyle];
+  }
+  const prefixed = scopedStyle.replace(hasTransformable, "vkui");
+  const resolved =
+    noConflict || scopedStyle === prefixed
+      ? prefixed
+      : prefixed + " " + scopedStyle;
+  cache[scopedStyle] = resolved;
+  return resolved;
+}
+
+export function prefixClass(scopedStyle: string | string[]) {
+  if (typeof scopedStyle === "string") {
+    return prefixSingle(scopedStyle);
+  }
+
+  let resolved = "";
+  for (let i = 0; i < scopedStyle.length; i++) {
+    const separator = resolved ? " " : "";
+
+    resolved += separator + prefixSingle(scopedStyle[i]);
+  }
+
+  return resolved;
+}

package/src/lib/removeObjectKeys.ts

@@ -0,0 +1,10 @@
+export function removeObjectKeys<T, K extends keyof T>(
+  obj: T,
+  keys: K[] = []
+): T {
+  let newObj: T = { ...obj };
+
+  keys.forEach((key: K) => delete newObj[key]);
+
+  return newObj;
+}

package/src/lib/select.ts

@@ -0,0 +1,54 @@
+type Option = {
+  label?: string;
+  [index: string]: any;
+};
+
+type GetOptionLabel = (option: Option) => string | undefined;
+
+const findAllIncludes = (target = "", search = "") => {
+  const includes = [];
+
+  let i = target.indexOf(search);
+  while (i !== -1) {
+    includes.push(i);
+    i = target.indexOf(search, i + 1);
+  }
+
+  return includes;
+};
+
+let letterRegexp: RegExp;
+
+// На момент написания флаг u не поддерживался рядом браузеров, поэтому добавили фоллбэк.
+try {
+  letterRegexp = new RegExp("\\p{L}", "u");
+} catch (e) {}
+
+export const defaultFilterFn = (
+  query = "",
+  option: Option,
+  getOptionLabel: GetOptionLabel = (option) => option.label
+) => {
+  query = query.toLocaleLowerCase();
+  let label = getOptionLabel(option)?.toLocaleLowerCase();
+
+  if (label?.startsWith(query)) {
+    return true;
+  }
+
+  const includes = findAllIncludes(label, query);
+
+  // Ищем вхождение перед началом которого не буква
+  if (letterRegexp && label) {
+    for (const index of includes) {
+      if (!letterRegexp.test(label[index - 1])) {
+        return true;
+      }
+    }
+  } else {
+    // если regexp не поддерживается, то ищем любое вхождение
+    return includes.length > 0;
+  }
+
+  return false;
+};

package/src/lib/styles.ts

@@ -0,0 +1,12 @@
+/*
+ * Задает стиль трансформации элементу с учетом префиксов
+ */
+export function setTransformStyle(
+  element: HTMLElement | undefined | null,
+  transform: string
+): void {
+  if (element) {
+    element.style.transform = transform;
+    element.style.webkitTransform = transform;
+  }
+}

package/src/lib/supportEvents.ts

@@ -0,0 +1,38 @@
+import { canUseDOM } from "./dom";
+import { isTesting } from "./testing";
+
+export type VKUISupportEvents = {
+  supported: boolean;
+  name?: string | null;
+};
+
+// WebKitAnimationEvent и WebKitTransitionEvent не существуют в глобальном контексте
+declare const WebKitAnimationEvent: AnimationEvent;
+declare const WebKitTransitionEvent: TransitionEvent;
+
+const animationEvent = {
+  supported: false,
+};
+
+const transitionEvent: VKUISupportEvents = {
+  supported: false,
+  name: null,
+};
+
+if (canUseDOM && !isTesting) {
+  if (typeof AnimationEvent !== "undefined") {
+    animationEvent.supported = true;
+  } else if (typeof WebKitAnimationEvent !== "undefined") {
+    animationEvent.supported = true;
+  }
+
+  if (typeof TransitionEvent !== "undefined") {
+    transitionEvent.supported = true;
+    transitionEvent.name = "transitionend";
+  } else if (typeof WebKitTransitionEvent !== "undefined") {
+    transitionEvent.supported = true;
+    transitionEvent.name = "webkitTransitionEnd";
+  }
+}
+
+export { animationEvent, transitionEvent };

package/src/lib/taptic.ts

@@ -0,0 +1,9 @@
+import vkBridge, { TapticVibrationPowerType } from "@vkontakte/vk-bridge";
+
+export function runTapticImpactOccurred(style: TapticVibrationPowerType) {
+  if (vkBridge.supports("VKWebAppTapticImpactOccurred")) {
+    vkBridge
+      .send("VKWebAppTapticImpactOccurred", { style })
+      .catch(() => undefined);
+  }
+}

package/src/lib/testing.ts

@@ -0,0 +1,4 @@
+import { canUseDOM } from "@vkontakte/vkjs";
+
+// eslint-disable-next-line no-restricted-globals
+export const isTesting = Boolean(canUseDOM && (window as any).__isVkuiTesting);

package/src/lib/touch.ts

@@ -0,0 +1,59 @@
+import { canUseDOM } from "@vkontakte/vkjs";
+
+export interface VKUITouchEvent extends MouseEvent, TouchEvent {}
+export type VKUITouchEventHander = (e: VKUITouchEvent) => void;
+
+/*
+ * Получает координату по оси абсцисс из touch- или mouse-события
+ */
+const coordX = (e: VKUITouchEvent): number => {
+  if (e.clientX != null) {
+    return e.clientX;
+  }
+  return e.changedTouches && e.changedTouches[0].clientX;
+};
+
+/*
+ * Получает координату по оси ординат из touch- или mouse-события
+ */
+const coordY = (e: VKUITouchEvent): number => {
+  if (e.clientY != null) {
+    return e.clientY;
+  }
+  return e.changedTouches && e.changedTouches[0].clientY;
+};
+
+// eslint-disable-next-line no-restricted-globals
+const touchEnabled = () => canUseDOM && "ontouchstart" in window;
+
+/*
+ * Возвращает массив поддерживаемых событий
+ * Если браузер поддерживает pointer events или подключена handjs, вернет события указателя.
+ * Если нет, используем события мыши
+ */
+function getSupportedEvents(): string[] {
+  if (touchEnabled()) {
+    return ["touchstart", "touchmove", "touchend", "touchcancel"];
+  }
+
+  return ["mousedown", "mousemove", "mouseup", "mouseleave"];
+}
+
+/*
+ * Рассчитывает "сопротивление" для iOS тач-событий
+ */
+function rubber(
+  offset: number,
+  dimension: number,
+  resistanceRate: number,
+  isAndroid: boolean
+): number {
+  if (isAndroid || offset < 0) {
+    return offset;
+  }
+
+  const offsettedResistance = offset * resistanceRate;
+  return (offsettedResistance * dimension) / (offsettedResistance + dimension);
+}
+
+export { getSupportedEvents, coordX, coordY, touchEnabled, rubber };

package/src/lib/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { canUseDOM } from "./dom";
+
+export const useIsomorphicLayoutEffect = canUseDOM
+  ? // eslint-disable-next-line no-restricted-properties
+    React.useLayoutEffect
+  : React.useEffect;

package/src/lib/utils.ts

@@ -0,0 +1,99 @@
+import * as React from "react";
+
+export type ImgOnlyAttributes = {
+  [index in Exclude<
+    keyof React.ImgHTMLAttributes<HTMLImageElement>,
+    keyof React.HTMLAttributes<HTMLImageElement>
+  >]: React.ImgHTMLAttributes<HTMLImageElement>[index];
+};
+
+// Является ли переданное значение числовым
+export function isNumeric(value: any): boolean {
+  return !isNaN(parseFloat(value)) && isFinite(value);
+}
+
+// Является ли переданное значение функцией
+export function isFunction(value: any): value is (...args: any[]) => any {
+  return typeof value === "function";
+}
+
+export function debounce<A extends any[]>(
+  fn: (...args: A) => void,
+  delay: number
+) {
+  let timeout: any;
+
+  return (...args: A) => {
+    clearTimeout(timeout);
+    timeout = setTimeout(() => fn(...args), delay);
+  };
+}
+
+export function leadingZero(val: number) {
+  let strVal = val.toFixed();
+
+  if (strVal.length === 1) {
+    return "0" + strVal;
+  }
+
+  return strVal;
+}
+
+export function hasReactNode(value: React.ReactNode): boolean {
+  return (
+    value !== undefined && value !== false && value !== null && value !== ""
+  );
+}
+
+export function isPrimitiveReactNode(node: React.ReactNode): boolean {
+  return typeof node === "string" || typeof node === "number";
+}
+
+export function setRef<T>(element: T, ref?: React.Ref<T>): void {
+  if (ref) {
+    if (typeof ref === "function") {
+      ref(element);
+    } else {
+      (ref as React.MutableRefObject<T>).current = element;
+    }
+  }
+}
+
+export function multiRef<T>(
+  ...refs: Array<React.Ref<T> | undefined>
+): React.RefObject<T> {
+  let current: T | null = null;
+  return {
+    get current() {
+      return current;
+    },
+    set current(element) {
+      current = element;
+      refs.forEach((ref) => ref && setRef(element, ref));
+    },
+  };
+}
+
+// eslint-disable-next-line
+export const noop = () => {};
+
+export function getTitleFromChildren(children: React.ReactNode): string {
+  let label = "";
+
+  React.Children.map(children, (child) => {
+    if (typeof child === "string") {
+      label += child;
+    }
+  });
+
+  return label;
+}
+
+export const generateRandomId = () => {
+  return Math.random()
+    .toString(36)
+    .replace(/[^a-z]+/g, "");
+};
+
+export const stopPropagation = <T extends React.SyntheticEvent>(event: T) =>
+  event.stopPropagation();

package/src/lib/warnOnce.ts

@@ -0,0 +1,15 @@
+export type WarnOnceHandler = (
+  message: string,
+  type?: "warn" | "error"
+) => void;
+
+export function warnOnce(zone: string): WarnOnceHandler {
+  const didWarn: { [msg: string]: boolean } = {};
+
+  return (message: string, type: "warn" | "error" = "warn") => {
+    if (!didWarn[message]) {
+      console[type](`[VKUI/${zone}] ${message}`);
+      didWarn[message] = true;
+    }
+  };
+}

package/src/styles/animations.css

@@ -0,0 +1,19 @@
+@keyframes vkui-rotator {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes vkui-popper-fadein {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}