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

package/src/components/NavTransitionContext/NavTransitionContext.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import * as React from 'react';
-import { useObjectMemo } from '../../hooks/useObjectMemo';
 
 export interface TransitionContextProps {
   entering: boolean;
@@ -16,8 +15,12 @@ export const NavTransitionProvider = ({
   entering,
 }: React.PropsWithChildren<TransitionContextProps>): React.ReactNode => {
   const parentContext = useNavTransition();
-  const contextValue = useObjectMemo({
-    entering: parentContext.entering || entering,
-  });
+  const contextValue = React.useMemo(
+    () => ({
+      entering: parentContext.entering || entering,
+    }),
+    [entering, parentContext.entering],
+  );
+
   return <TransitionContext.Provider value={contextValue}>{children}</TransitionContext.Provider>;
 };

package/src/components/PanelHeader/PanelHeader.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { useModalContext } from '../../context/ModalContext';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useAdaptivityConditionalRender } from '../../hooks/useAdaptivityConditionalRender';
 import { usePlatform } from '../../hooks/usePlatform';
@@ -13,7 +14,6 @@ import type {
 } from '../../types';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 import { FixedLayout } from '../FixedLayout/FixedLayout';
-import { ModalRootContext } from '../ModalRoot/ModalRootContext';
 import { OnboardingTooltipContainer } from '../OnboardingTooltip/OnboardingTooltipContainer';
 import { RootComponent } from '../RootComponent/RootComponent';
 import { Separator } from '../Separator/Separator';
