material-react-table 2.0.0-alpha.2 → 2.0.0-alpha.3

package/dist/cjs/types/locales/np.d.ts

@@ -0,0 +1,2 @@
+import { type MRT_Localization } from '..';
+export declare const MRT_Localization_NP: MRT_Localization;

package/dist/cjs/types/types.d.ts

@@ -1,6 +1,7 @@
 import { type Dispatch, type MutableRefObject, type ReactNode, type RefObject, type SetStateAction } from 'react';
 import { type AggregationFn, type Cell, type Column, type ColumnDef, type ColumnFiltersState, type ColumnOrderState, type ColumnPinningState, type ColumnSizingInfoState, type ColumnSizingState, type DeepKeys, type ExpandedState, type FilterFn, type GroupingState, type Header, type HeaderGroup, type OnChangeFn, type PaginationState, type Row, type RowSelectionState, type SortingFn, type SortingState, type Table, type TableOptions, type TableState, type Updater, type VisibilityState } from '@tanstack/react-table';
 import { type VirtualItem, type Virtualizer, type VirtualizerOptions } from '@tanstack/react-virtual';
+import { type AutocompleteProps } from '@mui/material';
 import { type AlertProps } from '@mui/material/Alert';
 import { type ButtonProps } from '@mui/material/Button';
 import { type CheckboxProps } from '@mui/material/Checkbox';
@@ -22,6 +23,7 @@ import { type TablePaginationProps } from '@mui/material/TablePagination';
 import { type TableRowProps } from '@mui/material/TableRow';
 import { type TextFieldProps } from '@mui/material/TextField';
 import { type ToolbarProps } from '@mui/material/Toolbar';
+import { type DatePickerProps } from '@mui/x-date-pickers';
 import { type MRT_AggregationFns } from './aggregationFns';
 import { type MRT_FilterFns } from './filterFns';
 import { type MRT_Icons } from './icons';
@@ -313,7 +315,7 @@ export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<ColumnDef<TD
         text: string;
         value: any;
     } | string)[];
-    filterVariant?: 'checkbox' | 'multi-select' | 'range' | 'range-slider' | 'select' | 'text';
+    filterVariant?: 'autocomplete' | 'checkbox' | 'date' | 'date-range' | 'multi-select' | 'range' | 'range-slider' | 'select' | 'text';
     /**
      * footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F)
      */
@@ -352,10 +354,19 @@ export type MRT_ColumnDef<TData extends Record<string, any>> = Omit<ColumnDef<TD
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => TextFieldProps) | TextFieldProps;
+    muiFilterAutocompleteProps?: ((props: {
+        column: MRT_Column<TData>;
+        table: MRT_TableInstance<TData>;
+    }) => AutocompleteProps<any, any, any, any>) | AutocompleteProps<any, any, any, any>;
     muiFilterCheckboxProps?: ((props: {
         column: MRT_Column<TData>;
         table: MRT_TableInstance<TData>;
     }) => CheckboxProps) | CheckboxProps;
+    muiFilterDatePickerProps?: ((props: {
+        column: MRT_Column<TData>;
+        rangeFilterIndex?: number;
+        table: MRT_TableInstance<TData>;
+    }) => DatePickerProps<any>) | DatePickerProps<any>;
     muiFilterSliderProps?: ((props: {
         column: MRT_Column<TData>;
         table: MRT_TableInstance<TData>;
@@ -576,10 +587,19 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<Partial<T
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
     }) => IconButtonProps) | IconButtonProps;
+    muiFilterAutocompleteProps?: ((props: {
+        column: MRT_Column<TData>;
+        table: MRT_TableInstance<TData>;
+    }) => AutocompleteProps<any, any, any, any>) | AutocompleteProps<any, any, any, any>;
     muiFilterCheckboxProps?: ((props: {
         column: MRT_Column<TData>;
         table: MRT_TableInstance<TData>;
     }) => CheckboxProps) | CheckboxProps;
