@vkontakte/vkui 5.8.2 → 5.9.1

package/src/helpers/math.ts

@@ -0,0 +1,47 @@
+export const clamp = (value: number, min: number, max: number) =>
+  Math.max(min, Math.min(value, max));
+
+export function precisionRound(number: number, precision = 1) {
+  let factor = Math.pow(10, precision);
+  return Math.round(number * factor) / factor;
+}
+
+/**
+ * Решение скопировано без изменений у MUI:
+ * https://github.com/mui/material-ui/blob/v5.13.7/packages/mui-base/src/useSlider/useSlider.ts#L89-L105
+ */
+function getDecimalPrecision(num: number) {
+  // This handles the case when num is very small (0.00000001), js will turn this into 1e-8.
+  // When num is bigger than 1 or less than -1 it won't get converted to this notation so it's fine.
+  if (Math.abs(num) < 1) {
+    const parts = num.toExponential().split('e-');
+    const matissaDecimalPart = parts[0].split('.')[1];
+    return (matissaDecimalPart ? matissaDecimalPart.length : 0) + parseInt(parts[1], 10);
+  }
+
+  const decimalPart = num.toString().split('.')[1];
+  return decimalPart ? decimalPart.length : 0;
+}
+
+function roundValueToStep(value: number, step: number, min: number) {
+  const nearest = Math.round((value - min) / step) * step + min;
+  return Number(nearest.toFixed(getDecimalPrecision(step)));
+}
+
+function decimatedClamp(val: number, min: number, max: number, step?: number) {
+  if (step == null || step <= 0) {
+    return clamp(val, min, max);
+  }
+  const roundedValue = roundValueToStep(val, step, min);
+  return clamp(roundedValue, min, max);
+}
+
+export function rescale(
+  value: number,
+  from: [number, number],
+  to: [number, number],
+  options: { step?: number } = {},
+) {
+  const scaled = ((value - from[0]) / (from[1] - from[0])) * (to[1] - to[0]) + to[0];
+  return decimatedClamp(scaled, to[0], to[1], options.step);
+}

package/src/helpers/range.ts

@@ -0,0 +1,26 @@
+/**
+ * Генерирует массив с диапазоном чисел.
+ */
+export function range(from: number, to: number, step = 1) {
+  const direction = from < to ? 1 : -1;
+  const distance = Math.abs(from - to) + 1;
+  const arrayLength = Math.ceil(distance / step);
+
+  const arr = Array<number>(arrayLength);
+  for (let index = 0; index < arr.length; index++) {
+    arr[index] = from + index * step * direction;
+  }
+
+  return arr;
+}
+/**
+ * Генерирует массив с диапазоном чисел в порядке возрастания.
+ * Если `from` меньше `to`, вернется пустой массив.
+ */
+export function rangeIncrement(from: number, to: number, step = 1) {
+  if (from > to) {
+    return [];
+  }
+
+  return range(from, to, step);
+}

package/src/hoc/withContext.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+export function withContext<T, X>(
+  Component: React.ComponentType<T>,
+  Ctx: React.Context<X>,
+  prop: string,
+): React.FC<T> {
+  function WithContext(props: T) {
+    const context = React.useContext<X>(Ctx);
+
+    return <Component {...props} {...{ [prop]: context }} />;
+  }
+  return WithContext;
+}

package/src/hoc/withInsets.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { useInsets } from '../hooks/useInsets';
+import { HasInsets } from '../types';
+
+export function withInsets<T extends HasInsets>(
+  Component: React.ComponentType<T>,
+): React.ComponentType<Omit<T, keyof HasInsets>> {
+  function WithInsets(props: Omit<T, keyof HasInsets>) {
+    const insets = useInsets();
+    return <Component {...(props as T)} insets={insets} />;
+  }
+  return WithInsets;
+}

package/src/hoc/withPlatform.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { useConfigProvider } from '../components/ConfigProvider/ConfigProviderContext';
+import { HasPlatform } from '../types';
+
+export function withPlatform<T extends HasPlatform>(
+  Component: React.ComponentType<T>,
+): React.FC<Omit<T, keyof HasPlatform>> {
+  function WithPlatform(props: Omit<T, keyof HasPlatform>) {
+    const { platform } = useConfigProvider();
+
+    return <Component {...(props as T)} platform={platform} />;
+  }
+  return WithPlatform;
+}

