material-react-table 1.8.5 → 1.9.1

package/dist/cjs/index.js

@@ -68,6 +68,7 @@ var Table = require('@mui/material/Table');
 var TableHead = require('@mui/material/TableHead');
 var TableRow = require('@mui/material/TableRow');
 var TableCell = require('@mui/material/TableCell');
+var Badge = require('@mui/material/Badge');
 var TableSortLabel = require('@mui/material/TableSortLabel');
 var TableBody = require('@mui/material/TableBody');
 var Skeleton = require('@mui/material/Skeleton');
@@ -141,6 +142,7 @@ var Table__default = /*#__PURE__*/_interopDefaultLegacy(Table);
 var TableHead__default = /*#__PURE__*/_interopDefaultLegacy(TableHead);
 var TableRow__default = /*#__PURE__*/_interopDefaultLegacy(TableRow);
 var TableCell__default = /*#__PURE__*/_interopDefaultLegacy(TableCell);
+var Badge__default = /*#__PURE__*/_interopDefaultLegacy(Badge);
 var TableSortLabel__default = /*#__PURE__*/_interopDefaultLegacy(TableSortLabel);
 var TableBody__default = /*#__PURE__*/_interopDefaultLegacy(TableBody);
 var Skeleton__default = /*#__PURE__*/_interopDefaultLegacy(Skeleton);
@@ -629,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;
@@ -644,38 +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)) {
-                if (currentFilterValue !== ' ') {
+            // 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();
     };
@@ -792,8 +821,9 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredCol
                 justifyContent: 'flex-start',
                 my: 0,
                 opacity: isDragging ? 0.5 : 1,
+                outlineOffset: '-2px',
                 outline: isDragging
-                    ? `1px dashed ${theme.palette.divider}`
+                    ? `2px dashed ${theme.palette.divider}`
                     : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
                         ? `2px dashed ${theme.palette.primary.main}`
                         : 'none',
@@ -1046,7 +1076,7 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
 const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) => {
     const { getState, options: { icons: { EditIcon }, enableEditing, localization, renderRowActionMenuItems, }, } = table;
     const { density } = getState();
-    return (React__default["default"].createElement(Menu__default["default"], { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
+    return (React__default["default"].createElement(Menu__default["default"], { anchorEl: anchorEl, open: !!anchorEl, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), MenuListProps: {
             dense: density === 'compact',
         } },
         enableEditing instanceof Function
@@ -1643,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;
             });
@@ -1909,7 +1939,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
             column.resetSize();
         }, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: (theme) => ({
             cursor: 'col-resize',
-            mr: density === 'compact' ? '-0.5rem' : '-1rem',
+            mr: density === 'compact' ? '-0.75rem' : '-1rem',
             position: 'absolute',
             right: '1px',
             px: '4px',
@@ -1936,28 +1966,30 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
 };
 
 const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
-    const { options: { icons: { ArrowDownwardIcon }, localization, }, } = table;
+    const { getState, options: { icons: { ArrowDownwardIcon }, localization, }, } = table;
     const { column } = header;
     const { columnDef } = column;
+    const { sorting } = getState();
     const sortTooltip = column.getIsSorted()
         ? column.getIsSorted() === 'desc'
             ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
             : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
         : localization.unsorted;
     return (React__default["default"].createElement(Tooltip__default["default"], { arrow: true, placement: "top", title: sortTooltip },
-        React__default["default"].createElement(TableSortLabel__default["default"], { "aria-label": sortTooltip, active: !!column.getIsSorted(), direction: column.getIsSorted()
-                ? column.getIsSorted()
-                : undefined, sx: {
-                flex: '0 0',
-                width: '2.3ch',
-                transform: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) !== 'right'
-                    ? 'translateX(-0.5ch)'
-                    : undefined,
-            }, IconComponent: ArrowDownwardIcon, onClick: (e) => {
-                var _a;
-                e.stopPropagation();
-                (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
-            } })));
+        React__default["default"].createElement(Badge__default["default"], { badgeContent: sorting.length > 1 ? column.getSortIndex() + 1 : 0, overlap: "circular" },
+            React__default["default"].createElement(TableSortLabel__default["default"], { "aria-label": sortTooltip, active: !!column.getIsSorted(), direction: column.getIsSorted()
+                    ? column.getIsSorted()
+                    : undefined, sx: {
+                    flex: '0 0',
+                    width: '2.4ch',
+                    transform: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) !== 'right'
+                        ? 'translateX(-0.5ch)'
+                        : undefined,
+                }, IconComponent: ArrowDownwardIcon, onClick: (e) => {
+                    var _a;
+                    e.stopPropagation();
+                    (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
+                } }))));
 };
 
 const MRT_TableHeadCell = ({ header, table }) => {
@@ -2077,9 +2109,13 @@ const MRT_TableHeadCell = ({ header, table }) => {
                         : undefined,
                 } },
                 React__default["default"].createElement(Box__default["default"], { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
+                        minWidth: '5ch',
                         overflow: columnDefType === 'data' ? 'hidden' : undefined,
                         textOverflow: 'ellipsis',
                         whiteSpace: ((_d = (_c = columnDef.header) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) < 20 ? 'nowrap' : 'normal',
+                        '&:hover': {
+                            textOverflow: 'clip',
+                        },
                     }, title: columnDefType === 'data' ? columnDef.header : undefined }, headerElement),
                 column.getCanSort() && (React__default["default"].createElement(MRT_TableHeadCellSortLabel, { header: header, table: table, tableCellProps: tableCellProps })),
                 column.getCanFilter() && (React__default["default"].createElement(MRT_TableHeadCellFilterLabel, { header: header, table: table }))),
