material-react-table-narender 2.13.19 → 2.13.21

package/dist/index.d.ts

@@ -376,6 +376,7 @@ interface MRT_Localization {
     thenBy: string;
     toggleDensity: string;
     toggleFullScreen: string;
+    keyboardNavigation: string;
     toggleSelectAll: string;
     toggleSelectRow: string;
     toggleVisibility: string;

package/dist/index.esm.js

@@ -435,43 +435,43 @@ const openEditingCell = ({ cell, table, }) => {
     }
 };
 const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement, event, header, parentElement, table, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var _a, _b, _c, _d, _e, _f, _g, _h;
     debugger;
     const { getState, setEnableKeyboardShortcuts, } = table;
     const { enableKeyboardShortcuts } = getState();
-    if (event.altKey) {
-        event.preventDefault();
-        setEnableKeyboardShortcuts(!enableKeyboardShortcuts);
-        const currentCell = event.currentTarget;
-        if (enableKeyboardShortcuts) {
-            const input = currentCell.querySelector('input');
-            const select = currentCell.querySelector('select');
-            const checkbox = currentCell.querySelector('input[type="checkbox"]');
-            const button = currentCell.querySelector('button');
-            const autocomplete = currentCell.querySelector('.MuiAutocomplete-root input[type="text"]');
-            if (autocomplete) {
-                autocomplete.focus();
-                (_a = autocomplete.select) === null || _a === void 0 ? void 0 : _a.call(autocomplete);
-            }
-            else if (input) {
-                input.focus();
-                (_b = input.select) === null || _b === void 0 ? void 0 : _b.call(input);
-            }
-            else if (select) {
-                select.focus();
-            }
-            else if (checkbox) {
-                checkbox.focus();
-                // checkbox.click();
-            }
-            else if (button) {
-                button.focus();
-            }
-            else {
-                currentCell.focus();
-            }
-        }
-    }
+    //  alt + n
+    // if (event.altKey && event.key.toLocaleLowerCase() === 'n') {
+    //     event.preventDefault();
+    //     setEnableKeyboardShortcuts(!enableKeyboardShortcuts);
+    //     const currentCell = event.currentTarget;
+    //  if (enableKeyboardShortcuts) {
+    //   const input = currentCell.querySelector('input') as HTMLInputElement;
+    //   const select = currentCell.querySelector('select') as HTMLSelectElement;
+    //   const checkbox = currentCell.querySelector('input[type="checkbox"]') as HTMLInputElement;
+    //   const button = currentCell.querySelector('button') as HTMLButtonElement;
+    //   const autocomplete = currentCell.querySelector('.MuiAutocomplete-root input[type="text"]') as HTMLInputElement;
+    //   if (autocomplete) {
+    //     autocomplete.focus();
+    //     autocomplete.select?.();
+    //   } else if (input) {
+    //     input.focus();
+    //     input.select?.();
+    //   } else if (select) {
+    //     select.focus();
+    //   } else if (checkbox) {
+    //     checkbox.focus();
+    //     // checkbox.click();
+    //   } else if (button) {
+    //     button.focus();
+    //   } else {
+    //     currentCell.focus();
+    //   }
+    // }
+    // }
+    //  if (event.altKey && event.key.toLocaleLowerCase() === 'n') {
+    //   event.preventDefault();
+    //    setEnableKeyboardShortcuts(!enableKeyboardShortcuts);
+    //  }
     // if (!table.options.enableKeyboardShortcuts) return;
     if (!enableKeyboardShortcuts)
         return;
