@vkontakte/vkui 7.1.3 → 7.2.1

package/dist/components/ModalOutsideButton/ModalOutsideButton.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { type TappableProps } from '../Tappable/Tappable';
+export interface ModalOutsideButtonProps extends TappableProps {
+    /**
+     * Текст для скринридера
+     */
+    'aria-label'?: string;
+    /**
+     * Рекомендуется использовать иконки размером `20px`
+     */
+    'children': React.ReactNode;
+}
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalOutsideButton
+ */
+export declare const ModalOutsideButton: ({ children, "aria-label": ariaLabel, ...restProps }: ModalOutsideButtonProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ModalOutsideButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalOutsideButton.d.ts","sourceRoot":"","sources":["../../../src/components/ModalOutsideButton/ModalOutsideButton.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAIpE,MAAM,WAAW,uBAAwB,SAAQ,aAAa;IAC5D;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,GAAI,qDAIhC,uBAAuB,4CAYzB,CAAC"}

package/dist/components/ModalOutsideButton/ModalOutsideButton.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 * as React from "react";
+import { Tappable } from "../Tappable/Tappable.js";
+import { VisuallyHidden } from "../VisuallyHidden/VisuallyHidden.js";
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalOutsideButton
+ */ export const ModalOutsideButton = (_param)=>{
+    var { children, 'aria-label': ariaLabel } = _param, restProps = _object_without_properties(_param, [
+        "children",
+        'aria-label'
+    ]);
+    return /*#__PURE__*/ _jsxs(Tappable, _object_spread_props(_object_spread({
+        baseClassName: "vkuiModalOutsideButton__host",
+        activeMode: "vkuiModalOutsideButton__active",
+        hoverMode: "vkuiModalOutsideButton__hover"
+    }, restProps), {
+        children: [
+            ariaLabel && /*#__PURE__*/ _jsx(VisuallyHidden, {
+                children: ariaLabel
+            }),
+            children
+        ]
+    }));
+};
+
+//# sourceMappingURL=ModalOutsideButton.js.map

package/dist/components/ModalOutsideButton/ModalOutsideButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ModalOutsideButton/ModalOutsideButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Tappable, type TappableProps } from '../Tappable/Tappable';\nimport { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';\nimport styles from './ModalOutsideButton.module.css';\n\nexport interface ModalOutsideButtonProps extends TappableProps {\n  /**\n   * Текст для скринридера\n   */\n  'aria-label'?: string;\n  /**\n   * Рекомендуется использовать иконки размером `20px`\n   */\n  'children': React.ReactNode;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalOutsideButton\n */\nexport const ModalOutsideButton = ({\n  children,\n  'aria-label': ariaLabel,\n  ...restProps\n}: ModalOutsideButtonProps) => {\n  return (\n    <Tappable\n      baseClassName={styles.host}\n      activeMode={styles.active}\n      hoverMode={styles.hover}\n      {...restProps}\n    >\n      {ariaLabel && <VisuallyHidden>{ariaLabel}</VisuallyHidden>}\n      {children}\n    </Tappable>\n  );\n};\n"],"names":["React","Tappable","VisuallyHidden","ModalOutsideButton","children","ariaLabel","restProps","baseClassName","activeMode","hoverMode"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,QAAQ,QAA4B,0BAAuB;AACpE,SAASC,cAAc,QAAQ,sCAAmC;AAclE;;CAEC,GACD,OAAO,MAAMC,qBAAqB;QAAC,EACjCC,QAAQ,EACR,cAAcC,SAAS,EAEC,WADrBC;QAFHF;QACA;;IAGA,qBACE,MAACH;QACCM,aAAa;QACbC,UAAU;QACVC,SAAS;OACLH;;YAEHD,2BAAa,KAACH;0BAAgBG;;YAC9BD;;;AAGP,EAAE"}

package/dist/components/ModalOutsideButtons/ModalOutsideButtons.d.ts

@@ -0,0 +1,6 @@
+import { type FlexProps } from '../Flex/Flex';
+/**
+ * @private
+ */
+export declare const ModalOutsideButtons: ({ className, children, ...restProps }: FlexProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ModalOutsideButtons.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalOutsideButtons.d.ts","sourceRoot":"","sources":["../../../src/components/ModalOutsideButtons/ModalOutsideButtons.tsx"],"names":[],"mappings":"AACA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAGpD;;GAEG;AACH,eAAO,MAAM,mBAAmB,GAAI,uCAAuC,SAAS,4CAMnF,CAAC"}

package/dist/components/ModalOutsideButtons/ModalOutsideButtons.js

@@ -0,0 +1,22 @@
+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 { Flex } from "../Flex/Flex.js";
+/**
+ * @private
+ */ export const ModalOutsideButtons = (_param)=>{
+    var { className, children } = _param, restProps = _object_without_properties(_param, [
+        "className",
+        "children"
+    ]);
+    return /*#__PURE__*/ _jsx(Flex, _object_spread_props(_object_spread({
+        direction: "column",
+        className: classNames("vkuiModalOutsideButtons__host", className)
+    }, restProps), {
+        children: children
+    }));
+};
+
+//# sourceMappingURL=ModalOutsideButtons.js.map

package/dist/components/ModalOutsideButtons/ModalOutsideButtons.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ModalOutsideButtons/ModalOutsideButtons.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport { Flex, type FlexProps } from '../Flex/Flex';\nimport styles from './ModalOutsideButtons.module.css';\n\n/**\n * @private\n */\nexport const ModalOutsideButtons = ({ className, children, ...restProps }: FlexProps) => {\n  return (\n    <Flex direction=\"column\" className={classNames(styles.host, className)} {...restProps}>\n      {children}\n    </Flex>\n  );\n};\n"],"names":["classNames","Flex","ModalOutsideButtons","className","children","restProps","direction"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,IAAI,QAAwB,kBAAe;AAGpD;;CAEC,GACD,OAAO,MAAMC,sBAAsB;QAAC,EAAEC,SAAS,EAAEC,QAAQ,EAA2B,WAAtBC;QAAxBF;QAAWC;;IAC/C,qBACE,KAACH;QAAKK,WAAU;QAASH,WAAWH,4CAAwBG;OAAgBE;kBACzED;;AAGP,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"ModalOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/ModalOverlay/ModalOverlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAIhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAoB9C,MAAM,WAAW,iBACf,SAAQ,kBAAkB,CAAC,cAAc,CAAC,EACxC,UAAU,CAAC,cAAc,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,6DAMtB,iBAAiB,4CAsBnB,CAAC"}
+{"version":3,"file":"ModalOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/ModalOverlay/ModalOverlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,OAAO,CAAC;AAIhD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAoB9C,MAAM,WAAW,iBACf,SAAQ,kBAAkB,CAAC,cAAc,CAAC,EACxC,UAAU,CAAC,cAAc,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;CAC7D;AAED;;GAEG;AACH,eAAO,MAAM,YAAY,GAAI,0DAM1B,iBAAiB,4CAsBnB,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ModalPage.d.ts","sourceRoot":"","sources":["../../../src/components/ModalPage/ModalPage.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAM9C;;GAEG;AACH,eAAO,MAAM,SAAS,+KAenB,cAAc,mDAmEhB,CAAC"}
+{"version":3,"file":"ModalPage.d.ts","sourceRoot":"","sources":["../../../src/components/ModalPage/ModalPage.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAI9C;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,4KAevB,cAAc,mDAgEhB,CAAC"}

package/dist/components/ModalPage/ModalPage.js

@@ -2,15 +2,12 @@
 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 { useId, useMemo } from "react";
+import { useMemo } from "react";
 import { ModalContext } from "../../context/ModalContext.js";
 import { inRange } from "../../helpers/range.js";
-import { getNavId } from "../../lib/getNavId.js";
 import { SNAP_POINT_DETENTS, SNAP_POINT_SAFE_RANGE } from "../../lib/sheet/index.js";
-import { warnOnce } from "../../lib/warnOnce.js";
 import { useModalManager } from "../ModalRoot/useModalManager.js";
 import { ModalPageInternal } from "./ModalPageInternal.js";
-const warn = warnOnce('ModalPage');
 const snapPointCache = new Map();
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalPage
@@ -30,13 +27,8 @@ const snapPointCache = new Map();
         "dynamicContentHeight",
         "keepMounted"
     ]);
-    const generatingId = useId();
-    const id = getNavId({
-        nav,
-        id: idProp
-    }, warn) || generatingId;
     const _useModalManager = useModalManager({
-        id,
+        id: nav || idProp,
         open,
         keepMounted,
         modalOverlayTestId,
@@ -45,9 +37,10 @@ const snapPointCache = new Map();
         onOpened,
         onClose,
         onClosed
-    }), { mounted, shouldPreserveSnapPoint } = _useModalManager, resolvedProps = _object_without_properties(_useModalManager, [
+    }), { mounted, shouldPreserveSnapPoint, id } = _useModalManager, resolvedProps = _object_without_properties(_useModalManager, [
         "mounted",
-        "shouldPreserveSnapPoint"
+        "shouldPreserveSnapPoint",
+        "id"
     ]);
     const snapPoint = useMemo(()=>{
         if (dynamicContentHeight) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ModalPage/ModalPage.tsx"],"sourcesContent":["'use client';\n\nimport { useId, useMemo } from 'react';\nimport { ModalContext } from '../../context/ModalContext';\nimport { inRange } from '../../helpers/range';\nimport { getNavId } from '../../lib/getNavId';\nimport { SNAP_POINT_DETENTS, SNAP_POINT_SAFE_RANGE, type SnapPoint } from '../../lib/sheet';\nimport { warnOnce } from '../../lib/warnOnce';\nimport { useModalManager } from '../ModalRoot/useModalManager';\nimport { ModalPageInternal } from './ModalPageInternal';\nimport type { ModalPageProps } from './types';\n\nconst warn = warnOnce('ModalPage');\n\nconst snapPointCache = new Map<string, Exclude<SnapPoint, 'auto'>>();\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPage\n */\nexport const ModalPage = ({\n  id: idProp,\n  nav,\n  open = false,\n  modalOverlayTestId,\n  noFocusToDialog,\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n  size = 's',\n  settlingHeight = 50,\n  dynamicContentHeight,\n  keepMounted = false,\n  ...restProps\n}: ModalPageProps) => {\n  const generatingId = useId();\n  const id = getNavId({ nav, id: idProp }, warn) || generatingId;\n\n  const { mounted, shouldPreserveSnapPoint, ...resolvedProps } = useModalManager({\n    id,\n    open,\n    keepMounted,\n    modalOverlayTestId,\n    noFocusToDialog,\n    onOpen,\n    onOpened,\n    onClose,\n    onClosed,\n  });\n\n  const snapPoint = useMemo((): SnapPoint => {\n    if (dynamicContentHeight) {\n      return 'auto';\n    }\n\n    if (shouldPreserveSnapPoint) {\n      const snapPointCached = snapPointCache.get(id);\n\n      if (snapPointCached) {\n        return snapPointCached;\n      }\n\n      const nextSnapPoint = transformSettlingHeightToSnapPoint(settlingHeight);\n      snapPointCache.set(id, nextSnapPoint);\n\n      return nextSnapPoint;\n    } else {\n      snapPointCache.delete(id);\n    }\n\n    return transformSettlingHeightToSnapPoint(settlingHeight);\n  }, [id, shouldPreserveSnapPoint, dynamicContentHeight, settlingHeight]);\n\n  if (!mounted) {\n    return null;\n  }\n\n  return (\n    <ModalContext.Provider value={id}>\n      <ModalPageInternal\n        id={id}\n        size={size}\n        aria-labelledby={`${id}-label`}\n        snapPoint={snapPoint}\n        onSnapPointChange={\n          snapPoint !== 'auto' && shouldPreserveSnapPoint\n            ? (snapPoint) => {\n                const snapPointCached = snapPointCache.get(id);\n\n                if (snapPointCached) {\n                  snapPointCached.initial = snapPoint;\n                  snapPointCache.set(id, snapPointCached);\n                }\n              }\n            : undefined\n        }\n        {...resolvedProps}\n        {...restProps}\n      />\n    </ModalContext.Provider>\n  );\n};\n\nfunction transformSettlingHeightToSnapPoint(settlingHeight: number): Exclude<SnapPoint, 'auto'> {\n  const currentSnapPoint = Math.min(\n    Math.max(settlingHeight, SNAP_POINT_SAFE_RANGE.LOWER),\n    SNAP_POINT_DETENTS.LARGE,\n  );\n\n  return {\n    initial: currentSnapPoint,\n    detents: inRange(currentSnapPoint, SNAP_POINT_SAFE_RANGE.LOWER, SNAP_POINT_SAFE_RANGE.HIGHEST)\n      ? [SNAP_POINT_DETENTS.MIN, currentSnapPoint, SNAP_POINT_DETENTS.LARGE]\n      : [SNAP_POINT_DETENTS.MIN, currentSnapPoint],\n  };\n}\n"],"names":["useId","useMemo","ModalContext","inRange","getNavId","SNAP_POINT_DETENTS","SNAP_POINT_SAFE_RANGE","warnOnce","useModalManager","ModalPageInternal","warn","snapPointCache","Map","ModalPage","id","idProp","nav","open","modalOverlayTestId","noFocusToDialog","onOpen","onOpened","onClose","onClosed","size","settlingHeight","dynamicContentHeight","keepMounted","restProps","generatingId","mounted","shouldPreserveSnapPoint","resolvedProps","snapPoint","snapPointCached","get","nextSnapPoint","transformSettlingHeightToSnapPoint","set","delete","Provider","value","aria-labelledby","onSnapPointChange","initial","undefined","currentSnapPoint","Math","min","max","LOWER","LARGE","detents","HIGHEST","MIN"],"mappings":"AAAA;;;;AAEA,SAASA,KAAK,EAAEC,OAAO,QAAQ,QAAQ;AACvC,SAASC,YAAY,QAAQ,gCAA6B;AAC1D,SAASC,OAAO,QAAQ,yBAAsB;AAC9C,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,kBAAkB,EAAEC,qBAAqB,QAAwB,2BAAkB;AAC5F,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,eAAe,QAAQ,kCAA+B;AAC/D,SAASC,iBAAiB,QAAQ,yBAAsB;AAGxD,MAAMC,OAAOH,SAAS;AAEtB,MAAMI,iBAAiB,IAAIC;AAE3B;;CAEC,GACD,OAAO,MAAMC,YAAY;QAAC,EACxBC,IAAIC,MAAM,EACVC,GAAG,EACHC,OAAO,KAAK,EACZC,kBAAkB,EAClBC,eAAe,EACfC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,OAAO,GAAG,EACVC,iBAAiB,EAAE,EACnBC,oBAAoB,EACpBC,cAAc,KAAK,EAEJ,WADZC;QAbHd;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,eAAe7B;IACrB,MAAMc,KAAKV,SAAS;QAAEY;QAAKF,IAAIC;IAAO,GAAGL,SAASmB;IAElD,MAA+DrB,mBAAAA,gBAAgB;QAC7EM;QACAG;QACAU;QACAT;QACAC;QACAC;QACAC;QACAC;QACAC;IACF,IAVM,EAAEO,OAAO,EAAEC,uBAAuB,EAAoB,GAAGvB,kBAAlBwB,2CAAkBxB;QAAvDsB;QAASC;;IAYjB,MAAME,YAAYhC,QAAQ;QACxB,IAAIyB,sBAAsB;YACxB,OAAO;QACT;QAEA,IAAIK,yBAAyB;YAC3B,MAAMG,kBAAkBvB,eAAewB,GAAG,CAACrB;YAE3C,IAAIoB,iBAAiB;gBACnB,OAAOA;YACT;YAEA,MAAME,gBAAgBC,mCAAmCZ;YACzDd,eAAe2B,GAAG,CAACxB,IAAIsB;YAEvB,OAAOA;QACT,OAAO;YACLzB,eAAe4B,MAAM,CAACzB;QACxB;QAEA,OAAOuB,mCAAmCZ;IAC5C,GAAG;QAACX;QAAIiB;QAAyBL;QAAsBD;KAAe;IAEtE,IAAI,CAACK,SAAS;QACZ,OAAO;IACT;IAEA,qBACE,KAAC5B,aAAasC,QAAQ;QAACC,OAAO3B;kBAC5B,cAAA,KAACL;YACCK,IAAIA;YACJU,MAAMA;YACNkB,mBAAiB,GAAG5B,GAAG,MAAM,CAAC;YAC9BmB,WAAWA;YACXU,mBACEV,cAAc,UAAUF,0BACpB,CAACE;gBACC,MAAMC,kBAAkBvB,eAAewB,GAAG,CAACrB;gBAE3C,IAAIoB,iBAAiB;oBACnBA,gBAAgBU,OAAO,GAAGX;oBAC1BtB,eAAe2B,GAAG,CAACxB,IAAIoB;gBACzB;YACF,IACAW;WAEFb,eACAJ;;AAIZ,EAAE;AAEF,SAASS,mCAAmCZ,cAAsB;IAChE,MAAMqB,mBAAmBC,KAAKC,GAAG,CAC/BD,KAAKE,GAAG,CAACxB,gBAAgBnB,sBAAsB4C,KAAK,GACpD7C,mBAAmB8C,KAAK;IAG1B,OAAO;QACLP,SAASE;QACTM,SAASjD,QAAQ2C,kBAAkBxC,sBAAsB4C,KAAK,EAAE5C,sBAAsB+C,OAAO,IACzF;YAAChD,mBAAmBiD,GAAG;YAAER;YAAkBzC,mBAAmB8C,KAAK;SAAC,GACpE;YAAC9C,mBAAmBiD,GAAG;YAAER;SAAiB;IAChD;AACF"}
+{"version":3,"sources":["../../../src/components/ModalPage/ModalPage.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\nimport { ModalContext } from '../../context/ModalContext';\nimport { inRange } from '../../helpers/range';\nimport { SNAP_POINT_DETENTS, SNAP_POINT_SAFE_RANGE, type SnapPoint } from '../../lib/sheet';\nimport { useModalManager } from '../ModalRoot/useModalManager';\nimport { ModalPageInternal } from './ModalPageInternal';\nimport type { ModalPageProps } from './types';\n\nconst snapPointCache = new Map<string, Exclude<SnapPoint, 'auto'>>();\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPage\n */\nexport const ModalPage = ({\n  id: idProp,\n  nav,\n  open = false,\n  modalOverlayTestId,\n  noFocusToDialog,\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n  size = 's',\n  settlingHeight = 50,\n  dynamicContentHeight,\n  keepMounted = false,\n  ...restProps\n}: ModalPageProps) => {\n  const { mounted, shouldPreserveSnapPoint, id, ...resolvedProps } = useModalManager({\n    id: nav || idProp,\n    open,\n    keepMounted,\n    modalOverlayTestId,\n    noFocusToDialog,\n    onOpen,\n    onOpened,\n    onClose,\n    onClosed,\n  });\n\n  const snapPoint = useMemo((): SnapPoint => {\n    if (dynamicContentHeight) {\n      return 'auto';\n    }\n\n    if (shouldPreserveSnapPoint) {\n      const snapPointCached = snapPointCache.get(id);\n\n      if (snapPointCached) {\n        return snapPointCached;\n      }\n\n      const nextSnapPoint = transformSettlingHeightToSnapPoint(settlingHeight);\n      snapPointCache.set(id, nextSnapPoint);\n\n      return nextSnapPoint;\n    } else {\n      snapPointCache.delete(id);\n    }\n\n    return transformSettlingHeightToSnapPoint(settlingHeight);\n  }, [id, shouldPreserveSnapPoint, dynamicContentHeight, settlingHeight]);\n\n  if (!mounted) {\n    return null;\n  }\n\n  return (\n    <ModalContext.Provider value={id}>\n      <ModalPageInternal\n        id={id}\n        size={size}\n        aria-labelledby={`${id}-label`}\n        snapPoint={snapPoint}\n        onSnapPointChange={\n          snapPoint !== 'auto' && shouldPreserveSnapPoint\n            ? (snapPoint) => {\n                const snapPointCached = snapPointCache.get(id);\n\n                if (snapPointCached) {\n                  snapPointCached.initial = snapPoint;\n                  snapPointCache.set(id, snapPointCached);\n                }\n              }\n            : undefined\n        }\n        {...resolvedProps}\n        {...restProps}\n      />\n    </ModalContext.Provider>\n  );\n};\n\nfunction transformSettlingHeightToSnapPoint(settlingHeight: number): Exclude<SnapPoint, 'auto'> {\n  const currentSnapPoint = Math.min(\n    Math.max(settlingHeight, SNAP_POINT_SAFE_RANGE.LOWER),\n    SNAP_POINT_DETENTS.LARGE,\n  );\n\n  return {\n    initial: currentSnapPoint,\n    detents: inRange(currentSnapPoint, SNAP_POINT_SAFE_RANGE.LOWER, SNAP_POINT_SAFE_RANGE.HIGHEST)\n      ? [SNAP_POINT_DETENTS.MIN, currentSnapPoint, SNAP_POINT_DETENTS.LARGE]\n      : [SNAP_POINT_DETENTS.MIN, currentSnapPoint],\n  };\n}\n"],"names":["useMemo","ModalContext","inRange","SNAP_POINT_DETENTS","SNAP_POINT_SAFE_RANGE","useModalManager","ModalPageInternal","snapPointCache","Map","ModalPage","id","idProp","nav","open","modalOverlayTestId","noFocusToDialog","onOpen","onOpened","onClose","onClosed","size","settlingHeight","dynamicContentHeight","keepMounted","restProps","mounted","shouldPreserveSnapPoint","resolvedProps","snapPoint","snapPointCached","get","nextSnapPoint","transformSettlingHeightToSnapPoint","set","delete","Provider","value","aria-labelledby","onSnapPointChange","initial","undefined","currentSnapPoint","Math","min","max","LOWER","LARGE","detents","HIGHEST","MIN"],"mappings":"AAAA;;;;AAEA,SAASA,OAAO,QAAQ,QAAQ;AAChC,SAASC,YAAY,QAAQ,gCAA6B;AAC1D,SAASC,OAAO,QAAQ,yBAAsB;AAC9C,SAASC,kBAAkB,EAAEC,qBAAqB,QAAwB,2BAAkB;AAC5F,SAASC,eAAe,QAAQ,kCAA+B;AAC/D,SAASC,iBAAiB,QAAQ,yBAAsB;AAGxD,MAAMC,iBAAiB,IAAIC;AAE3B;;CAEC,GACD,OAAO,MAAMC,YAAY;QAAC,EACxBC,IAAIC,MAAM,EACVC,GAAG,EACHC,OAAO,KAAK,EACZC,kBAAkB,EAClBC,eAAe,EACfC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,QAAQ,EACRC,OAAO,GAAG,EACVC,iBAAiB,EAAE,EACnBC,oBAAoB,EACpBC,cAAc,KAAK,EAEJ,WADZC;QAbHd;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAmElB,mBAAAA,gBAAgB;QACjFK,IAAIE,OAAOD;QACXE;QACAU;QACAT;QACAC;QACAC;QACAC;QACAC;QACAC;IACF,IAVM,EAAEM,OAAO,EAAEC,uBAAuB,EAAEhB,EAAE,EAAoB,GAAGL,kBAAlBsB,2CAAkBtB;QAA3DoB;QAASC;QAAyBhB;;IAY1C,MAAMkB,YAAY5B,QAAQ;QACxB,IAAIsB,sBAAsB;YACxB,OAAO;QACT;QAEA,IAAII,yBAAyB;YAC3B,MAAMG,kBAAkBtB,eAAeuB,GAAG,CAACpB;YAE3C,IAAImB,iBAAiB;gBACnB,OAAOA;YACT;YAEA,MAAME,gBAAgBC,mCAAmCX;YACzDd,eAAe0B,GAAG,CAACvB,IAAIqB;YAEvB,OAAOA;QACT,OAAO;YACLxB,eAAe2B,MAAM,CAACxB;QACxB;QAEA,OAAOsB,mCAAmCX;IAC5C,GAAG;QAACX;QAAIgB;QAAyBJ;QAAsBD;KAAe;IAEtE,IAAI,CAACI,SAAS;QACZ,OAAO;IACT;IAEA,qBACE,KAACxB,aAAakC,QAAQ;QAACC,OAAO1B;kBAC5B,cAAA,KAACJ;YACCI,IAAIA;YACJU,MAAMA;YACNiB,mBAAiB,GAAG3B,GAAG,MAAM,CAAC;YAC9BkB,WAAWA;YACXU,mBACEV,cAAc,UAAUF,0BACpB,CAACE;gBACC,MAAMC,kBAAkBtB,eAAeuB,GAAG,CAACpB;gBAE3C,IAAImB,iBAAiB;oBACnBA,gBAAgBU,OAAO,GAAGX;oBAC1BrB,eAAe0B,GAAG,CAACvB,IAAImB;gBACzB;YACF,IACAW;WAEFb,eACAH;;AAIZ,EAAE;AAEF,SAASQ,mCAAmCX,cAAsB;IAChE,MAAMoB,mBAAmBC,KAAKC,GAAG,CAC/BD,KAAKE,GAAG,CAACvB,gBAAgBjB,sBAAsByC,KAAK,GACpD1C,mBAAmB2C,KAAK;IAG1B,OAAO;QACLP,SAASE;QACTM,SAAS7C,QAAQuC,kBAAkBrC,sBAAsByC,KAAK,EAAEzC,sBAAsB4C,OAAO,IACzF;YAAC7C,mBAAmB8C,GAAG;YAAER;YAAkBtC,mBAAmB2C,KAAK;SAAC,GACpE;YAAC3C,mBAAmB8C,GAAG;YAAER;SAAiB;IAChD;AACF"}

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

@@ -0,0 +1,8 @@
+import { type HasRef, type HTMLAttributesWithRootRef } from '../../types';
+import { type ModalPageInternalProps } from './ModalPageInternal';
+export interface ModalPageBaseProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'title'>, HasRef<HTMLDivElement>, Pick<ModalPageInternalProps, 'disableContentPanningGesture' | 'header' | 'children' | 'footer' | 'outsideButtons' | 'modalContentTestId' | 'modalDismissButtonTestId' | 'modalDismissButtonLabel' | 'hideCloseButton' | 'onClose'> {
+    isDesktop?: boolean;
+    closable?: boolean;
+}
+export declare const ModalPageBase: React.FC<ModalPageBaseProps>;
+//# sourceMappingURL=ModalPageBase.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalPageBase.d.ts","sourceRoot":"","sources":["../../../src/components/ModalPage/ModalPageBase.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,MAAM,EAAE,KAAK,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAK1E,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAGlE,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EAC9D,MAAM,CAAC,cAAc,CAAC,EACtB,IAAI,CACF,sBAAsB,EACpB,8BAA8B,GAC9B,QAAQ,GACR,UAAU,GACV,QAAQ,GACR,gBAAgB,GAChB,oBAAoB,GACpB,0BAA0B,GAC1B,yBAAyB,GACzB,iBAAiB,GACjB,SAAS,CACZ;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CA0DtD,CAAC"}

package/dist/components/ModalPage/ModalPageBase.js

@@ -0,0 +1,66 @@
+'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 { Icon20Cancel } from "@vkontakte/icons";
+import { classNames, hasReactNode, noop } from "@vkontakte/vkjs";
+import { BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE } from "../../lib/sheet/index.js";
+import { ModalOutsideButton } from "../ModalOutsideButton/ModalOutsideButton.js";
+import { ModalOutsideButtons } from "../ModalOutsideButtons/ModalOutsideButtons.js";
+import { ModalPageContent } from "../ModalPageContent/ModalPageContent.js";
+import { RootComponent } from "../RootComponent/RootComponent.js";
+export const ModalPageBase = (_param)=>{
+    var { isDesktop, getRef, disableContentPanningGesture, header, children, footer, outsideButtons, modalContentTestId, modalDismissButtonTestId, modalDismissButtonLabel, hideCloseButton, closable, onClose = noop } = _param, restProps = _object_without_properties(_param, [
+        "isDesktop",
+        "getRef",
+        "disableContentPanningGesture",
+        "header",
+        "children",
+        "footer",
+        "outsideButtons",
+        "modalContentTestId",
+        "modalDismissButtonTestId",
+        "modalDismissButtonLabel",
+        "hideCloseButton",
+        "closable",
+        "onClose"
+    ]);
+    const disableContentPanningGestureProp = disableContentPanningGesture ? BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE : undefined;
+    const closeButton = hideCloseButton || !isDesktop ? null : /*#__PURE__*/ _jsx(ModalOutsideButton, {
+        "data-testid": modalDismissButtonTestId,
+        onClick: closable ? function handleDismissButtonClick(event) {
+            onClose('click-close-button', event);
+        } : undefined,
+        "aria-label": modalDismissButtonLabel,
+        children: /*#__PURE__*/ _jsx(Icon20Cancel, {})
+    });
+    return /*#__PURE__*/ _jsxs(RootComponent, _object_spread_props(_object_spread({
+        role: "document",
+        baseClassName: "vkuiModalPage__document"
+    }, restProps), {
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                className: classNames("vkuiModalPage__children", isDesktop && "vkuiModalPage__childrenDesktop"),
+                children: [
+                    hasReactNode(header) && header,
+                    /*#__PURE__*/ _jsx(ModalPageContent, _object_spread_props(_object_spread({
+                        getRootRef: getRef,
+                        "data-testid": modalContentTestId
+                    }, disableContentPanningGestureProp), {
+                        children: children
+                    })),
+                    hasReactNode(footer) && footer
+                ]
+            }),
+            isDesktop && (closeButton || outsideButtons) && /*#__PURE__*/ _jsxs(ModalOutsideButtons, {
+                children: [
+                    closeButton,
+                    outsideButtons
+                ]
+            })
+        ]
+    }));
+};
+
+//# sourceMappingURL=ModalPageBase.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ModalPage/ModalPageBase.tsx"],"sourcesContent":["'use client';\n\nimport { Icon20Cancel } from '@vkontakte/icons';\nimport { classNames, hasReactNode, noop } from '@vkontakte/vkjs';\nimport { BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE } from '../../lib/sheet';\nimport { type HasRef, type HTMLAttributesWithRootRef } from '../../types';\nimport { ModalOutsideButton } from '../ModalOutsideButton/ModalOutsideButton';\nimport { ModalOutsideButtons } from '../ModalOutsideButtons/ModalOutsideButtons';\nimport { ModalPageContent } from '../ModalPageContent/ModalPageContent';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { type ModalPageInternalProps } from './ModalPageInternal';\nimport styles from './ModalPage.module.css';\n\nexport interface ModalPageBaseProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'title'>,\n    HasRef<HTMLDivElement>,\n    Pick<\n      ModalPageInternalProps,\n      | 'disableContentPanningGesture'\n      | 'header'\n      | 'children'\n      | 'footer'\n      | 'outsideButtons'\n      | 'modalContentTestId'\n      | 'modalDismissButtonTestId'\n      | 'modalDismissButtonLabel'\n      | 'hideCloseButton'\n      | 'onClose'\n    > {\n  isDesktop?: boolean;\n  closable?: boolean;\n}\n\nexport const ModalPageBase: React.FC<ModalPageBaseProps> = ({\n  isDesktop,\n  getRef,\n  disableContentPanningGesture,\n  header,\n  children,\n  footer,\n  outsideButtons,\n  modalContentTestId,\n  modalDismissButtonTestId,\n  modalDismissButtonLabel,\n  hideCloseButton,\n  closable,\n  onClose = noop,\n  ...restProps\n}) => {\n  const disableContentPanningGestureProp = disableContentPanningGesture\n    ? BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE\n    : undefined;\n\n  const closeButton =\n    hideCloseButton || !isDesktop ? null : (\n      <ModalOutsideButton\n        data-testid={modalDismissButtonTestId}\n        onClick={\n          closable\n            ? function handleDismissButtonClick(event) {\n                onClose('click-close-button', event);\n              }\n            : undefined\n        }\n        aria-label={modalDismissButtonLabel}\n      >\n        <Icon20Cancel />\n      </ModalOutsideButton>\n    );\n\n  return (\n    <RootComponent role=\"document\" baseClassName={styles.document} {...restProps}>\n      <div className={classNames(styles.children, isDesktop && styles.childrenDesktop)}>\n        {hasReactNode(header) && header}\n        <ModalPageContent\n          getRootRef={getRef}\n          data-testid={modalContentTestId}\n          {...disableContentPanningGestureProp}\n        >\n          {children}\n        </ModalPageContent>\n        {hasReactNode(footer) && footer}\n      </div>\n      {isDesktop && (closeButton || outsideButtons) && (\n        <ModalOutsideButtons>\n          {closeButton}\n          {outsideButtons}\n        </ModalOutsideButtons>\n      )}\n    </RootComponent>\n  );\n};\n"],"names":["Icon20Cancel","classNames","hasReactNode","noop","BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE","ModalOutsideButton","ModalOutsideButtons","ModalPageContent","RootComponent","ModalPageBase","isDesktop","getRef","disableContentPanningGesture","header","children","footer","outsideButtons","modalContentTestId","modalDismissButtonTestId","modalDismissButtonLabel","hideCloseButton","closable","onClose","restProps","disableContentPanningGestureProp","undefined","closeButton","data-testid","onClick","handleDismissButtonClick","event","aria-label","role","baseClassName","div","className","getRootRef"],"mappings":"AAAA;;;;;AAEA,SAASA,YAAY,QAAQ,mBAAmB;AAChD,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,mCAAmC,QAAQ,2BAAkB;AAEtE,SAASC,kBAAkB,QAAQ,8CAA2C;AAC9E,SAASC,mBAAmB,QAAQ,gDAA6C;AACjF,SAASC,gBAAgB,QAAQ,0CAAuC;AACxE,SAASC,aAAa,QAAQ,oCAAiC;AAwB/D,OAAO,MAAMC,gBAA8C;QAAC,EAC1DC,SAAS,EACTC,MAAM,EACNC,4BAA4B,EAC5BC,MAAM,EACNC,QAAQ,EACRC,MAAM,EACNC,cAAc,EACdC,kBAAkB,EAClBC,wBAAwB,EACxBC,uBAAuB,EACvBC,eAAe,EACfC,QAAQ,EACRC,UAAUnB,IAAI,EAEf,WADIoB;QAbHb;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,mCAAmCZ,+BACrCR,sCACAqB;IAEJ,MAAMC,cACJN,mBAAmB,CAACV,YAAY,qBAC9B,KAACL;QACCsB,eAAaT;QACbU,SACEP,WACI,SAASQ,yBAAyBC,KAAK;YACrCR,QAAQ,sBAAsBQ;QAChC,IACAL;QAENM,cAAYZ;kBAEZ,cAAA,KAACnB;;IAIP,qBACE,MAACQ;QAAcwB,MAAK;QAAWC,aAAa;OAAuBV;;0BACjE,MAACW;gBAAIC,WAAWlC,sCAA4BS;;oBACzCR,aAAaW,WAAWA;kCACzB,KAACN;wBACC6B,YAAYzB;wBACZgB,eAAaV;uBACTO;kCAEHV;;oBAEFZ,aAAaa,WAAWA;;;YAE1BL,aAAcgB,CAAAA,eAAeV,cAAa,mBACzC,MAACV;;oBACEoB;oBACAV;;;;;AAKX,EAAE"}

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

@@ -12,5 +12,5 @@ export interface ModalPageInternalProps extends Omit<ModalPageProps, 'nav' | 'ke
  *
  * @private
  */
-export declare const ModalPageInternal: ({ open, header, footer, size: desktopMaxWidth, height, children, className, style, snapPoint, onSnapPointChange, getModalContentRef, ModalOverlay, modalOverlayTestId, modalContentTestId, modalDismissButtonTestId, noFocusToDialog, hideCloseButton, preventClose, disableContentPanningGesture, onOpen, onOpened, onClose, onClosed, disableFocusTrap, ...restProps }: ModalPageInternalProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ModalPageInternal: ({ open, header, footer, size: desktopMaxWidth, height, children, className, style, snapPoint, onSnapPointChange, getModalContentRef, ModalOverlay, modalOverlayTestId, modalContentTestId, modalDismissButtonTestId, modalDismissButtonLabel, outsideButtons, noFocusToDialog, hideCloseButton, preventClose, disableContentPanningGesture, restoreFocus, onOpen, onOpened, onClose, onClosed, disableFocusTrap, ...restProps }: ModalPageInternalProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ModalPageInternal.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ModalPageInternal.d.ts","sourceRoot":"","sources":["../../../src/components/ModalPage/ModalPageInternal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAmC,MAAM,OAAO,CAAC;AAQ5E,OAAO,EAEL,KAAK,SAAS,EACd,KAAK,eAAe,EAErB,MAAM,iBAAiB,CAAC;AAOzB,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,8BAA8B,CAAC;AAEtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAc9C,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,cAAc,EAAE,KAAK,GAAG,aAAa,GAAG,gBAAgB,GAAG,sBAAsB,CAAC;IAC/F,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAChD,iBAAiB,CAAC,EAAE,eAAe,CAAC;CACrC;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,6WA0B3B,sBAAsB,4CAyIxB,CAAC"}
+{"version":3,"file":"ModalPageInternal.d.ts","sourceRoot":"","sources":["../../../src/components/ModalPage/ModalPageInternal.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,aAAa,EAAmC,MAAM,OAAO,CAAC;AAQ5E,OAAO,EAAE,KAAK,SAAS,EAAE,KAAK,eAAe,EAAkB,MAAM,iBAAiB,CAAC;AAMvF,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,8BAA8B,CAAC;AAEtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAc9C,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,cAAc,EAAE,KAAK,GAAG,aAAa,GAAG,gBAAgB,GAAG,sBAAsB,CAAC;IAC/F,SAAS,EAAE,SAAS,CAAC;IACrB,YAAY,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;IAChD,iBAAiB,CAAC,EAAE,eAAe,CAAC;CACrC;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,GAAI,iaA6B/B,sBAAsB,4CAyHxB,CAAC"}

package/dist/components/ModalPage/ModalPageInternal.js

@@ -4,21 +4,20 @@ 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 { classNames, noop } from "@vkontakte/vkjs";
 import { mergeStyle } from "../../helpers/mergeStyle.js";
 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 { 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";
+import { ModalPageBase } from "./ModalPageBase.js";
 const transitionStateClassNames = {
     appear: "vkuiModalPage__documentStateEnter",
     appearing: "vkuiModalPage__documentStateEntering",
@@ -32,7 +31,7 @@ const transitionStateClassNames = {
  *
  * @private
  */ export const ModalPageInternal = (_param)=>{
-    var { open, header, footer, size: desktopMaxWidth, height, children, className, style, snapPoint, onSnapPointChange, getModalContentRef, ModalOverlay = ModalOverlayDefault, modalOverlayTestId, modalContentTestId, modalDismissButtonTestId, noFocusToDialog, hideCloseButton, preventClose, disableContentPanningGesture, onOpen, onOpened, onClose = noop, onClosed, disableFocusTrap } = _param, restProps = _object_without_properties(_param, [
+    var { open, header, footer, size: desktopMaxWidth, height, children, className, style, snapPoint, onSnapPointChange, getModalContentRef, ModalOverlay = ModalOverlayDefault, modalOverlayTestId, modalContentTestId, modalDismissButtonTestId, modalDismissButtonLabel = 'Закрыть', outsideButtons, noFocusToDialog, hideCloseButton, preventClose, disableContentPanningGesture, restoreFocus, onOpen, onOpened, onClose = noop, onClosed, disableFocusTrap } = _param, restProps = _object_without_properties(_param, [
         "open",
         "header",
         "footer",
@@ -48,10 +47,13 @@ const transitionStateClassNames = {
         "modalOverlayTestId",
         "modalContentTestId",
         "modalDismissButtonTestId",
+        "modalDismissButtonLabel",
+        "outsideButtons",
         "noFocusToDialog",
         "hideCloseButton",
         "preventClose",
         "disableContentPanningGesture",
+        "restoreFocus",
         "onOpen",
         "onOpened",
         "onClose",
@@ -92,7 +94,6 @@ const transitionStateClassNames = {
     }, 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(isDesktop ? desktopMaxWidth : 's');
     const modalOverlay = /*#__PURE__*/ _jsx(ModalOverlay, {
         getRootRef: setBackdropEl,
@@ -102,12 +103,6 @@ const transitionStateClassNames = {
             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');
@@ -125,33 +120,30 @@ const transitionStateClassNames = {
             modalOverlay,
             /*#__PURE__*/ _jsx(FocusTrap, _object_spread_props(_object_spread({}, restProps), {
                 autoFocus: !noFocusToDialog,
+                restoreFocus: restoreFocus,
                 role: "dialog",
                 "aria-modal": "true",
                 disabled: !opened || hidden || disableFocusTrap,
                 className: classNames(className, "vkuiModalPage__host", isDesktop ? "vkuiModalPage__hostDesktop" : "vkuiModalPage__hostMobile", !isDesktop && (hasCustomPanelHeaderAfter ? "vkuiModalPage__hostMobileSafeAreaInsetTopWithCustomOffset" : "vkuiModalPage__hostMobileSafeAreaInsetTop"), desktopMaxWidthClassName, sizeX === 'regular' && 'vkuiInternalModalPage--sizeX-regular'),
                 style: mergeStyle(mergeStyle(desktopMaxWidthStyle, getHeightCSSVariable(height)), style),
-                children: /*#__PURE__*/ _jsxs("div", _object_spread_props(_object_spread({}, bottomSheetEventHandlers), {
-                    ref: handleSheetRef,
-                    role: "document",
+                children: /*#__PURE__*/ _jsx(ModalPageBase, _object_spread_props(_object_spread({}, bottomSheetEventHandlers), {
+                    getRootRef: handleSheetRef,
+                    getRef: handleSheetScrollRef,
                     style: documentStyle,
-                    className: classNames("vkuiModalPage__document", isDesktop ? "vkuiModalPage__documentDesktop" : "vkuiModalPage__documentMobile", transitionStateClassNames[transitionState]),
+                    className: classNames(isDesktop ? "vkuiModalPage__documentDesktop" : "vkuiModalPage__documentMobile", transitionStateClassNames[transitionState]),
                     onTransitionEnd: onTransitionEnd,
-                    children: [
-                        /*#__PURE__*/ _jsxs("div", {
-                            className: classNames("vkuiModalPage__children", isDesktop && "vkuiModalPage__childrenDesktop"),
-                            children: [
-                                hasReactNode(header) && header,
-                                /*#__PURE__*/ _jsx(ModalPageContent, _object_spread_props(_object_spread({
-                                    getRootRef: handleSheetScrollRef,
-                                    "data-testid": modalContentTestId
-                                }, disableContentPanningGestureProp), {
-                                    children: children
-                                })),
-                                hasReactNode(footer) && footer
-                            ]
-                        }),
-                        closeButton
-                    ]
+                    isDesktop: isDesktop,
+                    disableContentPanningGesture: disableContentPanningGesture,
+                    header: header,
+                    footer: footer,
+                    outsideButtons: outsideButtons,
+                    modalContentTestId: modalContentTestId,
+                    modalDismissButtonTestId: modalDismissButtonTestId,
+                    modalDismissButtonLabel: modalDismissButtonLabel,
+                    hideCloseButton: hideCloseButton,
+                    closable: closable,
+                    onClose: onClose,
+                    children: children
                 }))
             }))
         ]

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

@@ -1 +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 { mergeStyle } from '../../helpers/mergeStyle';\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 {\n  BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE,\n  type SnapPoint,\n  type SnapPointChange,\n  useBottomSheet,\n} 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\n  extends Omit<ModalPageProps, 'nav' | 'keepMounted' | 'settlingHeight' | 'dynamicContentHeight'> {\n  snapPoint: SnapPoint;\n  ModalOverlay?: ComponentType<ModalOverlayProps>;\n  onSnapPointChange?: SnapPointChange;\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  snapPoint,\n  onSnapPointChange,\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  disableFocusTrap,\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      snapPoint,\n      sheetCSSProperty: '--vkui_internal_ModalPageDocument--snapPoint',\n      backdropCSSProperty: '--vkui_internal--modal-overlay--opacity',\n      onSnapPointChange,\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(\n    isDesktop ? desktopMaxWidth : 's',\n  );\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} isDesktop={isDesktop} onKeyDown={handleEscKeyDown}>\n      {modalOverlay}\n      <FocusTrap\n        {...restProps}\n        autoFocus={!noFocusToDialog}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        disabled={!opened || hidden || disableFocusTrap}\n        className={classNames(\n          className,\n          styles.host,\n          isDesktop ? styles.hostDesktop : styles.hostMobile,\n          !isDesktop &&\n            (hasCustomPanelHeaderAfter\n              ? styles.hostMobileSafeAreaInsetTopWithCustomOffset\n              : styles.hostMobileSafeAreaInsetTop),\n          desktopMaxWidthClassName,\n          sizeX === 'regular' && 'vkuiInternalModalPage--sizeX-regular',\n        )}\n        style={mergeStyle(mergeStyle(desktopMaxWidthStyle, getHeightCSSVariable(height)), style)}\n      >\n        <div\n          {...bottomSheetEventHandlers}\n          ref={handleSheetRef}\n          role=\"document\"\n          style={documentStyle}\n          className={classNames(\n            styles.document,\n            isDesktop ? styles.documentDesktop : styles.documentMobile,\n            transitionStateClassNames[transitionState],\n          )}\n          onTransitionEnd={onTransitionEnd}\n        >\n          <div className={classNames(styles.children, isDesktop && styles.childrenDesktop)}>\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['hostDesktopMaxWidthS'],\n  m: styles['hostDesktopMaxWidthM'],\n  l: styles['hostDesktopMaxWidthL'],\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    ? {\n        '--vkui_internal_ModalPage--userHeight':\n          typeof height === 'number' ? `${height}px` : height,\n      }\n    : undefined;\n}\n"],"names":["useCallback","classNames","hasReactNode","noop","mergeStyle","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","snapPoint","onSnapPointChange","getModalContentRef","modalOverlayTestId","modalContentTestId","modalDismissButtonTestId","noFocusToDialog","hideCloseButton","preventClose","disableContentPanningGesture","onOpen","onOpened","onClose","onClosed","disableFocusTrap","restProps","hasCustomPanelHeaderAfter","transitionState","ref","onTransitionEnd","enableAppear","onEnter","onEntered","onExited","opened","hidden","closable","sizeX","isDesktop","bottomSheetEnabled","keyboardOpened","initialStyle","setSheetEl","setSheetScrollEl","setBackdropEl","bottomSheetEventHandlers","blocked","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":"AAAA;;;;;AAEA,SAAiDA,WAAW,QAAQ,QAAQ;AAC5E,SAASC,UAAU,EAAEC,YAAY,EAAEC,IAAI,QAAQ,kBAAkB;AACjE,SAASC,UAAU,QAAQ,8BAA2B;AACtD,SAASC,+BAA+B,QAAQ,iDAA8C;AAC9F,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,uBAAuB,QAAQ,yCAAsC;AAC9E,SAASC,IAAI,EAAEC,UAAU,QAAQ,6BAA0B;AAC3D,SAASC,gBAAgB,QAAoC,+BAAsB;AACnF,SACEC,mCAAmC,EAGnCC,cAAc,QACT,2BAAkB;AAEzB,SAASC,aAAa,QAAQ,8BAA2B;AACzD,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,SAAS,QAAQ,4BAAyB;AACnD,SAASC,kBAAkB,QAAQ,8CAA2C;AAC9E,SAASC,WAAW,QAAQ,gCAA6B;AACzD,SACEC,gBAAgBC,mBAAmB,QAE9B,kCAA+B;AACtC,SAASC,gBAAgB,QAAQ,0CAAuC;AAIxE,MAAMC,4BAA4E;IAChFC,MAAM;IACNC,SAAS;IAETC,KAAK;IACLC,QAAQ;IAERC,OAAO;IACPC,MAAM;AACR;AASA;;;;CAIC,GACD,OAAO,MAAMC,oBAAoB;QAAC,EAChCC,IAAI,EACJC,MAAM,EACNC,MAAM,EACNC,MAAMC,eAAe,EACrBC,MAAM,EACNC,QAAQ,EACRC,SAAS,EACTC,KAAK,EACLC,SAAS,EACTC,iBAAiB,EACjBC,kBAAkB,EAClBtB,eAAeC,mBAAmB,EAClCsB,kBAAkB,EAClBC,kBAAkB,EAClBC,wBAAwB,EACxBC,eAAe,EACfC,eAAe,EACfC,YAAY,EACZC,4BAA4B,EAC5BC,MAAM,EACNC,QAAQ,EACRC,UAAU/C,IAAI,EACdgD,QAAQ,EACRC,gBAAgB,EAEO,WADpBC;QAxBHxB;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAtB;QACAuB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAM,EAAEE,yBAAyB,EAAE,GAAGxC;IACtC,MAAM,CAACyC,iBAAiB,EAAEC,GAAG,EAAEC,eAAe,EAAE,CAAC,GAAG/C,iBAAiCmB,MAAM;QACzF6B,cAAc;QACdC;YACEX,mBAAAA,6BAAAA;QACF;QACAY;YACEX,qBAAAA,+BAAAA;QACF;QACAY;YACEV,qBAAAA,+BAAAA;QACF;IACF;IACA,MAAMW,SAASP,oBAAoB,cAAcA,oBAAoB;IACrE,MAAMQ,SAASR,oBAAoB;IACnC,MAAMS,WAAW,CAAClB,gBAAgBgB;IAElC,MAAM,EAAEG,KAAK,EAAEC,SAAS,EAAE,GAAG7D;IAC7B,MAAM8D,qBAAqB,CAACD,aAAa,CAACpB,gBAAgBS,oBAAoB;IAC9E,MAAM,EAAEO,QAAQM,cAAc,EAAE,GAAG7D,wBAAwB4D;IAE3D,MAAM,CAAC,EAAEE,YAAY,EAAEC,UAAU,EAAEC,gBAAgB,EAAEC,aAAa,EAAE,EAAEC,yBAAyB,GAC7F7D,eAAeuD,oBAAoB;QACjCO,SAASN;QACT9B;QACAqC,kBAAkB;QAClBC,qBAAqB;QACrBrC;QACAsC;YACE3B,QAAQ;QACV;IACF;IACF,MAAM4B,gBAAgBV,iBAClB;QACE,0DAA0D;OACvDC,gBAELA;IACJ,MAAMU,iBAAiBzE,aAA6BgE,YAAYd;IAChE,MAAMwB,uBAAuB1E,aAA6BiE,kBAAkB/B;IAE5E,MAAMyC,mCAAmClC,+BACrCpC,sCACAuE;IACJ,MAAM,CAACC,0BAA0BC,qBAAqB,GAAGC,uBACvDnB,YAAYjC,kBAAkB;IAGhC,MAAMqD,6BACJ,KAACpE;QACCqE,YAAYf;QACZgB,eAAa/C;QACbgD,SAAS5D;QACT6D,SACE1B,WACI,SAAS2B,oBAAoBC,KAAK;YAChC1C,QAAQ,iBAAiB0C;QAC3B,IACAV;;IAIV,MAAMW,cACJhD,mBAAmB,CAACqB,YAAY,qBAC9B,KAAClD;QACCwE,eAAa7C;QACb+C,SACE1B,WACI,SAAS8B,yBAAyBF,KAAK;YACrC1C,QAAQ,sBAAsB0C;QAChC,IACAV;;IAIZ,MAAMa,mBAAmB/F,YACvB,CAAC4F;QACC,IAAI5B,YAAYvD,WAAWmF,WAAWpF,KAAKwF,MAAM,EAAE;YACjD9C,QAAQ;QACV;IACF,GACA;QAACc;QAAUd;KAAQ;IAGrBrC,cAAc,CAACkD;IAEf,qBACE,MAAC9C;QAAY8C,QAAQA;QAAQG,WAAWA;QAAW+B,WAAWF;;YAC3DT;0BACD,KAACvE,mDACKsC;gBACJ6C,WAAW,CAACtD;gBACZuD,MAAK;gBACLC,cAAW;gBACXC,UAAU,CAACvC,UAAUC,UAAUX;gBAC/BhB,WAAWnC,WACTmC,kCAEA8B,wEACA,CAACA,aACEZ,CAAAA,qIAEmC,GACtC6B,0BACAlB,UAAU,aAAa;gBAEzB5B,OAAOjC,WAAWA,WAAWgF,sBAAsBkB,qBAAqBpE,UAAUG;0BAElF,cAAA,MAACkE,+CACK9B;oBACJjB,KAAKuB;oBACLoB,MAAK;oBACL9D,OAAOyC;oBACP1C,WAAWnC,sCAETiE,gFACA7C,yBAAyB,CAACkC,gBAAgB;oBAE5CE,iBAAiBA;;sCAEjB,MAAC8C;4BAAInE,WAAWnC,sCAA4BiE;;gCACzChE,aAAa4B,WAAWA;8CACzB,KAACV;oCACCmE,YAAYP;oCACZQ,eAAa9C;mCACTuC;8CAEH9C;;gCAEFjC,aAAa6B,WAAWA;;;wBAE1B8D;;;;;;AAKX,EAAE;AAEF,MAAMW,4BAA4B;IAChCC,CAAC;IACDC,CAAC;IACDC,CAAC;AACH;AAEA,SAAStB,uBACPpD,kBAAkD,GAAG;IAErD,IAAI,OAAOA,oBAAoB,UAAU;QACvC,OAAO;YAACuE,yBAAyB,CAACvE,gBAAgB;YAAEiD;SAAU;IAChE;IAEA,OAAO;QACLA;QACA,OAAOjD,oBAAoB,WACvB;YAAE,8CAA8C,GAAGA,gBAAgB,EAAE,CAAC;QAAC,IACvEiD;KACL;AACH;AAEA,SAASoB,qBAAqBpE,MAAwB;IACpD,OAAOA,WAAWgD,YACd;QACE,yCACE,OAAOhD,WAAW,WAAW,GAAGA,OAAO,EAAE,CAAC,GAAGA;IACjD,IACAgD;AACN"}
+{"version":3,"sources":["../../../src/components/ModalPage/ModalPageInternal.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentType, type KeyboardEvent, useCallback } from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { mergeStyle } from '../../helpers/mergeStyle';\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 { type SnapPoint, type SnapPointChange, 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 { ModalOutlet } from '../ModalOutlet/ModalOutlet';\nimport {\n  ModalOverlay as ModalOverlayDefault,\n  type ModalOverlayProps,\n} from '../ModalOverlay/ModalOverlay';\nimport { ModalPageBase } from './ModalPageBase';\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\n  extends Omit<ModalPageProps, 'nav' | 'keepMounted' | 'settlingHeight' | 'dynamicContentHeight'> {\n  snapPoint: SnapPoint;\n  ModalOverlay?: ComponentType<ModalOverlayProps>;\n  onSnapPointChange?: SnapPointChange;\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  snapPoint,\n  onSnapPointChange,\n  getModalContentRef,\n  ModalOverlay = ModalOverlayDefault,\n  modalOverlayTestId,\n  modalContentTestId,\n  modalDismissButtonTestId,\n  modalDismissButtonLabel = 'Закрыть',\n  outsideButtons,\n  noFocusToDialog,\n  hideCloseButton,\n  preventClose,\n  disableContentPanningGesture,\n  restoreFocus,\n  onOpen,\n  onOpened,\n  onClose = noop,\n  onClosed,\n  disableFocusTrap,\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      snapPoint,\n      sheetCSSProperty: '--vkui_internal_ModalPageDocument--snapPoint',\n      backdropCSSProperty: '--vkui_internal--modal-overlay--opacity',\n      onSnapPointChange,\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 [desktopMaxWidthClassName, desktopMaxWidthStyle] = resolveDesktopMaxWidth(\n    isDesktop ? desktopMaxWidth : 's',\n  );\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 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} isDesktop={isDesktop} onKeyDown={handleEscKeyDown}>\n      {modalOverlay}\n      <FocusTrap\n        {...restProps}\n        autoFocus={!noFocusToDialog}\n        restoreFocus={restoreFocus}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        disabled={!opened || hidden || disableFocusTrap}\n        className={classNames(\n          className,\n          styles.host,\n          isDesktop ? styles.hostDesktop : styles.hostMobile,\n          !isDesktop &&\n            (hasCustomPanelHeaderAfter\n              ? styles.hostMobileSafeAreaInsetTopWithCustomOffset\n              : styles.hostMobileSafeAreaInsetTop),\n          desktopMaxWidthClassName,\n          sizeX === 'regular' && 'vkuiInternalModalPage--sizeX-regular',\n        )}\n        style={mergeStyle(mergeStyle(desktopMaxWidthStyle, getHeightCSSVariable(height)), style)}\n      >\n        <ModalPageBase\n          {...bottomSheetEventHandlers}\n          getRootRef={handleSheetRef}\n          getRef={handleSheetScrollRef}\n          style={documentStyle}\n          className={classNames(\n            isDesktop ? styles.documentDesktop : styles.documentMobile,\n            transitionStateClassNames[transitionState],\n          )}\n          onTransitionEnd={onTransitionEnd}\n          isDesktop={isDesktop}\n          disableContentPanningGesture={disableContentPanningGesture}\n          header={header}\n          footer={footer}\n          outsideButtons={outsideButtons}\n          modalContentTestId={modalContentTestId}\n          modalDismissButtonTestId={modalDismissButtonTestId}\n          modalDismissButtonLabel={modalDismissButtonLabel}\n          hideCloseButton={hideCloseButton}\n          closable={closable}\n          onClose={onClose}\n        >\n          {children}\n        </ModalPageBase>\n      </FocusTrap>\n    </ModalOutlet>\n  );\n};\n\nconst desktopMaxWidthClassNames = {\n  s: styles['hostDesktopMaxWidthS'],\n  m: styles['hostDesktopMaxWidthM'],\n  l: styles['hostDesktopMaxWidthL'],\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    ? {\n        '--vkui_internal_ModalPage--userHeight':\n          typeof height === 'number' ? `${height}px` : height,\n      }\n    : undefined;\n}\n"],"names":["useCallback","classNames","noop","mergeStyle","useAdaptivityWithJSMediaQueries","useExternRef","useVirtualKeyboardState","Keys","pressedKey","useCSSTransition","useBottomSheet","useScrollLock","useConfigProvider","FocusTrap","ModalOutlet","ModalOverlay","ModalOverlayDefault","ModalPageBase","transitionStateClassNames","appear","appearing","enter","entering","exiting","exited","ModalPageInternal","open","header","footer","size","desktopMaxWidth","height","children","className","style","snapPoint","onSnapPointChange","getModalContentRef","modalOverlayTestId","modalContentTestId","modalDismissButtonTestId","modalDismissButtonLabel","outsideButtons","noFocusToDialog","hideCloseButton","preventClose","disableContentPanningGesture","restoreFocus","onOpen","onOpened","onClose","onClosed","disableFocusTrap","restProps","hasCustomPanelHeaderAfter","transitionState","ref","onTransitionEnd","enableAppear","onEnter","onEntered","onExited","opened","hidden","closable","sizeX","isDesktop","bottomSheetEnabled","keyboardOpened","initialStyle","setSheetEl","setSheetScrollEl","setBackdropEl","bottomSheetEventHandlers","blocked","sheetCSSProperty","backdropCSSProperty","onDismiss","documentStyle","handleSheetRef","handleSheetScrollRef","desktopMaxWidthClassName","desktopMaxWidthStyle","resolveDesktopMaxWidth","modalOverlay","getRootRef","data-testid","visible","onClick","handleBackdropClick","event","undefined","handleEscKeyDown","ESCAPE","onKeyDown","autoFocus","role","aria-modal","disabled","getHeightCSSVariable","getRef","desktopMaxWidthClassNames","s","m","l"],"mappings":"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"}

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

@@ -6,7 +6,7 @@ export type ModalPageCloseReason = 'click-overlay' | 'click-close-button' | 'esc
 type OmittedStyleAttribute = {
     style?: Omit<CSSProperties, 'height' | 'maxWidth' | 'maxHeight'>;
 };
-export interface ModalPageProps extends NavIdProps, Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'id' | 'style'>, OmittedStyleAttribute {
+export interface ModalPageProps extends NavIdProps, Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'id' | 'style'>, Pick<UseFocusTrapProps, 'restoreFocus'>, OmittedStyleAttribute {
     /**
      * Состояние видимости.
      *
@@ -74,6 +74,10 @@ export interface ModalPageProps extends NavIdProps, Omit<HTMLAttributesWithRootR
      * `data-testid` для кнопки закрытия.
      */
     modalDismissButtonTestId?: string;
+    /**
+     * Текст для скринридера
+     */
+    modalDismissButtonLabel?: string;
     /**
      * Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)
      *
@@ -100,6 +104,13 @@ export interface ModalPageProps extends NavIdProps, Omit<HTMLAttributesWithRootR
      * Будет вызвано при окончательном закрытии модалки.
      */
     onClosed?: VoidFunction;
+    /**
+     * Управляющие элементы под кнопкой закрытия.
+     *
+     * Доступно только в `compact`-режиме. Рекомендуется размещать иконки размера 20, обернутые в ModalOutsideButton
+     *
+     */
+    outsideButtons?: React.ReactNode;
     /**
      * Позволяет отключить захват фокуса.
      *

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

@@ -1 +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,EAAE,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,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;IACxB;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;CAClD"}
+{"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,EAAE,KAAK,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAClE,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,IAAI,CAAC,iBAAiB,EAAE,cAAc,CAAC,EACvC,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;;OAEG;IACH,uBAAuB,CAAC,EAAE,MAAM,CAAC;IACjC;;;;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;IACxB;;;;;OAKG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;CAClD"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ModalPage/types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode, Ref, UIEvent } from 'react';\nimport { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\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   * Позволяет отключить захват фокуса.\n   *\n   * Нужно использовать, когда поверх одной модалки открывается другая, чтобы два `FocusTrap` не конфликтовали\n   */\n  disableFocusTrap?: UseFocusTrapProps['disabled'];\n}\n"],"names":[],"mappings":"AAeA,WAuGC"}
+{"version":3,"sources":["../../../src/components/ModalPage/types.ts"],"sourcesContent":["import type { CSSProperties, ReactNode, Ref, UIEvent } from 'react';\nimport { type UseFocusTrapProps } from '../../hooks/useFocusTrap';\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    Pick<UseFocusTrapProps, 'restoreFocus'>,\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   * Текст для скринридера\n   */\n  modalDismissButtonLabel?: 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   * Управляющие элементы под кнопкой закрытия.\n   *\n   * Доступно только в `compact`-режиме. Рекомендуется размещать иконки размера 20, обернутые в ModalOutsideButton\n   *\n   */\n  outsideButtons?: React.ReactNode;\n  /**\n   * Позволяет отключить захват фокуса.\n   *\n   * Нужно использовать, когда поверх одной модалки открывается другая, чтобы два `FocusTrap` не конфликтовали\n   */\n  disableFocusTrap?: UseFocusTrapProps['disabled'];\n}\n"],"names":[],"mappings":"AAeA,WAmHC"}

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

@@ -1 +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"}
+{"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,GAAI,mDAK9B,qBAAqB,4CAUvB,CAAC"}

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

@@ -1 +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,4CAetB,CAAC"}
+{"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,GAAI,oDAK7B,oBAAoB,4CAetB,CAAC"}

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;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"}
+{"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,GAAI,iFAO7B,oBAAoB,KAAG,KAAK,CAAC,SAiC/B,CAAC"}

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;AAM/B,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAG9C;;GAEG;AACH,eAAO,MAAM,SAAS,oHAUnB,cAAc,KAAG,KAAK,CAAC,SAmDzB,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;AAG9C;;GAEG;AACH,eAAO,MAAM,SAAS,GAAI,iHAUvB,cAAc,KAAG,KAAK,CAAC,SAmDzB,CAAC"}