@true-engineering/true-react-common-ui-kit 4.0.0-alpha7 → 4.0.0-alpha70

package/src/components/FiltersPane/FiltersPane.stories.tsx

@@ -1,5 +1,5 @@
-import { ReactNode, useState } from 'react';
-import { ComponentStory } from '@storybook/react';
+import { FC, ReactNode, useState } from 'react';
+import { type Meta } from '@storybook/react';
 import { IMultiSelectListValues } from '../MultiSelectList';
 import { FiltersPane, IFiltersPaneProps } from './FiltersPane';
 import { FilterSelect } from './components';
@@ -8,11 +8,13 @@ import { ConfigType, IDatePeriod, IFiltersPaneSearchPayload, IPeriod } from './t
 const LONG_STRING = 'or veeeeeeeeery looooooooooooooooooooooooooooooooooooooooong';
 
 const convertVToString = (val: { v: string }): string => val.v;
+
 const convertVToNode = (val: { v: string }): ReactNode => (
   <b>
     <i>{val.v}</i>
   </b>
 );
+
 const fieldTranslates = {
   interval: 'Interval',
   name: 'Name',
@@ -57,10 +59,10 @@ const fetchOptionsMock = [
   'or vee444ee',
 ];
 
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-type ConfigValues = {
+interface ConfigValues extends Record<string, unknown> {
   name: string;
-  date: IPeriod;
+  datePeriod: IPeriod;
+  datePickerSingle: Date;
   select: string;
   multiSelect: string;
   multiSelectWithSearch: IMultiSelectListValues<{ v: string }>;
@@ -68,9 +70,9 @@ type ConfigValues = {
   isActive: boolean;
   selectSearch: string;
   custom: string;
-};
+}
 
-interface IFiltersPaneWithCustomProps<Values extends Record<string, unknown>, Content>
+interface IFiltersPaneCustomProps<Values extends Record<string, unknown>, Content>
   extends IFiltersPaneProps<Values, Content> {
   containerWidth: number;
   isSearchDisabled: boolean;
@@ -79,9 +81,12 @@ interface IFiltersPaneWithCustomProps<Values extends Record<string, unknown>, Co
   isGroupingEnabled: boolean;
   checkboxPosition: 'left' | 'right';
   isClearableFields: boolean;
+  isSearchAutoSized: boolean;
 }
 
-function FiltersPaneWithCustomProps<Values extends Record<string, unknown>, Content>({
+const tweakWrapperStyles = { name: { color: 'tomato' } };
+
+const Story: FC<IFiltersPaneCustomProps<ConfigValues, unknown>> = ({
   containerWidth,
   isSearchDisabled,
   shouldShowSettingsButton,
@@ -89,8 +94,9 @@ function FiltersPaneWithCustomProps<Values extends Record<string, unknown>, Cont
   isGroupingEnabled,
   checkboxPosition,
   isClearableFields,
+  isSearchAutoSized,
   ...args
-}: IFiltersPaneWithCustomProps<Values, Content>) {
+}) => {
   const config: ConfigType<ConfigValues> = {
     name: {
       name: 'name',
@@ -122,25 +128,6 @@ function FiltersPaneWithCustomProps<Values extends Record<string, unknown>, Cont
       options: selectOptions,
     },
 
-    date: {
-      name: 'date',
-      type: 'dateRange',
-      locale: {
-        periods: {
-          MINE: 'Вот такой',
-        },
-      },
-      periods: [
-        'THIS_MONTH',
-        'LAST_MONTH',
-        'THIS_YEAR',
-        'LAST_YEAR',
-        ['MINE', myPeriodGetter],
-        'CUSTOM',
-      ],
-      isClearable: isClearableFields,
-    },
-
     multiSelect: {
       name: 'multiSelect',
       type: 'multiSelect',
@@ -207,12 +194,44 @@ function FiltersPaneWithCustomProps<Values extends Record<string, unknown>, Cont
       isClearable: isClearableFields,
     },
 
+    datePeriod: {
+      name: 'Date With Period',
+      type: 'dateRange',
+      locale: {
+        periods: {
+          MINE: 'Вот такой',
+        },
+      },
+      periods: [
+        'THIS_MONTH',
+        'LAST_MONTH',
+        'THIS_YEAR',
+        'LAST_YEAR',
+        ['MINE', myPeriodGetter],
+        'CUSTOM',
+      ],
+      isClearable: isClearableFields,
+    },
+
+    dateWithoutPeriod: {
+      name: 'Date Without Period',
+      type: 'dateRangeWithoutPeriod',
+      isClearable: isClearableFields,
+    },
+
+    datePickerSingle: {
+      name: 'Date Picker Single',
+      type: 'datePickerSingle',
+      isClearable: isClearableFields,
+    },
+
     custom: {
       type: 'custom',
       name: 'Custom',
       isClearable: isClearableFields,
       options: [LONG_STRING, '2', '3'],
       component: ({ filter, ...props }) => <FilterSelect {...props} {...filter} />,
+      tweakWrapperStyles,
     },
   };
 
@@ -239,10 +258,13 @@ function FiltersPaneWithCustomProps<Values extends Record<string, unknown>, Cont
           getValueView: convertFieldToString,
           onChange: setSearchValue,
           isDisabled: isSearchDisabled,
+          isAutoSized: isSearchAutoSized,
         }}
         enabledFilters={[
           'name',
-          'date',
+          'datePeriod',
+          'dateWithoutPeriod',
+          'datePickerSingle',
           'select',
           'multiSelect',
           'multiSelectWithSearch',
@@ -253,7 +275,6 @@ function FiltersPaneWithCustomProps<Values extends Record<string, unknown>, Cont
         ]}
         filtersConfig={config}
         values={values}
-        localeKey="ru"
         locale={{ searchPlaceholder: 'Поиск' }}
         onChangeFilters={setValues}
         onSettingsButtonClick={shouldShowSettingsButton ? () => null : undefined}
@@ -261,14 +282,29 @@ function FiltersPaneWithCustomProps<Values extends Record<string, unknown>, Cont
       />
     </div>
   );
-}
+};
 
