@vuu-ui/vuu-table 0.8.24-debug → 0.8.25-debug

package/esm/index.js

@@ -1,4 +1,4 @@
-// src/header-cell/GroupHeaderCellNext.tsx
+// src/header-cell/GroupHeaderCell.tsx
 import { OverflowContainer } from "@vuu-ui/vuu-ui-controls";
 import { useLayoutEffectSkipFirst } from "@vuu-ui/vuu-utils";
 import cx3 from "clsx";
@@ -186,27 +186,27 @@ var useTableColumnResize = ({
 import { getColumnStyle } from "@vuu-ui/vuu-utils";
 import cx2 from "clsx";
 import { useMemo } from "react";
-var useCell = (column, classBase10, isHeader) => (
+var useCell = (column, classBase11, isHeader) => (
   // TODO measure perf without the memo, might not be worth the cost
   useMemo(() => {
-    const className = cx2(classBase10, {
+    const className = cx2(classBase11, {
       vuuPinFloating: column.pin === "floating",
       vuuPinLeft: column.pin === "left",
       vuuPinRight: column.pin === "right",
       vuuEndPin: isHeader && column.endPin,
       // [`${classBase}-resizing`]: column.resizing,
-      [`${classBase10}-editable`]: column.editable,
-      [`${classBase10}-right`]: column.align === "right"
+      [`${classBase11}-editable`]: column.editable,
+      [`${classBase11}-right`]: column.align === "right"
     });
     const style = getColumnStyle(column);
     return {
       className,
       style
     };
-  }, [column, classBase10, isHeader])
+  }, [column, classBase11, isHeader])
 );
 
-// src/header-cell/GroupHeaderCellNext.tsx
+// src/header-cell/GroupHeaderCell.tsx
 import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 import { createElement } from "react";
 var classBase2 = "vuuTableGroupHeaderCell";
@@ -217,7 +217,7 @@ var switchIfChanged = (columns, newColumns) => {
     return newColumns;
   }
 };
-var GroupHeaderCellNext = ({
+var GroupHeaderCell = ({
   column: groupColumn,
   className: classNameProp,
   onMoveColumn,
@@ -274,7 +274,6 @@ var GroupHeaderCellNext = ({
           {
             allowDragDrop: true,
             className: `${classBase2}-inner`,
-            height: 24,
             onMoveItem: handleMoveItem,
             overflowPosition: "start",
             children: columns.map((column) => {
@@ -305,64 +304,28 @@ var GroupHeaderCellNext = ({
 
 // src/header-cell/HeaderCell.tsx
 import cx5 from "clsx";
-import { useCallback as useCallback6, useRef as useRef5 } from "react";
+import { useCallback as useCallback5, useRef as useRef4 } from "react";
 
 // src/column-menu/ColumnMenu.tsx
-import { useContextMenu } from "@vuu-ui/vuu-popups";
+import { PopupMenu } from "@vuu-ui/vuu-popups";
 import cx4 from "clsx";
-import {
-  useCallback as useCallback5,
-  useRef as useRef4,
-  useState as useState3
-} from "react";
 import { jsx as jsx6 } from "react/jsx-runtime";
-var getPosition = (element) => {
-  if (element) {
-    const { bottom, left } = element.getBoundingClientRect();
-    return { x: left, y: bottom + 6 };
-  }
-};
-var ColumnMenu = ({
-  className,
-  column,
-  ...props
-}) => {
-  const rootRef = useRef4(null);
-  const [menuOpen, setMenuOpen] = useState3(false);
-  const [showContextMenu] = useContextMenu();
-  const handleMenuClose = useCallback5(() => {
-    setMenuOpen(false);
-  }, []);
-  const showColumnMenu = useCallback5(
-    (e) => {
-      setMenuOpen(true);
-      showContextMenu(e, "column-menu", {
-        column,
-        ContextMenuProps: {
-          onClose: handleMenuClose,
-          position: getPosition(rootRef.current)
-        }
-      });
-    },
-    [column, handleMenuClose, showContextMenu]
-  );
+var classBase3 = "vuuColumnMenu";
+var ColumnMenu = ({ className, column }) => {
   return /* @__PURE__ */ jsx6(
-    "span",
+    PopupMenu,
     {
-      ...props,
-      className: cx4("vuuTable-columnMenu", className, {
-        "vuuTable-columnMenu-open": menuOpen
-      }),
-      "data-icon": "more-vert",
-      onClick: showColumnMenu,
-      ref: rootRef
+      className: cx4(classBase3, className),
+      "data-embedded": true,
+      menuLocation: "column-menu",
+      menuOptions: { column }
     }
   );
 };
 
 // src/header-cell/HeaderCell.tsx
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var classBase3 = "vuuTableHeaderCell";
+var classBase4 = "vuuTableHeaderCell";
 var HeaderCell = ({
   className: classNameProp,
   column,
@@ -372,21 +335,21 @@ var HeaderCell = ({
 }) => {
   var _a;
   const { HeaderCellContentRenderer, HeaderCellLabelRenderer } = column;
-  const rootRef = useRef5(null);
+  const rootRef = useRef4(null);
   const { isResizing, ...resizeProps } = useTableColumnResize({
     column,
     onResize,
     rootRef
   });
-  const handleClick = useCallback6(
+  const handleClick = useCallback5(
     (evt) => {
       !isResizing && (onClick == null ? void 0 : onClick(evt));
     },
     [isResizing, onClick]
   );
-  const { className, style } = useCell(column, classBase3, true);
+  const { className, style } = useCell(column, classBase4, true);
   const columnMenu = /* @__PURE__ */ jsx7(ColumnMenu, { column });
-  const columnLabel = HeaderCellLabelRenderer ? /* @__PURE__ */ jsx7(HeaderCellLabelRenderer, { className: `${classBase3}-label`, column }) : /* @__PURE__ */ jsx7("div", { className: `${classBase3}-label`, children: (_a = column.label) != null ? _a : column.name });
+  const columnLabel = HeaderCellLabelRenderer ? /* @__PURE__ */ jsx7(HeaderCellLabelRenderer, { className: `${classBase4}-label`, column }) : /* @__PURE__ */ jsx7("div", { className: `${classBase4}-label`, children: (_a = column.label) != null ? _a : column.name });
   const columnContent = HeaderCellContentRenderer ? [/* @__PURE__ */ jsx7(HeaderCellContentRenderer, { column }, "content")] : [];
   const sortIndicator = /* @__PURE__ */ jsx7(SortIndicator, { column });
   const headerItems = column.align === "right" ? [sortIndicator, columnLabel].concat(columnContent).concat(columnMenu) : [columnMenu, columnLabel, sortIndicator].concat(columnContent);
@@ -395,7 +358,7 @@ var HeaderCell = ({
     {
       ...htmlAttributes,
       className: cx5(className, classNameProp, {
-        [`${classBase3}-resizing`]: isResizing
+        [`${classBase4}-resizing`]: isResizing
       }),
       onClick: handleClick,
       ref: rootRef,
@@ -419,8 +382,8 @@ import { useForkRef } from "@salt-ds/core";
 import cx9 from "clsx";
 import {
   forwardRef as forwardRef2,
-  useRef as useRef16,
-  useState as useState9
+  useRef as useRef15,
+  useState as useState8
 } from "react";
 
 // src/Row.tsx
@@ -436,14 +399,14 @@ import cx7 from "clsx";
 import {
   forwardRef,
   memo,
-  useCallback as useCallback9
+  useCallback as useCallback8
 } from "react";
 
 // src/table-cell/TableCell.tsx
 import { isNumericColumn } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback7 } from "react";
+import { useCallback as useCallback6 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
-var classBase4 = "vuuTableCell";
+var classBase5 = "vuuTableCell";
 var TableCell = ({
   column,
   columnMap,
@@ -451,10 +414,10 @@ var TableCell = ({
   onDataEdited,
   row
 }) => {
-  const { className, style } = useCell(column, classBase4);
+  const { className, style } = useCell(column, classBase5);
   const { CellRenderer, index, name, valueFormatter } = column;
   const dataIdx = columnMap[name];
-  const handleDataItemEdited = useCallback7(
+  const handleDataItemEdited = useCallback6(
     (value) => {
       if (onDataEdited) {
         let typedValue = value;
@@ -470,7 +433,7 @@ var TableCell = ({
     },
     [column, name, onDataEdited, row]
   );
-  const handleClick = useCallback7(
+  const handleClick = useCallback6(
     (evt) => {
       onClick == null ? void 0 : onClick(evt, column);
     },
@@ -499,11 +462,11 @@ var TableCell = ({
 
 // src/table-cell/TableGroupCell.tsx
 import { getGroupValueAndOffset, metadataKeys } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback8 } from "react";
+import { useCallback as useCallback7 } from "react";
 import cx6 from "clsx";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var { IS_LEAF } = metadataKeys;
-var classBase5 = "vuuTableGroupCell";
+var classBase6 = "vuuTableGroupCell";
 var TableGroupCell = ({
   column,
   columnMap,
@@ -512,15 +475,15 @@ var TableGroupCell = ({
 }) => {
   const { columns } = column;
   const [value, offset] = getGroupValueAndOffset(columns, row, columnMap);
-  const { className, style } = useCell(column, classBase5);
-  const handleClick = useCallback8(
+  const { className, style } = useCell(column, classBase6);
+  const handleClick = useCallback7(
     (evt) => {
       onClick == null ? void 0 : onClick(evt, column);
     },
     [column, onClick]
   );
   const isLeaf = row[IS_LEAF];
-  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ jsx9("span", { className: `${classBase5}-spacer` }, i));
+  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ jsx9("span", { className: `${classBase6}-spacer` }, i));
   return /* @__PURE__ */ jsxs6(
     "div",
     {
@@ -530,7 +493,7 @@ var TableGroupCell = ({
       onClick: isLeaf ? void 0 : handleClick,
       children: [
         spacers,
-        isLeaf ? null : /* @__PURE__ */ jsx9("span", { className: `${classBase5}-toggle`, "data-icon": "triangle-right" }),
+        isLeaf ? null : /* @__PURE__ */ jsx9("span", { className: `${classBase6}-toggle`, "data-icon": "triangle-right" }),
         /* @__PURE__ */ jsx9("span", { children: value })
       ]
     }
@@ -540,14 +503,14 @@ var TableGroupCell = ({
 // src/Row.tsx
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var { IDX, IS_EXPANDED, SELECTED } = metadataKeys2;
-var classBase6 = "vuuTableRow";
+var classBase7 = "vuuTableRow";
 var RowProxy = forwardRef(
   function RowProxy2({ height }, forwardedRef) {
     return /* @__PURE__ */ jsx10(
       "div",
       {
         "aria-hidden": true,
-        className: cx7(classBase6, `${classBase6}-proxy`),
+        className: cx7(classBase7, `${classBase7}-proxy`),
         ref: forwardedRef,
         style: { height }
       }
@@ -575,30 +538,30 @@ var Row = memo(
       [IS_EXPANDED]: isExpanded,
       [SELECTED]: selectionStatus
     } = row;
-    const handleRowClick = useCallback9(
+    const handleRowClick = useCallback8(
       (evt) => {
         const rangeSelect = evt.shiftKey;
         const keepExistingSelection = evt.ctrlKey || evt.metaKey;
-        onClick == null ? void 0 : onClick(row, rangeSelect, keepExistingSelection);
+        onClick == null ? void 0 : onClick(evt, row, rangeSelect, keepExistingSelection);
       },
       [onClick, row]
     );
     const { True, First, Last } = RowSelected;
     const className = cx7(
-      classBase6,
+      classBase7,
       classNameProp,
       classNameGenerator == null ? void 0 : classNameGenerator(row, columnMap),
       {
-        [`${classBase6}-even`]: zebraStripes && rowIndex % 2 === 0,
-        [`${classBase6}-expanded`]: isExpanded,
-        [`${classBase6}-highlighted`]: highlighted,
-        [`${classBase6}-selected`]: selectionStatus & True,
-        [`${classBase6}-selectedStart`]: selectionStatus & First,
-        [`${classBase6}-selectedEnd`]: selectionStatus & Last
+        [`${classBase7}-even`]: zebraStripes && rowIndex % 2 === 0,
+        [`${classBase7}-expanded`]: isExpanded,
+        [`${classBase7}-highlighted`]: highlighted,
+        [`${classBase7}-selected`]: selectionStatus & True,
+        [`${classBase7}-selectedStart`]: selectionStatus & First,
+        [`${classBase7}-selectedEnd`]: selectionStatus & Last
       }
     );
     const style = { transform: `translate3d(0px, ${offset}px, 0px)` };
-    const handleGroupCellClick = useCallback9(
+    const handleGroupCellClick = useCallback8(
       (evt, column) => {
         if (isGroupColumn(column) || isJsonGroup(column, row, columnMap)) {
           evt.stopPropagation();
@@ -616,7 +579,7 @@ var Row = memo(
         onClick: handleRowClick,
         style,
         children: [
-          /* @__PURE__ */ jsx10("span", { className: `${classBase6}-selectionDecorator vuuStickyLeft` }),
+          /* @__PURE__ */ jsx10("span", { className: `${classBase7}-selectionDecorator vuuStickyLeft` }),
           virtualColSpan > 0 ? /* @__PURE__ */ jsx10("div", { className: "vuuTableCell", style: { width: virtualColSpan } }) : null,
           columns.filter(isNotHidden).map((column) => {
             const isGroup = isGroupColumn(column);
@@ -634,7 +597,7 @@ var Row = memo(
               column.name
             );
           }),
-          /* @__PURE__ */ jsx10("span", { className: `${classBase6}-selectionDecorator vuuStickyRight` })
+          /* @__PURE__ */ jsx10("span", { className: `${classBase7}-selectionDecorator vuuStickyRight` })
         ]
       }
     );
@@ -652,16 +615,16 @@ import {
   useDragDrop
 } from "@vuu-ui/vuu-ui-controls";
 import { moveColumnTo, visibleColumnAtIndex } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback10, useRef as useRef6 } from "react";
+import { useCallback as useCallback9, useRef as useRef5 } from "react";
 var useTableHeader = ({
   columns,
   onMoveColumn,
   onSortColumn,
   tableConfig
 }) => {
-  const containerRef = useRef6(null);
-  const scrollingContainerRef = useRef6(null);
-  const setContainerRef = useCallback10((el) => {
+  const containerRef = useRef5(null);
+  const scrollingContainerRef = useRef5(null);
+  const setContainerRef = useCallback9((el) => {
     containerRef.current = el;
     if (el) {
       scrollingContainerRef.current = el.closest(".vuuTable-contentContainer");
@@ -669,7 +632,7 @@ var useTableHeader = ({
       scrollingContainerRef.current = null;
     }
   }, []);
-  const handleDropColumnHeader = useCallback10(
+  const handleDropColumnHeader = useCallback9(
     ({ fromIndex: moveFrom, toIndex: moveTo }) => {
       const column = columns[moveFrom];
       const orderedColumns = moveColumnTo(columns, column, moveTo);
@@ -685,7 +648,7 @@ var useTableHeader = ({
     },
     [columns, onMoveColumn, tableConfig.columns]
   );
-  const handleColumnHeaderClick = useCallback10(
+  const handleColumnHeaderClick = useCallback9(
     (evt) => {
       var _a;
       const targetElement = evt.target;
@@ -725,7 +688,7 @@ var useTableHeader = ({
 import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var TableHeader = memo2(
   ({
-    classBase: classBase10 = "vuuTable",
+    classBase: classBase11 = "vuuTable",
     columns,
     headings,
     onMoveColumn,
@@ -749,9 +712,9 @@ var TableHeader = memo2(
       onSortColumn,
       tableConfig
     });
-    return /* @__PURE__ */ jsxs8("div", { className: `${classBase10}-col-headings`, ref: setContainerRef, children: [
+    return /* @__PURE__ */ jsxs8("div", { className: `${classBase11}-col-headings`, ref: setContainerRef, children: [
       headings.map((colHeaders, i) => /* @__PURE__ */ jsx11("div", { className: "vuuTable-heading", children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ jsx11("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j)) }, i)),
-      /* @__PURE__ */ jsxs8("div", { className: `${classBase10}-col-headers`, role: "row", children: [
+      /* @__PURE__ */ jsxs8("div", { className: `${classBase11}-col-headers`, role: "row", children: [
         virtualColSpan > 0 ? /* @__PURE__ */ jsx11(
           "div",
           {
@@ -762,7 +725,7 @@ var TableHeader = memo2(
         ) : null,
         columns.filter(isNotHidden2).map(
           (col, i) => isGroupColumn2(col) ? /* @__PURE__ */ jsx11(
-            GroupHeaderCellNext,
+            GroupHeaderCell,
             {
               "aria-colindex": col.index,
               column: col,
@@ -802,6 +765,7 @@ import {
 } from "@vuu-ui/vuu-ui-controls";
 import {
   applySort,
+  asDataSourceRowObject,
   buildColumnMap as buildColumnMap2,
   getIndexFromRowElement as getIndexFromRowElement3,
   isGroupColumn as isGroupColumn4,
@@ -812,11 +776,11 @@ import {
   useLayoutEffectSkipFirst as useLayoutEffectSkipFirst2
 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback19,
+  useCallback as useCallback18,
   useEffect as useEffect4,
   useMemo as useMemo7,
-  useRef as useRef14,
-  useState as useState7
+  useRef as useRef13,
+  useState as useState6
 } from "react";
 
 // src/context-menu/buildContextMenuDescriptors.ts
@@ -1139,7 +1103,7 @@ var updateTableConfig = (config, action) => {
 // src/useCellEditing.ts
 import { isCharacterKey } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback11
+  useCallback as useCallback10
 } from "react";
 
 // src/table-dom-utils.ts
@@ -1195,10 +1159,10 @@ var howFarIsRowOutsideViewport = (rowEl, totalHeaderHeight, contentContainer = r
 
 // src/useCellEditing.ts
 var useCellEditing = ({ navigate }) => {
-  const commitHandler = useCallback11(() => {
+  const commitHandler = useCallback10(() => {
     navigate();
   }, [navigate]);
-  const editInput = useCallback11(
+  const editInput = useCallback10(
     (evt) => {
       const cellEl = evt.target;
       const input = cellEl.matches("input") ? cellEl : cellEl.querySelector("input");
@@ -1209,7 +1173,7 @@ var useCellEditing = ({ navigate }) => {
     },
     []
   );
-  const focusInput = useCallback11(
+  const focusInput = useCallback10(
     (evt) => {
       const cellEl = evt.target;
       const input = cellEl.querySelector("input");
@@ -1220,7 +1184,7 @@ var useCellEditing = ({ navigate }) => {
     },
     []
   );
-  const handleKeyDown = useCallback11(
+  const handleKeyDown = useCallback10(
     (e) => {
       const el = e.target;
       if (cellIsTextInput(el)) {
@@ -1233,7 +1197,7 @@ var useCellEditing = ({ navigate }) => {
     },
     [editInput, focusInput]
   );
-  const handleDoubleClick = useCallback11(
+  const handleDoubleClick = useCallback10(
     (e) => {
       const el = e.target;
       if (el.matches("input") || el.querySelector("input")) {
@@ -1243,14 +1207,14 @@ var useCellEditing = ({ navigate }) => {
     },
     [editInput]
   );
-  const handleBlur = useCallback11(
+  const handleBlur = useCallback10(
     (e) => {
       const el = e.target;
       el.removeEventListener("vuu-commit", commitHandler, true);
     },
     [commitHandler]
   );
-  const handleFocus = useCallback11(
+  const handleFocus = useCallback10(
     (e) => {
       const el = e.target;
       el.addEventListener("vuu-commit", commitHandler, true);
@@ -1267,7 +1231,7 @@ var useCellEditing = ({ navigate }) => {
 
 // src/useDataSource.ts
 import { getFullRange, NULL_RANGE, rangesAreSame } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback12, useEffect, useMemo as useMemo2, useRef as useRef7, useState as useState4 } from "react";
+import { useCallback as useCallback11, useEffect, useMemo as useMemo2, useRef as useRef6, useState as useState3 } from "react";
 
 // src/moving-window.ts
 import {
@@ -1340,17 +1304,17 @@ var useDataSource = ({
   range = NULL_RANGE,
   renderBufferSize = 0
 }) => {
-  const [, forceUpdate] = useState4(null);
-  const data = useRef7([]);
-  const isMounted = useRef7(true);
-  const hasUpdated = useRef7(false);
-  const rangeRef = useRef7(range);
+  const [, forceUpdate] = useState3(null);
+  const data = useRef6([]);
+  const isMounted = useRef6(true);
+  const hasUpdated = useRef6(false);
+  const rangeRef = useRef6(range);
   const dataWindow = useMemo2(
     () => new MovingWindow(getFullRange(range, renderBufferSize)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const setData = useCallback12(
+  const setData = useCallback11(
     (updates) => {
       for (const row of updates) {
         dataWindow.add(row);
@@ -1363,7 +1327,7 @@ var useDataSource = ({
     },
     [dataWindow]
   );
-  const datasourceMessageHandler = useCallback12(
+  const datasourceMessageHandler = useCallback11(
     (message) => {
       if (message.type === "subscribed") {
         onSubscribed == null ? void 0 : onSubscribed(message);
@@ -1386,7 +1350,7 @@ var useDataSource = ({
     },
     [dataWindow, onFeatureInvocation, onSizeChange, onSubscribed, setData]
   );
-  const getSelectedRows = useCallback12(() => {
+  const getSelectedRows = useCallback11(() => {
     return dataWindow.getSelectedRows();
   }, [dataWindow]);
   useEffect(() => {
@@ -1410,7 +1374,7 @@ var useDataSource = ({
       );
     }
   }, [dataSource, datasourceMessageHandler, range, renderBufferSize]);
-  const setRange = useCallback12(
+  const setRange = useCallback11(
     (range2) => {
       if (!rangesAreSame(range2, rangeRef.current)) {
         const fullRange = getFullRange(range2, renderBufferSize);
@@ -1431,9 +1395,9 @@ var useDataSource = ({
 };
 
 // src/useInitialValue.ts
-import { useMemo as useMemo3, useRef as useRef8 } from "react";
+import { useMemo as useMemo3, useRef as useRef7 } from "react";
 var useInitialValue = (value) => {
-  const ref = useRef8(value);
+  const ref = useRef7(value);
   return useMemo3(() => ref.current, []);
 };
 
@@ -1441,9 +1405,9 @@ var useInitialValue = (value) => {
 import { getIndexFromRowElement } from "@vuu-ui/vuu-utils";
 import { useControlled } from "@salt-ds/core";
 import {
-  useCallback as useCallback13,
+  useCallback as useCallback12,
   useEffect as useEffect2,
-  useRef as useRef9
+  useRef as useRef8
 } from "react";
 var rowNavigationKeys = /* @__PURE__ */ new Set([
   "Home",
@@ -1513,17 +1477,17 @@ var useKeyboardNavigation = ({
   viewportRowCount
 }) => {
   var _a;
-  const focusedCellPos = useRef9([-1, -1]);
-  const focusableCell = useRef9();
-  const activeCellPos = useRef9([-1, 0]);
-  const highlightedIndexRef = useRef9();
+  const focusedCellPos = useRef8([-1, -1]);
+  const focusableCell = useRef8();
+  const activeCellPos = useRef8([-1, 0]);
+  const highlightedIndexRef = useRef8();
   const [highlightedIndex, setHighlightedIdx] = useControlled({
     controlled: highlightedIndexProp,
     default: defaultHighlightedIndex,
     name: "UseKeyboardNavigation"
   });
   highlightedIndexRef.current = highlightedIndex;
-  const setHighlightedIndex = useCallback13(
+  const setHighlightedIndex = useCallback12(
     (idx, fromKeyboard = false) => {
       onHighlight == null ? void 0 : onHighlight(idx);
       setHighlightedIdx(idx);
@@ -1550,7 +1514,7 @@ var useKeyboardNavigation = ({
     }
     return NULL_CELL_POS;
   };
-  const focusCell = useCallback13(
+  const focusCell = useCallback12(
     (cellPos) => {
       var _a2;
       if (containerRef.current) {
@@ -1570,7 +1534,7 @@ var useKeyboardNavigation = ({
     // be often whilst scrolling - store range in a a ref ?
     [containerRef, requestScroll]
   );
-  const setActiveCell = useCallback13(
+  const setActiveCell = useCallback12(
     (rowIdx, colIdx, fromKeyboard = false) => {
       const pos = [rowIdx, colIdx];
       activeCellPos.current = pos;
@@ -1585,7 +1549,7 @@ var useKeyboardNavigation = ({
     },
     [focusCell, navigationStyle, setHighlightedIdx]
   );
-  const nextPageItemIdx = useCallback13(
+  const nextPageItemIdx = useCallback12(
     (key, [rowIdx, colIdx]) => new Promise((resolve) => {
       let newRowIdx = rowIdx;
       switch (key) {
@@ -1624,7 +1588,7 @@ var useKeyboardNavigation = ({
     }),
     [requestScroll, rowCount, viewportRowCount]
   );
-  const handleFocus = useCallback13(() => {
+  const handleFocus = useCallback12(() => {
     var _a2;
     if (disableHighlightOnFocus !== true) {
       if ((_a2 = containerRef.current) == null ? void 0 : _a2.contains(document.activeElement)) {
@@ -1643,7 +1607,7 @@ var useKeyboardNavigation = ({
     navigationStyle,
     setHighlightedIdx
   ]);
-  const navigateChildItems = useCallback13(
+  const navigateChildItems = useCallback12(
     async (key) => {
       const [nextRowIdx, nextColIdx] = isPagingKey(key) ? await nextPageItemIdx(key, activeCellPos.current) : nextCellPos(key, activeCellPos.current, columnCount, rowCount);
       const [rowIdx, colIdx] = activeCellPos.current;
@@ -1653,13 +1617,13 @@ var useKeyboardNavigation = ({
     },
     [columnCount, nextPageItemIdx, rowCount, setActiveCell]
   );
-  const scrollRowIntoViewIfNecessary = useCallback13(
+  const scrollRowIntoViewIfNecessary = useCallback12(
     (rowIndex) => {
       requestScroll == null ? void 0 : requestScroll({ type: "scroll-row", rowIndex });
     },
     [requestScroll]
   );
-  const moveHighlightedRow = useCallback13(
+  const moveHighlightedRow = useCallback12(
     async (key) => {
       const { current: highlighted } = highlightedIndexRef;
       const [nextRowIdx] = isPagingKey(key) ? await nextPageItemIdx(key, [highlighted != null ? highlighted : -1, 0]) : nextCellPos(key, [highlighted != null ? highlighted : -1, 0], columnCount, rowCount);
@@ -1681,7 +1645,7 @@ var useKeyboardNavigation = ({
       scrollRowIntoViewIfNecessary(highlightedIndexProp);
     }
   }, [highlightedIndexProp, scrollRowIntoViewIfNecessary]);
-  const handleKeyDown = useCallback13(
+  const handleKeyDown = useCallback12(
     (e) => {
       if (rowCount > 0 && isNavigationKey(e.key, navigationStyle)) {
         e.preventDefault();
@@ -1695,7 +1659,7 @@ var useKeyboardNavigation = ({
     },
     [rowCount, navigationStyle, moveHighlightedRow, navigateChildItems]
   );
-  const handleClick = useCallback13(
+  const handleClick = useCallback12(
     // Might not be a cell e.g the Settings button
     (evt) => {
       const target = evt.target;
@@ -1707,10 +1671,10 @@ var useKeyboardNavigation = ({
     },
     [setActiveCell]
   );
-  const handleMouseLeave = useCallback13(() => {
+  const handleMouseLeave = useCallback12(() => {
     setHighlightedIndex(-1);
   }, [setHighlightedIndex]);
-  const handleMouseMove = useCallback13(
+  const handleMouseMove = useCallback12(
     (evt) => {
       const idx = closestRowIndex(evt.target);
       if (idx !== -1 && idx !== highlightedIndexRef.current) {
@@ -1719,7 +1683,7 @@ var useKeyboardNavigation = ({
     },
     [setHighlightedIndex]
   );
-  const navigate = useCallback13(() => {
+  const navigate = useCallback12(() => {
     navigateChildItems("ArrowDown");
   }, [navigateChildItems]);
   const fullyRendered = ((_a = containerRef.current) == null ? void 0 : _a.firstChild) != null;
@@ -1753,8 +1717,8 @@ import {
   selectItem
 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback14,
-  useRef as useRef10
+  useCallback as useCallback13,
+  useRef as useRef9
 } from "react";
 var { IDX: IDX2 } = metadataKeys4;
 var NO_SELECTION = [];
@@ -1767,14 +1731,14 @@ var useSelection = ({
   onSelectionChange
 }) => {
   selectionModel === "extended" || selectionModel === "checkbox";
-  const lastActiveRef = useRef10(-1);
-  const selectedRef = useRef10(NO_SELECTION);
-  const isSelectionEvent = useCallback14(
+  const lastActiveRef = useRef9(-1);
+  const selectedRef = useRef9(NO_SELECTION);
+  const isSelectionEvent = useCallback13(
     (evt) => selectionKeys.includes(evt.key),
     [selectionKeys]
   );
-  const handleRowClick = useCallback14(
-    (row, rangeSelect, keepExistingSelection) => {
+  const handleRowClick = useCallback13(
+    (evt, row, rangeSelect, keepExistingSelection) => {
       const { [IDX2]: idx } = row;
       const { current: active } = lastActiveRef;
       const { current: selected } = selectedRef;
@@ -1794,7 +1758,7 @@ var useSelection = ({
     },
     [onSelect, onSelectionChange, selectionModel]
   );
-  const handleKeyDown = useCallback14(
+  const handleKeyDown = useCallback13(
     (e) => {
       if (isSelectionEvent(e)) {
         const { current: rowIndex } = highlightedIndexRef;
@@ -1819,7 +1783,7 @@ var useSelection = ({
 // src/useTableContextMenu.ts
 import { useContextMenu as usePopupContextMenu } from "@vuu-ui/vuu-popups";
 import { buildColumnMap, getIndexFromRowElement as getIndexFromRowElement2 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback15 } from "react";
+import { useCallback as useCallback14 } from "react";
 var NO_ROWS = [];
 var useTableContextMenu = ({
   columns,
@@ -1828,7 +1792,7 @@ var useTableContextMenu = ({
   getSelectedRows
 }) => {
   const [showContextMenu] = usePopupContextMenu();
-  const onContextMenu = useCallback15(
+  const onContextMenu = useCallback14(
     (evt) => {
       const target = evt.target;
       const cellEl = target == null ? void 0 : target.closest("div[role='cell']");
@@ -2167,12 +2131,12 @@ import {
   itemsChanged
 } from "@vuu-ui/vuu-utils";
 import {
-  useCallback as useCallback16,
+  useCallback as useCallback15,
   useEffect as useEffect3,
   useImperativeHandle,
   useMemo as useMemo4,
-  useRef as useRef11,
-  useState as useState5
+  useRef as useRef10,
+  useState as useState4
 } from "react";
 var SCROLL_MOVE_CHECK_THRESHOLD = 100;
 var HORIZONTAL_SCROLL_BUFFER = 200;
@@ -2224,8 +2188,8 @@ var useCallbackRef = ({
   onAttach,
   onDetach
 }) => {
-  const ref = useRef11(null);
-  const callbackRef = useCallback16(
+  const ref = useRef10(null);
+  const callbackRef = useCallback15(
     (el) => {
       if (el) {
         ref.current = el;
@@ -2251,21 +2215,21 @@ var useTableScroll = ({
   setRange,
   viewportMeasurements
 }) => {
-  const firstRowRef = useRef11(0);
-  const rowHeightRef = useRef11(rowHeight);
-  const contentContainerScrolledRef = useRef11(false);
-  const contentContainerPosRef = useRef11({
+  const firstRowRef = useRef10(0);
+  const rowHeightRef = useRef10(rowHeight);
+  const contentContainerScrolledRef = useRef10(false);
+  const contentContainerPosRef = useRef10({
     scrollTop: 0,
     scrollLeft: 0
   });
-  const scrollbarContainerScrolledRef = useRef11(false);
-  const scrollbarContainerPosRef = useRef11({
+  const scrollbarContainerScrolledRef = useRef10(false);
+  const scrollbarContainerPosRef = useRef10({
     scrollTop: 0,
     scrollLeft: 0
   });
-  const scrollbarContainerRef = useRef11(null);
-  const contentContainerRef = useRef11(null);
-  const lastHorizontalScrollCheckPoint = useRef11(0);
+  const scrollbarContainerRef = useRef10(null);
+  const contentContainerRef = useRef10(null);
+  const lastHorizontalScrollCheckPoint = useRef10(0);
   const {
     appliedPageSize,
     isVirtualScroll,
@@ -2273,9 +2237,9 @@ var useTableScroll = ({
     totalHeaderHeight,
     viewportWidth
   } = viewportMeasurements;
-  const columnsWithinViewportRef = useRef11([]);
-  const [, forceRefresh] = useState5({});
-  const preSpanRef = useRef11(0);
+  const columnsWithinViewportRef = useRef10([]);
+  const [, forceRefresh] = useState4({});
+  const preSpanRef = useRef10(0);
   useMemo4(() => {
     const [visibleColumns, offset] = getColumnsInViewport(
       columns,
@@ -2285,7 +2249,7 @@ var useTableScroll = ({
     preSpanRef.current = offset;
     columnsWithinViewportRef.current = visibleColumns;
   }, [viewportWidth, columns]);
-  const handleHorizontalScroll = useCallback16(
+  const handleHorizontalScroll = useCallback15(
     (scrollLeft) => {
       contentContainerPosRef.current.scrollLeft = scrollLeft;
       onHorizontalScroll == null ? void 0 : onHorizontalScroll(scrollLeft);
@@ -2305,7 +2269,7 @@ var useTableScroll = ({
     },
     [columns, onHorizontalScroll, viewportWidth]
   );
-  const handleVerticalScroll = useCallback16(
+  const handleVerticalScroll = useCallback15(
     (scrollTop, pctScrollTop) => {
       contentContainerPosRef.current.scrollTop = scrollTop;
       onVerticalScroll == null ? void 0 : onVerticalScroll(scrollTop, pctScrollTop);
@@ -2324,7 +2288,7 @@ var useTableScroll = ({
       viewportRowCount
     ]
   );
-  const handleScrollbarContainerScroll = useCallback16(() => {
+  const handleScrollbarContainerScroll = useCallback15(() => {
     const { current: contentContainer } = contentContainerRef;
     const { current: scrollbarContainer } = scrollbarContainerRef;
     const { current: contentContainerScrolled } = contentContainerScrolledRef;
@@ -2347,7 +2311,7 @@ var useTableScroll = ({
     }
     onVerticalScrollInSitu == null ? void 0 : onVerticalScrollInSitu(0);
   }, [onVerticalScrollInSitu]);
-  const handleContentContainerScroll = useCallback16(() => {
+  const handleContentContainerScroll = useCallback15(() => {
     const { current: scrollbarContainerScrolled } = scrollbarContainerScrolledRef;
     const { current: contentContainer } = contentContainerRef;
     const { current: scrollbarContainer } = scrollbarContainerRef;
@@ -2378,7 +2342,7 @@ var useTableScroll = ({
       }
     }
   }, [handleVerticalScroll, handleHorizontalScroll]);
-  const handleAttachScrollbarContainer = useCallback16(
+  const handleAttachScrollbarContainer = useCallback15(
     (el) => {
       scrollbarContainerRef.current = el;
       el.addEventListener("scroll", handleScrollbarContainerScroll, {
@@ -2387,14 +2351,14 @@ var useTableScroll = ({
     },
     [handleScrollbarContainerScroll]
   );
-  const handleDetachScrollbarContainer = useCallback16(
+  const handleDetachScrollbarContainer = useCallback15(
     (el) => {
       scrollbarContainerRef.current = null;
       el.removeEventListener("scroll", handleScrollbarContainerScroll);
     },
     [handleScrollbarContainerScroll]
   );
-  const handleAttachContentContainer = useCallback16(
+  const handleAttachContentContainer = useCallback15(
     (el) => {
       contentContainerRef.current = el;
       el.addEventListener("scroll", handleContentContainerScroll, {
@@ -2403,7 +2367,7 @@ var useTableScroll = ({
     },
     [handleContentContainerScroll]
   );
-  const handleDetachContentContainer = useCallback16(
+  const handleDetachContentContainer = useCallback15(
     (el) => {
       contentContainerRef.current = null;
       el.removeEventListener("scroll", handleContentContainerScroll);
@@ -2418,7 +2382,7 @@ var useTableScroll = ({
     onAttach: handleAttachScrollbarContainer,
     onDetach: handleDetachScrollbarContainer
   });
-  const requestScroll = useCallback16(
+  const requestScroll = useCallback15(
     (scrollRequest) => {
       const { current: contentContainer } = contentContainerRef;
       if (contentContainer) {
@@ -2435,6 +2399,7 @@ var useTableScroll = ({
               activeRow,
               totalHeaderHeight
             );
+            console.log(`outside viewport ? ${direction} ${distance}`);
             if (direction && distance) {
               if (isVirtualScroll) {
                 const offset = direction === "down" ? 1 : -1;
@@ -2566,7 +2531,7 @@ import {
   measurePinnedColumns,
   virtualRowPositioning
 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback17, useMemo as useMemo5, useRef as useRef12 } from "react";
+import { useCallback as useCallback16, useMemo as useMemo5, useRef as useRef11 } from "react";
 var MAX_PIXEL_HEIGHT = 1e7;
 var UNMEASURED_VIEWPORT = {
   appliedPageSize: 0,
@@ -2595,8 +2560,8 @@ var useTableViewport = ({
   selectionEndSize = 4,
   size
 }) => {
-  const inSituRowOffsetRef = useRef12(0);
-  const pctScrollTopRef = useRef12(0);
+  const inSituRowOffsetRef = useRef11(0);
+  const pctScrollTopRef = useRef11(0);
   const pixelContentHeight = Math.min(rowHeight * rowCount, MAX_PIXEL_HEIGHT);
   const virtualContentHeight = rowCount * rowHeight;
   const virtualisedExtent = virtualContentHeight - pixelContentHeight;
@@ -2604,7 +2569,7 @@ var useTableViewport = ({
     () => measurePinnedColumns(columns, selectionEndSize),
     [columns, selectionEndSize]
   );
-  const totalHeaderHeightRef = useRef12(headerHeight);
+  const totalHeaderHeightRef = useRef11(headerHeight);
   useMemo5(() => {
     totalHeaderHeightRef.current = headerHeight * (1 + headings.length);
   }, [headerHeight, headings.length]);
@@ -2619,10 +2584,10 @@ var useTableViewport = ({
       return actualRowPositioning(rowHeight);
     }
   }, [virtualisedExtent, rowHeight]);
-  const setScrollTop = useCallback17((_, scrollPct) => {
+  const setScrollTop = useCallback16((_, scrollPct) => {
     pctScrollTopRef.current = scrollPct;
   }, []);
-  const setInSituRowOffset = useCallback17((rowIndexOffset) => {
+  const setInSituRowOffset = useCallback16((rowIndexOffset) => {
     if (rowIndexOffset === 0) {
       inSituRowOffsetRef.current = 0;
     } else {
@@ -2685,7 +2650,7 @@ var useTableViewport = ({
 // src/useTableAndColumnSettings.ts
 import { useLayoutProviderDispatch } from "@vuu-ui/vuu-layout";
 import { getCalculatedColumnType } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback18, useRef as useRef13, useState as useState6 } from "react";
+import { useCallback as useCallback17, useRef as useRef12, useState as useState5 } from "react";
 var useTableAndColumnSettings = ({
   availableColumns: availableColumnsProps,
   onAvailableColumnsChange,
@@ -2695,11 +2660,11 @@ var useTableAndColumnSettings = ({
   tableConfig
 }) => {
   const dispatchLayoutAction = useLayoutProviderDispatch();
-  const showTableSettingsRef = useRef13();
-  const [availableColumns, setAvailableColumns] = useState6(
+  const showTableSettingsRef = useRef12();
+  const [availableColumns, setAvailableColumns] = useState5(
     availableColumnsProps
   );
-  const showContextPanel = useCallback18(
+  const showContextPanel = useCallback17(
     (componentType, title, props) => {
       dispatchLayoutAction({
         type: "set-props",
@@ -2716,13 +2681,13 @@ var useTableAndColumnSettings = ({
     },
     [dispatchLayoutAction]
   );
-  const handleCancelCreateColumn = useCallback18(() => {
+  const handleCancelCreateColumn = useCallback17(() => {
     requestAnimationFrame(() => {
       var _a;
       (_a = showTableSettingsRef.current) == null ? void 0 : _a.call(showTableSettingsRef);
     });
   }, []);
-  const handleCreateCalculatedColumn = useCallback18(
+  const handleCreateCalculatedColumn = useCallback17(
     (column) => {
       const newAvailableColumns = availableColumns.concat({
         name: column.name,
@@ -2738,7 +2703,7 @@ var useTableAndColumnSettings = ({
     },
     [availableColumns, onAvailableColumnsChange, onCreateCalculatedColumn]
   );
-  const showColumnSettingsPanel = useCallback18(
+  const showColumnSettingsPanel = useCallback17(
     (action) => {
       showContextPanel("ColumnSettings", "Column Settings", {
         column: action.column,
@@ -2757,7 +2722,7 @@ var useTableAndColumnSettings = ({
       tableConfig
     ]
   );
-  const handleAddCalculatedColumn = useCallback18(() => {
+  const handleAddCalculatedColumn = useCallback17(() => {
     showColumnSettingsPanel({
       column: {
         name: "::",
@@ -2767,7 +2732,7 @@ var useTableAndColumnSettings = ({
       vuuTable: { module: "SIMUL", table: "instruments" }
     });
   }, [showColumnSettingsPanel]);
-  const handleNavigateToColumn = useCallback18(
+  const handleNavigateToColumn = useCallback17(
     (columnName) => {
       const column = tableConfig.columns.find((c) => c.name === columnName);
       if (column) {
@@ -2781,7 +2746,7 @@ var useTableAndColumnSettings = ({
     },
     [showColumnSettingsPanel, tableConfig.columns]
   );
-  showTableSettingsRef.current = useCallback18(() => {
+  showTableSettingsRef.current = useCallback17(() => {
     showContextPanel("TableSettings", "DataGrid Settings", {
       availableColumns: availableColumns != null ? availableColumns : tableConfig.columns.map(({ name, serverDataType }) => ({
         name,
@@ -2880,7 +2845,7 @@ var useTable = ({
   selectionModel,
   size
 }) => {
-  const [rowCount, setRowCount] = useState7(dataSource.size);
+  const [rowCount, setRowCount] = useState6(dataSource.size);
   if (dataSource === void 0) {
     throw Error("no data source provided to Vuu Table");
   }
@@ -2890,7 +2855,7 @@ var useTable = ({
     () => buildContextMenuDescriptors(dataSource),
     [dataSource]
   );
-  const onDataRowcountChange = useCallback19((size2) => {
+  const onDataRowcountChange = useCallback18((size2) => {
     setRowCount(size2);
   }, []);
   const {
@@ -2907,7 +2872,7 @@ var useTable = ({
       dataSource
     });
   }, [config, dataSource, dispatchTableModelAction]);
-  const applyTableConfigChange = useCallback19(
+  const applyTableConfigChange = useCallback18(
     (config2) => {
       dispatchTableModelAction({
         type: "init",
@@ -2922,7 +2887,7 @@ var useTable = ({
     () => buildColumnMap2(dataSource.columns),
     [dataSource.columns]
   );
-  const onSubscribed = useCallback19(
+  const onSubscribed = useCallback18(
     ({ tableSchema }) => {
       if (tableSchema) {
         dispatchTableModelAction({
@@ -2972,7 +2937,7 @@ var useTable = ({
     onVerticalScrollInSitu: viewportHookSetInSituRowOffset,
     viewportMeasurements
   });
-  const handleConfigEditedInSettingsPanel = useCallback19(
+  const handleConfigEditedInSettingsPanel = useCallback18(
     (tableConfig2) => {
       dispatchTableModelAction({
         type: "init",
@@ -2983,7 +2948,7 @@ var useTable = ({
     },
     [dataSource, dispatchTableModelAction, onConfigChange]
   );
-  const handleDataSourceConfigChanged = useCallback19(
+  const handleDataSourceConfigChanged = useCallback18(
     (dataSourceConfig) => {
       dataSource.config = {
         ...dataSource.config,
@@ -3008,14 +2973,14 @@ var useTable = ({
       });
     });
   }, [dataSource, dispatchTableModelAction, requestScroll]);
-  const handleCreateCalculatedColumn = useCallback19(
+  const handleCreateCalculatedColumn = useCallback18(
     (column) => {
       dataSource.columns = dataSource.columns.concat(column.name);
       applyTableConfigChange(addColumn(tableConfig, column));
     },
     [dataSource, tableConfig, applyTableConfigChange]
   );
-  const hideColumns2 = useCallback19(
+  const hideColumns2 = useCallback18(
     (action) => {
       const { columns: columns2 } = action;
       const hiddenColumns = columns2.map((c) => c.name);
@@ -3029,7 +2994,7 @@ var useTable = ({
     },
     [tableConfig, applyTableConfigChange]
   );
-  const pinColumn3 = useCallback19(
+  const pinColumn3 = useCallback18(
     (action) => {
       applyTableConfigChange({
         ...tableConfig,
@@ -3052,7 +3017,7 @@ var useTable = ({
     onDataSourceConfigChange: handleDataSourceConfigChanged,
     tableConfig
   });
-  const onPersistentColumnOperation = useCallback19(
+  const onPersistentColumnOperation = useCallback18(
     (action) => {
       if (isShowColumnSettings(action)) {
         showColumnSettingsPanel(action);
@@ -3081,7 +3046,7 @@ var useTable = ({
     dataSource,
     onPersistentColumnOperation
   });
-  const handleSort = useCallback19(
+  const handleSort = useCallback18(
     (column, extendSort = false, sortType) => {
       if (dataSource) {
         dataSource.sort = applySort(
@@ -3094,8 +3059,8 @@ var useTable = ({
     },
     [dataSource]
   );
-  const resizeCells = useRef14();
-  const onResizeColumn = useCallback19(
+  const resizeCells = useRef13();
+  const onResizeColumn = useCallback18(
     (phase, columnName, width) => {
       var _a, _b, _c;
       const column = columns.find((column2) => column2.name === columnName);
@@ -3151,7 +3116,7 @@ var useTable = ({
       containerRef
     ]
   );
-  const onToggleGroup = useCallback19(
+  const onToggleGroup = useCallback18(
     (row, column) => {
       var _a, _b;
       const isJson = isJsonGroup2(column, row, columnMap);
@@ -3214,7 +3179,7 @@ var useTable = ({
   } = useCellEditing({
     navigate
   });
-  const handleFocus = useCallback19(
+  const handleFocus = useCallback18(
     (e) => {
       navigationFocus();
       if (!e.defaultPrevented) {
@@ -3229,13 +3194,13 @@ var useTable = ({
     dataSource,
     getSelectedRows
   });
-  const onMoveGroupColumn = useCallback19(
+  const onMoveGroupColumn = useCallback18(
     (columns2) => {
       dataSource.groupBy = columns2.map((col) => col.name);
     },
     [dataSource]
   );
-  const onRemoveGroupColumn = useCallback19(
+  const onRemoveGroupColumn = useCallback18(
     (column) => {
       if (isGroupColumn4(column)) {
         dataSource.groupBy = [];
@@ -3249,23 +3214,38 @@ var useTable = ({
     },
     [dataSource]
   );
-  const handleSelectionChange = useCallback19(
+  const handleSelectionChange = useCallback18(
     (selected) => {
       dataSource.select(selected);
       onSelectionChange == null ? void 0 : onSelectionChange(selected);
     },
     [dataSource, onSelectionChange]
   );
+  const handleSelect = useCallback18(
+    (row) => {
+      if (onSelect) {
+        onSelect(row === null ? null : asDataSourceRowObject(row, columnMap));
+      }
+    },
+    [columnMap, onSelect]
+  );
   const {
     onKeyDown: selectionHookKeyDown,
     onRowClick: selectionHookOnRowClick
   } = useSelection({
     highlightedIndexRef,
-    onSelect,
+    onSelect: handleSelect,
     onSelectionChange: handleSelectionChange,
     selectionModel
   });
-  const handleKeyDown = useCallback19(
+  const handleRowClick = useCallback18(
+    (evt, row, rangeSelect, keepExistingSelection) => {
+      selectionHookOnRowClick(evt, row, rangeSelect, keepExistingSelection);
+      onRowClickProp == null ? void 0 : onRowClickProp(evt, asDataSourceRowObject(row, columnMap));
+    },
+    [columnMap, onRowClickProp, selectionHookOnRowClick]
+  );
+  const handleKeyDown = useCallback18(
     (e) => {
       navigationKeyDown(e);
       if (!e.defaultPrevented) {
@@ -3277,14 +3257,7 @@ var useTable = ({
     },
     [navigationKeyDown, editingKeyDown, selectionHookKeyDown]
   );
-  const handleRowClick = useCallback19(
-    (row, rangeSelect, keepExistingSelection) => {
-      selectionHookOnRowClick(row, rangeSelect, keepExistingSelection);
-      onRowClickProp == null ? void 0 : onRowClickProp(row);
-    },
-    [onRowClickProp, selectionHookOnRowClick]
-  );
-  const onMoveColumn = useCallback19(
+  const onMoveColumn = useCallback18(
     (columns2) => {
       const newTableConfig = {
         ...tableConfig,
@@ -3299,17 +3272,17 @@ var useTable = ({
     },
     [dataSource, dispatchTableModelAction, onConfigChange, tableConfig]
   );
-  const handleDropRow = useCallback19(
+  const handleDropRow = useCallback18(
     (dragDropState) => {
       onDrop == null ? void 0 : onDrop(dragDropState);
     },
     [onDrop]
   );
-  const handleDataEdited = useCallback19(
+  const handleDataEdited = useCallback18(
     async (row, columnName, value) => dataSource.applyEdit(row, columnName, value),
     [dataSource]
   );
-  const handleDragStartRow = useCallback19(
+  const handleDragStartRow = useCallback18(
     (dragDropState) => {
       const { initialDragElement } = dragDropState;
       const rowIndex = getIndexFromRowElement3(initialDragElement);
@@ -3369,17 +3342,17 @@ var useTable = ({
 
 // src/useRowHeight.ts
 import { isValidNumber as isValidNumber2 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback20, useMemo as useMemo8, useRef as useRef15, useState as useState8 } from "react";
+import { useCallback as useCallback19, useMemo as useMemo8, useRef as useRef14, useState as useState7 } from "react";
 var useRowHeight = ({
   rowHeight: rowHeightProp = 0
 }) => {
-  const [rowHeight, setRowHeight] = useState8(rowHeightProp);
-  const heightRef = useRef15(rowHeight);
+  const [rowHeight, setRowHeight] = useState7(rowHeightProp);
+  const heightRef = useRef14(rowHeight);
   const resizeObserver = useMemo8(() => {
     return new ResizeObserver((entries) => {
       for (const entry of entries) {
-        const { height: measuredHeight } = entry.contentRect;
-        const newHeight = Math.round(measuredHeight);
+        const [{ blockSize: measuredSize }] = entry.borderBoxSize;
+        const newHeight = Math.round(measuredSize);
         if (isValidNumber2(newHeight) && heightRef.current !== newHeight) {
           heightRef.current = newHeight;
           setRowHeight(newHeight);
@@ -3387,12 +3360,13 @@ var useRowHeight = ({
       }
     });
   }, []);
-  const rowRef = useCallback20(
+  const rowRef = useCallback19(
     (el) => {
       if (el) {
         if (rowHeightProp === 0) {
           const { height } = el.getBoundingClientRect();
-          console.log(`measured rowHeight = ${height}`);
+          console.log({ boundingClientHeight: height });
+          console.log(`measured rowHeight = ${height} (${rowHeightProp})`);
           resizeObserver.observe(el);
           setRowHeight(height);
         }
@@ -3407,7 +3381,7 @@ var useRowHeight = ({
 
 // src/Table.tsx
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
-var classBase7 = "vuuTable";
+var classBase8 = "vuuTable";
 var { IDX: IDX3, RENDER_IDX } = metadataKeys6;
 var TableCore = ({
   Row: Row2 = Row,
@@ -3482,16 +3456,16 @@ var TableCore = ({
     onRowClick: onRowClickProp,
     onSelect,
     onSelectionChange,
-    renderBufferSize,
+    renderBufferSize: Math.max(5, renderBufferSize),
     rowHeight,
     scrollingApiRef,
     selectionModel,
     size
   });
-  const contentContainerClassName = cx9(`${classBase7}-contentContainer`, {
-    [`${classBase7}-colLines`]: tableAttributes.columnSeparators,
-    [`${classBase7}-rowLines`]: tableAttributes.rowSeparators,
-    [`${classBase7}-zebra`]: tableAttributes.zebraStripes
+  const contentContainerClassName = cx9(`${classBase8}-contentContainer`, {
+    [`${classBase8}-colLines`]: tableAttributes.columnSeparators,
+    [`${classBase8}-rowLines`]: tableAttributes.rowSeparators,
+    [`${classBase8}-zebra`]: tableAttributes.zebraStripes
   });
   const cssVariables = {
     "--content-height": `${viewportMeasurements.contentHeight}px`,
@@ -3514,10 +3488,10 @@ var TableCore = ({
         /* @__PURE__ */ jsx12(
           "div",
           {
-            className: `${classBase7}-scrollbarContainer`,
+            className: `${classBase8}-scrollbarContainer`,
             ref: scrollProps.scrollbarContainerRef,
             style: cssVariables,
-            children: /* @__PURE__ */ jsx12("div", { className: `${classBase7}-scrollbarContent` })
+            children: /* @__PURE__ */ jsx12("div", { className: `${classBase8}-scrollbarContent` })
           }
         ),
         /* @__PURE__ */ jsx12(
@@ -3530,7 +3504,7 @@ var TableCore = ({
               "div",
               {
                 ...tableProps,
-                className: `${classBase7}-table`,
+                className: `${classBase8}-table`,
                 role: "table",
                 tabIndex: disableFocus ? void 0 : -1,
                 children: [
@@ -3549,7 +3523,7 @@ var TableCore = ({
                       virtualColSpan: scrollProps.virtualColSpan
                     }
                   ) : null,
-                  /* @__PURE__ */ jsx12("div", { className: `${classBase7}-body`, children: data.map((data2) => /* @__PURE__ */ jsx12(
+                  /* @__PURE__ */ jsx12("div", { className: `${classBase8}-body`, children: data.map((data2) => /* @__PURE__ */ jsx12(
                     Row2,
                     {
                       "aria-rowindex": data2[0] + 1,
@@ -3606,8 +3580,8 @@ var Table = forwardRef2(function TableNext({
   style: styleProp,
   ...htmlAttributes
 }, forwardedRef) {
-  const containerRef = useRef16(null);
-  const [size, setSize] = useState9();
+  const containerRef = useRef15(null);
+  const [size, setSize] = useState8();
   const { rowHeight, rowRef } = useRowHeight({ rowHeight: rowHeightProp });
   if (config === void 0) {
     throw Error(
@@ -3617,11 +3591,12 @@ var Table = forwardRef2(function TableNext({
   if (dataSource === void 0) {
     throw Error("vuu Table requires dataSource prop");
   }
+  console.log({ rowHeight });
   return /* @__PURE__ */ jsxs9(
     MeasuredContainer,
     {
       ...htmlAttributes,
-      className: cx9(classBase7, classNameProp),
+      className: cx9(classBase8, classNameProp),
       id,
       onResize: setSize,
       ref: useForkRef(containerRef, forwardedRef),
@@ -3664,7 +3639,7 @@ var Table = forwardRef2(function TableNext({
 });
 
 // src/cell-renderers/checkbox-cell/CheckboxCell.tsx
-import { memo as memo3, useCallback as useCallback21 } from "react";
+import { memo as memo3, useCallback as useCallback20 } from "react";
 import { CheckboxIcon, WarnCommit } from "@vuu-ui/vuu-ui-controls";
 import { Checkbox } from "@salt-ds/core";
 import {
@@ -3677,7 +3652,7 @@ var CheckboxCell = memo3(
   ({ column, columnMap, onCommit = WarnCommit, row }) => {
     const dataIdx = columnMap[column.name];
     const isChecked = !!row[dataIdx];
-    const handleCommit = useCallback21(
+    const handleCommit = useCallback20(
       (value) => async (evt) => {
         const res = await onCommit(value);
         if (res === true) {
@@ -3702,7 +3677,7 @@ import { Input } from "@salt-ds/core";
 import { useEditableText } from "@vuu-ui/vuu-ui-controls";
 import cx10 from "clsx";
 import { jsx as jsx14 } from "react/jsx-runtime";
-var classBase8 = "vuuTableInputCell";
+var classBase9 = "vuuTableInputCell";
 var WarnCommit2 = () => {
   console.warn(
     "onCommit handler has not been provided to InputCell cell renderer"
@@ -3723,14 +3698,14 @@ var InputCell = ({
     onCommit,
     clientSideEditValidationCheck
   });
-  const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ jsx14("span", { className: `${classBase8}-icon`, "data-icon": "error" }) : void 0;
-  const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ jsx14("span", { className: `${classBase8}-icon`, "data-icon": "error" }) : void 0;
+  const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ jsx14("span", { className: `${classBase9}-icon`, "data-icon": "error" }) : void 0;
+  const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ jsx14("span", { className: `${classBase9}-icon`, "data-icon": "error" }) : void 0;
   return /* @__PURE__ */ jsx14(
     Input,
     {
       ...editProps,
-      className: cx10(classBase8, {
-        [`${classBase8}-error`]: warningMessage !== void 0
+      className: cx10(classBase9, {
+        [`${classBase9}-error`]: warningMessage !== void 0
       }),
       endAdornment,
       startAdornment
@@ -3751,10 +3726,10 @@ import {
   registerComponent as registerComponent3
 } from "@vuu-ui/vuu-utils";
 import cx11 from "clsx";
-import { memo as memo4, useCallback as useCallback22 } from "react";
+import { memo as memo4, useCallback as useCallback21 } from "react";
 import { CycleStateButton } from "@vuu-ui/vuu-ui-controls";
 import { jsx as jsx15 } from "react/jsx-runtime";
-var classBase9 = "vuuTableToggleCell";
+var classBase10 = "vuuTableToggleCell";
 var getValueList = ({ name, type }) => {
   if (isTypeDescriptor(type) && isValueListRenderer(type.renderer)) {
     return type.renderer.values;
@@ -3774,7 +3749,7 @@ var ToggleCell = memo4(
     const values = getValueList(column);
     const dataIdx = columnMap[column.name];
     const value = row[dataIdx];
-    const handleCommit = useCallback22(
+    const handleCommit = useCallback21(
       (evt, value2) => {
         return onCommit(value2).then((response) => {
           if (response === true) {
@@ -3788,7 +3763,7 @@ var ToggleCell = memo4(
     return /* @__PURE__ */ jsx15(
       CycleStateButton,
       {
-        className: cx11(classBase9, `${classBase9}-${column.name}`),
+        className: cx11(classBase10, `${classBase10}-${column.name}`),
         onCommit: handleCommit,
         value,
         values,
@@ -3806,11 +3781,11 @@ registerComponent3("toggle-cell", ToggleCell, "cell-renderer", {
 // src/useControlledTableNavigation.ts
 import { useStateRef } from "@vuu-ui/vuu-ui-controls";
 import { dispatchMouseEvent as dispatchMouseEvent2 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback23, useRef as useRef17 } from "react";
+import { useCallback as useCallback22, useRef as useRef16 } from "react";
 var useControlledTableNavigation = (initialValue, rowCount) => {
-  const tableRef = useRef17(null);
+  const tableRef = useRef16(null);
   const [highlightedIndexRef, setHighlightedIndex] = useStateRef(initialValue);
-  const handleKeyDown = useCallback23(
+  const handleKeyDown = useCallback22(
     (e) => {
       var _a;
       if (e.key === "ArrowDown") {
@@ -3829,7 +3804,7 @@ var useControlledTableNavigation = (initialValue, rowCount) => {
     },
     [highlightedIndexRef, rowCount, setHighlightedIndex]
   );
-  const handleHighlight = useCallback23(
+  const handleHighlight = useCallback22(
     (idx) => {
       setHighlightedIndex(idx);
     },
@@ -3844,7 +3819,8 @@ var useControlledTableNavigation = (initialValue, rowCount) => {
 };
 export {
   CheckboxCell,
-  GroupHeaderCellNext,
+  GroupHeaderCell,
+  GroupHeaderCell as GroupHeaderCellNext,
   HeaderCell,
   InputCell,
   Table,