@@ -2321,7 +2357,7 @@ const MRT_TableBodyCellValue = ({ cell, table }) => {
     return React__default["default"].createElement(React__default["default"].Fragment, null, renderedCellValue);
 };
 
-const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowIndex, rowRef, table, virtualCell, }) => {
+const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, table, virtualCell, }) => {
     var _a, _b, _c, _d;
     const theme = styles.useTheme();
     const { getState, options: { editingMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, layoutMode, muiTableBodyCellProps, muiTableBodyCellSkeletonProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
@@ -2435,37 +2471,36 @@ const MRT_TableBodyCell = ({ cell, enableHover, measureElement, numRows, rowInde
                             ? 0.75
                             : 1.25)}rem`
                 : undefined, textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, whiteSpace: density === 'compact' ? 'nowrap' : 'normal', zIndex: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id ? 2 : column.getIsPinned() ? 1 : 0, '&:hover': {
-                backgroundColor: enableHover &&
-                    isEditable &&
-                    ['table', 'cell'].includes(editingMode !== null && editingMode !== void 0 ? editingMode : '')
-                    ? theme.palette.mode === 'dark'
-                        ? `${styles.lighten(theme.palette.background.default, 0.2)} !important`
-                        : `${styles.darken(theme.palette.background.default, 0.1)} !important`
+                outline: ['table', 'cell'].includes(editingMode !== null && editingMode !== void 0 ? editingMode : '')
+                    ? `1px solid ${theme.palette.text.secondary}`
                     : undefined,
+                outlineOffset: '-1px',
+                textOverflow: 'clip',
             } }, getCommonCellStyles({
             column,
             table,
             theme,
             tableCellProps,
         })), draggingBorders)) }),
-        React__default["default"].createElement(React__default["default"].Fragment, null, cell.getIsPlaceholder() ? ((_b = (_a = columnDef.PlaceholderCell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : null) : isLoading || showSkeletons ? (React__default["default"].createElement(Skeleton__default["default"], Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
-            rowNumberMode === 'static' &&
-            column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (React__default["default"].createElement(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
-            (column.id === 'mrt-row-select' ||
-                column.id === 'mrt-row-expand' ||
-                !row.getIsGrouped()) ? ((_c = columnDef.Cell) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
-            cell,
-            renderedCellValue: cell.renderValue(),
-            column,
-            row,
-            table,
-        })) : isEditing ? (React__default["default"].createElement(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
-            columnDef.enableClickToCopy !== false ? (React__default["default"].createElement(MRT_CopyButton, { cell: cell, table: table },
-            React__default["default"].createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))) : (React__default["default"].createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))),
-        cell.getIsGrouped() && !columnDef.GroupedCell && (React__default["default"].createElement(React__default["default"].Fragment, null,
-            " (", (_d = row.subRows) === null || _d === void 0 ? void 0 :
-            _d.length,
-            ")"))));
+        React__default["default"].createElement(React__default["default"].Fragment, null,
+            cell.getIsPlaceholder() ? ((_b = (_a = columnDef.PlaceholderCell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : null) : isLoading || showSkeletons ? (React__default["default"].createElement(Skeleton__default["default"], Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
+                rowNumberMode === 'static' &&
+                column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (React__default["default"].createElement(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
+                (column.id === 'mrt-row-select' ||
+                    column.id === 'mrt-row-expand' ||
+                    !row.getIsGrouped()) ? ((_c = columnDef.Cell) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
+                cell,
+                renderedCellValue: cell.renderValue(),
+                column,
+                row,
+                table,
+            })) : isEditing ? (React__default["default"].createElement(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
+                columnDef.enableClickToCopy !== false ? (React__default["default"].createElement(MRT_CopyButton, { cell: cell, table: table },
+                React__default["default"].createElement(MRT_TableBodyCellValue, { cell: cell, table: table }))) : (React__default["default"].createElement(MRT_TableBodyCellValue, { cell: cell, table: table })),
+            cell.getIsGrouped() && !columnDef.GroupedCell && (React__default["default"].createElement(React__default["default"].Fragment, null,
+                " (", (_d = row.subRows) === null || _d === void 0 ? void 0 :
+                _d.length,
+                ")")))));
 };
 const Memo_MRT_TableBodyCell = React.memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
 
@@ -2496,7 +2531,7 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, table, virtualRow, }) => {
 };
 
 const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }) => {
-    const { getIsSomeColumnsPinned, getState, options: { enableRowOrdering, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, }, setHoveredRow, } = table;
+    const { getState, options: { enableRowOrdering, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, }, setHoveredRow, } = table;
     const { draggingColumn, draggingRow, editingCell, editingRow, hoveredRow } = getState();
     const tableRowProps = muiTableBodyRowProps instanceof Function
         ? muiTableBodyRowProps({ row, table })
@@ -2508,7 +2543,7 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
     };
     const rowRef = React.useRef(null);
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
-        React__default["default"].createElement(TableRow__default["default"], Object.assign({ "data-index": virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.index, hover: true, onDragEnter: handleDragEnter, selected: row.getIsSelected(), ref: (node) => {
+        React__default["default"].createElement(TableRow__default["default"], Object.assign({ "data-index": virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.index, onDragEnter: handleDragEnter, selected: row.getIsSelected(), ref: (node) => {
                 if (node) {
                     rowRef.current = node;
                     measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
@@ -2516,10 +2551,12 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
             } }, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.06), display: layoutMode === 'grid' ? 'flex' : 'table-row', opacity: (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id ? 0.5 : 1, position: virtualRow ? 'absolute' : undefined, top: virtualRow ? 0 : undefined, transform: virtualRow
                     ? `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 && getIsSomeColumnsPinned()
-                        ? theme.palette.mode === 'dark'
-                            ? `${styles.lighten(theme.palette.background.default, 0.12)}`
-                            : `${styles.darken(theme.palette.background.default, 0.05)}`
+                    backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false
+                        ? 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)
@@ -2531,7 +2568,6 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
                     : cellOrVirtualCell;
                 const props = {
                     cell,
-                    enableHover: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false,
                     key: cell.id,
                     measureElement: columnVirtualizer === null || columnVirtualizer === void 0 ? void 0 : columnVirtualizer.measureElement,
                     numRows,