remove rows and column args

pages/table-fragments/grid-navigation-custom.page.tsx

@@ -82,8 +82,6 @@ export default function Page() {
   const gridNavigationApi = useGridNavigation({
     tableRole: 'grid',
     getContainer: () => tableContainerRef.current,
-    rows: items.length,
-    columns: columnDefinitions.length,
     pageSize,
   });
 

src/table/grid-navigation/interfaces.ts

@@ -5,8 +5,6 @@ import { TableRole } from '../table-role';
 
 export interface GridNavigationProps {
   tableRole: TableRole;
-  rows: number;
-  columns: number;
   pageSize: number;
   getContainer: () => null | HTMLElement;
 }

src/table/grid-navigation/use-grid-navigation.ts

@@ -5,13 +5,7 @@ import { useEffect, useMemo } from 'react';
 import { findFocusinCell } from './utils';
 import { FocusedCell, GridNavigationAPI, GridNavigationProps } from './interfaces';
 
-export function useGridNavigation({
-  tableRole,
-  rows,
-  columns,
-  pageSize,
-  getContainer,
-}: GridNavigationProps): GridNavigationAPI {
+export function useGridNavigation({ tableRole, pageSize, getContainer }: GridNavigationProps): GridNavigationAPI {
   const model = useMemo(() => new GridNavigationModel(), []);
 
   // Initialize the model with the table container assuming it is mounted synchronously and only once.
@@ -32,16 +26,14 @@ export function useGridNavigation({
   // TODO: handle the case when rows and columns stay unchanged by the focused item disappears (e.g. it is replaced by another item)
   // Notify the model of the props change. The focus might need to move when the focused cell is no longer available.
   useEffect(() => {
-    model.update({ rows, columns, pageSize });
-  }, [model, rows, columns, pageSize]);
+    model.update({ pageSize });
+  }, [model, pageSize]);
 
   return model;
 }
 
 class GridNavigationModel {
   // Props
-  private _rows = 0;
-  private _columns = 0;
   private _pageSize = 0;
   private _container: null | HTMLElement = null;
 
@@ -62,9 +54,7 @@ class GridNavigationModel {
     this.container.removeEventListener('keydown', this.onKeydown);
   }
 
-  public update({ rows, columns, pageSize }: { rows: number; columns: number; pageSize: number }) {
-    this._rows = rows;
-    this._columns = columns;
+  public update({ pageSize }: { pageSize: number }) {
     this._pageSize = pageSize;
     // TODO: validate state
   }
@@ -74,14 +64,6 @@ class GridNavigationModel {
     throw new Error(`focusCell({ rowIndex: ${rowIndex}, colIndex: ${colIndex} }) is not implemented.`);
   };
 
-  private get rows() {
-    return this._rows;
-  }
-
-  private get columns() {
-    return this._columns;
-  }
-
   private get pageSize() {
     return this._pageSize;
   }
@@ -93,26 +75,18 @@ class GridNavigationModel {
     return this._container;
   }
 
-  // TODO: is this helper still needed?
-  private updateFocusedCell(cell: null | FocusedCell) {
-    if (this.focusedCell?.element === cell?.element) {
-      return;
-    }
-    this.focusedCell = cell;
-  }
-
   private onFocusin = (event: FocusEvent) => {
     const cell = findFocusinCell(event);
     if (!cell) {
       return;
     }
-    this.updateFocusedCell(cell);
+    this.focusedCell = cell;
 
     console.log('FOCUS IN', cell.rowIndex, cell.colIndex, cell.element);
   };
 
   private onFocusout = () => {
-    this.updateFocusedCell(null);
+    this.focusedCell = null;
   };
 
   private onKeydown = () => {