@vkontakte/vkui 5.8.2 → 5.9.1

package/src/lib/accessibility.ts

@@ -0,0 +1,132 @@
+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',
+  HOME = 'Home',
+  END = 'End',
+  ARROW_LEFT = 'ArrowLeft',
+  ARROW_RIGHT = 'ArrowRight',
+  ARROW_UP = 'ArrowUp',
+  ARROW_DOWN = 'ArrowDown',
+  PAGE_UP = 'PageUp',
+  PAGE_DOWN = 'PageDown',
+}
+
+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,
+  },
+  {
+    code: Keys.HOME,
+    key: ['Home'],
+    keyCode: 36,
+  },
+  {
+    code: Keys.END,
+    key: ['End'],
+    keyCode: 35,
+  },
+  {
+    code: Keys.ARROW_LEFT,
+    key: ['ArrowLeft'],
+    keyCode: 37,
+  },
+  {
+    code: Keys.ARROW_RIGHT,
+    key: ['ArrowRight'],
+    keyCode: 39,
+  },
+  {
+    code: Keys.ARROW_UP,
+    key: ['ArrowUp'],
+    keyCode: 40,
+  },
+  {
+    code: Keys.ARROW_DOWN,
+    key: ['ArrowDown'],
+    keyCode: 40,
+  },
+  {
+    code: Keys.PAGE_UP,
+    key: ['PageUp'],
+    keyCode: 40,
+  },
+  {
+    code: Keys.PAGE_DOWN,
+    key: ['PageDown'],
+    keyCode: 40,
+  },
+];
+
+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/adaptivity/constants.ts

@@ -0,0 +1,48 @@
+export { BREAKPOINTS, MEDIA_QUERIES } from '../../shared/breakpoints';
+
+/**
+ * Public API.
+ * Брейкпоинты на ширину.
+ *
+ * > Note: Используется порядковый номер вместо значений в пикселях... ¯\_(ツ)_/¯
+ */
+export enum ViewWidth {
+  SMALL_MOBILE = 1,
+  MOBILE,
+  SMALL_TABLET,
+  TABLET,
+  DESKTOP,
+}
+
+/**
+ * Public API.
+ * Брейкпоинт на высоту.
+ *
+ * > Note: Используется порядковый номер вместо значений в пикселях... ¯\_(ツ)_/¯
+ */
+export enum ViewHeight {
+  EXTRA_SMALL = 1,
+  SMALL,
+  MEDIUM,
+}
+
+/**
+ * Public API.
+ * Классы размеров. Заимствованы из гайдлайнов Apple.
+ *
+ * Ссылки
+ * - {@link https://www.figma.com/file/2sQl2eaxsp7RDRdMOeneEC/%F0%9F%92%A0-VKUI-Common-Library-%5BBeta%5D?node-id=3220%3A0 | Figma VKUI – Адаптивность}
+ * - {@link https://developer.apple.com/design/human-interface-guidelines/foundations/layout/ | Layout - Foundations - Human Interface Guidelines - Design}
+ */
+export enum SizeType {
+  COMPACT = 'compact',
+  REGULAR = 'regular',
+}
+
+export const VIEW_WIDTH_TO_CSS_BREAKPOINT_MAP = {
+  [ViewWidth.SMALL_MOBILE]: 'smallMobileMinus',
+  [ViewWidth.MOBILE]: 'mobile',
+  [ViewWidth.SMALL_TABLET]: 'smallTablet',
+  [ViewWidth.TABLET]: 'tablet',
+  [ViewWidth.DESKTOP]: 'desktopPlus',
+} as const;

package/src/lib/adaptivity/functions.ts

