@vkontakte/vkui 7.2.1 → 7.3.0

package/src/components/SplitCol/SplitCol.tsx

@@ -49,20 +49,32 @@ function useTransitionAnimate(animateProp?: boolean) {
 }
 
 export interface SplitColProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+  /**
+   * Ширина колонки.
+   */
   width?: number | string;
+  /**
+   * Максимальная ширина колонки.
+   */
   maxWidth?: number | string;
+  /**
+   * Минимальная ширина колонки.
+   */
   minWidth?: number | string;
   /**
-   * Если false, то переходы между Panel происходят без анимации
+   * Если false, то переходы между Panel происходят без анимации.
    */
   animate?: boolean;
   /**
-   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`
+   * Если true, то добавляются боковые отступы фиксированной величины при ширине больше чем `smallTablet`.
    */
   autoSpaced?: boolean;
+  /**
+   * Фиксированное положение колонки.
+   */
   fixed?: boolean;
   /**
-   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`
+   * Если true, то ширина контейнера становится 100% при ширине меньше чем `tablet`.
    */
   stretchedOnMobile?: boolean;
 }

package/src/components/SplitCol/SplitColContext.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable jsdoc/require-jsdoc */
+
 import * as React from 'react';
 
 export interface SplitColContextProps {

package/src/components/SplitLayout/SplitLayout.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./SplitLayout.module.css"],"names":["host","inner","innerHeader","ios","innerCenter"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAMAC,O,WANA;AAAA,E,aAcAC,a,WAdA;AAAA,E,aAsBAC,K,WAtBA;AAAA,E,aAsBKD,a,WAtBL;AAAA,E,aA4BAE,a,WA5BA;AAAA;AAAA","file":"SplitLayout.module.css.d.ts","sourceRoot":""}

package/src/components/SplitLayout/SplitLayout.tsx

@@ -12,7 +12,7 @@ export interface SplitLayoutProps
   /**
    * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.
    *
-   * @deprecated будет удалeно в **VKUI v8**.
+   * @deprecated Будет удалeно в **VKUI v8**.
    * Начиная с **VKUI v7** компоненты можно располагать в любом
    * месте приложения в пределах `AppRoot`.
    */
@@ -20,11 +20,14 @@ export interface SplitLayoutProps
   /**
    * Свойство для отрисовки `ModalRoot`.
    *
-   * @deprecated будет удалeно в **VKUI v8**.
+   * @deprecated Будет удалeно в **VKUI v8**.
    * Начиная с **VKUI v7**  `ModalRoot` можно располагать в любом
    * месте приложения в пределах `AppRoot`.
    */
   modal?: React.ReactNode;
+  /**
+   * Компонент для отрисовки заголовка.
+   */
   header?: React.ReactNode;
   /**
    * Центрирует контент.

package/src/components/SubnavigationBar/SubnavigationBar.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./SubnavigationBar.module.css"],"names":["in","scrollIn","item","modeFixed"],"mappings":"AAAA;AAAA,E,aAAAA,I,WAAA;AAAA,E,aAMAC,U,WANA;AAAA,E,aAaAA,U,WAbA;AAAA,E,aAcAA,U,WAdA;AAAA,E,aAmBAC,M,WAnBA;AAAA,E,aAwBAA,M,WAxBA;AAAA,E,aAwBQA,M,WAxBR;AAAA,E,aA4BAC,W,WA5BA;AAAA,E,aA4BWD,M,WA5BX;AAAA;AAAA","file":"SubnavigationBar.module.css.d.ts","sourceRoot":""}

package/src/components/SubnavigationBar/SubnavigationBar.tsx

@@ -15,6 +15,9 @@ export interface SubnavigationBarProps
       HorizontalScrollProps,
       'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'
     > {
+  /**
+   * Отключение возможности прокручивания компонента по горизонтали.
+   */
   fixed?: boolean;
 }
 

