@snack-uikit/fields 0.28.0 → 0.29.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.29.0 (2024-09-27)
+
+
+### Bug Fixes
+
+* **PDS-199:** ajust components according to new useButtonNavigation api ([4e9b58b](https://github.com/cloud-ru-tech/snack-uikit/commit/4e9b58b2345e4e630aee94679c9831c9861a4548))
+
+
+### Features
+
+* **PDS-199:** add button prop - to field-text; add prefix and postfix props - to field-text, field-slider, field-stepper, field-select ([8bfb5eb](https://github.com/cloud-ru-tech/snack-uikit/commit/8bfb5ebc9320a451cb3765b8377e022115b4a371))
+
+
+
+
+
 # 0.28.0 (2024-09-26)
 
 

package/README.md

@@ -214,6 +214,9 @@ FieldStepper в основном предназначен для работы с
 | showClearButton | `boolean` | true | Отображение кнопки очистки поля |
 | allowMoreThanMaxLength | `boolean` | - | Можно ли вводить больше разрешённого кол-ва символов |
 | prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
+| prefix | `ReactNode` | - | Произвольный префикс для поля |
+| postfix | `ReactNode` | - | Произвольный постфикс для поля |
+| button | `Button` | - | Кнопка действия внутри поля |
 | value | `string` | - | Значение input |
 | onChange | `(value: string, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
 | disabled | `boolean` | - | Является ли поле деактивированным |
@@ -365,6 +368,8 @@ FieldStepper в основном предназначен для работы с
 | validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | - | Состояние валидации |
 | showHintIcon | `boolean` | - | Отображать иконку подсказки |
 | loading | `boolean` | - |  |
+| prefix | `ReactNode` | - | Произвольный префикс для поля |
+| postfix | `ReactNode` | - | Произвольный постфикс для поля |
 | value | `ItemId \| ItemId[]` | - | Controlled состояние |
 | onChange | `OnChangeHandler<any>` | - | Controlled обработчик измения состояния |
 | defaultValue | `ItemId \| ItemId[]` | - | Начальное состояние |
@@ -402,6 +407,8 @@ FieldStepper в основном предназначен для работы с
 | onChange | `(value: number, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
 | step | `number` | 1 | Шаг поля |
 | allowMoreThanLimits | `boolean` | true | Можно ли вводить c клавиатуры числа, выходящие за пределы min/max |
+| prefix | `ReactNode` | - | Произвольный префикс для поля |
+| postfix | `ReactNode` | - | Произвольный постфикс для поля |
 | disabled | `boolean` | - | Является ли поле деактивированным |
 | readonly | `boolean` | - | Является ли поле доступным только для чтения |
 | id | `string` | - | Значение html-атрибута id |
@@ -431,6 +438,8 @@ FieldStepper в основном предназначен для работы с
 | showScaleBar | `boolean` | true | Отображение линейки |
 | textInputFormatter | `TextInputFormatter` | - | Функция для форматирования значений в текстовом поле |
 | unbindInputFromMarks | `boolean` | - | Отвязать текстовое поле от значений на линейке |
+| prefix | `ReactNode` | - | Произвольный префикс для поля |
+| postfix | `ReactNode` | - | Произвольный постфикс для поля |
 | disabled | `boolean` | - | Является ли поле деактивированным |
 | readonly | `boolean` | - | Является ли поле доступным только для чтения |
 | id | `string` | - | Значение html-атрибута id |

package/dist/components/FieldColor/FieldColor.d.ts

@@ -36,5 +36,5 @@ export declare const FieldColor: import("react").ForwardRefExoticComponent<{
     showClearButton?: boolean;
     value?: string;
     onChange?(value: string): void;
-} & Omit<ColorPickerProps, "onChange" | "value"> & InputProps & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
+} & Omit<ColorPickerProps, "value" | "onChange"> & InputProps & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/FieldColor/FieldColor.js

@@ -44,9 +44,9 @@ export const FieldColor = forwardRef((_a, ref) => {
     };
     const clearButtonSettings = useClearButton({ clearButtonRef, showClearButton, size, onClear });
     const copyButtonSettings = useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy: value });
-    const { buttons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
+    const { postfixButtons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
         inputRef: localRef,
-        buttons: useMemo(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
+        postfixButtons: useMemo(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
         readonly,
         submitKeys: ['Enter', 'Space', 'Tab'],
     });
@@ -65,7 +65,7 @@ export const FieldColor = forwardRef((_a, ref) => {
                     setValue === null || setValue === void 0 ? void 0 : setValue(hex || '');
                 }, colorMode: {
                     hex: false,
-                } }), children: _jsx(FieldContainerPrivate, { className: styles.container, size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, focused: showDropList, inputRef: localRef, postfix: buttons, prefix: _jsx("div", { className: styles.colorPreview, style: {
+                } }), children: _jsx(FieldContainerPrivate, { className: styles.container, size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, focused: showDropList, inputRef: localRef, postfix: postfixButtons, prefix: _jsx("div", { className: styles.colorPreview, style: {
                         '--color': value,
                     } }), children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, tabIndex: inputTabIndex, onKeyDown: onInputKeyDown, disabled: disabled, readonly: readonly, placeholder: placeholder, type: 'text', id: id, name: name, "data-test-id": 'field-color__input' }) }) })) })));
 });

