[BREAKING CHANGE] feat: SSR, AppRoot: get rid of classes mutation on html elements

packages/vkui/docker-compose.yml

@@ -2,12 +2,14 @@ services:
   package_vkui:
     image: ${IMAGE}
     ipc: host
+    extra_hosts:
+      - host.docker.internal:host-gateway # allows network calls between docker container and the host. See https://forums.docker.com/t/how-to-reach-localhost-on-host-from-docker-container/113321
     user: root
     working_dir: /repo/packages/vkui
     command: sh -c "
       corepack enable &&
       YARN_ENABLE_SCRIPTS=false yarn install --immutable &&
-      yarn run test:e2e:ci ${UPDATE_SNAPSHOTS_FLAG:-}
+      yarn run ${RUN_SCRIPT_COMMAND:-test:e2e:ci} ${UPDATE_SNAPSHOTS_FLAG:-}
       "
     volumes:
       - ../../:/repo
@@ -25,6 +27,8 @@ services:
       - /repo/.cache
       - /repo/.swc
       - /repo/packages/vkui/.swc
+    ports:
+      - 127.0.0.1:4300:4300
 
 volumes:
   yarn_cache:

packages/vkui/package.json

@@ -68,6 +68,8 @@
     "test:e2e": "../../scripts/generate_env_docker.sh && docker compose --env-file=./.env.docker up --abort-on-container-exit",
     "test:e2e-update": "../../scripts/generate_env_docker.sh -u && docker compose --env-file=./.env.docker up --abort-on-container-exit",
     "test:e2e:ci": "yarn run -T cross-env NODE_OPTIONS='--no-warnings' playwright test --config playwright-ct.config.mjs",
+    "test:e2e:ci:ui": "yarn run -T cross-env NODE_OPTIONS='--no-warnings' playwright test --ui --ui-port=4300 --ui-host=0.0.0.0 --config playwright-ct.config.mjs",
+    "test:e2e:ui": "../../scripts/generate_env_docker.sh -r test:e2e:ci:ui && docker compose --env-file=./.env.docker up --abort-on-container-exit",
     "test:e2e-update:ci": "yarn run test:e2e:ci --update-snapshots",
     "lint:generated-files": "yarn run -T tsc scripts/generateCSSCustomMedias.mjs --checkJs --module ESNext --moduleResolution node --resolveJsonModule --allowSyntheticDefaultImports --jsx react-jsx --noEmit && yarn run generate:css-custom-medias && git diff --exit-code src/styles/customMedias.generated.css",
     "storybook": "bash -c 'source .env && yarn run -T cross-env SANDBOX=\\.storybook storybook dev -p ${STORYBOOK_DEV_PORT:=6006}'",

packages/vkui/playwright/index.css

@@ -37,7 +37,7 @@
 }
 
 /* Зашиваем конкретный шрифт, чтобы от платформы к платформе шрифт сильно не отличался. */