+    muiFilterDatePickerProps?: ((props: {
+        column: MRT_Column<TData>;
+        rangeFilterIndex?: number;
+        table: MRT_TableInstance<TData>;
+    }) => DatePickerProps<any>) | DatePickerProps<any>;
     muiFilterSliderProps?: ((props: {
         column: MRT_Column<TData>;
         table: MRT_TableInstance<TData>;

package/dist/esm/material-react-table.esm.js

@@ -26,9 +26,11 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import Menu from '@mui/material/Menu';
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
+import Autocomplete from '@mui/material/Autocomplete';
 import Chip from '@mui/material/Chip';
 import InputAdornment from '@mui/material/InputAdornment';
 import { debounce } from '@mui/material/utils';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import FormHelperText from '@mui/material/FormHelperText';
 import Slider from '@mui/material/Slider';
 import Stack from '@mui/material/Stack';
@@ -265,10 +267,10 @@ const getDefaultColumnOrderIds = (props) => {
     return [...leadingDisplayCols, ...allLeafColumnDefs, ...trailingDisplayCols];
 };
 const getDefaultColumnFilterFn = (columnDef) => {
+    var _a;
     if (columnDef.filterVariant === 'multi-select')
         return 'arrIncludesSome';
-    if (columnDef.filterVariant === 'range' ||
-        columnDef.filterVariant === 'range-slider')
+    if ((_a = columnDef.filterVariant) === null || _a === void 0 ? void 0 : _a.includes('range'))
         return 'betweenInclusive';
     if (columnDef.filterVariant === 'select' ||
         columnDef.filterVariant === 'checkbox')
@@ -1136,7 +1138,7 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
             globalFilterModeOptions.includes(filterOption.option)) &&
             ['contains', 'fuzzy', 'startsWith'].includes(filterOption.option)), []);
     const handleSelectFilterMode = (option) => {
-        var _a;
+        var _a, _b;
         const prevFilterMode = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef._filterFn) !== null && _a !== void 0 ? _a : '';
         if (!header || !column) {
             // global filter mode
@@ -1168,7 +1170,7 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
                     column.setFilterValue(currentFilterValue); // perform new filter render
                 }
             }
-            else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'range' ||
+            else if (((_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === null || _b === void 0 ? void 0 : _b.includes('range')) ||
                 rangeModes.includes(option)) {
                 // will now be range filter mode
                 if (!Array.isArray(currentFilterValue) ||
@@ -1235,7 +1237,7 @@ const commonListItemStyles = {
 };
 const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const { getState, options: { columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ArrowRightIcon, ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnOrder, setColumnSizingInfo, setShowColumnFilters, toggleAllColumnsVisible, } = table;
+    const { getState, options: { columnFilterDisplayMode, columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ArrowRightIcon, ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnOrder, setColumnSizingInfo, setShowColumnFilters, toggleAllColumnsVisible, } = table;
     const { column } = header;
     const { columnDef } = column;
     const { columnSizing, columnVisibility, density, showColumnFilters } = getState();
@@ -1308,11 +1310,11 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
                 jsx(MenuItem, { disabled: !columnFilterValue ||
                         (Array.isArray(columnFilterValue) &&
                             !columnFilterValue.filter((value) => value).length), onClick: handleClearFilter, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(FilterListOffIcon, {}) }), localization.clearFilter] }) }, 3),
-                jsxs(MenuItem, { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, onClick: showColumnFilters
+                columnFilterDisplayMode === 'subheader' && (jsxs(MenuItem, { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, onClick: showColumnFilters
                         ? handleOpenFilterModeMenu
-                        : handleFilterByColumn, sx: commonMenuItemStyles, children: [jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(FilterListIcon, {}) }), (_d = localization.filterByColumn) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header))] }), showFilterModeSubMenu && (jsx(IconButton, { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 }, children: jsx(ArrowRightIcon, {}) }))] }, 4),
+                        : handleFilterByColumn, sx: commonMenuItemStyles, children: [jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(FilterListIcon, {}) }), (_d = localization.filterByColumn) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header))] }), showFilterModeSubMenu && (jsx(IconButton, { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 }, children: jsx(ArrowRightIcon, {}) }))] }, 4)),
                 showFilterModeSubMenu && (jsx(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table }, 5)),
