@vkontakte/vkui 4.24.0 → 4.26.0

package/src/hooks/useEventListener.ts

@@ -4,52 +4,59 @@ import { canUseDOM } from "../lib/dom";
 import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect";
 
 interface EventListenerHandle {
-  add: (el: HTMLElement | Document) => void;
+  add: (el: HTMLElement | Document | Window) => void;
   remove: () => void;
 }
 
 export function useEventListener<K extends keyof GlobalEventHandlersEventMap>(
   event: K,
-  _cb: (ev: GlobalEventHandlersEventMap[K]) => any,
+  _cb:
+    | false
+    | null
+    | undefined
+    | ((ev: GlobalEventHandlersEventMap[K]) => void),
   _options?: AddEventListenerOptions
 ): EventListenerHandle;
-export function useEventListener(
+export function useEventListener<E extends Event>(
   event: string,
-  _cb: (ev: Event) => any,
+  _cb: false | null | undefined | ((ev: E) => void),
   _options?: AddEventListenerOptions
 ): EventListenerHandle;
-export function useEventListener(
-  event: string,
-  _cb: (ev: Event) => any,
+export function useEventListener<
+  E extends Event,
+  K extends keyof GlobalEventHandlersEventMap
+>(
+  event: string | K,
+  _cb: false | null | undefined | ((ev: E) => void),
   _options?: AddEventListenerOptions
-) {
+): EventListenerHandle {
   const cbRef = React.useRef(_cb);
   useIsomorphicLayoutEffect(() => {
     cbRef.current = _cb;
   }, [_cb]);
-  const cb = React.useCallback<typeof _cb>(
-    (e) => cbRef.current && cbRef.current(e),
-    []
-  );
+  const cb = React.useCallback((e) => cbRef.current && cbRef.current(e), []);
 
   const detach = React.useRef(noop);
   const remove = React.useCallback(() => {
     detach.current();
     detach.current = noop;
   }, []);
-  const add = React.useCallback((el: HTMLElement | Document) => {
-    if (!canUseDOM) {
-      return;
-    }
-    remove();
-    if (!el) {
-      return;
-    }
-    const options = { ..._options };
-    el.addEventListener(event, cb, options);
-    detach.current = () => el.removeEventListener(event, cb, options);
-  }, []);
-  React.useEffect(() => remove, []);
+  const add = React.useCallback(
+    (el: HTMLElement | Document | Window) => {
+      if (!canUseDOM) {
+        return;
+      }
+      remove();
+      if (!el) {
+        return;
+      }
+      const options = { ..._options };
+      el.addEventListener(event, cb, options);
+      detach.current = () => el.removeEventListener(event, cb, options);
+    },
+    [_options, cb, event, remove]
+  );
+  React.useEffect(() => remove, [remove]);
 
   return { add, remove };
 }

package/src/hooks/useExternRef.ts

@@ -2,9 +2,10 @@ import * as React from "react";
 import { setRef } from "../lib/utils";
 
 export function useExternRef<T>(
-  ...externRefs: Array<React.Ref<T>>
-): React.MutableRefObject<T> {
-  const stableRef = React.useRef<T>();
+  ...externRefs: Array<React.Ref<T> | undefined | false>
+): React.MutableRefObject<T | null> {
+  const stableRef = React.useRef<T | null>(null);
+
   return React.useMemo(
     () => ({
       get current() {
@@ -12,9 +13,14 @@ export function useExternRef<T>(
       },
       set current(el) {
         stableRef.current = el;
-        externRefs.forEach((ref) => setRef(el, ref));
+        externRefs.forEach((ref) => {
+          if (ref) {
+            setRef(el, ref);
+          }
+        });
       },
     }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     externRefs
   );
 }

package/src/hooks/useGlobalEventListener.ts

@@ -4,26 +4,32 @@ import { useEventListener } from "./useEventListener";
 export function useGlobalEventListener<
   K extends keyof GlobalEventHandlersEventMap
 >(
-  element: HTMLElement | HTMLDocument | Window,
+  element: Document | HTMLElement | Window | null | undefined,
   event: K,
-  cb: false | null | ((ev: GlobalEventHandlersEventMap[K]) => any),
+  cb: ((ev: GlobalEventHandlersEventMap[K]) => void) | null | false | undefined,
   options?: AddEventListenerOptions
 ): void;
-export function useGlobalEventListener(
-  element: HTMLElement | HTMLDocument | Window,
+export function useGlobalEventListener<E extends Event>(
+  element: Document | HTMLElement | Window | null | undefined,
   event: string,
-  cb: false | null | ((ev: Event) => any),
+  cb: ((ev: E) => void) | null | false | undefined,
   options?: AddEventListenerOptions
 ): void;
-export function useGlobalEventListener(
-  element: any,
-  event: string,
-  cb: (ev: Event) => any,
+export function useGlobalEventListener<
+  K extends keyof GlobalEventHandlersEventMap,
+  E extends Event
+>(
+  element: Document | HTMLElement | Window | null | undefined,
+  event: K | string,
+  cb: ((ev: E) => void) | null | false | undefined,
   options?: AddEventListenerOptions
 ) {
   const listener = useEventListener(event, cb, options);
-  useIsomorphicLayoutEffect(
-    () => (cb ? listener.add(element) : listener.remove()),
-    [Boolean(cb)]
-  );
+  useIsomorphicLayoutEffect(() => {
+    if (cb && element) {
+      listener.add(element);
+    } else {
+      listener.remove();
+    }
+  }, [Boolean(cb), Boolean(element)]);
 }

package/src/hooks/useInsets.ts

@@ -1,7 +1,14 @@
 import * as React from "react";
-import vkBridge, { Insets } from "@vkontakte/vk-bridge";
+import vkBridge, { Insets as BridgeInsets } from "@vkontakte/vk-bridge";
 import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect";
 
+export interface Insets {
+  bottom: BridgeInsets["bottom"] | null;
+  top: BridgeInsets["top"] | null;
+  left: BridgeInsets["left"] | null;
+  right: BridgeInsets["right"] | null;
+}
+
 let initialState: Insets = {
   bottom: null,
   top: null,

package/src/hooks/useKeyboard.ts

@@ -12,8 +12,10 @@ interface SoftwareKeyboardState {
  Работает на iOS и Android, где софт-клавиатура ресайзит viewport в браузерах
  */
 export function getPreciseKeyboardState(window: any): boolean {
-  const { availHeight } = window.screen;
-  const { innerHeight } = window;
+  const {
+    innerHeight,
+    screen: { availHeight },
+  } = window;
 
   const coveredViewportPercentage = Math.round(
     (1 - innerHeight / availHeight) * 100
@@ -21,23 +23,42 @@ export function getPreciseKeyboardState(window: any): boolean {
   return coveredViewportPercentage > 24;
 }
 
+const eventOptions = {
+  passive: true,
+  capture: false,
+};
+
 export function useKeyboard(): SoftwareKeyboardState {
   const { window, document } = useDOM();
 
-  const [keyboardState, setKeyboardState] =
-    React.useState<SoftwareKeyboardState>({
-      isOpened: false,
-      isPrecise: false,
-    });
+  const [isOpened, setIsOpened] = React.useState(false);
+  const [isPrecise, setIsPrecise] = React.useState(false);
 
   const transitionalTimeout = React.useRef<ReturnType<
     typeof setTimeout
   > | null>(null);
 
-  const eventOptions = {
-    passive: true,
-    capture: false,
-  };
+  const onFocus = React.useCallback(
+    (event: FocusEvent | true) => {
+      if (transitionalTimeout.current) {
+        clearTimeout(transitionalTimeout.current);
+      }
+
+      const isOpened =
+        (event === true || event.type === "focusin") &&
+        (document?.activeElement?.tagName === "INPUT" ||
+          document?.activeElement?.tagName === "TEXTAREA");
+      setIsOpened(isOpened);
+      setIsPrecise(false);
+
+      // Ожидаем прохождение анимации раскрытия клавиатуры
+      transitionalTimeout.current = setTimeout(() => {
+        setIsOpened(isOpened);
+        setIsPrecise(getPreciseKeyboardState(window));
+      }, 300);
+    },
+    [document?.activeElement?.tagName, window]
+  );
 
   /**
    У полей с autoFocus не отлавливаются события focus, для этого вызываем вручную,
@@ -47,26 +68,8 @@ export function useKeyboard(): SoftwareKeyboardState {
     onFocus(true);
   }, [onFocus]);
 
-  function onFocus(event: FocusEvent | true) {
-    clearTimeout(transitionalTimeout.current);
-
-    let returnObject = {
-      isOpened:
-        (event === true || event.type === "focusin") &&
-        (document.activeElement?.tagName === "INPUT" ||
-          document.activeElement?.tagName === "TEXTAREA"),
-      isPrecise: false,
-    };
-
-    // Ожидаем прохождение анимации раскрытия клавиатуры
-    transitionalTimeout.current = setTimeout(() => {
-      returnObject.isPrecise = getPreciseKeyboardState(window);
-      setKeyboardState(returnObject);
-    }, 300);
-  }
-
   useGlobalEventListener(document, "focusout", onFocus, eventOptions);
   useGlobalEventListener(document, "focusin", onFocus, eventOptions);
 
-  return keyboardState;
+  return { isOpened, isPrecise };
 }

package/src/hooks/usePatchChildrenRef.ts

@@ -12,8 +12,8 @@ const isDOMTypeElement = (
 
 const warn = warnOnce("usePatchChildrenRef");
 export const usePatchChildrenRef = <T = HTMLElement>(
-  children: ChildrenElement<T>
-): [React.MutableRefObject<T>, ChildrenElement<T>] => {
+  children?: ChildrenElement<T>
+): [React.MutableRefObject<T | null>, ChildrenElement<T> | undefined] => {
   const childRef =
     React.isValidElement(children) &&
     (isDOMTypeElement(children)
@@ -27,7 +27,7 @@ export const usePatchChildrenRef = <T = HTMLElement>(
           "получить ссылку на корневой dom-элемент этого компонента"
       );
     }
-  }, [children.type]);
+  }, [children?.type, patchedRef]);
   return [
     patchedRef,
     React.isValidElement(children)

package/src/hooks/usePlatform.ts

@@ -3,7 +3,7 @@ import { PlatformType } from "../lib/platform";
 import { SSRContext } from "../lib/SSR";
 import { ConfigProviderContext } from "../components/ConfigProvider/ConfigProviderContext";
 
-export function usePlatform(): PlatformType {
+export function usePlatform(): PlatformType | undefined {
   const ssrContext = React.useContext(SSRContext);
   const { platform } = React.useContext(ConfigProviderContext);
   return ssrContext.platform || platform;

package/src/hooks/useTimeout.ts

@@ -10,19 +10,23 @@ export function useTimeout(cb: () => any, duration: number) {
   }, [cb, duration]);
 
   const timeout = React.useRef<ReturnType<typeof setTimeout>>();
-  const clear = React.useCallback(
-    () => canUseDOM && clearTimeout(timeout.current),
-    []
-  );
-  const set = React.useCallback((duration = options.current.duration) => {
-    clear();
-    if (canUseDOM) {
-      timeout.current = setTimeout(() => {
-        const { cb } = options.current;
-        typeof cb === "function" && cb();
-      }, duration);
+  const clear = React.useCallback(() => {
+    if (canUseDOM && timeout?.current) {
+      clearTimeout(timeout.current);
     }
   }, []);
+  const set = React.useCallback(
+    (duration = options.current.duration) => {
+      clear();
+      if (canUseDOM) {
+        timeout.current = setTimeout(() => {
+          const { cb } = options.current;
+          typeof cb === "function" && cb();
+        }, duration);
+      }
+    },
+    [clear]
+  );
   useIsomorphicLayoutEffect(() => clear, []);
 
   return { set, clear };

package/src/hooks/useWaitTransitionFinish.ts

@@ -5,16 +5,18 @@ export const useWaitTransitionFinish = () => {
   const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
 
   const waitTransitionFinish = (
-    element: HTMLElement,
+    element: HTMLElement | null,
     eventHandler: VoidFunction,
     durationFallback: number
   ) => {
     if (element) {
-      if (transitionEvent.supported) {
+      if (transitionEvent.supported && transitionEvent.name) {
         element.removeEventListener(transitionEvent.name, eventHandler);
         element.addEventListener(transitionEvent.name, eventHandler);
       } else {
-        clearTimeout(timeoutRef.current);
+        if (timeoutRef?.current) {
+          clearTimeout(timeoutRef.current);
+        }
         timeoutRef.current = setTimeout(eventHandler, durationFallback);
       }
     }

package/src/index.ts

@@ -41,14 +41,14 @@ export type { FixedLayoutProps } from "./components/FixedLayout/FixedLayout";
  */
 export { PopoutWrapper } from "./components/PopoutWrapper/PopoutWrapper";
 export type { PopoutWrapperProps } from "./components/PopoutWrapper/PopoutWrapper";
-export { default as Alert } from "./components/Alert/Alert";
+export { Alert } from "./components/Alert/Alert";
 export type {
   AlertProps,
   AlertActionInterface,
 } from "./components/Alert/Alert";
 export { ActionSheet } from "./components/ActionSheet/ActionSheet";
 export type { ActionSheetProps } from "./components/ActionSheet/ActionSheet";
-export { default as ActionSheetItem } from "./components/ActionSheetItem/ActionSheetItem";
+export { ActionSheetItem } from "./components/ActionSheetItem/ActionSheetItem";
 export type { ActionSheetItemProps } from "./components/ActionSheetItem/ActionSheetItem";
 export { default as ScreenSpinner } from "./components/ScreenSpinner/ScreenSpinner";
 export type { ScreenSpinnerProps } from "./components/ScreenSpinner/ScreenSpinner";
@@ -239,15 +239,15 @@ export type { ModalCardBaseProps } from "./components/ModalCardBase/ModalCardBas
  * Wrappers
  */
 export { AppRoot } from "./components/AppRoot/AppRoot";
-export { default as AdaptivityProvider } from "./components/AdaptivityProvider/AdaptivityProvider";
+export { AdaptivityProvider } from "./components/AdaptivityProvider/AdaptivityProvider";
 export { default as ConfigProvider } from "./components/ConfigProvider/ConfigProvider";
 export type { ConfigProviderProps } from "./components/ConfigProvider/ConfigProvider";
 export {
   ConfigProviderContext,
-  Appearance,
-  Scheme,
   WebviewType,
 } from "./components/ConfigProvider/ConfigProviderContext";
+export { AppearanceProvider } from "./components/AppearanceProvider/AppearanceProvider";
+export { Scheme, Appearance } from "./helpers/scheme";
 
 /**
  * Advertisement

package/src/lib/SSR.tsx

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

package/src/lib/accessibility.ts

@@ -52,7 +52,7 @@ const ACCESSIBLE_KEYS: AccessibleKey[] = [
 
 export function pressedKey(
   e: KeyboardEvent | React.KeyboardEvent<HTMLElement>
-): Keys {
+) {
   return (
     ACCESSIBLE_KEYS.find(
       ({ key, keyCode }) => key.includes(e.key) || keyCode === e.keyCode

package/src/lib/animate.ts

@@ -17,6 +17,7 @@ export interface AnimateArgumentsInterface {
   draw: DrawInterface;
 }
 
+// eslint-disable-next-line import/no-default-export
 export default function animate({
   duration,
   timing,

package/src/lib/dom.tsx

@@ -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 */
 
@@ -30,7 +30,7 @@ export const useDOM = () => {
 
 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/isRefObject.ts

@@ -6,6 +6,6 @@ export const isRefObject = <T, E = Element>(
   return (
     typeof refObject === "object" &&
     refObject !== null &&
-    refObject.hasOwnProperty("current")
+    (refObject as React.RefObject<E>).hasOwnProperty("current")
   );
 };

package/src/lib/jsxRuntime.ts

@@ -19,11 +19,11 @@ function processProps(props: any) {
   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);
+    return React.createElement.apply(undefined, args as any);
   }
 
   let argsLength = args.length;
@@ -35,11 +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

@@ -10,7 +10,11 @@ export const ANDROID = Platform.ANDROID;
 export const IOS = Platform.IOS;
 export const VKCOM = Platform.VKCOM;
 
-export type PlatformType = Platform.ANDROID | Platform.IOS | Platform.VKCOM;
+export type PlatformType =
+  | Platform.ANDROID
+  | Platform.IOS
+  | Platform.VKCOM
+  | string;
 
 export function platform(browserInfo?: BrowserInfo): PlatformType {
   if (!browserInfo) {

package/src/lib/polyfills.ts

@@ -24,7 +24,7 @@ if (canUseDOM) {
   // Element.prototype.closest
   if (!ElementProto.closest) {
     ElementProto.closest = function (css: string): Element | null {
-      let node: Element = this;
+      let node: Element | null = this;
       while (node) {
         if (node.matches(css)) {
           return node;
@@ -74,7 +74,7 @@ if (!Array.prototype.includes) {
 // Array.prototype.find
 if (!Array.prototype.find) {
   Object.defineProperty(Array.prototype, "find", {
-    value: function (callback: Array<any>["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") {

package/src/lib/prefixClass.ts

@@ -18,7 +18,7 @@ function prefixSingle(scopedStyle: string): string {
   return resolved;
 }
 
-export function prefixClass(scopedStyle?: string | string[]) {
+export function prefixClass(scopedStyle: string | string[]) {
   if (typeof scopedStyle === "string") {
     return prefixSingle(scopedStyle);
   }

package/src/lib/select.ts

@@ -3,7 +3,7 @@ type Option = {
   [index: string]: any;
 };
 
-type GetOptionLabel = (option: Option) => string;
+type GetOptionLabel = (option: Option) => string | undefined;
 
 const findAllIncludes = (target = "", search = "") => {
   const includes = [];
@@ -30,16 +30,16 @@ export const defaultFilterFn = (
   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;

package/src/lib/styles.ts

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

package/src/lib/supportEvents.ts

@@ -3,7 +3,7 @@ import { isTesting } from "./testing";
 
 export type VKUISupportEvents = {
   supported: boolean;
-  name?: string;
+  name?: string | null;
 };
 
 // WebKitAnimationEvent и WebKitTransitionEvent не существуют в глобальном контексте

package/src/lib/utils.ts

@@ -59,7 +59,9 @@ export function setRef<T>(element: T, ref: React.Ref<T>): void {
   }
 }
 
-export function multiRef<T>(...refs: Array<React.Ref<T>>): React.RefObject<T> {
+export function multiRef<T>(
+  ...refs: Array<React.Ref<T> | undefined>
+): React.RefObject<T> {
   let current: T | null = null;
   return {
     get current() {
@@ -67,7 +69,7 @@ export function multiRef<T>(...refs: Array<React.Ref<T>>): React.RefObject<T> {
     },
     set current(element) {
       current = element;
-      refs.forEach((ref) => setRef(element, ref));
+      refs.forEach((ref) => ref && setRef(element, ref));
     },
   };
 }

package/src/styles/bright_light.css

@@ -4,7 +4,8 @@
 */
 :root,
 body[scheme="bright_light"],
-[scheme="bright_light"] {
+[scheme="bright_light"],
+.vkuibright_light {
   --accent: #2688eb;
   --accent_alternate: #0077ff;
   --action_sheet_action_foreground: #2688eb;

package/src/styles/space_gray.css

@@ -3,7 +3,8 @@
 * Этот файл сгенерирован автоматически. Не надо править его руками.
 */
 body[scheme="space_gray"],
-[scheme="space_gray"] {
+[scheme="space_gray"],
+.vkuispace_gray {
   --accent: #71aaeb;
   --accent_alternate: #ffffff;
   --action_sheet_action_foreground: #ffffff;