-export default {
+const meta: Meta<typeof Story> = {
   title: 'Table/FiltersPane',
-  component: FiltersPaneWithCustomProps,
+  component: Story,
+  args: {
+    localeKey: 'ru',
+    shouldShowSettingsButton: false,
+    isSearchDisabled: false,
+    hasClearButton: true,
+    isClearableFields: false,
+    isDisabled: false,
+    shouldRenderDataId: false,
+    containerWidth: 800,
+    withFieldNameInLabel: true,
+    isGroupingEnabled: true,
+    checkboxPosition: 'left',
+    isSearchAutoSized: false,
+  },
   argTypes: {
+    localeKey: { control: 'inline-radio', options: ['ru', 'en'] },
     containerWidth: {
-      control: { type: 'range', min: 100, max: 1000, step: 100 },
+      control: { type: 'range', min: 500, max: 1400, step: 100 },
     },
     checkboxPosition: {
       control: 'inline-radio',
@@ -277,21 +313,5 @@ export default {
   },
 };
 
-const Template: ComponentStory<typeof FiltersPaneWithCustomProps> = (args) => (
-  <FiltersPaneWithCustomProps {...args} />
-);
-
-export const Default = Template.bind({});
-
-Default.args = {
-  shouldShowSettingsButton: false,
-  isSearchDisabled: false,
-  hasClearButton: true,
-  isClearableFields: false,
-  isDisabled: false,
-  shouldRenderDataId: false,
-  containerWidth: 400,
-  withFieldNameInLabel: true,
-  isGroupingEnabled: true,
-  checkboxPosition: 'left',
-};
+export default meta;
+export const Default = {};

package/src/components/FiltersPane/FiltersPane.tsx

@@ -1,10 +1,14 @@
 import { useMemo } from 'react';
-import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../helpers';
+import {
+  addDataAttributes,
+  addDataTestId,
+  getTestId,
+  isNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../hooks';
 import { ICommonProps } from '../../types';
 import { Button } from '../Button';
-import { Icon } from '../Icon';
+import { IIcon, renderIcon } from '../Icon';
 import { FilterWrapper, IFiltersPaneSearchProps, FiltersPaneSearch } from './components';
 import { getLocale } from './helpers';
 import { ConfigType, IFilterLocaleKey, IPartialFilterLocale } from './types';
@@ -25,6 +29,8 @@ export interface IFiltersPaneProps<Values extends Record<string, unknown>, Conte
   hasClearButton?: boolean;
   /** @default false */
   shouldRenderDataId?: boolean;
+  /** @default 'filter' */
+  settingsIcon?: IIcon;
   onChangeFilters: (values: Partial<Values>) => void;
   onSettingsButtonClick?: () => void;
   onClear?: () => void;
@@ -42,6 +48,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
   isDisabled = false,
   hasClearButton = true,
   shouldRenderDataId = false,
+  settingsIcon = 'filter',
   testId,
   onChangeFilters,
   onSettingsButtonClick,
@@ -67,7 +74,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
   const filtersKeys = enabledFilters ?? Object.keys(filtersConfig);
 
   const handleClear = () => {
-    if (onClear !== undefined) {
+    if (isNotEmpty(onClear)) {
       onClear();
       return;
     }
@@ -79,8 +86,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
 
   const shouldShowClearButton =
     hasClearButton &&
-    (search !== undefined ||
-      filtersKeys.filter((key) => filtersConfig[key] !== undefined).length > 0);
+    (isNotEmpty(search) || filtersKeys.some((key) => isNotEmpty(filtersConfig[key])));
 
   const clearButton = (
     <div className={classes.clear}>
@@ -98,7 +104,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
   );
 
   return (
-    <div className={classes.root} {...addDataTestId(testId)} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data, testId)}>
       {/* Settings */}
       {onSettingsButtonClick !== undefined && (
         <div
@@ -107,9 +113,7 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
           {...addDataTestId(testId, 'settings-button')}
           onClick={!isDisabled ? onSettingsButtonClick : undefined}
         >
-          <div className={classes.settingsIcon}>
-            <Icon type="filter" />
-          </div>
+          <div className={classes.settingsIcon}>{renderIcon(settingsIcon)}</div>
         </div>
       )}
       {/* Search */}
@@ -144,7 +148,11 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
             onChange={(value) => onChangeFilters({ ...values, [filterKey]: value })}
             value={currentValue}
             key={filterKey}
-            isDisabled={isDisabled || filter?.requiredFilledFilters?.some((item) => !values[item])}
+            isDisabled={
+              isDisabled ||
+              filter?.isDisabled ||
+              filter?.requiredFilledFilters?.some((item) => !values[item])
+            }
             tweakStyles={tweakFilterWrapperStyles}
             data={shouldRenderDataId ? { id: filterKey } : undefined}
             testId={getTestId(testId, `filter-${filterKey}`)}

package/src/components/FiltersPane/components/Filter/Filter.tsx

@@ -1,12 +1,14 @@
 import { useMemo } from 'react';
+import { getTestId } from '@true-engineering/true-react-platform-helpers';
 import { getLocale } from '../../helpers';
+import { FilterDateSingle } from '../FilterDateSingle';
 import { FilterInterval } from '../FilterInterval';
 import { FilterMultiSelect } from '../FilterMultiSelect';
 import { FilterSelect } from '../FilterSelect';
 import { FilterWithDates } from '../FilterWithDates';
 import { FilterWithPeriod } from '../FilterWithPeriod';
 import type { IFilterWrapperProps } from '../FilterWrapper';
-import { isDatePeriodValue, isMultiSelectValue, isPeriodValue } from './helpers';
+import { isDateOrEmpty, isDatePeriodValue, isMultiSelectValue, isPeriodValue } from './helpers';
 
 export interface IFilterProps<Values extends Record<string, unknown>, Key extends keyof Values>
   extends IFilterWrapperProps<Values, Key> {
@@ -32,7 +34,7 @@ export function Filter<Values extends Record<string, unknown>, Key extends keyof
         onClose={onClose}
         localeKey={translatesLocaleKey}
         locale={translates}
-        testId={testId !== undefined ? `${testId}-select` : undefined}
+        testId={getTestId(testId, 'select')}
         {...filter}
       />
     );
@@ -48,7 +50,7 @@ export function Filter<Values extends Record<string, unknown>, Key extends keyof
         onClose={onClose}
         localeKey={translatesLocaleKey}
         locale={translates}
-        testId={testId !== undefined ? `${testId}-period` : undefined}
+        testId={getTestId(testId, 'period')}
         {...filter}
       />
     );
@@ -64,7 +66,24 @@ export function Filter<Values extends Record<string, unknown>, Key extends keyof
         onEndBtnSubmit={() => onChange(undefined)}
         localeKey={translatesLocaleKey}
         locale={translates}
-        testId={testId !== undefined ? `${testId}-dates` : undefined}
+        testId={getTestId(testId, 'dates')}
+        {...filter}
+      />
+    );
+  }
+
+  if (filter.type === 'datePickerSingle') {
+    const preparedValue = isDateOrEmpty(value) ? value : undefined;
+
+    return (
+      <FilterDateSingle
+        value={preparedValue}
+        onChange={onChange}
+        onClose={onClose}
+        onEndBtnSubmit={() => onChange(undefined)}
+        localeKey={translatesLocaleKey}
+        locale={translates}
+        testId={getTestId(testId, 'datePicker')}
         {...filter}
       />
     );
@@ -80,7 +99,7 @@ export function Filter<Values extends Record<string, unknown>, Key extends keyof
         onClose={onClose}
         localeKey={translatesLocaleKey}
         locale={translates}
-        testId={testId !== undefined ? `${testId}-multiSelect` : undefined}
+        testId={getTestId(testId, 'multiSelect')}
         {...filter}
       />
     );
@@ -96,26 +115,24 @@ export function Filter<Values extends Record<string, unknown>, Key extends keyof
         localeKey={translatesLocaleKey}
         locale={translates}
         labelName={filter.name}
-        testId={testId !== undefined ? `${testId}-interval` : undefined}
+        testId={getTestId(testId, 'interval')}
         {...filter}
       />
     );
   }
 
