@vuu-ui/vuu-table 0.8.93 → 0.8.95

package/cjs/cell-block/cellblock-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cellblock-utils.js","sources":["../../src/cell-block/cellblock-utils.ts"],"sourcesContent":["import { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\nimport { queryClosest } from \"@vuu-ui/vuu-utils\";\n\nexport type TableCellBlock = {\n  columnRange: VuuRange;\n  rowRange: VuuRange;\n};\n\nexport type CellBox = {\n  bottom: number;\n  left: number;\n  right: number;\n  top: number;\n};\n\ntype EndCellDirection =\n  | \"self\"\n  | \"n\"\n  | \"ne\"\n  | \"e\"\n  | \"se\"\n  | \"s\"\n  | \"sw\"\n  | \"w\"\n  | \"nw\";\n\nexport const getEndCellDirection = (\n  startBox: CellBox,\n  endBox: CellBox,\n): EndCellDirection => {\n  const { bottom: sBottom, left: sLeft, right: sRight, top: sTop } = startBox;\n  const { bottom: eBottom, left: eLeft, right: eRight, top: eTop } = endBox;\n  const north = eTop < sTop;\n  const east = eRight > sRight;\n  const south = eBottom > sBottom;\n  const west = eLeft < sLeft;\n\n  if (north && east) return \"ne\";\n  else if (south && east) return \"se\";\n  else if (south && west) return \"sw\";\n  else if (north && west) return \"nw\";\n  else if (north) return \"n\";\n  else if (east) return \"e\";\n  else if (south) return \"s\";\n  else if (west) return \"w\";\n  else return \"self\";\n};\n\nexport const setElementBox = (el: HTMLElement, box: CellBox) => {\n  const { bottom, left, right, top } = el.getBoundingClientRect();\n  box.bottom = bottom;\n  box.left = left;\n  box.right = right;\n  box.top = top;\n};\n\nexport const outsideBox = (\n  { bottom, left, right, top }: CellBox,\n  x: number,\n  y: number,\n) => x < left || x > right || y < top || y > bottom;\n\nconst getColIndex = ({ ariaColIndex }: HTMLDivElement) => {\n  if (ariaColIndex !== null) {\n    return parseInt(ariaColIndex);\n  }\n  throw Error(\"invalid aria-colindex in table cell\");\n};\n\nconst getRowIndex = (cell: HTMLDivElement) => {\n  const row = queryClosest<HTMLDivElement>(cell, \".vuuTableRow\");\n  if (row) {\n    const { ariaRowIndex } = row;\n    if (ariaRowIndex !== null) {\n      return parseInt(ariaRowIndex);\n    }\n  }\n  throw Error(\"invalid aria-rowindex in table row\");\n};\n\nexport const getTableCellBlock = (\n  startCell: HTMLDivElement,\n  endCell: HTMLDivElement,\n): TableCellBlock => {\n  const colStart = getColIndex(startCell);\n  const colEnd = getColIndex(endCell);\n  const rowStart = getRowIndex(startCell);\n  const rowEnd = getRowIndex(endCell);\n\n  const columnRange = {\n    from: Math.min(colStart, colEnd),\n    to: Math.max(colStart, colEnd),\n  };\n  const rowRange = {\n    from: Math.min(rowStart, rowEnd),\n    to: Math.max(rowStart, rowEnd),\n  };\n\n  return {\n    columnRange,\n    rowRange,\n  };\n};\n"],"names":["queryClosest"],"mappings":"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"}

package/cjs/cell-block/useCellBlockSelection.js

@@ -0,0 +1,237 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var vuuUtils = require('@vuu-ui/vuu-utils');
+var react = require('react');
+var CellBlock = require('./CellBlock.js');
+var cellblockUtils = require('./cellblock-utils.js');
+
+const Hi = Number.MAX_SAFE_INTEGER;
+const refState = {
+  cellBlock: null,
+  cellBlockClassName: "",
+  dragState: "pending",
+  endBox: { bottom: -1, left: Hi, right: -1, top: Hi },
+  endCell: null,
+  mousePosX: -1,
+  mousePosY: -1,
+  mouseStartX: -1,
+  mouseStartY: -1,
+  startBox: { bottom: -1, left: -1, right: -1, top: -1 },
+  startCell: null
+};
+const NullHandler = () => console.error("no handler installed");
+const mouseHandlers = {
+  mouseMove: NullHandler,
+  mouseMovePreDrag: NullHandler,
+  mouseUp: NullHandler,
+  mouseUpPreDrag: NullHandler
+};
+const mouseType = (name) => name.startsWith("mouseMove") ? "mousemove" : "mouseup";
+const DRAG_THRESHOLD = 5;
+const useCellBlockSelection = ({
+  allowCellBlockSelection,
+  onSelectCellBlock
+}) => {
+  const [cellBlock, setCellBlock] = react.useState(null);
+  const stateRef = react.useRef(refState);
+  const handlersRef = react.useRef(mouseHandlers);
+  const cellBlockRef = react.useCallback((el) => {
+    stateRef.current.cellBlock = el;
+  }, []);
+  const createCellBlock = react.useCallback(() => {
+    const { startBox, startCell } = stateRef.current;
+    if (startCell) {
+      cellblockUtils.setElementBox(startCell, startBox);
+      startCell.classList.add("vuu-cellblock-start");
+      setCellBlock(/* @__PURE__ */ jsxRuntime.jsx(CellBlock.CellBlock, { ref: cellBlockRef }));
+    }
+  }, [cellBlockRef]);
+  const initializeStateRef = react.useCallback(() => {
+    const { cellBlock: cellBlock2, cellBlockClassName, startCell, endCell } = stateRef.current;
+    if (startCell) {
+      startCell.classList.remove("vuu-cellblock-start");
+    }
+    if (endCell) {
+      endCell.classList.remove("vuu-cellblock-end");
+    }
+    if (cellBlock2?.classList.contains(cellBlockClassName)) {
+      cellBlock2.classList.remove(cellBlockClassName);
+    }
+    const { endBox, startBox } = refState;
+    stateRef.current = {
+      ...refState,
+      cellBlock: cellBlock2,
+      endBox: { ...endBox },
+      startBox: { ...startBox }
+    };
+  }, []);
+  const addMouseListener = react.useCallback(
+    (mouseOperation, handler) => {
+      window.addEventListener(mouseType(mouseOperation), handler);
+      handlersRef.current[mouseOperation] = handler;
+    },
+    []
+  );
+  const removeMouseListener = react.useCallback((name) => {
+    window.removeEventListener(mouseType(name), handlersRef.current[name]);
+  }, []);
+  handlersRef.current.mouseMove = react.useCallback((evt) => {
+    const { clientX: x, clientY: y } = evt;
+    const { cellBlock: cellBlock2, cellBlockClassName, endBox, startBox } = stateRef.current;
+    if (cellblockUtils.outsideBox(startBox, x, y) && cellblockUtils.outsideBox(endBox, x, y)) {
+      const cell = vuuUtils.queryClosest(
+        evt.target,
+        ".vuuTableCell, .vuuCellBlock"
+      );
+      const table = vuuUtils.queryClosest(cell, ".vuuTable");
+      if (table) {
+        table.classList.add("vuu-cellblock-select-in-progress");
+      }
+      if (cell?.classList.contains("vuuTableCell")) {
+        cellblockUtils.setElementBox(cell, endBox);
+        stateRef.current.endCell = cell;
+        const endBlockDirection = cellblockUtils.getEndCellDirection(startBox, endBox);
+        const newCellBlockClassName = `cellblock-direction-${endBlockDirection}`;
+        if (newCellBlockClassName !== cellBlockClassName) {
+          if (cellBlockClassName) {
+            cellBlock2?.classList.replace(
+              cellBlockClassName,
+              newCellBlockClassName
+            );
+          } else {
+            cellBlock2?.classList.add(newCellBlockClassName);
+          }
+          stateRef.current.cellBlockClassName = newCellBlockClassName;
+        }
+      }
+    }
+  }, []);
+  handlersRef.current.mouseUp = react.useCallback(
+    (evt) => {
+      removeMouseListener("mouseMove");
+      removeMouseListener("mouseUp");
+      const { endCell, startCell } = stateRef.current;
+      const table = vuuUtils.queryClosest(evt.target, ".vuuTable");
+      endCell?.classList.add("vuu-cellblock-end");
+      if (table) {
+        table.classList.remove("vuu-cellblock-select-in-progress");
+      }
+      if (startCell && endCell) {
+        const tableCellBlock = cellblockUtils.getTableCellBlock(startCell, endCell);
+        onSelectCellBlock?.(tableCellBlock);
+      }
+    },
+    [onSelectCellBlock, removeMouseListener]
+  );
+  handlersRef.current.mouseMovePreDrag = react.useCallback(
+    (evt) => {
+      const { current: state } = stateRef;
+      const { mouseStartX, mouseStartY } = state;
+      const x = state.mousePosX = evt.clientX;
+      const y = state.mousePosY = evt.clientY;
+      const distance = Math.max(
+        Math.abs(x - mouseStartX),
+        Math.abs(y - mouseStartY)
+      );
+      if (distance > DRAG_THRESHOLD) {
+        createCellBlock();
+        const { mouseMove, mouseUp } = handlersRef.current;
+        removeMouseListener("mouseMovePreDrag");
+        removeMouseListener("mouseUpPreDrag");
+        addMouseListener("mouseMove", mouseMove);
+        addMouseListener("mouseUp", mouseUp);
+      }
+    },
+    [addMouseListener, createCellBlock, removeMouseListener]
+  );
+  handlersRef.current.mouseUpPreDrag = react.useCallback(() => {
+    removeMouseListener("mouseMovePreDrag");
+    removeMouseListener("mouseUpPreDrag");
+  }, [removeMouseListener]);
+  const handleMouseDown = react.useCallback(
+    (evt) => {
+      initializeStateRef();
+      const { current: state } = stateRef;
+      const cell = vuuUtils.queryClosest(evt.target, ".vuuTableCell");
+      if (cell) {
+        state.startCell = cell;
+        state.mouseStartX = evt.clientX;
+        state.mouseStartY = evt.clientY;
+        const { mouseMovePreDrag, mouseUpPreDrag } = handlersRef.current;
+        addMouseListener("mouseMovePreDrag", mouseMovePreDrag);
+        addMouseListener("mouseUpPreDrag", mouseUpPreDrag);
+      }
+    },
+    [addMouseListener, initializeStateRef]
+  );
+  const shiftingRef = react.useRef(false);
+  const cellBlockEndRef = react.useRef([0, 0]);
+  const nativeKeyDownHandlerRef = react.useRef(NullHandler);
+  const handleNativeKeyUp = react.useCallback((evt) => {
+    if (evt.key === "Shift") {
+      const { current: pos } = cellBlockEndRef;
+      if (pos[0] || pos[1]) {
+        console.log(`cell selection [${pos[0]},${pos[1]}]`);
+      }
+      console.log("abandon cellblock selection");
+      shiftingRef.current = false;
+      window.removeEventListener("keydown", nativeKeyDownHandlerRef.current, {
+        capture: true
+      });
+      window.removeEventListener("keyup", handleNativeKeyUp, {
+        capture: true
+      });
+    }
+  }, []);
+  const handleNativeKeyDown = nativeKeyDownHandlerRef.current = react.useCallback(
+    (evt) => {
+      if (evt.key.startsWith("Arrow")) {
+        const { current: pos } = cellBlockEndRef;
+        switch (evt.key) {
+          case "ArrowRight":
+            pos[0] += 1;
+            break;
+          case "ArrowLEFT":
+            pos[0] -= 1;
+            break;
+          case "ArrowUP":
+            pos[1] -= 1;
+            break;
+          case "ArrowDown":
+            pos[1] += 1;
+            break;
+        }
+      }
+    },
+    []
+  );
+  const handleKeyDown = react.useCallback(
+    (evt) => {
+      if (evt.key === "Shift") {
+        shiftingRef.current = true;
+        const cell = vuuUtils.queryClosest(evt.target, ".vuuTableCell");
+        if (cell) {
+          const { current: state } = stateRef;
+          state.startCell = cell;
+          window.addEventListener("keydown", handleNativeKeyDown, {
+            capture: true
+          });
+          window.addEventListener("keyup", handleNativeKeyUp, {
+            capture: true
+          });
+          evt.preventDefault();
+        }
+      }
+    },
+    [handleNativeKeyDown, handleNativeKeyUp]
+  );
+  return {
+    cellBlock,
+    onKeyDown: allowCellBlockSelection ? handleKeyDown : void 0,
+    onMouseDown: allowCellBlockSelection ? handleMouseDown : void 0
+  };
+};
+
+exports.useCellBlockSelection = useCellBlockSelection;
+//# sourceMappingURL=useCellBlockSelection.js.map

