@vkontakte/vkui 7.1.3 → 7.2.0

package/src/components/ModalCard/ModalCardInternal.tsx

@@ -66,6 +66,7 @@ export const ModalCardInternal = ({
   dismissButtonMode,
   dismissLabel,
   noFocusToDialog,
+  restoreFocus,
   onOpen,
   onOpened,
   onClose = noop,
@@ -140,6 +141,7 @@ export const ModalCardInternal = ({
   useFocusTrap(ref, {
     autoFocus: !noFocusToDialog,
     disabled: !opened || hidden || disableFocusTrap,
+    restoreFocus,
   });
 
   return (

package/src/components/ModalCard/types.ts

@@ -12,7 +12,8 @@ export type ModalCardCloseReason =
 
 export interface ModalCardProps
   extends NavIdProps,
-    Omit<ModalCardBaseProps, 'id' | 'onClose' | 'onTransitionEnd' | keyof UseBottomSheetHandlers> {
+    Omit<ModalCardBaseProps, 'id' | 'onClose' | 'onTransitionEnd' | keyof UseBottomSheetHandlers>,
+    Pick<UseFocusTrapProps, 'restoreFocus'> {
   /**
    * Состояние видимости.
    *

package/src/components/ModalCardBase/ModalCardBase.module.css

@@ -1,13 +1,13 @@
 .container {
-  box-sizing: border-box;
   position: relative;
-  background: var(--vkui--color_background_modal);
-  border-radius: 12px;
-  padding: 16px;
+  box-sizing: border-box;
   display: flex;
   flex-direction: column;
   justify-content: center;
+  padding: 16px;
   pointer-events: initial;
+  background: var(--vkui--color_background_modal);
+  border-radius: 12px;
   box-shadow: var(--vkui--elevation3);
 
   --vkui_internal--background: var(--vkui--color_background_modal);
@@ -30,10 +30,10 @@
 
 .title,
 .description {
-  text-align: center;
-  margin: 0;
   padding-block: 0;
   padding-inline: 8px;
+  margin: 0;
+  text-align: center;
   word-break: break-word;
 }
 
@@ -59,8 +59,8 @@
   position: absolute;
   inset-block-start: 0;
   inset-inline-end: 0;
-  color: var(--vkui--color_icon_secondary);
   padding: var(--vkui_internal--dismiss_icon_padding);
+  color: var(--vkui--color_icon_secondary);
 }
 
 /**

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -1,16 +1,20 @@
 'use client';
 
 import * as React from 'react';
+import { Icon20Cancel, Icon24Dismiss } from '@vkontakte/icons';
 import { classNames, hasReactNode } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { usePlatform } from '../../hooks/usePlatform';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { AdaptivityContext } from '../AdaptivityProvider/AdaptivityContext';
+import { ModalOutsideButton } from '../ModalOutsideButton/ModalOutsideButton';
+import { ModalOutsideButtons } from '../ModalOutsideButtons/ModalOutsideButtons';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Spacing } from '../Spacing/Spacing';
+import { Tappable } from '../Tappable/Tappable';
 import { Subhead } from '../Typography/Subhead/Subhead';
 import { Title } from '../Typography/Title/Title';
-import { ModalCardBaseCloseButton } from './ModalCardBaseCloseButton';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './ModalCardBase.module.css';
 
 export interface ModalCardBaseProps
@@ -28,6 +32,8 @@ export interface ModalCardBaseProps
   title?: React.ReactNode;
   /* Позволяет поменять тег используемый для заголовка */
   titleComponent?: React.ElementType;
+  /* Позволяет задать id для заголовка. Используется, чтобы связать модальное окно и title через aria-labelledby, тем самым задав модальному окну имя через title */
+  titleId?: string;
 
   /**
    * Описание
@@ -81,6 +87,13 @@ export interface ModalCardBaseProps
    * ⚠️ ВНИМАНИЕ: использование этой опции негативно сказывается на пользовательском опыте
    */
   preventClose?: boolean;
+  /**
+   * Управляющие элементы под кнопкой закрытия.
+   *
+   * Доступно только в `compact`-режиме. Рекомендуется размещать иконки размера 20, обернутые в ModalOutsideButton
+   *
+   */
+  outsideButtons?: React.ReactNode;
 }
 
 /**
@@ -95,11 +108,13 @@ export const ModalCardBase = ({
   children,
   actions,
   onClose,
-  dismissLabel = 'Скрыть',
+  dismissLabel = 'Закрыть',
   size: sizeProp,
   modalDismissButtonTestId,
   dismissButtonMode = 'outside',
   preventClose,
+  outsideButtons,
+  titleId,
   ...restProps
 }: ModalCardBaseProps): React.ReactNode => {
   const platform = usePlatform();
@@ -129,7 +144,13 @@ export const ModalCardBase = ({
       <div className={styles.container}>
         {hasReactNode(icon) && <div className={styles.icon}>{icon}</div>}
         {hasReactNode(title) && (
-          <Title level="2" weight="2" className={styles.title} Component={titleComponent}>
+          <Title
+            id={titleId}
+            level="2"
+            weight="2"
+            className={styles.title}
+            Component={titleComponent}
+          >
             {title}
           </Title>
         )}
@@ -146,14 +167,33 @@ export const ModalCardBase = ({
 
         {hasReactNode(actions) && <div className={styles.actions}>{actions}</div>}
 
-        {dismissButtonMode !== 'none' && (
-          <ModalCardBaseCloseButton
-            testId={modalDismissButtonTestId}
-            onClose={onClose}
-            mode={dismissButtonMode}
+        {isDesktop && (dismissButtonMode === 'outside' || outsideButtons) && (
+          <ModalOutsideButtons>
+            {dismissButtonMode === 'outside' && (
+              <ModalOutsideButton
+                aria-label={dismissLabel}
+                data-testid={modalDismissButtonTestId}
+                onClick={onClose}
+              >
+                <Icon20Cancel />
+              </ModalOutsideButton>
+            )}
+            {outsideButtons}
+          </ModalOutsideButtons>
+        )}
+
+        {(dismissButtonMode === 'inside' ||
+          (platform === 'ios' && !isDesktop && dismissButtonMode !== 'none')) && (
+          <Tappable
+            className={styles.dismiss}
+            onClick={onClose}
+            hoverMode="opacity"
+            activeMode="opacity"
+            data-testid={modalDismissButtonTestId}
           >
-            {dismissLabel}
-          </ModalCardBaseCloseButton>
+            <VisuallyHidden>{dismissLabel}</VisuallyHidden>
+            {platform === 'ios' ? <Icon24Dismiss /> : <Icon20Cancel />}
+          </Tappable>
         )}
       </div>
     </RootComponent>

package/src/components/ModalDismissButton/ModalDismissButton.module.css

@@ -2,32 +2,4 @@
   position: absolute;
   inset-block-start: 0;
   inset-inline-end: -56px;
-  inline-size: 56px;
-  block-size: 56px;
-  padding: 18px;
-  box-sizing: border-box;
-  color: var(--vkui--color_icon_contrast);
-}
-
-.host::before {
-  display: block;
-  content: '';
-  inset: 14px;
-  background: var(--vkui--color_overlay_secondary);
-  border-radius: 50%;
-  position: absolute;
-  transition: background-color 0.15s ease-out;
-}
-
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- fixes icon misplacement on Safari in some cases */
-.host :global(.vkuiIcon) {
-  transform: translateX(0);
-}
-
-.hover::before {
-  background: var(--vkui--color_overlay_secondary--hover);
-}
-
-.active::before {
-  background: var(--vkui--color_overlay_secondary--active);
 }

package/src/components/ModalDismissButton/ModalDismissButton.tsx

@@ -1,27 +1,29 @@
 import * as React from 'react';
 import { Icon20Cancel } from '@vkontakte/icons';
-import { Tappable, type TappableProps } from '../Tappable/Tappable';
+import { classNames } from '@vkontakte/vkjs';
+import {
+  ModalOutsideButton,
+  type ModalOutsideButtonProps,
+} from '../ModalOutsideButton/ModalOutsideButton';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 import styles from './ModalDismissButton.module.css';
 
-export type ModalDismissButtonProps = Omit<TappableProps, 'mode' | 'onClose'>;
+export interface ModalDismissButtonProps extends Omit<ModalOutsideButtonProps, 'children'> {
+  children?: React.ReactNode;
+}
 
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalDismissButton
  */
 export const ModalDismissButton = ({
   children = 'Закрыть',
+  className,
   ...restProps
 }: ModalDismissButtonProps): React.ReactNode => {
   return (
-    <Tappable
-      baseClassName={styles.host}
-      {...restProps}
-      activeMode={styles.active}
-      hoverMode={styles.hover}
-    >
+    <ModalOutsideButton className={classNames(styles.host, className)} {...restProps}>
       {children && <VisuallyHidden>{children}</VisuallyHidden>}
       <Icon20Cancel />
-    </Tappable>
+    </ModalOutsideButton>
   );
 };

package/src/components/ModalOutlet/ModalOutlet.module.css

@@ -1,9 +1,9 @@
 .host:not([hidden]) {
-  isolation: isolate;
   position: fixed;
   inset: 0;
   z-index: var(--vkui--z_index_modal);
   overflow: hidden;
+  isolation: isolate;
 }
 
 /* Desktop */

package/src/components/ModalOutsideButton/ModalOutsideButton.module.css

@@ -0,0 +1,30 @@
+.host {
+  box-sizing: border-box;
+  inline-size: 56px;
+  block-size: 56px;
+  padding: 18px;
+  color: var(--vkui--color_icon_contrast);
+}
+
+.host::before {
+  position: absolute;
+  inset: 14px;
+  display: block;
+  content: '';
+  background: var(--vkui--color_overlay_secondary);
+  border-radius: 50%;
+  transition: background-color 0.15s ease-out;
+}
+
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list -- fixes icon misplacement on Safari in some cases */
+.host :global(.vkuiIcon) {
+  transform: translateX(0);
+}
+
+.hover::before {
+  background: var(--vkui--color_overlay_secondary--hover);
+}
+
+.active::before {
+  background: var(--vkui--color_overlay_secondary--active);
+}

package/src/components/ModalOutsideButton/ModalOutsideButton.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import * as React from 'react';
+import { Tappable, type TappableProps } from '../Tappable/Tappable';
+import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
+import styles from './ModalOutsideButton.module.css';
+
+export interface ModalOutsideButtonProps extends TappableProps {
+  /**
+   * Текст для скринридера
+   */
+  'aria-label'?: string;
+  /**
+   * Рекомендуется использовать иконки размером `20px`
+   */
+  'children': React.ReactNode;
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/ModalOutsideButton
+ */
+export const ModalOutsideButton = ({
+  children,
+  'aria-label': ariaLabel,
+  ...restProps
+}: ModalOutsideButtonProps) => {
+  return (
+    <Tappable
+      baseClassName={styles.host}
+      activeMode={styles.active}
+      hoverMode={styles.hover}
+      {...restProps}
+    >
+      {ariaLabel && <VisuallyHidden>{ariaLabel}</VisuallyHidden>}
+      {children}
+    </Tappable>
+  );
+};

package/src/components/ModalOutsideButtons/ModalOutsideButtons.module.css

@@ -0,0 +1,6 @@
+.host {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-start: 100%;
+  box-sizing: border-box;
+}

package/src/components/ModalOutsideButtons/ModalOutsideButtons.tsx

@@ -0,0 +1,14 @@
+import { classNames } from '@vkontakte/vkjs';
+import { Flex, type FlexProps } from '../Flex/Flex';
+import styles from './ModalOutsideButtons.module.css';
+
+/**
+ * @private
+ */
+export const ModalOutsideButtons = ({ className, children, ...restProps }: FlexProps) => {
+  return (
+    <Flex direction="column" className={classNames(styles.host, className)} {...restProps}>
+      {children}
+    </Flex>
+  );
+};

package/src/components/ModalOverlay/ModalOverlay.module.css

@@ -1,10 +1,10 @@
 .host {
   inset: 0;
-  background-color: rgba(0, 0, 0, 0.4);
   user-select: none;
-  -webkit-tap-highlight-color: transparent;
+  background-color: rgba(0, 0, 0, 0.4);
   transition: opacity 0.3s linear;
   will-change: opacity;
+  -webkit-tap-highlight-color: transparent;
 }
 
 .nonInteractive {

package/src/components/ModalPage/ModalPage.module.css

@@ -11,11 +11,11 @@
   --vkui_internal_ModalPage--userHeight: 100%;
 
   position: absolute;
-  inset-inline: 0;
   inset-block-end: 0;
+  inset-inline: 0;
+  box-sizing: border-box;
   max-inline-size: var(--vkui--size_popup_small--regular);
   pointer-events: none;
-  box-sizing: border-box;
 }
 
 .hostMobileSafeAreaInsetTop {
@@ -36,12 +36,12 @@
   --vkui_internal_ModalPage--userHeight: auto;
 
   position: relative;
-  margin-block: auto;
-  padding-inline: var(--vkui--spacing_size_xl);
-  padding-block: var(--vkui_internal_ModalPage--desktopSafeInsetBlock);
+  box-sizing: content-box;
   max-inline-size: var(--vkui_internal_ModalPage--desktopMaxWidth);
   max-block-size: var(--vkui_internal_ModalPage--desktopMaxHeight);
-  box-sizing: content-box;
+  padding-block: var(--vkui_internal_ModalPage--desktopSafeInsetBlock);
+  padding-inline: var(--vkui--spacing_size_xl);
+  margin-block: auto;
 }
 
 /* Неизвестный брейкпоинт */
@@ -66,7 +66,6 @@
 }
 
 .document {
-  inline-size: 100%;
   box-sizing: border-box;
 
   /*
@@ -75,6 +74,7 @@
   display: flex;
   flex-shrink: 1;
   flex-direction: column;
+  inline-size: 100%;
 }
 
 /* Mobile */
@@ -85,8 +85,8 @@
   );
 
   position: absolute;
-  inset-inline-start: 0;
   inset-block-end: 0;
+  inset-inline-start: 0;
   block-size: var(--vkui_internal_ModalPageDocument--snapPoint);
   max-block-size: 100%;
   padding-block-end: var(--vkui_internal_ModalPageDocument--safeAreaInsetBottom);
@@ -139,13 +139,6 @@
 }
 
 .children {
-  inline-size: 100%;
-  block-size: 100%;
-  border-start-start-radius: var(--vkui--size_border_radius_paper--regular);
-  border-start-end-radius: var(--vkui--size_border_radius_paper--regular);
-  background-color: var(--vkui--color_background_modal);
-  overflow: hidden;
-
   /*
    * Удерживает высоту в пределах 100% родителя при переполнении контента.
    *
@@ -156,11 +149,17 @@
   display: flex;
   flex-shrink: 1;
   flex-direction: column;
+  inline-size: 100%;
+  block-size: 100%;
+  overflow: hidden;
+  background-color: var(--vkui--color_background_modal);
+  border-start-start-radius: var(--vkui--size_border_radius_paper--regular);
+  border-start-end-radius: var(--vkui--size_border_radius_paper--regular);
 }
 
 /* Desktop */
 .childrenDesktop {
-  border-end-end-radius: var(--vkui--size_border_radius_paper--regular);
   border-end-start-radius: var(--vkui--size_border_radius_paper--regular);
+  border-end-end-radius: var(--vkui--size_border_radius_paper--regular);
   box-shadow: var(--vkui--elevation3);
 }

package/src/components/ModalPage/ModalPageBase.tsx

@@ -0,0 +1,92 @@
+'use client';
+
+import { Icon20Cancel } from '@vkontakte/icons';
+import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
+import { BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE } from '../../lib/sheet';
+import { type HasRef, type HTMLAttributesWithRootRef } from '../../types';
+import { ModalOutsideButton } from '../ModalOutsideButton/ModalOutsideButton';
+import { ModalOutsideButtons } from '../ModalOutsideButtons/ModalOutsideButtons';
+import { ModalPageContent } from '../ModalPageContent/ModalPageContent';
+import { RootComponent } from '../RootComponent/RootComponent';
+import { type ModalPageInternalProps } from './ModalPageInternal';
+import styles from './ModalPage.module.css';
+
+export interface ModalPageBaseProps
+  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'title'>,
+    HasRef<HTMLDivElement>,
+    Pick<
+      ModalPageInternalProps,
+      | 'disableContentPanningGesture'
+      | 'header'
+      | 'children'
+      | 'footer'
+      | 'outsideButtons'
+      | 'modalContentTestId'
+      | 'modalDismissButtonTestId'
+      | 'modalDismissButtonLabel'
+      | 'hideCloseButton'
+      | 'onClose'
+    > {
+  isDesktop?: boolean;
+  closable?: boolean;
+}
+
+export const ModalPageBase: React.FC<ModalPageBaseProps> = ({
+  isDesktop,
+  getRef,
+  disableContentPanningGesture,
+  header,
+  children,
+  footer,
+  outsideButtons,
+  modalContentTestId,
+  modalDismissButtonTestId,
+  modalDismissButtonLabel,
+  hideCloseButton,
+  closable,
+  onClose = noop,
+  ...restProps
+}) => {
+  const disableContentPanningGestureProp = disableContentPanningGesture
+    ? BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE
+    : undefined;
+
+  const closeButton =
+    hideCloseButton || !isDesktop ? null : (
+      <ModalOutsideButton
+        data-testid={modalDismissButtonTestId}
+        onClick={
+          closable
+            ? function handleDismissButtonClick(event) {
+                onClose('click-close-button', event);
+              }
+            : undefined
+        }
+        aria-label={modalDismissButtonLabel}
+      >
+        <Icon20Cancel />
+      </ModalOutsideButton>
+    );
+
+  return (
+    <RootComponent role="document" baseClassName={styles.document} {...restProps}>
+      <div className={classNames(styles.children, isDesktop && styles.childrenDesktop)}>
+        {hasReactNode(header) && header}
+        <ModalPageContent
+          getRootRef={getRef}
+          data-testid={modalContentTestId}
+          {...disableContentPanningGestureProp}
+        >
+          {children}
+        </ModalPageContent>
+        {hasReactNode(footer) && footer}
+      </div>
+      {isDesktop && (closeButton || outsideButtons) && (
+        <ModalOutsideButtons>
+          {closeButton}
+          {outsideButtons}
+        </ModalOutsideButtons>
+      )}
+    </RootComponent>
+  );
+};

package/src/components/ModalPage/ModalPageInternal.tsx

@@ -1,30 +1,24 @@
 'use client';
 
 import { type ComponentType, type KeyboardEvent, useCallback } from 'react';
-import { classNames, hasReactNode, noop } from '@vkontakte/vkjs';
+import { classNames, noop } from '@vkontakte/vkjs';
 import { mergeStyle } from '../../helpers/mergeStyle';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useVirtualKeyboardState } from '../../hooks/useVirtualKeyboardState';
 import { Keys, pressedKey } from '../../lib/accessibility';
 import { useCSSTransition, type UseCSSTransitionState } from '../../lib/animation';
-import {
-  BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE,
-  type SnapPoint,
-  type SnapPointChange,
-  useBottomSheet,
-} from '../../lib/sheet';
+import { type SnapPoint, type SnapPointChange, useBottomSheet } from '../../lib/sheet';
 import type { CSSCustomProperties } from '../../types';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
-import { ModalDismissButton } from '../ModalDismissButton/ModalDismissButton';
 import { ModalOutlet } from '../ModalOutlet/ModalOutlet';
 import {
   ModalOverlay as ModalOverlayDefault,
   type ModalOverlayProps,
 } from '../ModalOverlay/ModalOverlay';
-import { ModalPageContent } from '../ModalPageContent/ModalPageContent';
+import { ModalPageBase } from './ModalPageBase';
 import type { ModalPageProps } from './types';
 import styles from './ModalPage.module.css';
 
@@ -67,10 +61,13 @@ export const ModalPageInternal = ({
   modalOverlayTestId,
   modalContentTestId,
   modalDismissButtonTestId,
+  modalDismissButtonLabel = 'Закрыть',
+  outsideButtons,
   noFocusToDialog,
   hideCloseButton,
   preventClose,
   disableContentPanningGesture,
+  restoreFocus,
   onOpen,
   onOpened,
   onClose = noop,
@@ -119,9 +116,6 @@ export const ModalPageInternal = ({
   const handleSheetRef = useExternRef<HTMLDivElement>(setSheetEl, ref);
   const handleSheetScrollRef = useExternRef<HTMLDivElement>(setSheetScrollEl, getModalContentRef);
 
-  const disableContentPanningGestureProp = disableContentPanningGesture
-    ? BLOCK_SHEET_BEHAVIOR_DATA_ATTRIBUTE
-    : undefined;
   const [desktopMaxWidthClassName, desktopMaxWidthStyle] = resolveDesktopMaxWidth(
     isDesktop ? desktopMaxWidth : 's',
   );
@@ -140,19 +134,6 @@ export const ModalPageInternal = ({
       }
     />
   );
-  const closeButton =
-    hideCloseButton || !isDesktop ? null : (
-      <ModalDismissButton
-        data-testid={modalDismissButtonTestId}
-        onClick={
-          closable
-            ? function handleDismissButtonClick(event) {
-                onClose('click-close-button', event);
-              }
-            : undefined
-        }
-      />
-    );
   const handleEscKeyDown = useCallback(
     (event: KeyboardEvent<HTMLElement>) => {
       if (closable && pressedKey(event) === Keys.ESCAPE) {
@@ -170,6 +151,7 @@ export const ModalPageInternal = ({
       <FocusTrap
         {...restProps}
         autoFocus={!noFocusToDialog}
+        restoreFocus={restoreFocus}
         role="dialog"
         aria-modal="true"
         disabled={!opened || hidden || disableFocusTrap}
@@ -186,31 +168,30 @@ export const ModalPageInternal = ({
         )}
         style={mergeStyle(mergeStyle(desktopMaxWidthStyle, getHeightCSSVariable(height)), style)}
       >
-        <div
+        <ModalPageBase
           {...bottomSheetEventHandlers}
-          ref={handleSheetRef}
-          role="document"
+          getRootRef={handleSheetRef}
+          getRef={handleSheetScrollRef}
           style={documentStyle}
           className={classNames(
-            styles.document,
             isDesktop ? styles.documentDesktop : styles.documentMobile,
             transitionStateClassNames[transitionState],
           )}
           onTransitionEnd={onTransitionEnd}
+          isDesktop={isDesktop}
+          disableContentPanningGesture={disableContentPanningGesture}
+          header={header}
+          footer={footer}
+          outsideButtons={outsideButtons}
+          modalContentTestId={modalContentTestId}
+          modalDismissButtonTestId={modalDismissButtonTestId}
+          modalDismissButtonLabel={modalDismissButtonLabel}
+          hideCloseButton={hideCloseButton}
+          closable={closable}
+          onClose={onClose}
         >
-          <div className={classNames(styles.children, isDesktop && styles.childrenDesktop)}>
-            {hasReactNode(header) && header}
-            <ModalPageContent
-              getRootRef={handleSheetScrollRef}
-              data-testid={modalContentTestId}
-              {...disableContentPanningGestureProp}
-            >
-              {children}
-            </ModalPageContent>
-            {hasReactNode(footer) && footer}
-          </div>
-          {closeButton}
-        </div>
+          {children}
+        </ModalPageBase>
       </FocusTrap>
     </ModalOutlet>
   );