package/src/components/SubnavigationButton/SubnavigationButton.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./SubnavigationButton.module.css"],"names":["host","disabled","in","sizeS","sizeM","sizeL","sizeYCompact","sizeYNone","before","label","after","chevronIcon","modePrimary","modeOutline","appearanceNeutral","selected","modeTertiary","appearanceAccent"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAMAC,U,WANA;AAAA,E,aAUAC,I,WAVA;AAAA,E,aAoBAC,O,WApBA;AAAA,E,aAoBOD,I,WApBP;AAAA,E,aA4BAE,O,WA5BA;AAAA,E,aA4BOF,I,WA5BP;AAAA,E,aAoCAG,O,WApCA;AAAA,E,aAoCOH,I,WApCP;AAAA,E,aA2CAI,c,WA3CA;AAAA,E,aA2CaH,O,WA3Cb;AAAA,E,aA2CoBD,I,WA3CpB;AAAA,E,aA+CAI,c,WA/CA;AAAA,E,aA+CaF,O,WA/Cb;AAAA,E,aA+CoBF,I,WA/CpB;AAAA,E,aAmDAI,c,WAnDA;AAAA,E,aAmDaD,O,WAnDb;AAAA,E,aAmDoBH,I,WAnDpB;AAAA,E,aAwDEK,W,WAxDF;AAAA,E,aAwDYJ,O,WAxDZ;AAAA,E,aAwDmBD,I,WAxDnB;AAAA,E,aA4DEK,W,WA5DF;AAAA,E,aA4DYH,O,WA5DZ;AAAA,E,aA4DmBF,I,WA5DnB;AAAA,E,aAgEEK,W,WAhEF;AAAA,E,aAgEYF,O,WAhEZ;AAAA,E,aAgEmBH,I,WAhEnB;AAAA,E,aAqEAM,Q,WArEA;AAAA,E,aA0EAC,O,WA1EA;AAAA,E,aAiFAC,O,WAjFA;AAAA,E,aAqFAC,a,WArFA;AAAA,E,aA4FAH,Q,WA5FA;AAAA,E,aA6FAC,O,WA7FA;AAAA,E,aAiGAC,O,WAjGA;AAAA,E,aAkGAD,O,WAlGA;AAAA,E,aAmGAE,a,WAnGA;AAAA,E,aA2GAC,a,WA3GA;AAAA,E,aAgHAC,a,WAhHA;AAAA,E,aAwHAC,mB,WAxHA;AAAA,E,aAwHmBH,a,WAxHnB;AAAA,E,aAyHAG,mB,WAzHA;AAAA,E,aAyHmBN,Q,WAzHnB;AAAA,E,aAiIAO,U,WAjIA;AAAA,E,aAwIAA,U,WAxIA;AAAA,E,aAwISC,c,WAxIT;AAAA,E,aAyIAD,U,WAzIA;AAAA,E,aAyISD,mB,WAzIT;AAAA,E,aA8IAC,U,WA9IA;AAAA,E,aA8ISE,kB,WA9IT;AAAA,E,aA8I+BD,c,WA9I/B;AAAA,E,aA8I8CR,Q,WA9I9C;AAAA,E,aA+IAO,U,WA/IA;AAAA,E,aA+ISE,kB,WA/IT;AAAA,E,aA+I+BD,c,WA/I/B;AAAA,E,aA+I8CL,a,WA/I9C;AAAA,E,aAwJAX,M,WAxJA;AAAA,E,aA6JAe,U,WA7JA;AAAA,E,aA6JSE,kB,WA7JT;AAAA,E,aA6J+BD,c,WA7J/B;AAAA,E,aAkKAD,U,WAlKA;AAAA,E,aAkKSD,mB,WAlKT;AAAA;AAAA","file":"SubnavigationButton.module.css.d.ts","sourceRoot":""}

package/src/components/SubnavigationButton/SubnavigationButton.tsx

@@ -33,22 +33,37 @@ const sizeYClassNames = {
 };
 
 export interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {
+  /**
+   * Стиль отображения кнопки.
+   */
   mode?: 'primary' | 'outline' | 'tertiary';
+  /**
+   * Тип внешнего вида кнопки.
+   */
   appearance?: 'accent' | 'neutral';
+  /**
+   * Размер кнопки.
+   */
   size?: 's' | 'm' | 'l';
+  /**
+   * Выбранное состояние.
+   */
   selected?: boolean;
   /**
-   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar fixed />`
+   * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar fixed />`.
    */
   textLevel?: '1' | '2' | '3';
   /**
-   * Рекомендуется использовать только иконки с размером 24
+   * Рекомендуется использовать только иконки с размером 24.
    */
   before?: React.ReactNode;
   /**
-   * Рекомендуется использовать только `<Counter size="s" />` или `<Badge />`
+   * Рекомендуется использовать только `<Counter size="s" />` или `<Badge />`.
    */
   after?: React.ReactNode;
+  /**
+   * Нужно ли отображать иконку `"chevron"`.
+   */
   chevron?: boolean;
 }
 
