@vkontakte/vkui 7.0.0-dev-efd91c.4 → 7.0.0

package/src/components/SplitLayout/SplitLayout.tsx

@@ -12,17 +12,17 @@ export interface SplitLayoutProps
   /**
    * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.
    *
-   * @deprecated будет удалёно в **VKUI v8**
+   * @deprecated будет удалeно в **VKUI v8**.
    * Начиная с **VKUI v7** компоненты можно располагать в любом
-   * месте приложения в пределах `AppRoot`
+   * месте приложения в пределах `AppRoot`.
    */
   popout?: React.ReactNode;
   /**
    * Свойство для отрисовки `ModalRoot`.
    *
-   * @deprecated будет удалёно в **VKUI v8**
+   * @deprecated будет удалeно в **VKUI v8**.
    * Начиная с **VKUI v7**  `ModalRoot` можно располагать в любом
-   * месте приложения в пределах `AppRoot`
+   * месте приложения в пределах `AppRoot`.
    */
   modal?: React.ReactNode;
   header?: React.ReactNode;

package/src/components/View/View.module.css

@@ -167,9 +167,9 @@
 }
 
 /* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+.ios.noMotion .panel :global(.vkuiInternalPanel__in),
 .noMotion .panel,
-.ios.noMotion .panel,
-.ios.noMotion .panel :global(.vkuiInternalPanel__in) {
+.ios.noMotion .panel {
   animation: none;
 }
 

package/src/hooks/useSyncHTMLWithBaseVKUIClasses.ts

@@ -1,14 +1,18 @@
 import type * as React from 'react';
-import { type AppRootMode } from '../components/AppRoot/types';
+import type { AppRootLayout, AppRootMode } from '../components/AppRoot/types';
 import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
 
+const layoutClassNames = { card: 'vkui--layout-card', plain: 'vkui--layout-plain' };
+
 export function useSyncHTMLWithBaseVKUIClasses({
   appRootRef,
   mode,
   enable,
+  layout,
 }: {
   appRootRef: React.RefObject<HTMLElement>;
   mode: AppRootMode;
+  layout?: AppRootLayout;
   enable: boolean;
 }) {
   useIsomorphicLayoutEffect(() => {
@@ -19,6 +23,7 @@ export function useSyncHTMLWithBaseVKUIClasses({
     const htmlElement = appRootRef.current?.ownerDocument.documentElement;
     const parentElement = appRootRef.current?.parentElement ?? null;
 
+    const htmlElementClasses = ['vkui'];
     const parentElementClasses = ['vkui__root'];
 
     if (mode === 'embedded') {
@@ -26,19 +31,23 @@ export function useSyncHTMLWithBaseVKUIClasses({
     }
 
     if (mode === 'full') {
+      if (layout) {
+        htmlElementClasses.push(layoutClassNames[layout]);
+      }
       /* eslint-disable-next-line no-restricted-properties */
-      htmlElement?.classList.add('vkui');
+      htmlElement?.classList.add(...htmlElementClasses);
     }
+
     /* eslint-disable-next-line no-restricted-properties */
     parentElement?.classList.add(...parentElementClasses);
 
     return () => {
       if (mode === 'full') {
         /* eslint-disable-next-line no-restricted-properties */
-        htmlElement?.classList.remove('vkui');
+        htmlElement?.classList.remove(...htmlElementClasses);
       }
       /* eslint-disable-next-line no-restricted-properties */
       parentElement?.classList.remove(...parentElementClasses);
     };
-  }, [mode, enable]);
+  }, [mode, enable, layout]);
 }

package/src/index.ts

@@ -153,11 +153,11 @@ export { ModalRootContext } from './components/ModalRoot/ModalRootContext';
 export { useModalRootContext } from './components/ModalRoot/useModalRootContext';
 export { ModalPageContent } from './components/ModalPageContent/ModalPageContent';
 export { ModalPage } from './components/ModalPage/ModalPage';
-export type { ModalPageProps } from './components/ModalPage/types';
+export type { ModalPageProps, ModalPageCloseReason } from './components/ModalPage/types';
 export { ModalPageHeader } from './components/ModalPageHeader/ModalPageHeader';
 export type { ModalPageHeaderProps } from './components/ModalPageHeader/ModalPageHeader';
 export { ModalCard } from './components/ModalCard/ModalCard';
-export type { ModalCardProps } from './components/ModalCard/types';
+export type { ModalCardProps, ModalCardCloseReason } from './components/ModalCard/types';
 export { ModalDismissButton } from './components/ModalDismissButton/ModalDismissButton';
 export type { ModalDismissButtonProps } from './components/ModalDismissButton/ModalDismissButton';
 

