@vkontakte/vkui 5.8.2 → 5.9.1

package/src/lib/polyfills.ts

@@ -0,0 +1,107 @@
+/* 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;
+        }
+      }
+    },
+  });
+}
+
+// String.prototype.padStart
+if (!String.prototype.padStart) {
+  String.prototype.padStart = function padStart(targetLength, padString) {
+    targetLength = targetLength >> 0;
+    padString = String(padString || ' ');
+    if (this.length > targetLength) {
+      return String(this);
+    } else {
+      targetLength = targetLength - this.length;
+      if (targetLength > padString.length) {
+        padString += padString.repeat(targetLength / padString.length);
+      }
+      return padString.slice(0, targetLength) + String(this);
+    }
+  };
+}

package/src/lib/removeObjectKeys.ts

@@ -0,0 +1,7 @@
+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,64 @@
+import * as React from 'react';
+import { SelectType } from '../components/Select/Select';
+import { getTitleFromChildren } from './utils';
+
+type Option = {
+  label?: React.ReactElement | string;
+  [index: string]: any;
+};
+
+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) {}
+
+type GetOptionLabel = (option: Option) => string | undefined;
+
+const _getOptionLabel: GetOptionLabel = (option) => getTitleFromChildren(option.label);
+
+export const defaultFilterFn = (
+  query = '',
+  option: Option,
+  getOptionLabel: GetOptionLabel = _getOptionLabel,
+) => {
+  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;
+};
+
+export const getFormFieldModeFromSelectType = (selectType: SelectType = 'default') => {
+  return selectType === 'default' ? 'default' : 'plain';
+};

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,11 @@
+import vkBridge, { TapticVibrationPowerType } from '@vkontakte/vk-bridge';
+
+/**
+ * TODO [>=6]: удалить хук (#5049)
+ * @deprecated v5.8.0
+ */
+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 './dom';
+
+// eslint-disable-next-line no-restricted-globals
+export const isTesting = Boolean(canUseDOM && (window as any).__isVkuiTesting);

package/src/lib/tokensClassProvider.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { generateVKUITokensClassName } from '../helpers/generateVKUITokensClassName';
+
+export interface TokensClassProviderProps {
+  children: React.ReactNode;
+  platform: string;
+  appearance: string;
+}
+
+export const TokensClassProvider = ({
+  children,
+  platform,
+  appearance,
+}: TokensClassProviderProps) => {
+  return (
+    <>
+      {React.Children.map(children, (child) => {
+        if (React.isValidElement<{ className?: string }>(child)) {
+          return React.cloneElement(child, {
+            className: classNames(
+              child.props.className,
+              generateVKUITokensClassName(platform, appearance),
+            ),
+          });
+        }
+        return child;
+      })}
+    </>
+  );
+};

package/src/lib/touch.ts

@@ -0,0 +1,59 @@
+import { canUseDOM } from './dom';
+
+export interface VKUITouchEvent extends MouseEvent, TouchEvent {}
+export type VKUITouchEventHandler = (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,75 @@
+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 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 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));
+    },
+  };
+}
+
+export function getTitleFromChildren(children: React.ReactNode): string {
+  let label = '';
+
+  React.Children.map(children, (child) => {
+    if (typeof child === 'string') {
+      label += ' ' + child;
+    }
+  });
+
+  return label.trim();
+}
+
+export const stopPropagation = <T extends React.SyntheticEvent>(event: T) =>
+  event.stopPropagation();
+
+export function addClassNameToElement(element: HTMLElement, className: string) {
+  const elementClassName = element.getAttribute('class') || '';
+  const updatedClassName = `${elementClassName}${elementClassName ? ' ' : ''}${className}`;
+
+  element.setAttribute('class', updatedClassName);
+}
+
+export function removeClassNameFromElement(element: HTMLElement, classNameToRemove: string) {
+  const classNamesArray = (element.getAttribute('class') || '').split(/\s+/);
+  const elementIndexToRemove = classNamesArray.findIndex(
+    (className) => className === classNameToRemove,
+  );
+  if (elementIndexToRemove === -1) {
+    return;
+  }
+  classNamesArray.splice(elementIndexToRemove, 1);
+
+  element.setAttribute('class', classNamesArray.join(' '));
+}

