@snack-uikit/fields 0.21.5 → 0.22.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.22.0 (2024-06-24)
+
+
+### Bug Fixes
+
+* **PDS-131:** break-word for hint ([cb403c0](https://github.com/cloud-ru-tech/snack-uikit/commit/cb403c0ec104a7cdc600455b73d626523866140f))
+* **PDS-131:** field-select: should close when clicking on arrow ([626aff1](https://github.com/cloud-ru-tech/snack-uikit/commit/626aff15ef75ae414cbfe8b48a13ef38766376a6))
+* **PDS-131:** field-select: start search from first symbol ([4f228d0](https://github.com/cloud-ru-tech/snack-uikit/commit/4f228d0bbe4a941ae209ddb12ef60cba24c188ba))
+* **PDS-131:** field-slider: re-render value when marks, min or max are changed ([c4e7f77](https://github.com/cloud-ru-tech/snack-uikit/commit/c4e7f77991519095312f84bdbad0992ba58fae60))
+* **PDS-353:** field date: reset visual label when value is cleared from outside ([79247a9](https://github.com/cloud-ru-tech/snack-uikit/commit/79247a9821dbd2ec4833e389ccea6ba42291dc7b))
+
+
+### Features
+
+* **PDS-131:** allow to pass ReactNode for labelTooltip ([2d3efc2](https://github.com/cloud-ru-tech/snack-uikit/commit/2d3efc2c787ef5a69957bacbe04b12b31fcbfa58))
+
+
+
+
+
 ## 0.21.5 (2024-06-20)
 
 ### Only dependencies have been changed

package/README.md

@@ -160,6 +160,28 @@ const [isOpen, setIsOpen] = useState(false);
   prefixIcon={<PlaceholderSVG />}
 />;
 ```
+## Особенности работы FieldStepper-a
+
+FieldStepper в основном предназначен для работы с небольшими числами, 
+которые изменяются с помощью кнопок увеличения и уменьшения значения. 
+Для обеспечения консистентности в компонент была добавлена возможность ввода значений с клавиатуры, 
+однако это требует валидации пользовательского ввода.
+
+Существует два способа ограничения ввода:
+1. Исправление значения после завершения ввода пользователем:
+   * Такой способ есть, он активируется с помощью пропсы `allowMoreThanLimits = false`. 
+   Однако, это плохой UX-паттерн, так как пользователь может не заметить, 
+   что значение было изменено.
+   
+2. Запрет ввода чисел, превышающих максимальное или минимальное значение:
+   * Такой способ можно было бы реализовать либо исправлением значения на max/min,
+   либо просто не изменяя значение в поле. Однако, это ещё более плохой UX-паттерн, 
+   так как может быть воспринят пользователем как неисправность.
+
+Правильным подходом будет позволить пользователю ввести желаемое значение и, при необходимости,
+подсветить его некорректность с помощью свойств validationState и hint. 
+Это можно сделать по событию blur или при отправке формы.
+
 
 [//]: DOCUMENTATION_SECTION_START
 [//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
@@ -173,7 +195,7 @@ const [isOpen, setIsOpen] = useState(false);
 | readonly | `boolean` | - | Является ли поле доступным только на чтение Доступно ли поле только на чтение |
 | error | `string` | - |  |
 | label | `string` | - | Лейбл |
-| labelTooltip | `string` | - | Всплывающая подсказка лейбла |
+| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
 | labelFor | `string` | - | Аттрибут for |
 | required | `boolean` | - | Является ли поле обязательным |
 | size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
@@ -203,7 +225,7 @@ const [isOpen, setIsOpen] = useState(false);
 | error | `string` | - |  |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
-| labelTooltip | `string` | - | Всплывающая подсказка лейбла |
+| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
 | required | `boolean` | - | Является ли поле обязательным |
 | size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
 | labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
@@ -235,7 +257,7 @@ const [isOpen, setIsOpen] = useState(false);
 | error | `string` | - |  |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
-| labelTooltip | `string` | - | Всплывающая подсказка лейбла |
+| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
 | required | `boolean` | - | Является ли поле обязательным |
 | size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
 | labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
@@ -267,7 +289,7 @@ const [isOpen, setIsOpen] = useState(false);
 | error | `string` | - |  |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
-| labelTooltip | `string` | - | Всплывающая подсказка лейбла |
+| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
 | required | `boolean` | - | Является ли поле обязательным |
 | size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
 | labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
@@ -301,7 +323,7 @@ const [isOpen, setIsOpen] = useState(false);
 | error | `string` | - |  |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
-| labelTooltip | `string` | - | Всплывающая подсказка лейбла |
+| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
 | required | `boolean` | - | Является ли поле обязательным |
 | size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
 | labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
@@ -326,7 +348,7 @@ const [isOpen, setIsOpen] = useState(false);
 | error | `string` | - |  |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
-| labelTooltip | `string` | - | Всплывающая подсказка лейбла |
+| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
 | required | `boolean` | - | Является ли поле обязательным |
 | size | enum Size: `"s"`, `"m"`, `"l"` | - | Размер |
 | labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
@@ -379,7 +401,7 @@ const [isOpen, setIsOpen] = useState(false);
 | error | `string` | - |  |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
-| labelTooltip | `string` | - | Всплывающая подсказка лейбла |
+| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
 | required | `boolean` | - | Является ли поле обязательным |
 | size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
 | labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
@@ -411,7 +433,7 @@ const [isOpen, setIsOpen] = useState(false);
 | marks | `Record<string \| number, ReactNode \| MarkObj>` | - |  |
 | className | `string` | - | CSS-класс |
 | label | `string` | - | Лейбл |
-| labelTooltip | `string` | - | Всплывающая подсказка лейбла |
+| labelTooltip | `ReactNode` | - | Всплывающая подсказка лейбла |
 | required | `boolean` | - | Является ли поле обязательным |
 | size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
 | labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |

package/dist/components/FieldDate/FieldDate.js

@@ -115,7 +115,7 @@ export const FieldDate = forwardRef((_a, ref) => {
         }
     }, [open]);
     useEffect(() => {
-        if (localRef.current && valueProp) {
+        if (localRef.current) {
             localRef.current.value = valueProp;
         }
     }, [valueProp]);

package/dist/components/FieldDecorator/Header.d.ts

@@ -1,10 +1,11 @@
+import { ReactNode } from 'react';
 import { Size } from '@snack-uikit/input-private';
 import { TooltipProps } from '@snack-uikit/tooltip';
 export type HeaderProps = {
     /** Лейбл */
     label?: string;
     /** Всплывающая подсказка лейбла */
-    labelTooltip?: string;
+    labelTooltip?: ReactNode;
     /** Аттрибут for */
     labelFor?: string;
     /** Является ли поле обязательным */

package/dist/components/FieldDecorator/styles.module.css

@@ -117,6 +117,7 @@
 .hint{
   display:grid;
   flex-grow:1;
+  word-break:break-word;
 }
 .hint[data-validation=default]{
   color:var(--sys-neutral-text-light, #868892);

package/dist/components/FieldDecorator/utils.d.ts

@@ -1,10 +1,11 @@
+/// <reference types="react" />
 import { FieldDecoratorProps } from './FieldDecorator';
 export declare function extractFieldDecoratorProps<T extends Partial<FieldDecoratorProps>>({ error, required, readonly, label, labelTooltip, labelTooltipPlacement, labelFor, hint, disabled, showHintIcon, size, validationState, className, }: T): {
     error: string | undefined;
     required: boolean | undefined;
     readonly: boolean | undefined;
     label: string | undefined;
-    labelTooltip: string | undefined;
+    labelTooltip: import("react").ReactNode;
     labelTooltipPlacement: import("@snack-uikit/popover-private/dist/types").Placement | undefined;
     labelFor: string | undefined;
     hint: string | undefined;

package/dist/components/FieldSelect/FieldSelectMultiple.js

@@ -117,7 +117,7 @@ export const FieldSelectMultiple = forwardRef((_a, ref) => {
     const fuzzySearch = useFuzzySearch(items);
     const result = autocomplete || !searchable || prevInputValue.current === inputValue ? items : fuzzySearch(inputValue);
     const fieldValidationState = getValidationState({ validationState, error: rest.error });
-    return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), extractFieldDecoratorProps(rest), { labelFor: id, size: size, validationState: fieldValidationState, children: _jsx(Droplist, Object.assign({}, extractListProps(rest), { items: result, triggerElemRef: localRef, selection: {
+    return (_jsx(FieldDecorator, Object.assign({}, extractSupportProps(rest), extractFieldDecoratorProps(rest), { labelFor: id, size: size, validationState: fieldValidationState, children: _jsx(Droplist, Object.assign({}, extractListProps(rest), { items: result, triggerElemRef: localRef, trigger: 'click', selection: {
                 mode: 'multiple',
                 value: value,
                 onChange: value => {

package/dist/components/FieldSelect/FieldSelectSingle.js

@@ -128,7 +128,7 @@ export const FieldSelectSingle = forwardRef((_a, ref) => {
                 mode: 'single',
                 value: value,
                 onChange: handleSelectionChange,
-            }, size: size, open: open, onOpenChange: handleOpenChange, triggerElemRef: localRef, children: ({ onKeyDown }) => (_jsxs(FieldContainerPrivate, { className: styles.container, validationState: fieldValidationState, disabled: disabled, readonly: readonly, focused: open, variant: 'single-line-container', inputRef: localRef, size: size, prefix: prefixIcon, children: [_jsx(InputPrivate, { id: id, name: name, type: 'text', disabled: disabled, placeholder: placeholder, ref: mergeRefs(ref, localRef), onChange: searchable ? setInputValue : undefined, value: searchable ? inputValue : selectedOptionFormatter(selectedItem), readonly: readonly, "data-test-id": 'field-select__input', onKeyDown: handleOnKeyDown(onKeyDown), onBlur: handleBlur, className: cn({
+            }, size: size, open: open, onOpenChange: handleOpenChange, trigger: 'click', triggerElemRef: localRef, children: ({ onKeyDown }) => (_jsxs(FieldContainerPrivate, { className: styles.container, validationState: fieldValidationState, disabled: disabled, readonly: readonly, focused: open, variant: 'single-line-container', inputRef: localRef, size: size, prefix: prefixIcon, children: [_jsx(InputPrivate, { id: id, name: name, type: 'text', disabled: disabled, placeholder: placeholder, ref: mergeRefs(ref, localRef), onChange: searchable ? setInputValue : undefined, value: searchable ? inputValue : selectedOptionFormatter(selectedItem), readonly: readonly, "data-test-id": 'field-select__input', onKeyDown: handleOnKeyDown(onKeyDown), onBlur: handleBlur, className: cn({
                             [styles.readonlyCursor]: !searchable,
                         }) }), _jsxs("div", { className: styles.postfix, children: [buttons, _jsx(ArrowIcon, { size: arrowIconSize, className: styles.arrowIcon })] })] })) })) })));
 });

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

@@ -1,7 +1,7 @@
 import FuzzySearch from 'fuzzy-search';
 import { useCallback, useMemo } from 'react';
 import { kindFlattenItems } from '@snack-uikit/list';
-const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
+const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 1;
 /**
  * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
  */
@@ -11,8 +11,8 @@ export function useFuzzySearch(items, minSearchInputLength) {
         return Object.values(flattenItems);
     }, [items]);
     return useCallback((search) => {
-        const searcher = new FuzzySearch(flattenItems, ['content.option', 'content.caption', 'content.description', 'label'], {});
-        return search.length > (minSearchInputLength !== null && minSearchInputLength !== void 0 ? minSearchInputLength : DEFAULT_MIN_SEARCH_INPUT_LENGTH)
+        const searcher = new FuzzySearch(flattenItems, ['content.option', 'content.caption', 'content.description'], {});
+        return search.length >= (minSearchInputLength !== null && minSearchInputLength !== void 0 ? minSearchInputLength : DEFAULT_MIN_SEARCH_INPUT_LENGTH)
             ? searcher.search(search)
             : items;
     }, [flattenItems, items, minSearchInputLength]);

package/dist/components/FieldSlider/FieldSlider.js

@@ -140,5 +140,10 @@ export const FieldSlider = forwardRef((_a, ref) => {
     useEffect(() => {
         setTextFieldInputValue(getTextFieldValue(value, textInputFormatter));
     }, [value, textInputFormatter]);
+    useEffect(() => {
+        handleTextValueChange();
+        // update value only when marks, min or max are changed
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [marks, min, max]);
     return (_jsxs(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, disabled: disabled, required: required, 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' }) }) })] })));
 });

package/dist/helperComponents/FieldContainerPrivate/FieldContainerPrivate.d.ts

@@ -1,4 +1,4 @@
-import { CSSProperties, MouseEventHandler, ReactElement, ReactNode, RefObject } from 'react';
+import { CSSProperties, ReactElement, ReactNode, RefObject } from 'react';
 import { Size } from '@snack-uikit/input-private';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { ContainerVariant, ValidationState } from '../../types';
@@ -16,6 +16,5 @@ export type FieldContainerPrivateProps = WithSupportProps<{
     prefix?: ReactElement;
     postfix?: ReactElement;
     inputRef: RefObject<HTMLElement>;
-    onMouseDown?: MouseEventHandler<HTMLElement>;
 }>;
-export declare function FieldContainerPrivate({ className, children, size, validationState, variant, disabled, readonly, focused, selectable, style, prefix, postfix, inputRef, onMouseDown, ...rest }: FieldContainerPrivateProps): import("react/jsx-runtime").JSX.Element;
+export declare function FieldContainerPrivate({ className, children, size, validationState, variant, disabled, readonly, focused, selectable, style, prefix, postfix, inputRef, ...rest }: FieldContainerPrivateProps): import("react/jsx-runtime").JSX.Element;

package/dist/helperComponents/FieldContainerPrivate/FieldContainerPrivate.js

@@ -15,7 +15,7 @@ import { extractSupportProps } from '@snack-uikit/utils';
 import { VALIDATION_STATE } from '../../constants';
 import styles from './styles.module.css';
 export function FieldContainerPrivate(_a) {
-    var { className, children, size, validationState, variant, disabled, readonly, focused, selectable, style, prefix, postfix, inputRef, onMouseDown } = _a, rest = __rest(_a, ["className", "children", "size", "validationState", "variant", "disabled", "readonly", "focused", "selectable", "style", "prefix", "postfix", "inputRef", "onMouseDown"]);
+    var { className, children, size, validationState, variant, disabled, readonly, focused, selectable, style, prefix, postfix, inputRef } = _a, rest = __rest(_a, ["className", "children", "size", "validationState", "variant", "disabled", "readonly", "focused", "selectable", "style", "prefix", "postfix", "inputRef"]);
     const handleContainerClick = () => {
         var _a;
         if (disabled) {
@@ -23,5 +23,5 @@ export function FieldContainerPrivate(_a) {
         }
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     };
-    return (_jsxs("div", Object.assign({ className: cn(className, styles.container), style: style, "data-size": size, "data-validation": disabled || readonly ? VALIDATION_STATE.Default : validationState, "data-variant": variant, "data-disabled": disabled || undefined, "data-readonly": readonly || undefined, "data-focused": focused || undefined, "data-selectable": selectable || undefined, "data-test-id": 'field-container-private', onClick: handleContainerClick, onMouseDown: onMouseDown, role: 'textbox', tabIndex: -1 }, extractSupportProps(rest), { children: [prefix && (_jsx("span", { className: styles.prefix, "data-test-id": 'field-container-private__prefix-icon', children: prefix })), children, postfix && _jsx("span", { className: styles.postfix, children: postfix })] })));
+    return (_jsxs("div", Object.assign({ className: cn(className, styles.container), style: style, "data-size": size, "data-validation": disabled || readonly ? VALIDATION_STATE.Default : validationState, "data-variant": variant, "data-disabled": disabled || undefined, "data-readonly": readonly || undefined, "data-focused": focused || undefined, "data-selectable": selectable || undefined, "data-test-id": 'field-container-private', onClick: handleContainerClick, role: 'textbox', tabIndex: -1 }, extractSupportProps(rest), { children: [prefix && (_jsx("span", { className: styles.prefix, "data-test-id": 'field-container-private__prefix-icon', children: prefix })), children, postfix && _jsx("span", { className: styles.postfix, children: postfix })] })));
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.21.5",
+  "version": "0.22.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -40,7 +40,7 @@
     "@snack-uikit/list": "0.13.8",
     "@snack-uikit/scroll": "0.6.0",
     "@snack-uikit/skeleton": "0.3.4",
-    "@snack-uikit/slider": "0.1.12",
+    "@snack-uikit/slider": "0.1.13",
     "@snack-uikit/tag": "0.9.4",
     "@snack-uikit/tooltip": "0.13.5",
     "@snack-uikit/truncate-string": "0.4.18",
@@ -59,5 +59,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "7d61ee30138ad0ca92e405de9ae586c396591fdd"
+  "gitHead": "72e23a04c481b7e3e7becf8ed3d34b785083ba59"
 }

package/src/components/FieldDate/FieldDate.tsx

@@ -220,7 +220,7 @@ export const FieldDate = forwardRef<HTMLInputElement, FieldDateProps>(
     }, [open]);
 
     useEffect(() => {
-      if (localRef.current && valueProp) {
+      if (localRef.current) {
         localRef.current.value = valueProp;
       }
     }, [valueProp]);

package/src/components/FieldDecorator/Header.tsx

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 import { QuestionSVG } from '@snack-uikit/icons';
 import { Size } from '@snack-uikit/input-private';
 import { Tooltip, TooltipProps } from '@snack-uikit/tooltip';
@@ -9,7 +11,7 @@ export type HeaderProps = {
   /** Лейбл */
   label?: string;
   /** Всплывающая подсказка лейбла */
-  labelTooltip?: string;
+  labelTooltip?: ReactNode;
   /** Аттрибут for */
   labelFor?: string;
   /** Является ли поле обязательным */

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

@@ -97,6 +97,7 @@ $hint-icon-container: (
 .hint {
   display: grid;
   flex-grow: 1;
+  word-break: break-word;
 
   &[data-validation='default'] {
     color: simple-var($sys-neutral-text-light);

package/src/components/FieldSelect/FieldSelectMultiple.tsx

@@ -179,6 +179,7 @@ export const FieldSelectMultiple = forwardRef<HTMLInputElement, FieldSelectMulti
           {...extractListProps(rest)}
           items={result}
           triggerElemRef={localRef}
+          trigger='click'
           selection={{
             mode: 'multiple',
             value: value,

package/src/components/FieldSelect/FieldSelectSingle.tsx

@@ -209,6 +209,7 @@ export const FieldSelectSingle = forwardRef<HTMLInputElement, FieldSelectSingleP
           size={size}
           open={open}
           onOpenChange={handleOpenChange}
+          trigger='click'
           triggerElemRef={localRef}
         >
           {({ onKeyDown }) => (

package/src/components/FieldSelect/legacy/hooks.ts

@@ -3,7 +3,7 @@ import { useCallback, useMemo } from 'react';
 
 import { ItemProps, kindFlattenItems } from '@snack-uikit/list';
 
-const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
+const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 1;
 
 /**
  * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
@@ -17,13 +17,9 @@ export function useFuzzySearch(items: ItemProps[], minSearchInputLength?: number
 
   return useCallback(
     (search: string) => {
-      const searcher = new FuzzySearch(
-        flattenItems,
-        ['content.option', 'content.caption', 'content.description', 'label'],
-        {},
-      );
+      const searcher = new FuzzySearch(flattenItems, ['content.option', 'content.caption', 'content.description'], {});
 
-      return search.length > (minSearchInputLength ?? DEFAULT_MIN_SEARCH_INPUT_LENGTH)
+      return search.length >= (minSearchInputLength ?? DEFAULT_MIN_SEARCH_INPUT_LENGTH)
         ? searcher.search(search)
         : items;
     },

package/src/components/FieldSlider/FieldSlider.tsx

@@ -236,6 +236,12 @@ export const FieldSlider = forwardRef<HTMLInputElement, FieldSliderProps>(
       setTextFieldInputValue(getTextFieldValue(value, textInputFormatter));
     }, [value, textInputFormatter]);
 
+    useEffect(() => {
+      handleTextValueChange();
+      // update value only when marks, min or max are changed
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [marks, min, max]);
+
     return (
       <FieldDecorator
         className={className}

package/src/helperComponents/FieldContainerPrivate/FieldContainerPrivate.tsx

@@ -22,7 +22,6 @@ export type FieldContainerPrivateProps = WithSupportProps<{
   prefix?: ReactElement;
   postfix?: ReactElement;
   inputRef: RefObject<HTMLElement>;
-  onMouseDown?: MouseEventHandler<HTMLElement>;
 }>;
 
 export function FieldContainerPrivate({
@@ -39,7 +38,6 @@ export function FieldContainerPrivate({
   prefix,
   postfix,
   inputRef,
-  onMouseDown,
   ...rest
 }: FieldContainerPrivateProps) {
   const handleContainerClick: MouseEventHandler<HTMLDivElement> = () => {
@@ -62,7 +60,6 @@ export function FieldContainerPrivate({
       data-selectable={selectable || undefined}
       data-test-id='field-container-private'
       onClick={handleContainerClick}
-      onMouseDown={onMouseDown}
       role='textbox'
       tabIndex={-1}
       {...extractSupportProps(rest)}