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

package/src/components/ScreenSpinner/ScreenSpinner.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { ModalPopoutPortal } from '../AppRoot/ModalPopoutPortal';
+import { AppRootPortal } from '../AppRoot/AppRootPortal';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
 import { ScreenSpinnerContainer } from './ScreenSpinnerContainer';
@@ -33,14 +33,14 @@ export const ScreenSpinner: React.FC<ScreenSpinnerProps> & {
   useScrollLock();
 
   return (
-    <ModalPopoutPortal usePortal={usePortal}>
+    <AppRootPortal usePortal={usePortal}>
       <PopoutWrapper className={className} style={style} noBackground>
         <ScreenSpinnerContainer state={state} mode={mode} label={label} customIcon={customIcon}>
           <ScreenSpinnerLoader {...restProps} />
           <ScreenSpinnerSwapIcon onClick={onClick} cancelLabel={cancelLabel} />
         </ScreenSpinnerContainer>
       </PopoutWrapper>
-    </ModalPopoutPortal>
+    </AppRootPortal>
   );
 };
 

package/src/components/ScreenSpinner/context.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import * as React from 'react';
 import { type ScreenSpinnerProps } from './types';
 

package/src/components/Separator/Separator.tsx

@@ -55,7 +55,6 @@ export const Separator = ({
   appearance = 'primary',
   direction = 'horizontal',
   align = 'center',
-  style,
   size,
   ...restProps
 }: SeparatorProps): React.ReactNode => {
@@ -74,14 +73,7 @@ export const Separator = ({
         align !== 'center' && alignClassNames[align],
         spacingSizeClassName,
       )}
-      style={
-        spacingSizeStyle
-          ? {
-              ...spacingSizeStyle,
-              ...style,
-            }
-          : style
-      }
+      baseStyle={spacingSizeStyle}
     >
       <hr className={styles.in} />
     </RootComponent>

package/src/components/SimpleCell/SimpleCell.tsx

@@ -98,7 +98,6 @@ export const SimpleCell = ({
   overTitle,
   subtitle,
   extraSubtitle,
-  className,
   chevronSize = 'm',
   ...restProps
 }: SimpleCellProps): React.ReactNode => {
@@ -112,12 +111,11 @@ export const SimpleCell = ({
   return (
     <Tappable
       {...restProps}
-      className={classNames(
+      baseClassName={classNames(
         styles.host,
         restProps.disabled && styles.disabled,
         sizeY !== 'regular' && sizeYClassNames[sizeY],
         multiline && styles.mult,
-        className,
       )}
     >
       <div className={classNames(styles.before, platform === 'ios' && styles.beforeIos)}>

package/src/components/SimpleGrid/SimpleGrid.tsx

@@ -56,7 +56,6 @@ export interface SimpleGridProps extends Omit<RootComponentProps<HTMLElement>, '
 export const SimpleGrid = ({
   columns = 1,
   gap,
-  style: styleProp,
   margin = 'none',
   minColWidth,
   align = 'stretch',
@@ -86,7 +85,7 @@ export const SimpleGrid = ({
         typeof columnGap === 'string' && columnGapClassNames[columnGap],
         typeof rowGap === 'string' && rowGapClassNames[rowGap],
       )}
-      style={{ ...style, ...styleProp }}
+      baseStyle={style}
     />
   );
 };

package/src/components/Skeleton/Skeleton.tsx

@@ -139,7 +139,6 @@ export const Skeleton = ({
   maxWidth,
   maxInlineSize,
   borderRadius,
-  style,
   children,
   colorFrom,
   colorTo,
@@ -183,7 +182,7 @@ export const Skeleton = ({
       getRootRef={rootRef}
       Component="span"
       baseClassName={classNames(styles.host, disableAnimation && styles.disableAnimation)}
-      style={{ ...skeletonStyle, ...style }}
+      baseStyle={skeletonStyle}
       {...restProps}
     >
       {children || <>&zwnj;</>}

package/src/components/Snackbar/Snackbar.tsx

@@ -96,7 +96,6 @@ export const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({
   mode = 'default',
   subtitle,
   offsetY,
-  style,
   getRootRef,
   ...restProps
 }: SnackbarProps) => {
@@ -259,7 +258,7 @@ export const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({
         placementClassNames[placement],
         animationStateClassNames[animationState],
       )}
-      style={resolveOffsetYCssStyle(placement, style, offsetY)}
+      baseStyle={resolveOffsetYCssStyle(placement, offsetY)}
       getRootRef={rootRef}
     >
       <div

package/src/components/Snackbar/utils.ts

@@ -5,21 +5,20 @@ import type { ShiftData, SnackbarPlacement } from './types';
 
 export function resolveOffsetYCssStyle(
   placement: SnackbarPlacement,
-  style?: React.CSSProperties,
   offsetY?: React.CSSProperties['inset'],
 ): React.CSSProperties | undefined {
   if (offsetY === undefined) {
-    return style;
+    return undefined;
   }
   switch (placement) {
     case 'top-start':
     case 'top':
     case 'top-end':
-      return { ...style, top: offsetY };
+      return { top: offsetY };
     case 'bottom-start':
     case 'bottom':
     case 'bottom-end':
-      return { ...style, bottom: offsetY };
+      return { bottom: offsetY };
   }
 }
 

package/src/components/Spacing/Spacing.tsx

@@ -24,7 +24,7 @@ export interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement>
 /**
  * @see https://vkcom.github.io/VKUI/#/Spacing
  */
-export const Spacing = ({ size = 'm', style, ...restProps }: SpacingProps): React.ReactNode => {
+export const Spacing = ({ size = 'm', ...restProps }: SpacingProps): React.ReactNode => {
   const [spacingSizeClassName, spacingSizeStyle] = resolveSpacingSize(
     CUSTOM_CSS_TOKEN_FOR_USER_GAP,
     size,
@@ -32,14 +32,7 @@ export const Spacing = ({ size = 'm', style, ...restProps }: SpacingProps): Reac
   return (
     <RootComponent
       {...restProps}
-      style={
-        spacingSizeStyle
-          ? {
-              ...spacingSizeStyle,
-              ...style,
-            }
-          : style
-      }
+      baseStyle={spacingSizeStyle}
       baseClassName={classNames(styles.host, spacingSizeClassName)}
     />
   );

package/src/components/SplitCol/SplitCol.tsx

@@ -78,7 +78,6 @@ export const SplitCol = (props: SplitColProps): React.ReactNode => {
     minWidth,
     animate: animateProp,
     fixed,
-    style,
     autoSpaced,
     stretchedOnMobile,
     getRootRef,
@@ -99,11 +98,10 @@ export const SplitCol = (props: SplitColProps): React.ReactNode => {
   return (
     <RootComponent
       {...restProps}
-      style={{
+      baseStyle={{
         width,
         maxWidth,
         minWidth,
-        ...style,
       }}
       getRootRef={baseRef}
       baseClassName={classNames(

package/src/components/SplitLayout/SplitLayout.tsx

@@ -2,10 +2,8 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { useExternRef } from '../../hooks/useExternRef';
 import { usePlatform } from '../../hooks/usePlatform';
 import type { HasRef, HTMLAttributesWithRootRef } from '../../types';
-import { AppRootContext } from '../AppRoot/AppRootContext';
 import styles from './SplitLayout.module.css';
 
 export interface SplitLayoutProps
@@ -50,12 +48,8 @@ export const SplitLayout = ({
 }: SplitLayoutProps): React.ReactNode => {
   const platform = usePlatform();
 
-  const { popoutModalRoot } = React.useContext(AppRootContext);
-
-  const rootRef = useExternRef<HTMLDivElement>(popoutModalRoot, getRootRef);
-
   return (
-    <div className={classNames(styles.host, platform === 'ios' && styles.ios)} ref={rootRef}>
+    <div className={classNames(styles.host, platform === 'ios' && styles.ios)} ref={getRootRef}>
       {header}
       <div
         {...restProps}

package/src/components/SubnavigationButton/SubnavigationButton.tsx

@@ -83,7 +83,6 @@ export const SubnavigationButton = ({
   after,
   chevron,
   children,
-  className,
   ...restProps
 }: SubnavigationButtonProps): React.ReactNode => {
   const { sizeY = 'none' } = useAdaptivity();
@@ -93,14 +92,13 @@ export const SubnavigationButton = ({
       {...restProps}
       hasActive={false}
       focusVisibleMode="outside"
-      className={classNames(
+      baseClassName={classNames(
         styles.host,
         sizeStyles[size],
         modeStyles[mode],
         appearanceStyles[appearance],
         selected && styles.selected,
         sizeY !== 'regular' && sizeYClassNames[sizeY],
-        className,
       )}
     >
       <span className={styles.in}>

package/src/components/TabsItem/TabsItem.tsx

@@ -80,7 +80,6 @@ export const TabsItem = ({
   status,
   after,
   selected = false,
-  className,
   role = 'tab',
   tabIndex: tabIndexProp,
   getRootRef,
@@ -184,14 +183,13 @@ export const TabsItem = ({
     <Tappable
       {...restProps}
       getRootRef={rootRef}
-      className={classNames(
+      baseClassName={classNames(
         styles.host,
         mode && stylesMode[mode],
         selected && styles.selected,
         sizeY !== 'regular' && sizeYClassNames[sizeY],
         withGaps && styles.withGaps,
         layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],
-        className,
       )}
       hoverMode={hoverMode}
       activeMode={activeMode}

package/src/components/ToolButton/ToolButton.tsx

@@ -54,7 +54,6 @@ export const ToolButton = ({
   mode = 'primary',
   appearance = 'accent',
   direction = 'row',
-  className,
   children,
   IconCompact,
   IconRegular,
@@ -70,8 +69,7 @@ export const ToolButton = ({
       activeMode={styles.active}
       Component={restProps.href ? 'a' : 'button'}
       focusVisibleMode="outside"
-      className={classNames(
-        className,
+      baseClassName={classNames(
         styles.host,
         rounded && getRoundedClassName(direction, hasChildren),
         hasChildren && direction === 'row' && styles.withFakeEndIcon,

package/src/components/WriteBarIcon/WriteBarIcon.tsx

@@ -58,7 +58,6 @@ export const WriteBarIcon = ({
   mode,
   children,
   count,
-  className,
   label: labelProp,
   ...restProps
 }: WriteBarIconProps): React.ReactNode => {
@@ -112,12 +111,11 @@ export const WriteBarIcon = ({
       Component="button"
       hasHover={false}
       activeMode={styles.active}
-      className={classNames(
+      baseClassName={classNames(
         styles.host,
         platform === 'ios' && styles.ios,
         mode === 'send' && styles.modeSend,
         mode === 'done' && styles.modeDone,
-        className,
       )}
     >
       <span className={styles.in}>

package/src/helpers/mergeStyle.ts

@@ -0,0 +1,15 @@
+/**
+ * Мержит стили, пытаясь уменьшить кол-во копирований
+ *
+ * ## Пример
+ *
+ * ```ts
+ * const style = mergeStyle(arrowStyles, styleProp)
+ * ```
+ */
+export function mergeStyle(
+  a: React.CSSProperties | undefined,
+  b: React.CSSProperties | undefined,
+): React.CSSProperties | undefined {
+  return a && b ? { ...a, ...b } : a || b;
+}

package/src/hooks/useBooleanState.ts

@@ -19,8 +19,8 @@ export const useBooleanState = (
   }, []);
 
   const toggle = React.useCallback(() => {
-    setValue(!value);
-  }, [value]);
+    setValue((value) => !value);
+  }, []);
 
   return { value, setTrue, setFalse, toggle };
 };

package/src/hooks/useSyncHTMLWithBaseVKUIClasses.ts

@@ -1,5 +1,4 @@
 import type * as React from 'react';
-import { getParentElement } from '../components/AppRoot/helpers';
 import { type AppRootMode } from '../components/AppRoot/types';
 import { useIsomorphicLayoutEffect } from '../lib/useIsomorphicLayoutEffect';
 
@@ -18,14 +17,20 @@ export function useSyncHTMLWithBaseVKUIClasses({
     }
 
     const htmlElement = appRootRef.current?.ownerDocument.documentElement;
-    const parentElement = getParentElement(appRootRef.current);
+    const parentElement = appRootRef.current?.parentElement ?? null;
+
+    const parentElementClasses = ['vkui__root'];
+
+    if (mode === 'embedded') {
+      parentElementClasses.push('vkui__root--embedded');
+    }
 
     if (mode === 'full') {
       /* eslint-disable-next-line no-restricted-properties */
       htmlElement?.classList.add('vkui');
     }
     /* eslint-disable-next-line no-restricted-properties */
-    parentElement?.classList.add('vkui__root');
+    parentElement?.classList.add(...parentElementClasses);
 
     return () => {
       if (mode === 'full') {
@@ -33,7 +38,7 @@ export function useSyncHTMLWithBaseVKUIClasses({
         htmlElement?.classList.remove('vkui');
       }
       /* eslint-disable-next-line no-restricted-properties */
-      parentElement?.classList.remove('vkui__root');
+      parentElement?.classList.remove(...parentElementClasses);
     };
-  }, []);
+  }, [mode, enable]);
 }

package/src/index.ts

@@ -363,9 +363,9 @@ export type { SkeletonProps } from './components/Skeleton/Skeleton';
 export { Div } from './components/Div/Div';
 export type { DivProps } from './components/Div/Div';
 export {
-  DEFAULT_ARROW_HEIGHT,
-  DEFAULT_ARROW_WIDTH,
-  DEFAULT_ARROW_PADDING,
+  DEFAULT_ARROW_HEIGHT as DEFAULT_ICON_ARROW_HEIGHT,
+  DEFAULT_ARROW_WIDTH as DEFAULT_ICON_ARROW_WIDTH,
+  DEFAULT_ARROW_PADDING as DEFAULT_ICON_ARROW_PADDING,
   DefaultIcon,
 } from './components/FloatingArrow/DefaultIcon';
 export { FloatingArrow } from './components/FloatingArrow/FloatingArrow';

package/src/styles/common.css

@@ -26,6 +26,9 @@
   padding: 0;
   block-size: 100%;
   color-scheme: var(--vkui--colors_scheme);
+}
+
+.vkui {
   /*
    * TODO [>=8]: Убрать background с html элемента, но для этого надо
    * чтобы height у всех родителей Panel вплоть до html имели
@@ -42,6 +45,10 @@
   max-block-size: inherit;
 }
 
+.vkui__root--embedded {
+  background: var(--vkui--color_background);
+}
+
 /* отключаем нативный pull-to-refresh при взаимодействии с компонентом
  * PullToRefresh или при открывании модалки */
 .vkui--disable-overscroll-behavior {

package/src/types.ts

@@ -65,7 +65,10 @@ export type Exact<A, B> = A extends B ? B : never;
 /**
  * Для возможности указывать css custom properties
  */
-export type CSSCustomProperties<T extends string | undefined = string> = Record<`--${string}`, T>;
+export type CSSCustomProperties<T extends string | number | undefined = string> = Record<
+  `--${string}`,
+  T
+>;
 
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 interface Nothing {}

package/dist/components/AppRoot/ModalPopoutPortal.d.ts

@@ -1,11 +0,0 @@
-import { type AppRootPortalProps } from './AppRootPortal';
-/**
- * Специальный компонент для рендеринга ModalRoot и
- * popout компонентов внутри SplitLayout после контента
- * Как было раньше в v6 при передаче модалок и popout компонентов
- * в свойства SplitLayout modal/popout в режиме full
- *
- * @private
- */
-export declare function ModalPopoutPortal(props: AppRootPortalProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=ModalPopoutPortal.d.ts.map

package/dist/components/AppRoot/ModalPopoutPortal.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ModalPopoutPortal.d.ts","sourceRoot":"","sources":["../../../src/components/AppRoot/ModalPopoutPortal.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAiB,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEzE;;;;;;;GAOG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,kBAAkB,2CAY1D"}

package/dist/components/AppRoot/ModalPopoutPortal.js

@@ -1,28 +0,0 @@
-'use client';
-import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
-import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { AppRootContext } from "./AppRootContext.js";
-import { AppRootPortal } from "./AppRootPortal.js";
-/**
- * Специальный компонент для рендеринга ModalRoot и
- * popout компонентов внутри SplitLayout после контента
- * Как было раньше в v6 при передаче модалок и popout компонентов
- * в свойства SplitLayout modal/popout в режиме full
- *
- * @private
- */ export function ModalPopoutPortal(props) {
-    const { mode } = React.useContext(AppRootContext);
-    const usePortalProp = props.usePortal;
-    let usePortal = usePortalProp;
-    const shouldRenderInAppAfterContent = usePortalProp === undefined && mode === 'full';
-    if (shouldRenderInAppAfterContent) {
-        usePortal = 'SplitLayout';
-    }
-    return /*#__PURE__*/ _jsx(AppRootPortal, _object_spread_props(_object_spread({}, props), {
-        usePortal: usePortal
-    }));
-}
-
-//# sourceMappingURL=ModalPopoutPortal.js.map

package/dist/components/AppRoot/ModalPopoutPortal.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/AppRoot/ModalPopoutPortal.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { AppRootContext } from './AppRootContext';\nimport { AppRootPortal, type AppRootPortalProps } from './AppRootPortal';\n\n/**\n * Специальный компонент для рендеринга ModalRoot и\n * popout компонентов внутри SplitLayout после контента\n * Как было раньше в v6 при передаче модалок и popout компонентов\n * в свойства SplitLayout modal/popout в режиме full\n *\n * @private\n */\nexport function ModalPopoutPortal(props: AppRootPortalProps) {\n  const { mode } = React.useContext(AppRootContext);\n  const usePortalProp = props.usePortal;\n\n  let usePortal: AppRootPortalProps['usePortal'] = usePortalProp;\n\n  const shouldRenderInAppAfterContent = usePortalProp === undefined && mode === 'full';\n  if (shouldRenderInAppAfterContent) {\n    usePortal = 'SplitLayout';\n  }\n\n  return <AppRootPortal {...props} usePortal={usePortal} />;\n}\n"],"names":["React","AppRootContext","AppRootPortal","ModalPopoutPortal","props","mode","useContext","usePortalProp","usePortal","shouldRenderInAppAfterContent","undefined"],"mappings":"AAAA;;;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,sBAAmB;AAClD,SAASC,aAAa,QAAiC,qBAAkB;AAEzE;;;;;;;CAOC,GACD,OAAO,SAASC,kBAAkBC,KAAyB;IACzD,MAAM,EAAEC,IAAI,EAAE,GAAGL,MAAMM,UAAU,CAACL;IAClC,MAAMM,gBAAgBH,MAAMI,SAAS;IAErC,IAAIA,YAA6CD;IAEjD,MAAME,gCAAgCF,kBAAkBG,aAAaL,SAAS;IAC9E,IAAII,+BAA+B;QACjCD,YAAY;IACd;IAEA,qBAAO,KAACN,uDAAkBE;QAAOI,WAAWA;;AAC9C"}

package/dist/cssm/components/AppRoot/ModalPopoutPortal.js

@@ -1,27 +0,0 @@
-'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { AppRootContext } from "./AppRootContext.js";
-import { AppRootPortal } from "./AppRootPortal.js";
-/**
- * Специальный компонент для рендеринга ModalRoot и
- * popout компонентов внутри SplitLayout после контента
- * Как было раньше в v6 при передаче модалок и popout компонентов
- * в свойства SplitLayout modal/popout в режиме full
- *
- * @private
- */ export function ModalPopoutPortal(props) {
-    const { mode } = React.useContext(AppRootContext);
-    const usePortalProp = props.usePortal;
-    let usePortal = usePortalProp;
-    const shouldRenderInAppAfterContent = usePortalProp === undefined && mode === 'full';
-    if (shouldRenderInAppAfterContent) {
-        usePortal = 'SplitLayout';
-    }
-    return /*#__PURE__*/ _jsx(AppRootPortal, {
-        ...props,
-        usePortal: usePortal
-    });
-}
-
-//# sourceMappingURL=ModalPopoutPortal.js.map

package/dist/cssm/components/AppRoot/ModalPopoutPortal.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../../src/components/AppRoot/ModalPopoutPortal.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { AppRootContext } from './AppRootContext';\nimport { AppRootPortal, type AppRootPortalProps } from './AppRootPortal';\n\n/**\n * Специальный компонент для рендеринга ModalRoot и\n * popout компонентов внутри SplitLayout после контента\n * Как было раньше в v6 при передаче модалок и popout компонентов\n * в свойства SplitLayout modal/popout в режиме full\n *\n * @private\n */\nexport function ModalPopoutPortal(props: AppRootPortalProps) {\n  const { mode } = React.useContext(AppRootContext);\n  const usePortalProp = props.usePortal;\n\n  let usePortal: AppRootPortalProps['usePortal'] = usePortalProp;\n\n  const shouldRenderInAppAfterContent = usePortalProp === undefined && mode === 'full';\n  if (shouldRenderInAppAfterContent) {\n    usePortal = 'SplitLayout';\n  }\n\n  return <AppRootPortal {...props} usePortal={usePortal} />;\n}\n"],"names":["React","AppRootContext","AppRootPortal","ModalPopoutPortal","props","mode","useContext","usePortalProp","usePortal","shouldRenderInAppAfterContent","undefined"],"mappings":"AAAA;;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,cAAc,QAAQ,sBAAmB;AAClD,SAASC,aAAa,QAAiC,qBAAkB;AAEzE;;;;;;;CAOC,GACD,OAAO,SAASC,kBAAkBC,KAAyB;IACzD,MAAM,EAAEC,IAAI,EAAE,GAAGL,MAAMM,UAAU,CAACL;IAClC,MAAMM,gBAAgBH,MAAMI,SAAS;IAErC,IAAIA,YAA6CD;IAEjD,MAAME,gCAAgCF,kBAAkBG,aAAaL,SAAS;IAC9E,IAAII,+BAA+B;QACjCD,YAAY;IACd;IAEA,qBAAO,KAACN;QAAe,GAAGE,KAAK;QAAEI,WAAWA;;AAC9C"}

package/src/components/AppRoot/ModalPopoutPortal.tsx

@@ -1,27 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { AppRootContext } from './AppRootContext';
-import { AppRootPortal, type AppRootPortalProps } from './AppRootPortal';
-
-/**
- * Специальный компонент для рендеринга ModalRoot и
- * popout компонентов внутри SplitLayout после контента
- * Как было раньше в v6 при передаче модалок и popout компонентов
- * в свойства SplitLayout modal/popout в режиме full
- *
- * @private
- */
-export function ModalPopoutPortal(props: AppRootPortalProps) {
-  const { mode } = React.useContext(AppRootContext);
-  const usePortalProp = props.usePortal;
-
-  let usePortal: AppRootPortalProps['usePortal'] = usePortalProp;
-
-  const shouldRenderInAppAfterContent = usePortalProp === undefined && mode === 'full';
-  if (shouldRenderInAppAfterContent) {
-    usePortal = 'SplitLayout';
-  }
-
-  return <AppRootPortal {...props} usePortal={usePortal} />;
-}