material-react-table 3.0.0-beta.0 → 3.0.0-beta.2

package/dist/index.js

@@ -325,6 +325,20 @@ const createRow = (table, originalRow, rowIndex = -1, depth = 0, subRows, parent
     [getColumnId(col)]: '',
 }))), rowIndex, depth, subRows, parentId);
 
+const fuzzy$1 = (rowA, rowB, columnId) => {
+    let dir = 0;
+    if (rowA.columnFiltersMeta[columnId]) {
+        dir = matchSorterUtils.compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
+    }
+    // Provide a fallback for when the item ranks are equal
+    return dir === 0
+        ? reactTable.sortingFns.alphanumeric(rowA, rowB, columnId)
+        : dir;
+};
+const MRT_SortingFns = Object.assign(Object.assign({}, reactTable.sortingFns), { fuzzy: fuzzy$1 });
+const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) -
+    Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
+
 const parseFromValuesOrFunc = (fn, arg) => (fn instanceof Function ? fn(arg) : fn);
 const getValueAndLabel = (option) => {
     var _a, _b;
@@ -343,161 +357,6 @@ const getValueAndLabel = (option) => {
     return { label, value };
 };
 
-const isCellEditable = ({ cell, table, }) => {
-    const { enableEditing } = table.options;
-    const { column: { columnDef }, row, } = cell;
-    return (!cell.getIsPlaceholder() &&
-        parseFromValuesOrFunc(enableEditing, row) &&
-        parseFromValuesOrFunc(columnDef.enableEditing, row) !== false);
-};
-const openEditingCell = ({ cell, table, }) => {
-    const { options: { editDisplayMode }, refs: { editInputRefs }, } = table;
-    const { column } = cell;
-    if (isCellEditable({ cell, table }) && editDisplayMode === 'cell') {
-        table.setEditingCell(cell);
-        queueMicrotask(() => {
-            var _a;
-            const textField = editInputRefs.current[column.id];
-            if (textField) {
-                textField.focus();
-                (_a = textField.select) === null || _a === void 0 ? void 0 : _a.call(textField);
-            }
-        });
-    }
-};
-const cellNavigation = (e) => {
-    if (['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown', 'Home', 'End'].includes(e.key)) {
-        e.preventDefault();
-        const currentCell = e.currentTarget;
-        const currentRow = currentCell.closest('tr');
-        const tableElement = currentCell.closest('table');
-        const allCells = Array.from((tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll('th, td')) || []);
-        const currentCellIndex = allCells.indexOf(currentCell);
-        const currentIndex = parseInt(currentCell.getAttribute('data-index') || '0');
-        let nextCell = undefined;
-        //home/end first or last cell in row
-        const findEdgeCell = (rowIndex, edge) => {
-            var _a, _b, _c;
-            const row = rowIndex === 'c'
-                ? currentRow
-                : rowIndex === 'f'
-                    ? (_a = currentCell.closest('table')) === null || _a === void 0 ? void 0 : _a.querySelector('tr')
-                    : (_c = (_b = currentCell.closest('table')) === null || _b === void 0 ? void 0 : _b.lastElementChild) === null || _c === void 0 ? void 0 : _c.lastElementChild;
-            const rowCells = Array.from((row === null || row === void 0 ? void 0 : row.children) || []);
-            const targetCell = edge === 'f' ? rowCells[0] : rowCells[rowCells.length - 1];
-            return targetCell;
-        };
-        const findAdjacentCell = (columnIndex, searchDirection) => {
-            const searchArray = searchDirection === 'f'
-                ? allCells.slice(currentCellIndex + 1)
-                : allCells.slice(0, currentCellIndex).reverse();
-            return searchArray.find((cell) => cell.matches(`[data-index="${columnIndex}"]`));
-        };
-        switch (e.key) {
-            case 'ArrowRight':
-                nextCell = findAdjacentCell(currentIndex + 1, 'f');
-                break;
-            case 'ArrowLeft':
-                nextCell = findAdjacentCell(currentIndex - 1, 'b');
-                break;
-            case 'ArrowUp':
-                nextCell = findAdjacentCell(currentIndex, 'b');
-                break;
-            case 'ArrowDown':
-                nextCell = findAdjacentCell(currentIndex, 'f');
-                break;
-            case 'Home':
-                nextCell = findEdgeCell(e.ctrlKey ? 'f' : 'c', 'f');
-                break;
-            case 'End':
-                nextCell = findEdgeCell(e.ctrlKey ? 'l' : 'c', 'l');
-                break;
-        }
-        if (nextCell) {
-            nextCell.focus();
-        }
-    }
-};
-
-function defaultDisplayColumnProps({ header, id, size, tableOptions, }) {
-    const { defaultDisplayColumn, displayColumnDefOptions, localization } = tableOptions;
-    return Object.assign(Object.assign(Object.assign(Object.assign({}, defaultDisplayColumn), { header: header ? localization[header] : '', size }), displayColumnDefOptions === null || displayColumnDefOptions === void 0 ? void 0 : displayColumnDefOptions[id]), { id });
-}
-const showRowPinningColumn = (tableOptions) => {
-    const { enableRowPinning, rowPinningDisplayMode } = tableOptions;
-    return !!(enableRowPinning && !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.startsWith('select')));
-};
-const showRowDragColumn = (tableOptions) => {
-    const { enableRowDragging, enableRowOrdering } = tableOptions;
-    return !!(enableRowDragging || enableRowOrdering);
-};
-const showRowExpandColumn = (tableOptions) => {
-    const { enableExpanding, enableGrouping, renderDetailPanel, state: { grouping }, } = tableOptions;
-    return !!(enableExpanding ||
-        (enableGrouping && (grouping === null || grouping === void 0 ? void 0 : grouping.length)) ||
-        renderDetailPanel);
-};
-const showRowActionsColumn = (tableOptions) => {
-    const { createDisplayMode, editDisplayMode, enableEditing, enableRowActions, state: { creatingRow }, } = tableOptions;
-    return !!(enableRowActions ||
-        (creatingRow && createDisplayMode === 'row') ||
-        (enableEditing && ['modal', 'row'].includes(editDisplayMode !== null && editDisplayMode !== void 0 ? editDisplayMode : '')));
-};
-const showRowSelectionColumn = (tableOptions) => !!tableOptions.enableRowSelection;
-const showRowNumbersColumn = (tableOptions) => !!tableOptions.enableRowNumbers;
-const showRowSpacerColumn = (tableOptions) => tableOptions.layoutMode === 'grid-no-grow';
-const getLeadingDisplayColumnIds = (tableOptions) => [
-    showRowPinningColumn(tableOptions) && 'mrt-row-pin',
-    showRowDragColumn(tableOptions) && 'mrt-row-drag',
-    tableOptions.positionActionsColumn === 'first' &&
-        showRowActionsColumn(tableOptions) &&
-        'mrt-row-actions',
-    tableOptions.positionExpandColumn === 'first' &&
-        showRowExpandColumn(tableOptions) &&
-        'mrt-row-expand',
-    showRowSelectionColumn(tableOptions) && 'mrt-row-select',
-    showRowNumbersColumn(tableOptions) && 'mrt-row-numbers',
-].filter(Boolean);
-const getTrailingDisplayColumnIds = (tableOptions) => [
-    tableOptions.positionActionsColumn === 'last' &&
-        showRowActionsColumn(tableOptions) &&
-        'mrt-row-actions',
-    tableOptions.positionExpandColumn === 'last' &&
-        showRowExpandColumn(tableOptions) &&
-        'mrt-row-expand',
-    showRowSpacerColumn(tableOptions) && 'mrt-row-spacer',
-].filter(Boolean);
-const getDefaultColumnOrderIds = (tableOptions, reset = false) => {
-    const { state: { columnOrder: currentColumnOrderIds = [] }, } = tableOptions;
-    const leadingDisplayColIds = getLeadingDisplayColumnIds(tableOptions);
-    const trailingDisplayColIds = getTrailingDisplayColumnIds(tableOptions);
-    const defaultColumnDefIds = getAllLeafColumnDefs(tableOptions.columns).map((columnDef) => getColumnId(columnDef));
-    let allLeafColumnDefIds = reset
-        ? defaultColumnDefIds
-        : Array.from(new Set([...currentColumnOrderIds, ...defaultColumnDefIds]));
-    allLeafColumnDefIds = allLeafColumnDefIds.filter((colId) => !leadingDisplayColIds.includes(colId) &&
-        !trailingDisplayColIds.includes(colId));
-    return [
-        ...leadingDisplayColIds,
-        ...allLeafColumnDefIds,
-        ...trailingDisplayColIds,
-    ];
-};
-
-const fuzzy$1 = (rowA, rowB, columnId) => {
-    let dir = 0;
-    if (rowA.columnFiltersMeta[columnId]) {
-        dir = matchSorterUtils.compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
-    }
-    // Provide a fallback for when the item ranks are equal
-    return dir === 0
-        ? reactTable.sortingFns.alphanumeric(rowA, rowB, columnId)
-        : dir;
-};
-const MRT_SortingFns = Object.assign(Object.assign({}, reactTable.sortingFns), { fuzzy: fuzzy$1 });
-const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) -
-    Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
-
 const getMRT_Rows = (table, all) => {
     const { getCenterRows, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { createDisplayMode, enablePagination, enableRowPinning, manualPagination, positionCreatingRow, rowPinningDisplayMode, }, } = table;
     const { creatingRow, pagination } = getState();
@@ -638,6 +497,230 @@ const getMRT_SelectAllHandler = ({ table }) => (event, value, forceAll) => {
     lastSelectedRowId.current = null;
 };
 
+const isWinCtrlMacMeta = (event) => {
+    return ((event.ctrlKey && navigator.platform.toLowerCase().includes('win')) ||
+        (event.metaKey && navigator.platform.toLowerCase().includes('mac')));
+};
+const isCellEditable = ({ cell, table, }) => {
+    const { enableEditing } = table.options;
+    const { column: { columnDef }, row, } = cell;
+    return (!cell.getIsPlaceholder() &&
+        parseFromValuesOrFunc(enableEditing, row) &&
+        parseFromValuesOrFunc(columnDef.enableEditing, row) !== false);
+};
+const openEditingCell = ({ cell, table, }) => {
+    const { options: { editDisplayMode }, refs: { editInputRefs }, } = table;
+    const { column } = cell;
+    if (isCellEditable({ cell, table }) && editDisplayMode === 'cell') {
+        table.setEditingCell(cell);
+        queueMicrotask(() => {
+            var _a;
+            const textField = editInputRefs.current[column.id];
+            if (textField) {
+                textField.focus();
+                (_a = textField.select) === null || _a === void 0 ? void 0 : _a.call(textField);
+            }
+        });
+    }
+};
+const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement, event, header, parentElement, table, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    if (!table.options.enableKeyboardShortcuts)
+        return;
+    const currentCell = event.currentTarget;
+    if (cellValue && isWinCtrlMacMeta(event) && event.key === 'c') {
+        navigator.clipboard.writeText(cellValue);
+    }
+    else if (['Enter', ' '].includes(event.key)) {
+        if (((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id) === 'mrt-row-select') {
+            event.preventDefault();
+            getMRT_RowSelectionHandler({
+                row: cell.row,
+                table,
+                //@ts-ignore
+                staticRowIndex: +event.target.getAttribute('data-index'),
+            })(event);
+        }
+        else if (((_b = header === null || header === void 0 ? void 0 : header.column) === null || _b === void 0 ? void 0 : _b.id) === 'mrt-row-select' &&
+            table.options.enableSelectAll) {
+            event.preventDefault();
+            getMRT_SelectAllHandler({
+                table,
+            })(event);
+        }
+        else if (((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'mrt-row-expand' &&
+            (cell.row.getCanExpand() ||
+                ((_e = (_d = table.options).renderDetailPanel) === null || _e === void 0 ? void 0 : _e.call(_d, { row: cell.row, table })))) {
+            event.preventDefault();
+            cell.row.toggleExpanded();
+        }
+        else if (((_f = header === null || header === void 0 ? void 0 : header.column) === null || _f === void 0 ? void 0 : _f.id) === 'mrt-row-expand' &&
+            table.options.enableExpandAll) {
+            event.preventDefault();
+            table.toggleAllRowsExpanded();
+        }
+        else if ((cell === null || cell === void 0 ? void 0 : cell.column.id) === 'mrt-row-pin') {
+            event.preventDefault();
+            cell.row.getIsPinned()
+                ? cell.row.pin(false)
+                : cell.row.pin(((_g = table.options.rowPinningDisplayMode) === null || _g === void 0 ? void 0 : _g.includes('bottom'))
+                    ? 'bottom'
+                    : 'top');
+        }
+        else if (header && isWinCtrlMacMeta(event)) {
+            const actionsButton = currentCell.querySelector(`button[aria-label="${table.options.localization.columnActions}"]`);
+            if (actionsButton) {
+                actionsButton.click();
+            }
+        }
+        else if ((_h = header === null || header === void 0 ? void 0 : header.column) === null || _h === void 0 ? void 0 : _h.getCanSort()) {
+            event.preventDefault();
+            header.column.toggleSorting();
+        }
+    }
+    else if ([
+        'ArrowRight',
+        'ArrowLeft',
+        'ArrowUp',
+        'ArrowDown',
+        'Home',
+        'End',
+        'PageUp',
+        'PageDown',
+    ].includes(event.key)) {
+        event.preventDefault();
+        const currentRow = parentElement || currentCell.closest('tr');
+        const tableElement = containerElement || currentCell.closest('table');
+        const allCells = cellElements ||
+            Array.from((tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelectorAll('th, td')) || []);
+        const currentCellIndex = allCells.indexOf(currentCell);
+        const currentIndex = parseInt(currentCell.getAttribute('data-index') || '0');
+        let nextCell = undefined;
+        //home/end first or last cell in row
+        const findEdgeCell = (rowIndex, edge) => {
+            var _a;
+            const row = rowIndex === 'c'
+                ? currentRow
+                : rowIndex === 'f'
+                    ? tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector('tr')
+                    : (_a = tableElement === null || tableElement === void 0 ? void 0 : tableElement.lastElementChild) === null || _a === void 0 ? void 0 : _a.lastElementChild;
+            const rowCells = Array.from((row === null || row === void 0 ? void 0 : row.children) || []);
+            const targetCell = edge === 'f' ? rowCells[0] : rowCells[rowCells.length - 1];
+            return targetCell;
+        };
+        //page up/down first or last cell in column
+        const findBottomTopCell = (columnIndex, edge) => {
+            var _a;
+            const row = edge === 't'
+                ? tableElement === null || tableElement === void 0 ? void 0 : tableElement.querySelector('tr')
+                : (_a = tableElement === null || tableElement === void 0 ? void 0 : tableElement.lastElementChild) === null || _a === void 0 ? void 0 : _a.lastElementChild;
+            const rowCells = Array.from((row === null || row === void 0 ? void 0 : row.children) || []);
+            const targetCell = rowCells[columnIndex];
+            return targetCell;
+        };
+        const findAdjacentCell = (columnIndex, searchDirection) => {
+            const searchArray = searchDirection === 'f'
+                ? allCells.slice(currentCellIndex + 1)
+                : allCells.slice(0, currentCellIndex).reverse();
+            return searchArray.find((cell) => cell.matches(`[data-index="${columnIndex}"]`));
+        };
+        switch (event.key) {
+            case 'ArrowRight':
+                nextCell = findAdjacentCell(currentIndex + 1, 'f');
+                break;
+            case 'ArrowLeft':
+                nextCell = findAdjacentCell(currentIndex - 1, 'b');
+                break;
+            case 'ArrowUp':
+                nextCell = findAdjacentCell(currentIndex, 'b');
+                break;
+            case 'ArrowDown':
+                nextCell = findAdjacentCell(currentIndex, 'f');
+                break;
+            case 'Home':
+                nextCell = findEdgeCell(isWinCtrlMacMeta(event) ? 'f' : 'c', 'f');
+                break;
+            case 'End':
+                nextCell = findEdgeCell(isWinCtrlMacMeta(event) ? 'l' : 'c', 'l');
+                break;
+            case 'PageUp':
+                nextCell = findBottomTopCell(currentIndex, 't');
+                break;
+            case 'PageDown':
+                nextCell = findBottomTopCell(currentIndex, 'b');
+                break;
+        }
+        if (nextCell) {
+            nextCell.focus();
+        }
+    }
+};
+
+function defaultDisplayColumnProps({ header, id, size, tableOptions, }) {
+    const { defaultDisplayColumn, displayColumnDefOptions, localization } = tableOptions;
+    return Object.assign(Object.assign(Object.assign(Object.assign({}, defaultDisplayColumn), { header: header ? localization[header] : '', size }), displayColumnDefOptions === null || displayColumnDefOptions === void 0 ? void 0 : displayColumnDefOptions[id]), { id });
+}
+const showRowPinningColumn = (tableOptions) => {
+    const { enableRowPinning, rowPinningDisplayMode } = tableOptions;
+    return !!(enableRowPinning && !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.startsWith('select')));
+};
+const showRowDragColumn = (tableOptions) => {
+    const { enableRowDragging, enableRowOrdering } = tableOptions;
+    return !!(enableRowDragging || enableRowOrdering);
+};
+const showRowExpandColumn = (tableOptions) => {
+    const { enableExpanding, enableGrouping, renderDetailPanel, state: { grouping }, } = tableOptions;
+    return !!(enableExpanding ||
+        (enableGrouping && (grouping === null || grouping === void 0 ? void 0 : grouping.length)) ||
+        renderDetailPanel);
+};
+const showRowActionsColumn = (tableOptions) => {
+    const { createDisplayMode, editDisplayMode, enableEditing, enableRowActions, state: { creatingRow }, } = tableOptions;
+    return !!(enableRowActions ||
+        (creatingRow && createDisplayMode === 'row') ||
+        (enableEditing && ['modal', 'row'].includes(editDisplayMode !== null && editDisplayMode !== void 0 ? editDisplayMode : '')));
+};
+const showRowSelectionColumn = (tableOptions) => !!tableOptions.enableRowSelection;
+const showRowNumbersColumn = (tableOptions) => !!tableOptions.enableRowNumbers;
+const showRowSpacerColumn = (tableOptions) => tableOptions.layoutMode === 'grid-no-grow';
+const getLeadingDisplayColumnIds = (tableOptions) => [
+    showRowPinningColumn(tableOptions) && 'mrt-row-pin',
+    showRowDragColumn(tableOptions) && 'mrt-row-drag',
+    tableOptions.positionActionsColumn === 'first' &&
+        showRowActionsColumn(tableOptions) &&
+        'mrt-row-actions',
+    tableOptions.positionExpandColumn === 'first' &&
+        showRowExpandColumn(tableOptions) &&
+        'mrt-row-expand',
+    showRowSelectionColumn(tableOptions) && 'mrt-row-select',
+    showRowNumbersColumn(tableOptions) && 'mrt-row-numbers',
+].filter(Boolean);
+const getTrailingDisplayColumnIds = (tableOptions) => [
+    tableOptions.positionActionsColumn === 'last' &&
+        showRowActionsColumn(tableOptions) &&
+        'mrt-row-actions',
+    tableOptions.positionExpandColumn === 'last' &&
+        showRowExpandColumn(tableOptions) &&
+        'mrt-row-expand',
+    showRowSpacerColumn(tableOptions) && 'mrt-row-spacer',
+].filter(Boolean);
+const getDefaultColumnOrderIds = (tableOptions, reset = false) => {
+    const { state: { columnOrder: currentColumnOrderIds = [] }, } = tableOptions;
+    const leadingDisplayColIds = getLeadingDisplayColumnIds(tableOptions);
+    const trailingDisplayColIds = getTrailingDisplayColumnIds(tableOptions);
+    const defaultColumnDefIds = getAllLeafColumnDefs(tableOptions.columns).map((columnDef) => getColumnId(columnDef));
+    let allLeafColumnDefIds = reset
+        ? defaultColumnDefIds
+        : Array.from(new Set([...currentColumnOrderIds, ...defaultColumnDefIds]));
+    allLeafColumnDefIds = allLeafColumnDefIds.filter((colId) => !leadingDisplayColIds.includes(colId) &&
+        !trailingDisplayColIds.includes(colId));
+    return [
+        ...leadingDisplayColIds,
+        ...allLeafColumnDefIds,
+        ...trailingDisplayColIds,
+    ];
+};
+
 const MRT_AggregationFns = Object.assign({}, reactTable.aggregationFns);
 
 const fuzzy = (row, columnId, filterValue, addMeta) => {
@@ -919,7 +1002,7 @@ const MRT_ActionMenuItem = (_a) => {
             minWidth: '120px',
             my: 0,
             py: '6px',
-        } }, rest, { children: [jsxRuntime.jsxs(Box__default["default"], { sx: {
+        }, tabIndex: 0 }, rest, { children: [jsxRuntime.jsxs(Box__default["default"], { sx: {
                     alignItems: 'center',
                     display: 'flex',
                 }, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: icon }), label] }), onOpenSubMenu && (jsxRuntime.jsx(IconButton__default["default"], { onClick: onOpenSubMenu, onMouseEnter: onOpenSubMenu, size: "small", sx: { p: 0 }, children: jsxRuntime.jsx(ArrowRightIcon, {}) }))] })));