package/cjs/cell-block/useCellBlockSelection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCellBlockSelection.js","sources":["../../src/cell-block/useCellBlockSelection.tsx"],"sourcesContent":["import { queryClosest } from \"@vuu-ui/vuu-utils\";\nimport {\n  KeyboardEventHandler,\n  MouseEventHandler,\n  ReactElement,\n  RefCallback,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport { CellBlock } from \"./CellBlock\";\nimport {\n  CellBox,\n  TableCellBlock,\n  getEndCellDirection,\n  getTableCellBlock,\n  outsideBox,\n  setElementBox,\n} from \"./cellblock-utils\";\n\nconst Hi = Number.MAX_SAFE_INTEGER;\n\ntype RefState = {\n  dragState: \"pending\" | \"active\";\n  cellBlock: HTMLDivElement | null;\n  cellBlockClassName: string;\n  endBox: CellBox;\n  endCell: HTMLDivElement | null;\n  mousePosX: number;\n  mousePosY: number;\n  mouseStartX: number;\n  mouseStartY: number;\n  startCell: HTMLDivElement | null;\n  startBox: CellBox;\n};\n\nconst refState: RefState = {\n  cellBlock: null,\n  cellBlockClassName: \"\",\n  dragState: \"pending\",\n  endBox: { bottom: -1, left: Hi, right: -1, top: Hi },\n  endCell: null,\n  mousePosX: -1,\n  mousePosY: -1,\n  mouseStartX: -1,\n  mouseStartY: -1,\n  startBox: { bottom: -1, left: -1, right: -1, top: -1 },\n  startCell: null,\n} as const;\n\ntype NativeKeyboardHandler = (evt: KeyboardEvent) => void;\ntype NativeMouseHandler = (evt: MouseEvent) => void;\ntype MouseHandlers = {\n  mouseMove: NativeMouseHandler;\n  mouseMovePreDrag: NativeMouseHandler;\n  mouseUp: NativeMouseHandler;\n  mouseUpPreDrag: NativeMouseHandler;\n};\n\nconst NullHandler = () => console.error(\"no handler installed\");\nconst mouseHandlers: MouseHandlers = {\n  mouseMove: NullHandler,\n  mouseMovePreDrag: NullHandler,\n  mouseUp: NullHandler,\n  mouseUpPreDrag: NullHandler,\n};\n\ntype MouseOperation = keyof typeof mouseHandlers;\n\nconst mouseType = (name: string) =>\n  name.startsWith(\"mouseMove\") ? \"mousemove\" : \"mouseup\";\n\nconst DRAG_THRESHOLD = 5;\n\nexport interface CellblockSelectionHookProps {\n  allowCellBlockSelection?: boolean;\n  onSelectCellBlock?: (cellBlock: TableCellBlock) => void;\n}\n\nexport const useCellBlockSelection = ({\n  allowCellBlockSelection,\n  onSelectCellBlock,\n}: CellblockSelectionHookProps) => {\n  const [cellBlock, setCellBlock] = useState<ReactElement | null>(null);\n  const stateRef = useRef<RefState>(refState);\n  const handlersRef = useRef<MouseHandlers>(mouseHandlers);\n\n  const cellBlockRef = useCallback<RefCallback<HTMLDivElement>>((el) => {\n    stateRef.current.cellBlock = el;\n  }, []);\n\n  const createCellBlock = useCallback(() => {\n    const { startBox, startCell } = stateRef.current;\n    if (startCell) {\n      setElementBox(startCell, startBox);\n      startCell.classList.add(\"vuu-cellblock-start\");\n      setCellBlock(<CellBlock ref={cellBlockRef} />);\n    }\n  }, [cellBlockRef]);\n\n  const initializeStateRef = useCallback(() => {\n    const { cellBlock, cellBlockClassName, startCell, endCell } =\n      stateRef.current;\n    if (startCell) {\n      startCell.classList.remove(\"vuu-cellblock-start\");\n    }\n    if (endCell) {\n      endCell.classList.remove(\"vuu-cellblock-end\");\n    }\n    if (cellBlock?.classList.contains(cellBlockClassName)) {\n      cellBlock.classList.remove(cellBlockClassName);\n    }\n\n    const { endBox, startBox } = refState;\n\n    stateRef.current = {\n      ...refState,\n      cellBlock,\n      endBox: { ...endBox },\n      startBox: { ...startBox },\n    };\n  }, []);\n\n  const addMouseListener = useCallback(\n    (mouseOperation: MouseOperation, handler: NativeMouseHandler) => {\n      window.addEventListener(mouseType(mouseOperation), handler);\n      handlersRef.current[mouseOperation] = handler;\n    },\n    [],\n  );\n\n  const removeMouseListener = useCallback((name: MouseOperation) => {\n    window.removeEventListener(mouseType(name), handlersRef.current[name]);\n  }, []);\n\n  handlersRef.current.mouseMove = useCallback((evt: MouseEvent) => {\n    const { clientX: x, clientY: y } = evt;\n    const { cellBlock, cellBlockClassName, endBox, startBox } =\n      stateRef.current;\n    if (outsideBox(startBox, x, y) && outsideBox(endBox, x, y)) {\n      const cell = queryClosest<HTMLDivElement>(\n        evt.target,\n        \".vuuTableCell, .vuuCellBlock\",\n      );\n      const table = queryClosest<HTMLDivElement>(cell, \".vuuTable\");\n      if (table) {\n        table.classList.add(\"vuu-cellblock-select-in-progress\");\n      }\n      if (cell?.classList.contains(\"vuuTableCell\")) {\n        setElementBox(cell, endBox);\n        stateRef.current.endCell = cell;\n        const endBlockDirection = getEndCellDirection(startBox, endBox);\n        const newCellBlockClassName = `cellblock-direction-${endBlockDirection}`;\n        if (newCellBlockClassName !== cellBlockClassName) {\n          if (cellBlockClassName) {\n            cellBlock?.classList.replace(\n              cellBlockClassName,\n              newCellBlockClassName,\n            );\n          } else {\n            cellBlock?.classList.add(newCellBlockClassName);\n          }\n          stateRef.current.cellBlockClassName = newCellBlockClassName;\n        }\n      }\n    }\n  }, []);\n\n  handlersRef.current.mouseUp = useCallback(\n    (evt: MouseEvent) => {\n      removeMouseListener(\"mouseMove\");\n      removeMouseListener(\"mouseUp\");\n\n      const { endCell, startCell } = stateRef.current;\n\n      const table = queryClosest<HTMLDivElement>(evt.target, \".vuuTable\");\n      endCell?.classList.add(\"vuu-cellblock-end\");\n      if (table) {\n        table.classList.remove(\"vuu-cellblock-select-in-progress\");\n      }\n\n      if (startCell && endCell) {\n        const tableCellBlock = getTableCellBlock(startCell, endCell);\n        onSelectCellBlock?.(tableCellBlock);\n      }\n    },\n    [onSelectCellBlock, removeMouseListener],\n  );\n\n  handlersRef.current.mouseMovePreDrag = useCallback(\n    (evt: MouseEvent) => {\n      const { current: state } = stateRef;\n      const { mouseStartX, mouseStartY } = state;\n\n      const x = (state.mousePosX = evt.clientX);\n      const y = (state.mousePosY = evt.clientY);\n\n      const distance = Math.max(\n        Math.abs(x - mouseStartX),\n        Math.abs(y - mouseStartY),\n      );\n\n      if (distance > DRAG_THRESHOLD) {\n        createCellBlock();\n\n        const { mouseMove, mouseUp } = handlersRef.current;\n        removeMouseListener(\"mouseMovePreDrag\");\n        removeMouseListener(\"mouseUpPreDrag\");\n        addMouseListener(\"mouseMove\", mouseMove);\n        addMouseListener(\"mouseUp\", mouseUp);\n      }\n    },\n    [addMouseListener, createCellBlock, removeMouseListener],\n  );\n\n  handlersRef.current.mouseUpPreDrag = useCallback(() => {\n    removeMouseListener(\"mouseMovePreDrag\");\n    removeMouseListener(\"mouseUpPreDrag\");\n  }, [removeMouseListener]);\n\n  const handleMouseDown = useCallback<MouseEventHandler>(\n    (evt) => {\n      initializeStateRef();\n      const { current: state } = stateRef;\n      const cell = queryClosest<HTMLDivElement>(evt.target, \".vuuTableCell\");\n      if (cell) {\n        state.startCell = cell;\n        state.mouseStartX = evt.clientX;\n        state.mouseStartY = evt.clientY;\n\n        const { mouseMovePreDrag, mouseUpPreDrag } = handlersRef.current;\n        addMouseListener(\"mouseMovePreDrag\", mouseMovePreDrag);\n        addMouseListener(\"mouseUpPreDrag\", mouseUpPreDrag);\n      }\n    },\n    [addMouseListener, initializeStateRef],\n  );\n\n  const shiftingRef = useRef(false);\n  const cellBlockEndRef = useRef([0, 0]);\n  const nativeKeyDownHandlerRef = useRef<NativeKeyboardHandler>(NullHandler);\n\n  const handleNativeKeyUp = useCallback((evt: KeyboardEvent) => {\n    if (evt.key === \"Shift\") {\n      const { current: pos } = cellBlockEndRef;\n\n      if (pos[0] || pos[1]) {\n        console.log(`cell selection [${pos[0]},${pos[1]}]`);\n      }\n      console.log(\"abandon cellblock selection\");\n      shiftingRef.current = false;\n\n      window.removeEventListener(\"keydown\", nativeKeyDownHandlerRef.current, {\n        capture: true,\n      });\n      window.removeEventListener(\"keyup\", handleNativeKeyUp, {\n        capture: true,\n      });\n    }\n  }, []);\n  const handleNativeKeyDown = (nativeKeyDownHandlerRef.current = useCallback(\n    (evt: KeyboardEvent) => {\n      if (evt.key.startsWith(\"Arrow\")) {\n        const { current: pos } = cellBlockEndRef;\n        switch (evt.key) {\n          case \"ArrowRight\":\n            pos[0] += 1;\n            break;\n          case \"ArrowLEFT\":\n            pos[0] -= 1;\n            break;\n          case \"ArrowUP\":\n            pos[1] -= 1;\n            break;\n          case \"ArrowDown\":\n            pos[1] += 1;\n            break;\n        }\n      }\n    },\n    [],\n  ));\n  const handleKeyDown = useCallback<KeyboardEventHandler>(\n    (evt) => {\n      if (evt.key === \"Shift\") {\n        shiftingRef.current = true;\n\n        const cell = queryClosest<HTMLDivElement>(evt.target, \".vuuTableCell\");\n        if (cell) {\n          const { current: state } = stateRef;\n          state.startCell = cell;\n          window.addEventListener(\"keydown\", handleNativeKeyDown, {\n            capture: true,\n          });\n          window.addEventListener(\"keyup\", handleNativeKeyUp, {\n            capture: true,\n          });\n\n          evt.preventDefault();\n        }\n      }\n    },\n    [handleNativeKeyDown, handleNativeKeyUp],\n  );\n\n  return {\n    cellBlock,\n    onKeyDown: allowCellBlockSelection ? handleKeyDown : undefined,\n    onMouseDown: allowCellBlockSelection ? handleMouseDown : undefined,\n  };\n};\n"],"names":["useState","useRef","useCallback","setElementBox","jsx","CellBlock","cellBlock","outsideBox","queryClosest","getEndCellDirection","getTableCellBlock"],"mappings":";;;;;;;;AAoBA,MAAM,KAAK,MAAO,CAAA,gBAAA,CAAA;AAgBlB,MAAM,QAAqB,GAAA;AAAA,EACzB,SAAW,EAAA,IAAA;AAAA,EACX,kBAAoB,EAAA,EAAA;AAAA,EACpB,SAAW,EAAA,SAAA;AAAA,EACX,MAAA,EAAQ,EAAE,MAAQ,EAAA,CAAA,CAAA,EAAI,MAAM,EAAI,EAAA,KAAA,EAAO,CAAI,CAAA,EAAA,GAAA,EAAK,EAAG,EAAA;AAAA,EACnD,OAAS,EAAA,IAAA;AAAA,EACT,SAAW,EAAA,CAAA,CAAA;AAAA,EACX,SAAW,EAAA,CAAA,CAAA;AAAA,EACX,WAAa,EAAA,CAAA,CAAA;AAAA,EACb,WAAa,EAAA,CAAA,CAAA;AAAA,EACb,QAAA,EAAU,EAAE,MAAQ,EAAA,CAAA,CAAA,EAAI,MAAM,CAAI,CAAA,EAAA,KAAA,EAAO,CAAI,CAAA,EAAA,GAAA,EAAK,CAAG,CAAA,EAAA;AAAA,EACrD,SAAW,EAAA,IAAA;AACb,CAAA,CAAA;AAWA,MAAM,WAAc,GAAA,MAAM,OAAQ,CAAA,KAAA,CAAM,sBAAsB,CAAA,CAAA;AAC9D,MAAM,aAA+B,GAAA;AAAA,EACnC,SAAW,EAAA,WAAA;AAAA,EACX,gBAAkB,EAAA,WAAA;AAAA,EAClB,OAAS,EAAA,WAAA;AAAA,EACT,cAAgB,EAAA,WAAA;AAClB,CAAA,CAAA;AAIA,MAAM,YAAY,CAAC,IAAA,KACjB,KAAK,UAAW,CAAA,WAAW,IAAI,WAAc,GAAA,SAAA,CAAA;AAE/C,MAAM,cAAiB,GAAA,CAAA,CAAA;AAOhB,MAAM,wBAAwB,CAAC;AAAA,EACpC,uBAAA;AAAA,EACA,iBAAA;AACF,CAAmC,KAAA;AACjC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIA,eAA8B,IAAI,CAAA,CAAA;AACpE,EAAM,MAAA,QAAA,GAAWC,aAAiB,QAAQ,CAAA,CAAA;AAC1C,EAAM,MAAA,WAAA,GAAcA,aAAsB,aAAa,CAAA,CAAA;AAEvD,EAAM,MAAA,YAAA,GAAeC,iBAAyC,CAAA,CAAC,EAAO,KAAA;AACpE,IAAA,QAAA,CAAS,QAAQ,SAAY,GAAA,EAAA,CAAA;AAAA,GAC/B,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,eAAA,GAAkBA,kBAAY,MAAM;AACxC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAU,EAAA,GAAI,QAAS,CAAA,OAAA,CAAA;AACzC,IAAA,IAAI,SAAW,EAAA;AACb,MAAAC,4BAAA,CAAc,WAAW,QAAQ,CAAA,CAAA;AACjC,MAAU,SAAA,CAAA,SAAA,CAAU,IAAI,qBAAqB,CAAA,CAAA;AAC7C,MAAA,YAAA,iBAAcC,cAAA,CAAAC,mBAAA,EAAA,EAAU,GAAK,EAAA,YAAA,EAAc,CAAE,CAAA,CAAA;AAAA,KAC/C;AAAA,GACF,EAAG,CAAC,YAAY,CAAC,CAAA,CAAA;AAEjB,EAAM,MAAA,kBAAA,GAAqBH,kBAAY,MAAM;AAC3C,IAAA,MAAM,EAAE,SAAAI,EAAAA,UAAAA,EAAW,oBAAoB,SAAW,EAAA,OAAA,KAChD,QAAS,CAAA,OAAA,CAAA;AACX,IAAA,IAAI,SAAW,EAAA;AACb,MAAU,SAAA,CAAA,SAAA,CAAU,OAAO,qBAAqB,CAAA,CAAA;AAAA,KAClD;AACA,IAAA,IAAI,OAAS,EAAA;AACX,MAAQ,OAAA,CAAA,SAAA,CAAU,OAAO,mBAAmB,CAAA,CAAA;AAAA,KAC9C;AACA,IAAA,IAAIA,UAAW,EAAA,SAAA,CAAU,QAAS,CAAA,kBAAkB,CAAG,EAAA;AACrD,MAAAA,UAAAA,CAAU,SAAU,CAAA,MAAA,CAAO,kBAAkB,CAAA,CAAA;AAAA,KAC/C;AAEA,IAAM,MAAA,EAAE,MAAQ,EAAA,QAAA,EAAa,GAAA,QAAA,CAAA;AAE7B,IAAA,QAAA,CAAS,OAAU,GAAA;AAAA,MACjB,GAAG,QAAA;AAAA,MACH,SAAAA,EAAAA,UAAAA;AAAA,MACA,MAAA,EAAQ,EAAE,GAAG,MAAO,EAAA;AAAA,MACpB,QAAA,EAAU,EAAE,GAAG,QAAS,EAAA;AAAA,KAC1B,CAAA;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,gBAAmB,GAAAJ,iBAAA;AAAA,IACvB,CAAC,gBAAgC,OAAgC,KAAA;AAC/D,MAAA,MAAA,CAAO,gBAAiB,CAAA,SAAA,CAAU,cAAc,CAAA,EAAG,OAAO,CAAA,CAAA;AAC1D,MAAY,WAAA,CAAA,OAAA,CAAQ,cAAc,CAAI,GAAA,OAAA,CAAA;AAAA,KACxC;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AAEA,EAAM,MAAA,mBAAA,GAAsBA,iBAAY,CAAA,CAAC,IAAyB,KAAA;AAChE,IAAA,MAAA,CAAO,oBAAoB,SAAU,CAAA,IAAI,GAAG,WAAY,CAAA,OAAA,CAAQ,IAAI,CAAC,CAAA,CAAA;AAAA,GACvE,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,WAAA,CAAY,OAAQ,CAAA,SAAA,GAAYA,iBAAY,CAAA,CAAC,GAAoB,KAAA;AAC/D,IAAA,MAAM,EAAE,OAAA,EAAS,CAAG,EAAA,OAAA,EAAS,GAAM,GAAA,GAAA,CAAA;AACnC,IAAA,MAAM,EAAE,SAAAI,EAAAA,UAAAA,EAAW,oBAAoB,MAAQ,EAAA,QAAA,KAC7C,QAAS,CAAA,OAAA,CAAA;AACX,IAAI,IAAAC,yBAAA,CAAW,UAAU,CAAG,EAAA,CAAC,KAAKA,yBAAW,CAAA,MAAA,EAAQ,CAAG,EAAA,CAAC,CAAG,EAAA;AAC1D,MAAA,MAAM,IAAO,GAAAC,qBAAA;AAAA,QACX,GAAI,CAAA,MAAA;AAAA,QACJ,8BAAA;AAAA,OACF,CAAA;AACA,MAAM,MAAA,KAAA,GAAQA,qBAA6B,CAAA,IAAA,EAAM,WAAW,CAAA,CAAA;AAC5D,MAAA,IAAI,KAAO,EAAA;AACT,QAAM,KAAA,CAAA,SAAA,CAAU,IAAI,kCAAkC,CAAA,CAAA;AAAA,OACxD;AACA,MAAA,IAAI,IAAM,EAAA,SAAA,CAAU,QAAS,CAAA,cAAc,CAAG,EAAA;AAC5C,QAAAL,4BAAA,CAAc,MAAM,MAAM,CAAA,CAAA;AAC1B,QAAA,QAAA,CAAS,QAAQ,OAAU,GAAA,IAAA,CAAA;AAC3B,QAAM,MAAA,iBAAA,GAAoBM,kCAAoB,CAAA,QAAA,EAAU,MAAM,CAAA,CAAA;AAC9D,QAAM,MAAA,qBAAA,GAAwB,uBAAuB,iBAAiB,CAAA,CAAA,CAAA;AACtE,QAAA,IAAI,0BAA0B,kBAAoB,EAAA;AAChD,UAAA,IAAI,kBAAoB,EAAA;AACtB,YAAAH,YAAW,SAAU,CAAA,OAAA;AAAA,cACnB,kBAAA;AAAA,cACA,qBAAA;AAAA,aACF,CAAA;AAAA,WACK,MAAA;AACL,YAAAA,UAAAA,EAAW,SAAU,CAAA,GAAA,CAAI,qBAAqB,CAAA,CAAA;AAAA,WAChD;AACA,UAAA,QAAA,CAAS,QAAQ,kBAAqB,GAAA,qBAAA,CAAA;AAAA,SACxC;AAAA,OACF;AAAA,KACF;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,WAAA,CAAY,QAAQ,OAAU,GAAAJ,iBAAA;AAAA,IAC5B,CAAC,GAAoB,KAAA;AACnB,MAAA,mBAAA,CAAoB,WAAW,CAAA,CAAA;AAC/B,MAAA,mBAAA,CAAoB,SAAS,CAAA,CAAA;AAE7B,MAAA,MAAM,EAAE,OAAA,EAAS,SAAU,EAAA,GAAI,QAAS,CAAA,OAAA,CAAA;AAExC,MAAA,MAAM,KAAQ,GAAAM,qBAAA,CAA6B,GAAI,CAAA,MAAA,EAAQ,WAAW,CAAA,CAAA;AAClE,MAAS,OAAA,EAAA,SAAA,CAAU,IAAI,mBAAmB,CAAA,CAAA;AAC1C,MAAA,IAAI,KAAO,EAAA;AACT,QAAM,KAAA,CAAA,SAAA,CAAU,OAAO,kCAAkC,CAAA,CAAA;AAAA,OAC3D;AAEA,MAAA,IAAI,aAAa,OAAS,EAAA;AACxB,QAAM,MAAA,cAAA,GAAiBE,gCAAkB,CAAA,SAAA,EAAW,OAAO,CAAA,CAAA;AAC3D,QAAA,iBAAA,GAAoB,cAAc,CAAA,CAAA;AAAA,OACpC;AAAA,KACF;AAAA,IACA,CAAC,mBAAmB,mBAAmB,CAAA;AAAA,GACzC,CAAA;AAEA,EAAA,WAAA,CAAY,QAAQ,gBAAmB,GAAAR,iBAAA;AAAA,IACrC,CAAC,GAAoB,KAAA;AACnB,MAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,QAAA,CAAA;AAC3B,MAAM,MAAA,EAAE,WAAa,EAAA,WAAA,EAAgB,GAAA,KAAA,CAAA;AAErC,MAAM,MAAA,CAAA,GAAK,KAAM,CAAA,SAAA,GAAY,GAAI,CAAA,OAAA,CAAA;AACjC,MAAM,MAAA,CAAA,GAAK,KAAM,CAAA,SAAA,GAAY,GAAI,CAAA,OAAA,CAAA;AAEjC,MAAA,MAAM,WAAW,IAAK,CAAA,GAAA;AAAA,QACpB,IAAA,CAAK,GAAI,CAAA,CAAA,GAAI,WAAW,CAAA;AAAA,QACxB,IAAA,CAAK,GAAI,CAAA,CAAA,GAAI,WAAW,CAAA;AAAA,OAC1B,CAAA;AAEA,MAAA,IAAI,WAAW,cAAgB,EAAA;AAC7B,QAAgB,eAAA,EAAA,CAAA;AAEhB,QAAA,MAAM,EAAE,SAAA,EAAW,OAAQ,EAAA,GAAI,WAAY,CAAA,OAAA,CAAA;AAC3C,QAAA,mBAAA,CAAoB,kBAAkB,CAAA,CAAA;AACtC,QAAA,mBAAA,CAAoB,gBAAgB,CAAA,CAAA;AACpC,QAAA,gBAAA,CAAiB,aAAa,SAAS,CAAA,CAAA;AACvC,QAAA,gBAAA,CAAiB,WAAW,OAAO,CAAA,CAAA;AAAA,OACrC;AAAA,KACF;AAAA,IACA,CAAC,gBAAkB,EAAA,eAAA,EAAiB,mBAAmB,CAAA;AAAA,GACzD,CAAA;AAEA,EAAY,WAAA,CAAA,OAAA,CAAQ,cAAiB,GAAAA,iBAAA,CAAY,MAAM;AACrD,IAAA,mBAAA,CAAoB,kBAAkB,CAAA,CAAA;AACtC,IAAA,mBAAA,CAAoB,gBAAgB,CAAA,CAAA;AAAA,GACtC,EAAG,CAAC,mBAAmB,CAAC,CAAA,CAAA;AAExB,EAAA,MAAM,eAAkB,GAAAA,iBAAA;AAAA,IACtB,CAAC,GAAQ,KAAA;AACP,MAAmB,kBAAA,EAAA,CAAA;AACnB,MAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,QAAA,CAAA;AAC3B,MAAA,MAAM,IAAO,GAAAM,qBAAA,CAA6B,GAAI,CAAA,MAAA,EAAQ,eAAe,CAAA,CAAA;AACrE,MAAA,IAAI,IAAM,EAAA;AACR,QAAA,KAAA,CAAM,SAAY,GAAA,IAAA,CAAA;AAClB,QAAA,KAAA,CAAM,cAAc,GAAI,CAAA,OAAA,CAAA;AACxB,QAAA,KAAA,CAAM,cAAc,GAAI,CAAA,OAAA,CAAA;AAExB,QAAA,MAAM,EAAE,gBAAA,EAAkB,cAAe,EAAA,GAAI,WAAY,CAAA,OAAA,CAAA;AACzD,QAAA,gBAAA,CAAiB,oBAAoB,gBAAgB,CAAA,CAAA;AACrD,QAAA,gBAAA,CAAiB,kBAAkB,cAAc,CAAA,CAAA;AAAA,OACnD;AAAA,KACF;AAAA,IACA,CAAC,kBAAkB,kBAAkB,CAAA;AAAA,GACvC,CAAA;AAEA,EAAM,MAAA,WAAA,GAAcP,aAAO,KAAK,CAAA,CAAA;AAChC,EAAA,MAAM,eAAkB,GAAAA,YAAA,CAAO,CAAC,CAAA,EAAG,CAAC,CAAC,CAAA,CAAA;AACrC,EAAM,MAAA,uBAAA,GAA0BA,aAA8B,WAAW,CAAA,CAAA;AAEzE,EAAM,MAAA,iBAAA,GAAoBC,iBAAY,CAAA,CAAC,GAAuB,KAAA;AAC5D,IAAI,IAAA,GAAA,CAAI,QAAQ,OAAS,EAAA;AACvB,MAAM,MAAA,EAAE,OAAS,EAAA,GAAA,EAAQ,GAAA,eAAA,CAAA;AAEzB,MAAA,IAAI,GAAI,CAAA,CAAC,CAAK,IAAA,GAAA,CAAI,CAAC,CAAG,EAAA;AACpB,QAAQ,OAAA,CAAA,GAAA,CAAI,mBAAmB,GAAI,CAAA,CAAC,CAAC,CAAI,CAAA,EAAA,GAAA,CAAI,CAAC,CAAC,CAAG,CAAA,CAAA,CAAA,CAAA;AAAA,OACpD;AACA,MAAA,OAAA,CAAQ,IAAI,6BAA6B,CAAA,CAAA;AACzC,MAAA,WAAA,CAAY,OAAU,GAAA,KAAA,CAAA;AAEtB,MAAO,MAAA,CAAA,mBAAA,CAAoB,SAAW,EAAA,uBAAA,CAAwB,OAAS,EAAA;AAAA,QACrE,OAAS,EAAA,IAAA;AAAA,OACV,CAAA,CAAA;AACD,MAAO,MAAA,CAAA,mBAAA,CAAoB,SAAS,iBAAmB,EAAA;AAAA,QACrD,OAAS,EAAA,IAAA;AAAA,OACV,CAAA,CAAA;AAAA,KACH;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AACL,EAAM,MAAA,mBAAA,GAAuB,wBAAwB,OAAU,GAAAA,iBAAA;AAAA,IAC7D,CAAC,GAAuB,KAAA;AACtB,MAAA,IAAI,GAAI,CAAA,GAAA,CAAI,UAAW,CAAA,OAAO,CAAG,EAAA;AAC/B,QAAM,MAAA,EAAE,OAAS,EAAA,GAAA,EAAQ,GAAA,eAAA,CAAA;AACzB,QAAA,QAAQ,IAAI,GAAK;AAAA,UACf,KAAK,YAAA;AACH,YAAA,GAAA,CAAI,CAAC,CAAK,IAAA,CAAA,CAAA;AACV,YAAA,MAAA;AAAA,UACF,KAAK,WAAA;AACH,YAAA,GAAA,CAAI,CAAC,CAAK,IAAA,CAAA,CAAA;AACV,YAAA,MAAA;AAAA,UACF,KAAK,SAAA;AACH,YAAA,GAAA,CAAI,CAAC,CAAK,IAAA,CAAA,CAAA;AACV,YAAA,MAAA;AAAA,UACF,KAAK,WAAA;AACH,YAAA,GAAA,CAAI,CAAC,CAAK,IAAA,CAAA,CAAA;AACV,YAAA,MAAA;AAAA,SACJ;AAAA,OACF;AAAA,KACF;AAAA,IACA,EAAC;AAAA,GACH,CAAA;AACA,EAAA,MAAM,aAAgB,GAAAA,iBAAA;AAAA,IACpB,CAAC,GAAQ,KAAA;AACP,MAAI,IAAA,GAAA,CAAI,QAAQ,OAAS,EAAA;AACvB,QAAA,WAAA,CAAY,OAAU,GAAA,IAAA,CAAA;AAEtB,QAAA,MAAM,IAAO,GAAAM,qBAAA,CAA6B,GAAI,CAAA,MAAA,EAAQ,eAAe,CAAA,CAAA;AACrE,QAAA,IAAI,IAAM,EAAA;AACR,UAAM,MAAA,EAAE,OAAS,EAAA,KAAA,EAAU,GAAA,QAAA,CAAA;AAC3B,UAAA,KAAA,CAAM,SAAY,GAAA,IAAA,CAAA;AAClB,UAAO,MAAA,CAAA,gBAAA,CAAiB,WAAW,mBAAqB,EAAA;AAAA,YACtD,OAAS,EAAA,IAAA;AAAA,WACV,CAAA,CAAA;AACD,UAAO,MAAA,CAAA,gBAAA,CAAiB,SAAS,iBAAmB,EAAA;AAAA,YAClD,OAAS,EAAA,IAAA;AAAA,WACV,CAAA,CAAA;AAED,UAAA,GAAA,CAAI,cAAe,EAAA,CAAA;AAAA,SACrB;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,qBAAqB,iBAAiB,CAAA;AAAA,GACzC,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,SAAA;AAAA,IACA,SAAA,EAAW,0BAA0B,aAAgB,GAAA,KAAA,CAAA;AAAA,IACrD,WAAA,EAAa,0BAA0B,eAAkB,GAAA,KAAA,CAAA;AAAA,GAC3D,CAAA;AACF;;;;"}

