material-react-table-narender 2.13.4 → 2.13.6

package/dist/index.d.ts

@@ -233,6 +233,9 @@ declare const MRT_Default_Icons: {
     readonly VisibilityOffIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
         muiName: string;
     };
+    readonly SettingsBackupRestoreIcon: _mui_material_OverridableComponent.OverridableComponent<_mui_material.SvgIconTypeMap<{}, "svg">> & {
+        muiName: string;
+    };
 };
 type MRT_Icons = Record<keyof typeof MRT_Default_Icons, any>;
 

package/dist/index.esm.js

@@ -48,9 +48,10 @@ import SortIcon from '@mui/icons-material/Sort';
 import SyncAltIcon from '@mui/icons-material/SyncAlt';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import SettingsBackupRestoreIcon from '@mui/icons-material/SettingsBackupRestore';
 import { defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
 import Paper from '@mui/material/Paper';
-import { useTheme as useTheme$1 } from '@mui/material';
+import { Button as Button$1, useTheme as useTheme$1 } from '@mui/material';
 import TableContainer from '@mui/material/TableContainer';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -435,6 +436,7 @@ const openEditingCell = ({ cell, table, }) => {
 };
 const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement, event, header, parentElement, table, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
+    debugger;
     if (!table.options.enableKeyboardShortcuts)
         return;
     if (event.isPropagationStopped())
@@ -501,6 +503,16 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
         'PageDown',
     ].includes(event.key)) {
         event.preventDefault();
+        if (['ArrowDown'].includes(event.key)) {
+            debugger; // This will pause execution for debugging purposes
+            // Select the input element within the MUI Autocomplete component
+            const autocomplete = currentCell.querySelector('.MuiAutocomplete-root input[type="text"]');
+            // Check if the current cell is an MUI Autocomplete
+            if (autocomplete) {
+                return; // Exit the function if it's an Autocomplete
+            }
+            // Additional logic for when it's not an Autocomplete can go here
+        }
         const currentRow = parentElement || currentCell.closest('tr');
         const tableElement = containerElement || currentCell.closest('table');
         const allCells = cellElements ||
@@ -1269,6 +1281,7 @@ const MRT_Default_Icons = {
     SyncAltIcon,
     ViewColumnIcon,
     VisibilityOffIcon,
+    SettingsBackupRestoreIcon
 };
 
 const MRT_Localization_EN = {
@@ -2217,7 +2230,17 @@ const MRT_TableBodyCell = (_a) => {
             table.refs.actionCellRef.current = e.currentTarget;
         }
     };
-    return (jsx(TableCell, Object.assign({ align: theme.direction === 'rtl' ? 'right' : 'left', "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, tabIndex: enableKeyboardShortcuts ? 0 : undefined }, tableCellProps, { onContextMenu: handleContextMenu, onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, onDragOver: handleDragOver, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
+    const handleKeyDown = (event) => {
+        var _a;
+        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
+        cellKeyboardShortcuts({
+            cell,
+            cellValue: cell.getValue(),
+            event,
+            table,
+        });
+    };
+    return (jsx(TableCell, Object.assign({ align: theme.direction === 'rtl' ? 'right' : 'left', "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, tabIndex: enableKeyboardShortcuts ? 0 : undefined }, tableCellProps, { onKeyDown: handleKeyDown, onContextMenu: handleContextMenu, onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, onDragOver: handleDragOver, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
                 outline: (actionCell === null || actionCell === void 0 ? void 0 : actionCell.id) === cell.id ||
                     (editDisplayMode === 'cell' && isEditable) ||
                     (editDisplayMode === 'table' && (isCreating || isEditing))
@@ -2487,11 +2510,20 @@ const MRT_TableFooterCell = (_a) => {
         column.getIsPinned();
     const args = { column, table };
     const tableCellProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterCellProps, args)), parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, args)), rest);
+    const handleKeyDown = (event) => {
+        var _a;
+        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
+        cellKeyboardShortcuts({
+            event,
+            cellValue: footer.column.columnDef.footer,
+            table,
+        });
+    };
     return (jsx(TableCell, Object.assign({ align: columnDefType === 'group'
             ? 'center'
             : theme.direction === 'rtl'
                 ? 'right'
-                : 'left', colSpan: footer.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, tabIndex: enableKeyboardShortcuts ? 0 : undefined, variant: "footer" }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ fontWeight: 'bold', p: density === 'compact'
+                : 'left', colSpan: footer.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, tabIndex: enableKeyboardShortcuts ? 0 : undefined, variant: "footer" }, tableCellProps, { onKeyDown: handleKeyDown, sx: (theme) => (Object.assign(Object.assign({ fontWeight: 'bold', p: density === 'compact'
                 ? '0.5rem'
                 : density === 'comfortable'
                     ? '1rem'
@@ -3476,6 +3508,16 @@ const MRT_TableHeadCell = (_a) => {
             e.preventDefault();
         }
     };
+    const handleKeyDown = (event) => {
+        var _a;
+        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
+        cellKeyboardShortcuts({
+            event,
+            cellValue: header.column.columnDef.header,
+            table,
+            header,
+        });
+    };
     const HeaderElement = (_b = parseFromValuesOrFunc(columnDef.Header, {
         column,
         header,
@@ -3497,7 +3539,7 @@ const MRT_TableHeadCell = (_a) => {
                     (_a = columnVirtualizer === null || columnVirtualizer === void 0 ? void 0 : columnVirtualizer.measureElement) === null || _a === void 0 ? void 0 : _a.call(columnVirtualizer, node);
                 }
             }
-        } }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ '& :hover': {
+        } }, tableCellProps, { onKeyDown: handleKeyDown, sx: (theme) => (Object.assign(Object.assign({ '& :hover': {
                 '.MuiButtonBase-root': {
                     opacity: 1,
                 },
@@ -3962,7 +4004,7 @@ const MRT_ColumnPinningButtons = (_a) => {
 const MRT_ShowHideColumnsMenuItems = (_a) => {
     var _b;
     var { allColumns, column, hoveredColumn, isNestedColumns, setHoveredColumn, table } = _a, rest = __rest(_a, ["allColumns", "column", "hoveredColumn", "isNestedColumns", "setHoveredColumn", "table"]);
-    const { getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { draggingBorderColor }, }, setColumnOrder, } = table;
+    const { getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, enableColumnResizing, mrtTheme: { draggingBorderColor }, icons: { SettingsBackupRestoreIcon }, }, setColumnOrder, } = table;
     const { columnOrder } = getState();
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -4023,12 +4065,15 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
                                         opacity: columnDefType !== 'display' ? 1 : 0.5,
                                     },
                                 },
-                            }, control: jsx(Tooltip, Object.assign({}, getCommonTooltipProps(), { title: localization.toggleVisibility, children: jsx(Switch, {}) })), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (jsx(Typography, { sx: { alignSelf: 'center' }, children: columnDef.header }))] }) })), (_b = column.columns) === null || _b === void 0 ? void 0 : _b.map((c, i) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, isNestedColumns: isNestedColumns, setHoveredColumn: setHoveredColumn, table: table }, `${i}-${c.id}`)))] }));
+                            }, control: jsx(Tooltip, Object.assign({}, getCommonTooltipProps(), { title: localization.toggleVisibility, children: jsx(Switch, {}) })), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (jsx(Typography, { sx: { alignSelf: 'center' }, children: columnDef.header })), enableColumnResizing && columnDefType !== 'group' &&
+                            (columnDef.enableResizing !== false ? (jsx(Tooltip, Object.assign({}, getCommonTooltipProps(), { title: localization.resetColumnSize, children: jsx(Button$1, { onClick: () => {
+                                        column.resetSize();
+                                    }, children: jsx(SettingsBackupRestoreIcon, {}) }) }))) : (jsx(Box, { sx: { width: '28px' } })))] }) })), (_b = column.columns) === null || _b === void 0 ? void 0 : _b.map((c, i) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, isNestedColumns: isNestedColumns, setHoveredColumn: setHoveredColumn, table: table }, `${i}-${c.id}`)))] }));
 };
 
 const MRT_ShowHideColumnsMenu = (_a) => {
     var { anchorEl, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "setAnchorEl", "table"]);
