@snack-uikit/fields 0.18.2 → 0.18.4-preview-5d3667ec.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.18.3 (2024-04-22)
+
+
+### Bug Fixes
+
+* **FF-4649:** container width of multiselect ([ca5702d](https://github.com/cloud-ru-tech/snack-uikit/commit/ca5702dbb4ae2574b5b312c926663cc67bbe694c))
+* **FF-4649:** pass props footer and widthStrategy for Droplist ([c4a78cb](https://github.com/cloud-ru-tech/snack-uikit/commit/c4a78cbaddd6b8e6718b7a10614e56b5d618332e))
+
+
+
+
+
 ## 0.18.2 (2024-04-22)
 
 ### Only dependencies have been changed

package/README.md

@@ -340,19 +340,20 @@ const [isOpen, setIsOpen] = useState(false);
 | showClearButton | `boolean` | true | Отображение кнопки очистки поля |
 | prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
 | footer | `ReactNode` | - |  |
+| widthStrategy | enum PopoverWidthStrategy: `"auto"`, `"gte"`, `"eq"` | - |  |
 | search | `SearchState` | - |  |
 | autocomplete | `boolean` | - |  |
 | addOptionByEnter | `boolean` | - |  |
 | open | `boolean` | - |  |
 | onOpenChange | `(open: boolean) => void` | - |  |
 | selectedOptionFormatter | `SelectedOptionFormatter` | - |  |
+| pinTop | `ItemProps[]` | - | Элементы списка, закрепленные сверху |
+| pinBottom | `ItemProps[]` | - | Элементы списка, закрепленные снизу |
+| dataFiltered | `boolean` | - |  |
 | dataError | `boolean` | - |  |
 | noDataState | `EmptyStateProps` | - | Экран при отстутствии данных |
 | noResultsState | `EmptyStateProps` | - | Экран при отстутствии результатов поиска или фильтров |
 | errorDataState | `EmptyStateProps` | - | Экран при ошибке запроса |
-| pinTop | `ItemProps[]` | - | Элементы списка, закрепленные сверху |
-| pinBottom | `ItemProps[]` | - | Элементы списка, закрепленные снизу |
-| dataFiltered | `boolean` | - |  |
 | selection | "single" \| "multiple" | - |  |
 | ref | `Ref<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
 | key | `Key` | - |  |

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

@@ -15,10 +15,11 @@ export declare const FieldSelectMultiple: import("react").ForwardRefExoticCompon
     readonly?: boolean | undefined;
     prefixIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     footer?: import("react").ReactNode;
+    widthStrategy?: import("@snack-uikit/popover-private/dist/types").PopoverWidthStrategy | undefined;
     search?: import("./types").SearchState | undefined;
     autocomplete?: boolean | undefined;
     addOptionByEnter?: boolean | undefined;
     open?: boolean | undefined;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter | undefined;
-} & Pick<import("@snack-uikit/list").ListProps, "dataError" | "noDataState" | "noResultsState" | "errorDataState" | "pinTop" | "pinBottom" | "dataFiltered">, "showCopyButton"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<import("@snack-uikit/list").DroplistProps, "pinTop" | "pinBottom" | "dataFiltered" | "dataError" | "noDataState" | "noResultsState" | "errorDataState">, "showCopyButton"> & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -13,10 +13,11 @@ export declare const FieldSelectSingle: import("react").ForwardRefExoticComponen
     readonly?: boolean | undefined;
     prefixIcon?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     footer?: import("react").ReactNode;
+    widthStrategy?: import("@snack-uikit/popover-private/dist/types").PopoverWidthStrategy | undefined;
     search?: import("./types").SearchState | undefined;
     autocomplete?: boolean | undefined;
     addOptionByEnter?: boolean | undefined;
     open?: boolean | undefined;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter | undefined;
-} & Pick<import("@snack-uikit/list").ListProps, "dataError" | "noDataState" | "noResultsState" | "errorDataState" | "pinTop" | "pinBottom" | "dataFiltered"> & import("react").RefAttributes<HTMLInputElement>>;
+} & Pick<import("@snack-uikit/list").DroplistProps, "pinTop" | "pinBottom" | "dataFiltered" | "dataError" | "noDataState" | "noResultsState" | "errorDataState"> & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -4,6 +4,8 @@
 }
 
 .contentWrapper{
+  position:relative;
+  overflow:hidden;
   display:flex;
   flex-wrap:wrap;
   width:100%;
@@ -71,14 +73,10 @@
 }
 .container[data-size=s][data-variant=single-line-container] .displayValue{
   width:calc(100% - (
-            var(--space-fields-single-line-container-s-right, 6px) +
-              var(--space-fields-single-line-container-s-gap, 4px) +
-              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)
+            var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)
           ));
   margin-right:calc(
-            var(--space-fields-single-line-container-s-right, 6px) +
-              var(--space-fields-single-line-container-s-gap, 4px) +
-              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)
+            var(--space-fields-single-line-container-s-right, 6px) + var(--space-fields-single-line-container-s-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-xs, 16px) * 2)
           );
   padding-left:var(--space-fields-single-line-container-s-left, 6px);
   border-radius:var(--radius-fields-s, 12px);
@@ -98,14 +96,10 @@
 }
 .container[data-size=m][data-variant=single-line-container] .displayValue{
   width:calc(100% - (
-            var(--space-fields-single-line-container-m-right, 8px) +
-              var(--space-fields-single-line-container-m-gap, 4px) +
-              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
+            var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
           ));
   margin-right:calc(
-            var(--space-fields-single-line-container-m-right, 8px) +
-              var(--space-fields-single-line-container-m-gap, 4px) +
-              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
+            var(--space-fields-single-line-container-m-right, 8px) + var(--space-fields-single-line-container-m-gap, 4px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
           );
   padding-left:var(--space-fields-single-line-container-m-left, 8px);
   border-radius:var(--radius-fields-m, 14px);
@@ -125,14 +119,10 @@
 }
 .container[data-size=l][data-variant=single-line-container] .displayValue{
   width:calc(100% - (
-            var(--space-fields-single-line-container-l-right, 10px) +
-              var(--space-fields-single-line-container-l-gap, 8px) +
-              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
+            var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
           ));
   margin-right:calc(
-            var(--space-fields-single-line-container-l-right, 10px) +
-              var(--space-fields-single-line-container-l-gap, 8px) +
-              calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
+            var(--space-fields-single-line-container-l-right, 10px) + var(--space-fields-single-line-container-l-gap, 8px) + calc(var(var(--space-fields-postfix-gap, 4px)) + var(--size-icon-container-s, 24px) * 2)
           );
   padding-left:var(--space-fields-single-line-container-l-left, 10px);
   border-radius:var(--radius-fields-l, 16px);

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

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { InputPrivateProps } from '@snack-uikit/input-private';
-import { AccordionItemProps, BaseItemProps, GroupItemProps, ListProps, NextListItemProps, SelectionMultipleState, SelectionSingleState } from '@snack-uikit/list';
+import { AccordionItemProps, BaseItemProps, DroplistProps, GroupItemProps, NextListItemProps, SelectionMultipleState, SelectionSingleState } from '@snack-uikit/list';
 import { TagProps } from '@snack-uikit/tag';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { FieldDecoratorProps } from '../FieldDecorator';
@@ -51,14 +51,15 @@ type FiledSelectCommonProps = WithSupportProps<{
     readonly?: boolean;
     /** Иконка-префикс для поля */
     prefixIcon?: ReactElement;
-    footer?: ListProps['footer'];
+    footer?: DroplistProps['footer'];
+    widthStrategy?: DroplistProps['widthStrategy'];
     search?: SearchState;
     autocomplete?: boolean;
     addOptionByEnter?: boolean;
     open?: boolean;
     onOpenChange?(open: boolean): void;
     selectedOptionFormatter?: SelectedOptionFormatter;
-}> & Pick<ListProps, 'dataError' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'pinTop' | 'pinBottom' | 'dataFiltered'>;
+}> & Pick<DroplistProps, 'dataError' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'pinTop' | 'pinBottom' | 'dataFiltered'>;
 export type FieldSelectSingleProps = FieldSelectPrivateProps & Omit<SelectionSingleState, 'mode'> & WrapperProps & FiledSelectCommonProps;
 export type FieldSelectMultipleProps = FieldSelectPrivateProps & {
     removeByBackspace?: boolean;

package/dist/components/FieldSelect/utils/extractListProps.d.ts

@@ -1,3 +1,3 @@
 import { DroplistProps } from '@snack-uikit/list';
 import { FieldSelectProps } from '../types';
-export declare function extractListProps({ dataError, noDataState, noResultsState, errorDataState, pinTop, pinBottom, dataFiltered, loading, }: Partial<FieldSelectProps>): Partial<DroplistProps>;
+export declare function extractListProps({ dataError, noDataState, noResultsState, errorDataState, pinTop, pinBottom, dataFiltered, loading, footer, widthStrategy, }: Partial<FieldSelectProps>): Partial<DroplistProps>;

package/dist/components/FieldSelect/utils/extractListProps.js

@@ -1,4 +1,4 @@
-export function extractListProps({ dataError, noDataState, noResultsState, errorDataState, pinTop, pinBottom, dataFiltered, loading, }) {
+export function extractListProps({ dataError, noDataState, noResultsState, errorDataState, pinTop, pinBottom, dataFiltered, loading, footer, widthStrategy, }) {
     return {
         dataError,
         noDataState,
@@ -8,6 +8,8 @@ export function extractListProps({ dataError, noDataState, noResultsState, error
         pinBottom,
         dataFiltered,
         loading,
+        footer,
+        widthStrategy,
         trigger: 'clickAndFocusVisible',
         placement: 'bottom',
         'data-test-id': 'field-select__list',

package/dist/components/FieldSlider/FieldSlider.js

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import mergeRefs from 'merge-refs';
-import { forwardRef, useEffect, useRef, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from 'react';
 import { InputPrivate, SIZE } from '@snack-uikit/input-private';
 import { Slider } from '@snack-uikit/slider';
 import { extractSupportProps } from '@snack-uikit/utils';
@@ -19,7 +19,7 @@ import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
 import { FieldDecorator } from '../FieldDecorator';
-import { generateAllowedValues, getClosestMark, getTextFieldValue } from './helpers';
+import { generateAllowedValues, getClosestMark, getTextFieldValue, isMarkObject } from './helpers';
 import styles from './styles.module.css';
 const getDefaultValue = (range, min, max, value) => {
     if (range) {
@@ -32,6 +32,14 @@ const getDefaultValue = (range, min, max, value) => {
 };
 export const FieldSlider = forwardRef((_a, ref) => {
     var { id, name, min, max, step, marks, showScaleBar = true, value: valueProp, range = false, disabled = false, readonly = false, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required, hint, showHintIcon, size = SIZE.S, postfixIcon, textInputFormatter } = _a, rest = __rest(_a, ["id", "name", "min", "max", "step", "marks", "showScaleBar", "value", "range", "disabled", "readonly", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "size", "postfixIcon", "textInputFormatter"]);
+    const getMarkValue = useCallback((key) => {
+        const mark = marks[key];
+        if (isMarkObject(mark)) {
+            return mark.label;
+        }
+        return mark;
+    }, [marks]);
+    const hasMarksEqualToValues = useMemo(() => Object.keys(marks).every(key => key === getMarkValue(key)), [getMarkValue, marks]);
     const [value = getDefaultValue(range, min, max, valueProp), onChange] = useValueControl({
         value: valueProp,
         defaultValue: getDefaultValue(range, min, max, valueProp),
@@ -40,46 +48,82 @@ export const FieldSlider = forwardRef((_a, ref) => {
     const [textFieldInputValue, setTextFieldInputValue] = useState(getTextFieldValue(value, textInputFormatter));
     const localRef = useRef(null);
     const onTextFieldChange = (textFieldValue) => {
-        const numValue = Number(textFieldValue);
-        if (Number.isNaN(numValue)) {
+        const numValue = parseInt(textFieldValue);
+        if (textFieldValue && Number.isNaN(numValue)) {
             return;
         }
         setTextFieldInputValue(textFieldValue);
     };
-    const handleTextValueChange = () => {
-        const textFieldNumValue = Number(textFieldInputValue);
-        if (Number.isNaN(textFieldNumValue)) {
+    const handleNonEqualMarksSliderChange = (textFieldNumValue) => {
+        const handleChange = (key) => {
+            setTextFieldInputValue(String(getMarkValue(key)));
+            onChange(Number(key));
+        };
+        const allowedValues = Object.keys(marks).map(key => ({
+            key,
+            value: parseInt(String(getMarkValue(key))),
+        }));
+        const suitableEntry = allowedValues.find(entry => entry.value === textFieldNumValue);
+        if (suitableEntry) {
+            handleChange(suitableEntry.key);
+            return;
+        }
+        const actualMin = parseInt(String(getMarkValue(min)));
+        const actualMax = parseInt(String(getMarkValue(max)));
+        if (textFieldNumValue < actualMin) {
+            handleChange(min);
+            return;
+        }
+        if (textFieldNumValue > actualMax) {
+            handleChange(max);
             return;
         }
+        const { mark } = getClosestMark(textFieldNumValue, allowedValues, mark => mark.value);
+        handleChange(mark.key);
+    };
+    const handleEqualMarksSliderChange = (textFieldNumValue) => {
+        const handleChange = (value) => {
+            setTextFieldInputValue(String(value));
+            onChange(value);
+        };
         if (textFieldNumValue < min) {
-            setTextFieldInputValue(String(min));
-            onChange(min);
+            handleChange(min);
             return;
         }
         if (textFieldNumValue > max) {
-            setTextFieldInputValue(String(max));
-            onChange(max);
+            handleChange(max);
             return;
         }
         if (step === null) {
             const allowedValues = Object.keys(marks).map(Number);
             if (allowedValues.includes(textFieldNumValue)) {
-                onChange(textFieldNumValue);
+                setTextFieldInputValue(String(textFieldNumValue));
+                handleChange(textFieldNumValue);
                 return;
             }
-            const { mark } = getClosestMark(textFieldNumValue, allowedValues);
-            setTextFieldInputValue(String(mark));
-            onChange(mark);
+            const { mark } = getClosestMark(textFieldNumValue, allowedValues, mark => mark);
+            handleChange(mark);
             return;
         }
         const allowedValues = generateAllowedValues(min, max, step);
         if (allowedValues.includes(textFieldNumValue)) {
-            onChange(textFieldNumValue);
+            handleChange(textFieldNumValue);
             return;
         }
-        const { mark } = getClosestMark(textFieldNumValue, allowedValues);
-        setTextFieldInputValue(String(mark));
-        onChange(mark);
+        const { mark } = getClosestMark(textFieldNumValue, allowedValues, mark => mark);
+        handleChange(mark);
+    };
+    const handleTextValueChange = () => {
+        const textFieldNumValue = parseInt(textFieldInputValue);
+        if (Number.isNaN(textFieldNumValue)) {
+            return;
+        }
+        if (hasMarksEqualToValues) {
+            handleEqualMarksSliderChange(textFieldNumValue);
+        }
+        else {
+            handleNonEqualMarksSliderChange(textFieldNumValue);
+        }
     };
     const onTextFieldBlur = (e) => {
         onBlur === null || onBlur === void 0 ? void 0 : onBlur(e);

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

@@ -1,4 +1,4 @@
-export declare const getClosestMark: (value: number, marks: number[]) => {
+export declare const getClosestMark: <T>(value: number, marks: T[], getMarkValue: (value: T) => number) => {
     lowestDiff: number;
-    mark: number;
+    mark: T;
 };

package/dist/components/FieldSlider/helpers/getClosestMark.js

@@ -1,6 +1,6 @@
 const getDiff = (value, mark) => Math.abs(mark - value);
-export const getClosestMark = (value, marks) => marks.reduce((accResult, mark) => {
-    const diff = getDiff(value, mark);
+export const getClosestMark = (value, marks, getMarkValue) => marks.reduce((accResult, mark) => {
+    const diff = getDiff(value, getMarkValue(mark));
     if (diff < accResult.lowestDiff) {
         return {
             lowestDiff: diff,
@@ -9,6 +9,6 @@ export const getClosestMark = (value, marks) => marks.reduce((accResult, mark) =
     }
     return accResult;
 }, {
-    lowestDiff: getDiff(value, marks[0]),
+    lowestDiff: getDiff(value, getMarkValue(marks[0])),
     mark: marks[0],
 });

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

@@ -1,3 +1,4 @@
 export * from './getTextFieldValue';
 export * from './getClosestMark';
 export * from './generateAllowedValues';
+export * from './isMarkObject';

package/dist/components/FieldSlider/helpers/index.js

@@ -1,3 +1,4 @@
 export * from './getTextFieldValue';
 export * from './getClosestMark';
 export * from './generateAllowedValues';
+export * from './isMarkObject';

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

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { SliderProps as SliderComponentProps } from '@snack-uikit/slider';
+type Marks = NonNullable<SliderComponentProps['marks']>;
+type MarkObject = {
+    label: ReactNode;
+};
+export declare function isMarkObject(mark: Marks[keyof Marks]): mark is MarkObject;
+export {};

package/dist/components/FieldSlider/helpers/isMarkObject.js

@@ -0,0 +1,3 @@
+export function isMarkObject(mark) {
+    return Boolean(mark && typeof mark === 'object' && 'label' in mark);
+}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.18.2",
+  "version": "0.18.4-preview-5d3667ec.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -34,13 +34,13 @@
   "dependencies": {
     "@snack-uikit/button": "0.17.0",
     "@snack-uikit/calendar": "0.7.6",
-    "@snack-uikit/droplist": "0.13.14",
+    "@snack-uikit/droplist": "0.13.15",
     "@snack-uikit/icons": "0.20.1",
     "@snack-uikit/input-private": "3.1.1",
-    "@snack-uikit/list": "0.11.0",
+    "@snack-uikit/list": "0.11.1-preview-5d3667ec.0",
     "@snack-uikit/scroll": "0.5.2",
-    "@snack-uikit/slider": "0.1.7",
-    "@snack-uikit/tag": "0.8.2",
+    "@snack-uikit/slider": "0.1.8-preview-5d3667ec.0",
+    "@snack-uikit/tag": "0.9.0",
     "@snack-uikit/tooltip": "0.13.1",
     "@snack-uikit/truncate-string": "0.4.12",
     "@snack-uikit/utils": "3.2.0",
@@ -56,5 +56,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "082743508cd64cdc90ed11d2ea51280b5cab19de"
+  "gitHead": "311bf31807d9b8cc975e80caf14ec35108256337"
 }

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

@@ -18,8 +18,12 @@ $base-min-width: 4px;
 }
 
 .contentWrapper {
+  position: relative;
+
+  overflow: hidden;
   display: flex;
   flex-wrap: wrap;
+
   width: 100%;
 }
 
@@ -59,9 +63,7 @@ $base-min-width: 4px;
           $button-width: simple-var($icons-sizes, $size);
           $postfix-width: calc(var(#{$space-fields-postfix-gap}) + $button-width * 2);
           $margin-right: calc(
-            #{simple-var($fields, $containerVariant, $size, 'padding-right')} +
-              #{simple-var($fields, $containerVariant, $size, 'gap')} +
-              #{$postfix-width}
+            #{simple-var($fields, $containerVariant, $size, 'padding-right')} + #{simple-var($fields, $containerVariant, $size, 'gap')} + #{$postfix-width}
           );
 
           width: calc(100% - $margin-right);

package/src/components/FieldSelect/types.ts

@@ -4,8 +4,8 @@ import { InputPrivateProps } from '@snack-uikit/input-private';
 import {
   AccordionItemProps,
   BaseItemProps,
+  DroplistProps,
   GroupItemProps,
-  ListProps,
   NextListItemProps,
   SelectionMultipleState,
   SelectionSingleState,
@@ -82,7 +82,9 @@ type FiledSelectCommonProps = WithSupportProps<{
   /** Иконка-префикс для поля */
   prefixIcon?: ReactElement;
 
-  footer?: ListProps['footer'];
+  footer?: DroplistProps['footer'];
+
+  widthStrategy?: DroplistProps['widthStrategy'];
 
   search?: SearchState;
 
@@ -97,7 +99,7 @@ type FiledSelectCommonProps = WithSupportProps<{
   selectedOptionFormatter?: SelectedOptionFormatter;
 }> &
   Pick<
-    ListProps,
+    DroplistProps,
     'dataError' | 'noDataState' | 'noResultsState' | 'errorDataState' | 'pinTop' | 'pinBottom' | 'dataFiltered'
   >;
 

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

@@ -11,6 +11,8 @@ export function extractListProps({
   pinBottom,
   dataFiltered,
   loading,
+  footer,
+  widthStrategy,
 }: Partial<FieldSelectProps>): Partial<DroplistProps> {
   return {
     dataError,
@@ -21,6 +23,8 @@ export function extractListProps({
     pinBottom,
     dataFiltered,
     loading,
+    footer,
+    widthStrategy,
     trigger: 'clickAndFocusVisible',
     placement: 'bottom',
     'data-test-id': 'field-select__list',

package/src/components/FieldSlider/FieldSlider.tsx

@@ -1,5 +1,15 @@
 import mergeRefs from 'merge-refs';
-import { FocusEvent, forwardRef, KeyboardEvent, ReactElement, useEffect, useRef, useState } from 'react';
+import {
+  FocusEvent,
+  forwardRef,
+  KeyboardEvent,
+  ReactElement,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 
 import { InputPrivate, InputPrivateProps, SIZE } from '@snack-uikit/input-private';
 import { Slider, SliderProps as SliderComponentProps } from '@snack-uikit/slider';
@@ -9,7 +19,7 @@ import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
 import { useValueControl } from '../../hooks';
 import { FieldDecorator, FieldDecoratorProps } from '../FieldDecorator';
-import { generateAllowedValues, getClosestMark, getTextFieldValue } from './helpers';
+import { generateAllowedValues, getClosestMark, getTextFieldValue, isMarkObject } from './helpers';
 import styles from './styles.module.scss';
 import { TextInputFormatter } from './types';
 
@@ -81,6 +91,24 @@ export const FieldSlider = forwardRef<HTMLInputElement, FieldSliderProps>(
     },
     ref,
   ) => {
+    const getMarkValue = useCallback(
+      (key: keyof SliderProps['marks']) => {
+        const mark = marks[key];
+
+        if (isMarkObject(mark)) {
+          return mark.label;
+        }
+
+        return mark;
+      },
+      [marks],
+    );
+
+    const hasMarksEqualToValues = useMemo(
+      () => Object.keys(marks).every(key => key === getMarkValue(key)),
+      [getMarkValue, marks],
+    );
+
     const [value = getDefaultValue(range, min, max, valueProp), onChange] = useValueControl<number | number[]>({
       value: valueProp,
       defaultValue: getDefaultValue(range, min, max, valueProp),
@@ -93,54 +121,100 @@ export const FieldSlider = forwardRef<HTMLInputElement, FieldSliderProps>(
     const localRef = useRef<HTMLInputElement>(null);
 
     const onTextFieldChange = (textFieldValue: string) => {
-      const numValue = Number(textFieldValue);
-      if (Number.isNaN(numValue)) {
+      const numValue = parseInt(textFieldValue);
+
+      if (textFieldValue && Number.isNaN(numValue)) {
         return;
       }
 
       setTextFieldInputValue(textFieldValue);
     };
 
-    const handleTextValueChange = () => {
-      const textFieldNumValue = Number(textFieldInputValue);
-      if (Number.isNaN(textFieldNumValue)) {
+    const handleNonEqualMarksSliderChange = (textFieldNumValue: number) => {
+      const handleChange = (key: string | number) => {
+        setTextFieldInputValue(String(getMarkValue(key)));
+        onChange(Number(key));
+      };
+
+      const allowedValues = Object.keys(marks).map(key => ({
+        key,
+        value: parseInt(String(getMarkValue(key))),
+      }));
+      const suitableEntry = allowedValues.find(entry => entry.value === textFieldNumValue);
+
+      if (suitableEntry) {
+        handleChange(suitableEntry.key);
+        return;
+      }
+
+      const actualMin = parseInt(String(getMarkValue(min)));
+      const actualMax = parseInt(String(getMarkValue(max)));
+
+      if (textFieldNumValue < actualMin) {
+        handleChange(min);
         return;
       }
 
+      if (textFieldNumValue > actualMax) {
+        handleChange(max);
+        return;
+      }
+
+      const { mark } = getClosestMark(textFieldNumValue, allowedValues, mark => mark.value);
+      handleChange(mark.key);
+    };
+
+    const handleEqualMarksSliderChange = (textFieldNumValue: number) => {
+      const handleChange = (value: number) => {
+        setTextFieldInputValue(String(value));
+        onChange(value);
+      };
+
       if (textFieldNumValue < min) {
-        setTextFieldInputValue(String(min));
-        onChange(min);
+        handleChange(min);
         return;
       }
 
       if (textFieldNumValue > max) {
-        setTextFieldInputValue(String(max));
-        onChange(max);
+        handleChange(max);
         return;
       }
 
       if (step === null) {
         const allowedValues = Object.keys(marks).map(Number);
         if (allowedValues.includes(textFieldNumValue)) {
-          onChange(textFieldNumValue);
+          setTextFieldInputValue(String(textFieldNumValue));
+          handleChange(textFieldNumValue);
           return;
         }
 
-        const { mark } = getClosestMark(textFieldNumValue, allowedValues);
-        setTextFieldInputValue(String(mark));
-        onChange(mark);
+        const { mark } = getClosestMark(textFieldNumValue, allowedValues, mark => mark);
+        handleChange(mark);
         return;
       }
 
       const allowedValues = generateAllowedValues(min, max, step);
       if (allowedValues.includes(textFieldNumValue)) {
-        onChange(textFieldNumValue);
+        handleChange(textFieldNumValue);
         return;
       }
 
-      const { mark } = getClosestMark(textFieldNumValue, allowedValues);
-      setTextFieldInputValue(String(mark));
-      onChange(mark);
+      const { mark } = getClosestMark(textFieldNumValue, allowedValues, mark => mark);
+      handleChange(mark);
+    };
+
+    const handleTextValueChange = () => {
+      const textFieldNumValue = parseInt(textFieldInputValue);
+
+      if (Number.isNaN(textFieldNumValue)) {
+        return;
+      }
+
+      if (hasMarksEqualToValues) {
+        handleEqualMarksSliderChange(textFieldNumValue);
+      } else {
+        handleNonEqualMarksSliderChange(textFieldNumValue);
+      }
     };
 
     const onTextFieldBlur = (e: FocusEvent<HTMLInputElement, Element>) => {

package/src/components/FieldSlider/helpers/getClosestMark.ts

@@ -1,9 +1,13 @@
 const getDiff = (value: number, mark: number): number => Math.abs(mark - value);
 
-export const getClosestMark = (value: number, marks: number[]): { lowestDiff: number; mark: number } =>
+export const getClosestMark = <T>(
+  value: number,
+  marks: T[],
+  getMarkValue: (value: T) => number,
+): { lowestDiff: number; mark: T } =>
   marks.reduce(
     (accResult, mark) => {
-      const diff = getDiff(value, mark);
+      const diff = getDiff(value, getMarkValue(mark));
       if (diff < accResult.lowestDiff) {
         return {
           lowestDiff: diff,
@@ -14,7 +18,7 @@ export const getClosestMark = (value: number, marks: number[]): { lowestDiff: nu
       return accResult;
     },
     {
-      lowestDiff: getDiff(value, marks[0]),
+      lowestDiff: getDiff(value, getMarkValue(marks[0])),
       mark: marks[0],
     },
   );

package/src/components/FieldSlider/helpers/index.ts

@@ -1,3 +1,4 @@
 export * from './getTextFieldValue';
 export * from './getClosestMark';
 export * from './generateAllowedValues';
+export * from './isMarkObject';

package/src/components/FieldSlider/helpers/isMarkObject.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from 'react';
+
+import { SliderProps as SliderComponentProps } from '@snack-uikit/slider';
+
+type Marks = NonNullable<SliderComponentProps['marks']>;
+
+type MarkObject = {
+  label: ReactNode;
+};
+
+export function isMarkObject(mark: Marks[keyof Marks]): mark is MarkObject {
+  return Boolean(mark && typeof mark === 'object' && 'label' in mark);
+}