package/src/hooks/useAdaptivity.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import {
+  AdaptivityContext,
+  type AdaptivityProps,
+} from '../components/AdaptivityProvider/AdaptivityContext';
+
+export type { AdaptivityProps };
+
+/**
+ * Возвращает сырые данные из AdaptivityProvider.
+ */
+export const useAdaptivity = (): AdaptivityProps => {
+  return React.useContext(AdaptivityContext);
+};

package/src/hooks/useAdaptivityConditionalRender/constants.ts

@@ -0,0 +1,44 @@
+import { SizeType } from '../../lib/adaptivity';
+import styles from '../../styles/adaptivity.module.css';
+
+export const sizeXCompactClassNames = {
+  mq: { className: styles['-sizeX--compact-mq'] },
+  [SizeType.COMPACT]: { className: styles['-sizeX--compact-forced'] },
+};
+
+export const sizeXRegularClassNames = {
+  mq: { className: styles['-sizeX--regular-mq'] },
+  [SizeType.REGULAR]: { className: styles['-sizeX--regular-forced'] },
+};
+
+export const sizeYCompactClassNames = {
+  mq: { className: styles['-sizeY--compact-mq'] },
+  [SizeType.COMPACT]: { className: styles['-sizeY--compact-forced'] },
+};
+
+export const sizeYRegularClassNames = {
+  mq: { className: styles['-sizeY--regular-mq'] },
+  [SizeType.REGULAR]: { className: styles['-sizeY--regular-forced'] },
+};
+
+export const viewWidthClassNames = {
+  tabletMinus: {
+    mq: { className: styles['-viewWidth--tabletMinus-mq'] },
+    forced: { className: styles['-viewWidth--tabletMinus-forced'] },
+  },
+  tabletPlus: {
+    mq: { className: styles['-viewWidth--tabletPlus-mq'] },
+    forced: { className: styles['-viewWidth--tabletPlus-forced'] },
+  },
+};
+
+export const deviceTypeClassNames = {
+  mobile: {
+    mq: { className: styles['-deviceType--mobile-mq'] },
+    forced: { className: styles['-deviceType--mobile-forced'] },
+  },
+  desktop: {
+    mq: { className: styles['-deviceType--desktop-mq'] },
+    forced: { className: styles['-deviceType--desktop-forced'] },
+  },
+};

package/src/hooks/useAdaptivityConditionalRender/helpers.ts

@@ -0,0 +1,80 @@
+import { SizeType, tryToCheckIsDesktop, ViewHeight, ViewWidth } from '../../lib/adaptivity';
+import type { PlatformType } from '../../lib/platform';
+import type {
+  AdaptiveDeviceType,
+  AdaptiveSizeType,
+  AdaptiveViewWidth,
+  DeviceTypeCSSBreakpoints,
+  ElementProps,
+  ViewWidthCSSBreakpoints,
+} from './types';
+
+export const getAdaptiveSizeType = (
+  type: undefined | SizeType,
+  compactClassNames: Record<'mq' | SizeType.COMPACT, ElementProps>,
+  regularClassNames: Record<'mq' | SizeType.REGULAR, ElementProps>,
+): AdaptiveSizeType => {
+  return {
+    compact:
+      type === undefined
+        ? compactClassNames.mq
+        : type === SizeType.COMPACT
+        ? compactClassNames[type]
+        : false,
+    regular:
+      type === undefined
+        ? regularClassNames.mq
+        : type === SizeType.REGULAR
+        ? regularClassNames[type]
+        : false,
+  };
+};
+
+export const getAdaptiveViewWidth = (
+  viewWidth: undefined | ViewWidth,
+  viewWidthClassNames: Record<ViewWidthCSSBreakpoints, Record<'mq' | 'forced', ElementProps>>,
+): AdaptiveViewWidth => {
+  return {
+    tabletMinus:
+      viewWidth === undefined
+        ? viewWidthClassNames.tabletMinus.mq
+        : viewWidth < ViewWidth.TABLET
+        ? viewWidthClassNames.tabletMinus.forced
+        : false,
+    tabletPlus:
+      viewWidth === undefined
+        ? viewWidthClassNames.tabletPlus.mq
+        : viewWidth >= ViewWidth.TABLET
+        ? viewWidthClassNames.tabletPlus.forced
+        : false,
+  };
+};
+
+export const getAdaptiveDeviceType = (
+  viewWidth: undefined | ViewWidth,
+  viewHeight: undefined | ViewHeight,
+  hasPointer: undefined | boolean,
+  platform: PlatformType,
+  deviceTypeClassNames: Record<DeviceTypeCSSBreakpoints, Record<'mq' | 'forced', ElementProps>>,
+): AdaptiveDeviceType => {
+  const isDesktop = tryToCheckIsDesktop(viewWidth, viewHeight, hasPointer, platform);
+
+  if (isDesktop === null) {
+    return {
+      mobile: deviceTypeClassNames.mobile.mq,
+      desktop: deviceTypeClassNames.desktop.mq,
+    };
+  }
+
+  if (isDesktop) {
+    return {
+      mobile: false,
+      desktop: deviceTypeClassNames.desktop.forced,
+    };
+  }
+
+  return {
+    mobile: deviceTypeClassNames.mobile.forced,
+    desktop: false,
+  };
+};

