@vkontakte/vkui 4.28.0 → 4.28.1

package/src/lib/calendar.ts

@@ -0,0 +1,123 @@
+import {
+  eachDayOfInterval,
+  startOfWeek,
+  endOfWeek,
+  addDays,
+  subDays,
+  subWeeks,
+  addWeeks,
+  startOfMonth,
+  endOfMonth,
+  isBefore,
+  isFirstDayOfMonth,
+  isLastDayOfMonth,
+} from "date-fns";
+
+export const getYears = (currentYear: number, range: number) => {
+  const years: Array<{
+    value: number;
+    label: string;
+  }> = [];
+
+  for (let i = currentYear - range; i <= currentYear + range; i++) {
+    years.push({ label: String(i).padStart(4, "0"), value: i });
+  }
+
+  return years;
+};
+
+export const getMonths = (locale?: string) => {
+  const months: Array<{
+    value: number;
+    label: string;
+  }> = [];
+  const formatter = new Intl.DateTimeFormat(locale, {
+    month: "long",
+  });
+
+  for (let i = 0; i < 12; i++) {
+    months.push({
+      label: formatter.format(new Date("1970-01-01").setMonth(i)),
+      value: i,
+    });
+  }
+
+  return months;
+};
+
+export const getDaysNames = (
+  now: Date,
+  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6,
+  locale?: string
+) => {
+  const formatter = new Intl.DateTimeFormat(locale, {
+    weekday: "short",
+  });
+  return eachDayOfInterval({
+    start: startOfWeek(now, { weekStartsOn }),
+    end: endOfWeek(now, { weekStartsOn }),
+  }).map((day) => formatter.format(day));
+};
+
+export const navigateDate = (date?: Date | null, key?: string) => {
+  let newDate = date ?? new Date();
+
+  switch (key) {
+    case "ArrowRight":
+      newDate = addDays(newDate, 1);
+      break;
+    case "ArrowLeft":
+      newDate = subDays(newDate, 1);
+      break;
+    case "ArrowUp":
+      newDate = subWeeks(newDate, 1);
+      break;
+    case "ArrowDown":
+      newDate = addWeeks(newDate, 1);
+      break;
+  }
+
+  return newDate;
+};
+
+export const getWeeks = (
+  viewDate: Date,
+  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6
+) => {
+  const start = startOfWeek(startOfMonth(viewDate), { weekStartsOn });
+  const end = endOfWeek(endOfMonth(viewDate), { weekStartsOn });
+
+  let count = 0;
+  let current = start;
+  const nestedWeeks: Date[][] = [];
+  let lastDay = null;
+  while (isBefore(current, end)) {
+    const weekNumber = Math.floor(count / 7);
+    nestedWeeks[weekNumber] = nestedWeeks[weekNumber] || [];
+    const day = current.getDay();
+    if (lastDay !== day) {
+      lastDay = day;
+      nestedWeeks[weekNumber].push(current);
+      count += 1;
+    }
+    current = addDays(current, 1);
+  }
+  return nestedWeeks;
+};
+
+export const setTimeEqual = (to: Date, from?: Date | null) => {
+  if (from) {
+    to.setHours(from.getHours());
+    to.setMinutes(from.getMinutes());
+    to.setSeconds(from.getSeconds());
+    to.setMilliseconds(from.getMilliseconds());
+  }
+
+  return to;
+};
+
+export const isFirstDay = (day: Date, dayOfWeek: number) =>
+  dayOfWeek === 0 || isFirstDayOfMonth(day);
+
+export const isLastDay = (day: Date, dayOfWeek: number) =>
+  dayOfWeek === 6 || isLastDayOfMonth(day);

package/src/lib/callMultiple.ts

@@ -0,0 +1,4 @@
+export const callMultiple =
+  (...fns: any[]) =>
+  (...args: any[]) =>
+    fns.filter((f) => typeof f === "function").forEach((f) => f(...args));

package/src/lib/classNames.ts

