@vkontakte/vkui 8.1.3 → 8.2.0

package/src/components/OnboardingTooltip/OnboardingTooltip.tsx

@@ -231,7 +231,7 @@ export const OnboardingTooltip = ({
         refs.setReference(referenceEl);
       }
     },
-    [childRef],
+    [childRef, refs],
   );
 
   if (process.env.NODE_ENV === 'development') {

package/src/components/PanelHeader/PanelHeader.tsx

@@ -81,7 +81,7 @@ export interface PanelHeaderProps
    */
   transparent?: boolean | undefined;
   /**
-   * @deprecated Since 7.4.0. Будет удалeно в **VKUI v9**.
+   * @deprecated Since 7.4.0. Будет удалено в **VKUI v9**.
    */
   shadow?: boolean | undefined; // TODO [>=9]: удалить неиспользуемое свойство свойство
   /**

package/src/components/Popper/Popper.tsx

@@ -192,7 +192,7 @@ export const Popper = ({
 
   useIsomorphicLayoutEffect(() => {
     refs.setReference('current' in targetRef ? targetRef.current : targetRef);
-  }, [refs.setReference, targetRef]);
+  }, [refs, targetRef]);
 
   const dropdownStyle =
     typeof zIndex !== 'undefined'

package/src/components/PullToRefresh/PullToRefresh.module.css

@@ -10,7 +10,7 @@
 }
 
 .controls {
-  inline-size: 100%;
+  z-index: var(--vkui_internal--z_index_fixed_layout);
   pointer-events: none;
 }
 

package/src/components/PullToRefresh/PullToRefresh.tsx

@@ -9,7 +9,8 @@ import { type DOMProps, initializeBrowserGesturePreventionEffect, useDOM } from
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import type { AnyFunction, HasChildren } from '../../types';
 import { type ScrollContextInterface, useScroll } from '../AppRoot/ScrollContext';
-import { FixedLayout } from '../FixedLayout/FixedLayout';
+import { Box } from '../Box/Box';
+import { ParentWidthWrapper } from '../FixedLayout/ParentWidthWrapper';
 import { type CustomTouchEvent, Touch, type TouchProps } from '../Touch/Touch';
 import TouchRootContext from '../Touch/TouchContext';
 import { PullToRefreshSpinner } from './PullToRefreshSpinner';
@@ -153,6 +154,7 @@ export const PullToRefresh = ({
     refreshing,
     canRefresh,
     runRefreshing,
+    resetRefreshingState,
   ]);
 
   useIsomorphicLayoutEffect(
@@ -244,7 +246,12 @@ export const PullToRefresh = ({
           className,
         )}
       >
-        <FixedLayout className={styles.controls} useParentWidth>
+        <Box
+          Component={ParentWidthWrapper}
+          className={styles.controls}
+          inlineSize="100%"
+          position="fixed"
+        >
           <PullToRefreshSpinner
             style={{
               transform: spinnerTransform,
@@ -253,7 +260,7 @@ export const PullToRefresh = ({
             on={refreshing}
             progress={refreshing ? undefined : spinnerProgress}
           />
-        </FixedLayout>
+        </Box>
 
         <div
           className={styles.content}

package/src/components/Root/Root.tsx

@@ -1,8 +1,9 @@
 'use client';
 
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
+import { classNames, noop } from '@vkontakte/vkjs';
 import { usePlatform } from '../../hooks/usePlatform';
+import { useStableCallback } from '../../hooks/useStableCallback';
 import { useDOM } from '../../lib/dom';
 import { getNavId, type NavIdProps } from '../../lib/getNavId';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
@@ -48,7 +49,7 @@ const warn = warnOnce('Root');
 export const Root = ({
   children,
   activeView: _activeView,
-  onTransition,
+  onTransition: onTransitionProp,
   nav,
   ...restProps
 }: RootProps): React.ReactNode => {
@@ -58,6 +59,8 @@ export const Root = ({
   const [scrolls] = React.useState(() => new Map<string, number>());
   const [viewNodes] = React.useState(() => new Map<string, HTMLElement | null>());
 
+  const onTransition = useStableCallback(onTransitionProp || noop);
+
   const { transitionMotionEnabled = true } = useConfigProvider();
   const { animate } = React.useContext(SplitColContext);
   const disableAnimation = !transitionMotionEnabled || !animate;
@@ -68,7 +71,7 @@ export const Root = ({
     activeView: _activeView,
     transition: false,
   });
-  const transitionTo = (panel: string) => {
+  const transitionTo = useStableCallback((panel: string) => {
     if (panel !== activeView) {
       const viewIds = views.map((view) => getNavId(view.props, warn));
       const isBack = viewIds.indexOf(panel) < viewIds.indexOf(activeView);
@@ -80,7 +83,7 @@ export const Root = ({
         isBack,
       });
     }
-  };
+  });
   const finishTransition = React.useCallback(
     () => _setState({ activeView, prevView, isBack, transition: false }),
     [activeView, isBack, prevView],
@@ -88,10 +91,10 @@ export const Root = ({
 
   useIsomorphicLayoutEffect(() => {
     (document!.activeElement as HTMLElement).blur();
-  }, [activeView]);
+  }, [document, activeView]);
 
   // Нужен переход
-  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [_activeView]);
+  useIsomorphicLayoutEffect(() => transitionTo(_activeView), [transitionTo, _activeView]);
   useIsomorphicLayoutEffect(() => {
     if (!transition && prevView) {
       // Закончился переход
@@ -103,7 +106,7 @@ export const Root = ({
           to: activeView,
         });
     }
-  }, [transition, prevView]);
+  }, [transition, prevView, activeView, isBack, onTransition, scroll, scrolls]);
 
   React.useEffect(
     function onAnimationEndFallback() {

package/src/components/SimpleGrid/SimpleGrid.tsx

@@ -6,18 +6,27 @@ import {
   resolveLayoutProps,
   rowGapClassNames,
 } from '../../lib/layouts';
-import type { LayoutProps } from '../../lib/layouts/types';
+import type { LayoutProps, MarginProp } from '../../lib/layouts/types';
 import type { CSSCustomProperties } from '../../types';
 import { RootComponent } from '../RootComponent/RootComponent';
 import type { RootComponentProps } from '../RootComponent/RootComponent';
 import styles from './SimpleGrid.module.css';
 
-const marginClassNames = {
+type SpecificMargin = 'auto' | 'auto-inline' | 'auto-block' | 'none';
+
+const marginClassNames: Record<SpecificMargin, string | undefined> = {
+  'none': undefined,
   'auto': styles.marginAuto,
   'auto-inline': styles.marginAutoInline,
   'auto-block': styles.marginAutoBlock,
 };
 
+function isSpecialMargin(margin: SimpleGridProps['margin']): margin is SpecificMargin {
+  return (
+    margin === 'auto' || margin === 'auto-inline' || margin === 'auto-block' || margin === 'none'
+  );
+}
+
 const alignClassNames = {
   start: styles.alignStart,
   end: styles.alignEnd,
@@ -31,7 +40,9 @@ const displayClassNames = {
   'inline-grid': styles.displayInlineGrid,
 };
 
-export interface SimpleGridProps extends RootComponentProps<HTMLElement>, LayoutProps {
+export interface SimpleGridProps
+  extends RootComponentProps<HTMLElement>,
+    Omit<LayoutProps, 'margin'> {
   /**
    * Количество колонок.
    */
@@ -43,13 +54,14 @@ export interface SimpleGridProps extends RootComponentProps<HTMLElement>, Layout
    */
   gap?: GapsProp | undefined;
   /**
-   * Управляет отступами вокруг контейнера
-   * Значение `none` позволяет отключить отступы
-   * Значение `auto` позволяет задать платформенные отступы
-   * Значение `auto-inline` позволяет задать платформенные inline-отступы
-   * Значение `auto-block` позволяет задать платформенные block-отступы.
+   * Внешние отступы контейнера.
+   * Дополнительно поддерживаются специальные значения:
+   * `none` — отключает дополнительные отступы;
+   * `auto` — включает платформенные отступы вокруг контейнера;
+   * `auto-inline` — включает платформенные inline-отступы;
+   * `auto-block` — включает платформенные block-отступы.
    */
-  margin?: 'none' | 'auto' | 'auto-inline' | 'auto-block' | undefined;
+  margin?: 'none' | 'auto' | 'auto-inline' | 'auto-block' | MarginProp | undefined;
   /**
    * Вместо задания количества колонок, можно указать минимальную ширину элементов.
    */
@@ -76,7 +88,9 @@ export const SimpleGrid = ({
   display = 'grid',
   ...restProps
 }: SimpleGridProps) => {
-  const resolvedProps = resolveLayoutProps(restProps);
+  const resolvedProps = resolveLayoutProps(
+    isSpecialMargin(margin) ? restProps : { ...restProps, margin },
+  );
   const style: CSSCustomProperties = {};
   const [rowGap, columnGap] = calculateGap(gap);
   if (typeof rowGap === 'number') {
@@ -94,7 +108,7 @@ export const SimpleGrid = ({
     <RootComponent
       baseClassName={classNames(
         styles.host,
-        margin !== 'none' && marginClassNames[margin],
+        isSpecialMargin(margin) && marginClassNames[margin],
         alignClassNames[align],
         minColWidth && styles.withMinWidth,
         typeof columnGap === 'string' && columnGapClassNames[columnGap],

package/src/components/Skeleton/Skeleton.tsx

@@ -68,22 +68,24 @@ function useSkeletonSyncAnimation(disableAnimation: boolean, duration = 1.5) {
  * Вычисляет позицию скелетона.
  */
 function useSkeletonPosition(rootRef: React.RefObject<HTMLElement | null>) {
-  const { document, window } = useDOM();
+  const { window } = useDOM();
   const [[skeletonGradientLeft, prevSkeletonGradientLeft], setSkeletonGradientLeft] =
     useStateWithPrev('0');
 
   const updatePosition = React.useCallback(() => {
     const el = rootRef.current;
-    if (!el || !document) {
+    if (!el) {
       return;
     }
 
-    const value = -(el.getBoundingClientRect().left - document.body.getBoundingClientRect().left);
+    const value = -(
+      el.getBoundingClientRect().left - el.ownerDocument.body.getBoundingClientRect().left
+    );
     const gradientValue = value === 0 ? '0' : `${value}px`;
     if (prevSkeletonGradientLeft !== gradientValue) {
       setSkeletonGradientLeft(gradientValue);
     }
-  }, [document, prevSkeletonGradientLeft, rootRef, setSkeletonGradientLeft]);
+  }, [prevSkeletonGradientLeft, rootRef, setSkeletonGradientLeft]);
 
   React.useEffect(updatePosition, [updatePosition]);
   useResizeObserver(window, updatePosition);

package/src/components/Snackbar/Snackbar.tsx

@@ -2,7 +2,7 @@
 
 import { useContext } from 'react';
 import * as React from 'react';
-import { classNames } from '@vkontakte/vkjs';
+import { classNames, noop } from '@vkontakte/vkjs';
 import { useConfigDirection } from '../../hooks/useConfigDirection';
 import { useExternRef } from '../../hooks/useExternRef';
 import { useFocusWithin } from '../../hooks/useFocusWithin';
@@ -11,6 +11,7 @@ import { useMediaQueries } from '../../hooks/useMediaQueries';
 import { useMergeProps } from '../../hooks/useMergeProps';
 import { usePlatform } from '../../hooks/usePlatform';
 import { SnackbarsContainerContext } from '../../hooks/useSnackbarManager/components/SnackbarsContainerContext';
+import { useStableCallback } from '../../hooks/useStableCallback';
 import { useCSSKeyframesAnimationController } from '../../lib/animation';
 import { callMultiple } from '../../lib/callMultiple';
 import { getRelativeBoundingClientRect } from '../../lib/dom';
@@ -127,7 +128,7 @@ export const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({
   duration = 4000,
   onActionClick: onActionClickProp,
   onClosed,
-  onClose,
+  onClose: onCloseProp,
   mode = 'default',
   subtitle,
   offsetY,
@@ -153,6 +154,8 @@ export const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({
     slotProps?.action,
   );
 
+  const onClose = useStableCallback(onCloseProp || noop);
+
   const platform = usePlatform();
   const {
     isInsideContainer,
@@ -195,7 +198,7 @@ export const Snackbar: React.FC<SnackbarProps> & { Basic: typeof Basic } = ({
         setOpen(openProp);
       }
     },
-    [openProp],
+    [openProp, onClose],
   );
 
   const clearRAF = React.useCallback(() => {

package/src/components/Spacing/Spacing.tsx

@@ -15,7 +15,7 @@ export interface SpacingProps extends HTMLAttributesWithRootRef<HTMLDivElement>
    */
   size?: SpacingSizeProp | undefined;
   /**
-   * @deprecated 7.0.0.Будет удалeно в **VKUI v9**.
+   * @deprecated 7.0.0.Будет удалено в **VKUI v9**.
    */
   children?: React.ReactNode | undefined; // TODO [>=9]: удалить неиспользуемое свойство
 }

package/src/components/Spinner/ExpressiveSpinner/ExpressiveSpinner.module.css

@@ -0,0 +1,13 @@
+.host {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  block-size: 100%;
+  color: var(--vkui--color_icon_medium);
+  will-change: contents;
+}
+
+.noColor {
+  color: currentColor;
+}

package/src/components/Spinner/ExpressiveSpinner/ExpressiveSpinner.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./ExpressiveSpinner.module.css"],"names":["host","noColor"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAUAC,S,WAVA;AAAA;AAAA","file":"ExpressiveSpinner.module.css.d.ts","sourceRoot":""}

package/src/components/Spinner/ExpressiveSpinner/ExpressiveSpinner.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { usePlatform } from '../../../hooks/usePlatform';
+import * as shapes from '../../../lib/material/shapes/shapes';
+import { animationVisibilityDelayStyles } from '../../../styles/animationVisibilityDelay';
+import { RootComponent } from '../../RootComponent/RootComponent';
+import { VisuallyHidden } from '../../VisuallyHidden/VisuallyHidden';
+import { Spinner as SimpleSpinner, type SpinnerProps } from '../Spinner';
+import { IconMaterial } from './icons';
+import styles from './ExpressiveSpinner.module.css';
+import stylesDelay from '../../../styles/animationVisibilityDelay.module.css';
+
+const iconSizeMap = {
+  s: 16,
+  m: 24,
+  l: 32,
+  xl: 44,
+} as const;
+
+const defaultShapesList = [
+  shapes.softBurstParams,
+  shapes.cookie9Params,
+  shapes.pentagonParams,
+  shapes.pillParams,
+  shapes.sunnyParams,
+  shapes.cookie4Params,
+  shapes.ovalParams,
+] as const;
+
+export interface MaterialSpinnerProps extends SpinnerProps {
+  /**
+   * Последовательность форм между которыми будет происходить анимация.
+   */
+  polygons?: readonly [shapes.ShapeParameters, shapes.ShapeParameters, ...shapes.ShapeParameters[]];
+}
+
+function MaterialSpinner({
+  polygons = defaultShapesList,
+  size = 'm',
+  children = 'Загружается...',
+  disableAnimation = false,
+  noColor = false,
+  visibilityDelay,
+  ...restProps
+}: MaterialSpinnerProps) {
+  const iconSize = iconSizeMap[size];
+
+  return (
+    <RootComponent
+      Component="span"
+      role="status"
+      {...restProps}
+      baseClassName={classNames(
+        styles.host,
+        noColor && styles.noColor,
+        visibilityDelay && stylesDelay.visibilityDelay,
+      )}
+      baseStyle={animationVisibilityDelayStyles(visibilityDelay)}
+    >
+      <IconMaterial size={iconSize} polygons={polygons} disableAnimation={disableAnimation} />
+      {hasReactNode(children) && <VisuallyHidden>{children}</VisuallyHidden>}
+    </RootComponent>
+  );
+}
+
+export function ExpressiveSpinner(props: SpinnerProps) {
+  const platform = usePlatform();
+
+  const Component = platform === 'ios' ? SimpleSpinner : MaterialSpinner;
+
+  return <Component {...props} />;
+}

package/src/components/Spinner/ExpressiveSpinner/icons.tsx

@@ -0,0 +1,104 @@
+'use client';
+
+import * as React from 'react';
+import { useAnimationFrame } from '../../../hooks/useAnimationFrame';
+import { useReducedMotion } from '../../../lib/animation';
+import * as shapes from '../../../lib/material/shapes/shapes';
+import { interpolate } from '../../../lib/svg/path/interpolate';
+import { svgPathToString } from '../../../lib/svg/path/path';
+import * as operation from '../../../lib/svg/path/transform';
+import { SvgIcon } from '../SvgIcon';
+
+interface IconMaterialProps {
+  /**
+   * Список форм.
+   */
+  polygons: readonly shapes.ShapeParameters[];
+  /**
+   * Размер иконки.
+   */
+  size: number;
+  /**
+   * Отключение анимации.
+   */
+  disableAnimation: boolean;
+}
+
+export function IconMaterial(props: IconMaterialProps) {
+  return (
+    <SvgIcon size={props.size}>
+      <IconMaterialPath {...props} />
+    </SvgIcon>
+  );
+}
+
+const globalRotationDuration = 4666;
+const morphDuration = 200;
+const morphInterval = 650;
+const fullRotation = 360;
+const quarterRotation = fullRotation / 4;
+
+function calcProgress(startTime: number, time: number, duration: number, delay = 0) {
+  const fullDuration = duration + delay;
+
+  const timeProgress = fullDuration * (((time - startTime) % fullDuration) / fullDuration);
+
+  if (timeProgress < delay) {
+    return 0;
+  }
+
+  return (timeProgress - delay) / duration;
+}
+
+function IconMaterialPath({ size, polygons, disableAnimation }: IconMaterialProps) {
+  const ref = React.useRef<SVGPathElement>(null);
+
+  const morphSequence = React.useMemo(() => {
+    function getShape(index: number, size: number) {
+      return shapes.shapeWithRotate(polygons[index], size);
+    }
+
+    return new Array(polygons.length).fill(0).map((_, index) => {
+      return interpolate(getShape(index, size), getShape((index + 1) % polygons.length, size), {
+        maxSegmentLength: 2,
+      });
+    });
+  }, [size, polygons]);
+
+  const initialPath = React.useMemo(() => svgPathToString(morphSequence[0](0)), [morphSequence]);
+
+  const callback = React.useCallback(
+    (time: number) => {
+      const rotationAnimationProgress = calcProgress(0, time, globalRotationDuration);
+      const globalRotation = rotationAnimationProgress * fullRotation;
+
+      // TODO: spring({
+      //   dampingRatio: 0.6,
+      //   stiffness: 200,
+      //   visibilityThreshold: 0.1,
+      // })
+      const morphProgress = calcProgress(0, time, morphDuration, morphInterval);
+
+      const roundMorphIndex = Math.floor(time / (morphDuration + morphInterval));
+
+      const currentMorphIndex = roundMorphIndex % morphSequence.length;
+
+      const morphRotationTargetAngle = (roundMorphIndex * quarterRotation) % fullRotation;
+      const rotation = morphProgress * quarterRotation + morphRotationTargetAngle + globalRotation;
+
+      const morphFn = morphSequence[currentMorphIndex];
+      const morph = morphFn(morphProgress);
+
+      ref.current!.setAttribute(
+        'd',
+        svgPathToString(operation.rotate(morph, size / 2, size / 2, rotation)),
+      );
+    },
+    [morphSequence, size],
+  );
+
+  const isReducedMotion = useReducedMotion();
+  useAnimationFrame(callback, disableAnimation || isReducedMotion);
+
+  return <path ref={ref} fill="currentColor" d={initialPath}></path>;
+}

package/src/components/Spinner/SvgIcon.tsx

@@ -0,0 +1,31 @@
+import { type HasRootRef } from '../../types';
+import { RootComponent } from '../RootComponent/RootComponent';
+
+/**
+ * Возвращает класс для иконки.
+ */
+export function iconClassName(size: number) {
+  return `vkuiIcon vkuiIcon--${size} vkuiIcon--w-${size} vkuiIcon--h-${size}`;
+}
+
+interface SvgIconProps extends React.ComponentProps<'svg'>, HasRootRef<SVGElement> {
+  /**
+   * Размер иконки.
+   */
+  size: number;
+}
+
+export function SvgIcon({ size, children, ...restProps }: SvgIconProps) {
+  return (
+    <RootComponent
+      Component="svg"
+      baseClassName={iconClassName(size)}
+      aria-hidden="true"
+      width={size}
+      height={size}
+      {...restProps}
+    >
+      {children}
+    </RootComponent>
+  );
+}

package/src/components/Spinner/icons.tsx

@@ -1,57 +1,54 @@
-import type * as React from 'react';
-
-function iconClassName(size: number) {
-  return `vkuiIcon vkuiIcon--${size} vkuiIcon--w-${size} vkuiIcon--h-${size}`;
-}
+import * as React from 'react';
+import { SvgIcon } from './SvgIcon';
 
 export function Icon16Spinner({ children }: React.PropsWithChildren) {
   return (
-    <svg className={iconClassName(16)} aria-hidden="true" width="16" height="16">
+    <SvgIcon size={16}>
       <path
         fill="currentColor"
         d="M8 3.25a4.75 4.75 0 0 0-4.149 7.065.75.75 0 1 1-1.31.732A6.25 6.25 0 1 1 8 14.25a.75.75 0 0 1 .001-1.5 4.75 4.75 0 1 0 0-9.5Z"
       >
         {children}
       </path>
-    </svg>
+    </SvgIcon>
   );
 }
 
 export function Icon24Spinner({ children }: React.PropsWithChildren) {
   return (
-    <svg className={iconClassName(24)} aria-hidden="true" width="24" height="24">
+    <SvgIcon size={24}>
       <path
         fill="currentColor"
         d="M16.394 5.077A8.2 8.2 0 0 0 4.58 15.49a.9.9 0 0 1-1.628.767A10 10 0 1 1 12 22a.9.9 0 0 1 0-1.8 8.2 8.2 0 0 0 4.394-15.123"
       >
         {children}
       </path>
-    </svg>
+    </SvgIcon>
   );
 }
 
 export function Icon32Spinner({ children }: React.PropsWithChildren) {
   return (
-    <svg className={iconClassName(32)} aria-hidden="true" width="32" height="32">
+    <SvgIcon size={32}>
       <path
         fill="currentColor"
         d="M16 32a1.5 1.5 0 0 1 0-3c7.18 0 13-5.82 13-13S23.18 3 16 3 3 8.82 3 16c0 1.557.273 3.074.8 4.502A1.5 1.5 0 1 1 .986 21.54 16 16 0 0 1 0 16C0 7.163 7.163 0 16 0s16 7.163 16 16-7.163 16-16 16"
       >
         {children}
       </path>
-    </svg>
+    </SvgIcon>
   );
 }
 
 export function Icon44Spinner({ children }: React.PropsWithChildren) {
   return (
-    <svg className={iconClassName(44)} aria-hidden="true" width="44" height="44">
+    <SvgIcon size={44}>
       <path
         fill="currentColor"
         d="M22 44a1.5 1.5 0 0 1 0-3c10.493 0 19-8.507 19-19S32.493 3 22 3 3 11.507 3 22c0 2.208.376 4.363 1.103 6.397a1.5 1.5 0 1 1-2.825 1.01A22 22 0 0 1 0 22C0 9.85 9.85 0 22 0s22 9.85 22 22-9.85 22-22 22"
       >
         {children}
       </path>
-    </svg>
+    </SvgIcon>
   );
 }

package/src/components/SplitLayout/SplitLayout.tsx

@@ -13,7 +13,7 @@ const warn = warnOnce('SplitLayout');
 
 export interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   /**
-   * @deprecated Since 7.9.0. Будет удалeно в **VKUI v9**.
+   * @deprecated Since 7.9.0. Будет удалено в **VKUI v9**.
    * Вместо этого используйте `slotProps={ content: { getRootRef: ... } }`.
    */
   getRef?: React.Ref<HTMLDivElement> | undefined;
@@ -35,7 +35,7 @@ export interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivEleme
   /**
    * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.
    *
-   * @deprecated Since 7.0.0. Будет удалeно в **VKUI v9**.
+   * @deprecated Since 7.0.0. Будет удалено в **VKUI v9**.
    * Начиная с **VKUI v7** компоненты можно располагать в любом
    * месте приложения в пределах `AppRoot`.
    */
@@ -43,7 +43,7 @@ export interface SplitLayoutProps extends HTMLAttributesWithRootRef<HTMLDivEleme
   /**
    * Свойство для отрисовки `ModalRoot`.
    *
-   * @deprecated Since 7.0.0. Будет удалeно в **VKUI v9**.
+   * @deprecated Since 7.0.0. Будет удалено в **VKUI v9**.
    * Начиная с **VKUI v7**  `ModalRoot` можно располагать в любом
    * месте приложения в пределах `AppRoot`.
    */