package/src/hooks/useAdaptivityConditionalRender/index.ts

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

package/src/hooks/useAdaptivityConditionalRender/types.ts

@@ -0,0 +1,39 @@
+import { type CSSBreakpoints, SizeType } from '../../lib/adaptivity';
+
+export type ForcedHiddenByAdaptivityProviderType = false; // имеется ввиду, что зашили значение, например, <AdaptivityProvider sizeY="regular" />
+
+export type ElementProps = { className: string };
+
+/* ================================================================================================================== */
+
+export type AdaptiveSizeType = Record<
+  SizeType,
+  ForcedHiddenByAdaptivityProviderType | ElementProps
+>;
+
+/* ================================================================================================================== */
+
+export type ViewWidthCSSBreakpoints = Extract<CSSBreakpoints, 'tabletMinus' | 'tabletPlus'>;
+
+export type AdaptiveViewWidth = Record<
+  ViewWidthCSSBreakpoints,
+  ForcedHiddenByAdaptivityProviderType | ElementProps
+>;
+
+/* ================================================================================================================== */
+
+export type DeviceTypeCSSBreakpoints = 'mobile' | 'desktop';
+
+export type AdaptiveDeviceType = Record<
+  DeviceTypeCSSBreakpoints,
+  ForcedHiddenByAdaptivityProviderType | ElementProps
+>;
+
+/* ================================================================================================================== */
+
+export interface UseAdaptivityConditionalRender {
+  sizeX: AdaptiveSizeType;
+  sizeY: AdaptiveSizeType;
+  viewWidth: AdaptiveViewWidth;
+  deviceType: AdaptiveDeviceType;
+}

package/src/hooks/useAdaptivityConditionalRender/useAdaptivityConditionalRender.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { AdaptivityContext } from '../../components/AdaptivityProvider/AdaptivityContext';
+import { usePlatform } from '../usePlatform';
+import {
+  deviceTypeClassNames,
+  sizeXCompactClassNames,
+  sizeXRegularClassNames,
+  sizeYCompactClassNames,
+  sizeYRegularClassNames,
+  viewWidthClassNames,
+} from './constants';
+import { getAdaptiveDeviceType, getAdaptiveSizeType, getAdaptiveViewWidth } from './helpers';
+import type { UseAdaptivityConditionalRender } from './types';
+
+export const useAdaptivityConditionalRender = (): UseAdaptivityConditionalRender => {
+  const {
+    sizeX: sizeXContext,
+    sizeY: sizeYContext,
+    viewWidth: viewWidthContext,
+    viewHeight: viewHeightContext,
+    hasPointer: hasPointerContext,
+  } = React.useContext(AdaptivityContext);
+  const platform = usePlatform();
+
+  return React.useMemo(() => {
+    const sizeX = getAdaptiveSizeType(sizeXContext, sizeXCompactClassNames, sizeXRegularClassNames);
+    const sizeY = getAdaptiveSizeType(sizeYContext, sizeYCompactClassNames, sizeYRegularClassNames);
+    const viewWidth = getAdaptiveViewWidth(viewWidthContext, viewWidthClassNames);
+    const deviceType = getAdaptiveDeviceType(
+      viewWidthContext,
+      viewHeightContext,
+      hasPointerContext,
+      platform,
+      deviceTypeClassNames,
+    );
+    return {
+      sizeX,
+      sizeY,
+      viewWidth,
+      deviceType,
+    };
+  }, [
+    sizeXContext,
+    sizeYContext,
+    viewWidthContext,
+    viewHeightContext,
+    hasPointerContext,
+    platform,
+  ]);
+};

