material-react-table 2.5.0 → 2.5.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.5.0",
+  "version": "2.5.2",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -66,10 +66,10 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^8.3.1",
-    "@mui/icons-material": "^5.15.3",
-    "@mui/material": "^5.15.3",
-    "@mui/x-date-pickers": "^6.18.6",
-    "@rollup/plugin-typescript": "^11.1.5",
+    "@mui/icons-material": "^5.15.4",
+    "@mui/material": "^5.15.4",
+    "@mui/x-date-pickers": "^6.18.7",
+    "@rollup/plugin-typescript": "^11.1.6",
     "@size-limit/preset-small-lib": "^11.0.1",
     "@storybook/addon-a11y": "^7.6.7",
     "@storybook/addon-essentials": "^7.6.7",
@@ -80,11 +80,11 @@
     "@storybook/react": "^7.6.7",
     "@storybook/react-vite": "^7.6.7",
     "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20.10.6",
-    "@types/react": "^18.2.46",
+    "@types/node": "^20.10.8",
+    "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.17.0",
-    "@typescript-eslint/parser": "^6.17.0",
+    "@typescript-eslint/eslint-plugin": "^6.18.1",
+    "@typescript-eslint/parser": "^6.18.1",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.56.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
@@ -101,7 +101,7 @@
     "storybook-dark-mode": "^3.0.3",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "vite": "^5.0.10"
+    "vite": "^5.0.11"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11",

package/src/body/MRT_TableBodyRow.tsx

@@ -74,6 +74,8 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
     columnVirtualizer ?? {};
 
   const isPinned = enableRowPinning && row.getIsPinned();
+  const isDraggingRow = draggingRow?.id === row.id;
+  const isHoveredRow = hoveredRow?.id === row.id;
 
   const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
     row,
@@ -132,7 +134,9 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
       <TableRow
         data-index={rowIndex}
         data-pinned={!!isPinned || undefined}
