@vkontakte/vkui 7.2.0 → 7.3.0

package/src/components/Clickable/useState.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable jsdoc/require-jsdoc */
+
 import * as React from 'react';
 import { classNames, noop } from '@vkontakte/vkjs';
 import { mergeCalls } from '../../lib/mergeCalls';
@@ -5,25 +7,25 @@ import { useStateWithDelay } from './useStateWithDelay';
 
 export interface StateProps {
   /**
-   * Указывает, должен ли компонент реагировать на hover-состояние
+   * Указывает, должен ли компонент реагировать на `hover`-состояние.
    */
   hasHover?: boolean;
   /**
-   * Позволяет управлять hovered-состоянием извне
+   * Позволяет управлять `hovered`-состоянием извне.
    */
   hovered?: boolean;
   /**
-   * Позволяет управлять activated-состоянием извне
+   * Позволяет управлять `activated`-состоянием извне.
    */
   activated?: boolean;
   /**
-   * Указывает, должен ли компонент реагировать на active-состояние
+   * Указывает, должен ли компонент реагировать на `active`-состояние.
    */
   hasActive?: boolean;
 
   /**
    * Позволяет родительскому компоненту
-   * иметь hovered-cостояние при наведении
+   * иметь `hovered`-cостояние при наведении
    * на любой дочерний элемент.
    * По умолчанию состояние hovered у родителя сбрасывается.
    *
@@ -54,17 +56,17 @@ export interface StateProps {
   unlockParentHover?: boolean;
 
   /**
-   * Длительность показа `activated`-состояния
+   * Длительность показа `activated`-состояния.
    */
   activeEffectDelay?: number;
 
   /**
-   * Стиль подсветки active-состояния
+   * Стиль подсветки `active`-состояния.
    */
   activeClassName?: string;
 
   /**
-   * Стиль подсветки hover-состояния
+   * Стиль подсветки `hover`-состояния.
    */
   hoverClassName?: string;
 }