@@ -1419,7 +1502,7 @@ const MRT_DefaultDisplayColumn = {
 };
 const useMRT_TableOptions = (_a) => {
     var _b;
-    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeDirection, columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBatchRowSelection = true, enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableColumnVirtualization, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFacetedValues = false, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableCellNavigation = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableRowVirtualization, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, mrtTheme, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionCreatingRow = 'top', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeDirection", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBatchRowSelection", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableColumnVirtualization", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFacetedValues", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableCellNavigation", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableRowVirtualization", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "mrtTheme", "paginationDisplayMode", "positionActionsColumn", "positionCreatingRow", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
+    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeDirection, columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBatchRowSelection = true, enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableColumnVirtualization, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFacetedValues = false, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableKeyboardShortcuts = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableRowVirtualization, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, mrtTheme, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionCreatingRow = 'top', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeDirection", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBatchRowSelection", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableColumnVirtualization", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFacetedValues", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableKeyboardShortcuts", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableRowVirtualization", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "mrtTheme", "paginationDisplayMode", "positionActionsColumn", "positionCreatingRow", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
     const theme = styles.useTheme();
     icons = react.useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
     localization = react.useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
@@ -1480,7 +1563,7 @@ const useMRT_TableOptions = (_a) => {
         enableGlobalFilterRankedResults,
         enableGrouping,
         enableHiding,
-        enableCellNavigation,
+        enableKeyboardShortcuts,
         enableMultiRowSelection,
         enableMultiSort,
         enablePagination,
@@ -2127,7 +2210,7 @@ const MRT_TableBodyCell = (_a) => {
     var _b, _c, _d, _e, _f;
     var { cell, numRows, rowRef, staticColumnIndex, staticRowIndex, table } = _a, rest = __rest(_a, ["cell", "numRows", "rowRef", "staticColumnIndex", "staticRowIndex", "table"]);
     const theme = styles.useTheme();
-    const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableCellActions, enableClickToCopy, enableColumnOrdering, enableColumnPinning, enableGrouping, enableCellNavigation, layoutMode, mrtTheme: { draggingBorderColor }, muiSkeletonProps, muiTableBodyCellProps, }, setHoveredColumn, } = table;
+    const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableCellActions, enableClickToCopy, enableColumnOrdering, enableColumnPinning, enableGrouping, enableKeyboardShortcuts, layoutMode, mrtTheme: { draggingBorderColor }, muiSkeletonProps, muiTableBodyCellProps, }, setHoveredColumn, } = table;
     const { actionCell, columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
     const { column, row } = cell;
     const { columnDef } = column;
@@ -2249,14 +2332,17 @@ const MRT_TableBodyCell = (_a) => {
             table.refs.actionCellRef.current = e.currentTarget;
         }
     };
