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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ModalCard/types.ts"],"sourcesContent":["import type { UIEvent } from 'react';\nimport type { NavIdProps } from '../../lib/getNavId';\nimport type { UseBottomSheetHandlers } from '../../lib/sheet';\nimport type { ModalCardBaseProps } from '../ModalCardBase/ModalCardBase';\n\nexport type ModalCardCloseReason =\n  | 'click-overlay'\n  | 'click-close-button'\n  | 'escape-key'\n  | 'swipe-down';\n\nexport interface ModalCardProps\n  extends NavIdProps,\n    Omit<ModalCardBaseProps, 'id' | 'onClose' | 'onTransitionEnd' | keyof UseBottomSheetHandlers> {\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   * Отключает фокус на интерактивный элемент после открытия модалки.\n   */\n  noFocusToDialog?: boolean;\n  /**\n   * `data-testid` для оверлея.\n   */\n  modalOverlayTestId?: string;\n  /**\n   * Будет вызвано при начале открытия модалки.\n   */\n  onOpen?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном открытии модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Будет вызвано при начале закрытия модалки.\n   */\n  onClose?: (reason: ModalCardCloseReason, event?: UIEvent<HTMLElement>) => void;\n  /**\n   * Будет вызвано при окончательном закрытии модалки.\n   */\n  onClosed?: VoidFunction;\n}\n"],"names":[],"mappings":"AAWA,WAuCC"}

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

@@ -1 +1 @@
-{"version":3,"file":"ModalCardBase.d.ts","sourceRoot":"","sources":["../../../src/components/ModalCardBase/ModalCardBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAS7D,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAChE;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAEnC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B,oBAAoB,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAEzC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC;;;;;;;;OAQG;IACH,iBAAiB,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IAClD;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,iNAgBvB,kBAAkB,KAAG,KAAK,CAAC,SAgE7B,CAAC"}
+{"version":3,"file":"ModalCardBase.d.ts","sourceRoot":"","sources":["../../../src/components/ModalCardBase/ModalCardBase.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAS7D,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAChE;;;;OAIG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEvB;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB,cAAc,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAEnC;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B,oBAAoB,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAEzC;;;;;;;;;;OAUG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC;;;;;;;;OAQG;IACH,iBAAiB,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,MAAM,CAAC;IAClD;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,iNAgBvB,kBAAkB,KAAG,KAAK,CAAC,SA0D7B,CAAC"}

package/dist/components/ModalCardBase/ModalCardBase.js

@@ -6,7 +6,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { classNames, hasReactNode } from "@vkontakte/vkjs";
 import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries.js";
-import { useKeyboard } from "../../hooks/useKeyboard.js";
 import { usePlatform } from "../../hooks/usePlatform.js";
 import { AdaptivityContext } from "../AdaptivityProvider/AdaptivityContext.js";
 import { RootComponent } from "../RootComponent/RootComponent.js";
@@ -35,7 +34,6 @@ import { ModalCardBaseCloseButton } from "./ModalCardBaseCloseButton.js";
     ]);
     const platform = usePlatform();
     const { isDesktop } = useAdaptivityWithJSMediaQueries();
-    const isSoftwareKeyboardOpened = useKeyboard().isOpened;
     const size = isDesktop ? sizeProp : undefined;
     const withSafeZone = !icon && (dismissButtonMode === 'inside' || platform === 'ios' && !isDesktop && dismissButtonMode !== 'none');
     const hasTitle = hasReactNode(title);