@@ -482,7 +482,7 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
         navigator.clipboard.writeText(cellValue);
     }
     else if (['Enter', ' '].includes(event.key)) {
-        if (((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'mrt-row-select') {
+        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,
@@ -491,20 +491,20 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
                 staticRowIndex: +event.target.getAttribute('data-index'),
             })(event);
         }
-        else if (((_d = header === null || header === void 0 ? void 0 : header.column) === null || _d === void 0 ? void 0 : _d.id) === 'mrt-row-select' &&
+        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 (((_e = cell === null || cell === void 0 ? void 0 : cell.column) === null || _e === void 0 ? void 0 : _e.id) === 'mrt-row-expand' &&
+        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() ||
-                ((_g = (_f = table.options).renderDetailPanel) === null || _g === void 0 ? void 0 : _g.call(_f, { row: cell.row, table })))) {
+                ((_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 (((_h = header === null || header === void 0 ? void 0 : header.column) === null || _h === void 0 ? void 0 : _h.id) === 'mrt-row-expand' &&
+        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();
@@ -513,7 +513,7 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
             event.preventDefault();
             cell.row.getIsPinned()
                 ? cell.row.pin(false)
-                : cell.row.pin(((_j = table.options.rowPinningDisplayMode) === null || _j === void 0 ? void 0 : _j.includes('bottom'))
+                : cell.row.pin(((_g = table.options.rowPinningDisplayMode) === null || _g === void 0 ? void 0 : _g.includes('bottom'))
                     ? 'bottom'
                     : 'top');
         }
@@ -523,7 +523,7 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
                 actionsButton.click();
             }
         }
-        else if ((_k = header === null || header === void 0 ? void 0 : header.column) === null || _k === void 0 ? void 0 : _k.getCanSort()) {
+        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();
         }
@@ -538,11 +538,11 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
             // Focus the appropriate element
             if (autocomplete) {
                 autocomplete.focus();
-                (_l = autocomplete.select) === null || _l === void 0 ? void 0 : _l.call(autocomplete);
+                // autocomplete.select?.();
             }
             else if (input) {
                 input.focus();
-                (_m = input.select) === null || _m === void 0 ? void 0 : _m.call(input);
+                // input.select?.();
             }
             else if (select) {
                 select.focus();
@@ -580,7 +580,6 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
         // }
         if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
             const autocomplete = currentCell.querySelector('.MuiAutocomplete-root input[type="text"]');
-            // Check if the autocomplete input exists and is focused
             if (autocomplete && document.activeElement === autocomplete) {
                 if (event.key === 'ArrowDown') {
                     // Do something with the autocomplete input
@@ -594,7 +593,6 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
                     }
                 }
             }
-            // Additional logic if not an Autocomplete or not focused
         }
         const currentRow = parentElement || currentCell.closest('tr');
         const tableElement = containerElement || currentCell.closest('table');
@@ -631,6 +629,11 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
                 : allCells.slice(0, currentCellIndex).reverse();
             return searchArray.find((cell) => cell.matches(`[data-index="${columnIndex}"]`));
         };
+        // const findCurrentCell = () => {
+        //   return allCells.find((cell) =>
+        //     cell.matches(`[data-index="${currentIndex}"]`),
+        //   );
+        // }
         switch (event.key) {
             case 'ArrowRight':
                 nextCell = findAdjacentCell(currentIndex + 1, 'f');
@@ -4170,7 +4173,9 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
 
 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, enableColumnResizing, 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()
@@ -4208,9 +4213,7 @@ 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 })), 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}`)))] })));
+                }, 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}`)))] })));
 };
 
 const MRT_ShowHideColumnsButton = (_a) => {
@@ -4276,17 +4279,30 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
     return (jsx(Tooltip, { title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch, children: jsx(IconButton, Object.assign({ "aria-label": (_c = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _c !== void 0 ? _c : localization.showHideSearch, disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined, children: showGlobalFilter ? jsx(SearchOffIcon, {}) : jsx(SearchIcon, {}) })) }));
 };
 
+const MRT_ToggleNavigationButton = (_a) => {
+    var _b;
+    var { table } = _a, rest = __rest(_a, ["table"]);
+    const { getState, options: { icons: { FullscreenExitIcon, FullscreenIcon }, localization, }, setEnableKeyboardShortcuts, } = table;
+    const { enableKeyboardShortcuts } = getState();
+    const [tooltipOpened, setTooltipOpened] = useState(false);
+    const handleToggleFullScreen = () => {
+        setTooltipOpened(false);
+        setEnableKeyboardShortcuts(!enableKeyboardShortcuts);
+    };
+    return (jsx(Tooltip, { open: tooltipOpened, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.keyboardNavigation, children: jsx(IconButton, Object.assign({ "aria-label": localization.keyboardNavigation, onClick: handleToggleFullScreen, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false) }, rest, { title: undefined, children: enableKeyboardShortcuts ? jsx(FullscreenExitIcon, {}) : jsx(FullscreenIcon, {}) })) }));
+};
+
 const MRT_ToolbarInternalButtons = (_a) => {
     var _b;
     var { table } = _a, rest = __rest(_a, ["table"]);
-    const { options: { columnFilterDisplayMode, enableColumnFilters, enableColumnOrdering, enableColumnPinning, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, initialState, renderToolbarInternalActions, }, } = table;
+    const { options: { columnFilterDisplayMode, enableColumnFilters, enableColumnOrdering, enableColumnPinning, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, initialState, renderToolbarInternalActions, enableKeyboardShortcuts }, } = table;
     return (jsx(Box, Object.assign({}, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', display: 'flex', zIndex: 3 }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: (_b = renderToolbarInternalActions === null || renderToolbarInternalActions === void 0 ? void 0 : renderToolbarInternalActions({
             table,
         })) !== null && _b !== void 0 ? _b : (jsxs(Fragment, { children: [enableFilters &&
                     enableGlobalFilter &&
                     !(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (jsx(MRT_ToggleGlobalFilterButton, { table: table })), enableFilters &&
                     enableColumnFilters &&
-                    columnFilterDisplayMode !== 'popover' && (jsx(MRT_ToggleFiltersButton, { table: table })), (enableHiding || enableColumnOrdering || enableColumnPinning) && (jsx(MRT_ShowHideColumnsButton, { table: table })), enableDensityToggle && (jsx(MRT_ToggleDensePaddingButton, { table: table })), enableFullScreenToggle && (jsx(MRT_ToggleFullScreenButton, { table: table }))] })) })));
+                    columnFilterDisplayMode !== 'popover' && (jsx(MRT_ToggleFiltersButton, { table: table })), (enableHiding || enableColumnOrdering || enableColumnPinning) && (jsx(MRT_ShowHideColumnsButton, { table: table })), enableDensityToggle && (jsx(MRT_ToggleDensePaddingButton, { table: table })), enableFullScreenToggle && (jsx(MRT_ToggleFullScreenButton, { table: table })), enableKeyboardShortcuts && (jsx(MRT_ToggleNavigationButton, { table: table }))] })) })));
 };
 
 const MRT_GlobalFilterTextField = (_a) => {