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

package/dist/components/ModalPage/ModalPageInternal.js

@@ -0,0 +1,181 @@
+'use client';
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { classNames, hasReactNode, noop } from "@vkontakte/vkjs";
+import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries.js";
+import { useExternRef } from "../../hooks/useExternRef.js";
+import { useVirtualKeyboardState } from "../../hooks/useVirtualKeyboardState.js";
+import { Keys, pressedKey } from "../../lib/accessibility.js";
+import { useCSSTransition } from "../../lib/animation/index.js";
+import { BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE, useBottomSheet } from "../../lib/sheet/index.js";
+import { useScrollLock } from "../AppRoot/ScrollContext.js";
+import { useConfigProvider } from "../ConfigProvider/ConfigProviderContext.js";
+import { FocusTrap } from "../FocusTrap/FocusTrap.js";
+import { ModalDismissButton } from "../ModalDismissButton/ModalDismissButton.js";
+import { ModalOutlet } from "../ModalOutlet/ModalOutlet.js";
+import { ModalOverlay as ModalOverlayDefault } from "../ModalOverlay/ModalOverlay.js";
+import { ModalPageContent } from "../ModalPageContent/ModalPageContent.js";
+const transitionStateClassNames = {
+    appear: "vkuiModalPage__documentStateEnter",
+    appearing: "vkuiModalPage__documentStateEntering",
+    enter: "vkuiModalPage__documentStateEnter",
+    entering: "vkuiModalPage__documentStateEntering",
+    exiting: "vkuiModalPage__documentStateExiting",
+    exited: "vkuiModalPage__documentStateExited"
+};
+/**
+ * В компоненте заложена вся логика модального окна.
+ *
+ * @private
+ */ export const ModalPageInternal = (_param)=>{
+    var { open, header, footer, size: desktopMaxWidth, height, children, className, style, dynamicContentHeight, settlingHeight, getModalContentRef, ModalOverlay = ModalOverlayDefault, modalOverlayTestId, modalContentTestId, modalDismissButtonTestId, noFocusToDialog, hideCloseButton, preventClose, disableContentPanningGesture, onOpen, onOpened, onClose = noop, onClosed } = _param, restProps = _object_without_properties(_param, [
+        "open",
+        "header",
+        "footer",
+        "size",
+        "height",
+        "children",
+        "className",
+        "style",
+        "dynamicContentHeight",
+        "settlingHeight",
+        "getModalContentRef",
+        "ModalOverlay",
+        "modalOverlayTestId",
+        "modalContentTestId",
+        "modalDismissButtonTestId",
+        "noFocusToDialog",
+        "hideCloseButton",
+        "preventClose",
+        "disableContentPanningGesture",
+        "onOpen",
+        "onOpened",
+        "onClose",
+        "onClosed"
+    ]);
+    const { hasCustomPanelHeaderAfter } = useConfigProvider();
+    const [transitionState, { ref, onTransitionEnd }] = useCSSTransition(open, {
+        enableAppear: true,
+        onEnter () {
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        },
+        onEntered () {
+            onOpened === null || onOpened === void 0 ? void 0 : onOpened();
+        },
+        onExited () {
+            onClosed === null || onClosed === void 0 ? void 0 : onClosed();
+        }
+    });
+    const opened = transitionState === 'appeared' || transitionState === 'entered';
+    const hidden = transitionState === 'exited';
+    const closable = !preventClose && opened;
+    const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();
+    const bottomSheetEnabled = !isDesktop && !preventClose && transitionState !== 'exited';
+    const { opened: keyboardOpened } = useVirtualKeyboardState(bottomSheetEnabled);
+    const [{ initialStyle, setSheetEl, setSheetScrollEl, setBackdropEl }, bottomSheetEventHandlers] = useBottomSheet(bottomSheetEnabled, {
+        blocked: keyboardOpened,
+        initialSnapPoint: dynamicContentHeight ? 'auto' : settlingHeight,
+        sheetCSSProperty: '--vkui_internal_ModalPageDocument--snapPoint',
+        backdropCSSProperty: '--vkui_internal--modal-overlay--opacity',
+        onDismiss () {
+            onClose('swipe-down');
+        }
+    });
+    const documentStyle = keyboardOpened ? _object_spread({
+        '--vkui_internal_ModalPageDocument--safeAreaInsetBottom': '0px'
+    }, initialStyle) : initialStyle;
+    const handleSheetRef = useExternRef(setSheetEl, ref);
+    const handleSheetScrollRef = useExternRef(setSheetScrollEl, getModalContentRef);
+    const disableContentPanningGestureProp = disableContentPanningGesture ? BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE : undefined;
+    const [desktopMaxWidthClassName, desktopMaxWidthStyle] = resolveDesktopMaxWidth(desktopMaxWidth);
+    const modalOverlay = /*#__PURE__*/ _jsx(ModalOverlay, {
+        getRootRef: setBackdropEl,
+        "data-testid": modalOverlayTestId,
+        visible: open,
+        onClick: closable ? function handleBackdropClick(event) {
+            onClose('click-overlay', event);
+        } : undefined
+    });
+    const closeButton = hideCloseButton || !isDesktop ? null : /*#__PURE__*/ _jsx(ModalDismissButton, {
+        "data-testid": modalDismissButtonTestId,
+        onClick: closable ? function handleDismissButtonClick(event) {
+            onClose('click-close-button', event);
+        } : undefined
+    });
+    const handleEscKeyDown = useCallback((event)=>{
+        if (closable && pressedKey(event) === Keys.ESCAPE) {
+            onClose('escape-key');
+        }
+    }, [
+        closable,
+        onClose
+    ]);
+    useScrollLock(!hidden);
+    return /*#__PURE__*/ _jsxs(ModalOutlet, {
+        hidden: hidden,
+        onKeyDown: handleEscKeyDown,
+        children: [
+            modalOverlay,
+            /*#__PURE__*/ _jsx(FocusTrap, _object_spread_props(_object_spread({}, restProps), {
+                autoFocus: !noFocusToDialog,
+                role: "dialog",
+                "aria-modal": "true",
+                disabled: !opened || hidden,
+                className: classNames(className, "vkuiModalPage__host", sizeX === 'regular' && 'vkuiInternalModalPage--sizeX-regular', hasCustomPanelHeaderAfter ? "vkuiModalPage__hostSafeAreaInsetTopWithCustomOffset" : "vkuiModalPage__hostSafeAreaInsetTop", desktopMaxWidthClassName),
+                style: _object_spread({}, style, desktopMaxWidthStyle, getHeightCSSVariable(height)),
+                children: /*#__PURE__*/ _jsxs("div", _object_spread_props(_object_spread({}, bottomSheetEventHandlers), {
+                    ref: handleSheetRef,
+                    role: "document",
+                    style: documentStyle,
+                    className: classNames("vkuiModalPage__document", transitionStateClassNames[transitionState]),
+                    onTransitionEnd: onTransitionEnd,
+                    children: [
+                        /*#__PURE__*/ _jsxs("div", {
+                            className: "vkuiModalPage__children",
+                            children: [
+                                hasReactNode(header) && header,
+                                /*#__PURE__*/ _jsx(ModalPageContent, _object_spread_props(_object_spread({
+                                    getRootRef: handleSheetScrollRef,
+                                    "data-testid": modalContentTestId
+                                }, disableContentPanningGestureProp), {
+                                    children: children
+                                })),
+                                hasReactNode(footer) && footer
+                            ]
+                        }),
+                        closeButton
+                    ]
+                }))
+            }))
+        ]
+    });
+};
+const desktopMaxWidthClassNames = {
+    s: "vkuiModalPage__hostMaxWidthS",
+    m: "vkuiModalPage__hostMaxWidthM",
+    l: "vkuiModalPage__hostMaxWidthL"
+};
+function resolveDesktopMaxWidth(desktopMaxWidth = 's') {
+    if (typeof desktopMaxWidth === 'string') {
+        return [
+            desktopMaxWidthClassNames[desktopMaxWidth],
+            undefined
+        ];
+    }
+    return [
+        undefined,
+        typeof desktopMaxWidth === 'number' ? {
+            '--vkui_internal_ModalPage--desktopMaxWidth': `${desktopMaxWidth}px`
+        } : undefined
+    ];
+}
+function getHeightCSSVariable(height) {
+    return height !== undefined ? {
+        '--vkui_internal_ModalPage--userHeight': `${height}`
+    } : undefined;
+}
+
+//# sourceMappingURL=ModalPageInternal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ModalPage/ModalPageInternal.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentType, type KeyboardEvent, useCallback } from 'react';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useVirtualKeyboardState } from '../../hooks/useVirtualKeyboardState';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation';\nimport { BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE, useBottomSheet } from '../../lib/sheet';\nimport type { CSSCustomProperties } from '../../types';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';\nimport { FocusTrap } from '../FocusTrap/FocusTrap';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { ModalOutlet } from '../ModalOutlet/ModalOutlet';\nimport {\n  ModalOverlay as ModalOverlayDefault,\n  type ModalOverlayProps,\n} from '../ModalOverlay/ModalOverlay';\nimport { ModalPageContent } from '../ModalPageContent/ModalPageContent';\nimport type { ModalPageProps } from './types';\nimport styles from './ModalPage.module.css';\n\nconst transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>> = {\n  appear: styles['documentStateEnter'],\n  appearing: styles['documentStateEntering'],\n\n  enter: styles['documentStateEnter'],\n  entering: styles['documentStateEntering'],\n\n  exiting: styles['documentStateExiting'],\n  exited: styles['documentStateExited'],\n};\n\nexport interface ModalPageInternalProps extends Omit<ModalPageProps, 'nav' | 'keepMounted'> {\n  ModalOverlay?: ComponentType<ModalOverlayProps>;\n}\n\n/**\n * В компоненте заложена вся логика модального окна.\n *\n * @private\n */\nexport const ModalPageInternal = ({\n  open,\n  header,\n  footer,\n  size: desktopMaxWidth,\n  height,\n  children,\n  className,\n  style,\n  dynamicContentHeight,\n  settlingHeight,\n  getModalContentRef,\n  ModalOverlay = ModalOverlayDefault,\n  modalOverlayTestId,\n  modalContentTestId,\n  modalDismissButtonTestId,\n  noFocusToDialog,\n  hideCloseButton,\n  preventClose,\n  disableContentPanningGesture,\n  onOpen,\n  onOpened,\n  onClose = noop,\n  onClosed,\n  ...restProps\n}: ModalPageInternalProps) => {\n  const { hasCustomPanelHeaderAfter } = useConfigProvider();\n  const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(open, {\n    enableAppear: true,\n    onEnter() {\n      onOpen?.();\n    },\n    onEntered() {\n      onOpened?.();\n    },\n    onExited() {\n      onClosed?.();\n    },\n  });\n  const opened = transitionState === 'appeared' || transitionState === 'entered';\n  const hidden = transitionState === 'exited';\n  const closable = !preventClose && opened;\n\n  const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();\n  const bottomSheetEnabled = !isDesktop && !preventClose && transitionState !== 'exited';\n  const { opened: keyboardOpened } = useVirtualKeyboardState(bottomSheetEnabled);\n\n  const [{ initialStyle, setSheetEl, setSheetScrollEl, setBackdropEl }, bottomSheetEventHandlers] =\n    useBottomSheet(bottomSheetEnabled, {\n      blocked: keyboardOpened,\n      initialSnapPoint: dynamicContentHeight ? 'auto' : settlingHeight,\n      sheetCSSProperty: '--vkui_internal_ModalPageDocument--snapPoint',\n      backdropCSSProperty: '--vkui_internal--modal-overlay--opacity',\n      onDismiss() {\n        onClose('swipe-down');\n      },\n    });\n  const documentStyle = keyboardOpened\n    ? {\n        '--vkui_internal_ModalPageDocument--safeAreaInsetBottom': '0px',\n        ...initialStyle,\n      }\n    : initialStyle;\n  const handleSheetRef = useExternRef<HTMLDivElement>(setSheetEl, ref);\n  const handleSheetScrollRef = useExternRef<HTMLDivElement>(setSheetScrollEl, getModalContentRef);\n\n  const disableContentPanningGestureProp = disableContentPanningGesture\n    ? BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE\n    : undefined;\n  const [desktopMaxWidthClassName, desktopMaxWidthStyle] = resolveDesktopMaxWidth(desktopMaxWidth);\n\n  const modalOverlay = (\n    <ModalOverlay\n      getRootRef={setBackdropEl}\n      data-testid={modalOverlayTestId}\n      visible={open}\n      onClick={\n        closable\n          ? function handleBackdropClick(event) {\n              onClose('click-overlay', event);\n            }\n          : undefined\n      }\n    />\n  );\n  const closeButton =\n    hideCloseButton || !isDesktop ? null : (\n      <ModalDismissButton\n        data-testid={modalDismissButtonTestId}\n        onClick={\n          closable\n            ? function handleDismissButtonClick(event) {\n                onClose('click-close-button', event);\n              }\n            : undefined\n        }\n      />\n    );\n  const handleEscKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLElement>) => {\n      if (closable && pressedKey(event) === Keys.ESCAPE) {\n        onClose('escape-key');\n      }\n    },\n    [closable, onClose],\n  );\n\n  useScrollLock(!hidden);\n\n  return (\n    <ModalOutlet hidden={hidden} onKeyDown={handleEscKeyDown}>\n      {modalOverlay}\n      <FocusTrap\n        {...restProps}\n        autoFocus={!noFocusToDialog}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        disabled={!opened || hidden}\n        className={classNames(\n          className,\n          styles.host,\n          sizeX === 'regular' && 'vkuiInternalModalPage--sizeX-regular',\n          hasCustomPanelHeaderAfter\n            ? styles.hostSafeAreaInsetTopWithCustomOffset\n            : styles.hostSafeAreaInsetTop,\n          desktopMaxWidthClassName,\n        )}\n        style={{\n          ...style,\n          ...desktopMaxWidthStyle,\n          ...getHeightCSSVariable(height),\n        }}\n      >\n        <div\n          {...bottomSheetEventHandlers}\n          ref={handleSheetRef}\n          role=\"document\"\n          style={documentStyle}\n          className={classNames(styles.document, transitionStateClassNames[transitionState])}\n          onTransitionEnd={onTransitionEnd}\n        >\n          <div className={styles.children}>\n            {hasReactNode(header) && header}\n            <ModalPageContent\n              getRootRef={handleSheetScrollRef}\n              data-testid={modalContentTestId}\n              {...disableContentPanningGestureProp}\n            >\n              {children}\n            </ModalPageContent>\n            {hasReactNode(footer) && footer}\n          </div>\n          {closeButton}\n        </div>\n      </FocusTrap>\n    </ModalOutlet>\n  );\n};\n\nconst desktopMaxWidthClassNames = {\n  s: styles['hostMaxWidthS'],\n  m: styles['hostMaxWidthM'],\n  l: styles['hostMaxWidthL'],\n};\n\nfunction resolveDesktopMaxWidth(\n  desktopMaxWidth: ModalPageInternalProps['size'] = 's',\n): [string | undefined, CSSCustomProperties | undefined] {\n  if (typeof desktopMaxWidth === 'string') {\n    return [desktopMaxWidthClassNames[desktopMaxWidth], undefined];\n  }\n\n  return [\n    undefined,\n    typeof desktopMaxWidth === 'number'\n      ? { '--vkui_internal_ModalPage--desktopMaxWidth': `${desktopMaxWidth}px` }\n      : undefined,\n  ];\n}\n\nfunction getHeightCSSVariable(height?: number | string): CSSCustomProperties | undefined {\n  return height !== undefined\n    ? { '--vkui_internal_ModalPage--userHeight': `${height}` }\n    : undefined;\n}\n"],"names":["useCallback","classNames","hasReactNode","noop","useAdaptivityWithJSMediaQueries","useExternRef","useVirtualKeyboardState","Keys","pressedKey","useCSSTransition","BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE","useBottomSheet","useScrollLock","useConfigProvider","FocusTrap","ModalDismissButton","ModalOutlet","ModalOverlay","ModalOverlayDefault","ModalPageContent","transitionStateClassNames","appear","appearing","enter","entering","exiting","exited","ModalPageInternal","open","header","footer","size","desktopMaxWidth","height","children","className","style","dynamicContentHeight","settlingHeight","getModalContentRef","modalOverlayTestId","modalContentTestId","modalDismissButtonTestId","noFocusToDialog","hideCloseButton","preventClose","disableContentPanningGesture","onOpen","onOpened","onClose","onClosed","restProps","hasCustomPanelHeaderAfter","transitionState","ref","onTransitionEnd","enableAppear","onEnter","onEntered","onExited","opened","hidden","closable","sizeX","isDesktop","bottomSheetEnabled","keyboardOpened","initialStyle","setSheetEl","setSheetScrollEl","setBackdropEl","bottomSheetEventHandlers","blocked","initialSnapPoint","sheetCSSProperty","backdropCSSProperty","onDismiss","documentStyle","handleSheetRef","handleSheetScrollRef","disableContentPanningGestureProp","undefined","desktopMaxWidthClassName","desktopMaxWidthStyle","resolveDesktopMaxWidth","modalOverlay","getRootRef","data-testid","visible","onClick","handleBackdropClick","event","closeButton","handleDismissButtonClick","handleEscKeyDown","ESCAPE","onKeyDown","autoFocus","role","aria-modal","disabled","getHeightCSSVariable","div","desktopMaxWidthClassNames","s","m","l"],"mappings":"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"}

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

