@snack-uikit/fields 0.30.0 → 0.32.0

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.32.0 (2024-10-31)
+
+
+### Bug Fixes
+
+* **PDS-808:** FieldSelectSingle clear value on input change in searchable mode ([7470936](https://github.com/cloud-ru-tech/snack-uikit/commit/74709365c60535da9ed60c088c412d701af13084))
+
+
+### Features
+
+* **PDS-438:** add field-time ([a6fb31e](https://github.com/cloud-ru-tech/snack-uikit/commit/a6fb31e6f69c5a1ea57297be791542f5e4b1a106))
+
+
+### BREAKING CHANGES
+
+
+* **PDS-438:** add showSeconds prop, remove locale prop ([0235eb7](https://github.com/cloud-ru-tech/snack-uikit/commit/0235eb7a5a7f7d8ac5e4e7cb03fe6e2408682b54))
+* **PDS-438:** add time selection into field-date, change type of value to Date ([1fe99a6](https://github.com/cloud-ru-tech/snack-uikit/commit/1fe99a6cacaa6bf3a1f53ea95e69f95177d57473))
+
+
+
+
+# 0.31.0 (2024-10-28)
+
+
+### Features
+
+* **FF-5782:** sass use/forward approach ([3e53869](https://github.com/cloud-ru-tech/snack-uikit/commit/3e53869ace864a7718e434b7f410c15dbd911cd5))
+
+
+
+
+
 # 0.30.0 (2024-10-28)
 
 

package/README.md

@@ -161,6 +161,11 @@ const [isOpen, setIsOpen] = useState(false);
   enableFuzzySearch={true}
 />;
 ```
+## Особенности работы FieldSlider-a
+
+Для корректной работы компонента, свойство `marks` должно быть либо **константой**, либо **мемоизировано**, 
+т.к. это на этой свойство завязана логика обновления ui.
+
 ## Особенности работы FieldStepper-a
 
 FieldStepper в основном предназначен для работы с небольшими числами, 
@@ -186,94 +191,91 @@ FieldStepper в основном предназначен для работы с
 
 [//]: DOCUMENTATION_SECTION_START
 [//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
-## FieldDecorator
+## FieldColor
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| children* | `ReactNode` | - | Контент |
-| className | `string` | - | CSS-класс |
-| disabled | `boolean` | - | Деактивирован ли элемент Является ли поле деактивированным |
-| readonly | `boolean` | - | Является ли поле доступным только на чтение Доступно ли поле только на чтение |
-| error | `string` | - |  |
+| open | `boolean` | - | Открыт color-picker |
+| onOpenChange | `(value: boolean) => void` | - | Колбек открытия пикера |
+| showCopyButton | `boolean` | - | Отображение кнопки копирования |
+| 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` | - | Значение плейсхолдера |
 | 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; }` | - | Допустимая длинна текста |
+| caption | `string` | - | Подпись справа от лейбла |
 | hint | `string` | - | Подсказка внизу |
-| validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | default | Состояние валидации |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
-## FieldText
+| 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 |
 |------|------|---------------|-------------|
-| showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
-| showClearButton | `boolean` | true | Отображение кнопки очистки поля |
-| allowMoreThanMaxLength | `boolean` | - | Можно ли вводить больше разрешённого кол-ва символов |
-| prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
-| prefix | `ReactNode` | - | Произвольный префикс для поля |
-| postfix | `ReactNode` | - | Произвольный постфикс для поля |
-| button | `Button` | - | Кнопка действия внутри поля |
-| value | `string` | - | Значение input |
-| onChange | `(value: string, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
-| disabled | `boolean` | - | Является ли поле деактивированным |
-| readonly | `boolean` | - | Является ли поле доступным только для чтения |
+| mode* | "date" \| "date-time" | - |  |
+| open | `boolean` | - | Открыт date-picker |
+| onOpenChange | `(value: boolean) => void` | - | Колбек открытия пикера |
+| value | `Date` | - | Значение поля |
+| onChange | `(value: Date) => void` | - | Колбек смены значения |
+| showCopyButton | `boolean` | - | Отображение кнопки копирования |
+| 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 |
-| placeholder | `string` | - | Значение плейсхолдера |
-| maxLength | `number` | - | Максимальная длина вводимого значения |
+| disabled | `boolean` | - | Является ли поле деактивированным |
+| readonly | `boolean` | - | Является ли поле доступным только для чтения |
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
-| autoComplete | `string \| boolean` | false | Включен ли автокомплит для поля |
-| error | `string` | - |  |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
-| caption | `string` | - | Подпись справа от лейбла |
 | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
 | 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 | Расположение подсказки лейбла |
+| caption | `string` | - | Подпись справа от лейбла |
 | hint | `string` | - | Подсказка внизу |
-| validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | default | Состояние валидации |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| ref | `Ref<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 https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
+| 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
+| showSeconds | `boolean` | - |  |
+## FieldDecorator
 ### 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`) |
-| showClearButton | `boolean` | true | Отображение кнопки очистки поля |
-| allowMoreThanMaxLength | `boolean` | true | Можно ли вводить больше разрешённого кол-ва символов |
-| value | `string` | - | HTML-аттрибут value |
-| disabled | `boolean` | - | Является ли поле деактивированным |
-| readonly | `boolean` | - | Является ли поле доступным только на чтение |
-| id | `string` | - | HTML-аттрибут id |
-| name | `string` | - | HTML-аттрибут name |
-| placeholder | `string` | - | Плейсхолдер |
-| maxLength | `number` | - | Максимальное кол-во символов |
-| onFocus | `FocusEventHandler<HTMLTextAreaElement>` | - | Колбек получения фокуса |
-| onBlur | `FocusEventHandler<HTMLTextAreaElement>` | - | Колбек потери фокуса |
-| error | `string` | - |  |
+| 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: `"default"`, `"error"`, `"warning"`, `"success"` | default | Состояние валидации |
+| validationState | enum ValidationState: `"error"`, `"default"`, `"warning"`, `"success"` | default | Состояние валидации |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| ref | `Ref<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 https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
-| key | `Key` | - |  |
 ## FieldSecure
 ### Props
 | name | type | default value | description |
@@ -284,99 +286,64 @@ FieldStepper в основном предназначен для работы с
 | allowMoreThanMaxLength | `boolean` | - | Можно ли вводить больше разрешённого кол-ва символов |
 | prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
 | asyncValueGetter | `() => Promise<string>` | - | Свойство позволяет грузить данные в поле по требованию |
-| value | `string` | - | Значение input |
 | onChange | `(value: string, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
-| disabled | `boolean` | - | Является ли поле деактивированным |
-| readonly | `boolean` | - | Является ли поле доступным только для чтения |
+| value | `string` | - | Значение input |
 | id | `string` | - | Значение html-атрибута id |
 | name | `string` | - | Значение html-атрибута name |
-| placeholder | `string` | - | Значение плейсхолдера |
-| maxLength | `number` | - | Максимальная длина вводимого значения |
+| disabled | `boolean` | - | Является ли поле деактивированным |
+| readonly | `boolean` | - | Является ли поле доступным только для чтения |
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
+| placeholder | `string` | - | Значение плейсхолдера |
+| maxLength | `number` | - | Максимальная длина вводимого значения |
 | autoComplete | `string \| boolean` | false | Включен ли автокомплит для поля |
-| error | `string` | - |  |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
-| caption | `string` | - | Подпись справа от лейбла |
 | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
 | 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 | Расположение подсказки лейбла |
+| caption | `string` | - | Подпись справа от лейбла |
 | hint | `string` | - | Подсказка внизу |
-| validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | default | Состояние валидации |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| ref | `Ref<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 https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
-| key | `Key` | - |  |
-## parseDate
-`helper` 
-
-Преобразует строковое значение поля FieldDate в тип Date
-## FieldDate
-### Props
-| name | type | default value | description |
-|------|------|---------------|-------------|
-| value* | `string` | - | Значение input |
-| open | `boolean` | - | Открыт date-picker |
-| onOpenChange | `(value: boolean) => void` | - | Колбек открытия пикера |
-| onChange | `(value: string) => void` | - | Колбек смены значения |
-| showCopyButton | `boolean` | - | Отображение кнопки копирования |
-| showClearButton | `boolean` | true | Отображение кнопки Очистки поля |
-| locale | `Locale` | new Intl.Locale('ru-RU') | Текущая локаль календаря |
-| buildCellProps | `(date: Date, viewMode: ViewMode) => { isDisabled?: boolean; isHoliday?: boolean } ;` | - | Колбек установки свойств ячеек календаря. Вызывается на построение каждой ячейки. Принимает два параметра: <br> `Date` - дата ячейки <br> `ViewMode`: <br>  - `month` отображение месяца, каждая ячейка - 1 день <br>  - `year` отображение года, каждая ячейка - 1 месяц <br>  - `decade` отображение декады, каждая ячейка - 1 год <br><br> Колбек должен возвращать объект с полями, отвечающими за отключение и подкраску ячейки. |
-| disabled | `boolean` | - | Является ли поле деактивированным |
-| readonly | `boolean` | - | Является ли поле доступным только для чтения |
-| id | `string` | - | Значение html-атрибута id |
-| name | `string` | - | Значение html-атрибута name |
-| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
-| onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
-| error | `string` | - |  |
-| className | `string` | - | CSS-класс |
-| label | `string` | - | Лейбл |
-| caption | `string` | - | Подпись справа от лейбла |
-| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
-| required | `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 | Расположение подсказки лейбла |
-| hint | `string` | - | Подсказка внизу |
-| validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | default | Состояние валидации |
-| showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| ref | `Ref<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 https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
+| 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[]` | - |  |
-| disabled | `boolean` | false | Является ли поле деактивированным |
-| readonly | `boolean` | false false | Является ли поле доступным только для чтения |
 | 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` | - | Значение плейсхолдера |
 | onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки нажатия клавиши клавиатуры |
-| error | `string` | - |  |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
-| caption | `string` | - | Подпись справа от лейбла |
 | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
 | required | `boolean` | - | Является ли поле обязательным |
-| size | enum Size: `"s"`, `"m"`, `"l"` | - | Размер |
-| labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
+| caption | `string` | - | Подпись справа от лейбла |
 | hint | `string` | - | Подсказка внизу |
-| validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | - | Состояние валидации |
 | 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` | - | Произвольный постфикс для поля |
-| value | `ItemId \| ItemId[]` | - | Controlled состояние |
 | onChange | `OnChangeHandler<any>` | - | Controlled обработчик измения состояния |
+| value | `ItemId \| ItemId[]` | - | Controlled состояние |
 | defaultValue | `ItemId \| ItemId[]` | - | Начальное состояние |
-| open | `boolean` | - |  |
-| onOpenChange | `(open: boolean) => void` | - |  |
 | showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
 | showClearButton | `boolean` | true | Отображение кнопки очистки поля |
+| open | `boolean` | - |  |
+| onOpenChange | `(open: boolean) => void` | - |  |
 | prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
 | widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | - |  |
 | pinTop | `OptionProps[]` | - |  |
@@ -395,10 +362,45 @@ FieldStepper в основном предназначен для работы с
 | enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
 | selectedOptionFormatter | `SelectedOptionFormatter` | - |  |
 | selection | "single" \| "multiple" | - |  |
-| ref | `Ref<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 https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
+| 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` | - |  |
 | resetSearchOnOptionSelection | `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>` | - | Колбек обработки потери фокуса |
+| 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 |
@@ -409,94 +411,124 @@ FieldStepper в основном предназначен для работы с
 | allowMoreThanLimits | `boolean` | true | Можно ли вводить c клавиатуры числа, выходящие за пределы min/max |
 | prefix | `ReactNode` | - | Произвольный префикс для поля |
 | postfix | `ReactNode` | - | Произвольный постфикс для поля |
-| disabled | `boolean` | - | Является ли поле деактивированным |
-| readonly | `boolean` | - | Является ли поле доступным только для чтения |
 | id | `string` | - | Значение html-атрибута id |
 | name | `string` | - | Значение html-атрибута name |
+| disabled | `boolean` | - | Является ли поле деактивированным |
+| readonly | `boolean` | - | Является ли поле доступным только для чтения |
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
 | min | `number` | Number.NEGATIVE_INFINITY | Минимальное значение поля |
 | max | `number` | Number.POSITIVE_INFINITY | Максимальное значение поля |
-| error | `string` | - |  |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
-| caption | `string` | - | Подпись справа от лейбла |
 | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
 | 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 | Расположение подсказки лейбла |
+| caption | `string` | - | Подпись справа от лейбла |
 | hint | `string` | - | Подсказка внизу |
-| validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | default | Состояние валидации |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| ref | `Ref<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 https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
+| 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` | - |  |
-## FieldSlider
+## FieldText
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| postfixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-постфикс для поля |
-| showScaleBar | `boolean` | true | Отображение линейки |
-| textInputFormatter | `TextInputFormatter` | - | Функция для форматирования значений в текстовом поле |
-| unbindInputFromMarks | `boolean` | - | Отвязать текстовое поле от значений на линейке |
+| showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
+| showClearButton | `boolean` | true | Отображение кнопки очистки поля |
+| allowMoreThanMaxLength | `boolean` | - | Можно ли вводить больше разрешённого кол-ва символов |
+| prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
 | prefix | `ReactNode` | - | Произвольный префикс для поля |
 | postfix | `ReactNode` | - | Произвольный постфикс для поля |
-| disabled | `boolean` | - | Является ли поле деактивированным |
-| readonly | `boolean` | - | Является ли поле доступным только для чтения |
+| button | `Button` | - | Кнопка действия внутри поля |
+| 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>` | - | Колбек обработки потери фокуса |
-| value | `number \| number[]` | - |  |
-| onChange | `(value: number \| number[]) => void` | - |  |
-| range | `boolean` | - |  |
-| tipFormatter | `(value: string \| number) => ReactNode` | - |  |
-| step | `number` | - |  |
-| min | `number` | - |  |
-| max | `number` | - |  |
-| marks | `Record<string \| number, ReactNode \| MarkObj>` | - |  |
+| placeholder | `string` | - | Значение плейсхолдера |
+| maxLength | `number` | - | Максимальная длина вводимого значения |
+| autoComplete | `string \| boolean` | false | Включен ли автокомплит для поля |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
-| caption | `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`) |
+| showClearButton | `boolean` | true | Отображение кнопки очистки поля |
+| allowMoreThanMaxLength | `boolean` | true | Можно ли вводить больше разрешённого кол-ва символов |
+| value | `string` | - | HTML-аттрибут value |
+| id | `string` | - | HTML-аттрибут id |
+| name | `string` | - | HTML-аттрибут name |
+| disabled | `boolean` | - | Является ли поле деактивированным |
+| readonly | `boolean` | - | Является ли поле доступным только на чтение |
+| onFocus | `FocusEventHandler<HTMLTextAreaElement>` | - | Колбек получения фокуса |
+| onBlur | `FocusEventHandler<HTMLTextAreaElement>` | - | Колбек потери фокуса |
+| placeholder | `string` | - | Плейсхолдер |
+| maxLength | `number` | - | Максимальное кол-во символов |
+| className | `string` | - | CSS-класс |
+| label | `string` | - | Лейбл |
+| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
+| required | `boolean` | - | Является ли поле обязательным |
+| caption | `string` | - | Подпись справа от лейбла |
 | hint | `string` | - | Подсказка внизу |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| ref | `Ref<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 https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
+| 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` | - |  |
-## FieldColor
+## FieldTime
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| open | `boolean` | - | Открыт color-picker |
+| open | `boolean` | - | Открыт time-picker |
 | onOpenChange | `(value: boolean) => void` | - | Колбек открытия пикера |
+| value | `TimeValue` | - | Значение поля |
+| onChange | `(value?: TimeValue) => void` | - | Колбек смены значения |
 | showCopyButton | `boolean` | - | Отображение кнопки копирования |
+| showSeconds | `boolean` | true | Показывать ли секунды |
 | showClearButton | `boolean` | true | Отображение кнопки Очистки поля |
-| value | `string` | - | Значение input |
-| onChange | `(value: string) => void` | - |  |
-| className | `string` | - | Класснейм |
-| withAlpha | `boolean` | - | Значение с альфаканалом |
-| autoApply | `boolean` | - | Применять изменения автоматически, если значение false - то изменения происходят по кнопке |
-| colorMode | `{ hex?: boolean; rgb?: boolean; hsv?: boolean; }` | - |  |
-| disabled | `boolean` | - | Является ли поле деактивированным |
-| readonly | `boolean` | - | Является ли поле доступным только для чтения |
 | id | `string` | - | Значение html-атрибута id |
 | name | `string` | - | Значение html-атрибута name |
-| placeholder | `string` | - | Значение плейсхолдера |
+| disabled | `boolean` | - | Является ли поле деактивированным |
+| readonly | `boolean` | - | Является ли поле доступным только для чтения |
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
-| error | `string` | - |  |
+| className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
-| caption | `string` | - | Подпись справа от лейбла |
 | labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
 | 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 | Расположение подсказки лейбла |
+| caption | `string` | - | Подпись справа от лейбла |
 | hint | `string` | - | Подсказка внизу |
-| validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | default | Состояние валидации |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
-| ref | `Ref<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 https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
+| 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/FieldDate/FieldDate.d.ts

@@ -1,16 +1,24 @@
 import { CalendarProps } from '@snack-uikit/calendar';
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
+import { MODES } from '../../constants';
+import { Mode } from '../../types';
 import { FieldDecoratorProps } from '../FieldDecorator';
-type InputProps = Pick<InputPrivateProps, 'id' | 'name' | 'value' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
+type InputProps = Pick<InputPrivateProps, 'id' | 'name' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur'>;
 type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'caption' | 'hint' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement' | 'error'>;
+type FieldDateWithSeconds = {
+    mode: typeof MODES.DateTime;
+    showSeconds?: boolean;
+};
 type FieldDateOwnProps = {
     /** Открыт date-picker */
     open?: boolean;
     /** Колбек открытия пикера */
     onOpenChange?(value: boolean): void;
+    /** Значение поля */
+    value?: Date;
     /** Колбек смены значения */
-    onChange?(value: string): void;
+    onChange?(value: Date | undefined): void;
     /** Отображение кнопки копирования */
     showCopyButton?: boolean;
     /**
@@ -18,27 +26,10 @@ type FieldDateOwnProps = {
      * @default true
      */
     showClearButton?: boolean;
-    /** Текущая локаль календаря */
-    locale?: Intl.Locale;
-} & Pick<CalendarProps, 'buildCellProps'>;
+    mode: Mode;
+} & Pick<CalendarProps, 'buildCellProps'> & ({
+    mode: typeof MODES.Date;
+} | FieldDateWithSeconds);
 export type FieldDateProps = WithSupportProps<FieldDateOwnProps & InputProps & WrapperProps>;
-export declare const FieldDate: import("react").ForwardRefExoticComponent<{
-    'data-test-id'?: string;
-} & import("react").AriaAttributes & {
-    /** Открыт date-picker */
-    open?: boolean;
-    /** Колбек открытия пикера */
-    onOpenChange?(value: boolean): void;
-    /** Колбек смены значения */
-    onChange?(value: string): void;
-    /** Отображение кнопки копирования */
-    showCopyButton?: boolean;
-    /**
-     * Отображение кнопки Очистки поля
-     * @default true
-     */
-    showClearButton?: boolean;
-    /** Текущая локаль календаря */
-    locale?: Intl.Locale;
-} & Pick<CalendarProps, "buildCellProps"> & InputProps & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const FieldDate: import("react").ForwardRefExoticComponent<FieldDateProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};