@true-engineering/true-react-common-ui-kit 2.7.0 → 3.0.0-alpha.1

package/dist/components/FiltersPane/FiltersPane.d.ts

@@ -2,9 +2,8 @@
 import { ICommonProps } from '../../types';
 import { IFiltersPaneSearchProps } from './components';
 import { ConfigType, IFilterLocaleKey, IPartialFilterLocale } from './types';
-import { FiltersPaneStyles } from './FiltersPane.styles';
-export interface IFiltersPaneProps<Values, Content = Values> extends ICommonProps {
-    tweakStyles?: FiltersPaneStyles;
+import { IFiltersPaneStyles } from './FiltersPane.styles';
+export interface IFiltersPaneProps<Values, Content = Values> extends ICommonProps<IFiltersPaneStyles> {
     filtersConfig: ConfigType<Values>;
     enabledFilters?: Array<keyof ConfigType<Values>>;
     values?: Partial<Values>;
@@ -13,9 +12,8 @@ export interface IFiltersPaneProps<Values, Content = Values> extends ICommonProp
     locale?: IPartialFilterLocale;
     isDisabled?: boolean;
     hasClearButton?: boolean;
-    onClear?: () => void;
-    onChangeFilters: (values: Partial<Values>) => void;
-    onSettingsButtonClick?: () => void;
-    testId?: string;
+    onChangeFilters(values: Partial<Values>): void;
+    onSettingsButtonClick?(): void;
+    onClear?(): void;
 }
-export declare function FiltersPane<Values extends Record<string, unknown>, Content = Values>({ data, tweakStyles, filtersConfig, enabledFilters, values, localeKey, locale, search, isDisabled, hasClearButton, onChangeFilters, onSettingsButtonClick, onClear, testId, }: IFiltersPaneProps<Values, Content>): JSX.Element;
+export declare function FiltersPane<Values extends Record<string, unknown>, Content = Values>({ data, tweakStyles, filtersConfig, enabledFilters, values, localeKey, locale, search, isDisabled, hasClearButton, testId, onChangeFilters, onSettingsButtonClick, onClear, }: IFiltersPaneProps<Values, Content>): JSX.Element;

package/dist/components/FiltersPane/FiltersPane.styles.d.ts

@@ -1,57 +1,9 @@
-import { ComponentStyles } from '../../types';
+import { ITweakStyles } from '../../theme';
+import { IButtonStyles } from '../Button';
 export declare const FILTER_HEIGHT = 36;
-export declare const styles: {
-    root: {
-        display: string;
-        flexWrap: string;
-        gap: number;
-        width: string;
-    };
-    settings: {
-        display: string;
-        alignItems: string;
-        justifyContent: string;
-        borderRadius: number;
-        boxSizing: string;
-        width: number;
-        height: number;
-        cursor: string;
-        transition: string;
-    };
-    settingsIcon: {
-        width: number;
-        height: number;
-    };
-    clear: {
-        display: string;
-        alignItems: string;
-        height: number;
-    };
-    filterWithClearButton: {
-        display: string;
-        gap: number;
-        minWidth: number;
-    };
-    tweakClearButton: {
-        s: {
-            paddingLeft: number;
-            paddingRight: number;
-            minWidth: string;
-        };
-        text: {
-            background: string;
-            color: "#95a0b3";
-            '&:hover, &:focus': {
-                color: "#505f79";
-            };
-            '&:active': {
-                color: "#222a37";
-            };
-            '&:hover, &:focus, &:active': {
-                background: string;
-                borderColor: string;
-            };
-        };
-    };
-};
-export declare type FiltersPaneStyles = ComponentStyles<typeof styles>;
+export declare const useStyles: import("../../theme").IUseStyles<"settings" | "clear" | "root" | "settingsIcon" | "filterWithClearButton", unknown>;
+export declare const clearButtonStyles: IButtonStyles;
+export declare const innerTextButtonStyles: IButtonStyles;
+export declare type IFiltersPaneStyles = ITweakStyles<typeof useStyles, {
+    tweakClearButton: IButtonStyles;
+}>;

package/dist/components/FiltersPane/components/FilterInterval/FilterInterval.d.ts

@@ -1,9 +1,8 @@
 import { FC } from 'react';
 import { ICommonProps } from '../../../../types';
 import { IFilterLocaleKey, IPartialFilterLocale } from '../../types';
-import { FilterIntervalStyles } from './FilterInterval.styles';
-export interface IFilterIntervalProps extends ICommonProps {
-    tweakStyles?: FilterIntervalStyles;
+import { IFilterIntervalStyles } from './FilterInterval.styles';
+export interface IFilterIntervalProps extends ICommonProps<IFilterIntervalStyles> {
     value?: Array<number | undefined>;
     onChange: (value?: Array<number | undefined>) => void;
     labelName: string;
@@ -21,6 +20,5 @@ export interface IFilterIntervalProps extends ICommonProps {
         max?: number;
         maxLength?: number;
     };
-    testId?: string;
 }
 export declare const FilterInterval: FC<IFilterIntervalProps>;

package/dist/components/FiltersPane/components/FilterInterval/FilterInterval.styles.d.ts

@@ -1,52 +1,15 @@
-import { ComponentStyles } from '../../../../types';
-export declare const styles: {
-    root: {
-        padding: number;
-        background: "#ffffff";
-    };
-    inputWrapper: {
-        padding: number[];
-        display: string;
-        gridTemplateColumns: string;
-        gap: number;
-        marginBottom: number;
-    };
-    autosize: {
-        minWidth: number;
-        height: number;
-        opacity: number;
-        paddingRight: number;
-        fontSize: number;
-        whiteSpace: string;
-        userSelect: string;
-        pointerEvents: string;
-    };
-    clear: {
-        display: string;
-        justifyContent: string;
-    };
-    tweakInput: {
-        input: {
-            minWidth: number;
-        };
-        icon: {
-            padding: number;
-            width: number;
-            '&:last-child': {
-                paddingRight: number;
-            };
-        };
-    };
-    tweakClearButton: {
-        text: {
-            color: "#95a0b3";
-            '&:hover, &:focus': {
-                color: "#505f79";
-            };
-            '&:active': {
-                color: "#505f79";
-            };
-        };
-    };
-};
-export declare type FilterIntervalStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../../../theme';
+import { IButtonStyles } from '../../../Button';
+import { IInputStyles } from '../../../Input';
+export declare const useStyles: import("../../../../theme").IUseStyles<"clear" | "root" | "inputWrapper" | "autosize", unknown>;
+export declare const inputStyles: IInputStyles;
+export declare const clearButtonStyles: Partial<import("jss").Styles<"content" | "outline" | "root" | "inline" | "text" | "icon" | "active" | "disabled" | "s" | "fullWidth" | "primary" | "secondary" | "warning" | "destructive" | "custom" | "children" | "iconFromLeft" | "iconFromRight" | "onlyIcon" | "withIcon" | "m" | "l" | "xl" | "loader" | "loading", unknown, undefined>> & Partial<{
+    tweakPreloader: Partial<import("jss").Styles<"currentColor" | "root" | "default" | "dots" | "logo", unknown, undefined>> & Partial<{
+        tweakDotsPreloader: Partial<import("jss").Styles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown, undefined>> & Partial<unknown>;
+        tweakSvgPreloader: Partial<import("jss").Styles<"root", unknown, undefined>> & Partial<unknown>;
+    }>;
+}>;
+export declare type IFilterIntervalStyles = ITweakStyles<typeof useStyles, {
+    tweakInput: IInputStyles;
+    tweakClearButton: IButtonStyles;
+}>;

package/dist/components/FiltersPane/components/FilterInterval/index.d.ts

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

package/dist/components/FiltersPane/components/FilterSelect/FilterSelect.d.ts

@@ -1,9 +1,8 @@
 import { ReactNode } from 'react';
 import { ICommonProps } from '../../../../types';
 import { IFilterLocaleKey, ISelectLocale } from '../../types';
-import { FilterSelectStyles } from './FilterSelect.styles';
-export interface IFilterSelectProps<Value> extends ICommonProps {
-    tweakStyles?: FilterSelectStyles;
+import { IFilterSelectStyles } from './FilterSelect.styles';
+export interface IFilterSelectProps<Value> extends ICommonProps<IFilterSelectStyles> {
     value?: Value;
     onChange: (value?: Value) => void;
     /**
@@ -30,6 +29,5 @@ export interface IFilterSelectProps<Value> extends ICommonProps {
      * @default true
      */
     hasClearButton?: boolean;
-    testId?: string;
 }
 export declare function FilterSelect<Value>({ data, tweakStyles, value, isSearchEnabled, isGroupingEnabled, width, localeKey, locale, onChange, options, fetchOptions, footer, getValueView, getValueId, getValueString, hasClearButton, testId, }: IFilterSelectProps<Value>): JSX.Element;

package/dist/components/FiltersPane/components/FilterSelect/FilterSelect.styles.d.ts

@@ -1,124 +1,15 @@
-import { ComponentStyles } from '../../../../types';
-export declare const styles: {
-    root: {
-        width: ({ width }: {
-            width: string | number;
-        }) => string | number;
-        background: "#ffffff";
-    };
-    list: {
-        paddingTop: number;
-        padding: number[];
-        maxHeight: number;
-        overscrollBehavior: string;
-    } | {
-        paddingTop: number;
-        padding: number[];
-        maxHeight: number;
-        overscrollBehavior: string;
-    };
-    label: {
-        boxSizing: string;
-        fontSize: number;
-        padding: number[];
-        userSelect: string;
-        display: string;
-        alignItems: string;
-        color: "#7a869a";
-    };
-    labelChosen: {
-        fontWeight: string;
-        color: "#222a37";
-        padding: number[];
-    };
-    withoutTopGap: {
-        paddingTop: number;
-    };
-    withClearButton: {
-        paddingBottom: number;
-        maxHeight: number;
-    };
-    item: {
-        display: string;
-        alignItems: string;
-        justifyContent: string;
-        padding: number[];
-        maxWidth: string;
-        cursor: string;
-        fontSize: number;
-        minHeight: number;
-        transition: string;
-        boxSizing: string;
-    };
-    option: {
-        display: string;
-        userSelect: string;
-        width: string;
-        overflow: string;
-        whiteSpace: string;
-        textOverflow: string;
-    };
-    icon: {
-        width: number;
-        height: number;
-        marginRight: number;
-        alignSelf: string;
-        flexShrink: number;
-    };
-    panel: {
-        display: string;
-        padding: number[];
-        gap: number;
-    };
-    panelWithFooter: {
-        borderTop: (string | number)[];
-        padding: number[];
-    };
-    footer: {
-        wordBreak: string;
-        alignSelf: string;
-    };
-    clear: {
-        marginLeft: string;
-        alignSelf: string;
-    };
-    preloader: {
-        width: number;
-        height: number;
-        margin: string;
-        display: string;
-        alignItems: string;
-        justifyContent: string;
-    };
-    dropdownInput: {
-        borderBottom: (string | number)[];
-    };
-    nothingFound: {
-        display: string;
-        alignItems: string;
-        textAlign: string;
-        padding: number;
-        fontSize: number;
-    };
-    tweakSearchInput: {
-        tweakInput: {
-            inputWrapper: {
-                backgroundColor: string;
-                border: string;
-                height: number;
-            };
-        };
-    };
-    tweakClearButton: {
-        text: {
-            color: "#95a0b3";
-            '&:hover, &:focus': {
-                color: "#505f79";
-            };
-            '&:active': {
-                color: "#505f79";
-            };
-        };
-    };
-};
-export declare type FilterSelectStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../../../theme';
+import { IButtonStyles } from '../../../Button';
+import { ISearchInputStyles } from '../../../SearchInput';
+export declare const useStyles: import("../../../../theme").IUseStyles<"list" | "clear" | "item" | "root" | "icon" | "footer" | "label" | "option" | "labelChosen" | "withoutTopGap" | "withClearButton" | "panel" | "panelWithFooter" | "preloader" | "dropdownInput" | "nothingFound", unknown>;
+export declare const searchInputStyles: ISearchInputStyles;
+export declare const clearButtonStyles: Partial<import("jss").Styles<"content" | "outline" | "root" | "inline" | "text" | "icon" | "active" | "disabled" | "s" | "fullWidth" | "primary" | "secondary" | "warning" | "destructive" | "custom" | "children" | "iconFromLeft" | "iconFromRight" | "onlyIcon" | "withIcon" | "m" | "l" | "xl" | "loader" | "loading", unknown, undefined>> & Partial<{
+    tweakPreloader: Partial<import("jss").Styles<"currentColor" | "root" | "default" | "dots" | "logo", unknown, undefined>> & Partial<{
+        tweakDotsPreloader: Partial<import("jss").Styles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown, undefined>> & Partial<unknown>;
+        tweakSvgPreloader: Partial<import("jss").Styles<"root", unknown, undefined>> & Partial<unknown>;
+    }>;
+}>;
+export declare type IFilterSelectStyles = ITweakStyles<typeof useStyles, {
+    tweakSearchInput: ISearchInputStyles;
+    tweakClearButton: IButtonStyles;
+}>;

package/dist/components/FiltersPane/components/FilterSelect/index.d.ts

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

package/dist/components/FiltersPane/components/FilterValueView/FilterValueView.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="react" />
+import { ICommonProps } from '../../../../types';
 import { IFilterWrapperProps } from '../FilterWrapper';
-export declare function FilterValueView<Values, Key extends keyof Values>({ locale, localeKey, filter, value, }: Omit<IFilterWrapperProps<Values, Key>, 'onChange' | 'filtersPaneRef'>): JSX.Element;
+import { IFilterValueViewStyles } from './FilterValueView.styles';
+export declare function FilterValueView<Values, Key extends keyof Values>({ locale, localeKey, filter, value, tweakStyles, }: Omit<IFilterWrapperProps<Values, Key>, 'onChange' | 'filtersPaneRef' | 'tweakStyles'> & ICommonProps<IFilterValueViewStyles>): JSX.Element;

package/dist/components/FiltersPane/components/FilterValueView/FilterValueView.styles.d.ts

@@ -1,12 +1,3 @@
-import { ComponentStyles } from '../../../../types';
-export declare const styles: {
-    text: {
-        overflow: string;
-        textOverflow: string;
-        whiteSpace: string;
-    };
-    count: {
-        whiteSpace: string;
-    };
-};
-export declare type FilterValueViewStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../../../theme';
+export declare const useStyles: import("../../../../theme").IUseStyles<"text" | "count", unknown>;
+export declare type IFilterValueViewStyles = ITweakStyles<typeof useStyles>;

package/dist/components/FiltersPane/components/FilterValueView/index.d.ts

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

package/dist/components/FiltersPane/components/FilterWithDates/FilterWithDates.d.ts

@@ -1,18 +1,16 @@
 import { FC } from 'react';
 import { ICommonProps } from '../../../../types';
 import { IFilterWithDateDatePickerProps, IFilterLocaleKey, IFilterWithDatesValue, IPartialFilterLocale } from '../../types';
-import { FilterWithDatesStyles } from './FilterWithDates.styles';
-export interface IFilterWithDatesProps extends ICommonProps {
-    tweakStyles?: FilterWithDatesStyles;
+import { IFilterWithDatesStyles } 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 declare const FilterWithDates: FC<IFilterWithDatesProps>;

package/dist/components/FiltersPane/components/FilterWithDates/FilterWithDates.styles.d.ts

@@ -1,47 +1,26 @@
-import { ComponentStyles } from '../../../../types';
-export declare const styles: {
-    root: {
-        background: "#ffffff";
-        position: string;
-        zIndex: number;
-    };
-    container: {
-        display: string;
-        gap: number;
-        padding: number[];
-    };
-    containerItem: {
-        width: string;
-        height: number;
-    };
-    btnRow: {
-        display: string;
-        flexDirection: string;
-        justifyContent: string;
-        padding: number;
-    };
-    datepicker: {};
-    tweakClearButton: {
-        text: {
-            color: "#95a0b3";
-            '&:hover, &:focus': {
-                color: "#505f79";
-            };
-            '&:active': {
-                color: "#505f79";
-            };
-        };
-    };
-    tweakBackButton: {
-        text: {
-            color: "#95a0b3";
-            '&:hover, &:focus': {
-                color: "#505f79";
-            };
-            '&:active': {
-                color: "#505f79";
-            };
-        };
-    };
-};
-export declare type FilterWithDatesStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../../../theme';
+import { IButtonStyles } from '../../../Button';
+import { IDatePickerStyles } from '../../../DatePicker';
+export declare const useStyles: import("../../../../theme").IUseStyles<"root" | "datepicker" | "container" | "containerItem" | "btnRow", unknown>;
+export declare const clearButtonStyles: Partial<import("jss").Styles<"content" | "outline" | "root" | "inline" | "text" | "icon" | "active" | "disabled" | "s" | "fullWidth" | "primary" | "secondary" | "warning" | "destructive" | "custom" | "children" | "iconFromLeft" | "iconFromRight" | "onlyIcon" | "withIcon" | "m" | "l" | "xl" | "loader" | "loading", unknown, undefined>> & Partial<{
+    tweakPreloader: Partial<import("jss").Styles<"currentColor" | "root" | "default" | "dots" | "logo", unknown, undefined>> & Partial<{
+        tweakDotsPreloader: Partial<import("jss").Styles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown, undefined>> & Partial<unknown>;
+        tweakSvgPreloader: Partial<import("jss").Styles<"root", unknown, undefined>> & Partial<unknown>;
+    }>;
+}>;
+export declare const backButtonStyles: Partial<import("jss").Styles<"content" | "outline" | "root" | "inline" | "text" | "icon" | "active" | "disabled" | "s" | "fullWidth" | "primary" | "secondary" | "warning" | "destructive" | "custom" | "children" | "iconFromLeft" | "iconFromRight" | "onlyIcon" | "withIcon" | "m" | "l" | "xl" | "loader" | "loading", unknown, undefined>> & Partial<{
+    tweakPreloader: Partial<import("jss").Styles<"currentColor" | "root" | "default" | "dots" | "logo", unknown, undefined>> & Partial<{
+        tweakDotsPreloader: Partial<import("jss").Styles<"root" | "dot" | "fadedDot" | "@keyframes FadedDots", unknown, undefined>> & Partial<unknown>;
+        tweakSvgPreloader: Partial<import("jss").Styles<"root", unknown, undefined>> & Partial<unknown>;
+    }>;
+}>;
+export declare const startDatePickerStyles: IDatePickerStyles;
+export declare const startDatePickerWithButtonStyles: IDatePickerStyles;
+export declare const endDatePickerStyles: IDatePickerStyles;
+export declare const endDatePickerWithButtonStyles: IDatePickerStyles;
+export declare type IFilterWithDatesStyles = ITweakStyles<typeof useStyles, {
+    tweakClearButton: IButtonStyles;
+    tweakBackButton: IButtonStyles;
+    tweakStartDatePicker: IDatePickerStyles;
+    tweakEndDatePicker: IDatePickerStyles;
+}>;

package/dist/components/FiltersPane/components/FilterWithDates/index.d.ts

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

package/dist/components/FiltersPane/components/FilterWithPeriod/FilterWithPeriod.d.ts

@@ -1,15 +1,13 @@
 import { FC } from 'react';
 import { ICommonProps } from '../../../../types';
 import { IFilterLocaleKey, IPartialFilterLocale, IPeriod, IPeriodsList } from '../../types';
-import { FilterWithPeriodStyles } from './FilterWithPeriod.styles';
-export interface IFilterWithPeriodProps extends ICommonProps {
-    tweakStyles?: FilterWithPeriodStyles;
+import { IFilterWithPeriodStyles } from './FilterWithPeriod.styles';
+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 declare const FilterWithPeriod: FC<IFilterWithPeriodProps>;

package/dist/components/FiltersPane/components/FilterWithPeriod/FilterWithPeriod.styles.d.ts

@@ -1,12 +1,7 @@
-import { ComponentStyles } from '../../../../types';
-export declare const styles: {
-    root: {};
-    main: {};
-    picker: {};
-    tweakSelect: {
-        options: {
-            maxHeight: string;
-        };
-    };
-};
-export declare type FilterWithPeriodStyles = ComponentStyles<typeof styles>;
+import { ITweakStyles } from '../../../../theme';
+import { IFilterSelectStyles } from '../FilterSelect';
+export declare const useStyles: import("../../../../theme").IUseStyles<"main" | "root" | "picker", unknown>;
+export declare const filterSelectStyles: IFilterSelectStyles;
+export declare type IFilterWithPeriodStyles = ITweakStyles<typeof useStyles, {
+    tweakFilterSelect: IFilterSelectStyles;
+}>;

package/dist/components/FiltersPane/components/FilterWithPeriod/index.d.ts

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

package/dist/components/FiltersPane/components/FilterWrapper/FilterWrapper.d.ts

@@ -1,15 +1,14 @@
 import { RefObject } from 'react';
+import { ICommonProps } from '../../../../types';
 import { ConfigItem, IFilterLocaleKey, IPartialFilterLocale } from '../../types';
-import { FilterWrapperStyles } from './FilterWrapper.styles';
-export interface IFilterWrapperProps<Values, Key extends keyof Values> {
-    tweakStyles?: FilterWrapperStyles;
+import { IFilterWrapperStyles } from './FilterWrapper.styles';
+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 declare function FilterWrapper<Values, Key extends keyof Values>({ filter, value, isDisabled, onChange, locale, localeKey, testId, filtersPaneRef, tweakStyles, }: IFilterWrapperProps<Values, Key>): JSX.Element;
+export declare function FilterWrapper<Values, Key extends keyof Values>({ filter, value, isDisabled, locale, localeKey, data, testId, filtersPaneRef, tweakStyles, onChange, }: IFilterWrapperProps<Values, Key>): JSX.Element;