package/cjs/index.js

@@ -14,6 +14,7 @@ var tableConfig = require('./table-config.js');
 var HeaderProvider = require('./table-header/HeaderProvider.js');
 var TableHeader = require('./table-header/TableHeader.js');
 var useControlledTableNavigation = require('./useControlledTableNavigation.js');
+var useKeyboardNavigation = require('./useKeyboardNavigation.js');
 var useTableModel = require('./useTableModel.js');
 var useTableScroll = require('./useTableScroll.js');
 var useTableViewport = require('./useTableViewport.js');
@@ -35,7 +36,11 @@ exports.updateTableConfig = tableConfig.updateTableConfig;
 exports.HeaderProvider = HeaderProvider.HeaderProvider;
 exports.useHeaderProps = HeaderProvider.useHeaderProps;
 exports.TableHeader = TableHeader.TableHeader;
+exports.isRowSelectionKey = useControlledTableNavigation.isRowSelectionKey;
 exports.useControlledTableNavigation = useControlledTableNavigation.useControlledTableNavigation;
+exports.isNavigationKey = useKeyboardNavigation.isNavigationKey;
+exports.isPagingKey = useKeyboardNavigation.isPagingKey;
+exports.useKeyboardNavigation = useKeyboardNavigation.useKeyboardNavigation;
 exports.isShowColumnSettings = useTableModel.isShowColumnSettings;
 exports.isShowTableSettings = useTableModel.isShowTableSettings;
 exports.useTableModel = useTableModel.useTableModel;

