material-react-table-narender 2.13.19 → 2.13.21

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.13.19",
+  "version": "2.13.21",
   "license": "MIT",
   "name": "material-react-table-narender",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

package/src/components/buttons/MRT_ToggleNavigationButton.tsx

@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+
+export interface MRT_ToggleNavigationButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ToggleNavigationButton = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: MRT_ToggleNavigationButtonProps<TData>) => {
+  const {
+    getState,
+    options: {
+      icons: { FullscreenExitIcon, FullscreenIcon },
+      localization,
+    },
+    setEnableKeyboardShortcuts,
+  } = table;
+  const { enableKeyboardShortcuts } = getState();
+
+  const [tooltipOpened, setTooltipOpened] = useState(false);
+
+  const handleToggleFullScreen = () => {
+    setTooltipOpened(false);
+    setEnableKeyboardShortcuts(!enableKeyboardShortcuts);
+  };
+
+  return (
+    <Tooltip
+      open={tooltipOpened}
+      title={rest?.title ?? localization.keyboardNavigation}
+    >
+      <IconButton
+        aria-label={localization.keyboardNavigation}
+        onClick={handleToggleFullScreen}
+        onMouseEnter={() => setTooltipOpened(true)}
+        onMouseLeave={() => setTooltipOpened(false)}
+        {...rest}
+        title={undefined}
+      >
+        {enableKeyboardShortcuts ? <FullscreenExitIcon /> : <FullscreenIcon />}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/components/menus/MRT_ShowHideColumnsMenu.tsx

@@ -40,7 +40,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
       enableColumnPinning,
       enableHiding,
       localization,
-      enableColumnResizing,
+      // enableColumnResizing,
       mrtTheme: { menuBackgroundColor },
     },
   } = table;
@@ -141,7 +141,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
             {localization.showAll}
           </Button>
         )}
-        {
+        {/* {
           enableColumnResizing && (
             <Button
               onClick={() => {
@@ -151,7 +151,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
               {localization.resetColumnSize}
             </Button>
           )
-        }
+        } */}
       </Box>
       <Divider />
       {allColumns.map((column, index) => (

package/src/components/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -6,6 +6,7 @@ import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingB
 import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleFullScreenButton } from '../buttons/MRT_ToggleFullScreenButton';
 import { MRT_ToggleGlobalFilterButton } from '../buttons/MRT_ToggleGlobalFilterButton';
+import { MRT_ToggleNavigationButton } from '../buttons/MRT_ToggleNavigationButton';
 
 export interface MRT_ToolbarInternalButtonsProps<TData extends MRT_RowData>
   extends BoxProps {
@@ -29,6 +30,7 @@ export const MRT_ToolbarInternalButtons = <TData extends MRT_RowData>({
       enableHiding,
       initialState,
       renderToolbarInternalActions,
+      enableKeyboardShortcuts
     },
   } = table;
 
@@ -65,6 +67,9 @@ export const MRT_ToolbarInternalButtons = <TData extends MRT_RowData>({
           {enableFullScreenToggle && (
             <MRT_ToggleFullScreenButton table={table} />
           )}
+          {enableKeyboardShortcuts && (
+            <MRT_ToggleNavigationButton table={table} />
+          )}
         </>
       )}
     </Box>

package/src/types.ts

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

package/src/utils/cell.utils.ts

@@ -90,39 +90,50 @@ export const cellKeyboardShortcuts = <TData extends MRT_RowData = MRT_RowData>({
 
    const { enableKeyboardShortcuts } = getState();
 
-if (event.altKey) {
-    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();
-  }
-}
+  //  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
@@ -194,11 +205,11 @@ const autocomplete = currentCell.querySelector('.MuiAutocomplete-root input[type
 // Focus the appropriate element
  if (autocomplete) {
   autocomplete.focus();
-  autocomplete.select?.();
+  // autocomplete.select?.();
 }
 else if (input) {
   input.focus();
-  input.select?.();
+  // input.select?.();
 } else if (select) {
   select.focus();
 } else if (checkbox) {
@@ -240,8 +251,6 @@ else if (input) {
 
 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) {
 
 
@@ -258,14 +267,11 @@ if (['ArrowDown','ArrowUp'].includes(event.key)) {
           }
       }
     }
-    
-    // Additional logic if not an Autocomplete or not focused
 }
 
 
 
 
-
     const currentRow = parentElement || currentCell.closest('tr');
     const tableElement = containerElement || currentCell.closest('table');
     const allCells =
@@ -276,6 +282,8 @@ if (['ArrowDown','ArrowUp'].includes(event.key)) {
     const currentIndex = parseInt(
       currentCell.getAttribute('data-index') || '0',
     );
+
+
     let nextCell: HTMLElement | undefined = undefined;
 
     //home/end first or last cell in row
@@ -316,6 +324,12 @@ if (['ArrowDown','ArrowUp'].includes(event.key)) {
       ) as HTMLElement | undefined;
     };
 
+    // const findCurrentCell = () => {
+    //   return allCells.find((cell) =>
+    //     cell.matches(`[data-index="${currentIndex}"]`),
+    //   );
+    // }
+
     switch (event.key) {
       case 'ArrowRight':
         nextCell = findAdjacentCell(currentIndex + 1, 'f');