package/dist/components/FieldDate/FieldDate.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import mergeRefs from 'merge-refs';
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { useUncontrolledProp } from 'uncontrollable';
@@ -70,7 +70,13 @@ export const FieldDate = forwardRef((_a, ref) => {
     }, [onChange, required, setIsOpen]);
     const clearButtonSettings = useClearButton({ clearButtonRef, showClearButton, size, onClear: handleClear });
     const copyButtonSettings = useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy: valueProp || '' });
-    const memorizedButtons = useMemo(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]);
+    const calendarIcon = useMemo(() => ({
+        active: false,
+        show: true,
+        id: 'calendarIcon',
+        render: props => (_jsx(CalendarSVG, Object.assign({}, props, { size: calendarIconSize, className: styles.calendarIcon, "data-size": size }))),
+    }), [calendarIconSize, size]);
+    const memorizedButtons = useMemo(() => [clearButtonSettings, copyButtonSettings, calendarIcon], [clearButtonSettings, copyButtonSettings, calendarIcon]);
     const { value, handleChange, handleClick: dateInputClickHandler, handleKeyDown: dateInputKeyDownHandler, handleBlur: dateInputBlurHandler, mask, setInputFocus, } = useDateField({
         inputRef: localRef,
         onChange,
@@ -79,10 +85,10 @@ export const FieldDate = forwardRef((_a, ref) => {
         setIsOpen,
     });
     const setInputFocusFromButtons = useCallback(() => setInputFocus(SlotKey.Year), [setInputFocus]);
-    const { buttons, inputTabIndex, onInputKeyDown: navigationInputKeyDownHandler, setInitialTabIndices, } = useButtonNavigation({
+    const { postfixButtons, inputTabIndex, onInputKeyDown: navigationInputKeyDownHandler, setInitialTabIndices, } = useButtonNavigation({
         setInputFocus: setInputFocusFromButtons,
         inputRef: localRef,
-        buttons: memorizedButtons,
+        postfixButtons: memorizedButtons,
         onButtonKeyDown: checkForLeavingFocus,
         readonly,
         submitKeys: ['Enter', 'Space', 'Tab'],
@@ -145,5 +151,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: 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' }) }) })) })));
+                    }, 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: postfixButtons, 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/FieldSecure/FieldSecure.d.ts

@@ -21,5 +21,5 @@ type FieldSecureOwnProps = {
 export type FieldSecureProps = WithSupportProps<FieldSecureOwnProps & InputProps & WrapperProps>;
 export declare const FieldSecure: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string;
-} & import("react").AriaAttributes & FieldSecureOwnProps & Pick<Partial<InputPrivateProps>, "onChange" | "value"> & Pick<InputPrivateProps, "disabled" | "readonly" | "id" | "name" | "onFocus" | "onBlur" | "placeholder" | "autoComplete" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").AriaAttributes & FieldSecureOwnProps & Pick<Partial<InputPrivateProps>, "value" | "onChange"> & Pick<InputPrivateProps, "onFocus" | "onBlur" | "id" | "disabled" | "readonly" | "name" | "placeholder" | "autoComplete" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/FieldSecure/FieldSecure.js

@@ -104,11 +104,11 @@ export const FieldSecure = forwardRef((_a, ref) => {
         hidden,
         disabled: disabled || isLoading,
     });
-    const { buttons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
+    const { postfixButtons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
         inputRef: localRef,
-        buttons: useMemo(() => [copyButtonSettings, hideButtonSettings], [copyButtonSettings, hideButtonSettings]),
+        postfixButtons: useMemo(() => [copyButtonSettings, hideButtonSettings], [copyButtonSettings, hideButtonSettings]),
         readonly,
         submitKeys: ['Enter', 'Space', 'Tab'],
     });
-    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, 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(WithSkeleton, { skeleton: _jsx(Skeleton, { width: '100%', borderRadius: 2 }), loading: isLoading, 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', autoComplete: autoComplete }) }) }) })));
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, 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: postfixButtons, children: _jsx(WithSkeleton, { skeleton: _jsx(Skeleton, { width: '100%', borderRadius: 2 }), loading: isLoading, 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', autoComplete: autoComplete }) }) }) })));
 });

package/dist/components/FieldSelect/FieldSelectMultiple.d.ts

@@ -2,6 +2,8 @@ import { SelectedOptionFormatter } from './types';
 export declare const FieldSelectMultiple: import("react").ForwardRefExoticComponent<import("./types").InputProps & import("./types").WrapperProps & {
     options: import("./types").OptionProps[];
     loading?: boolean;
+    prefix?: import("react").ReactNode;
+    postfix?: import("react").ReactNode;
 } & {
     removeByBackspace?: boolean;
 } & Omit<import("@snack-uikit/list").SelectionMultipleState, "mode"> & Omit<{
@@ -25,4 +27,4 @@ export declare const FieldSelectMultiple: import("react").ForwardRefExoticCompon
     resetSearchOnOptionSelection?: boolean;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter;
-} & Pick<import("@snack-uikit/list").DroplistProps, "untouchableScrollbars" | "dataError" | "dataFiltered" | "noDataState" | "noResultsState" | "errorDataState">, "showCopyButton"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<import("@snack-uikit/list").DroplistProps, "untouchableScrollbars" | "dataFiltered" | "dataError" | "noDataState" | "noResultsState" | "errorDataState">, "showCopyButton"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/FieldSelectMultiple.js

@@ -18,7 +18,7 @@ import { Droplist } from '@snack-uikit/list';
 import { Tag } from '@snack-uikit/tag';
 import { extractSupportProps, isBrowser, useLayoutEffect } from '@snack-uikit/utils';
 import { FieldContainerPrivate } from '../../helperComponents';
-import { useValueControl } from '../../hooks';
+import { usePostfix, usePrefix, useValueControl } from '../../hooks';
 import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
@@ -32,7 +32,7 @@ const defaultSelectedOptionFormatter = item =>
 (item === null || item === void 0 ? void 0 : item.content.option) || '';
 export const FieldSelectMultiple = forwardRef((props, ref) => {
     var _a;
-    const { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable = true, showClearButton = true, onKeyDown: onInputKeyDownProp, validationState = 'default', search, autocomplete = false, prefixIcon, removeByBackspace = false, addOptionByEnter = false, untouchableScrollbars = false, open: openProp, enableFuzzySearch = true, resetSearchOnOptionSelection = true, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter } = props, rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "validationState", "search", "autocomplete", "prefixIcon", "removeByBackspace", "addOptionByEnter", "untouchableScrollbars", "open", "enableFuzzySearch", "resetSearchOnOptionSelection", "onOpenChange", "selectedOptionFormatter"]);
+    const { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable = true, showClearButton = true, onKeyDown: onInputKeyDownProp, validationState = 'default', search, autocomplete = false, prefixIcon, prefix, postfix, removeByBackspace = false, addOptionByEnter = false, untouchableScrollbars = false, open: openProp, enableFuzzySearch = true, resetSearchOnOptionSelection = true, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter } = props, rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showClearButton", "onKeyDown", "validationState", "search", "autocomplete", "prefixIcon", "prefix", "postfix", "removeByBackspace", "addOptionByEnter", "untouchableScrollbars", "open", "enableFuzzySearch", "resetSearchOnOptionSelection", "onOpenChange", "selectedOptionFormatter"]);
     const localRef = useRef(null);
     const inputPlugRef = useRef(null);
     const contentRef = useRef(null);
@@ -45,6 +45,8 @@ export const FieldSelectMultiple = forwardRef((props, ref) => {
     const [{ selectedItems, items = [] }, setItems] = useState(() => updateMultipleItems({ options, value, currentItems: [], selectedItems: undefined }));
     const { inputValue, setInputValue, prevInputValue, updateInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: '', selectedOptionFormatter,
         resetSearchOnOptionSelection }));
+    const prefixSettings = usePrefix({ prefix, disabled });
+    const postfixSettings = usePostfix({ postfix, disabled });
     useLayoutEffect(() => {
         setItems(({ selectedItems }) => updateMultipleItems({ options, value, selectedItems }));
     }, [options, value]);
@@ -57,7 +59,7 @@ export const FieldSelectMultiple = forwardRef((props, ref) => {
         }
     };
     const { ArrowIcon, arrowIconSize } = getArrowIcon({ size, open });
-    const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
+    const { postfixButtons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
         readonly,
         size,
         showClearButton: showClearButton && !disabled && !readonly && Boolean(selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.find(item => !item.disabled)),
@@ -135,7 +137,7 @@ export const FieldSelectMultiple = forwardRef((props, ref) => {
                 },
             }, dataFiltered: (_a = rest.dataFiltered) !== null && _a !== void 0 ? _a : Boolean(inputValue.length), untouchableScrollbars: untouchableScrollbars, 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: 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 &&
+                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 || prefixSettings.show) && (_jsxs(_Fragment, { children: [prefixIcon, prefixSettings.show && prefixSettings.render({ key: prefixSettings.id })] })), 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));
@@ -145,6 +147,6 @@ export const FieldSelectMultiple = forwardRef((props, ref) => {
                                                 : '100%',
                                         }, children: _jsx(InputPrivate, { id: id, name: name, type: 'text', disabled: disabled, placeholder: !selectedItems || !selectedItems.length ? placeholder : undefined, ref: mergeRefs(ref, localRef), onChange: searchable ? setInputValue : undefined, value: searchable ? inputValue : '', readonly: !searchable || 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 })] }), _jsx("span", { ref: inputPlugRef, className: styles.inputPlug, children: inputValue })] }) }));
