refactor: ModalRoot/ModalPage/ModalCard

packages/vkui/src/components/Group/Group.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { classNames, noop } from '@vkontakte/vkjs';
+import { ModalContext } from '../../context/ModalContext';
 import type { SizeTypeValues } from '../../lib/adaptivity';
 import { baselineComponent } from '../../testing/utils';
 import { AdaptivityContext } from '../AdaptivityProvider/AdaptivityContext';
@@ -8,7 +9,6 @@ import {
   type AppRootContextInterface,
   DEFAULT_APP_ROOT_CONTEXT_VALUE,
 } from '../AppRoot/AppRootContext';
-import { ModalRootContext } from '../ModalRoot/ModalRootContext';
 import { Group, type GroupProps } from './Group';
 import styles from './Group.module.css';
 
@@ -75,17 +75,11 @@ describe('Group', () => {
           }}
         >
           <AdaptivityContext.Provider value={{ sizeX }}>
-            <ModalRootContext.Provider
-              value={{
-                isInsideModal,
-                updateModalHeight: noop,
-                registerModal: noop,
-              }}
-            >
+            <ModalContext.Provider value={isInsideModal ? 'test' : null}>
               <Group mode={mode} data-testid="group">
                 <div />
               </Group>
-            </ModalRootContext.Provider>
+            </ModalContext.Provider>
           </AdaptivityContext.Provider>
         </AppRootContext.Provider>,
       );

packages/vkui/src/components/Group/GroupContainer.tsx

@@ -2,12 +2,12 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { useModalContext } from '../../context/ModalContext';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import type { SizeTypeValues } from '../../lib/adaptivity';
 import { warnOnce } from '../../lib/warnOnce';
 import type { HasComponent, HTMLAttributesWithRootRef } from '../../types';
 import { AppRootContext } from '../AppRoot/AppRootContext';
-import { ModalRootContext } from '../ModalRoot/ModalRootContext';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Group.module.css';
 
@@ -90,7 +90,7 @@ export const GroupContainer: React.FC<GroupContainerProps> = ({
   tabIndex: tabIndexProp,
   ...restProps
 }: GroupContainerProps) => {
-  const { isInsideModal } = React.useContext(ModalRootContext);
+  const isInsideModal = useModalContext().id !== null;
   const { sizeX = 'none' } = useAdaptivity();
 
   const mode = useGroupMode(modeProps, sizeX, isInsideModal);

packages/vkui/src/components/ModalCard/ModalCard.e2e-playground.tsx

@@ -9,11 +9,11 @@ import {
 import { Button } from '../Button/Button';
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup';
 import { Image } from '../Image/Image';
-import { ModalRoot } from '../ModalRoot/ModalRootAdaptive';
 import { Spacing } from '../Spacing/Spacing';
 import { Textarea } from '../Textarea/Textarea';
 import { UsersStack } from '../UsersStack/UsersStack';
-import { ModalCard, type ModalCardProps } from './ModalCard';
+import { ModalCard } from './ModalCard';
+import type { ModalCardProps } from './types';
 
 const AppWrapper = ({ children, ...restProps }: AppDefaultWrapperProps) => (
   <AppDefaultWrapper scroll="contain" disablePortal {...restProps}>
@@ -127,15 +127,14 @@ export const ModalCardPlayground = (props: ComponentPlaygroundProps) => {
       AppWrapper={AppWrapper}
     >
       {(props: ModalCardProps) => (
-        <div style={{ height: 500, transform: 'translateZ(0)' }}>
-          <ModalRoot
-            activeModal={props.nav}
+        <div style={{ height: 500, overflow: 'hidden', transform: 'translateZ(0)' }}>
+          <ModalCard
+            open
             // Note: с включенным фокусом ломаются скриншоты на движке Webkit из-за фокуса сразу
             // на несколько окон
             noFocusToDialog
-          >
-            <ModalCard {...props} />
-          </ModalRoot>
+            {...props}
+          />
         </div>
       )}
     </ComponentPlayground>

packages/vkui/src/components/ModalCard/ModalCard.module.css

@@ -1,65 +1,81 @@
 .host {
-  box-sizing: border-box;
-  position: absolute;
-  inset-block-start: 0;
-  padding: 8px;
-  inset-inline-start: 0;
+  padding: var(--vkui--spacing_size_m);
+  margin-inline: auto;
   inline-size: 100%;
-  block-size: 100%;
-  display: flex;
-  align-items: flex-end;
+  box-sizing: border-box;
 }
 
 .host:focus {
   outline: none;
 }
 
-.in {
-  inline-size: 100%;
-  margin-inline: auto;
-  transform: translateY(calc(100% + 16px));
-  transition: transform 340ms var(--vkui--animation_easing_platform);
+.hostMaxWidthS {
+  max-inline-size: calc(400px + var(--vkui--spacing_size_2xl));
 }
 
-/**
- * iOS
- */
+.hostMaxWidthM {
+  max-inline-size: calc(414px + var(--vkui--spacing_size_2xl));
+}
 
-.ios .in {
-  max-inline-size: 414px;
+.hostMaxWidthL {
+  max-inline-size: calc(440px + var(--vkui--spacing_size_2xl));
 }
 
-/**
- * Android + vkcom
- */
+/* Mobile */
+@media (--viewWidth-smallTabletMinus) {
+  .host {
+    --vkui_internal_ModalCard--translateY: 100%;
+    --vkui_internal_ModalCard--safeAreaInsetBottom: var(--vkui_internal--safe_area_inset_bottom);
 
-.android .in {
-  max-inline-size: 440px;
-}
+    position: absolute;
+    inset-inline: 0;
+    inset-block-end: 0;
+    margin-block-end: var(--vkui_internal_ModalCard--safeAreaInsetBottom);
+    transform: translate3d(0, calc(100% - var(--vkui_internal_ModalCard--translateY)), 0);
+    transition: transform 0.4s var(--vkui_internal--spring-easing);
+  }
 
-.vkcom .in {
-  max-inline-size: 400px;
-}
+  .hostStateEnter {
+    transform: translate3d(0, 100%, 0);
+    transition: none;
+  }
 
-/**
- * Desktop
- */
+  .hostStateEntering {
+    transition: transform 0.5s var(--vkui_internal--slide-easing) 0.2s;
+  }
 
-.desktop {
-  align-items: center;
-}
+  .hostStateExiting {
+    transform: translate3d(0, 100%, 0);
+    transition: transform 0.2s ease;
+  }
 
-.desktop .in {
-  transform: unset;
-  opacity: 0;
-  transition: opacity 340ms var(--vkui--animation_easing_platform);
+  .hostStateExited {
+    transform: translate3d(0, 100%, 0);
+    transition: none;
+  }
 }
+/* Desktop */
+@media (--viewWidth-smallTabletPlus) {
+  .host {
+    margin-block: auto;
+    opacity: 1;
+    transition: opacity 340ms var(--vkui--animation_easing_platform);
+  }
+
+  .hostStateEnter {
+    opacity: 0;
+    transition-property: none;
+  }
+
+  .hostStateEntering {
+    opacity: 1;
+  }
+
+  .hostStateExiting {
+    opacity: 0;
+  }
 
-/**
- * CMP:
- * ModalRoot
- */
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkuiInternalModalRoot--touched) .in {
-  transition: none;
+  .hostStateExited {
+    opacity: 0;
+  }
 }