@snack-uikit/fields 0.19.0 → 0.19.1

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.19.1 (2024-04-24)
+
+
+### Bug Fixes
+
+* **FF-0011:** validationState reacts on error prop ([d4a6cb5](https://github.com/cloud-ru-tech/snack-uikit/commit/d4a6cb517662520476f6b690c0a24b37311eb369))
+* **FF-00:** fix input behavior for field-slider non-linear marks ([67fda28](https://github.com/cloud-ru-tech/snack-uikit/commit/67fda2853485bd69039351d71dbe9db5d14e163f))
+
+
+
+
+
 # 0.19.0 (2024-04-23)
 
 

package/README.md

@@ -167,22 +167,111 @@ const [isOpen, setIsOpen] = useState(false);
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| children* | `ReactNode` | - | Контент |
+| className | `string` | - | CSS-класс |
+| disabled | `boolean` | - | Деактивирован ли элемент Является ли поле деактивированным |
+| readonly | `boolean` | - | Является ли поле доступным только на чтение Доступно ли поле только на чтение |
+| error | `string` | - |  |
+| label | `string` | - | Лейбл |
+| labelTooltip | `string` | - | Всплывающая подсказка лейбла |
+| 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 | Состояние валидации |
+| showHintIcon | `boolean` | - | Отображать иконку подсказки |
 ## FieldText
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
+| showClearButton | `boolean` | true | Отображение кнопки очистки поля |
+| allowMoreThanMaxLength | `boolean` | - | Можно ли вводить больше разрешённого кол-ва символов |
+| prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
+| value | `string` | - | Значение input |
+| onChange | `(value: string, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
+| disabled | `boolean` | - | Является ли поле деактивированным |
+| readonly | `boolean` | - | Является ли поле доступным только для чтения |
+| id | `string` | - | Значение html-атрибута id |
+| name | `string` | - | Значение html-атрибута name |
+| placeholder | `string` | - | Значение плейсхолдера |
+| maxLength | `number` | - | Максимальная длина вводимого значения |
+| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
+| onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
+| error | `string` | - |  |
+| className | `string` | - | CSS-класс |
+| label | `string` | - | Лейбл |
+| labelTooltip | `string` | - | Всплывающая подсказка лейбла |
+| 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 | Расположение подсказки лейбла |
+| 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` | - |  |
 ## FieldTextArea
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| maxRows | `number` | - | Максимальное кол-во строк, до которого размер поля может быть увеличен |
+| 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` | - |  |
+| className | `string` | - | CSS-класс |
+| label | `string` | - | Лейбл |
+| labelTooltip | `string` | - | Всплывающая подсказка лейбла |
+| 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 | Расположение подсказки лейбла |
+| hint | `string` | - | Подсказка внизу |
+| validationState | enum ValidationState: `"default"`, `"error"`, `"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 |
 |------|------|---------------|-------------|
+| hidden | `boolean` | - | Замаскированно ли значение поля |
+| onHiddenChange | `(value: boolean) => void` | - | Колбек смены маскирования |
+| showCopyButton | `boolean` | - | Отображение кнопки копирования |
+| allowMoreThanMaxLength | `boolean` | - | Можно ли вводить больше разрешённого кол-ва символов |
+| prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
+| value | `string` | - | Значение input |
+| onChange | `(value: string, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
+| disabled | `boolean` | - | Является ли поле деактивированным |
+| readonly | `boolean` | - | Является ли поле доступным только для чтения |
+| id | `string` | - | Значение html-атрибута id |
+| name | `string` | - | Значение html-атрибута name |
+| placeholder | `string` | - | Значение плейсхолдера |
+| maxLength | `number` | - | Максимальная длина вводимого значения |
+| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
+| onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
+| error | `string` | - |  |
+| className | `string` | - | CSS-класс |
+| label | `string` | - | Лейбл |
+| labelTooltip | `string` | - | Всплывающая подсказка лейбла |
+| 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 | Расположение подсказки лейбла |
+| 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
@@ -193,24 +282,139 @@ const [isOpen, setIsOpen] = useState(false);
 ### 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` | - | Лейбл |
+| labelTooltip | `string` | - | Всплывающая подсказка лейбла |
+| 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 | Расположение подсказки лейбла |
+| 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` | - |  |
 ## FieldSelect
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| pinBottom* | `OptionProps[]` | - |  |
+| pinTop* | `OptionProps[]` | - |  |
+| options* | `OptionProps[]` | - |  |
+| disabled | `boolean` | false | Является ли поле деактивированным |
+| readonly | `boolean` | false false | Является ли поле доступным только для чтения |
+| id | `string` | - | Значение html-атрибута id |
+| name | `string` | - | Значение html-атрибута name |
+| placeholder | `string` | - | Значение плейсхолдера |
+| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
+| onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
+| onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки нажатия клавиши клавиатуры |
+| error | `string` | - |  |
+| className | `string` | - | CSS-класс |
+| label | `string` | - | Лейбл |
+| labelTooltip | `string` | - | Всплывающая подсказка лейбла |
+| 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 | Расположение подсказки лейбла |
+| hint | `string` | - | Подсказка внизу |
+| validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | - | Состояние валидации |
+| showHintIcon | `boolean` | - | Отображать иконку подсказки |
+| loading | `boolean` | - |  |
+| value | `ItemId \| ItemId[]` | - | Controlled состояние |
+| onChange | `OnChangeHandler<any>` | - | Controlled обработчик измения состояния |
+| defaultValue | `ItemId \| ItemId[]` | - | Начальное состояние |
+| searchable | `boolean` | - |  |
+| showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
+| 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` | - |  |
+| onOpenChange | `(open: boolean) => void` | - |  |
+| selectedOptionFormatter | `SelectedOptionFormatter` | - |  |
+| dataFiltered | `boolean` | - |  |
+| dataError | `boolean` | - |  |
+| noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
+| noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
+| errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
+| 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 |
 | key | `Key` | - |  |
+| removeByBackspace | `boolean` | - |  |
 ## 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 |
+| disabled | `boolean` | - | Является ли поле деактивированным |
+| readonly | `boolean` | - | Является ли поле доступным только для чтения |
+| id | `string` | - | Значение html-атрибута id |
+| name | `string` | - | Значение html-атрибута name |
+| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
+| onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
+| min | `number` | Number.NEGATIVE_INFINITY | Минимальное значение поля |
+| max | `number` | Number.POSITIVE_INFINITY | Максимальное значение поля |
+| error | `string` | - |  |
+| className | `string` | - | CSS-класс |
+| label | `string` | - | Лейбл |
+| labelTooltip | `string` | - | Всплывающая подсказка лейбла |
+| 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 | Расположение подсказки лейбла |
+| 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` | - |  |
 ## FieldSlider
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
+| postfixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-постфикс для поля |
+| showScaleBar | `boolean` | true | Отображение линейки |
+| textInputFormatter | `TextInputFormatter` | - | Функция для форматирования значений в текстовом поле |
+| disabled | `boolean` | - | Является ли поле деактивированным |
+| readonly | `boolean` | - | Является ли поле доступным только для чтения |
+| id | `string` | - | Значение html-атрибута id |
+| name | `string` | - | Значение html-атрибута name |
+| 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>` | - |  |
+| className | `string` | - | CSS-класс |
+| label | `string` | - | Лейбл |
+| labelTooltip | `string` | - | Всплывающая подсказка лейбла |
+| 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 | Расположение подсказки лейбла |
+| 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 |
 | key | `Key` | - |  |
 

package/dist/components/FieldDate/FieldDate.js

@@ -21,6 +21,7 @@ import { extractSupportProps } from '@snack-uikit/utils';
 import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useCopyButton } from '../../hooks';
+import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import { DEFAULT_LOCALE, SlotKey } from './constants';
 import { useDateField } from './hooks';
@@ -45,6 +46,7 @@ export const FieldDate = forwardRef((_a, ref) => {
     const showAdditionalButton = Boolean(valueProp && !disabled);
     const showClearButton = showClearButtonProp && showAdditionalButton && !readonly;
     const showCopyButton = showCopyButtonProp && showAdditionalButton && readonly;
+    const fieldValidationState = getValidationState({ validationState, error });
     const checkForLeavingFocus = useCallback((event) => {
         if (event.key === 'ArrowDown') {
             setPickerAutofocus(true);
@@ -133,7 +135,7 @@ export const FieldDate = forwardRef((_a, ref) => {
             e.stopPropagation();
         }
     }, [dateInputClickHandler, isOpen]);
-    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: validationState }, extractSupportProps(rest), { children: _jsx(Dropdown, Object.assign({ trigger: 'click', triggerClassName: styles.triggerClassName, widthStrategy: 'gte' }, (readonly || disabled
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState }, extractSupportProps(rest), { children: _jsx(Dropdown, Object.assign({ trigger: 'click', triggerClassName: styles.triggerClassName, widthStrategy: 'gte' }, (readonly || disabled
             ? { open: false }
             : {
                 open: showDropList,
@@ -143,5 +145,5 @@ export const FieldDate = forwardRef((_a, ref) => {
                             element === null || element === void 0 ? void 0 : element.focus();
                             setPickerAutofocus(false);
                         }
-                    }, onFocusLeave: handleCalendarFocusLeave, locale: locale, "data-test-id": 'field-date__calendar' }) }), children: _jsx(FieldContainerPrivate, { className: styles.container, size: size, validationState: validationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, focused: showDropList, inputRef: localRef, postfix: _jsxs(_Fragment, { children: [buttons, _jsx(CalendarSVG, { size: calendarIconSize, className: styles.calendarIcon, "data-size": size })] }), children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value || '', placeholder: mask, onChange: handleChange, onFocus: inputHandlers.onFocus, onMouseDown: inputHandlers.onMouseDown, onBlur: onBlur, onKeyDown: handleInputKeyDown, onClick: onClick, disabled: disabled, readonly: readonly, tabIndex: inputTabIndex, type: 'text', id: id, name: name, "data-test-id": 'field-date__input' }) }) })) })));
+                    }, onFocusLeave: handleCalendarFocusLeave, locale: locale, "data-test-id": 'field-date__calendar' }) }), children: _jsx(FieldContainerPrivate, { className: styles.container, size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, focused: showDropList, inputRef: localRef, postfix: _jsxs(_Fragment, { children: [buttons, _jsx(CalendarSVG, { size: calendarIconSize, className: styles.calendarIcon, "data-size": size })] }), children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value || '', placeholder: mask, onChange: handleChange, onFocus: inputHandlers.onFocus, onMouseDown: inputHandlers.onMouseDown, onBlur: onBlur, onKeyDown: handleInputKeyDown, onClick: onClick, disabled: disabled, readonly: readonly, tabIndex: inputTabIndex, type: 'text', id: id, name: name, "data-test-id": 'field-date__input' }) }) })) })));
 });