-            ]
+            ].filter(Boolean)
             : []),
         ...(enableGrouping && column.getCanGroup()
             ? [
@@ -1406,18 +1408,29 @@ const MRT_FilterCheckbox = ({ column, table, }) => {
 };
 
 const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const { options: { columnFilterModeOptions, enableColumnFilterModes, icons: { CloseIcon, FilterListIcon }, localization, manualFiltering, muiFilterTextFieldProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
+    var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o;
+    const { options: { columnFilterModeOptions, enableColumnFilterModes, icons: { CloseIcon, FilterListIcon }, localization, manualFiltering, muiFilterAutocompleteProps, muiFilterDatePickerProps, muiFilterTextFieldProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
     const { column } = header;
     const { columnDef } = column;
+    const { filterVariant } = columnDef;
     const textFieldProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTextFieldProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterTextFieldProps, {
         column,
         table,
     }));
-    const isRangeFilter = columnDef.filterVariant === 'range' || rangeFilterIndex !== undefined;
-    const isSelectFilter = columnDef.filterVariant === 'select';
-    const isMultiSelectFilter = columnDef.filterVariant === 'multi-select';
-    const isTextboxFilter = columnDef.filterVariant === 'text' ||
+    const autocompleteProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterAutocompleteProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterAutocompleteProps, {
+        column,
+        table,
+    }));
+    const datePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDatePickerProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterDatePickerProps, {
+        column,
+        table,
+    }));
+    const isDateFilter = filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date');
+    const isAutocompleteFilter = filterVariant === 'autocomplete';
+    const isRangeFilter = (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.includes('range')) || rangeFilterIndex !== undefined;
+    const isSelectFilter = filterVariant === 'select';
+    const isMultiSelectFilter = filterVariant === 'multi-select';
+    const isTextboxFilter = ['autocomplete', 'text'].includes(filterVariant) ||
         (!isSelectFilter && !isMultiSelectFilter);
     const currentFilterOption = columnDef._filterFn;
     const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
@@ -1432,55 +1445,48 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
             : rangeFilterIndex === 1
                 ? localization.max
                 : '';