package/src/lib/warnOnce.ts

@@ -0,0 +1,35 @@
+type WarnOnceType = 'log' | 'warn' | 'error';
+export type WarnOnceHandler = (message: string, type?: WarnOnceType) => void;
+
+export function warnOnce(zone: string): WarnOnceHandler {
+  const didWarn = new Set<string>();
+
+  return (message: string, type: WarnOnceType = 'warn') => {
+    if (!didWarn.has(message)) {
+      didWarn.add(message);
+
+      const formattedMessage = `%c[VKUI/${zone}] ${message}`;
+      const styles = type === 'log' ? 'color: steelblue; font-style: italic' : undefined;
+
+      console[type](formattedMessage, styles);
+    }
+  };
+}
+
+function getA11yRuleUrl(ruleName: string): string {
+  // see jest-axe's axe-core dependency
+  const AXE_CORE_MINOR_VERSION = '4.5';
+
+  return `https://dequeuniversity.com/rules/axe/${AXE_CORE_MINOR_VERSION}/${ruleName}`;
+}
+
+export const COMMON_WARNINGS = {
+  a11y: {
+    'button-name': `a11y: Кнопка должна содержать текст, доступный для скринридеров. Чтобы исправить эту ошибку, передайте компоненту текст или свойство aria-label.
+${getA11yRuleUrl('button-name')}`,
+    'link-name': `a11y: Ссылка должна содержать текст, доступный для скринридеров. Чтобы исправить эту ошибку, передайте компоненту текст или свойство aria-label.
+${getA11yRuleUrl('link-name')}`,
+    'image-alt': `a11y: Изображение должно содержать альтернативный текст, который его описывает. Чтобы исправить эту ошибку, передайте компоненту свойство alt.
+${getA11yRuleUrl('image-alt')}`,
+  },
+};

package/src/shared/breakpoints.js

@@ -0,0 +1,112 @@
+/**
+ * Храним брейкпоинты в JS файле для синхронизации значений между TS и CSS.
+ *
+ * @type {{
+ *  DESKTOP: 1280,
+ *  TABLET: 1024,
+ *  SMALL_TABLET: 768,
+ *  MOBILE: 320,
+ *  MOBILE_LANDSCAPE_HEIGHT: 415,
+ *  MEDIUM_HEIGHT: 720
+ * }}
+ */
+const BREAKPOINTS = {
+  DESKTOP: 1280,
+  TABLET: 1024,
+  SMALL_TABLET: 768,
+  MOBILE: 320,
+  MOBILE_LANDSCAPE_HEIGHT: 415,
+  MEDIUM_HEIGHT: 720,
+};
+
+/**
+ * Луч [a;+∞)
+ *
+ * @param {number} a
+ * @returns {string}
+ */
+function widthPlus(a) {
+  return `(min-width: ${a}px)`;
+}
+
+/**
+ * Открытый луч (-∞;b)
+ *
+ * @param {number} b
+ * @returns {string}
+ */
+function widthMinus(b) {
+  // NOTE: `not` плохо поддерживается, поэтому используем max-width и вычитаем
+  // от числа 0.1
+  return `(max-width: ${b - 0.1}px)`;
+}
+
+/**
+ * Полуинтервал [a;b)
+ *
+ * @param {number} a
+ * @param {number} b
+ * @returns {string}
+ */
+function widthHalfInterval(a, b) {
+  return `${widthPlus(a)} and ${widthMinus(b)}`;
+}
+
+/**
+ * Луч [a;+∞)
+ *
+ * @param {number} a
+ * @returns {string}
+ */
+function heightPlus(a) {
+  return `(min-height: ${a}px)`;
+}
+
+/**
+ * Открытый луч (-∞;b)
+ *
+ * @param {number} b
+ * @returns {string}
+ */
+function heightMinus(b) {
+  // NOTE: `not` плохо поддерживается, поэтому используем max-width и вычитаем
+  // от числа 0.1
+  return `(max-height: ${b - 0.1}px)`;
+}
+
+/**
+ * Полуинтервал [a;b)
+ *
+ * @param {number} a
+ * @param {number} b
+ * @returns {string}
+ */
+function heightHalfInterval(a, b) {
+  return `${heightPlus(a)} and ${heightMinus(b)}`;
+}
+
+const MEDIA_QUERIES = {
+  DESKTOP_PLUS: widthPlus(BREAKPOINTS.DESKTOP),
+
+  TABLET: widthHalfInterval(BREAKPOINTS.TABLET, BREAKPOINTS.DESKTOP),
+
+  SMALL_TABLET_PLUS: widthPlus(BREAKPOINTS.SMALL_TABLET),
+  SMALL_TABLET: widthHalfInterval(BREAKPOINTS.SMALL_TABLET, BREAKPOINTS.TABLET),
+
+  MOBILE: widthHalfInterval(BREAKPOINTS.MOBILE, BREAKPOINTS.SMALL_TABLET),
+
+  MEDIUM_HEIGHT: heightPlus(BREAKPOINTS.MEDIUM_HEIGHT),
+
+  MOBILE_LANDSCAPE_HEIGHT: heightPlus(BREAKPOINTS.MOBILE_LANDSCAPE_HEIGHT),
+};
+
+module.exports = {
+  BREAKPOINTS,
+  MEDIA_QUERIES,
+  widthHalfInterval,
+  widthPlus,
+  widthMinus,
+  heightHalfInterval,
+  heightPlus,
+  heightMinus,
+};

