@vkontakte/vkui 4.28.0 → 4.29.1

package/src/lib/accessibility.ts

@@ -0,0 +1,87 @@
+import * as React from "react";
+
+export const FOCUSABLE_ELEMENTS_LIST = [
+  "a[href]",
+  "area[href]",
+  'input:not([disabled]):not([hidden]):not([type="hidden"]):not([aria-hidden])',
+  "select:not([disabled]):not([hidden]):not([aria-hidden])",
+  "textarea:not([disabled])",
+  "button:not([disabled])",
+  "iframe",
+  "audio",
+  "video",
+  "[contenteditable]",
+  '[tabindex]:not([tabindex="-1"])',
+];
+
+export enum Keys {
+  ENTER = "Enter",
+  SPACE = "Space",
+  TAB = "Tab",
+  ESCAPE = "Escape",
+}
+
+interface AccessibleKey {
+  code: Keys;
+  key: string[];
+  keyCode: number;
+}
+
+const ACCESSIBLE_KEYS: AccessibleKey[] = [
+  {
+    code: Keys.ENTER,
+    key: ["Enter"],
+    keyCode: 13,
+  },
+  {
+    code: Keys.SPACE,
+    key: ["Space", "Spacebar", " "],
+    keyCode: 32,
+  },
+  {
+    code: Keys.TAB,
+    key: ["Tab"],
+    keyCode: 9,
+  },
+  {
+    code: Keys.ESCAPE,
+    key: ["Escape"],
+    keyCode: 27,
+  },
+];
+
+export function pressedKey(
+  e: KeyboardEvent | React.KeyboardEvent<HTMLElement>
+) {
+  return (
+    ACCESSIBLE_KEYS.find(
+      ({ key, keyCode }) => key.includes(e.key) || keyCode === e.keyCode
+    )?.code || null
+  );
+}
+
+export function shouldTriggerClickOnEnterOrSpace(
+  e: KeyboardEvent | React.KeyboardEvent<HTMLElement>
+) {
+  const el = e.target as HTMLElement;
+  const { tagName } = el;
+
+  const role = el.getAttribute("role");
+
+  const isValidKeyboardEventTarget: boolean =
+    el.isContentEditable !== true &&
+    tagName !== "INPUT" &&
+    tagName !== "TEXTAREA" &&
+    (role === "button" || role === "link");
+
+  const isNativeAnchorEl = tagName === "A" && el.hasAttribute("href");
+  const keyPressed = pressedKey(e);
+
+  return (
+    isValidKeyboardEventTarget &&
+    // trigger buttons on Space
+    ((keyPressed === Keys.SPACE && role === "button") ||
+      // trigger non-native links and buttons on Enter
+      (keyPressed === Keys.ENTER && !isNativeAnchorEl))
+  );
+}

package/src/lib/animate.ts

@@ -0,0 +1,47 @@
+import { canUseDOM } from "@vkontakte/vkjs";
+
+/**
+ * Функция для js анимации
+ * @param {number} duration
+ * @param {function} timing тайминг функция анимации
+ * @param {function} draw коллбэк, в который прокидывается прогресс [0, 1]
+ * @returns {void}
+ */
+export type TimingInterface = (timeFraction: number) => number;
+
+export type DrawInterface = (progress: number) => void;
+
+export interface AnimateArgumentsInterface {
+  duration: number;
+  timing: TimingInterface;
+  draw: DrawInterface;
+}
+
+// eslint-disable-next-line import/no-default-export
+export default function animate({
+  duration,
+  timing,
+  draw,
+}: AnimateArgumentsInterface): void {
+  if (!canUseDOM) {
+    return;
+  }
+
+  const start = performance.now();
+
+  requestAnimationFrame(function animate(time: number): void {
+    let timeFraction = (time - start) / duration;
+
+    if (timeFraction > 1) {
+      timeFraction = 1;
+    }
+
+    const progress = timing(timeFraction);
+
+    draw(progress);
+
+    if (timeFraction < 1) {
+      requestAnimationFrame(animate);
+    }
+  });
+}

package/src/lib/browser.ts

