@vkontakte/vkui 4.23.0 → 4.24.0

package/src/lib/accessibility.ts

@@ -1,24 +1,24 @@
-import * as React from 'react';
+import * as React from "react";
 
 export const FOCUSABLE_ELEMENTS_LIST = [
-  'a[href]',
-  'area[href]',
+  "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]',
+  "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',
+  ENTER = "Enter",
+  SPACE = "Space",
+  TAB = "Tab",
+  ESCAPE = "Escape",
 }
 
 interface AccessibleKey {
@@ -30,49 +30,58 @@ interface AccessibleKey {
 const ACCESSIBLE_KEYS: AccessibleKey[] = [
   {
     code: Keys.ENTER,
-    key: ['Enter'],
+    key: ["Enter"],
     keyCode: 13,
   },
   {
     code: Keys.SPACE,
-    key: ['Space', 'Spacebar', ' '],
+    key: ["Space", "Spacebar", " "],
     keyCode: 32,
   },
   {
     code: Keys.TAB,
-    key: ['Tab'],
+    key: ["Tab"],
     keyCode: 9,
   },
   {
     code: Keys.ESCAPE,
-    key: ['Escape'],
+    key: ["Escape"],
     keyCode: 27,
   },
 ];
 
-export function pressedKey(e: KeyboardEvent | React.KeyboardEvent<HTMLElement>): Keys {
-  return ACCESSIBLE_KEYS.find(({ key, keyCode }) => key.includes(e.key) || keyCode === e.keyCode)?.code || null;
+export function pressedKey(
+  e: KeyboardEvent | React.KeyboardEvent<HTMLElement>
+): Keys {
+  return (
+    ACCESSIBLE_KEYS.find(
+      ({ key, keyCode }) => key.includes(e.key) || keyCode === e.keyCode
+    )?.code || null
+  );
 }
 
-export function shouldTriggerClickOnEnterOrSpace(e: KeyboardEvent | React.KeyboardEvent<HTMLElement>) {
+export function shouldTriggerClickOnEnterOrSpace(
+  e: KeyboardEvent | React.KeyboardEvent<HTMLElement>
+) {
   const el = e.target as HTMLElement;
   const { tagName } = el;
 
-  const role = el.getAttribute('role');
+  const role = el.getAttribute("role");
 
-  const isValidKeyboardEventTarget: boolean = el.isContentEditable !== true
-    && tagName !== 'INPUT'
-    && tagName !== 'TEXTAREA'
-    && (role === 'button' || role === 'link');
+  const isValidKeyboardEventTarget: boolean =
+    el.isContentEditable !== true &&
+    tagName !== "INPUT" &&
+    tagName !== "TEXTAREA" &&
+    (role === "button" || role === "link");
 
-  const isNativeAnchorEl = tagName === 'A' && el.hasAttribute('href');
+  const isNativeAnchorEl = tagName === "A" && el.hasAttribute("href");
   const keyPressed = pressedKey(e);
 
-  return isValidKeyboardEventTarget && (
+  return (
+    isValidKeyboardEventTarget &&
     // trigger buttons on Space
-    keyPressed === Keys.SPACE && role === 'button'
-    ||
-    // trigger non-native links and buttons on Enter
-    keyPressed === Keys.ENTER && !isNativeAnchorEl
+    ((keyPressed === Keys.SPACE && role === "button") ||
+      // trigger non-native links and buttons on Enter
+      (keyPressed === Keys.ENTER && !isNativeAnchorEl))
   );
 }

package/src/lib/animate.ts

@@ -1,4 +1,4 @@
-import { canUseDOM } from '@vkontakte/vkjs';
+import { canUseDOM } from "@vkontakte/vkjs";
 
 /**
  * Функция для js анимации
@@ -17,7 +17,11 @@ export interface AnimateArgumentsInterface {
   draw: DrawInterface;
 }
 
-export default function animate({ duration, timing, draw }: AnimateArgumentsInterface): void {
+export default function animate({
+  duration,
+  timing,
+  draw,
+}: AnimateArgumentsInterface): void {
   if (!canUseDOM) {
     return;
   }

package/src/lib/browser.ts

@@ -1,9 +1,9 @@
-import { Version } from '../types';
-import { detectIOS } from '@vkontakte/vkjs';
+import { Version } from "../types";
+import { detectIOS } from "@vkontakte/vkjs";
 
 export enum System {
-  IOS = 'ios',
-  UNKNOWN = '',
+  IOS = "ios",
+  UNKNOWN = "",
 }
 
 export interface BrowserInfo {
@@ -14,7 +14,7 @@ export interface BrowserInfo {
 
 const memoized: { [index: string]: BrowserInfo } = {};
 
-export function computeBrowserInfo(userAgent = ''): BrowserInfo {
+export function computeBrowserInfo(userAgent = ""): BrowserInfo {
   if (memoized[userAgent]) {
     return memoized[userAgent];
   }

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

@@ -2,7 +2,13 @@ export interface ObjectClassNames {
   [index: string]: boolean | undefined | null;
 }
 
-export type ClassName = number | string | ObjectClassNames | false | null | undefined;
+export type ClassName =
+  | number
+  | string
+  | ObjectClassNames
+  | false
+  | null
+  | undefined;
 
 export function classNames(...classnames: ClassName[]): string | string[];
 export function classNames() {
@@ -14,10 +20,10 @@ export function classNames() {
       continue;
     }
     switch (typeof item) {
-      case 'string':
+      case "string":
         result.push(item);
         break;
-      case 'object':
+      case "object":
         for (let key in item) {
           if (item[key]) {
             result.push(key);
@@ -29,10 +35,10 @@ export function classNames() {
     }
   }
 
-  return result.length > 1 ? result : result[0] || '';
+  return result.length > 1 ? result : result[0] || "";
 }
 
 export function classNamesString(...args: ClassName[]) {
   const res = classNames(...args);
-  return typeof res === 'string' ? res : res.join(' ');
+  return typeof res === "string" ? res : res.join(" ");
 }

package/src/lib/classScopingMode.ts

@@ -8,7 +8,9 @@ export const __controller = {
   set noConflict(v: boolean) {
     if (this._isSet && v !== this.noConflict) {
       setTimeout(() => {
-        throw new Error('[vkui]: Single VKUI instance can not have different globalClassName settings');
+        throw new Error(
+          "[vkui]: Single VKUI instance can not have different globalClassName settings"
+        );
       }, 0);
     }
     this._noConflict = v;

package/src/lib/dom.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react';
-import { canUseDOM } from '@vkontakte/vkjs';
-export { canUseDOM, canUseEventListeners, onDOMLoaded } from '@vkontakte/vkjs';
+import * as React from "react";
+import { canUseDOM } from "@vkontakte/vkjs";
+export { canUseDOM, canUseEventListeners, onDOMLoaded } from "@vkontakte/vkjs";
 
 export interface DOMContextInterface {
   /**
@@ -28,7 +28,9 @@ export const useDOM = () => {
   return React.useContext(DOMContext);
 };
 
-export function withDOM<Props>(Component: React.ComponentType<Props & DOMProps>) {
+export function withDOM<Props>(
+  Component: React.ComponentType<Props & DOMProps>
+) {
   const WithDOM: React.FC<Props> = (props: Props) => {
     const dom = useDOM();
     return <Component {...props} {...dom} />;

package/src/lib/getNavId.ts

@@ -6,7 +6,7 @@ export interface NavIdProps {
 
 export function getNavId(props: NavIdProps, warn?: (text: string) => any) {
   const id = props.nav || props.id;
-  if (process.env.NODE_ENV === 'development' && !id && warn) {
+  if (process.env.NODE_ENV === "development" && !id && warn) {
     warn('Navigation item should have "nav" or "id" prop');
   }
   return id;

package/src/lib/is.ts

@@ -1,10 +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) ||
+    (x === y &&
+      // -0 is not +0
+      (x !== 0 || 1 / x === 1 / y)) ||
     // both NaN
-    x !== x && y !== y
+    (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.hasOwnProperty("current")
+  );
+};

package/src/lib/jsxRuntime.d.ts

@@ -1,4 +1,4 @@
-import { createScopedElement as _jsxFactory } from './jsxRuntime';
+import { createScopedElement as _jsxFactory } from "./jsxRuntime";
 type jsxFactory = typeof _jsxFactory;
 
 declare global {

package/src/lib/jsxRuntime.ts

@@ -1,17 +1,20 @@
-import * as React from 'react';
-import { prefixClass } from './prefixClass';
+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') {
+    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;
+    newProps.className = className ? className + " " + resolved : resolved;
   }
   return newProps;
 }
@@ -19,7 +22,7 @@ function processProps(props: any) {
 function _createScopedElement(_type: any, props: any) {
   let args = arguments;
 
-  if (!props || !('vkuiClass' in props)) {
+  if (!props || !("vkuiClass" in props)) {
     return React.createElement.apply(undefined, args);
   }
 
@@ -37,4 +40,6 @@ function _createScopedElement(_type: any, props: any) {
 
 _createScopedElement.Fragment = React.Fragment;
 
-export const createScopedElement: typeof React.createElement & { Fragment: typeof React.Fragment } = _createScopedElement;
+export const createScopedElement: typeof React.createElement & {
+  Fragment: typeof React.Fragment;
+} = _createScopedElement;

package/src/lib/platform.ts

@@ -1,9 +1,9 @@
-import { BrowserInfo, computeBrowserInfo } from './browser';
+import { BrowserInfo, computeBrowserInfo } from "./browser";
 
 export enum Platform {
-  ANDROID = 'android',
-  IOS = 'ios',
-  VKCOM = 'vkcom'
+  ANDROID = "android",
+  IOS = "ios",
+  VKCOM = "vkcom",
 }
 
 export const ANDROID = Platform.ANDROID;
@@ -17,7 +17,7 @@ export function platform(browserInfo?: BrowserInfo): PlatformType {
     browserInfo = computeBrowserInfo();
   }
 
-  return browserInfo.system === 'ios' ? IOS : ANDROID;
+  return browserInfo.system === "ios" ? IOS : ANDROID;
 }
 
 const platformName = platform();

package/src/lib/polyfills.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import { canUseDOM } from './dom';
+import { canUseDOM } from "./dom";
 
 export type MatchesMethod = (css: string) => boolean;
 
@@ -14,15 +14,16 @@ if (canUseDOM) {
 
   // Element.prototype.matches
   if (!ElementProto.matches) {
-    ElementProto.matches = (ElementProto as OldElement).matchesSelector ||
+    ElementProto.matches =
+      (ElementProto as OldElement).matchesSelector ||
       ElementProto.webkitMatchesSelector ||
       (ElementProto as OldElement).mozMatchesSelector ||
-        (ElementProto as OldElement).msMatchesSelector;
+      (ElementProto as OldElement).msMatchesSelector;
   }
 
   // Element.prototype.closest
   if (!ElementProto.closest) {
-    ElementProto.closest = function(css: string): Element | null {
+    ElementProto.closest = function (css: string): Element | null {
       let node: Element = this;
       while (node) {
         if (node.matches(css)) {
@@ -38,8 +39,8 @@ if (canUseDOM) {
 
 // Array.prototype.includes
 if (!Array.prototype.includes) {
-  Object.defineProperty(Array.prototype, 'includes', {
-    value: function(searchElement: any, fromIndex: number) {
+  Object.defineProperty(Array.prototype, "includes", {
+    value: function (searchElement: any, fromIndex: number) {
       if (this == null) {
         throw new TypeError('"this" is null or not defined');
       }
@@ -51,7 +52,13 @@ if (!Array.prototype.includes) {
       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));
+        return (
+          x === y ||
+          (typeof x === "number" &&
+            typeof y === "number" &&
+            isNaN(x) &&
+            isNaN(y))
+        );
       }
       while (k < len) {
         if (sameValueZero(o[k], searchElement)) {
@@ -60,18 +67,18 @@ if (!Array.prototype.includes) {
         k++;
       }
       return false;
-    }
+    },
   });
 }
 
 // Array.prototype.find
 if (!Array.prototype.find) {
-  Object.defineProperty(Array.prototype, 'find', {
-    value: function(callback: Array<any>['find']) {
+  Object.defineProperty(Array.prototype, "find", {
+    value: function (callback: Array<any>["find"]) {
       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');
+        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);
@@ -84,6 +91,6 @@ if (!Array.prototype.find) {
           return element;
         }
       }
-    }
-  })
+    },
+  });
 }

package/src/lib/prefixClass.ts

@@ -1,4 +1,4 @@
-import { classScopingMode } from './classScopingMode';
+import { classScopingMode } from "./classScopingMode";
 
 const hasTransformable = /\b(?=[A-Z])/g;
 const noConflictCache: any = {};
@@ -9,20 +9,23 @@ function prefixSingle(scopedStyle: string): string {
   if (cache[scopedStyle]) {
     return cache[scopedStyle];
   }
-  const prefixed = scopedStyle.replace(hasTransformable, 'vkui');
-  const resolved = noConflict || scopedStyle === prefixed ? prefixed : prefixed + ' ' + 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') {
+  if (typeof scopedStyle === "string") {
     return prefixSingle(scopedStyle);
   }
 
-  let resolved = '';
+  let resolved = "";
   for (let i = 0; i < scopedStyle.length; i++) {
-    const separator = resolved ? ' ' : '';
+    const separator = resolved ? " " : "";
 
     resolved += separator + prefixSingle(scopedStyle[i]);
   }

package/src/lib/removeObjectKeys.ts

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

package/src/lib/select.ts

@@ -5,7 +5,7 @@ type Option = {
 
 type GetOptionLabel = (option: Option) => string;
 
-const findAllIncludes = (target = '', search = '') => {
+const findAllIncludes = (target = "", search = "") => {
   const includes = [];
 
   let i = target.indexOf(search);
@@ -21,13 +21,13 @@ let letterRegexp: RegExp;
 
 // На момент написания флаг u не поддерживался рядом браузеров, поэтому добавили фоллбэк.
 try {
-  letterRegexp = new RegExp('\\p{L}', 'u');
+  letterRegexp = new RegExp("\\p{L}", "u");
 } catch (e) {}
 
 export const defaultFilterFn = (
-  query = '',
+  query = "",
   option: Option,
-  getOptionLabel: GetOptionLabel = (option) => option.label,
+  getOptionLabel: GetOptionLabel = (option) => option.label
 ) => {
   query = query.toLocaleLowerCase();
   let label = getOptionLabel(option).toLocaleLowerCase();
@@ -45,7 +45,8 @@ export const defaultFilterFn = (
         return true;
       }
     }
-  } else { // если regexp не поддерживается, то ищем любое вхождение
+  } else {
+    // если regexp не поддерживается, то ищем любое вхождение
     return includes.length > 0;
   }
 

package/src/lib/styles.ts

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

package/src/lib/supportEvents.ts

@@ -1,5 +1,5 @@
-import { canUseDOM } from './dom';
-import { isTesting } from './testing';
+import { canUseDOM } from "./dom";
+import { isTesting } from "./testing";
 
 export type VKUISupportEvents = {
   supported: boolean;
@@ -20,18 +20,18 @@ const transitionEvent: VKUISupportEvents = {
 };
 
 if (canUseDOM && !isTesting) {
-  if (typeof AnimationEvent !== 'undefined') {
+  if (typeof AnimationEvent !== "undefined") {
     animationEvent.supported = true;
-  } else if (typeof WebKitAnimationEvent !== 'undefined') {
+  } else if (typeof WebKitAnimationEvent !== "undefined") {
     animationEvent.supported = true;
   }
 
-  if (typeof TransitionEvent !== 'undefined') {
+  if (typeof TransitionEvent !== "undefined") {
     transitionEvent.supported = true;
-    transitionEvent.name = 'transitionend';
-  } else if (typeof WebKitTransitionEvent !== 'undefined') {
+    transitionEvent.name = "transitionend";
+  } else if (typeof WebKitTransitionEvent !== "undefined") {
     transitionEvent.supported = true;
-    transitionEvent.name = 'webkitTransitionEnd';
+    transitionEvent.name = "webkitTransitionEnd";
   }
 }
 

package/src/lib/taptic.ts

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

package/src/lib/testing.ts

@@ -1,4 +1,4 @@
-import { canUseDOM } from '@vkontakte/vkjs';
+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

@@ -1,4 +1,4 @@
-import { canUseDOM } from '@vkontakte/vkjs';
+import { canUseDOM } from "@vkontakte/vkjs";
 
 export interface VKUITouchEvent extends MouseEvent, TouchEvent {}
 export type VKUITouchEventHander = (e: VKUITouchEvent) => void;
@@ -24,7 +24,7 @@ const coordY = (e: VKUITouchEvent): number => {
 };
 
 // eslint-disable-next-line no-restricted-globals
-const touchEnabled = () => canUseDOM && 'ontouchstart' in window;
+const touchEnabled = () => canUseDOM && "ontouchstart" in window;
 
 /*
  * Возвращает массив поддерживаемых событий
@@ -33,22 +33,27 @@ const touchEnabled = () => canUseDOM && 'ontouchstart' in window;
  */
 function getSupportedEvents(): string[] {
   if (touchEnabled()) {
-    return ['touchstart', 'touchmove', 'touchend', 'touchcancel'];
+    return ["touchstart", "touchmove", "touchend", "touchcancel"];
   }
 
-  return ['mousedown', 'mousemove', 'mouseup', 'mouseleave'];
+  return ["mousedown", "mousemove", "mouseup", "mouseleave"];
 }
 
 /*
  * Рассчитывает "сопротивление" для iOS тач-событий
  */
-function rubber(offset: number, dimension: number, resistanceRate: number, isAndroid: boolean): number {
+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);
+  return (offsettedResistance * dimension) / (offsettedResistance + dimension);
 }
 
 export { getSupportedEvents, coordX, coordY, touchEnabled, rubber };

package/src/lib/useIsomorphicLayoutEffect.ts

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