@vuu-ui/vuu-table 2.1.15 → 2.1.17

package/esm/useCell.js

@@ -2,7 +2,7 @@ import { getColumnStyle } from '@vuu-ui/vuu-utils';
 import cx from 'clsx';
 import { useMemo } from 'react';
 
-const useCell = (column, classBase, isHeader, hasError) => (
+const useCell = (column, classBase, isHeader) => (
   // TODO measure perf without the memo, might not be worth the cost
   useMemo(() => {
     const className = cx(classBase, column.className, {
@@ -10,15 +10,14 @@ const useCell = (column, classBase, isHeader, hasError) => (
       vuuPinRight: column.pin === "right",
       vuuEndPin: isHeader && column.pinnedWidth,
       [`${classBase}-editable`]: column.editable,
-      [`${classBase}-right`]: column.align === "right",
-      [`${classBase}-error`]: hasError
+      [`${classBase}-right`]: column.align === "right"
     });
     const style = getColumnStyle(column);
     return {
       className,
       style
     };
-  }, [classBase, column, isHeader, hasError])
+  }, [classBase, column, isHeader])
 );
 
 export { useCell };

package/esm/useCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCell.js","sources":["../../../packages/vuu-table/src/useCell.ts"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { getColumnStyle } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useMemo } from \"react\";\n\nexport const useCell = (\n  column: RuntimeColumnDescriptor,\n  classBase: string,\n  isHeader?: boolean,\n  hasError?: boolean,\n) =>\n  // TODO measure perf without the memo, might not be worth the cost\n  useMemo(() => {\n    const className = cx(classBase, column.className, {\n      vuuPinLeft: column.pin === \"left\",\n      vuuPinRight: column.pin === \"right\",\n      vuuEndPin: isHeader && column.pinnedWidth,\n      [`${classBase}-editable`]: column.editable,\n      [`${classBase}-right`]: column.align === \"right\",\n      [`${classBase}-error`]: hasError,\n    });\n\n    const style = getColumnStyle(column);\n    return {\n      className,\n      style,\n    };\n  }, [classBase, column, isHeader, hasError]);\n"],"names":[],"mappings":";;;;AAKO,MAAM,OAAU,GAAA,CACrB,MACA,EAAA,SAAA,EACA,QACA,EAAA,QAAA;AAAA;AAAA,EAGA,QAAQ,MAAM;AACZ,IAAA,MAAM,SAAY,GAAA,EAAA,CAAG,SAAW,EAAA,MAAA,CAAO,SAAW,EAAA;AAAA,MAChD,UAAA,EAAY,OAAO,GAAQ,KAAA,MAAA;AAAA,MAC3B,WAAA,EAAa,OAAO,GAAQ,KAAA,OAAA;AAAA,MAC5B,SAAA,EAAW,YAAY,MAAO,CAAA,WAAA;AAAA,MAC9B,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,MAAO,CAAA,QAAA;AAAA,MAClC,CAAC,CAAG,EAAA,SAAS,CAAQ,MAAA,CAAA,GAAG,OAAO,KAAU,KAAA,OAAA;AAAA,MACzC,CAAC,CAAA,EAAG,SAAS,CAAA,MAAA,CAAQ,GAAG;AAAA,KACzB,CAAA;AAED,IAAM,MAAA,KAAA,GAAQ,eAAe,MAAM,CAAA;AACnC,IAAO,OAAA;AAAA,MACL,SAAA;AAAA,MACA;AAAA,KACF;AAAA,KACC,CAAC,SAAA,EAAW,MAAQ,EAAA,QAAA,EAAU,QAAQ,CAAC;AAAA;;;;"}
+{"version":3,"file":"useCell.js","sources":["../../../packages/vuu-table/src/useCell.ts"],"sourcesContent":["import { RuntimeColumnDescriptor } from \"@vuu-ui/vuu-table-types\";\nimport { getColumnStyle } from \"@vuu-ui/vuu-utils\";\nimport cx from \"clsx\";\nimport { useMemo } from \"react\";\n\nexport const useCell = (\n  column: RuntimeColumnDescriptor,\n  classBase: string,\n  isHeader?: boolean,\n) =>\n  // TODO measure perf without the memo, might not be worth the cost\n  useMemo(() => {\n    const className = cx(classBase, column.className, {\n      vuuPinLeft: column.pin === \"left\",\n      vuuPinRight: column.pin === \"right\",\n      vuuEndPin: isHeader && column.pinnedWidth,\n      [`${classBase}-editable`]: column.editable,\n      [`${classBase}-right`]: column.align === \"right\",\n    });\n\n    const style = getColumnStyle(column);\n    return {\n      className,\n      style,\n    };\n  }, [classBase, column, isHeader]);\n"],"names":[],"mappings":";;;;AAKa,MAAA,OAAA,GAAU,CACrB,MAAA,EACA,SACA,EAAA,QAAA;AAAA;AAAA,EAGA,QAAQ,MAAM;AACZ,IAAA,MAAM,SAAY,GAAA,EAAA,CAAG,SAAW,EAAA,MAAA,CAAO,SAAW,EAAA;AAAA,MAChD,UAAA,EAAY,OAAO,GAAQ,KAAA,MAAA;AAAA,MAC3B,WAAA,EAAa,OAAO,GAAQ,KAAA,OAAA;AAAA,MAC5B,SAAA,EAAW,YAAY,MAAO,CAAA,WAAA;AAAA,MAC9B,CAAC,CAAA,EAAG,SAAS,CAAA,SAAA,CAAW,GAAG,MAAO,CAAA,QAAA;AAAA,MAClC,CAAC,CAAG,EAAA,SAAS,CAAQ,MAAA,CAAA,GAAG,OAAO,KAAU,KAAA;AAAA,KAC1C,CAAA;AAED,IAAM,MAAA,KAAA,GAAQ,eAAe,MAAM,CAAA;AACnC,IAAO,OAAA;AAAA,MACL,SAAA;AAAA,MACA;AAAA,KACF;AAAA,GACC,EAAA,CAAC,SAAW,EAAA,MAAA,EAAQ,QAAQ,CAAC;AAAA;;;;"}

package/esm/useCellEditing.js

@@ -1,38 +1,17 @@
-import { queryClosest, dispatchCustomEvent, isCharacterKey } from '@vuu-ui/vuu-utils';
+import { isCharacterKey } from '@vuu-ui/vuu-utils';
 import { useCallback } from 'react';
-import { getAriaCellPos, cellIsTextInput } from './table-dom-utils.js';
+import { cellIsTextInput } from './table-dom-utils.js';
 