package/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/moving-window.js

@@ -2,24 +2,37 @@
 
 var vuuUtils = require('@vuu-ui/vuu-utils');
 
+var __defProp = Object.defineProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), setter ? setter.call(obj, value) : member.set(obj, value), value);
+var _range;
 const { SELECTED } = vuuUtils.metadataKeys;
 class MovingWindow {
   constructor({ from, to }) {
-    this.rowCount = 0;
-    this.setRowCount = (rowCount) => {
+    __publicField(this, "data");
+    __publicField(this, "rowCount", 0);
+    __privateAdd(this, _range);
+    __publicField(this, "setRowCount", (rowCount) => {
       if (rowCount < this.data.length) {
         this.data.length = rowCount;
       }
       this.rowCount = rowCount;
-    };
-    this.range = new vuuUtils.WindowRange(from, to);
+    });
+    __privateSet(this, _range, new vuuUtils.WindowRange(from, to));
     this.data = new Array(Math.max(0, to - from));
     this.rowCount = 0;
   }
   add(data) {
     const [index] = data;
     if (this.isWithinRange(index)) {
-      const internalIndex = index - this.range.from;
+      const internalIndex = index - __privateGet(this, _range).from;
       this.data[internalIndex] = data;
       if (data[SELECTED]) {
         const previousRow = this.data[internalIndex - 1];
@@ -31,14 +44,14 @@ class MovingWindow {
     }
   }
   getAtIndex(index) {
-    return this.range.isWithin(index) && this.data[index - this.range.from] != null ? this.data[index - this.range.from] : void 0;
+    return __privateGet(this, _range).isWithin(index) && this.data[index - __privateGet(this, _range).from] != null ? this.data[index - __privateGet(this, _range).from] : void 0;
   }
   isWithinRange(index) {
-    return this.range.isWithin(index);
+    return __privateGet(this, _range).isWithin(index);
   }
   setRange({ from, to }) {
-    if (from !== this.range.from || to !== this.range.to) {
-      const [overlapFrom, overlapTo] = this.range.overlap(from, to);
+    if (from !== __privateGet(this, _range).from || to !== __privateGet(this, _range).to) {
+      const [overlapFrom, overlapTo] = __privateGet(this, _range).overlap(from, to);
       const newData = new Array(Math.max(0, to - from));
       for (let i = overlapFrom; i < overlapTo; i++) {
         const data = this.getAtIndex(i);
@@ -48,14 +61,18 @@ class MovingWindow {
         }
       }
       this.data = newData;
-      this.range.from = from;
-      this.range.to = to;
+      __privateGet(this, _range).from = from;
+      __privateGet(this, _range).to = to;
     }
   }
   getSelectedRows() {
     return this.data.filter((row) => row[SELECTED] !== 0);
   }
+  get range() {
+    return __privateGet(this, _range);
+  }
 }
+_range = new WeakMap();
 
 exports.MovingWindow = MovingWindow;
 //# sourceMappingURL=moving-window.js.map

package/cjs/moving-window.js.map

@@ -1 +1 @@
-{"version":3,"file":"moving-window.js","sources":["../src/moving-window.ts"],"sourcesContent":["import { DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport {\n  isRowSelectedLast,\n  metadataKeys,\n  WindowRange,\n} from \"@vuu-ui/vuu-utils\";\nimport { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\n\nconst { SELECTED } = metadataKeys;\n\nexport class MovingWindow {\n  public data: DataSourceRow[];\n  public rowCount = 0;\n  private range: WindowRange;\n\n  constructor({ from, to }: VuuRange) {\n    this.range = new WindowRange(from, to);\n    //internal data is always 0 based, we add range.from to determine an offset\n    this.data = new Array(Math.max(0, to - from));\n    this.rowCount = 0;\n  }\n\n  setRowCount = (rowCount: number) => {\n    if (rowCount < this.data.length) {\n      this.data.length = rowCount;\n    }\n\n    this.rowCount = rowCount;\n  };\n\n  add(data: DataSourceRow) {\n    const [index] = data;\n    if (this.isWithinRange(index)) {\n      const internalIndex = index - this.range.from;\n      this.data[internalIndex] = data;\n\n      // Hack until we can deal with this more elegantly. When we have a block\n      // select operation, first row is selected (and updated via server), then\n      // remaining rows are selected when we select the block-end row. We get an\n      // update for all rows except first. Because we're extending the select status\n      // on the client, we have to adjust the first row selected (its still selected\n      // but is no longer the 'last selected row in block')\n      // Maybe answer is to apply ALL the selection status code here, not in Viewport\n      if (data[SELECTED]) {\n        const previousRow = this.data[internalIndex - 1];\n        if (isRowSelectedLast(previousRow)) {\n          this.data[internalIndex - 1] = previousRow.slice() as DataSourceRow;\n          this.data[internalIndex - 1][SELECTED] -= 4;\n        }\n      }\n    }\n  }\n\n  getAtIndex(index: number) {\n    return this.range.isWithin(index) &&\n      this.data[index - this.range.from] != null\n      ? this.data[index - this.range.from]\n      : undefined;\n  }\n\n  isWithinRange(index: number) {\n    return this.range.isWithin(index);\n  }\n\n  setRange({ from, to }: VuuRange) {\n    if (from !== this.range.from || to !== this.range.to) {\n      const [overlapFrom, overlapTo] = this.range.overlap(from, to);\n      const newData = new Array(Math.max(0, to - from));\n      for (let i = overlapFrom; i < overlapTo; i++) {\n        const data = this.getAtIndex(i);\n        if (data) {\n          const index = i - from;\n          newData[index] = data;\n        }\n      }\n      this.data = newData;\n      this.range.from = from;\n      this.range.to = to;\n    }\n  }\n\n  getSelectedRows() {\n    return this.data.filter((row) => row[SELECTED] !== 0);\n  }\n}\n"],"names":["metadataKeys","WindowRange","isRowSelectedLast"],"mappings":"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"}
+{"version":3,"file":"moving-window.js","sources":["../src/moving-window.ts"],"sourcesContent":["import { DataSourceRow } from \"@vuu-ui/vuu-data-types\";\nimport {\n  isRowSelectedLast,\n  metadataKeys,\n  WindowRange,\n} from \"@vuu-ui/vuu-utils\";\nimport { VuuRange } from \"@vuu-ui/vuu-protocol-types\";\n\nconst { SELECTED } = metadataKeys;\n\nexport class MovingWindow {\n  public data: DataSourceRow[];\n  public rowCount = 0;\n  #range: WindowRange;\n\n  constructor({ from, to }: VuuRange) {\n    this.#range = new WindowRange(from, to);\n    //internal data is always 0 based, we add range.from to determine an offset\n    this.data = new Array(Math.max(0, to - from));\n    this.rowCount = 0;\n  }\n\n  setRowCount = (rowCount: number) => {\n    if (rowCount < this.data.length) {\n      this.data.length = rowCount;\n    }\n\n    this.rowCount = rowCount;\n  };\n\n  add(data: DataSourceRow) {\n    const [index] = data;\n    if (this.isWithinRange(index)) {\n      const internalIndex = index - this.#range.from;\n      this.data[internalIndex] = data;\n\n      // Hack until we can deal with this more elegantly. When we have a block\n      // select operation, first row is selected (and updated via server), then\n      // remaining rows are selected when we select the block-end row. We get an\n      // update for all rows except first. Because we're extending the select status\n      // on the client, we have to adjust the first row selected (its still selected\n      // but is no longer the 'last selected row in block')\n      // Maybe answer is to apply ALL the selection status code here, not in Viewport\n      if (data[SELECTED]) {\n        const previousRow = this.data[internalIndex - 1];\n        if (isRowSelectedLast(previousRow)) {\n          this.data[internalIndex - 1] = previousRow.slice() as DataSourceRow;\n          this.data[internalIndex - 1][SELECTED] -= 4;\n        }\n      }\n    }\n  }\n\n  getAtIndex(index: number) {\n    return this.#range.isWithin(index) &&\n      this.data[index - this.#range.from] != null\n      ? this.data[index - this.#range.from]\n      : undefined;\n  }\n\n  isWithinRange(index: number) {\n    return this.#range.isWithin(index);\n  }\n\n  setRange({ from, to }: VuuRange) {\n    if (from !== this.#range.from || to !== this.#range.to) {\n      const [overlapFrom, overlapTo] = this.#range.overlap(from, to);\n      const newData = new Array(Math.max(0, to - from));\n      for (let i = overlapFrom; i < overlapTo; i++) {\n        const data = this.getAtIndex(i);\n        if (data) {\n          const index = i - from;\n          newData[index] = data;\n        }\n      }\n      this.data = newData;\n      this.#range.from = from;\n      this.#range.to = to;\n    }\n  }\n\n  getSelectedRows() {\n    return this.data.filter((row) => row[SELECTED] !== 0);\n  }\n\n  get range() {\n    return this.#range;\n  }\n}\n"],"names":["metadataKeys","WindowRange","isRowSelectedLast"],"mappings":"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"}

package/cjs/pagination/PaginationControl.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var paginationControlCss = ".vuuPaginationControl {\n  padding: 0 var(--salt-spacing-100);\n  .saltButton {\n    .saltIcon {\n      display: block !important;\n    }\n  }\n}\n";
+
+module.exports = paginationControlCss;
+//# sourceMappingURL=PaginationControl.css.js.map

package/cjs/pagination/PaginationControl.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationControl.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/cjs/pagination/PaginationControl.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var core = require('@salt-ds/core');
+var cx = require('clsx');
+var usePagination = require('./usePagination.js');
+var PaginationControl$1 = require('./PaginationControl.css.js');
+var react = require('react');
+
+const classBase = "vuuPaginationControl";
+const PaginationControl = react.forwardRef(function PaginationControl2({ className, dataSource, ...htmlAttributes }, forwardedRef) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "vuu-table",
+    css: PaginationControl$1,
+    window: targetWindow
+  });
+  const { onPageChange, pageCount } = usePagination.usePagination({
+    dataSource
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx(classBase, className),
+      ref: forwardedRef,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(core.Pagination, { count: pageCount, onPageChange, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core.GoToInput, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Paginator, {})
+      ] })
+    }
+  );
+});
+
+exports.PaginationControl = PaginationControl;
+//# sourceMappingURL=PaginationControl.js.map