@@ -0,0 +1,176 @@
+import type { Exact } from '../../types';
+import { Platform, type PlatformType } from '../platform';
+import {
+  BREAKPOINTS,
+  SizeType,
+  VIEW_WIDTH_TO_CSS_BREAKPOINT_MAP,
+  ViewHeight,
+  ViewWidth,
+} from './constants';
+import type { CSSBreakpointsClassNames, MediaQueries } from './types';
+
+/**
+ * @public
+ */
+export function getViewWidthByViewportWidth(viewportWidth: number) {
+  if (viewportWidth >= BREAKPOINTS.DESKTOP) {
+    return ViewWidth.DESKTOP;
+  }
+  if (viewportWidth >= BREAKPOINTS.TABLET) {
+    return ViewWidth.TABLET;
+  }
+  if (viewportWidth >= BREAKPOINTS.SMALL_TABLET) {
+    return ViewWidth.SMALL_TABLET;
+  }
+  if (viewportWidth >= BREAKPOINTS.MOBILE) {
+    return ViewWidth.MOBILE;
+  }
+  return ViewWidth.SMALL_MOBILE;
+}
+
+export function getViewWidthByMediaQueries(mediaQueries: MediaQueries): ViewWidth {
+  /* eslint-disable no-restricted-properties */
+  if (mediaQueries.desktopPlus.matches) {
+    return ViewWidth.DESKTOP;
+  }
+  if (mediaQueries.tablet.matches) {
+    return ViewWidth.TABLET;
+  }
+  if (mediaQueries.smallTablet.matches) {
+    return ViewWidth.SMALL_TABLET;
+  }
+  if (mediaQueries.mobile.matches) {
+    return ViewWidth.MOBILE;
+  }
+  /* eslint-enable no-restricted-properties */
+  return ViewWidth.SMALL_MOBILE;
+}
+
+/**
+ * @public
+ */
+export function getViewHeightByViewportHeight(viewportHeight: number) {
+  if (viewportHeight >= BREAKPOINTS.MEDIUM_HEIGHT) {
+    return ViewHeight.MEDIUM;
+  }
+  if (viewportHeight >= BREAKPOINTS.MOBILE_LANDSCAPE_HEIGHT) {
+    return ViewHeight.SMALL;
+  }
+  return ViewHeight.EXTRA_SMALL;
+}
+
+export function getViewHeightByMediaQueries(mediaQueries: MediaQueries): ViewHeight {
+  /* eslint-disable no-restricted-properties */
+  if (mediaQueries.mediumHeight.matches) {
+    return ViewHeight.MEDIUM;
+  }
+  if (mediaQueries.mobileLandscapeHeight.matches) {
+    return ViewHeight.SMALL;
+  }
+  /* eslint-enable no-restricted-properties */
+  return ViewHeight.EXTRA_SMALL;
+}
+
+export function getSizeX(viewWidth: ViewWidth): SizeType {
+  return viewWidth <= ViewWidth.MOBILE ? SizeType.COMPACT : SizeType.REGULAR;
+}
+
+export function getSizeY(
+  viewWidth: ViewWidth,
+  viewHeight: ViewHeight,
+  hasPointer: boolean,
+): SizeType {
+  if ((viewWidth >= ViewWidth.SMALL_TABLET && hasPointer) || viewHeight <= ViewHeight.EXTRA_SMALL) {
+    return SizeType.COMPACT;
+  }
+  return SizeType.REGULAR;
+}
+
+/**
+ * Проверка на Desktop.
+ *
+ * Функция гарантировано вернёт `boolean` или `null` в зависимости от условий.
+ *
+ * Возвращаем `null` в случае, если у нас недостаточно данных, чтобы определить платформу.
+ *
+ * ⚠️ При передаче Platform.VKCOM всегда будет возвращать `true`.
+ */
+export function tryToCheckIsDesktop(viewWidth: ViewWidth, viewHeight: ViewHeight, hasPointer: undefined | boolean, platform?: PlatformType): boolean; // prettier-ignore
+export function tryToCheckIsDesktop(viewWidth: ViewWidth, viewHeight: undefined, hasPointer: boolean, platform?: PlatformType): boolean; // prettier-ignore
+export function tryToCheckIsDesktop(viewWidth: undefined | ViewWidth, viewHeight: undefined, hasPointer: undefined, platform?: PlatformType): null; // prettier-ignore
+export function tryToCheckIsDesktop(viewWidth: undefined, viewHeight: undefined | ViewHeight, hasPointer: undefined, platform?: PlatformType): null; // prettier-ignore
+export function tryToCheckIsDesktop(viewWidth: undefined, viewHeight: undefined, hasPointer: undefined | boolean, platform?: PlatformType): null; // prettier-ignore
+export function tryToCheckIsDesktop(viewWidth: undefined | ViewWidth, viewHeight: undefined | ViewHeight, hasPointer: undefined | boolean, platform?: PlatformType): null | boolean; // prettier-ignore
+export function tryToCheckIsDesktop(
+  viewWidth: undefined | ViewWidth,
+  viewHeight: undefined | ViewHeight,
+  hasPointer: undefined | boolean,
+  platform?: PlatformType,
+): null | boolean {
+  // см. https://github.com/VKCOM/VKUI/pull/2473
+  const IS_VKCOM_CRUTCH = platform === Platform.VKCOM;
+
+  if (
+    ((viewWidth === undefined || hasPointer === undefined) &&
+      (viewWidth === undefined || viewHeight === undefined)) ||
+    (hasPointer === undefined && viewHeight === undefined)
+  ) {
+    return IS_VKCOM_CRUTCH ? true : null;
+  }
+
+  const widthIsLikeDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
+  const otherParametersIsLikeDesktop =
+    hasPointer || (viewHeight !== undefined ? viewHeight >= ViewHeight.MEDIUM : false);
+
+  return (widthIsLikeDesktop && otherParametersIsLikeDesktop) || IS_VKCOM_CRUTCH;
+}
+
+/**
+ * Конвертирует `viewWidth` в CSS брейкпоинты (см. тесты для наглядности).
+ *
+ * > Note: используется восклицательный знак (!), чтобы принудить TS поверить, что св-во точно не может быть
+ * > `undefined`. Это всё из-за применения `Partial<...>` для объекта.
+ */
+export function viewWidthToClassName<T extends Partial<CSSBreakpointsClassNames>>(
+  breakpointClassNames: Exact<CSSBreakpointsClassNames, T>,
+  viewWidth: ViewWidth | 'none' = 'none',
+): string | null {
+  if (viewWidth === 'none') {
+    return breakpointClassNames.hasOwnProperty('none') ? breakpointClassNames['none']! : null;
+  }
+
+  const breakpoints: string[] = [];
+  const breakpointName = VIEW_WIDTH_TO_CSS_BREAKPOINT_MAP[viewWidth];
+
+  if (breakpointClassNames.hasOwnProperty(breakpointName)) {
+    breakpoints.push(breakpointClassNames[breakpointName]!);
+  }
+
+  if (viewWidth >= ViewWidth.MOBILE) {
+    if (breakpointClassNames.hasOwnProperty('mobilePlus')) {
+      breakpoints.push(breakpointClassNames['mobilePlus']!);
+    }
+  }
+
+  if (viewWidth >= ViewWidth.SMALL_TABLET) {
+    if (breakpointClassNames.hasOwnProperty('smallTabletPlus')) {
+      breakpoints.push(breakpointClassNames['smallTabletPlus']!);
+    }
+  } else {
+    if (breakpointClassNames.hasOwnProperty('smallTabletMinus')) {
+      breakpoints.push(breakpointClassNames['smallTabletMinus']!);
+    }
+  }
+
+  if (viewWidth >= ViewWidth.TABLET) {
+    if (breakpointClassNames.hasOwnProperty('tabletPlus')) {
+      breakpoints.push(breakpointClassNames['tabletPlus']!);
+    }
+  } else {
+    if (breakpointClassNames.hasOwnProperty('tabletMinus')) {
+      breakpoints.push(breakpointClassNames['tabletMinus']!);
+    }
+  }
+
+  return breakpoints.length > 0 ? breakpoints.join(' ') : null;
+}