@@ -0,0 +1,104 @@
+import type { CSSProperties, ReactNode, Ref, UIEvent } from 'react';
+import type { NavIdProps } from '../../lib/getNavId';
+import type { HTMLAttributesWithRootRef } from '../../types';
+export type ModalPageCloseReason = 'click-overlay' | 'click-close-button' | 'escape-key' | 'swipe-down';
+type OmittedStyleAttribute = {
+    style?: Omit<CSSProperties, 'height' | 'maxWidth' | 'maxHeight'>;
+};
+export interface ModalPageProps extends NavIdProps, Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'id' | 'style'>, OmittedStyleAttribute {
+    /**
+     * Состояние видимости.
+     *
+     * @default false
+     */
+    open?: boolean;
+    /**
+     * Сохранять ли компонент в DOM при `open={false}`.
+     *
+     * @default false
+     */
+    keepMounted?: boolean;
+    /**
+     * Шапка модальной страницы, `<ModalPageHeader />`
+     */
+    header?: ReactNode;
+    /**
+     * Подвал модальной страницы, `<ModalPageFooter />`
+     */
+    footer?: ReactNode;
+    /**
+     * Задаёт контенту максимальную ширину на десктопе.
+     */
+    size?: 's' | 'm' | 'l' | number;
+    /**
+     * Задаёт модальному окну фиксированную высоту.
+     * Можно передать числовое значение в пикселях, а можно строкой, в том числе и в процентах "50%".
+     * В мобильной версии 'settlingHeight' будет считаться относительно заданного height.
+     */
+    height?: string | number;
+    /**
+     * Процент, на который изначально будет открыта модальная страница.
+     *
+     * > ⚠️ Следует использовать следующие значения: `25`, `50`, `75`, `100`.
+     * > При передаче `< 25` значение приведётся к `25`, при передаче `> 75` значение приведётся к `75`.
+     *
+     * Игнорируется при включении `dynamicContentHeight`.
+     */
+    settlingHeight?: number;
+    /**
+     * Если высота контента в модальной странице может поменяться, нужно установить это свойство.
+     */
+    dynamicContentHeight?: boolean;
+    /**
+     * Отключает фокус на интерактивный элемент после открытия модалки.
+     */
+    noFocusToDialog?: boolean;
+    /**
+     * Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)
+     */
+    hideCloseButton?: boolean;
+    /**
+     * `data-testid` для содержимого модального окна.
+     */
+    modalContentTestId?: string;
+    /**
+     * Возвращает DOM-элемент содержимого модального окна.
+     */
+    getModalContentRef?: Ref<HTMLDivElement>;
+    /**
+     * `data-testid` для оверлея.
+     */
+    modalOverlayTestId?: string;
+    /**
+     * `data-testid` для кнопки закрытия.
+     */
+    modalDismissButtonTestId?: string;
+    /**
+     * Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)
+     *
+     * ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте
+     */
+    preventClose?: boolean;
+    /**
+     * Отключает раскрытие и закрытие панели в мобильном виде.
+     */
+    disableContentPanningGesture?: boolean;
+    /**
+     * Будет вызвано при начале открытия модалки.
+     */
+    onOpen?: VoidFunction;
+    /**
+     * Будет вызвано при окончательном открытии модалки.
+     */
+    onOpened?: VoidFunction;
+    /**
+     * Будет вызвано при начале закрытия модалки.
+     */
+    onClose?: (reason: ModalPageCloseReason, event?: UIEvent<HTMLElement>) => void;
+    /**
+     * Будет вызвано при окончательном закрытии модалки.
+     */
+    onClosed?: VoidFunction;
+}
+export {};
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/ModalPage/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AACpE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAE7D,MAAM,MAAM,oBAAoB,GAC5B,eAAe,GACf,oBAAoB,GACpB,YAAY,GACZ,YAAY,CAAC;AAEjB,KAAK,qBAAqB,GAAG;IAC3B,KAAK,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,QAAQ,GAAG,UAAU,GAAG,WAAW,CAAC,CAAC;CAClE,CAAC;AAEF,MAAM,WAAW,cACf,SAAQ,UAAU,EAChB,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,IAAI,GAAG,OAAO,CAAC,EAC/D,qBAAqB;IACvB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,kBAAkB,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IACzC;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;OAEG;IACH,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,MAAM,EAAE,oBAAoB,EAAE,KAAK,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAC/E;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;CACzB"}