package/cjs/pagination/PaginationControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationControl.js","sources":["../../src/pagination/PaginationControl.tsx"],"sourcesContent":["import { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { GoToInput, Pagination, Paginator } from \"@salt-ds/core\";\nimport cx from \"clsx\";\nimport { usePagination } from \"./usePagination\";\n\nimport paginationControlCss from \"./PaginationControl.css\";\nimport { HtmlHTMLAttributes, forwardRef } from \"react\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nconst classBase = \"vuuPaginationControl\";\n\nexport interface PaginationControlProps\n  extends HtmlHTMLAttributes<HTMLDivElement> {\n  dataSource: DataSource;\n}\n\nexport const PaginationControl = forwardRef<\n  HTMLDivElement,\n  PaginationControlProps\n>(function PaginationControl(\n  { className, dataSource, ...htmlAttributes },\n  forwardedRef,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"vuu-table\",\n    css: paginationControlCss,\n    window: targetWindow,\n  });\n\n  const { onPageChange, pageCount } = usePagination({\n    dataSource,\n  });\n\n  return (\n    <div\n      {...htmlAttributes}\n      className={cx(classBase, className)}\n      ref={forwardedRef}\n    >\n      <Pagination count={pageCount} onPageChange={onPageChange}>\n        <GoToInput />\n        <Paginator />\n      </Pagination>\n    </div>\n  );\n});\n"],"names":["forwardRef","PaginationControl","useWindow","useComponentCssInjection","paginationControlCss","usePagination","jsx","jsxs","Pagination","GoToInput","Paginator"],"mappings":";;;;;;;;;;;AAUA,MAAM,SAAY,GAAA,sBAAA,CAAA;AAOL,MAAA,iBAAA,GAAoBA,gBAG/B,CAAA,SAASC,kBACT,CAAA,EAAE,WAAW,UAAY,EAAA,GAAG,cAAe,EAAA,EAC3C,YACA,EAAA;AACA,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,WAAA;AAAA,IACR,GAAK,EAAAC,mBAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,EAAE,YAAA,EAAc,SAAU,EAAA,GAAIC,2BAAc,CAAA;AAAA,IAChD,UAAA;AAAA,GACD,CAAA,CAAA;AAED,EACE,uBAAAC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,SAAA,EAAW,EAAG,CAAA,SAAA,EAAW,SAAS,CAAA;AAAA,MAClC,GAAK,EAAA,YAAA;AAAA,MAEL,QAAC,kBAAAC,eAAA,CAAAC,eAAA,EAAA,EAAW,KAAO,EAAA,SAAA,EAAW,YAC5B,EAAA,QAAA,EAAA;AAAA,wBAAAF,cAAA,CAACG,cAAU,EAAA,EAAA,CAAA;AAAA,uCACVC,cAAU,EAAA,EAAA,CAAA;AAAA,OACb,EAAA,CAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,CAAC;;;;"}

