@vkontakte/vkui 7.0.0-dev-efd91c.0 → 7.0.0-dev-efd91c.2

package/src/lib/sheet/useBottomSheet.ts

@@ -0,0 +1,175 @@
+'use client';
+
+import {
+  type CSSProperties,
+  type Dispatch,
+  type SetStateAction,
+  type UIEvent,
+  type UIEventHandler,
+  useMemo,
+  useState,
+} from 'react';
+import { noop } from '@vkontakte/vkjs';
+import { useStableCallback } from '../../hooks/useStableCallback';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
+import { BottomSheetController, type InitialSnapPoint } from './controllers/BottomSheetController';
+import { CSSTransitionController } from './controllers/CSSTransitionController';
+
+export type UseBottomSheetOptions = {
+  sheetCSSProperty: string;
+  backdropCSSProperty: string;
+  initialSnapPoint?: InitialSnapPoint;
+  blocked?: boolean;
+  onDismiss?: VoidFunction;
+};
+
+export type UseBottomSheetHandlers = {
+  onTouchStart: UIEventHandler<HTMLElement>;
+  onTouchMove: UIEventHandler<HTMLElement>;
+  onTouchEnd: UIEventHandler<HTMLElement>;
+  onTouchCancel: UIEventHandler<HTMLElement>;
+  onMouseDown: UIEventHandler<HTMLElement>;
+  onMouseMove: UIEventHandler<HTMLElement>;
+  onMouseUp: UIEventHandler<HTMLElement>;
+  onMouseLeave: UIEventHandler<HTMLElement>;
+};
+
+export type UseBottomSheetResult = [
+  {
+    initialStyle?: CSSProperties;
+    setSheetEl: Dispatch<SetStateAction<HTMLElement | null>>;
+    setSheetScrollEl: Dispatch<SetStateAction<HTMLElement | null>>;
+    setBackdropEl: Dispatch<SetStateAction<HTMLElement | null>>;
+  },
+  UseBottomSheetHandlers | undefined,
+];
+
+/**
+ * # Checklist
+ *
+ * ## Возможности
+ *
+ * - [x] есть возможность открывать до определенного размера (см. `initialSnapPoint`)
+ * - [x] есть возможность закрыть при сильном смахивании вниз
+ * - [x] есть возможность отключить взаимодействие на определённых элементах используя data-атрибут
+ * - [x] есть возможность отключить взаимодействие на определённых элементах используя stopPropagation()
+ *
+ * ## Анимации
+ *
+ * - [x] оверлей становится светлее в зависимости от процента сворачивания
+ *    - [x] при `initialSnapPoint !== 'auto'` процент высчитывается относительно переданного `initialSnapPoint`
+ * - [x] при перетаскивании за пределы есть анимация натяжения
+ *   > note: в `ModalPage` этого эффекта нет при высоте 100% из-за `max-block-size: 100%`
+ *
+ * ## Пограничные кейсы
+ *
+ * - [x] ⚠️ не блокирует взаимодействие с _горизонтальным_ скроллом
+ * - [x] ⚠️ не блокирует взаимодействие с _вертикальным_ скроллом
+ * - [x] ⚠️ не блокирует взаимодействие с полями ввода
+ * - [x] ⚠️ не блокирует взаимодействие с элементами вне корневого элемента
+ *
+ * @private
+ */
+export const useBottomSheet = (
+  enabled: boolean,
+  {
+    blocked,
+    initialSnapPoint,
+    sheetCSSProperty,
+    backdropCSSProperty,
+    onDismiss: onDismissProp,
+  }: UseBottomSheetOptions,
+): UseBottomSheetResult => {
+  const [sheetScrollEl, setSheetScrollEl] = useState<HTMLElement | null>(null);
+  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 onDismiss = useStableCallback(onDismissProp || noop);
+  const bsController = useMemo<BottomSheetController | null>(() => {
+    if (!enabled || sheetEl === null) {
+      return null;
+    }
+
+    return new BottomSheetController(sheetEl, {
+      sheetScrollEl: sheetScrollEl || null,
+      sheetTransitionController: new CSSTransitionController<string>(sheetEl, sheetCSSProperty),
+      backdropTransitionController: backdropEl
+        ? new CSSTransitionController(backdropEl, backdropCSSProperty)
+        : null,
+      onDismiss,
+    });
+  }, [
+    enabled,
+    sheetEl,
+    sheetCSSProperty,
+    sheetScrollEl,
+    backdropEl,
+    backdropCSSProperty,
+    onDismiss,
+  ]);
+
+  const onPanStart = function onPanStart(event: UIEvent<HTMLElement>) {
+    if (!blocked) {
+      bsController!.panStart(event.nativeEvent);
+    }
+  };
+
+  const onPanMove = function onPanMove(event: UIEvent<HTMLElement>) {
+    bsController!.panMove(event.nativeEvent);
+  };
+
+  const onPanEnd = function onPanEnd() {
+    bsController!.panEnd();
+  };
+
+  useIsomorphicLayoutEffect(
+    function init() {
+      if (bsController) {
+        bsController.init(initialSnapPoint);
+      }
+    },
+    [initialSnapPoint, bsController],
+  );
+
+  useIsomorphicLayoutEffect(
+    () =>
+      function unmount() {
+        if (bsController) {
+          bsController.destroy();
+        }
+      },
+    [bsController],
+  );
+
+  return [
+    {
+      initialStyle,
+      setSheetEl,
+      setSheetScrollEl,
+      setBackdropEl,
+    },
+    bsController !== null
+      ? {
+          onTouchStart: onPanStart,
+          onTouchMove: onPanMove,
+          onTouchEnd: onPanEnd,
+          onTouchCancel: onPanEnd,
+          onMouseDown: onPanStart,
+          onMouseMove: onPanMove,
+          onMouseUp: onPanEnd,
+          onMouseLeave: onPanEnd,
+        }
+      : undefined,
+  ];
+};

