release v3.0.0-beta.1 improve accessibility on display columns

KevinVandy · Sep 3, 2024 · 792222e · 792222e
1 parent d49a09c
commit 792222e
Show file tree

Hide file tree

Showing 13 changed files with 286 additions and 150 deletions.
diff --git a/apps/material-react-table-docs/examples/minimal/sandbox/src/TS.tsx b/apps/material-react-table-docs/examples/minimal/sandbox/src/TS.tsx
@@ -38,6 +38,7 @@ export const Example = () => {
   const table = useMaterialReactTable({
     columns,
     data, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
+    enableCellNavigation: false,
     enableColumnActions: false,
     enableColumnFilters: false,
     enablePagination: false,

diff --git a/apps/material-react-table-docs/package.json b/apps/material-react-table-docs/package.json
@@ -27,11 +27,11 @@
     "@mui/x-charts": "^7.15.0",
     "@mui/x-date-pickers": "^7.15.0",
     "@next/mdx": "^14.2.7",
-    "@tanstack/react-query": "^5.53.1",
+    "@tanstack/react-query": "^5.53.3",
     "@tanstack/react-table-devtools": "^8.20.5",
     "@types/mdx": "^2.0.13",
     "dayjs": "^1.11.13",
-    "export-to-csv": "^1.3.0",
+    "export-to-csv": "^1.4.0",
     "jspdf": "^2.5.1",
     "jspdf-autotable": "^3.8.3",
     "material-react-table": "workspace:*",
@@ -44,11 +44,11 @@
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^5.53.0",
-    "@types/node": "^22.5.1",
+    "@types/node": "^22.5.2",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.3.0",
-    "@typescript-eslint/parser": "^8.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.4.0",
+    "@typescript-eslint/parser": "^8.4.0",
     "eslint": "9.9.1",
     "eslint-config-next": "14.2.7",
     "next-plausible": "^3.12.2",

diff --git a/apps/material-react-table-docs/pages/docs/getting-started/migrating-to-v3.mdx b/apps/material-react-table-docs/pages/docs/getting-started/migrating-to-v3.mdx
@@ -69,7 +69,6 @@ You should now be on Material React Table V3! Look for any code or type errors i
   - `muiFilterSliderProps`
   - `muiFilterTextFieldProps`
   - `muiFilterTimePickerProps`
-  - `muiSkeletonProps`
   - `muiTableBodyCellProps`
   - `muiTableHeadCellProps`
   - `renderCellActionMenuItems`

diff --git a/apps/test-vite/package.json b/apps/test-vite/package.json
@@ -22,8 +22,8 @@
   "devDependencies": {
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.3.0",
-    "@typescript-eslint/parser": "^8.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.4.0",
+    "@typescript-eslint/parser": "^8.4.0",
     "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^9.9.1",
     "eslint-plugin-react-hooks": "^4.6.2",

diff --git a/packages/material-react-table/package.json b/packages/material-react-table/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "3.0.0-beta.0",
+  "version": "3.0.0-beta.1",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V6 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -35,11 +35,11 @@
   "size-limit": [
     {
       "path": "dist/index.js",
-      "limit": "53 KB"
+      "limit": "55 KB"
     },
     {
       "path": "dist/index.esm.js",
-      "limit": "50 KB"
+      "limit": "51 KB"
     }
   ],
   "engines": {
@@ -78,11 +78,11 @@
     "@storybook/preview-api": "^8.2.9",
     "@storybook/react": "^8.2.9",
     "@storybook/react-vite": "^8.2.9",
-    "@types/node": "^22.5.1",
+    "@types/node": "^22.5.2",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.3.0",
-    "@typescript-eslint/parser": "^8.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.4.0",
+    "@typescript-eslint/parser": "^8.4.0",
     "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^9.9.1",
     "eslint-plugin-mui-path-imports": "^0.0.15",

diff --git a/packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx b/packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx
@@ -234,7 +234,12 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
     if (enableCellNavigation) {
-      cellNavigation({ event, cellValue: cell.getValue<string>() });
+      cellNavigation({
+        cell,
+        cellValue: cell.getValue<string>(),
+        event,
+        table,
+      });
     }
     tableCellProps?.onKeyDown?.(event);
   };

diff --git a/packages/material-react-table/src/components/footer/MRT_TableFooterCell.tsx b/packages/material-react-table/src/components/footer/MRT_TableFooterCell.tsx
@@ -50,7 +50,11 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
     if (enableCellNavigation) {
-      cellNavigation({ event, cellValue: footer.column.footer });
+      cellNavigation({
+        event,
+        cellValue: footer.column.columnDef.footer,
+        table,
+      });
     }
     tableCellProps?.onKeyDown?.(event);
   };

diff --git a/packages/material-react-table/src/components/head/MRT_TableHeadCell.tsx b/packages/material-react-table/src/components/head/MRT_TableHeadCell.tsx
@@ -151,7 +151,12 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLTableCellElement>) => {
     if (enableCellNavigation) {
-      cellNavigation({ event, cellValue: header.column.header });
+      cellNavigation({
+        event,
+        cellValue: header.column.columnDef.header,
+        table,
+        header,
+      });
     }
     tableCellProps?.onKeyDown?.(event);
   };

diff --git a/packages/material-react-table/src/components/inputs/MRT_FilterTextField.tsx b/packages/material-react-table/src/components/inputs/MRT_FilterTextField.tsx
@@ -338,6 +338,10 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
         : filterPlaceholder,
     variant: 'standard',
     ...textFieldProps,
+    onKeyDown: (e) => {
+      e.stopPropagation();
+      textFieldProps.onKeyDown?.(e);
+    },
     sx: (theme) => ({
       minWidth: isDateFilter
         ? '160px'

diff --git a/packages/material-react-table/src/types.ts b/packages/material-react-table/src/types.ts
@@ -1099,9 +1099,6 @@ export interface MRT_TableOptions<TData extends MRT_RowData>
         table: MRT_TableInstance<TData>;
       }) => CheckboxProps | RadioProps)
     | (CheckboxProps | RadioProps);
-  /**
-   * @deprecated Specify this in the `defaultColumn` table option instead if you want to apply to all columns.
-   */
   muiSkeletonProps?:
     | ((props: {
         cell: MRT_Cell<TData>;

diff --git a/packages/material-react-table/src/utils/cell.utils.ts b/packages/material-react-table/src/utils/cell.utils.ts
@@ -1,8 +1,13 @@
 import {
+  MRT_Header,
   type MRT_Cell,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
+import {
+  getMRT_RowSelectionHandler,
+  getMRT_SelectAllHandler,
+} from './row.utils';
 import { parseFromValuesOrFunc } from './utils';
 
 export const isCellEditable = <TData extends MRT_RowData>({
@@ -49,23 +54,65 @@ export const openEditingCell = <TData extends MRT_RowData>({
   }
 };
 
-export const cellNavigation = ({
+export const cellNavigation = <TData extends MRT_RowData = MRT_RowData>({
+  cell,
   cellElements,
   cellValue,
   containerElement,
   event,
+  header,
   parentElement,
+  table,
 }: {
-  cellElements?: Array<HTMLTableCellElement | HTMLDivElement>;
+  cell?: MRT_Cell<TData>;
+  header?: MRT_Header<TData>;
+  cellElements?: Array<HTMLTableCellElement>;
   cellValue?: string;
-  containerElement?: HTMLDivElement | HTMLTableElement;
-  event: React.KeyboardEvent<HTMLTableCellElement | HTMLDivElement>;
-  parentElement?: HTMLTableRowElement | HTMLDivElement;
+  containerElement?: HTMLTableElement;
+  event: React.KeyboardEvent<HTMLTableCellElement>;
+  parentElement?: HTMLTableRowElement;
+  table: MRT_TableInstance<TData>;
 }) => {
   if (cellValue && (event.ctrlKey || event.metaKey) && event.key === 'c') {
     navigator.clipboard.writeText(cellValue);
-  }
-  if (
+  } else if (['Enter', ' '].includes(event.key)) {
+    if (cell?.column?.id === 'mrt-row-select') {
+      getMRT_RowSelectionHandler({
+        row: cell.row,
+        table,
+        //@ts-ignore
+        staticRowIndex: +event.target.getAttribute('data-index'),
+      })(event as any);
+    } else if (
+      header?.column?.id === 'mrt-row-select' &&
+      table.options.enableSelectAll
+    ) {
+      getMRT_SelectAllHandler({
+        table,
+      })(event as any);
+    } else if (
+      cell?.column?.id === 'mrt-row-expand' &&
+      (cell.row.getCanExpand() ||
+        table.options.renderDetailPanel?.({ row: cell.row, table }))
+    ) {
+      cell.row.toggleExpanded();
+    } else if (
+      header?.column?.id === 'mrt-row-expand' &&
+      table.options.enableExpandAll
+    ) {
+      table.toggleAllRowsExpanded();
+    } else if (header?.column?.getCanSort()) {
+      header.column.toggleSorting();
+    } else if (cell?.column.id === 'mrt-row-pin') {
+      cell.row.getIsPinned()
+        ? cell.row.pin(false)
+        : cell.row.pin(
+            table.options.rowPinningDisplayMode?.includes('bottom')
+              ? 'bottom'
+              : 'top',
+          );
+    }
+  } else if (
     ['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(
       event.key,
     )

diff --git a/packages/material-react-table/stories/features/Selection.stories.tsx b/packages/material-react-table/stories/features/Selection.stories.tsx
@@ -54,6 +54,15 @@ export const SelectionEnabled = () => (
   />
 );
 
+export const DisableSelectAll = () => (
+  <MaterialReactTable
+    columns={columns}
+    data={data}
+    enableSelectAll={false}
+    enableRowSelection
+  />
+);
+
 export const SelectionEnabledGrid = () => (
   <MaterialReactTable
     columns={columns}