package/dist/components/FieldDecorator/FieldDecorator.d.ts

@@ -12,4 +12,4 @@ export type FieldDecoratorProps = WithSupportProps<{
     readonly?: boolean;
     error?: string;
 } & HeaderProps & FooterProps>;
-export declare function FieldDecorator({ children, className, label, labelTooltip, required, labelFor, length, hint, disabled, readonly, showHintIcon, labelTooltipPlacement, size, error, validationState: validationStateProp, ...rest }: FieldDecoratorProps): import("react/jsx-runtime").JSX.Element;
+export declare function FieldDecorator({ children, className, label, labelTooltip, required, labelFor, length, hint, disabled, readonly, showHintIcon, labelTooltipPlacement, size, error, validationState, ...rest }: FieldDecoratorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/FieldDecorator/FieldDecorator.js

@@ -14,12 +14,13 @@ import cn from 'classnames';
 import { SIZE } from '@snack-uikit/input-private';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { VALIDATION_STATE } from '../../constants';
+import { getValidationState } from '../../utils/getValidationState';
 import { Footer } from './Footer';
 import { Header } from './Header';
 import styles from './styles.module.css';
 export function FieldDecorator(_a) {
-    var { children, className, label, labelTooltip, required, labelFor, length, hint, disabled, readonly, showHintIcon, labelTooltipPlacement, size = SIZE.S, error, validationState: validationStateProp = VALIDATION_STATE.Default } = _a, rest = __rest(_a, ["children", "className", "label", "labelTooltip", "required", "labelFor", "length", "hint", "disabled", "readonly", "showHintIcon", "labelTooltipPlacement", "size", "error", "validationState"]);
+    var { children, className, label, labelTooltip, required, labelFor, length, hint, disabled, readonly, showHintIcon, labelTooltipPlacement, size = SIZE.S, error, validationState = VALIDATION_STATE.Default } = _a, rest = __rest(_a, ["children", "className", "label", "labelTooltip", "required", "labelFor", "length", "hint", "disabled", "readonly", "showHintIcon", "labelTooltipPlacement", "size", "error", "validationState"]);
     const isFieldActive = !disabled && !readonly;
-    const validationState = error ? VALIDATION_STATE.Error : validationStateProp;
-    return (_jsxs("div", Object.assign({ className: cn(styles.decorator, className) }, extractSupportProps(rest), { "data-size": size, children: [label && (_jsx(Header, { labelTooltipPlacement: labelTooltipPlacement, required: required, label: label, labelTooltip: labelTooltip, labelFor: labelFor, size: size })), children, _jsx(Footer, { length: isFieldActive ? length : undefined, hint: error || hint, showHintIcon: showHintIcon, size: size, validationState: isFieldActive ? validationState : VALIDATION_STATE.Default })] })));
+    const fieldValidationState = getValidationState({ validationState, error });
+    return (_jsxs("div", Object.assign({ className: cn(styles.decorator, className) }, extractSupportProps(rest), { "data-size": size, children: [label && (_jsx(Header, { labelTooltipPlacement: labelTooltipPlacement, required: required, label: label, labelTooltip: labelTooltip, labelFor: labelFor, size: size })), children, _jsx(Footer, { length: isFieldActive ? length : undefined, hint: error || hint, showHintIcon: showHintIcon, size: size, validationState: isFieldActive ? fieldValidationState : VALIDATION_STATE.Default })] })));
 }

package/dist/components/FieldSecure/FieldSecure.js

@@ -17,6 +17,7 @@ import { extractSupportProps } from '@snack-uikit/utils';
 import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useCopyButton, useHideButton, useValueControl } from '../../hooks';
