@snack-uikit/fields 0.51.11 → 0.51.12-preview-97a466ef.0

package/README.md

@@ -213,371 +213,58 @@ FieldStepper в основном предназначен для работы с
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| open | `boolean` | - | Открыт color-picker |
-| onOpenChange | `(value: boolean) => void` | - | Колбек открытия пикера |
-| showCopyButton | `boolean` | - | Отображение кнопки копирования |
-| onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
-| showClearButton | `boolean` | true | Отображение кнопки Очистки поля |
-| value | `string` | - | Значение input |
-| onChange | `(value: string) => void` | - |  |
-| withAlpha | `boolean` | - | Значение с альфаканалом |
-| autoApply | `boolean` | - | Применять изменения автоматически, если значение false - то изменения происходят по кнопке |
-| className | `string` | - | Класснейм |
-| colorMode | `{ hex?: boolean; rgb?: boolean; hsv?: boolean; }` | - |  |
-| id | `string` | - | Значение html-атрибута id |
-| name | `string` | - | Значение html-атрибута name |
-| disabled | `boolean` | - | Является ли поле деактивированным |
-| readonly | `boolean` | - | Является ли поле доступным только для чтения |
-| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
-| onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
-| placeholder | `string` | - | Значение плейсхолдера |
-| autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
-| label | `string` | - | Лейбл |
-| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
-| required | `boolean` | - | Является ли поле обязательным |
-| caption | `string` | - | Подпись справа от лейбла |
-| hint | `string` | - | Подсказка внизу |
-| showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.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` | - |  |
 | 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` | - |  |
 ## FieldDate
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| mode* | "date" \| "date-time" | - |  |
-| open | `boolean` | - | Открыт date-picker |
-| onOpenChange | `(value: boolean) => void` | - | Колбек открытия пикера |
-| value | `Date` | - | Значение поля |
-| onChange | `(value: Date) => void` | - | Колбек смены значения |
-| showCopyButton | `boolean` | - | Отображение кнопки копирования |
-| onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
-| showClearButton | `boolean` | true | Отображение кнопки Очистки поля |
-| buildCellProps | `(date: Date, viewMode: ViewMode) => { isDisabled?: boolean; isHoliday?: boolean } ;` | - | Колбек установки свойств ячеек календаря. Вызывается на построение каждой ячейки. Принимает два параметра: <br> `Date` - дата ячейки <br> `ViewMode`: <br>  - `month` отображение месяца, каждая ячейка - 1 день <br>  - `year` отображение года, каждая ячейка - 1 месяц <br>  - `decade` отображение декады, каждая ячейка - 1 год <br><br> Колбек должен возвращать объект с полями, отвечающими за отключение и подкраску ячейки. |
-| id | `string` | - | Значение html-атрибута id |
-| name | `string` | - | Значение html-атрибута name |
-| disabled | `boolean` | - | Является ли поле деактивированным |
-| readonly | `boolean` | - | Является ли поле доступным только для чтения |
-| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
-| onBlur | `FocusEventHandler<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"` | SIZE.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` | - |  |
 | 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` | - |  |