-    const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { menuBackgroundColor }, }, } = table;
+    const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, enableColumnResizing, mrtTheme: { menuBackgroundColor }, }, } = table;
     const { columnOrder, columnPinning, density } = getState();
     const handleToggleAllColumns = (value) => {
         getAllLeafColumns()
@@ -4066,7 +4111,9 @@ const MRT_ShowHideColumnsMenu = (_a) => {
                     justifyContent: 'space-between',
                     p: '0.5rem',
                     pt: 0,
-                }, children: [enableHiding && (jsx(Button, { disabled: !getIsSomeColumnsVisible(), onClick: () => handleToggleAllColumns(false), children: localization.hideAll })), enableColumnOrdering && (jsx(Button, { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options, true)), children: localization.resetOrder })), enableColumnPinning && (jsx(Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsx(Button, { disabled: getIsAllColumnsVisible(), onClick: () => handleToggleAllColumns(true), children: localization.showAll }))] }), jsx(Divider, {}), allColumns.map((column, index) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, isNestedColumns: isNestedColumns, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] })));
+                }, children: [enableHiding && (jsx(Button, { disabled: !getIsSomeColumnsVisible(), onClick: () => handleToggleAllColumns(false), children: localization.hideAll })), enableColumnOrdering && (jsx(Button, { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options, true)), children: localization.resetOrder })), enableColumnPinning && (jsx(Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsx(Button, { disabled: getIsAllColumnsVisible(), onClick: () => handleToggleAllColumns(true), children: localization.showAll })), enableColumnResizing && (jsx(Button, { onClick: () => {
+                            table.resetColumnSizing(true);
+                        }, children: localization.resetColumnSize }))] }), jsx(Divider, {}), allColumns.map((column, index) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, isNestedColumns: isNestedColumns, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] })));
 };
 
 const MRT_ShowHideColumnsButton = (_a) => {
@@ -4275,6 +4322,7 @@ const MRT_TablePaper = (_a) => {
 const isTableInstanceProp = (props) => props.table !== undefined;
 const MaterialReactTable = (props) => {
     let table;
+    debugger;
     if (isTableInstanceProp(props)) {
         table = props.table;
     }