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

package/package.json

@@ -1,5 +1,6 @@
 {
-  "version": "7.0.0-dev-efd91c.0",
+  "type": "module",
+  "version": "7.0.0-dev-efd91c.2",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "module": "./dist/index.js",
@@ -54,7 +55,7 @@
     "clear": "yarn run -T shx rm -rf dist/* || yarn run -T shx true",
     "docker:clear-playwright-cache": "../../scripts/generate_env_docker.sh && docker compose --env-file=./.env.docker rm -f && docker volume rm vkui_package_vkui_playwright_cache",
     "postcss": "yarn run -T cross-env NODE_ENV=production concurrently 'yarn:postcss:*'",
-    "postcss:bundle": "yarn run -T rspack --config rspack.styles.config.ts",
+    "postcss:bundle": "yarn run -T rspack --config rspack.styles.config.mjs",
     "postcss:modules": "yarn run -T postcss './src/**/*.css' --base ./src --dir ./dist/cssm --config ./cssm",
     "swc-base": "yarn run -T cross-env NODE_ENV=production swc src/ --config-file package.swcrc --extensions .tsx,.jsx,.ts,.js --strip-leading-paths",
     "swc:es6": "yarn swc-base -d dist -s",
@@ -64,9 +65,11 @@
     "test:ci": "yarn test --ci --silent --outputFile ../../test-results.json --json --coverage --coverageReporters='json' --coverageDirectory='../../.nyc_output'",
     "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 playwright test --config playwright-ct.config.ts",
+    "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 --noEmit && yarn run generate:css-custom-medias && git diff --exit-code src/styles/customMedias.generated.css",
+    "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}'",
     "storybook:build": "yarn run -T cross-env SANDBOX=\\.storybook FROM_STORYBOOK=1 storybook build",
     "generate:css-custom-medias": "node scripts/generateCSSCustomMedias.mjs"
@@ -78,7 +81,7 @@
   "dependencies": {
     "@swc/helpers": "^0.5.15",
     "@vkontakte/icons": "^2.115.0",
-    "@vkontakte/vkjs": "^1.3.0",
+    "@vkontakte/vkjs": "^2.0.1",
     "@vkontakte/vkui-floating-ui": "^0.2.3",
     "date-fns": "^4.1.0"
   },
@@ -88,7 +91,7 @@
     "@types/node": "*",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "storybook": "8.4.2",
+    "storybook": "8.4.4",
     "ts-node": "*"
   },
   "size-limit": [

package/src/components/Accordion/Accordion.tsx

@@ -2,7 +2,6 @@
 
 import * as React from 'react';
 import { useCustomEnsuredControl } from '../../hooks/useEnsuredControl';
-import { useObjectMemo } from '../../hooks/useObjectMemo';
 import type { HasChildren } from '../../types';
 import { AccordionContent } from './AccordionContent';
 import { AccordionContext } from './AccordionContext';
@@ -53,12 +52,15 @@ export const Accordion: React.FC<AccordionProps> & {
     disabled: restProps.disabled,
   });
 
-  const context = useObjectMemo({
-    labelId,
-    contentId,
-    expanded: expanded || false,
-    onChange,
-  });
+  const context = React.useMemo(
+    () => ({
+      labelId,
+      contentId,
+      expanded: expanded || false,
+      onChange,
+    }),
+    [contentId, expanded, labelId, onChange],
+  );
 
   return <AccordionContext.Provider value={context}>{children}</AccordionContext.Provider>;
 };

package/src/components/ActionSheet/ActionSheet.tsx

@@ -3,9 +3,9 @@
 import * as React from 'react';
 import { noop } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
-import { useObjectMemo } from '../../hooks/useObjectMemo';
 import { usePlatform } from '../../hooks/usePlatform';
 import { useCSSKeyframesAnimationController } from '../../lib/animation';
+import { ModalPopoutPortal } from '../AppRoot/ModalPopoutPortal';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
 import { Footnote } from '../Typography/Footnote/Footnote';
