@snack-uikit/fields 0.19.0 → 0.19.2

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.d.ts

@@ -9,8 +9,8 @@ export declare const FieldSelectMultiple: import("react").ForwardRefExoticCompon
     'data-test-id'?: string | undefined;
 } & import("react").AriaAttributes & {
     options: import("./types").OptionProps[];
-    pinTop: import("./types").OptionProps[];
-    pinBottom: import("./types").OptionProps[];
+    pinTop?: import("./types").OptionProps[] | undefined;
+    pinBottom?: import("./types").OptionProps[] | undefined;
     searchable?: boolean | undefined;
     showCopyButton?: boolean | undefined;
     showClearButton?: boolean | undefined;

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.d.ts

@@ -7,8 +7,8 @@ export declare const FieldSelectSingle: import("react").ForwardRefExoticComponen
     'data-test-id'?: string | undefined;
 } & import("react").AriaAttributes & {
     options: import("./types").OptionProps[];
-    pinTop: import("./types").OptionProps[];
-    pinBottom: import("./types").OptionProps[];
+    pinTop?: import("./types").OptionProps[] | undefined;
+    pinBottom?: import("./types").OptionProps[] | undefined;
     searchable?: boolean | undefined;
     showCopyButton?: boolean | undefined;
     showClearButton?: boolean | undefined;

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/FieldSelect/types.d.ts

@@ -37,8 +37,8 @@ export type FieldSelectPrivateProps = InputProps & WrapperProps & {
 };
 type FiledSelectCommonProps = WithSupportProps<{
     options: OptionProps[];
-    pinTop: OptionProps[];
-    pinBottom: OptionProps[];
+    pinTop?: OptionProps[];
+    pinBottom?: OptionProps[];
     searchable?: boolean;
     /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
     showCopyButton?: boolean;

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);
+}

package/dist/components/FieldStepper/FieldStepper.js

@@ -21,6 +21,7 @@ import { extractSupportProps } from '@snack-uikit/utils';
 import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
+import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import styles from './styles.module.css';
 const TOOLTIP_TIMEOUT = 2000;
@@ -49,6 +50,7 @@ export const FieldStepper = forwardRef((_a, ref) => {
     const plusButtonRef = useRef(null);
     const isMinusButtonDisabled = (typeof min === 'number' && value <= min) || readonly || disabled;
     const isPlusButtonDisabled = (typeof max === 'number' && value >= max) || readonly || disabled;
+    const fieldValidationState = getValidationState({ validationState, error });
     const adjustValue = (value) => {
         setValue(value);
         setTooltipOpen(true);
@@ -122,5 +124,5 @@ export const FieldStepper = forwardRef((_a, ref) => {
             (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     };
-    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, validationState: validationState, error: error }, extractSupportProps(rest), { children: _jsx(Tooltip, { tip: tooltip, open: allowMoreThanLimits ? false : tooltipOpen, "data-test-id": 'field-stepper__limit-tooltip', children: _jsx(FieldContainerPrivate, { size: size, validationState: validationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: inputRef, prefix: _jsx(ButtonFunction, { tabIndex: -1, ref: minusButtonRef, size: 'xs', className: styles.button, icon: _jsx(MinusSVG, {}), onClick: handleMinusButtonClick, onKeyDown: handleMinusButtonKeyDown, disabled: isMinusButtonDisabled, "data-test-id": 'field-stepper__minus-button' }), postfix: _jsx(ButtonFunction, { ref: plusButtonRef, tabIndex: -1, size: 'xs', className: styles.button, icon: _jsx(PlusSVG, {}), onClick: handlePlusButtonClick, onKeyDown: handlePlusButtonKeyDown, disabled: isPlusButtonDisabled, "data-test-id": 'field-stepper__plus-button' }), children: _jsx(InputPrivate, { ref: mergeRefs(ref, inputRef), className: styles.stepper, "data-size": size, value: String(value), tabIndex: 0, onKeyDown: handleInputKeyDown, onChange: handleInputChange, onBlur: handleInputBlur, onFocus: handleInputFocus, disabled: disabled, readonly: readonly, type: 'number', id: id, name: name, min: min, max: max, "data-test-id": 'field-stepper__input' }) }) }) })));
+    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, validationState: fieldValidationState, error: error }, extractSupportProps(rest), { children: _jsx(Tooltip, { tip: tooltip, open: allowMoreThanLimits ? false : tooltipOpen, "data-test-id": 'field-stepper__limit-tooltip', children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: inputRef, prefix: _jsx(ButtonFunction, { tabIndex: -1, ref: minusButtonRef, size: 'xs', className: styles.button, icon: _jsx(MinusSVG, {}), onClick: handleMinusButtonClick, onKeyDown: handleMinusButtonKeyDown, disabled: isMinusButtonDisabled, "data-test-id": 'field-stepper__minus-button' }), postfix: _jsx(ButtonFunction, { ref: plusButtonRef, tabIndex: -1, size: 'xs', className: styles.button, icon: _jsx(PlusSVG, {}), onClick: handlePlusButtonClick, onKeyDown: handlePlusButtonKeyDown, disabled: isPlusButtonDisabled, "data-test-id": 'field-stepper__plus-button' }), children: _jsx(InputPrivate, { ref: mergeRefs(ref, inputRef), className: styles.stepper, "data-size": size, value: String(value), tabIndex: 0, onKeyDown: handleInputKeyDown, onChange: handleInputChange, onBlur: handleInputBlur, onFocus: handleInputFocus, disabled: disabled, readonly: readonly, type: 'number', id: id, name: name, min: min, max: max, "data-test-id": 'field-stepper__input' }) }) }) })));
 });