@@ -0,0 +1,44 @@
+export interface ObjectClassNames {
+  [index: string]: boolean | undefined | null;
+}
+
+export type ClassName =
+  | number
+  | string
+  | ObjectClassNames
+  | false
+  | null
+  | undefined;
+
+export function classNames(...classnames: ClassName[]): string | string[];
+export function classNames() {
+  let result: string[] = [];
+
+  for (let i = 0; i < arguments.length; i++) {
+    const item = arguments[i];
+    if (!item) {
+      continue;
+    }
+    switch (typeof item) {
+      case "string":
+        result.push(item);
+        break;
+      case "object":
+        for (let key in item) {
+          if (item[key]) {
+            result.push(key);
+          }
+        }
+        break;
+      default:
+        result.push(`${item}`);
+    }
+  }
+
+  return result.length > 1 ? result : result[0] || "";
+}
+
+export function classNamesString(...args: ClassName[]) {
+  const res = classNames(...args);
+  return typeof res === "string" ? res : res.join(" ");
+}

package/src/lib/classScopingMode.ts

@@ -0,0 +1,21 @@
+// exported for tests =(
+export const __controller = {
+  _noConflict: false,
+  _isSet: false,
+  get noConflict() {
+    return this._noConflict;
+  },
+  set noConflict(v: boolean) {
+    if (this._isSet && v !== this.noConflict) {
+      setTimeout(() => {
+        throw new Error(
+          "[vkui]: Single VKUI instance can not have different globalClassName settings"
+        );
+      }, 0);
+    }
+    this._noConflict = v;
+    this._isSet = true;
+  },
+};
+
+export const classScopingMode: { noConflict: boolean } = __controller;

package/src/lib/dom.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { canUseDOM } from "@vkontakte/vkjs";
+export { canUseDOM, canUseEventListeners, onDOMLoaded } from "@vkontakte/vkjs";
+
+export interface DOMContextInterface {
+  /**
+   * @ignore
+   */
+  window?: Window;
+  /**
+   * @ignore
+   */
+  document?: Document;
+}
+
+export type DOMProps = DOMContextInterface;
+
+/* eslint-disable no-restricted-globals */
+export const getDOM = () => ({
+  window: canUseDOM ? window : undefined,
+  document: canUseDOM ? document : undefined,
+});
+/* eslint-enable no-restricted-globals */
+
+export const DOMContext = React.createContext<DOMContextInterface>(getDOM());
+
+export const useDOM = () => {
+  return React.useContext(DOMContext);
+};
+
+export function withDOM<Props>(
+  Component: React.ComponentType<Props & DOMProps>
+): React.ComponentType<Props> {
+  const WithDOM: React.FC<Props> = (props: Props) => {
+    const dom = useDOM();
+    return <Component {...props} {...dom} />;
+  };
+  return WithDOM;
+}
+
+export function blurActiveElement(document: Document | undefined) {
+  if (document && document.activeElement) {
+    (document.activeElement as HTMLElement).blur();
+  }
+}

package/src/lib/fx.ts

@@ -0,0 +1,7 @@
+/**
+ * ease function
+ * @param x absolute progress of the animation in bounds 0 (beginning) and 1 (end)
+ */
+export function easeInOutSine(x: number) {
+  return 0.5 * (1 - Math.cos(Math.PI * x));
+}

package/src/lib/getNavId.ts

@@ -0,0 +1,13 @@
+export interface NavIdProps {
+  /** Уникальный идентификатор навигационного элемента (вместо id) */
+  nav?: string;
+  id?: string;
+}
+
+export function getNavId(props: NavIdProps, warn?: (text: string) => any) {
+  const id = props.nav || props.id;
+  if (process.env.NODE_ENV === "development" && !id && warn) {
+    warn('Navigation item should have "nav" or "id" prop');
+  }
+  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,36 @@
+import { BrowserInfo, computeBrowserInfo } from "./browser";
+
+export enum Platform {
+  ANDROID = "android",
+  IOS = "ios",
+  VKCOM = "vkcom",
+}
+
+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 (!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);