+import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 export const FieldSecure = forwardRef((_a, ref) => {
     var { id, name, value: valueProp, placeholder, maxLength, disabled = false, readonly = false, showCopyButton: showCopyButtonProp = true, allowMoreThanMaxLength = false, hidden: hiddenProp, onHiddenChange, showHintIcon, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, size = SIZE.S, validationState = VALIDATION_STATE.Default, prefixIcon, error } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "allowMoreThanMaxLength", "hidden", "onHiddenChange", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "size", "validationState", "prefixIcon", "error"]);
@@ -35,6 +36,7 @@ export const FieldSecure = forwardRef((_a, ref) => {
     });
     const showCopyButton = showCopyButtonProp && Boolean(value) && readonly && !disabled;
     const showHideButton = !(readonly && !value);
+    const fieldValidationState = getValidationState({ validationState, error });
     const toggleHidden = () => {
         setHidden(!hidden);
         if (!readonly) {
@@ -53,5 +55,5 @@ export const FieldSecure = forwardRef((_a, ref) => {
         readonly,
         submitKeys: ['Enter', 'Space', 'Tab'],
     });
-    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: validationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { size: size, validationState: validationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: localRef, prefix: prefixIcon, postfix: buttons, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onInputKeyDown, tabIndex: inputTabIndex, placeholder: placeholder, disabled: disabled, readonly: readonly, type: hidden ? 'password' : 'text', maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, "data-test-id": 'field-secure__input' }) }) })));
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: localRef, prefix: prefixIcon, postfix: buttons, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onInputKeyDown, tabIndex: inputTabIndex, placeholder: placeholder, disabled: disabled, readonly: readonly, type: hidden ? 'password' : 'text', maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, "data-test-id": 'field-secure__input' }) }) })));
 });