@@ -89,9 +104,9 @@ export const SubnavigationButton = ({
 
   return (
     <Tappable
-      {...restProps}
       hasActive={false}
       focusVisibleMode="outside"
+      {...restProps}
       baseClassName={classNames(
         styles.host,
         sizeStyles[size],

package/src/components/Switch/Switch.module.css

@@ -101,9 +101,9 @@
   --vkui_internal--Switch__handle_shift_x_easing: cubic-bezier(0.36, -0.24, 0.26, 1.32);
   /* prettier-ignore */
   --vkui_internal--Switch__handle_shadow:
-    0 3px 8px rgba(0, 0, 0, 0.15),
-    0 3px 1px rgba(0, 0, 0, 0.06),
-    inset 0 0 0 0.5px rgba(0, 0, 0, 0.04);
+    0 3px 8px rgb(0, 0, 0, 0.15),
+    0 3px 1px rgb(0, 0, 0, 0.06),
+    inset 0 0 0 0.5px rgb(0, 0, 0, 0.04);
 }
 
 .ios.sizeYCompact {

package/src/components/Switch/Switch.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./Switch.module.css"],"names":["host","rtl","disabled","default","sizeYCompact","sizeYNone","ios","inputFake","inputNative","track","handle","handleWithRipple"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAsBAC,K,WAtBA;AAAA,E,aA0BAC,U,WA1BA;AAAA,E,aA+BAC,S,WA/BA;AAAA,E,aAsDAA,S,WAtDA;AAAA,E,aAsDQC,c,WAtDR;AAAA,E,aAoEED,S,WApEF;AAAA,E,aAoEUE,W,WApEV;AAAA,E,aAkFAC,K,WAlFA;AAAA,E,aA4GAA,K,WA5GA;AAAA,E,aA4GIF,c,WA5GJ;AAAA,E,aA0HEE,K,WA1HF;AAAA,E,aA0HMD,W,WA1HN;AAAA,E,aAwIAE,W,WAxIA;AAAA,E,aA4IAC,a,WA5IA;AAAA,E,aA4IuBD,W,WA5IvB;AAAA,E,aAyJAJ,S,WAzJA;AAAA,E,aAyJaD,U,WAzJb;AAAA,E,aAyJwBK,W,WAzJxB;AAAA,E,aA+JAE,O,WA/JA;AAAA,E,aAyKAN,S,WAzKA;AAAA,E,aAyKSM,O,WAzKT;AAAA,E,aAoLAC,Q,WApLA;AAAA,E,aAiMAA,Q,WAjMA;AAAA,E,aA+MAC,kB,WA/MA;AAAA,E,aAwOEA,kB,WAxOF;AAAA,E,aAgPEJ,W,WAhPF;AAAA,E,aAgPmBI,kB,WAhPnB;AAAA,E,aAqPAJ,W,WArPA;AAAA,E,aAqPkBI,kB,WArPlB;AAAA,E,aAyPAH,a,WAzPA;AAAA,E,aAyPuBD,W,WAzPvB;AAAA,E,aAyPkCI,kB,WAzPlC;AAAA,E,aA+PEA,kB,WA/PF;AAAA,E,aAmQEJ,W,WAnQF;AAAA,E,aAmQoBI,kB,WAnQpB;AAAA,E,aA6Q0CX,M,WA7Q1C;AAAA;AAAA","file":"Switch.module.css.d.ts","sourceRoot":""}

package/src/components/Tabbar/Tabbar.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./Tabbar.module.css"],"names":["host","shadow","ios"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAcAC,Q,WAdA;AAAA,E,aAsBAC,K,WAtBA;AAAA,E,aAsBID,Q,WAtBJ;AAAA,E,aA0BAC,K,WA1BA;AAAA,E,aA0BID,Q,WA1BJ;AAAA;AAAA","file":"Tabbar.module.css.d.ts","sourceRoot":""}

package/src/components/Tabbar/Tabbar.tsx

@@ -9,11 +9,11 @@ import styles from './Tabbar.module.css';
 
 export interface TabbarProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
   /**
-   * Флаг, который скрывает тень (Android) или границы (iOS)
+   * Флаг, который скрывает тень (Android) или границы (iOS).
    */
   plain?: boolean;
   /**
-   * Задает расположение элементов (вертикальное/горизонтальное)
+   * Задает расположение элементов (вертикальное/горизонтальное).
    */
   mode?: 'vertical' | 'horizontal' | 'auto';
 }

package/src/components/TabbarItem/TabbarItem.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./TabbarItem.module.css"],"names":["host","selected","tappable","in","icon","label","android","ios","tappableActive"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAe6BA,M,WAf7B;AAAA,E,aAuBAC,U,WAvBA;AAAA,E,aA2BAC,U,WA3BA;AAAA,E,aA+BAC,I,WA/BA;AAAA,E,aA6C8CA,I,WA7C9C;AAAA,E,aAkDgDA,I,WAlDhD;AAAA,E,aAsDAC,M,WAtDA;AAAA,E,aA2DAH,U,WA3DA;AAAA,E,aA2DUG,M,WA3DV;AAAA,E,aA+DAC,O,WA/DA;AAAA,E,aAuE8CA,O,WAvE9C;AAAA,E,aA+EgDA,O,WA/EhD;AAAA,E,aAuFAC,S,WAvFA;AAAA,E,aAuFSJ,U,WAvFT;AAAA,E,aA6FAI,S,WA7FA;AAAA,E,aAkGAA,S,WAlGA;AAAA,E,aA2GAC,K,WA3GA;AAAA,E,aA2GKL,U,WA3GL;AAAA,E,aAkHAK,K,WAlHA;AAAA,E,aAkHKJ,I,WAlHL;AAAA,E,aAsHAI,K,WAtHA;AAAA,E,aAsHKC,gB,WAtHL;AAAA,E,aAsHuBL,I,WAtHvB;AAAA;AAAA","file":"TabbarItem.module.css.d.ts","sourceRoot":""}

package/src/components/TabbarItem/TabbarItem.tsx

@@ -17,13 +17,16 @@ export interface TabbarItemProps
   extends Omit<React.AllHTMLAttributes<HTMLElement>, 'label'>,
     HasRootRef<HTMLElement>,
     HasComponent {
+  /**
+   * Выбранное состояние компонента.
+   */
   selected?: boolean;
   /**
-   * Текст рядом с иконкой
+   * Текст рядом с иконкой.
    */
   label?: React.ReactNode;
   /**
-   * Индикатор над иконкой. Принимает `<Badge mode="prominent" />` или `<Counter size="s" mode="prominent" />`
+   * Индикатор над иконкой. Принимает `<Badge mode="prominent" />` или `<Counter size="s" mode="prominent" />`.
    */
   indicator?: React.ReactNode;
 }

package/src/components/Tabs/Tabs.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./Tabs.module.css"],"names":["in","withGaps","host","modeDefault"],"mappings":"AAAA;AAAA,E,aAAAA,I,WAAA;AAAA,E,aAKAC,U,WALA;AAAA,E,aAckCC,M,WAdlC;AAAA,E,aAoBkCA,M,WApBlC;AAAA,E,aA+B0CC,a,WA/B1C;AAAA,E,aAoCyCA,a,WApCzC;AAAA,E,aA+CED,M,WA/CF;AAAA,E,aA0DyFF,I,WA1DzF;AAAA;AAAA","file":"Tabs.module.css.d.ts","sourceRoot":""}

package/src/components/Tabs/Tabs.tsx

@@ -10,9 +10,12 @@ import { RootComponent } from '../RootComponent/RootComponent';
 import styles from './Tabs.module.css';
 
 export interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+  /**
+   * Режим отображения компонента.
+   */
   mode?: 'default' | 'accent' | 'secondary';
   /**
-   * Включает прокрутку контейнера до активной (`selected`) вкладки
+   * Включает прокрутку контейнера до активной (`selected`) вкладки.
    * @since 5.10.0
    */
   withScrollToSelectedTab?: boolean;
@@ -27,11 +30,12 @@ export interface TabsProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
    *  - равномерно занимают всю доступную ширину при вложении в `HorizontalScroll`
    *  - равномерно занимают всю доступную ширину при `mode=default` и platform !== 'VKCOM'
    * При `stretched` и `shrinked` вкладки либо равномерно занимают всю ширину,
-   * либо выравниваются по контенту соответственно
+   * либо выравниваются по контенту соответственно.
    */
   layoutFillMode?: 'auto' | 'stretched' | 'shrinked';
 }
 
