material-react-table 0.35.2 → 0.36.0

package/dist/cjs/MaterialReactTable.d.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, Dispatch, DragEvent, FocusEvent, ReactNode, SetStateAction } from 'react';
+import { Dispatch, DragEvent, ReactNode, SetStateAction } from 'react';
 import type { AlertProps, ButtonProps, CheckboxProps, IconButtonProps, LinearProgressProps, PaperProps, SkeletonProps, TableBodyProps, TableCellProps, TableContainerProps, TableFooterProps, TableHeadProps, TablePaginationProps, TableProps, TableRowProps, TextFieldProps, ToolbarProps } from '@mui/material';
 import type { Cell, Column, ColumnDef, DeepKeys, FilterFn, Header, HeaderGroup, OnChangeFn, Row, SortingFn, Table, TableOptions, TableState } from '@tanstack/react-table';
 import type { Options as VirtualizerOptions } from 'react-virtual';
@@ -165,15 +165,15 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
      * @default gets set to the same value as `accessorKey` by default
      */
     id?: LiteralUnion<string & keyof TData>;
-    muiTableBodyCellCopyButtonProps?: ButtonProps | (({ table, cell, }: {
+    muiTableBodyCellCopyButtonProps?: ButtonProps | (({ cell, table, }: {
         table: MRT_TableInstance<TData>;
         cell: MRT_Cell<TData>;
     }) => ButtonProps);
-    muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ table, cell, }: {
-        table: MRT_TableInstance<TData>;
+    muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ cell, table, }: {
         cell: MRT_Cell<TData>;
+        table: MRT_TableInstance<TData>;
     }) => TextFieldProps);
-    muiTableBodyCellProps?: TableCellProps | (({ table, cell, }: {
+    muiTableBodyCellProps?: TableCellProps | (({ cell, table, }: {
         table: MRT_TableInstance<TData>;
         cell: MRT_Cell<TData>;
     }) => TableCellProps);
@@ -198,18 +198,6 @@ export declare type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
     }) => TableCellProps);
-    onCellEditBlur?: ({ cell, event, table, value, }: {
-        event: FocusEvent<HTMLInputElement>;
-        cell: MRT_Cell<TData>;
-        table: MRT_TableInstance<TData>;
-        value: string;
-    }) => void;
-    onCellEditChange?: ({ cell, event, table, value, }: {
-        event: ChangeEvent<HTMLInputElement>;
-        cell: MRT_Cell<TData>;
-        table: MRT_TableInstance<TData>;
-        value: string;
-    }) => void;
     sortingFn?: MRT_SortingFn;
 };
 export declare type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<MRT_ColumnDef<TData>, 'id'> & {
@@ -317,9 +305,9 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
         table: MRT_TableInstance<TData>;
         cell: MRT_Cell<TData>;
     }) => ButtonProps);