-const useCellEditing = ({
-  focusCell,
-  navigate
-}) => {
+const useCellEditing = ({ navigate }) => {
   const commitHandler = useCallback(() => {
     navigate();
   }, [navigate]);
-  const editModeHandler = useCallback(
-    (e) => {
-      const tableCell = queryClosest(
-        e.target,
-        ".vuuTableCell",
-        true
-      );
-      if (e.type === "vuu-exit-edit-mode") {
-        tableCell.classList.remove("vuuEditing");
-        const cellPos = getAriaCellPos(tableCell);
-        focusCell(cellPos, true);
-      } else {
-        tableCell.classList.add("vuuEditing");
-      }
-    },
-    [focusCell]
-  );
   const editInput = useCallback(
     (evt) => {
       const cellEl = evt.target;
       const input = cellEl.matches("input") ? cellEl : cellEl.querySelector("input");
       if (input) {
         input.focus();
-        input.select();
       }
     },
     []
@@ -43,8 +22,6 @@ const useCellEditing = ({
       const input = cellEl.querySelector("input");
       if (input) {
         input.focus();
-        input.select();
-        dispatchCustomEvent(input, "vuu-begin-edit");
       }
     },
     []
@@ -76,19 +53,15 @@ const useCellEditing = ({
     (e) => {
       const el = e.target;
       el.removeEventListener("vuu-commit", commitHandler, true);
-      el.removeEventListener("vuu-enter-edit-mode", editModeHandler, true);
-      el.removeEventListener("vuu-exit-edit-mode", editModeHandler, true);
     },
-    [commitHandler, editModeHandler]
+    [commitHandler]
   );
   const handleFocus = useCallback(
     (e) => {
       const el = e.target;
       el.addEventListener("vuu-commit", commitHandler, true);
-      el.addEventListener("vuu-enter-edit-mode", editModeHandler, true);
-      el.addEventListener("vuu-exit-edit-mode", editModeHandler, true);
     },
-    [commitHandler, editModeHandler]
+    [commitHandler]
   );
   return {
     onBlur: handleBlur,

package/esm/useCellEditing.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCellEditing.js","sources":["../../../packages/vuu-table/src/useCellEditing.ts"],"sourcesContent":["import {\n  dispatchCustomEvent,\n  isCharacterKey,\n  queryClosest,\n} from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  KeyboardEvent as ReactKeyboardEvent,\n  MouseEvent,\n  useCallback,\n} from \"react\";\nimport { cellIsTextInput, getAriaCellPos } from \"./table-dom-utils\";\nimport { FocusCell } from \"./useCellFocus\";\n\nexport interface CellEditingHookProps {\n  focusCell: FocusCell;\n  navigate: () => void;\n}\n\nexport const useCellEditing = ({\n  focusCell,\n  navigate,\n}: CellEditingHookProps) => {\n  const commitHandler = useCallback(() => {\n    navigate();\n  }, [navigate]);\n\n  const editModeHandler = useCallback(\n    (e: Event) => {\n      const tableCell = queryClosest<HTMLDivElement>(\n        e.target,\n        \".vuuTableCell\",\n        true,\n      );\n      if (e.type === \"vuu-exit-edit-mode\") {\n        tableCell.classList.remove(\"vuuEditing\");\n        const cellPos = getAriaCellPos(tableCell);\n        focusCell(cellPos, true);\n      } else {\n        tableCell.classList.add(\"vuuEditing\");\n      }\n    },\n    [focusCell],\n  );\n\n  const editInput = useCallback(\n    (evt: MouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>) => {\n      const cellEl = evt.target as HTMLDivElement;\n      const input = cellEl.matches(\"input\")\n        ? (cellEl as HTMLInputElement)\n        : cellEl.querySelector(\"input\");\n\n      if (input) {\n        input.focus();\n        input.select();\n      }\n    },\n    [],\n  );\n\n  const focusInput = useCallback(\n    (evt: MouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>) => {\n      const cellEl = evt.target as HTMLDivElement;\n      const input = cellEl.querySelector(\"input\");\n      if (input) {\n        input.focus();\n        input.select();\n        // need to put the input into edit mode\n        dispatchCustomEvent(input, \"vuu-begin-edit\");\n      }\n    },\n    [],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: ReactKeyboardEvent<HTMLElement>) => {\n      const el = e.target as HTMLElement;\n      if (cellIsTextInput(el)) {\n        if (isCharacterKey(e.key)) {\n          editInput(e);\n        } else if (e.key === \"Enter\") {\n          focusInput(e);\n        }\n      }\n    },\n    [editInput, focusInput],\n  );\n\n  const handleDoubleClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      const el = e.target as HTMLElement;\n      if (el.matches(\"input\") || el.querySelector(\"input\")) {\n        editInput(e);\n        e.stopPropagation();\n      }\n    },\n    [editInput],\n  );\n\n  const handleBlur = useCallback<FocusEventHandler>(\n    (e) => {\n      const el = e.target as HTMLElement;\n      el.removeEventListener(\"vuu-commit\", commitHandler, true);\n      el.removeEventListener(\"vuu-enter-edit-mode\", editModeHandler, true);\n      el.removeEventListener(\"vuu-exit-edit-mode\", editModeHandler, true);\n    },\n    [commitHandler, editModeHandler],\n  );\n\n  const handleFocus = useCallback<FocusEventHandler>(\n    (e) => {\n      const el = e.target as HTMLElement;\n      el.addEventListener(\"vuu-commit\", commitHandler, true);\n      el.addEventListener(\"vuu-enter-edit-mode\", editModeHandler, true);\n      el.addEventListener(\"vuu-exit-edit-mode\", editModeHandler, true);\n    },\n    [commitHandler, editModeHandler],\n  );\n\n  return {\n    onBlur: handleBlur,\n    onDoubleClick: handleDoubleClick,\n    onFocus: handleFocus,\n    onKeyDown: handleKeyDown,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useCellEditing.js","sources":["../../../packages/vuu-table/src/useCellEditing.ts"],"sourcesContent":["import { isCharacterKey } from \"@vuu-ui/vuu-utils\";\nimport {\n  FocusEventHandler,\n  KeyboardEvent as ReactKeyboardEvent,\n  MouseEvent,\n  useCallback,\n} from \"react\";\nimport { cellIsTextInput } from \"./table-dom-utils\";\n\nexport interface CellEditingHookProps {\n  navigate: () => void;\n}\n\nexport const useCellEditing = ({ navigate }: CellEditingHookProps) => {\n  const commitHandler = useCallback(() => {\n    navigate();\n  }, [navigate]);\n\n  const editInput = useCallback(\n    (evt: MouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>) => {\n      const cellEl = evt.target as HTMLDivElement;\n      const input = cellEl.matches(\"input\")\n        ? (cellEl as HTMLInputElement)\n        : cellEl.querySelector(\"input\");\n\n      if (input) {\n        input.focus();\n      }\n    },\n    [],\n  );\n\n  const focusInput = useCallback(\n    (evt: MouseEvent<HTMLElement> | ReactKeyboardEvent<HTMLElement>) => {\n      const cellEl = evt.target as HTMLDivElement;\n      const input = cellEl.querySelector(\"input\");\n      if (input) {\n        input.focus();\n      }\n    },\n    [],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: ReactKeyboardEvent<HTMLElement>) => {\n      const el = e.target as HTMLElement;\n      if (cellIsTextInput(el)) {\n        if (isCharacterKey(e.key)) {\n          editInput(e);\n        } else if (e.key === \"Enter\") {\n          focusInput(e);\n        }\n      }\n    },\n    [editInput, focusInput],\n  );\n\n  const handleDoubleClick = useCallback(\n    (e: MouseEvent<HTMLElement>) => {\n      const el = e.target as HTMLElement;\n      if (el.matches(\"input\") || el.querySelector(\"input\")) {\n        editInput(e);\n        e.stopPropagation();\n      }\n    },\n    [editInput],\n  );\n\n  const handleBlur = useCallback<FocusEventHandler>(\n    (e) => {\n      const el = e.target as HTMLElement;\n      el.removeEventListener(\"vuu-commit\", commitHandler, true);\n    },\n    [commitHandler],\n  );\n\n  const handleFocus = useCallback<FocusEventHandler>(\n    (e) => {\n      const el = e.target as HTMLElement;\n      el.addEventListener(\"vuu-commit\", commitHandler, true);\n    },\n    [commitHandler],\n  );\n\n  return {\n    onBlur: handleBlur,\n    onDoubleClick: handleDoubleClick,\n    onFocus: handleFocus,\n    onKeyDown: handleKeyDown,\n  };\n};\n"],"names":[],"mappings":";;;;AAaO,MAAM,cAAiB,GAAA,CAAC,EAAE,QAAA,EAAqC,KAAA;AACpE,EAAM,MAAA,aAAA,GAAgB,YAAY,MAAM;AACtC,IAAS,QAAA,EAAA;AAAA,GACX,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,MAAM,SAAY,GAAA,WAAA;AAAA,IAChB,CAAC,GAAmE,KAAA;AAClE,MAAA,MAAM,SAAS,GAAI,CAAA,MAAA;AACnB,MAAM,MAAA,KAAA,GAAQ,OAAO,OAAQ,CAAA,OAAO,IAC/B,MACD,GAAA,MAAA,CAAO,cAAc,OAAO,CAAA;AAEhC,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,KAAA,CAAM,KAAM,EAAA;AAAA;AACd,KACF;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACjB,CAAC,GAAmE,KAAA;AAClE,MAAA,MAAM,SAAS,GAAI,CAAA,MAAA;AACnB,MAAM,MAAA,KAAA,GAAQ,MAAO,CAAA,aAAA,CAAc,OAAO,CAAA;AAC1C,MAAA,IAAI,KAAO,EAAA;AACT,QAAA,KAAA,CAAM,KAAM,EAAA;AAAA;AACd,KACF;AAAA,IACA;AAAC,GACH;AAEA,EAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,IACpB,CAAC,CAAuC,KAAA;AACtC,MAAA,MAAM,KAAK,CAAE,CAAA,MAAA;AACb,MAAI,IAAA,eAAA,CAAgB,EAAE,CAAG,EAAA;AACvB,QAAI,IAAA,cAAA,CAAe,CAAE,CAAA,GAAG,CAAG,EAAA;AACzB,UAAA,SAAA,CAAU,CAAC,CAAA;AAAA,SACb,MAAA,IAAW,CAAE,CAAA,GAAA,KAAQ,OAAS,EAAA;AAC5B,UAAA,UAAA,CAAW,CAAC,CAAA;AAAA;AACd;AACF,KACF;AAAA,IACA,CAAC,WAAW,UAAU;AAAA,GACxB;AAEA,EAAA,MAAM,iBAAoB,GAAA,WAAA;AAAA,IACxB,CAAC,CAA+B,KAAA;AAC9B,MAAA,MAAM,KAAK,CAAE,CAAA,MAAA;AACb,MAAA,IAAI,GAAG,OAAQ,CAAA,OAAO,KAAK,EAAG,CAAA,aAAA,CAAc,OAAO,CAAG,EAAA;AACpD,QAAA,SAAA,CAAU,CAAC,CAAA;AACX,QAAA,CAAA,CAAE,eAAgB,EAAA;AAAA;AACpB,KACF;AAAA,IACA,CAAC,SAAS;AAAA,GACZ;AAEA,EAAA,MAAM,UAAa,GAAA,WAAA;AAAA,IACjB,CAAC,CAAM,KAAA;AACL,MAAA,MAAM,KAAK,CAAE,CAAA,MAAA;AACb,MAAG,EAAA,CAAA,mBAAA,CAAoB,YAAc,EAAA,aAAA,EAAe,IAAI,CAAA;AAAA,KAC1D;AAAA,IACA,CAAC,aAAa;AAAA,GAChB;AAEA,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,CAAM,KAAA;AACL,MAAA,MAAM,KAAK,CAAE,CAAA,MAAA;AACb,MAAG,EAAA,CAAA,gBAAA,CAAiB,YAAc,EAAA,aAAA,EAAe,IAAI,CAAA;AAAA,KACvD;AAAA,IACA,CAAC,aAAa;AAAA,GAChB;AAEA,EAAO,OAAA;AAAA,IACL,MAAQ,EAAA,UAAA;AAAA,IACR,aAAe,EAAA,iBAAA;AAAA,IACf,OAAS,EAAA,WAAA;AAAA,IACT,SAAW,EAAA;AAAA,GACb;AACF;;;;"}

package/esm/useCellFocus.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCellFocus.js","sources":["../../../packages/vuu-table/src/useCellFocus.ts"],"sourcesContent":["import {\n  KeyboardEventHandler,\n  RefCallback,\n  RefObject,\n  useCallback,\n} from \"react\";\nimport {\n  dataCellQuery,\n  getTableCell,\n  headerCellQuery,\n} from \"./table-dom-utils\";\nimport { ScrollRequestHandler } from \"./useTableScroll\";\nimport { isArrowKey, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { CellPos } from \"@vuu-ui/vuu-table-types\";\nimport type { ICellFocusState } from \"./CellFocusState\";\n\nexport interface CellFocusHookProps {\n  cellFocusStateRef: RefObject<ICellFocusState>;\n  containerRef: RefObject<HTMLElement | null>;\n  disableFocus?: boolean;\n  requestScroll?: ScrollRequestHandler;\n}\n\nconst getCellPosition = (el: HTMLElement) => {\n  const top = parseInt(el.parentElement?.style.top ?? \"-1\");\n  return { top };\n};\n\nconst isDifferentCellPosition = (\n  currentPos: CellPos | undefined,\n  newPos: CellPos,\n) => {\n  if (currentPos === undefined) {\n    return true;\n  }\n  return currentPos[0] !== newPos[0] || currentPos[1] !== newPos[1];\n};\n\nexport type FocusCell = (cellPos: CellPos, fromKeyboard?: boolean) => void;\n\nexport const useCellFocus = ({\n  cellFocusStateRef,\n  containerRef,\n  disableFocus = false,\n  requestScroll,\n}: CellFocusHookProps) => {\n  const focusCellPlaceholderRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      cellFocusStateRef.current.placeholderEl = el;\n    },\n    [cellFocusStateRef],\n  );\n\n  const focusCell = useCallback<FocusCell>(\n    (cellPos) => {\n      if (containerRef.current) {\n        const { current: state } = cellFocusStateRef;\n        if (isDifferentCellPosition(state.cellPos, cellPos)) {\n          const activeCell = getTableCell(containerRef, cellPos);\n          if (activeCell) {\n            if (activeCell !== state.el) {\n              state.el?.removeAttribute(\"tabindex\");\n              activeCell.setAttribute(\"tabindex\", \"0\");\n\n              // TODO no need to measure if we're navigating horizontally\n              // state.cellPos = cellPos;\n              state.el = activeCell;\n              state.pos = getCellPosition(activeCell);\n              state.outsideViewport = false;\n\n              if (state.placeholderEl) {\n                state.placeholderEl.style.top = `${state.pos.top}px`;\n              }\n            }\n            state.cellPos = cellPos;\n\n            requestScroll?.({ type: \"scroll-row\", rowIndex: cellPos[0] });\n            activeCell.focus({ preventScroll: true });\n          }\n        }\n      }\n    },\n    [cellFocusStateRef, containerRef, requestScroll],\n  );\n\n  const setTableBodyRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el) {\n        const { current: state } = cellFocusStateRef;\n        const table = queryClosest<HTMLDivElement>(el, \".vuuTable\");\n        if (table) {\n          if (state.el === null && !disableFocus) {\n            const headerCell = table.querySelector<HTMLDivElement>(\n              headerCellQuery(1),\n            );\n            if (headerCell) {\n              headerCell.setAttribute(\"tabindex\", \"0\");\n              state.cellPos = [1, 1];\n              state.el = headerCell;\n              state.pos = { top: -20 };\n              if (state.placeholderEl) {\n                state.placeholderEl.style.top = `-20px`;\n              }\n            } else {\n              const cell = table.querySelector<HTMLDivElement>(\n                dataCellQuery(0, 0),\n              );\n              if (cell) {\n                cell.setAttribute(\"tabindex\", \"0\");\n                state.cellPos = [1, 1];\n                state.el = cell;\n                state.pos = { top: 0 };\n                if (state.placeholderEl) {\n                  state.placeholderEl.style.top = `0px`;\n                }\n              }\n            }\n          }\n        }\n      }\n    },\n    [cellFocusStateRef, disableFocus],\n  );\n\n  const focusCellPlaceholderKeyDown = useCallback<KeyboardEventHandler>(\n    (evt) => {\n      const { outsideViewport, pos } = cellFocusStateRef.current;\n      if (pos && isArrowKey(evt.key)) {\n        // TODO depends on whether we're scrolling up or down\n        if (outsideViewport === \"above\") {\n          requestScroll?.({ type: \"scroll-top\", scrollPos: pos.top });\n        } else if (outsideViewport === \"below\") {\n          requestScroll?.({ type: \"scroll-bottom\", scrollPos: pos.top });\n        } else {\n          throw Error(\n            `cellFocusPlaceholder should not have focus if inside viewport`,\n          );\n        }\n      }\n    },\n    [cellFocusStateRef, requestScroll],\n  );\n\n  return {\n    focusCell,\n    focusCellPlaceholderKeyDown,\n    focusCellPlaceholderRef,\n    setTableBodyRef,\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"useCellFocus.js","sources":["../../../packages/vuu-table/src/useCellFocus.ts"],"sourcesContent":["import {\n  KeyboardEventHandler,\n  RefCallback,\n  RefObject,\n  useCallback,\n} from \"react\";\nimport {\n  dataCellQuery,\n  getTableCell,\n  headerCellQuery,\n} from \"./table-dom-utils\";\nimport { ScrollRequestHandler } from \"./useTableScroll\";\nimport { isArrowKey, queryClosest } from \"@vuu-ui/vuu-utils\";\nimport { CellPos } from \"@vuu-ui/vuu-table-types\";\nimport type { ICellFocusState } from \"./CellFocusState\";\n\nexport interface CellFocusHookProps {\n  cellFocusStateRef: RefObject<ICellFocusState>;\n  containerRef: RefObject<HTMLElement | null>;\n  disableFocus?: boolean;\n  requestScroll?: ScrollRequestHandler;\n}\n\nconst getCellPosition = (el: HTMLElement) => {\n  const top = parseInt(el.parentElement?.style.top ?? \"-1\");\n  return { top };\n};\n\nconst isDifferentCellPosition = (\n  currentPos: CellPos | undefined,\n  newPos: CellPos,\n) => {\n  if (currentPos === undefined) {\n    return true;\n  }\n  return currentPos[0] !== newPos[0] || currentPos[1] !== newPos[1];\n};\n\nexport type FocusCell = (cellPos: CellPos, fromKeyboard?: boolean) => void;\n\nexport const useCellFocus = ({\n  cellFocusStateRef,\n  containerRef,\n  disableFocus = false,\n  requestScroll,\n}: CellFocusHookProps) => {\n  const focusCellPlaceholderRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      cellFocusStateRef.current.placeholderEl = el;\n    },\n    [cellFocusStateRef],\n  );\n\n  const focusCell = useCallback<FocusCell>(\n    (cellPos) => {\n      if (containerRef.current) {\n        const { current: state } = cellFocusStateRef;\n        if (isDifferentCellPosition(state.cellPos, cellPos)) {\n          const activeCell = getTableCell(containerRef, cellPos);\n          if (activeCell) {\n            if (activeCell !== state.el) {\n              state.el?.removeAttribute(\"tabindex\");\n              activeCell.setAttribute(\"tabindex\", \"0\");\n\n              // TODO no need to measure if we're navigating horizontally\n              // state.cellPos = cellPos;\n              state.el = activeCell;\n              state.pos = getCellPosition(activeCell);\n              state.outsideViewport = false;\n\n              if (state.placeholderEl) {\n                state.placeholderEl.style.top = `${state.pos.top}px`;\n              }\n            }\n            state.cellPos = cellPos;\n\n            requestScroll?.({ type: \"scroll-row\", rowIndex: cellPos[0] });\n            // if (activeCell.classList.contains(\"vuuTableCell-editable\")) {\n            //   const input = activeCell.querySelector(\"input\");\n            //   if (input) {\n            //     input.focus({ preventScroll: true });\n            //   } else {\n            //     activeCell.focus({ preventScroll: true });\n            //   }\n            // } else {\n            activeCell.focus({ preventScroll: true });\n            // }\n          }\n        }\n      }\n    },\n    [cellFocusStateRef, containerRef, requestScroll],\n  );\n\n  const setTableBodyRef = useCallback<RefCallback<HTMLDivElement>>(\n    (el) => {\n      if (el) {\n        const { current: state } = cellFocusStateRef;\n        const table = queryClosest<HTMLDivElement>(el, \".vuuTable\");\n        if (table) {\n          if (state.el === null && !disableFocus) {\n            const headerCell = table.querySelector<HTMLDivElement>(\n              headerCellQuery(1),\n            );\n            if (headerCell) {\n              headerCell.setAttribute(\"tabindex\", \"0\");\n              state.cellPos = [1, 1];\n              state.el = headerCell;\n              state.pos = { top: -20 };\n              if (state.placeholderEl) {\n                state.placeholderEl.style.top = `-20px`;\n              }\n            } else {\n              const cell = table.querySelector<HTMLDivElement>(\n                dataCellQuery(0, 0),\n              );\n              if (cell) {\n                cell.setAttribute(\"tabindex\", \"0\");\n                state.cellPos = [1, 1];\n                state.el = cell;\n                state.pos = { top: 0 };\n                if (state.placeholderEl) {\n                  state.placeholderEl.style.top = `0px`;\n                }\n              }\n            }\n          }\n        }\n      }\n    },\n    [cellFocusStateRef, disableFocus],\n  );\n\n  const focusCellPlaceholderKeyDown = useCallback<KeyboardEventHandler>(\n    (evt) => {\n      const { outsideViewport, pos } = cellFocusStateRef.current;\n      if (pos && isArrowKey(evt.key)) {\n        // TODO depends on whether we're scrolling up or down\n        if (outsideViewport === \"above\") {\n          requestScroll?.({ type: \"scroll-top\", scrollPos: pos.top });\n        } else if (outsideViewport === \"below\") {\n          requestScroll?.({ type: \"scroll-bottom\", scrollPos: pos.top });\n        } else {\n          throw Error(\n            `cellFocusPlaceholder should not have focus if inside viewport`,\n          );\n        }\n      }\n    },\n    [cellFocusStateRef, requestScroll],\n  );\n\n  return {\n    focusCell,\n    focusCellPlaceholderKeyDown,\n    focusCellPlaceholderRef,\n    setTableBodyRef,\n  };\n};\n"],"names":[],"mappings":"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"}

package/esm/useKeyboardNavigation.js

@@ -1,7 +1,7 @@
 import { queryClosest } from '@vuu-ui/vuu-utils';
 import { useControlled } from '@salt-ds/core';
 import { useRef, useCallback, useEffect } from 'react';
-import { getFocusedCell, getTreeNodeOperation, getLevelUp, getNextCellPos, cellDropdownShowing, getAriaCellPos, closestRowIndex } from './table-dom-utils.js';
+import { getFocusedCell, getTreeNodeOperation, getLevelUp, getNextEditableCellPos, getNextCellPos, cellDropdownShowing, getAriaCellPos, closestRowIndex } from './table-dom-utils.js';
 
 const rowNavigationKeys = /* @__PURE__ */ new Set([
   "Home",
@@ -71,6 +71,7 @@ const useKeyboardNavigation = ({
   containerRef,
   defaultHighlightedIndex,
   disableHighlightOnFocus,
+  editSessionInProgress,
   focusCell,
   headerCount,
   highlightedIndex: highlightedIndexProp,
@@ -188,6 +189,14 @@ const useKeyboardNavigation = ({
           onToggleGroup(treeNodeOperation, rowIdx - headerCount - 1);
         } else if (treeNodeOperation === "level-up") {
           [nextRowIdx, nextColIdx] = getLevelUp(containerRef, cellPos);
+        } else if (editSessionInProgress) {
+          [nextRowIdx, nextColIdx] = getNextEditableCellPos(
+            containerRef,
+            key,
+            cellPos,
+            columnCount,
+            maxRowIndex
+          );
         } else {
           [nextRowIdx, nextColIdx] = getNextCellPos(
             key,
@@ -206,6 +215,7 @@ const useKeyboardNavigation = ({
       cellFocusStateRef,
       nextPageItemIdx,
       containerRef,
+      editSessionInProgress,
       onToggleGroup,
       headerCount,
       columnCount,

package/esm/useKeyboardNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useKeyboardNavigation.js","sources":["../../../packages/vuu-table/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  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { TableNavigationStyle } from \"./Table\";\nimport {\n  NavigationKey,\n  cellDropdownShowing,\n  closestRowIndex,\n  getAriaCellPos,\n  getFocusedCell,\n  getNextCellPos,\n  getTreeNodeOperation,\n  getLevelUp as getLevelUp,\n} from \"./table-dom-utils\";\nimport { ScrollRequestHandler } from \"./useTableScroll\";\nimport { FocusCell } from \"./useCellFocus\";\nimport { CellPos } from \"@vuu-ui/vuu-table-types\";\nimport { CellFocusState } from \"./CellFocusState\";\n\nconst rowNavigationKeys = new Set<NavigationKey>([\n  \"Home\",\n  \"End\",\n  \"PageUp\",\n  \"PageDown\",\n  \"ArrowDown\",\n  \"ArrowUp\",\n]);\n\nconst CellLocator =\n  \".vuuTableCell,.vuuTableHeaderCell,.vuuTableGroupHeaderCell\";\n\nconst CellControlLocator = \".vuuColumnMenu,.vuuColumnHeaderPill\";\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    case \"tree\":\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\n// const editCellWithEditInProgress = (el: HTMLElement | null) => {\n//   if (el) {\n//     const input = el.querySelector(\"input\");\n//     return input && document.activeElement === input;\n//   }\n//   return false;\n// };\n\nconst focusControlWithinCell = (e: KeyboardEvent, el: HTMLElement | null) => {\n  if (e.shiftKey && e.key.match(/Arrow(Left|Right)/)) {\n    if (el?.classList.contains(\"vuuTableHeaderCell\")) {\n      const menuButton = el?.querySelector<HTMLButtonElement>(\".vuuColumnMenu\");\n      if (menuButton) {\n        menuButton.focus();\n        return true;\n      }\n    } else if (el?.classList.contains(\"vuuTableGroupHeaderCell\")) {\n      const headerPill = el?.querySelector<HTMLButtonElement>(\n        \".vuuColumnHeaderPill\",\n      );\n      if (headerPill) {\n        headerPill.focus();\n        return true;\n      }\n    } else if (el?.classList.contains(\"vuuColumnHeaderPill\")) {\n      const nextPill = el.parentElement?.nextElementSibling\n        ?.firstChild as HTMLElement;\n      if (nextPill?.classList.contains(\"vuuColumnHeaderPill\")) {\n        nextPill.focus();\n        return true;\n      } else {\n        const removeButton = queryClosest(\n          el,\n          \".vuuTableGroupHeaderCell\",\n          true,\n        ).querySelector(\".vuuTableGroupHeaderCell-removeAll\") as HTMLElement;\n        if (removeButton) {\n          removeButton.focus();\n          return true;\n        }\n      }\n    }\n  }\n  return false;\n};\n\nconst PageKeys = [\"Home\", \"End\", \"PageUp\", \"PageDown\"];\nexport const isPagingKey = (key: string): key is PageKey =>\n  PageKeys.includes(key);\n\nexport type GroupToggleHandler = (\n  treeNodeOperation: \"expand\" | \"collapse\",\n  rowIndex: number,\n) => void;\n\nexport interface NavigationHookProps {\n  cellFocusStateRef: RefObject<CellFocusState>;\n  containerRef: RefObject<HTMLElement | null>;\n  columnCount?: number;\n  headerCount: 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  onToggleGroup: GroupToggleHandler;\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  headerCount,\n  highlightedIndex: highlightedIndexProp,\n  navigationStyle,\n  requestScroll,\n  onHighlight,\n  onToggleGroup,\n  rowCount = 0,\n  viewportRowCount,\n}: NavigationHookProps) => {\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>(undefined);\n\n  const [highlightedIndex, setHighlightedIdx] = useControlled({\n    controlled: highlightedIndexProp,\n    default: defaultHighlightedIndex,\n    name: \"UseKeyboardNavigation\",\n  });\n  highlightedIndexRef.current = highlightedIndex;\n\n  // We use aria row index for tracking rows\n  const maxRowIndex = rowCount + headerCount;\n\n  const setHighlightedIndex = useCallback(\n    (idx: number) => {\n      onHighlight?.(idx);\n      setHighlightedIdx(idx);\n      highlightedIndexRef.current = idx;\n    },\n    [onHighlight, setHighlightedIdx],\n  );\n\n  const setActiveCell = useCallback(\n    (rowIdx: number, colIdx: number) => {\n      const pos: CellPos = [rowIdx, colIdx];\n      if (navigationStyle === \"row\") {\n        setHighlightedIdx(rowIdx);\n      } else {\n        focusCell(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 = headerCount + 1;\n            if (newRowIdx !== rowIdx) {\n              requestScroll?.({ type: \"scroll-end\", direction: \"home\" });\n            }\n            break;\n          }\n          case \"End\": {\n            newRowIdx = rowCount + headerCount;\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    [headerCount, requestScroll, rowCount, viewportRowCount],\n  );\n\n  const handleFocus = useCallback(() => {\n    // console.log(`[useKeyboardNavigation] handleFocus `);\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          cellFocusStateRef.current.cell = focusedCell;\n          if (navigationStyle === \"row\") {\n            setHighlightedIdx(cellFocusStateRef.current.cellPos?.[0]);\n          }\n        }\n      }\n    }\n  }, [\n    disableHighlightOnFocus,\n    containerRef,\n    cellFocusStateRef,\n    navigationStyle,\n    setHighlightedIdx,\n  ]);\n\n  const navigateChildItems = useCallback(\n    async (\n      navigationStyle: \"cell\" | \"tree\" = \"cell\",\n      key: NavigationKey,\n      shiftKey = false,\n    ): Promise<undefined> => {\n      const { cellPos } = cellFocusStateRef.current;\n      if (cellPos === undefined) {\n        throw Error(\"navigateChildItems called before cellPos is set\");\n      }\n      const [rowIdx, colIdx] = cellPos;\n      let nextRowIdx = -1,\n        nextColIdx = -1;\n\n      if (isPagingKey(key)) {\n        [nextRowIdx, nextColIdx] = await nextPageItemIdx(key, cellPos);\n      } else {\n        const treeNodeOperation = getTreeNodeOperation(\n          containerRef,\n          navigationStyle,\n          cellPos,\n          key,\n          shiftKey,\n        );\n        if (\n          treeNodeOperation === \"expand\" ||\n          treeNodeOperation === \"collapse\"\n        ) {\n          onToggleGroup(treeNodeOperation, rowIdx - headerCount - 1);\n        } else if (treeNodeOperation === \"level-up\") {\n          [nextRowIdx, nextColIdx] = getLevelUp(containerRef, cellPos);\n        } else {\n          [nextRowIdx, nextColIdx] = getNextCellPos(\n            key,\n            cellPos,\n            columnCount,\n            maxRowIndex,\n          );\n        }\n      }\n\n      if (nextRowIdx !== rowIdx || nextColIdx !== colIdx) {\n        setActiveCell(nextRowIdx, nextColIdx);\n        setHighlightedIndex(nextRowIdx);\n      }\n    },\n    [\n      cellFocusStateRef,\n      nextPageItemIdx,\n      containerRef,\n      onToggleGroup,\n      headerCount,\n      columnCount,\n      maxRowIndex,\n      setActiveCell,\n      setHighlightedIndex,\n    ],\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, maxRowIndex);\n      if (nextRowIdx !== highlighted) {\n        setHighlightedIndex(nextRowIdx);\n        // TO(DO make this a scroll request)\n        scrollRowIntoViewIfNecessary(nextRowIdx);\n      }\n    },\n    [\n      columnCount,\n      maxRowIndex,\n      nextPageItemIdx,\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      // console.log(`[useKeyboardNavigation] handleKeyDown`);\n\n      const cell = queryClosest<HTMLDivElement>(\n        e.target,\n        `${CellLocator},${CellControlLocator}`,\n      );\n      if (cellDropdownShowing(cell)) {\n        return;\n      }\n      if (rowCount > 0 && isNavigationKey(e.key, navigationStyle)) {\n        // if (e.key === \"ArrowDown\" && editCellWithEditInProgress(cell)) {\n        //   //  do nothing editCellWithEditInProgress\n        // } else {\n        // console.log(\n        //   `[useKeyboardNavigation] handleKeyDown - consume the keydown event`,\n        // );\n        e.preventDefault();\n        e.stopPropagation();\n        if (navigationStyle === \"row\") {\n          moveHighlightedRow(e.key);\n        } else if (navigationStyle !== \"none\") {\n          if (!focusControlWithinCell(e, cell)) {\n            navigateChildItems(navigationStyle, e.key, e.shiftKey);\n          }\n        }\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      // console.log(`[useKeyboardNavigation] click`);\n      const target = queryClosest<HTMLDivElement>(evt.target, CellLocator);\n      const focusedCell = getFocusedCell(target);\n      if (focusedCell) {\n        const [rowIdx, colIdx] = getAriaCellPos(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 rowIdx = closestRowIndex(evt.target as HTMLElement);\n      if (rowIdx !== -1 && rowIdx !== highlightedIndexRef.current) {\n        setHighlightedIndex(rowIdx);\n      }\n    },\n    [setHighlightedIndex],\n  );\n\n  /**\n   * used when editing cells\n   */\n  const navigateCell = useCallback(() => {\n    navigateChildItems(\"cell\", \"ArrowDown\");\n  }, [navigateChildItems]);\n\n  return {\n    highlightedIndexRef,\n    navigateCell,\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":["navigationStyle"],"mappings":"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"}
+{"version":3,"file":"useKeyboardNavigation.js","sources":["../../../packages/vuu-table/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  RefObject,\n  useCallback,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { TableNavigationStyle } from \"./Table\";\nimport {\n  NavigationKey,\n  cellDropdownShowing,\n  closestRowIndex,\n  getAriaCellPos,\n  getFocusedCell,\n  getNextCellPos,\n  getTreeNodeOperation,\n  getLevelUp as getLevelUp,\n  getNextEditableCellPos,\n} from \"./table-dom-utils\";\nimport { ScrollRequestHandler } from \"./useTableScroll\";\nimport { FocusCell } from \"./useCellFocus\";\nimport { CellPos } from \"@vuu-ui/vuu-table-types\";\nimport { CellFocusState } from \"./CellFocusState\";\n\nconst rowNavigationKeys = new Set<NavigationKey>([\n  \"Home\",\n  \"End\",\n  \"PageUp\",\n  \"PageDown\",\n  \"ArrowDown\",\n  \"ArrowUp\",\n]);\n\nconst CellLocator =\n  \".vuuTableCell,.vuuTableHeaderCell,.vuuTableGroupHeaderCell\";\n\nconst CellControlLocator = \".vuuColumnMenu,.vuuColumnHeaderPill\";\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    case \"tree\":\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 focusControlWithinCell = (e: KeyboardEvent, el: HTMLElement | null) => {\n  if (e.shiftKey && e.key.match(/Arrow(Left|Right)/)) {\n    if (el?.classList.contains(\"vuuTableHeaderCell\")) {\n      const menuButton = el?.querySelector<HTMLButtonElement>(\".vuuColumnMenu\");\n      if (menuButton) {\n        menuButton.focus();\n        return true;\n      }\n    } else if (el?.classList.contains(\"vuuTableGroupHeaderCell\")) {\n      const headerPill = el?.querySelector<HTMLButtonElement>(\n        \".vuuColumnHeaderPill\",\n      );\n      if (headerPill) {\n        headerPill.focus();\n        return true;\n      }\n    } else if (el?.classList.contains(\"vuuColumnHeaderPill\")) {\n      const nextPill = el.parentElement?.nextElementSibling\n        ?.firstChild as HTMLElement;\n      if (nextPill?.classList.contains(\"vuuColumnHeaderPill\")) {\n        nextPill.focus();\n        return true;\n      } else {\n        const removeButton = queryClosest(\n          el,\n          \".vuuTableGroupHeaderCell\",\n          true,\n        ).querySelector(\".vuuTableGroupHeaderCell-removeAll\") as HTMLElement;\n        if (removeButton) {\n          removeButton.focus();\n          return true;\n        }\n      }\n    }\n  }\n  return false;\n};\n\nconst PageKeys = [\"Home\", \"End\", \"PageUp\", \"PageDown\"];\nexport const isPagingKey = (key: string): key is PageKey =>\n  PageKeys.includes(key);\n\nexport type GroupToggleHandler = (\n  treeNodeOperation: \"expand\" | \"collapse\",\n  rowIndex: number,\n) => void;\n\nexport interface NavigationHookProps {\n  cellFocusStateRef: RefObject<CellFocusState>;\n  containerRef: RefObject<HTMLElement | null>;\n  columnCount?: number;\n  headerCount: number;\n  defaultHighlightedIndex?: number;\n  disableFocus?: boolean;\n  disableHighlightOnFocus?: boolean;\n  editSessionInProgress?: boolean;\n  focusCell: FocusCell;\n  highlightedIndex?: number;\n  label?: string;\n  navigationStyle: TableNavigationStyle;\n  viewportRange: VuuRange;\n  onHighlight?: (idx: number) => void;\n  onToggleGroup: GroupToggleHandler;\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  editSessionInProgress,\n  focusCell,\n  headerCount,\n  highlightedIndex: highlightedIndexProp,\n  navigationStyle,\n  requestScroll,\n  onHighlight,\n  onToggleGroup,\n  rowCount = 0,\n  viewportRowCount,\n}: NavigationHookProps) => {\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>(undefined);\n\n  const [highlightedIndex, setHighlightedIdx] = useControlled({\n    controlled: highlightedIndexProp,\n    default: defaultHighlightedIndex,\n    name: \"UseKeyboardNavigation\",\n  });\n  highlightedIndexRef.current = highlightedIndex;\n\n  // We use aria row index for tracking rows\n  const maxRowIndex = rowCount + headerCount;\n\n  const setHighlightedIndex = useCallback(\n    (idx: number) => {\n      onHighlight?.(idx);\n      setHighlightedIdx(idx);\n      highlightedIndexRef.current = idx;\n    },\n    [onHighlight, setHighlightedIdx],\n  );\n\n  const setActiveCell = useCallback(\n    (rowIdx: number, colIdx: number) => {\n      const pos: CellPos = [rowIdx, colIdx];\n      if (navigationStyle === \"row\") {\n        setHighlightedIdx(rowIdx);\n      } else {\n        focusCell(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 = headerCount + 1;\n            if (newRowIdx !== rowIdx) {\n              requestScroll?.({ type: \"scroll-end\", direction: \"home\" });\n            }\n            break;\n          }\n          case \"End\": {\n            newRowIdx = rowCount + headerCount;\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    [headerCount, requestScroll, rowCount, viewportRowCount],\n  );\n\n  const handleFocus = useCallback(() => {\n    // console.log(`[useKeyboardNavigation] handleFocus `);\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          cellFocusStateRef.current.cell = focusedCell;\n          if (navigationStyle === \"row\") {\n            setHighlightedIdx(cellFocusStateRef.current.cellPos?.[0]);\n          }\n        }\n      }\n    }\n  }, [\n    disableHighlightOnFocus,\n    containerRef,\n    cellFocusStateRef,\n    navigationStyle,\n    setHighlightedIdx,\n  ]);\n\n  const navigateChildItems = useCallback(\n    async (\n      navigationStyle: \"cell\" | \"tree\" = \"cell\",\n      key: NavigationKey,\n      shiftKey = false,\n    ): Promise<undefined> => {\n      const { cellPos } = cellFocusStateRef.current;\n      if (cellPos === undefined) {\n        throw Error(\"navigateChildItems called before cellPos is set\");\n      }\n      const [rowIdx, colIdx] = cellPos;\n      let nextRowIdx = -1,\n        nextColIdx = -1;\n\n      if (isPagingKey(key)) {\n        [nextRowIdx, nextColIdx] = await nextPageItemIdx(key, cellPos);\n      } else {\n        const treeNodeOperation = getTreeNodeOperation(\n          containerRef,\n          navigationStyle,\n          cellPos,\n          key,\n          shiftKey,\n        );\n        if (\n          treeNodeOperation === \"expand\" ||\n          treeNodeOperation === \"collapse\"\n        ) {\n          onToggleGroup(treeNodeOperation, rowIdx - headerCount - 1);\n        } else if (treeNodeOperation === \"level-up\") {\n          [nextRowIdx, nextColIdx] = getLevelUp(containerRef, cellPos);\n        } else if (editSessionInProgress) {\n          [nextRowIdx, nextColIdx] = getNextEditableCellPos(\n            containerRef,\n            key,\n            cellPos,\n            columnCount,\n            maxRowIndex,\n          );\n        } else {\n          [nextRowIdx, nextColIdx] = getNextCellPos(\n            key,\n            cellPos,\n            columnCount,\n            maxRowIndex,\n          );\n        }\n      }\n\n      if (nextRowIdx !== rowIdx || nextColIdx !== colIdx) {\n        setActiveCell(nextRowIdx, nextColIdx);\n        setHighlightedIndex(nextRowIdx);\n      }\n    },\n    [\n      cellFocusStateRef,\n      nextPageItemIdx,\n      containerRef,\n      editSessionInProgress,\n      onToggleGroup,\n      headerCount,\n      columnCount,\n      maxRowIndex,\n      setActiveCell,\n      setHighlightedIndex,\n    ],\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, maxRowIndex);\n      if (nextRowIdx !== highlighted) {\n        setHighlightedIndex(nextRowIdx);\n        // TO(DO make this a scroll request)\n        scrollRowIntoViewIfNecessary(nextRowIdx);\n      }\n    },\n    [\n      columnCount,\n      maxRowIndex,\n      nextPageItemIdx,\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      // console.log(`[useKeyboardNavigation] handleKeyDown`);\n\n      const cell = queryClosest<HTMLDivElement>(\n        e.target,\n        `${CellLocator},${CellControlLocator}`,\n      );\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 if (navigationStyle !== \"none\") {\n          if (!focusControlWithinCell(e, cell)) {\n            navigateChildItems(navigationStyle, e.key, e.shiftKey);\n          }\n        }\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      // console.log(`[useKeyboardNavigation] click`);\n      const target = queryClosest<HTMLDivElement>(evt.target, CellLocator);\n      const focusedCell = getFocusedCell(target);\n      if (focusedCell) {\n        const [rowIdx, colIdx] = getAriaCellPos(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 rowIdx = closestRowIndex(evt.target as HTMLElement);\n      if (rowIdx !== -1 && rowIdx !== highlightedIndexRef.current) {\n        setHighlightedIndex(rowIdx);\n      }\n    },\n    [setHighlightedIndex],\n  );\n\n  /**\n   * used when editing cells\n   */\n  const navigateCell = useCallback(() => {\n    navigateChildItems(\"cell\", \"ArrowDown\");\n  }, [navigateChildItems]);\n\n  return {\n    highlightedIndexRef,\n    navigateCell,\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":["navigationStyle"],"mappings":"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"}

package/esm/useTable.js

@@ -1,6 +1,6 @@
 import { useColumnActions } from '@vuu-ui/vuu-table-extras';
 import { useDragDrop } from '@vuu-ui/vuu-ui-controls';
-import { useStableReference, useLayoutEffectSkipFirst, updateColumn, logUnhandledMessage, toggleOrApplySort, isValidNumber, getAllCellsInColumn, getPinStateFromElement, isJsonGroup, isGroupColumn, useEditSession, getAriaRowIndex, metadataKeys } from '@vuu-ui/vuu-utils';
+import { useEditSession, useStableReference, useLayoutEffectSkipFirst, updateColumn, logUnhandledMessage, toggleOrApplySort, isValidNumber, getAllCellsInColumn, getPinStateFromElement, isJsonGroup, isGroupColumn, getAriaRowIndex, metadataKeys } from '@vuu-ui/vuu-utils';
 import { useRef, useMemo, useState, useCallback, useEffect } from 'react';
 import { useCellBlockSelection } from './cell-block/useCellBlockSelection.js';
 import { CellFocusState } from './CellFocusState.js';
@@ -46,7 +46,7 @@ const useTable = ({
   id,
   navigationStyle = "cell",
   onConfigChange,
-  onDataEdited: onDataEditedProp,
+  // onDataEdited: onDataEditedProp,
   onDragStart,
   onDrop,
   onHighlight,
@@ -69,6 +69,7 @@ const useTable = ({
   useMemo(() => {
     tableConfigRef.current = config;
   }, [config]);
+  const editSession = useEditSession();
   const initialState = useMemo(() => new CellFocusState(), []);
   const cellFocusStateRef = useRef(initialState);
   const focusCellRef = useRef(void 0);
@@ -485,6 +486,7 @@ const useTable = ({
     columnCount,
     containerRef,
     disableFocus,
+    editSessionInProgress: editSession?.inEditMode,
     focusCell,
     headerCount: headerState.count,
     highlightedIndex: highlightedIndexProp,
@@ -502,7 +504,6 @@ const useTable = ({
     onKeyDown: editingKeyDown,
     onFocus: editingFocus
   } = useCellEditing({
-    focusCell,
     navigate
   });
   const handleFocus = useCallback(
@@ -656,35 +657,6 @@ const useTable = ({
     },
     [onDrop]
   );
-  const editSession = useEditSession();
-  const handleDataEdited = useCallback(
-    async (editState) => {
-      const {
-        editType = "commit",
-        isValid = true,
-        dataRow,
-        columnName,
-        previousValue = "",
-        value
-      } = editState;
-      if (editType === "commit" && isValid) {
-        if (editSession && dataRow && columnName) {
-          return editSession.commit(dataRow.key, columnName, value);
-        } else {
-          throw Error(
-            `[useTable] handleDataEdited, no editSession installed and datasource does not support RPC`
-          );
-        }
-      } else {
-        if (editSession && dataRow && columnName) {
-          editSession.edit(dataRow.key, columnName, previousValue, value);
-        } else {
-          onDataEditedProp?.(editState);
-        }
-      }
-    },
-    [editSession, onDataEditedProp]
-  );
   const handleDragStartRow = useCallback(
     (dragDropState) => {
       const { initialDragElement } = dragDropState;
@@ -745,7 +717,7 @@ const useTable = ({
     onKeyDown: handleKeyDown,
     onMouseDown: handleMouseDown,
     onContextMenu,
-    onDataEdited: handleDataEdited,
+    // onDataEdited: handleDataEdited,
     onHeaderHeightMeasured,
     onMoveColumn,
     onMoveGroupColumn,