package/src/lib/adaptivity/index.ts

@@ -0,0 +1,3 @@
+export type { CSSBreakpoints, JSBreakpoints, MediaQueries } from './types';
+export * from './constants';
+export * from './functions';

package/src/lib/adaptivity/types.ts

@@ -0,0 +1,33 @@
+/**
+ * Соответствуют тому, что генерирует функция `getCustomMedias()`.
+ *
+ * {@link import('../../../shared.config.js') ../../../shared.config.js}
+ */
+export type CSSBreakpoints =
+  | 'desktopPlus'
+  | 'tabletPlus'
+  | 'tablet'
+  | 'tabletMinus'
+  | 'smallTabletPlus'
+  | 'smallTablet'
+  | 'smallTabletMinus'
+  | 'mobilePlus'
+  | 'mobile'
+  | 'smallMobileMinus';
+
+export type CSSBreakpointsClassNames = Record<CSSBreakpoints | 'none', string>;
+
+/**
+ * JS брейкпоинты выделены в отдельный тип, т.к. на данный момент нужны не все брейкпоинты, что используются в
+ * адаптивности через CSS, а также имеются свои тонкости по типу `mobileLandscapeHeight`.
+ */
+export type JSBreakpoints =
+  | 'desktopPlus'
+  | 'tablet'
+  | 'smallTabletPlus'
+  | 'smallTablet'
+  | 'mobile'
+  | 'mediumHeight'
+  | 'mobileLandscapeHeight';
+
+export type MediaQueries = Record<JSBreakpoints, MediaQueryList>;