@@ -58,7 +58,7 @@ export const ActionSheet = ({
 }: ActionSheetProps): React.ReactNode => {
   const platform = usePlatform();
   const [closingBy, setClosingBy] = React.useState<undefined | CloseInitiators>(undefined);
-  const onCloseWithOther = () => setClosingBy('other');
+  const onCloseWithOther = React.useCallback(() => setClosingBy('other'), []);
   const actionCallbackRef = React.useRef(noop);
 
   const [animationState, animationHandlers] = useCSSKeyframesAnimationController(
@@ -93,7 +93,10 @@ export const ActionSheet = ({
       },
     [],
   );
-  const contextValue = useObjectMemo({ onItemClick, mode, onClose: onCloseWithOther });
+  const contextValue = React.useMemo(
+    () => ({ onItemClick, mode, onClose: onCloseWithOther }),
+    [mode, onCloseWithOther, onItemClick],
+  );
 
   const DropdownComponent = mode === 'menu' ? ActionSheetDropdownMenu : ActionSheetDropdownSheet;
 
@@ -140,15 +143,17 @@ export const ActionSheet = ({
   }
 
   return (
-    <PopoutWrapper
-      closing={Boolean(closingBy)}
-      alignY="bottom"
-      className={className}
-      style={style}
-      onClick={onCloseWithOther}
-      fixed
-    >
-      {actionSheet}
-    </PopoutWrapper>
+    <ModalPopoutPortal>
+      <PopoutWrapper
+        closing={Boolean(closingBy)}
+        alignY="bottom"
+        className={className}
+        style={style}
+        onClick={onCloseWithOther}
+        fixed
+      >
+        {actionSheet}
+      </PopoutWrapper>
+    </ModalPopoutPortal>
   );
 };

package/src/components/Alert/Alert.tsx

@@ -13,6 +13,8 @@ import type {
   HasDataAttribute,
   HasRootRef,
 } from '../../types';
+import type { AppRootPortalProps } from '../AppRoot/AppRootPortal';
+import { ModalPopoutPortal } from '../AppRoot/ModalPopoutPortal';
 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}
+    <ModalPopoutPortal 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>
+    </ModalPopoutPortal>
   );
 };

package/src/components/AppRoot/AppRoot.module.css

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

package/src/components/AppRoot/AppRoot.tsx

@@ -1,23 +1,16 @@
 'use client';
 
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
-import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useKeyboardInputTracker } from '../../hooks/useKeyboardInputTracker';
 import { useObjectMemo } from '../../hooks/useObjectMemo';
+import { useSyncHTMLWithBaseVKUIClasses } from '../../hooks/useSyncHTMLWithBaseVKUIClasses';
+import { useSyncHTMLWithTokens } from '../../hooks/useSyncHTMLWithTokens';
 import { getDocumentBody } from '../../lib/dom';
-import { useTokensClassName } from '../../lib/tokens';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
-import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 import { AppRootContext } from './AppRootContext';
+import { AppRootStyleContainer } from './AppRootStyleContainer';
 import { ElementScrollController, GlobalScrollController } from './ScrollContext';
