@vuu-ui/vuu-table 0.8.95 → 0.8.97

package/esm/useKeyboardNavigation.js

@@ -1,7 +1,7 @@
-import { queryClosest, getIndexFromRowElement } from '@vuu-ui/vuu-utils';
+import { queryClosest } from '@vuu-ui/vuu-utils';
 import { useControlled } from '@salt-ds/core';
 import { useRef, useCallback, useEffect } from 'react';
-import { getTableCell, cellDropdownShowing, closestRowIndex, headerCellQuery, dataCellQuery } from './table-dom-utils.js';
+import { getTableCellPos, getNextCellPos, cellDropdownShowing, closestRowIndex } from './table-dom-utils.js';
 
 const rowNavigationKeys = /* @__PURE__ */ new Set([
   "Home",
@@ -26,43 +26,13 @@ const isNavigationKey = (key, navigationStyle) => {
 };
 const PageKeys = ["Home", "End", "PageUp", "PageDown"];
 const isPagingKey = (key) => PageKeys.includes(key);
-const NULL_CELL_POS = [-1, -1];
-function nextCellPos(key, [rowIdx, colIdx], columnCount, rowCount) {
-  if (key === "ArrowUp") {
-    if (rowIdx > -1) {
-      return [rowIdx - 1, colIdx];
-    } else {
-      return [rowIdx, colIdx];
-    }
-  } else if (key === "ArrowDown") {
-    if (rowIdx === -1) {
-      return [0, colIdx];
-    } else if (rowIdx === rowCount - 1) {
-      return [rowIdx, colIdx];
-    } else {
-      return [rowIdx + 1, colIdx];
-    }
-  } else if (key === "ArrowRight") {
-    if (colIdx < columnCount) {
-      return [rowIdx, colIdx + 1];
-    } else {
-      return [rowIdx, colIdx];
-    }
-  } else if (key === "ArrowLeft") {
-    if (colIdx > 1) {
-      return [rowIdx, colIdx - 1];
-    } else {
-      return [rowIdx, colIdx];
-    }
-  }
-  return [rowIdx, colIdx];
-}
 const useKeyboardNavigation = ({
+  cellFocusStateRef,
   columnCount = 0,
   containerRef,
-  disableFocus = false,
   defaultHighlightedIndex,
   disableHighlightOnFocus,
+  focusCell,
   highlightedIndex: highlightedIndexProp,
   navigationStyle,
   requestScroll,
@@ -71,7 +41,6 @@ const useKeyboardNavigation = ({
   viewportRowCount
 }) => {
   const focusedCellPos = useRef([-1, -1]);
-  const focusableCell = useRef();
   const activeCellPos = useRef([-1, 0]);
   const highlightedIndexRef = useRef();
   const [highlightedIndex, setHighlightedIdx] = useControlled({
@@ -81,7 +50,7 @@ const useKeyboardNavigation = ({
   });
   highlightedIndexRef.current = highlightedIndex;
   const setHighlightedIndex = useCallback(
-    (idx, fromKeyboard = false) => {
+    (idx) => {
       onHighlight?.(idx);
       setHighlightedIdx(idx);
     },
@@ -90,39 +59,6 @@ const useKeyboardNavigation = ({
   const getFocusedCell = (element) => element?.closest(
     "[role='columnHeader'],[role='cell']"
   );
-  const getTableCellPos = (tableCell) => {
-    if (tableCell.role === "columnHeader") {
-      const colIdx = parseInt(tableCell.dataset.idx ?? "-1", 10);
-      return [-1, colIdx];
-    } else {
-      const focusedRow = tableCell.closest("[role='row']");
-      if (focusedRow) {
-        const rowIdx = getIndexFromRowElement(focusedRow);
-        const colIdx = Array.from(focusedRow.childNodes).indexOf(tableCell);
-        return [rowIdx, colIdx];
-      }
-    }
-    return NULL_CELL_POS;
-  };
-  const focusCell = useCallback(
-    (cellPos) => {
-      if (containerRef.current) {
-        const activeCell = getTableCell(containerRef, cellPos);
-        if (activeCell) {
-          if (activeCell !== focusableCell.current) {
-            focusableCell.current?.removeAttribute("tabindex");
-            focusableCell.current = activeCell;
-            activeCell.setAttribute("tabindex", "0");
-          }
-          requestScroll?.({ type: "scroll-row", rowIndex: cellPos[0] });
-          activeCell.focus({ preventScroll: true });
-        }
-      }
-    },
-    // TODO we recreate this function whenever viewportRange changes, which will
-    // be often whilst scrolling - store range in a a ref ?
-    [containerRef, requestScroll]
-  );
   const setActiveCell = useCallback(
     (rowIdx, colIdx, fromKeyboard = false) => {
       const pos = [rowIdx, colIdx];
@@ -130,7 +66,7 @@ const useKeyboardNavigation = ({
       if (navigationStyle === "row") {
         setHighlightedIdx(rowIdx);
       } else {
-        focusCell(pos);
+        focusCell(pos, fromKeyboard);
       }
       if (fromKeyboard) {
         focusedCellPos.current = pos;
@@ -141,10 +77,12 @@ const useKeyboardNavigation = ({
   const nextPageItemIdx = useCallback(
     (key, [rowIdx, colIdx]) => new Promise((resolve) => {
       let newRowIdx = rowIdx;
+      const { current: focusState } = cellFocusStateRef;
       switch (key) {
         case "PageDown": {
           newRowIdx = Math.min(rowCount - 1, rowIdx + viewportRowCount);
           if (newRowIdx !== rowIdx) {
+            focusState.cellPos = [newRowIdx, colIdx];
             requestScroll?.({ type: "scroll-page", direction: "down" });
           }
           break;
@@ -152,6 +90,7 @@ const useKeyboardNavigation = ({
         case "PageUp": {
           newRowIdx = Math.max(0, rowIdx - viewportRowCount);
           if (newRowIdx !== rowIdx) {
+            focusState.cellPos = [newRowIdx, colIdx];
             requestScroll?.({ type: "scroll-page", direction: "up" });
           }
           break;
@@ -159,6 +98,7 @@ const useKeyboardNavigation = ({
         case "Home": {
           newRowIdx = 0;
           if (newRowIdx !== rowIdx) {
+            focusState.cellPos = [0, colIdx];
             requestScroll?.({ type: "scroll-end", direction: "home" });
           }
           break;
@@ -166,6 +106,7 @@ const useKeyboardNavigation = ({
         case "End": {
           newRowIdx = rowCount - 1;
           if (newRowIdx !== rowIdx) {
+            focusState.cellPos = [newRowIdx, colIdx];
             requestScroll?.({ type: "scroll-end", direction: "end" });
           }
           break;
@@ -197,7 +138,7 @@ const useKeyboardNavigation = ({
   ]);
   const navigateChildItems = useCallback(
     async (key) => {
-      const [nextRowIdx, nextColIdx] = isPagingKey(key) ? await nextPageItemIdx(key, activeCellPos.current) : nextCellPos(key, activeCellPos.current, columnCount, rowCount);
+      const [nextRowIdx, nextColIdx] = isPagingKey(key) ? await nextPageItemIdx(key, activeCellPos.current) : getNextCellPos(key, activeCellPos.current, columnCount, rowCount);
       const [rowIdx, colIdx] = activeCellPos.current;
       if (nextRowIdx !== rowIdx || nextColIdx !== colIdx) {
         setActiveCell(nextRowIdx, nextColIdx, true);
@@ -214,7 +155,7 @@ const useKeyboardNavigation = ({
   const moveHighlightedRow = useCallback(
     async (key) => {
       const { current: highlighted } = highlightedIndexRef;
-      const [nextRowIdx] = isPagingKey(key) ? await nextPageItemIdx(key, [highlighted ?? -1, 0]) : nextCellPos(key, [highlighted ?? -1, 0], columnCount, rowCount);
+      const [nextRowIdx] = isPagingKey(key) ? await nextPageItemIdx(key, [highlighted ?? -1, 0]) : getNextCellPos(key, [highlighted ?? -1, 0], columnCount, rowCount);
       if (nextRowIdx !== highlighted) {
         setHighlightedIndex(nextRowIdx);
         scrollRowIntoViewIfNecessary(nextRowIdx);
@@ -280,17 +221,6 @@ const useKeyboardNavigation = ({
   const navigate = useCallback(() => {
     navigateChildItems("ArrowDown");
   }, [navigateChildItems]);
-  const fullyRendered = containerRef.current?.firstChild != null;
-  useEffect(() => {
-    if (fullyRendered && focusableCell.current === void 0 && !disableFocus) {
-      const { current: container } = containerRef;
-      const cell = container?.querySelector(headerCellQuery(0)) || container?.querySelector(dataCellQuery(0, 0));
-      if (cell) {
-        cell.setAttribute("tabindex", "0");
-        focusableCell.current = cell;
-      }
-    }
-  }, [containerRef, disableFocus, fullyRendered]);
   return {
     highlightedIndexRef,
     navigate,

package/esm/useKeyboardNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardNavigation.js","sources":["../src/useKeyboardNavigation.ts"],"sourcesContent":["import { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { getIndexFromRowElement, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { useControlled } from \"@salt-ds/core\";\nimport {\n  KeyboardEvent,\n  MouseEvent,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { TableNavigationStyle } from \"./Table\";\nimport {\n  CellPos,\n  cellDropdownShowing,\n  closestRowIndex,\n  dataCellQuery,\n  getTableCell,\n  headerCellQuery,\n} from \"./table-dom-utils\";\nimport { ScrollRequestHandler } from \"./useTableScroll\";\n\nconst rowNavigationKeys = new Set<NavigationKey>([\n  \"Home\",\n  \"End\",\n  \"PageUp\",\n  \"PageDown\",\n  \"ArrowDown\",\n  \"ArrowUp\",\n]);\n\nconst cellNavigationKeys = new Set(rowNavigationKeys);\ncellNavigationKeys.add(\"ArrowLeft\");\ncellNavigationKeys.add(\"ArrowRight\");\n\nexport const isNavigationKey = (\n  key: string,\n  navigationStyle: TableNavigationStyle,\n): key is NavigationKey => {\n  switch (navigationStyle) {\n    case \"cell\":\n      return cellNavigationKeys.has(key as NavigationKey);\n    case \"row\":\n      return rowNavigationKeys.has(key as NavigationKey);\n    default:\n      return false;\n  }\n};\n\ntype ArrowKey = \"ArrowUp\" | \"ArrowDown\" | \"ArrowLeft\" | \"ArrowRight\";\ntype PageKey = \"Home\" | \"End\" | \"PageUp\" | \"PageDown\";\ntype NavigationKey = PageKey | ArrowKey;\n\nconst PageKeys = [\"Home\", \"End\", \"PageUp\", \"PageDown\"];\nexport const isPagingKey = (key: string): key is PageKey =>\n  PageKeys.includes(key);\n\nconst NULL_CELL_POS: CellPos = [-1, -1];\n\nfunction nextCellPos(\n  key: ArrowKey,\n  [rowIdx, colIdx]: CellPos,\n  columnCount: number,\n  rowCount: number,\n): CellPos {\n  if (key === \"ArrowUp\") {\n    if (rowIdx > -1) {\n      return [rowIdx - 1, colIdx];\n    } else {\n      return [rowIdx, colIdx];\n    }\n  } else if (key === \"ArrowDown\") {\n    if (rowIdx === -1) {\n      return [0, colIdx];\n    } else if (rowIdx === rowCount - 1) {\n      return [rowIdx, colIdx];\n    } else {\n      return [rowIdx + 1, colIdx];\n    }\n  } else if (key === \"ArrowRight\") {\n    // The colIdx is 1 based, because of the selection decorator\n    if (colIdx < columnCount) {\n      return [rowIdx, colIdx + 1];\n    } else {\n      return [rowIdx, colIdx];\n    }\n  } else if (key === \"ArrowLeft\") {\n    if (colIdx > 1) {\n      return [rowIdx, colIdx - 1];\n    } else {\n      return [rowIdx, colIdx];\n    }\n  }\n  return [rowIdx, colIdx];\n}\n\nexport interface NavigationHookProps {\n  containerRef: RefObject<HTMLElement>;\n  columnCount?: number;\n  defaultHighlightedIndex?: number;\n  disableFocus?: boolean;\n  disableHighlightOnFocus?: boolean;\n  highlightedIndex?: number;\n  label?: string;\n  navigationStyle: TableNavigationStyle;\n  viewportRange: VuuRange;\n  onHighlight?: (idx: number) => void;\n  requestScroll?: ScrollRequestHandler;\n  restoreLastFocus?: boolean;\n  rowCount?: number;\n  selected?: unknown;\n  viewportRowCount: number;\n}\n\nexport const useKeyboardNavigation = ({\n  columnCount = 0,\n  containerRef,\n  disableFocus = false,\n  defaultHighlightedIndex,\n  disableHighlightOnFocus,\n  highlightedIndex: highlightedIndexProp,\n  navigationStyle,\n  requestScroll,\n  onHighlight,\n  rowCount = 0,\n  viewportRowCount,\n}: // viewportRange,\nNavigationHookProps) => {\n  // const { from: viewportFirstRow, to: viewportLastRow } = viewportRange;\n  const focusedCellPos = useRef<CellPos>([-1, -1]);\n  const focusableCell = useRef<HTMLElement>();\n  const activeCellPos = useRef<CellPos>([-1, 0]);\n  // Keep this in sync with state value. This can be used by functions that need\n  // to reference highlightedIndex at call time but do not need to be regenerated\n  // every time it changes (i.e keep highlightedIndex out of their dependency\n  // arrays, as it can update frequently)\n  const highlightedIndexRef = useRef<number | undefined>();\n\n  const [highlightedIndex, setHighlightedIdx] = useControlled({\n    controlled: highlightedIndexProp,\n    default: defaultHighlightedIndex,\n    name: \"UseKeyboardNavigation\",\n  });\n  highlightedIndexRef.current = highlightedIndex;\n  const setHighlightedIndex = useCallback(\n    (idx: number, fromKeyboard = false) => {\n      onHighlight?.(idx);\n      setHighlightedIdx(idx);\n      if (fromKeyboard) {\n        // lastFocus.current = idx;\n      }\n    },\n    [onHighlight, setHighlightedIdx],\n  );\n\n  const getFocusedCell = (element: HTMLElement | Element | null) =>\n    element?.closest(\n      \"[role='columnHeader'],[role='cell']\",\n    ) as HTMLDivElement | null;\n\n  const getTableCellPos = (tableCell: HTMLDivElement): CellPos => {\n    if (tableCell.role === \"columnHeader\") {\n      const colIdx = parseInt(tableCell.dataset.idx ?? \"-1\", 10);\n      return [-1, colIdx];\n    } else {\n      const focusedRow = tableCell.closest(\"[role='row']\") as HTMLElement;\n      if (focusedRow) {\n        const rowIdx = getIndexFromRowElement(focusedRow);\n        // TODO will get trickier when we introduce horizontal virtualisation\n        const colIdx = Array.from(focusedRow.childNodes).indexOf(tableCell);\n        return [rowIdx, colIdx];\n      }\n    }\n    return NULL_CELL_POS;\n  };\n\n  const focusCell = useCallback(\n    (cellPos: CellPos) => {\n      if (containerRef.current) {\n        const activeCell = getTableCell(containerRef, cellPos);\n        if (activeCell) {\n          if (activeCell !== focusableCell.current) {\n            focusableCell.current?.removeAttribute(\"tabindex\");\n            focusableCell.current = activeCell;\n            activeCell.setAttribute(\"tabindex\", \"0\");\n          }\n          // TODO needs to be scroll cell\n          requestScroll?.({ type: \"scroll-row\", rowIndex: cellPos[0] });\n          activeCell.focus({ preventScroll: true });\n        }\n      }\n    },\n    // TODO we recreate this function whenever viewportRange changes, which will\n    // be often whilst scrolling - store range in a a ref ?\n    [containerRef, requestScroll],\n  );\n\n  const setActiveCell = useCallback(\n    (rowIdx: number, colIdx: number, fromKeyboard = false) => {\n      const pos: CellPos = [rowIdx, colIdx];\n      activeCellPos.current = pos;\n      if (navigationStyle === \"row\") {\n        setHighlightedIdx(rowIdx);\n      } else {\n        focusCell(pos);\n      }\n      if (fromKeyboard) {\n        focusedCellPos.current = pos;\n      }\n    },\n    [focusCell, navigationStyle, setHighlightedIdx],\n  );\n\n  const nextPageItemIdx = useCallback(\n    (\n      key: \"PageDown\" | \"PageUp\" | \"Home\" | \"End\",\n      [rowIdx, colIdx]: CellPos,\n    ): Promise<CellPos> =>\n      new Promise((resolve) => {\n        let newRowIdx = rowIdx;\n        switch (key) {\n          case \"PageDown\": {\n            newRowIdx = Math.min(rowCount - 1, rowIdx + viewportRowCount);\n            if (newRowIdx !== rowIdx) {\n              requestScroll?.({ type: \"scroll-page\", direction: \"down\" });\n            }\n            break;\n          }\n          case \"PageUp\": {\n            newRowIdx = Math.max(0, rowIdx - viewportRowCount);\n            if (newRowIdx !== rowIdx) {\n              requestScroll?.({ type: \"scroll-page\", direction: \"up\" });\n            }\n            break;\n          }\n          case \"Home\": {\n            newRowIdx = 0;\n            if (newRowIdx !== rowIdx) {\n              requestScroll?.({ type: \"scroll-end\", direction: \"home\" });\n            }\n            break;\n          }\n          case \"End\": {\n            newRowIdx = rowCount - 1;\n            if (newRowIdx !== rowIdx) {\n              requestScroll?.({ type: \"scroll-end\", direction: \"end\" });\n            }\n            break;\n          }\n        }\n        // Introduce a delay to allow the scroll operation to complete,\n        // which will trigger a range reset and rerender of rows. We\n        // might need to tweak how this works. If we introduce too big\n        // a delay, we risk seeing the newly rendered rows, with the focus\n        // still on the old cell, which will be apparent as a brief flash\n        // of the old cell focus before switching to correct cell. If we were\n        // to change the way re assign keys such that we can guarantee that\n        // when we page down, rows in same position get same keys, then same\n        // cell would be focussed in new page as previous and issue would not\n        // arise.\n        setTimeout(() => {\n          resolve([newRowIdx, colIdx]);\n        }, 35);\n      }),\n    [requestScroll, rowCount, viewportRowCount],\n  );\n\n  const handleFocus = useCallback(() => {\n    if (disableHighlightOnFocus !== true) {\n      if (containerRef.current?.contains(document.activeElement)) {\n        // IF focus arrives via keyboard, a cell will have received focus,\n        // we handle that here. If focus arrives via click on a cell with\n        // no tabindex (i.e all cells except one) we leave that to the\n        // click handler.\n        const focusedCell = getFocusedCell(document.activeElement);\n        if (focusedCell) {\n          focusedCellPos.current = getTableCellPos(focusedCell);\n          if (navigationStyle === \"row\") {\n            setHighlightedIdx(focusedCellPos.current[0]);\n          }\n        }\n      }\n    }\n  }, [\n    disableHighlightOnFocus,\n    containerRef,\n    navigationStyle,\n    setHighlightedIdx,\n  ]);\n\n  const navigateChildItems = useCallback(\n    async (key: NavigationKey) => {\n      const [nextRowIdx, nextColIdx] = isPagingKey(key)\n        ? await nextPageItemIdx(key, activeCellPos.current)\n        : nextCellPos(key, activeCellPos.current, columnCount, rowCount);\n      const [rowIdx, colIdx] = activeCellPos.current;\n      if (nextRowIdx !== rowIdx || nextColIdx !== colIdx) {\n        setActiveCell(nextRowIdx, nextColIdx, true);\n      }\n    },\n    [columnCount, nextPageItemIdx, rowCount, setActiveCell],\n  );\n\n  const scrollRowIntoViewIfNecessary = useCallback(\n    (rowIndex: number) => {\n      requestScroll?.({ type: \"scroll-row\", rowIndex });\n    },\n    [requestScroll],\n  );\n\n  const moveHighlightedRow = useCallback(\n    async (key: NavigationKey) => {\n      const { current: highlighted } = highlightedIndexRef;\n      const [nextRowIdx] = isPagingKey(key)\n        ? await nextPageItemIdx(key, [highlighted ?? -1, 0])\n        : nextCellPos(key, [highlighted ?? -1, 0], columnCount, rowCount);\n      if (nextRowIdx !== highlighted) {\n        setHighlightedIndex(nextRowIdx);\n        // TO(DO make this a scroll request)\n        scrollRowIntoViewIfNecessary(nextRowIdx);\n      }\n    },\n    [\n      columnCount,\n      nextPageItemIdx,\n      rowCount,\n      scrollRowIntoViewIfNecessary,\n      setHighlightedIndex,\n    ],\n  );\n\n  useEffect(() => {\n    if (highlightedIndexProp !== undefined && highlightedIndexProp !== -1) {\n      requestAnimationFrame(() => {\n        // deferred call, ensuring table has fully rendered\n        scrollRowIntoViewIfNecessary(highlightedIndexProp);\n      });\n    }\n  }, [highlightedIndexProp, scrollRowIntoViewIfNecessary]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      const cell = queryClosest<HTMLDivElement>(e.target, \".vuuTableCell\");\n      if (cellDropdownShowing(cell)) {\n        return;\n      }\n      if (rowCount > 0 && isNavigationKey(e.key, navigationStyle)) {\n        e.preventDefault();\n        e.stopPropagation();\n        if (navigationStyle === \"row\") {\n          moveHighlightedRow(e.key);\n        } else {\n          void navigateChildItems(e.key);\n        }\n      }\n    },\n    [rowCount, navigationStyle, moveHighlightedRow, navigateChildItems],\n  );\n\n  const handleClick = useCallback(\n    // Might not be a cell e.g the Settings button\n    (evt: MouseEvent) => {\n      const target = evt.target as HTMLElement;\n      const focusedCell = getFocusedCell(target);\n      if (focusedCell) {\n        const [rowIdx, colIdx] = getTableCellPos(focusedCell);\n        setActiveCell(rowIdx, colIdx);\n      }\n    },\n    [setActiveCell],\n  );\n\n  const handleMouseLeave = useCallback(() => {\n    setHighlightedIndex(-1);\n  }, [setHighlightedIndex]);\n\n  const handleMouseMove = useCallback(\n    (evt: MouseEvent) => {\n      const idx = closestRowIndex(evt.target as HTMLElement);\n      if (idx !== -1 && idx !== highlightedIndexRef.current) {\n        setHighlightedIndex(idx);\n      }\n    },\n    [setHighlightedIndex],\n  );\n\n  const navigate = useCallback(() => {\n    navigateChildItems(\"ArrowDown\");\n  }, [navigateChildItems]);\n\n  // First render will only render the outer container when explicit\n  // sizing has not been provided. Outer container is measured and\n  // only then, on second render,  is content rendered.\n  const fullyRendered = containerRef.current?.firstChild != null;\n  useEffect(() => {\n    if (fullyRendered && focusableCell.current === undefined && !disableFocus) {\n      const { current: container } = containerRef;\n      const cell = (container?.querySelector(headerCellQuery(0)) ||\n        container?.querySelector(dataCellQuery(0, 0))) as HTMLElement;\n      if (cell) {\n        cell.setAttribute(\"tabindex\", \"0\");\n        focusableCell.current = cell;\n      }\n    }\n  }, [containerRef, disableFocus, fullyRendered]);\n\n  return {\n    highlightedIndexRef,\n    navigate,\n    onClick: handleClick,\n    onFocus: handleFocus,\n    onKeyDown: handleKeyDown,\n    onMouseLeave: navigationStyle === \"row\" ? handleMouseLeave : undefined,\n    onMouseMove: navigationStyle === \"row\" ? handleMouseMove : undefined,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useKeyboardNavigation.js","sources":["../src/useKeyboardNavigation.ts"],"sourcesContent":["import { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { PageKey, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { useControlled } from \"@salt-ds/core\";\nimport {\n  KeyboardEvent,\n  MouseEvent,\n  MutableRefObject,\n  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { TableNavigationStyle } from \"./Table\";\nimport {\n  NavigationKey,\n  cellDropdownShowing,\n  closestRowIndex,\n  getTableCellPos,\n  getNextCellPos,\n} from \"./table-dom-utils\";\nimport { ScrollRequestHandler } from \"./useTableScroll\";\nimport { FocusCell } from \"./useCellFocus\";\nimport { CellFocusState, CellPos } from \"@vuu-ui/vuu-table-types\";\n\nconst rowNavigationKeys = new Set<NavigationKey>([\n  \"Home\",\n  \"End\",\n  \"PageUp\",\n  \"PageDown\",\n  \"ArrowDown\",\n  \"ArrowUp\",\n]);\n\nconst cellNavigationKeys = new Set(rowNavigationKeys);\ncellNavigationKeys.add(\"ArrowLeft\");\ncellNavigationKeys.add(\"ArrowRight\");\n\nexport const isNavigationKey = (\n  key: string,\n  navigationStyle: TableNavigationStyle,\n): key is NavigationKey => {\n  switch (navigationStyle) {\n    case \"cell\":\n      return cellNavigationKeys.has(key as NavigationKey);\n    case \"row\":\n      return rowNavigationKeys.has(key as NavigationKey);\n    default:\n      return false;\n  }\n};\n\nconst PageKeys = [\"Home\", \"End\", \"PageUp\", \"PageDown\"];\nexport const isPagingKey = (key: string): key is PageKey =>\n  PageKeys.includes(key);\n\nexport interface NavigationHookProps {\n  cellFocusStateRef: MutableRefObject<CellFocusState>;\n  containerRef: RefObject<HTMLElement>;\n  columnCount?: number;\n  defaultHighlightedIndex?: number;\n  disableFocus?: boolean;\n  disableHighlightOnFocus?: boolean;\n  focusCell: FocusCell;\n  highlightedIndex?: number;\n  label?: string;\n  navigationStyle: TableNavigationStyle;\n  viewportRange: VuuRange;\n  onHighlight?: (idx: number) => void;\n  requestScroll?: ScrollRequestHandler;\n  restoreLastFocus?: boolean;\n  rowCount?: number;\n  selected?: unknown;\n  viewportRowCount: number;\n}\n\nexport const useKeyboardNavigation = ({\n  cellFocusStateRef,\n  columnCount = 0,\n  containerRef,\n  defaultHighlightedIndex,\n  disableHighlightOnFocus,\n  focusCell,\n  highlightedIndex: highlightedIndexProp,\n  navigationStyle,\n  requestScroll,\n  onHighlight,\n  rowCount = 0,\n  viewportRowCount,\n}: NavigationHookProps) => {\n  const focusedCellPos = useRef<CellPos>([-1, -1]);\n  const activeCellPos = useRef<CellPos>([-1, 0]);\n  // Keep this in sync with state value. This can be used by functions that need\n  // to reference highlightedIndex at call time but do not need to be regenerated\n  // every time it changes (i.e keep highlightedIndex out of their dependency\n  // arrays, as it can update frequently)\n  const highlightedIndexRef = useRef<number | undefined>();\n\n  const [highlightedIndex, setHighlightedIdx] = useControlled({\n    controlled: highlightedIndexProp,\n    default: defaultHighlightedIndex,\n    name: \"UseKeyboardNavigation\",\n  });\n  highlightedIndexRef.current = highlightedIndex;\n  const setHighlightedIndex = useCallback(\n    (idx: number) => {\n      onHighlight?.(idx);\n      setHighlightedIdx(idx);\n    },\n    [onHighlight, setHighlightedIdx],\n  );\n\n  const getFocusedCell = (element: HTMLElement | Element | null) =>\n    element?.closest(\n      \"[role='columnHeader'],[role='cell']\",\n    ) as HTMLDivElement | null;\n\n  const setActiveCell = useCallback(\n    (rowIdx: number, colIdx: number, fromKeyboard = false) => {\n      const pos: CellPos = [rowIdx, colIdx];\n      // TODO do we still need this when we have cellFocusStateRef ?\n      activeCellPos.current = pos;\n      if (navigationStyle === \"row\") {\n        setHighlightedIdx(rowIdx);\n      } else {\n        focusCell(pos, fromKeyboard);\n      }\n      if (fromKeyboard) {\n        focusedCellPos.current = pos;\n      }\n    },\n    [focusCell, navigationStyle, setHighlightedIdx],\n  );\n\n  const nextPageItemIdx = useCallback(\n    (\n      key: \"PageDown\" | \"PageUp\" | \"Home\" | \"End\",\n      [rowIdx, colIdx]: CellPos,\n    ): Promise<CellPos> =>\n      new Promise((resolve) => {\n        let newRowIdx = rowIdx;\n        const { current: focusState } = cellFocusStateRef;\n        switch (key) {\n          case \"PageDown\": {\n            newRowIdx = Math.min(rowCount - 1, rowIdx + viewportRowCount);\n            if (newRowIdx !== rowIdx) {\n              focusState.cellPos = [newRowIdx, colIdx];\n              requestScroll?.({ type: \"scroll-page\", direction: \"down\" });\n            }\n            break;\n          }\n          case \"PageUp\": {\n            newRowIdx = Math.max(0, rowIdx - viewportRowCount);\n            if (newRowIdx !== rowIdx) {\n              focusState.cellPos = [newRowIdx, colIdx];\n              requestScroll?.({ type: \"scroll-page\", direction: \"up\" });\n            }\n            break;\n          }\n          case \"Home\": {\n            newRowIdx = 0;\n            if (newRowIdx !== rowIdx) {\n              focusState.cellPos = [0, colIdx];\n              requestScroll?.({ type: \"scroll-end\", direction: \"home\" });\n            }\n            break;\n          }\n          case \"End\": {\n            newRowIdx = rowCount - 1;\n            if (newRowIdx !== rowIdx) {\n              focusState.cellPos = [newRowIdx, colIdx];\n              requestScroll?.({ type: \"scroll-end\", direction: \"end\" });\n            }\n            break;\n          }\n        }\n        // Introduce a delay to allow the scroll operation to complete,\n        // which will trigger a range reset and rerender of rows. We\n        // might need to tweak how this works. If we introduce too big\n        // a delay, we risk seeing the newly rendered rows, with the focus\n        // still on the old cell, which will be apparent as a brief flash\n        // of the old cell focus before switching to correct cell. If we were\n        // to change the way re assign keys such that we can guarantee that\n        // when we page down, rows in same position get same keys, then same\n        // cell would be focussed in new page as previous and issue would not\n        // arise.\n        setTimeout(() => {\n          resolve([newRowIdx, colIdx]);\n        }, 35);\n      }),\n    [requestScroll, rowCount, viewportRowCount],\n  );\n\n  const handleFocus = useCallback(() => {\n    if (disableHighlightOnFocus !== true) {\n      if (containerRef.current?.contains(document.activeElement)) {\n        // IF focus arrives via keyboard, a cell will have received focus,\n        // we handle that here. If focus arrives via click on a cell with\n        // no tabindex (i.e all cells except one) we leave that to the\n        // click handler.\n        const focusedCell = getFocusedCell(document.activeElement);\n        if (focusedCell) {\n          focusedCellPos.current = getTableCellPos(focusedCell);\n          if (navigationStyle === \"row\") {\n            setHighlightedIdx(focusedCellPos.current[0]);\n          }\n        }\n      }\n    }\n  }, [\n    disableHighlightOnFocus,\n    containerRef,\n    navigationStyle,\n    setHighlightedIdx,\n  ]);\n\n  const navigateChildItems = useCallback(\n    async (key: NavigationKey) => {\n      const [nextRowIdx, nextColIdx] = isPagingKey(key)\n        ? await nextPageItemIdx(key, activeCellPos.current)\n        : getNextCellPos(key, activeCellPos.current, columnCount, rowCount);\n      const [rowIdx, colIdx] = activeCellPos.current;\n      if (nextRowIdx !== rowIdx || nextColIdx !== colIdx) {\n        setActiveCell(nextRowIdx, nextColIdx, true);\n      }\n    },\n    [columnCount, nextPageItemIdx, rowCount, setActiveCell],\n  );\n\n  const scrollRowIntoViewIfNecessary = useCallback(\n    (rowIndex: number) => {\n      requestScroll?.({ type: \"scroll-row\", rowIndex });\n    },\n    [requestScroll],\n  );\n\n  const moveHighlightedRow = useCallback(\n    async (key: NavigationKey) => {\n      const { current: highlighted } = highlightedIndexRef;\n      const [nextRowIdx] = isPagingKey(key)\n        ? await nextPageItemIdx(key, [highlighted ?? -1, 0])\n        : getNextCellPos(key, [highlighted ?? -1, 0], columnCount, rowCount);\n      if (nextRowIdx !== highlighted) {\n        setHighlightedIndex(nextRowIdx);\n        // TO(DO make this a scroll request)\n        scrollRowIntoViewIfNecessary(nextRowIdx);\n      }\n    },\n    [\n      columnCount,\n      nextPageItemIdx,\n      rowCount,\n      scrollRowIntoViewIfNecessary,\n      setHighlightedIndex,\n    ],\n  );\n\n  useEffect(() => {\n    if (highlightedIndexProp !== undefined && highlightedIndexProp !== -1) {\n      requestAnimationFrame(() => {\n        // deferred call, ensuring table has fully rendered\n        scrollRowIntoViewIfNecessary(highlightedIndexProp);\n      });\n    }\n  }, [highlightedIndexProp, scrollRowIntoViewIfNecessary]);\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent) => {\n      const cell = queryClosest<HTMLDivElement>(e.target, \".vuuTableCell\");\n      if (cellDropdownShowing(cell)) {\n        return;\n      }\n      if (rowCount > 0 && isNavigationKey(e.key, navigationStyle)) {\n        e.preventDefault();\n        e.stopPropagation();\n        if (navigationStyle === \"row\") {\n          moveHighlightedRow(e.key);\n        } else {\n          void navigateChildItems(e.key);\n        }\n      }\n    },\n    [rowCount, navigationStyle, moveHighlightedRow, navigateChildItems],\n  );\n\n  const handleClick = useCallback(\n    // Might not be a cell e.g the Settings button\n    (evt: MouseEvent) => {\n      const target = evt.target as HTMLElement;\n      const focusedCell = getFocusedCell(target);\n      if (focusedCell) {\n        const [rowIdx, colIdx] = getTableCellPos(focusedCell);\n        setActiveCell(rowIdx, colIdx);\n      }\n    },\n    [setActiveCell],\n  );\n\n  const handleMouseLeave = useCallback(() => {\n    setHighlightedIndex(-1);\n  }, [setHighlightedIndex]);\n\n  const handleMouseMove = useCallback(\n    (evt: MouseEvent) => {\n      const idx = closestRowIndex(evt.target as HTMLElement);\n      if (idx !== -1 && idx !== highlightedIndexRef.current) {\n        setHighlightedIndex(idx);\n      }\n    },\n    [setHighlightedIndex],\n  );\n\n  const navigate = useCallback(() => {\n    navigateChildItems(\"ArrowDown\");\n  }, [navigateChildItems]);\n\n  return {\n    highlightedIndexRef,\n    navigate,\n    onClick: handleClick,\n    onFocus: handleFocus,\n    onKeyDown: handleKeyDown,\n    onMouseLeave: navigationStyle === \"row\" ? handleMouseLeave : undefined,\n    onMouseMove: navigationStyle === \"row\" ? handleMouseMove : undefined,\n  };\n};\n"],"names":[],"mappings":"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"}

package/esm/useMeasuredHeight.js

@@ -5,26 +5,26 @@ const useMeasuredHeight = ({
   onHeightMeasured,
   height: heightProp = 0
 }) => {
-  const [rowHeight, setRowHeight] = useState(heightProp);
+  const [measuredHeight, setMeasuredHeight] = useState(heightProp);
   const resizeObserver = useMemo(() => {
     return new ResizeObserver((entries) => {
       for (const entry of entries) {
         const [{ blockSize: measuredSize }] = entry.borderBoxSize;
         const newHeight = Math.round(measuredSize);
         if (isValidNumber(newHeight)) {
-          setRowHeight(newHeight);
+          setMeasuredHeight(newHeight);
           onHeightMeasured?.(newHeight);
         }
       }
     });
   }, [onHeightMeasured]);
-  const rowRef = useCallback(
+  const measuredRef = useCallback(
     (el) => {
       if (el) {
         if (heightProp === 0) {
           const { height } = el.getBoundingClientRect();
           resizeObserver.observe(el);
-          setRowHeight(height);
+          setMeasuredHeight(Math.round(height));
         }
       } else {
         resizeObserver.disconnect();
@@ -32,7 +32,7 @@ const useMeasuredHeight = ({
     },
     [resizeObserver, heightProp]
   );
-  return { rowHeight, rowRef };
+  return { measuredHeight, measuredRef };
 };
 
 export { useMeasuredHeight };

package/esm/useMeasuredHeight.js.map

@@ -1 +1 @@
-{"version":3,"file":"useMeasuredHeight.js","sources":["../src/useMeasuredHeight.ts"],"sourcesContent":["import { isValidNumber } from \"@vuu-ui/vuu-utils\";\nimport { RefCallback, useCallback, useMemo, useState } from \"react\";\n\ninterface MeasuredHeightHookProps {\n  onHeightMeasured?: (height: number) => void;\n  height?: number;\n}\n\nexport const useMeasuredHeight = ({\n  onHeightMeasured,\n  height: heightProp = 0,\n}: MeasuredHeightHookProps) => {\n  const [rowHeight, setRowHeight] = useState(heightProp);\n\n  const resizeObserver = useMemo(() => {\n    return new ResizeObserver((entries: ResizeObserverEntry[]) => {\n      for (const entry of entries) {\n        const [{ blockSize: measuredSize }] = entry.borderBoxSize;\n        const newHeight = Math.round(measuredSize);\n        if (isValidNumber(newHeight)) {\n          setRowHeight(newHeight);\n          onHeightMeasured?.(newHeight);\n        }\n      }\n    });\n  }, [onHeightMeasured]);\n\n  const rowRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el) {\n        if (heightProp === 0) {\n          const { height } = el.getBoundingClientRect();\n          resizeObserver.observe(el);\n          setRowHeight(height);\n        }\n      } else {\n        resizeObserver.disconnect();\n      }\n    },\n    [resizeObserver, heightProp],\n  );\n  return { rowHeight, rowRef };\n};\n"],"names":[],"mappings":";;;AAQO,MAAM,oBAAoB,CAAC;AAAA,EAChC,gBAAA;AAAA,EACA,QAAQ,UAAa,GAAA,CAAA;AACvB,CAA+B,KAAA;AAC7B,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,UAAU,CAAA,CAAA;AAErD,EAAM,MAAA,cAAA,GAAiB,QAAQ,MAAM;AACnC,IAAO,OAAA,IAAI,cAAe,CAAA,CAAC,OAAmC,KAAA;AAC5D,MAAA,KAAA,MAAW,SAAS,OAAS,EAAA;AAC3B,QAAA,MAAM,CAAC,EAAE,SAAA,EAAW,YAAa,EAAC,IAAI,KAAM,CAAA,aAAA,CAAA;AAC5C,QAAM,MAAA,SAAA,GAAY,IAAK,CAAA,KAAA,CAAM,YAAY,CAAA,CAAA;AACzC,QAAI,IAAA,aAAA,CAAc,SAAS,CAAG,EAAA;AAC5B,UAAA,YAAA,CAAa,SAAS,CAAA,CAAA;AACtB,UAAA,gBAAA,GAAmB,SAAS,CAAA,CAAA;AAAA,SAC9B;AAAA,OACF;AAAA,KACD,CAAA,CAAA;AAAA,GACH,EAAG,CAAC,gBAAgB,CAAC,CAAA,CAAA;AAErB,EAAA,MAAM,MAAS,GAAA,WAAA;AAAA,IACb,CAAC,EAAO,KAAA;AACN,MAAA,IAAI,EAAI,EAAA;AACN,QAAA,IAAI,eAAe,CAAG,EAAA;AACpB,UAAA,MAAM,EAAE,MAAA,EAAW,GAAA,EAAA,CAAG,qBAAsB,EAAA,CAAA;AAC5C,UAAA,cAAA,CAAe,QAAQ,EAAE,CAAA,CAAA;AACzB,UAAA,YAAA,CAAa,MAAM,CAAA,CAAA;AAAA,SACrB;AAAA,OACK,MAAA;AACL,QAAA,cAAA,CAAe,UAAW,EAAA,CAAA;AAAA,OAC5B;AAAA,KACF;AAAA,IACA,CAAC,gBAAgB,UAAU,CAAA;AAAA,GAC7B,CAAA;AACA,EAAO,OAAA,EAAE,WAAW,MAAO,EAAA,CAAA;AAC7B;;;;"}
+{"version":3,"file":"useMeasuredHeight.js","sources":["../src/useMeasuredHeight.ts"],"sourcesContent":["import { isValidNumber } from \"@vuu-ui/vuu-utils\";\nimport { RefCallback, useCallback, useMemo, useState } from \"react\";\n\ninterface MeasuredHeightHookProps {\n  onHeightMeasured?: (height: number) => void;\n  height?: number;\n}\n\nexport const useMeasuredHeight = ({\n  onHeightMeasured,\n  height: heightProp = 0,\n}: MeasuredHeightHookProps) => {\n  const [measuredHeight, setMeasuredHeight] = useState(heightProp);\n\n  const resizeObserver = useMemo(() => {\n    return new ResizeObserver((entries: ResizeObserverEntry[]) => {\n      for (const entry of entries) {\n        const [{ blockSize: measuredSize }] = entry.borderBoxSize;\n        const newHeight = Math.round(measuredSize);\n        if (isValidNumber(newHeight)) {\n          setMeasuredHeight(newHeight);\n          onHeightMeasured?.(newHeight);\n        }\n      }\n    });\n  }, [onHeightMeasured]);\n\n  const measuredRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el) {\n        if (heightProp === 0) {\n          const { height } = el.getBoundingClientRect();\n          resizeObserver.observe(el);\n          // avoids tiny sub-pixel discrepancies\n          setMeasuredHeight(Math.round(height));\n        }\n      } else {\n        resizeObserver.disconnect();\n      }\n    },\n    [resizeObserver, heightProp],\n  );\n  return { measuredHeight, measuredRef };\n};\n"],"names":[],"mappings":";;;AAQO,MAAM,oBAAoB,CAAC;AAAA,EAChC,gBAAA;AAAA,EACA,QAAQ,UAAa,GAAA,CAAA;AACvB,CAA+B,KAAA;AAC7B,EAAA,MAAM,CAAC,cAAA,EAAgB,iBAAiB,CAAA,GAAI,SAAS,UAAU,CAAA,CAAA;AAE/D,EAAM,MAAA,cAAA,GAAiB,QAAQ,MAAM;AACnC,IAAO,OAAA,IAAI,cAAe,CAAA,CAAC,OAAmC,KAAA;AAC5D,MAAA,KAAA,MAAW,SAAS,OAAS,EAAA;AAC3B,QAAA,MAAM,CAAC,EAAE,SAAA,EAAW,YAAa,EAAC,IAAI,KAAM,CAAA,aAAA,CAAA;AAC5C,QAAM,MAAA,SAAA,GAAY,IAAK,CAAA,KAAA,CAAM,YAAY,CAAA,CAAA;AACzC,QAAI,IAAA,aAAA,CAAc,SAAS,CAAG,EAAA;AAC5B,UAAA,iBAAA,CAAkB,SAAS,CAAA,CAAA;AAC3B,UAAA,gBAAA,GAAmB,SAAS,CAAA,CAAA;AAAA,SAC9B;AAAA,OACF;AAAA,KACD,CAAA,CAAA;AAAA,GACH,EAAG,CAAC,gBAAgB,CAAC,CAAA,CAAA;AAErB,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,EAAO,KAAA;AACN,MAAA,IAAI,EAAI,EAAA;AACN,QAAA,IAAI,eAAe,CAAG,EAAA;AACpB,UAAA,MAAM,EAAE,MAAA,EAAW,GAAA,EAAA,CAAG,qBAAsB,EAAA,CAAA;AAC5C,UAAA,cAAA,CAAe,QAAQ,EAAE,CAAA,CAAA;AAEzB,UAAkB,iBAAA,CAAA,IAAA,CAAK,KAAM,CAAA,MAAM,CAAC,CAAA,CAAA;AAAA,SACtC;AAAA,OACK,MAAA;AACL,QAAA,cAAA,CAAe,UAAW,EAAA,CAAA;AAAA,OAC5B;AAAA,KACF;AAAA,IACA,CAAC,gBAAgB,UAAU,CAAA;AAAA,GAC7B,CAAA;AACA,EAAO,OAAA,EAAE,gBAAgB,WAAY,EAAA,CAAA;AACvC;;;;"}

package/esm/useTable.js

@@ -1,24 +1,33 @@
 import { useDragDrop } from '@vuu-ui/vuu-ui-controls';
-import { useLayoutEffectSkipFirst, buildColumnMap, updateColumn, toggleOrApplySort, isValidNumber, isJsonGroup, isGroupColumn, asDataSourceRowObject, getIndexFromRowElement, metadataKeys } from '@vuu-ui/vuu-utils';
+import { useLayoutEffectSkipFirst, buildColumnMap, updateColumn, toggleOrApplySort, isValidNumber, isJsonGroup, isGroupColumn, asDataSourceRowObject, metadataKeys } from '@vuu-ui/vuu-utils';
 import { useRef, useMemo, useState, useCallback, useEffect } from 'react';
+import { useCellBlockSelection } from './cell-block/useCellBlockSelection.js';
 import { buildContextMenuDescriptors } from './context-menu/buildContextMenuDescriptors.js';
 import { useHandleTableContextMenu } from './context-menu/useHandleTableContextMenu.js';
 import { updateTableConfig } from './table-config.js';
+import { getIndexFromRowElement } from './table-dom-utils.js';
 import { useCellEditing } from './useCellEditing.js';
+import { useCellFocus } from './useCellFocus.js';
 import { useDataSource } from './useDataSource.js';
 import { useKeyboardNavigation } from './useKeyboardNavigation.js';
+import { useRowClassNameGenerators } from './useRowClassNameGenerators.js';
 import { useSelection } from './useSelection.js';
+import { useTableAndColumnSettings } from './useTableAndColumnSettings.js';
 import { useTableContextMenu } from './useTableContextMenu.js';
 import { useTableModel, isShowColumnSettings, isShowTableSettings } from './useTableModel.js';
 import { useTableScroll } from './useTableScroll.js';
 import { useTableViewport } from './useTableViewport.js';
-import { useTableAndColumnSettings } from './useTableAndColumnSettings.js';
-import { useRowClassNameGenerators } from './useRowClassNameGenerators.js';
-import { useCellBlockSelection } from './cell-block/useCellBlockSelection.js';
 
 const stripInternalProperties = (tableConfig) => {
   return tableConfig;
 };
+const NullCellFocusState = {
+  cellPos: void 0,
+  el: null,
+  outsideViewport: false,
+  placeholderEl: null,
+  pos: void 0
+};
 const { KEY, IS_EXPANDED, IS_LEAF } = metadataKeys;
 const NULL_DRAG_DROP = {
   draggable: void 0,
@@ -61,6 +70,8 @@ const useTable = ({
   useMemo(() => {
     tableConfigRef.current = config;
   }, [config]);
+  const cellFocusStateRef = useRef(NullCellFocusState);
+  const focusCellRef = useRef();
   const [headerHeight, setHeaderHeight] = useState(showColumnHeaders ? -1 : 0);
   const [rowCount, setRowCount] = useState(dataSource.size);
   if (dataSource === void 0) {
@@ -153,7 +164,9 @@ const useTable = ({
     onSubscribed
   });
   const { requestScroll, ...scrollProps } = useTableScroll({
+    cellFocusStateRef,
     columns,
+    focusCell: focusCellRef.current,
     getRowAtPosition,
     rowHeight,
     scrollingApiRef,
@@ -380,6 +393,19 @@ const useTable = ({
     },
     [columnMap, columns, dataSource, dispatchTableModelAction]
   );
+  const {
+    focusCell,
+    focusCellPlaceholderKeyDown,
+    focusCellPlaceholderRef,
+    tableBodyRef
+  } = useCellFocus({
+    cellFocusStateRef,
+    containerRef,
+    disableFocus,
+    requestScroll
+  });
+  focusCellRef.current = focusCell;
+  const columnCount = columns.filter((c) => c.hidden !== true).length;
   const {
     highlightedIndexRef,
     navigate,
@@ -387,13 +413,15 @@ const useTable = ({
     onKeyDown: navigationKeyDown,
     ...containerProps
   } = useKeyboardNavigation({
-    columnCount: columns.filter((c) => c.hidden !== true).length,
+    cellFocusStateRef,
+    columnCount,
     containerRef,
     disableFocus,
+    focusCell,
     highlightedIndex: highlightedIndexProp,
     navigationStyle,
     requestScroll,
-    rowCount: dataSource?.size,
+    rowCount,
     onHighlight,
     viewportRange: range,
     viewportRowCount: viewportMeasurements.rowCount
@@ -465,13 +493,24 @@ const useTable = ({
     onSelectionChange: handleSelectionChange,
     selectionModel
   });
+  const handleSelectCellBlock = useCallback(
+    (cellBlock2) => {
+      handleSelectionChange([]);
+      onSelectCellBlock?.(cellBlock2);
+    },
+    [handleSelectionChange, onSelectCellBlock]
+  );
   const {
     onMouseDown: cellBlockHookMouseDown,
     cellBlock,
     onKeyDown: cellBlockSelectionKeyDown
   } = useCellBlockSelection({
     allowCellBlockSelection,
-    onSelectCellBlock
+    columnCount,
+    containerRef,
+    focusCell,
+    onSelectCellBlock: handleSelectCellBlock,
+    rowCount
   });
   const handleRowClick = useCallback(
     (evt, row, rangeSelect, keepExistingSelection) => {
@@ -577,6 +616,8 @@ const useTable = ({
     columns,
     data,
     draggableRow,
+    focusCellPlaceholderKeyDown,
+    focusCellPlaceholderRef,
     getRowOffset,
     handleContextMenuAction,
     headerHeight,
@@ -602,6 +643,7 @@ const useTable = ({
     scrollProps,
     // TODO don't think we need these ...
     tableAttributes,
+    tableBodyRef,
     tableConfig,
     viewportMeasurements
   };