@true-engineering/true-react-common-ui-kit 2.6.0 → 3.0.0-alpha.0

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

@@ -1,7 +1,9 @@
-import { colors } from '../../../../theme';
-import { ComponentStyles } from '../../../../types';
+import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
+import { IButtonStyles } from '../../../Button';
+import { IInputStyles } from '../../../Input';
+import { innerTextButtonStyles } from '../../FiltersPane.styles';
 
-export const styles = {
+export const useStyles = createThemedStyles('FilterInterval', {
   root: {
     padding: 8,
     background: colors.CLASSIC_WHITE,
@@ -30,35 +32,29 @@ export const styles = {
     display: 'flex',
     justifyContent: 'flex-end',
   },
+});
 
-  tweakInput: {
-    input: {
-      minWidth: 120,
-    },
-
-    icon: {
-      padding: 0,
-      width: 24,
-
-      '&:last-child': {
-        paddingRight: 0,
-      },
-    },
+export const inputStyles: IInputStyles = {
+  input: {
+    minWidth: 120,
   },
 
-  tweakClearButton: {
-    text: {
-      color: colors.GREY_ACTIVE,
-
-      '&:hover, &:focus': {
-        color: colors.FONT_MEDIUM,
-      },
+  icon: {
+    padding: 0,
+    width: 24,
 
-      '&:active': {
-        color: colors.FONT_MEDIUM,
-      },
+    '&:last-child': {
+      paddingRight: 0,
     },
   },
 };
 
-export type FilterIntervalStyles = ComponentStyles<typeof styles>;
+export const clearButtonStyles = innerTextButtonStyles;
+
+export type IFilterIntervalStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakInput: IInputStyles;
+    tweakClearButton: IButtonStyles;
+  }
+>;

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

@@ -1,19 +1,23 @@
 import { FC, useMemo } from 'react';
+import { getTestId } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
-import { useTheme, useTweakStyles } from '../../../../hooks';
+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 { FilterIntervalStyles, styles } from './FilterInterval.styles';
+import {
+  useStyles,
+  IFilterIntervalStyles,
+  inputStyles,
+  clearButtonStyles,
+} from './FilterInterval.styles';
 
-export interface IFilterIntervalProps extends ICommonProps {
-  tweakStyles?: FilterIntervalStyles;
+export interface IFilterIntervalProps extends ICommonProps<IFilterIntervalStyles> {
   value?: Array<number | undefined>;
   onChange: (value?: Array<number | undefined>) => void;
   labelName: string;
-
   localeKey?: IFilterLocaleKey;
   locale?: IPartialFilterLocale;
   withFieldNameInLabel?: boolean;
@@ -28,7 +32,6 @@ export interface IFilterIntervalProps extends ICommonProps {
     max?: number;
     maxLength?: number;
   };
-  testId?: string;
 }
 
 export const FilterInterval: FC<IFilterIntervalProps> = ({
@@ -45,7 +48,7 @@ export const FilterInterval: FC<IFilterIntervalProps> = ({
   toInput,
   testId,
 }) => {
-  const { classes, componentStyles } = useTheme('FilterInterval', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
   const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
 
@@ -69,9 +72,19 @@ export const FilterInterval: FC<IFilterIntervalProps> = ({
     onChange(sortValues([value?.[0], v]));
   };
 
-  const tweakInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakInput');
+  const tweakInputStyles = useTweakStyles({
+    innerStyles: inputStyles,
+    tweakStyles,
+    className: 'tweakInput',
+    currentComponentName: 'FilterInterval',
+  });
 
-  const tweakClearButtonStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakClearButton');
+  const tweakClearButtonStyles = useTweakStyles({
+    innerStyles: clearButtonStyles,
+    tweakStyles,
+    className: 'tweakClearButton',
+    currentComponentName: 'FilterInterval',
+  });
 
   return (
     <div className={classes.root} {...addDataAttributes(data)}>
@@ -92,7 +105,7 @@ export const FilterInterval: FC<IFilterIntervalProps> = ({
             max={fromInput?.max}
             maxLength={fromInput?.maxLength}
             tweakStyles={tweakInputStyles}
-            testId={testId !== undefined ? `${testId}-start` : undefined}
+            testId={getTestId(testId, 'start')}
           />
           {withFieldNameInLabel && (
             <div className={classes.autosize}>
@@ -116,7 +129,7 @@ export const FilterInterval: FC<IFilterIntervalProps> = ({
             max={toInput?.max}
             maxLength={toInput?.maxLength}
             tweakStyles={tweakInputStyles}
-            testId={testId !== undefined ? `${testId}-end` : undefined}
+            testId={getTestId(testId, 'end')}
           />
           {withFieldNameInLabel && (
             <div className={classes.autosize}>
@@ -130,7 +143,7 @@ export const FilterInterval: FC<IFilterIntervalProps> = ({
           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/FilterInterval/index.ts

@@ -1,2 +1,2 @@
 export * from './FilterInterval';
-export type { FilterIntervalStyles } from './FilterInterval.styles';
+export type { IFilterIntervalStyles } from './FilterInterval.styles';

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

@@ -1,12 +1,13 @@
-import { colors, helpers } from '../../../../theme';
-import { ComponentStyles } from '../../../../types';
+import { colors, createThemedStyles, helpers, ITweakStyles } from '../../../../theme';
+import { IButtonStyles } from '../../../Button';
+import { ISearchInputStyles } from '../../../SearchInput';
+import { innerTextButtonStyles } from '../../FiltersPane.styles';
 
 const ITEM_HEIGHT = 40;
 const LIST_GAP = 12;
 
-export const styles = {
+export const useStyles = createThemedStyles('FilterSelect', {
   root: {
-    width: ({ width }: { width: string | number }): string | number => width ?? 220,
     background: colors.CLASSIC_WHITE,
   },
 
@@ -114,30 +115,24 @@ export const styles = {
     padding: 16,
     fontSize: 14,
   },
+});
 
-  tweakSearchInput: {
-    tweakInput: {
-      inputWrapper: {
-        backgroundColor: 'transparent',
-        border: 'none',
-        height: 40,
-      },
-    },
-  },
-
-  tweakClearButton: {
-    text: {
-      color: colors.GREY_ACTIVE,
-
-      '&:hover, &:focus': {
-        color: colors.FONT_MEDIUM,
-      },
-
-      '&:active': {
-        color: colors.FONT_MEDIUM,
-      },
+export const searchInputStyles: ISearchInputStyles = {
+  tweakInput: {
+    inputWrapper: {
+      backgroundColor: 'transparent',
+      border: 'none',
+      height: 40,
     },
   },
 };
 
-export type FilterSelectStyles = ComponentStyles<typeof styles>;
+export const clearButtonStyles = innerTextButtonStyles;
+
+export type IFilterSelectStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakSearchInput: ISearchInputStyles;
+    tweakClearButton: IButtonStyles;
+  }
+>;

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

@@ -3,7 +3,7 @@ import clsx from 'clsx';
 import { debounce } from 'ts-debounce';
 import { isReactNodeNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
-import { useIsMounted, useTheme, useTweakStyles } from '../../../../hooks';
+import { useIsMounted, useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Button } from '../../../Button';
 import { Icon } from '../../../Icon';
@@ -12,10 +12,14 @@ import { SearchInput } from '../../../SearchInput';
 import { ThemedPreloader } from '../../../ThemedPreloader';
 import { defaultConvertFunction, getSelectLocale } from '../../helpers';
 import { IFilterLocaleKey, ISelectLocale } from '../../types';
-import { FilterSelectStyles, styles } from './FilterSelect.styles';
-
-export interface IFilterSelectProps<Value> extends ICommonProps {
-  tweakStyles?: FilterSelectStyles;
+import {
+  useStyles,
+  IFilterSelectStyles,
+  searchInputStyles,
+  clearButtonStyles,
+} from './FilterSelect.styles';
+
+export interface IFilterSelectProps<Value> extends ICommonProps<IFilterSelectStyles> {
   value?: Value;
   onChange: (value?: Value) => void;
   /**
@@ -42,7 +46,6 @@ export interface IFilterSelectProps<Value> extends ICommonProps {
    * @default true
    */
   hasClearButton?: boolean;
-  testId?: string;
 }
 
 export function FilterSelect<Value>({
@@ -51,7 +54,7 @@ export function FilterSelect<Value>({
   value,
   isSearchEnabled = false,
   isGroupingEnabled = false,
-  width,
+  width = 220,
   localeKey,
   locale,
   onChange,
@@ -64,9 +67,23 @@ export function FilterSelect<Value>({
   hasClearButton = true,
   testId,
 }: IFilterSelectProps<Value>): JSX.Element {
-  const isMounted = useIsMounted();
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakSearchInputStyles = useTweakStyles({
+    innerStyles: searchInputStyles,
+    tweakStyles,
+    className: 'tweakSearchInput',
+    currentComponentName: 'FilterSelect',
+  });
+
+  const tweakClearButtonStyles = useTweakStyles({
+    innerStyles: clearButtonStyles,
+    tweakStyles,
+    className: 'tweakClearButton',
+    currentComponentName: 'FilterSelect',
+  });
 
-  const { classes, componentStyles } = useTheme('FilterSelect', styles, tweakStyles, { width });
+  const isMounted = useIsMounted();
 
   const translates = useMemo(() => getSelectLocale(localeKey, locale), [localeKey, locale]);
 
@@ -207,12 +224,8 @@ export function FilterSelect<Value>({
     doFetchOptions();
   }, []);
 
-  const tweakSearchInputStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakSearchInput');
-
-  const tweakClearButtonStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakClearButton');
-
   return (
-    <div className={classes.root} {...addDataAttributes(data)}>
+    <div className={classes.root} style={{ width }} {...addDataAttributes(data)}>
       {isSearchEnabled && (
         <div className={classes.dropdownInput}>
           <SearchInput

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

@@ -1,2 +1,2 @@
 export * from './FilterSelect';
-export type { FilterSelectStyles } from './FilterSelect.styles';
+export type { IFilterSelectStyles } from './FilterSelect.styles';

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

@@ -1,6 +1,6 @@
-import { ComponentStyles } from '../../../../types';
+import { createThemedStyles, ITweakStyles } from '../../../../theme';
 
-export const styles = {
+export const useStyles = createThemedStyles('FilterValueView', {
   text: {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
@@ -10,6 +10,6 @@ export const styles = {
   count: {
     whiteSpace: 'pre',
   },
-};
+});
 
-export type FilterValueViewStyles = ComponentStyles<typeof styles>;
+export type IFilterValueViewStyles = ITweakStyles<typeof useStyles>;

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

@@ -1,20 +1,22 @@
 import { useMemo } from 'react';
 import { format } from 'date-fns';
-import { useTheme } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
 import { IMultiSelectListValues } from '../../../MultiSelectList';
 import { DEFAULT_DATE_FORMAT } from '../../constants';
 import { defaultConvertFunction, getLocale } from '../../helpers';
 import { IDateRangeConfigItem, IFilterWithDatesValue, IPeriod } from '../../types';
 import { IFilterWrapperProps } from '../FilterWrapper';
-import { styles } from './FilterValueView.styles';
+import { IFilterValueViewStyles, useStyles } from './FilterValueView.styles';
 
 export function FilterValueView<Values, Key extends keyof Values>({
   locale,
   localeKey,
   filter,
   value,
-}: Omit<IFilterWrapperProps<Values, Key>, 'onChange' | 'filtersPaneRef'>): JSX.Element {
-  const { classes } = useTheme('FilterValueView', styles);
+  tweakStyles,
+}: Omit<IFilterWrapperProps<Values, Key>, 'onChange' | 'filtersPaneRef' | 'tweakStyles'> &
+  ICommonProps<IFilterValueViewStyles>): JSX.Element {
+  const classes = useStyles({ theme: tweakStyles });
 
   if (value === undefined || value === null) {
     return <></>;

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

@@ -1,2 +1,2 @@
 export * from './FilterValueView';
-export type { FilterValueViewStyles } from './FilterValueView.styles';
+export type { IFilterValueViewStyles } from './FilterValueView.styles';

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

@@ -1,7 +1,9 @@
-import { colors } from '../../../../theme';
-import { ComponentStyles } from '../../../../types';
+import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
+import { IButtonStyles } from '../../../Button';
+import { IDatePickerStyles } from '../../../DatePicker';
+import { innerTextButtonStyles } from '../../FiltersPane.styles';
 
-export const styles = {
+export const useStyles = createThemedStyles('FilterWithDates', {
   root: {
     background: colors.CLASSIC_WHITE,
     position: 'relative',
@@ -27,34 +29,39 @@ export const styles = {
   },
 
   datepicker: {},
+});
 
-  tweakClearButton: {
-    text: {
-      color: colors.GREY_ACTIVE,
+export const clearButtonStyles = innerTextButtonStyles;
 
-      '&:hover, &:focus': {
-        color: colors.FONT_MEDIUM,
-      },
+export const backButtonStyles = innerTextButtonStyles;
 
-      '&:active': {
-        color: colors.FONT_MEDIUM,
-      },
-    },
-  },
+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 },
+};
 
-  tweakBackButton: {
-    text: {
-      color: colors.GREY_ACTIVE,
+export const startDatePickerWithButtonStyles: IDatePickerStyles = {
+  popper: { marginTop: PICKER_WITH_BUTTONS_TOP_MARGIN, marginLeft: START_PICKER_LEFT_MARGIN },
+};
 
-      '&:hover, &:focus': {
-        color: colors.FONT_MEDIUM,
-      },
+export const endDatePickerStyles: IDatePickerStyles = {
+  popper: { marginTop: PICKER_TOP_MARGIN, marginLeft: END_PICKER_LEFT_MARGIN },
+};
 
-      '&:active': {
-        color: colors.FONT_MEDIUM,
-      },
-    },
-  },
+export const endDatePickerWithButtonStyles: IDatePickerStyles = {
+  popper: { marginTop: PICKER_WITH_BUTTONS_TOP_MARGIN, marginLeft: END_PICKER_LEFT_MARGIN },
 };
 
-export type FilterWithDatesStyles = ComponentStyles<typeof styles>;
+export type IFilterWithDatesStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakClearButton: IButtonStyles;
+    tweakBackButton: IButtonStyles;
+    tweakStartDatePicker: IDatePickerStyles;
+    tweakEndDatePicker: IDatePickerStyles;
+  }
+>;

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

@@ -2,9 +2,9 @@ import { useState, useMemo, useRef, FC } 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 } from '@true-engineering/true-react-platform-helpers';
+import { getTestId, isNotEmpty } from '@true-engineering/true-react-platform-helpers';
 import { addDataAttributes } from '../../../../helpers';
-import { useTheme, useTweakStyles } from '../../../../hooks';
+import { useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { Button } from '../../../Button';
 import { DatePicker } from '../../../DatePicker';
@@ -16,20 +16,27 @@ import {
   IFilterWithDatesValue,
   IPartialFilterLocale,
 } from '../../types';
-import { FilterWithDatesStyles, styles } from './FilterWithDates.styles';
-
-export interface IFilterWithDatesProps extends ICommonProps {
-  tweakStyles?: FilterWithDatesStyles;
+import {
+  useStyles,
+  IFilterWithDatesStyles,
+  clearButtonStyles,
+  backButtonStyles,
+  startDatePickerWithButtonStyles,
+  startDatePickerStyles,
+  endDatePickerStyles,
+  endDatePickerWithButtonStyles,
+} from './FilterWithDates.styles';
+
+export interface IFilterWithDatesProps extends ICommonProps<IFilterWithDatesStyles> {
   value?: IFilterWithDatesValue;
-  onChange: (val: IFilterWithDatesValue) => void;
   localeKey?: IFilterLocaleKey;
   locale?: IPartialFilterLocale;
-  onStartBtnSubmit?: () => void;
-  onEndBtnSubmit: () => void;
-  testId?: string;
   isClearable?: boolean;
   startPickerProps?: IFilterWithDateDatePickerProps;
   endPickerProps?: IFilterWithDateDatePickerProps;
+  onChange(val: IFilterWithDatesValue): void;
+  onStartBtnSubmit?(): void;
+  onEndBtnSubmit(): void;
 }
 
 export const FilterWithDates: FC<IFilterWithDatesProps> = ({
@@ -46,22 +53,50 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
   endPickerProps = DEFAULT_PICKER_PROPS,
   isClearable = true,
 }) => {
-  const { classes, componentStyles } = useTheme('FilterWithDates', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakClearButtonStyles = useTweakStyles({
+    innerStyles: clearButtonStyles,
+    tweakStyles,
+    className: 'tweakClearButton',
+    currentComponentName: 'FilterWithDates',
+  });
+
+  const tweakBackButtonStyles = useTweakStyles({
+    innerStyles: backButtonStyles,
+    tweakStyles,
+    className: 'tweakBackButton',
+    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 dateLocale = localeKey === 'ru' ? ru : enUS;
-  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
 
-  // When we don't have a buttons row, we need to decrease margin-top.
-  // 60(old margin) - 32(buttons row) = 28;
-  const topPosition = !isClearable && onStartBtnSubmit === undefined ? 28 : 60;
+  const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
 
   const handleClear = () => {
     onEndBtnSubmit();
   };
-
-  const ref = useRef<HTMLDivElement>(null);
   const isOpenCalendar = isOpenFrom || isOpenTo;
 
   const handleFromSelected = (val: Date | null) => {
@@ -92,10 +127,6 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
     }
   };
 
-  const tweakClearButtonStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakClearButton');
-
-  const tweakBackButtonStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakBackButton');
-
   return (
     <div className={classes.root} {...addDataAttributes(data)}>
       <div className={classes.container}>
@@ -107,8 +138,7 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
             months={translates.months}
             locale={dateLocale}
             onChangeDate={handleChangeFrom}
-            leftPosition={-20}
-            topPosition={topPosition}
+            tweakStyles={tweakStartDatePickerStyles}
             border="bottom"
             testId={getTestId(testId, 'from')}
             isClearable={isClearable}
@@ -123,8 +153,7 @@ export const FilterWithDates: FC<IFilterWithDatesProps> = ({
             minDate={value?.from}
             locale={dateLocale}
             onChangeDate={handleChangeTo}
-            topPosition={topPosition}
-            leftPosition={-170}
+            tweakStyles={tweakEndDatePickerStyles}
             border="bottom"
             testId={getTestId(testId, 'to')}
             isClearable={isClearable}

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

@@ -1,2 +1,2 @@
 export * from './FilterWithDates';
-export type { FilterWithDatesStyles } from './FilterWithDates.styles';
+export type { IFilterWithDatesStyles } from './FilterWithDates.styles';

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

@@ -1,17 +1,21 @@
-import { ComponentStyles } from '../../../../types';
+import { createThemedStyles, ITweakStyles } from '../../../../theme';
+import { IFilterSelectStyles } from '../FilterSelect';
 
-export const styles = {
+export const useStyles = createThemedStyles('FilterWithPeriod', {
   root: {},
 
   main: {},
 
   picker: {},
+});
 
-  tweakSelect: {
-    options: {
-      maxHeight: 'auto',
-    },
+export const filterSelectStyles: IFilterSelectStyles = {
+  list: {
+    maxHeight: 'auto',
   },
 };
 
-export type FilterWithPeriodStyles = ComponentStyles<typeof styles>;
+export type IFilterWithPeriodStyles = ITweakStyles<
+  typeof useStyles,
+  { tweakFilterSelect: IFilterSelectStyles }
+>;

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

@@ -1,5 +1,5 @@
 import { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useTheme, useOnClickOutside, useTweakStyles } from '../../../../hooks';
+import { useOnClickOutside, useTweakStyles } from '../../../../hooks';
 import { ICommonProps } from '../../../../types';
 import { PERIODS, PERIODS_GETTERS } from '../../constants';
 import { getLocale } from '../../helpers';
@@ -13,17 +13,15 @@ import {
 } from '../../types';
 import { FilterSelect } from '../FilterSelect';
 import { FilterWithDates } from '../FilterWithDates';
-import { FilterWithPeriodStyles, styles } from './FilterWithPeriod.styles';
+import { useStyles, IFilterWithPeriodStyles, filterSelectStyles } from './FilterWithPeriod.styles';
 
-export interface IFilterWithPeriodProps extends ICommonProps {
-  tweakStyles?: FilterWithPeriodStyles;
+export interface IFilterWithPeriodProps extends ICommonProps<IFilterWithPeriodStyles> {
   value?: IPeriod;
-  onChange: (period?: IPeriod) => void;
-  onClose?: () => void;
   localeKey?: IFilterLocaleKey;
   locale?: IPartialFilterLocale;
   periods?: IPeriodsList;
-  testId?: string;
+  onChange(period?: IPeriod): void;
+  onClose?(): void;
 }
 
 export const FilterWithPeriod: FC<IFilterWithPeriodProps> = ({
@@ -36,7 +34,7 @@ export const FilterWithPeriod: FC<IFilterWithPeriodProps> = ({
   tweakStyles,
   testId,
 }) => {
-  const { classes, componentStyles } = useTheme('FilterWithPeriod', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
 
   const translates = useMemo(() => getLocale(localeKey, locale), [localeKey, locale]);
 
@@ -129,7 +127,12 @@ export const FilterWithPeriod: FC<IFilterWithPeriodProps> = ({
     setPeriod(value);
   }, [value, value?.from, value?.to, value?.periodType]);
 
-  const tweakSelectStyles = useTweakStyles(componentStyles, tweakStyles, 'tweakSelect');
+  const tweakSelectStyles = useTweakStyles({
+    innerStyles: filterSelectStyles,
+    tweakStyles,
+    className: 'tweakFilterSelect',
+    currentComponentName: 'FilterWithPeriod',
+  });
 
   return (
     <div className={classes.root}>