@vkontakte/vkui 4.22.1 → 4.25.0

package/src/lib/SSR.tsx

@@ -1,17 +1,17 @@
-import * as React from 'react';
-import { PlatformType, platform } from './platform';
-import { BrowserInfo, computeBrowserInfo } from './browser';
-import { DOMContext, getDOM } from '../lib/dom';
+import * as React from "react";
+import { PlatformType, platform } from "./platform";
+import { BrowserInfo, computeBrowserInfo } from "./browser";
+import { DOMContext, getDOM } from "../lib/dom";
 
 export interface SSRContextInterface {
-  platform: PlatformType;
+  platform: PlatformType | null;
   userAgent?: string;
   browserInfo?: BrowserInfo;
 }
 
 export const SSRContext = React.createContext<SSRContextInterface>({
   platform: null,
-  userAgent: '',
+  userAgent: "",
   browserInfo: undefined,
 });
 
@@ -27,7 +27,7 @@ export const SSRWrapper: React.FC<SSRWrapperProps> = (props) => {
     browserInfo = computeBrowserInfo(userAgent);
   }
 
-  // TODO: Каждый раз создаётся новый объект для контекста – плохо
+  // TODO: Каждый раз создаётся новый объект для контекста - плохо
   const contextValue = {
     platform: platform(browserInfo),
     browserInfo,
@@ -39,9 +39,7 @@ export const SSRWrapper: React.FC<SSRWrapperProps> = (props) => {
 
   return (
     <SSRContext.Provider value={contextValue}>
-      <DOMContext.Provider value={dom}>
-        {children}
-      </DOMContext.Provider>
+      <DOMContext.Provider value={dom}>{children}</DOMContext.Provider>
     </SSRContext.Provider>
   );
 };

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>
+) {
+  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,12 @@ export interface AnimateArgumentsInterface {
   draw: DrawInterface;
 }
 
-export default function animate({ duration, timing, draw }: AnimateArgumentsInterface): void {
+// eslint-disable-next-line import/no-default-export
+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 {
   /**
@@ -17,8 +17,8 @@ export type DOMProps = DOMContextInterface;
 
 /* eslint-disable no-restricted-globals */
 export const getDOM = () => ({
-  window: canUseDOM ? window : null,
-  document: canUseDOM ? document : null,
+  window: canUseDOM ? window : undefined,
+  document: canUseDOM ? document : undefined,
 });
 /* eslint-enable no-restricted-globals */
 
@@ -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>
+): React.ComponentType<Props> {
   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 as React.RefObject<E>).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,26 +1,29 @@
-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;
 }
 
-function _createScopedElement(_type: any, props: any) {
+function createScopedElement(_type: any, props?: any) {
   let args = arguments;
 
-  if (!props || !('vkuiClass' in props)) {
-    return React.createElement.apply(undefined, args);
+  if (!props || !("vkuiClass" in props)) {
+    return React.createElement.apply(undefined, args as any);
   }
 
   let argsLength = args.length;
@@ -32,9 +35,9 @@ function _createScopedElement(_type: any, props: any) {
     createElementArgArray[i] = args[i];
   }
 
-  return React.createElement.apply(null, createElementArgArray);
+  return React.createElement.apply(null, createElementArgArray as any);
 }
 
-_createScopedElement.Fragment = React.Fragment;
+createScopedElement.Fragment = React.Fragment;
 
-export const createScopedElement: typeof React.createElement & { Fragment: typeof React.Fragment } = _createScopedElement;
+export { createScopedElement };

package/src/lib/offset.ts

@@ -1,17 +1,17 @@
 export interface OffsetRectInterface {
-  top: number;
-  left: number;
-  width: number;
-  height: number;
+  top: number | undefined;
+  left: number | undefined;
+  width: number | undefined;
+  height: number | undefined;
 }
 
-export function getOffsetRect(elem: HTMLElement): OffsetRectInterface {
-  const box = elem.getBoundingClientRect();
+export function getOffsetRect(elem: HTMLElement | null): OffsetRectInterface {
+  const box = elem?.getBoundingClientRect();
 
   return {
-    top: box.top,
-    left: box.left,
-    width: elem.offsetWidth,
-    height: elem.offsetHeight,
+    top: box?.top,
+    left: box?.left,
+    width: elem?.offsetWidth,
+    height: elem?.offsetHeight,
   };
 }

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,16 +14,17 @@ 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 {
-      let node: Element = this;
+    ElementProto.closest = function (css: string): Element | null {
+      let node: Element | null = this;
       while (node) {
         if (node.matches(css)) {
           return node;
@@ -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: 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');
+        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') {
+export function prefixClass(scopedStyle: string | 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

@@ -3,9 +3,9 @@ type Option = {
   [index: string]: any;
 };
 
-type GetOptionLabel = (option: Option) => string;
+type GetOptionLabel = (option: Option) => string | undefined;
 
-const findAllIncludes = (target = '', search = '') => {
+const findAllIncludes = (target = "", search = "") => {
   const includes = [];
 
   let i = target.indexOf(search);
@@ -21,31 +21,32 @@ 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();
+  let label = getOptionLabel(option)?.toLocaleLowerCase();
 
-  if (label.startsWith(query)) {
+  if (label?.startsWith(query)) {
     return true;
   }
 
   const includes = findAllIncludes(label, query);
 
   // Ищем вхождение перед началом которого не буква
-  if (letterRegexp) {
+  if (letterRegexp && label) {
     for (const index of includes) {
       if (!letterRegexp.test(label[index - 1])) {
         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 | null,
+  transform: string
+): void {
+  if (element) {
+    element.style.transform = transform;
+    element.style.webkitTransform = transform;
+  }
 }