material-react-table 1.0.0-beta.8 → 1.0.0-beta.9

package/dist/cjs/menus/MRT_FilterOptionMenu.d.ts

@@ -6,7 +6,8 @@ interface Props<TData extends Record<string, any> = {}> {
     header?: MRT_Header<TData>;
     onSelect?: () => void;
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
+    setFilterValue?: (filterValue: any) => void;
     table: MRT_TableInstance<TData>;
 }
-export declare const MRT_FilterOptionMenu: <TData extends Record<string, any> = {}>({ anchorEl, header, onSelect, setAnchorEl, table, }: Props<TData>) => JSX.Element;
+export declare const MRT_FilterOptionMenu: <TData extends Record<string, any> = {}>({ anchorEl, header, onSelect, setAnchorEl, setFilterValue, table, }: Props<TData>) => JSX.Element;
 export {};

package/dist/esm/MaterialReactTable.d.ts

@@ -467,6 +467,9 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarAlertBanner?: 'bottom' | 'top' | 'none';
     positionToolbarDropZone?: 'bottom' | 'top' | 'none' | 'both';
+    renderBottomToolbar?: ({ table, }: {
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode | ReactNode[];
     renderBottomToolbarCustomActions?: ({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
@@ -503,6 +506,9 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     renderToolbarInternalActions?: ({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
+    renderTopToolbar?: ({ table, }: {
+        table: MRT_TableInstance<TData>;
+    }) => ReactNode | ReactNode[];
     renderTopToolbarCustomActions?: ({ table, }: {
         table: MRT_TableInstance<TData>;
     }) => ReactNode;

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef, useState, useCallback, Fragment, useEffect, memo, useLayoutEffect } from 'react';
+import React, { useMemo, useRef, useState, useCallback, Fragment, memo, useEffect, useLayoutEffect } from 'react';
 import { aggregationFns, filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
 import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
@@ -385,7 +385,7 @@ const mrtFilterOptions = (localization) => [
         divider: false,
     },
 ];
-const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, table, }) => {
+const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilterValue, table, }) => {
     var _a, _b, _c, _d;
     const { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
     const { globalFilterFn, density } = getState();
@@ -404,11 +404,19 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, table,
             if (['empty', 'notEmpty'].includes(option)) {
                 column.setFilterValue(' ');
             }
-            else if (option === 'between') {
+            else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'multi-select' ||
+                ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'].includes(option)) {
+                column.setFilterValue([]);
+                setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue([]);
+            }
+            else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'range' ||
+                ['between', 'betweenInclusive', 'inNumberRange'].includes(option)) {
                 column.setFilterValue(['', '']);
+                setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
             }
             else {
                 column.setFilterValue('');
+                setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
             }
         }
         else {
@@ -1072,7 +1080,7 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
                     textFieldProps.inputRef = inputRef;
                 }
             } })),
-        React.createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table })));
+        React.createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table, onSelect: handleClear })));
 };
 
 const MRT_LinearProgressBar = ({ isTopToolbar, table }) => {
@@ -1209,13 +1217,13 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
     var _b;
     var { table } = _a, rest = __rest(_a, ["table"]);
     const { getState, options: { icons: { SearchIcon, SearchOffIcon }, localization, }, refs: { searchInputRef }, setShowGlobalFilter, } = table;
-    const { showGlobalFilter } = getState();
+    const { globalFilter, showGlobalFilter } = getState();
     const handleToggleSearch = () => {
         setShowGlobalFilter(!showGlobalFilter);
         queueMicrotask(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
     };
     return (React.createElement(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch },
-        React.createElement(IconButton, Object.assign({ onClick: handleToggleSearch }, rest, { title: undefined }), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null))));
+        React.createElement(IconButton, Object.assign({ disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined }), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null))));
 };
 
 const MRT_ToolbarInternalButtons = ({ table }) => {
@@ -1486,9 +1494,6 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
     const handleFilterMenuOpen = (event) => {
         setAnchorEl(event.currentTarget);
     };
-    useEffect(() => {
-        handleClear();
-    }, [columnDef._filterFn]);
     if (columnDef.Filter) {
         return React.createElement(React.Fragment, null, (_e = columnDef.Filter) === null || _e === void 0 ? void 0 : _e.call(columnDef, { column, header, table }));
     }
@@ -1578,7 +1583,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                     isMultiSelectFilter && (React.createElement(Checkbox, { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })),
                     text));
             })),
-        React.createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table })));
+        React.createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table, setFilterValue: setFilterValue })));
 };
 
 const MRT_FilterRangeFields = ({ header, table }) => {
@@ -2356,7 +2361,8 @@ const MRT_TableContainer = ({ table }) => {
 };
 
 const MRT_TablePaper = ({ table }) => {
-    const { getState, options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps }, refs: { tablePaperRef }, } = table;
+    var _a, _b;
+    const { getState, options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
     const { isFullScreen } = getState();
     const tablePaperProps = muiTablePaperProps instanceof Function
         ? muiTablePaperProps({ table })
@@ -2378,10 +2384,8 @@ const MRT_TablePaper = ({ table }) => {
                 padding: 0,
                 width: '100vw',
             }
-            : {})) }),
-        enableTopToolbar && React.createElement(MRT_TopToolbar, { table: table }),
-        React.createElement(MRT_TableContainer, { table: table }),
-        enableBottomToolbar && React.createElement(MRT_BottomToolbar, { table: table })));
+            : {})) }), (_a = (enableTopToolbar && (renderTopToolbar === null || renderTopToolbar === void 0 ? void 0 : renderTopToolbar({ table })))) !== null && _a !== void 0 ? _a : (React.createElement(MRT_TopToolbar, { table: table })),
+        React.createElement(MRT_TableContainer, { table: table }), (_b = (enableBottomToolbar && (renderBottomToolbar === null || renderBottomToolbar === void 0 ? void 0 : renderBottomToolbar({ table })))) !== null && _b !== void 0 ? _b : (React.createElement(MRT_BottomToolbar, { table: table }))));
 };
 
 const MRT_EditRowModal = ({ open, row, table, }) => {