-import {
-  extractPortalRootByProp,
-  getClassNamesByMode,
-  getParentElement,
-  getUserSelectModeClassName,
-  setSafeAreaInsets,
-} from './helpers';
+import { extractPortalRootByProp } from './helpers';
 import type {
   AppRootLayout,
   AppRootMode,
@@ -73,6 +66,16 @@ export interface AppRootProps extends React.HTMLAttributes<HTMLDivElement> {
    * @since 6.2.0
    */
   userSelectMode?: AppRootUserSelectMode;
+  /*
+   * По умолчанию в режиме `mode="full"` VKUI в рантайме выставляет:
+   * - класс .vkui на html элемент
+   * - класс .vkui__root на элемент-контейнер, в который монтируется VKUI
+   * С помощью этой опции такое поведение можно отключить.
+   *
+   * Для корректной работы SSR рекоммендуется выставлять эти классы самостоятельно
+   * и отключить это поводение.
+   */
+  disableSettingVKUIClassesInRuntime?: boolean;
 }
 
 /**
@@ -82,117 +85,55 @@ export const AppRoot = ({
   children,
   mode = 'full',
   scroll = 'global',
-  portalRoot: portalRootProp = null,
+  portalRoot: portalRootProp,
   disablePortal = false,
   disableParentTransformForPositionFixedElements,
-  className,
   safeAreaInsets: safeAreaInsetsProp,
   layout,
   userSelectMode,
+  disableSettingVKUIClassesInRuntime,
   ...props
 }: AppRootProps): React.ReactNode => {
-  const { hasPointer, sizeX = 'none', sizeY = 'none' } = useAdaptivity();
-  const tokensClassName = useTokensClassName();
-
-  const safeAreaInsets = useObjectMemo(safeAreaInsetsProp);
-  const isKeyboardInputActiveRef = useKeyboardInputTracker();
   const appRootRef = React.useRef<HTMLDivElement | null>(null);
-  const portalRootRef = React.useRef<HTMLElement | null>(null);
+  const popoutModalContainerRef = React.useRef<HTMLDivElement | null>(null);
+  const [portalRoot, setPortalRoot] = React.useState<HTMLElement | null>(
+    portalRootProp ? extractPortalRootByProp(portalRootProp) : null,
+  );
 
   useIsomorphicLayoutEffect(
-    function setupPortalRoot() {
+    function syncPortalRootWithPortalRootProp() {
       const portalByProp = portalRootProp ? extractPortalRootByProp(portalRootProp) : null;
-
-      if (portalByProp) {
-        portalRootRef.current = portalByProp;
-        return function cleanup() {
-          portalRootRef.current = null;
-        };
+      if (portalRootProp !== undefined) {
+        setPortalRoot(portalByProp);
       }
-
-      const documentBody = getDocumentBody(appRootRef.current);
-      const portal = documentBody.ownerDocument.createElement('div');
-      documentBody.appendChild(portal);
-      portalRootRef.current = portal;
-      return function cleanup() {
-        documentBody.removeChild(portal);
-        portalRootRef.current = null;
-      };
     },
     [portalRootProp],
   );
 
   useIsomorphicLayoutEffect(
-    function setupContainers() {
-      if (!appRootRef.current || !portalRootRef.current) {
-        return;
-      }
-
-      const parentElement = getParentElement(appRootRef.current);
+    function removePortalRootOnUnmount() {
+      // Контейнер PortalRoot создаётся при первом вызове модалки или
+      // поповера использующего AppRootPortal.
+      // Потом он переиспользуется и не удаляется пока
+      // приложение не размонтируется.
+      // И создаётся только если в приложение не был передан
+      // пользовательский контейнер через свойство portalRootProp
+      // Сделано для поддержки SSR, чтобы при старте приложения
+      // никаких новых нод в DOM не создавалось.
       const documentBody = getDocumentBody(appRootRef.current);
-      const documentElement = documentBody.ownerDocument.documentElement;
-
-      const [baseClassNames, stylesClassNames] = getClassNamesByMode({
-        mode,
-        layout,
-        tokensClassName,
-        sizeX,
-        sizeY,
-      });
-
-      /* eslint-disable no-restricted-properties */
-      switch (mode) {
-        case 'full': {
-          if (parentElement) {
-            parentElement.classList.add(...baseClassNames);
-          }
-
-          documentElement.classList.add(...stylesClassNames, 'vkui');
-          const unsetSafeAreaInsets = setSafeAreaInsets(safeAreaInsets, documentElement);
-
-          return function cleanup() {
-            if (parentElement) {
-              parentElement.classList.remove(...baseClassNames);
-            }
-
-            documentElement.classList.remove(...stylesClassNames, 'vkui');
-            unsetSafeAreaInsets();
-          };
-        }
-        case 'embedded': {
-          if (parentElement) {
-            parentElement.classList.add(...baseClassNames, ...stylesClassNames);
-            if (!disableParentTransformForPositionFixedElements) {
-              parentElement.style.setProperty('transform', 'translate3d(0, 0, 0)');
-            }
-            const unsetSafeAreaInsets = setSafeAreaInsets(safeAreaInsets, parentElement, portalRootRef.current); // prettier-ignore
-            return function cleanup() {
-              parentElement.classList.remove(...baseClassNames, ...stylesClassNames);
-              if (!disableParentTransformForPositionFixedElements) {
-                parentElement.style.removeProperty('transform');
-              }
-              unsetSafeAreaInsets();
-            };
+      return function cleanup() {
+        if (portalRoot) {
+          const isPortalRootPassedByProps = Boolean(portalRootProp);
+          if (!isPortalRootPassedByProps) {
+            // удаляем portalRoot из дома только если он
+            // был создан в AppRootPortal.
+            // Если он был передан через пропы - удалять нельзя
+            documentBody.removeChild(portalRoot);
           }
-          /* istanbul ignore next: node.parentElement может быть null, но такой кейс в теории невозможен */
-          return;
-        }
-        /* istanbul ignore next: не покрывается за счёт теста на <AppRoot mode="partial" /> */
-        case 'partial': {
-          return;
         }
-      }
-      /* eslint-enable no-restricted-properties */
+      };
     },
-    [
-      mode,
-      layout,
-      disableParentTransformForPositionFixedElements,
-      tokensClassName,
-      sizeX,
-      sizeY,
-      safeAreaInsets,
-    ],
+    [portalRootProp],
   );
 
   const ScrollController = React.useMemo(
@@ -200,10 +141,15 @@ export const AppRoot = ({
     [scroll],
   );
 
+  const isKeyboardInputActiveRef = useKeyboardInputTracker();
+  const safeAreaInsets = useObjectMemo(safeAreaInsetsProp);
   const contextValue = React.useMemo(
     () => ({
       appRoot: appRootRef,
-      portalRoot: portalRootRef,
+      portalRoot,
+      popoutModalRoot: popoutModalContainerRef,
+      setPortalRoot,
+      safeAreaInsets,
       embedded: mode === 'embedded',
       mode,
       disablePortal,
@@ -211,32 +157,54 @@ export const AppRoot = ({
       get keyboardInput() {
         return isKeyboardInputActiveRef.current;
       },
+      userSelectMode,
     }),
-    [disablePortal, isKeyboardInputActiveRef, layout, mode],
-  );
-
-  const content = (
-    <AppRootContext.Provider value={contextValue}>
-      <ScrollController elRef={appRootRef}>{children}</ScrollController>
-    </AppRootContext.Provider>
+    [
+      portalRoot,
+      disablePortal,
+      isKeyboardInputActiveRef,
+      layout,
+      mode,
+      safeAreaInsets,
+      userSelectMode,
+    ],
   );
 
-  const { isWebView } = useConfigProvider();
-  const userSelectModeClassName = getUserSelectModeClassName({
-    userSelectMode,
-    isWebView,
-    hasPointer,
+  /*
+   * Вешаем класс токенов на html в режиме full.
+   * Это необходимо, чтобы цвета html элемента и скроллбара соответствовали текущей цветовой схеме:
+   * - фон html элемента виден, если пользователь оверскролит. Тогда возникает анимация bounce-эффекта и виден фон html элемента. Без токенов в черной теме будет выглядывать белый фон.
+   * - цвет системного сколлбара зависит от color-sheme свойства, значение которого задётся токенами и должно быть выставлено именно на html элементе.
+   * В режме SSR пользователи сами могу задать этот класс на html-элементе. главное, чтобы он соответствовал переданным platform и appearence свойствам.
+   */
+  useSyncHTMLWithTokens({ appRootRef, enable: mode === 'full' });
+  /*
+   * По умолчанию VKUI будет выставлять .vkui на html и .vkui__root на контейнере в режиме full.
+   * В режиме embedded будет выставлять только .vkui__root на контейнере.
+   */
+  useSyncHTMLWithBaseVKUIClasses({
+    appRootRef,
+    mode,
+    enable: mode !== 'partial' && !disableSettingVKUIClassesInRuntime,
   });
 
   return mode === 'partial' ? (
-    content
+    <AppRootContext.Provider value={contextValue}>
+      <ScrollController elRef={appRootRef}>{children}</ScrollController>
+    </AppRootContext.Provider>
   ) : (
-    <div
-      ref={appRootRef}
-      className={classNames(styles.host, userSelectModeClassName, className)}
-      {...props}
-    >
-      {content}
-    </div>
+    <AppRootContext.Provider value={contextValue}>
+      <AppRootStyleContainer
+        getRootRef={appRootRef}
+        className={
+          mode === 'embedded' && !disableParentTransformForPositionFixedElements
+            ? styles.transformForPositionFixedElements
+            : undefined
+        }
+        {...props}
+      >
+        <ScrollController elRef={appRootRef}>{children}</ScrollController>
+      </AppRootStyleContainer>
+    </AppRootContext.Provider>
   );
 };

package/src/components/AppRoot/AppRootContext.ts

@@ -1,13 +1,19 @@
 import * as React from 'react';
+import { noop } from '@vkontakte/vkjs';
+import { type AppRootUserSelectMode, type SafeAreaInsets } from './types';
 
 export interface AppRootContextInterface {
   appRoot: React.RefObject<HTMLElement>;
-  portalRoot: React.RefObject<HTMLElement>;
+  portalRoot: HTMLElement | null;
+  popoutModalRoot: React.MutableRefObject<HTMLDivElement | null>;
+  setPortalRoot: (element: HTMLElement) => void;
+  safeAreaInsets?: SafeAreaInsets;
   embedded: boolean;
   mode: 'partial' | 'embedded' | 'full';
   keyboardInput: boolean;
   disablePortal: boolean;
   layout?: 'card' | 'plain';
+  userSelectMode?: AppRootUserSelectMode;
 }
 
 /**
@@ -18,7 +24,10 @@ export interface AppRootContextInterface {
 export const DEFAULT_APP_ROOT_CONTEXT_VALUE: AppRootContextInterface = {
   appRoot: React.createRef(),
   mode: 'full',
-  portalRoot: React.createRef(),
+  portalRoot: null,
+  popoutModalRoot: React.createRef(),
+  setPortalRoot: noop,
+  safeAreaInsets: undefined,
   embedded: false,
   keyboardInput: false,
   disablePortal: false,