+/* eslint-disable jsdoc/require-jsdoc */
 export interface TabsContextProps {
   mode: TabsProps['mode'];
   withGaps: boolean;
@@ -39,6 +43,7 @@ export interface TabsContextProps {
   withScrollToSelectedTab: TabsProps['withScrollToSelectedTab'];
   scrollBehaviorToSelectedTab: Required<TabsProps['scrollBehaviorToSelectedTab']>;
 }
+/* eslint-enable jsdoc/require-jsdoc */
 
 export const TabsModeContext: React.Context<TabsContextProps> =
   React.createContext<TabsContextProps>({
@@ -96,7 +101,3 @@ export const Tabs = ({
     </RootComponent>
   );
 };
-
-// чтобы styleguidist не путал компонент
-// с другими именованными экспортами
-Tabs.displayName = 'Tabs';

package/src/components/TabsItem/TabsItem.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./TabsItem.module.css"],"names":["host","withGaps","sizeYCompact","sizeYNone","modeDefault","hover","modeAccent","selected","modeSecondary","before","label","status","statusCount","after","underline","stretched","shrinked"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAeAC,U,WAfA;AAAA,E,aAmBAA,U,WAnBA;AAAA,E,aAuBAC,c,WAvBA;AAAA,E,aA6BEC,W,WA7BF;AAAA,E,aAmCAH,M,WAnCA;AAAA,E,aAoCAA,M,WApCA;AAAA,E,aAyCAI,a,WAzCA;AAAA,E,aAmDAF,c,WAnDA;AAAA,E,aAmDaE,a,WAnDb;AAAA,E,aAyDED,W,WAzDF;AAAA,E,aAyDYC,a,WAzDZ;AAAA,E,aA+DAC,O,WA/DA;AAAA,E,aA+DMD,a,WA/DN;AAAA,E,aAoEAE,Y,WApEA;AAAA,E,aA0EAC,U,WA1EA;AAAA,E,aA0ESD,Y,WA1ET;AAAA,E,aA+EAD,O,WA/EA;AAAA,E,aA+EMC,Y,WA/EN;AAAA,E,aAmFAA,Y,WAnFA;AAAA,E,aA4FAC,U,WA5FA;AAAA,E,aA4FSD,Y,WA5FT;AAAA,E,aAiGAC,U,WAjGA;AAAA,E,aAiGSC,e,WAjGT;AAAA,E,aAqGAH,O,WArGA;AAAA,E,aAqGMG,e,WArGN;AAAA,E,aA0GAC,Q,WA1GA;AAAA,E,aAgHAF,U,WAhHA;AAAA,E,aAgHUE,Q,WAhHV;AAAA,E,aAoHAF,U,WApHA;AAAA,E,aAoHSD,Y,WApHT;AAAA,E,aAoHqBG,Q,WApHrB;AAAA,E,aAwHAC,O,WAxHA;AAAA,E,aAkIAH,U,WAlIA;AAAA,E,aAkIUG,O,WAlIV;AAAA,E,aAsIAH,U,WAtIA;AAAA,E,aAsISD,Y,WAtIT;AAAA,E,aAsIqBI,O,WAtIrB;AAAA,E,aA2IAC,Q,WA3IA;AAAA,E,aA+IAC,a,WA/IA;AAAA,E,aAoJAC,O,WApJA;AAAA,E,aAyJAN,U,WAzJA;AAAA,E,aAyJUM,O,WAzJV;AAAA,E,aA6JAP,Y,WA7JA;AAAA,E,aA6JWC,U,WA7JX;AAAA,E,aA6JqBM,O,WA7JrB;AAAA,E,aAkKAC,W,WAlKA;AAAA,E,aA8KAZ,c,WA9KA;AAAA,E,aA8KcY,W,WA9Kd;AAAA,E,aAmLEX,W,WAnLF;AAAA,E,aAmLaW,W,WAnLb;AAAA,E,aAwLAA,W,WAxLA;AAAA,E,aAiMkCd,M,WAjMlC;AAAA,E,aAwMkCc,W,WAxMlC;AAAA,E,aAkNuCd,M,WAlNvC;AAAA,E,aAyNAA,M,WAzNA;AAAA,E,aAyNKe,W,WAzNL;AAAA,E,aA6NAf,M,WA7NA;AAAA,E,aA6NKgB,U,WA7NL;AAAA;AAAA","file":"TabsItem.module.css.d.ts","sourceRoot":""}

package/src/components/TabsItem/TabsItem.tsx

@@ -56,17 +56,23 @@ export interface TabsItemProps
    * Добавляет элемент слева от `after`.
    *
    * - `React.ReactElement` – либо [`Badge`](https://vkcom.github.io/VKUI/#/Badge) с параметром `mode="prominent"`.
-   *   либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode="prominent" size="s"`.
+   *   Либо [`Counter`](https://vkcom.github.io/VKUI/#/Counter) с параметрами `mode="prominent" size="s"`.
    * - `number` – для показа текстового блока с переданным числом.
    */
   status?: React.ReactElement | number;
   /**
    * Добавляет иконку справа.
    *
-   * Например, `<Icon16Dropdown />`
+   * Например, `<Icon16Dropdown />`.
    */
   after?: React.ReactNode;
+  /**
+   * Флаг для отображения выбранного состояния.
+   */
   selected?: boolean;
+  /**
+   * Блокировка взаимодействия с компонентом.
+   */
   disabled?: boolean;
 }
 
@@ -86,9 +92,6 @@ export const TabsItem = ({
   getRootRef,
   hoverMode = styles.hover,
   activeMode = '',
-  hovered,
-  activated,
-  hasHover,
   hasActive = false,
   focusVisibleMode = 'inside',
   ...restProps
@@ -182,8 +185,14 @@ export const TabsItem = ({
 
   return (
     <Tappable
-      {...restProps}
       getRootRef={rootRef}
+      hoverMode={hoverMode}
+      activeMode={activeMode}
+      hasActive={hasActive}
+      focusVisibleMode={focusVisibleMode}
+      role={role}
+      aria-selected={selected}
+      tabIndex={tabIndex}
       baseClassName={classNames(
         styles.host,
         mode && stylesMode[mode],
@@ -192,16 +201,7 @@ export const TabsItem = ({
         withGaps && styles.withGaps,
         layoutFillMode !== 'auto' && fillModeClassNames[layoutFillMode],
       )}
-      hoverMode={hoverMode}
-      activeMode={activeMode}
-      hasHover={hasHover}
-      hasActive={hasActive}
-      hovered={hovered}
-      activated={activated}
-      focusVisibleMode={focusVisibleMode}
-      role={role}
-      aria-selected={selected}
-      tabIndex={tabIndex}
+      {...restProps}
     >
       {before && <div className={styles.before}>{before}</div>}
       <Headline

package/src/components/Tappable/Ripple.tsx

@@ -4,6 +4,8 @@ import { usePlatform } from '../../hooks/usePlatform';
 import { getOffsetRect } from '../../lib/offset';
 import styles from './Tappable.module.css';
 
+/* eslint-disable jsdoc/require-jsdoc */
+
 /**
  * Возможно нужен Ripple эффект. Данный хук нужен для отказа
  * от двойного ререндера.
@@ -28,7 +30,7 @@ const DELAY = 70;
 const WAVE_LIVE = 225;
 
 /**
- * Хук для создания Ripple эффектов
+ * Хук для создания Ripple эффектов.
  */
 export const useRipple = (
   needRipple: boolean,
@@ -41,7 +43,7 @@ export const useRipple = (
   const [clicks, setClicks] = React.useState<Wave[]>([]);
 
   /**
-   * Коллекция нажатий и таймеров задержки появления волны
+   * Коллекция нажатий и таймеров задержки появления волны.
    */
   const pointerDelayTimers = React.useMemo(
     () => new Map<number, ReturnType<typeof setTimeout>>(),

package/src/components/Tappable/Tappable.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./Tappable.module.css"],"names":["host","sizeXCompact","sizeXNone","borderRadiusInherit","stateLayer","hasPointerFalse","ripple","hasPointerNone","hoveredBackground","activatedBackground","hoveredOpacity","activatedOpacity","wave"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAgBAA,M,WAhBA;AAAA,E,aAwBAC,c,WAxBA;AAAA,E,aA6BEC,W,WA7BF;AAAA,E,aAkCAF,M,WAlCA;AAAA,E,aAkCKG,qB,WAlCL;AAAA,E,aAyCAC,Y,WAzCA;AAAA,E,aAqDAC,iB,WArDA;AAAA,E,aAqDiBC,Q,WArDjB;AAAA,E,aA0DEC,gB,WA1DF;AAAA,E,aA0DkBD,Q,WA1DlB;AAAA,E,aA+DAE,mB,WA/DA;AAAA,E,aA+DqBJ,Y,WA/DrB;AAAA,E,aAmEAK,qB,WAnEA;AAAA,E,aAmEuBL,Y,WAnEvB;AAAA,E,aAuEAM,gB,WAvEA;AAAA,E,aAwEAC,kB,WAxEA;AAAA,E,aA4EAD,gB,WA5EA;AAAA,E,aAgFAC,kB,WAhFA;AAAA,E,aAoFAC,M,WApFA;AAAA;AAAA","file":"Tappable.module.css.d.ts","sourceRoot":""}

package/src/components/Tappable/Tappable.tsx

@@ -28,9 +28,21 @@ function hasPointerClassName(hasPointer: boolean | undefined) {
 export interface TappableProps extends ClickableProps, StateProps {
   /**
    * Задает border-radius элементу
-   * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`
+   * В режиме `auto` на маленьких экранах `border-radius: 0`, иначе определяется токеном `--vkui--size_border_radius--regular`.
    */
   borderRadiusMode?: 'auto' | 'inherit';
+  /**
+   * @deprecated Since 7.3.0.
+   *
+   * Свойство устарело и будет удалено в `v8`, используйте свойство `activeMode`.
+   */
+  activeClassName?: string; // Переделать на Omit<ClickableProps, 'activeClassName' | 'hoverClassName'>
+  /**
+   * @deprecated Since 7.3.0.
+   *
+   * Свойство устарело и будет удалено в `v8`, используйте свойство `hoverMode`.
+   */
+  hoverClassName?: string; // Переделать на Omit<ClickableProps, 'activeClassName' | 'hoverClassName'>
 }
 
 export const Tappable = ({

package/src/components/Tappable/state.tsx

@@ -6,18 +6,18 @@ export type StateModeLiteral = LiteralUnion<StateMode, string>;
 
 export interface StateProps {
   /**
-   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active
+   * Стиль подсветки active-состояния. Если передать произвольную строку, она добавится как css-класс во время active.
    */
   activeMode?: StateModeLiteral;
 
   /**
-   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover
+   * Стиль подсветки hover-состояния. Если передать произвольную строку, она добавится как css-класс во время hover.
    */
   hoverMode?: StateModeLiteral;
 }
 
 /**
- * Состояние по умолчанию
+ * Состояние по умолчанию.
  */
 export const DEFAULT_STATE_MODE: StateMode = 'background';
 
@@ -28,7 +28,7 @@ const stylesHovered: Record<string, string> = {
 };
 
 /**
- * Определяем класс наведения
+ * Определяем класс наведения.
  */
 export function hoverClass(hoverMode: StateModeLiteral = DEFAULT_STATE_MODE): string {
   const presetClass = stylesHovered[hoverMode] as string | undefined;
@@ -43,7 +43,7 @@ const stylesActivated: Record<string, string> = {
 };
 
 /**
- * Определяем класс наведения
+ * Определяем класс наведения.
  */
 export function activeClass(activeMode: StateModeLiteral = DEFAULT_STATE_MODE): string {
   const presetClass = stylesActivated[activeMode] as string | undefined;

package/src/components/Textarea/Textarea.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./Textarea.module.css"],"names":["host","el","sizeYCompact","sizeYNone","alignCenter","alignRight"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAMAC,I,WANA;AAAA,E,aAgBAA,I,WAhBA;AAAA,E,aAoBAC,c,WApBA;AAAA,E,aAyBEC,W,WAzBF;AAAA,E,aA8BAF,I,WA9BA;AAAA,E,aAoCAA,I,WApCA;AAAA,E,aAwCAA,I,WAxCA;AAAA,E,aA4CAG,a,WA5CA;AAAA,E,aA4CaH,I,WA5Cb;AAAA,E,aAgDAI,Y,WAhDA;AAAA,E,aAgDYJ,I,WAhDZ;AAAA;AAAA","file":"Textarea.module.css.d.ts","sourceRoot":""}

package/src/components/Textarea/Textarea.tsx

@@ -25,8 +25,17 @@ export interface TextareaProps
     HasRootRef<HTMLElement>,
     HasAlign,
     FormFieldProps {
+  /**
+   * Свойство управляющее автоматическим изменением высоты компонента.
+   */
   grow?: boolean;
+  /**
+   * Обработчик, срабатывающий при изменении размера компонента.
+   */
   onResize?: (el: HTMLTextAreaElement) => void;
+  /**
+   * Значение по умолчанию.
+   */
   defaultValue?: string;
 }
 

package/src/components/ToolButton/ToolButton.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./ToolButton.module.css"],"names":["host","withFakeEndIcon","rounded","sizeYRegular","sizeYNone","directionRow","directionColumn","text","modePrimary","appearanceAccent","hover","active","appearanceNeutral","modeSecondary","modeTertiary","modeOutline"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAkBAC,iB,WAlBA;AAAA,E,aAsBAC,S,WAtBA;AAAA,E,aA0BAC,c,WA1BA;AAAA,E,aAiCEC,W,WAjCF;AAAA,E,aAwCAJ,M,WAxCA;AAAA,E,aA6CAK,c,WA7CA;AAAA,E,aAkDAC,iB,WAlDA;AAAA,E,aAuDAD,c,WAvDA;AAAA,E,aAuDcE,M,WAvDd;AAAA,E,aA2DAD,iB,WA3DA;AAAA,E,aA2DiBC,M,WA3DjB;AAAA,E,aAiEAC,a,WAjEA;AAAA,E,aAiEYC,kB,WAjEZ;AAAA,E,aAqEAD,a,WArEA;AAAA,E,aAqEYC,kB,WArEZ;AAAA,E,aAqE6BC,O,WArE7B;AAAA,E,aAyEAF,a,WAzEA;AAAA,E,aAyEYC,kB,WAzEZ;AAAA,E,aAyE6BE,Q,WAzE7B;AAAA,E,aA6EAH,a,WA7EA;AAAA,E,aA6EYI,mB,WA7EZ;AAAA,E,aAiFAJ,a,WAjFA;AAAA,E,aAiFYI,mB,WAjFZ;AAAA,E,aAiF8BF,O,WAjF9B;AAAA,E,aAqFAF,a,WArFA;AAAA,E,aAqFYI,mB,WArFZ;AAAA,E,aAqF8BD,Q,WArF9B;AAAA,E,aA0FAE,e,WA1FA;AAAA,E,aA8FAA,e,WA9FA;AAAA,E,aA8FcH,O,WA9Fd;AAAA,E,aAkGAG,e,WAlGA;AAAA,E,aAkGcF,Q,WAlGd;AAAA,E,aAuGAG,c,WAvGA;AAAA,E,aAwGAC,a,WAxGA;AAAA,E,aA4GAD,c,WA5GA;AAAA,E,aA4GaJ,O,WA5Gb;AAAA,E,aA6GAK,a,WA7GA;AAAA,E,aA6GYL,O,WA7GZ;AAAA,E,aAiHAI,c,WAjHA;AAAA,E,aAiHaH,Q,WAjHb;AAAA,E,aAkHAI,a,WAlHA;AAAA,E,aAkHYJ,Q,WAlHZ;AAAA,E,aAyHAX,M,WAzHA;AAAA,E,aAyHKS,kB,WAzHL;AAAA,E,aA6HAT,M,WA7HA;AAAA,E,aA6HKY,mB,WA7HL;AAAA,E,aAiIAJ,a,WAjIA;AAAA,E,aAiIYC,kB,WAjIZ;AAAA,E,aAkIAD,a,WAlIA;AAAA,E,aAkIYI,mB,WAlIZ;AAAA,E,aAyIAG,a,WAzIA;AAAA,E,aAyIYN,kB,WAzIZ;AAAA,E,aA0IAM,a,WA1IA;AAAA,E,aA0IYN,kB,WA1IZ;AAAA,E,aA0I6BC,O,WA1I7B;AAAA,E,aA2IAK,a,WA3IA;AAAA,E,aA2IYN,kB,WA3IZ;AAAA,E,aA2I6BE,Q,WA3I7B;AAAA,E,aA+IAI,a,WA/IA;AAAA,E,aA+IYH,mB,WA/IZ;AAAA,E,aAmJAG,a,WAnJA;AAAA,E,aAmJYH,mB,WAnJZ;AAAA,E,aAmJ8BF,O,WAnJ9B;AAAA,E,aAwJAK,a,WAxJA;AAAA,E,aAwJYH,mB,WAxJZ;AAAA,E,aAwJ8BD,Q,WAxJ9B;AAAA;AAAA","file":"ToolButton.module.css.d.ts","sourceRoot":""}

package/src/components/ToolButton/ToolButton.tsx

@@ -32,8 +32,17 @@ const sizeYClassNames = {
 };
 
 export interface ToolButtonProps extends TappableProps, AdaptiveIconRendererProps {
+  /**
+   * Режим отображения компонента.
+   */
   mode?: 'primary' | 'secondary' | 'tertiary' | 'outline';
+  /**
+   * Внешний вид компонента.
+   */
   appearance?: 'accent' | 'neutral';
+  /**
+   * Направление контента.
+   */
   direction?: 'row' | 'column';
   /**
    * Задаёт `50%` закругления для контейнера.

package/src/components/Tooltip/Tooltip.tsx

@@ -67,7 +67,7 @@ export interface TooltipProps extends AllowedFloatingComponentProps, AllowedTool
    */
   disableArrow?: boolean;
   /**
-   * Отключает закрытие по клику.
+   * Отключает закрытие по нажатию.
    */
   disableCloseAfterClick?: boolean;
   /**

package/src/components/Tooltip/useTooltip.tsx

@@ -20,8 +20,17 @@ export type UseTooltipProps = Omit<TooltipProps, 'children'> & {
 };
 
 export type UseTooltipResult<ElementType extends HTMLElement = HTMLElement> = {
+  /**
+   * Реф на якорный элемент.
+   */
   anchorRef: Ref<ElementType>;
+  /**
+   * Свойства для якорного элемента, содержит необходимые обработчики.
+   */
   anchorProps: ReferenceProps<ElementType>;
+  /**
+   * Отрендеренный компонент тултипа.
+   */
   tooltip: React.ReactNode | null;
 };
 

package/src/components/TooltipBase/TooltipBase.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./TooltipBase.module.css"],"names":["host","content","closeButton","title","description","arrow","appearanceAccent","appearanceWhite","appearanceBlack","appearanceInversion"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAC,S,WAJA;AAAA,E,aAiBAC,a,WAjBA;AAAA,E,aA4BAC,O,WA5BA;AAAA,E,aA6BAC,a,WA7BA;AAAA,E,aAiCAC,O,WAjCA;AAAA,E,aAqCAC,kB,WArCA;AAAA,E,aAqCkBL,S,WArClB;AAAA,E,aA0CAK,kB,WA1CA;AAAA,E,aA0CkBD,O,WA1ClB;AAAA,E,aA8CAE,iB,WA9CA;AAAA,E,aA8CiBN,S,WA9CjB;AAAA,E,aAmDAM,iB,WAnDA;AAAA,E,aAmDiBF,O,WAnDjB;AAAA,E,aAuDAG,iB,WAvDA;AAAA,E,aAuDiBP,S,WAvDjB;AAAA,E,aA4DAO,iB,WA5DA;AAAA,E,aA4DiBH,O,WA5DjB;AAAA,E,aAgEAI,qB,WAhEA;AAAA,E,aAgEqBR,S,WAhErB;AAAA,E,aAqEAQ,qB,WArEA;AAAA,E,aAqEqBJ,O,WArErB;AAAA;AAAA","file":"TooltipBase.module.css.d.ts","sourceRoot":""}

package/src/components/TooltipBase/TooltipBase.tsx

@@ -24,7 +24,7 @@ const stylesAppearance = {
 export interface TooltipBaseProps
   extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'children' | 'title'> {
   /**
-   * Стиль отображения подсказки
+   * Стиль отображения подсказки.
    */
   appearance?: 'accent' | 'neutral' | 'white' | 'black' | 'inversion';
   /**
@@ -37,7 +37,7 @@ export interface TooltipBaseProps
   title?: React.ReactNode;
   /**
    * [a11y] Id для заголовка тултипа.
-   * Можно использовать для связи элемента с `role="dialog"` и заголовка через `aria-labelledby`
+   * Можно использовать для связи элемента с `role="dialog"` и заголовка через `aria-labelledby`.
    */
   titleId?: string;
   /**
@@ -52,14 +52,14 @@ export interface TooltipBaseProps
    * 1. Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`).
    * 2. Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах,
    *    растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG.
-   *    (см. https://github.com/VKCOM/VKUI/pull/4496).
+   *    (смотри https://github.com/VKCOM/VKUI/pull/4496).
    * 3. Убедитесь, что компонент принимает все валидные для SVG параметры.
    * 4. Убедитесь, что SVG и её элементы наследует цвет через `fill="currentColor"`.
    * 5. Если стрелка наезжает на якорный элемент, то увеличьте смещение между целевым и всплывающим элементами.
    */
   ArrowIcon?: FloatingArrowProps['Icon'];
   /**
-   * Пользовательские css-классы, будут добавлены на root-элемент
+   * Пользовательские css-классы, будут добавлены на root-элемент.
    */
   className?: string;
   /**
@@ -80,7 +80,7 @@ export interface TooltipBaseProps
 
 /**
  * Низкоуровневый компонент для отрисовки тултипа.
- * Примеры использования и Readme можно найти в документации Tooltip
+ * Примеры использования и Readme можно найти в документации Tooltip.
  * @see https://vkcom.github.io/VKUI/#/Tooltip
  * @private
  */