-.vkui__root {
+.vkuiTestAppRoot {
   --vkui--font_family_base: 'Roboto' !important;
   --vkui--font_family_accent: 'Roboto' !important;
 

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

@@ -3,7 +3,7 @@ import { Icon28SettingsOutline } from '@vkontakte/icons';
 import { noop } from '@vkontakte/vkjs';
 import {
   AppDefaultWrapper,
-  type AppWrapperProps,
+  type AppDefaultWrapperProps,
   ComponentPlayground,
   type ComponentPlaygroundProps,
   TEST_CLASS_NAMES,
@@ -12,8 +12,8 @@ import { usePlatform } from '../../hooks/usePlatform';
 import { ActionSheetItem } from '../ActionSheetItem/ActionSheetItem';
 import { ActionSheet, type ActionSheetProps } from './ActionSheet';
 
-const AppWrapper = ({ children, ...restProps }: AppWrapperProps) => (
-  <AppDefaultWrapper scroll="contain" {...restProps}>
+const AppWrapper = ({ children, ...restProps }: AppDefaultWrapperProps) => (
+  <AppDefaultWrapper disablePortal scroll="contain" {...restProps}>
     {children}
   </AppDefaultWrapper>
 );
@@ -29,10 +29,15 @@ const ActionSheetWrapper = (props: ActionSheetProps) => {
       </button>
       <ActionSheet
         {...props}
-        style={{
-          // Перебиваем "absolute", чтобы не задавать фиксированную высоту для тестов под iOS и Android
-          position: 'relative',
-        }}
+        style={
+          platform === 'vkcom'
+            ? undefined
+            : {
+                // Перебиваем "absolute", чтобы не задавать фиксированную
+                // высоту для тестов под iOS и Android
+                position: 'relative',
+              }
+        }
         toggleRef={toggleRef}
         onClose={noop}
       />

packages/vkui/src/components/ActionSheet/ActionSheet.tsx

@@ -5,6 +5,7 @@ import { noop } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
 import { usePlatform } from '../../hooks/usePlatform';
 import { useCSSKeyframesAnimationController } from '../../lib/animation';
+import { AppRootPortal } from '../AppRoot/AppRootPortal';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
 import { Footnote } from '../Typography/Footnote/Footnote';
@@ -137,20 +138,19 @@ export const ActionSheet = ({
     </ActionSheetContext.Provider>
   );
 
-  if (mode === 'menu') {
-    return actionSheet;
-  }
-
   return (
-    <PopoutWrapper
-      closing={Boolean(closingBy)}
-      alignY="bottom"
-      className={className}
-      style={style}
-      onClick={onCloseWithOther}
-      fixed
-    >
-      {actionSheet}
-    </PopoutWrapper>
+    <AppRootPortal>
+      <PopoutWrapper
+        noBackground={mode === 'menu'}
+        closing={Boolean(closingBy)}
+        alignY="bottom"
+        className={className}
+        style={style}
+        onClick={onCloseWithOther}
+        fixed
+      >
+        {actionSheet}
+      </PopoutWrapper>
+    </AppRootPortal>
   );
 };

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

@@ -1,13 +1,13 @@
 import {
   AppDefaultWrapper,
-  type AppWrapperProps,
+  type AppDefaultWrapperProps,
   ComponentPlayground,
   type ComponentPlaygroundProps,
 } from '@vkui-e2e/playground-helpers';
 import { Alert, type AlertActionInterface, type AlertProps } from './Alert';
 
-const AppWrapper = ({ children, ...restProps }: AppWrapperProps) => (
-  <AppDefaultWrapper scroll="contain" {...restProps}>
+const AppWrapper = ({ children, ...restProps }: AppDefaultWrapperProps) => (
+  <AppDefaultWrapper scroll="contain" disablePortal {...restProps}>
     {children}
   </AppDefaultWrapper>
 );

packages/vkui/src/components/Alert/Alert.tsx

@@ -13,6 +13,8 @@ import type {
   HasDataAttribute,
   HasRootRef,
 } from '../../types';
+import type { AppRootPortalProps } from '../AppRoot/AppRootPortal';
+import { AppRootPortal } from '../AppRoot/AppRootPortal';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import type { ButtonProps } from '../Button/Button';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
@@ -68,6 +70,7 @@ export interface AlertProps
    * `data-testid` для кнопки закрытия
    */
   dismissButtonTestId?: string;
+  usePortal?: AppRootPortalProps['usePortal'];
 }
 
 /**
@@ -88,6 +91,7 @@ export const Alert = ({
   dismissButtonMode = 'outside',
   dismissButtonTestId,
   getRootRef,
+  usePortal,
   ...restProps
 }: AlertProps): React.ReactNode => {
   const generatedId = React.useId();
@@ -136,69 +140,71 @@ export const Alert = ({
   useScrollLock();
 
   return (
-    <PopoutWrapper
-      className={className}
-      closing={closing}
-      style={style}
-      onClick={close}
-      getRootRef={getRootRef}
-    >
-      <FocusTrap
-        {...restProps}
-        {...animationHandlers}
-        getRootRef={elementRef}
-        onClick={stopPropagation}
-        onClose={close}
-        autoFocus={animationState === 'entered'}
-        className={classNames(
-          styles.host,
-          platform === 'ios' && styles.ios,
-          platform === 'vkcom' && styles.vkcom,
-          closing ? styles.closing : styles.opening,
-          isDesktop && styles.desktop,
-        )}
-        role="alertdialog"
-        aria-modal
-        aria-labelledby={titleId}
-        aria-describedby={descriptionId}
+    <AppRootPortal usePortal={usePortal}>
+      <PopoutWrapper
+        className={className}
+        closing={closing}
+        style={style}
+        onClick={close}
+        getRootRef={getRootRef}
       >
-        <div
+        <FocusTrap
+          {...restProps}
+          {...animationHandlers}
+          getRootRef={elementRef}
+          onClick={stopPropagation}
+          onClose={close}
+          autoFocus={animationState === 'entered'}
           className={classNames(
-            styles.content,
-            dismissButtonMode === 'inside' && styles.contentWithButton,
+            styles.host,
+            platform === 'ios' && styles.ios,
+            platform === 'vkcom' && styles.vkcom,
+            closing ? styles.closing : styles.opening,
+            isDesktop && styles.desktop,
           )}
+          role="alertdialog"
+          aria-modal
+          aria-labelledby={titleId}
+          aria-describedby={descriptionId}
         >
-          {hasReactNode(title) && <AlertTitle id={titleId}>{title}</AlertTitle>}
-          {hasReactNode(description) && (
-            <AlertDescription id={descriptionId}>{description}</AlertDescription>
+          <div
+            className={classNames(
+              styles.content,
+              dismissButtonMode === 'inside' && styles.contentWithButton,
+            )}
+          >
+            {hasReactNode(title) && <AlertTitle id={titleId}>{title}</AlertTitle>}
+            {hasReactNode(description) && (
+              <AlertDescription id={descriptionId}>{description}</AlertDescription>
+            )}
+            {children}
+            {isDismissButtonVisible && dismissButtonMode === 'inside' && (
+              <IconButton
+                label={dismissLabel}
+                className={classNames(styles.dismiss, 'vkuiInternalAlert__dismiss')}
+                onClick={close}
+                hoverMode="opacity"
+                activeMode="opacity"
+                data-testid={dismissButtonTestId}
+              >
+                <Icon20Cancel />
+              </IconButton>
+            )}
+          </div>
+          <AlertActions
+            actions={actions}
+            actionsAlign={actionsAlign}
+            actionsLayout={actionsLayout}
+            renderAction={renderAction}
+            onItemClick={onItemClick}
+          />
+          {isDismissButtonVisible && dismissButtonMode === 'outside' && (
+            <ModalDismissButton onClick={close} data-testid={dismissButtonTestId}>
+              {dismissLabel}
+            </ModalDismissButton>
           )}
-          {children}
-          {isDismissButtonVisible && dismissButtonMode === 'inside' && (
-            <IconButton
-              label={dismissLabel}
-              className={classNames(styles.dismiss, 'vkuiInternalAlert__dismiss')}
-              onClick={close}
-              hoverMode="opacity"
-              activeMode="opacity"
-              data-testid={dismissButtonTestId}
-            >
-              <Icon20Cancel />
-            </IconButton>
-          )}
-        </div>
-        <AlertActions
-          actions={actions}
-          actionsAlign={actionsAlign}
-          actionsLayout={actionsLayout}
-          renderAction={renderAction}
-          onItemClick={onItemClick}
-        />
-        {isDismissButtonVisible && dismissButtonMode === 'outside' && (
-          <ModalDismissButton onClick={close} data-testid={dismissButtonTestId}>
-            {dismissLabel}
-          </ModalDismissButton>
-        )}
-      </FocusTrap>
-    </PopoutWrapper>
+        </FocusTrap>
+      </PopoutWrapper>
+    </AppRootPortal>
   );
 };

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

@@ -1,31 +1,20 @@
 .host {
-  block-size: 100%;
+  /* чтобы можно было ограничить размеры приложения
+   * извне с помощью max-height, max-width */
+  max-inline-size: inherit;
+  max-block-size: inherit;
   inline-size: 100%;
+  block-size: 100%;
 }
 
-.userSelectNone {
-  user-select: none;
-}
-
-/**
- * Хак для webkit-based браузеров, потому что на версиях iOS <= 14.* исчезает возможность
- * редактировать contenteditable элементы, если выше по дереву задан user-select: none;
- */
-.userSelectNone [contenteditable] {
-  user-select: text;
+.layoutCard {
+  background: var(--vkui--color_background);
 }
 
-@media (--pointer-has-not) {
-  .pointerNone {
-    user-select: none;
-  }
-
-  .pointerNone [contenteditable] {
-    user-select: text;
-  }
+.layoutPlain {
+  background: var(--vkui--color_background_content);
 }
 
-/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
-:global(.vkui__root--embedded) .host {
-  overflow: auto;
+.transformForPositionFixedElements {
+  transform: translate3d(0, 0, 0);
 }