@snack-uikit/fields 0.34.0 → 0.35.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.35.0 (2024-11-19)
+
+
+### Features
+
+* **FF-5887:** change prefix/postfix for FieldStepper ([b7aca2d](https://github.com/cloud-ru-tech/snack-uikit/commit/b7aca2da5ef613747599ff1cafaaa3de747be717))
+
+
+
+
+
 # 0.34.0 (2024-11-18)
 
 

package/dist/cjs/components/FieldStepper/FieldStepper.js

@@ -18,6 +18,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.FieldStepper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
 const merge_refs_1 = __importDefault(require("merge-refs"));
 const react_1 = require("react");
 const button_1 = require("@snack-uikit/button");
@@ -42,6 +43,11 @@ const getDefaultValue = (min, max) => {
   }
   return 0;
 };
+const SymbolWidth = {
+  s: 8,
+  m: 9,
+  l: 10
+};
 exports.FieldStepper = (0, react_1.forwardRef)((_a, ref) => {
   var {
       id,
@@ -83,8 +89,6 @@ exports.FieldStepper = (0, react_1.forwardRef)((_a, ref) => {
   const [tooltip, setTooltip] = (0, react_1.useState)('');
   const timerRef = (0, react_1.useRef)();
   const inputRef = (0, react_1.useRef)(null);
-  const minusButtonRef = (0, react_1.useRef)(null);
-  const plusButtonRef = (0, react_1.useRef)(null);
   const isMinusButtonDisabled = typeof min === 'number' && value <= min || readonly || disabled;
   const isPlusButtonDisabled = typeof max === 'number' && value >= max || readonly || disabled;
   const prefixSettings = (0, hooks_1.usePrefix)({
@@ -130,17 +134,10 @@ exports.FieldStepper = (0, react_1.forwardRef)((_a, ref) => {
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
   };
   const handleInputChange = (value, event) => setValue(Number(value), event);
-  const handleInputKeyDown = event => {
-    var _a, _b;
+  const handleInputKeyDown = () => {
     if (readonly || disabled) {
       return;
     }
-    if (event.key === 'ArrowRight' && !isPlusButtonDisabled) {
-      (_a = plusButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }
-    if (event.key === 'ArrowLeft' && !isMinusButtonDisabled) {
-      (_b = minusButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-    }
   };
   const handleMinusButtonClick = e => {
     e.preventDefault();
@@ -152,25 +149,15 @@ exports.FieldStepper = (0, react_1.forwardRef)((_a, ref) => {
     e.stopPropagation();
     setValue(Math.max(Math.min(max, value + step), min));
   };
-  const handleMinusButtonKeyDown = event => {
-    var _a;
+  const handleMinusButtonKeyDown = () => {
     if (readonly || disabled) {
       return;
     }
-    if (event.key === 'ArrowRight') {
-      event.preventDefault();
-      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }
   };
-  const handlePlusButtonKeyDown = event => {
-    var _a;
+  const handlePlusButtonKeyDown = () => {
     if (readonly || disabled) {
       return;
     }
-    if (event.key === 'ArrowLeft') {
-      event.preventDefault();
-      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }
   };
   return (0, jsx_runtime_1.jsx)(FieldDecorator_1.FieldDecorator, Object.assign({
     className: className,
@@ -192,6 +179,7 @@ exports.FieldStepper = (0, react_1.forwardRef)((_a, ref) => {
       tip: tooltip,
       open: allowMoreThanLimits ? false : tooltipOpen,
       "data-test-id": 'field-stepper__limit-tooltip',
+      triggerClassName: styles_module_scss_1.default.trigger,
       children: (0, jsx_runtime_1.jsx)(helperComponents_1.FieldContainerPrivate, {
         size: size,
         validationState: fieldValidationState,
@@ -199,54 +187,68 @@ exports.FieldStepper = (0, react_1.forwardRef)((_a, ref) => {
         readonly: readonly,
         variant: constants_1.CONTAINER_VARIANT.SingleLine,
         inputRef: inputRef,
-        prefix: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
-          children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
-            tabIndex: -1,
-            ref: minusButtonRef,
-            size: 'xs',
-            className: styles_module_scss_1.default.button,
-            icon: (0, jsx_runtime_1.jsx)(icons_1.MinusSVG, {}),
-            onClick: handleMinusButtonClick,
-            onKeyDown: handleMinusButtonKeyDown,
-            disabled: isMinusButtonDisabled,
-            "data-test-id": 'field-stepper__minus-button'
-          }), prefixSettings.show && prefixSettings.render({
-            key: prefixSettings.id
-          })]
+        prefix: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+          tabIndex: -1,
+          size: 'xs',
+          className: styles_module_scss_1.default.button,
+          icon: (0, jsx_runtime_1.jsx)(icons_1.MinusSVG, {}),
+          onClick: handleMinusButtonClick,
+          onKeyDown: handleMinusButtonKeyDown,
+          disabled: isMinusButtonDisabled,
+          "data-test-id": 'field-stepper__minus-button'
         }),
-        postfix: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
-          children: [postfixSettings.show && postfixSettings.render({
-            key: postfixSettings.id
-          }), (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
-            ref: plusButtonRef,
-            tabIndex: -1,
-            size: 'xs',
-            className: styles_module_scss_1.default.button,
-            icon: (0, jsx_runtime_1.jsx)(icons_1.PlusSVG, {}),
-            onClick: handlePlusButtonClick,
-            onKeyDown: handlePlusButtonKeyDown,
-            disabled: isPlusButtonDisabled,
-            "data-test-id": 'field-stepper__plus-button'
-          })]
+        postfix: (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+          tabIndex: -1,
+          size: 'xs',
+          className: styles_module_scss_1.default.button,
+          icon: (0, jsx_runtime_1.jsx)(icons_1.PlusSVG, {}),
+          onClick: handlePlusButtonClick,
+          onKeyDown: handlePlusButtonKeyDown,
+          disabled: isPlusButtonDisabled,
+          "data-test-id": 'field-stepper__plus-button'
         }),
-        children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, {
-          ref: (0, merge_refs_1.default)(ref, inputRef),
-          className: styles_module_scss_1.default.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'
+        children: (0, jsx_runtime_1.jsxs)("div", {
+          className: styles_module_scss_1.default.wrap,
+          children: [(0, jsx_runtime_1.jsx)("div", {
+            className: (0, classnames_1.default)({
+              [styles_module_scss_1.default.prefixWrapper]: prefixSettings.show
+            }),
+            children: prefixSettings.show && prefixSettings.render({
+              key: prefixSettings.id
+            })
+          }), (0, jsx_runtime_1.jsx)("div", {
+            style: {
+              width: String(value).length * SymbolWidth[size],
+              maxWidth: '100%'
+            },
+            children: (0, jsx_runtime_1.jsx)(input_private_1.InputPrivate, {
+              ref: (0, merge_refs_1.default)(ref, inputRef),
+              className: styles_module_scss_1.default.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,
+              step: step,
+              name: name,
+              min: min,
+              max: max,
+              "data-test-id": 'field-stepper__input'
+            })
+          }), (0, jsx_runtime_1.jsx)("div", {
+            className: (0, classnames_1.default)({
+              [styles_module_scss_1.default.postfixWrapper]: postfixSettings.show
+            }),
+            children: postfixSettings.show && postfixSettings.render({
+              key: postfixSettings.id
+            })
+          })]
         })
       })
     })

package/dist/cjs/components/FieldStepper/styles.module.css

@@ -7,4 +7,23 @@
 }
 .button[data-disabled] *{
   cursor:not-allowed;
+}
+
+.trigger{
+  min-width:auto;
+}
+
+.wrap{
+  overflow:hidden;
+  display:flex;
+  justify-content:center;
+  max-width:100%;
+}
+
+.prefixWrapper{
+  margin-right:var(--space-fields-stepper-content-container, 4px);
+}
+
+.postfixWrapper{
+  margin-left:var(--space-fields-stepper-content-container, 4px);
 }

package/dist/esm/components/FieldStepper/FieldStepper.js

@@ -9,7 +9,8 @@ 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, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
 import mergeRefs from 'merge-refs';
 import { forwardRef, useEffect, useRef, useState, } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
@@ -34,6 +35,11 @@ const getDefaultValue = (min, max) => {
     }
     return 0;
 };
+const SymbolWidth = {
+    s: 8,
+    m: 9,
+    l: 10,
+};
 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, 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');
@@ -46,8 +52,6 @@ export const FieldStepper = forwardRef((_a, ref) => {
     const [tooltip, setTooltip] = useState('');
     const timerRef = useRef();
     const inputRef = useRef(null);
-    const minusButtonRef = useRef(null);
-    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 });
@@ -84,17 +88,10 @@ export const FieldStepper = forwardRef((_a, ref) => {
         onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
     };
     const handleInputChange = (value, event) => setValue(Number(value), event);
-    const handleInputKeyDown = event => {
-        var _a, _b;
+    const handleInputKeyDown = () => {
         if (readonly || disabled) {
             return;
         }
-        if (event.key === 'ArrowRight' && !isPlusButtonDisabled) {
-            (_a = plusButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
-        if (event.key === 'ArrowLeft' && !isMinusButtonDisabled) {
-            (_b = minusButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-        }
     };
     const handleMinusButtonClick = (e) => {
         e.preventDefault();
@@ -106,25 +103,18 @@ export const FieldStepper = forwardRef((_a, ref) => {
         e.stopPropagation();
         setValue(Math.max(Math.min(max, value + step), min));
     };
-    const handleMinusButtonKeyDown = event => {
-        var _a;
+    const handleMinusButtonKeyDown = () => {
         if (readonly || disabled) {
             return;
         }
-        if (event.key === 'ArrowRight') {
-            event.preventDefault();
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }
     };
-    const handlePlusButtonKeyDown = event => {
-        var _a;
+    const handlePlusButtonKeyDown = () => {
         if (readonly || disabled) {
             return;
         }
-        if (event.key === 'ArrowLeft') {
-            event.preventDefault();
-            (_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: _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' }) }) }) })));
+    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', triggerClassName: styles.trigger, children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: inputRef, prefix: _jsx(ButtonFunction, { tabIndex: -1, size: 'xs', className: styles.button, icon: _jsx(MinusSVG, {}), onClick: handleMinusButtonClick, onKeyDown: handleMinusButtonKeyDown, disabled: isMinusButtonDisabled, "data-test-id": 'field-stepper__minus-button' }), postfix: _jsx(ButtonFunction, { tabIndex: -1, size: 'xs', className: styles.button, icon: _jsx(PlusSVG, {}), onClick: handlePlusButtonClick, onKeyDown: handlePlusButtonKeyDown, disabled: isPlusButtonDisabled, "data-test-id": 'field-stepper__plus-button' }), children: _jsxs("div", { className: styles.wrap, children: [_jsx("div", { className: cn({ [styles.prefixWrapper]: prefixSettings.show }), children: prefixSettings.show && prefixSettings.render({ key: prefixSettings.id }) }), _jsx("div", { style: {
+                                width: String(value).length * SymbolWidth[size],
+                                maxWidth: '100%',
+                            }, 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, step: step, name: name, min: min, max: max, "data-test-id": 'field-stepper__input' }) }), _jsx("div", { className: cn({ [styles.postfixWrapper]: postfixSettings.show }), children: postfixSettings.show && postfixSettings.render({ key: postfixSettings.id }) })] }) }) }) })));
 });

package/dist/esm/components/FieldStepper/styles.module.css

@@ -7,4 +7,23 @@
 }
 .button[data-disabled] *{
   cursor:not-allowed;
+}
+
+.trigger{
+  min-width:auto;
+}
+
+.wrap{
+  overflow:hidden;
+  display:flex;
+  justify-content:center;
+  max-width:100%;
+}
+
+.prefixWrapper{
+  margin-right:var(--space-fields-stepper-content-container, 4px);
+}
+
+.postfixWrapper{
+  margin-left:var(--space-fields-stepper-content-container, 4px);
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.34.0",
+  "version": "0.35.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -37,13 +37,13 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.19.3",
-    "@snack-uikit/calendar": "0.11.6",
-    "@snack-uikit/color-picker": "0.3.3",
+    "@snack-uikit/calendar": "0.11.7",
+    "@snack-uikit/color-picker": "0.3.4",
     "@snack-uikit/divider": "3.2.1",
     "@snack-uikit/dropdown": "0.4.1",
     "@snack-uikit/icons": "0.24.0",
-    "@snack-uikit/input-private": "4.2.2",
-    "@snack-uikit/list": "0.21.6",
+    "@snack-uikit/input-private": "4.3.0",
+    "@snack-uikit/list": "0.21.7",
     "@snack-uikit/scroll": "0.9.1",
     "@snack-uikit/skeleton": "0.5.1",
     "@snack-uikit/slider": "0.3.2",
@@ -65,5 +65,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "29125ae9f570868bae8ad22fef795a50a150758e"
+  "gitHead": "dd1825421e5d0964966e39a20bc5e09258acc3c2"
 }

package/src/components/FieldStepper/FieldStepper.tsx

@@ -1,3 +1,4 @@
+import cn from 'classnames';
 import mergeRefs from 'merge-refs';
 import {
   ChangeEvent,
@@ -76,6 +77,12 @@ const getDefaultValue = (min: number, max: number) => {
   return 0;
 };
 
+const SymbolWidth = {
+  s: 8,
+  m: 9,
+  l: 10,
+};
+
 export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
   (
     {
@@ -118,8 +125,7 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
     const [tooltip, setTooltip] = useState('');
     const timerRef = useRef<ReturnType<typeof setTimeout>>();
     const inputRef = useRef<HTMLInputElement>(null);
-    const minusButtonRef = useRef<HTMLButtonElement>(null);
-    const plusButtonRef = useRef<HTMLButtonElement>(null);
+
     const isMinusButtonDisabled = (typeof min === 'number' && value <= min) || readonly || disabled;
     const isPlusButtonDisabled = (typeof max === 'number' && value >= max) || readonly || disabled;
 
@@ -171,18 +177,10 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
 
     const handleInputChange = (value: string, event: ChangeEvent<HTMLInputElement>) => setValue(Number(value), event);
 
-    const handleInputKeyDown: KeyboardEventHandler<HTMLInputElement> = event => {
+    const handleInputKeyDown: KeyboardEventHandler<HTMLInputElement> = () => {
       if (readonly || disabled) {
         return;
       }
-
-      if (event.key === 'ArrowRight' && !isPlusButtonDisabled) {
-        plusButtonRef.current?.focus();
-      }
-
-      if (event.key === 'ArrowLeft' && !isMinusButtonDisabled) {
-        minusButtonRef.current?.focus();
-      }
     };
 
     const handleMinusButtonClick = (e: MouseEvent) => {
@@ -197,26 +195,16 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
       setValue(Math.max(Math.min(max, value + step), min));
     };
 
-    const handleMinusButtonKeyDown: KeyboardEventHandler<HTMLInputElement> = event => {
+    const handleMinusButtonKeyDown: KeyboardEventHandler<HTMLInputElement> = () => {
       if (readonly || disabled) {
         return;
       }
-
-      if (event.key === 'ArrowRight') {
-        event.preventDefault();
-        inputRef.current?.focus();
-      }
     };
 
-    const handlePlusButtonKeyDown: KeyboardEventHandler<HTMLInputElement> = event => {
+    const handlePlusButtonKeyDown: KeyboardEventHandler<HTMLInputElement> = () => {
       if (readonly || disabled) {
         return;
       }
-
-      if (event.key === 'ArrowLeft') {
-        event.preventDefault();
-        inputRef.current?.focus();
-      }
     };
 
     return (
@@ -241,6 +229,7 @@ export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
           tip={tooltip}
           open={allowMoreThanLimits ? false : tooltipOpen}
           data-test-id='field-stepper__limit-tooltip'
+          triggerClassName={styles.trigger}
         >
           <FieldContainerPrivate
             size={size}
@@ -250,58 +239,66 @@ 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'
-                />
-                {prefixSettings.show && prefixSettings.render({ key: prefixSettings.id })}
-              </>
+              <ButtonFunction
+                tabIndex={-1}
+                size='xs'
+                className={styles.button}
+                icon={<MinusSVG />}
+                onClick={handleMinusButtonClick}
+                onKeyDown={handleMinusButtonKeyDown}
+                disabled={isMinusButtonDisabled}
+                data-test-id='field-stepper__minus-button'
+              />
             }
             postfix={
-              <>
-                {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'
-                />
-              </>
+              <ButtonFunction
+                tabIndex={-1}
+                size='xs'
+                className={styles.button}
+                icon={<PlusSVG />}
+                onClick={handlePlusButtonClick}
+                onKeyDown={handlePlusButtonKeyDown}
+                disabled={isPlusButtonDisabled}
+                data-test-id='field-stepper__plus-button'
+              />
             }
           >
-            <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'
-            />
+            <div className={styles.wrap}>
+              <div className={cn({ [styles.prefixWrapper]: prefixSettings.show })}>
+                {prefixSettings.show && prefixSettings.render({ key: prefixSettings.id })}
+              </div>
+
+              <div
+                style={{
+                  width: String(value).length * SymbolWidth[size],
+                  maxWidth: '100%',
+                }}
+              >
+                <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}
+                  step={step}
+                  name={name}
+                  min={min}
+                  max={max}
+                  data-test-id='field-stepper__input'
+                />
+              </div>
+              <div className={cn({ [styles.postfixWrapper]: postfixSettings.show })}>
+                {postfixSettings.show && postfixSettings.render({ key: postfixSettings.id })}
+              </div>
+            </div>
           </FieldContainerPrivate>
         </Tooltip>
       </FieldDecorator>

package/src/components/FieldStepper/styles.module.scss

@@ -1,3 +1,5 @@
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields' as ft-fields;
+
 .stepper {
   text-align: center;
 }
@@ -10,4 +12,23 @@
   &[data-disabled] * {
     cursor: not-allowed;
   }
-}
+}
+
+.trigger {
+  min-width: auto;
+}
+
+.wrap {
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  max-width: 100%;
+}
+
+.prefixWrapper {
+  margin-right: ft-fields.$space-fields-stepper-content-container;
+}
+
+.postfixWrapper {
+  margin-left: ft-fields.$space-fields-stepper-content-container;
+}