package/src/hooks/useAdaptivityHasHover.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { hasHover as hasHoverLib } from '@vkontakte/vkjs';
+import { AdaptivityContext } from '../components/AdaptivityProvider/AdaptivityContext';
+import { useIsClient } from './useIsClient';
+
+/**
+ * Определение происходит с помощью `window.matchMedia`. Для того, чтобы не было ошибок при гидратации, по умолчанию
+ * откладываем определение на второй рендер.
+ *
+ * [No SSR] Если передать `false`, то определение будет сразу.
+ */
+export function useAdaptivityHasHover(deferDetect?: true): undefined | boolean;
+export function useAdaptivityHasHover(deferDetect?: false): boolean;
+export function useAdaptivityHasHover(deferDetect = true): undefined | boolean {
+  const { hasHover: hasHoverContext } = React.useContext(AdaptivityContext);
+  const hasHover = hasHoverContext === undefined ? hasHoverLib : hasHoverContext;
+
+  const needTwoPassRendering = deferDetect || hasHoverContext === undefined;
+
+  const isClient = useIsClient(!needTwoPassRendering);
+  if (!isClient || hasHoverContext !== undefined) {
+    return hasHoverContext;
+  }
+
+  return hasHover;
+}

package/src/hooks/useAdaptivityHasPointer.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { hasMouse as hasPointerLib } from '@vkontakte/vkjs';
+import { AdaptivityContext } from '../components/AdaptivityProvider/AdaptivityContext';
+import { useIsClient } from './useIsClient';
+
+/**
+ * Определение происходит с помощью `window.matchMedia`. Для того, чтобы не было ошибок при гидратации, по умолчанию
+ * откладываем определение на второй рендер.
+ *
+ * [No SSR] Если передать `false`, то определение будет сразу.
+ */
+export function useAdaptivityHasPointer(deferDetect?: true): undefined | boolean; // prettier-ignore
+export function useAdaptivityHasPointer(deferDetect?: false): boolean;
+export function useAdaptivityHasPointer(deferDetect = true): undefined | boolean {
+  const { hasPointer: hasPointerContext } = React.useContext(AdaptivityContext);
+
+  const needTwoPassRendering = deferDetect || hasPointerContext === undefined;
+
+  const isClient = useIsClient(!needTwoPassRendering);
+  if (!isClient || hasPointerContext !== undefined) {
+    return hasPointerContext;
+  }
+
+  return hasPointerLib;
+}

package/src/hooks/useAdaptivityWithJSMediaQueries.ts