-  if (filter.type === 'boolean') {
-    return null;
-  }
-
   if (filter.type === 'custom' && filter.component) {
     const Component = filter.component;
 
-    return <Component {...props} filter={filter} />;
+    return <Component {...props} filter={filter} testId={getTestId(testId, 'dropdown')} />;
   }
 
-  console.warn(
-    `%cДля фильтра ${filter.name} не задан тип или component`,
-    'background: red; color: black',
-  );
+  if (filter.type !== 'boolean') {
+    console.warn(
+      `%cДля фильтра ${filter.name} не задан тип или component`,
+      'background: red; color: black',
+    );
+  }
 
   return null;
 }

package/src/components/FiltersPane/components/Filter/helpers.ts

@@ -1,18 +1,18 @@
 import { isEmpty, isString } from '@true-engineering/true-react-platform-helpers';
 import { IDatePeriod, IFilterMultiSelectValues, IPeriod } from '../../types';
 
-const isDateOrEmpty = (value: unknown): value is Date | null | undefined =>
+export const isDateOrEmpty = (value: unknown): value is Date | null | undefined =>
   isEmpty(value) || value instanceof Date;
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const isDatePeriodValue = (value: any): value is IDatePeriod =>
   isDateOrEmpty(value?.from) && isDateOrEmpty(value?.to);
 
-// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const isPeriodValue = (value: any): value is IPeriod =>
   isString(value?.periodType) && isDatePeriodValue(value);
 
 export const isMultiSelectValue = <T extends string>(
-  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   value: any,
 ): value is IFilterMultiSelectValues<T> => Array.isArray(value?.include);

package/src/components/FiltersPane/components/FilterDateSingle/FilterDateSingle.styles.ts

@@ -0,0 +1,34 @@
+import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
+import { IButtonStyles } from '../../../Button';
+import { IDatePickerStyles } from '../../../DatePicker';
+import { innerTextButtonStyles } from '../../FiltersPane.styles';
+
+export const useStyles = createThemedStyles('FilterDateSingle', {
+  root: {
+    width: 312,
+    background: colors.CLASSIC_WHITE,
+    position: 'relative',
+    zIndex: 20,
+  },
+
+  container: {
+    padding: [8, 20],
+  },
+
+  buttons: {
+    display: 'flex',
+    flexDirection: 'row-reverse',
+    justifyContent: 'space-between',
+    padding: 8,
+  },
+});
+
+export const clearButtonStyles = structuredClone(innerTextButtonStyles);
+
+export type IFilterDateSingleStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakDatePicker: IDatePickerStyles;
+    tweakClearButton: IButtonStyles;
+  }
+>;

