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

package/README.md

@@ -128,6 +128,50 @@ 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
@@ -555,6 +599,70 @@ 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 |
@@ -566,17 +674,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` | - | Всплывающая подсказка лейбла |
@@ -657,15 +765,15 @@ FieldStepper в основном предназначен для работы с
 | allowMoreThanMaxLength | `boolean` | - | Можно ли вводить больше разрешённого кол-ва символов |
 | prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
 | asyncValueGetter | `() => Promise<string>` | - | Свойство позволяет грузить данные в поле по требованию |
-| onChange | `(value: string, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
 | value | `string` | - | Значение input |
+| onChange | `(value: string, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
 | 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 | Включен ли автокомплит для поля |
@@ -689,13 +797,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>` | - | Колбек обработки потери фокуса |
-| placeholder | `string` | - | Значение плейсхолдера |
-| autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
 | onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки начала нажатия клавиши клавиатуры |
+| autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
 | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
@@ -707,12 +815,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` | - | Произвольный постфикс для поля |
-| onChange | `OnChangeHandler<any>` | - | Controlled обработчик измения состояния |
-| value | `ItemId \| ItemId[]` | - | Controlled состояние |
 | defaultValue | `ItemId \| ItemId[]` | - | Начальное состояние |
+| value | `ItemId \| ItemId[]` | - | Controlled состояние |
+| onChange | `OnChangeHandler<any>` | - | Controlled обработчик измения состояния |
 | pinTop | `OptionProps[]` | - |  |
 | pinBottom | `OptionProps[]` | - |  |
 | searchable | `boolean` | - |  |
@@ -732,8 +840,8 @@ FieldStepper в основном предназначен для работы с
 | selectedOptionFormatter | `SelectedOptionFormatter` | - |  |
 | scrollToSelectedItem | `boolean` | - | Флаг, отвещающий за прокручивание до выбранного элемента |
 | virtualized | `boolean` | - | Включить виртуализацию на компоненты списка. Рекомендуется если у вас от 1к элементов списка |
-| scrollRef | `Ref<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
-| scrollContainerRef | `Ref<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
+| scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
+| scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | untouchableScrollbars | `boolean` | - | Отключает возможность взаимодействовать со скролбарами мышью. |
 | onScroll | `(event?: Event) => void` | - | Колбек на скролл прокручиваемого списка |
 | dataFiltered | `boolean` | - |  |
@@ -762,8 +870,8 @@ FieldStepper в основном предназначен для работы с
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
 | autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
-| onChange | `(value: number \| number[]) => void` | - |  |
 | value | `number \| number[]` | - |  |
+| onChange | `(value: number \| number[]) => void` | - |  |
 | range | `boolean` | - |  |
 | tipFormatter | `(value: string \| number) => ReactNode` | - |  |
 | step | `number` | - |  |
@@ -829,22 +937,22 @@ FieldStepper в основном предназначен для работы с
 | postfix | `ReactNode` | - | Произвольный постфикс для поля |
 | button | `Button` | - | Кнопка действия внутри поля |
 | type | "text" \| "tel" \| "email" | text |  |
-| onChange | `(value: string, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
 | value | `string` | - | Значение input |
-| inputMode | enum InputMode: `"none"`, `"text"`, `"search"`, `"tel"`, `"email"`, `"decimal"`, `"numeric"`, `"url"` | - | Режим работы экранной клавиатуры |
+| onChange | `(value: string, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
+| inputMode | enum InputMode: `"search"`, `"none"`, `"text"`, `"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>` | - | Колбек обработки потери фокуса |
-| placeholder | `string` | - | Значение плейсхолдера |
+| onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки начала нажатия клавиши клавиатуры |
 | 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` | - | Лейбл |
@@ -875,16 +983,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>` | - | Колбек потери фокуса |
-| placeholder | `string` | - | Плейсхолдер |
+| onKeyDown | `KeyboardEventHandler<HTMLTextAreaElement>` | - | Колбек нажатия клавиши клавиатуры |
 | autoFocus | `boolean` | - | Включен ли авто-фокус |
 | maxLength | `number` | - | Максимальное кол-во символов |
-| inputMode | enum InputMode: `"none"`, `"text"`, `"search"`, `"tel"`, `"email"`, `"decimal"`, `"numeric"`, `"url"` | - | Режим работы экранной клавиатуры |
+| inputMode | enum InputMode: `"search"`, `"none"`, `"text"`, `"tel"`, `"email"`, `"decimal"`, `"numeric"`, `"url"` | - | Режим работы экранной клавиатуры |
 | spellCheck | `boolean` | true | Включение проверки орфографии |
-| onKeyDown | `KeyboardEventHandler<HTMLTextAreaElement>` | - | Колбек нажатия клавиши клавиатуры |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
 | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
@@ -910,7 +1018,6 @@ FieldStepper в основном предназначен для работы с
 | onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
 | showSeconds | `boolean` | true | Показывать ли секунды |
 | showClearButton | `boolean` | true | Отображение кнопки Очистки поля |
-| footerMode | enum TimePickerFooterMode: `"current-and-apply"`, `"apply-only"` | current-and-apply | Режим футера: кнопка «Текущее время» и компактная «Применить», либо одна широкая «Применить» с подписью. |
 | id | `string` | - | Значение html-атрибута id |
 | name | `string` | - | Значение html-атрибута name |
 | disabled | `boolean` | - | Является ли поле деактивированным |
@@ -935,8 +1042,8 @@ FieldStepper в основном предназначен для работы с
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| __@metadata@2033* | `DecoratorMetadataObject` | - |  |
-| __@hasInstance@2031* | `(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@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. |
 | 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/FieldAdd/FieldAdd.d.ts

@@ -0,0 +1,52 @@
+import { ButtonOutlineProps } from '@snack-uikit/button';
+import { TooltipProps } from '@snack-uikit/tooltip';
+import { FieldSelectSingleProps } from '../FieldSelect';
+export type FieldAddButtonProps = Omit<ButtonOutlineProps, 'appearance' | 'icon' | 'size' | 'label'> & {
+    /** Текст действия для кнопки добавления; используется как fallback для `tooltip.tip` и `aria-label` */
+    label?: string;
+    /** Тултип кнопки добавления */
+    tooltip?: Omit<TooltipProps, 'children'>;
+};
+export type FieldAddProps = FieldSelectSingleProps & {
+    /** Настройки кнопки добавления справа от поля */
+    addButton?: FieldAddButtonProps;
+    /** Тултип над контролом выбора значения */
+    controlTooltip?: Omit<TooltipProps, 'children'>;
+    /** Показывать ли кнопку добавления; в `readonly` режиме кнопка скрывается независимо от значения пропса */
+    showAddButton?: boolean;
+};
+export declare const FieldAdd: import("react").ForwardRefExoticComponent<import("../FieldSelect/types").InputProps & import("../FieldSelect/types").WrapperProps & {
+    options: import("../FieldSelect").OptionProps[];
+    loading?: boolean;
+    prefix?: import("react").ReactNode;
+    postfix?: import("react").ReactNode;
+} & Omit<import("@snack-uikit/list").SelectionSingleState, "mode"> & {
+    'data-test-id'?: string;
+} & import("react").AriaAttributes & {
+    options: import("../FieldSelect").OptionProps[];
+    pinTop?: import("../FieldSelect").OptionProps[];
+    pinBottom?: import("../FieldSelect").OptionProps[];
+    searchable?: boolean;
+    showCopyButton?: boolean;
+    onCopyButtonClick?(): void;
+    showClearButton?: boolean;
+    readonly?: boolean;
+    prefixIcon?: import("react").ReactElement;
+    footer?: import("@snack-uikit/list").DroplistProps["footer"];
+    widthStrategy?: import("@snack-uikit/list").DroplistProps["widthStrategy"];
+    search?: import("../FieldSelect/types").SearchState;
+    autocomplete?: boolean;
+    addOptionByEnter?: boolean;
+    open?: boolean;
+    enableFuzzySearch?: boolean;
+    resetSearchOnOptionSelection?: boolean;
+    onOpenChange?(open: boolean): void;
+    selectedOptionFormatter?: import("../FieldSelect").SelectedOptionFormatter;
+} & Pick<import("@snack-uikit/list").DroplistProps, "onScroll" | "scrollRef" | "scrollContainerRef" | "untouchableScrollbars" | "dataError" | "dataFiltered" | "scrollToSelectedItem" | "virtualized" | "noDataState" | "noResultsState" | "errorDataState"> & {
+    /** Настройки кнопки добавления справа от поля */
+    addButton?: FieldAddButtonProps;
+    /** Тултип над контролом выбора значения */
+    controlTooltip?: Omit<TooltipProps, "children">;
+    /** Показывать ли кнопку добавления; в `readonly` режиме кнопка скрывается независимо от значения пропса */
+    showAddButton?: boolean;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/cjs/components/FieldAdd/FieldAdd.js

@@ -0,0 +1,216 @@
+"use strict";
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldAdd = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const button_1 = require("@snack-uikit/button");
+const icons_1 = require("@snack-uikit/icons");
+const skeleton_1 = require("@snack-uikit/skeleton");
+const tooltip_1 = require("@snack-uikit/tooltip");
+const utils_1 = require("@snack-uikit/utils");
+const FieldDecorator_1 = require("../FieldDecorator");
+const FieldSelect_1 = require("../FieldSelect");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const DEFAULT_ADD_BUTTON_LABEL = 'Create';
+exports.FieldAdd = (0, react_1.forwardRef)((_a, ref) => {
+  var {
+      id,
+      name,
+      placeholder,
+      size = 's',
+      options,
+      value,
+      defaultValue,
+      onChange,
+      disabled = false,
+      readonly = false,
+      searchable = true,
+      showCopyButton = true,
+      showClearButton = true,
+      onKeyDown,
+      required = false,
+      validationState = 'default',
+      search,
+      autocomplete = false,
+      prefixIcon,
+      prefix,
+      postfix,
+      addOptionByEnter = false,
+      untouchableScrollbars = false,
+      open,
+      onOpenChange,
+      selectedOptionFormatter,
+      enableFuzzySearch = true,
+      resetSearchOnOptionSelection = true,
+      onCopyButtonClick,
+      autoFocus,
+      onFocus,
+      onBlur,
+      pinTop,
+      pinBottom,
+      footer,
+      widthStrategy,
+      dataError,
+      noDataState,
+      noResultsState,
+      errorDataState,
+      dataFiltered,
+      loading = false,
+      scrollToSelectedItem,
+      virtualized,
+      scrollRef,
+      scrollContainerRef,
+      onScroll,
+      className,
+      label,
+      labelTooltip,
+      caption,
+      hint,
+      showHintIcon,
+      labelTooltipPlacement,
+      error,
+      addButton,
+      controlTooltip,
+      showAddButton = !readonly
+    } = _a,
+    rest = __rest(_a, ["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", "onFocus", "onBlur", "pinTop", "pinBottom", "footer", "widthStrategy", "dataError", "noDataState", "noResultsState", "errorDataState", "dataFiltered", "loading", "scrollToSelectedItem", "virtualized", "scrollRef", "scrollContainerRef", "onScroll", "className", "label", "labelTooltip", "caption", "hint", "showHintIcon", "labelTooltipPlacement", "error", "addButton", "controlTooltip", "showAddButton"]);
+  const _b = addButton !== null && addButton !== void 0 ? addButton : {},
+    {
+      label: addButtonLabel = DEFAULT_ADD_BUTTON_LABEL,
+      tooltip: addButtonTooltipProp,
+      className: addButtonClassName,
+      disabled: addButtonDisabled = false,
+      'aria-label': addButtonAriaLabel,
+      'data-test-id': addButtonTestId
+    } = _b,
+    addButtonProps = __rest(_b, ["label", "tooltip", "className", "disabled", 'aria-label', 'data-test-id']);
+  const shouldShowAddButton = showAddButton && !readonly;
+  const isAddButtonDisabled = disabled || loading || addButtonDisabled;
+  const addButtonTooltip = addButtonTooltipProp !== null && addButtonTooltipProp !== void 0 ? addButtonTooltipProp : !isAddButtonDisabled ? {
+    tip: addButtonLabel
+  } : undefined;
+  return (0, jsx_runtime_1.jsx)(FieldDecorator_1.FieldDecorator, Object.assign({
+    className: className,
+    label: label,
+    labelTooltip: labelTooltip,
+    labelTooltipPlacement: labelTooltipPlacement,
+    labelFor: id,
+    required: required,
+    caption: caption,
+    hint: hint,
+    disabled: disabled,
+    readonly: readonly,
+    showHintIcon: showHintIcon,
+    size: size,
+    validationState: validationState,
+    error: error
+  }, (0, utils_1.extractSupportProps)(rest), {
+    children: (0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.layout,
+      "data-size": size,
+      children: [(0, jsx_runtime_1.jsx)(tooltip_1.WithTooltip, {
+        tooltip: controlTooltip,
+        children: (0, jsx_runtime_1.jsx)("div", {
+          className: styles_module_scss_1.default.selectTooltipTrigger,
+          "data-test-id": 'field-add__control',
+          children: (0, jsx_runtime_1.jsxs)("div", {
+            className: styles_module_scss_1.default.selectWrapper,
+            children: [(0, jsx_runtime_1.jsx)(FieldSelect_1.FieldSelect, {
+              id: id,
+              name: name,
+              placeholder: loading ? '' : placeholder,
+              size: size,
+              options: options,
+              value: value,
+              defaultValue: defaultValue,
+              onChange: onChange,
+              disabled: disabled || loading,
+              readonly: readonly,
+              searchable: loading || readonly ? false : searchable,
+              showCopyButton: showCopyButton && !loading,
+              showClearButton: showClearButton && !loading,
+              onKeyDown: onKeyDown,
+              required: required,
+              validationState: validationState,
+              search: search,
+              autocomplete: autocomplete,
+              prefixIcon: prefixIcon,
+              prefix: prefix,
+              postfix: postfix,
+              addOptionByEnter: addOptionByEnter,
+              untouchableScrollbars: untouchableScrollbars,
+              open: loading ? false : open,
+              onOpenChange: onOpenChange,
+              selectedOptionFormatter: selectedOptionFormatter,
+              enableFuzzySearch: enableFuzzySearch,
+              resetSearchOnOptionSelection: resetSearchOnOptionSelection,
+              onCopyButtonClick: onCopyButtonClick,
+              autoFocus: autoFocus,
+              onFocus: onFocus,
+              onBlur: onBlur,
+              pinTop: pinTop,
+              pinBottom: pinBottom,
+              footer: footer,
+              widthStrategy: widthStrategy,
+              dataError: dataError,
+              noDataState: noDataState,
+              noResultsState: noResultsState,
+              errorDataState: errorDataState,
+              dataFiltered: dataFiltered,
+              loading: loading,
+              scrollToSelectedItem: scrollToSelectedItem,
+              virtualized: virtualized,
+              scrollRef: scrollRef,
+              scrollContainerRef: scrollContainerRef,
+              onScroll: onScroll,
+              className: styles_module_scss_1.default.fieldSelect,
+              selection: 'single',
+              ref: ref
+            }), loading && (0, jsx_runtime_1.jsx)("div", {
+              className: styles_module_scss_1.default.loadingOverlay,
+              "data-test-id": 'field-add__loading',
+              children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, {
+                className: styles_module_scss_1.default.loadingSkeleton,
+                width: '100%',
+                height: '100%',
+                borderRadius: 2,
+                loading: true
+              })
+            })]
+          })
+        })
+      }), shouldShowAddButton && (0, jsx_runtime_1.jsx)(tooltip_1.WithTooltip, {
+        tooltip: addButtonTooltip,
+        children: (0, jsx_runtime_1.jsx)("span", {
+          className: styles_module_scss_1.default.buttonTooltipTrigger,
+          children: (0, jsx_runtime_1.jsx)(button_1.ButtonOutline, Object.assign({}, addButtonProps, {
+            appearance: 'neutral',
+            size: size,
+            icon: (0, jsx_runtime_1.jsx)(icons_1.PlusSVG, {}),
+            className: (0, classnames_1.default)(styles_module_scss_1.default.addButton, addButtonClassName),
+            disabled: isAddButtonDisabled,
+            "aria-label": addButtonAriaLabel || addButtonLabel,
+            "data-test-id": addButtonTestId || 'field-add__button'
+          }))
+        })
+      })]
+    })
+  }));
+});

package/dist/cjs/components/FieldAdd/index.d.ts

@@ -0,0 +1,2 @@
+export { FieldAdd } from './FieldAdd';
+export type { FieldAddButtonProps, FieldAddProps } from './FieldAdd';

package/dist/cjs/components/FieldAdd/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FieldAdd = void 0;
+var FieldAdd_1 = require("./FieldAdd");
+Object.defineProperty(exports, "FieldAdd", {
+  enumerable: true,
+  get: function () {
+    return FieldAdd_1.FieldAdd;
+  }
+});

package/dist/cjs/components/FieldAdd/styles.module.css

@@ -0,0 +1,51 @@
+.layout{
+  display:flex;
+  gap:var(--dimension-050m, 4px);
+  align-items:flex-start;
+  width:100%;
+}
+
+.selectTooltipTrigger,
+.selectWrapper,
+.fieldSelect{
+  width:100%;
+}
+
+.selectTooltipTrigger{
+  min-width:0;
+}
+
+.selectWrapper{
+  position:relative;
+}
+
+.loadingOverlay{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  display:flex;
+  align-items:center;
+  width:100%;
+}
+
+.loadingSkeleton{
+  margin-right:36px;
+  margin-left:16px;
+}
+
+.buttonTooltipTrigger{
+  display:inline-flex;
+  flex-shrink:0;
+}
+
+.addButton{
+  flex-shrink:0;
+}
+
+.layout[data-size=m] .loadingSkeleton{
+  margin-right:40px;
+}
+
+.layout[data-size=l] .loadingSkeleton{
+  margin-right:44px;
+}

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" | "readonly" | "placeholder" | "autoFocus" | "autoComplete" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
+} & 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>>;
 export {};

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

@@ -33,6 +33,7 @@ export type SearchState = {
 };
 export type FieldSelectPrivateProps = InputProps & WrapperProps & {
     options: OptionProps[];
+    /** Отображать ли состояние загрузки данных в поле и списке */
     loading?: boolean;
     /** Произвольный префикс для поля */
     prefix?: ReactNode;

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

@@ -32,5 +32,5 @@ type FieldTextOwnProps = {
 export type FieldTextProps = WithSupportProps<FieldTextOwnProps & InputProps & WrapperProps>;
 export declare const FieldText: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string;
-} & import("react").AriaAttributes & FieldTextOwnProps & Pick<Partial<InputPrivateProps>, "onChange" | "value"> & Pick<Required<InputPrivateProps>, "inputMode"> & Pick<InputPrivateProps, "id" | "name" | "onPaste" | "onFocus" | "onBlur" | "onKeyDown" | "disabled" | "readonly" | "placeholder" | "autoFocus" | "autoComplete" | "maxLength" | "spellCheck" | "pattern"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").AriaAttributes & FieldTextOwnProps & Pick<Partial<InputPrivateProps>, "onChange" | "value"> & Pick<Required<InputPrivateProps>, "inputMode"> & Pick<InputPrivateProps, "id" | "name" | "onPaste" | "onFocus" | "onBlur" | "onKeyDown" | "disabled" | "placeholder" | "readonly" | "autoFocus" | "autoComplete" | "maxLength" | "spellCheck" | "pattern"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};