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

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}>

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

@@ -1,2 +1,2 @@
 export * from './FilterWithPeriod';
-export type { FilterWithPeriodStyles } from './FilterWithPeriod.styles';
+export type { IFilterWithPeriodStyles } from './FilterWithPeriod.styles';

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

@@ -1,8 +1,8 @@
-import { colors } from '../../../../theme';
-import { ComponentStyles } from '../../../../types';
+import { colors, createThemedStyles, ITweakStyles } from '../../../../theme';
+import { IFilterValueViewStyles } from '../FilterValueView';
 import { FILTER_HEIGHT } from '../../FiltersPane.styles';
 
-export const styles = {
+export const useStyles = createThemedStyles('FilterWrapper', {
   root: {
     position: 'relative',
     transition: '0.25s ease-in-out',
@@ -105,6 +105,11 @@ export const styles = {
   'dropdown-enter-active': { extend: 'animationStart' },
   'dropdown-exit-active': { extend: 'animationStart' },
   'dropdown-exit': { extend: 'animationEnd' },
-};
-
-export type FilterWrapperStyles = ComponentStyles<typeof styles>;
+});
+
+export type IFilterWrapperStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakValueView: IFilterValueViewStyles;
+  }
+>;

package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.tsx

@@ -1,37 +1,47 @@
 import { useState, useRef, RefObject } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import clsx from 'clsx';
-import { useTheme } from '../../../../hooks';
+import { addDataTestId, getTestId } from '@true-engineering/true-react-platform-helpers';
+import { addDataAttributes } from '../../../../helpers';
+import { useTweakStyles } from '../../../../hooks';
+import { ICommonProps } from '../../../../types';
 import { Icon } from '../../../Icon';
 import { ConfigItem, IFilterLocaleKey, IPartialFilterLocale } from '../../types';
 import { Filter } from '../Filter';
 import { FilterValueView } from '../FilterValueView';
-import { FilterWrapperStyles, styles } from './FilterWrapper.styles';
+import { useStyles, IFilterWrapperStyles } from './FilterWrapper.styles';
 
-export interface IFilterWrapperProps<Values, Key extends keyof Values> {
-  tweakStyles?: FilterWrapperStyles;
+export interface IFilterWrapperProps<Values, Key extends keyof Values>
+  extends ICommonProps<IFilterWrapperStyles> {
   filter: ConfigItem<Values[Key]>;
   value?: Values[Key];
-  onChange: <V>(value: V) => void;
   isDisabled?: boolean;
   localeKey?: IFilterLocaleKey;
   locale?: IPartialFilterLocale;
-  testId?: string;
   filtersPaneRef: RefObject<HTMLDivElement> | null;
+  onChange<V>(value: V): void;
 }
 
 export function FilterWrapper<Values, Key extends keyof Values>({
   filter,
   value,
   isDisabled,
-  onChange,
   locale,
   localeKey,
+  data,
   testId,
   filtersPaneRef,
   tweakStyles,
+  onChange,
 }: IFilterWrapperProps<Values, Key>): JSX.Element {
-  const { classes } = useTheme('FilterWrapper', styles, tweakStyles);
+  const classes = useStyles({ theme: tweakStyles });
+
+  const tweakFilterValueViewStyles = useTweakStyles({
+    tweakStyles,
+    className: 'tweakValueView',
+    currentComponentName: 'FilterWrapper',
+  });
+
   const [isOpen, setIsOpen] = useState(false);
   const refItem = useRef<HTMLDivElement>(null);
 
@@ -86,7 +96,8 @@ export function FilterWrapper<Values, Key extends keyof Values>({
         [classes.boolean]: isBoolean,
         [classes.disabled]: isDisabled,
       })}
-      data-testid={testId}
+      {...addDataTestId(testId)}
+      {...addDataAttributes(data)}
     >
       <div
         ref={refItem}
@@ -98,7 +109,14 @@ export function FilterWrapper<Values, Key extends keyof Values>({
         <div className={classes.name}>{filter.name}</div>
         {!isBoolean && value !== undefined && value !== null && (
           <div className={classes.value}>
-            <FilterValueView value={value} filter={filter} localeKey={localeKey} locale={locale} />
+            <FilterValueView
+              value={value}
+              filter={filter}
+              localeKey={localeKey}
+              locale={locale}
+              testId={getTestId(testId, 'value')}
+              tweakStyles={tweakFilterValueViewStyles}
+            />
           </div>
         )}
         {!isBoolean && (

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

@@ -1,2 +1,2 @@
 export * from './FilterWrapper';
-export type { FilterWrapperStyles } from './FilterWrapper.styles';
+export type { IFilterWrapperStyles } from './FilterWrapper.styles';

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

@@ -1,9 +1,10 @@
 import { rgba } from '../../../../helpers';
-import { colors, dimensions } from '../../../../theme';
-import { ComponentStyles } from '../../../../types';
+import { colors, createThemedStyles, dimensions, ITweakStyles } from '../../../../theme';
+import { ISearchInputStyles } from '../../../SearchInput';
+import { ISelectStyles } from '../../../Select';
 import { FILTER_HEIGHT } from '../../FiltersPane.styles';
 
-export const styles = {
+export const useStyles = createThemedStyles('FiltersPaneSearch', {
   root: {
     display: 'flex',
     position: 'relative',
@@ -78,32 +79,38 @@ export const styles = {
   active: {
     fontWeight: 'bold',
   },
+});
 
-  tweakSearchInput: {
-    tweakInput: {
-      inputWrapper: {
-        backgroundColor: 'transparent',
-        border: 'none',
-        height: FILTER_HEIGHT - 2,
-        fontSize: 14,
-        minWidth: 140,
-      },
+export const searchInputStyles: ISearchInputStyles = {
+  tweakInput: {
+    inputWrapper: {
+      backgroundColor: 'transparent',
+      border: 'none',
+      height: FILTER_HEIGHT - 2,
+      fontSize: 14,
+      minWidth: 140,
+    },
 
-      focused: {
-        backgroundColor: 'transparent',
-        border: 'none',
-      },
+    focused: {
+      backgroundColor: 'transparent',
+      border: 'none',
     },
   },
+};
 
-  tweakSelect: {
-    root: {
-      borderRadius: 0,
-      borderBottomLeftRadius: 6,
-      borderBottomRightRadius: 6,
-      boxShadow: 'none',
-    },
+export const selectStyles: ISelectStyles = {
+  root: {
+    borderRadius: 0,
+    borderBottomLeftRadius: 6,
+    borderBottomRightRadius: 6,
+    boxShadow: 'none',
   },
 };
 
-export type FiltersPaneSearchStyles = ComponentStyles<typeof styles>;
+export type IFiltersPaneSearchStyles = ITweakStyles<
+  typeof useStyles,
+  {
+    tweakSearchInput: ISearchInputStyles;
+    tweakSelect: ISelectStyles;
+  }
+>;