-    muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ table, cell, }: {
-        table: MRT_TableInstance<TData>;
+    muiTableBodyCellEditTextFieldProps?: TextFieldProps | (({ cell, table, }: {
         cell: MRT_Cell<TData>;
+        table: MRT_TableInstance<TData>;
     }) => TextFieldProps);
     muiTableBodyCellProps?: TableCellProps | (({ table, cell, }: {
         table: MRT_TableInstance<TData>;
@@ -400,18 +388,6 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     muiTableTopToolbarProps?: ToolbarProps | (({ table }: {
         table: MRT_TableInstance<TData>;
     }) => ToolbarProps);
-    onCellEditBlur?: ({ cell, event, table, value, }: {
-        event: FocusEvent<HTMLInputElement>;
-        cell: MRT_Cell<TData>;
-        table: MRT_TableInstance<TData>;
-        value: string;
-    }) => void;
-    onCellEditChange?: ({ cell, event, table, value, }: {
-        event: ChangeEvent<HTMLInputElement>;
-        cell: MRT_Cell<TData>;
-        table: MRT_TableInstance<TData>;
-        value: string;
-    }) => void;
     onColumnDrop?: ({ event, draggedColumn, targetColumn, }: {
         event: DragEvent<HTMLButtonElement>;
         draggedColumn: MRT_Column<TData>;

package/dist/cjs/index.js

@@ -1741,19 +1741,29 @@ const MRT_TableHead = ({ table }) => {
 
 const MRT_EditCellTextField = ({ cell, table }) => {
     var _a;
-    const { getState, options: { tableId, muiTableBodyCellEditTextFieldProps, onCellEditBlur, onCellEditChange, }, setEditingCell, setEditingRow, } = table;
+    const { getState, options: { tableId, muiTableBodyCellEditTextFieldProps }, setEditingCell, setEditingRow, } = table;
     const { column, row } = cell;
     const { columnDef } = column;
     const { editingRow } = getState();
     const [value, setValue] = React.useState(() => cell.getValue());
+    const mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function
+        ? muiTableBodyCellEditTextFieldProps({ cell, table })
+        : muiTableBodyCellEditTextFieldProps;
+    const mcTableBodyCellEditTextFieldProps = columnDef.muiTableBodyCellEditTextFieldProps instanceof Function
+        ? columnDef.muiTableBodyCellEditTextFieldProps({
+            cell,
+            table,
+        })
+        : columnDef.muiTableBodyCellEditTextFieldProps;
+    const textFieldProps = Object.assign(Object.assign({}, mTableBodyCellEditTextFieldProps), mcTableBodyCellEditTextFieldProps);
     const handleChange = (event) => {
         var _a;
+        (_a = textFieldProps.onChange) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
         setValue(event.target.value);
-        (_a = columnDef.onCellEditChange) === null || _a === void 0 ? void 0 : _a.call(columnDef, { event, cell, table, value });
-        onCellEditChange === null || onCellEditChange === void 0 ? void 0 : onCellEditChange({ event, cell, table, value });
     };
     const handleBlur = (event) => {
         var _a;
+        (_a = textFieldProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
         if (editingRow) {
             if (!row._valuesCache)
                 row._valuesCache = {};
@@ -1761,23 +1771,11 @@ const MRT_EditCellTextField = ({ cell, table }) => {
             setEditingRow(Object.assign({}, editingRow));
         }
         setEditingCell(null);
-        (_a = columnDef.onCellEditBlur) === null || _a === void 0 ? void 0 : _a.call(columnDef, { event, cell, table, value });
-        onCellEditBlur === null || onCellEditBlur === void 0 ? void 0 : onCellEditBlur({ event, cell, table, value });
     };
-    const mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function
-        ? muiTableBodyCellEditTextFieldProps({ cell, table })
-        : muiTableBodyCellEditTextFieldProps;
-    const mcTableBodyCellEditTextFieldProps = columnDef.muiTableBodyCellEditTextFieldProps instanceof Function
-        ? columnDef.muiTableBodyCellEditTextFieldProps({
-            cell,
-            table,
-        })
-        : columnDef.muiTableBodyCellEditTextFieldProps;
-    const textFieldProps = Object.assign(Object.assign({}, mTableBodyCellEditTextFieldProps), mcTableBodyCellEditTextFieldProps);
     if (columnDef.Edit) {
         return React__default["default"].createElement(React__default["default"].Fragment, null, (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, table }));
     }
-    return (React__default["default"].createElement(material.TextField, Object.assign({ id: `mrt-${tableId}-edit-cell-text-field-${cell.id}`, margin: "none", onBlur: handleBlur, onChange: handleChange, onClick: (e) => e.stopPropagation(), placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps)));
+    return (React__default["default"].createElement(material.TextField, Object.assign({ id: `mrt-${tableId}-edit-cell-text-field-${cell.id}`, margin: "none", onClick: (e) => e.stopPropagation(), placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps, { onBlur: handleBlur, onChange: handleChange })));
 };
 
 const MRT_CopyButton = ({ cell, children, table }) => {
@@ -1939,7 +1937,10 @@ const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
                     : column.getIsPinned()
                         ? 1
                         : undefined, '&:hover': {
-                    backgroundColor: enableHover && enableEditing && editingMode !== 'row'
+                    backgroundColor: enableHover &&
+                        enableEditing &&
+                        columnDef.enableEditing !== false &&
+                        editingMode !== 'row'
                         ? theme.palette.mode === 'dark'
                             ? `${material.lighten(theme.palette.background.default, 0.13)} !important`
                             : `${material.darken(theme.palette.background.default, 0.07)} !important`