package/src/components/FiltersPane/components/FilterDateSingle/FilterDateSingle.tsx

@@ -0,0 +1,103 @@
+import { FC, useMemo, useRef } from 'react';
+import { enUS, ru } from 'date-fns/locale';
+import { addDataAttributes, getTestId } from '@true-engineering/true-react-platform-helpers';
+import { useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
+import { Button } from '../../../Button';
+import { DatePicker, IDatePickerProps } from '../../../DatePicker';
+import { getLocale } from '../../helpers';
+import { IFilterLocaleKey, IPartialFilterLocale } from '../../types';
+import { clearButtonStyles, IFilterDateSingleStyles, useStyles } from './FilterDateSingle.styles';
+
+export interface IFilterDateSingleProps
+  extends ICommonProps<IFilterDateSingleStyles>,
+    Partial<
+      Pick<
+        IDatePickerProps,
+        'label' | 'minDate' | 'maxDate' | 'calendarStartDay' | 'popperModifiers' | 'popperPlacement'
+      >
+    > {
+  value?: Date | null;
+  locale?: IPartialFilterLocale;
+  localeKey?: IFilterLocaleKey;
+  isClearable?: boolean;
+  onChange: (value: Date | null) => void;
+  onClose?: () => void;
+  onEndBtnSubmit: () => void;
+}
+
+export const FilterDateSingle: FC<IFilterDateSingleProps> = ({
+  value,
+  label,
+  locale,
+  localeKey,
+  isClearable,
+  tweakStyles,
+  onChange,
+  onClose,
+  onEndBtnSubmit,
+  testId,
+  data,
+  ...props
+}) => {
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakClearButtonStyles = useTweakStyles({
+    innerStyles: clearButtonStyles,
+    tweakStyles,
+    className: 'tweakClearButton',
+    currentComponentName: 'FilterDateSingle',
+  });
+
+  const tweakDatePickerStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakDatePicker',
+    currentComponentName: 'FilterDateSingle',
+  });
+
+  const popperTargetRef = useRef<HTMLDivElement>(null);
+
+  const dateLocale = localeKey === 'ru' ? ru : enUS;
+  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
+
+  const handleClear = () => {
+    onEndBtnSubmit();
+  };
+
+  return (
+    <div className={classes.root} ref={popperTargetRef} {...addDataAttributes(data, testId)}>
+      <div className={classes.container}>
+        <DatePicker
+          label={label ?? translates.date}
+          locale={dateLocale}
+          months={translates.months}
+          selectedDate={value}
+          onChangeDate={(date) => {
+            onChange(date);
+            onClose?.();
+          }}
+          tweakStyles={tweakDatePickerStyles}
+          popperProps={{ elements: { reference: popperTargetRef?.current } }}
+          {...props}
+        />
+      </div>
+
+      <div className={classes.buttons}>
+        {isClearable && (
+          <div>
+            <Button
+              onClick={handleClear}
+              size="s"
+              view="text"
+              testId={getTestId(testId, 'clear-button')}
+              isFullWidth
+              tweakStyles={tweakClearButtonStyles}
+            >
+              {translates.clear}
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/FiltersPane/components/FilterDateSingle/index.ts

@@ -0,0 +1,2 @@
+export * from './FilterDateSingle';
+export type { IFilterDateSingleStyles } from './FilterDateSingle.styles';

package/src/components/FiltersPane/components/FilterInterval/FilterInterval.styles.ts

@@ -1,4 +1,3 @@
-import cloneDeep from 'lodash-es/cloneDeep';
 import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
 import { IButtonStyles } from '../../../Button';
 import { IInputStyles } from '../../../Input';
@@ -52,7 +51,7 @@ export const inputStyles: IInputStyles = {
   },
 };
 
-export const clearButtonStyles = cloneDeep(innerTextButtonStyles);
+export const clearButtonStyles = structuredClone(innerTextButtonStyles);
 
 export type IFilterIntervalStyles = ITweakStyles<
   typeof useStyles,

package/src/components/FiltersPane/components/FilterInterval/FilterInterval.tsx

@@ -1,12 +1,11 @@
 import { FC, useMemo } from 'react';
-import { getTestId } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
+import { getTestId, addDataAttributes } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Button } from '../../../Button';
 import { NumberInput } from '../../../NumberInput';
 import { getLocale, sortValues } from '../../helpers';
-import { IFilterLocaleKey, IPartialFilterLocale } from '../../types';
+import { IFilterLocaleKey, IFilterNumberInputProps, IPartialFilterLocale } from '../../types';
 import {
   clearButtonStyles,
   IFilterIntervalStyles,
@@ -22,16 +21,8 @@ export interface IFilterIntervalProps extends ICommonProps<IFilterIntervalStyles
   locale?: IPartialFilterLocale;
   withFieldNameInLabel?: boolean;
   canBeFloat?: boolean;
-  fromInput?: {
-    min?: number;
-    max?: number;
-    maxLength?: number;
-  };
-  toInput?: {
-    min?: number;
-    max?: number;
-    maxLength?: number;
-  };
+  fromInput?: IFilterNumberInputProps;
+  toInput?: IFilterNumberInputProps;
 }
 
 export const FilterInterval: FC<IFilterIntervalProps> = ({
@@ -87,7 +78,7 @@ export const FilterInterval: FC<IFilterIntervalProps> = ({
   });
 
   return (
-    <div className={classes.root} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data, testId)}>
       <div className={classes.inputWrapper}>
         <div>
           <NumberInput
@@ -100,11 +91,9 @@ export const FilterInterval: FC<IFilterIntervalProps> = ({
             }
             canBeFloat={canBeFloat}
             isClearable
-            min={fromInput?.min}
-            max={fromInput?.max}
-            maxLength={fromInput?.maxLength}
             tweakStyles={tweakInputStyles}
             testId={getTestId(testId, 'start')}
+            {...fromInput}
           />
           {withFieldNameInLabel && (
             <div className={classes.autosize}>
@@ -123,11 +112,9 @@ export const FilterInterval: FC<IFilterIntervalProps> = ({
             }
             canBeFloat={canBeFloat}
             isClearable
-            min={toInput?.min}
-            max={toInput?.max}
-            maxLength={toInput?.maxLength}
             tweakStyles={tweakInputStyles}
             testId={getTestId(testId, 'end')}
+            {...toInput}
           />
           {withFieldNameInLabel && (
             <div className={classes.autosize}>

package/src/components/FiltersPane/components/FilterSelect/FilterSelect.styles.ts

@@ -1,4 +1,3 @@
-import cloneDeep from 'lodash-es/cloneDeep';
 import { animations, colors, createThemedStyles, helpers, ITweakStyles } from '../../../../theme';
 import { IButtonStyles } from '../../../Button';
 import { ISearchInputStyles } from '../../../SearchInput';
@@ -132,7 +131,7 @@ export const searchInputStyles: ISearchInputStyles = {
   },
 };
 
-export const clearButtonStyles = cloneDeep(innerTextButtonStyles);
+export const clearButtonStyles = structuredClone(innerTextButtonStyles);
 
 export type IFilterSelectStyles = ITweakStyles<
   typeof useStyles,