package/dist/components/FieldText/FieldText.js

@@ -17,6 +17,7 @@ import { extractSupportProps } from '@snack-uikit/utils';
 import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useCopyButton, useValueControl } from '../../hooks';
+import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 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, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, prefixIcon, error } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "showClearButton", "allowMoreThanMaxLength", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "size", "validationState", "prefixIcon", "error"]);
@@ -31,6 +32,7 @@ export const FieldText = forwardRef((_a, ref) => {
     const showAdditionalButton = Boolean(value && !disabled);
     const showClearButton = showClearButtonProp && showAdditionalButton && !readonly;
     const showCopyButton = showCopyButtonProp && showAdditionalButton && readonly;
+    const fieldValidationState = getValidationState({ validationState, error });
     const onClear = () => {
         var _a;
         onChange('');
@@ -46,5 +48,5 @@ export const FieldText = 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, validationState: validationState, error: error }, 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, tabIndex: inputTabIndex, onKeyDown: onInputKeyDown, placeholder: placeholder, disabled: disabled, readonly: readonly, type: 'text', maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, "data-test-id": 'field-text__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, validationState: fieldValidationState, error: error }, 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, tabIndex: inputTabIndex, onKeyDown: onInputKeyDown, placeholder: placeholder, disabled: disabled, readonly: readonly, type: 'text', maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, "data-test-id": 'field-text__input' }) }) })));
 });

package/dist/components/FieldTextArea/FieldTextArea.js

@@ -18,6 +18,7 @@ import { extractSupportProps } from '@snack-uikit/utils';
 import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate, TextArea } from '../../helperComponents';
 import { useCopyButton, useValueControl } from '../../hooks';
