@snack-uikit/fields 0.28.0 → 0.29.0

package/dist/hooks/usePostfix.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import styles from './styles.module.css';
+export function usePostfix({ postfix, disabled }) {
+    return useMemo(() => ({
+        id: 'postfix',
+        active: false,
+        show: Boolean(postfix),
+        render: props => (_jsx("div", Object.assign({}, props, { className: styles.postfix, "data-test-id": 'field-postfix', "data-disabled": disabled || undefined, children: postfix }))),
+    }), [disabled, postfix]);
+}

package/dist/hooks/usePostfixButton.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { ButtonProps, Size } from '@snack-uikit/input-private';
+import { ButtonFieldProps } from '../helperComponents';
+import { Button } from '../types';
+export declare function usePostfixButton({ button, size, postfixIcon, disabled, readonly, onFocus, onBlur, }: {
+    button?: Button;
+    size: Size;
+    postfixIcon?: ReactElement;
+    disabled?: boolean;
+    readonly?: boolean;
+} & Pick<ButtonFieldProps, 'onFocus' | 'onBlur'>): ButtonProps;

package/dist/hooks/usePostfixButton.js

@@ -0,0 +1,28 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useRef } from 'react';
+import { ButtonField, ButtonFieldList } from '../helperComponents';
+export function usePostfixButton({ button, size, postfixIcon, disabled, readonly, onFocus, onBlur, }) {
+    const buttonListRef = useRef(null);
+    const postfixIconProps = useMemo(() => ({
+        id: 'postfixIcon',
+        active: false,
+        show: Boolean(postfixIcon && !button),
+        render: () => _jsx(_Fragment, { children: postfixIcon }),
+    }), [button, postfixIcon]);
+    const postfixButtonProps = useMemo(() => ({
+        id: 'postfixButton',
+        active: false,
+        show: Boolean(button && button.variant === 'after'),
+        render: renderProps => {
+            const buttonProps = Object.assign(Object.assign({}, renderProps), { variant: 'after', size, content: button === null || button === void 0 ? void 0 : button.content, disabled: disabled || readonly, onFocus,
+                onBlur });
+            if (button === null || button === void 0 ? void 0 : button.items) {
+                return (_jsx(ButtonFieldList, Object.assign({}, buttonProps, { ref: buttonListRef, onClick: () => {
+                        setTimeout(() => { var _a; return (_a = buttonListRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+                    }, items: button.items, selection: button.selection, open: button.open, onOpenChange: button.onOpenChange })));
+            }
+            return _jsx(ButtonField, Object.assign({}, buttonProps));
+        },
+    }), [button, size, disabled, readonly, onFocus, onBlur]);
+    return button ? postfixButtonProps : postfixIconProps;
+}

package/dist/hooks/usePrefix.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+import { InactiveItem } from '@snack-uikit/input-private';
+export declare function usePrefix({ prefix, disabled }: {
+    prefix?: ReactNode;
+    disabled?: boolean;
+}): InactiveItem;

package/dist/hooks/usePrefix.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import styles from './styles.module.css';
+export function usePrefix({ prefix, disabled }) {
+    return useMemo(() => ({
+        id: 'prefix',
+        active: false,
+        show: Boolean(prefix),
+        render: props => (_jsx("div", Object.assign({}, props, { "data-test-id": 'field-prefix', className: styles.prefix, "data-disabled": disabled || undefined, children: prefix }))),
+    }), [disabled, prefix]);
+}

package/dist/hooks/usePrefixButton.d.ts

@@ -0,0 +1,11 @@
+import { ReactElement } from 'react';
+import { ButtonProps, Size } from '@snack-uikit/input-private';
+import { ButtonFieldProps } from '../helperComponents';
+import { Button } from '../types';
+export declare function usePrefixButton({ button, prefixIcon, size, disabled, readonly, onFocus, onBlur, }: {
+    button?: Button;
+    prefixIcon?: ReactElement;
+    size: Size;
+    disabled?: boolean;
+    readonly?: boolean;
+} & Pick<ButtonFieldProps, 'onFocus' | 'onBlur'>): ButtonProps;

package/dist/hooks/usePrefixButton.js

@@ -0,0 +1,28 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useRef } from 'react';
+import { ButtonField, ButtonFieldList } from '../helperComponents';
+export function usePrefixButton({ button, prefixIcon, size, disabled, readonly, onFocus, onBlur, }) {
+    const buttonListRef = useRef(null);
+    const prefixIconProps = useMemo(() => ({
+        id: 'prefixIcon',
+        active: false,
+        show: Boolean(prefixIcon && !button),
+        render: () => _jsx(_Fragment, { children: prefixIcon }),
+    }), [button, prefixIcon]);
+    const prefixButtonProps = useMemo(() => ({
+        id: 'prefixButton',
+        active: false,
+        show: Boolean(button && button.variant === 'before'),
+        render: renderProps => {
+            const buttonProps = Object.assign(Object.assign({}, renderProps), { variant: 'before', size, content: button === null || button === void 0 ? void 0 : button.content, disabled: disabled || readonly, onFocus,
+                onBlur });
+            if (button === null || button === void 0 ? void 0 : button.items) {
+                return (_jsx(ButtonFieldList, Object.assign({}, buttonProps, { ref: buttonListRef, onClick: () => {
+                        setTimeout(() => { var _a; return (_a = buttonListRef.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 0);
+                    }, items: button.items, selection: button.selection, open: button.open, onOpenChange: button.onOpenChange })));
+            }
+            return _jsx(ButtonField, Object.assign({}, buttonProps));
+        },
+    }), [button, size, disabled, readonly, onFocus, onBlur]);
+    return button ? prefixButtonProps : prefixIconProps;
+}

package/dist/types.d.ts

@@ -1,8 +1,19 @@
+import { ReactNode } from 'react';
+import { DroplistProps, SelectionSingleState } from '@snack-uikit/list';
 import { ValueOf } from '@snack-uikit/utils';
-import { CONTAINER_VARIANT, VALIDATION_STATE } from './constants';
+import { BUTTON_VARIANT, CONTAINER_VARIANT, VALIDATION_STATE } from './constants';
 export type ValidationState = ValueOf<typeof VALIDATION_STATE>;
 export type ContainerVariant = ValueOf<typeof CONTAINER_VARIANT>;
+export type ButtonVariant = ValueOf<typeof BUTTON_VARIANT>;
 export type AsyncValueRequest = Promise<{
     success: boolean;
     value?: string;
 }>;
+export type NativeDroplistProps = Pick<DroplistProps, 'items' | 'open' | 'onOpenChange'> & {
+    selection?: Omit<SelectionSingleState, 'mode'>;
+};
+export type Button = Omit<NativeDroplistProps, 'items'> & {
+    variant: ButtonVariant;
+    content?: ReactNode;
+    items?: DroplistProps['items'];
+};

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.28.0",
+  "version": "0.29.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -34,11 +34,12 @@
   "dependencies": {
     "@snack-uikit/button": "0.17.5",
     "@snack-uikit/calendar": "0.7.12",
-    "@snack-uikit/color-picker": "0.1.0",
+    "@snack-uikit/color-picker": "0.1.1",
+    "@snack-uikit/divider": "3.0.4",
     "@snack-uikit/dropdown": "0.2.7",
     "@snack-uikit/icons": "0.22.1",
-    "@snack-uikit/input-private": "3.2.1",
-    "@snack-uikit/list": "0.16.4",
+    "@snack-uikit/input-private": "4.0.0",
+    "@snack-uikit/list": "0.17.0",
     "@snack-uikit/scroll": "0.6.2",
     "@snack-uikit/skeleton": "0.3.5",
     "@snack-uikit/slider": "0.1.18",
@@ -60,5 +61,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "6f68e2729e48e5b34674af649dc9dfb3bda3951f"
+  "gitHead": "36a86f3bf30c115e8c6b49f6c8d7a2d2ffb86ff1"
 }

package/src/components/FieldColor/FieldColor.tsx

@@ -111,9 +111,12 @@ export const FieldColor = forwardRef<HTMLInputElement, FieldColorProps>(
 
     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'],
     });
@@ -175,7 +178,7 @@ export const FieldColor = forwardRef<HTMLInputElement, FieldColorProps>(
             variant={CONTAINER_VARIANT.SingleLine}
             focused={showDropList}
             inputRef={localRef}
-            postfix={buttons}
+            postfix={postfixButtons}
             prefix={
               <div
                 className={styles.colorPreview}

package/src/components/FieldDate/FieldDate.tsx

@@ -16,6 +16,7 @@ import { Calendar, CalendarProps } from '@snack-uikit/calendar';
 import { Dropdown } from '@snack-uikit/dropdown';
 import { CalendarSVG } from '@snack-uikit/icons';
 import {
+  ButtonProps,
   ICON_SIZE,
   InputPrivate,
   InputPrivateProps,
@@ -154,10 +155,21 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
 
     const clearButtonSettings = useClearButton({ clearButtonRef, showClearButton, size, onClear: handleClear });
     const copyButtonSettings = useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy: valueProp || '' });
+    const calendarIcon: ButtonProps = useMemo(
+      () => ({
+        active: false,
+        show: true,
+        id: 'calendarIcon',
+        render: props => (
+          <CalendarSVG {...props} size={calendarIconSize} className={styles.calendarIcon} data-size={size} />
+        ),
+      }),
+      [calendarIconSize, size],
+    );
 
     const memorizedButtons = useMemo(
-      () => [clearButtonSettings, copyButtonSettings],
-      [clearButtonSettings, copyButtonSettings],
+      () => [clearButtonSettings, copyButtonSettings, calendarIcon],
+      [clearButtonSettings, copyButtonSettings, calendarIcon],
     );
 
     const {
@@ -179,14 +191,14 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
     const setInputFocusFromButtons = useCallback(() => setInputFocus(SlotKey.Year), [setInputFocus]);
 
     const {
-      buttons,
+      postfixButtons,
       inputTabIndex,
       onInputKeyDown: navigationInputKeyDownHandler,
       setInitialTabIndices,
     } = useButtonNavigation({
       setInputFocus: setInputFocusFromButtons,
       inputRef: localRef,
-      buttons: memorizedButtons,
+      postfixButtons: memorizedButtons,
       onButtonKeyDown: checkForLeavingFocus,
       readonly,
       submitKeys: ['Enter', 'Space', 'Tab'],
@@ -311,12 +323,7 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
             variant={CONTAINER_VARIANT.SingleLine}
             focused={showDropList}
             inputRef={localRef}
-            postfix={
-              <>
-                {buttons}
-                <CalendarSVG size={calendarIconSize} className={styles.calendarIcon} data-size={size} />
-              </>
-            }
+            postfix={postfixButtons}
           >
             <InputPrivate
               ref={mergeRefs(ref, localRef)}

package/src/components/FieldSecure/FieldSecure.tsx

@@ -177,9 +177,9 @@ export const FieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
       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'],
     });
@@ -211,7 +211,7 @@ export const FieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
           variant={CONTAINER_VARIANT.SingleLine}
           inputRef={localRef}
           prefix={prefixIcon}
-          postfix={buttons}
+          postfix={postfixButtons}
         >
           <WithSkeleton skeleton={<Skeleton width='100%' borderRadius={2} />} loading={isLoading}>
             <InputPrivate

package/src/components/FieldSelect/FieldSelectMultiple.tsx

@@ -8,7 +8,7 @@ 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';
@@ -43,6 +43,8 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
     search,
     autocomplete = false,
     prefixIcon,
+    prefix,
+    postfix,
     removeByBackspace = false,
     addOptionByEnter = false,
     untouchableScrollbars = false,
@@ -77,6 +79,9 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
     resetSearchOnOptionSelection,
   });
 
+  const prefixSettings = usePrefix({ prefix, disabled });
+  const postfixSettings = usePostfix({ postfix, disabled });
+
   useLayoutEffect(() => {
     setItems(({ selectedItems }) => updateMultipleItems({ options, value, selectedItems }));
   }, [options, value]);
@@ -92,7 +97,7 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
 
   const { ArrowIcon, arrowIconSize } = getArrowIcon({ size, open });
 
-  const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
+  const { postfixButtons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
     readonly,
     size,
     showClearButton: showClearButton && !disabled && !readonly && Boolean(selectedItems?.find(item => !item.disabled)),
@@ -208,7 +213,14 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
             variant='single-line-container'
             inputRef={localRef}
             size={size}
-            prefix={prefixIcon}
+            prefix={
+              (prefixIcon || prefixSettings.show) && (
+                <>
+                  {prefixIcon}
+                  {prefixSettings.show && prefixSettings.render({ key: prefixSettings.id })}
+                </>
+              )
+            }
           >
             <>
               <div className={styles.contentWrapper} ref={contentRef}>
@@ -256,7 +268,8 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
               </div>
 
               <div className={styles.postfix}>
-                {buttons}
+                {postfixButtons}
+                {postfixSettings.show && postfixSettings.render({ key: postfixSettings.id })}
                 <ArrowIcon size={arrowIconSize} className={styles.arrowIcon} />
               </div>
 

package/src/components/FieldSelect/FieldSelectSingle.tsx

@@ -16,7 +16,7 @@ import { Droplist, ItemProps, SelectionSingleValueType } 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';
@@ -51,6 +51,8 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
     search,
     autocomplete = false,
     prefixIcon,
+    prefix,
+    postfix,
     addOptionByEnter = false,
     untouchableScrollbars = false,
     open: openProp,
@@ -80,6 +82,9 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
 
   const prevSelectedItem = useRef<ItemWithId | undefined>(selectedItem);
 
+  const prefixSettings = usePrefix({ prefix, disabled });
+  const postfixSettings = usePostfix({ postfix, disabled });
+
   useLayoutEffect(() => {
     setItems(({ selectedItem }) => updateItems({ options, value, selectedItem }));
   }, [options, value]);
@@ -111,7 +116,7 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
 
   const { ArrowIcon, arrowIconSize } = getArrowIcon({ size, open });
 
-  const { buttons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
+  const { postfixButtons, inputKeyDownNavigationHandler, buttonsRefs } = useButtons({
     readonly,
     size,
     showClearButton: showClearButton && !disabled && !readonly && value !== undefined,
@@ -215,7 +220,14 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
             variant={'single-line-container'}
             inputRef={localRef}
             size={size}
-            prefix={prefixIcon}
+            prefix={
+              (prefixIcon || prefixSettings.show) && (
+                <>
+                  {prefixIcon}
+                  {prefixSettings.show && prefixSettings.render({ key: prefixSettings.id })}
+                </>
+              )
+            }
           >
             <InputPrivate
               id={id}
@@ -236,7 +248,8 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
             />
 
             <div className={styles.postfix}>
-              {buttons}
+              {postfixButtons}
+              {postfixSettings.show && postfixSettings.render({ key: postfixSettings.id })}
               <ArrowIcon size={arrowIconSize} className={styles.arrowIcon} />
             </div>
           </FieldContainerPrivate>

package/src/components/FieldSelect/hooks.ts

@@ -90,15 +90,15 @@ export function useButtons({
     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({

package/src/components/FieldSelect/types.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 
 import { InputPrivateProps } from '@snack-uikit/input-private';
 import {
@@ -79,7 +79,15 @@ export type SearchState = {
   onChange?(value: string): void;
 };
 
-export type FieldSelectPrivateProps = InputProps & WrapperProps & { options: OptionProps[]; loading?: boolean };
+export type FieldSelectPrivateProps = InputProps &
+  WrapperProps & {
+    options: OptionProps[];
+    loading?: boolean;
+    /** Произвольный префикс для поля */
+    prefix?: ReactNode;
+    /** Произвольный постфикс для поля */
+    postfix?: ReactNode;
+  };
 
 type FiledSelectCommonProps = WithSupportProps<{
   options: OptionProps[];

package/src/components/FieldSlider/FieldSlider.tsx

@@ -4,6 +4,7 @@ import {
   forwardRef,
   KeyboardEvent,
   ReactElement,
+  ReactNode,
   useCallback,
   useEffect,
   useMemo,
@@ -17,7 +18,7 @@ import { extractSupportProps, useEventHandler, WithSupportProps } from '@snack-u
 
 import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
-import { useValueControl } from '../../hooks';
+import { usePostfix, usePrefix, useValueControl } from '../../hooks';
 import { FieldDecorator, FieldDecoratorProps } from '../FieldDecorator';
 import { generateAllowedValues, getClosestMark, getTextFieldValue, isMarkObject } from './helpers';
 import styles from './styles.module.scss';
@@ -49,6 +50,10 @@ type FieldSliderOwnProps = {
   textInputFormatter?: TextInputFormatter;
   /** Отвязать текстовое поле от значений на линейке */
   unbindInputFromMarks?: boolean;
+  /** Произвольный префикс для поля */
+  prefix?: ReactNode;
+  /** Произвольный постфикс для поля */
+  postfix?: ReactNode;
 };
 
 export type FieldSliderProps = WithSupportProps<FieldSliderOwnProps & SliderProps & WrapperProps>;
@@ -96,13 +101,29 @@ export const FieldSlider = forwardRef<HTMLInputElement, FieldSliderProps>(
       hint,
       showHintIcon,
       size = SIZE.S,
-      postfixIcon,
       textInputFormatter,
       unbindInputFromMarks,
+      postfixIcon,
+      prefix,
+      postfix,
       ...rest
     },
     ref,
   ) => {
+    const [value = getDefaultValue(range, min, max, valueProp), onChange] = useValueControl<number | number[]>({
+      value: valueProp,
+      defaultValue: getDefaultValue(range, min, max, valueProp),
+      onChange: onChangeProp,
+    });
+
+    const [textFieldInputValue, setTextFieldInputValue] = useState<string>(
+      getTextFieldValue(value, textInputFormatter),
+    );
+    const localRef = useRef<HTMLInputElement>(null);
+
+    const prefixSettings = usePrefix({ prefix, disabled });
+    const postfixSettings = usePostfix({ postfix, disabled });
+
     const getMarkValue = useCallback(
       (key: keyof SliderProps['marks']) => {
         const mark = marks[key];
@@ -121,17 +142,6 @@ export const FieldSlider = forwardRef<HTMLInputElement, FieldSliderProps>(
       [getMarkValue, marks],
     );
 
-    const [value = getDefaultValue(range, min, max, valueProp), onChange] = useValueControl<number | number[]>({
-      value: valueProp,
-      defaultValue: getDefaultValue(range, min, max, valueProp),
-      onChange: onChangeProp,
-    });
-
-    const [textFieldInputValue, setTextFieldInputValue] = useState<string>(
-      getTextFieldValue(value, textInputFormatter),
-    );
-    const localRef = useRef<HTMLInputElement>(null);
-
     const onTextFieldChange = (textFieldValue: string) => {
       const numValue = parseInt(textFieldValue);
 
@@ -280,7 +290,13 @@ export const FieldSlider = forwardRef<HTMLInputElement, FieldSliderProps>(
           readonly={readonly}
           variant={CONTAINER_VARIANT.SingleLine}
           inputRef={localRef}
-          postfix={postfixIcon}
+          prefix={prefixSettings.show && prefixSettings.render({ key: prefixSettings.id })}
+          postfix={
+            <>
+              {postfixSettings.show && postfixSettings.render({ key: postfixSettings.id })}
+              {postfixIcon}
+            </>
+          }
         >
           <InputPrivate
             ref={mergeRefs(ref, localRef)}

package/src/components/FieldStepper/FieldStepper.tsx

@@ -5,6 +5,7 @@ import {
   forwardRef,
   KeyboardEventHandler,
   MouseEvent,
+  ReactNode,
   useEffect,
   useRef,
   useState,
@@ -19,7 +20,7 @@ import { extractSupportProps, WithSupportProps } 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, FieldDecoratorProps } from '../FieldDecorator';
 import styles from './styles.module.scss';
@@ -53,6 +54,10 @@ type FieldStepperOwnProps = {
   step?: number;
   /** Можно ли вводить c клавиатуры числа, выходящие за пределы min/max */
   allowMoreThanLimits?: boolean;
+  /** Произвольный префикс для поля */
+  prefix?: ReactNode;
+  /** Произвольный постфикс для поля */
+  postfix?: ReactNode;
 };
 
 export type FieldStepperProps = WithSupportProps<FieldStepperOwnProps & InputProps & WrapperProps>;
@@ -97,6 +102,8 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
       size = SIZE.S,
       validationState = VALIDATION_STATE.Default,
       error,
+      prefix,
+      postfix,
       ...rest
     },
     ref,
@@ -116,6 +123,9 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
     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: number) => {
@@ -240,30 +250,37 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
             variant={CONTAINER_VARIANT.SingleLine}
             inputRef={inputRef}
             prefix={
-              <ButtonFunction
-                tabIndex={-1}
-                ref={minusButtonRef}
-                size='xs'
-                className={styles.button}
-                icon={<MinusSVG />}
-                onClick={handleMinusButtonClick}
-                onKeyDown={handleMinusButtonKeyDown}
-                disabled={isMinusButtonDisabled}
-                data-test-id='field-stepper__minus-button'
-              />
+              <>
+                <ButtonFunction
+                  tabIndex={-1}
+                  ref={minusButtonRef}
+                  size='xs'
+                  className={styles.button}
+                  icon={<MinusSVG />}
+                  onClick={handleMinusButtonClick}
+                  onKeyDown={handleMinusButtonKeyDown}
+                  disabled={isMinusButtonDisabled}
+                  data-test-id='field-stepper__minus-button'
+                />
+                {prefixSettings.show && prefixSettings.render({ key: prefixSettings.id })}
+              </>
             }
             postfix={
-              <ButtonFunction
-                ref={plusButtonRef}
-                tabIndex={-1}
-                size='xs'
-                className={styles.button}
-                icon={<PlusSVG />}
-                onClick={handlePlusButtonClick}
-                onKeyDown={handlePlusButtonKeyDown}
-                disabled={isPlusButtonDisabled}
-                data-test-id='field-stepper__plus-button'
-              />
+              <>
+                {postfixSettings.show && postfixSettings.render({ key: postfixSettings.id })}
+
+                <ButtonFunction
+                  ref={plusButtonRef}
+                  tabIndex={-1}
+                  size='xs'
+                  className={styles.button}
+                  icon={<PlusSVG />}
+                  onClick={handlePlusButtonClick}
+                  onKeyDown={handlePlusButtonKeyDown}
+                  disabled={isPlusButtonDisabled}
+                  data-test-id='field-stepper__plus-button'
+                />
+              </>
             }
           >
             <InputPrivate