package/cjs/pagination/usePagination.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var react = require('react');
+
+const getPageCount = (dataSource) => {
+  const { range, size } = dataSource;
+  const pageSize = range.to - range.from;
+  if (pageSize > 0) {
+    return Math.ceil(size / pageSize);
+  } else {
+    return 0;
+  }
+};
+const usePagination = ({ dataSource }) => {
+  const [pageCount, setPageCount] = react.useState(getPageCount(dataSource));
+  react.useMemo(() => {
+    dataSource.on("page-count", (n) => setPageCount(n));
+  }, [dataSource]);
+  const handlePageChange = react.useCallback(
+    (_evt, page) => {
+      const { range } = dataSource;
+      const pageSize = range.to - range.from;
+      const firstRow = pageSize * (page - 1);
+      console.log(
+        `set range ${JSON.stringify({ from: firstRow, to: firstRow + pageSize })}`
+      );
+      dataSource.range = { from: firstRow, to: firstRow + pageSize };
+    },
+    [dataSource]
+  );
+  return {
+    onPageChange: handlePageChange,
+    pageCount
+  };
+};
+
+exports.usePagination = usePagination;
+//# sourceMappingURL=usePagination.js.map

package/cjs/pagination/usePagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.js","sources":["../../src/pagination/usePagination.ts"],"sourcesContent":["import { SyntheticEvent, useCallback, useMemo, useState } from \"react\";\nimport { DataSource } from \"@vuu-ui/vuu-data-types\";\n\nexport interface PaginationHookProps {\n  dataSource: DataSource;\n}\n\nconst getPageCount = (dataSource: DataSource) => {\n  const { range, size } = dataSource;\n  const pageSize = range.to - range.from;\n  if (pageSize > 0) {\n    return Math.ceil(size / pageSize);\n  } else {\n    return 0;\n  }\n};\n\nexport const usePagination = ({ dataSource }: PaginationHookProps) => {\n  const [pageCount, setPageCount] = useState<number>(getPageCount(dataSource));\n\n  useMemo(() => {\n    dataSource.on(\"page-count\", (n: number) => setPageCount(n));\n  }, [dataSource]);\n\n  const handlePageChange = useCallback(\n    (_evt: SyntheticEvent, page: number) => {\n      const { range } = dataSource;\n      const pageSize = range.to - range.from;\n      const firstRow = pageSize * (page - 1);\n      console.log(\n        `set range ${JSON.stringify({ from: firstRow, to: firstRow + pageSize })}`,\n      );\n      dataSource.range = { from: firstRow, to: firstRow + pageSize };\n    },\n    [dataSource],\n  );\n\n  return {\n    onPageChange: handlePageChange,\n    pageCount,\n  };\n};\n"],"names":["useState","useMemo","useCallback"],"mappings":";;;;AAOA,MAAM,YAAA,GAAe,CAAC,UAA2B,KAAA;AAC/C,EAAM,MAAA,EAAE,KAAO,EAAA,IAAA,EAAS,GAAA,UAAA,CAAA;AACxB,EAAM,MAAA,QAAA,GAAW,KAAM,CAAA,EAAA,GAAK,KAAM,CAAA,IAAA,CAAA;AAClC,EAAA,IAAI,WAAW,CAAG,EAAA;AAChB,IAAO,OAAA,IAAA,CAAK,IAAK,CAAA,IAAA,GAAO,QAAQ,CAAA,CAAA;AAAA,GAC3B,MAAA;AACL,IAAO,OAAA,CAAA,CAAA;AAAA,GACT;AACF,CAAA,CAAA;AAEO,MAAM,aAAgB,GAAA,CAAC,EAAE,UAAA,EAAsC,KAAA;AACpE,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,IAAIA,cAAiB,CAAA,YAAA,CAAa,UAAU,CAAC,CAAA,CAAA;AAE3E,EAAAC,aAAA,CAAQ,MAAM;AACZ,IAAA,UAAA,CAAW,GAAG,YAAc,EAAA,CAAC,CAAc,KAAA,YAAA,CAAa,CAAC,CAAC,CAAA,CAAA;AAAA,GAC5D,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAA,MAAM,gBAAmB,GAAAC,iBAAA;AAAA,IACvB,CAAC,MAAsB,IAAiB,KAAA;AACtC,MAAM,MAAA,EAAE,OAAU,GAAA,UAAA,CAAA;AAClB,MAAM,MAAA,QAAA,GAAW,KAAM,CAAA,EAAA,GAAK,KAAM,CAAA,IAAA,CAAA;AAClC,MAAM,MAAA,QAAA,GAAW,YAAY,IAAO,GAAA,CAAA,CAAA,CAAA;AACpC,MAAQ,OAAA,CAAA,GAAA;AAAA,QACN,CAAA,UAAA,EAAa,IAAK,CAAA,SAAA,CAAU,EAAE,IAAA,EAAM,UAAU,EAAI,EAAA,QAAA,GAAW,QAAS,EAAC,CAAC,CAAA,CAAA;AAAA,OAC1E,CAAA;AACA,MAAA,UAAA,CAAW,QAAQ,EAAE,IAAA,EAAM,QAAU,EAAA,EAAA,EAAI,WAAW,QAAS,EAAA,CAAA;AAAA,KAC/D;AAAA,IACA,CAAC,UAAU,CAAA;AAAA,GACb,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,YAAc,EAAA,gBAAA;AAAA,IACd,SAAA;AAAA,GACF,CAAA;AACF;;;;"}

