@vkontakte/vkui 7.2.1 → 7.3.1

package/src/components/Cell/Cell.tsx

@@ -17,32 +17,38 @@ export interface CellProps
   extends Omit<SimpleCellProps, 'getRootRef'>,
     RemovableProps,
     HasRootRef<HTMLDivElement> {
+  /**
+   * Режим отображения ячейки:
+   *
+   * - "removable": добавляется кнопка для удаления
+   * - "selectable": добавляется чекбокс для выбора.
+   */
   mode?: 'removable' | 'selectable';
   /**
-   * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет
+   * В режиме перетаскивания ячейка перестает реагировать на нажатие, то есть при нажатии переданный `onClick` вызываться не будет.
    */
   draggable?: boolean;
   /**
-   * Имя для input в режиме selectable
+   * Имя для `input` в режиме `selectable`.
    */
   name?: string;
   /**
-   * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения
+   * В режиме `selectable` реагирует на входящие значения пропса `cheсked`, как зависящий напрямую от входящего значения.
    */
   checked?: boolean;
   /**
-   * В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент
+   * В режиме `selectable` реагирует на входящие значения пропса `defaultChecked` как неконтролируемый компонент.
    */
   defaultChecked?: boolean;
   /**
-   * Коллбэк срабатывает при завершении перетаскивания.
-   * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В коллбэке есть объект с полями `from` и `to`.
+   * Обработчик, срабатывающий при завершении перетаскивания.
+   * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В обработчике есть объект с полями `from` и `to`.
    * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице
    * есть рабочий пример с обработкой этих чисел и перерисовкой списка.
    */
   onDragFinish?: (swappedItemRange: SwappedItemRange) => void;
   /**
-   * Текст для кнопки перетаскивания ячейки
+   * Текст для кнопки перетаскивания ячейки.
    */
   draggerLabel?: string;
 }
@@ -120,7 +126,6 @@ export const Cell: React.FC<CellProps> & {
     dragging && styles.dragging,
     platform === 'ios' && styles.ios,
     removable && styles.removable,
-    Component === 'label' && styles.selectable,
   );
 
   const simpleCellProps: SimpleCellProps = {

package/src/components/Cell/CellCheckbox/CellCheckbox.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./CellCheckbox.module.css"],"names":["host","icon","iconOn","input","iconOff"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAMAC,M,WANA;AAAA,E,aAWAC,Q,WAXA;AAAA,E,aAeAC,O,WAfA;AAAA,E,aAeuBC,S,WAfvB;AAAA,E,aAgBAD,O,WAhBA;AAAA,E,aAgBiBD,Q,WAhBjB;AAAA;AAAA","file":"CellCheckbox.module.css.d.ts","sourceRoot":""}

package/src/components/Cell/CellDragger/CellDragger.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./CellDragger.module.css"],"names":["host","icon"],"mappings":"AAAA;AAAA,E,aACAA,M,WADA;AAAA,E,aAQAC,M,WARA;AAAA;AAAA","file":"CellDragger.module.css.d.ts","sourceRoot":""}

package/src/components/Cell/CellDragger/CellDragger.tsx

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["./CellButton.module.css"],"names":["host","centered","appearanceAccent","appearanceNeutral","appearanceNegative"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAgB+BA,M,WAhB/B;AAAA,E,aAuBAA,M,WAvBA;AAAA,E,aA2BAC,U,WA3BA;AAAA,E,aAiCAA,U,WAjCA;AAAA,E,aAuCAA,U,WAvCA;AAAA,E,aA+CAC,kB,WA/CA;AAAA,E,aAsDAD,U,WAtDA;AAAA,E,aA4DAE,mB,WA5DA;AAAA,E,aAkEAC,oB,WAlEA;AAAA;AAAA","file":"CellButton.module.css.d.ts","sourceRoot":""}

package/src/components/CellButton/CellButton.tsx

@@ -14,6 +14,9 @@ export interface CellButtonProps extends SimpleCellProps {
    * > Режим `centered` переопределяет токен для темы `"accent"`.
    */
   appearance?: 'accent' | 'neutral' | 'negative';
+  /**
+   * Возможность центрирования содержимого компонента.
+   */
   centered?: boolean;
 }
 

package/src/components/CellButtonGroup/CellButtonGroup.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { defineComponentDisplayNames } from '../../lib/react/defineComponentDisplayNames';
 import { type HTMLAttributesWithRootRef } from '../../types';
 import { ButtonGroup } from '../ButtonGroup/ButtonGroup';
 import { CellButtonGroupSeparator } from './CellButtonGroupSeparator/CellButtonGroupSeparator';
@@ -14,7 +15,8 @@ export const CellButtonGroup = (props: CellButtonGroupProps): React.ReactNode =>
   return <ButtonGroup gap="none" stretched {...props} />;
 };
 