package/src/lib/animate.ts

@@ -0,0 +1,52 @@
+import { canUseDOM } from './dom';
+
+/**
+ * Функция для 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;
+  animationQueue: VoidFunction[];
+}
+
+export function animate({
+  duration,
+  timing,
+  draw,
+  animationQueue = [],
+}: AnimateArgumentsInterface): void {
+  if (!canUseDOM) {
+    return;
+  }
+
+  let start: number;
+
+  requestAnimationFrame(function animate(time: number): void {
+    if (!start) {
+      start = time;
+    }
+    let timeFraction = Math.min((time - start) / duration, 1);
+
+    const progress = timing(timeFraction);
+
+    draw(progress);
+
+    if (timeFraction < 1) {
+      requestAnimationFrame(animate);
+      return;
+    }
+    animationQueue.shift();
+    if (animationQueue.length > 0) {
+      animationQueue[0]();
+    }
+  });
+}

package/src/lib/appearance/index.ts

@@ -0,0 +1 @@
+export type { AppearanceType } from './types';

package/src/lib/appearance/types.ts

@@ -0,0 +1 @@
+export type AppearanceType = 'light' | 'dark';

package/src/lib/browser.ts

@@ -0,0 +1,64 @@
+import { detectIOS, noop } from '@vkontakte/vkjs';
+import type { Version } from '../types';
+
+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;
+}
+
+/**
+ * Эмуляция функции `window.matchMedia` для SSR.
+ *
+ * ⚠️ Желательно избегать использование этой эмуляции в SSR.
+ */
+export function mediaQueryNull(query: string): MediaQueryList {
+  return {
+    matches: false,
+    media: query,
+    onchange: noop,
+    addListener: noop,
+    removeListener: noop,
+    addEventListener: noop,
+    removeEventListener: noop,
+    dispatchEvent() {
+      return false;
+    },
+  };
+}

package/src/lib/calendar.ts

@@ -0,0 +1,118 @@
+import {
+  addDays,
+  addWeeks,
+  eachDayOfInterval,
+  endOfMonth,
+  endOfWeek,
+  isBefore,
+  isFirstDayOfMonth,
+  isLastDayOfMonth,
+  startOfMonth,
+  startOfWeek,
+  subDays,
+  subWeeks,
+} 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));