@@ -0,0 +1,44 @@
+import { Version } from "../types";
+import { detectIOS } from "@vkontakte/vkjs";
+
+export enum System {
+  IOS = "ios",
+  UNKNOWN = "",
+}
+
+export interface BrowserInfo {
+  userAgent: string;
+  system: System;
+  systemVersion: Version | null;
+}
+
+const memoized: { [index: string]: BrowserInfo } = {};
+
+export function computeBrowserInfo(userAgent = ""): BrowserInfo {
+  if (memoized[userAgent]) {
+    return memoized[userAgent];
+  }
+
+  let systemVersion: Version | null = null;
+  let system = System.UNKNOWN;
+
+  const { isIOS, iosMajor, iosMinor } = detectIOS(userAgent);
+
+  if (isIOS) {
+    system = System.IOS;
+    systemVersion = {
+      major: iosMajor,
+      minor: iosMinor,
+    };
+  }
+
+  const browserInfo: BrowserInfo = {
+    userAgent,
+    system,
+    systemVersion,
+  };
+
+  memoized[userAgent] = browserInfo;
+
+  return browserInfo;
+}

package/src/lib/calendar.ts

@@ -0,0 +1,123 @@
+import {
+  eachDayOfInterval,
+  startOfWeek,
+  endOfWeek,
+  addDays,
+  subDays,
+  subWeeks,
+  addWeeks,
+  startOfMonth,
+  endOfMonth,
+  isBefore,
+  isFirstDayOfMonth,
+  isLastDayOfMonth,
+} from "./date";
+
+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(
+    startOfWeek(now, weekStartsOn),
+    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/date.ts

@@ -0,0 +1,274 @@
+import dayjs from "dayjs";
+
+// Using date-fns-like type for migration
+type DirtyDate = Date | number;
+
+export function startOfDay(date: DirtyDate) {
+  return dayjs(date).startOf("day").toDate();
+}
+
+export function endOfDay(date: DirtyDate) {
+  return dayjs(date).endOf("day").toDate();
+}
+
+export function startOfWeek(date: DirtyDate, weekStart = 0) {
+  weekStart = weekStart % 7;
+
+  const day = dayjs(date);
+  const weekDay = day.day();
+  const diff = (weekDay < weekStart ? 7 : 0) + weekDay - weekStart;
+
+  return day.date(day.date() - diff).toDate();
+}
+
+export function endOfWeek(date: DirtyDate, weekStart = 0) {
+  const day = dayjs(startOfWeek(date, weekStart));
+
+  return day.date(day.date() + 6).toDate();
+}
+
+export function startOfMonth(date: DirtyDate) {
+  return dayjs(date).startOf("month").toDate();
+}
+
+export function endOfMonth(date: DirtyDate) {
+  return dayjs(date).endOf("month").toDate();
+}
+
+export function isFirstDayOfMonth(date: DirtyDate) {
+  return dayjs(date).date() === 1;
+}
+
+export function isLastDayOfMonth(date: DirtyDate) {
+  // isSameDay -- shorter, but not exact with date-fns behavior
+  // return isSameDay(date, dayjs(date).endOf("month"));
+  return dayjs(date).endOf("day").isSame(dayjs(date).endOf("month"));
+}
+
+export function format(date: DirtyDate, format: string) {
+  return dayjs(date).format(format);
+}
+
+export function isBefore(date1: DirtyDate, date2: DirtyDate) {
+  // Exactly as date-fns does
+  // dayjs().isBefore() for slightly different approach
+  return dayjs(date1) < dayjs(date2);
+}
+
+export function isAfter(date1: DirtyDate, date2: DirtyDate) {
+  return dayjs(date1) > dayjs(date2);
+}
+
+export function isSameDay(date1: DirtyDate, date2: DirtyDate) {
+  return dayjs(date1).isSame(date2, "day");
+}
+
+export function isSameMonth(date1: DirtyDate, date2: DirtyDate) {
+  return dayjs(date1).isSame(date2, "month");
+}
+
+export function isWithinInterval(
+  date: DirtyDate,
+  start: DirtyDate,
+  end: DirtyDate
+) {
+  const day = dayjs(date);
+  return day >= dayjs(start) && day <= dayjs(end);
+}
+
+export function setMinutes(date: DirtyDate, minute: number) {
+  return dayjs(date).set("minute", minute).toDate();
+}
+
+export function setHours(date: DirtyDate, hour: number) {
+  return dayjs(date).set("hour", hour).toDate();
+}
+
+export function setMonth(date: DirtyDate, month: number) {
+  return dayjs(date).set("month", month).toDate();
+}
+
+export function setYear(date: DirtyDate, year: number) {
+  return dayjs(date).set("year", year).toDate();
+}
+
+export function addDays(date: DirtyDate, day: number) {
+  return dayjs(date).add(day, "day").toDate();
+}
+
+export function subDays(date: DirtyDate, day: number) {
+  return dayjs(date).subtract(day, "day").toDate();
+}
+
+export function addWeeks(date: DirtyDate, week: number) {
+  return dayjs(date).add(week, "week").toDate();
+}
+
+export function subWeeks(date: DirtyDate, week: number) {
+  return dayjs(date).subtract(week, "week").toDate();
+}
+
+export function addMonths(date: DirtyDate, month: number) {
+  return dayjs(date).add(month, "month").toDate();
+}
+
+export function subMonths(date: DirtyDate, month: number) {
+  return dayjs(date).subtract(month, "month").toDate();
+}
+
+// Rip off date-fns
+export function eachDayOfInterval(start: DirtyDate, end: DirtyDate) {
+  const dates: Date[] = [];
+  const startDate = dayjs(start).toDate();
+  const endDate = dayjs(end).toDate();
+
+  const endTime = endDate.getTime();
+  const currentDate = startDate;
+  currentDate.setHours(0, 0, 0, 0);
+
+  while (currentDate.getTime() <= endTime) {
+    dates.push(new Date(currentDate.getTime()));
+    currentDate.setDate(currentDate.getDate() + 1);
+    currentDate.setHours(0, 0, 0, 0);
+  }
+
+  return dates;
+}
+
+export function parse(
+  input: string,
+  format: string,
+  referenceDate: Date = new Date()
+) {
+  const match2 = /^\d\d/; // 00 - 99
+  const match4 = /^\d{4}/; // 0000 - 9999
+
+  const entries: Array<
+    [string, RegExp, (val: string) => [string, number, boolean]]
+  > = [
+    ["YYYY", match4, (val) => ["Y", +val, true]],
+    [
+      "MM",
+      match2,
+      (val) => {
+        const numVal = +val;
+        const okay = numVal > 0 && numVal <= 12;
+
+        return ["M", numVal - 1, okay];
+      },
+    ],
+    ["DD", match2, (val) => ["D", +val, true]],
+    [
+      "HH",
+      match2,
+      (val) => {
+        const numVal = parseInt(val, 10);
+        const okay = numVal >= 0 && numVal < 24;
+
+        return ["h", numVal, okay];
+      },
+    ],
+    [
+      "mm",
+      match2,
+      (val) => {
+        const numVal = parseInt(val, 10);
+        const okay = numVal >= 0 && numVal < 60;
+
+        return ["m", numVal, okay];
+      },
+    ],
+  ];
+
+  const superRegExp = new RegExp(entries.map((item) => item[0]).join("|"), "g");
+
+  const store: {
+    [key: string]: number;
+  } = {
+    Y: referenceDate.getFullYear(),
+    M: referenceDate.getMonth(),
+    D: referenceDate.getDate(),
+    h: referenceDate.getHours(),
+    m: referenceDate.getMinutes(),
+    s: referenceDate.getSeconds(),
+    ms: referenceDate.getMilliseconds(),
+  };
+
+  let prevInputIndex = 0;
+  let lastNonFormatting = "";
+  let lastFormatIndex = 0;
+  let found = false;
+
+  while (true) {
+    const match = superRegExp.exec(format);
+
+    if (!match) {
+      break;
+    }
+
+    const length = match[0].length;
+    const atIndex = superRegExp.lastIndex - length;
+
+    const item = entries.find((item) => item[0] === match[0]);
+
+    if (!item) {
+      return new Date("");
+    }
+
+    lastNonFormatting = format.slice(lastFormatIndex, atIndex);
+    lastFormatIndex = superRegExp.lastIndex;
+
+    if (
+      input.slice(prevInputIndex, prevInputIndex + lastNonFormatting.length) !==
+      lastNonFormatting
+    ) {
+      return new Date("");
+    }
+
+    const value = input
+      .slice(prevInputIndex + lastNonFormatting.length)
+      .match(item[1]);
+
+    if (!value) {
+      return new Date("");
+    }
+
+    prevInputIndex =
+      prevInputIndex + lastNonFormatting.length + value[0].length;
+
+    const [key, newValue, okay] = item[2](value[0]);
+
+    if (!okay) {
+      return new Date("");
+    }
+
+    store[key] = newValue;
+    found = true;
+  }
+
+  if (!found) {
+    return new Date("");
+  }
+
+  const date = new Date(
+    store.Y,
+    store.M,
+    store.D,
+    store.h,
+    store.m,
+    store.s,
+    store.ms
+  );
+
+  // Since days of months are dynamic, they can't be validated in entries,
+  // so we check it here, in the finalized date
+  if (date.getMonth() !== store.M || date.getDate() !== store.D) {
+    return new Date("");
+  }
+
+  return date;
+}
+
+export function isMatch(input: string, format: string) {
+  return !isNaN(+parse(input, format));
+}

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