+                                            }) }) })] }), _jsxs("div", { className: styles.postfix, children: [postfixButtons, postfixSettings.show && postfixSettings.render({ key: postfixSettings.id }), _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] }), _jsx("span", { ref: inputPlugRef, className: styles.inputPlug, children: inputValue })] }) }));
             } })) })));
 });

package/dist/components/FieldSelect/FieldSelectSingle.d.ts

@@ -2,6 +2,8 @@ import { SelectedOptionFormatter } from './types';
 export declare const FieldSelectSingle: import("react").ForwardRefExoticComponent<import("./types").InputProps & import("./types").WrapperProps & {
     options: import("./types").OptionProps[];
     loading?: boolean;
+    prefix?: import("react").ReactNode;
+    postfix?: import("react").ReactNode;
 } & Omit<import("@snack-uikit/list").SelectionSingleState, "mode"> & Omit<{
     'data-test-id'?: string;
 } & import("react").AriaAttributes & {
@@ -23,4 +25,4 @@ export declare const FieldSelectSingle: import("react").ForwardRefExoticComponen
     resetSearchOnOptionSelection?: boolean;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter;
-} & Pick<import("@snack-uikit/list").DroplistProps, "untouchableScrollbars" | "dataError" | "dataFiltered" | "noDataState" | "noResultsState" | "errorDataState">, "resetSearchOnOptionSelection"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<import("@snack-uikit/list").DroplistProps, "untouchableScrollbars" | "dataFiltered" | "dataError" | "noDataState" | "noResultsState" | "errorDataState">, "resetSearchOnOptionSelection"> & import("react").RefAttributes<HTMLInputElement>>;

