@snack-uikit/fields 0.53.2-preview-0a70077b.0 → 0.54.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.54.0 (2026-04-21)
+
+
+### Features
+
+* **IAM-6423:** support triggers for custom field option ([1865a13](https://github.com/cloud-ru-tech/snack-uikit/commit/1865a13f6e270de961295a96ad7c8d80c7cb147d))
+
+
+
+
+
 ## 0.53.1 (2026-04-02)
 
 

package/README.md

@@ -128,50 +128,6 @@ export function FieldSelectExample() {
 }
 ```
 
-## FieldAdd
-
-### Description
-
-- `FieldAdd` — составной контрол для сценариев, где нужно выбрать существующее значение и рядом дать быстрое действие на создание нового.
-- Внутри использует одиночный `FieldSelect` и кнопку добавления, поэтому наследует состояния поля (`disabled`, `readonly`, `loading`, `validationState`) и возможности селекта вроде поиска, очистки и кастомных empty-state экранов.
-- Подходит для форм и мастеров создания сущностей, где пользователь может либо выбрать уже существующий объект, либо сразу перейти к созданию нового.
-- Figma: [`FieldAdd`](https://www.figma.com/design/sLD7Z9OcMX5GPsp9LXb6mw/-PD-2059--%D0%9F%D0%B0%D1%82%D1%82%D0%B5%D1%80%D0%BD-FieldAdd?node-id=16177-2&m=dev).
-
-### Example
-
-```tsx
-import { useState } from 'react';
-import { FieldAdd } from '@snack-uikit/fields';
-
-const OPTIONS = [
-  { value: 'op1', option: 'Option 1' },
-  { value: 'op2', option: 'Option 2' },
-];
-
-export function FieldAddExample() {
-  const [value, setValue] = useState<string | undefined>();
-
-  return (
-    <FieldAdd
-      id='field-add'
-      label='Select option'
-      placeholder='Placeholder'
-      options={OPTIONS}
-      value={value}
-      onChange={setValue}
-      searchable
-      addButton={{
-        label: 'Create',
-        onClick: () => {
-          // open create flow
-        },
-      }}
-      size='s'
-    />
-  );
-}
-```
-
 ## FieldSecure
 
 ### Description
@@ -599,70 +555,6 @@ FieldStepper в основном предназначен для работы с
 
 [//]: DOCUMENTATION_SECTION_START
 [//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
-## FieldAdd
-### Props
-| name | type | default value | description |
-|------|------|---------------|-------------|
-| options* | `OptionProps[]` | - |  |
-| id | `string` | - | Значение html-атрибута id |
-| name | `string` | - | Значение html-атрибута name |
-| placeholder | `string` | - | Значение плейсхолдера |
-| disabled | `boolean` | - | Является ли поле деактивированным |
-| readonly | `boolean` | - | Является ли поле доступным только для чтения |
-| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
-| onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
-| onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки начала нажатия клавиши клавиатуры |
-| autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
-| className | `string` | - | CSS-класс |
-| label | `string` | - | Лейбл |
-| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
-| required | `boolean` | - | Является ли поле обязательным |
-| caption | `string` | - | Подпись справа от лейбла |
-| hint | `string` | - | Подсказка внизу |
-| showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| size | enum Size: `"s"`, `"m"`, `"l"` | s | Размер |
-| validationState | enum ValidationState: `"error"`, `"default"`, `"warning"`, `"success"` | default | Состояние валидации |
-| labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
-| error | `string` | - |  |
-| loading | `boolean` | - | Отображать ли состояние загрузки данных в поле и списке |
-| prefix | `ReactNode` | - | Произвольный префикс для поля |
-| postfix | `ReactNode` | - | Произвольный постфикс для поля |
-| defaultValue | `ItemId` | - | Начальное состояние |
-| value | `ItemId` | - | Controlled состояние |
-| onChange | `OnChangeHandler<any>` | - | Controlled обработчик измения состояния |
-| pinTop | `OptionProps[]` | - |  |
-| pinBottom | `OptionProps[]` | - |  |
-| searchable | `boolean` | true |  |
-| showCopyButton | `boolean` | true | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
-| onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
-| showClearButton | `boolean` | true | Отображение кнопки очистки поля |
-| prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
-| footer | `ReactNode` | - |  |
-| widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | - |  |
-| search | `SearchState` | - |  |
-| autocomplete | `boolean` | - |  |
-| addOptionByEnter | `boolean` | - |  |
-| open | `boolean` | - |  |
-| enableFuzzySearch | `boolean` | true | Включить нечеткий поиск |
-| resetSearchOnOptionSelection | `boolean` | true | Поведение строки поиска при выборе опции из списка, false необходимо при асинхронной подгрузке значений с бэка, в случае если надо поиск оставить как значение при отсутствии данных |
-| onOpenChange | `(open: boolean) => void` | - |  |
-| selectedOptionFormatter | `SelectedOptionFormatter` | - |  |
-| scrollToSelectedItem | `boolean` | - | Флаг, отвещающий за прокручивание до выбранного элемента |
-| virtualized | `boolean` | - | Включить виртуализацию на компоненты списка. Рекомендуется если у вас от 1к элементов списка |
-| scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
-| scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
-| untouchableScrollbars | `boolean` | - | Отключает возможность взаимодействовать со скролбарами мышью. |
-| onScroll | `(event?: Event) => void` | - | Колбек на скролл прокручиваемого списка |
-| dataFiltered | `boolean` | - |  |
-| dataError | `boolean` | - |  |
-| noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
-| noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
-| errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
-| addButton | `FieldAddButtonProps` | - | Настройки кнопки добавления справа от поля |
-| controlTooltip | `Omit<TooltipProps, "children">` | - | Тултип над контролом выбора значения |
-| showAddButton | `boolean` | - | Показывать ли кнопку добавления; в `readonly` режиме кнопка скрывается независимо от значения пропса |
-| ref | `LegacyRef<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
-| key | `Key` | - |  |
 ## FieldColor
 ### Props
 | name | type | default value | description |
@@ -674,17 +566,17 @@ FieldStepper в основном предназначен для работы с
 | showClearButton | `boolean` | true | Отображение кнопки Очистки поля |
 | value | `string` | - | Значение input |
 | onChange | `(value: string) => void` | - |  |
-| className | `string` | - | Класснейм |
 | withAlpha | `boolean` | - | Значение с альфаканалом |
 | autoApply | `boolean` | - | Применять изменения автоматически, если значение false - то изменения происходят по кнопке |
+| className | `string` | - | Класснейм |
 | colorMode | `{ hex?: boolean; rgb?: boolean; hsv?: boolean; }` | - |  |
 | id | `string` | - | Значение html-атрибута id |
 | name | `string` | - | Значение html-атрибута name |
-| placeholder | `string` | - | Значение плейсхолдера |
 | disabled | `boolean` | - | Является ли поле деактивированным |
 | readonly | `boolean` | - | Является ли поле доступным только для чтения |
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
+| placeholder | `string` | - | Значение плейсхолдера |
 | autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
 | label | `string` | - | Лейбл |
 | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
@@ -765,15 +657,15 @@ FieldStepper в основном предназначен для работы с
 | allowMoreThanMaxLength | `boolean` | - | Можно ли вводить больше разрешённого кол-ва символов |
 | prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
 | asyncValueGetter | `() => Promise<string>` | - | Свойство позволяет грузить данные в поле по требованию |
-| value | `string` | - | Значение input |
 | onChange | `(value: string, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
+| value | `string` | - | Значение input |
 | id | `string` | - | Значение html-атрибута id |
 | name | `string` | - | Значение html-атрибута name |
-| placeholder | `string` | - | Значение плейсхолдера |
 | disabled | `boolean` | - | Является ли поле деактивированным |
 | readonly | `boolean` | - | Является ли поле доступным только для чтения |
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
+| placeholder | `string` | - | Значение плейсхолдера |
 | autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
 | maxLength | `number` | - | Максимальная длина вводимого значения |
 | autoComplete | `string \| boolean` | false | Включен ли автокомплит для поля |
@@ -797,13 +689,13 @@ FieldStepper в основном предназначен для работы с
 | options* | `OptionProps[]` | - |  |
 | id | `string` | - | Значение html-атрибута id |
 | name | `string` | - | Значение html-атрибута name |
-| placeholder | `string` | - | Значение плейсхолдера |
 | disabled | `boolean` | false | Является ли поле деактивированным |
 | readonly | `boolean` | false false | Является ли поле доступным только для чтения |
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
-| onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки начала нажатия клавиши клавиатуры |
+| placeholder | `string` | - | Значение плейсхолдера |
 | autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
+| onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки начала нажатия клавиши клавиатуры |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
 | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
@@ -815,12 +707,12 @@ FieldStepper в основном предназначен для работы с
 | validationState | enum ValidationState: `"error"`, `"default"`, `"warning"`, `"success"` | - | Состояние валидации |
 | labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
 | error | `string` | - |  |
-| loading | `boolean` | - | Отображать ли состояние загрузки данных в поле и списке |
+| loading | `boolean` | - |  |
 | prefix | `ReactNode` | - | Произвольный префикс для поля |
 | postfix | `ReactNode` | - | Произвольный постфикс для поля |
-| defaultValue | `ItemId \| ItemId[]` | - | Начальное состояние |
-| value | `ItemId \| ItemId[]` | - | Controlled состояние |
 | onChange | `OnChangeHandler<any>` | - | Controlled обработчик измения состояния |
+| value | `ItemId \| ItemId[]` | - | Controlled состояние |
+| defaultValue | `ItemId \| ItemId[]` | - | Начальное состояние |
 | pinTop | `OptionProps[]` | - |  |
 | pinBottom | `OptionProps[]` | - |  |
 | searchable | `boolean` | - |  |
@@ -832,7 +724,7 @@ FieldStepper в основном предназначен для работы с
 | widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | - |  |
 | search | `SearchState` | - |  |
 | autocomplete | `boolean` | - |  |
-| addOptionByEnter | `boolean` | - |  |
+| addOptionByEnter | `boolean` | - | @deprecated Используйте `addCustomOptionTriggers` |
 | open | `boolean` | - |  |
 | enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
 | resetSearchOnOptionSelection | `boolean` | true | Поведение строки поиска при выборе опции из списка, false необходимо при асинхронной подгрузке значений с бэка, в случае если надо поиск оставить как значение при отсутствии данных |
@@ -840,8 +732,8 @@ FieldStepper в основном предназначен для работы с
 | selectedOptionFormatter | `SelectedOptionFormatter` | - |  |
 | scrollToSelectedItem | `boolean` | - | Флаг, отвещающий за прокручивание до выбранного элемента |
 | virtualized | `boolean` | - | Включить виртуализацию на компоненты списка. Рекомендуется если у вас от 1к элементов списка |
-| scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
-| scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
+| scrollRef | `Ref<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
+| scrollContainerRef | `Ref<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | untouchableScrollbars | `boolean` | - | Отключает возможность взаимодействовать со скролбарами мышью. |
 | onScroll | `(event?: Event) => void` | - | Колбек на скролл прокручиваемого списка |
 | dataFiltered | `boolean` | - |  |
@@ -849,10 +741,16 @@ FieldStepper в основном предназначен для работы с
 | noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
 | noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
 | errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
+| addCustomOptionTriggers | `FieldSelectSingleAddCustomOptionTrigger[] \| FieldSelectMultipleAddCustomOptionTrigger[]` | - | Триггеры фиксации произвольного значения из строки поиска в режиме `single`. Если передан, имеет приоритет над устаревшим `addOptionByEnter`. Триггеры фиксации произвольного значения из строки поиска в режиме `multiple`. Если передан, имеет приоритет над устаревшим `addOptionByEnter`. |
 | selection | "single" \| "multiple" | - |  |
 | ref | `LegacyRef<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
 | key | `Key` | - |  |
 | removeByBackspace | `boolean` | - |  |
+## FieldSelectMultipleAddCustomOptionTrigger
+События, по которым произвольное значение из строки поиска фиксируется в значении поля
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
 ## FieldSlider
 ### Props
 | name | type | default value | description |
@@ -870,8 +768,8 @@ FieldStepper в основном предназначен для работы с
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
 | autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
-| value | `number \| number[]` | - |  |
 | onChange | `(value: number \| number[]) => void` | - |  |
+| value | `number \| number[]` | - |  |
 | range | `boolean` | - |  |
 | tipFormatter | `(value: string \| number) => ReactNode` | - |  |
 | step | `number` | - |  |
@@ -937,22 +835,22 @@ FieldStepper в основном предназначен для работы с
 | postfix | `ReactNode` | - | Произвольный постфикс для поля |
 | button | `Button` | - | Кнопка действия внутри поля |
 | type | "text" \| "tel" \| "email" | text |  |
-| value | `string` | - | Значение input |
 | onChange | `(value: string, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
-| inputMode | enum InputMode: `"search"`, `"none"`, `"text"`, `"tel"`, `"email"`, `"decimal"`, `"numeric"`, `"url"` | - | Режим работы экранной клавиатуры |
+| value | `string` | - | Значение input |
+| inputMode | enum InputMode: `"none"`, `"text"`, `"search"`, `"tel"`, `"email"`, `"decimal"`, `"numeric"`, `"url"` | - | Режим работы экранной клавиатуры |
 | id | `string` | - | Значение html-атрибута id |
 | name | `string` | - | Значение html-атрибута name |
-| placeholder | `string` | - | Значение плейсхолдера |
 | disabled | `boolean` | - | Является ли поле деактивированным |
 | readonly | `boolean` | - | Является ли поле доступным только для чтения |
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
-| onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки начала нажатия клавиши клавиатуры |
+| placeholder | `string` | - | Значение плейсхолдера |
 | autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
 | maxLength | `number` | - | Максимальная длина вводимого значения |
 | autoComplete | `string \| boolean` | false | Включен ли автокомплит для поля |
 | spellCheck | `boolean` | true | Значение атрибута spellcheck (проверка орфографии) |
 | pattern | `string` | - | Регулярное выражение валидного инпута |
+| onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки начала нажатия клавиши клавиатуры |
 | onPaste | `ClipboardEventHandler<HTMLInputElement>` | - | Колбек обработки вставки значения |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
@@ -983,16 +881,16 @@ FieldStepper в основном предназначен для работы с
 | value | `string` | - | HTML-аттрибут value |
 | id | `string` | - | HTML-аттрибут id |
 | name | `string` | - | HTML-аттрибут name |
-| placeholder | `string` | - | Плейсхолдер |
 | disabled | `boolean` | - | Является ли поле деактивированным |
 | readonly | `boolean` | - | Является ли поле доступным только на чтение |
 | onFocus | `FocusEventHandler<HTMLTextAreaElement>` | - | Колбек получения фокуса |
 | onBlur | `FocusEventHandler<HTMLTextAreaElement>` | - | Колбек потери фокуса |
-| onKeyDown | `KeyboardEventHandler<HTMLTextAreaElement>` | - | Колбек нажатия клавиши клавиатуры |
+| placeholder | `string` | - | Плейсхолдер |
 | autoFocus | `boolean` | - | Включен ли авто-фокус |
 | maxLength | `number` | - | Максимальное кол-во символов |
-| inputMode | enum InputMode: `"search"`, `"none"`, `"text"`, `"tel"`, `"email"`, `"decimal"`, `"numeric"`, `"url"` | - | Режим работы экранной клавиатуры |
+| inputMode | enum InputMode: `"none"`, `"text"`, `"search"`, `"tel"`, `"email"`, `"decimal"`, `"numeric"`, `"url"` | - | Режим работы экранной клавиатуры |
 | spellCheck | `boolean` | true | Включение проверки орфографии |
+| onKeyDown | `KeyboardEventHandler<HTMLTextAreaElement>` | - | Колбек нажатия клавиши клавиатуры |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
 | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
@@ -1042,8 +940,8 @@ FieldStepper в основном предназначен для работы с
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| __@metadata@1080* | `DecoratorMetadataObject` | - |  |
-| __@hasInstance@1078* | `(value: any) => boolean` | - | Determines whether the given value inherits from this function if this function was used as a constructor function.  A constructor function can control which objects are recognized as its instances by 'instanceof' by overriding this method. |
+| __@metadata@1004* | `DecoratorMetadataObject` | - |  |
+| __@hasInstance@1002* | `(value: any) => boolean` | - | Determines whether the given value inherits from this function if this function was used as a constructor function.  A constructor function can control which objects are recognized as its instances by 'instanceof' by overriding this method. |
 | name* | `string` | - | Returns the name of the function. Function names are read-only and can not be changed. |
 | caller* | `Function` | - |  |
 | arguments* | `any` | - |  |

package/dist/cjs/components/FieldSecure/FieldSecure.d.ts

@@ -23,5 +23,5 @@ type FieldSecureOwnProps = {
 export type FieldSecureProps = WithSupportProps<FieldSecureOwnProps & InputProps & WrapperProps>;
 export declare const FieldSecure: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string;
-} & import("react").AriaAttributes & FieldSecureOwnProps & Pick<Partial<InputPrivateProps>, "onChange" | "value"> & Pick<InputPrivateProps, "id" | "name" | "onFocus" | "onBlur" | "disabled" | "placeholder" | "readonly" | "autoFocus" | "autoComplete" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").AriaAttributes & FieldSecureOwnProps & Pick<Partial<InputPrivateProps>, "onChange" | "value"> & Pick<InputPrivateProps, "id" | "name" | "onFocus" | "onBlur" | "disabled" | "readonly" | "placeholder" | "autoFocus" | "autoComplete" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/cjs/components/FieldSelect/FieldSelectMultiple.d.ts

@@ -28,4 +28,6 @@ export declare const FieldSelectMultiple: import("react").ForwardRefExoticCompon
     resetSearchOnOptionSelection?: boolean;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter;
-} & Pick<import("@snack-uikit/list").DroplistProps, "onScroll" | "scrollRef" | "scrollContainerRef" | "untouchableScrollbars" | "dataError" | "dataFiltered" | "scrollToSelectedItem" | "virtualized" | "noDataState" | "noResultsState" | "errorDataState">, "showCopyButton" | "onCopyButtonClick"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<import("@snack-uikit/list").DroplistProps, "onScroll" | "scrollRef" | "scrollContainerRef" | "untouchableScrollbars" | "dataError" | "dataFiltered" | "scrollToSelectedItem" | "virtualized" | "noDataState" | "noResultsState" | "errorDataState">, "showCopyButton" | "onCopyButtonClick"> & {
+    addCustomOptionTriggers?: import("./types").FieldSelectMultipleAddCustomOptionTrigger[];
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cjs/components/FieldSelect/FieldSelectMultiple.js

@@ -62,6 +62,7 @@ exports.FieldSelectMultiple = (0, react_1.forwardRef)((props, ref) => {
       postfix,
       removeByBackspace = false,
       addOptionByEnter = false,
+      addCustomOptionTriggers,
       untouchableScrollbars = false,
       open: openProp,
       enableFuzzySearch = true,
@@ -70,7 +71,7 @@ exports.FieldSelectMultiple = (0, react_1.forwardRef)((props, ref) => {
       selectedOptionFormatter = defaultSelectedOptionFormatter,
       autoFocus
     } = props,
-    rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "validationState", "search", "autocomplete", "prefixIcon", "prefix", "postfix", "removeByBackspace", "addOptionByEnter", "untouchableScrollbars", "open", "enableFuzzySearch", "resetSearchOnOptionSelection", "onOpenChange", "selectedOptionFormatter", "autoFocus"]);
+    rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "validationState", "search", "autocomplete", "prefixIcon", "prefix", "postfix", "removeByBackspace", "addOptionByEnter", "addCustomOptionTriggers", "untouchableScrollbars", "open", "enableFuzzySearch", "resetSearchOnOptionSelection", "onOpenChange", "selectedOptionFormatter", "autoFocus"]);
   const localRef = (0, react_1.useRef)(null);
   const inputPlugRef = (0, react_1.useRef)(null);
   const contentRef = (0, react_1.useRef)(null);
@@ -102,6 +103,17 @@ exports.FieldSelectMultiple = (0, react_1.forwardRef)((props, ref) => {
     selectedOptionFormatter,
     resetSearchOnOptionSelection
   }));
+  const {
+    resolvedAddCustomOptionTriggers,
+    tryCommitCustomOptionFromInput
+  } = (0, hooks_2.useFieldSelectMultipleCustomOption)({
+    addCustomOptionTriggers,
+    addOptionByEnter,
+    inputValue,
+    value,
+    setValue,
+    updateInputValue
+  });
   const prefixSettings = (0, hooks_1.usePrefix)({
     prefix,
     disabled
@@ -155,6 +167,12 @@ exports.FieldSelectMultiple = (0, react_1.forwardRef)((props, ref) => {
     setOpen
   });
   const handleItemDelete = (0, hooks_2.useHandleDeleteItem)(setValue);
+  const handleTagDelete = (0, react_1.useCallback)(option => () => {
+    var _a;
+    const deleteItemHandler = handleItemDelete(option);
+    deleteItemHandler();
+    (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+  }, [handleItemDelete]);
   const handleOnKeyDown = onKeyDown => e => {
     if (removeByBackspace && e.code === 'Backspace' && inputValue === '') {
       if ((selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) && !selectedItems.slice(-1)[0].disabled) {
@@ -164,11 +182,13 @@ exports.FieldSelectMultiple = (0, react_1.forwardRef)((props, ref) => {
     if (e.code === 'Enter') {
       e.stopPropagation();
       e.preventDefault();
-    }
-    if (addOptionByEnter && e.code === 'Enter' && inputValue !== '') {
-      if (!(value !== null && value !== void 0 ? value : []).includes(inputValue)) {
-        setValue(value => (value !== null && value !== void 0 ? value : []).concat(inputValue));
-        updateInputValue();
+      tryCommitCustomOptionFromInput('enter');
+    } else {
+      const customOptionTrigger = (0, utils_3.getCustomOptionTriggerByCode)(e.code);
+      if ((0, utils_3.shouldHandleCustomOptionTrigger)(customOptionTrigger, resolvedAddCustomOptionTriggers)) {
+        e.stopPropagation();
+        e.preventDefault();
+        tryCommitCustomOptionFromInput(customOptionTrigger);
       }
     }
     if (!open && prevInputValue.current !== inputValue) {
@@ -194,6 +214,7 @@ exports.FieldSelectMultiple = (0, react_1.forwardRef)((props, ref) => {
   const handleBlur = e => {
     var _a;
     if (!open && !buttonsRefs.filter(Boolean).includes(e.relatedTarget)) {
+      tryCommitCustomOptionFromInput('blur');
       updateInputValue();
       (_a = rest === null || rest === void 0 ? void 0 : rest.onBlur) === null || _a === void 0 ? void 0 : _a.call(rest, e);
     }
@@ -278,7 +299,7 @@ exports.FieldSelectMultiple = (0, react_1.forwardRef)((props, ref) => {
                   tabIndex: -1,
                   label: selectedOptionFormatter(option),
                   appearance: (_a = option.appearance) !== null && _a !== void 0 ? _a : 'neutral',
-                  onDelete: !option.disabled && !disabled && !readonly ? handleItemDelete(option) : undefined,
+                  onDelete: !option.disabled && !disabled && !readonly ? handleTagDelete(option) : undefined,
                   className: styles_module_scss_1.default.tag,
                   "data-disabled": disabled || undefined
                 }, option.id);

package/dist/cjs/components/FieldSelect/FieldSelectSingle.d.ts

@@ -26,4 +26,6 @@ export declare const FieldSelectSingle: import("react").ForwardRefExoticComponen
     resetSearchOnOptionSelection?: boolean;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter;
-} & Pick<import("@snack-uikit/list").DroplistProps, "onScroll" | "scrollRef" | "scrollContainerRef" | "untouchableScrollbars" | "dataError" | "dataFiltered" | "scrollToSelectedItem" | "virtualized" | "noDataState" | "noResultsState" | "errorDataState"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<import("@snack-uikit/list").DroplistProps, "onScroll" | "scrollRef" | "scrollContainerRef" | "untouchableScrollbars" | "dataError" | "dataFiltered" | "scrollToSelectedItem" | "virtualized" | "noDataState" | "noResultsState" | "errorDataState"> & {
+    addCustomOptionTriggers?: import("./types").FieldSelectSingleAddCustomOptionTrigger[];
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cjs/components/FieldSelect/FieldSelectSingle.js

@@ -60,6 +60,7 @@ exports.FieldSelectSingle = (0, react_1.forwardRef)((props, ref) => {
       prefix,
       postfix,
       addOptionByEnter = false,
+      addCustomOptionTriggers: addCustomOptionTriggersProp,
       untouchableScrollbars = false,
       open: openProp,
       onOpenChange,
@@ -69,7 +70,7 @@ exports.FieldSelectSingle = (0, react_1.forwardRef)((props, ref) => {
       onCopyButtonClick,
       autoFocus
     } = props,
-    rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "required", "validationState", "search", "autocomplete", "prefixIcon", "prefix", "postfix", "addOptionByEnter", "untouchableScrollbars", "open", "onOpenChange", "selectedOptionFormatter", "enableFuzzySearch", "resetSearchOnOptionSelection", "onCopyButtonClick", "autoFocus"]);
+    rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "required", "validationState", "search", "autocomplete", "prefixIcon", "prefix", "postfix", "addOptionByEnter", "addCustomOptionTriggers", "untouchableScrollbars", "open", "onOpenChange", "selectedOptionFormatter", "enableFuzzySearch", "resetSearchOnOptionSelection", "onCopyButtonClick", "autoFocus"]);
   const localRef = (0, react_1.useRef)(null);
   const [open = false, setOpen] = (0, hooks_1.useValueControl)({
     value: openProp,
@@ -160,13 +161,6 @@ exports.FieldSelectSingle = (0, react_1.forwardRef)((props, ref) => {
     onCopyButtonClick,
     valueToCopy: selectedOptionFormatter(selectedItem)
   });
-  const handleBlur = e => {
-    var _a;
-    if (!open && !buttonsRefs.filter(Boolean).includes(e.relatedTarget)) {
-      updateInputValue(selectedItem);
-      (_a = rest === null || rest === void 0 ? void 0 : rest.onBlur) === null || _a === void 0 ? void 0 : _a.call(rest, e);
-    }
-  };
   const commonHandleOnKeyDown = (0, hooks_2.useHandleOnKeyDown)({
     inputKeyDownNavigationHandler,
     onInputKeyDownProp,
@@ -180,6 +174,27 @@ exports.FieldSelectSingle = (0, react_1.forwardRef)((props, ref) => {
       setValue(newValue);
     }
   }, [setOpen, setValue]);
+  const {
+    resolvedAddCustomOptionTriggers,
+    tryCommitCustomOptionFromInput
+  } = (0, hooks_2.useFieldSelectSingleCustomOption)({
+    addCustomOptionTriggers: addCustomOptionTriggersProp,
+    addOptionByEnter,
+    inputValue,
+    handleSelectionChange
+  });
+  const handleBlur = e => {
+    var _a;
+    if (!open && !buttonsRefs.filter(Boolean).includes(e.relatedTarget)) {
+      const commitOnBlur = (0, utils_3.shouldHandleCustomOptionTrigger)('blur', resolvedAddCustomOptionTriggers) && inputValue !== '';
+      if (commitOnBlur) {
+        tryCommitCustomOptionFromInput('blur');
+      } else {
+        updateInputValue(selectedItem);
+      }
+      (_a = rest === null || rest === void 0 ? void 0 : rest.onBlur) === null || _a === void 0 ? void 0 : _a.call(rest, e);
+    }
+  };
   const handleOnKeyDown = onKeyDown => e => {
     if (!open && prevInputValue.current !== inputValue) {
       setOpen(true);
@@ -187,16 +202,14 @@ exports.FieldSelectSingle = (0, react_1.forwardRef)((props, ref) => {
     if (e.code === 'Enter') {
       e.stopPropagation();
       e.preventDefault();
-    }
-    if (addOptionByEnter && e.code === 'Enter' && inputValue !== '') {
-      handleSelectionChange(inputValue);
+      tryCommitCustomOptionFromInput('enter');
     }
     commonHandleOnKeyDown(onKeyDown)(e);
   };
   const handleOpenChange = open => {
     if ((0, utils_1.isBrowser)() && !readonly && !disabled && !buttonsRefs.includes(document.activeElement)) {
       setOpen(open);
-      if (!open) {
+      if (!open && !(0, utils_3.shouldHandleCustomOptionTrigger)('blur', resolvedAddCustomOptionTriggers)) {
         updateInputValue(selectedItem);
       }
     }

package/dist/cjs/components/FieldSelect/{hooks.d.ts → hooks/common.d.ts}

@@ -1,7 +1,7 @@
 import { KeyboardEvent, KeyboardEventHandler, MouseEvent, RefObject } from 'react';
 import { Handler } from 'uncontrollable';
 import { ItemProps } from '@snack-uikit/list';
-import { ItemWithId, SearchState, SelectedOptionFormatter } from './types';
+import { ItemWithId, SearchState, SelectedOptionFormatter } from '../types';
 type UseHandleOnKeyDownProps = {
     inputKeyDownNavigationHandler: KeyboardEventHandler<HTMLInputElement>;
     onInputKeyDownProp: KeyboardEventHandler<HTMLInputElement> | undefined;

package/dist/cjs/components/FieldSelect/{hooks.js → hooks/common.js}

@@ -17,10 +17,9 @@ const fuzzy_search_1 = __importDefault(require("fuzzy-search"));
 const react_1 = require("react");
 const input_private_1 = require("@snack-uikit/input-private");
 const list_1 = require("@snack-uikit/list");
-const hooks_1 = require("../../hooks");
-const legacy_1 = require("./legacy");
-const utils_1 = require("./utils");
-const filterItemsByFlattenIds_1 = require("./utils/filterItemsByFlattenIds");
+const hooks_1 = require("../../../hooks");
+const legacy_1 = require("../legacy");
+const utils_1 = require("../utils");
 function useHandleOnKeyDown(_ref) {
   let {
     setOpen,
@@ -173,7 +172,7 @@ function useSearch(items) {
   }, [enableFuzzySearch, flattenItems]);
   const filterFunction = (0, react_1.useCallback)(search => {
     const filteredIds = filterFlattenFunction(search).map(item => item.id);
-    return (0, filterItemsByFlattenIds_1.filterItemsByFlattenIds)(items, filteredIds);
+    return (0, utils_1.filterItemsByFlattenIds)(items, filteredIds);
   }, [filterFlattenFunction, items]);
   return (0, react_1.useCallback)(search => search.length >= DEFAULT_MIN_SEARCH_INPUT_LENGTH ? filterFunction(search) : items, [filterFunction, items]);
 }

package/dist/cjs/components/FieldSelect/hooks/customOption.d.ts

@@ -0,0 +1,26 @@
+import { Handler } from 'uncontrollable';
+import { SelectionSingleValueType } from '@snack-uikit/list';
+import { FieldSelectMultipleAddCustomOptionTrigger } from '../types';
+type UseResolvedAddCustomOptionTriggersParams = {
+    addCustomOptionTriggers?: FieldSelectMultipleAddCustomOptionTrigger[];
+    addOptionByEnter: boolean;
+};
+type UseFieldSelectMultipleCustomOptionParams = UseResolvedAddCustomOptionTriggersParams & {
+    inputValue: string;
+    value: SelectionSingleValueType[] | undefined;
+    setValue: Handler;
+    updateInputValue: () => void;
+};
+export declare function useFieldSelectMultipleCustomOption({ addCustomOptionTriggers, addOptionByEnter, inputValue, value, setValue, updateInputValue, }: UseFieldSelectMultipleCustomOptionParams): {
+    resolvedAddCustomOptionTriggers: FieldSelectMultipleAddCustomOptionTrigger[];
+    tryCommitCustomOptionFromInput: (trigger: FieldSelectMultipleAddCustomOptionTrigger) => void;
+};
+type UseFieldSelectSingleCustomOptionParams = UseResolvedAddCustomOptionTriggersParams & {
+    inputValue: string;
+    handleSelectionChange: (value: SelectionSingleValueType) => void;
+};
+export declare function useFieldSelectSingleCustomOption({ addCustomOptionTriggers, addOptionByEnter, inputValue, handleSelectionChange, }: UseFieldSelectSingleCustomOptionParams): {
+    resolvedAddCustomOptionTriggers: FieldSelectMultipleAddCustomOptionTrigger[];
+    tryCommitCustomOptionFromInput: (trigger: FieldSelectMultipleAddCustomOptionTrigger) => void;
+};
+export {};