material-react-table 3.0.0-beta.1 → 3.0.0-rc.0

package/dist/index.esm.js

@@ -1,5 +1,5 @@
 import { flexRender as flexRender$1, createRow as createRow$1, sortingFns, aggregationFns, filterFns, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
-import { useMemo, useState, useReducer, useRef, useEffect, useCallback, memo, Fragment as Fragment$1, useLayoutEffect } from 'react';
+import { useMemo, useState, useId, useReducer, useRef, useEffect, useCallback, memo, Fragment as Fragment$1, useLayoutEffect } from 'react';
 import { compareItems, rankItem, rankings } from '@tanstack/match-sorter-utils';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import IconButton from '@mui/material/IconButton';
@@ -50,7 +50,7 @@ import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
 import Paper from '@mui/material/Paper';
-import { useTheme as useTheme$1 } from '@mui/material';
+import FocusTrap from '@mui/material/Unstable_TrapFocus/FocusTrap';
 import TableContainer from '@mui/material/TableContainer';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -407,6 +407,10 @@ 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;
@@ -429,13 +433,17 @@ const openEditingCell = ({ cell, table, }) => {
         });
     }
 };
-const cellNavigation = ({ cell, cellElements, cellValue, containerElement, event, header, parentElement, table, }) => {
+const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement, event, header, parentElement, table, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
-    if (cellValue && (event.ctrlKey || event.metaKey) && event.key === 'c') {
+    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,
@@ -445,6 +453,7 @@ const cellNavigation = ({ cell, cellElements, cellValue, containerElement, 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);
@@ -452,26 +461,44 @@ const cellNavigation = ({ cell, cellElements, cellValue, containerElement, 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 ((_g = header === null || header === void 0 ? void 0 : header.column) === null || _g === void 0 ? void 0 : _g.getCanSort()) {
-            header.column.toggleSorting();
-        }
         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(((_h = table.options.rowPinningDisplayMode) === null || _h === void 0 ? void 0 : _h.includes('bottom'))
+                : 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'].includes(event.key)) {
+    else if ([
+        'ArrowRight',
+        'ArrowLeft',
+        'ArrowUp',
+        'ArrowDown',
+        'Home',
+        'End',
+        'PageUp',
+        'PageDown',
+    ].includes(event.key)) {
         event.preventDefault();
-        const currentCell = event.currentTarget;
         const currentRow = parentElement || currentCell.closest('tr');
         const tableElement = containerElement || currentCell.closest('table');
         const allCells = cellElements ||
@@ -491,6 +518,16 @@ const cellNavigation = ({ cell, cellElements, cellValue, containerElement, event
             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)
@@ -511,10 +548,16 @@ const cellNavigation = ({ cell, cellElements, cellValue, containerElement, event
                 nextCell = findAdjacentCell(currentIndex, 'f');
                 break;
             case 'Home':
-                nextCell = findEdgeCell(event.ctrlKey ? 'f' : 'c', 'f');
+                nextCell = findEdgeCell(isWinCtrlMacMeta(event) ? 'f' : 'c', 'f');
                 break;
             case 'End':
-                nextCell = findEdgeCell(event.ctrlKey ? 'l' : 'c', 'l');
+                nextCell = findEdgeCell(isWinCtrlMacMeta(event) ? 'l' : 'c', 'l');
+                break;
+            case 'PageUp':
+                nextCell = findBottomTopCell(currentIndex, 't');
+                break;
+            case 'PageDown':
+                nextCell = findBottomTopCell(currentIndex, 'b');
                 break;
         }
         if (nextCell) {
@@ -1118,7 +1161,7 @@ const MRT_RowPinButton = (_a) => {
         event.stopPropagation();
         row.pin(isPinned ? false : pinningPosition);
     };
-    return (jsx(Tooltip, Object.assign({}, getCommonTooltipProps(), { open: tooltipOpened, title: isPinned ? localization.unpin : localization.pin, children: jsx(IconButton, Object.assign({ "aria-label": localization.pin, onClick: handleTogglePin, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false), size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '24px', width: '24px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: isPinned ? (jsx(CloseIcon, {})) : (jsx(PushPinIcon, { fontSize: "small", style: {
+    return (jsx(Tooltip, Object.assign({}, getCommonTooltipProps(), { open: tooltipOpened, title: isPinned ? localization.unpin : localization.pin, children: jsx(IconButton, Object.assign({ "aria-label": localization.pin, onBlur: () => setTooltipOpened(false), onClick: handleTogglePin, onFocus: () => setTooltipOpened(true), onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false), size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '24px', width: '24px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: isPinned ? (jsx(CloseIcon, {})) : (jsx(PushPinIcon, { fontSize: "small", style: {
                     transform: `rotate(${rowPinningDisplayMode === 'sticky'
                         ? 135
                         : pinningPosition === 'top'
@@ -1369,7 +1412,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, id = useId(), 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", "id", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "mrtTheme", "paginationDisplayMode", "positionActionsColumn", "positionCreatingRow", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
     const theme = useTheme();
     icons = useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
     localization = useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
@@ -1430,7 +1473,7 @@ const useMRT_TableOptions = (_a) => {
         enableGlobalFilterRankedResults,
         enableGrouping,
         enableHiding,
-        enableCellNavigation,
+        enableKeyboardShortcuts,
         enableMultiRowSelection,
         enableMultiSort,
         enablePagination,
@@ -1454,6 +1497,7 @@ const useMRT_TableOptions = (_a) => {
             : undefined, getGroupedRowModel: enableGrouping && !manualGrouping ? getGroupedRowModel() : undefined, getPaginationRowModel: enablePagination && !manualPagination
             ? getPaginationRowModel()
             : undefined, getSortedRowModel: enableSorting && !manualSorting ? getSortedRowModel() : undefined, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows, icons,
+        id,
         layoutMode,
         localization,
         manualFiltering,
@@ -2077,7 +2121,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 = 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;
@@ -2201,17 +2245,15 @@ const MRT_TableBodyCell = (_a) => {
     };
     const handleKeyDown = (event) => {
         var _a;
-        if (enableCellNavigation) {
-            cellNavigation({
-                cell,
-                cellValue: cell.getValue(),
-                event,
-                table,
-            });
-        }
+        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 (jsx(TableCell, 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 (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))
@@ -2472,7 +2514,7 @@ const MRT_TableFooterCell = (_a) => {
     var _b, _c, _d;
     var { footer, staticColumnIndex, table } = _a, rest = __rest(_a, ["footer", "staticColumnIndex", "table"]);
     const theme = useTheme();
-    const { getState, options: { enableColumnPinning, muiTableFooterCellProps, enableCellNavigation, }, } = table;
+    const { getState, options: { enableColumnPinning, muiTableFooterCellProps, enableKeyboardShortcuts, }, } = table;
     const { density } = getState();
     const { column } = footer;
     const { columnDef } = column;
@@ -2484,20 +2526,18 @@ const MRT_TableFooterCell = (_a) => {
     const tableCellProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterCellProps, args)), parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, args)), rest);
     const handleKeyDown = (event) => {
         var _a;
-        if (enableCellNavigation) {
-            cellNavigation({
-                event,
-                cellValue: footer.column.columnDef.footer,
-                table,
-            });
-        }
+        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 (jsx(TableCell, 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'
@@ -3427,7 +3467,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 = 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;
@@ -3498,14 +3538,12 @@ const MRT_TableHeadCell = (_a) => {
     };
     const handleKeyDown = (event) => {
         var _a;
-        if (enableCellNavigation) {
-            cellNavigation({
-                event,
-                cellValue: header.column.columnDef.header,
-                table,
-                header,
-            });
-        }
+        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, {
@@ -3529,7 +3567,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,
                 },
@@ -3713,7 +3751,7 @@ const MRT_Table = (_a) => {
 const MRT_TableLoadingOverlay = (_a) => {
     var _b;
     var { table } = _a, rest = __rest(_a, ["table"]);
-    const { options: { localization, mrtTheme: { baseBackgroundColor }, muiCircularProgressProps, }, } = table;
+    const { options: { id, localization, mrtTheme: { baseBackgroundColor }, muiCircularProgressProps, }, } = table;
     const circularProgressProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCircularProgressProps, { table })), rest);
     return (jsx(Box, { sx: {
             alignItems: 'center',
@@ -3728,7 +3766,7 @@ const MRT_TableLoadingOverlay = (_a) => {
             top: 0,
             width: '100%',
             zIndex: 3,
-        }, children: (_b = circularProgressProps === null || circularProgressProps === void 0 ? void 0 : circularProgressProps.Component) !== null && _b !== void 0 ? _b : (jsx(CircularProgress, Object.assign({ "aria-label": localization.noRecordsToDisplay, id: "mrt-progress" }, circularProgressProps))) }));
+        }, children: (_b = circularProgressProps === null || circularProgressProps === void 0 ? void 0 : circularProgressProps.Component) !== null && _b !== void 0 ? _b : (jsx(CircularProgress, Object.assign({ "aria-label": localization.noRecordsToDisplay, id: `mrt-progress-${id}` }, circularProgressProps))) }));
 };
 
 const MRT_CellActionMenu = (_a) => {
@@ -3874,7 +3912,7 @@ const MRT_TablePagination = (_a) => {
     var { position = 'bottom', table } = _a, rest = __rest(_a, ["position", "table"]);
     const theme = useTheme();
     const isMobile = useMediaQuery('(max-width: 720px)');
-    const { getState, options: { enableToolbarInternalActions, icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon }, localization, muiPaginationProps, paginationDisplayMode, }, } = table;
+    const { getState, options: { enableToolbarInternalActions, icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon }, id, localization, muiPaginationProps, paginationDisplayMode, }, } = table;
     const { pagination: { pageIndex = 0, pageSize = 10 }, showGlobalFilter, } = getState();
     const paginationProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiPaginationProps, {
         table,
@@ -3907,9 +3945,9 @@ const MRT_TablePagination = (_a) => {
             px: '8px',
             py: '12px',
             zIndex: 2,
-        }, children: [showRowsPerPage && (jsxs(Box, { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsx(InputLabel, { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsx(Select, Object.assign({ MenuProps: { disableScrollLock: true }, disableUnderline: true, disabled: disabled, inputProps: {
+        }, children: [showRowsPerPage && (jsxs(Box, { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsx(InputLabel, { htmlFor: `mrt-rows-per-page-${id}`, sx: { mb: 0 }, children: localization.rowsPerPage }), jsx(Select, Object.assign({ MenuProps: { disableScrollLock: true }, disableUnderline: true, disabled: disabled, inputProps: {
                             'aria-label': localization.rowsPerPage,
-                            id: 'mrt-rows-per-page',
+                            id: `mrt-rows-per-page-${id}`,
                         }, label: localization.rowsPerPage, onChange: (event) => table.setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard" }, SelectProps, { children: rowsPerPageOptions.map((option) => {
                             var _a;
                             const value = typeof option !== 'number' ? option.value : option;
@@ -4149,7 +4187,7 @@ const MRT_ToggleFullScreenButton = (_a) => {
         setTooltipOpened(false);
         setIsFullScreen(!isFullScreen);
     };
-    return (jsx(Tooltip, { open: tooltipOpened, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen, children: jsx(IconButton, Object.assign({ "aria-label": localization.toggleFullScreen, onClick: handleToggleFullScreen, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false) }, rest, { title: undefined, children: isFullScreen ? jsx(FullscreenExitIcon, {}) : jsx(FullscreenIcon, {}) })) }));
+    return (jsx(Tooltip, { open: tooltipOpened, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen, children: jsx(IconButton, Object.assign({ "aria-label": localization.toggleFullScreen, onBlur: () => setTooltipOpened(false), onClick: handleToggleFullScreen, onFocus: () => setTooltipOpened(true), onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false) }, rest, { title: undefined, children: isFullScreen ? jsx(FullscreenExitIcon, {}) : jsx(FullscreenIcon, {}) })) }));
 };
 
 const MRT_ToggleGlobalFilterButton = (_a) => {
@@ -4277,31 +4315,31 @@ const MRT_TablePaper = (_a) => {
     const { getState, options: { enableBottomToolbar, enableTopToolbar, mrtTheme: { baseBackgroundColor }, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
     const { isFullScreen } = getState();
     const paperProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTablePaperProps, { table })), rest);
-    const theme = useTheme$1();
-    return (jsxs(Paper, Object.assign({ elevation: 2 }, paperProps, { ref: (ref) => {
-            tablePaperRef.current = ref;
-            if (paperProps === null || paperProps === void 0 ? void 0 : paperProps.ref) {
-                //@ts-ignore
-                paperProps.ref.current = ref;
-            }
-        }, style: Object.assign(Object.assign({}, (isFullScreen
-            ? {
-                bottom: 0,
-                height: '100dvh',
-                left: 0,
-                margin: 0,
-                maxHeight: '100dvh',
-                maxWidth: '100dvw',
-                padding: 0,
-                position: 'fixed',
-                right: 0,
-                top: 0,
-                width: '100dvw',
-                zIndex: theme.zIndex.modal,
-            }
-            : {})), paperProps === null || paperProps === void 0 ? void 0 : paperProps.style), sx: (theme) => (Object.assign({ backgroundColor: baseBackgroundColor, backgroundImage: 'unset', overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(paperProps === null || paperProps === void 0 ? void 0 : paperProps.sx, theme))), children: [enableTopToolbar &&
-                ((_b = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _b !== void 0 ? _b : (jsx(MRT_TopToolbar, { table: table }))), jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
-                ((_c = parseFromValuesOrFunc(renderBottomToolbar, { table })) !== null && _c !== void 0 ? _c : (jsx(MRT_BottomToolbar, { table: table })))] })));
+    const theme = useTheme();
+    return (jsx(FocusTrap, { open: isFullScreen, children: jsxs(Paper, Object.assign({ elevation: 2, onKeyDown: (e) => e.key === 'Escape' && table.setIsFullScreen(false) }, paperProps, { ref: (ref) => {
+                tablePaperRef.current = ref;
+                if (paperProps === null || paperProps === void 0 ? void 0 : paperProps.ref) {
+                    //@ts-ignore
+                    paperProps.ref.current = ref;
+                }
+            }, style: Object.assign(Object.assign({}, (isFullScreen
+                ? {
+                    bottom: 0,
+                    height: '100dvh',
+                    left: 0,
+                    margin: 0,
+                    maxHeight: '100dvh',
+                    maxWidth: '100dvw',
+                    padding: 0,
+                    position: 'fixed',
+                    right: 0,
+                    top: 0,
+                    width: '100dvw',
+                    zIndex: theme.zIndex.modal,
+                }
+                : {})), paperProps === null || paperProps === void 0 ? void 0 : paperProps.style), sx: (theme) => (Object.assign({ backgroundColor: baseBackgroundColor, backgroundImage: 'unset', overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(paperProps === null || paperProps === void 0 ? void 0 : paperProps.sx, theme))), children: [enableTopToolbar &&
+                    ((_b = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _b !== void 0 ? _b : (jsx(MRT_TopToolbar, { table: table }))), jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
+                    ((_c = parseFromValuesOrFunc(renderBottomToolbar, { table })) !== null && _c !== void 0 ? _c : (jsx(MRT_BottomToolbar, { table: table })))] })) }));
 };
 
 const isTableInstanceProp = (props) => props.table !== undefined;
@@ -4316,5 +4354,5 @@ const MaterialReactTable = (props) => {
     return jsx(MRT_TablePaper, { table: table });
 };
 
-export { MRT_ActionMenuItem, MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, cellNavigation, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnFilterInfo, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsRankingRows, getIsRowSelected, getLeadingDisplayColumnIds, getMRT_RowSelectionHandler, getMRT_Rows, getMRT_SelectAllHandler, getTrailingDisplayColumnIds, isCellEditable, mrtFilterOptions, openEditingCell, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useDropdownOptions, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
+export { MRT_ActionMenuItem, MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, cellKeyboardShortcuts, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnFilterInfo, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsRankingRows, getIsRowSelected, getLeadingDisplayColumnIds, getMRT_RowSelectionHandler, getMRT_Rows, getMRT_SelectAllHandler, getTrailingDisplayColumnIds, isCellEditable, mrtFilterOptions, openEditingCell, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useDropdownOptions, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
 //# sourceMappingURL=index.esm.js.map