package/dist/components/ModalPage/types.js

@@ -0,0 +1,3 @@
+export { };
+
+//# sourceMappingURL=types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ModalPage/types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode, Ref, UIEvent } from 'react';\nimport type { NavIdProps } from '../../lib/getNavId';\nimport type { HTMLAttributesWithRootRef } from '../../types';\n\nexport type ModalPageCloseReason =\n  | 'click-overlay'\n  | 'click-close-button'\n  | 'escape-key'\n  | 'swipe-down';\n\ntype OmittedStyleAttribute = {\n  style?: Omit<CSSProperties, 'height' | 'maxWidth' | 'maxHeight'>;\n};\n\nexport interface ModalPageProps\n  extends NavIdProps,\n    Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'id' | 'style'>,\n    OmittedStyleAttribute {\n  /**\n   * Состояние видимости.\n   *\n   * @default false\n   */\n  open?: boolean;\n  /**\n   * Сохранять ли компонент в DOM при `open={false}`.\n   *\n   * @default false\n   */\n  keepMounted?: boolean;\n  /**\n   * Шапка модальной страницы, `<ModalPageHeader />`\n   */\n  header?: ReactNode;\n  /**\n   * Подвал модальной страницы, `<ModalPageFooter />`\n   */\n  footer?: ReactNode;\n  /**\n   * Задаёт контенту максимальную ширину на десктопе.\n   */\n  size?: 's' | 'm' | 'l' | number;\n  /**\n   * Задаёт модальному окну фиксированную высоту.\n   * Можно передать числовое значение в пикселях, а можно строкой, в том числе и в процентах \"50%\".\n   * В мобильной версии 'settlingHeight' будет считаться относительно заданного height.\n   */\n  height?: string | number;\n  /**\n   * Процент, на который изначально будет открыта модальная страница.\n   *\n   * > ⚠️ Следует использовать следующие значения: `25`, `50`, `75`, `100`.\n   * > При передаче `< 25` значение приведётся к `25`, при передаче `> 75` значение приведётся к `75`.\n   *\n   * Игнорируется при включении `dynamicContentHeight`.\n   */\n  settlingHeight?: number;\n  /**\n   * Если высота контента в модальной странице может поменяться, нужно установить это свойство.\n   */\n  dynamicContentHeight?: boolean;\n  /**\n   * Отключает фокус на интерактивный элемент после открытия модалки.\n   */\n  noFocusToDialog?: boolean;\n  /**\n   * Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)\n   */\n  hideCloseButton?: boolean;\n  /**\n   * `data-testid` для содержимого модального окна.\n   */\n  modalContentTestId?: string;\n  /**\n   * Возвращает DOM-элемент содержимого модального окна.\n   */\n  getModalContentRef?: Ref<HTMLDivElement>;\n  /**\n   * `data-testid` для оверлея.\n   */\n  modalOverlayTestId?: string;\n  /**\n   * `data-testid` для кнопки закрытия.\n   */\n  modalDismissButtonTestId?: string;\n  /**\n   * Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)\n   *\n   * ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте\n   */\n  preventClose?: boolean;\n  /**\n   * Отключает раскрытие и закрытие панели в мобильном виде.\n   */\n  disableContentPanningGesture?: boolean;\n  /**\n   * Будет вызвано при начале открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном открытии модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Будет вызвано при начале закрытия модалки.\n   */\n  onClose?: (reason: ModalPageCloseReason, event?: UIEvent<HTMLElement>) => void;\n  /**\n   * Будет вызвано при окончательном закрытии модалки.\n   */\n  onClosed?: VoidFunction;\n}\n"],"names":[],"mappings":"AAcA,WAiGC"}