@@ -75,14 +77,14 @@ const ACTIVE_DELAY = 70;
 
 interface UseHoverProps extends Pick<StateProps, 'hovered' | 'hasHover'> {
   /**
-   * Блокирование активации состояний
+   * Блокирование активации состояний.
    */
   lockState: boolean;
   setParentStateLock: (v: boolean) => void;
 }
 
 /**
- * Управляет наведением на компонент, игнорирует тач события
+ * Управляет наведением на компонент, игнорирует тач события.
  */
 function useHover({ hovered, hasHover = true, lockState, setParentStateLock }: UseHoverProps) {
   const [hoveredStateLocal, setHoveredStateLocal] = React.useState(false);
@@ -140,14 +142,14 @@ function useHover({ hovered, hasHover = true, lockState, setParentStateLock }: U
 
 interface UseActiveProps extends Pick<StateProps, 'activated' | 'activeEffectDelay' | 'hasActive'> {
   /**
-   * Блокирование активации состояний
+   * Блокирование активации состояний.
    */
   lockStateRef: React.RefObject<boolean>;
   setParentStateLock: (v: boolean) => void;
 }
 
 /**
- * Управляет активацией компонента
+ * Управляет активацией компонента.
  */
 function useActive({
   activated,
@@ -225,7 +227,7 @@ export const ClickableLockStateContext: React.Context<ClickableLockStateContextI
   });
 
 /**
- * Блокирует стейт на всплытие
+ * Блокирует стейт на всплытие.
  */
 function useLockState(
   setParentStateLockBubbling: (v: boolean) => void,
@@ -260,7 +262,7 @@ function useLockRef(
 }
 
 /**
- * Управляет состоянием компонента
+ * Управляет состоянием компонента.
  */
 export function useState({
   hovered,

package/src/components/Clickable/useStateWithDelay.tsx

@@ -17,7 +17,7 @@ type DispatchWithDelay<S> = (value: S, delay?: number) => void;
  * }
  * ```
  *
- * Есть возможность передать функцию-коллбэк, которая будет
+ * Есть возможность передать функцию-обработчик, которая будет
  * вызвана сразу после вызова setState с новым значением стейта
  * в качестве аргумента.
  *

package/src/components/ColorSchemeProvider/ColorSchemeProvider.tsx

@@ -1,7 +1,3 @@
-'use client';
-
-// TODO [@vkontakte/icons-sprite>=2.3.1]: Удалить use client, если он появился в IconAppearanceProvider
-
 import * as React from 'react';
 import { IconAppearanceProvider } from '@vkontakte/icons';
 import type { ColorSchemeType } from '../../lib/colorScheme';
@@ -9,7 +5,13 @@ import { TokensClassProvider } from '../../lib/tokens/TokensClassProvider';
 import { ConfigProviderOverride } from '../ConfigProvider/ConfigProviderOverride';
 
 export interface ColorSchemeProviderProps {
+  /**
+   * Цветовая схема.
+   */
   value: ColorSchemeType;
+  /**
+   * Содержимое.
+   */
   children: React.ReactNode;
 }
 

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -14,6 +14,9 @@ import {
 } from './ConfigProviderContext';
 
 export interface ConfigProviderProps extends Partial<ConfigProviderContextInterface> {
+  /**
+   * Содержимое.
+   */
   children: React.ReactNode;
 }
 

package/src/components/ConfigProvider/ConfigProviderContext.tsx

@@ -13,9 +13,9 @@ export interface ConfigProviderContextInterface {
    *
    * В условиях когда:
    * - `isWebView={true}`
-   * - platform="ios"
+   * - platform="ios".
    *
-   * для компонента `View` включается возможность навигации через смахивание.
+   * Для компонента `View` включается возможность навигации через смахивание.
    */
   isWebView: boolean;
   /**
@@ -30,21 +30,21 @@ export interface ConfigProviderContextInterface {
    * Задаёт необходимый минимальную ширину слота `after` в `PanelHeader` под пользовательский
    * "плавающий" элемент (например, ширина панели управления webview).
    *
-   * Учитывается только при `hasCustomPanelHeaderAfter={true}` (см. документацию `hasCustomPanelHeaderAfter`).
+   * Учитывается только при `hasCustomPanelHeaderAfter={true}` (см документацию `hasCustomPanelHeaderAfter`).
    *
    * @default 90
    */
   customPanelHeaderAfterMinWidth: number | string;
   /**
-   * Тип цветовой схемы – `light` или `dark`
+   * Тип цветовой схемы – `light` или `dark`.
    */
   colorScheme: ColorSchemeType | undefined;
   /**
-   * Включена ли анимация переходов между экранами в `Root` и `View`
+   * Включена ли анимация переходов между экранами в `Root` и `View`.
    */
   transitionMotionEnabled: boolean;
   /**
-   * Платформа
+   * Платформа.
    */
   platform: PlatformType;
   /**
@@ -71,7 +71,7 @@ export interface ConfigProviderContextInterface {
    */
   tokensClassNames: TokensClassNames;
   /**
-   * Строка с языковой меткой BCP 47
+   * Строка с языковой меткой BCP 47.
    */
   locale: string;
   /**

package/src/components/ConfigProvider/ConfigProviderOverride.tsx

@@ -9,11 +9,14 @@ import {
 } from './ConfigProviderContext';
 
 export interface ConfigProviderOverrideProps extends Partial<ConfigProviderContextInterface> {
+  /**
+   * Содержимое.
+   */
   children: React.ReactNode;
 }
 
 /**
- * Компонент предназначен для перебивания одного из значений контекста
+ * Компонент предназначен для перебивания одного из значений контекста.
  */
 export function ConfigProviderOverride({
   children,

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

@@ -0,0 +1 @@
+{"version":3,"sources":["./ContentBadge.module.css"],"names":["host","sizeS","sizeM","singleIconSlotSizeM","sizeL","iconSlotSizeL","singleIconSlotSizeL","capsule","primaryAccent","primaryNeutral","primaryAccentGreen","primaryAccentRed","primaryOverlay","secondaryAccent","secondaryNeutral","secondaryAccentGreen","secondaryAccentRed","secondaryOverlay","modeOutline","outlineAccent","outlineNeutral","outlineAccentGreen","outlineAccentRed","outlineOverlay"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAmBAC,O,WAnBA;AAAA,E,aA0BAC,O,WA1BA;AAAA,E,aAkCAC,qB,WAlCA;AAAA,E,aAuCAC,O,WAvCA;AAAA,E,aA+CAC,e,WA/CA;AAAA,E,aAoDAC,qB,WApDA;AAAA,E,aAyDAC,S,WAzDA;AAAA,E,aA8DAC,e,WA9DA;AAAA,E,aAmEAC,gB,WAnEA;AAAA,E,aAwEAC,oB,WAxEA;AAAA,E,aA6EAC,kB,WA7EA;AAAA,E,aAkFAC,gB,WAlFA;AAAA,E,aAwFAC,iB,WAxFA;AAAA,E,aA6FAC,kB,WA7FA;AAAA,E,aAkGAC,sB,WAlGA;AAAA,E,aAuGAC,oB,WAvGA;AAAA,E,aA4GAC,kB,WA5GA;AAAA,E,aAkHAC,a,WAlHA;AAAA,E,aA4HAC,e,WA5HA;AAAA,E,aAgIAA,e,WAhIA;AAAA,E,aAoIAC,gB,WApIA;AAAA,E,aAwIAA,gB,WAxIA;AAAA,E,aA4IAC,oB,WA5IA;AAAA,E,aAgJAA,oB,WAhJA;AAAA,E,aAoJAC,kB,WApJA;AAAA,E,aAwJAA,kB,WAxJA;AAAA,E,aA4JAC,gB,WA5JA;AAAA,E,aAgKAA,gB,WAhKA;AAAA;AAAA","file":"ContentBadge.module.css.d.ts","sourceRoot":""}

package/src/components/ContentBadge/ContentBadge.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
+import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
 import type { HTMLAttributesWithRootRef } from '../../types';
 import { Caption } from '../Typography/Caption/Caption';
 import { Footnote } from '../Typography/Footnote/Footnote';
@@ -57,7 +58,7 @@ export interface ContentBadgeProps
   /**
    * Включает приближение значения закругления к форме круга.
    *
-   * > Note: игнорируется при size="s"
+   * > Note: игнорируется при size="s".
    */
   capsule?: boolean;
   /**
@@ -67,7 +68,7 @@ export interface ContentBadgeProps
    *
    * - size="s" – ⚠️ не поддерживает иконки;
    * - size="m" – при **одиночной** иконке `16x16`, в остальных случаях `12x12`;
-   * - size="l" – при **одиночной** иконке `20x20`, в остальных случаях `16x16`;
+   * - size="l" – при **одиночной** иконке `20x20`, в остальных случаях `16x16`.
    */
   size?: ContentBadgeSizeType;
 }
@@ -118,7 +119,8 @@ export const ContentBadge: React.FC<ContentBadgeProps> & {
   );
 };
 
-ContentBadge.displayName = 'ContentBadge';
-
 ContentBadge.SlotIcon = ContentBadgeSlotIcon;
-ContentBadge.SlotIcon.displayName = 'ContentBadge.SlotIcon';
+
+if (process.env.NODE_ENV !== 'production') {
+  defineComponentDisplayNames(ContentBadge.SlotIcon, 'ContentBadge.SlotIcon');
+}

package/src/components/ContentBadge/ContentBadgeContext.tsx

@@ -1,4 +1,5 @@
 'use client';
+/* eslint-disable jsdoc/require-jsdoc */
 
 import * as React from 'react';
 import type { ContentBadgeSizeType } from './types';

package/src/components/ContentBadge/ContentBadgeSlotIcon.tsx

@@ -18,7 +18,7 @@ const singleIconClassNames = {
 
 export type ContentBadgeSlotIconProps = HTMLAttributesWithRootRef<HTMLDivElement>;
 
-export const ContentBadgeSlotIcon: React.FC<ContentBadgeSlotIconProps> = ({
+export const ContentBadgeSlotIcon = ({
   className,
   getRootRef,
   children,
@@ -43,5 +43,3 @@ export const ContentBadgeSlotIcon: React.FC<ContentBadgeSlotIconProps> = ({
     </div>
   );
 };
-
-ContentBadgeSlotIcon.displayName = 'ContentBadgeSlotIcon';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["./ContentCard.module.css"],"names":["disabled","body","tappable","img","text","caption","overTitle"],"mappings":"AAAA;AAAA,E,aAAAA,U,WAAA;AAAA,E,aAIAC,M,WAJA;AAAA,E,aASAC,U,WATA;AAAA,E,aAiBAC,K,WAjBA;AAAA,E,aA0BAC,M,WA1BA;AAAA,E,aA8BAC,S,WA9BA;AAAA,E,aA+BAC,W,WA/BA;AAAA;AAAA","file":"ContentCard.module.css.d.ts","sourceRoot":""}

package/src/components/ContentCard/ContentCard.tsx

@@ -17,33 +17,36 @@ export interface ContentCardProps
     Omit<React.ImgHTMLAttributes<HTMLImageElement>, keyof React.HTMLAttributes<HTMLImageElement>>,
     HasRef<HTMLImageElement> {
   /**
-   Текст над заголовком
+   Текст над заголовком.
    */
   overTitle?: React.ReactNode;
   /**
-   Заголовок
+   Заголовок.
    */
   title?: React.ReactNode;
   /**
-   Позволяет поменять тег используемый для заголовка
+   Позволяет поменять тег используемый для заголовка.
    */
   titleComponent?: React.ElementType;
   /**
-   Текст
+   Текст.
    */
   description?: React.ReactNode;
   /**
-   Нижний текст
+   Нижний текст.
    */
   caption?: React.ReactNode;
   /**
-    Максимальная высота изображения
+    Максимальная высота изображения.
    */
   maxHeight?: number;
+  /**
+   * Внешний вид карточки.
+   */
   mode?: CardProps['mode'];
   /**
    * Пользовательское значения стиля `object-fit` для картинки
-   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit)
+   * Подробнее можно почитать в [документации](https://developer.mozilla.org/ru/docs/Web/CSS/object-fit).
    */
   imageObjectFit?: React.CSSProperties['objectFit'];
 }
@@ -92,10 +95,10 @@ export const ContentCard = ({
       className={classNames(restProps.disabled && styles.disabled, className)}
     >
       <Tappable
-        {...restProps}
         hasHover={hasHover}
         hasActive={hasActive}
-        className={styles.tappable}
+        {...restProps}
+        baseClassName={styles.tappable}
       >
         {(src || srcSet) && (
           <img

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

@@ -0,0 +1 @@
+{"version":3,"sources":["./Counter.module.css"],"names":["host","modePrimary","appearanceAccent","appearanceNeutral","appearanceAccentGreen","appearanceAccentRed","appearanceCustom","modeContrast","modeTertiary","sizeM","sizeS","modeInherit"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAeAC,a,WAfA;AAAA,E,aAmBAA,a,WAnBA;AAAA,E,aAmBYC,kB,WAnBZ;AAAA,E,aAwBAD,a,WAxBA;AAAA,E,aAwBYE,mB,WAxBZ;AAAA,E,aA4BAF,a,WA5BA;AAAA,E,aA4BYG,uB,WA5BZ;AAAA,E,aAgCAH,a,WAhCA;AAAA,E,aAgCYI,qB,WAhCZ;AAAA,E,aAoCAJ,a,WApCA;AAAA,E,aAoCYK,kB,WApCZ;AAAA,E,aA0CAC,c,WA1CA;AAAA,E,aA8CAA,c,WA9CA;AAAA,E,aA8CaL,kB,WA9Cb;AAAA,E,aAkDAK,c,WAlDA;AAAA,E,aAkDaJ,mB,WAlDb;AAAA,E,aAsDAI,c,WAtDA;AAAA,E,aAsDaH,uB,WAtDb;AAAA,E,aA0DAG,c,WA1DA;AAAA,E,aA0DaF,qB,WA1Db;AAAA,E,aA8DAE,c,WA9DA;AAAA,E,aA8DaD,kB,WA9Db;AAAA,E,aAoEAE,c,WApEA;AAAA,E,aAwEAA,c,WAxEA;AAAA,E,aAwEaN,kB,WAxEb;AAAA,E,aA4EAM,c,WA5EA;AAAA,E,aA4EaL,mB,WA5Eb;AAAA,E,aAgFAK,c,WAhFA;AAAA,E,aAgFaJ,uB,WAhFb;AAAA,E,aAoFAI,c,WApFA;AAAA,E,aAoFaH,qB,WApFb;AAAA,E,aAwFAG,c,WAxFA;AAAA,E,aAwFaF,kB,WAxFb;AAAA,E,aA8FAG,O,WA9FA;AAAA,E,aAoGAC,O,WApGA;AAAA,E,aA0GAC,a,WA1GA;AAAA,E,aA0HwCX,M,WA1HxC;AAAA;AAAA","file":"Counter.module.css.d.ts","sourceRoot":""}

package/src/components/Counter/Counter.tsx

@@ -30,12 +30,12 @@ const sizeClassNames = {
 
 export interface CounterProps extends HTMLAttributesWithRootRef<HTMLSpanElement> {
   /**
-   * Режим отображения счетчика
+   * Режим отображения счетчика.
    */
   mode?: 'primary' | 'contrast' | 'tertiary' | 'inherit';
 
   /**
-   * Внешний вид счетчика
+   * Внешний вид счетчика.
    */
   appearance?: 'accent' | 'neutral' | 'accent-green' | 'accent-red' | 'custom';
 
@@ -44,10 +44,12 @@ export interface CounterProps extends HTMLAttributesWithRootRef<HTMLSpanElement>
    * - При mode="primary" - изменяет фон
    * - При mode="contrast" - изменяет цвет текста
    * - При mode="tertiary" - изменяет цвет текста
-   * - При mode="inherit" - не работает
+   * - При mode="inherit" - не работает.
    */
   color?: string;
-
+  /**
+   * Размер счетчика.
+   */
   size?: 's' | 'm';
 }
 

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

@@ -0,0 +1 @@
+{"version":3,"sources":["./CustomScrollView.module.css"],"names":["host","scrollbarHidden","overscrollBehaviorContain","overscrollBehaviorNone","scrollBehaviorSmooth","horizontalScrollEnabled"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAQEA,M,WARF;AAAA,E,aAaEC,iB,WAbF;AAAA,E,aAsBEA,iB,WAtBF;AAAA,E,aA0BED,M,WA1BF;AAAA,E,aAgCEA,M,WAhCF;AAAA,E,aAiCIA,M,WAjCJ;AAAA,E,aAqCEA,M,WArCF;AAAA,E,aAsCIA,M,WAtCJ;AAAA,E,aA6CEA,M,WA7CF;AAAA,E,aA8CIA,M,WA9CJ;AAAA,E,aAoDAE,2B,WApDA;AAAA,E,aAwDAC,wB,WAxDA;AAAA,E,aA4DAC,sB,WA5DA;AAAA,E,aAgEAC,yB,WAhEA;AAAA;AAAA","file":"CustomScrollView.module.css.d.ts","sourceRoot":""}

package/src/components/CustomScrollView/CustomScrollView.tsx

@@ -19,25 +19,34 @@ const scrollBehaviorClassNames = {
 export interface CustomScrollViewProps
   extends React.AllHTMLAttributes<HTMLDivElement>,
     HasRootRef<HTMLDivElement> {
+  /**
+   * `className` для компонента.
+   */
   className?: HTMLDivElement['className'];
+  /**
+   * Обработчик события `scroll`.
+   */
   onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
+  /**
+   * Содержимое.
+   */
   children: React.ReactNode;
   /**
-   * Поведение overscroll, подробнее можно почитать в [документации](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior)
+   * Поведение overscroll, подробнее можно почитать в [документации](https://developer.mozilla.org/en-US/docs/Web/CSS/overscroll-behavior).
    */
   overscrollBehavior?: 'auto' | 'contain' | 'none';
   /**
-   * Поведение scroll-behavior, подробнее можно почитать в [документации](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)
+   * Поведение scroll-behavior, подробнее можно почитать в [документации](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior).
    */
   scrollBehavior?: 'auto' | 'smooth';
   /**
-   * Включение отображения горизонтального скролла
+   * Включение отображения горизонтального скролла.
    */
   enableHorizontalScroll?: boolean;
   /**
-   * Скрытие скроллбара
+   * Скрытие скроллбара.
    *
-   * > В версии ниже Firefox 64 будет виден скролл
+   * > В версии ниже Firefox 64 будет виден скролл.
    */
   scrollbarHidden?: boolean;
 }

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

@@ -0,0 +1 @@
+{"version":3,"sources":["./CustomSelect.module.css"],"names":["host","popDown","popUp","control","empty","fetching","dropdownIcon","clearIcon","sizeYCompact","sizeYNone"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAOAC,S,WAPA;AAAA,E,aAYAC,O,WAZA;AAAA,E,aAiBAC,S,WAjBA;AAAA,E,aAqBAC,O,WArBA;AAAA,E,aA4BAC,U,WA5BA;AAAA,E,aAkCAC,c,WAlCA;AAAA,E,aAsCAC,W,WAtCA;AAAA,E,aA0CAC,c,WA1CA;AAAA,E,aA0CcF,c,WA1Cd;AAAA,E,aA8CAE,c,WA9CA;AAAA,E,aA8CcD,W,WA9Cd;AAAA,E,aAmDEE,W,WAnDF;AAAA,E,aAmDaH,c,WAnDb;AAAA,E,aAuDEG,W,WAvDF;AAAA,E,aAuDaF,W,WAvDb;AAAA;AAAA","file":"CustomSelect.module.css.d.ts","sourceRoot":""}

package/src/components/CustomSelect/CustomSelect.tsx

@@ -141,10 +141,13 @@ const filter = <T extends CustomSelectOptionInterface>(
     : options;
 };
 
+/* eslint-disable jsdoc/require-jsdoc */
 type MousePosition = {
   x: React.MouseEvent['clientX'];
   y: React.MouseEvent['clientY'];
 };
+/* eslint-enable jsdoc/require-jsdoc */
+
 function isMousePositionChanged(event: React.MouseEvent, prevPosition: MousePosition) {
   return (
     Math.abs(prevPosition.x - event.clientX) >= 1 || Math.abs(prevPosition.y - event.clientY) >= 1
@@ -152,14 +155,26 @@ function isMousePositionChanged(event: React.MouseEvent, prevPosition: MousePosi
 }
 
 export interface CustomSelectOptionInterface {
+  /**
+   * Значение.
+   */
   value: Exclude<SelectValue, null>;
+  /**
+   * Отображаемый текст.
+   */
   label: React.ReactElement | string;
+  /**
+   * Блокировка взаимодействия с компонентом.
+   */
   disabled?: boolean;
   [index: string]: any;
 }
 
 export interface CustomSelectRenderOption<T extends CustomSelectOptionInterface>
   extends CustomSelectOptionProps {
+  /**
+   * Данные об опции.
+   */
   option: T;
 }
 
@@ -172,11 +187,11 @@ export interface SelectProps<
     Pick<CustomSelectDropdownProps, 'overscrollBehavior'>,
     Pick<CustomSelectInputProps, 'minLength' | 'maxLength' | 'pattern' | 'readOnly'> {
   /**
-   * ref на внутрений компонент input
+   * Ref на внутрений компонент input.
    */
   getSelectInputRef?: React.Ref<HTMLInputElement>;
   /**
-   * Если `true`, то при клике на `CustomSelect` в нём появится текстовое поле для поиска по `options`. По умолчанию поиск
+   * Если `true`, то при нажатии на `CustomSelect` в нём появится текстовое поле для поиска по `options`. По умолчанию поиск
    * производится по `option.label`.
    */
   searchable?: boolean;
@@ -185,18 +200,24 @@ export interface SelectProps<
    */
   emptyText?: string;
   /**
-   * Событие изменения текстового поля
+   * Событие изменения текстового поля.
    */
   onInputChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  /**
+   * Список опций в списке.
+   */
   options: OptionInterfaceT[];
   /**
    * Функция для кастомной фильтрации. По умолчанию поиск производится по `option.label`.
    */
   filterFn?: false | FilterFn<OptionInterfaceT>;
+  /**
+   * Направление раскрытия выпадающего списка.
+   */
   popupDirection?: 'top' | 'bottom';
   /**
    * Рендер-проп для кастомного рендера опции.
-   * В объекте аргумента приходят [свойства опции](https://vkcom.github.io/VKUI/#/CustomSelectOption?id=props)
+   * В объекте аргумента приходят [свойства опции](https://vkcom.github.io/VKUI/#/CustomSelectOption?id=props).
    *
    * > ⚠️  Важно: cвойство опции `disabled` должно выставляться только через проп `options`.
    * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе `CustomSelect` не будет знать об актуальном состоянии
@@ -217,37 +238,49 @@ export interface SelectProps<
    * "победит" `renderDropdown`.
    */
   fetching?: boolean;
+  /**
+   * Обработчик закрытия выпадающего списка.
+   */
   onClose?: VoidFunction;
+  /**
+   * Обработчик открытия выпадающего списка.
+   */
   onOpen?: VoidFunction;
   /**
-   * Иконка раскрывающегося списка
+   * Иконка раскрывающегося списка.
    */
   icon?: React.ReactNode;
   /**
    * Кастомная кнопка для очистки значения.
-   * Должна принимать обязательное свойство `onClick`
+   * Должна принимать обязательное свойство `onClick`.
    */
   ClearButton?: React.ComponentType<CustomSelectClearButtonProps>;
   /**
-   * Если `true`, то справа будет отображаться кнопка для очистки значения
+   * Если `true`, то справа будет отображаться кнопка для очистки значения.
    */
   allowClearButton?: boolean;
   /**
-   * Передает атрибут `data-testid` для кнопки очистки
+   * Передает атрибут `data-testid` для кнопки очистки.
    */
   clearButtonTestId?: string;
   /**
-   * Отступ от выпадающего списка
+   * Отступ от выпадающего списка.
    */
   dropdownOffsetDistance?: number;
   /**
-   * Ширина раскрывающегося списка зависит от контента
+   * Ширина раскрывающегося списка зависит от контента.
    */
   dropdownAutoWidth?: boolean;
+  /**
+   * Использовать Portal для рендеринга выпадающего списка.
+   */
   forceDropdownPortal?: boolean;
+  /**
+   * Тип отображения компонента.
+   */
   selectType?: SelectType;
   /**
-   * Отключает максимальную высоту по умолчанию
+   * Отключает максимальную высоту по умолчанию.
    */
   noMaxHeight?: boolean;
   /**
@@ -258,7 +291,10 @@ export interface SelectProps<
    * Передает атрибут `data-testid` для нативного элемента `select`.
    */
   nativeSelectTestId?: string;
-  onInputKeyDown?: (e: React.KeyboardEvent) => void;
+  /**
+   * Обработчик события `keyDown` в поле ввода.
+   */
+  onInputKeyDown?: (e: React.KeyboardEvent, isOpen: boolean) => void;
 }
 
 type MouseEventHandler = (event: React.MouseEvent<HTMLElement>) => void;
@@ -711,6 +747,14 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
     ],
   );
 
+  const handleInputKeydown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      onInputKeyDown?.(event, opened);
+    },
+    [opened, onInputKeyDown],
+  );
+  const _onInputKeyDown = callMultiple(handleKeyDownSelect, handleInputKeydown);
+
   const handleOptionClick = React.useCallback(
     (e: React.MouseEvent<HTMLElement>) => {
       const index = Array.prototype.indexOf.call(
@@ -761,6 +805,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
             // C mousemove такой проблемы нет, что позволяет реализовать поведение при наведении с клавиатуры и при наведении мышью идентично `<select>`.
             onMouseMove: (e) => focusOptionOnMouseMove(e, index),
             id: `${popupAriaId}-${option.value}`,
+            ...option,
           })}
         </React.Fragment>
       );
@@ -951,7 +996,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
         fetching={fetching}
         value={inputValue}
         onKeyUp={handleKeyUp}
-        onKeyDown={callMultiple(handleKeyDownSelect, onInputKeyDown)}
+        onKeyDown={_onInputKeyDown}
         onChange={onInputChange}
         onClick={onClick}
         before={before}
@@ -961,6 +1006,7 @@ export function CustomSelect<OptionInterfaceT extends CustomSelectOptionInterfac
         {selected?.label}
       </CustomSelectInput>
       <select
+        tabIndex={-1}
         ref={selectElRef}
         name={name}
         onChange={onNativeSelectChange}

package/src/components/CustomSelect/CustomSelectClearButton.tsx

@@ -7,8 +7,17 @@ import type { HasDataAttribute } from '../../types';
 import { IconButton } from '../IconButton/IconButton';
 
 export interface CustomSelectClearButtonProps extends HasDataAttribute {
+  /**
+   * `className` для компонента.
+   */
   className?: string;
+  /**
+   * Обработчик нажатия на кнопку.
+   */
   onClick: () => void;
+  /**
+   * Блокировка взаимодействия с компонентом.
+   */
   disabled?: boolean;
 }
 

package/src/components/CustomSelect/CustomSelectInput/CustomSelectInput.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./CustomSelectInput.module.css"],"names":["host","el","elCursorPointer","sizeYCompact","sizeYNone","hasBefore","hasAfter","container","multiline","inputGroup","title","empty","alignRight","alignCenter"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAC,I,WAJA;AAAA,E,aAwBAC,iB,WAxBA;AAAA,E,aA4BAC,c,WA5BA;AAAA,E,aA4BcF,I,WA5Bd;AAAA,E,aAiCEG,W,WAjCF;AAAA,E,aAiCaH,I,WAjCb;AAAA,E,aAsCAI,W,WAtCA;AAAA,E,aAsCWJ,I,WAtCX;AAAA,E,aA0CAK,U,WA1CA;AAAA,E,aA0CUL,I,WA1CV;AAAA,E,aA8CAM,W,WA9CA;AAAA,E,aAyDAF,W,WAzDA;AAAA,E,aAyDWE,W,WAzDX;AAAA,E,aA6DAC,W,WA7DA;AAAA,E,aA6DWD,W,WA7DX;AAAA,E,aAiEAJ,c,WAjEA;AAAA,E,aAiEaK,W,WAjEb;AAAA,E,aAiEwBD,W,WAjExB;AAAA,E,aAsEEH,W,WAtEF;AAAA,E,aAsEYI,W,WAtEZ;AAAA,E,aAsEuBD,W,WAtEvB;AAAA,E,aA2EAE,Y,WA3EA;AAAA,E,aAoFAJ,W,WApFA;AAAA,E,aAoFWI,Y,WApFX;AAAA,E,aAwFAC,O,WAxFA;AAAA,E,aA4FAV,M,WA5FA;AAAA,E,aA4FUQ,W,WA5FV;AAAA,E,aA4FsBE,O,WA5FtB;AAAA,E,aAkGAC,O,WAlGA;AAAA,E,aAkGOD,O,WAlGP;AAAA,E,aAyGAT,I,WAzGA;AAAA,E,aA6GAW,Y,WA7GA;AAAA,E,aA6GYF,O,WA7GZ;AAAA,E,aA8GAE,Y,WA9GA;AAAA,E,aA8GYX,I,WA9GZ;AAAA,E,aAkHAY,a,WAlHA;AAAA,E,aAkHaH,O,WAlHb;AAAA,E,aAmHAG,a,WAnHA;AAAA,E,aAmHaZ,I,WAnHb;AAAA,E,aA4H6CM,W,WA5H7C;AAAA;AAAA","file":"CustomSelectInput.module.css.d.ts","sourceRoot":""}

package/src/components/CustomSelect/CustomSelectInput/CustomSelectInput.tsx

@@ -1,4 +1,5 @@
 'use client';
+/* eslint-disable jsdoc/require-jsdoc */
 
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["./CustomSelectDropdown.module.css"],"names":["host","wide","bottom","top","fetching","inWithMaxHeight"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aASAC,M,WATA;AAAA,E,aAaAC,Q,WAbA;AAAA,E,aAmBAC,K,WAnBA;AAAA,E,aA2BAC,U,WA3BA;AAAA,E,aAgCAC,iB,WAhCA;AAAA,E,aAyC8CA,iB,WAzC9C;AAAA;AAAA","file":"CustomSelectDropdown.module.css.d.ts","sourceRoot":""}