package/dist/components/FieldSelect/FieldSelectSingle.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import cn from 'classnames';
 import mergeRefs from 'merge-refs';
 import { forwardRef, useCallback, useEffect, useRef, useState, } from 'react';
@@ -17,7 +17,7 @@ import { InputPrivate } from '@snack-uikit/input-private';
 import { Droplist } from '@snack-uikit/list';
 import { extractSupportProps, isBrowser, useLayoutEffect } from '@snack-uikit/utils';
 import { FieldContainerPrivate } from '../../helperComponents';
-import { useValueControl } from '../../hooks';
+import { usePostfix, usePrefix, useValueControl } from '../../hooks';
 import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import { extractFieldDecoratorProps } from '../FieldDecorator/utils';
@@ -29,7 +29,7 @@ const defaultSelectedOptionFormatter = item =>
 // @ts-expect-error
 (item === null || item === void 0 ? void 0 : item.content.option) || '';
 export const FieldSelectSingle = forwardRef((props, ref) => {
-    const { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable = true, showCopyButton = true, showClearButton = true, onKeyDown: onInputKeyDownProp, required = false, validationState = 'default', search, autocomplete = false, prefixIcon, addOptionByEnter = false, untouchableScrollbars = false, open: openProp, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter, enableFuzzySearch = true } = props, rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "required", "validationState", "search", "autocomplete", "prefixIcon", "addOptionByEnter", "untouchableScrollbars", "open", "onOpenChange", "selectedOptionFormatter", "enableFuzzySearch"]);
+    const { id, name, placeholder, size = 's', options, value: valueProp, defaultValue, onChange: onChangeProp, disabled = false, readonly = false, searchable = true, showCopyButton = true, showClearButton = true, onKeyDown: onInputKeyDownProp, required = false, validationState = 'default', search, autocomplete = false, prefixIcon, prefix, postfix, addOptionByEnter = false, untouchableScrollbars = false, open: openProp, onOpenChange, selectedOptionFormatter = defaultSelectedOptionFormatter, enableFuzzySearch = true } = props, rest = __rest(props, ["id", "name", "placeholder", "size", "options", "value", "defaultValue", "onChange", "disabled", "readonly", "searchable", "showCopyButton", "showClearButton", "onKeyDown", "required", "validationState", "search", "autocomplete", "prefixIcon", "prefix", "postfix", "addOptionByEnter", "untouchableScrollbars", "open", "onOpenChange", "selectedOptionFormatter", "enableFuzzySearch"]);
     const localRef = useRef(null);
     const [open = false, setOpen] = useValueControl({ value: openProp, onChange: onOpenChange });
     const [value, setValue] = useValueControl({
@@ -40,6 +40,8 @@ export const FieldSelectSingle = forwardRef((props, ref) => {
     const [{ selectedItem, items = [] }, setItems] = useState(() => updateItems({ options, value, currentItems: [], selectedItem: undefined }));
     const { inputValue, setInputValue, prevInputValue, updateInputValue } = useSearchInput(Object.assign(Object.assign({}, search), { defaultValue: selectedOptionFormatter(selectedItem), selectedOptionFormatter }));
     const prevSelectedItem = useRef(selectedItem);
+    const prefixSettings = usePrefix({ prefix, disabled });
+    const postfixSettings = usePostfix({ postfix, disabled });
     useLayoutEffect(() => {
         setItems(({ selectedItem }) => updateItems({ options, value, selectedItem }));
     }, [options, value]);
@@ -64,7 +66,7 @@ export const FieldSelectSingle = forwardRef((props, ref) => {
         }
     }, [required, setOpen, setValue]);
     const { ArrowIcon, arrowIconSize } = getArrowIcon({ size, open });
-    const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
+    const { postfixButtons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
         readonly,
         size,
         showClearButton: showClearButton && !disabled && !readonly && value !== undefined,
@@ -126,7 +128,7 @@ export const FieldSelectSingle = forwardRef((props, ref) => {
                 mode: 'single',
                 value: value,
                 onChange: handleSelectionChange,
-            }, size: size, open: open, onOpenChange: handleOpenChange, trigger: 'click', triggerElemRef: localRef, untouchableScrollbars: untouchableScrollbars, 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({
+            }, size: size, open: open, onOpenChange: handleOpenChange, trigger: 'click', triggerElemRef: localRef, untouchableScrollbars: untouchableScrollbars, 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 || prefixSettings.show) && (_jsxs(_Fragment, { children: [prefixIcon, prefixSettings.show && prefixSettings.render({ key: prefixSettings.id })] })), 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 })] })] })) })) })));
+                        }) }), _jsxs("div", { className: styles.postfix, children: [postfixButtons, postfixSettings.show && postfixSettings.render({ key: postfixSettings.id }), _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] })] })) })) })));
 });