package/dist/components/FieldSelect/FieldSelectMultiple.js

@@ -19,6 +19,7 @@ import { Tag } from '@snack-uikit/tag';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
+import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
 import { useButtons, useHandleDeleteItem, useHandleOnKeyDown, useSearchInput } from './hooks';
@@ -115,7 +116,8 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
     };
     const fuzzySearch = useFuzzySearch(items);
     const result = autocomplete || !searchable || prevInputValue.current === inputValue ? items : fuzzySearch(inputValue);
-    return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), extractFieldDecoratorProps(rest), { labelFor: id, size: size, validationState: validationState, children: _jsx(Droplist, Object.assign({}, extractListProps(rest), { items: result, triggerElemRef: localRef, selection: {
+    const fieldValidationState = getValidationState({ validationState, error: rest.error });
+    return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), extractFieldDecoratorProps(rest), { labelFor: id, size: size, validationState: fieldValidationState, children: _jsx(Droplist, Object.assign({}, extractListProps(rest), { items: result, triggerElemRef: localRef, selection: {
                 mode: 'multiple',
                 value: value,
                 onChange: value => {
@@ -124,7 +126,7 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
                 },
             }, dataFiltered: (_b = rest.dataFiltered) !== null && _b !== void 0 ? _b : Boolean(inputValue.length), size: size, open: !disabled && !readonly && open, onOpenChange: handleOpenChange, children: ({ onKeyDown }) => {
                 var _a, _b, _c, _d;
-                return (_jsx(FieldContainerPrivate, { className: cn(styles.container, styles.tagContainer), validationState: validationState, disabled: disabled, readonly: readonly, focused: open, variant: 'single-line-container', inputRef: localRef, size: size, prefix: prefixIcon, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: styles.contentWrapper, ref: contentRef, children: [selectedItems &&
+                return (_jsx(FieldContainerPrivate, { className: cn(styles.container, styles.tagContainer), validationState: fieldValidationState, disabled: disabled, readonly: readonly, focused: open, variant: 'single-line-container', inputRef: localRef, size: size, prefix: prefixIcon, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: styles.contentWrapper, ref: contentRef, children: [selectedItems &&
                                         selectedItems.map(option => {
                                             var _a;
                                             return (_jsx(Tag, { size: size === 'l' ? 's' : 'xs', tabIndex: -1, label: selectedOptionFormatter(option), appearance: (_a = option.appearance) !== null && _a !== void 0 ? _a : 'neutral', onDelete: !option.disabled && !disabled && !readonly ? handleItemDelete(option) : undefined }, option.id));

package/dist/components/FieldSelect/FieldSelectSingle.js

@@ -18,6 +18,7 @@ import { Droplist } from '@snack-uikit/list';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
+import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
 import { useButtons, useHandleOnKeyDown, useSearchInput } from './hooks';
@@ -122,11 +123,12 @@ export const FieldSelectSingle = forwardRef((_a, ref) => {
     const result = autocomplete || !searchable || selectedOptionFormatter(selectedItem) === inputValue
         ? items
         : fuzzySearch(inputValue);
-    return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), extractFieldDecoratorProps(rest), { validationState: validationState, required: required, readonly: readonly, labelFor: id, disabled: disabled, size: size, children: _jsx(Droplist, Object.assign({}, extractListProps(rest), { items: result, selection: {
+    const fieldValidationState = getValidationState({ validationState, error: rest.error });
+    return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), extractFieldDecoratorProps(rest), { validationState: fieldValidationState, required: required, readonly: readonly, labelFor: id, disabled: disabled, size: size, children: _jsx(Droplist, Object.assign({}, extractListProps(rest), { items: result, selection: {
                 mode: 'single',
                 value: value,
                 onChange: handleSelectionChange,
-            }, size: size, open: open, onOpenChange: handleOpenChange, triggerElemRef: localRef, children: ({ onKeyDown }) => (_jsxs(FieldContainerPrivate, { className: styles.container, validationState: validationState, disabled: disabled, readonly: readonly, focused: open, variant: 'single-line-container', inputRef: localRef, size: size, prefix: prefixIcon, children: [_jsx(InputPrivate, { id: id, name: name, type: 'text', disabled: disabled, placeholder: placeholder, ref: mergeRefs(ref, localRef), onChange: searchable ? setInputValue : undefined, value: searchable ? inputValue : selectedOptionFormatter(selectedItem), readonly: readonly, "data-test-id": 'field-select__input', onKeyDown: handleOnKeyDown(onKeyDown), onBlur: handleBlur, className: cn({
+            }, size: size, open: open, onOpenChange: handleOpenChange, triggerElemRef: localRef, children: ({ onKeyDown }) => (_jsxs(FieldContainerPrivate, { className: styles.container, validationState: fieldValidationState, disabled: disabled, readonly: readonly, focused: open, variant: 'single-line-container', inputRef: localRef, size: size, prefix: prefixIcon, children: [_jsx(InputPrivate, { id: id, name: name, type: 'text', disabled: disabled, placeholder: placeholder, ref: mergeRefs(ref, localRef), onChange: searchable ? setInputValue : undefined, value: searchable ? inputValue : selectedOptionFormatter(selectedItem), readonly: readonly, "data-test-id": 'field-select__input', onKeyDown: handleOnKeyDown(onKeyDown), onBlur: handleBlur, className: cn({
                             [styles.readonlyCursor]: !searchable,
                         }) }), _jsxs("div", { className: styles.postfix, children: [buttons, _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] })] })) })) })));
 });

package/dist/components/FieldSlider/FieldSlider.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import mergeRefs from 'merge-refs';
-import { forwardRef, useEffect, useRef, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { InputPrivate, SIZE } from '@snack-uikit/input-private';
 import { Slider } from '@snack-uikit/slider';
 import { extractSupportProps } from '@snack-uikit/utils';
@@ -19,7 +19,7 @@ import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
 import { FieldDecorator } from '../FieldDecorator';
-import { generateAllowedValues, getClosestMark, getTextFieldValue } from './helpers';
+import { generateAllowedValues, getClosestMark, getTextFieldValue, isMarkObject } from './helpers';
 import styles from './styles.module.css';
 const getDefaultValue = (range, min, max, value) => {
     if (range) {
@@ -32,6 +32,14 @@ const getDefaultValue = (range, min, max, value) => {
 };
 export const FieldSlider = forwardRef((_a, ref) => {
     var { id, name, min, max, step, marks, showScaleBar = true, value: valueProp, range = false, disabled = false, readonly = false, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required, hint, showHintIcon, size = SIZE.S, postfixIcon, textInputFormatter } = _a, rest = __rest(_a, ["id", "name", "min", "max", "step", "marks", "showScaleBar", "value", "range", "disabled", "readonly", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "size", "postfixIcon", "textInputFormatter"]);
+    const getMarkValue = useCallback((key) => {
+        const mark = marks[key];
+        if (isMarkObject(mark)) {
+            return mark.label;
+        }
+        return mark;
+    }, [marks]);
+    const hasMarksEqualToValues = useMemo(() => Object.keys(marks).every(key => key === getMarkValue(key)), [getMarkValue, marks]);
     const [value = getDefaultValue(range, min, max, valueProp), onChange] = useValueControl({
         value: valueProp,
         defaultValue: getDefaultValue(range, min, max, valueProp),
@@ -40,46 +48,82 @@ export const FieldSlider = forwardRef((_a, ref) => {
     const [textFieldInputValue, setTextFieldInputValue] = useState(getTextFieldValue(value, textInputFormatter));
     const localRef = useRef(null);
     const onTextFieldChange = (textFieldValue) => {
-        const numValue = Number(textFieldValue);
-        if (Number.isNaN(numValue)) {
+        const numValue = parseInt(textFieldValue);
+        if (textFieldValue && Number.isNaN(numValue)) {
             return;
         }
         setTextFieldInputValue(textFieldValue);
     };
-    const handleTextValueChange = () => {
-        const textFieldNumValue = Number(textFieldInputValue);
-        if (Number.isNaN(textFieldNumValue)) {
+    const handleNonEqualMarksSliderChange = (textFieldNumValue) => {
+        const handleChange = (key) => {
+            setTextFieldInputValue(String(getMarkValue(key)));
+            onChange(Number(key));
+        };
+        const allowedValues = Object.keys(marks).map(key => ({
+            key,
+            value: parseInt(String(getMarkValue(key))),
+        }));
+        const suitableEntry = allowedValues.find(entry => entry.value === textFieldNumValue);
+        if (suitableEntry) {
+            handleChange(suitableEntry.key);
+            return;
+        }
+        const actualMin = parseInt(String(getMarkValue(min)));
+        const actualMax = parseInt(String(getMarkValue(max)));
+        if (textFieldNumValue < actualMin) {
+            handleChange(min);
+            return;
+        }
+        if (textFieldNumValue > actualMax) {
+            handleChange(max);
             return;
         }
+        const { mark } = getClosestMark(textFieldNumValue, allowedValues, mark => mark.value);
+        handleChange(mark.key);
+    };
+    const handleEqualMarksSliderChange = (textFieldNumValue) => {
+        const handleChange = (value) => {
+            setTextFieldInputValue(String(value));
+            onChange(value);
+        };
         if (textFieldNumValue < min) {
-            setTextFieldInputValue(String(min));
-            onChange(min);
+            handleChange(min);
             return;
         }
         if (textFieldNumValue > max) {
-            setTextFieldInputValue(String(max));
-            onChange(max);
+            handleChange(max);
             return;
         }
         if (step === null) {
             const allowedValues = Object.keys(marks).map(Number);
             if (allowedValues.includes(textFieldNumValue)) {
-                onChange(textFieldNumValue);
+                setTextFieldInputValue(String(textFieldNumValue));
+                handleChange(textFieldNumValue);
                 return;
             }
-            const { mark } = getClosestMark(textFieldNumValue, allowedValues);
-            setTextFieldInputValue(String(mark));
-            onChange(mark);
+            const { mark } = getClosestMark(textFieldNumValue, allowedValues, mark => mark);
+            handleChange(mark);
             return;
         }
         const allowedValues = generateAllowedValues(min, max, step);
         if (allowedValues.includes(textFieldNumValue)) {
-            onChange(textFieldNumValue);
+            handleChange(textFieldNumValue);
             return;
         }
-        const { mark } = getClosestMark(textFieldNumValue, allowedValues);
-        setTextFieldInputValue(String(mark));
-        onChange(mark);
+        const { mark } = getClosestMark(textFieldNumValue, allowedValues, mark => mark);
+        handleChange(mark);
+    };
+    const handleTextValueChange = () => {
+        const textFieldNumValue = parseInt(textFieldInputValue);
+        if (Number.isNaN(textFieldNumValue)) {
+            return;
+        }
+        if (hasMarksEqualToValues) {
+            handleEqualMarksSliderChange(textFieldNumValue);
+        }
+        else {
+            handleNonEqualMarksSliderChange(textFieldNumValue);
+        }
     };
     const onTextFieldBlur = (e) => {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);

package/dist/components/FieldSlider/helpers/getClosestMark.d.ts

@@ -1,4 +1,4 @@
-export declare const getClosestMark: (value: number, marks: number[]) => {
+export declare const getClosestMark: <T>(value: number, marks: T[], getMarkValue: (value: T) => number) => {
     lowestDiff: number;
-    mark: number;
+    mark: T;
 };

package/dist/components/FieldSlider/helpers/getClosestMark.js

@@ -1,6 +1,6 @@
 const getDiff = (value, mark) => Math.abs(mark - value);
-export const getClosestMark = (value, marks) => marks.reduce((accResult, mark) => {
-    const diff = getDiff(value, mark);
+export const getClosestMark = (value, marks, getMarkValue) => marks.reduce((accResult, mark) => {
+    const diff = getDiff(value, getMarkValue(mark));
     if (diff < accResult.lowestDiff) {
         return {
             lowestDiff: diff,
@@ -9,6 +9,6 @@ export const getClosestMark = (value, marks) => marks.reduce((accResult, mark) =
     }
     return accResult;
 }, {
-    lowestDiff: getDiff(value, marks[0]),
+    lowestDiff: getDiff(value, getMarkValue(marks[0])),
     mark: marks[0],
 });

package/dist/components/FieldSlider/helpers/index.d.ts

@@ -1,3 +1,4 @@
 export * from './getTextFieldValue';
 export * from './getClosestMark';
 export * from './generateAllowedValues';
+export * from './isMarkObject';

package/dist/components/FieldSlider/helpers/index.js

@@ -1,3 +1,4 @@
 export * from './getTextFieldValue';
 export * from './getClosestMark';
 export * from './generateAllowedValues';
+export * from './isMarkObject';

package/dist/components/FieldSlider/helpers/isMarkObject.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { SliderProps as SliderComponentProps } from '@snack-uikit/slider';
+type Marks = NonNullable<SliderComponentProps['marks']>;
+type MarkObject = {
+    label: ReactNode;
+};
+export declare function isMarkObject(mark: Marks[keyof Marks]): mark is MarkObject;
+export {};

package/dist/components/FieldSlider/helpers/isMarkObject.js

@@ -0,0 +1,3 @@
+export function isMarkObject(mark) {
+    return Boolean(mark && typeof mark === 'object' && 'label' in mark);
+}