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

package/dist/cssm/components/ModalCard/ModalCardInternal.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/ModalCard/ModalCardInternal.tsx"],"sourcesContent":["'use client';\n\nimport { type ComponentType, type KeyboardEvent, type ReactNode, useCallback } from 'react';\nimport { classNames, noop } from '@vkontakte/vkjs';\nimport { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';\nimport { useExternRef } from '../../hooks/useExternRef';\nimport { useFocusTrap } from '../../hooks/useFocusTrap';\nimport { usePlatform } from '../../hooks/usePlatform';\nimport { useVirtualKeyboardState } from '../../hooks/useVirtualKeyboardState';\nimport { Keys, pressedKey } from '../../lib/accessibility';\nimport { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation';\nimport { useBottomSheet } from '../../lib/sheet';\nimport { useScrollLock } from '../AppRoot/ScrollContext';\nimport { ModalCardBase } from '../ModalCardBase/ModalCardBase';\nimport { ModalOutlet } from '../ModalOutlet/ModalOutlet';\nimport {\n  ModalOverlay as ModalOverlayDefault,\n  type ModalOverlayProps,\n} from '../ModalOverlay/ModalOverlay';\nimport type { ModalCardProps } from './types';\nimport styles from './ModalCard.module.css';\n\nconst sizeByPlatformClassNames = {\n  vkcom: styles['hostMaxWidthS'],\n  ios: styles['hostMaxWidthM'],\n  android: styles['hostMaxWidthL'],\n};\n\nconst transitionStateClassNames: Partial<Record<UseCSSTransitionState, string>> = {\n  appear: styles['hostStateEnter'],\n  appearing: styles['hostStateEntering'],\n\n  enter: styles['hostStateEnter'],\n  entering: styles['hostStateEntering'],\n\n  exiting: styles['hostStateExiting'],\n  exited: styles['hostStateExited'],\n};\n\nexport interface ModalCardInternalProps extends Omit<ModalCardProps, 'nav' | 'keepMounted'> {\n  ModalOverlay?: ComponentType<ModalOverlayProps>;\n}\n\n/**\n * В компоненте заложена вся логика модального окна.\n *\n * @private\n */\nexport const ModalCardInternal = ({\n  icon,\n  title,\n  titleComponent,\n  description,\n  descriptionComponent,\n  children,\n  actions,\n  size,\n  open,\n  style: styleProp,\n  className,\n  preventClose,\n  ModalOverlay = ModalOverlayDefault,\n  modalOverlayTestId,\n  modalDismissButtonTestId,\n  getRootRef,\n  dismissButtonMode,\n  dismissLabel,\n  noFocusToDialog,\n  onOpen,\n  onOpened,\n  onClose = noop,\n  onClosed,\n  ...restProps\n}: ModalCardInternalProps): ReactNode => {\n  const platform = usePlatform();\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 { isDesktop } = useAdaptivityWithJSMediaQueries();\n  const bottomSheetEnabled = !isDesktop && !preventClose && transitionState !== 'exited';\n\n  const { opened: keyboardOpened } = useVirtualKeyboardState(bottomSheetEnabled);\n  const [{ setSheetEl, setBackdropEl }, bottomSheetEventHandlers] = useBottomSheet(\n    bottomSheetEnabled,\n    {\n      blocked: keyboardOpened,\n      initialSnapPoint: 'auto',\n      sheetCSSProperty: '--vkui_internal_ModalCard--translateY',\n      backdropCSSProperty: '--vkui_internal--modal-overlay--opacity',\n      onDismiss() {\n        onClose?.('swipe-down');\n      },\n    },\n  );\n  const handleRef = useExternRef<HTMLDivElement>(setSheetEl, ref, getRootRef);\n  const style = keyboardOpened\n    ? {\n        ...styleProp,\n        '--vkui_internal_ModalCard--safeAreaInsetBottom': '0px',\n      }\n    : styleProp;\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  useFocusTrap(ref, { autoFocus: !noFocusToDialog, disabled: !opened || hidden });\n\n  return (\n    <ModalOutlet hidden={hidden} onKeyDown={handleEscKeyDown}>\n      {modalOverlay}\n      <ModalCardBase\n        {...restProps}\n        tabIndex={-1}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        getRootRef={handleRef}\n        style={style}\n        className={classNames(\n          styles.host,\n          sizeByPlatformClassNames[platform],\n          transitionStateClassNames[transitionState],\n          className,\n        )}\n        onTransitionEnd={onTransitionEnd}\n        {...bottomSheetEventHandlers}\n        icon={icon}\n        title={title}\n        titleComponent={titleComponent}\n        description={description}\n        descriptionComponent={descriptionComponent}\n        actions={actions}\n        onClose={() => onClose('click-close-button')}\n        size={size}\n        modalDismissButtonTestId={modalDismissButtonTestId}\n        dismissButtonMode={dismissButtonMode}\n        dismissLabel={dismissLabel}\n      >\n        {children}\n      </ModalCardBase>\n    </ModalOutlet>\n  );\n};\n"],"names":["useCallback","classNames","noop","useAdaptivityWithJSMediaQueries","useExternRef","useFocusTrap","usePlatform","useVirtualKeyboardState","Keys","pressedKey","useCSSTransition","useBottomSheet","useScrollLock","ModalCardBase","ModalOutlet","ModalOverlay","ModalOverlayDefault","styles","sizeByPlatformClassNames","vkcom","ios","android","transitionStateClassNames","appear","appearing","enter","entering","exiting","exited","ModalCardInternal","icon","title","titleComponent","description","descriptionComponent","children","actions","size","open","style","styleProp","className","preventClose","modalOverlayTestId","modalDismissButtonTestId","getRootRef","dismissButtonMode","dismissLabel","noFocusToDialog","onOpen","onOpened","onClose","onClosed","restProps","platform","transitionState","ref","onTransitionEnd","enableAppear","onEnter","onEntered","onExited","opened","hidden","closable","isDesktop","bottomSheetEnabled","keyboardOpened","setSheetEl","setBackdropEl","bottomSheetEventHandlers","blocked","initialSnapPoint","sheetCSSProperty","backdropCSSProperty","onDismiss","handleRef","modalOverlay","data-testid","visible","onClick","handleBackdropClick","event","undefined","handleEscKeyDown","ESCAPE","autoFocus","disabled","onKeyDown","tabIndex","role","aria-modal","host"],"mappings":"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"}

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

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

package/dist/cssm/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/cssm/components/ModalCardBase/ModalCardBase.js

@@ -3,7 +3,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";
@@ -17,7 +16,6 @@ import styles from "./ModalCardBase.module.css";
  */ export const ModalCardBase = ({ icon, title, titleComponent = 'span', description, descriptionComponent = 'span', children, actions, onClose, dismissLabel = 'Скрыть', style, size: sizeProp, modalDismissButtonTestId, dismissButtonMode = 'outside', preventClose, ...restProps })=>{
     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);
@@ -30,7 +28,7 @@ import styles from "./ModalCardBase.module.css";
             ...style
         },
         children: /*#__PURE__*/ _jsxs("div", {
-            className: classNames(styles.container, isSoftwareKeyboardOpened && styles.containerSoftwareKeyboardOpened),
+            className: styles.container,
             children: [
                 hasReactNode(icon) && /*#__PURE__*/ _jsx("div", {
                     className: styles.icon,

package/dist/cssm/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","styles","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","ios","desktop","maxWidth","div","className","container","containerSoftwareKeyboardOpened","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;AACtE,OAAOC,YAAY,6BAA6B;AAwEhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,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,EACZ,GAAGC,WACgB;IACnB,MAAMC,WAAWzB;IACjB,MAAM,EAAE0B,SAAS,EAAE,GAAG5B;IACtB,MAAM6B,2BAA2B5B,cAAc6B,QAAQ;IAEvD,MAAMT,OAAOO,YAAYN,WAAWS;IACpC,MAAMC,eACJ,CAACrB,QACAa,CAAAA,sBAAsB,YACpBG,aAAa,SAAS,CAACC,aAAaJ,sBAAsB,MAAM;IAErE,MAAMS,WAAWlC,aAAaa;IAC9B,MAAMsB,iBAAiBnC,aAAae;IACpC,qBACE,KAACV;QACE,GAAGsB,SAAS;QACbS,eAAerC,WACb,6BACA6B,aAAa,SAASlB,OAAO2B,GAAG,EAChCR,aAAanB,OAAO4B,OAAO,EAC3BL,gBAAgBvB,OAAOuB,YAAY;QAErCZ,OAAO;YACLkB,UAAUjB;YACV,GAAGD,KAAK;QACV;kBAEA,cAAA,MAACmB;YACCC,WAAW1C,WACTW,OAAOgC,SAAS,EAChBZ,4BAA4BpB,OAAOiC,+BAA+B;;gBAGnE3C,aAAaY,uBAAS,KAAC4B;oBAAIC,WAAW/B,OAAOE,IAAI;8BAAGA;;gBACpDZ,aAAaa,wBACZ,KAACL;oBAAMoC,OAAM;oBAAIC,QAAO;oBAAIJ,WAAW/B,OAAOG,KAAK;oBAAEiC,WAAWhC;8BAC7DD;;gBAGJqB,YAAYC,gCAAkB,KAAC7B;oBAAQgB,MAAM;;gBAC7Ca,gCACC,KAAC/B,kBAAkB2C,QAAQ;oBAACC,OAAO;wBAAEC,OAAO;oBAAU;8BACpD,cAAA,KAAC1C;wBAAQkC,WAAW/B,OAAOK,WAAW;wBAAE+B,WAAW9B;kCAChDD;;;gBAKNE;gBAEAjB,aAAakB,0BAAY,KAACsB;oBAAIC,WAAW/B,OAAOQ,OAAO;8BAAGA;;gBAE1DO,sBAAsB,wBACrB,KAAChB;oBACCyC,QAAQ1B;oBACRL,SAASA;oBACTgC,MAAM1B;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","styles","ModalCardBase","icon","title","titleComponent","description","descriptionComponent","children","actions","onClose","dismissLabel","style","size","sizeProp","modalDismissButtonTestId","dismissButtonMode","preventClose","restProps","platform","isDesktop","undefined","withSafeZone","hasTitle","hasDescription","baseClassName","ios","desktop","maxWidth","div","className","container","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;AACtE,OAAOC,YAAY,6BAA6B;AAwEhD;;CAEC,GACD,OAAO,MAAMC,gBAAgB,CAAC,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,EACZ,GAAGC,WACgB;IACnB,MAAMC,WAAWzB;IACjB,MAAM,EAAE0B,SAAS,EAAE,GAAG3B;IAEtB,MAAMoB,OAAOO,YAAYN,WAAWO;IACpC,MAAMC,eACJ,CAACnB,QACAa,CAAAA,sBAAsB,YACpBG,aAAa,SAAS,CAACC,aAAaJ,sBAAsB,MAAM;IAErE,MAAMO,WAAW/B,aAAaY;IAC9B,MAAMoB,iBAAiBhC,aAAac;IACpC,qBACE,KAACV;QACE,GAAGsB,SAAS;QACbO,eAAelC,WACb,6BACA4B,aAAa,SAASlB,OAAOyB,GAAG,EAChCN,aAAanB,OAAO0B,OAAO,EAC3BL,gBAAgBrB,OAAOqB,YAAY;QAErCV,OAAO;YACLgB,UAAUf;YACV,GAAGD,KAAK;QACV;kBAEA,cAAA,MAACiB;YAAIC,WAAW7B,OAAO8B,SAAS;;gBAC7BvC,aAAaW,uBAAS,KAAC0B;oBAAIC,WAAW7B,OAAOE,IAAI;8BAAGA;;gBACpDX,aAAaY,wBACZ,KAACL;oBAAMiC,OAAM;oBAAIC,QAAO;oBAAIH,WAAW7B,OAAOG,KAAK;oBAAE8B,WAAW7B;8BAC7DD;;gBAGJmB,YAAYC,gCAAkB,KAAC3B;oBAAQgB,MAAM;;gBAC7CW,gCACC,KAAC7B,kBAAkBwC,QAAQ;oBAACC,OAAO;wBAAEC,OAAO;oBAAU;8BACpD,cAAA,KAACvC;wBAAQgC,WAAW7B,OAAOK,WAAW;wBAAE4B,WAAW3B;kCAChDD;;;gBAKNE;gBAEAhB,aAAaiB,0BAAY,KAACoB;oBAAIC,WAAW7B,OAAOQ,OAAO;8BAAGA;;gBAE1DO,sBAAsB,wBACrB,KAAChB;oBACCsC,QAAQvB;oBACRL,SAASA;oBACT6B,MAAMvB;8BAELL;;;;;AAMb,EAAE"}

package/dist/cssm/components/ModalCardBase/ModalCardBase.module.css

@@ -4,8 +4,6 @@
   background: var(--vkui--color_background_modal);
   border-radius: 12px;
   padding: 16px;
-  -webkit-margin-after: var(--vkui_internal--safe_area_inset_bottom);
-          margin-block-end: var(--vkui_internal--safe_area_inset_bottom);
   display: flex;
   flex-direction: column;
   justify-content: center;

package/dist/cssm/components/ModalOutlet/ModalOutlet.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@vkontakte/vkjs";
+import styles from "./ModalOutlet.module.css";
+/**
+ * @private
+ */ export const ModalOutlet = ({ className, hidden, children, getRootRef, ...restProps })=>{
+    return /*#__PURE__*/ _jsx("div", {
+        ref: getRootRef,
+        className: classNames(className, styles.host),
+        hidden: hidden,
+        "aria-hidden": hidden,
+        ...restProps,
+        children: children
+    });
+};
+
+//# sourceMappingURL=ModalOutlet.js.map

package/dist/cssm/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","styles","ModalOutlet","className","hidden","children","getRootRef","restProps","div","ref","host","aria-hidden"],"mappings":";AAAA,SAASA,UAAU,QAAQ,kBAAkB;AAE7C,OAAOC,YAAY,2BAA2B;AAO9C;;CAEC,GACD,OAAO,MAAMC,cAAc,CAAC,EAC1BC,SAAS,EACTC,MAAM,EACNC,QAAQ,EACRC,UAAU,EACV,GAAGC,WACc;IACjB,qBACE,KAACC;QACCC,KAAKH;QACLH,WAAWH,WAAWG,WAAWF,OAAOS,IAAI;QAC5CN,QAAQA;QACRO,eAAaP;QACZ,GAAGG,SAAS;kBAEZF;;AAGP,EAAE"}

package/dist/cssm/components/ModalOutlet/ModalOutlet.module.css

@@ -0,0 +1,17 @@
+.host:not([hidden]) {
+  isolation: isolate;
+  position: fixed;
+  inset: 0;
+  z-index: var(--vkui--z_index_modal);
+  overflow: hidden;
+}
+
+/* Desktop */
+
+@media (min-width: 768px) {
+  .host:not([hidden]) {
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+}

package/dist/cssm/components/ModalOverlay/ModalOverlay.js

@@ -0,0 +1,40 @@
+'use client';
+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";
+import styles from "./ModalOverlay.module.css";
+const positionClassNames = {
+    absolute: styles.hostPositionAbsolute,
+    fixed: styles.hostPositionFixed
+};
+const transitionStateClassNames = {
+    appear: styles['hostStateEnter'],
+    appearing: styles['hostStateEntering'],
+    appeared: styles['hostStateEntered'],
+    enter: styles['hostStateEnter'],
+    entering: styles['hostStateEntering'],
+    entered: styles['hostStateEntered'],
+    exit: styles['hostStateExit'],
+    exiting: styles['hostStateExiting'],
+    exited: styles['hostStateExited']
+};
+/**
+ * @private
+ */ export const ModalOverlay = ({ visible = false, position = 'absolute', getRootRef, onClick, ...restProps })=>{
+    const [transitionState, { ref, onTransitionEnd }] = useCSSTransition(visible, {
+        enableAppear: true
+    });
+    const handleRef = useExternRef(getRootRef, ref);
+    return /*#__PURE__*/ _jsx("div", {
+        ...restProps,
+        ref: handleRef,
+        "aria-hidden": "true",
+        hidden: transitionState === 'exited',
+        className: classNames(styles.host, onClick === undefined && styles.nonInteractive, positionClassNames[position], transitionStateClassNames[transitionState]),
+        onClick: onClick,
+        onTransitionEnd: onTransitionEnd
+    });
+};
+
+//# sourceMappingURL=ModalOverlay.js.map

package/dist/cssm/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","styles","positionClassNames","absolute","hostPositionAbsolute","fixed","hostPositionFixed","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","host","undefined","nonInteractive"],"mappings":"AAAA;;AAGA,SAASA,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,YAAY,QAAQ,8BAA2B;AACxD,SAASC,gBAAgB,QAAoC,0CAAuC;AAEpG,OAAOC,YAAY,4BAA4B;AAE/C,MAAMC,qBAAqB;IACzBC,UAAUF,OAAOG,oBAAoB;IACrCC,OAAOJ,OAAOK,iBAAiB;AACjC;AAEA,MAAMC,4BAA4E;IAChFC,QAAQP,MAAM,CAAC,iBAAiB;IAChCQ,WAAWR,MAAM,CAAC,oBAAoB;IACtCS,UAAUT,MAAM,CAAC,mBAAmB;IACpCU,OAAOV,MAAM,CAAC,iBAAiB;IAC/BW,UAAUX,MAAM,CAAC,oBAAoB;IACrCY,SAASZ,MAAM,CAAC,mBAAmB;IACnCa,MAAMb,MAAM,CAAC,gBAAgB;IAC7Bc,SAASd,MAAM,CAAC,mBAAmB;IACnCe,QAAQf,MAAM,CAAC,kBAAkB;AACnC;AAUA;;CAEC,GACD,OAAO,MAAMgB,eAAe,CAAC,EAC3BC,UAAU,KAAK,EACfC,WAAW,UAAU,EACrBC,UAAU,EACVC,OAAO,EACP,GAAGC,WACe;IAClB,MAAM,CAACC,iBAAiB,EAAEC,GAAG,EAAEC,eAAe,EAAE,CAAC,GAAGzB,iBAAiCkB,SAAS;QAC5FQ,cAAc;IAChB;IACA,MAAMC,YAAY5B,aAAaqB,YAAYI;IAE3C,qBACE,KAACI;QACE,GAAGN,SAAS;QACbE,KAAKG;QACLE,eAAY;QACZC,QAAQP,oBAAoB;QAC5BQ,WAAWjC,WACTG,OAAO+B,IAAI,EACXX,YAAYY,aAAahC,OAAOiC,cAAc,EAC9ChC,kBAAkB,CAACiB,SAAS,EAC5BZ,yBAAyB,CAACgB,gBAAgB;QAE5CF,SAASA;QACTI,iBAAiBA;;AAGvB,EAAE"}

package/dist/cssm/components/ModalOverlay/ModalOverlay.module.css

@@ -0,0 +1,71 @@
+.host {
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.4);
+  -webkit-user-select: none;
+     -moz-user-select: none;
+          user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  transition: opacity 0.3s linear;
+  will-change: opacity;
+}
+
+.nonInteractive {
+  pointer-events: none;
+  touch-action: none;
+}
+
+.hostPositionAbsolute {
+  position: absolute;
+}
+
+.hostPositionFixed {
+  position: fixed;
+}
+
+.hostStateEnter {
+  opacity: 0;
+  transition-property: none;
+}
+
+.hostStateEntering {
+  opacity: var(--vkui_internal--modal-overlay--opacity);
+}
+
+.hostStateEntered {
+  opacity: var(--vkui_internal--modal-overlay--opacity);
+}
+
+.hostStateExit {
+  opacity: var(--vkui_internal--modal-overlay--opacity);
+  transition-property: none;
+}
+
+.hostStateExiting {
+  opacity: 0;
+}
+
+.hostStateExited {
+  opacity: 0;
+  transition-property: none;
+}
+
+/* Mobile */
+
+@media (max-width: 767.9px) {
+  .hostStateEntering,
+  .hostStateExiting {
+    transition-duration: var(--vkui--animation_duration_l);
+  }
+}
+
+/* Desktop */
+
+@media (min-width: 768px) {
+  .hostStateEntering {
+    transition-duration: 0.2s;
+  }
+
+  .hostStateExiting {
+    transition-duration: 0.1s;
+  }
+}

package/dist/cssm/components/ModalPage/ModalPage.js

@@ -1,110 +1,43 @@
 'use client';
-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";
-import styles from "./ModalPage.module.css";
-const sizeClassName = {
-    s: styles.sizeS,
-    m: styles.sizeM,
-    l: styles.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 = ({ children, header, size: sizeProp = 's', onOpen, onOpened, onClose, onClosed, settlingHeight, dynamicContentHeight, getModalContentRef, nav, id: idProp, hideCloseButton = false, height, modalContentTestId, modalDismissButtonTestId, getRootRef, preventClose, ...restProps })=>{
-    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
-    ]);
-    const isCloseButtonShown = !hideCloseButton && isDesktop;
-    const size = isDesktop ? sizeProp : 's';
-    const modalContext = React.useContext(ModalRootContext);
-    const { refs } = useModalRegistry(getNavId({
+ */ export const ModalPage = ({ id: idProp, nav, open = false, modalOverlayTestId, noFocusToDialog, onOpen, onOpened, onClose, onClosed, size = 's', settlingHeight = 50, keepMounted = false, ...restProps })=>{
+    const generatingId = useId();
+    const id = getNavId({
         nav,
-        id
-    }, warn), 'page');
-    const rootRef = useExternRef(getRootRef, refs.modalElement);
-    const contextValue = React.useMemo(()=>({
-            labelId: `${id}-label`
-        }), [
-        id
-    ]);
-    return /*#__PURE__*/ _jsx(ModalPageContext.Provider, {
-        value: contextValue,
-        children: /*#__PURE__*/ _jsx(RootComponent, {
-            ...restProps,
-            getRootRef: rootRef,
-            tabIndex: -1,
-            role: "dialog",
-            "aria-modal": "true",
-            "aria-labelledby": contextValue.labelId,
+        id: idProp
+    }, warn) || generatingId;
+    const { mounted, ...resolvedProps } = useModalManager({
+        id,
+        open,
+        keepMounted,
+        modalOverlayTestId,
+        noFocusToDialog,
+        onOpen,
+        onOpened,
+        onClose,
+        onClosed
+    });
+    if (!mounted) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(ModalContext.Provider, {
+        value: id,
+        children: /*#__PURE__*/ _jsx(ModalPageInternal, {
             id: id,
-            baseClassName: classNames(styles.host, platform === 'ios' && styles.ios, isDesktop && styles.desktop, sizeX === 'regular' && 'vkuiInternalModalPage--sizeX-regular', typeof size === 'string' && sizeClassName[size]),
-            children: /*#__PURE__*/ _jsx("div", {
-                className: styles.inWrap,
-                style: {
-                    maxWidth: typeof size === 'number' ? size : undefined,
-                    height
-                },
-                ref: refs.innerElement,
-                children: /*#__PURE__*/ _jsxs("div", {
-                    className: styles.in,
-                    children: [
-                        /*#__PURE__*/ _jsx("div", {
-                            className: styles.header,
-                            ref: refs.headerElement,
-                            children: header
-                        }),
-                        /*#__PURE__*/ _jsxs("div", {
-                            className: styles.contentWrap,
-                            children: [
-                                /*#__PURE__*/ _jsx("div", {
-                                    className: styles.content,
-                                    ref: multiRef(refs.contentElement, getModalContentRef),
-                                    ...modalContentTestId && {
-                                        'data-testid': modalContentTestId
-                                    },
-                                    children: /*#__PURE__*/ _jsx("div", {
-                                        className: styles.contentIn,
-                                        children: children
-                                    })
-                                }),
-                                /*#__PURE__*/ _jsx("div", {
-                                    ref: refs.bottomInset,
-                                    className: styles.bottomInset
-                                })
-                            ]
-                        }),
-                        isCloseButtonShown && /*#__PURE__*/ _jsx(ModalDismissButton, {
-                            "data-testid": modalDismissButtonTestId,
-                            onClick: onClose || modalContext.onClose
-                        })
-                    ]
-                })
-            })
+            size: size,
+            "aria-labelledby": `${id}-label`,
+            settlingHeight: settlingHeight,
+            ...resolvedProps,
+            ...restProps
         })
     });
 };

package/dist/cssm/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","styles","sizeClassName","s","sizeS","m","sizeM","l","sizeL","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","host","ios","desktop","div","className","inWrap","style","maxWidth","undefined","ref","innerElement","in","headerElement","contentWrap","content","contentElement","contentIn","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,CAAC,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,EACnB,GAAGC,WACY;IACf,MAAMC,eAAetB;IACrB,MAAMQ,KAAKN,SAAS;QAAEQ;QAAKF,IAAIC;IAAO,GAAGH,SAASgB;IAElD,MAAM,EAAEC,OAAO,EAAE,GAAGC,eAAe,GAAGpB,gBAAgB;QACpDI;QACAG;QACAS;QACAR;QACAC;QACAC;QACAC;QACAC;QACAC;IACF;IAEA,IAAI,CAACM,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;YACf,GAAGK,aAAa;YAChB,GAAGH,SAAS;;;AAIrB,EAAE"}