@@ -0,0 +1,149 @@
+import * as React from 'react';
+import { canUseDOM, hasHover as hasHoverLib, hasMouse as hasPointerLib } from '@vkontakte/vkjs';
+import {
+  AdaptivityContext,
+  type AdaptivityProps as BaseAdaptivityProps,
+} from '../components/AdaptivityProvider/AdaptivityContext';
+import { getOrDefault } from '../helpers/getOrDefault';
+import {
+  getSizeX,
+  getSizeY,
+  getViewHeightByMediaQueries,
+  getViewWidthByMediaQueries,
+  tryToCheckIsDesktop,
+} from '../lib/adaptivity';
+import { matchMediaListAddListener, matchMediaListRemoveListener } from '../lib/matchMedia';
+import { useMediaQueries } from './useMediaQueries';
+import { usePlatform } from './usePlatform';
+
+export interface UseAdaptivityWithJSMediaQueries extends Required<BaseAdaptivityProps> {
+  isDesktop: boolean;
+}
+
+/**
+ * Высчитывает и возвращает параметры адаптивности при изменении вьюпорта.
+ *
+ * Берёт в приоритет значения из `AdaptivityContext`.
+ *
+ * > ⚠ SSR
+ * >
+ * > Во избежания ошибок при гидратации, не используйте данный хук, если есть вероятность, что компонент будет отрендерен
+ * > на стороне сервера.
+ * >
+ * > Лучше всего использовать для всплывающих окон, т.к. они вызываются только после загрузки
+ * > страницы либо пользователем, либо программно.
+ */
+export const useAdaptivityWithJSMediaQueries = (): UseAdaptivityWithJSMediaQueries => {
+  if (!canUseDOM) {
+    console.error(`[useAdaptivityWithJSMediaQueries] Похоже, вы пытаетесь использовать хук вне браузера.
+
+Постарайтесь этого избегать, чтобы не было ошибок при гидратации: при SSR нет информации о размерах экрана.
+
+Используйте CSS Media Query или библиотеку по типу https://github.com/artsy/fresnel.`);
+  }
+
+  const {
+    viewWidth: viewWidthContext,
+    viewHeight: viewHeightContext,
+    sizeX: sizeXContext,
+    sizeY: sizeYContext,
+    hasPointer: hasPointerContext,
+    hasHover: hasHoverContext,
+  } = React.useContext(AdaptivityContext);
+
+  const platform = usePlatform();
+  const mediaQueries = useMediaQueries();
+
+  const [[viewWidthLocal, viewHeightLocal], setViewSizeLocal] = React.useState(() => [
+    getOrDefault(viewWidthContext, getViewWidthByMediaQueries(mediaQueries)),
+    getOrDefault(viewHeightContext, getViewHeightByMediaQueries(mediaQueries)),
+  ]);
+
+  const adaptivityProps = React.useMemo(() => {
+    const hasPointer = getOrDefault(hasPointerContext, hasPointerLib);
+    const hasHover = getOrDefault(hasHoverContext, hasHoverLib);
+    const viewWidth = getOrDefault(viewWidthContext, viewWidthLocal);
+    const viewHeight = getOrDefault(viewHeightContext, viewHeightLocal);
+    const sizeX = getOrDefault(sizeXContext, getSizeX(viewWidth));
+    const sizeY = getOrDefault(sizeYContext, getSizeY(viewWidth, viewHeight, hasPointer));
+    const isDesktop = tryToCheckIsDesktop(viewWidth, viewHeight, hasPointer, platform);
+
+    return {
+      viewWidth,
+      viewHeight,
+      sizeX,
+      sizeY,
+      hasPointer,
+      hasHover,
+      isDesktop,
+    };
+  }, [
+    viewWidthLocal,
+    viewHeightLocal,
+    viewWidthContext,
+    viewHeightContext,
+    sizeXContext,
+    sizeYContext,
+    hasPointerContext,
+    hasHoverContext,
+    platform,
+  ]);
+
+  React.useEffect(() => {
+    const handleMediaQuery = () => {
+      setViewSizeLocal((prevSizeLocal) => {
+        const newViewWidthLocal = getOrDefault(
+          viewWidthContext,
+          getViewWidthByMediaQueries(mediaQueries),
+        );
+        const newViewHeightLocal = getOrDefault(
+          viewHeightContext,
+          getViewHeightByMediaQueries(mediaQueries),
+        );
+
+        const [prevViewWidthLocal, prevViewHeightLocal] = prevSizeLocal;
+
+        if (
+          prevViewWidthLocal !== newViewWidthLocal ||
+          prevViewHeightLocal !== newViewHeightLocal
+        ) {
+          return [newViewWidthLocal, newViewHeightLocal];
+        }
+
+        return prevSizeLocal;
+      });
+    };
+
+    if (!viewWidthContext) {
+      [
+        mediaQueries.desktopPlus,
+        mediaQueries.tablet,
+        mediaQueries.smallTablet,
+        mediaQueries.mobile,
+      ].forEach((matchMediaListener) =>
+        matchMediaListAddListener(matchMediaListener, handleMediaQuery),
+      );
+    }
+
+    if (!viewHeightContext) {
+      [mediaQueries.mediumHeight, mediaQueries.mobileLandscapeHeight].forEach(
+        (matchMediaListener) => matchMediaListAddListener(matchMediaListener, handleMediaQuery),
+      );
+    }
+
+    return () => {
+      [
+        mediaQueries.desktopPlus,
+        mediaQueries.tablet,
+        mediaQueries.smallTablet,
+        mediaQueries.mobile,
+        mediaQueries.mediumHeight,
+        mediaQueries.mobileLandscapeHeight,
+      ].forEach((matchMediaListener) =>
+        matchMediaListRemoveListener(matchMediaListener, handleMediaQuery),
+      );
+    };
+  }, [mediaQueries, viewWidthContext, viewHeightContext]);
+
+  return adaptivityProps;
+};