@@ -84,7 +84,7 @@ interface PanelHeaderInProps {
 const PanelHeaderIn = ({ before, after, children, typographyProps = {} }: PanelHeaderInProps) => {
   const { Component = 'span', ...restProps } = typographyProps;
   const { hasCustomPanelHeaderAfter, customPanelHeaderAfterMinWidth } = useConfigProvider();
-  const { isInsideModal } = React.useContext(ModalRootContext);
+  const isInsideModal = useModalContext().id !== null;
   const platform = usePlatform();
 
   const afterSlotProps =

package/src/components/PanelHeaderBack/PanelHeaderBack.tsx

@@ -25,9 +25,10 @@ const sizeXClassNames = {
   compact: styles.backSizeXCompact,
 };
 
-export interface PanelHeaderBackProps extends Omit<PanelHeaderButtonProps, 'children'> {
-  children?: string;
-}
+export type PanelHeaderBackProps = Omit<PanelHeaderButtonProps, 'children'> & {
+  hideLabelOnVKCom?: boolean;
+  hideLabelOnIOS?: boolean;
+};
 
 const getBackIcon = (platform: PlatformType) => {
   switch (platform) {
@@ -54,30 +55,31 @@ const getBackIcon = (platform: PlatformType) => {
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton
  */
 export const PanelHeaderBack = ({
-  label,
+  label = 'Назад',
   className,
-  children = 'Назад',
+  hideLabelOnVKCom = false,
+  hideLabelOnIOS = false,
   ...restProps
-}: PanelHeaderButtonProps): React.ReactNode => {
+}: PanelHeaderBackProps): React.ReactNode => {
   const platform = usePlatform();
   const { sizeX = 'none' } = useAdaptivity();
   // также label нужно скрывать при platform === 'ios' && sizeX === regular
   // https://github.com/VKCOM/VKUI/blob/master/src/components/PanelHeaderButton/PanelHeaderButton.css#L104
-  const showLabel = platform === 'vkcom' || platform === 'ios';
+  const showLabel =
+    (platform === 'vkcom' && !hideLabelOnVKCom) || (platform === 'ios' && !hideLabelOnIOS);
 
   return (
     <PanelHeaderButton
       {...restProps}
       className={classNames(
         sizeX !== 'regular' && sizeXClassNames[sizeX],
-        platform === 'ios' && styles['backIos'],
-        platform === 'vkcom' && styles['backVkcom'],
-        showLabel && !!label && styles['backHasLabel'],
+        platform === 'ios' && styles.backIos,
+        platform === 'vkcom' && styles.backVkcom,
+        showLabel && !!label && styles.backHasLabel,
         className,
       )}
-      label={showLabel && label}
+      label={showLabel ? label : label && <VisuallyHidden>{label}</VisuallyHidden>}
     >
-      {children && <VisuallyHidden>{children}</VisuallyHidden>}
       {getBackIcon(platform)}
     </PanelHeaderButton>
   );

package/src/components/PanelHeaderButton/PanelHeaderButton.tsx

@@ -84,6 +84,9 @@ export const PanelHeaderButton = ({
       warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');
     }
   }
+  const elements = [label, children].filter((item) => !!item);
+
+  const onlyPrimitive = elements.length === 1 && isPrimitiveReactNode(elements[0]);
 
   return (
     <Tappable
@@ -97,7 +100,7 @@ export const PanelHeaderButton = ({
         platformClassNames.hasOwnProperty(platform)
           ? platformClassNames[platform]
           : platformClassNames.android,
-        isPrimitive && styles.primitive,
+        onlyPrimitive && styles.primitive,
         !isPrimitive && !isPrimitiveLabel && styles.notPrimitive,
         className,
       )}

package/src/components/PanelHeaderClose/PanelHeaderClose.tsx

@@ -9,27 +9,24 @@ import {
 } from '../PanelHeaderButton/PanelHeaderButton';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 
+export type PanelHeaderCloseProps = Omit<PanelHeaderButtonProps, 'children'>;
+
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton
  */
 export const PanelHeaderClose = ({
-  children = 'Отмена',
+  label = 'Отмена',
   ...restProps
-}: PanelHeaderButtonProps): React.ReactNode => {
+}: PanelHeaderCloseProps): React.ReactNode => {
   const platform = usePlatform();
 
   return (
-    <PanelHeaderButton {...restProps}>
-      {platform === 'ios' ? (
-        children
-      ) : (
-        <>
-          <VisuallyHidden>{children}</VisuallyHidden>
-          <AdaptiveIconRenderer
-            IconCompact={Icon24CancelOutline}
-            IconRegular={Icon28CancelOutline}
-          />
-        </>
+    <PanelHeaderButton
+      {...restProps}
+      label={platform === 'ios' ? label : label && <VisuallyHidden>{label}</VisuallyHidden>}
+    >
+      {platform !== 'ios' && (
+        <AdaptiveIconRenderer IconCompact={Icon24CancelOutline} IconRegular={Icon28CancelOutline} />
       )}
     </PanelHeaderButton>
   );

package/src/components/PanelHeaderEdit/PanelHeaderEdit.tsx

@@ -15,7 +15,7 @@ import {
 } from '../PanelHeaderButton/PanelHeaderButton';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 
-export interface PanelHeaderEditProps extends PanelHeaderButtonProps {
+export interface PanelHeaderEditProps extends Omit<PanelHeaderButtonProps, 'label' | 'children'> {
   /**
    * Включен ли режим редактирования
    */
@@ -43,17 +43,15 @@ export const PanelHeaderEdit = ({
   const label = isActive ? doneLabel : editLabel;
 
   return (
-    <PanelHeaderButton {...restProps}>
-      {platform === 'ios' ? (
-        label
-      ) : (
-        <>
-          <VisuallyHidden>{label}</VisuallyHidden>
-          <AdaptiveIconRenderer
-            IconCompact={isActive ? Icon24DoneOutline : Icon24PenOutline}
-            IconRegular={isActive ? Icon28DoneOutline : Icon28EditOutline}
-          />
-        </>
+    <PanelHeaderButton
+      {...restProps}
+      label={platform === 'ios' ? label : label && <VisuallyHidden>{label}</VisuallyHidden>}
+    >
+      {platform !== 'ios' && (
+        <AdaptiveIconRenderer
+          IconCompact={isActive ? Icon24DoneOutline : Icon24PenOutline}
+          IconRegular={isActive ? Icon28DoneOutline : Icon28EditOutline}
+        />
       )}
     </PanelHeaderButton>
   );

package/src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx

@@ -9,24 +9,25 @@ import {
 } from '../PanelHeaderButton/PanelHeaderButton';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden';
 
+export type PanelHeaderSubmitProps = Omit<PanelHeaderButtonProps, 'children'>;
+
 /**
  * @see https://vkcom.github.io/VKUI/#/PanelHeaderButton
  */
 export const PanelHeaderSubmit = ({
-  children = 'Готово',
+  label = 'Готово',
   ...restProps
-}: PanelHeaderButtonProps): React.ReactNode => {
+}: PanelHeaderSubmitProps): React.ReactNode => {
   const platform = usePlatform();
 
   return (
-    <PanelHeaderButton primary {...restProps}>
-      {platform === 'ios' ? (
-        children
-      ) : (
-        <>
-          <VisuallyHidden>{children}</VisuallyHidden>
-          <AdaptiveIconRenderer IconCompact={Icon24DoneOutline} IconRegular={Icon28DoneOutline} />
-        </>
+    <PanelHeaderButton
+      primary
+      label={platform === 'ios' ? label : label && <VisuallyHidden>{label}</VisuallyHidden>}
+      {...restProps}
+    >
+      {platform !== 'ios' && (
+        <AdaptiveIconRenderer IconCompact={Icon24DoneOutline} IconRegular={Icon28DoneOutline} />
       )}
     </PanelHeaderButton>
   );

package/src/components/PopoutWrapper/PopoutWrapper.tsx

@@ -41,6 +41,10 @@ export interface PopoutWrapperProps extends HTMLAttributesWithRootRef<HTMLDivEle
    * Спрячет компонент через fade-out анимацию.
    */
   closing?: boolean;
+  /**
+   * Позволяет задать z-index через токен или числом
+   */
+  zIndex?: number | string;
 }
 
 /**
@@ -54,6 +58,7 @@ export const PopoutWrapper = ({
   fixed = true,
   children,
   onClick,
+  zIndex = 'var(--vkui--z_index_popout)',
   ...restProps
 }: PopoutWrapperProps): React.ReactNode => {
   return (
@@ -67,6 +72,10 @@ export const PopoutWrapper = ({
         fixed && styles.fixed,
         !noBackground && styles.masked,
       )}
+      style={{
+        zIndex,
+        ...restProps.style,
+      }}
     >
       <div className={styles.container}>
         <div className={styles.overlay} onClick={onClick} />

package/src/components/PullToRefresh/PullToRefresh.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { clamp } from '../../helpers/math';
 import { usePlatform } from '../../hooks/usePlatform';
-import { usePrevious } from '../../hooks/usePrevious';
+import { useStateWithPrev } from '../../hooks/useStateWithPrev';
 import { type DOMProps, initializeBrowserGesturePreventionEffect, useDOM } from '../../lib/dom';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import type { AnyFunction, HasChildren } from '../../types';
@@ -57,7 +57,11 @@ export const PullToRefresh = ({
   const platform = usePlatform();
   const scroll = useScroll();
   const { window } = useDOM();
-  const prevIsFetching = usePrevious(isFetching);
+
+  const prevIsFetchingRef = React.useRef<boolean | undefined>(undefined);
+  React.useEffect(() => {
+    prevIsFetchingRef.current = isFetching;
+  });
 
   const initParams = React.useMemo(
     () => ({
@@ -74,8 +78,7 @@ export const PullToRefresh = ({
   const [watching, setWatching] = React.useState(false);
   const [refreshing, setRefreshing] = React.useState(false);
   const [canRefresh, setCanRefresh] = React.useState(false);
-  const [touchDown, setTouchDown] = React.useState(false);
-  const prevTouchDown = usePrevious(touchDown);
+  const [[touchDown, prevTouchDown], setTouchDown] = useStateWithPrev(false);
 
   const touchY = React.useRef(0);
   const [contentShift, setContentShift] = React.useState(0);
@@ -99,16 +102,18 @@ export const PullToRefresh = ({
   const waitFetchingTimeoutId = React.useRef<NodeJS.Timeout>();
 
   useIsomorphicLayoutEffect(() => {
+    const prevIsFetching = prevIsFetchingRef.current;
     if (prevIsFetching !== undefined && prevIsFetching && !isFetching) {
       onRefreshingFinish();
     }
-  }, [prevIsFetching, isFetching, onRefreshingFinish]);
+  }, [isFetching, onRefreshingFinish]);
 
   useIsomorphicLayoutEffect(() => {
+    const prevIsFetching = prevIsFetchingRef.current;
     if (prevIsFetching !== undefined && !prevIsFetching && isFetching) {
       clearTimeout(waitFetchingTimeoutId.current);
     }
-  }, [isFetching, prevIsFetching]);
+  }, [isFetching]);
 
   const runRefreshing = React.useCallback(() => {
     if (!refreshing && onRefresh) {
@@ -141,7 +146,6 @@ export const PullToRefresh = ({
     }
   }, [
     initParams,
-    prevIsFetching,
     isFetching,
     onRefreshingFinish,
     prevTouchDown,

package/src/components/ScreenSpinner/ScreenSpinner.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { ModalPopoutPortal } from '../AppRoot/ModalPopoutPortal';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { PopoutWrapper } from '../PopoutWrapper/PopoutWrapper';
 import { ScreenSpinnerContainer } from './ScreenSpinnerContainer';
@@ -26,17 +27,20 @@ export const ScreenSpinner: React.FC<ScreenSpinnerProps> & {
   mode,
   label,
   customIcon,
+  usePortal,
   ...restProps
 }: ScreenSpinnerProps): React.ReactNode => {
   useScrollLock();
 
   return (
-    <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 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>
   );
 };
 

package/src/components/ScreenSpinner/types.tsx

@@ -1,4 +1,5 @@
 import type * as React from 'react';
+import type { AppRootPortalProps } from '../AppRoot/AppRootPortal';
 import type { SpinnerProps } from '../Spinner/Spinner';
 
 export type ScreenSpinnerProps = Omit<SpinnerProps, 'size'> & {
@@ -13,4 +14,5 @@ export type ScreenSpinnerProps = Omit<SpinnerProps, 'size'> & {
    */
   label?: React.ReactNode;
   cancelLabel?: string;
+  usePortal?: AppRootPortalProps['usePortal'];
 };

package/src/components/Search/Search.module.css

@@ -201,7 +201,7 @@
   inline-size: initial;
 }
 
-/* FIXME поменять на `:global(.vkuiInternalGroup--mode-plain)` */
-.modePlain .host {
+/* stylelint-disable-next-line selector-pseudo-class-disallowed-list */
+:global(.vkuiInternalGroup--mode-plain) .host {
   padding-block-start: 4px;
 }

package/src/components/Separator/Separator.tsx

@@ -1,5 +1,5 @@
 import { classNames } from '@vkontakte/vkjs';
-import { spacingSizeClassNames, type SpacingSizeProp } from '../../lib/spacings/sizes';
+import { resolveSpacingSize, type SpacingSizeProp } from '../../lib/spacings/sizes';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Separator.module.css';
@@ -21,6 +21,8 @@ export interface SeparatorProps extends HTMLAttributesWithRootRef<HTMLDivElement
   direction?: 'horizontal' | 'vertical';
   /**
    * Размер контейнера, в который вложен разделитель
+   *
+   * Принимает значения дизайн-системы, числовые значения и css-переменные
    */
   size?: SpacingSizeProp;
   /**
@@ -56,22 +58,32 @@ export const Separator = ({
   style,
   size,
   ...restProps
-}: SeparatorProps): React.ReactNode => (
-  <RootComponent
-    {...restProps}
-    baseClassName={classNames(
-      padding && styles.padded,
-      appearanceClassNames[appearance],
-      typeof size === 'string' && spacingSizeClassNames[size],
-      directionClassNames[direction],
-      size !== undefined && styles.sized,
-      align !== 'center' && alignClassNames[align],
-    )}
-    style={{
-      ...(typeof size === 'number' && { [CUSTOM_CSS_TOKEN_FOR_USER_SIZE]: `${size}px` }),
-      ...style,
-    }}
-  >
-    <hr className={styles.in} />
-  </RootComponent>
-);
+}: SeparatorProps): React.ReactNode => {
+  const [spacingSizeClassName, spacingSizeStyle] = resolveSpacingSize(
+    CUSTOM_CSS_TOKEN_FOR_USER_SIZE,
+    size,
+  );
+  return (
+    <RootComponent
+      {...restProps}
+      baseClassName={classNames(
+        padding && styles.padded,
+        appearanceClassNames[appearance],
+        directionClassNames[direction],
+        size !== undefined && styles.sized,
+        align !== 'center' && alignClassNames[align],
+        spacingSizeClassName,
+      )}
+      style={
+        spacingSizeStyle
+          ? {
+              ...spacingSizeStyle,
+              ...style,
+            }
+          : style
+      }
+    >
+      <hr className={styles.in} />
+    </RootComponent>
+  );
+};

package/src/components/Skeleton/Skeleton.tsx

@@ -5,7 +5,7 @@ import { classNames } from '@vkontakte/vkjs';
 import { millisecondsInSecond } from 'date-fns/constants';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useGlobalEventListener } from '../../hooks/useGlobalEventListener';
-import { usePrevious } from '../../hooks/usePrevious';
+import { useStateWithPrev } from '../../hooks/useStateWithPrev';
 import { useDOM } from '../../lib/dom';
 import type { CSSCustomProperties, HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
@@ -64,8 +64,8 @@ function useSkeletonSyncAnimation(disableAnimation: boolean, duration = 1.5) {
  */
 function useSkeletonPosition(rootRef: React.MutableRefObject<HTMLElement | null>) {
   const { document, window } = useDOM();
-  const [skeletonGradientLeft, setSkeletonGradientLeft] = React.useState('0');
-  const prevSkeletonGradientLeft = usePrevious(skeletonGradientLeft);
+  const [[skeletonGradientLeft, prevSkeletonGradientLeft], setSkeletonGradientLeft] =
+    useStateWithPrev('0');
 
   const updatePosition = React.useCallback(() => {
     const el = rootRef.current;
@@ -78,7 +78,7 @@ function useSkeletonPosition(rootRef: React.MutableRefObject<HTMLElement | null>
     if (prevSkeletonGradientLeft !== gradientValue) {
       setSkeletonGradientLeft(gradientValue);
     }
-  }, [document, prevSkeletonGradientLeft, rootRef]);
+  }, [document, prevSkeletonGradientLeft, rootRef, setSkeletonGradientLeft]);
 
   React.useEffect(updatePosition, [updatePosition]);
   useGlobalEventListener(window, 'resize', updatePosition);

package/src/components/Spacing/Spacing.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { spacingSizeClassNames, type SpacingSizeProp } from '../../lib/spacings/sizes';
+import { resolveSpacingSize, type SpacingSizeProp } from '../../lib/spacings/sizes';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Spacing.module.css';
@@ -10,10 +10,12 @@ export const CUSTOM_CSS_TOKEN_FOR_USER_GAP = '--vkui_internal--spacing_size';
 export interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   /**
    * Высота спэйсинга
+   *
+   * Принимает значения дизайн-системы, числовые значения и css-переменные
    */
   size?: SpacingSizeProp;
   /**
-   * @depracated 7.0.0
+   * @deprecated 7.0.0
    *
    * Свойство устарело и будет удалено в v8.
    */
@@ -23,17 +25,22 @@ export interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement>
  * @see https://vkcom.github.io/VKUI/#/Spacing
  */
 export const Spacing = ({ size = 'm', style, ...restProps }: SpacingProps): React.ReactNode => {
+  const [spacingSizeClassName, spacingSizeStyle] = resolveSpacingSize(
+    CUSTOM_CSS_TOKEN_FOR_USER_GAP,
+    size,
+  );
   return (
     <RootComponent
       {...restProps}
-      style={{
-        ...(typeof size === 'number' && { [CUSTOM_CSS_TOKEN_FOR_USER_GAP]: `${size}px` }),
-        ...style,
-      }}
-      baseClassName={classNames(
-        styles.host,
-        typeof size === 'string' && spacingSizeClassNames[size],
-      )}
+      style={
+        spacingSizeStyle
+          ? {
+              ...spacingSizeStyle,
+              ...style,
+            }
+          : style
+      }
+      baseClassName={classNames(styles.host, spacingSizeClassName)}
     />
   );
 };

package/src/components/SplitCol/SplitCol.tsx

@@ -5,7 +5,6 @@ import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivity } from '../../hooks/useAdaptivity';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useMediaQueries } from '../../hooks/useMediaQueries';
-import { useObjectMemo } from '../../hooks/useObjectMemo';
 import { ViewWidth, viewWidthToClassName } from '../../lib/adaptivity';
 import { matchMediaListAddListener, matchMediaListRemoveListener } from '../../lib/matchMedia';
 import type { HTMLAttributesWithRootRef } from '../../types';
@@ -89,10 +88,13 @@ export const SplitCol = (props: SplitColProps): React.ReactNode => {
   const { viewWidth } = useAdaptivity();
   const animate = useTransitionAnimate(animateProp);
 
-  const contextValue = useObjectMemo({
-    colRef: baseRef,
-    animate,
-  });
+  const contextValue = React.useMemo(
+    () => ({
+      colRef: baseRef,
+      animate,
+    }),
+    [animate, baseRef],
+  );
 
   return (
     <RootComponent

package/src/components/SplitLayout/SplitLayout.tsx

@@ -2,9 +2,10 @@
 
 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 { PopoutRoot } from '../PopoutRoot/PopoutRoot';
+import { AppRootContext } from '../AppRoot/AppRootContext';
 import styles from './SplitLayout.module.css';
 
 export interface SplitLayoutProps
@@ -12,10 +13,18 @@ export interface SplitLayoutProps
     HasRef<HTMLDivElement> {
   /**
    * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.
+   *
+   * @deprecated будет удалёно в **VKUI v8**
+   * Начиная с **VKUI v7** компоненты можно располагать в любом
+   * месте приложения в пределах `AppRoot`
    */
   popout?: React.ReactNode;
   /**
    * Свойство для отрисовки `ModalRoot`.
+   *
+   * @deprecated будет удалёно в **VKUI v8**
+   * Начиная с **VKUI v7**  `ModalRoot` можно располагать в любом
+   * месте приложения в пределах `AppRoot`
    */
   modal?: React.ReactNode;
   header?: React.ReactNode;
@@ -29,25 +38,24 @@ export interface SplitLayoutProps
  * @see https://vkcom.github.io/VKUI/#/SplitLayout
  */
 export const SplitLayout = ({
-  popout,
-  modal,
   header,
   children,
   getRootRef,
   getRef,
   className,
   center,
+  modal,
+  popout,
   ...restProps
 }: SplitLayoutProps): React.ReactNode => {
   const platform = usePlatform();
 
+  const { popoutModalRoot } = React.useContext(AppRootContext);
+
+  const rootRef = useExternRef<HTMLDivElement>(popoutModalRoot, getRootRef);
+
   return (
-    <PopoutRoot
-      className={classNames(styles.host, platform === 'ios' && styles.ios)}
-      popout={popout}
-      modal={modal}
-      getRootRef={getRootRef}
-    >
+    <div className={classNames(styles.host, platform === 'ios' && styles.ios)} ref={rootRef}>
       {header}
       <div
         {...restProps}
@@ -60,7 +68,9 @@ export const SplitLayout = ({
         )}
       >
         {children}
+        {modal}
+        {popout}
       </div>
-    </PopoutRoot>
+    </div>
   );
 };

package/src/components/Tappable/Tappable.tsx

@@ -60,6 +60,7 @@ export const Tappable = ({
   return (
     <Clickable
       baseClassName={classNames(
+        'vkuiInternalTappable',
         baseClassName,
         styles.host,
         sizeX !== SizeType.REGULAR && sizeXClassNames[sizeX],