package/cjs/useControlledTableNavigation.js

@@ -4,6 +4,7 @@ var vuuUiControls = require('@vuu-ui/vuu-ui-controls');
 var vuuUtils = require('@vuu-ui/vuu-utils');
 var react = require('react');
 
+const isRowSelectionKey = (key) => key === "Enter" || key === " ";
 const useControlledTableNavigation = (initialValue, rowCount) => {
   const tableRef = react.useRef(null);
   const [highlightedIndexRef, setHighlightedIndex] = vuuUiControls.useStateRef(initialValue);
@@ -13,7 +14,7 @@ const useControlledTableNavigation = (initialValue, rowCount) => {
         setHighlightedIndex((index = -1) => Math.min(rowCount - 1, index + 1));
       } else if (e.key === "ArrowUp") {
         setHighlightedIndex((index = -1) => Math.max(0, index - 1));
-      } else if (e.key === "Enter" || e.key === " ") {
+      } else if (isRowSelectionKey(e.key)) {
         const { current: rowIdx } = highlightedIndexRef;
         if (typeof rowIdx === "number") {
           const rowEl = tableRef.current?.querySelector(
@@ -41,5 +42,6 @@ const useControlledTableNavigation = (initialValue, rowCount) => {
   };
 };
 
+exports.isRowSelectionKey = isRowSelectionKey;
 exports.useControlledTableNavigation = useControlledTableNavigation;
 //# sourceMappingURL=useControlledTableNavigation.js.map

package/cjs/useControlledTableNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useControlledTableNavigation.js","sources":["../src/useControlledTableNavigation.ts"],"sourcesContent":["import { useStateRef } from \"@vuu-ui/vuu-ui-controls\";\nimport { dispatchMouseEvent } from \"@vuu-ui/vuu-utils\";\nimport { KeyboardEventHandler, useCallback, useRef } from \"react\";\n\nexport const useControlledTableNavigation = (\n  initialValue: number,\n  rowCount: number,\n) => {\n  const tableRef = useRef<HTMLDivElement>(null);\n\n  const [highlightedIndexRef, setHighlightedIndex] = useStateRef<\n    number | undefined\n  >(initialValue);\n\n  const handleKeyDown = useCallback<KeyboardEventHandler>(\n    (e) => {\n      if (e.key === \"ArrowDown\") {\n        setHighlightedIndex((index = -1) => Math.min(rowCount - 1, index + 1));\n      } else if (e.key === \"ArrowUp\") {\n        setHighlightedIndex((index = -1) => Math.max(0, index - 1));\n      } else if (e.key === \"Enter\" || e.key === \" \") {\n        const { current: rowIdx } = highlightedIndexRef;\n        // induce an onSelect event by 'clicking' the row\n        if (typeof rowIdx === \"number\") {\n          const rowEl = tableRef.current?.querySelector(\n            `[aria-rowindex=\"${rowIdx + 1}\"]`,\n          ) as HTMLElement;\n          if (rowEl) {\n            dispatchMouseEvent(rowEl, \"click\");\n          }\n        }\n      }\n    },\n    [highlightedIndexRef, rowCount, setHighlightedIndex],\n  );\n\n  const handleHighlight = useCallback(\n    (idx: number) => {\n      setHighlightedIndex(idx);\n    },\n    [setHighlightedIndex],\n  );\n\n  return {\n    highlightedIndexRef,\n    onHighlight: handleHighlight,\n    onKeyDown: handleKeyDown,\n    tableRef,\n  };\n};\n"],"names":["useRef","useStateRef","useCallback","dispatchMouseEvent"],"mappings":";;;;;;AAIa,MAAA,4BAAA,GAA+B,CAC1C,YAAA,EACA,QACG,KAAA;AACH,EAAM,MAAA,QAAA,GAAWA,aAAuB,IAAI,CAAA,CAAA;AAE5C,EAAA,MAAM,CAAC,mBAAA,EAAqB,mBAAmB,CAAA,GAAIC,0BAEjD,YAAY,CAAA,CAAA;AAEd,EAAA,MAAM,aAAgB,GAAAC,iBAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAI,IAAA,CAAA,CAAE,QAAQ,WAAa,EAAA;AACzB,QAAoB,mBAAA,CAAA,CAAC,QAAQ,CAAO,CAAA,KAAA,IAAA,CAAK,IAAI,QAAW,GAAA,CAAA,EAAG,KAAQ,GAAA,CAAC,CAAC,CAAA,CAAA;AAAA,OACvE,MAAA,IAAW,CAAE,CAAA,GAAA,KAAQ,SAAW,EAAA;AAC9B,QAAoB,mBAAA,CAAA,CAAC,QAAQ,CAAO,CAAA,KAAA,IAAA,CAAK,IAAI,CAAG,EAAA,KAAA,GAAQ,CAAC,CAAC,CAAA,CAAA;AAAA,iBACjD,CAAE,CAAA,GAAA,KAAQ,OAAW,IAAA,CAAA,CAAE,QAAQ,GAAK,EAAA;AAC7C,QAAM,MAAA,EAAE,OAAS,EAAA,MAAA,EAAW,GAAA,mBAAA,CAAA;AAE5B,QAAI,IAAA,OAAO,WAAW,QAAU,EAAA;AAC9B,UAAM,MAAA,KAAA,GAAQ,SAAS,OAAS,EAAA,aAAA;AAAA,YAC9B,CAAA,gBAAA,EAAmB,SAAS,CAAC,CAAA,EAAA,CAAA;AAAA,WAC/B,CAAA;AACA,UAAA,IAAI,KAAO,EAAA;AACT,YAAAC,2BAAA,CAAmB,OAAO,OAAO,CAAA,CAAA;AAAA,WACnC;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,mBAAqB,EAAA,QAAA,EAAU,mBAAmB,CAAA;AAAA,GACrD,CAAA;AAEA,EAAA,MAAM,eAAkB,GAAAD,iBAAA;AAAA,IACtB,CAAC,GAAgB,KAAA;AACf,MAAA,mBAAA,CAAoB,GAAG,CAAA,CAAA;AAAA,KACzB;AAAA,IACA,CAAC,mBAAmB,CAAA;AAAA,GACtB,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,mBAAA;AAAA,IACA,WAAa,EAAA,eAAA;AAAA,IACb,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,GACF,CAAA;AACF;;;;"}
+{"version":3,"file":"useControlledTableNavigation.js","sources":["../src/useControlledTableNavigation.ts"],"sourcesContent":["import { useStateRef } from \"@vuu-ui/vuu-ui-controls\";\nimport { dispatchMouseEvent } from \"@vuu-ui/vuu-utils\";\nimport { KeyboardEventHandler, useCallback, useRef } from \"react\";\n\nexport const isRowSelectionKey = (key: string) =>\n  key === \"Enter\" || key === \" \";\n\nexport const useControlledTableNavigation = (\n  initialValue: number,\n  rowCount: number,\n) => {\n  const tableRef = useRef<HTMLDivElement>(null);\n\n  const [highlightedIndexRef, setHighlightedIndex] = useStateRef<\n    number | undefined\n  >(initialValue);\n\n  const handleKeyDown = useCallback<KeyboardEventHandler>(\n    (e) => {\n      if (e.key === \"ArrowDown\") {\n        setHighlightedIndex((index = -1) => Math.min(rowCount - 1, index + 1));\n      } else if (e.key === \"ArrowUp\") {\n        setHighlightedIndex((index = -1) => Math.max(0, index - 1));\n      } else if (isRowSelectionKey(e.key)) {\n        const { current: rowIdx } = highlightedIndexRef;\n        // induce an onSelect event by 'clicking' the row\n        if (typeof rowIdx === \"number\") {\n          const rowEl = tableRef.current?.querySelector(\n            `[aria-rowindex=\"${rowIdx + 1}\"]`,\n          ) as HTMLElement;\n          if (rowEl) {\n            dispatchMouseEvent(rowEl, \"click\");\n          }\n        }\n      }\n    },\n    [highlightedIndexRef, rowCount, setHighlightedIndex],\n  );\n\n  const handleHighlight = useCallback(\n    (idx: number) => {\n      setHighlightedIndex(idx);\n    },\n    [setHighlightedIndex],\n  );\n\n  return {\n    highlightedIndexRef,\n    onHighlight: handleHighlight,\n    onKeyDown: handleKeyDown,\n    tableRef,\n  };\n};\n"],"names":["useRef","useStateRef","useCallback","dispatchMouseEvent"],"mappings":";;;;;;AAIO,MAAM,iBAAoB,GAAA,CAAC,GAChC,KAAA,GAAA,KAAQ,WAAW,GAAQ,KAAA,IAAA;AAEhB,MAAA,4BAAA,GAA+B,CAC1C,YAAA,EACA,QACG,KAAA;AACH,EAAM,MAAA,QAAA,GAAWA,aAAuB,IAAI,CAAA,CAAA;AAE5C,EAAA,MAAM,CAAC,mBAAA,EAAqB,mBAAmB,CAAA,GAAIC,0BAEjD,YAAY,CAAA,CAAA;AAEd,EAAA,MAAM,aAAgB,GAAAC,iBAAA;AAAA,IACpB,CAAC,CAAM,KAAA;AACL,MAAI,IAAA,CAAA,CAAE,QAAQ,WAAa,EAAA;AACzB,QAAoB,mBAAA,CAAA,CAAC,QAAQ,CAAO,CAAA,KAAA,IAAA,CAAK,IAAI,QAAW,GAAA,CAAA,EAAG,KAAQ,GAAA,CAAC,CAAC,CAAA,CAAA;AAAA,OACvE,MAAA,IAAW,CAAE,CAAA,GAAA,KAAQ,SAAW,EAAA;AAC9B,QAAoB,mBAAA,CAAA,CAAC,QAAQ,CAAO,CAAA,KAAA,IAAA,CAAK,IAAI,CAAG,EAAA,KAAA,GAAQ,CAAC,CAAC,CAAA,CAAA;AAAA,OACjD,MAAA,IAAA,iBAAA,CAAkB,CAAE,CAAA,GAAG,CAAG,EAAA;AACnC,QAAM,MAAA,EAAE,OAAS,EAAA,MAAA,EAAW,GAAA,mBAAA,CAAA;AAE5B,QAAI,IAAA,OAAO,WAAW,QAAU,EAAA;AAC9B,UAAM,MAAA,KAAA,GAAQ,SAAS,OAAS,EAAA,aAAA;AAAA,YAC9B,CAAA,gBAAA,EAAmB,SAAS,CAAC,CAAA,EAAA,CAAA;AAAA,WAC/B,CAAA;AACA,UAAA,IAAI,KAAO,EAAA;AACT,YAAAC,2BAAA,CAAmB,OAAO,OAAO,CAAA,CAAA;AAAA,WACnC;AAAA,SACF;AAAA,OACF;AAAA,KACF;AAAA,IACA,CAAC,mBAAqB,EAAA,QAAA,EAAU,mBAAmB,CAAA;AAAA,GACrD,CAAA;AAEA,EAAA,MAAM,eAAkB,GAAAD,iBAAA;AAAA,IACtB,CAAC,GAAgB,KAAA;AACf,MAAA,mBAAA,CAAoB,GAAG,CAAA,CAAA;AAAA,KACzB;AAAA,IACA,CAAC,mBAAmB,CAAA;AAAA,GACtB,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,mBAAA;AAAA,IACA,WAAa,EAAA,eAAA;AAAA,IACb,SAAW,EAAA,aAAA;AAAA,IACX,QAAA;AAAA,GACF,CAAA;AACF;;;;;"}