-CellButtonGroup.displayName = 'CellButtonGroup';
-
 CellButtonGroup.Separator = CellButtonGroupSeparator;
-CellButtonGroup.Separator.displayName = 'CellButtonGroup.Separator';
+
+if (process.env.NODE_ENV !== 'production') {
+  defineComponentDisplayNames(CellButtonGroup.Separator, 'CellButtonGroup.Separator');
+}

package/src/components/CellButtonGroup/CellButtonGroupSeparator/CellButtonGroupSeparator.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./CellButtonGroupSeparator.module.css"],"names":["root"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA;AAAA","file":"CellButtonGroupSeparator.module.css.d.ts","sourceRoot":""}

package/src/components/CellButtonGroup/CellButtonGroupSeparator/CellButtonGroupSeparator.tsx

@@ -17,5 +17,3 @@ export const CellButtonGroupSeparator = ({
     />
   );
 };
-
-CellButtonGroupSeparator.displayName = 'CellButtonGroupSeparator';

package/src/components/Checkbox/Checkbox.tsx

@@ -14,7 +14,13 @@ export interface CheckboxProps
       TappableProps,
       'hoverMode' | 'activeMode' | 'hasHover' | 'hasActive' | 'focusVisibleMode'
     > {
+  /**
+   * Подпись под основным текстом.
+   */
   description?: React.ReactNode;
+  /**
+   * Контент, идущий за основным текстом.
+   */
   titleAfter?: React.ReactNode;
 }
 

package/src/components/Checkbox/CheckboxInput/CheckboxInput.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./CheckboxInput.module.css"],"names":["host","iconOn","iconIndeterminate","iconOff","input"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAC,Q,WAJA;AAAA,E,aAKAC,mB,WALA;AAAA,E,aASAC,S,WATA;AAAA,E,aAaAC,O,WAbA;AAAA,E,aAaiBH,Q,WAbjB;AAAA,E,aAiBAG,O,WAjBA;AAAA,E,aAiBuBF,mB,WAjBvB;AAAA,E,aAkBAE,O,WAlBA;AAAA,E,aAkBiBD,S,WAlBjB;AAAA,E,aAsBAC,O,WAtBA;AAAA,E,aAsBuBF,mB,WAtBvB;AAAA,E,aA0BAE,O,WA1BA;AAAA,E,aA0BuBH,Q,WA1BvB;AAAA,E,aA2BAG,O,WA3BA;AAAA,E,aA2BuBD,S,WA3BvB;AAAA;AAAA","file":"CheckboxInput.module.css.d.ts","sourceRoot":""}

package/src/components/Checkbox/CheckboxInput/CheckboxInput.tsx

@@ -32,12 +32,33 @@ export interface CheckboxInputProps
   extends React.ComponentProps<'input'>,
     HasRootRef<HTMLDivElement>,
     HasRef<HTMLInputElement> {
+  /**
+   * Неопределенное состояние чекбокса.
+   */
   indeterminate?: boolean;
+  /**
+   * Неопределенное состояние чекбокса по умолчанию.
+   */
   defaultIndeterminate?: boolean;
+  /**
+   * Иконка для включенного состояния в компактном режиме.
+   */
   IconOnCompact?: CheckboxInputIconType;
+  /**
+   * Иконка для включенного состояния в обычном режиме.
+   */
   IconOnRegular?: CheckboxInputIconType;
+  /**
+   * Иконка для выключенного состояния в компактном режиме.
+   */
   IconOffCompact?: CheckboxInputIconType;
+  /**
+   * Иконка для выключенного состояния в обычном режиме.
+   */
   IconOffRegular?: CheckboxInputIconType;
+  /**
+   * Иконка для неопределенного состояния.
+   */
   IconIndeterminate?: CheckboxInputIconType;
 }
 

package/src/components/Checkbox/CheckboxSimple/CheckboxSimple.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./CheckboxSimple.module.css"],"names":["host","sizeYCompact","sizeYNone"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aASAA,M,WATA;AAAA,E,aAiBAC,c,WAjBA;AAAA,E,aAuBEC,W,WAvBF;AAAA;AAAA","file":"CheckboxSimple.module.css.d.ts","sourceRoot":""}

