@snack-uikit/fields 0.34.0 → 0.35.1

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.35.1 (2024-11-20)
+
+
+### Bug Fixes
+
+* **PDS-959:** do not change item structure in search mode ([1abca3d](https://github.com/cloud-ru-tech/snack-uikit/commit/1abca3d7ca7cef91665195ee51a06cc9af14461e))
+
+
+
+
+
+# 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/FieldSelect/hooks.d.ts

@@ -37,5 +37,5 @@ export declare function useHandleDeleteItem(setValue: Handler): (item?: ItemWith
 /**
  * Четкий и нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
  */
-export declare function useSearch(items: ItemProps[], enableFuzzySearch?: boolean): (search: string) => import("@snack-uikit/list/dist/esm/components/Items").Item[] | import("@snack-uikit/list/dist/esm/components/Items").FlattenItem[];
+export declare function useSearch(items: ItemProps[], enableFuzzySearch?: boolean): (search: string) => import("@snack-uikit/list/dist/esm/components/Items").Item[];
 export {};

package/dist/cjs/components/FieldSelect/hooks.js

@@ -20,6 +20,7 @@ const list_1 = require("@snack-uikit/list");
 const hooks_1 = require("../../hooks");
 const legacy_1 = require("./legacy");
 const utils_1 = require("./utils");
+const filterItemsByFlattenIds_1 = require("./utils/filterItemsByFlattenIds");
 function useHandleOnKeyDown(_ref) {
   let {
     setOpen,
@@ -158,7 +159,7 @@ function useSearch(items) {
     });
     return Object.values(flattenItems);
   }, [items]);
-  const filterFunction = (0, react_1.useCallback)(search => {
+  const filterFlattenFunction = (0, react_1.useCallback)(search => {
     if (!enableFuzzySearch) {
       return flattenItems.filter(item => [...COMMON_FIELDS_TO_SEARCH, 'label'].some(key => {
         const value = (0, utils_1.getValueByPath)(item, key);
@@ -168,5 +169,9 @@ function useSearch(items) {
     const searcher = new fuzzy_search_1.default(flattenItems, COMMON_FIELDS_TO_SEARCH, {});
     return searcher.search(search);
   }, [enableFuzzySearch, flattenItems]);
+  const filterFunction = (0, react_1.useCallback)(search => {
+    const filteredIds = filterFlattenFunction(search).map(item => item.id);
+    return (0, filterItemsByFlattenIds_1.filterItemsByFlattenIds)(items, filteredIds);
+  }, [filterFlattenFunction, items]);
   return (0, react_1.useCallback)(search => search.length >= DEFAULT_MIN_SEARCH_INPUT_LENGTH ? filterFunction(search) : items, [filterFunction, items]);
 }

package/dist/cjs/components/FieldSelect/utils/filterItemsByFlattenIds.d.ts

@@ -0,0 +1,2 @@
+import { ItemId, ItemProps } from '@snack-uikit/list';
+export declare function filterItemsByFlattenIds(items: ItemProps[], ids: ItemId[]): import("@snack-uikit/list/dist/esm/components/Items").Item[];

package/dist/cjs/components/FieldSelect/utils/filterItemsByFlattenIds.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.filterItemsByFlattenIds = filterItemsByFlattenIds;
+const isItemWithId = item => item.id !== undefined;
+const isGroupItem = item => item.type === 'group';
+function filterItemsByFlattenIds(items, ids) {
+  const filteredItems = [];
+  items.forEach(item => {
+    if (isItemWithId(item) && item.id && ids.includes(item.id)) {
+      filteredItems.push(item);
+      return;
+    }
+    if (isGroupItem(item)) {
+      const filteredSubItems = filterItemsByFlattenIds(item.items, ids);
+      filteredItems.push(Object.assign(Object.assign({}, item), {
+        items: filteredSubItems
+      }));
+      return;
+    }
+  });
+  return filteredItems;
+}

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

@@ -37,5 +37,5 @@ export declare function useHandleDeleteItem(setValue: Handler): (item?: ItemWith
 /**
  * Четкий и нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
  */
-export declare function useSearch(items: ItemProps[], enableFuzzySearch?: boolean): (search: string) => import("@snack-uikit/list/dist/esm/components/Items").Item[] | import("@snack-uikit/list/dist/esm/components/Items").FlattenItem[];
+export declare function useSearch(items: ItemProps[], enableFuzzySearch?: boolean): (search: string) => import("@snack-uikit/list/dist/esm/components/Items").Item[];
 export {};

package/dist/esm/components/FieldSelect/hooks.js

@@ -5,6 +5,7 @@ import { isAccordionItemProps, isNextListItemProps, kindFlattenItems, } from '@s
 import { useCopyButton, useValueControl } from '../../hooks';
 import { extractChildIds } from './legacy';
 import { getValueByPath, isBaseOptionProps } from './utils';
+import { filterItemsByFlattenIds } from './utils/filterItemsByFlattenIds';
 export function useHandleOnKeyDown({ setOpen, inputKeyDownNavigationHandler, onInputKeyDownProp, }) {
     return useCallback((onKeyDown) => (e) => {
         if (e.code === 'Space') {
@@ -100,7 +101,7 @@ export function useSearch(items, enableFuzzySearch = true) {
         const { flattenItems } = kindFlattenItems({ items });
         return Object.values(flattenItems);
     }, [items]);
-    const filterFunction = useCallback((search) => {
+    const filterFlattenFunction = useCallback((search) => {
         if (!enableFuzzySearch) {
             return flattenItems.filter(item => [...COMMON_FIELDS_TO_SEARCH, 'label'].some(key => {
                 const value = getValueByPath(item, key);
@@ -110,5 +111,9 @@ export function useSearch(items, enableFuzzySearch = true) {
         const searcher = new FuzzySearch(flattenItems, COMMON_FIELDS_TO_SEARCH, {});
         return searcher.search(search);
     }, [enableFuzzySearch, flattenItems]);
+    const filterFunction = useCallback((search) => {
+        const filteredIds = filterFlattenFunction(search).map(item => item.id);
+        return filterItemsByFlattenIds(items, filteredIds);
+    }, [filterFlattenFunction, items]);
     return useCallback((search) => (search.length >= DEFAULT_MIN_SEARCH_INPUT_LENGTH ? filterFunction(search) : items), [filterFunction, items]);
 }

package/dist/esm/components/FieldSelect/utils/filterItemsByFlattenIds.d.ts

@@ -0,0 +1,2 @@
+import { ItemId, ItemProps } from '@snack-uikit/list';
+export declare function filterItemsByFlattenIds(items: ItemProps[], ids: ItemId[]): import("@snack-uikit/list/dist/esm/components/Items").Item[];

package/dist/esm/components/FieldSelect/utils/filterItemsByFlattenIds.js

@@ -0,0 +1,17 @@
+const isItemWithId = (item) => item.id !== undefined;
+const isGroupItem = (item) => item.type === 'group';
+export function filterItemsByFlattenIds(items, ids) {
+    const filteredItems = [];
+    items.forEach(item => {
+        if (isItemWithId(item) && item.id && ids.includes(item.id)) {
+            filteredItems.push(item);
+            return;
+        }
+        if (isGroupItem(item)) {
+            const filteredSubItems = filterItemsByFlattenIds(item.items, ids);
+            filteredItems.push(Object.assign(Object.assign({}, item), { items: filteredSubItems }));
+            return;
+        }
+    });
+    return filteredItems;
+}

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.1",
   "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": "8a406cbe32e37af611f8abee40c622e314a46090"
 }

package/src/components/FieldSelect/hooks.ts

@@ -15,6 +15,7 @@ import { useCopyButton, useValueControl } from '../../hooks';
 import { extractChildIds } from './legacy';
 import { ItemWithId, SearchState, SelectedOptionFormatter } from './types';
 import { getValueByPath, isBaseOptionProps } from './utils';
+import { filterItemsByFlattenIds } from './utils/filterItemsByFlattenIds';
 
 type UseHandleOnKeyDownProps = {
   inputKeyDownNavigationHandler: KeyboardEventHandler<HTMLInputElement>;
@@ -187,13 +188,12 @@ export function useSearch(items: ItemProps[], enableFuzzySearch: boolean = true)
     return Object.values(flattenItems);
   }, [items]);
 
-  const filterFunction = useCallback(
+  const filterFlattenFunction = useCallback(
     (search: string) => {
       if (!enableFuzzySearch) {
         return flattenItems.filter(item =>
           [...COMMON_FIELDS_TO_SEARCH, 'label'].some(key => {
             const value = getValueByPath(item, key);
-
             return value.toLowerCase().includes(search.toLowerCase());
           }),
         );
@@ -205,6 +205,14 @@ export function useSearch(items: ItemProps[], enableFuzzySearch: boolean = true)
     [enableFuzzySearch, flattenItems],
   );
 
+  const filterFunction = useCallback(
+    (search: string) => {
+      const filteredIds = filterFlattenFunction(search).map(item => item.id);
+      return filterItemsByFlattenIds(items, filteredIds);
+    },
+    [filterFlattenFunction, items],
+  );
+
   return useCallback(
     (search: string) => (search.length >= DEFAULT_MIN_SEARCH_INPUT_LENGTH ? filterFunction(search) : items),
     [filterFunction, items],

package/src/components/FieldSelect/utils/filterItemsByFlattenIds.ts

@@ -0,0 +1,23 @@
+import { GroupItemProps, ItemId, ItemProps } from '@snack-uikit/list';
+
+import { ItemWithId } from '../types';
+
+const isItemWithId = (item: ItemProps): item is ItemWithId => (item as ItemWithId).id !== undefined;
+
+const isGroupItem = (item: ItemProps): item is GroupItemProps => (item as GroupItemProps).type === 'group';
+
+export function filterItemsByFlattenIds(items: ItemProps[], ids: ItemId[]) {
+  const filteredItems: ItemProps[] = [];
+  items.forEach(item => {
+    if (isItemWithId(item) && item.id && ids.includes(item.id)) {
+      filteredItems.push(item);
+      return;
+    }
+    if (isGroupItem(item)) {
+      const filteredSubItems = filterItemsByFlattenIds(item.items, ids);
+      filteredItems.push({ ...item, items: filteredSubItems });
+      return;
+    }
+  });
+  return filteredItems;
+}

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