package/src/lib/spacings/sizes.ts

@@ -1,4 +1,4 @@
-import type { LiteralUnion } from '../../types';
+import type { CSSCustomProperties, LiteralUnion } from '../../types';
 import styles from '../../styles/spacings.module.css';
 
 export type SpacingSize = '2xs' | 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl';
@@ -15,4 +15,19 @@ export const spacingSizeClassNames: Record<SpacingSize, string> = {
   '4xl': styles['-spacing--4xl'],
 };
 
-export type SpacingSizeProp = LiteralUnion<SpacingSize, number>;
+export type SpacingSizeProp = LiteralUnion<SpacingSize | `--${string}`, number>;
+
+export function resolveSpacingSize(
+  cssVariable: string,
+  size?: SpacingSizeProp,
+): [string | undefined, CSSCustomProperties | undefined] {
+  if (typeof size === 'string') {
+    if (size.startsWith('--')) {
+      return [undefined, { [cssVariable]: `var(${size})` }];
+    } else {
+      return [spacingSizeClassNames[size as SpacingSize], undefined];
+    }
+  }
+
+  return [undefined, typeof size === 'number' ? { [cssVariable]: `${size}px` } : undefined];
+}

package/src/lib/touch/UIPanGestureRecognizer.ts

@@ -1,6 +1,8 @@
 import { getFirstTouchEventData } from '../dom';
 
-export type VCoords = { x: number; y: number };
+export type Direction = { axis: 'x' | 'y'; direction: -1 | 1 | null };
+
+export type Coords = { x: number; y: number };
 
 const DEFAULT_INITIAL_TIME = 0;
 const MILLISECONDS = 1000;
@@ -35,10 +37,7 @@ export class UIPanGestureRecognizer {
     this.y2 = clientY;
   }
 