package/src/lib/adaptivity/functions.ts

@@ -1,7 +1,6 @@
 import type { Exact } from '../../types';
-import { getWindow } from '../dom';
 import { type PlatformType } from '../platform';
-import { BREAKPOINTS, MEDIA_QUERIES } from './breakpoints';
+import { BREAKPOINTS } from './breakpoints';
 import {
   type SizeTypeValues,
   VIEW_WIDTH_TO_CSS_BREAKPOINT_MAP,
@@ -139,12 +138,6 @@ export function tryToCheckIsDesktop(
   return (widthIsLikeDesktop && otherParametersIsLikeDesktop) || IS_VKCOM_CRUTCH;
 }
 
-export function isSmallTablePlus(el: HTMLElement) {
-  const win = getWindow(el);
-  // eslint-disable-next-line no-restricted-properties
-  return win ? win.matchMedia(MEDIA_QUERIES.SMALL_TABLET_PLUS).matches : false;
-}
-
 /**
  * Конвертирует `viewWidth` в CSS брейкпоинты (см. тесты для наглядности).
  *

package/src/lib/animation/useReducedMotion.ts

@@ -6,17 +6,10 @@ import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
 
 export const REDUCE_MOTION_MEDIA_QUERY = 'screen and (prefers-reduced-motion: reduce)';
 
-export const useReducedMotion = (): boolean => {
+export const useReducedMotion = (): boolean | undefined => {
   const { window } = useDOM();
-  const initial = React.useMemo(
-    () =>
-      window
-        ? window.matchMedia(REDUCE_MOTION_MEDIA_QUERY).matches
-        : /* istanbul ignore next: на текущий момент, покрытие данного кейса неинтересно  */
-          false,
-    [window],
-  );
-  const reducedMotion = React.useRef(initial);
+
+  const [reducedMotion, setReducedMotion] = React.useState<boolean | undefined>(() => undefined);
 
   useIsomorphicLayoutEffect(() => {
     /* istanbul ignore if: невозможный кейс (в SSR вызова этой функции не будет) */
@@ -24,15 +17,15 @@ export const useReducedMotion = (): boolean => {
       return;
     }
     const match = window.matchMedia(REDUCE_MOTION_MEDIA_QUERY);
-    reducedMotion.current = match.matches;
+    setReducedMotion(match.matches);
     /* istanbul ignore next: на текущий момент, покрытие данного кейса неинтересно  */
     const handleMediaQueryChange = (event: MediaQueryListEvent) => {
       /* istanbul ignore next */
-      reducedMotion.current = event.matches;
+      setReducedMotion(event.matches);
     };
     matchMediaListAddListener(match, handleMediaQueryChange);
     return () => matchMediaListRemoveListener(match, handleMediaQueryChange);
   }, [window]);
 
-  return reducedMotion.current;
+  return reducedMotion;
 };

package/src/lib/sheet/controllers/BottomSheetController.ts

@@ -1,6 +1,5 @@
 import { noop } from '@vkontakte/vkjs';
 import { clamp } from '../../../helpers/math';
-import { inRange } from '../../../helpers/range';
 import { rubberbandIfOutOfBounds } from '../../animation';
 import { getNearestOverflowAncestor, hasSelectionWithRangeType } from '../../dom';
 import { UIPanGestureRecognizer } from '../../touch/UIPanGestureRecognizer';
@@ -9,66 +8,35 @@ import {
   DRAG_THRESHOLDS,
   DYNAMIC_SNAP_POINT_DATA,
   SNAP_POINT_DETENTS,
-  SNAP_POINT_SAFE_RANGE,
 } from '../constants';
 import type { CSSTransitionController } from './CSSTransitionController';
 
-export type InitialSnapPoint = 'auto' | number;
-
 export type SnapPointDetents = [number, number] | [number, number, number];
 