-    const allowedColumnFilterOptions = (_e = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _e !== void 0 ? _e : columnFilterModeOptions;
+    const allowedColumnFilterOptions = (_f = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _f !== void 0 ? _f : columnFilterModeOptions;
     const showChangeModeButton = enableColumnFilterModes &&
         columnDef.enableColumnFilterModes !== false &&
         !rangeFilterIndex &&
         (allowedColumnFilterOptions === undefined ||
             !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
     const facetedUniqueValues = column.getFacetedUniqueValues();
-    const filterSelectOptions = useMemo(() => {
-        var _a;
-        return (_a = columnDef.filterSelectOptions) !== null && _a !== void 0 ? _a : ((isSelectFilter || isMultiSelectFilter) && facetedUniqueValues
-            ? Array.from(facetedUniqueValues.keys())
-                .filter((value) => value !== null && value !== undefined)
-                .sort((a, b) => a.localeCompare(b))
-            : undefined);
-    }, [
-        columnDef.filterSelectOptions,
-        facetedUniqueValues,
-        isMultiSelectFilter,
-        isSelectFilter,
-    ]);
     const [anchorEl, setAnchorEl] = useState(null);
     const [filterValue, setFilterValue] = useState(() => {
         var _a, _b;
         return isMultiSelectFilter
             ? column.getFilterValue() || []
             : isRangeFilter
-                ? ((_a = column.getFilterValue()) === null || _a === void 0 ? void 0 : _a[rangeFilterIndex]) || []
+                ? ((_a = column.getFilterValue()) === null || _a === void 0 ? void 0 : _a[rangeFilterIndex]) || ''
                 : (_b = column.getFilterValue()) !== null && _b !== void 0 ? _b : '';
     });
-    const handleChangeDebounced = useCallback(debounce((event) => {
-        const value = textFieldProps.type === 'date'
-            ? event.target.valueAsDate
-            : textFieldProps.type === 'number'
-                ? event.target.valueAsNumber
-                : event.target.value;
+    const handleChangeDebounced = useCallback(debounce((newValue) => {
         if (isRangeFilter) {
             column.setFilterValue((old) => {
                 const newFilterValues = old !== null && old !== void 0 ? old : ['', ''];
-                newFilterValues[rangeFilterIndex] = value;
+                newFilterValues[rangeFilterIndex] = newValue;
                 return newFilterValues;
             });
         }
         else {
-            column.setFilterValue(value !== null && value !== void 0 ? value : undefined);
+            column.setFilterValue(newValue !== null && newValue !== void 0 ? newValue : undefined);
         }
     }, isTextboxFilter ? (manualFiltering ? 400 : 200) : 1), []);
-    const handleChange = (event) => {
-        setFilterValue(event.target.value);
-        handleChangeDebounced(event);
+    const handleChange = (newValue) => {
+        var _a;
+        setFilterValue((_a = newValue === null || newValue === void 0 ? void 0 : newValue.toString()) !== null && _a !== void 0 ? _a : '');
+        handleChangeDebounced(newValue);
+    };
+    const handleTextFieldChange = (event) => {
+        var _a;
+        const newValue = textFieldProps.type === 'date'
+            ? event.target.valueAsDate
+            : textFieldProps.type === 'number'
+                ? event.target.valueAsNumber
+                : event.target.value;
+        handleChange(newValue);
+        (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onChange) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
     };
     const handleClear = () => {
         if (isMultiSelectFilter) {
@@ -1528,26 +1534,76 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
         isMounted.current = true;
     }, [column.getFilterValue()]);
     if (columnDef.Filter) {
-        return (jsx(Fragment, { children: (_f = columnDef.Filter) === null || _f === void 0 ? void 0 : _f.call(columnDef, { column, header, rangeFilterIndex, table }) }));
+        return (jsx(Fragment, { children: (_g = columnDef.Filter) === null || _g === void 0 ? void 0 : _g.call(columnDef, { column, header, rangeFilterIndex, table }) }));
     }
-    return (jsxs(Fragment, { children: [jsxs(TextField, Object.assign({ FormHelperTextProps: {
-                    sx: {
-                        fontSize: '0.75rem',
-                        lineHeight: '0.8rem',
-                        whiteSpace: 'nowrap',
-                    },
-                }, InputProps: {
-                    endAdornment: !filterChipLabel && (jsx(InputAdornment, { position: "end", children: jsx(Tooltip, { arrow: true, placement: "right", title: (_g = localization.clearFilter) !== null && _g !== void 0 ? _g : '', children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.clearFilter, disabled: !((_h = filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString()) === null || _h === void 0 ? void 0 : _h.length), onClick: handleClear, size: "small", sx: {
-                                        height: '1.75rem',
-                                        width: '1.75rem',
-                                    }, children: jsx(CloseIcon, {}) }) }) }) })),
-                    startAdornment: showChangeModeButton ? (jsxs(InputAdornment, { position: "start", children: [jsx(Tooltip, { arrow: true, title: localization.changeFilterMode, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsx(FilterListIcon, {}) }) }) }), filterChipLabel && (jsx(Chip, { label: filterChipLabel, onDelete: handleClearEmptyFilterChip }))] })) : null,
-                }, SelectProps: {
+    const dropdownOptions = useMemo(() => {
+        var _a;
+        return (_a = columnDef.filterSelectOptions) !== null && _a !== void 0 ? _a : ((isSelectFilter || isMultiSelectFilter || isAutocompleteFilter) &&
+            facetedUniqueValues
+            ? Array.from(facetedUniqueValues.keys())
+                .filter((value) => value !== null && value !== undefined)
+                .sort((a, b) => a.localeCompare(b))
+            : undefined);
+    }, [
+        columnDef.filterSelectOptions,
+        facetedUniqueValues,
+        isMultiSelectFilter,
+        isSelectFilter,
+    ]);
+    const endAdornment = !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (jsx(InputAdornment, { position: "end", sx: { mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }, children: jsx(Tooltip, { arrow: true, placement: "right", title: (_h = localization.clearFilter) !== null && _h !== void 0 ? _h : '', children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.clearFilter, disabled: !((_j = filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString()) === null || _j === void 0 ? void 0 : _j.length), onClick: handleClear, size: "small", sx: {
+                        height: '2rem',
+                        transform: 'scale(0.9)',
+                        width: '2rem'
+                    }, children: jsx(CloseIcon, {}) }) }) }) })) : null;
+    const startAdornment = showChangeModeButton ? (jsxs(InputAdornment, { position: "start", children: [jsx(Tooltip, { arrow: true, title: localization.changeFilterMode, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsx(FilterListIcon, {}) }) }) }), filterChipLabel && (jsx(Chip, { label: filterChipLabel, onDelete: handleClearEmptyFilterChip }))] })) : null;
+    const commonTextFieldProps = Object.assign(Object.assign({ FormHelperTextProps: {
+            sx: {
+                fontSize: '0.75rem',
+                lineHeight: '0.8rem',
+                whiteSpace: 'nowrap',
+            },
+        }, InputProps: endAdornment //hack because mui looks for presense of endAdornment key instead of undefined
+            ? { endAdornment, startAdornment }
+            : { startAdornment }, fullWidth: true, helperText: showChangeModeButton ? (jsx("label", { children: localization.filterMode.replace('{filterType}', 
+            // @ts-ignore
+            localization[`filter${((_k = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _k === void 0 ? void 0 : _k.toUpperCase()) +
+                (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null, inputProps: {
+            autoComplete: 'new-password',
+            disabled: !!filterChipLabel,
+            sx: {
+                textOverflow: 'ellipsis',
+                width: filterChipLabel ? 0 : undefined,
+            },
+            title: filterPlaceholder,
+        }, inputRef: (inputRef) => {
+            filterInputRefs.current[`${column.id}-${rangeFilterIndex !== null && rangeFilterIndex !== void 0 ? rangeFilterIndex : 0}`] =
+                inputRef;
+            if (textFieldProps.inputRef) {
+                textFieldProps.inputRef = inputRef;
+            }
+        }, margin: 'none', onClick: (e) => e.stopPropagation(), placeholder: filterChipLabel || isSelectFilter || isMultiSelectFilter
+            ? undefined
+            : filterPlaceholder, variant: 'standard' }, textFieldProps), { sx: (theme) => (Object.assign({ minWidth: isDateFilter
+                ? '160px'
+                : isRangeFilter
+                    ? '100px'
+                    : !filterChipLabel
+                        ? '120px'
+                        : 'auto', mx: '-2px', p: 0, width: 'calc(100% + 4px)' }, parseFromValuesOrFunc(textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx, theme))) });
+    return (jsxs(Fragment, { children: [isDateFilter ? (jsx(DatePicker, Object.assign({ onChange: (newDate) => {
+                    handleChange(newDate);
+                }, value: filterValue || null }, datePickerProps, { slotProps: {
+                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_l = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _l === void 0 ? void 0 : _l.field),
+                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_m = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _m === void 0 ? void 0 : _m.textField),
+                } }))) : isAutocompleteFilter ? (jsx(Autocomplete, Object.assign({ getOptionLabel: (option) => option, onChange: (_e, newValue) => handleChange(newValue), options: dropdownOptions !== null && dropdownOptions !== void 0 ? dropdownOptions : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
+                    var _a;
+                    return (jsx(TextField, Object.assign({}, builtinTextFieldProps, commonTextFieldProps, { InputProps: Object.assign(Object.assign({}, builtinTextFieldProps.InputProps), { startAdornment: (_a = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.startAdornment }), inputProps: Object.assign(Object.assign({}, builtinTextFieldProps.inputProps), commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.inputProps), onChange: handleTextFieldChange })));
+                }, value: filterValue }))) : (jsx(TextField, Object.assign({ SelectProps: {
                     displayEmpty: true,
                     multiple: isMultiSelectFilter,
                     renderValue: isMultiSelectFilter
                         ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder })) : (jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' }, children: selected === null || selected === void 0 ? void 0 : selected.map((value) => {
-                                const selectedValue = filterSelectOptions === null || filterSelectOptions === void 0 ? void 0 : filterSelectOptions.find((option) => option instanceof Object
+                                const selectedValue = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => option instanceof Object
                                     ? option.value === value
                                     : option === value);
                                 return (jsx(Chip, { label: selectedValue instanceof Object
@@ -1555,52 +1611,33 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                                         : selectedValue }, value));
                             }) }))
                         : undefined,
-                }, fullWidth: true, helperText: showChangeModeButton ? (jsx("label", { children: localization.filterMode.replace('{filterType}', 
-                    // @ts-ignore
-                    localization[`filter${((_j = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _j === void 0 ? void 0 : _j.toUpperCase()) +
-                        (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null, inputProps: {
-                    disabled: !!filterChipLabel,
-                    sx: {
-                        textOverflow: 'ellipsis',
-                        width: filterChipLabel ? 0 : undefined,
-                    },
-                    title: filterPlaceholder,
-                }, margin: "none", onChange: handleChange, onClick: (e) => e.stopPropagation(), placeholder: filterChipLabel || isSelectFilter || isMultiSelectFilter
-                    ? undefined
-                    : filterPlaceholder, select: isSelectFilter || isMultiSelectFilter, value: filterValue !== null && filterValue !== void 0 ? filterValue : '', variant: "standard" }, textFieldProps, { inputRef: (inputRef) => {
-                    filterInputRefs.current[`${column.id}-${rangeFilterIndex !== null && rangeFilterIndex !== void 0 ? rangeFilterIndex : 0}`] =
-                        inputRef;
-                    if (textFieldProps.inputRef) {
-                        textFieldProps.inputRef = inputRef;
-                    }
-                }, sx: (theme) => (Object.assign({ '& .MuiSelect-icon': {
-                        mr: '1.5rem',
-                    }, minWidth: isRangeFilter
-                        ? '100px'
-                        : !filterChipLabel
-                            ? '120px'
-                            : 'auto', mx: '-2px', p: 0, width: 'calc(100% + 4px)' }, parseFromValuesOrFunc(textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx, theme))), children: [(isSelectFilter || isMultiSelectFilter) && (jsx(MenuItem, { disabled: true, divider: true, hidden: true, value: "", children: jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder }) })), (_k = textFieldProps.children) !== null && _k !== void 0 ? _k : filterSelectOptions === null || filterSelectOptions === void 0 ? void 0 : filterSelectOptions.map((option) => {
-                        var _a;
-                        if (!option)
-                            return '';
-                        let value;
-                        let text;
-                        if (typeof option !== 'object') {
-                            value = option;
-                            text = option;
-                        }
-                        else {
-                            value = option.value;
-                            text = option.text;
-                        }
-                        return (jsxs(MenuItem, { sx: {
-                                alignItems: 'center',
-                                display: 'flex',
-                                gap: '0.5rem',
-                                m: 0,
-                            }, value: value, children: [isMultiSelectFilter && (jsx(Checkbox, { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })), text, ' ', !columnDef.filterSelectOptions &&
-                                    `(${facetedUniqueValues.get(value)})`] }, value));
-                    })] })), jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, setFilterValue: setFilterValue, table: table })] }));
+                }, onChange: handleTextFieldChange, select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { value: filterValue !== null && filterValue !== void 0 ? filterValue : '', children: (isSelectFilter || isMultiSelectFilter) && [
+                    jsx(MenuItem, { disabled: true, divider: true, hidden: true, value: "", children: jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder }) }, "p"),
+                    ...[
+                        (_o = textFieldProps.children) !== null && _o !== void 0 ? _o : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
+                            var _a;
+                            if (!option)
+                                return '';
+                            let value;
+                            let text;
+                            if (typeof option !== 'object') {
+                                value = option;
+                                text = option;
+                            }
+                            else {
+                                value = option.value;
+                                text = option.text;
+                            }
+                            return (jsxs(MenuItem, { sx: {
+                                    alignItems: 'center',
+                                    display: 'flex',
+                                    gap: '0.5rem',
+                                    m: 0,
+                                }, value: value, children: [isMultiSelectFilter && (jsx(Checkbox, { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })), text, ' ', !columnDef.filterSelectOptions &&
+                                        `(${facetedUniqueValues.get(value)})`] }, `${index}-${value}`));
+                        }),
+                    ],
+                ] }))), jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, setFilterValue: setFilterValue, table: table })] }));
 };
 
 const MRT_FilterRangeFields = ({ header, table, }) => {
@@ -1679,16 +1716,17 @@ const MRT_FilterRangeSlider = ({ header, table, }) => {
 };
 
 const MRT_TableHeadCellFilterContainer = ({ header, table, }) => {
+    var _a;
     const { getState, options: { columnFilterDisplayMode }, } = table;
     const { showColumnFilters } = getState();
     const { column } = header;
     const { columnDef } = column;
-    return (jsx(Collapse, { in: showColumnFilters || columnFilterDisplayMode === 'popover', mountOnEnter: true, unmountOnExit: true, children: columnDef.filterVariant === 'checkbox' ? (jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range-slider' ? (jsx(MRT_FilterRangeSlider, { header: header, table: table })) : columnDef.filterVariant === 'range' ||
+    return (jsx(Collapse, { in: showColumnFilters || columnFilterDisplayMode === 'popover', mountOnEnter: true, unmountOnExit: true, children: columnDef.filterVariant === 'checkbox' ? (jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range-slider' ? (jsx(MRT_FilterRangeSlider, { header: header, table: table })) : ((_a = columnDef.filterVariant) === null || _a === void 0 ? void 0 : _a.includes('range')) ||
             ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (jsx(MRT_FilterRangeFields, { header: header, table: table })) : (jsx(MRT_FilterTextField, { header: header, table: table })) }));
 };
 
 const MRT_TableHeadCellFilterLabel = ({ header, table, }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const { options: { columnFilterDisplayMode, icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowColumnFilters, } = table;
     const { column } = header;
     const { columnDef } = column;
@@ -1696,26 +1734,26 @@ const MRT_TableHeadCellFilterLabel = ({ header, table, }) => {
     const [anchorEl, setAnchorEl] = useState(null);
     const isFilterActive = (Array.isArray(filterValue) && filterValue.some(Boolean)) ||
         (!!filterValue && !Array.isArray(filterValue));
-    const isRangeFilter = columnDef.filterVariant === 'range' ||
+    const isRangeFilter = ((_a = columnDef.filterVariant) === null || _a === void 0 ? void 0 : _a.includes('range')) ||
         ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
     const currentFilterOption = columnDef._filterFn;
     const filterTooltip = columnFilterDisplayMode === 'popover' && !isFilterActive
-        ? (_a = localization.filterByColumn) === null || _a === void 0 ? void 0 : _a.replace('{column}', String(columnDef.header))
+        ? (_b = localization.filterByColumn) === null || _b === void 0 ? void 0 : _b.replace('{column}', String(columnDef.header))
         : localization.filteringByColumn
             .replace('{column}', String(columnDef.header))
             .replace('{filterType}', currentFilterOption
             ? // @ts-ignore
-                localization[`filter${((_b = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()) +
+                localization[`filter${((_c = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
                     (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]
             : '')
-            .replace('{filterValue}', `"${Array.isArray(column.getFilterValue())
-            ? column.getFilterValue().join(`" ${isRangeFilter ? localization.and : localization.or} "`)
-            : column.getFilterValue()}"`)
+            .replace('{filterValue}', `"${Array.isArray(filterValue)
+            ? filterValue.join(`" ${isRangeFilter ? localization.and : localization.or} "`)
+            : filterValue}"`)
             .replace('" "', '');
     return (jsxs(Fragment, { children: [jsx(Grow, { in: columnFilterDisplayMode === 'popover' ||
-                    (!!column.getFilterValue() && !isRangeFilter) ||
+                    (!!filterValue && !isRangeFilter) ||
                     (isRangeFilter && // @ts-ignore
-                        (!!((_c = column.getFilterValue()) === null || _c === void 0 ? void 0 : _c[0]) || !!((_d = column.getFilterValue()) === null || _d === void 0 ? void 0 : _d[1]))), unmountOnExit: true, children: jsx(Box, { component: "span", sx: { flex: '0 0' }, children: jsx(Tooltip, { arrow: true, placement: "top", title: filterTooltip, children: jsx(IconButton, { disableRipple: true, onClick: (event) => {
+                        (!!(filterValue === null || filterValue === void 0 ? void 0 : filterValue[0]) || !!(filterValue === null || filterValue === void 0 ? void 0 : filterValue[1]))), unmountOnExit: true, children: jsx(Box, { component: "span", sx: { flex: '0 0' }, children: jsx(Tooltip, { arrow: true, placement: "top", title: filterTooltip, children: jsx(IconButton, { disableRipple: true, onClick: (event) => {
                                 if (columnFilterDisplayMode === 'popover') {
                                     setAnchorEl(event.currentTarget);
                                 }