package/src/components/ChipsInput/ChipsInput.tsx

@@ -11,7 +11,7 @@ export interface ChipsInputProps<Option extends ChipOption>
     UseChipsInputProps<Option>,
     Pick<FormFieldProps, 'status' | 'mode' | 'before' | 'after' | 'maxHeight'> {
   /**
-   * Если `true`, то справа будет отображаться кнопка для очистки значения
+   * Если `true`, то справа будет отображаться кнопка для очистки значения.
    */
   allowClearButton?: boolean;
 }
@@ -37,6 +37,7 @@ export const ChipsInput = <Option extends ChipOption>({
   // other
   disabled,
   allowClearButton,
+  delimiter,
   ...restProps
 }: ChipsInputProps<Option>): React.ReactNode => {
   const {
@@ -65,6 +66,7 @@ export const ChipsInput = <Option extends ChipOption>({
 
     // other
     disabled,
+    delimiter,
   });
   const inputRef = useExternRef(getRef, inputRefHook);
 

package/src/components/ChipsInput/useChipsInput.ts

@@ -37,8 +37,8 @@ export const transformValue = <O extends ChipOption>(
   }));
 
 interface ToggleOption<O extends ChipOption> {
-  (optionForAdd: O | string, isNewValue: true): void;
-  (optionForRemove: O | ChipOptionValue, isNewValue: false): void;
+  (optionsForAdd: Array<O | string>, isNewValue: true): void;
+  (optionsForRemove: Array<O | ChipOptionValue>, isNewValue: false): void;
 }
 
 export interface UseChipsInputProps<O extends ChipOption = ChipOption>
