@vkontakte/vkui 7.2.1 → 7.3.0

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(
@@ -952,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}

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":""}

package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable jsdoc/require-jsdoc */
+
 import * as React from 'react';
 import { classNames } from '@vkontakte/vkjs';
 import type { Placement } from '../../lib/floating';
@@ -17,13 +19,13 @@ export interface CustomSelectDropdownProps
   fetching?: boolean;
   offsetDistance?: number;
   /**
-   * Ширина раскрывающегося списка зависит от контента
+   * Ширина раскрывающегося списка зависит от контента.
    */
   autoWidth?: boolean;
   forcePortal?: boolean;
   onPlacementChange?: (placement: Placement) => void;
   /**
-   * Отключает максимальную высоту по умолчанию
+   * Отключает максимальную высоту по умолчанию.
    */
   noMaxHeight?: boolean;
 }

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

@@ -0,0 +1 @@
+{"version":3,"sources":["./CustomSelectOption.module.css"],"names":["host","hierarchy","sizeYRegular","sizeYNone","disabled","hover","before","main","children","after","description","selectedIcon"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAaAC,W,WAbA;AAAA,E,aAsBAC,c,WAtBA;AAAA,E,aA2BEC,W,WA3BF;AAAA,E,aAgCAC,U,WAhCA;AAAA,E,aAqCAC,O,WArCA;AAAA,E,aAyCAC,Q,WAzCA;AAAA,E,aA8CAC,M,WA9CA;AAAA,E,aAoDAC,U,WApDA;AAAA,E,aAyDAC,O,WAzDA;AAAA,E,aAgEAC,a,WAhEA;AAAA,E,aAoEAC,c,WApEA;AAAA,E,aAwEAA,c,WAxEA;AAAA;AAAA","file":"CustomSelectOption.module.css.d.ts","sourceRoot":""}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["./DateInput.module.css"],"names":["wrapper","input","hidden","customValue","inputTimeDivider","sizeYCompact","sizeYNone"],"mappings":"AAAA;AAAA,E,aAAAA,S,WAAA;AAAA,E,aAWAC,O,WAXA;AAAA,E,aAwBAC,Q,WAxBA;AAAA,E,aA4BAC,a,WA5BA;AAAA,E,aA6CAC,kB,WA7CA;AAAA,E,aAkDAC,c,WAlDA;AAAA,E,aAkDcJ,O,WAlDd;AAAA,E,aAuDEK,W,WAvDF;AAAA,E,aAuDaL,O,WAvDb;AAAA;AAAA","file":"DateInput.module.css.d.ts","sourceRoot":""}