package/dist/components/ModalPageContent/ModalPageContent.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributesWithRootRef } from '../../types';
+export type ModalPageContentProps = HTMLAttributesWithRootRef<HTMLDivElement>;
+export declare const ModalPageContent: ({ children, className, getRootRef, ...restProps }: ModalPageContentProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ModalPageContent.d.ts.map

package/dist/components/ModalPageContent/ModalPageContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalPageContent.d.ts","sourceRoot":"","sources":["../../../src/components/ModalPageContent/ModalPageContent.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAI7D,MAAM,MAAM,qBAAqB,GAAG,yBAAyB,CAAC,cAAc,CAAC,CAAC;AAE9E,eAAO,MAAM,gBAAgB,sDAK1B,qBAAqB,4CAUvB,CAAC"}

package/dist/components/ModalPageContent/ModalPageContent.js

@@ -0,0 +1,22 @@
+'use client';
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@vkontakte/vkjs";
+import { CustomScrollView } from "../CustomScrollView/CustomScrollView.js";
+export const ModalPageContent = (_param)=>{
+    var { children, className, getRootRef } = _param, restProps = _object_without_properties(_param, [
+        "children",
+        "className",
+        "getRootRef"
+    ]);
+    return /*#__PURE__*/ _jsx(CustomScrollView, _object_spread_props(_object_spread({
+        className: classNames(className, "vkuiModalPageContent__host"),
+        getRootRef: getRootRef
+    }, restProps), {
+        children: children
+    }));
+};
+
+//# sourceMappingURL=ModalPageContent.js.map

package/dist/components/ModalPageContent/ModalPageContent.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ModalPageContent/ModalPageContent.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { CustomScrollView } from '../CustomScrollView/CustomScrollView';\nimport styles from './ModalPageContent.module.css';\n\nexport type ModalPageContentProps = HTMLAttributesWithRootRef<HTMLDivElement>;\n\nexport const ModalPageContent = ({\n  children,\n  className,\n  getRootRef,\n  ...restProps\n}: ModalPageContentProps) => {\n  return (\n    <CustomScrollView\n      className={classNames(className, styles.host)}\n      getRootRef={getRootRef}\n      {...restProps}\n    >\n      {children}\n    </CustomScrollView>\n  );\n};\n"],"names":["classNames","CustomScrollView","ModalPageContent","children","className","getRootRef","restProps"],"mappings":"AAAA;;;;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,SAASC,gBAAgB,QAAQ,0CAAuC;AAKxE,OAAO,MAAMC,mBAAmB;QAAC,EAC/BC,QAAQ,EACRC,SAAS,EACTC,UAAU,EAEY,WADnBC;QAHHH;QACAC;QACAC;;IAGA,qBACE,KAACJ;QACCG,WAAWJ,WAAWI;QACtBC,YAAYA;OACRC;kBAEHH;;AAGP,EAAE"}

package/dist/components/ModalPageFooter/ModalPageFooter.d.ts

@@ -0,0 +1,7 @@
+import type { HTMLAttributesWithRootRef } from '../../types';
+export interface ModalPageFooterProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+    noSeparator?: boolean;
+    noPadding?: boolean;
+}
+export declare const ModalPageFooter: ({ noSeparator, noPadding, children, ...restProps }: ModalPageFooterProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ModalPageFooter.d.ts.map

package/dist/components/ModalPageFooter/ModalPageFooter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalPageFooter.d.ts","sourceRoot":"","sources":["../../../src/components/ModalPageFooter/ModalPageFooter.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAK7D,MAAM,WAAW,oBAAqB,SAAQ,yBAAyB,CAAC,cAAc,CAAC;IACrF,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,eAAe,uDAKzB,oBAAoB,4CAWtB,CAAC"}

package/dist/components/ModalPageFooter/ModalPageFooter.js

@@ -0,0 +1,30 @@
+'use client';
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@vkontakte/vkjs";
+import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries.js";
+import { RootComponent } from "../RootComponent/RootComponent.js";
+import { Separator } from "../Separator/Separator.js";
+export const ModalPageFooter = (_param)=>{
+    var { noSeparator = false, noPadding = false, children } = _param, restProps = _object_without_properties(_param, [
+        "noSeparator",
+        "noPadding",
+        "children"
+    ]);
+    const { sizeX } = useAdaptivityWithJSMediaQueries();
+    return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({
+        baseClassName: classNames("vkuiModalPageFooter__host", !noPadding && "vkuiModalPageFooter__padded")
+    }, restProps), {
+        children: [
+            !noSeparator && /*#__PURE__*/ _jsx(Separator, {
+                className: "vkuiModalPageFooter__Separator",
+                padding: sizeX !== 'regular'
+            }),
+            children
+        ]
+    }));
+};
+
+//# sourceMappingURL=ModalPageFooter.js.map