-  delta(): {
-    x: number;
-    y: number;
-  } {
+  delta(): Coords {
     return {
       x: this.x2 - this.x1,
       y: this.y2 - this.y1,
@@ -50,10 +49,7 @@ export class UIPanGestureRecognizer {
     return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
   }
 
-  velocity(): {
-    x: number;
-    y: number;
-  } {
+  velocity(): Coords {
     const deltaTime = (Date.now() - this.initialTime) / MILLISECONDS;
 
     if (deltaTime <= 0) {
@@ -72,6 +68,13 @@ export class UIPanGestureRecognizer {
     return degrees < 0 ? 360 + degrees : degrees;
   }
 
+  direction(): Direction {
+    const { x, y } = this.delta();
+    return Math.abs(x) > Math.abs(y)
+      ? { axis: 'x', direction: x > 0 ? 1 : x < 0 ? -1 : null }
+      : { axis: 'y', direction: y > 0 ? 1 : y < 0 ? -1 : null };
+  }
+
   reset(): void {
     this.initialTime = DEFAULT_INITIAL_TIME;
     this.x1 = this.y1 = 0;

package/src/lib/touch/index.ts

@@ -1,5 +1,8 @@
 export type * from './functions';
 export { getSupportedEvents, coordX, coordY, touchEnabled, rubber } from './functions';
 
-export type { VCoords } from './UIPanGestureRecognizer';
+export type {
+  Direction as UIPanGestureRecognizerDirection,
+  Coords as UIPanGestureRecognizerCoords,
+} from './UIPanGestureRecognizer';
 export { UIPanGestureRecognizer } from './UIPanGestureRecognizer';

package/src/styles/common.css

@@ -1,3 +1,23 @@
+/*
+ * .vkui класс в режиме full необходим на элементе html
+ * чтобы правильно устанавливалось значение color-scheme
+ * окрашивающее фон html и скроллбар в цвета текущей цветовой
+ * схемы.
+ * Так как color-scheme зависит от vkui токена, то в
+ * full режиме класс токенов vkui также должен
+ * быть установлен на html.
+ *
+ * В SSR есть проблема - чтобы на сервере правильно установить
+ * нужный класс для токенов надо знать предпочитаемую цветовую
+ * схему пользователя и передать её через свойство appearance.
+ * Если ошибиться со схемой на сервере, то пользователь
+ * может получить не ту схему, либо может увидеть как интерфейс моргает
+ * из-за переключения со светлой темы на тёмную.
+ * Чтобы окончательно избавиться от этой проблемы нужно
+ * в vkui-tokens создавать темы в которые старазу же зашиты обе цветовые схемы.
+ * А переключение между темами задавалось бы через медиа выражения
+ * с помощью prefers-color-scheme.
+ * */
 /* stylelint-disable-next-line selector-max-type */
 .vkui > body,
 .vkui,
@@ -5,53 +25,23 @@
   margin: 0;
   padding: 0;
   block-size: 100%;
-}
-
-.vkui__root--embedded {
-  overflow-x: hidden;
-}
-
-.vkui,
-.vkui__root--embedded {
   color-scheme: var(--vkui--colors_scheme);
-}
-
-/* stylelint-disable-next-line selector-max-type */
-.vkui > body,
-.vkui__root--embedded {
-  -webkit-tap-highlight-color: transparent;
-  -webkit-text-size-adjust: 100%;
-  font-family: var(--vkui--font_family_base);
-  color: var(--vkui--color_text_primary);
-}
-
-.vkui--sizeX-regular {
-  background: var(--vkui--color_background);
-}
-
-@media (--sizeX-regular) {
-  .vkui--sizeX-none {
-    background: var(--vkui--color_background);
-  }
-}
-
-.vkui--layout-card {
+  /*
+   * TODO [>=8]: Убрать background с html элемента, но для этого надо
+   * чтобы height у всех родителей Panel вплоть до html имели
+   * min-height: 100% вместо height: 100% иначе фон html выглядывает в
+   * многоколоночном режиме если чуть ниже проскролить контент.
+   */
   background: var(--vkui--color_background);
 }
 
-.vkui--layout-plain {
-  background: var(--vkui--color_background_content);
-}
-
-.vkui--sizeY-compact {
-  --vkui_internal--panel_header_height: var(--vkui--size_panel_header_height--compact);
+.vkui__root {
+  /* чтобы можно было ограничить размеры приложения
+   * извне с помощью max-height, max-width */
+  max-inline-size: inherit;
+  max-block-size: inherit;
 }
 
-@media (--sizeY-compact) {
-  .vkui--sizeY-none {
-    --vkui_internal--panel_header_height: var(--vkui--size_panel_header_height--compact);
-  }
-}
 /* отключаем нативный pull-to-refresh при взаимодействии с компонентом
  * PullToRefresh или при открывании модалки */
 .vkui--disable-overscroll-behavior {

package/src/styles/constants.css

@@ -43,6 +43,8 @@
 
   /* animations */
   --vkui_internal--duration: 0.7s;
+  --vkui_internal--slide-easing: cubic-bezier(0.16, 1, 0.3, 1);
+  --vkui_internal--spring-easing: cubic-bezier(0.22, 1, 0.6, 1.03);
 
   /* z_index */
   --vkui_internal--z_index_cell_dragging: 100;
@@ -85,6 +87,9 @@
 
   /* Spacing size */
   --vkui_internal--spacing_size: 0px;
+
+  /** ModalOverlay props */
+  --vkui_internal--modal-overlay--opacity: 1;
 }
 
 @supports (padding-top: constant(safe-area-inset-top)) {

package/dist/components/ModalPage/ModalPageContext.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-export interface ModalPageContextInterface {
-    labelId?: string;
-}
-export declare const ModalPageContext: React.Context<ModalPageContextInterface>;
-//# sourceMappingURL=ModalPageContext.d.ts.map

package/dist/components/ModalPage/ModalPageContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ModalPageContext.d.ts","sourceRoot":"","sources":["../../../src/components/ModalPage/ModalPageContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,yBAAyB;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,OAAO,CAAC,yBAAyB,CAClB,CAAC"}

package/dist/components/ModalPage/ModalPageContext.js

@@ -1,4 +0,0 @@
-import * as React from "react";
-export const ModalPageContext = /*#__PURE__*/ React.createContext({});
-
-//# sourceMappingURL=ModalPageContext.js.map

package/dist/components/ModalPage/ModalPageContext.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/ModalPage/ModalPageContext.tsx"],"sourcesContent":["import * as React from 'react';\n\nexport interface ModalPageContextInterface {\n  labelId?: string;\n}\n\nexport const ModalPageContext: React.Context<ModalPageContextInterface> =\n  React.createContext<ModalPageContextInterface>({});\n"],"names":["React","ModalPageContext","createContext"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAM/B,OAAO,MAAMC,iCACXD,MAAME,aAAa,CAA4B,CAAC,GAAG"}

package/dist/components/ModalRoot/ModalRootAdaptive.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import type { ModalRootProps } from './types';
-/**
- * @see https://vkcom.github.io/VKUI/#/ModalRoot
- */
-export declare const ModalRoot: (props: ModalRootProps) => React.ReactNode;
-//# sourceMappingURL=ModalRootAdaptive.d.ts.map

package/dist/components/ModalRoot/ModalRootAdaptive.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ModalRootAdaptive.d.ts","sourceRoot":"","sources":["../../../src/components/ModalRoot/ModalRootAdaptive.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE9C;;GAEG;AACH,eAAO,MAAM,SAAS,UAAW,cAAc,KAAG,KAAK,CAAC,SAQvD,CAAC"}

package/dist/components/ModalRoot/ModalRootAdaptive.js

@@ -1,18 +0,0 @@
-'use client';
-import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries.js";
-import { useScrollLock } from "../AppRoot/ScrollContext.js";
-import { ModalRootTouch } from "./ModalRoot.js";
-import { ModalRootDesktop } from "./ModalRootDesktop.js";
-/**
- * @see https://vkcom.github.io/VKUI/#/ModalRoot
- */ export const ModalRoot = (props)=>{
-    const { isDesktop } = useAdaptivityWithJSMediaQueries();
-    useScrollLock(!!props.activeModal);
-    const RootComponent = isDesktop ? ModalRootDesktop : ModalRootTouch;
-    return /*#__PURE__*/ _jsx(RootComponent, _object_spread({}, props));
-};
-
-//# sourceMappingURL=ModalRootAdaptive.js.map

package/dist/components/ModalRoot/ModalRootAdaptive.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/ModalRoot/ModalRootAdaptive.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { ModalRootTouch } from './ModalRoot';\nimport { ModalRootDesktop } from './ModalRootDesktop';\nimport type { ModalRootProps } from './types';\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalRoot\n */\nexport const ModalRoot = (props: ModalRootProps): React.ReactNode => {\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  useScrollLock(!!props.activeModal);\n\n  const RootComponent = isDesktop ? ModalRootDesktop : ModalRootTouch;\n\n  return <RootComponent {...props} />;\n};\n"],"names":["React","useAdaptivityWithJSMediaQueries","useScrollLock","ModalRootTouch","ModalRootDesktop","ModalRoot","props","isDesktop","activeModal","RootComponent"],"mappings":"AAAA;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,+BAA+B,QAAQ,iDAA8C;AAC9F,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,cAAc,QAAQ,iBAAc;AAC7C,SAASC,gBAAgB,QAAQ,wBAAqB;AAGtD;;CAEC,GACD,OAAO,MAAMC,YAAY,CAACC;IACxB,MAAM,EAAEC,SAAS,EAAE,GAAGN;IAEtBC,cAAc,CAAC,CAACI,MAAME,WAAW;IAEjC,MAAMC,gBAAgBF,YAAYH,mBAAmBD;IAErD,qBAAO,KAACM,kCAAkBH;AAC5B,EAAE"}

package/dist/components/ModalRoot/ModalRootDesktop.d.ts

@@ -1,4 +0,0 @@
-import * as React from 'react';
-import type { ModalRootWithDOMProps } from './types';
-export declare const ModalRootDesktop: ({ activeModal: activeModalProp, children, noFocusToDialog, onOpen, onOpened, onClose, onClosed, modalOverlayTestId, }: ModalRootWithDOMProps) => React.ReactNode;
-//# sourceMappingURL=ModalRootDesktop.d.ts.map

package/dist/components/ModalRoot/ModalRootDesktop.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ModalRootDesktop.d.ts","sourceRoot":"","sources":["../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,OAAO,KAAK,EAAE,qBAAqB,EAAoB,MAAM,SAAS,CAAC;AAMvE,eAAO,MAAM,gBAAgB,0HAS1B,qBAAqB,KAAG,KAAK,CAAC,SAqNhC,CAAC"}

package/dist/components/ModalRoot/ModalRootDesktop.js

@@ -1,186 +0,0 @@
-'use client';
-import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import * as React from "react";
-import { classNames, noop } from "@vkontakte/vkjs";
-import { clamp } from "../../helpers/math.js";
-import { useObjectMemo } from "../../hooks/useObjectMemo.js";
-import { usePrevious } from "../../hooks/usePrevious.js";
-import { useWaitTransitionFinish } from "../../hooks/useWaitTransitionFinish.js";
-import { useDOM } from "../../lib/dom.js";
-import { getNavId } from "../../lib/getNavId.js";
-import { warnOnce } from "../../lib/warnOnce.js";
-import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext.js";
-import { FocusTrap } from "../FocusTrap/FocusTrap.js";
-import { ModalRootContext } from "./ModalRootContext.js";
-import { useModalManager } from "./useModalManager.js";
-const warn = warnOnce('ModalRoot');
-export const ModalRootDesktop = ({ activeModal: activeModalProp, children, noFocusToDialog = false, onOpen, onOpened, onClose, onClosed, modalOverlayTestId })=>{
-    const maskElementRef = React.useRef(null);
-    const maskAnimationFrame = React.useRef(undefined);
-    const restoreFocusTo = React.useRef(undefined);
-    const { document } = useDOM();
-    const { hasCustomPanelHeaderAfter, platform } = useConfigProvider();
-    const { activeModal, exitingModal, onExit, getModalState, enteringModal, onEnter, onEntered: onEnteredProp, onExited, history, delayEnter } = useModalManager(activeModalProp, children, onOpen, onOpened, onClose, onClosed, noop);
-    const waitTransitionFinish = useWaitTransitionFinish();
-    const prevProps = usePrevious({
-        exitingModal,
-        enteringModal,
-        activeModal
-    });
-    const modalRootContext = useObjectMemo({
-        updateModalHeight: ()=>undefined,
-        registerModal: (_param)=>{
-            var { id } = _param, data = _object_without_properties(_param, [
-                "id"
-            ]);
-            var _getModalState;
-            return Object.assign((_getModalState = getModalState(id)) !== null && _getModalState !== void 0 ? _getModalState : {}, data);
-        },
-        onClose: onExit,
-        isInsideModal: true
-    });
-    const timeout = platform === 'ios' ? 400 : 320;
-    const modals = React.Children.toArray(children);
-    /* Анимирует сдвиг модального окна */ const animateModalOpacity = (modalState, display)=>{
-        if (modalState === null || modalState === void 0 ? void 0 : modalState.innerElement) {
-            modalState.innerElement.style.transition = '';
-            modalState.innerElement.style.transitionDelay = display && delayEnter ? `${timeout}ms` : '';
-            modalState.innerElement.style.opacity = display ? '1' : '0';
-        }
-    };
-    /* Устанавливает прозрачность для полупрозрачной подложки */ const setMaskOpacity = (modalState, forceOpacity = null)=>{
-        if (forceOpacity === null && (history === null || history === void 0 ? void 0 : history[0]) !== modalState.id) {
-            return;
-        }
-        if (maskAnimationFrame.current) {
-            cancelAnimationFrame(maskAnimationFrame.current);
-        }
-        maskAnimationFrame.current = requestAnimationFrame(()=>{
-            if (maskElementRef.current) {
-                const { translateY = 0, translateYCurrent = 0 } = modalState;
-                const opacity = forceOpacity === null ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0 : forceOpacity;
-                maskElementRef.current.style.opacity = clamp(opacity, 0, 100).toString();
-            }
-        });
-    };
-    const onEntered = ({ id, modalElement })=>{
-        if (!noFocusToDialog && modalElement && !modalElement.contains(document.activeElement)) {
-            modalElement.focus();
-        }
-        onEnteredProp(id);
-    };
-    const openModal = ()=>{
-        if (!enteringModal || !prevProps) {
-            return;
-        }
-        const enteringState = getModalState(enteringModal);
-        onEnter();
-        // Анимация открытия модального окна
-        if (!prevProps.exitingModal) {
-            requestAnimationFrame(()=>{
-                if (enteringModal === enteringModal && enteringState) {
-                    waitTransitionFinish(enteringState.innerElement, ()=>onEntered(enteringState), timeout);
-                    animateModalOpacity(enteringState, true);
-                    setMaskOpacity(enteringState, 1);
-                }
-            });
-            return;
-        }
-        // Переход между модальными окнами без анимации
-        requestAnimationFrame(()=>{
-            if (enteringState === null || enteringState === void 0 ? void 0 : enteringState.innerElement) {
-                enteringState.innerElement.style.transition = 'none';
-                enteringState.innerElement.style.opacity = '1';
-                setMaskOpacity(enteringState, 1);
-            }
-        });
-        if (enteringState) {
-            onEntered(enteringState);
-        }
-    };
-    const closeModal = (id)=>{
-        const prevModalState = getModalState(id);
-        if (!prevModalState) {
-            return;
-        }
-        // Анимация закрытия модального окна
-        if (!activeModal) {
-            requestAnimationFrame(()=>{
-                waitTransitionFinish(prevModalState === null || prevModalState === void 0 ? void 0 : prevModalState.innerElement, (event)=>{
-                    // Исключаем дочерние элементы
-                    if (event && event.target === (prevModalState === null || prevModalState === void 0 ? void 0 : prevModalState.innerElement)) {
-                        onExited(id);
-                    } else if (!event) {
-                        // Вызвался по тайм-ауту
-                        onExited(id);
-                    }
-                }, timeout);
-                animateModalOpacity(prevModalState, false);
-                setMaskOpacity(prevModalState, 0);
-            });
-            return;
-        }
-        // Переход между модальными окнами без анимации
-        onExited(id);
-    };
-    React.useEffect(()=>{
-        if (!prevProps) {
-            return;
-        }
-        // transition phase 2: animate exiting modal
-        if (exitingModal && exitingModal !== prevProps.exitingModal) {
-            closeModal(exitingModal);
-        }
-        // transition phase 3: animate entering modal
-        if (enteringModal && enteringModal !== prevProps.enteringModal) {
-            openModal();
-        }
-        // focus restoration
-        if (activeModal && !prevProps.activeModal) {
-            var _document_activeElement;
-            restoreFocusTo.current = (_document_activeElement = document === null || document === void 0 ? void 0 : document.activeElement) !== null && _document_activeElement !== void 0 ? _document_activeElement : undefined;
-        }
-        if (!activeModal && !exitingModal && restoreFocusTo.current) {
-            restoreFocusTo.current.focus();
-            restoreFocusTo.current = undefined;
-        }
-    });
-    if (!activeModal && !exitingModal) {
-        return null;
-    }
-    return /*#__PURE__*/ _jsx(ModalRootContext.Provider, {
-        value: modalRootContext,
-        children: /*#__PURE__*/ _jsxs("div", {
-            className: classNames("vkuiModalRoot__host", hasCustomPanelHeaderAfter && "vkuiModalRoot__hasCustomPanelHeaderAfterSlot", "vkuiModalRoot__desktop"),
-            children: [
-                /*#__PURE__*/ _jsx("div", {
-                    "data-testid": modalOverlayTestId,
-                    className: "vkuiModalRoot__mask",
-                    ref: maskElementRef,
-                    onClick: onExit
-                }),
-                /*#__PURE__*/ _jsx("div", {
-                    className: "vkuiModalRoot__viewport",
-                    children: modals.map((Modal)=>{
-                        const modalId = getNavId(Modal.props, warn);
-                        if (modalId !== activeModal && modalId !== exitingModal) {
-                            return null;
-                        }
-                        const key = `modal-${modalId}`;
-                        return /*#__PURE__*/ _jsx(FocusTrap, {
-                            autoFocus: false,
-                            restoreFocus: false,
-                            onClose: onExit,
-                            timeout: timeout,
-                            className: "vkuiModalRoot__modal",
-                            children: Modal
-                        }, key);
-                    })
-                })
-            ]
-        })
-    });
-};
-
-//# sourceMappingURL=ModalRootDesktop.js.map

package/dist/components/ModalRoot/ModalRootDesktop.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/ModalRoot/ModalRootDesktop.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { clamp } from '../../helpers/math';\nimport { useObjectMemo } from '../../hooks/useObjectMemo';\nimport { usePrevious } from '../../hooks/usePrevious';\nimport { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';\nimport { useDOM } from '../../lib/dom';\nimport { getNavId } from '../../lib/getNavId';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalRootContext, type ModalRootContextInterface } from './ModalRootContext';\nimport type { ModalRootWithDOMProps, ModalsStateEntry } from './types';\nimport { useModalManager } from './useModalManager';\nimport styles from './ModalRoot.module.css';\n\nconst warn = warnOnce('ModalRoot');\n\nexport const ModalRootDesktop = ({\n  activeModal: activeModalProp,\n  children,\n  noFocusToDialog = false,\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n  modalOverlayTestId,\n}: ModalRootWithDOMProps): React.ReactNode => {\n  const maskElementRef = React.useRef<HTMLDivElement>(null);\n  const maskAnimationFrame = React.useRef<number | undefined>(undefined);\n  const restoreFocusTo = React.useRef<HTMLElement | undefined>(undefined);\n\n  const { document } = useDOM();\n  const { hasCustomPanelHeaderAfter, platform } = useConfigProvider();\n  const {\n    activeModal,\n    exitingModal,\n    onExit,\n    getModalState,\n    enteringModal,\n    onEnter,\n    onEntered: onEnteredProp,\n    onExited,\n    history,\n    delayEnter,\n  } = useModalManager(activeModalProp, children, onOpen, onOpened, onClose, onClosed, noop);\n\n  const waitTransitionFinish = useWaitTransitionFinish();\n  const prevProps = usePrevious({\n    exitingModal,\n    enteringModal,\n    activeModal,\n  });\n  const modalRootContext: ModalRootContextInterface = useObjectMemo({\n    updateModalHeight: () => undefined,\n    registerModal: ({ id, ...data }) => Object.assign(getModalState(id) ?? {}, data),\n    onClose: onExit,\n    isInsideModal: true,\n  });\n\n  const timeout = platform === 'ios' ? 400 : 320;\n  const modals = React.Children.toArray(children) as React.ReactElement[];\n\n  /* Анимирует сдвиг модального окна */\n  const animateModalOpacity = (modalState: ModalsStateEntry | undefined, display: boolean) => {\n    if (modalState?.innerElement) {\n      modalState.innerElement.style.transition = '';\n      modalState.innerElement.style.transitionDelay = display && delayEnter ? `${timeout}ms` : '';\n      modalState.innerElement.style.opacity = display ? '1' : '0';\n    }\n  };\n\n  /* Устанавливает прозрачность для полупрозрачной подложки */\n  const setMaskOpacity = (modalState: ModalsStateEntry, forceOpacity: number | null = null) => {\n    if (forceOpacity === null && history?.[0] !== modalState.id) {\n      return;\n    }\n\n    if (maskAnimationFrame.current) {\n      cancelAnimationFrame(maskAnimationFrame.current);\n    }\n    maskAnimationFrame.current = requestAnimationFrame(() => {\n      if (maskElementRef.current) {\n        const { translateY = 0, translateYCurrent = 0 } = modalState;\n\n        const opacity =\n          forceOpacity === null\n            ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0\n            : forceOpacity;\n        maskElementRef.current.style.opacity = clamp(opacity, 0, 100).toString();\n      }\n    });\n  };\n\n  const onEntered = ({ id, modalElement }: ModalsStateEntry) => {\n    if (!noFocusToDialog && modalElement && !modalElement.contains(document!.activeElement)) {\n      modalElement.focus();\n    }\n\n    onEnteredProp(id);\n  };\n\n  const openModal = () => {\n    if (!enteringModal || !prevProps) {\n      return;\n    }\n\n    const enteringState = getModalState(enteringModal);\n    onEnter();\n\n    // Анимация открытия модального окна\n    if (!prevProps.exitingModal) {\n      requestAnimationFrame(() => {\n        if (enteringModal === enteringModal && enteringState) {\n          waitTransitionFinish(enteringState.innerElement, () => onEntered(enteringState), timeout);\n          animateModalOpacity(enteringState, true);\n          setMaskOpacity(enteringState, 1);\n        }\n      });\n\n      return;\n    }\n\n    // Переход между модальными окнами без анимации\n    requestAnimationFrame(() => {\n      if (enteringState?.innerElement) {\n        enteringState.innerElement.style.transition = 'none';\n        enteringState.innerElement.style.opacity = '1';\n        setMaskOpacity(enteringState, 1);\n      }\n    });\n\n    if (enteringState) {\n      onEntered(enteringState);\n    }\n  };\n\n  const closeModal = (id: string) => {\n    const prevModalState = getModalState(id);\n    if (!prevModalState) {\n      return;\n    }\n\n    // Анимация закрытия модального окна\n    if (!activeModal) {\n      requestAnimationFrame(() => {\n        waitTransitionFinish(\n          prevModalState?.innerElement,\n          (event) => {\n            // Исключаем дочерние элементы\n            if (event && event.target === prevModalState?.innerElement) {\n              onExited(id);\n            } else if (!event) {\n              // Вызвался по тайм-ауту\n              onExited(id);\n            }\n          },\n          timeout,\n        );\n        animateModalOpacity(prevModalState, false);\n        setMaskOpacity(prevModalState, 0);\n      });\n\n      return;\n    }\n\n    // Переход между модальными окнами без анимации\n    onExited(id);\n  };\n\n  React.useEffect(() => {\n    if (!prevProps) {\n      return;\n    }\n\n    // transition phase 2: animate exiting modal\n    if (exitingModal && exitingModal !== prevProps.exitingModal) {\n      closeModal(exitingModal);\n    }\n\n    // transition phase 3: animate entering modal\n    if (enteringModal && enteringModal !== prevProps.enteringModal) {\n      openModal();\n    }\n\n    // focus restoration\n    if (activeModal && !prevProps.activeModal) {\n      restoreFocusTo.current = (document?.activeElement ?? undefined) as HTMLElement | undefined;\n    }\n    if (!activeModal && !exitingModal && restoreFocusTo.current) {\n      restoreFocusTo.current.focus();\n      restoreFocusTo.current = undefined;\n    }\n  });\n\n  if (!activeModal && !exitingModal) {\n    return null;\n  }\n\n  return (\n    <ModalRootContext.Provider value={modalRootContext}>\n      <div\n        className={classNames(\n          styles.host,\n          hasCustomPanelHeaderAfter && styles.hasCustomPanelHeaderAfterSlot,\n          styles.desktop,\n        )}\n      >\n        <div\n          data-testid={modalOverlayTestId}\n          className={styles.mask}\n          ref={maskElementRef}\n          onClick={onExit}\n        />\n        <div className={styles.viewport}>\n          {modals.map((Modal: React.ReactElement) => {\n            const modalId = getNavId(Modal.props, warn);\n            if (modalId !== activeModal && modalId !== exitingModal) {\n              return null;\n            }\n\n            const key = `modal-${modalId}`;\n\n            return (\n              <FocusTrap\n                autoFocus={false}\n                restoreFocus={false}\n                onClose={onExit}\n                timeout={timeout}\n                key={key}\n                className={styles.modal}\n              >\n                {Modal}\n              </FocusTrap>\n            );\n          })}\n        </div>\n      </div>\n    </ModalRootContext.Provider>\n  );\n};\n"],"names":["React","classNames","noop","clamp","useObjectMemo","usePrevious","useWaitTransitionFinish","useDOM","getNavId","warnOnce","useConfigProvider","FocusTrap","ModalRootContext","useModalManager","warn","ModalRootDesktop","activeModal","activeModalProp","children","noFocusToDialog","onOpen","onOpened","onClose","onClosed","modalOverlayTestId","maskElementRef","useRef","maskAnimationFrame","undefined","restoreFocusTo","document","hasCustomPanelHeaderAfter","platform","exitingModal","onExit","getModalState","enteringModal","onEnter","onEntered","onEnteredProp","onExited","history","delayEnter","waitTransitionFinish","prevProps","modalRootContext","updateModalHeight","registerModal","id","data","Object","assign","isInsideModal","timeout","modals","Children","toArray","animateModalOpacity","modalState","display","innerElement","style","transition","transitionDelay","opacity","setMaskOpacity","forceOpacity","current","cancelAnimationFrame","requestAnimationFrame","translateY","translateYCurrent","toString","modalElement","contains","activeElement","focus","openModal","enteringState","closeModal","prevModalState","event","target","useEffect","Provider","value","div","className","data-testid","ref","onClick","map","Modal","modalId","props","key","autoFocus","restoreFocus"],"mappings":"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"}

package/dist/components/ModalRoot/constants.d.ts

@@ -1,2 +0,0 @@
-export declare const MODAL_PAGE_DEFAULT_PERCENT_HEIGHT = 75;
-//# sourceMappingURL=constants.d.ts.map