package/dist/components/FieldSelect/hooks.d.ts

@@ -18,7 +18,7 @@ type UseButtonsProps = {
     valueToCopy?: string;
 };
 export declare function useButtons({ readonly, showClearButton, showCopyButton, size, onClear, inputRef, valueToCopy, }: UseButtonsProps): {
-    buttons: import("react/jsx-runtime").JSX.Element;
+    postfixButtons: import("react/jsx-runtime").JSX.Element | undefined;
     inputKeyDownNavigationHandler: KeyboardEventHandler<HTMLInputElement>;
     buttonsRefs: (Element | null)[];
 };

package/dist/components/FieldSelect/hooks.js

@@ -42,14 +42,14 @@ export function useButtons({ readonly, showClearButton, showCopyButton, size, on
         size,
         valueToCopy,
     });
-    const { onInputKeyDown: inputKeyDownNavigationHandler, buttons } = useButtonNavigation({
+    const { onInputKeyDown: inputKeyDownNavigationHandler, postfixButtons } = useButtonNavigation({
         inputRef,
-        buttons: useMemo(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
+        postfixButtons: useMemo(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
         onButtonKeyDown: undefined,
         readonly,
         submitKeys: ['Enter', 'Space', 'Tab'],
     });
-    return { buttons, inputKeyDownNavigationHandler, buttonsRefs };
+    return { postfixButtons, inputKeyDownNavigationHandler, buttonsRefs };
 }
 export function useSearchInput({ value, onChange, defaultValue, selectedOptionFormatter, resetSearchOnOptionSelection = true, }) {
     const [inputValue = '', setInputValue] = useValueControl({ value, onChange, defaultValue });

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

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import { AccordionItemProps, BaseItemProps, DroplistProps, GroupItemProps, ItemContentProps, NextListItemProps, SelectionMultipleState, SelectionSingleState } from '@snack-uikit/list';
 import { TagProps } from '@snack-uikit/tag';
@@ -34,6 +34,10 @@ export type SearchState = {
 export type FieldSelectPrivateProps = InputProps & WrapperProps & {
     options: OptionProps[];
     loading?: boolean;
+    /** Произвольный префикс для поля */
+    prefix?: ReactNode;
+    /** Произвольный постфикс для поля */
+    postfix?: ReactNode;
 };
 type FiledSelectCommonProps = WithSupportProps<{
     options: OptionProps[];

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

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import { SliderProps as SliderComponentProps } from '@snack-uikit/slider';
 import { WithSupportProps } from '@snack-uikit/utils';
@@ -15,9 +15,13 @@ type FieldSliderOwnProps = {
     textInputFormatter?: TextInputFormatter;
     /** Отвязать текстовое поле от значений на линейке */
     unbindInputFromMarks?: boolean;
+    /** Произвольный префикс для поля */
+    prefix?: ReactNode;
+    /** Произвольный постфикс для поля */
+    postfix?: ReactNode;
 };
 export type FieldSliderProps = WithSupportProps<FieldSliderOwnProps & SliderProps & WrapperProps>;
 export declare const FieldSlider: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string;
-} & import("react").AriaAttributes & FieldSliderOwnProps & Pick<InputPrivateProps, "disabled" | "readonly" | "id" | "name" | "onFocus" | "onBlur"> & Pick<SliderComponentProps, "onChange" | "value" | "range" | "tipFormatter"> & Required<Pick<SliderComponentProps, "max" | "min" | "step" | "marks">> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").AriaAttributes & FieldSliderOwnProps & Pick<InputPrivateProps, "onFocus" | "onBlur" | "id" | "disabled" | "readonly" | "name"> & Pick<SliderComponentProps, "value" | "onChange" | "range" | "tipFormatter"> & Required<Pick<SliderComponentProps, "max" | "min" | "step" | "marks">> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/FieldSlider/FieldSlider.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import mergeRefs from 'merge-refs';
 import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { InputPrivate, SIZE } from '@snack-uikit/input-private';
@@ -17,7 +17,7 @@ import { Slider } from '@snack-uikit/slider';
 import { extractSupportProps, useEventHandler } from '@snack-uikit/utils';
 import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
-import { useValueControl } from '../../hooks';
+import { usePostfix, usePrefix, useValueControl } from '../../hooks';
 import { FieldDecorator } from '../FieldDecorator';
 import { generateAllowedValues, getClosestMark, getTextFieldValue, isMarkObject } from './helpers';
 import styles from './styles.module.css';
@@ -31,7 +31,16 @@ const getDefaultValue = (range, min, max, value) => {
     return value !== null && value !== void 0 ? value : min;
 };
 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, caption, hint, showHintIcon, size = SIZE.S, postfixIcon, textInputFormatter, unbindInputFromMarks } = _a, rest = __rest(_a, ["id", "name", "min", "max", "step", "marks", "showScaleBar", "value", "range", "disabled", "readonly", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "postfixIcon", "textInputFormatter", "unbindInputFromMarks"]);
+    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, caption, hint, showHintIcon, size = SIZE.S, textInputFormatter, unbindInputFromMarks, postfixIcon, prefix, postfix } = _a, rest = __rest(_a, ["id", "name", "min", "max", "step", "marks", "showScaleBar", "value", "range", "disabled", "readonly", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "textInputFormatter", "unbindInputFromMarks", "postfixIcon", "prefix", "postfix"]);
+    const [value = getDefaultValue(range, min, max, valueProp), onChange] = useValueControl({
+        value: valueProp,
+        defaultValue: getDefaultValue(range, min, max, valueProp),
+        onChange: onChangeProp,
+    });
+    const [textFieldInputValue, setTextFieldInputValue] = useState(getTextFieldValue(value, textInputFormatter));
+    const localRef = useRef(null);
+    const prefixSettings = usePrefix({ prefix, disabled });
+    const postfixSettings = usePostfix({ postfix, disabled });
     const getMarkValue = useCallback((key) => {
         const mark = marks[key];
         if (isMarkObject(mark)) {
@@ -40,13 +49,6 @@ export const FieldSlider = forwardRef((_a, ref) => {
         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),
-        onChange: onChangeProp,
-    });
-    const [textFieldInputValue, setTextFieldInputValue] = useState(getTextFieldValue(value, textInputFormatter));
-    const localRef = useRef(null);
     const onTextFieldChange = (textFieldValue) => {
         const numValue = parseInt(textFieldValue);
         if (textFieldValue && Number.isNaN(numValue)) {
@@ -146,5 +148,5 @@ export const FieldSlider = forwardRef((_a, ref) => {
     useEffect(() => {
         handleTextValueChange();
     }, [marks, min, max, handleTextValueChange]);
-    return (_jsxs(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, disabled: disabled, required: required, caption: caption, hint: hint, showHintIcon: showHintIcon, readonly: readonly, size: size }, extractSupportProps(rest), { children: [_jsx(FieldContainerPrivate, { className: styles.fieldContainer, size: size, validationState: VALIDATION_STATE.Default, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: localRef, postfix: postfixIcon, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: textFieldInputValue, onChange: range ? undefined : onTextFieldChange, onFocus: onFocus, onBlur: range ? onBlur : onTextFieldBlur, onKeyDown: handleTextFieldKeyChange, disabled: disabled, readonly: range ? true : readonly, type: 'text', id: id, name: name, "data-test-id": 'field-slider__input' }) }), _jsx("div", { className: styles.sliderWrapper, children: _jsx("div", { className: styles.slider, "data-size": size, children: _jsx(Slider, { range: range, min: min, max: max, step: step, value: value, onChange: onChange, marks: showScaleBar ? marks : undefined, disabled: readonly || disabled, "data-test-id": 'field-slider__slider' }) }) })] })));
+    return (_jsxs(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, disabled: disabled, required: required, caption: caption, hint: hint, showHintIcon: showHintIcon, readonly: readonly, size: size }, extractSupportProps(rest), { children: [_jsx(FieldContainerPrivate, { className: styles.fieldContainer, size: size, validationState: VALIDATION_STATE.Default, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: localRef, prefix: prefixSettings.show && prefixSettings.render({ key: prefixSettings.id }), postfix: _jsxs(_Fragment, { children: [postfixSettings.show && postfixSettings.render({ key: postfixSettings.id }), postfixIcon] }), children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: textFieldInputValue, onChange: range ? undefined : onTextFieldChange, onFocus: onFocus, onBlur: range ? onBlur : onTextFieldBlur, onKeyDown: handleTextFieldKeyChange, disabled: disabled, readonly: range ? true : readonly, type: 'text', id: id, name: name, "data-test-id": 'field-slider__input' }) }), _jsx("div", { className: styles.sliderWrapper, children: _jsx("div", { className: styles.slider, "data-size": size, children: _jsx(Slider, { range: range, min: min, max: max, step: step, value: value, onChange: onChange, marks: showScaleBar ? marks : undefined, disabled: readonly || disabled, "data-test-id": 'field-slider__slider' }) }) })] })));
 });

