material-react-table 1.9.0 → 1.9.2

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;
             });
@@ -2264,11 +2293,11 @@ const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table }) => {
 
 const allowedTypes = ['string', 'number'];
 const MRT_TableBodyCellValue = ({ cell, table }) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c;
     const { getState, options: { enableFilterMatchHighlighting }, } = table;
     const { column, row } = cell;
     const { columnDef } = column;
-    const { globalFilter } = getState();
+    const { globalFilter, globalFilterFn } = getState();
     const filterValue = column.getFilterValue();
     let renderedCellValue = cell.getIsAggregated() && columnDef.AggregatedCell
         ? columnDef.AggregatedCell({
@@ -2298,13 +2327,16 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
         ((filterValue &&
             allowedTypes.includes(typeof filterValue) &&
             columnDef.filterVariant === 'text') ||
-            (globalFilter && allowedTypes.includes(typeof globalFilter)))) {
+            (globalFilter &&
+                allowedTypes.includes(typeof globalFilter) &&
+                column.getCanGlobalFilter()))) {
         const chunks = highlightWords__default["default"] === null || highlightWords__default["default"] === void 0 ? void 0 : highlightWords__default["default"]({
             text: renderedCellValue === null || renderedCellValue === void 0 ? void 0 : renderedCellValue.toString(),
-            query: ((_b = (_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : globalFilter) !== null && _b !== void 0 ? _b : '').toString(),
+            query: ((_a = filterValue !== null && filterValue !== void 0 ? filterValue : globalFilter) !== null && _a !== void 0 ? _a : '').toString(),
+            matchExactly: (filterValue ? columnDef._filterFn : globalFilterFn) !== 'fuzzy',
         });
-        if ((chunks === null || chunks === void 0 ? void 0 : chunks.length) > 1 || ((_c = chunks === null || chunks === void 0 ? void 0 : chunks[0]) === null || _c === void 0 ? void 0 : _c.match)) {
-            renderedCellValue = (React__default["default"].createElement("span", { "aria-label": renderedCellValue, role: "note" }, (_d = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (React__default["default"].createElement(Box__default["default"], { "aria-hidden": "true", component: "span", key: key, sx: match
+        if ((chunks === null || chunks === void 0 ? void 0 : chunks.length) > 1 || ((_b = chunks === null || chunks === void 0 ? void 0 : chunks[0]) === null || _b === void 0 ? void 0 : _b.match)) {
+            renderedCellValue = (React__default["default"].createElement("span", { "aria-label": renderedCellValue, role: "note" }, (_c = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (React__default["default"].createElement(Box__default["default"], { "aria-hidden": "true", component: "span", key: key, sx: match
                     ? {
                         backgroundColor: (theme) => theme.palette.mode === 'dark'
                             ? styles.darken(theme.palette.warning.dark, 0.25)
@@ -2313,7 +2345,7 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
                         color: (theme) => theme.palette.mode === 'dark' ? 'white' : 'black',
                         padding: '2px 1px',
                     }
-                    : undefined }, text)))) !== null && _d !== void 0 ? _d : renderedCellValue));
+                    : undefined }, text)))) !== null && _c !== void 0 ? _c : renderedCellValue));
         }
     }
     if (columnDef.Cell && !isGroupedValue) {
@@ -2523,9 +2555,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)