@vkontakte/vkui 5.9.1 → 5.9.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "5.9.1",
+  "version": "5.9.3",
   "name": "@vkontakte/vkui",
   "description": "VKUI library",
   "main": "dist/cjs/index.js",
@@ -70,10 +70,10 @@
     "react-dom": "^17.0.0 || ^18.1.0"
   },
   "dependencies": {
-    "@floating-ui/react-dom": "^2.0.2",
     "@swc/helpers": "^0.5.2",
     "@vkontakte/icons": "^2.62.0",
     "@vkontakte/vkjs": "^1.1.0",
+    "@vkontakte/vkui-floating-ui": "^0.1.0",
     "dayjs": "^1.11.10",
     "mitt": "^3.0.1"
   },

package/src/components/ActionSheet/ActionSheet.tsx

@@ -130,14 +130,14 @@ export const ActionSheet = ({
       >
         <div className={styles['ActionSheet__content-wrapper']}>
           {(header || text) && (
-            <header className={styles['ActionSheet__header']}>
+            <div className={styles['ActionSheet__header']}>
               {header && (
                 <Footnote weight="2" className={styles['ActionSheet__title']}>
                   {header}
                 </Footnote>
               )}
               {text && <Footnote className={styles['ActionSheet__text']}>{text}</Footnote>}
-            </header>
+            </div>
           )}
           {children}
         </div>

package/src/components/Alert/Alert.module.css

@@ -61,6 +61,11 @@
   color: var(--vkui--color_text_secondary);
 }
 
+.Alert__header,
+.Alert__text {
+  word-break: break-word;
+}
+
 .Alert__actions--direction-horizontal {
   justify-content: flex-end;
 }

package/src/components/Alert/Alert.tsx

@@ -7,7 +7,7 @@ import { usePlatform } from '../../hooks/usePlatform';
 import { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';
 import { Platform } from '../../lib/platform';
 import { stopPropagation } from '../../lib/utils';
-import { AlignType, AnchorHTMLAttributesOnly, HasDataAttribute } from '../../types';
+import { AlignType, AnchorHTMLAttributesOnly, HasDataAttribute, HasRootRef } from '../../types';
 import { useScrollLock } from '../AppRoot/ScrollContext';
 import { ButtonProps } from '../Button/Button';
 import { FocusTrap } from '../FocusTrap/FocusTrap';
@@ -31,7 +31,7 @@ export interface AlertActionInterface
   mode: AlertActionMode;
 }
 
-export interface AlertProps extends React.HTMLAttributes<HTMLElement> {
+export interface AlertProps extends React.HTMLAttributes<HTMLElement>, HasRootRef<HTMLDivElement> {
   actionsLayout?: 'vertical' | 'horizontal';
   actionsAlign?: AlignType;
   actions?: AlertActionInterface[];
@@ -67,6 +67,7 @@ export const Alert = ({
   renderAction,
   actionsAlign,
   dismissButtonMode = 'outside',
+  getRootRef,
   ...restProps
 }: AlertProps) => {
   const generatedId = useId();
@@ -124,7 +125,13 @@ export const Alert = ({
   useScrollLock();
 
   return (
-    <PopoutWrapper className={className} closing={closing} style={style} onClick={close}>
+    <PopoutWrapper
+      className={className}
+      closing={closing}
+      style={style}
+      onClick={close}
+      getRootRef={getRootRef}
+    >
       <FocusTrap
         {...restProps}
         getRootRef={elementRef}

package/src/components/Button/Button.module.css

@@ -185,7 +185,9 @@
 .Button--mode-link .Button__after,
 .Button--mode-link .Button__before,
 .Button--mode-link .Button__content:first-child,
-.Button--mode-link .Button__content:last-child {
+.Button--mode-link .Button__content:last-child,
+.Button--stretched .Button__after:only-child,
+.Button--stretched .Button__before:only-child {
   padding-left: 0;
   padding-right: 0;
 }

package/src/components/CalendarRange/CalendarRange.tsx

@@ -59,7 +59,6 @@ export const CalendarRange = ({
   shouldDisableDate,
   onClose,
   weekStartsOn = 1,
-  getRootRef,
   disablePickers,
   prevMonthAriaLabel,
   nextMonthAriaLabel,

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -137,7 +137,7 @@ export const ChipsSelect = <Option extends ChipOption>(props: ChipsSelectProps<O
   const [popperPlacement, setPopperPlacement] = React.useState<Placement | undefined>(undefined);
 
   const scrollBoxRef = React.useRef<HTMLDivElement>(null);
-  const rootRef = useExternRef(getRef);
+  const rootRef = useExternRef(getRootRef);
   const {
     fieldValue,
     selectedOptions = [],

package/src/components/CustomScrollView/CustomScrollView.tsx

@@ -5,10 +5,15 @@ import { useExternRef } from '../../hooks/useExternRef';
 import { DOMProps, useDOM } from '../../lib/dom';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { stopPropagation } from '../../lib/utils';
+import type { HasRootRef } from '../../types';
 import { TrackerOptionsProps, useTrackerVisibility } from './useTrackerVisibility';
 import styles from './CustomScrollView.module.css';
 
-export interface CustomScrollViewProps extends DOMProps, TrackerOptionsProps {
+export interface CustomScrollViewProps
+  extends React.AllHTMLAttributes<HTMLDivElement>,
+    DOMProps, // TODO [>=6]: remove
+    HasRootRef<HTMLDivElement>,
+    TrackerOptionsProps {
   windowResize?: boolean;
   boxRef?: React.Ref<HTMLDivElement>;
   className?: HTMLDivElement['className'];
@@ -24,6 +29,8 @@ export const CustomScrollView = ({
   autoHideScrollbar = false,
   autoHideScrollbarDelay,
   onScroll,
+  getRootRef,
+  ...restProps
 }: CustomScrollViewProps) => {
   const { document, window } = useDOM();
 
@@ -174,7 +181,11 @@ export const CustomScrollView = ({
   };
 
   return (
-    <div className={classNames(styles['CustomScrollView'], className)}>
+    <div
+      className={classNames(styles['CustomScrollView'], className)}
+      ref={getRootRef}
+      {...restProps}
+    >
       <div className={styles['CustomScrollView__box']} tabIndex={-1} ref={boxRef} onScroll={scroll}>
         {children}
       </div>

package/src/components/CustomSelect/CustomSelect.tsx

@@ -111,6 +111,10 @@ export interface CustomSelectOptionInterface {
   [index: string]: any;
 }
 
+interface CustomSelectRenderOption extends CustomSelectOptionProps {
+  option: CustomSelectOptionInterface;
+}
+
 export interface SelectProps extends NativeSelectProps, FormFieldProps, TrackerOptionsProps {
   /**
    * Если `true`, то при клике на селект в нём появится текстовое поле для поиска по `options`. По умолчанию поиск
@@ -149,7 +153,7 @@ export interface SelectProps extends NativeSelectProps, FormFieldProps, TrackerO
    * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе селект не будет знать об актуальном состоянии
    * опции.
    */
-  renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;
+  renderOption?: (props: CustomSelectRenderOption) => React.ReactNode;
   /**
    * Рендер-проп для кастомного рендера содержимого дропдауна.
    * В `defaultDropdownContent` содержится список опций в виде скроллящегося блока.

package/src/components/CustomSelectOption/CustomSelectOption.module.css

@@ -5,7 +5,6 @@
   position: relative;
   box-sizing: border-box;
   padding: 8px 12px;
-  white-space: nowrap;
   user-select: none;
   cursor: pointer;
   color: var(--vkui--color_text_primary);
@@ -52,8 +51,6 @@
 
 .CustomSelectOption__children {
   min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
 }
 
 .CustomSelectOption__after {
@@ -65,8 +62,6 @@
 
 .CustomSelectOption__description {
   color: var(--vkui--color_text_secondary);
-  text-overflow: ellipsis;
-  overflow: hidden;
 }
 
 .CustomSelectOption__selectedIcon {

package/src/components/FormLayout/FormLayout.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
-import { HasComponent, HasRef } from '../../types';
+import { useExternRef } from '../../hooks/useExternRef';
+import { HasComponent, HasRef, HasRootRef } from '../../types';
 import styles from './FormLayout.module.css';
 
 const preventDefault = (e: React.FormEvent) => e.preventDefault();
 
 export type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> &
   HasRef<HTMLElement> &
+  HasRootRef<HTMLElement> &
   HasComponent;
 
 /**
@@ -15,17 +17,20 @@ export type FormLayoutProps = React.AllHTMLAttributes<HTMLElement> &
 export const FormLayout = ({
   children,
   Component = 'form',
-  getRef,
+  getRef, // TOOD [>=6]: remove
+  getRootRef,
   onSubmit = preventDefault,
   className,
   ...restProps
 }: FormLayoutProps) => {
+  const formLayoutRef = useExternRef(getRef, getRootRef);
+
   return (
     <Component
       {...restProps}
       className={classNames(styles['FormLayout'], className)}
       onSubmit={onSubmit}
-      ref={getRef}
+      ref={formLayoutRef}
     >
       {children}
       {Component === 'form' && (

package/src/components/Gallery/Gallery.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { clamp } from '../../helpers/math';
 import { useIsClient } from '../../hooks/useIsClient';
-import { useTimeout } from '../../hooks/useTimeout';
 import { BaseGallery } from '../BaseGallery/BaseGallery';
 import { CarouselBase } from '../BaseGallery/CarouselBase/CarouselBase';
 import { BaseGalleryProps } from '../BaseGallery/types';
+import { useAutoPlay } from './hooks';
 
 export interface GalleryProps extends BaseGalleryProps {
   initialSlideIndex?: number;
@@ -47,11 +47,7 @@ export const Gallery = ({
     [isControlled, onChange, slideIndex],
   );
 
-  const autoplay = useTimeout(() => handleChange((slideIndex + 1) % childCount), timeout);
-  React.useEffect(
-    () => (timeout ? autoplay.set() : autoplay.clear()),
-    [timeout, slideIndex, autoplay],
-  );
+  useAutoPlay(timeout, slideIndex, () => handleChange((slideIndex + 1) % childCount));
 
   // prevent invalid slideIndex
   // any slide index is invalid with no slides, just keep it as is

package/src/components/Gallery/hooks.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { useTimeout } from '../../hooks/useTimeout';
+import { useDOM } from '../../lib/dom';
+
+export function useAutoPlay(timeout: number, slideIndex: number, callbackFn: VoidFunction) {
+  const { clear: clearAutoPlay, set: setAutoPlay } = useTimeout(callbackFn, timeout);
+  const { document } = useDOM();
+
+  React.useEffect(
+    () => (timeout ? setAutoPlay() : clearAutoPlay()),
+    [timeout, slideIndex, clearAutoPlay, setAutoPlay],
+  );
+
+  // Отключаем прокрутку слайдов при неактивной вкладке
+  React.useEffect(
+    function preventSlideChange() {
+      if (!document || !timeout) {
+        return;
+      }
+
+      const changeAutoPlay = () => {
+        if (document.visibilityState === 'visible') {
+          clearAutoPlay();
+          setAutoPlay();
+        }
+        if (document.visibilityState === 'hidden') {
+          clearAutoPlay();
+        }
+      };
+
+      document.addEventListener('visibilitychange', changeAutoPlay);
+
+      return () => {
+        document.removeEventListener('visibilitychange', changeAutoPlay);
+      };
+    },
+    [document, timeout, clearAutoPlay, setAutoPlay],
+  );
+}

package/src/components/Header/Header.tsx

@@ -11,7 +11,7 @@ import { Subhead } from '../Typography/Subhead/Subhead';
 import { Title } from '../Typography/Title/Title';
 import styles from './Header.module.css';
 
-export interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement> {
+export interface HeaderProps extends HTMLAttributesWithRootRef<HTMLElement>, HasComponent {
   mode?: 'primary' | 'secondary' | 'tertiary';
   size?: 'regular' | 'large';
   subtitle?: React.ReactNode;
@@ -75,6 +75,7 @@ const stylesMode = {
 export const Header = ({
   mode = 'primary',
   size = 'regular',
+  Component = 'h2',
   children,
   subtitle,
   indicator,
@@ -84,7 +85,6 @@ export const Header = ({
 }: HeaderProps) => {
   return (
     <RootComponent
-      Component="header"
       {...restProps}
       baseClassName={classNames(
         styles['Header'],
@@ -97,7 +97,7 @@ export const Header = ({
       <div className={styles['Header__main']}>
         <HeaderContent
           className={styles['Header__content']}
-          Component="span"
+          Component={Component}
           mode={mode}
           size={size}
         >

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -288,9 +288,11 @@ export const HorizontalScroll = ({
     >
       {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (
         <ScrollArrow
+          data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrow' : undefined}
           size={arrowSize}
           offsetY={arrowOffsetY}
           direction="left"
+          aria-hidden
           className={classNames(
             styles['HorizontalScroll__arrow'],
             styles['HorizontalScroll__arrowLeft'],
@@ -300,9 +302,11 @@ export const HorizontalScroll = ({
       )}
       {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (
         <ScrollArrow
+          data-testid={process.env.NODE_ENV === 'test' ? 'ScrollArrow' : undefined}
           size={arrowSize}
           offsetY={arrowOffsetY}
           direction="right"
+          aria-hidden
           className={classNames(
             styles['HorizontalScroll__arrow'],
             styles['HorizontalScroll__arrowRight'],

package/src/components/ModalPage/ModalPage.module.css

@@ -116,10 +116,7 @@
 }
 
 .ModalPage--desktop .ModalPage__content-in,
-:global(.vkuiInternalModalRoot__modal--expandable):not(
-    :global(.vkuiInternalModalRoot__modal--collapsed)
-  )
-  .ModalPage__content-in {
+:global(.vkuiInternalModalRoot__modal--expandable) .ModalPage__content-in {
   height: 100%;
 }
 

package/src/components/ModalPageHeader/ModalPageHeader.tsx

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import { useAdaptivityWithJSMediaQueries } from '../../hooks/useAdaptivityWithJSMediaQueries';
+import { useExternRef } from '../../hooks/useExternRef';
 import { usePlatform } from '../../hooks/usePlatform';
 import { Platform } from '../../lib/platform';
-import { HasRef } from '../../types';
+import { HasRef, HasRootRef } from '../../types';
 import { ModalPageContext } from '../ModalPage/ModalPageContext';
 import { PanelHeader, PanelHeaderProps } from '../PanelHeader/PanelHeader';
 import { Separator } from '../Separator/Separator';
@@ -12,7 +13,8 @@ import styles from './ModalPageHeader.module.css';
 export interface ModalPageHeaderProps
   extends React.HTMLAttributes<HTMLDivElement>,
     Omit<PanelHeaderProps, 'fixed' | 'shadow'>,
-    HasRef<HTMLDivElement> {}
+    HasRef<HTMLDivElement>,
+    HasRootRef<HTMLDivElement> {}
 
 /**
  * @see https://vkcom.github.io/VKUI/#/ModalPageHeader
@@ -20,7 +22,8 @@ export interface ModalPageHeaderProps
 export const ModalPageHeader = ({
   children,
   separator = true,
-  getRef,
+  getRef, // TODO [>=6]: remove
+  getRootRef,
   className,
   typographyProps,
   ...restProps
@@ -29,6 +32,7 @@ export const ModalPageHeader = ({
   const hasSeparator = separator && platform === Platform.VKCOM;
   const { isDesktop } = useAdaptivityWithJSMediaQueries();
   const { labelId } = React.useContext(ModalPageContext);
+  const modalPageHeaderRef = useExternRef(getRef, getRootRef);
 
   return (
     <div
@@ -37,7 +41,7 @@ export const ModalPageHeader = ({
         platform !== Platform.VKCOM && styles['ModalPageHeader--withGaps'],
         isDesktop && styles['ModalPageHeader--desktop'],
       )}
-      ref={getRef}
+      ref={modalPageHeaderRef}
     >
       <PanelHeader
         className={classNames('vkuiInternalModalPageHeader__in', className)}

package/src/components/ModalRoot/ModalRoot.tsx

@@ -402,7 +402,7 @@ class ModalRootTouchComponent extends React.Component<
 
       modalState.translateY = translateY;
       modalState.translateYCurrent = translateY;
-      modalState.collapsed = translateY > 0 && translateY < shiftYEndPercent;
+      modalState.collapsed = numberInRange(translateY, modalState.collapsedRange);
       modalState.expanded = translateY === 0;
       modalState.hidden = translateY === 100;
 
@@ -661,9 +661,10 @@ function initPageModal(modalState: ModalsStateEntry) {
   let translateYFrom;
   let translateY;
   let expandedRange: TranslateRange;
-  let collapsedRange: TranslateRange;
+  let collapsedRange: TranslateRange | undefined;
   let hiddenRange: TranslateRange;
 
+  const hasCollapsedState = Boolean(modalState.expandable && modalState.settlingHeight !== 100);
   if (modalState.expandable) {
     translateYFrom = 100 - (modalState.settlingHeight ?? 0);
 
@@ -671,10 +672,10 @@ function initPageModal(modalState: ModalsStateEntry) {
     const visiblePart = 100 - translateYFrom;
 
     expandedRange = [0, shiftHalf];
-    collapsedRange = [shiftHalf, translateYFrom + visiblePart / 4];
+    collapsedRange = hasCollapsedState ? [shiftHalf, translateYFrom + visiblePart / 4] : undefined;
     hiddenRange = [translateYFrom + visiblePart / 4, 100];
 
-    collapsed = translateYFrom > 0;
+    collapsed = hasCollapsedState && translateYFrom > 0;
     expanded = translateYFrom <= 0;
     translateY = translateYFrom;
   } else {
@@ -686,7 +687,7 @@ function initPageModal(modalState: ModalsStateEntry) {
     translateY = translateYFrom;
 
     expandedRange = [translateY, translateY + 25];
-    collapsedRange = [translateY + 25, translateY + 25];
+    collapsedRange = undefined;
     hiddenRange = [translateY + 25, translateY + 100];
   }
 

package/src/components/PanelHeaderButton/PanelHeaderButton.module.css

@@ -17,7 +17,7 @@
 .PanelHeaderButton--primitive {
   height: 48px;
   line-height: 48px;
-  padding: 0 12px;
+  padding: 0 10px;
 }
 
 /*
@@ -44,6 +44,11 @@
   padding: 8px;
 }
 
+/* stylelint-disable-next-line @project-tools/stylelint-atomic -- фикс для иконки назад */
+.PanelHeaderBack--ios :global(.vkuiIcon--w-20) {
+  padding-left: 4px;
+}
+
 /*
  * Android
  */

package/src/components/PullToRefresh/PullToRefresh.tsx

@@ -8,6 +8,7 @@ import { useTimeout } from '../../hooks/useTimeout';
 import { DOMProps, useDOM } from '../../lib/dom';
 import { Platform } from '../../lib/platform';
 import { runTapticImpactOccurred } from '../../lib/taptic';
+import { coordY, VKUITouchEvent } from '../../lib/touch';
 import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
 import { AnyFunction, HasChildren } from '../../types';
 import { ScrollContextInterface, useScroll } from '../AppRoot/ScrollContext';
@@ -113,15 +114,6 @@ export const PullToRefresh = ({
   const [contentShift, setContentShift] = React.useState(0);
   const [spinnerProgress, setSpinnerProgress] = React.useState(0);
 
-  const onWindowTouchMove = (event: Event) => {
-    if (refreshing) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-  };
-
-  useGlobalEventListener(document, 'touchmove', onWindowTouchMove, TOUCH_MOVE_EVENT_PARAMS);
-
   const resetRefreshingState = React.useCallback(() => {
     setWatching(false);
     setCanRefresh(false);
@@ -199,13 +191,40 @@ export const PullToRefresh = ({
     runRefreshing,
   ]);
 
+  const startYRef = React.useRef(0);
+
   const onTouchStart = (e: TouchEvent) => {
     if (refreshing) {
       cancelEvent(e);
     }
     setTouchDown(true);
+    startYRef.current = e.startY;
   };
 
+  const shouldPreventTouchMove = (event: VKUITouchEvent) => {
+    if (watching || refreshing) {
+      return true;
+    }
+
+    /* Нам нужно запретить touchmove у документа как только стало понятно, что
+     * начинается pull.
+     * состояния watching и refreshing устанавливаются слишком поздно и браузер
+     * может успеть начать нативный pull to refresh. */
+    const shiftY = coordY(event) - startYRef.current;
+    const pageYOffset = scroll?.getScroll().y;
+    const isRefreshGestureStarted = pageYOffset === 0 && shiftY > 0 && touchDown;
+    return isRefreshGestureStarted;
+  };
+
+  const onWindowTouchMove = (event: VKUITouchEvent) => {
+    if (shouldPreventTouchMove(event)) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+
+  useGlobalEventListener(document, 'touchmove', onWindowTouchMove, TOUCH_MOVE_EVENT_PARAMS);
+
   const onTouchMove = (e: TouchEvent) => {
     const { isY, shiftY } = e;
     const { start, max } = initParams;

package/src/components/Snackbar/Snackbar.module.css

@@ -42,7 +42,7 @@
   align-items: center;
   background: var(--vkui--color_background_modal);
   box-shadow: var(--vkui--elevation4);
-  border-radius: var(--vkui--size_border_radius--regular);
+  border-radius: var(--vkui--size_card_border_radius--regular);
 }
 
 .Snackbar--mode-dark .Snackbar__body {

package/src/components/Typography/Caption/Caption.tsx

@@ -14,6 +14,8 @@ export interface CaptionProps extends TypographyProps, HasCaps {
 }
 
 /**
+ * Используется для мелких подписей.
+ *
  * @see https://vkcom.github.io/VKUI/#/Caption
  */
 export const Caption = ({

package/src/components/Typography/Footnote/Footnote.tsx

@@ -6,6 +6,8 @@ import styles from './Footnote.module.css';
 export interface FootnoteProps extends TypographyProps, HasCaps {}
 
 /**
+ * Используется для основных подписей.
+ *
  * @see https://vkcom.github.io/VKUI/#/Footnote
  */
 export const Footnote = ({

package/src/components/Typography/Headline/Headline.tsx

@@ -20,6 +20,8 @@ export interface HeadlineProps extends TypographyProps {
 }
 
 /**
+ * Используется для подзаголовков.
+ *
  * @see https://vkcom.github.io/VKUI/#/Headline
  */
 export const Headline = ({

package/src/components/Typography/Paragraph/Paragraph.tsx

@@ -6,6 +6,8 @@ import styles from './Paragraph.module.css';
 export type ParagraphProps = TypographyProps;
 
 /**
+ * Используется для основного текста.
+ *
  * @see https://vkcom.github.io/VKUI/#/Paragraph
  */
 export const Paragraph = ({

package/src/components/Typography/Subhead/Subhead.tsx

@@ -13,6 +13,8 @@ const sizeYClassNames = {
 export type SubheadProps = TypographyProps;
 
 /**
+ * Используется для подзаголовков 2 уровня.
+ *
  * @see https://vkcom.github.io/VKUI/#/Subhead
  */
 export const Subhead = ({

package/src/components/Typography/Text/Text.tsx

@@ -13,6 +13,8 @@ const sizeYClassNames = {
 export type TextProps = TypographyProps;
 
 /**
+ * Основной наборный текст.
+ *
  * @see https://vkcom.github.io/VKUI/#/Text
  */
 export const Text = ({

package/src/components/Typography/Title/Title.tsx

@@ -14,6 +14,8 @@ export interface TitleProps extends TypographyProps {
 }
 
 /**
+ * Используется для заголовков.
+ *
  * @see https://vkcom.github.io/VKUI/#/Title
  */
 export const Title = ({