package/dist/components/ModalPageFooter/ModalPageFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ModalPageFooter/ModalPageFooter.tsx"],"sourcesContent":["'use client';\n\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Separator } from '../Separator/Separator';\nimport styles from './ModalPageFooter.module.css';\n\nexport interface ModalPageFooterProps extends HTMLAttributesWithRootRef<HTMLDivElement> {\n  noSeparator?: boolean;\n  noPadding?: boolean;\n}\n\nexport const ModalPageFooter = ({\n  noSeparator = false,\n  noPadding = false,\n  children,\n  ...restProps\n}: ModalPageFooterProps) => {\n  const { sizeX } = useAdaptivityWithJSMediaQueries();\n  return (\n    <RootComponent\n      baseClassName={classNames(styles.host, !noPadding && styles.padded)}\n      {...restProps}\n    >\n      {!noSeparator && <Separator className={styles.Separator} padding={sizeX !== 'regular'} />}\n      {children}\n    </RootComponent>\n  );\n};\n"],"names":["classNames","useAdaptivityWithJSMediaQueries","RootComponent","Separator","ModalPageFooter","noSeparator","noPadding","children","restProps","sizeX","baseClassName","className","padding"],"mappings":"AAAA;;;;;AAEA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,iDAA8C;AAE9F,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,SAAS,QAAQ,4BAAyB;AAQnD,OAAO,MAAMC,kBAAkB;QAAC,EAC9BC,cAAc,KAAK,EACnBC,YAAY,KAAK,EACjBC,QAAQ,EAEa,WADlBC;QAHHH;QACAC;QACAC;;IAGA,MAAM,EAAEE,KAAK,EAAE,GAAGR;IAClB,qBACE,MAACC;QACCQ,eAAeV,wCAAwB,CAACM;OACpCE;;YAEH,CAACH,6BAAe,KAACF;gBAAUQ,SAAS;gBAAoBC,SAASH,UAAU;;YAC3EF;;;AAGP,EAAE"}