-export type BottomSheetControllerSnapPointData = {
-  unit: '%' | 'px';
-  currentSnapPoint: number;
-  snapPointDetents: SnapPointDetents;
-};
+export type SnapPoint = 'auto' | { initial: number; detents: SnapPointDetents };
+
+export type SnapPointChange = (snapPoint: number) => void;
 
 export type BottomSheetControllerOptions = {
   sheetScrollEl: HTMLElement | null;
   sheetTransitionController: CSSTransitionController<string>;
   backdropTransitionController: CSSTransitionController | null;
+  onSnapPointChange: SnapPointChange;
   onDismiss: VoidFunction;
 };
 
 export class BottomSheetController {
-  static parseInitialSnapPoint(
-    initialSnapPoint: InitialSnapPoint = SNAP_POINT_DETENTS.MEDIUM,
-  ): BottomSheetControllerSnapPointData {
-    if (initialSnapPoint === 'auto') {
-      return {
-        unit: 'px',
-        currentSnapPoint: DYNAMIC_SNAP_POINT_DATA.IDLE_POINT_VALUE,
-        snapPointDetents: [SNAP_POINT_DETENTS.MIN, DYNAMIC_SNAP_POINT_DATA.IDLE_POINT_VALUE],
-      };
-    }
-
-    const currentSnapPoint = Math.min(
-      Math.max(initialSnapPoint, SNAP_POINT_SAFE_RANGE.LOWER),
-      SNAP_POINT_DETENTS.LARGE,
-    );
-
-    return {
-      unit: '%',
-      currentSnapPoint,
-      snapPointDetents: inRange(
-        currentSnapPoint,
-        SNAP_POINT_SAFE_RANGE.LOWER,
-        SNAP_POINT_SAFE_RANGE.HIGHEST,
-      )
-        ? [SNAP_POINT_DETENTS.MIN, currentSnapPoint, SNAP_POINT_DETENTS.LARGE]
-        : [SNAP_POINT_DETENTS.MIN, currentSnapPoint],
-    };
-  }
-
   constructor(
     private readonly sheetEl: HTMLElement,
     {
       sheetScrollEl,
       sheetTransitionController,
       backdropTransitionController,
+      onSnapPointChange,
       onDismiss,
     }: BottomSheetControllerOptions,
   ) {
+    this.onSnapPointChange = onSnapPointChange;
     this.onDismiss = onDismiss;
     this.panGestureRecognizer = new UIPanGestureRecognizer();
     this.sheetScrollEl = sheetScrollEl;
@@ -76,15 +44,18 @@ export class BottomSheetController {
     this.backdropTransitionController = backdropTransitionController;
   }
 
-  init(initialSnapPoint?: InitialSnapPoint) {
+  init(snapPoint: SnapPoint) {
     this.isInitialized = true;
 
-    const { unit, currentSnapPoint, snapPointDetents } =
-      BottomSheetController.parseInitialSnapPoint(initialSnapPoint);
-
-    this.unit = unit;
-    this.currentSnapPoint = currentSnapPoint;
-    this.snapPointDetents = snapPointDetents;
+    if (snapPoint === 'auto') {
+      this.unit = 'px';
+      this.currentSnapPoint = DYNAMIC_SNAP_POINT_DATA.IDLE_POINT_VALUE;
+      this.snapPointDetents = [SNAP_POINT_DETENTS.MIN, DYNAMIC_SNAP_POINT_DATA.IDLE_POINT_VALUE];
+    } else {
+      this.unit = '%';
+      this.currentSnapPoint = snapPoint.initial;
+      this.snapPointDetents = snapPoint.detents;
+    }
   }
 
   destroy() {
@@ -152,10 +123,6 @@ export class BottomSheetController {
         }
         break;
       case 'moving':
-        if (event.cancelable) {
-          event.preventDefault();
-        }
-
         this.panGestureRecognizer.setEndCoords(event);
 
         const { y1, y2 } = this.panGestureRecognizer;
@@ -174,7 +141,16 @@ export class BottomSheetController {
   panEnd() {
     switch (this.panState) {
       case 'moving':
+        const prevCurrentSnapPoint = this.currentSnapPoint;
         this.currentSnapPoint = this.getSnapPointTo(this.nextSnapPoint);
+
+        if (
+          prevCurrentSnapPoint !== this.currentSnapPoint &&
+          this.currentSnapPoint > SNAP_POINT_DETENTS.MIN
+        ) {
+          this.onSnapPointChange(this.currentSnapPoint);
+        }
+
         this.calculateSnapPoint(this.currentSnapPoint);
         break;
     }
@@ -203,6 +179,7 @@ export class BottomSheetController {
   private readonly sheetTransitionController: CSSTransitionController<string>;
   private readonly backdropTransitionController: CSSTransitionController | null;
   private readonly panGestureRecognizer: UIPanGestureRecognizer;
+  private readonly onSnapPointChange: SnapPointChange;
   private readonly onDismiss: VoidFunction;
 
   private calculateSnapPoint(nextSnapPoint: number, immediately = false) {
@@ -307,7 +284,12 @@ export class BottomSheetController {
   }
 
   private preventImmediatelyIfVerticalScrollingOnPannedElIsScrolled() {
-    if (this.pannedEl === null || this.sheetScrollEl === this.pannedEl) {
+    if (
+      /* istanbul ignore next: покрываем TypeScript */
+      this.pannedEl === null ||
+      this.pannedEl === this.sheetEl ||
+      this.pannedEl === this.sheetScrollEl
+    ) {
       return false;
     }
 

package/src/lib/sheet/controllers/CSSTransitionController.ts

@@ -11,14 +11,7 @@ export class CSSTransitionController<V extends number | string = number> {
     return this;
   }
 
-  unset(from?: V) {
-    if (from !== undefined) {
-      this.el.addEventListener('transitionend', this.handleTransitionEnd, { once: true });
-      this.enableTransition();
-      this.el.style.setProperty(this.property, `${from}`);
-      return this;
-    }
-
+  unset() {
     return this.cleanup();
   }
 

package/src/lib/sheet/index.ts

@@ -1,6 +1,8 @@
 export {
   BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE_KEY,
   BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE,
+  SNAP_POINT_DETENTS,
+  SNAP_POINT_SAFE_RANGE,
 } from './constants';
 export {
   type UseBottomSheetOptions,
@@ -8,3 +10,4 @@ export {
   type UseBottomSheetResult,
   useBottomSheet,
 } from './useBottomSheet';
+export type { SnapPoint, SnapPointChange } from './controllers/BottomSheetController';

package/src/lib/sheet/useBottomSheet.ts

@@ -12,14 +12,19 @@ import {
 import { noop } from '@vkontakte/vkjs';
 import { useStableCallback } from '../../hooks/useStableCallback';
 import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
-import { BottomSheetController, type InitialSnapPoint } from './controllers/BottomSheetController';
+import {
+  BottomSheetController,
+  type SnapPoint,
+  type SnapPointChange,
+} from './controllers/BottomSheetController';
 import { CSSTransitionController } from './controllers/CSSTransitionController';
 
 export type UseBottomSheetOptions = {
   sheetCSSProperty: string;
   backdropCSSProperty: string;
-  initialSnapPoint?: InitialSnapPoint;
+  snapPoint: SnapPoint;
   blocked?: boolean;
+  onSnapPointChange?: SnapPointChange;
   onDismiss?: VoidFunction;
 };
 
@@ -49,7 +54,7 @@ export type UseBottomSheetResult = [
  *
  * ## Возможности
  *
- * - [x] есть возможность открывать до определенного размера (см. `initialSnapPoint`)
+ * - [x] есть возможность открывать до определенного размера (см. `snapPoint`)
  * - [x] есть возможность закрыть при сильном смахивании вниз
  * - [x] есть возможность отключить взаимодействие на определённых элементах используя data-атрибут
  * - [x] есть возможность отключить взаимодействие на определённых элементах используя stopPropagation()
@@ -57,7 +62,7 @@ export type UseBottomSheetResult = [
  * ## Анимации
  *
  * - [x] оверлей становится светлее в зависимости от процента сворачивания
- *    - [x] при `initialSnapPoint !== 'auto'` процент высчитывается относительно переданного `initialSnapPoint`
+ *    - [x] при `snapPoint !== 'auto'` процент высчитывается относительно переданного `snapPoint.initial`
  * - [x] при перетаскивании за пределы есть анимация натяжения
  *   > note: в `ModalPage` этого эффекта нет при высоте 100% из-за `max-block-size: 100%`
  *
@@ -74,9 +79,10 @@ export const useBottomSheet = (
   enabled: boolean,
   {
     blocked,
-    initialSnapPoint,
+    snapPoint,
     sheetCSSProperty,
     backdropCSSProperty,
+    onSnapPointChange: onSnapPointChangeProp,
     onDismiss: onDismissProp,
   }: UseBottomSheetOptions,
 ): UseBottomSheetResult => {
@@ -84,17 +90,13 @@ export const useBottomSheet = (
   const [sheetEl, setSheetEl] = useState<HTMLElement | null>(null);
   const [backdropEl, setBackdropEl] = useState<HTMLElement | null>(null);
 
-  const initialStyle = useMemo<CSSProperties | undefined>(() => {
-    if (!enabled) {
-      return;
-    }
-
-    const { unit, currentSnapPoint } =
-      BottomSheetController.parseInitialSnapPoint(initialSnapPoint);
-
-    return unit === '%' ? { [sheetCSSProperty]: `${currentSnapPoint}${unit}` } : undefined;
-  }, [enabled, initialSnapPoint, sheetCSSProperty]);
+  const initialStyle = useMemo<CSSProperties | undefined>(
+    () =>
+      enabled && snapPoint !== 'auto' ? { [sheetCSSProperty]: `${snapPoint.initial}%` } : undefined,
+    [enabled, snapPoint, sheetCSSProperty],
+  );
 
+  const onSnapPointChange = useStableCallback(onSnapPointChangeProp || noop);
   const onDismiss = useStableCallback(onDismissProp || noop);
   const bsController = useMemo<BottomSheetController | null>(() => {
     if (!enabled || sheetEl === null) {
@@ -107,6 +109,7 @@ export const useBottomSheet = (
       backdropTransitionController: backdropEl
         ? new CSSTransitionController(backdropEl, backdropCSSProperty)
         : null,
+      onSnapPointChange,
       onDismiss,
     });
   }, [
@@ -116,6 +119,7 @@ export const useBottomSheet = (
     sheetScrollEl,
     backdropEl,
     backdropCSSProperty,
+    onSnapPointChange,
     onDismiss,
   ]);
 
@@ -136,10 +140,10 @@ export const useBottomSheet = (
   useIsomorphicLayoutEffect(
     function init() {
       if (bsController) {
-        bsController.init(initialSnapPoint);
+        bsController.init(snapPoint);
       }
     },
-    [initialSnapPoint, bsController],
+    [snapPoint, bsController],
   );
 
   useIsomorphicLayoutEffect(

package/src/styles/common.css

@@ -1,6 +1,6 @@
 /*
- * .vkui класс в режиме full необходим на элементе html
- * чтобы правильно устанавливалось значение color-scheme
+ * .vkui класс в режиме full необходим на элементе html,
+ * чтобы правильно устанавливалось значение color-scheme,
  * окрашивающее фон html и скроллбар в цвета текущей цветовой
  * схемы.
  * Так как color-scheme зависит от vkui токена, то в
@@ -8,13 +8,13 @@
  * быть установлен на html.
  *
  * В SSR есть проблема - чтобы на сервере правильно установить
- * нужный класс для токенов надо знать предпочитаемую цветовую
+ * нужный класс, для токенов надо знать предпочитаемую цветовую
  * схему пользователя и передать её через свойство appearance.
  * Если ошибиться со схемой на сервере, то пользователь
  * может получить не ту схему, либо может увидеть как интерфейс моргает
  * из-за переключения со светлой темы на тёмную.
  * Чтобы окончательно избавиться от этой проблемы нужно
- * в vkui-tokens создавать темы в которые старазу же зашиты обе цветовые схемы.
+ * в vkui-tokens создавать темы, в которые сразу же зашиты обе цветовые схемы.
  * А переключение между темами задавалось бы через медиа выражения
  * с помощью prefers-color-scheme.
  * */
@@ -49,6 +49,14 @@
   background: var(--vkui--color_background);
 }
 
+.vkui--layout-card {
+  background: var(--vkui--color_background);
+}
+
+.vkui--layout-plain {
+  background: var(--vkui--color_background_content);
+}
+
 /* отключаем нативный pull-to-refresh при взаимодействии с компонентом
  * PullToRefresh или при открывании модалки */
 .vkui--disable-overscroll-behavior {

package/dist/components/AppRoot/AppRootStyleContainer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"AppRootStyleContainer.d.ts","sourceRoot":"","sources":["../../../src/components/AppRoot/AppRootStyleContainer.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAoBxF,wBAAgB,gBAAgB;;;EAuB/B;AAED,KAAK,0BAA0B,GAAG,kBAAkB,CAAC,cAAc,CAAC,CAAC;AAErE;;;;;;GAMG;AACH,wBAAgB,qBAAqB,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,0BAA0B,2CAUpF"}

package/dist/components/AppRoot/AppRootStyleContainer.js

@@ -1,57 +0,0 @@
-'use client';
-import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
-import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { classNames } from "@vkontakte/vkjs";
-import { useAdaptivity } from "../../hooks/useAdaptivity.js";
-import { useTokensClassName } from "../../lib/tokens/index.js";
-import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext.js";
-import { RootComponent } from "../RootComponent/RootComponent.js";
-import { AppRootContext } from "./AppRootContext.js";
-import { getSafeAreaInsetsAsCssVariables, getUserSelectModeClassName } from "./helpers.js";
-const sizeXClassNames = {
-    none: "vkuiAppRoot__sizeXNone",
-    regular: "vkuiAppRoot__sizeXRegular"
-};
-const sizeYClassNames = {
-    none: "vkuiAppRoot__sizeYNone",
-    compact: "vkuiAppRoot__sizeYCompact"
-};
-const layoutClassNames = {
-    card: "vkuiAppRoot__layoutCard",
-    plain: "vkuiAppRoot__layoutPlain"
-};
-export function useAppRootStyles() {
-    const { layout, safeAreaInsets, mode, userSelectMode } = React.useContext(AppRootContext);
-    const { hasPointer, sizeX = 'none', sizeY = 'none' } = useAdaptivity();
-    const { isWebView } = useConfigProvider();
-    const userSelectModeClassName = getUserSelectModeClassName({
-        userSelectMode,
-        isWebView,
-        hasPointer
-    });
-    const tokensClassName = useTokensClassName();
-    return {
-        style: safeAreaInsets ? getSafeAreaInsetsAsCssVariables(safeAreaInsets) : undefined,
-        className: classNames("vkuiAppRoot__host", mode === 'embedded' && "vkuiAppRoot__embedded", sizeX !== 'compact' && sizeXClassNames[sizeX], sizeY !== 'regular' && sizeYClassNames[sizeY], layout && layoutClassNames[layout], userSelectModeClassName, tokensClassName)
-    };
-}
-/**
- * Специальный контейнер для переиспользования стилей, токенов и safe-area-inset в:
- * - точке монтирования приложения – `AppRoot`;
- * - точке монтирования порталов для модальных окон – `PortalRoot`.
- *
- * @private
- */ export function AppRootStyleContainer(_param) {
-    var { style } = _param, props = _object_without_properties(_param, [
-        "style"
-    ]);
-    const { style: appRootStyle, className: appRootClassName } = useAppRootStyles();
-    return /*#__PURE__*/ _jsx(RootComponent, _object_spread({
-        baseClassName: appRootClassName,
-        style: appRootStyle ? _object_spread({}, appRootStyle, style) : style
-    }, props));
-}
-
-//# sourceMappingURL=AppRootStyleContainer.js.map

package/dist/components/AppRoot/AppRootStyleContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/AppRoot/AppRootStyleContainer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useTokensClassName } from '../../lib/tokens';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { AppRootContext } from './AppRootContext';\nimport { getSafeAreaInsetsAsCssVariables, getUserSelectModeClassName } from './helpers';\nimport styles from './AppRootStyleContainer.module.css';\n\nconst sizeXClassNames = {\n  none: styles.sizeXNone,\n  regular: styles.sizeXRegular,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nconst layoutClassNames = {\n  card: styles.layoutCard,\n  plain: styles.layoutPlain,\n};\n\nexport function useAppRootStyles() {\n  const { layout, safeAreaInsets, mode, userSelectMode } = React.useContext(AppRootContext);\n  const { hasPointer, sizeX = 'none', sizeY = 'none' } = useAdaptivity();\n  const { isWebView } = useConfigProvider();\n  const userSelectModeClassName = getUserSelectModeClassName({\n    userSelectMode,\n    isWebView,\n    hasPointer,\n  });\n  const tokensClassName = useTokensClassName();\n\n  return {\n    style: safeAreaInsets ? getSafeAreaInsetsAsCssVariables(safeAreaInsets) : undefined,\n    className: classNames(\n      styles.host,\n      mode === 'embedded' && styles.embedded,\n      sizeX !== 'compact' && sizeXClassNames[sizeX],\n      sizeY !== 'regular' && sizeYClassNames[sizeY],\n      layout && layoutClassNames[layout],\n      userSelectModeClassName,\n      tokensClassName,\n    ),\n  };\n}\n\ntype AppRootStyleContainerProps = RootComponentProps<HTMLDivElement>;\n\n/**\n * Специальный контейнер для переиспользования стилей, токенов и safe-area-inset в:\n * - точке монтирования приложения – `AppRoot`;\n * - точке монтирования порталов для модальных окон – `PortalRoot`.\n *\n * @private\n */\nexport function AppRootStyleContainer({ style, ...props }: AppRootStyleContainerProps) {\n  const { style: appRootStyle, className: appRootClassName } = useAppRootStyles();\n\n  return (\n    <RootComponent\n      baseClassName={appRootClassName}\n      style={appRootStyle ? { ...appRootStyle, ...style } : style}\n      {...props}\n    />\n  );\n}\n"],"names":["React","classNames","useAdaptivity","useTokensClassName","useConfigProvider","RootComponent","AppRootContext","getSafeAreaInsetsAsCssVariables","getUserSelectModeClassName","sizeXClassNames","none","regular","sizeYClassNames","compact","layoutClassNames","card","plain","useAppRootStyles","layout","safeAreaInsets","mode","userSelectMode","useContext","hasPointer","sizeX","sizeY","isWebView","userSelectModeClassName","tokensClassName","style","undefined","className","AppRootStyleContainer","props","appRootStyle","appRootClassName","baseClassName"],"mappings":"AAAA;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,kBAAkB,QAAQ,4BAAmB;AACtD,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,cAAc,QAAQ,sBAAmB;AAClD,SAASC,+BAA+B,EAAEC,0BAA0B,QAAQ,eAAY;AAGxF,MAAMC,kBAAkB;IACtBC,IAAI;IACJC,OAAO;AACT;AAEA,MAAMC,kBAAkB;IACtBF,IAAI;IACJG,OAAO;AACT;AAEA,MAAMC,mBAAmB;IACvBC,IAAI;IACJC,KAAK;AACP;AAEA,OAAO,SAASC;IACd,MAAM,EAAEC,MAAM,EAAEC,cAAc,EAAEC,IAAI,EAAEC,cAAc,EAAE,GAAGrB,MAAMsB,UAAU,CAAChB;IAC1E,MAAM,EAAEiB,UAAU,EAAEC,QAAQ,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAGvB;IACvD,MAAM,EAAEwB,SAAS,EAAE,GAAGtB;IACtB,MAAMuB,0BAA0BnB,2BAA2B;QACzDa;QACAK;QACAH;IACF;IACA,MAAMK,kBAAkBzB;IAExB,OAAO;QACL0B,OAAOV,iBAAiBZ,gCAAgCY,kBAAkBW;QAC1EC,WAAW9B,gCAETmB,SAAS,uCACTI,UAAU,aAAaf,eAAe,CAACe,MAAM,EAC7CC,UAAU,aAAab,eAAe,CAACa,MAAM,EAC7CP,UAAUJ,gBAAgB,CAACI,OAAO,EAClCS,yBACAC;IAEJ;AACF;AAIA;;;;;;CAMC,GACD,OAAO,SAASI,sBAAsB;QAAA,EAAEH,KAAK,EAAwC,GAA/C,QAAYI,mCAAZ;QAAEJ;;IACtC,MAAM,EAAEA,OAAOK,YAAY,EAAEH,WAAWI,gBAAgB,EAAE,GAAGlB;IAE7D,qBACE,KAACZ;QACC+B,eAAeD;QACfN,OAAOK,eAAe,mBAAKA,cAAiBL,SAAUA;OAClDI;AAGV"}

package/dist/cssm/components/AppRoot/AppRootStyleContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/AppRootStyleContainer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivity } from '../../hooks/useAdaptivity';\nimport { useTokensClassName } from '../../lib/tokens';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { RootComponent, type RootComponentProps } from '../RootComponent/RootComponent';\nimport { AppRootContext } from './AppRootContext';\nimport { getSafeAreaInsetsAsCssVariables, getUserSelectModeClassName } from './helpers';\nimport styles from './AppRootStyleContainer.module.css';\n\nconst sizeXClassNames = {\n  none: styles.sizeXNone,\n  regular: styles.sizeXRegular,\n};\n\nconst sizeYClassNames = {\n  none: styles.sizeYNone,\n  compact: styles.sizeYCompact,\n};\n\nconst layoutClassNames = {\n  card: styles.layoutCard,\n  plain: styles.layoutPlain,\n};\n\nexport function useAppRootStyles() {\n  const { layout, safeAreaInsets, mode, userSelectMode } = React.useContext(AppRootContext);\n  const { hasPointer, sizeX = 'none', sizeY = 'none' } = useAdaptivity();\n  const { isWebView } = useConfigProvider();\n  const userSelectModeClassName = getUserSelectModeClassName({\n    userSelectMode,\n    isWebView,\n    hasPointer,\n  });\n  const tokensClassName = useTokensClassName();\n\n  return {\n    style: safeAreaInsets ? getSafeAreaInsetsAsCssVariables(safeAreaInsets) : undefined,\n    className: classNames(\n      styles.host,\n      mode === 'embedded' && styles.embedded,\n      sizeX !== 'compact' && sizeXClassNames[sizeX],\n      sizeY !== 'regular' && sizeYClassNames[sizeY],\n      layout && layoutClassNames[layout],\n      userSelectModeClassName,\n      tokensClassName,\n    ),\n  };\n}\n\ntype AppRootStyleContainerProps = RootComponentProps<HTMLDivElement>;\n\n/**\n * Специальный контейнер для переиспользования стилей, токенов и safe-area-inset в:\n * - точке монтирования приложения – `AppRoot`;\n * - точке монтирования порталов для модальных окон – `PortalRoot`.\n *\n * @private\n */\nexport function AppRootStyleContainer({ style, ...props }: AppRootStyleContainerProps) {\n  const { style: appRootStyle, className: appRootClassName } = useAppRootStyles();\n\n  return (\n    <RootComponent\n      baseClassName={appRootClassName}\n      style={appRootStyle ? { ...appRootStyle, ...style } : style}\n      {...props}\n    />\n  );\n}\n"],"names":["React","classNames","useAdaptivity","useTokensClassName","useConfigProvider","RootComponent","AppRootContext","getSafeAreaInsetsAsCssVariables","getUserSelectModeClassName","styles","sizeXClassNames","none","sizeXNone","regular","sizeXRegular","sizeYClassNames","sizeYNone","compact","sizeYCompact","layoutClassNames","card","layoutCard","plain","layoutPlain","useAppRootStyles","layout","safeAreaInsets","mode","userSelectMode","useContext","hasPointer","sizeX","sizeY","isWebView","userSelectModeClassName","tokensClassName","style","undefined","className","host","embedded","AppRootStyleContainer","props","appRootStyle","appRootClassName","baseClassName"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,aAAa,QAAQ,+BAA4B;AAC1D,SAASC,kBAAkB,QAAQ,4BAAmB;AACtD,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,aAAa,QAAiC,oCAAiC;AACxF,SAASC,cAAc,QAAQ,sBAAmB;AAClD,SAASC,+BAA+B,EAAEC,0BAA0B,QAAQ,eAAY;AACxF,OAAOC,YAAY,qCAAqC;AAExD,MAAMC,kBAAkB;IACtBC,MAAMF,OAAOG,SAAS;IACtBC,SAASJ,OAAOK,YAAY;AAC9B;AAEA,MAAMC,kBAAkB;IACtBJ,MAAMF,OAAOO,SAAS;IACtBC,SAASR,OAAOS,YAAY;AAC9B;AAEA,MAAMC,mBAAmB;IACvBC,MAAMX,OAAOY,UAAU;IACvBC,OAAOb,OAAOc,WAAW;AAC3B;AAEA,OAAO,SAASC;IACd,MAAM,EAAEC,MAAM,EAAEC,cAAc,EAAEC,IAAI,EAAEC,cAAc,EAAE,GAAG5B,MAAM6B,UAAU,CAACvB;IAC1E,MAAM,EAAEwB,UAAU,EAAEC,QAAQ,MAAM,EAAEC,QAAQ,MAAM,EAAE,GAAG9B;IACvD,MAAM,EAAE+B,SAAS,EAAE,GAAG7B;IACtB,MAAM8B,0BAA0B1B,2BAA2B;QACzDoB;QACAK;QACAH;IACF;IACA,MAAMK,kBAAkBhC;IAExB,OAAO;QACLiC,OAAOV,iBAAiBnB,gCAAgCmB,kBAAkBW;QAC1EC,WAAWrC,WACTQ,OAAO8B,IAAI,EACXZ,SAAS,cAAclB,OAAO+B,QAAQ,EACtCT,UAAU,aAAarB,eAAe,CAACqB,MAAM,EAC7CC,UAAU,aAAajB,eAAe,CAACiB,MAAM,EAC7CP,UAAUN,gBAAgB,CAACM,OAAO,EAClCS,yBACAC;IAEJ;AACF;AAIA;;;;;;CAMC,GACD,OAAO,SAASM,sBAAsB,EAAEL,KAAK,EAAE,GAAGM,OAAmC;IACnF,MAAM,EAAEN,OAAOO,YAAY,EAAEL,WAAWM,gBAAgB,EAAE,GAAGpB;IAE7D,qBACE,KAACnB;QACCwC,eAAeD;QACfR,OAAOO,eAAe;YAAE,GAAGA,YAAY;YAAE,GAAGP,KAAK;QAAC,IAAIA;QACrD,GAAGM,KAAK;;AAGf"}