package/dist/components/FieldStepper/FieldStepper.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, ReactNode } from 'react';
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { FieldDecoratorProps } from '../FieldDecorator';
@@ -13,6 +13,10 @@ type FieldStepperOwnProps = {
     step?: number;
     /** Можно ли вводить c клавиатуры числа, выходящие за пределы min/max */
     allowMoreThanLimits?: boolean;
+    /** Произвольный префикс для поля */
+    prefix?: ReactNode;
+    /** Произвольный постфикс для поля */
+    postfix?: ReactNode;
 };
 export type FieldStepperProps = WithSupportProps<FieldStepperOwnProps & InputProps & WrapperProps>;
 export declare const FieldStepper: import("react").ForwardRefExoticComponent<{

package/dist/components/FieldStepper/FieldStepper.js

@@ -9,7 +9,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import mergeRefs from 'merge-refs';
 import { forwardRef, useEffect, useRef, useState, } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
@@ -20,7 +20,7 @@ import { Tooltip } from '@snack-uikit/tooltip';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
-import { useValueControl } from '../../hooks';
+import { usePostfix, usePrefix, useValueControl } from '../../hooks';
 import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 import styles from './styles.module.css';
@@ -35,7 +35,7 @@ const getDefaultValue = (min, max) => {
     return 0;
 };
 export const FieldStepper = forwardRef((_a, ref) => {
-    var { id, name, value: valueProp, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY, step = 1, disabled = false, readonly = false, allowMoreThanLimits = true, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, error } = _a, rest = __rest(_a, ["id", "name", "value", "min", "max", "step", "disabled", "readonly", "allowMoreThanLimits", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error"]);
+    var { id, name, value: valueProp, min = Number.NEGATIVE_INFINITY, max = Number.POSITIVE_INFINITY, step = 1, disabled = false, readonly = false, allowMoreThanLimits = true, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, caption, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default, error, prefix, postfix } = _a, rest = __rest(_a, ["id", "name", "value", "min", "max", "step", "disabled", "readonly", "allowMoreThanLimits", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "prefix", "postfix"]);
     const { t } = useLocale('Fields');
     const [value = 0, setValue] = useValueControl({
         value: valueProp,
@@ -50,6 +50,8 @@ 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 prefixSettings = usePrefix({ prefix, disabled });
+    const postfixSettings = usePostfix({ postfix, disabled });
     const fieldValidationState = getValidationState({ validationState, error });
     const adjustValue = (value) => {
         setValue(value);
@@ -124,5 +126,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, caption: caption, 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' }) }) }) })));
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, caption: caption, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: 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: _jsxs(_Fragment, { children: [_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' }), prefixSettings.show && prefixSettings.render({ key: prefixSettings.id })] }), postfix: _jsxs(_Fragment, { children: [postfixSettings.show && postfixSettings.render({ key: postfixSettings.id }), _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.d.ts

@@ -1,6 +1,7 @@
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
+import { Button } from '../../types';
 import { FieldDecoratorProps } from '../FieldDecorator';
 type InputProps = Pick<Partial<InputPrivateProps>, 'value' | 'onChange'> & Pick<InputPrivateProps, 'id' | 'name' | 'placeholder' | 'maxLength' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'autoComplete'>;
 type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'caption' | 'hint' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement' | 'error'>;
@@ -16,9 +17,15 @@ type FieldTextOwnProps = {
     allowMoreThanMaxLength?: boolean;
     /** Иконка-префикс для поля */
     prefixIcon?: ReactElement;
+    /** Произвольный префикс для поля */
+    prefix?: ReactNode;
+    /** Произвольный постфикс для поля */
+    postfix?: ReactNode;
+    /** Кнопка действия внутри поля */
+    button?: Button;
 };
 export type FieldTextProps = WithSupportProps<FieldTextOwnProps & InputProps & WrapperProps>;
 export declare const FieldText: import("react").ForwardRefExoticComponent<{
     'data-test-id'?: string;
-} & import("react").AriaAttributes & FieldTextOwnProps & Pick<Partial<InputPrivateProps>, "onChange" | "value"> & Pick<InputPrivateProps, "disabled" | "readonly" | "id" | "name" | "onFocus" | "onBlur" | "placeholder" | "autoComplete" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
+} & import("react").AriaAttributes & FieldTextOwnProps & Pick<Partial<InputPrivateProps>, "value" | "onChange"> & Pick<InputPrivateProps, "onFocus" | "onBlur" | "id" | "disabled" | "readonly" | "name" | "placeholder" | "autoComplete" | "maxLength"> & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};