@@ -46,7 +44,7 @@ import { ModalCardBaseCloseButton } from "./ModalCardBaseCloseButton.js";
             maxWidth: size
         }, style),
         children: /*#__PURE__*/ _jsxs("div", {
-            className: classNames("vkuiModalCardBase__container", isSoftwareKeyboardOpened && "vkuiModalCardBase__containerSoftwareKeyboardOpened"),
+            className: "vkuiModalCardBase__container",
             children: [
                 hasReactNode(icon) && /*#__PURE__*/ _jsx("div", {
                     className: "vkuiModalCardBase__icon",

package/dist/components/ModalCardBase/ModalCardBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ModalCardBase/ModalCardBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useKeyboard } from '../../hooks/useKeyboard';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AdaptivityContext } from '../AdaptivityProvider/AdaptivityContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport { ModalCardBaseCloseButton } from './ModalCardBaseCloseButton';\nimport styles from './ModalCardBase.module.css';\n\nexport interface ModalCardBaseProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'title'> {\n  /**\n   * Иконка.\n   *\n   * Может быть компонентом иконки, например, `<Icon56MoneyTransferOutline />`, или `<Avatar size={72} src=\"\" />`\n   */\n  icon?: React.ReactNode;\n\n  /**\n   * Заголовок карточки\n   */\n  title?: React.ReactNode;\n  /* Позволяет поменять тег используемый для заголовка */\n  titleComponent?: React.ElementType;\n\n  /**\n   * Описание\n   */\n  description?: React.ReactNode;\n  /* Позволяет поменять тег используемый для описания */\n  descriptionComponent?: React.ElementType;\n\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `size=\"l\" mode=\"primary\" stretched`\n   * - `size=\"l\" mode=\"secondary\" stretched`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"s\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n\n  onClose?: VoidFunction;\n\n  /**\n   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n   */\n  dismissLabel?: string;\n\n  /**\n   * Задаёт контенту максимальную ширину для десктопной версии.\n   */\n  size?: number;\n\n  /**\n   * `data-testid` для кнопки закрытия\n   */\n  modalDismissButtonTestId?: string;\n  /**\n   * Расположение кнопки закрытия (внутри и вне `popout'a`)\n   *\n   * Доступно только в `compact`-режиме\n   *\n   * На `iOS` в `regular`-режиме всегда включен `inside`\n   *\n   * ⚠️ ВНИМАНИЕ: использование `none` скрывает крестик, это негативно сказывается на пользовательском опыте\n   */\n  dismissButtonMode?: 'inside' | 'outside' | 'none';\n  /**\n   * Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)\n   *\n   * ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте\n   */\n  preventClose?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCardBase\n */\nexport const ModalCardBase = ({\n  icon,\n  title,\n  titleComponent = 'span',\n  description,\n  descriptionComponent = 'span',\n  children,\n  actions,\n  onClose,\n  dismissLabel = 'Скрыть',\n  style,\n  size: sizeProp,\n  modalDismissButtonTestId,\n  dismissButtonMode = 'outside',\n  preventClose,\n  ...restProps\n}: ModalCardBaseProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const isSoftwareKeyboardOpened = useKeyboard().isOpened;\n\n  const size = isDesktop ? sizeProp : undefined;\n  const withSafeZone =\n    !icon &&\n    (dismissButtonMode === 'inside' ||\n      (platform === 'ios' && !isDesktop && dismissButtonMode !== 'none'));\n\n  const hasTitle = hasReactNode(title);\n  const hasDescription = hasReactNode(description);\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        'vkuiInternalModalCardBase',\n        platform === 'ios' && styles.ios,\n        isDesktop && styles.desktop,\n        withSafeZone && styles.withSafeZone,\n      )}\n      style={{\n        maxWidth: size,\n        ...style,\n      }}\n    >\n      <div\n        className={classNames(\n          styles.container,\n          isSoftwareKeyboardOpened && styles.containerSoftwareKeyboardOpened,\n        )}\n      >\n        {hasReactNode(icon) && <div className={styles.icon}>{icon}</div>}\n        {hasReactNode(title) && (\n          <Title level=\"2\" weight=\"2\" className={styles.title} Component={titleComponent}>\n            {title}\n          </Title>\n        )}\n        {hasTitle && hasDescription && <Spacing size={8} />}\n        {hasDescription && (\n          <AdaptivityContext.Provider value={{ sizeY: 'regular' }}>\n            <Subhead className={styles.description} Component={descriptionComponent}>\n              {description}\n            </Subhead>\n          </AdaptivityContext.Provider>\n        )}\n\n        {children}\n\n        {hasReactNode(actions) && <div className={styles.actions}>{actions}</div>}\n\n        {dismissButtonMode !== 'none' && (\n          <ModalCardBaseCloseButton\n            testId={modalDismissButtonTestId}\n            onClose={onClose}\n            mode={dismissButtonMode}\n          >\n            {dismissLabel}\n          </ModalCardBaseCloseButton>\n        )}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivityWithJSMediaQueries","useKeyboard","usePlatform","AdaptivityContext","RootComponent","Spacing","Subhead","Title","ModalCardBaseCloseButton","ModalCardBase","icon","title","titleComponent","description","descriptionComponent","children","actions","onClose","dismissLabel","style","size","sizeProp","modalDismissButtonTestId","dismissButtonMode","preventClose","restProps","platform","isDesktop","isSoftwareKeyboardOpened","isOpened","undefined","withSafeZone","hasTitle","hasDescription","baseClassName","maxWidth","div","className","level","weight","Component","Provider","value","sizeY","testId","mode"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,+BAA+B,QAAQ,iDAA8C;AAC9F,SAASC,WAAW,QAAQ,6BAA0B;AACtD,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,OAAO,QAAQ,wBAAqB;AAC7C,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,KAAK,QAAQ,+BAA4B;AAClD,SAASC,wBAAwB,QAAQ,gCAA6B;AAyEtE;;CAEC,GACD,OAAO,MAAMC,gBAAgB;QAAC,EAC5BC,IAAI,EACJC,KAAK,EACLC,iBAAiB,MAAM,EACvBC,WAAW,EACXC,uBAAuB,MAAM,EAC7BC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,eAAe,QAAQ,EACvBC,KAAK,EACLC,MAAMC,QAAQ,EACdC,wBAAwB,EACxBC,oBAAoB,SAAS,EAC7BC,YAAY,EAEO,WADhBC;QAdHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,MAAME,WAAWxB;IACjB,MAAM,EAAEyB,SAAS,EAAE,GAAG3B;IACtB,MAAM4B,2BAA2B3B,cAAc4B,QAAQ;IAEvD,MAAMT,OAAOO,YAAYN,WAAWS;IACpC,MAAMC,eACJ,CAACrB,QACAa,CAAAA,sBAAsB,YACpBG,aAAa,SAAS,CAACC,aAAaJ,sBAAsB,MAAM;IAErE,MAAMS,WAAWjC,aAAaY;IAC9B,MAAMsB,iBAAiBlC,aAAac;IACpC,qBACE,KAACT,uDACKqB;QACJS,eAAepC,WACb,6BACA4B,aAAa,mCACbC,2CACAI;QAEFZ,OAAO;YACLgB,UAAUf;WACPD;kBAGL,cAAA,MAACiB;YACCC,WAAWvC,2CAET8B;;gBAGD7B,aAAaW,uBAAS,KAAC0B;oBAAIC,SAAS;8BAAgB3B;;gBACpDX,aAAaY,wBACZ,KAACJ;oBAAM+B,OAAM;oBAAIC,QAAO;oBAAIF,SAAS;oBAAgBG,WAAW5B;8BAC7DD;;gBAGJqB,YAAYC,gCAAkB,KAAC5B;oBAAQe,MAAM;;gBAC7Ca,gCACC,KAAC9B,kBAAkBsC,QAAQ;oBAACC,OAAO;wBAAEC,OAAO;oBAAU;8BACpD,cAAA,KAACrC;wBAAQ+B,SAAS;wBAAsBG,WAAW1B;kCAChDD;;;gBAKNE;gBAEAhB,aAAaiB,0BAAY,KAACoB;oBAAIC,SAAS;8BAAmBrB;;gBAE1DO,sBAAsB,wBACrB,KAACf;oBACCoC,QAAQtB;oBACRL,SAASA;oBACT4B,MAAMtB;8BAELL;;;;;AAMb,EAAE"}
+{"version":3,"sources":["../../../src/components/ModalCardBase/ModalCardBase.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames, hasReactNode } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { AdaptivityContext } from '../AdaptivityProvider/AdaptivityContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { Spacing } from '../Spacing/Spacing';\nimport { Subhead } from '../Typography/Subhead/Subhead';\nimport { Title } from '../Typography/Title/Title';\nimport { ModalCardBaseCloseButton } from './ModalCardBaseCloseButton';\nimport styles from './ModalCardBase.module.css';\n\nexport interface ModalCardBaseProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'title'> {\n  /**\n   * Иконка.\n   *\n   * Может быть компонентом иконки, например, `<Icon56MoneyTransferOutline />`, или `<Avatar size={72} src=\"\" />`\n   */\n  icon?: React.ReactNode;\n\n  /**\n   * Заголовок карточки\n   */\n  title?: React.ReactNode;\n  /* Позволяет поменять тег используемый для заголовка */\n  titleComponent?: React.ElementType;\n\n  /**\n   * Описание\n   */\n  description?: React.ReactNode;\n  /* Позволяет поменять тег используемый для описания */\n  descriptionComponent?: React.ElementType;\n\n  /**\n   * Кнопки-действия. Принимает [`Button`](https://vkcom.github.io/VKUI/#/Button) с параметрами:\n   *\n   * - `size=\"l\" mode=\"primary\" stretched`\n   * - `size=\"l\" mode=\"secondary\" stretched`\n   *\n   * Для набора кнопок используйте [`ButtonGroup`](https://vkcom.github.io/VKUI/#/ButtonGroup) с параметрами:\n   *\n   * - `gap=\"s\" mode=\"horizontal\" stretched`\n   * - `gap=\"m\" mode=\"vertical\" stretched`\n   */\n  actions?: React.ReactNode;\n\n  onClose?: VoidFunction;\n\n  /**\n   * Текст кнопки закрытия. Делает ее доступной для ассистивных технологий\n   */\n  dismissLabel?: string;\n\n  /**\n   * Задаёт контенту максимальную ширину для десктопной версии.\n   */\n  size?: number;\n\n  /**\n   * `data-testid` для кнопки закрытия\n   */\n  modalDismissButtonTestId?: string;\n  /**\n   * Расположение кнопки закрытия (внутри и вне `popout'a`)\n   *\n   * Доступно только в `compact`-режиме\n   *\n   * На `iOS` в `regular`-режиме всегда включен `inside`\n   *\n   * ⚠️ ВНИМАНИЕ: использование `none` скрывает крестик, это негативно сказывается на пользовательском опыте\n   */\n  dismissButtonMode?: 'inside' | 'outside' | 'none';\n  /**\n   * Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)\n   *\n   * ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте\n   */\n  preventClose?: boolean;\n}\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalCardBase\n */\nexport const ModalCardBase = ({\n  icon,\n  title,\n  titleComponent = 'span',\n  description,\n  descriptionComponent = 'span',\n  children,\n  actions,\n  onClose,\n  dismissLabel = 'Скрыть',\n  style,\n  size: sizeProp,\n  modalDismissButtonTestId,\n  dismissButtonMode = 'outside',\n  preventClose,\n  ...restProps\n}: ModalCardBaseProps): React.ReactNode => {\n  const platform = usePlatform();\n  const { isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  const size = isDesktop ? sizeProp : undefined;\n  const withSafeZone =\n    !icon &&\n    (dismissButtonMode === 'inside' ||\n      (platform === 'ios' && !isDesktop && dismissButtonMode !== 'none'));\n\n  const hasTitle = hasReactNode(title);\n  const hasDescription = hasReactNode(description);\n  return (\n    <RootComponent\n      {...restProps}\n      baseClassName={classNames(\n        'vkuiInternalModalCardBase',\n        platform === 'ios' && styles.ios,\n        isDesktop && styles.desktop,\n        withSafeZone && styles.withSafeZone,\n      )}\n      style={{\n        maxWidth: size,\n        ...style,\n      }}\n    >\n      <div className={styles.container}>\n        {hasReactNode(icon) && <div className={styles.icon}>{icon}</div>}\n        {hasReactNode(title) && (\n          <Title level=\"2\" weight=\"2\" className={styles.title} Component={titleComponent}>\n            {title}\n          </Title>\n        )}\n        {hasTitle && hasDescription && <Spacing size={8} />}\n        {hasDescription && (\n          <AdaptivityContext.Provider value={{ sizeY: 'regular' }}>\n            <Subhead className={styles.description} Component={descriptionComponent}>\n              {description}\n            </Subhead>\n          </AdaptivityContext.Provider>\n        )}\n\n        {children}\n\n        {hasReactNode(actions) && <div className={styles.actions}>{actions}</div>}\n\n        {dismissButtonMode !== 'none' && (\n          <ModalCardBaseCloseButton\n            testId={modalDismissButtonTestId}\n            onClose={onClose}\n            mode={dismissButtonMode}\n          >\n            {dismissLabel}\n          </ModalCardBaseCloseButton>\n        )}\n      </div>\n    </RootComponent>\n  );\n};\n"],"names":["React","classNames","hasReactNode","useAdaptivityWithJSMediaQueries","usePlatform","AdaptivityContext","RootComponent","Spacing","Subhead","Title","ModalCardBaseCloseButton","ModalCardBase","icon","title","titleComponent","description","descriptionComponent","children","actions","onClose","dismissLabel","style","size","sizeProp","modalDismissButtonTestId","dismissButtonMode","preventClose","restProps","platform","isDesktop","undefined","withSafeZone","hasTitle","hasDescription","baseClassName","maxWidth","div","className","level","weight","Component","Provider","value","sizeY","testId","mode"],"mappings":"AAAA;;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,YAAY,QAAQ,kBAAkB;AAC3D,SAASC,+BAA+B,QAAQ,iDAA8C;AAC9F,SAASC,WAAW,QAAQ,6BAA0B;AAEtD,SAASC,iBAAiB,QAAQ,6CAA0C;AAC5E,SAASC,aAAa,QAAQ,oCAAiC;AAC/D,SAASC,OAAO,QAAQ,wBAAqB;AAC7C,SAASC,OAAO,QAAQ,mCAAgC;AACxD,SAASC,KAAK,QAAQ,+BAA4B;AAClD,SAASC,wBAAwB,QAAQ,gCAA6B;AAyEtE;;CAEC,GACD,OAAO,MAAMC,gBAAgB;QAAC,EAC5BC,IAAI,EACJC,KAAK,EACLC,iBAAiB,MAAM,EACvBC,WAAW,EACXC,uBAAuB,MAAM,EAC7BC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,eAAe,QAAQ,EACvBC,KAAK,EACLC,MAAMC,QAAQ,EACdC,wBAAwB,EACxBC,oBAAoB,SAAS,EAC7BC,YAAY,EAEO,WADhBC;QAdHf;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAC;QACAC;;IAGA,MAAME,WAAWxB;IACjB,MAAM,EAAEyB,SAAS,EAAE,GAAG1B;IAEtB,MAAMmB,OAAOO,YAAYN,WAAWO;IACpC,MAAMC,eACJ,CAACnB,QACAa,CAAAA,sBAAsB,YACpBG,aAAa,SAAS,CAACC,aAAaJ,sBAAsB,MAAM;IAErE,MAAMO,WAAW9B,aAAaW;IAC9B,MAAMoB,iBAAiB/B,aAAaa;IACpC,qBACE,KAACT,uDACKqB;QACJO,eAAejC,WACb,6BACA2B,aAAa,mCACbC,2CACAE;QAEFV,OAAO;YACLc,UAAUb;WACPD;kBAGL,cAAA,MAACe;YAAIC,SAAS;;gBACXnC,aAAaU,uBAAS,KAACwB;oBAAIC,SAAS;8BAAgBzB;;gBACpDV,aAAaW,wBACZ,KAACJ;oBAAM6B,OAAM;oBAAIC,QAAO;oBAAIF,SAAS;oBAAgBG,WAAW1B;8BAC7DD;;gBAGJmB,YAAYC,gCAAkB,KAAC1B;oBAAQe,MAAM;;gBAC7CW,gCACC,KAAC5B,kBAAkBoC,QAAQ;oBAACC,OAAO;wBAAEC,OAAO;oBAAU;8BACpD,cAAA,KAACnC;wBAAQ6B,SAAS;wBAAsBG,WAAWxB;kCAChDD;;;gBAKNE;gBAEAf,aAAagB,0BAAY,KAACkB;oBAAIC,SAAS;8BAAmBnB;;gBAE1DO,sBAAsB,wBACrB,KAACf;oBACCkC,QAAQpB;oBACRL,SAASA;oBACT0B,MAAMpB;8BAELL;;;;;AAMb,EAAE"}

package/dist/components/ModalOutlet/ModalOutlet.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributesWithRootRef } from '../../types';
+export interface ModalOutletProps extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'hidden' | 'aria-hidden'> {
+    hidden?: boolean;
+}
+/**
+ * @private
+ */
+export declare const ModalOutlet: ({ className, hidden, children, getRootRef, ...restProps }: ModalOutletProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ModalOutlet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalOutlet.d.ts","sourceRoot":"","sources":["../../../src/components/ModalOutlet/ModalOutlet.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAG7D,MAAM,WAAW,gBACf,SAAQ,IAAI,CAAC,yBAAyB,CAAC,cAAc,CAAC,EAAE,QAAQ,GAAG,aAAa,CAAC;IACjF,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,8DAMrB,gBAAgB,4CAYlB,CAAC"}

package/dist/components/ModalOutlet/ModalOutlet.js

@@ -0,0 +1,25 @@
+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";
+/**
+ * @private
+ */ export const ModalOutlet = (_param)=>{
+    var { className, hidden, children, getRootRef } = _param, restProps = _object_without_properties(_param, [
+        "className",
+        "hidden",
+        "children",
+        "getRootRef"
+    ]);
+    return /*#__PURE__*/ _jsx("div", _object_spread_props(_object_spread({
+        ref: getRootRef,
+        className: classNames(className, "vkuiModalOutlet__host"),
+        hidden: hidden,
+        "aria-hidden": hidden
+    }, restProps), {
+        children: children
+    }));
+};
+
+//# sourceMappingURL=ModalOutlet.js.map

package/dist/components/ModalOutlet/ModalOutlet.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ModalOutlet/ModalOutlet.tsx"],"sourcesContent":["import { classNames } from '@vkontakte/vkjs';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport styles from './ModalOutlet.module.css';\n\nexport interface ModalOutletProps\n  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'hidden' | 'aria-hidden'> {\n  hidden?: boolean;\n}\n\n/**\n * @private\n */\nexport const ModalOutlet = ({\n  className,\n  hidden,\n  children,\n  getRootRef,\n  ...restProps\n}: ModalOutletProps) => {\n  return (\n    <div\n      ref={getRootRef}\n      className={classNames(className, styles.host)}\n      hidden={hidden}\n      aria-hidden={hidden}\n      {...restProps}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["classNames","ModalOutlet","className","hidden","children","getRootRef","restProps","div","ref","aria-hidden"],"mappings":";;;;AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAS7C;;CAEC,GACD,OAAO,MAAMC,cAAc;QAAC,EAC1BC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,UAAU,EAEO,WADdC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,qBACE,KAACE;QACCC,KAAKH;QACLH,WAAWF,WAAWE;QACtBC,QAAQA;QACRM,eAAaN;OACTG;kBAEHF;;AAGP,EAAE"}

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

@@ -0,0 +1,12 @@
+import type { DataHTMLAttributes } from 'react';
+import type { HasRootRef } from '../../types';
+export interface ModalOverlayProps extends DataHTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement> {
+    visible?: boolean;
+    position?: 'absolute' | 'fixed';
+    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+}
+/**
+ * @private
+ */
+export declare const ModalOverlay: ({ visible, position, getRootRef, onClick, ...restProps }: ModalOverlayProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ModalOverlay.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/ModalOverlay/ModalOverlay.js

@@ -0,0 +1,47 @@
+'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 { useExternRef } from "../../hooks/useExternRef.js";
+import { useCSSTransition } from "../../lib/animation/useCSSTransition.js";
+const positionClassNames = {
+    absolute: "vkuiModalOverlay__hostPositionAbsolute",
+    fixed: "vkuiModalOverlay__hostPositionFixed"
+};
+const transitionStateClassNames = {
+    appear: "vkuiModalOverlay__hostStateEnter",
+    appearing: "vkuiModalOverlay__hostStateEntering",
+    appeared: "vkuiModalOverlay__hostStateEntered",
+    enter: "vkuiModalOverlay__hostStateEnter",
+    entering: "vkuiModalOverlay__hostStateEntering",
+    entered: "vkuiModalOverlay__hostStateEntered",
+    exit: "vkuiModalOverlay__hostStateExit",
+    exiting: "vkuiModalOverlay__hostStateExiting",
+    exited: "vkuiModalOverlay__hostStateExited"
+};
+/**
+ * @private
+ */ export const ModalOverlay = (_param)=>{
+    var { visible = false, position = 'absolute', getRootRef, onClick } = _param, restProps = _object_without_properties(_param, [
+        "visible",
+        "position",
+        "getRootRef",
+        "onClick"
+    ]);
+    const [transitionState, { ref, onTransitionEnd }] = useCSSTransition(visible, {
+        enableAppear: true
+    });
+    const handleRef = useExternRef(getRootRef, ref);
+    return /*#__PURE__*/ _jsx("div", _object_spread_props(_object_spread({}, restProps), {
+        ref: handleRef,
+        "aria-hidden": "true",
+        hidden: transitionState === 'exited',
+        className: classNames("vkuiModalOverlay__host", onClick === undefined && "vkuiModalOverlay__nonInteractive", positionClassNames[position], transitionStateClassNames[transitionState]),
+        onClick: onClick,
+        onTransitionEnd: onTransitionEnd
+    }));
+};
+
+//# sourceMappingURL=ModalOverlay.js.map

package/dist/components/ModalOverlay/ModalOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ModalOverlay/ModalOverlay.tsx"],"sourcesContent":["'use client';\n\nimport type { DataHTMLAttributes } from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation/useCSSTransition';\nimport type { HasRootRef } from '../../types';\nimport styles from './ModalOverlay.module.css';\n\nconst positionClassNames = {\n  absolute: styles.hostPositionAbsolute,\n  fixed: styles.hostPositionFixed,\n};\n\nconst transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>> = {\n  appear: styles['hostStateEnter'],\n  appearing: styles['hostStateEntering'],\n  appeared: styles['hostStateEntered'],\n  enter: styles['hostStateEnter'],\n  entering: styles['hostStateEntering'],\n  entered: styles['hostStateEntered'],\n  exit: styles['hostStateExit'],\n  exiting: styles['hostStateExiting'],\n  exited: styles['hostStateExited'],\n};\n\nexport interface ModalOverlayProps\n  extends DataHTMLAttributes<HTMLDivElement>,\n    HasRootRef<HTMLDivElement> {\n  visible?: boolean;\n  position?: 'absolute' | 'fixed';\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n}\n\n/**\n * @private\n */\nexport const ModalOverlay = ({\n  visible = false,\n  position = 'absolute',\n  getRootRef,\n  onClick,\n  ...restProps\n}: ModalOverlayProps) => {\n  const [transitionState, { ref, onTransitionEnd }] = useCSSTransition<HTMLDivElement>(visible, {\n    enableAppear: true,\n  });\n  const handleRef = useExternRef(getRootRef, ref);\n\n  return (\n    <div\n      {...restProps}\n      ref={handleRef}\n      aria-hidden=\"true\"\n      hidden={transitionState === 'exited'}\n      className={classNames(\n        styles.host,\n        onClick === undefined && styles.nonInteractive,\n        positionClassNames[position],\n        transitionStateClassNames[transitionState],\n      )}\n      onClick={onClick}\n      onTransitionEnd={onTransitionEnd}\n    />\n  );\n};\n"],"names":["classNames","useExternRef","useCSSTransition","positionClassNames","absolute","fixed","transitionStateClassNames","appear","appearing","appeared","enter","entering","entered","exit","exiting","exited","ModalOverlay","visible","position","getRootRef","onClick","restProps","transitionState","ref","onTransitionEnd","enableAppear","handleRef","div","aria-hidden","hidden","className","undefined"],"mappings":"AAAA;;;;;AAGA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,gBAAgB,QAAoC,0CAAuC;AAIpG,MAAMC,qBAAqB;IACzBC,QAAQ;IACRC,KAAK;AACP;AAEA,MAAMC,4BAA4E;IAChFC,MAAM;IACNC,SAAS;IACTC,QAAQ;IACRC,KAAK;IACLC,QAAQ;IACRC,OAAO;IACPC,IAAI;IACJC,OAAO;IACPC,MAAM;AACR;AAUA;;CAEC,GACD,OAAO,MAAMC,eAAe;QAAC,EAC3BC,UAAU,KAAK,EACfC,WAAW,UAAU,EACrBC,UAAU,EACVC,OAAO,EAEW,WADfC;QAJHJ;QACAC;QACAC;QACAC;;IAGA,MAAM,CAACE,iBAAiB,EAAEC,GAAG,EAAEC,eAAe,EAAE,CAAC,GAAGtB,iBAAiCe,SAAS;QAC5FQ,cAAc;IAChB;IACA,MAAMC,YAAYzB,aAAakB,YAAYI;IAE3C,qBACE,KAACI,+CACKN;QACJE,KAAKG;QACLE,eAAY;QACZC,QAAQP,oBAAoB;QAC5BQ,WAAW9B,qCAEToB,YAAYW,iDACZ5B,kBAAkB,CAACe,SAAS,EAC5BZ,yBAAyB,CAACgB,gBAAgB;QAE5CF,SAASA;QACTI,iBAAiBA;;AAGvB,EAAE"}

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

@@ -1,64 +1,6 @@
-import * as React from 'react';
-import { type NavIdProps } from '../../lib/getNavId';
-import type { HTMLAttributesWithRootRef } from '../../types';
-export interface ModalPageProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {
-    /**
-     * Шапка модальной страницы, `<ModalPageHeader />`
-     */
-    header?: React.ReactNode;
-    /**
-     * Задаёт контенту максимальную ширину для десктопной версии.
-     */
-    size?: 's' | 'm' | 'l' | number;
-    /**
-     * Задаёт модальному окну фиксированную высоту.
-     * Можно передать числовое значение в пикселях, а можно строкой, в том числе и в процентах "50%".
-     * В мобильной версии 'settlingHeight' будет считаться относительно заданного height.
-     */
-    height?: string | number;
-    /**
-     * Будет вызвано при начале открытия модалки.
-     */
-    onOpen?: VoidFunction;
-    /**
-     * Будет вызвано при окончательном открытии модалки.
-     */
-    onOpened?: VoidFunction;
-    /**
-     * Будет вызвано при начале закрытия модалки.
-     */
-    onClose?: VoidFunction;
-    /**
-     * Будет вызвано при окончательном закрытии модалки.
-     */
-    onClosed?: VoidFunction;
-    /**
-     * Процент, на который изначально будет открыта модальная страница. При `settlingHeight={100}` модальная страница раскрывается на всю высоту.
-     */
-    settlingHeight?: number;
-    /**
-     * Если высота контента в модальной странице может поменяться, нужно установить это свойство
-     */
-    dynamicContentHeight?: boolean;
-    getModalContentRef?: React.Ref<HTMLDivElement>;
-    /**
-     * Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)
-     */
-    hideCloseButton?: boolean;
-    modalContentTestId?: string;
-    /**
-     * `data-testid` для кнопки закрытия
-     */
-    modalDismissButtonTestId?: string;
-    /**
-     * Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)
-     *
-     * ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте
-     */
-    preventClose?: boolean;
-}
+import type { ModalPageProps } from './types';
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalPage
  */
-export declare const ModalPage: ({ children, header, size: sizeProp, onOpen, onOpened, onClose, onClosed, settlingHeight, dynamicContentHeight, getModalContentRef, nav, id: idProp, hideCloseButton, height, modalContentTestId, modalDismissButtonTestId, getRootRef, preventClose, ...restProps }: ModalPageProps) => React.ReactNode;
+export declare const ModalPage: ({ id: idProp, nav, open, modalOverlayTestId, noFocusToDialog, onOpen, onOpened, onClose, onClosed, size, settlingHeight, keepMounted, ...restProps }: ModalPageProps) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=ModalPage.d.ts.map

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":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAY,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAG/D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAa7D,MAAM,WAAW,cAAe,SAAQ,yBAAyB,CAAC,cAAc,CAAC,EAAE,UAAU;IAC3F;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,MAAM,CAAC;IAChC;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAC/C;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAID;;GAEG;AACH,eAAO,MAAM,SAAS,wQAoBnB,cAAc,KAAG,KAAK,CAAC,SA6EzB,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,yJAcnB,cAAc,mDAgChB,CAAC"}

package/dist/components/ModalPage/ModalPage.js

@@ -1,132 +1,60 @@
 '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 { classNames } from "@vkontakte/vkjs";
-import { useAdaptivityWithJSMediaQueries } from "../../hooks/useAdaptivityWithJSMediaQueries.js";
-import { useExternRef } from "../../hooks/useExternRef.js";
-import { useOrientationChange } from "../../hooks/useOrientationChange.js";
-import { usePlatform } from "../../hooks/usePlatform.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { ModalContext } from "../../context/ModalContext.js";
 import { getNavId } from "../../lib/getNavId.js";
-import { multiRef } from "../../lib/utils.js";
 import { warnOnce } from "../../lib/warnOnce.js";
-import { ModalDismissButton } from "../ModalDismissButton/ModalDismissButton.js";
-import { ModalRootContext, useModalRegistry } from "../ModalRoot/ModalRootContext.js";
-import { RootComponent } from "../RootComponent/RootComponent.js";
-import { ModalPageContext } from "./ModalPageContext.js";
-const sizeClassName = {
-    s: "vkuiModalPage__sizeS",
-    m: "vkuiModalPage__sizeM",
-    l: "vkuiModalPage__sizeL"
-};
+import { useModalManager } from "../ModalRoot/useModalManager.js";
+import { ModalPageInternal } from "./ModalPageInternal.js";
 const warn = warnOnce('ModalPage');
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalPage
  */ export const ModalPage = (_param)=>{
-    var { children, header, size: sizeProp = 's', onOpen, onOpened, onClose, onClosed, settlingHeight, dynamicContentHeight, getModalContentRef, nav, id: idProp, hideCloseButton = false, height, modalContentTestId, modalDismissButtonTestId, getRootRef, preventClose } = _param, restProps = _object_without_properties(_param, [
-        "children",
-        "header",
-        "size",
+    var { id: idProp, nav, open = false, modalOverlayTestId, noFocusToDialog, onOpen, onOpened, onClose, onClosed, size = 's', settlingHeight = 50, keepMounted = false } = _param, restProps = _object_without_properties(_param, [
+        "id",
+        "nav",
+        "open",
+        "modalOverlayTestId",
+        "noFocusToDialog",
         "onOpen",
         "onOpened",
         "onClose",
         "onClosed",
+        "size",
         "settlingHeight",
-        "dynamicContentHeight",
-        "getModalContentRef",
-        "nav",
-        "id",
-        "hideCloseButton",
-        "height",
-        "modalContentTestId",
-        "modalDismissButtonTestId",
-        "getRootRef",
-        "preventClose"
-    ]);
-    const generatingId = React.useId();
-    const id = idProp || generatingId;
-    const { updateModalHeight } = React.useContext(ModalRootContext);
-    const platform = usePlatform();
-    const orientation = useOrientationChange();
-    const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();
-    React.useEffect(()=>{
-        if (dynamicContentHeight) {
-            updateModalHeight();
-        }
-    }, [
-        children,
-        dynamicContentHeight,
-        orientation,
-        updateModalHeight
+        "keepMounted"
     ]);
-    const isCloseButtonShown = !hideCloseButton && isDesktop;
-    const size = isDesktop ? sizeProp : 's';
-    const modalContext = React.useContext(ModalRootContext);
-    const { refs } = useModalRegistry(getNavId({
+    const generatingId = useId();
+    const id = getNavId({
         nav,
-        id
-    }, warn), 'page');
-    const rootRef = useExternRef(getRootRef, refs.modalElement);
-    const contextValue = React.useMemo(()=>({
-            labelId: `${id}-label`
-        }), [
-        id
+        id: idProp
+    }, warn) || generatingId;
+    const _useModalManager = useModalManager({
+        id,
+        open,
+        keepMounted,
+        modalOverlayTestId,
+        noFocusToDialog,
+        onOpen,
+        onOpened,
+        onClose,
+        onClosed
+    }), { mounted } = _useModalManager, resolvedProps = _object_without_properties(_useModalManager, [
+        "mounted"
     ]);
-    return /*#__PURE__*/ _jsx(ModalPageContext.Provider, {
-        value: contextValue,
-        children: /*#__PURE__*/ _jsx(RootComponent, _object_spread_props(_object_spread({}, restProps), {
-            getRootRef: rootRef,
-            tabIndex: -1,
-            role: "dialog",
-            "aria-modal": "true",
-            "aria-labelledby": contextValue.labelId,
+    if (!mounted) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(ModalContext.Provider, {
+        value: id,
+        children: /*#__PURE__*/ _jsx(ModalPageInternal, _object_spread({
             id: id,
-            baseClassName: classNames("vkuiModalPage__host", platform === 'ios' && "vkuiModalPage__ios", isDesktop && "vkuiModalPage__desktop", sizeX === 'regular' && 'vkuiInternalModalPage--sizeX-regular', typeof size === 'string' && sizeClassName[size]),
-            children: /*#__PURE__*/ _jsx("div", {
-                className: "vkuiModalPage__inWrap",
-                style: {
-                    maxWidth: typeof size === 'number' ? size : undefined,
-                    height
-                },
-                ref: refs.innerElement,
-                children: /*#__PURE__*/ _jsxs("div", {
-                    className: "vkuiModalPage__in",
-                    children: [
-                        /*#__PURE__*/ _jsx("div", {
-                            className: "vkuiModalPage__header",
-                            ref: refs.headerElement,
-                            children: header
-                        }),
-                        /*#__PURE__*/ _jsxs("div", {
-                            className: "vkuiModalPage__contentWrap",
-                            children: [
-                                /*#__PURE__*/ _jsx("div", _object_spread_props(_object_spread({
-                                    className: "vkuiModalPage__content",
-                                    ref: multiRef(refs.contentElement, getModalContentRef)
-                                }, modalContentTestId && {
-                                    'data-testid': modalContentTestId
-                                }), {
-                                    children: /*#__PURE__*/ _jsx("div", {
-                                        className: "vkuiModalPage__contentIn",
-                                        children: children
-                                    })
-                                })),
-                                /*#__PURE__*/ _jsx("div", {
-                                    ref: refs.bottomInset,
-                                    className: "vkuiModalPage__bottomInset"
-                                })
-                            ]
-                        }),
-                        isCloseButtonShown && /*#__PURE__*/ _jsx(ModalDismissButton, {
-                            "data-testid": modalDismissButtonTestId,
-                            onClick: onClose || modalContext.onClose
-                        })
-                    ]
-                })
-            })
-        }))
+            size: size,
+            "aria-labelledby": `${id}-label`,
+            settlingHeight: settlingHeight
+        }, resolvedProps, restProps))
     });
 };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ModalPage/ModalPage.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { classNames } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useOrientationChange } from '../../hooks/useOrientationChange';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { getNavId, type NavIdProps } from '../../lib/getNavId';\nimport { multiRef } from '../../lib/utils';\nimport { warnOnce } from '../../lib/warnOnce';\nimport type { HTMLAttributesWithRootRef } from '../../types';\nimport { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';\nimport { ModalRootContext, useModalRegistry } from '../ModalRoot/ModalRootContext';\nimport { RootComponent } from '../RootComponent/RootComponent';\nimport { ModalPageContext } from './ModalPageContext';\nimport styles from './ModalPage.module.css';\n\nconst sizeClassName = {\n  s: styles.sizeS,\n  m: styles.sizeM,\n  l: styles.sizeL,\n};\n\nexport interface ModalPageProps extends HTMLAttributesWithRootRef<HTMLDivElement>, NavIdProps {\n  /**\n   * Шапка модальной страницы, `<ModalPageHeader />`\n   */\n  header?: React.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  onOpen?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном открытии модалки.\n   */\n  onOpened?: VoidFunction;\n  /**\n   * Будет вызвано при начале закрытия модалки.\n   */\n  onClose?: VoidFunction;\n  /**\n   * Будет вызвано при окончательном закрытии модалки.\n   */\n  onClosed?: VoidFunction;\n  /**\n   * Процент, на который изначально будет открыта модальная страница. При `settlingHeight={100}` модальная страница раскрывается на всю высоту.\n   */\n  settlingHeight?: number;\n  /**\n   * Если высота контента в модальной странице может поменяться, нужно установить это свойство\n   */\n  dynamicContentHeight?: boolean;\n  getModalContentRef?: React.Ref<HTMLDivElement>;\n  /**\n   * Скрывает кнопку закрытия (актуально для iOS, т.к. можно отрисовать кнопку закрытия внутри модалки)\n   */\n  hideCloseButton?: boolean;\n  modalContentTestId?: string;\n  /**\n   * `data-testid` для кнопки закрытия\n   */\n  modalDismissButtonTestId?: string;\n  /**\n   * Позволяет отключить возможность закрытия модальной страницы (смахивание, клавиша `ESC`, клик по подложке)\n   *\n   * ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте\n   */\n  preventClose?: boolean;\n}\n\nconst warn = warnOnce('ModalPage');\n\n/**\n * @see https://vkcom.github.io/VKUI/#/ModalPage\n */\nexport const ModalPage = ({\n  children,\n  header,\n  size: sizeProp = 's',\n  onOpen,\n  onOpened,\n  onClose,\n  onClosed,\n  settlingHeight, // 75\n  dynamicContentHeight,\n  getModalContentRef,\n  nav,\n  id: idProp,\n  hideCloseButton = false,\n  height,\n  modalContentTestId,\n  modalDismissButtonTestId,\n  getRootRef,\n  preventClose,\n  ...restProps\n}: ModalPageProps): React.ReactNode => {\n  const generatingId = React.useId();\n  const id = idProp || generatingId;\n\n  const { updateModalHeight } = React.useContext(ModalRootContext);\n\n  const platform = usePlatform();\n  const orientation = useOrientationChange();\n  const { sizeX, isDesktop } = useAdaptivityWithJSMediaQueries();\n\n  React.useEffect(() => {\n    if (dynamicContentHeight) {\n      updateModalHeight();\n    }\n  }, [children, dynamicContentHeight, orientation, updateModalHeight]);\n\n  const isCloseButtonShown = !hideCloseButton && isDesktop;\n  const size = isDesktop ? sizeProp : 's';\n\n  const modalContext = React.useContext(ModalRootContext);\n  const { refs } = useModalRegistry(getNavId({ nav, id }, warn), 'page');\n  const rootRef = useExternRef(getRootRef, refs.modalElement);\n\n  const contextValue = React.useMemo(() => ({ labelId: `${id}-label` }), [id]);\n\n  return (\n    <ModalPageContext.Provider value={contextValue}>\n      <RootComponent\n        {...restProps}\n        getRootRef={rootRef}\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={contextValue.labelId}\n        id={id}\n        baseClassName={classNames(\n          styles.host,\n          platform === 'ios' && styles.ios,\n          isDesktop && styles.desktop,\n          sizeX === 'regular' && 'vkuiInternalModalPage--sizeX-regular',\n          typeof size === 'string' && sizeClassName[size],\n        )}\n      >\n        <div\n          className={styles.inWrap}\n          style={{\n            maxWidth: typeof size === 'number' ? size : undefined,\n            height,\n          }}\n          ref={refs.innerElement}\n        >\n          <div className={styles.in}>\n            <div className={styles.header} ref={refs.headerElement}>\n              {header}\n            </div>\n\n            <div className={styles.contentWrap}>\n              <div\n                className={styles.content}\n                ref={multiRef<HTMLDivElement>(refs.contentElement, getModalContentRef)}\n                {...(modalContentTestId && { 'data-testid': modalContentTestId })}\n              >\n                <div className={styles.contentIn}>{children}</div>\n              </div>\n              <div ref={refs.bottomInset} className={styles.bottomInset} />\n            </div>\n            {isCloseButtonShown && (\n              <ModalDismissButton\n                data-testid={modalDismissButtonTestId}\n                onClick={onClose || modalContext.onClose}\n              />\n            )}\n          </div>\n        </div>\n      </RootComponent>\n    </ModalPageContext.Provider>\n  );\n};\n"],"names":["React","classNames","useAdaptivityWithJSMediaQueries","useExternRef","useOrientationChange","usePlatform","getNavId","multiRef","warnOnce","ModalDismissButton","ModalRootContext","useModalRegistry","RootComponent","ModalPageContext","sizeClassName","s","m","l","warn","ModalPage","children","header","size","sizeProp","onOpen","onOpened","onClose","onClosed","settlingHeight","dynamicContentHeight","getModalContentRef","nav","id","idProp","hideCloseButton","height","modalContentTestId","modalDismissButtonTestId","getRootRef","preventClose","restProps","generatingId","useId","updateModalHeight","useContext","platform","orientation","sizeX","isDesktop","useEffect","isCloseButtonShown","modalContext","refs","rootRef","modalElement","contextValue","useMemo","labelId","Provider","value","tabIndex","role","aria-modal","aria-labelledby","baseClassName","div","className","style","maxWidth","undefined","ref","innerElement","headerElement","contentElement","bottomInset","data-testid","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/ModalPage/ModalPage.tsx"],"sourcesContent":["'use client';\n\nimport { useId } from 'react';\nimport { ModalContext } from '../../context/ModalContext';\nimport { getNavId } from '../../lib/getNavId';\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\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  keepMounted = false,\n  ...restProps\n}: ModalPageProps) => {\n  const generatingId = useId();\n  const id = getNavId({ nav, id: idProp }, warn) || generatingId;\n\n  const { mounted, ...resolvedProps } = useModalManager({\n    id,\n    open,\n    keepMounted,\n    modalOverlayTestId,\n    noFocusToDialog,\n    onOpen,\n    onOpened,\n    onClose,\n    onClosed,\n  });\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        settlingHeight={settlingHeight}\n        {...resolvedProps}\n        {...restProps}\n      />\n    </ModalContext.Provider>\n  );\n};\n"],"names":["useId","ModalContext","getNavId","warnOnce","useModalManager","ModalPageInternal","warn","ModalPage","id","idProp","nav","open","modalOverlayTestId","noFocusToDialog","onOpen","onOpened","onClose","onClosed","size","settlingHeight","keepMounted","restProps","generatingId","mounted","resolvedProps","Provider","value","aria-labelledby"],"mappings":"AAAA;;;;AAEA,SAASA,KAAK,QAAQ,QAAQ;AAC9B,SAASC,YAAY,QAAQ,gCAA6B;AAC1D,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,QAAQ,QAAQ,wBAAqB;AAC9C,SAASC,eAAe,QAAQ,kCAA+B;AAC/D,SAASC,iBAAiB,QAAQ,yBAAsB;AAGxD,MAAMC,OAAOH,SAAS;AAEtB;;CAEC,GACD,OAAO,MAAMI,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,cAAc,KAAK,EAEJ,WADZC;QAZHb;QACAE;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;;IAGA,MAAME,eAAetB;IACrB,MAAMQ,KAAKN,SAAS;QAAEQ;QAAKF,IAAIC;IAAO,GAAGH,SAASgB;IAElD,MAAsClB,mBAAAA,gBAAgB;QACpDI;QACAG;QACAS;QACAR;QACAC;QACAC;QACAC;QACAC;QACAC;IACF,IAVM,EAAEM,OAAO,EAAoB,GAAGnB,kBAAlBoB,2CAAkBpB;QAA9BmB;;IAYR,IAAI,CAACA,SAAS;QACZ,OAAO;IACT;IAEA,qBACE,KAACtB,aAAawB,QAAQ;QAACC,OAAOlB;kBAC5B,cAAA,KAACH;YACCG,IAAIA;YACJU,MAAMA;YACNS,mBAAiB,GAAGnB,GAAG,MAAM,CAAC;YAC9BW,gBAAgBA;WACZK,eACAH;;AAIZ,EAAE"}

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

@@ -0,0 +1,13 @@
+import { type ComponentType } from 'react';
+import { type ModalOverlayProps } from '../ModalOverlay/ModalOverlay';
+import type { ModalPageProps } from './types';
+export interface ModalPageInternalProps extends Omit<ModalPageProps, 'nav' | 'keepMounted'> {
+    ModalOverlay?: ComponentType<ModalOverlayProps>;
+}
+/**
+ * В компоненте заложена вся логика модального окна.
+ *
+ * @private
+ */
+export declare const ModalPageInternal: ({ open, header, footer, size: desktopMaxWidth, height, children, className, style, dynamicContentHeight, settlingHeight, getModalContentRef, ModalOverlay, modalOverlayTestId, modalContentTestId, modalDismissButtonTestId, noFocusToDialog, hideCloseButton, preventClose, disableContentPanningGesture, onOpen, onOpened, onClose, onClosed, ...restProps }: ModalPageInternalProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ModalPageInternal.d.ts.map

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

@@ -0,0 +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;AAc5E,OAAO,EAEL,KAAK,iBAAiB,EACvB,MAAM,8BAA8B,CAAC;AAEtC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAc9C,MAAM,WAAW,sBAAuB,SAAQ,IAAI,CAAC,cAAc,EAAE,KAAK,GAAG,aAAa,CAAC;IACzF,YAAY,CAAC,EAAE,aAAa,CAAC,iBAAiB,CAAC,CAAC;CACjD;AAED;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,mWAyB3B,sBAAsB,4CAoIxB,CAAC"}