material-react-table 1.9.0 → 1.9.1

package/dist/cjs/index.js

@@ -631,6 +631,9 @@ const mrtFilterOptions = (localization) => [
         divider: false,
     },
 ];
+const rangeModes = ['between', 'betweenInclusive', 'inNumberRange'];
+const emptyModes = ['empty', 'notEmpty'];
+const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
 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;
@@ -646,36 +649,62 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
             globalFilterModeOptions.includes(filterOption.option)) &&
             ['fuzzy', 'contains', 'startsWith'].includes(filterOption.option)), []);
     const handleSelectFilterMode = (option) => {
-        if (header && column) {
+        var _a;
+        const prevFilterMode = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef._filterFn) !== null && _a !== void 0 ? _a : '';
+        if (!header || !column) {
+            // global filter mode
+            setGlobalFilterFn(option);
+        }
+        else if (option !== prevFilterMode) {
+            // column filter mode
             setColumnFilterFns((prev) => (Object.assign(Object.assign({}, prev), { [header.id]: option })));
-            if (['empty', 'notEmpty'].includes(option)) {
-                column.setFilterValue(' ');
+            // reset filter value and/or perform new filter render
+            if (emptyModes.includes(option)) {
+                // will now be empty/notEmpty filter mode
+                if (currentFilterValue !== ' ' &&
+                    !emptyModes.includes(prevFilterMode)) {
+                    column.setFilterValue(' ');
+                }
+                else if (currentFilterValue) {
+                    column.setFilterValue(currentFilterValue); // perform new filter render
+                }
             }
             else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'multi-select' ||
-                ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'].includes(option)) {
+                arrModes.includes(option)) {
+                // will now be array filter mode
                 if (currentFilterValue instanceof String ||
                     (currentFilterValue === null || currentFilterValue === void 0 ? void 0 : currentFilterValue.length)) {
                     column.setFilterValue([]);
                     setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue([]);
                 }
+                else if (currentFilterValue) {
+                    column.setFilterValue(currentFilterValue); // perform new filter render
+                }
             }
             else if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'range' ||
-                ['between', 'betweenInclusive', 'inNumberRange'].includes(option)) {
-                if (!(currentFilterValue === null || currentFilterValue === void 0 ? void 0 : currentFilterValue.every((v) => v === ''))) {
+                rangeModes.includes(option)) {
+                // will now be range filter mode
+                if (!Array.isArray(currentFilterValue) ||
+                    (!(currentFilterValue === null || currentFilterValue === void 0 ? void 0 : currentFilterValue.every((v) => v === '')) &&
+                        !rangeModes.includes(prevFilterMode))) {
                     column.setFilterValue(['', '']);
                     setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
                 }
+                else {
+                    column.setFilterValue(currentFilterValue); // perform new filter render
+                }
             }
             else {
-                if (!['', undefined].includes(currentFilterValue)) {
+                // will now be single value filter mode
+                if (Array.isArray(currentFilterValue)) {
                     column.setFilterValue('');
                     setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
                 }
+                else {
+                    column.setFilterValue(currentFilterValue); // perform new filter render
+                }
             }
         }
-        else {
-            setGlobalFilterFn(option);
-        }
         setAnchorEl(null);
         onSelect === null || onSelect === void 0 ? void 0 : onSelect();
     };
@@ -1644,7 +1673,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
         else if (isRangeFilter) {
             setFilterValue('');
             column.setFilterValue((old) => {
-                const newFilterValues = old !== null && old !== void 0 ? old : ['', ''];
+                const newFilterValues = (Array.isArray(old) && old) || ['', ''];
                 newFilterValues[rangeFilterIndex] = undefined;
                 return newFilterValues;
             });
@@ -2523,9 +2552,11 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
                     ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
                     : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', width: '100%', '&:hover td': {
                     backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false
-                        ? theme.palette.mode === 'dark'
-                            ? `${styles.lighten(theme.palette.background.default, 0.12)}`
-                            : `${styles.darken(theme.palette.background.default, 0.05)}`
+                        ? row.getIsSelected()
+                            ? `${styles.alpha(theme.palette.primary.main, 0.2)}`
+                            : theme.palette.mode === 'dark'
+                                ? `${styles.lighten(theme.palette.background.default, 0.12)}`
+                                : `${styles.darken(theme.palette.background.default, 0.05)}`
                         : undefined,
                 } }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
                 ? tableRowProps.sx(theme)