-| showSeconds | `boolean` | - |  |
 ## FieldDecorator
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| children* | `ReactNode` | - | Контент |
-| className | `string` | - | CSS-класс |
-| disabled | `boolean` | - | Деактивирован ли элемент Является ли поле деактивированным |
-| readonly | `boolean` | - | Является ли поле доступным только на чтение Доступно ли поле только на чтение |
-| error | `string` | - |  |
-| label | `string` | - | Лейбл |
-| caption | `string` | - | Подпись справа от лейбла |
-| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
-| labelFor | `string` | - | Аттрибут for |
-| required | `boolean` | - | Является ли поле обязательным |
-| size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
-| labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
-| length | `{ current: number; max?: number; }` | - | Допустимая длинна текста |
-| hint | `string` | - | Подсказка внизу |
-| validationState | enum ValidationState: `"error"`, `"default"`, `"warning"`, `"success"` | default | Состояние валидации |
-| showHintIcon | `boolean` | - | Отображать иконку подсказки |
 | ref | `LegacyRef<HTMLDivElement>` | - | 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` | - |  |
 ## FieldSecure
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| hidden | `boolean` | - | Замаскированно ли значение поля |
-| onHiddenChange | `(value: boolean) => void` | - | Колбек смены маскирования |
-| showCopyButton | `boolean` | - | Отображение кнопки копирования |
-| onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
-| allowMoreThanMaxLength | `boolean` | - | Можно ли вводить больше разрешённого кол-ва символов |
-| prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
-| asyncValueGetter | `() => Promise<string>` | - | Свойство позволяет грузить данные в поле по требованию |
-| onChange | `(value: string, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
-| value | `string` | - | Значение input |
-| id | `string` | - | Значение html-атрибута id |
-| name | `string` | - | Значение html-атрибута name |
-| disabled | `boolean` | - | Является ли поле деактивированным |
-| readonly | `boolean` | - | Является ли поле доступным только для чтения |
-| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
-| onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
-| placeholder | `string` | - | Значение плейсхолдера |
-| autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
-| maxLength | `number` | - | Максимальная длина вводимого значения |
-| autoComplete | `string \| boolean` | false | Включен ли автокомплит для поля |
-| className | `string` | - | CSS-класс |
-| label | `string` | - | Лейбл |
-| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
-| required | `boolean` | - | Является ли поле обязательным |
-| caption | `string` | - | Подпись справа от лейбла |
-| hint | `string` | - | Подсказка внизу |
-| showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.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` | - |  |
 | 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` | - |  |
 ## FieldSelect
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| options* | `OptionProps[]` | - |  |
-| id | `string` | - | Значение html-атрибута id |
-| name | `string` | - | Значение html-атрибута name |
-| disabled | `boolean` | false | Является ли поле деактивированным |
-| readonly | `boolean` | false false | Является ли поле доступным только для чтения |
-| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
-| onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
-| placeholder | `string` | - | Значение плейсхолдера |
-| autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
-| onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки начала нажатия клавиши клавиатуры |
-| className | `string` | - | CSS-класс |
-| label | `string` | - | Лейбл |
-| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
-| required | `boolean` | - | Является ли поле обязательным |
-| caption | `string` | - | Подпись справа от лейбла |
-| hint | `string` | - | Подсказка внизу |
-| showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| size | enum Size: `"s"`, `"m"`, `"l"` | - | Размер |
-| 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` | - |  |
-| prefix | `ReactNode` | - | Произвольный префикс для поля |
-| postfix | `ReactNode` | - | Произвольный постфикс для поля |
-| onChange | `OnChangeHandler<any>` | - | Controlled обработчик измения состояния |
-| value | `ItemId \| ItemId[]` | - | Controlled состояние |
-| defaultValue | `ItemId \| ItemId[]` | - | Начальное состояние |
-| pinTop | `OptionProps[]` | - |  |
-| pinBottom | `OptionProps[]` | - |  |
-| searchable | `boolean` | - |  |
-| showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `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` | - | Включить нечеткий поиск |
-| resetSearchOnOptionSelection | `boolean` | true | Поведение строки поиска при выборе опции из списка, false необходимо при асинхронной подгрузке значений с бэка, в случае если надо поиск оставить как значение при отсутствии данных |
-| onOpenChange | `(open: boolean) => void` | - |  |
-| selectedOptionFormatter | `SelectedOptionFormatter` | - |  |
-| scrollToSelectedItem | `boolean` | - | Флаг, отвещающий за прокручивание до выбранного элемента |
-| virtualized | `boolean` | - | Включить виртуализацию на компоненты списка. Рекомендуется если у вас от 1к элементов списка |
-| untouchableScrollbars | `boolean` | - | Отключает возможность взаимодействовать со скролбарами мышью. |
-| dataFiltered | `boolean` | - |  |
-| dataError | `boolean` | - |  |
-| noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
-| noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
-| errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
-| 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` | - |  |
 ## FieldSlider
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| postfixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-постфикс для поля |
-| showScaleBar | `boolean` | true | Отображение линейки |
-| textInputFormatter | `TextInputFormatter` | - | Функция для форматирования значений в текстовом поле |
-| unbindInputFromMarks | `boolean` | - | Отвязать текстовое поле от значений на линейке |
-| prefix | `ReactNode` | - | Произвольный префикс для поля |
-| postfix | `ReactNode` | - | Произвольный постфикс для поля |
-| id | `string` | - | Значение html-атрибута id |
-| name | `string` | - | Значение html-атрибута name |
-| disabled | `boolean` | - | Является ли поле деактивированным |
-| readonly | `boolean` | - | Является ли поле доступным только для чтения |
-| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
-| onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
-| autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
-| onChange | `(value: number \| number[]) => void` | - |  |
-| value | `number \| number[]` | - |  |
-| range | `boolean` | - |  |
-| tipFormatter | `(value: string \| number) => ReactNode` | - |  |
-| step | `number` | - |  |
-| min | `number` | - |  |
-| max | `number` | - |  |
-| marks | `Record<string \| number, ReactNode \| MarkObj>` | - |  |
-| className | `string` | - | CSS-класс |
-| label | `string` | - | Лейбл |
-| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
-| required | `boolean` | - | Является ли поле обязательным |
-| caption | `string` | - | Подпись справа от лейбла |
-| hint | `string` | - | Подсказка внизу |
-| showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
-| labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
 | 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` | - |  |
 ## FieldStepper
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| value | `number` | - | Значение поля |
-| onChange | `(value: number, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
-| step | `number` | 1 | Шаг поля |
-| allowMoreThanLimits | `boolean` | true | Можно ли вводить c клавиатуры числа, выходящие за пределы min/max |
-| prefix | `ReactNode` | - | Произвольный префикс для поля |
-| postfix | `ReactNode` | - | Произвольный постфикс для поля |
-| plusButtonTooltip | `TooltipProps` | - | Тултип над кнопкой увеличения значения |
-| minusButtonTooltip | `TooltipProps` | - | Тултип над кнопкой уменьшения значения |
-| id | `string` | - | Значение html-атрибута id |
-| name | `string` | - | Значение html-атрибута name |
-| disabled | `boolean` | - | Является ли поле деактивированным |
-| readonly | `boolean` | - | Является ли поле доступным только для чтения |
-| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
-| onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
-| autoFocus | `boolean` | false | Включен ли авто-фокус для поля |
-| min | `number` | Number.NEGATIVE_INFINITY | Минимальное значение поля |
-| max | `number` | Number.POSITIVE_INFINITY | Максимальное значение поля |
-| className | `string` | - | CSS-класс |
-| label | `string` | - | Лейбл |
-| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
-| required | `boolean` | - | Является ли поле обязательным |
-| caption | `string` | - | Подпись справа от лейбла |
-| hint | `string` | - | Подсказка внизу |
-| showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.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` | - |  |
 | 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` | - |  |
 ## FieldText
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
-| onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
-| showClearButton | `boolean` | true | Отображение кнопки очистки поля |
-| allowMoreThanMaxLength | `boolean` | - | Можно ли вводить больше разрешённого кол-ва символов |
-| prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
-| prefix | `ReactNode` | - | Произвольный префикс для поля |
-| 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"` | - | Режим работы экранной клавиатуры |
-| id | `string` | - | Значение html-атрибута id |
-| name | `string` | - | Значение html-атрибута name |
-| disabled | `boolean` | - | Является ли поле деактивированным |
-| readonly | `boolean` | - | Является ли поле доступным только для чтения |
-| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
-| onBlur | `FocusEventHandler<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` | - | Лейбл |
-| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
-| required | `boolean` | - | Является ли поле обязательным |
-| caption | `string` | - | Подпись справа от лейбла |
-| hint | `string` | - | Подсказка внизу |
-| showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.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` | - |  |
 | 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` | - |  |
 ## FieldTextArea
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| minRows | `number` | 3 | Минимальное кол-во строк, до которого размер поля может быть увеличен |
-| maxRows | `number` | 1000 | Максимальное кол-во строк, до которого размер поля может быть увеличен |
-| resizable | `boolean` | - | Может ли ли пользователь изменять размеры поля (если св-во не включено, поле автоматически меняет свой размер) |
-| onChange | `(value: string, e?: ChangeEvent<HTMLTextAreaElement>) => void` | - | Колбек смены значения |
-| showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
-| onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
-| showClearButton | `boolean` | true | Отображение кнопки очистки поля |
-| allowMoreThanMaxLength | `boolean` | true | Можно ли вводить больше разрешённого кол-ва символов |
-| footer | `ReactNode` | - | Нода под футер |
-| value | `string` | - | HTML-аттрибут value |
-| id | `string` | - | HTML-аттрибут id |
-| name | `string` | - | HTML-аттрибут name |
-| disabled | `boolean` | - | Является ли поле деактивированным |
-| readonly | `boolean` | - | Является ли поле доступным только на чтение |
-| onFocus | `FocusEventHandler<HTMLTextAreaElement>` | - | Колбек получения фокуса |
-| onBlur | `FocusEventHandler<HTMLTextAreaElement>` | - | Колбек потери фокуса |
-| placeholder | `string` | - | Плейсхолдер |
-| autoFocus | `boolean` | - | Включен ли авто-фокус |
-| maxLength | `number` | - | Максимальное кол-во символов |
-| inputMode | enum InputMode: `"none"`, `"text"`, `"search"`, `"tel"`, `"email"`, `"decimal"`, `"numeric"`, `"url"` | - | Режим работы экранной клавиатуры |
-| spellCheck | `boolean` | true | Включение проверки орфографии |
-| onKeyDown | `KeyboardEventHandler<HTMLTextAreaElement>` | - | Колбек нажатия клавиши клавиатуры |
-| className | `string` | - | CSS-класс |
-| label | `string` | - | Лейбл |
-| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
-| required | `boolean` | - | Является ли поле обязательным |
-| caption | `string` | - | Подпись справа от лейбла |
-| hint | `string` | - | Подсказка внизу |
-| showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.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` | - |  |
 | ref | `LegacyRef<HTMLTextAreaElement>` | - | 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` | - |  |
 ## FieldTime
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| open | `boolean` | - | Открыт time-picker |
-| onOpenChange | `(value: boolean) => void` | - | Колбек открытия пикера |
-| value | `TimeValue` | - | Значение поля |
-| onChange | `(value?: TimeValue) => void` | - | Колбек смены значения |
-| showCopyButton | `boolean` | - | Отображение кнопки копирования |
-| onCopyButtonClick | `() => void` | - | Колбек клика по кнопке Копировать для поля |
-| showSeconds | `boolean` | true | Показывать ли секунды |
-| showClearButton | `boolean` | true | Отображение кнопки Очистки поля |
-| id | `string` | - | Значение html-атрибута id |
-| name | `string` | - | Значение html-атрибута name |
-| disabled | `boolean` | - | Является ли поле деактивированным |
-| readonly | `boolean` | - | Является ли поле доступным только для чтения |
-| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
-| onBlur | `FocusEventHandler<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"` | SIZE.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` | - |  |
 | 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` | - |  |
 

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

@@ -15,6 +15,8 @@ type FieldTextOwnProps = {
      * @default true
      */
     showClearButton?: boolean;
+    /** Колбек клика по кнопке очистки поля */
+    onClearButtonClick?(): void;
     /** Можно ли вводить больше разрешённого кол-ва символов */
     allowMoreThanMaxLength?: boolean;
     /** Иконка-префикс для поля */

package/dist/cjs/components/FieldText/FieldText.js

@@ -44,6 +44,7 @@ exports.FieldText = (0, react_1.forwardRef)((_a, ref) => {
       onFocus,
       onBlur,
       onCopyButtonClick,
+      onClearButtonClick,
       className,
       label,
       labelTooltip,
@@ -67,7 +68,7 @@ exports.FieldText = (0, react_1.forwardRef)((_a, ref) => {
       inputMode,
       spellCheck
     } = _a,
-    rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "onChange", "onFocus", "onBlur", "onCopyButtonClick", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "autoComplete", "autoFocus", "prefixIcon", "prefix", "postfix", "button", "onPaste", "onKeyDown", "type", "inputMode", "spellCheck"]);
+    rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "onChange", "onFocus", "onBlur", "onCopyButtonClick", "onClearButtonClick", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "autoComplete", "autoFocus", "prefixIcon", "prefix", "postfix", "button", "onPaste", "onKeyDown", "type", "inputMode", "spellCheck"]);
   const [value = '', onChange] = (0, hooks_1.useValueControl)({
     value: valueProp,
     defaultValue: '',
@@ -98,18 +99,26 @@ exports.FieldText = (0, react_1.forwardRef)((_a, ref) => {
   const containerVariant = (0, helpers_1.getContainerVariant)({
     button
   });
-  const onClear = () => {
+  const [isFieldFocused, setIsFieldFocused] = (0, react_1.useState)(false);
+  const focusedRef = (0, react_1.useRef)(false);
+  const onClear = e => {
     var _a;
+    e.preventDefault();
     onChange('');
-    if (required) {
+    onClearButtonClick === null || onClearButtonClick === void 0 ? void 0 : onClearButtonClick();
+    if (focusedRef.current) {
       (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
   };
+  const handleClearClickDown = () => {
+    focusedRef.current = isFieldFocused;
+  };
   const clearButtonSettings = (0, input_private_1.useClearButton)({
     clearButtonRef,
     showClearButton,
-    size,
-    onClear
+    onClear,
+    onDown: handleClearClickDown,
+    size
   });
   const copyButtonSettings = (0, hooks_1.useCopyButton)({
     copyButtonRef,
@@ -164,6 +173,20 @@ exports.FieldText = (0, react_1.forwardRef)((_a, ref) => {
     onInputKeyDown(event);
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
   };
+  const handleBlur = event => {
+    const nextTarget = event.relatedTarget;
+    // если фокус ушёл на кнопку очистки — игнорируем «внешний» onBlur
+    if (nextTarget && nextTarget === clearButtonRef.current) {
+      setIsFieldFocused(false);
+      return;
+    }
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    setIsFieldFocused(false);
+  };
+  const handleFocus = event => {
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    setIsFieldFocused(true);
+  };
   return (0, jsx_runtime_1.jsx)(FieldDecorator_1.FieldDecorator, Object.assign({
     className: className,
     label: label,
@@ -199,8 +222,8 @@ exports.FieldText = (0, react_1.forwardRef)((_a, ref) => {
         "data-size": size,
         value: value,
         onChange: onChange,
-        onFocus: onFocus,
-        onBlur: onBlur,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
         tabIndex: inputTabIndex,
         onKeyDown: handleKeyDown,
         onPaste: onPaste,

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

@@ -15,6 +15,8 @@ type FieldTextOwnProps = {
      * @default true
      */
     showClearButton?: boolean;
+    /** Колбек клика по кнопке очистки поля */
+    onClearButtonClick?(): void;
     /** Можно ли вводить больше разрешённого кол-ва символов */
     allowMoreThanMaxLength?: boolean;
     /** Иконка-префикс для поля */

package/dist/esm/components/FieldText/FieldText.js

@@ -21,7 +21,7 @@ import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import { getContainerVariant } from './helpers';
 export const FieldText = forwardRef((_a, ref) => {
-    var { id, name, value: valueProp, placeholder, maxLength, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, allowMoreThanMaxLength = false, onChange: onChangeProp, onFocus, onBlur, onCopyButtonClick, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, error, autoComplete, autoFocus, prefixIcon, prefix, postfix, button: buttonProp, onPaste, onKeyDown, type = 'text', inputMode, spellCheck } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "onChange", "onFocus", "onBlur", "onCopyButtonClick", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "autoComplete", "autoFocus", "prefixIcon", "prefix", "postfix", "button", "onPaste", "onKeyDown", "type", "inputMode", "spellCheck"]);
+    var { id, name, value: valueProp, placeholder, maxLength, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, showClearButton: showClearButtonProp = true, allowMoreThanMaxLength = false, onChange: onChangeProp, onFocus, onBlur, onCopyButtonClick, onClearButtonClick, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, error, autoComplete, autoFocus, prefixIcon, prefix, postfix, button: buttonProp, onPaste, onKeyDown, type = 'text', inputMode, spellCheck } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "onChange", "onFocus", "onBlur", "onCopyButtonClick", "onClearButtonClick", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "autoComplete", "autoFocus", "prefixIcon", "prefix", "postfix", "button", "onPaste", "onKeyDown", "type", "inputMode", "spellCheck"]);
     const [value = '', onChange] = useValueControl({
         value: valueProp,
         defaultValue: '',
@@ -41,14 +41,27 @@ export const FieldText = forwardRef((_a, ref) => {
                     setTimeout(() => { var _a; return (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
                 } }) }) : undefined, [buttonProp]);
     const containerVariant = getContainerVariant({ button });
-    const onClear = () => {
+    const [isFieldFocused, setIsFieldFocused] = useState(false);
+    const focusedRef = useRef(false);
+    const onClear = e => {
         var _a;
+        e.preventDefault();
         onChange('');
-        if (required) {
+        onClearButtonClick === null || onClearButtonClick === void 0 ? void 0 : onClearButtonClick();
+        if (focusedRef.current) {
             (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     };
-    const clearButtonSettings = useClearButton({ clearButtonRef, showClearButton, size, onClear });
+    const handleClearClickDown = () => {
+        focusedRef.current = isFieldFocused;
+    };
+    const clearButtonSettings = useClearButton({
+        clearButtonRef,
+        showClearButton,
+        onClear,
+        onDown: handleClearClickDown,
+        size,
+    });
     const copyButtonSettings = useCopyButton({
         copyButtonRef,
         showCopyButton,
@@ -91,5 +104,19 @@ export const FieldText = forwardRef((_a, ref) => {
         onInputKeyDown(event);
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
     };
-    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: fieldValidationState, error: error }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: containerVariant, inputRef: localRef, prefix: prefixButtons, postfix: postfixButtons, disableFocus: isButtonFocused, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, tabIndex: inputTabIndex, onKeyDown: handleKeyDown, onPaste: onPaste, placeholder: placeholder, disabled: disabled, readonly: readonly, type: type, inputMode: inputMode, maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, autoComplete: autoComplete, autoFocus: autoFocus, spellCheck: spellCheck, "data-test-id": 'field-text__input' }) }) })));
+    const handleBlur = event => {
+        const nextTarget = event.relatedTarget;
+        // если фокус ушёл на кнопку очистки — игнорируем «внешний» onBlur
+        if (nextTarget && nextTarget === clearButtonRef.current) {
+            setIsFieldFocused(false);
+            return;
+        }
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+        setIsFieldFocused(false);
+    };
+    const handleFocus = event => {
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+        setIsFieldFocused(true);
+    };
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: fieldValidationState, error: error }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: containerVariant, inputRef: localRef, prefix: prefixButtons, postfix: postfixButtons, disableFocus: isButtonFocused, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value, onChange: onChange, onFocus: handleFocus, onBlur: handleBlur, tabIndex: inputTabIndex, onKeyDown: handleKeyDown, onPaste: onPaste, placeholder: placeholder, disabled: disabled, readonly: readonly, type: type, inputMode: inputMode, maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, autoComplete: autoComplete, autoFocus: autoFocus, spellCheck: spellCheck, "data-test-id": 'field-text__input' }) }) })));
 });

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.51.11",
+  "version": "0.51.12-preview-97a466ef.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,13 +37,13 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.19.16",
-    "@snack-uikit/calendar": "0.13.10",
-    "@snack-uikit/color-picker": "0.3.49",
+    "@snack-uikit/calendar": "0.13.11-preview-97a466ef.0",
+    "@snack-uikit/color-picker": "0.3.50-preview-97a466ef.0",
     "@snack-uikit/divider": "3.2.10",
     "@snack-uikit/dropdown": "0.5.3",
     "@snack-uikit/icons": "0.27.4",
-    "@snack-uikit/input-private": "4.8.4",
-    "@snack-uikit/list": "0.32.9",
+    "@snack-uikit/input-private": "4.8.5-preview-97a466ef.0",
+    "@snack-uikit/list": "0.32.10-preview-97a466ef.0",
     "@snack-uikit/scroll": "0.10.5",
     "@snack-uikit/skeleton": "0.6.9",
     "@snack-uikit/slider": "0.3.30",
@@ -66,5 +66,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "6b39e180766635f8190da903bf560d1fbcbfaf52"
+  "gitHead": "450dcb64cce754f9b3622e7b2bfaf109c00ccfad"
 }

package/src/components/FieldText/FieldText.tsx

@@ -1,7 +1,9 @@
 import mergeRefs from 'merge-refs';
 import {
+  FocusEventHandler,
   forwardRef,
   KeyboardEventHandler,
+  MouseEventHandler,
   ReactElement,
   ReactNode,
   useCallback,
@@ -66,6 +68,8 @@ type FieldTextOwnProps = {
    * @default true
    */
   showClearButton?: boolean;
+  /** Колбек клика по кнопке очистки поля */
+  onClearButtonClick?(): void;
   /** Можно ли вводить больше разрешённого кол-ва символов */
   allowMoreThanMaxLength?: boolean;
   /** Иконка-префикс для поля */
@@ -100,6 +104,7 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
       onFocus,
       onBlur,
       onCopyButtonClick,
+      onClearButtonClick,
       className,
       label,
       labelTooltip,
@@ -158,15 +163,31 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
 
     const containerVariant = getContainerVariant({ button });
 
-    const onClear = () => {
+    const [isFieldFocused, setIsFieldFocused] = useState(false);
+    const focusedRef = useRef(false);
+
+    const onClear: MouseEventHandler<HTMLButtonElement> = e => {
+      e.preventDefault();
       onChange('');
+      onClearButtonClick?.();
 
-      if (required) {
+      if (focusedRef.current) {
         localRef.current?.focus();
       }
     };
 
-    const clearButtonSettings = useClearButton({ clearButtonRef, showClearButton, size, onClear });
+    const handleClearClickDown = () => {
+      focusedRef.current = isFieldFocused;
+    };
+
+    const clearButtonSettings = useClearButton({
+      clearButtonRef,
+      showClearButton,
+      onClear,
+      onDown: handleClearClickDown,
+      size,
+    });
+
     const copyButtonSettings = useCopyButton({
       copyButtonRef,
       showCopyButton,
@@ -218,6 +239,24 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
       onKeyDown?.(event);
     };
 
+    const handleBlur: FocusEventHandler<HTMLInputElement> = event => {
+      const nextTarget = event.relatedTarget as HTMLElement | null;
+
+      // если фокус ушёл на кнопку очистки — игнорируем «внешний» onBlur
+      if (nextTarget && nextTarget === clearButtonRef.current) {
+        setIsFieldFocused(false);
+        return;
+      }
+
+      onBlur?.(event);
+      setIsFieldFocused(false);
+    };
+
+    const handleFocus: FocusEventHandler<HTMLInputElement> = event => {
+      onFocus?.(event);
+      setIsFieldFocused(true);
+    };
+
     return (
       <FieldDecorator
         className={className}
@@ -253,8 +292,8 @@ export const FieldText = forwardRef<HTMLInputElement, FieldTextProps>(
             data-size={size}
             value={value}
             onChange={onChange}
-            onFocus={onFocus}
-            onBlur={onBlur}
+            onFocus={handleFocus}
+            onBlur={handleBlur}
             tabIndex={inputTabIndex}
             onKeyDown={handleKeyDown}
             onPaste={onPaste}