-    const handleKeyDown = (e) => {
+    const handleKeyDown = (event) => {
         var _a;
-        if (enableCellNavigation) {
-            cellNavigation(e);
-        }
-        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, e);
+        cellKeyboardShortcuts({
+            cell,
+            cellValue: cell.getValue(),
+            event,
+            table,
+        });
+        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
     };
-    return (jsxRuntime.jsx(TableCell__default["default"], Object.assign({ align: theme.direction === 'rtl' ? 'right' : 'left', "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, tabIndex: enableCellNavigation ? 0 : undefined }, tableCellProps, { onKeyDown: handleKeyDown, onContextMenu: handleContextMenu, onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, onDragOver: handleDragOver, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
+    return (jsxRuntime.jsx(TableCell__default["default"], 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))
@@ -2517,7 +2603,7 @@ const MRT_TableFooterCell = (_a) => {
     var _b, _c, _d;
     var { footer, staticColumnIndex, table } = _a, rest = __rest(_a, ["footer", "staticColumnIndex", "table"]);
     const theme = styles.useTheme();
-    const { getState, options: { enableColumnPinning, muiTableFooterCellProps, enableCellNavigation, }, } = table;
+    const { getState, options: { enableColumnPinning, muiTableFooterCellProps, enableKeyboardShortcuts, }, } = table;
     const { density } = getState();
     const { column } = footer;
     const { columnDef } = column;
@@ -2527,18 +2613,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 = (e) => {
+    const handleKeyDown = (event) => {
         var _a;
-        if (enableCellNavigation) {
-            cellNavigation(e);
-        }
-        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, e);
+        cellKeyboardShortcuts({
+            event,
+            cellValue: footer.column.columnDef.footer,
+            table,
+        });
+        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
     };
     return (jsxRuntime.jsx(TableCell__default["default"], Object.assign({ align: columnDefType === 'group'
             ? 'center'
             : theme.direction === 'rtl'
                 ? 'right'
-                : 'left', colSpan: footer.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, variant: "footer" }, tableCellProps, { onKeyDown: handleKeyDown, 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'
@@ -3154,7 +3242,11 @@ const MRT_FilterTextField = (_a) => {
             }
         }, margin: 'none', placeholder: filterChipLabel || isSelectFilter || isMultiSelectFilter
             ? undefined
-            : filterPlaceholder, variant: 'standard' }, textFieldProps), { sx: (theme) => (Object.assign({ minWidth: isDateFilter
+            : filterPlaceholder, variant: 'standard' }, textFieldProps), { onKeyDown: (e) => {
+            var _a;
+            e.stopPropagation();
+            (_a = textFieldProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
+        }, sx: (theme) => (Object.assign({ minWidth: isDateFilter
                 ? '160px'
                 : enableColumnFilterModes && rangeFilterIndex === 0
                     ? '110px'
@@ -3464,7 +3556,7 @@ const MRT_TableHeadCell = (_a) => {
     var _b, _c, _d, _f, _g, _h;
     var { columnVirtualizer, header, staticColumnIndex, table } = _a, rest = __rest(_a, ["columnVirtualizer", "header", "staticColumnIndex", "table"]);
     const theme = styles.useTheme();
-    const { getState, options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, enableGrouping, enableCellNavigation, enableMultiSort, layoutMode, mrtTheme: { draggingBorderColor }, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
+    const { getState, options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableKeyboardShortcuts, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, enableGrouping, enableMultiSort, layoutMode, mrtTheme: { draggingBorderColor }, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
     const { columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
     const { column } = header;
     const { columnDef } = column;
@@ -3533,12 +3625,15 @@ const MRT_TableHeadCell = (_a) => {
             e.preventDefault();
         }
     };
-    const handleKeyDown = (e) => {
+    const handleKeyDown = (event) => {
         var _a;
-        if (enableCellNavigation) {
-            cellNavigation(e);
-        }
-        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, e);
+        cellKeyboardShortcuts({
+            event,
+            cellValue: header.column.columnDef.header,
+            table,
+            header,
+        });
+        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
     };
     const HeaderElement = (_b = parseFromValuesOrFunc(columnDef.Header, {
         column,
@@ -3561,7 +3656,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);
                 }
             }
-        }, tabIndex: enableCellNavigation ? 0 : undefined }, tableCellProps, { onKeyDown: handleKeyDown, sx: (theme) => (Object.assign(Object.assign({ '& :hover': {
+        }, tabIndex: enableKeyboardShortcuts ? 0 : undefined }, tableCellProps, { onKeyDown: handleKeyDown, sx: (theme) => (Object.assign(Object.assign({ '& :hover': {
                 '.MuiButtonBase-root': {
                     opacity: 1,
                 },
@@ -4414,7 +4509,7 @@ exports.MaterialReactTable = MaterialReactTable;
 exports.Memo_MRT_TableBody = Memo_MRT_TableBody;
 exports.Memo_MRT_TableBodyCell = Memo_MRT_TableBodyCell;
 exports.Memo_MRT_TableBodyRow = Memo_MRT_TableBodyRow;
-exports.cellNavigation = cellNavigation;
+exports.cellKeyboardShortcuts = cellKeyboardShortcuts;
 exports.createMRTColumnHelper = createMRTColumnHelper;
 exports.createRow = createRow;
 exports.defaultDisplayColumnProps = defaultDisplayColumnProps;