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

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> = ({
@@ -48,7 +39,7 @@ export const FilterInterval: FC<IFilterIntervalProps> = ({
   toInput,
   testId,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
 
@@ -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';
@@ -64,7 +70,7 @@ export function FilterSelect<Value>({
   hasClearButton = true,
   testId,
 }: IFilterSelectProps<Value>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakSearchInputStyles = useTweakStyles({
     innerStyles: searchInputStyles,
@@ -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

@@ -1,17 +1,23 @@
-import { useMemo } from 'react';
+import { ReactNode, useMemo } from 'react';
 import { format } from 'date-fns';
-import { isEmpty, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { ICommonProps } from '../../../../types';
+import {
+  isArrayNotEmpty,
+  isNotEmpty,
+  isObject,
+} from '@true-engineering/true-react-platform-helpers';
+import { ITweakStylesProps } from '../../../../types';
 import { IMultiSelectListValues } from '../../../MultiSelectList';
 import { DEFAULT_DATE_FORMAT } from '../../constants';
-import { defaultConvertFunction, getLocale } from '../../helpers';
-import { IDateRangeConfigItem, IFilterWithDatesValue, IPeriod } from '../../types';
+import { getLocale } from '../../helpers';
+import { IDateRangeConfigItem, IPeriod } from '../../types';
 import type { IFilterWrapperProps } from '../FilterWrapper';
 import { IFilterValueViewStyles, useStyles } from './FilterValueView.styles';
 
 export interface IFilterValueView<Values extends Record<string, unknown>, Key extends keyof Values>
-  extends Omit<IFilterWrapperProps<Values, Key>, 'filtersPaneRef' | 'tweakStyles' | 'onChange'>,
-    ICommonProps<IFilterValueViewStyles> {}
+  extends Pick<IFilterWrapperProps<Values, Key>, 'value' | 'filter' | 'localeKey' | 'locale'>,
+    ITweakStylesProps<IFilterValueViewStyles> {
+  value: Values[Key];
+}
 
 export function FilterValueView<Values extends Record<string, unknown>, Key extends keyof Values>({
   value,
@@ -19,8 +25,8 @@ export function FilterValueView<Values extends Record<string, unknown>, Key exte
   locale,
   localeKey,
   tweakStyles,
-}: IFilterValueView<Values, Key>): JSX.Element {
-  const classes = useStyles({ theme: tweakStyles });
+}: IFilterValueView<Values, Key>): ReactNode {
+  const classes = useStyles({ tweakStyles });
 
   const translatesLocaleKey = filter.localeKey ?? localeKey;
   const translates = useMemo(
@@ -28,36 +34,26 @@ export function FilterValueView<Values extends Record<string, unknown>, Key exte
     [translatesLocaleKey, locale, filter.locale],
   );
 
-  if (isEmpty(value)) {
-    return <></>;
-  }
-
   if (isNotEmpty(filter.getSelectedValueView)) {
     return <span className={classes.text}>{filter.getSelectedValueView(value)}</span>;
   }
 
-  const isMultiple = filter.type === 'custom' && filter.valueViewType === 'multiple';
-  const isRange = filter.type === 'custom' && filter.valueViewType === 'range';
-  const isDate = filter.type === 'dateRange' || filter.type === 'dateRangeWithoutPeriod';
-
   const displayValue = (v: unknown): string => {
     if (!isNotEmpty(v)) {
       return '';
     }
 
     if (v instanceof Date) {
-      return format(
-        v,
-        (filter as IDateRangeConfigItem<IFilterWithDatesValue>).dateFormat || DEFAULT_DATE_FORMAT,
-      );
+      const { dateFormat = DEFAULT_DATE_FORMAT } = filter as IDateRangeConfigItem<unknown>;
+      return format(v, dateFormat);
     }
 
-    if (typeof v === 'object' && 'value' in v && isNotEmpty(v.value)) {
-      return String(v.value);
+    if (!isObject(v)) {
+      return String(v);
     }
 
-    if (typeof v === 'string' || typeof v === 'number' || typeof v === 'boolean') {
-      return String(v);
+    if ('value' in v && isNotEmpty(v.value)) {
+      return String(v.value);
     }
 
     console.warn(
@@ -69,99 +65,72 @@ export function FilterValueView<Values extends Record<string, unknown>, Key exte
   };
 
   if (filter.type === 'select') {
-    const getView = filter.getValueView ?? defaultConvertFunction;
+    const getView = filter.getValueView ?? displayValue;
     return <span className={classes.text}>{getView(value)}</span>;
   }
 
-  if (filter.type === 'multiSelect') {
-    const multiSelectValue = value as IMultiSelectListValues<any>;
-    const getView = filter.getValueView ?? defaultConvertFunction;
-    const { include } = multiSelectValue;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const getArrayView = (values: unknown, getView: (_: any) => ReactNode = displayValue) => {
+    if (!Array.isArray(values) || !isArrayNotEmpty(values)) {
+      return null;
+    }
 
+    const [first, ...rest] = values;
     return (
       <>
-        {Array.isArray(include) && include.length > 0 && (
-          <>
-            <span className={classes.text}>{getView(include[0])}</span>
-            <span className={classes.count}>
-              {include.length > 1 && ` (+${include.length - 1})`}
-            </span>
-          </>
-        )}
+        <span className={classes.text}>{getView(first)}</span>
+        {isArrayNotEmpty(rest) && <span className={classes.count}> (+{rest.length})</span>}
       </>
     );
-  }
-
-  if (filter.type === 'interval') {
-    const intervalValue = value as unknown as number[];
-    const intervalValueFrom = intervalValue[0];
-    const intervalValueTo = intervalValue[1];
+  };
 
-    const intervals: string[] = [];
-    if (intervalValueFrom !== undefined) {
-      intervals.push(`${translates.from.toLowerCase()} ${String(intervalValueFrom)}`);
-    }
-    if (intervalValueTo !== undefined) {
-      intervals.push(`${translates.to.toLowerCase()} ${String(intervalValueTo)}`);
-    }
+  if (filter.type === 'multiSelect') {
+    const { include } = value as Partial<IMultiSelectListValues<unknown>>;
+    return getArrayView(include, filter.getValueView);
+  }
 
-    return <span className={classes.text}>{intervals.join(' ')}</span>;
+  const isMultiple = filter.type === 'custom' && filter.valueViewType === 'multiple';
+  if (isMultiple) {
+    return getArrayView(value, filter.getSelectedValue);
   }
 
-  if (isDate) {
-    const { from, to, periodType, label } = value as unknown as IPeriod;
-    const hasFrom = from !== undefined && from !== null;
-    const hasTo = to !== undefined && to !== null;
+  const isDateRange = filter.type === 'dateRange' || filter.type === 'dateRangeWithoutPeriod';
+  if (isDateRange) {
+    const { from, to, periodType = 'CUSTOM' } = value as Partial<IPeriod>;
 
     if (periodType !== 'CUSTOM') {
-      return <span className={classes.text}>{displayValue(label)}</span>;
+      return <span className={classes.text}>{translates.periods[periodType] ?? periodType}</span>;
     }
 
+    const hasFrom = isNotEmpty(from);
+    const hasTo = isNotEmpty(to);
     const range: string[] = [];
-    if (hasFrom) {
-      if (!hasTo) {
-        range.push(translates.from.toLowerCase());
-      }
-      range.push(displayValue(from));
-    }
-    if (hasTo) {
-      if (hasFrom) {
-        range.push('—');
-      } else {
-        range.push(translates.to.toLowerCase());
-      }
-      range.push(displayValue(to));
+    if (hasFrom && hasTo) {
+      range.push(displayValue(from), '—', displayValue(to));
+    } else if (hasFrom) {
+      range.push(translates.from.toLowerCase(), displayValue(from));
+    } else if (hasTo) {
+      range.push(translates.to.toLowerCase(), displayValue(to));
+    } else {
+      return null;
     }
 
     return <span className={classes.text}>{range.join(' ')}</span>;
   }
 
-  if (isMultiple) {
-    const convertValue = filter.getSelectedValue ?? displayValue;
-
-    return (
-      <>
-        {Array.isArray(value) && value.length > 0 && (
-          <>
-            <span className={classes.text}>{convertValue(value[0])}</span>
-            <span className={classes.count}>{value.length > 1 && ` (+${value.length - 1})`}</span>
-          </>
-        )}
-      </>
-    );
-  }
-
-  if (isRange && Array.isArray(value)) {
-    const rangeValue = value as unknown as number[];
-    const rangeValueFrom = rangeValue[0];
-    const rangeValueTo = rangeValue[1];
+  const isRange = filter.type === 'custom' && filter.valueViewType === 'range';
+  if (isRange || filter.type === 'interval') {
+    if (!Array.isArray(value)) {
+      return null;
+    }
 
+    const [valueFrom, valueTo] = value;
     const range: string[] = [];
-    if (rangeValueFrom !== undefined) {
-      range.push(`${translates.from.toLowerCase()} ${String(rangeValueFrom)}`);
+    if (isNotEmpty(valueFrom)) {
+      range.push(translates.from.toLowerCase(), displayValue(valueFrom));
     }
-    if (rangeValueTo !== undefined) {
-      range.push(`${translates.to.toLowerCase()} ${String(rangeValueTo)}`);
+    if (isNotEmpty(valueTo)) {
+      range.push(translates.to.toLowerCase(), displayValue(valueTo));
     }
 
     return <span className={classes.text}>{range.join(' ')}</span>;

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

@@ -1,4 +1,3 @@
-import cloneDeep from 'lodash-es/cloneDeep';
 import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
 import { IButtonStyles } from '../../../Button';
 import { IDatePickerStyles } from '../../../DatePicker';
@@ -6,7 +5,7 @@ import { innerTextButtonStyles } from '../../FiltersPane.styles';
 
 export const useStyles = createThemedStyles('FilterWithDates', {
   root: {
-    width: 320,
+    width: 312,
     background: colors.CLASSIC_WHITE,
     position: 'relative',
     zIndex: 20,
@@ -29,35 +28,12 @@ export const useStyles = createThemedStyles('FilterWithDates', {
     justifyContent: 'space-between',
     padding: 8,
   },
-
-  datepicker: {},
 });
 
-export const clearButtonStyles = cloneDeep(innerTextButtonStyles);
+export const clearButtonStyles = structuredClone(innerTextButtonStyles);
 
 export const backButtonStyles = innerTextButtonStyles;
 
-const PICKER_TOP_MARGIN = 28;
-const PICKER_WITH_BUTTONS_TOP_MARGIN = 60;
-const START_PICKER_LEFT_MARGIN = -20;
-const END_PICKER_LEFT_MARGIN = -170;
-
-export const startDatePickerStyles: IDatePickerStyles = {
-  popper: { marginTop: PICKER_TOP_MARGIN, marginLeft: START_PICKER_LEFT_MARGIN },
-};
-
-export const startDatePickerWithButtonStyles: IDatePickerStyles = {
-  popper: { marginTop: PICKER_WITH_BUTTONS_TOP_MARGIN, marginLeft: START_PICKER_LEFT_MARGIN },
-};
-
-export const endDatePickerStyles: IDatePickerStyles = {
-  popper: { marginTop: PICKER_TOP_MARGIN, marginLeft: END_PICKER_LEFT_MARGIN },
-};
-
-export const endDatePickerWithButtonStyles: IDatePickerStyles = {
-  popper: { marginTop: PICKER_WITH_BUTTONS_TOP_MARGIN, marginLeft: END_PICKER_LEFT_MARGIN },
-};
-
 export type IFilterWithDatesStyles = ITweakStyles<
   typeof useStyles,
   {

package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.tsx

@@ -1,9 +1,7 @@
-import { FC, useMemo, useRef, useState } from 'react';
+import { FC, useMemo, useRef } from 'react';
 import { isAfter, isBefore } from 'date-fns';
-import enUS from 'date-fns/locale/en-US';
-import ru from 'date-fns/locale/ru';
-import { getTestId, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
-import { addDataAttributes } from '../../../../helpers';
+import { enUS, ru } from 'date-fns/locale';
+import { getTestId, addDataAttributes } from '@true-engineering/true-react-platform-helpers';
 import { useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Button } from '../../../Button';
@@ -19,11 +17,7 @@ import {
 import {
   backButtonStyles,
   clearButtonStyles,
-  endDatePickerStyles,
-  endDatePickerWithButtonStyles,
   IFilterWithDatesStyles,
-  startDatePickerStyles,
-  startDatePickerWithButtonStyles,
   useStyles,
 } from './FilterWithDates.styles';
 
@@ -53,7 +47,7 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
   endPickerProps = DEFAULT_PICKER_PROPS,
   isClearable = true,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const tweakClearButtonStyles = useTweakStyles({
     innerStyles: clearButtonStyles,
@@ -69,26 +63,19 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
     currentComponentName: 'FilterWithDates',
   });
 
-  const hasButtonsRow = isClearable || isNotEmpty(onStartBtnSubmit);
-
   const tweakStartDatePickerStyles = useTweakStyles({
-    innerStyles: hasButtonsRow ? startDatePickerWithButtonStyles : startDatePickerStyles,
     tweakStyles,
     className: 'tweakStartDatePicker',
     currentComponentName: 'FilterWithDates',
   });
 
   const tweakEndDatePickerStyles = useTweakStyles({
-    innerStyles: hasButtonsRow ? endDatePickerWithButtonStyles : endDatePickerStyles,
     tweakStyles,
     className: 'tweakEndDatePicker',
     currentComponentName: 'FilterWithDates',
   });
 
-  const [isOpenFrom, setOpenFrom] = useState(false);
-  const [isOpenTo, setOpenTo] = useState(false);
-
-  const ref = useRef<HTMLDivElement>(null);
+  const popperTargetRef = useRef<HTMLDivElement>(null);
 
   const dateLocale = localeKey === 'ru' ? ru : enUS;
 
@@ -97,17 +84,6 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
   const handleClear = () => {
     onEndBtnSubmit();
   };
-  const isOpenCalendar = isOpenFrom || isOpenTo;
-
-  const handleFromSelected = (val: Date | null) => {
-    onChange({ from: val, to: value?.to ?? null });
-    setOpenFrom(false);
-  };
-
-  const handleToSelected = (val: Date | null) => {
-    onChange({ from: value?.from ?? null, to: val });
-    setOpenTo(false);
-  };
 
   const handleChangeFrom = (val: Date | null) => {
     // на самом деле ситуации когда надо переворачивать даты, произойти не может
@@ -128,12 +104,12 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
   };
 
   return (
-    <div className={classes.root} {...addDataAttributes(data)}>
+    <div className={classes.root} ref={popperTargetRef} {...addDataAttributes(data, testId)}>
       <div className={classes.container}>
         <div className={classes.containerItem}>
           <DatePicker
             selectedDate={value?.from}
-            maxDate={value?.to}
+            maxDate={value?.to ?? undefined}
             label={translates.from}
             months={translates.months}
             locale={dateLocale}
@@ -141,6 +117,7 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
             tweakStyles={tweakStartDatePickerStyles}
             testId={getTestId(testId, 'from')}
             isClearable={isClearable}
+            popperProps={{ elements: { reference: popperTargetRef?.current } }}
             {...startPickerProps}
           />
         </div>
@@ -149,12 +126,13 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
             selectedDate={value?.to}
             label={translates.to}
             months={translates.months}
-            minDate={value?.from}
+            minDate={value?.from ?? undefined}
             locale={dateLocale}
             onChangeDate={handleChangeTo}
             tweakStyles={tweakEndDatePickerStyles}
             testId={getTestId(testId, 'to')}
             isClearable={isClearable}
+            popperProps={{ elements: { reference: popperTargetRef?.current } }}
             {...endPickerProps}
           />
         </div>
@@ -190,19 +168,6 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
           </div>
         )}
       </div>
-
-      {isOpenCalendar && (
-        <div ref={ref} className={classes.datepicker}>
-          <DatePicker
-            selectedDate={(isOpenFrom ? value?.from : value?.to) ?? null}
-            label=""
-            locale={dateLocale}
-            months={translates.months}
-            isInline
-            onChangeDate={isOpenFrom ? handleFromSelected : handleToSelected}
-          />
-        </div>
-      )}
     </div>
   );
 };

package/src/components/FiltersPane/components/FilterWithPeriod/FilterWithPeriod.tsx

@@ -1,4 +1,5 @@
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { getTestId } from '@true-engineering/true-react-platform-helpers';
 import { useOnClickOutside, useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { PERIODS, PERIODS_GETTERS } from '../../constants';
@@ -34,7 +35,7 @@ export const FilterWithPeriod: FC<IFilterWithPeriodProps> = ({
   tweakStyles,
   testId,
 }) => {
-  const classes = useStyles({ theme: tweakStyles });
+  const classes = useStyles({ tweakStyles });
 
   const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
 
@@ -85,7 +86,7 @@ export const FilterWithPeriod: FC<IFilterWithPeriodProps> = ({
       if (onClose !== undefined) {
         onClose();
       }
-      onChange({ ...p, label: getPeriodTranslate(periodType) });
+      onChange(p);
     }
 
     setIsPeriodPickerShown(false);
@@ -146,7 +147,7 @@ export const FilterWithPeriod: FC<IFilterWithPeriodProps> = ({
             locale={translates}
             tweakStyles={tweakSelectStyles}
             getValueView={getPeriodTranslate}
-            testId={testId !== undefined ? `${testId}-select` : undefined}
+            testId={getTestId(testId, 'select')}
           />
         </div>
       )}
@@ -168,7 +169,7 @@ export const FilterWithPeriod: FC<IFilterWithPeriodProps> = ({
             onChange={handleCustomDateChange}
             localeKey={localeKey}
             locale={translates}
-            testId={testId !== undefined ? `${testId}-dates` : undefined}
+            testId={getTestId(testId, 'dates')}
           />
         </div>
       )}