-        data-selected={row.getIsSelected() || undefined}
+        data-selected={
+          row.getIsSelected() || row.getIsAllSubRowsSelected() || undefined
+        }
         onDragEnter={handleDragEnter}
         ref={(node: HTMLTableRowElement) => {
           if (node) {
@@ -169,11 +173,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
               : undefined,
           boxSizing: 'border-box',
           display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
-          opacity: isPinned
-            ? 0.97
-            : draggingRow?.id === row.id || hoveredRow?.id === row.id
-              ? 0.5
-              : 1,
+          opacity: isPinned ? 0.97 : isDraggingRow || isHoveredRow ? 0.5 : 1,
           position: virtualRow
             ? 'absolute'
             : rowPinningDisplayMode?.includes('sticky') && isPinned
@@ -212,7 +212,10 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
             : (cellOrVirtualCell as MRT_Cell<TData>);
           const props = {
             cell,
-            measureElement: columnVirtualizer?.measureElement,
+            measureElement:
+              !isDraggingRow && !isHoveredRow
+                ? columnVirtualizer?.measureElement
+                : undefined,
             numRows,
             rowIndex,
             rowRef,

package/src/body/MRT_TableBodyRowGrabHandle.tsx

@@ -34,7 +34,11 @@ export const MRT_TableBodyRowGrabHandle = <TData extends MRT_RowData>({
 
   const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
     iconButtonProps?.onDragStart?.(event);
-    event.dataTransfer.setDragImage(rowRef.current as HTMLElement, 0, 0);
+    try {
+      event.dataTransfer.setDragImage(rowRef.current as HTMLElement, 0, 0);
+    } catch (e) {
+      console.error(e);
+    }
     table.setDraggingRow(row as any);
   };
 

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -139,6 +139,7 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
         }}
         onKeyDown={(event) => event.key === 'Enter' && setAnchorEl(null)}
         open={!!anchorEl}
+        slotProps={{ paper: { sx: { overflow: 'visible' } } }}
         transformOrigin={{
           horizontal: 'center',
           vertical: 'bottom',

package/src/head/MRT_TableHeadCellGrabHandle.tsx

@@ -42,11 +42,15 @@ export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({
   const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
     iconButtonProps?.onDragStart?.(event);
     setDraggingColumn(column);
-    event.dataTransfer.setDragImage(
-      tableHeadCellRef.current as HTMLElement,
-      0,
-      0,
-    );
+    try {
+      event.dataTransfer.setDragImage(
+        tableHeadCellRef.current as HTMLElement,
+        0,
+        0,
+      );
+    } catch (e) {
+      console.error(e);
+    }
   };
 
   const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {

package/src/inputs/MRT_FilterRangeSlider.tsx

@@ -102,6 +102,7 @@ export const MRT_FilterRangeSlider = <TData extends MRT_RowData>({
         }}
         sx={(theme) => ({
           m: 'auto',
+          minWidth: `${column.getSize() - 50}px`,
           mt: !showChangeModeButton ? '10px' : '6px',
           px: '4px',
           width: 'calc(100% - 8px)',

package/src/inputs/MRT_FilterTextField.tsx

@@ -353,7 +353,6 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
       }
     },
     margin: 'none',
-    onClick: (e: MouseEvent<HTMLInputElement>) => e.stopPropagation(),
     placeholder:
       filterChipLabel || isSelectFilter || isMultiSelectFilter
         ? undefined
@@ -459,6 +458,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
                 ...commonTextFieldProps?.inputProps,
               }}
               onChange={handleTextFieldChange}
+              onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
             />
           )}
           value={filterValue}
@@ -493,6 +493,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
             ...commonTextFieldProps.SelectProps,
           }}
           onChange={handleTextFieldChange}
+          onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
           value={filterValue ?? ''}
         >
           {(isSelectFilter || isMultiSelectFilter) && [

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -88,6 +88,9 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
   };
 
   const commonProps = {
+    'aria-label': selectAll
+      ? localization.toggleSelectAll
+      : localization.toggleSelectRow,
     checked: selectAll
       ? allRowsSelected
       : row?.getIsSelected() || row?.getIsAllSubRowsSelected(),

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -220,6 +220,11 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
         if (Array.isArray(currentFilterValue)) {
           column.setFilterValue('');
           setFilterValue?.('');
+        } else if (
+          currentFilterValue === ' ' &&
+          emptyModes.includes(prevFilterMode)
+        ) {
+          column.setFilterValue(undefined);
         } else {
           column.setFilterValue(currentFilterValue); // perform new filter render
         }

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -72,7 +72,11 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
 
   const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
     setIsDragging(true);
-    e.dataTransfer.setDragImage(menuItemRef.current as HTMLElement, 0, 0);
+    try {
+      e.dataTransfer.setDragImage(menuItemRef.current as HTMLElement, 0, 0);
+    } catch (e) {
+      console.error(e);
+    }
   };
 
   const handleDragEnd = (_e: DragEvent<HTMLButtonElement>) => {

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useMemo } from 'react';
 import Alert, { type AlertProps } from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
 import Box from '@mui/material/Box';
@@ -21,7 +21,6 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
 }: Props<TData>) => {
   const {
     getPrePaginationRowModel,
-    getSelectedRowModel,
     getState,
     options: {
       enableRowSelection,
@@ -35,7 +34,7 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
     },
     refs: { tablePaperRef },
   } = table;
-  const { density, grouping, showAlertBanner } = getState();
+  const { density, grouping, rowSelection, showAlertBanner } = getState();
 
   const alertProps = {
     ...parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
@@ -48,13 +47,15 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
     table,
   });
 
+  const selectedRowCount = useMemo(
+    () => Object.values(rowSelection).filter(Boolean).length,
+    [rowSelection],
+  );
+
   const selectedAlert =
-    getSelectedRowModel().rows.length > 0
+    selectedRowCount > 0
       ? localization.selectedCountOfRowCountRowsSelected
-          ?.replace(
-            '{selectedCount}',
-            getSelectedRowModel().rows.length.toString(),
-          )
+          ?.replace('{selectedCount}', selectedRowCount.toLocaleString())
           ?.replace(
             '{rowCount}',
             (rowCount ?? getPrePaginationRowModel().rows.length).toString(),