@true-engineering/true-react-common-ui-kit 4.0.0-alpha6 → 4.0.0-alpha61

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,8 +59,7 @@ 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;
   select: string;
@@ -68,9 +69,10 @@ type ConfigValues = {
   isActive: boolean;
   selectSearch: string;
   custom: string;
-};
+}
 
-interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps<Values, Content> {
+interface IFiltersPaneCustomProps<Values extends Record<string, unknown>, Content>
+  extends IFiltersPaneProps<Values, Content> {
   containerWidth: number;
   isSearchDisabled: boolean;
   shouldShowSettingsButton: boolean;
@@ -78,9 +80,12 @@ interface IFiltersPaneWithCustomProps<Values, Content> extends IFiltersPaneProps
   isGroupingEnabled: boolean;
   checkboxPosition: 'left' | 'right';
   isClearableFields: boolean;
+  isSearchAutoSized: boolean;
 }
 
-function FiltersPaneWithCustomProps<Values, Content>({
+const tweakWrapperStyles = { name: { color: 'tomato' } };
+
+const Story: FC<IFiltersPaneCustomProps<ConfigValues, unknown>> = ({
   containerWidth,
   isSearchDisabled,
   shouldShowSettingsButton,
@@ -88,8 +93,9 @@ function FiltersPaneWithCustomProps<Values, Content>({
   isGroupingEnabled,
   checkboxPosition,
   isClearableFields,
+  isSearchAutoSized,
   ...args
-}: IFiltersPaneWithCustomProps<Values, Content>) {
+}) => {
   const config: ConfigType<ConfigValues> = {
     name: {
       name: 'name',
@@ -212,6 +218,7 @@ function FiltersPaneWithCustomProps<Values, Content>({
       isClearable: isClearableFields,
       options: [LONG_STRING, '2', '3'],
       component: ({ filter, ...props }) => <FilterSelect {...props} {...filter} />,
+      tweakWrapperStyles,
     },
   };
 
@@ -238,6 +245,7 @@ function FiltersPaneWithCustomProps<Values, Content>({
           getValueView: convertFieldToString,
           onChange: setSearchValue,
           isDisabled: isSearchDisabled,
+          isAutoSized: isSearchAutoSized,
         }}
         enabledFilters={[
           'name',
@@ -260,11 +268,24 @@ function FiltersPaneWithCustomProps<Values, Content>({
       />
     </div>
   );
-}
+};
 
-export default {
+const meta: Meta<typeof Story> = {
   title: 'Table/FiltersPane',
-  component: FiltersPaneWithCustomProps,
+  component: Story,
+  args: {
+    shouldShowSettingsButton: false,
+    isSearchDisabled: false,
+    hasClearButton: true,
+    isClearableFields: false,
+    isDisabled: false,
+    shouldRenderDataId: false,
+    containerWidth: 400,
+    withFieldNameInLabel: true,
+    isGroupingEnabled: true,
+    checkboxPosition: 'left',
+    isSearchAutoSized: false,
+  },
   argTypes: {
     containerWidth: {
       control: { type: 'range', min: 100, max: 1000, step: 100 },
@@ -276,20 +297,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,
-  containerWidth: 400,
-  withFieldNameInLabel: true,
-  isGroupingEnabled: true,
-  checkboxPosition: 'left',
-};
+export default meta;
+export const Default = {};

package/src/components/FiltersPane/FiltersPane.tsx

@@ -1,16 +1,20 @@
 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';
 import { useStyles, IFiltersPaneStyles, clearButtonStyles } from './FiltersPane.styles';
 
-export interface IFiltersPaneProps<Values, Content = Values>
+export interface IFiltersPaneProps<Values extends Record<string, unknown>, Content = Values>
   extends ICommonProps<IFiltersPaneStyles> {
   filtersConfig: ConfigType<Values>;
   enabledFilters?: Array<keyof ConfigType<Values>>;
@@ -23,6 +27,10 @@ export interface IFiltersPaneProps<Values, Content = Values>
   isDisabled?: boolean;
   /** @default true */
   hasClearButton?: boolean;
+  /** @default false */
+  shouldRenderDataId?: boolean;
+  /** @default 'filter' */
+  settingsIcon?: IIcon;
   onChangeFilters: (values: Partial<Values>) => void;
   onSettingsButtonClick?: () => void;
   onClear?: () => void;
@@ -39,6 +47,8 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
   search,
   isDisabled = false,
   hasClearButton = true,
+  shouldRenderDataId = false,
+  settingsIcon = 'filter',
   testId,
   onChangeFilters,
   onSettingsButtonClick,
@@ -61,10 +71,10 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
 
   const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
 
-  const filtersKeys = enabledFilters || Object.keys(filtersConfig);
+  const filtersKeys = enabledFilters ?? Object.keys(filtersConfig);
 
   const handleClear = () => {
-    if (onClear !== undefined) {
+    if (isNotEmpty(onClear)) {
       onClear();
       return;
     }
@@ -76,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}>
@@ -95,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
@@ -104,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 */}
@@ -122,10 +129,11 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
       {/* Filters */}
       {filtersKeys.map((key, index) => {
         const isLast = index === filtersKeys.length - 1;
-        const currentValue = values[key];
-        const filter = filtersConfig[key];
+        const filterKey = String(key);
+        const currentValue = values[filterKey];
+        const filter = filtersConfig[filterKey];
         if (filter === undefined) {
-          console.error(`enabledFilters содержит фильтр ${String(key)}, не описанный в конфиге`);
+          console.error(`enabledFilters содержит фильтр ${filterKey}, не описанный в конфиге`);
           if (isLast) {
             return clearButton;
           }
@@ -137,18 +145,19 @@ export function FiltersPane<Values extends Record<string, unknown>, Content = Va
             filter={filter}
             locale={locale}
             localeKey={localeKey}
-            onChange={(value) => onChangeFilters({ ...values, [key]: value })}
+            onChange={(value) => onChangeFilters({ ...values, [filterKey]: value })}
             value={currentValue}
-            key={key as string}
+            key={filterKey}
             isDisabled={isDisabled || filter?.requiredFilledFilters?.some((item) => !values[item])}
             tweakStyles={tweakFilterWrapperStyles}
-            testId={getTestId(testId, `filter-${String(key)}`)}
+            data={shouldRenderDataId ? { id: filterKey } : undefined}
+            testId={getTestId(testId, `filter-${filterKey}`)}
           />
         );
 
         if (isLast) {
           return (
-            <div className={classes.filterWithClearButton} key={key as string}>
+            <div className={classes.filterWithClearButton} key={filterKey}>
               {filterWrapper}
               {shouldShowClearButton && <>{clearButton}</>}
             </div>

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

@@ -1,20 +1,21 @@
 import { useMemo } from 'react';
+import { getTestId } from '@true-engineering/true-react-platform-helpers';
 import { getLocale } from '../../helpers';
-import { IFilterMultiSelectValues, IFilterWithDatesValue, IPeriod } from '../../types';
 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';
 
-export interface IFilterProps<Values, Key extends keyof Values>
+export interface IFilterProps<Values extends Record<string, unknown>, Key extends keyof Values>
   extends IFilterWrapperProps<Values, Key> {
   onChange: <V>(v: V) => void;
   onClose?: () => void;
 }
 
-export function Filter<Values, Key extends keyof Values>(
+export function Filter<Values extends Record<string, unknown>, Key extends keyof Values>(
   props: IFilterProps<Values, Key>,
 ): JSX.Element | null {
   const { filter, value, onChange, onClose, localeKey, locale, testId } = props;
@@ -32,83 +33,88 @@ export function Filter<Values, Key extends keyof Values>(
         onClose={onClose}
         localeKey={translatesLocaleKey}
         locale={translates}
-        testId={testId !== undefined ? `${testId}-select` : undefined}
+        testId={getTestId(testId, 'select')}
         {...filter}
       />
     );
   }
 
   if (filter.type === 'dateRange') {
+    const preparedValue = isPeriodValue(value) ? { ...value } : undefined;
+
     return (
       <FilterWithPeriod
-        value={{ ...value } as IPeriod}
+        value={preparedValue}
         onChange={onChange}
         onClose={onClose}
         localeKey={translatesLocaleKey}
         locale={translates}
-        testId={testId !== undefined ? `${testId}-period` : undefined}
+        testId={getTestId(testId, 'period')}
         {...filter}
       />
     );
   }
 
   if (filter.type === 'dateRangeWithoutPeriod') {
+    const preparedValue = isDatePeriodValue(value) ? value : undefined;
+
     return (
-      <div style={{ width: 320 }}>
-        <FilterWithDates
-          value={value as unknown as IFilterWithDatesValue}
-          onChange={(v) => onChange({ ...v, periodType: 'CUSTOM' })}
-          onEndBtnSubmit={() => onChange(undefined)}
-          localeKey={translatesLocaleKey}
-          locale={translates}
-          testId={testId !== undefined ? `${testId}-dates` : undefined}
-          {...filter}
-        />
-      </div>
+      <FilterWithDates
+        value={preparedValue}
+        onChange={(v) => onChange({ ...v, periodType: 'CUSTOM' })}
+        onEndBtnSubmit={() => onChange(undefined)}
+        localeKey={translatesLocaleKey}
+        locale={translates}
+        testId={getTestId(testId, 'dates')}
+        {...filter}
+      />
     );
   }
 
   if (filter.type === 'multiSelect') {
+    const preparedValue = isMultiSelectValue<any>(value) ? value : undefined;
+
     return (
       <FilterMultiSelect
-        value={value as unknown as IFilterMultiSelectValues<any>}
+        value={preparedValue}
         onChange={onChange}
         onClose={onClose}
         localeKey={translatesLocaleKey}
         locale={translates}
-        testId={testId !== undefined ? `${testId}-multiSelect` : undefined}
+        testId={getTestId(testId, 'multiSelect')}
         {...filter}
       />
     );
   }
 
   if (filter.type === 'interval') {
+    const preparedValue = Array.isArray(value) ? (value as number[]) : undefined;
+
     return (
       <FilterInterval
-        value={value as unknown as number[]}
+        value={preparedValue}
         onChange={onChange}
         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

@@ -0,0 +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 =>
+  isEmpty(value) || value instanceof Date;
+
+// 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
+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
+  value: any,
+): value is IFilterMultiSelectValues<T> => Array.isArray(value?.include);

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,

package/src/components/FiltersPane/components/FilterSelect/FilterSelect.tsx

@@ -1,8 +1,14 @@
 import { ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { debounce } from 'ts-debounce';
-import { isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
+import {
+  addDataTestId,
+  getTestId,
+  isReactNodeNotEmpty,
+  addDataAttributes,
+  isArrayNotEmpty,
+  isNotEmpty,
+} from '@true-engineering/true-react-platform-helpers';
 import { useIsMounted, useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Button } from '../../../Button';
@@ -227,7 +233,7 @@ export function FilterSelect<Value>({
   }, []);
 
   return (
-    <div className={classes.root} {...addDataAttributes(data)}>
+    <div className={classes.root} {...addDataAttributes(data, testId)}>
       {isSearchEnabled && (
         <div className={classes.dropdownInput}>
           <SearchInput
@@ -235,7 +241,7 @@ export function FilterSelect<Value>({
             placeholder={translates.searchPlaceholder}
             onChange={handleOnChange}
             tweakStyles={tweakSearchInputStyles}
-            testId={testId !== undefined ? `${testId}-search` : undefined}
+            testId={getTestId(testId, 'search')}
             shouldFocusOnMount
           />
         </div>
@@ -243,19 +249,17 @@ export function FilterSelect<Value>({
 
       {!isLoading && (
         <>
-          {allOptions.length !== 0 && (
+          {isArrayNotEmpty(allOptions) && (
             <div
-              className={clsx(classes.list, hasClearButton && classes.withClearButton)}
-              data-testid={testId !== undefined ? `${testId}-list` : undefined}
+              className={clsx(classes.list, { [classes.withClearButton]: hasClearButton })}
+              {...addDataTestId(testId, 'list')}
             >
-              {isGroupingEnabled && value !== undefined && (
+              {isGroupingEnabled && isNotEmpty(value) && (
                 <>
                   <div
-                    className={clsx(
-                      classes.label,
-                      classes.labelChosen,
-                      !isSearchEnabled && classes.withoutTopGap,
-                    )}
+                    className={clsx(classes.label, classes.labelChosen, {
+                      [classes.withoutTopGap]: !isSearchEnabled,
+                    })}
                   >
                     {translates.chosen}
                   </div>
@@ -269,7 +273,7 @@ export function FilterSelect<Value>({
                 </>
               )}
               {allOptions.map((item, index) => {
-                const isActive = value !== undefined && getValueId(value) === getValueId(item);
+                const isActive = isNotEmpty(value) && getValueId(value) === getValueId(item);
                 if (isGroupingEnabled && isActive) {
                   return null;
                 }
@@ -287,8 +291,7 @@ export function FilterSelect<Value>({
                     }
                     onClick={() => handleChange(item)}
                   >
-                    {/* data нужно ли? */}
-                    <div className={classes.option} data-option={id}>
+                    <div className={classes.option} {...addDataAttributes({ id, option: id })}>
                       {view}
                     </div>
                     {isActive && (
@@ -320,17 +323,13 @@ export function FilterSelect<Value>({
           )}
 
           {/* Nothing found */}
-          {allOptions.length === 0 && (
+          {!isArrayNotEmpty(allOptions) && (
             <div className={classes.nothingFound}>{translates.nothingFound}</div>
           )}
 
           {/* Controls and footer */}
           {(hasClearButton || hasFooter) && (
-            <div
-              className={clsx(classes.panel, {
-                [classes.panelWithFooter]: hasFooter,
-              })}
-            >
+            <div className={clsx(classes.panel, { [classes.panelWithFooter]: hasFooter })}>
               {hasFooter && <div className={classes.footer}>{footer}</div>}
 
               {hasClearButton && (
@@ -339,7 +338,7 @@ export function FilterSelect<Value>({
                     onClick={handleClear}
                     size="s"
                     view="text"
-                    testId={testId !== undefined ? `${testId}-clear-button` : undefined}
+                    testId={getTestId(testId, 'clear-button')}
                     tweakStyles={tweakClearButtonStyles}
                   >
                     {translates.clear}

package/src/components/FiltersPane/components/FilterValueView/FilterValueView.tsx

@@ -9,14 +9,17 @@ import { IDateRangeConfigItem, IFilterWithDatesValue, IPeriod } from '../../type
 import type { IFilterWrapperProps } from '../FilterWrapper';
 import { IFilterValueViewStyles, useStyles } from './FilterValueView.styles';
 
-export function FilterValueView<Values, Key extends keyof Values>({
+export interface IFilterValueView<Values extends Record<string, unknown>, Key extends keyof Values>
+  extends Omit<IFilterWrapperProps<Values, Key>, 'filtersPaneRef' | 'tweakStyles' | 'onChange'>,
+    ICommonProps<IFilterValueViewStyles> {}
+
+export function FilterValueView<Values extends Record<string, unknown>, Key extends keyof Values>({
+  value,
+  filter,
   locale,
   localeKey,
-  filter,
-  value,
   tweakStyles,
-}: Omit<IFilterWrapperProps<Values, Key>, 'onChange' | 'filtersPaneRef' | 'tweakStyles'> &
-  ICommonProps<IFilterValueViewStyles>): JSX.Element {
+}: IFilterValueView<Values, Key>): JSX.Element {
   const classes = useStyles({ theme: tweakStyles });
 
   const translatesLocaleKey = filter.localeKey ?? localeKey;