package/dist/components/ModalPageHeader/ModalPageHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalPageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ModalPageHeader/ModalPageHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEtD,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAIhF,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,QAAQ,GAAG,WAAW,CAAC,EACxD,MAAM,CAAC,cAAc,CAAC,EACtB,UAAU,CAAC,cAAc,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,oFAOzB,oBAAoB,KAAG,KAAK,CAAC,SAiC/B,CAAC"}
+{"version":3,"file":"ModalPageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/ModalPageHeader/ModalPageHeader.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAIhF,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,IAAI,CAAC,gBAAgB,EAAE,OAAO,GAAG,QAAQ,GAAG,WAAW,CAAC,EACxD,MAAM,CAAC,cAAc,CAAC,EACtB,UAAU,CAAC,cAAc,CAAC;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,eAAe,oFAOzB,oBAAoB,KAAG,KAAK,CAAC,SAiC/B,CAAC"}

package/dist/components/ModalPageHeader/ModalPageHeader.js

@@ -5,9 +5,9 @@ import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames } from "@vkontakte/vkjs";
+import { useModalContext } from "../../context/ModalContext.js";
 import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
-import { ModalPageContext } from "../ModalPage/ModalPageContext.js";
 import { PanelHeader } from "../PanelHeader/PanelHeader.js";
 import { Separator } from "../Separator/Separator.js";
 /**
@@ -22,17 +22,17 @@ import { Separator } from "../Separator/Separator.js";
     ]);
     const platform = usePlatform();
     const { isDesktop, sizeX } = useAdaptivityWithJSMediaQueries();
-    const { labelId } = React.useContext(ModalPageContext);
+    const modalContext = useModalContext();
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx("div", {
-                className: classNames("vkuiModalPageHeader__host", platform !== 'vkcom' && "vkuiModalPageHeader__withGaps", isDesktop && "vkuiModalPageHeader__desktop"),
+                className: classNames("vkuiModalPageHeader__host", platform !== 'vkcom' && "vkuiModalPageHeader__hostWithGaps", isDesktop && "vkuiModalPageHeader__hostDesktop"),
                 ref: getRootRef,
                 children: /*#__PURE__*/ _jsx(PanelHeader, _object_spread_props(_object_spread({
                     className: classNames('vkuiInternalModalPageHeader__in', className),
                     typographyProps: _object_spread({
                         Component: 'h2',
-                        id: labelId
+                        id: modalContext.labelId
                     }, typographyProps)
                 }, restProps), {
                     fixed: false,

package/dist/components/ModalPageHeader/ModalPageHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ModalPageHeader/ModalPageHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { ModalPageContext } from '../ModalPage/ModalPageContext';\nimport { PanelHeader, type PanelHeaderProps } from '../PanelHeader/PanelHeader';\nimport { Separator } from '../Separator/Separator';\nimport styles from './ModalPageHeader.module.css';\n\nexport interface ModalPageHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Omit<PanelHeaderProps, 'fixed' | 'shadow' | 'delimiter'>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  noSeparator?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPageHeader\n */\nexport const ModalPageHeader = ({\n  children,\n  noSeparator = false,\n  getRootRef,\n  className,\n  typographyProps,\n  ...restProps\n}: ModalPageHeaderProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { isDesktop, sizeX } = useAdaptivityWithJSMediaQueries();\n  const { labelId } = React.useContext(ModalPageContext);\n\n  return (\n    <>\n      <div\n        className={classNames(\n          styles.host,\n          platform !== 'vkcom' && styles.withGaps,\n          isDesktop && styles.desktop,\n        )}\n        ref={getRootRef}\n      >\n        <PanelHeader\n          className={classNames('vkuiInternalModalPageHeader__in', className)}\n          typographyProps={{\n            Component: 'h2',\n            id: labelId,\n            ...typographyProps,\n          }}\n          {...restProps}\n          fixed={false}\n          delimiter=\"none\"\n          transparent\n        >\n          {children}\n        </PanelHeader>\n      </div>\n      {!noSeparator && <Separator padding={sizeX !== 'regular'} />}\n    </>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","usePlatform","ModalPageContext","PanelHeader","Separator","ModalPageHeader","children","noSeparator","getRootRef","className","typographyProps","restProps","platform","isDesktop","sizeX","labelId","useContext","div","ref","Component","id","fixed","delimiter","transparent","padding"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,+BAA+B,QAAQ,iDAA8C;AAC9F,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,gBAAgB,QAAQ,mCAAgC;AACjE,SAASC,WAAW,QAA+B,gCAA6B;AAChF,SAASC,SAAS,QAAQ,4BAAyB;AAWnD;;CAEC,GACD,OAAO,MAAMC,kBAAkB;QAAC,EAC9BC,QAAQ,EACRC,cAAc,KAAK,EACnBC,UAAU,EACVC,SAAS,EACTC,eAAe,EAEM,WADlBC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWX;IACjB,MAAM,EAAEY,SAAS,EAAEC,KAAK,EAAE,GAAGd;IAC7B,MAAM,EAAEe,OAAO,EAAE,GAAGjB,MAAMkB,UAAU,CAACd;IAErC,qBACE;;0BACE,KAACe;gBACCR,WAAWV,wCAETa,aAAa,4CACbC;gBAEFK,KAAKV;0BAEL,cAAA,KAACL;oBACCM,WAAWV,WAAW,mCAAmCU;oBACzDC,iBAAiB;wBACfS,WAAW;wBACXC,IAAIL;uBACDL;mBAEDC;oBACJU,OAAO;oBACPC,WAAU;oBACVC,WAAW;8BAEVjB;;;YAGJ,CAACC,6BAAe,KAACH;gBAAUoB,SAASV,UAAU;;;;AAGrD,EAAE"}
+{"version":3,"sources":["../../../src/components/ModalPageHeader/ModalPageHeader.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useModalContext } from '../../context/ModalContext';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HasRef, HasRootRef } from '../../types';\nimport { PanelHeader, type PanelHeaderProps } from '../PanelHeader/PanelHeader';\nimport { Separator } from '../Separator/Separator';\nimport styles from './ModalPageHeader.module.css';\n\nexport interface ModalPageHeaderProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    Omit<PanelHeaderProps, 'fixed' | 'shadow' | 'delimiter'>,\n    HasRef<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  noSeparator?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPageHeader\n */\nexport const ModalPageHeader = ({\n  children,\n  noSeparator = false,\n  getRootRef,\n  className,\n  typographyProps,\n  ...restProps\n}: ModalPageHeaderProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { isDesktop, sizeX } = useAdaptivityWithJSMediaQueries();\n  const modalContext = useModalContext();\n\n  return (\n    <>\n      <div\n        className={classNames(\n          styles.host,\n          platform !== 'vkcom' && styles.hostWithGaps,\n          isDesktop && styles.hostDesktop,\n        )}\n        ref={getRootRef}\n      >\n        <PanelHeader\n          className={classNames('vkuiInternalModalPageHeader__in', className)}\n          typographyProps={{\n            Component: 'h2',\n            id: modalContext.labelId,\n            ...typographyProps,\n          }}\n          {...restProps}\n          fixed={false}\n          delimiter=\"none\"\n          transparent\n        >\n          {children}\n        </PanelHeader>\n      </div>\n      {!noSeparator && <Separator padding={sizeX !== 'regular'} />}\n    </>\n  );\n};\n"],"names":["React","classNames","useModalContext","useAdaptivityWithJSMediaQueries","usePlatform","PanelHeader","Separator","ModalPageHeader","children","noSeparator","getRootRef","className","typographyProps","restProps","platform","isDesktop","sizeX","modalContext","div","ref","Component","id","labelId","fixed","delimiter","transparent","padding"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,eAAe,QAAQ,gCAA6B;AAC7D,SAASC,+BAA+B,QAAQ,iDAA8C;AAC9F,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,WAAW,QAA+B,gCAA6B;AAChF,SAASC,SAAS,QAAQ,4BAAyB;AAWnD;;CAEC,GACD,OAAO,MAAMC,kBAAkB;QAAC,EAC9BC,QAAQ,EACRC,cAAc,KAAK,EACnBC,UAAU,EACVC,SAAS,EACTC,eAAe,EAEM,WADlBC;QALHL;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,WAAWV;IACjB,MAAM,EAAEW,SAAS,EAAEC,KAAK,EAAE,GAAGb;IAC7B,MAAMc,eAAef;IAErB,qBACE;;0BACE,KAACgB;gBACCP,WAAWV,wCAETa,aAAa,gDACbC;gBAEFI,KAAKT;0BAEL,cAAA,KAACL;oBACCM,WAAWV,WAAW,mCAAmCU;oBACzDC,iBAAiB;wBACfQ,WAAW;wBACXC,IAAIJ,aAAaK,OAAO;uBACrBV;mBAEDC;oBACJU,OAAO;oBACPC,WAAU;oBACVC,WAAW;8BAEVjB;;;YAGJ,CAACC,6BAAe,KAACH;gBAAUoB,SAASV,UAAU;;;;AAGrD,EAAE"}

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

@@ -1,4 +1,7 @@
 import * as React from 'react';
-import type { ModalRootWithDOMProps } from './types';
-export declare const ModalRootTouch: React.FC<ModalRootWithDOMProps>;
+import type { ModalRootProps } from './types';
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalRoot
+ */
+export declare const ModalRoot: ({ activeModal, children, modalOverlayTestId, noFocusToDialog, usePortal, onOpen, onOpened, onClose, onClosed, }: ModalRootProps) => React.ReactNode;
 //# sourceMappingURL=ModalRoot.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ModalRoot.d.ts","sourceRoot":"","sources":["../../../src/components/ModalRoot/ModalRoot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,KAAK,EAAE,qBAAqB,EAAoC,MAAM,SAAS,CAAC;AA8kBvF,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAM1D,CAAC"}
+{"version":3,"file":"ModalRoot.d.ts","sourceRoot":"","sources":["../../../src/components/ModalRoot/ModalRoot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAI9C;;GAEG;AACH,eAAO,MAAM,SAAS,oHAUnB,cAAc,KAAG,KAAK,CAAC,SA+CzB,CAAC"}