package/src/styles/adaptivity.module.css

@@ -0,0 +1,92 @@
+/*
+Утилитарные классы, реализующие адаптив через CSS путём показа/скрытия элемента.
+
+Глоссарий по модификаторам:
+
+- `forced` – означает, что мы зашили конкретное представление в `AdaptiveProvider` (ex, `<AdaptiveProvider sizeX="regular">`).
+- `mq` – означает, что для смены представления используется CSS Media Query.
+
+---
+
+Note: В начале классов разделить (`-`), чтобы красиво добавлялся префикс библиотеки после сборки.
+
+*/
+
+.-sizeX--compact-forced,
+.-sizeX--regular-forced {
+  /* Пустой класс для CSS Modules (см. CONTRIBUTING.md)  */
+}
+
+@media (--sizeX-regular) {
+  .-sizeX--compact-mq {
+    /* stylelint-disable-next-line declaration-no-important */
+    display: none !important;
+  }
+}
+@media (--sizeX-compact) {
+  .-sizeX--regular-mq {
+    /* stylelint-disable-next-line declaration-no-important */
+    display: none !important;
+  }
+}
+
+/* ================================================================================================================== */
+
+.-sizeY--compact-forced,
+.-sizeY--regular-forced {
+  /* Пустой класс для CSS Modules (см. CONTRIBUTING.md)  */
+}
+
+@media (--sizeY-regular) {
+  .-sizeY--compact-mq {
+    /* stylelint-disable-next-line declaration-no-important */
+    display: none !important;
+  }
+}
+@media (--sizeY-compact) {
+  .-sizeY--regular-mq {
+    /* stylelint-disable-next-line declaration-no-important */
+    display: none !important;
+  }
+}
+
+/* ================================================================================================================== */
+
+.-viewWidth--tabletPlus-forced,
+.-viewWidth--tabletMinus-forced {
+  /* Пустой класс для CSS Modules (см. CONTRIBUTING.md)  */
+}
+
+@media (--viewWidth-tabletPlus) {
+  .-viewWidth--tabletMinus-mq {
+    /* stylelint-disable-next-line declaration-no-important */
+    display: none !important;
+  }
+}
+@media (--viewWidth-tabletMinus) {
+  .-viewWidth--tabletPlus-mq {
+    /* stylelint-disable-next-line declaration-no-important */
+    display: none !important;
+  }
+}
+
+/* ================================================================================================================== */
+
+.-deviceType--mobile-forced,
+.-deviceType--desktop-forced {
+  /* stylelint-disable-next-line declaration-no-important */
+  display: none !important;
+}
+
+@media (--desktop) {
+  .-deviceType--mobile-mq {
+    /* stylelint-disable-next-line declaration-no-important */
+    display: none !important;
+  }
+}
+@media (--mobile) {
+  .-deviceType--desktop-mq {
+    /* stylelint-disable-next-line declaration-no-important */
+    display: none !important;
+  }
+}