+import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import styles from './styles.module.css';
 export const FieldTextArea = forwardRef((_a, ref) => {
@@ -33,6 +34,7 @@ export const FieldTextArea = forwardRef((_a, ref) => {
     });
     const showCopyButton = showCopyButtonProp && Boolean(value) && !disabled && readonly;
     const showClearButton = showClearButtonProp && Boolean(value) && !disabled && !readonly;
+    const fieldValidationState = getValidationState({ validationState, error });
     const onClear = () => {
         var _a;
         onChange('');
@@ -48,5 +50,5 @@ export const FieldTextArea = 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, { className: styles.container, size: size, validationState: validationState, disabled: disabled, readonly: readonly, "data-resizable": isResizable || undefined, variant: CONTAINER_VARIANT.MultiLine, style: { '--max-rows': maxRows }, inputRef: localRef, postfix: _jsx("span", { className: styles.postfix, children: buttons }), children: _jsx(Scroll, { className: styles.scrollContainer, size: 's', barHideStrategy: 'never', resize: isResizable ? 'vertical' : 'none', "data-test-id": 'field-textarea__scroll-area', children: _jsx(TextArea, { className: styles.textarea, "data-size": size, value: value, onChange: onChange, placeholder: placeholder, disabled: disabled, readonly: readonly, id: id, name: name, ref: mergeRefs(ref, localRef), onFocus: onFocus, onBlur: onBlur, onKeyDown: onInputKeyDown, tabIndex: inputTabIndex, maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, "data-test-id": 'field-textarea__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, { className: styles.container, size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, "data-resizable": isResizable || undefined, variant: CONTAINER_VARIANT.MultiLine, style: { '--max-rows': maxRows }, inputRef: localRef, postfix: _jsx("span", { className: styles.postfix, children: buttons }), children: _jsx(Scroll, { className: styles.scrollContainer, size: 's', barHideStrategy: 'never', resize: isResizable ? 'vertical' : 'none', "data-test-id": 'field-textarea__scroll-area', children: _jsx(TextArea, { className: styles.textarea, "data-size": size, value: value, onChange: onChange, placeholder: placeholder, disabled: disabled, readonly: readonly, id: id, name: name, ref: mergeRefs(ref, localRef), onFocus: onFocus, onBlur: onBlur, onKeyDown: onInputKeyDown, tabIndex: inputTabIndex, maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, "data-test-id": 'field-textarea__input' }) }) }) })));
 });

package/dist/utils/getValidationState.d.ts

@@ -0,0 +1,5 @@
+import { ValidationState } from '../types';
+export declare function getValidationState({ validationState, error }: {
+    validationState?: ValidationState;
+    error?: string;
+}): ValidationState;

package/dist/utils/getValidationState.js

@@ -0,0 +1,4 @@
+import { VALIDATION_STATE } from '../constants';
+export function getValidationState({ validationState, error }) {
+    return error ? VALIDATION_STATE.Error : validationState !== null && validationState !== void 0 ? validationState : VALIDATION_STATE.Default;
+}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.19.0",
+  "version": "0.19.2",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,13 +33,13 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.17.1",
-    "@snack-uikit/calendar": "0.7.7",
+    "@snack-uikit/calendar": "0.7.8",
     "@snack-uikit/dropdown": "0.2.2",
     "@snack-uikit/icons": "0.20.1",
     "@snack-uikit/input-private": "3.1.2",
-    "@snack-uikit/list": "0.11.1",
+    "@snack-uikit/list": "0.11.2",
     "@snack-uikit/scroll": "0.5.3",
-    "@snack-uikit/slider": "0.1.8",
+    "@snack-uikit/slider": "0.1.9",
     "@snack-uikit/tag": "0.9.1",
     "@snack-uikit/tooltip": "0.13.2",
     "@snack-uikit/truncate-string": "0.4.13",
@@ -58,5 +58,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "bf1e1f3cfabccc1ee288c18722e33009bd001798"
+  "gitHead": "17bfcf1150776cd35c77d9cca8f45dde97472bf1"
 }

package/src/components/FieldDate/FieldDate.tsx

@@ -30,6 +30,7 @@ import { extractSupportProps, WithSupportProps } 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, FieldDecoratorProps } from '../FieldDecorator';
 import { DEFAULT_LOCALE, SlotKey } from './constants';
 import { useDateField } from './hooks';
@@ -122,6 +123,7 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
     const showAdditionalButton = Boolean(valueProp && !disabled);
     const showClearButton = showClearButtonProp && showAdditionalButton && !readonly;
     const showCopyButton = showCopyButtonProp && showAdditionalButton && readonly;
+    const fieldValidationState = getValidationState({ validationState, error });
 
     const checkForLeavingFocus = useCallback(
       <T extends HTMLInputElement | HTMLButtonElement>(event: KeyboardEvent<T>) => {
@@ -263,7 +265,7 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
         showHintIcon={showHintIcon}
         size={size}
         error={error}
-        validationState={validationState}
+        validationState={fieldValidationState}
         {...extractSupportProps(rest)}
       >
         <Dropdown
@@ -300,7 +302,7 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
           <FieldContainerPrivate
             className={styles.container}
             size={size}
-            validationState={validationState}
+            validationState={fieldValidationState}
             disabled={disabled}
             readonly={readonly}
             variant={CONTAINER_VARIANT.SingleLine}

package/src/components/FieldDecorator/FieldDecorator.tsx

@@ -5,6 +5,7 @@ import { SIZE } from '@snack-uikit/input-private';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
 import { VALIDATION_STATE } from '../../constants';
+import { getValidationState } from '../../utils/getValidationState';
 import { Footer, FooterProps } from './Footer';
 import { Header, HeaderProps } from './Header';
 import styles from './styles.module.scss';
@@ -39,11 +40,11 @@ export function FieldDecorator({
   labelTooltipPlacement,
   size = SIZE.S,
   error,
-  validationState: validationStateProp = VALIDATION_STATE.Default,
+  validationState = VALIDATION_STATE.Default,
   ...rest
 }: FieldDecoratorProps) {
   const isFieldActive = !disabled && !readonly;
-  const validationState = error ? VALIDATION_STATE.Error : validationStateProp;
+  const fieldValidationState = getValidationState({ validationState, error });
 
   return (
     <div className={cn(styles.decorator, className)} {...extractSupportProps(rest)} data-size={size}>
@@ -63,7 +64,7 @@ export function FieldDecorator({
         hint={error || hint}
         showHintIcon={showHintIcon}
         size={size}
-        validationState={isFieldActive ? validationState : VALIDATION_STATE.Default}
+        validationState={isFieldActive ? fieldValidationState : VALIDATION_STATE.Default}
       />
     </div>
   );

package/src/components/FieldSecure/FieldSecure.tsx

@@ -14,6 +14,7 @@ import { extractSupportProps, WithSupportProps } 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, FieldDecoratorProps } from '../FieldDecorator';
 
 type InputProps = Pick<Partial<InputPrivateProps>, 'value' | 'onChange'> &
@@ -96,6 +97,8 @@ export const FieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
     const showCopyButton = showCopyButtonProp && Boolean(value) && readonly && !disabled;
     const showHideButton = !(readonly && !value);
 
+    const fieldValidationState = getValidationState({ validationState, error });
+
     const toggleHidden = () => {
       setHidden(!hidden);
 
@@ -131,12 +134,12 @@ export const FieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
         showHintIcon={showHintIcon}
         size={size}
         error={error}
-        validationState={validationState}
+        validationState={fieldValidationState}
         {...extractSupportProps(rest)}
       >
         <FieldContainerPrivate
           size={size}
-          validationState={validationState}
+          validationState={fieldValidationState}
           disabled={disabled}
           readonly={readonly}
           variant={CONTAINER_VARIANT.SingleLine}