@@ -69,10 +69,11 @@ export const useChipsInput = <O extends ChipOption>({
   // input
   inputValue: inputValueProp,
   defaultInputValue = DEFAULT_INPUT_VALUE,
-  onInputChange,
+  onInputChange: onInputChangeProp,
 
   // other
   disabled,
+  delimiter,
 }: UseChipsInputProps<O>): {
   value: Array<
     O & {
@@ -86,7 +87,7 @@ export const useChipsInput = <O extends ChipOption>({
   clearOptions: () => void;
   inputRef: React.RefObject<(HTMLInputElement & SimulateReactInputTargetState) | null>;
   inputValue: string;
-  onInputChange: (e: React.ChangeEvent<HTMLInputElement>) => any;
+  onInputChange: (e: React.ChangeEvent<HTMLInputElement>, canCreate?: boolean) => any;
   clearInput: () => void;
 } => {
   const [value, setValue] = useCustomEnsuredControl({
@@ -101,22 +102,28 @@ export const useChipsInput = <O extends ChipOption>({
     disabled,
     value: inputValueProp,
     defaultValue: defaultInputValue,
-    onChange: onInputChange,
+    onChange: onInputChangeProp,
   });
 
   const toggleOption: ToggleOption<O> = React.useCallback(
-    (nextValueProp: O | ChipOptionValue, isNewValue: boolean) => {
+    (nextValuesProp: Array<O | ChipOptionValue>, isNewValue: boolean) => {
       setValue((prevValue) => {
-        const isLikeObjectOption = isValueLikeChipOptionObject(nextValueProp);
-        const resolvedOption = isLikeObjectOption
-          ? getNewOptionData(nextValueProp.value, nextValueProp.label)
-          : getNewOptionData(nextValueProp, typeof nextValueProp === 'string' ? nextValueProp : '');
-        const nextValue = prevValue.filter((option: O) => resolvedOption.value !== option.value);
-
-        if (isNewValue === true) {
-          nextValue.push(
-            isLikeObjectOption ? { ...nextValueProp, ...resolvedOption } : resolvedOption,
-          );
+        const resolvedNextOptionsSet = new Set<ChipOptionValue>();
+        const resolvedNextOptions = nextValuesProp.map((option) => {
+          const isLikeObjectOption = isValueLikeChipOptionObject(option);
+          const resolvedOption = isLikeObjectOption
+            ? getNewOptionData(option.value, option.label)
+            : getNewOptionData(option, typeof option === 'string' ? option : '');
+          resolvedNextOptionsSet.add(resolvedOption.value);
+          return resolvedOption;
+        });
+
+        const nextValue = prevValue.filter(
+          (option: O) => !resolvedNextOptionsSet.has(option.value),
+        );
+
+        if (isNewValue) {
+          nextValue.push(...resolvedNextOptions);
         }
 
         return nextValue;
@@ -134,12 +141,17 @@ export const useChipsInput = <O extends ChipOption>({
   }, [inputRef]);
 
   const addOption = React.useCallback(
-    (newValue: O | string) => toggleOption(newValue, true),
+    (newValue: O | string) => toggleOption([newValue], true),
+    [toggleOption],
+  );
+
+  const addOptions = React.useCallback(
+    (newValues: Array<O | string>) => toggleOption(newValues, true),
     [toggleOption],
   );
 
   const removeOption = React.useCallback(
-    (newValue: O | ChipOptionValue) => toggleOption(newValue, false),
+    (newValue: O | ChipOptionValue) => toggleOption([newValue], false),
     [toggleOption],
   );
 
@@ -163,6 +175,28 @@ export const useChipsInput = <O extends ChipOption>({
     clearInput();
   }, [clearInput, setValue]);
 
+  const onInputChange = React.useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>, canCreate = true) => {
+      const newInputValue = e.target.value;
+      if (!delimiter || !newInputValue.includes(delimiter) || !canCreate) {
+        setInputChange(e);
+        return;
+      }
+      const values = newInputValue
+        .trim()
+        .split(delimiter)
+        .map((v) => v.trim())
+        .filter(Boolean);
+
+      e.target.value = '';
+      e.currentTarget.value = '';
+      setInputChange(e);
+
+      addOptions(values);
+    },
+    [addOptions, delimiter, setInputChange],
+  );
+
   useNativeFormResetListener(inputRef, reset);
 
   return {
@@ -173,7 +207,7 @@ export const useChipsInput = <O extends ChipOption>({
 
     inputRef,
     inputValue,
-    onInputChange: setInputChange,
+    onInputChange,
     clearInput,
     clearOptions,
   };

package/src/components/ChipsInputBase/Chip/Chip.module.css.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"sources":["./Chip.module.css"],"names":["host","in","removable","content","sizeYCompact","sizeYNone","remove","before","after"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAUAC,I,WAVA;AAAA,E,aAWAC,W,WAXA;AAAA,E,aAmBAD,I,WAnBA;AAAA,E,aAwBAA,I,WAxBA;AAAA,E,aA4BAE,S,WA5BA;AAAA,E,aA0CAC,c,WA1CA;AAAA,E,aA0CcD,S,WA1Cd;AAAA,E,aAmDEE,W,WAnDF;AAAA,E,aAmDaF,S,WAnDb;AAAA,E,aA4DAD,W,WA5DA;AAAA,E,aAiEAI,Q,WAjEA;AAAA,E,aA6EAC,Q,WA7EA;AAAA,E,aAiFAC,O,WAjFA;AAAA,E,aAqFAJ,c,WArFA;AAAA,E,aA0FEC,W,WA1FF;AAAA;AAAA","file":"Chip.module.css.d.ts","sourceRoot":""}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["./ChipsInputBase.module.css"],"names":["host","chip","el","hasPlaceholder","sizeYCompact","sizeYNone"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAgBAC,M,WAhBA;AAAA,E,aAqBAC,I,WArBA;AAAA,E,aAmCAA,I,WAnCA;AAAA,E,aAuCAA,I,WAvCA;AAAA,E,aA2CAA,I,WA3CA;AAAA,E,aAiDAA,I,WAjDA;AAAA,E,aAqDAA,I,WArDA;AAAA,E,aAyDAC,gB,WAzDA;AAAA,E,aAyDgBD,I,WAzDhB;AAAA,E,aAkEAE,c,WAlEA;AAAA,E,aAuEEC,W,WAvEF;AAAA;AAAA","file":"ChipsInputBase.module.css.d.ts","sourceRoot":""}

package/src/components/ChipsInputBase/types.ts

@@ -16,8 +16,17 @@ export type ChipOptionValue = string | number;
 export type ChipOptionLabel = React.ReactElement | string | number;
 
 export type ChipOption = {
+  /**
+   * Значение опции.
+   */
   value: ChipOptionValue;
+  /**
+   * Отображаемый текст опции.
+   */
   label: ChipOptionLabel;
+  /**
+   * Блокировка взаимодействия с оцией.
+   */
   disabled?: boolean;
   [index: string]: any;
 };
@@ -26,17 +35,44 @@ export interface ChipProps
   extends HasComponent,
     HasDataAttribute,
     HTMLAttributesWithRootRef<HTMLElement> {
+  /**
+   * Значение чипа.
+   */
   value?: ChipOptionValue;
+  /**
+   * Можно ли удалить чип.
+   */
   removable?: boolean;
+  /**
+   * Блокировка взаимодействия с чипом.
+   */
   disabled?: boolean;
+  /**
+   * Режим только для чтения.
+   */
   readOnly?: boolean;
+  /**
+   * Текст для кнопки удаления.
+   */
   removeLabel?: string;
+  /**
+   * Контент перед основным содержимым.
+   */
   before?: React.ReactNode;
+  /**
+   * Контент после основного содержимого.
+   */
   after?: React.ReactNode;
+  /**
+   * Обработчик удаления чипа.
+   */
   onRemove?: (event: React.MouseEvent, value: ChipOptionValue) => void;
 }
 
 export interface RenderChipProps extends ChipProps {
+  /**
+   * Отображаемый текст чипа.
+   */
   label: ChipOptionLabel;
 }
 
@@ -62,15 +98,47 @@ export type OnInputChange = (event: React.ChangeEvent<HTMLInputElement>) => void
  * @public
  */
 export interface UseChipsInputBaseProps<O extends ChipOption = ChipOption> {
+  /**
+   * Блокировка взаимодействия с компонентом.
+   */
   disabled?: boolean;
-
+  /**
+   * Выбранные опции.
+   */
   value?: O[];
+  /**
+   * Выбранные опции по умолчанию.
+   */
   defaultValue?: O[];
+  /**
+   * Обработчик изменения выбранных опций.
+   */
   onChange?: OnChange<O>;
-
+  /**
+   * Значение поля ввода.
+   */
   inputValue?: string;
+  /**
+   * Значение поля ввода по умолчанию.
+   */
   defaultInputValue?: string;
+  /**
+   * Обработчик изменения значения в поле ввода.
+   */
   onInputChange?: OnInputChange;
+  /**
+   * Символ или строка, которая будет использоваться как разделитель для автоматического создания опций из текста, введенного в поле ввода.
+   *
+   * Работает в двух сценариях:
+   * 1. При вводе разделителя - текст до разделителя автоматически преобразуется в новую опцию.
+   *    Например, при `delimiter=","` ввод "опция1," создаст опцию "опция1".
+   *
+   * 2. При вставке из буфера обмена - если вставляемый текст содержит разделители,
+   *    он будет автоматически разбит на несколько опций.
+   *    Например, при `delimiter=","` вставка "опция1,опция2,опция3" создаст
+   *    три отдельные опции: "опция1", "опция2" и "опция3".
+   */
+  delimiter?: string;
 }
 
 /**
@@ -92,9 +160,12 @@ export interface ChipsInputBaseProps<O extends ChipOption = ChipOption>
     >,
     HasRef<HTMLInputElement>,
     HasAlign {
+  /**
+   * Ссылка на корневой элемент.
+   */
   getRootRef?: React.Ref<HTMLDivElement>;
   /**
-   * Добавляет значение в список на событие `onBlur`
+   * Добавляет значение в список на событие `onBlur`.
    */
   addOnBlur?: boolean;
   /**
@@ -104,16 +175,16 @@ export interface ChipsInputBaseProps<O extends ChipOption = ChipOption>
    */
   renderChip?: RenderChip<O>;
   /**
-   * Показывать ли кнопку для очистки значения
+   * Показывать ли кнопку для очистки значения.
    */
   clearButtonShown?: boolean;
   /**
-   * (e2e) testId кнопки очистки
+   * (e2e) testId кнопки очистки.
    */
   clearButtonTestId?: string;
   /**
    * Кастомная кнопка для очистки значения.
-   * Должна принимать обязательное свойство `onClick`
+   * Должна принимать обязательное свойство `onClick`.
    */
   ClearButton?: React.ComponentType<FormFieldClearButtonProps>;
 }
@@ -124,7 +195,16 @@ export interface ChipsInputBaseProps<O extends ChipOption = ChipOption>
 export interface ChipsInputBasePrivateProps<O extends ChipOption = ChipOption>
   extends ChipsInputBaseProps<O>,
     Pick<FormFieldProps, 'mode' | 'status' | 'before' | 'after' | 'maxHeight'> {
+  /**
+   * Обработчик очистки всех выбранных опций.
+   */
   onClear: () => void;
+  /**
+   * Обработчик добавления новой опции чипа.
+   */
   onAddChipOption: (value: string) => void;
+  /**
+   * Обработчик удаления опции чипа.
+   */
   onRemoveChipOption: (value: O | ChipOptionValue) => void;
 }

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

@@ -0,0 +1 @@
+{"version":3,"sources":["./ChipsSelect.module.css"],"names":["host","empty","popDown","popUp","dropdownIcon","dropdownIconWithOffset"],"mappings":"AAAA;AAAA,E,aAAAA,M,WAAA;AAAA,E,aAIAC,O,WAJA;AAAA,E,aAWAC,S,WAXA;AAAA,E,aAgBAC,O,WAhBA;AAAA,E,aAqBAC,c,WArBA;AAAA,E,aAyBAC,wB,WAzBA;AAAA;AAAA","file":"ChipsSelect.module.css.d.ts","sourceRoot":""}

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -77,17 +77,20 @@ export interface ChipsSelectProps<O extends ChipOption>
     UseChipsSelectProps<O>,
     Pick<FormFieldProps, 'status' | 'mode' | 'before'>,
     Pick<CustomSelectDropdownProps, 'overscrollBehavior'> {
+  /**
+   * Расположение выпадающего списка.
+   */
   placement?: 'top' | 'bottom';
   /**
-   * Отрисовка Spinner вместо списка опций в выпадающем списке
+   * Отрисовка Spinner вместо списка опций в выпадающем списке.
    */
   fetching?: boolean;
   /**
-   * Закрытие выпадающего списка после выбора элемента
+   * Закрытие выпадающего списка после выбора элемента.
    */
   closeAfterSelect?: boolean;
   /**
-   * Ширина раскрывающегося списка зависит от контента
+   * Ширина раскрывающегося списка зависит от контента.
    */
   dropdownAutoWidth?: boolean;
   /**
@@ -99,18 +102,20 @@ export interface ChipsSelectProps<O extends ChipOption>
    */
   dropdownTestId?: string;
   /**
-   * Иконка раскрывающегося списка
+   * Иконка раскрывающегося списка.
    */
   icon?: React.ReactNode;
   /**
-   * Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`)
+   * Добавляет значение в список на событие `onBlur` (использовать вместе с `creatable`).
    */
   addOnBlur?: boolean;
   /**
-   * Отключает максимальную высоту по умолчанию
+   * Отключает максимальную высоту по умолчанию.
    */
   noMaxHeight?: boolean;
-
+  /**
+   * Функция для отрисовки кастомной опции в выпадающем списке.
+   */
   renderOption?: (props: CustomSelectOptionProps, option: O) => React.ReactNode;
   /**
    * Рендер-проп для кастомного рендера содержимого дропдауна.
@@ -122,17 +127,17 @@ export interface ChipsSelectProps<O extends ChipOption>
     defaultDropdownContent: React.ReactNode;
   }) => React.ReactNode;
   /**
-   * Событие срабатывающее перед onChange
+   * Событие срабатывающее перед `onChange`.
    */
   onChangeStart?: (event: React.MouseEvent | React.KeyboardEvent, option: O) => void;
 
   /**
-   * Отступ от выпадающего списка
+   * Отступ от выпадающего списка.
    */
   dropdownOffsetDistance?: number;
 
   /**
-   * Если `true`, то справа будет отображаться кнопка для очистки значения
+   * Если `true`, то справа будет отображаться кнопка для очистки значения.
    */
   allowClearButton?: boolean;
 }
@@ -189,6 +194,7 @@ export const ChipsSelect = <Option extends ChipOption>({
   dropdownOffsetDistance = 0,
   allowClearButton,
   clearButtonTestId,
+  delimiter,
   ...restProps
 }: ChipsSelectProps<Option>): React.ReactNode => {
   const {
@@ -239,6 +245,7 @@ export const ChipsSelect = <Option extends ChipOption>({
 
     // other
     disabled,
+    delimiter,
   });
 
   // Связано с ChipsInputProps

package/src/components/ChipsSelect/types.ts

@@ -1,3 +1,5 @@
+/* eslint-disable jsdoc/require-jsdoc */
+
 import type { ChipOption } from '../ChipsInputBase/types';
 
 export type FocusActionType = 'next' | 'prev';