package/src/hooks/useAppearance.ts

@@ -0,0 +1,7 @@
+import { useConfigProvider } from '../components/ConfigProvider/ConfigProviderContext';
+
+export function useAppearance() {
+  const { appearance } = useConfigProvider();
+
+  return appearance ?? 'light';
+}

package/src/hooks/useAutoDetectAppearance.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import vkBridge, {
+  AnyReceiveMethodName,
+  AppearanceType,
+  VKBridgeEvent,
+} from '@vkontakte/vk-bridge';
+import { noop } from '@vkontakte/vkjs';
+import { resolveAppearance, VKBridgeConfigData } from '../helpers/appearance';
+import { useDOM } from '../lib/dom';
+import { matchMediaListAddListener, matchMediaListRemoveListener } from '../lib/matchMedia';
+
+function autoDetectAppearanceByBridge(
+  setAppearance: (value: AppearanceType) => void,
+  onDetectAppearanceByBridge: () => void,
+) {
+  function updateAppearance(data: VKBridgeConfigData) {
+    const initialAppearance = resolveAppearance(data);
+
+    if (initialAppearance) {
+      onDetectAppearanceByBridge();
+      setAppearance(initialAppearance);
+    }
+  }
+
+  function bridgeListener(e: VKBridgeEvent<AnyReceiveMethodName>) {
+    const { type, data } = e.detail;
+
+    if (type !== 'VKWebAppUpdateConfig') {
+      return;
+    }
+
+    updateAppearance(data as VKBridgeConfigData);
+  }
+
+  vkBridge.subscribe(bridgeListener);
+  vkBridge.send('VKWebAppGetConfig').then(updateAppearance).catch(console.error);
+
+  return () => vkBridge.unsubscribe(bridgeListener);
+}
+
+function autoDetectAppearance(
+  window: Window | undefined,
+  setAppearance: (value: AppearanceType) => void,
+): () => void {
+  const mediaQuery =
+    window && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
+
+  if (mediaQuery === undefined) {
+    return noop;
+  }
+
+  const check = (event: MediaQueryList | MediaQueryListEvent) => {
+    // eslint-disable-next-line no-restricted-properties
+    setAppearance(event.matches ? 'dark' : 'light');
+  };
+
+  check(mediaQuery);
+  matchMediaListAddListener(mediaQuery, check);
+
+  return () => matchMediaListRemoveListener(mediaQuery, check);
+}
+
+/**
+ * TODO [>=6]: удалить хук (#5049)
+ * @deprecated v5.8.0
+ */
+export const useAutoDetectAppearance = (
+  appearanceProp?: AppearanceType,
+  onDetectAppearanceByBridge?: () => void,
+): AppearanceType => {
+  const { window } = useDOM();
+  const onceDetectAppearanceByBridge = React.useRef(() => {
+    onDetectAppearanceByBridge && onDetectAppearanceByBridge();
+    onceDetectAppearanceByBridge.current = noop;
+  });
+
+  const [appearance, setAppearance] = React.useState<AppearanceType>(() => {
+    if (appearanceProp) {
+      return appearanceProp;
+    }
+
+    const mediaQuery =
+      window && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)');
+
+    // eslint-disable-next-line no-restricted-properties
+    return mediaQuery?.matches ? 'dark' : 'light';
+  });
+
+  React.useEffect(() => {
+    if (appearanceProp) {
+      setAppearance(appearanceProp);
+      return noop;
+    }
+
+    if (vkBridge.isEmbedded()) {
+      return autoDetectAppearanceByBridge(setAppearance, onceDetectAppearanceByBridge.current);
+    }
+
+    return autoDetectAppearance(window, setAppearance);
+  }, [window, appearanceProp]);
+
+  return appearance;
+};

package/src/hooks/useAutoFocus.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
+
+export function useAutoFocus(
+  ref: React.RefObject<HTMLElement | null>,
+  autoFocus: boolean | undefined,
+) {
+  useIsomorphicLayoutEffect(() => {
+    if (!autoFocus || !ref.current) {
+      return;
+    }
+
+    ref.current.focus();
+  }, []);
+}