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

package/cjs/index.js

@@ -31,7 +31,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   CheckboxCell: () => CheckboxCell,
-  GroupHeaderCellNext: () => GroupHeaderCellNext,
+  GroupHeaderCell: () => GroupHeaderCell,
+  GroupHeaderCellNext: () => GroupHeaderCell,
   HeaderCell: () => HeaderCell,
   InputCell: () => InputCell,
   Table: () => Table,
@@ -49,7 +50,7 @@ __export(src_exports, {
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/header-cell/GroupHeaderCellNext.tsx
+// src/header-cell/GroupHeaderCell.tsx
 var import_vuu_ui_controls = require("@vuu-ui/vuu-ui-controls");
 var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
 var import_clsx3 = __toESM(require("clsx"));
@@ -237,27 +238,27 @@ var useTableColumnResize = ({
 var import_vuu_utils = require("@vuu-ui/vuu-utils");
 var import_clsx2 = __toESM(require("clsx"));
 var import_react4 = require("react");
-var useCell = (column, classBase10, isHeader) => (
+var useCell = (column, classBase11, isHeader) => (
   // TODO measure perf without the memo, might not be worth the cost
   (0, import_react4.useMemo)(() => {
-    const className = (0, import_clsx2.default)(classBase10, {
+    const className = (0, import_clsx2.default)(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 = (0, import_vuu_utils.getColumnStyle)(column);
     return {
       className,
       style
     };
-  }, [column, classBase10, isHeader])
+  }, [column, classBase11, isHeader])
 );
 
-// src/header-cell/GroupHeaderCellNext.tsx
+// src/header-cell/GroupHeaderCell.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var import_react6 = require("react");
 var classBase2 = "vuuTableGroupHeaderCell";
@@ -268,7 +269,7 @@ var switchIfChanged = (columns, newColumns) => {
     return newColumns;
   }
 };
-var GroupHeaderCellNext = ({
+var GroupHeaderCell = ({
   column: groupColumn,
   className: classNameProp,
   onMoveColumn,
@@ -325,7 +326,6 @@ var GroupHeaderCellNext = ({
           {
             allowDragDrop: true,
             className: `${classBase2}-inner`,
-            height: 24,
             onMoveItem: handleMoveItem,
             overflowPosition: "start",
             children: columns.map((column) => {
@@ -356,60 +356,28 @@ var GroupHeaderCellNext = ({
 
 // src/header-cell/HeaderCell.tsx
 var import_clsx5 = __toESM(require("clsx"));
-var import_react8 = require("react");
+var import_react7 = require("react");
 
 // src/column-menu/ColumnMenu.tsx
 var import_vuu_popups = require("@vuu-ui/vuu-popups");
 var import_clsx4 = __toESM(require("clsx"));
-var import_react7 = require("react");
 var import_jsx_runtime6 = require("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 = (0, import_react7.useRef)(null);
-  const [menuOpen, setMenuOpen] = (0, import_react7.useState)(false);
-  const [showContextMenu] = (0, import_vuu_popups.useContextMenu)();
-  const handleMenuClose = (0, import_react7.useCallback)(() => {
-    setMenuOpen(false);
-  }, []);
-  const showColumnMenu = (0, import_react7.useCallback)(
-    (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__ */ (0, import_jsx_runtime6.jsx)(
-    "span",
+    import_vuu_popups.PopupMenu,
     {
-      ...props,
-      className: (0, import_clsx4.default)("vuuTable-columnMenu", className, {
-        "vuuTable-columnMenu-open": menuOpen
-      }),
-      "data-icon": "more-vert",
-      onClick: showColumnMenu,
-      ref: rootRef
+      className: (0, import_clsx4.default)(classBase3, className),
+      "data-embedded": true,
+      menuLocation: "column-menu",
+      menuOptions: { column }
     }
   );
 };
 
 // src/header-cell/HeaderCell.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var classBase3 = "vuuTableHeaderCell";
+var classBase4 = "vuuTableHeaderCell";
 var HeaderCell = ({
   className: classNameProp,
   column,
@@ -419,21 +387,21 @@ var HeaderCell = ({
 }) => {
   var _a;
   const { HeaderCellContentRenderer, HeaderCellLabelRenderer } = column;
-  const rootRef = (0, import_react8.useRef)(null);
+  const rootRef = (0, import_react7.useRef)(null);
   const { isResizing, ...resizeProps } = useTableColumnResize({
     column,
     onResize,
     rootRef
   });
-  const handleClick = (0, import_react8.useCallback)(
+  const handleClick = (0, import_react7.useCallback)(
     (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__ */ (0, import_jsx_runtime7.jsx)(ColumnMenu, { column });
-  const columnLabel = HeaderCellLabelRenderer ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderCellLabelRenderer, { className: `${classBase3}-label`, column }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${classBase3}-label`, children: (_a = column.label) != null ? _a : column.name });
+  const columnLabel = HeaderCellLabelRenderer ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderCellLabelRenderer, { className: `${classBase4}-label`, column }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: `${classBase4}-label`, children: (_a = column.label) != null ? _a : column.name });
   const columnContent = HeaderCellContentRenderer ? [/* @__PURE__ */ (0, import_jsx_runtime7.jsx)(HeaderCellContentRenderer, { column }, "content")] : [];
   const sortIndicator = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(SortIndicator, { column });
   const headerItems = column.align === "right" ? [sortIndicator, columnLabel].concat(columnContent).concat(columnMenu) : [columnMenu, columnLabel, sortIndicator].concat(columnContent);
@@ -442,7 +410,7 @@ var HeaderCell = ({
     {
       ...htmlAttributes,
       className: (0, import_clsx5.default)(className, classNameProp, {
-        [`${classBase3}-resizing`]: isResizing
+        [`${classBase4}-resizing`]: isResizing
       }),
       onClick: handleClick,
       ref: rootRef,
@@ -462,18 +430,18 @@ var import_vuu_ui_controls5 = require("@vuu-ui/vuu-ui-controls");
 var import_vuu_utils24 = require("@vuu-ui/vuu-utils");
 var import_core2 = require("@salt-ds/core");
 var import_clsx9 = __toESM(require("clsx"));
-var import_react27 = require("react");
+var import_react26 = require("react");
 
 // src/Row.tsx
 var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
 var import_clsx7 = __toESM(require("clsx"));
-var import_react11 = require("react");
+var import_react10 = require("react");
 
 // src/table-cell/TableCell.tsx
 var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
-var import_react9 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var classBase4 = "vuuTableCell";
+var classBase5 = "vuuTableCell";
 var TableCell = ({
   column,
   columnMap,
@@ -481,10 +449,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 = (0, import_react9.useCallback)(
+  const handleDataItemEdited = (0, import_react8.useCallback)(
     (value) => {
       if (onDataEdited) {
         let typedValue = value;
@@ -500,7 +468,7 @@ var TableCell = ({
     },
     [column, name, onDataEdited, row]
   );
-  const handleClick = (0, import_react9.useCallback)(
+  const handleClick = (0, import_react8.useCallback)(
     (evt) => {
       onClick == null ? void 0 : onClick(evt, column);
     },
@@ -529,11 +497,11 @@ var TableCell = ({
 
 // src/table-cell/TableGroupCell.tsx
 var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
-var import_react10 = require("react");
+var import_react9 = require("react");
 var import_clsx6 = __toESM(require("clsx"));
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var { IS_LEAF } = import_vuu_utils4.metadataKeys;
-var classBase5 = "vuuTableGroupCell";
+var classBase6 = "vuuTableGroupCell";
 var TableGroupCell = ({
   column,
   columnMap,
@@ -542,15 +510,15 @@ var TableGroupCell = ({
 }) => {
   const { columns } = column;
   const [value, offset] = (0, import_vuu_utils4.getGroupValueAndOffset)(columns, row, columnMap);
-  const { className, style } = useCell(column, classBase5);
-  const handleClick = (0, import_react10.useCallback)(
+  const { className, style } = useCell(column, classBase6);
+  const handleClick = (0, import_react9.useCallback)(
     (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__ */ (0, import_jsx_runtime9.jsx)("span", { className: `${classBase5}-spacer` }, i));
+  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: `${classBase6}-spacer` }, i));
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
@@ -560,7 +528,7 @@ var TableGroupCell = ({
       onClick: isLeaf ? void 0 : handleClick,
       children: [
         spacers,
-        isLeaf ? null : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: `${classBase5}-toggle`, "data-icon": "triangle-right" }),
+        isLeaf ? null : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: `${classBase6}-toggle`, "data-icon": "triangle-right" }),
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: value })
       ]
     }
@@ -570,21 +538,21 @@ var TableGroupCell = ({
 // src/Row.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var { IDX, IS_EXPANDED, SELECTED } = import_vuu_utils5.metadataKeys;
-var classBase6 = "vuuTableRow";
-var RowProxy = (0, import_react11.forwardRef)(
+var classBase7 = "vuuTableRow";
+var RowProxy = (0, import_react10.forwardRef)(
   function RowProxy2({ height }, forwardedRef) {
     return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "div",
       {
         "aria-hidden": true,
-        className: (0, import_clsx7.default)(classBase6, `${classBase6}-proxy`),
+        className: (0, import_clsx7.default)(classBase7, `${classBase7}-proxy`),
         ref: forwardedRef,
         style: { height }
       }
     );
   }
 );
-var Row = (0, import_react11.memo)(
+var Row = (0, import_react10.memo)(
   ({
     className: classNameProp,
     classNameGenerator,
@@ -605,30 +573,30 @@ var Row = (0, import_react11.memo)(
       [IS_EXPANDED]: isExpanded,
       [SELECTED]: selectionStatus
     } = row;
-    const handleRowClick = (0, import_react11.useCallback)(
+    const handleRowClick = (0, import_react10.useCallback)(
       (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 } = import_vuu_utils5.RowSelected;
     const className = (0, import_clsx7.default)(
-      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 = (0, import_react11.useCallback)(
+    const handleGroupCellClick = (0, import_react10.useCallback)(
       (evt, column) => {
         if ((0, import_vuu_utils5.isGroupColumn)(column) || (0, import_vuu_utils5.isJsonGroup)(column, row, columnMap)) {
           evt.stopPropagation();
@@ -646,7 +614,7 @@ var Row = (0, import_react11.memo)(
         onClick: handleRowClick,
         style,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${classBase6}-selectionDecorator vuuStickyLeft` }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${classBase7}-selectionDecorator vuuStickyLeft` }),
           virtualColSpan > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "vuuTableCell", style: { width: virtualColSpan } }) : null,
           columns.filter(import_vuu_utils5.isNotHidden).map((column) => {
             const isGroup = (0, import_vuu_utils5.isGroupColumn)(column);
@@ -664,7 +632,7 @@ var Row = (0, import_react11.memo)(
               column.name
             );
           }),
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${classBase6}-selectionDecorator vuuStickyRight` })
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${classBase7}-selectionDecorator vuuStickyRight` })
         ]
       }
     );
@@ -675,21 +643,21 @@ Row.displayName = "Row";
 // src/table-header/TableHeader.tsx
 var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
 var import_clsx8 = __toESM(require("clsx"));
-var import_react13 = require("react");
+var import_react12 = require("react");
 
 // src/table-header/useTableHeader.ts
 var import_vuu_ui_controls2 = require("@vuu-ui/vuu-ui-controls");
 var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
-var import_react12 = require("react");
+var import_react11 = require("react");
 var useTableHeader = ({
   columns,
   onMoveColumn,
   onSortColumn,
   tableConfig
 }) => {
-  const containerRef = (0, import_react12.useRef)(null);
-  const scrollingContainerRef = (0, import_react12.useRef)(null);
-  const setContainerRef = (0, import_react12.useCallback)((el) => {
+  const containerRef = (0, import_react11.useRef)(null);
+  const scrollingContainerRef = (0, import_react11.useRef)(null);
+  const setContainerRef = (0, import_react11.useCallback)((el) => {
     containerRef.current = el;
     if (el) {
       scrollingContainerRef.current = el.closest(".vuuTable-contentContainer");
@@ -697,7 +665,7 @@ var useTableHeader = ({
       scrollingContainerRef.current = null;
     }
   }, []);
-  const handleDropColumnHeader = (0, import_react12.useCallback)(
+  const handleDropColumnHeader = (0, import_react11.useCallback)(
     ({ fromIndex: moveFrom, toIndex: moveTo }) => {
       const column = columns[moveFrom];
       const orderedColumns = (0, import_vuu_utils6.moveColumnTo)(columns, column, moveTo);
@@ -713,7 +681,7 @@ var useTableHeader = ({
     },
     [columns, onMoveColumn, tableConfig.columns]
   );
-  const handleColumnHeaderClick = (0, import_react12.useCallback)(
+  const handleColumnHeaderClick = (0, import_react11.useCallback)(
     (evt) => {
       var _a;
       const targetElement = evt.target;
@@ -751,9 +719,9 @@ var useTableHeader = ({
 
 // src/table-header/TableHeader.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
-var TableHeader = (0, import_react13.memo)(
+var TableHeader = (0, import_react12.memo)(
   ({
-    classBase: classBase10 = "vuuTable",
+    classBase: classBase11 = "vuuTable",
     columns,
     headings,
     onMoveColumn,
@@ -777,9 +745,9 @@ var TableHeader = (0, import_react13.memo)(
       onSortColumn,
       tableConfig
     });
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${classBase10}-col-headings`, ref: setContainerRef, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${classBase11}-col-headings`, ref: setContainerRef, children: [
       headings.map((colHeaders, i) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "vuuTable-heading", children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j)) }, i)),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${classBase10}-col-headers`, role: "row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `${classBase11}-col-headers`, role: "row", children: [
         virtualColSpan > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "div",
           {
@@ -790,7 +758,7 @@ var TableHeader = (0, import_react13.memo)(
         ) : null,
         columns.filter(import_vuu_utils7.isNotHidden).map(
           (col, i) => (0, import_vuu_utils7.isGroupColumn)(col) ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            GroupHeaderCellNext,
+            GroupHeaderCell,
             {
               "aria-colindex": col.index,
               column: col,
@@ -827,7 +795,7 @@ TableHeader.displayName = "TableHeader";
 // src/useTable.ts
 var import_vuu_ui_controls4 = require("@vuu-ui/vuu-ui-controls");
 var import_vuu_utils22 = require("@vuu-ui/vuu-utils");
-var import_react25 = require("react");
+var import_react24 = require("react");
 
 // src/context-menu/buildContextMenuDescriptors.ts
 var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
@@ -1142,7 +1110,7 @@ var updateTableConfig = (config, action) => {
 
 // src/useCellEditing.ts
 var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
-var import_react14 = require("react");
+var import_react13 = require("react");
 
 // src/table-dom-utils.ts
 var headerCellQuery = (colIdx) => `.vuuTable-col-headers .vuuTableHeaderCell:nth-child(${colIdx})`;
@@ -1197,10 +1165,10 @@ var howFarIsRowOutsideViewport = (rowEl, totalHeaderHeight, contentContainer = r
 
 // src/useCellEditing.ts
 var useCellEditing = ({ navigate }) => {
-  const commitHandler = (0, import_react14.useCallback)(() => {
+  const commitHandler = (0, import_react13.useCallback)(() => {
     navigate();
   }, [navigate]);
-  const editInput = (0, import_react14.useCallback)(
+  const editInput = (0, import_react13.useCallback)(
     (evt) => {
       const cellEl = evt.target;
       const input = cellEl.matches("input") ? cellEl : cellEl.querySelector("input");
@@ -1211,7 +1179,7 @@ var useCellEditing = ({ navigate }) => {
     },
     []
   );
-  const focusInput = (0, import_react14.useCallback)(
+  const focusInput = (0, import_react13.useCallback)(
     (evt) => {
       const cellEl = evt.target;
       const input = cellEl.querySelector("input");
@@ -1222,7 +1190,7 @@ var useCellEditing = ({ navigate }) => {
     },
     []
   );
-  const handleKeyDown = (0, import_react14.useCallback)(
+  const handleKeyDown = (0, import_react13.useCallback)(
     (e) => {
       const el = e.target;
       if (cellIsTextInput(el)) {
@@ -1235,7 +1203,7 @@ var useCellEditing = ({ navigate }) => {
     },
     [editInput, focusInput]
   );
-  const handleDoubleClick = (0, import_react14.useCallback)(
+  const handleDoubleClick = (0, import_react13.useCallback)(
     (e) => {
       const el = e.target;
       if (el.matches("input") || el.querySelector("input")) {
@@ -1245,14 +1213,14 @@ var useCellEditing = ({ navigate }) => {
     },
     [editInput]
   );
-  const handleBlur = (0, import_react14.useCallback)(
+  const handleBlur = (0, import_react13.useCallback)(
     (e) => {
       const el = e.target;
       el.removeEventListener("vuu-commit", commitHandler, true);
     },
     [commitHandler]
   );
-  const handleFocus = (0, import_react14.useCallback)(
+  const handleFocus = (0, import_react13.useCallback)(
     (e) => {
       const el = e.target;
       el.addEventListener("vuu-commit", commitHandler, true);
@@ -1269,7 +1237,7 @@ var useCellEditing = ({ navigate }) => {
 
 // src/useDataSource.ts
 var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
-var import_react15 = require("react");
+var import_react14 = require("react");
 
 // src/moving-window.ts
 var import_vuu_utils12 = require("@vuu-ui/vuu-utils");
@@ -1338,17 +1306,17 @@ var useDataSource = ({
   range = import_vuu_utils13.NULL_RANGE,
   renderBufferSize = 0
 }) => {
-  const [, forceUpdate] = (0, import_react15.useState)(null);
-  const data = (0, import_react15.useRef)([]);
-  const isMounted = (0, import_react15.useRef)(true);
-  const hasUpdated = (0, import_react15.useRef)(false);
-  const rangeRef = (0, import_react15.useRef)(range);
-  const dataWindow = (0, import_react15.useMemo)(
+  const [, forceUpdate] = (0, import_react14.useState)(null);
+  const data = (0, import_react14.useRef)([]);
+  const isMounted = (0, import_react14.useRef)(true);
+  const hasUpdated = (0, import_react14.useRef)(false);
+  const rangeRef = (0, import_react14.useRef)(range);
+  const dataWindow = (0, import_react14.useMemo)(
     () => new MovingWindow((0, import_vuu_utils13.getFullRange)(range, renderBufferSize)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const setData = (0, import_react15.useCallback)(
+  const setData = (0, import_react14.useCallback)(
     (updates) => {
       for (const row of updates) {
         dataWindow.add(row);
@@ -1361,7 +1329,7 @@ var useDataSource = ({
     },
     [dataWindow]
   );
-  const datasourceMessageHandler = (0, import_react15.useCallback)(
+  const datasourceMessageHandler = (0, import_react14.useCallback)(
     (message) => {
       if (message.type === "subscribed") {
         onSubscribed == null ? void 0 : onSubscribed(message);
@@ -1384,10 +1352,10 @@ var useDataSource = ({
     },
     [dataWindow, onFeatureInvocation, onSizeChange, onSubscribed, setData]
   );
-  const getSelectedRows = (0, import_react15.useCallback)(() => {
+  const getSelectedRows = (0, import_react14.useCallback)(() => {
     return dataWindow.getSelectedRows();
   }, [dataWindow]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     var _a;
     isMounted.current = true;
     (_a = dataSource.resume) == null ? void 0 : _a.call(dataSource);
@@ -1397,7 +1365,7 @@ var useDataSource = ({
       (_a2 = dataSource.suspend) == null ? void 0 : _a2.call(dataSource);
     };
   }, [dataSource]);
-  (0, import_react15.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     var _a;
     if (dataSource.status === "disabled") {
       (_a = dataSource.enable) == null ? void 0 : _a.call(dataSource, datasourceMessageHandler);
@@ -1408,7 +1376,7 @@ var useDataSource = ({
       );
     }
   }, [dataSource, datasourceMessageHandler, range, renderBufferSize]);
-  const setRange = (0, import_react15.useCallback)(
+  const setRange = (0, import_react14.useCallback)(
     (range2) => {
       if (!(0, import_vuu_utils13.rangesAreSame)(range2, rangeRef.current)) {
         const fullRange = (0, import_vuu_utils13.getFullRange)(range2, renderBufferSize);
@@ -1429,16 +1397,16 @@ var useDataSource = ({
 };
 
 // src/useInitialValue.ts
-var import_react16 = require("react");
+var import_react15 = require("react");
 var useInitialValue = (value) => {
-  const ref = (0, import_react16.useRef)(value);
-  return (0, import_react16.useMemo)(() => ref.current, []);
+  const ref = (0, import_react15.useRef)(value);
+  return (0, import_react15.useMemo)(() => ref.current, []);
 };
 
 // src/useKeyboardNavigation.ts
 var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
 var import_core = require("@salt-ds/core");
-var import_react17 = require("react");
+var import_react16 = require("react");
 var rowNavigationKeys = /* @__PURE__ */ new Set([
   "Home",
   "End",
@@ -1507,17 +1475,17 @@ var useKeyboardNavigation = ({
   viewportRowCount
 }) => {
   var _a;
-  const focusedCellPos = (0, import_react17.useRef)([-1, -1]);
-  const focusableCell = (0, import_react17.useRef)();
-  const activeCellPos = (0, import_react17.useRef)([-1, 0]);
-  const highlightedIndexRef = (0, import_react17.useRef)();
+  const focusedCellPos = (0, import_react16.useRef)([-1, -1]);
+  const focusableCell = (0, import_react16.useRef)();
+  const activeCellPos = (0, import_react16.useRef)([-1, 0]);
+  const highlightedIndexRef = (0, import_react16.useRef)();
   const [highlightedIndex, setHighlightedIdx] = (0, import_core.useControlled)({
     controlled: highlightedIndexProp,
     default: defaultHighlightedIndex,
     name: "UseKeyboardNavigation"
   });
   highlightedIndexRef.current = highlightedIndex;
-  const setHighlightedIndex = (0, import_react17.useCallback)(
+  const setHighlightedIndex = (0, import_react16.useCallback)(
     (idx, fromKeyboard = false) => {
       onHighlight == null ? void 0 : onHighlight(idx);
       setHighlightedIdx(idx);
@@ -1544,7 +1512,7 @@ var useKeyboardNavigation = ({
     }
     return NULL_CELL_POS;
   };
-  const focusCell = (0, import_react17.useCallback)(
+  const focusCell = (0, import_react16.useCallback)(
     (cellPos) => {
       var _a2;
       if (containerRef.current) {
@@ -1564,7 +1532,7 @@ var useKeyboardNavigation = ({
     // be often whilst scrolling - store range in a a ref ?
     [containerRef, requestScroll]
   );
-  const setActiveCell = (0, import_react17.useCallback)(
+  const setActiveCell = (0, import_react16.useCallback)(
     (rowIdx, colIdx, fromKeyboard = false) => {
       const pos = [rowIdx, colIdx];
       activeCellPos.current = pos;
@@ -1579,7 +1547,7 @@ var useKeyboardNavigation = ({
     },
     [focusCell, navigationStyle, setHighlightedIdx]
   );
-  const nextPageItemIdx = (0, import_react17.useCallback)(
+  const nextPageItemIdx = (0, import_react16.useCallback)(
     (key, [rowIdx, colIdx]) => new Promise((resolve) => {
       let newRowIdx = rowIdx;
       switch (key) {
@@ -1618,7 +1586,7 @@ var useKeyboardNavigation = ({
     }),
     [requestScroll, rowCount, viewportRowCount]
   );
-  const handleFocus = (0, import_react17.useCallback)(() => {
+  const handleFocus = (0, import_react16.useCallback)(() => {
     var _a2;
     if (disableHighlightOnFocus !== true) {
       if ((_a2 = containerRef.current) == null ? void 0 : _a2.contains(document.activeElement)) {
@@ -1637,7 +1605,7 @@ var useKeyboardNavigation = ({
     navigationStyle,
     setHighlightedIdx
   ]);
-  const navigateChildItems = (0, import_react17.useCallback)(
+  const navigateChildItems = (0, import_react16.useCallback)(
     async (key) => {
       const [nextRowIdx, nextColIdx] = isPagingKey(key) ? await nextPageItemIdx(key, activeCellPos.current) : nextCellPos(key, activeCellPos.current, columnCount, rowCount);
       const [rowIdx, colIdx] = activeCellPos.current;
@@ -1647,13 +1615,13 @@ var useKeyboardNavigation = ({
     },
     [columnCount, nextPageItemIdx, rowCount, setActiveCell]
   );
-  const scrollRowIntoViewIfNecessary = (0, import_react17.useCallback)(
+  const scrollRowIntoViewIfNecessary = (0, import_react16.useCallback)(
     (rowIndex) => {
       requestScroll == null ? void 0 : requestScroll({ type: "scroll-row", rowIndex });
     },
     [requestScroll]
   );
-  const moveHighlightedRow = (0, import_react17.useCallback)(
+  const moveHighlightedRow = (0, import_react16.useCallback)(
     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);
@@ -1670,12 +1638,12 @@ var useKeyboardNavigation = ({
       setHighlightedIndex
     ]
   );
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (highlightedIndexProp !== void 0 && highlightedIndexProp !== -1) {
       scrollRowIntoViewIfNecessary(highlightedIndexProp);
     }
   }, [highlightedIndexProp, scrollRowIntoViewIfNecessary]);
-  const handleKeyDown = (0, import_react17.useCallback)(
+  const handleKeyDown = (0, import_react16.useCallback)(
     (e) => {
       if (rowCount > 0 && isNavigationKey(e.key, navigationStyle)) {
         e.preventDefault();
@@ -1689,7 +1657,7 @@ var useKeyboardNavigation = ({
     },
     [rowCount, navigationStyle, moveHighlightedRow, navigateChildItems]
   );
-  const handleClick = (0, import_react17.useCallback)(
+  const handleClick = (0, import_react16.useCallback)(
     // Might not be a cell e.g the Settings button
     (evt) => {
       const target = evt.target;
@@ -1701,10 +1669,10 @@ var useKeyboardNavigation = ({
     },
     [setActiveCell]
   );
-  const handleMouseLeave = (0, import_react17.useCallback)(() => {
+  const handleMouseLeave = (0, import_react16.useCallback)(() => {
     setHighlightedIndex(-1);
   }, [setHighlightedIndex]);
-  const handleMouseMove = (0, import_react17.useCallback)(
+  const handleMouseMove = (0, import_react16.useCallback)(
     (evt) => {
       const idx = closestRowIndex(evt.target);
       if (idx !== -1 && idx !== highlightedIndexRef.current) {
@@ -1713,11 +1681,11 @@ var useKeyboardNavigation = ({
     },
     [setHighlightedIndex]
   );
-  const navigate = (0, import_react17.useCallback)(() => {
+  const navigate = (0, import_react16.useCallback)(() => {
     navigateChildItems("ArrowDown");
   }, [navigateChildItems]);
   const fullyRendered = ((_a = containerRef.current) == null ? void 0 : _a.firstChild) != null;
-  (0, import_react17.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (fullyRendered && focusableCell.current === void 0 && !disableFocus) {
       const { current: container } = containerRef;
       const cell = (container == null ? void 0 : container.querySelector(headerCellQuery(0))) || (container == null ? void 0 : container.querySelector(dataCellQuery(0, 0)));
@@ -1740,7 +1708,7 @@ var useKeyboardNavigation = ({
 
 // src/useSelection.ts
 var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
-var import_react18 = require("react");
+var import_react17 = require("react");
 var { IDX: IDX2 } = import_vuu_utils15.metadataKeys;
 var NO_SELECTION = [];
 var defaultSelectionKeys = ["Enter", " "];
@@ -1752,14 +1720,14 @@ var useSelection = ({
   onSelectionChange
 }) => {
   selectionModel === "extended" || selectionModel === "checkbox";
-  const lastActiveRef = (0, import_react18.useRef)(-1);
-  const selectedRef = (0, import_react18.useRef)(NO_SELECTION);
-  const isSelectionEvent = (0, import_react18.useCallback)(
+  const lastActiveRef = (0, import_react17.useRef)(-1);
+  const selectedRef = (0, import_react17.useRef)(NO_SELECTION);
+  const isSelectionEvent = (0, import_react17.useCallback)(
     (evt) => selectionKeys.includes(evt.key),
     [selectionKeys]
   );
-  const handleRowClick = (0, import_react18.useCallback)(
-    (row, rangeSelect, keepExistingSelection) => {
+  const handleRowClick = (0, import_react17.useCallback)(
+    (evt, row, rangeSelect, keepExistingSelection) => {
       const { [IDX2]: idx } = row;
       const { current: active } = lastActiveRef;
       const { current: selected } = selectedRef;
@@ -1779,7 +1747,7 @@ var useSelection = ({
     },
     [onSelect, onSelectionChange, selectionModel]
   );
-  const handleKeyDown = (0, import_react18.useCallback)(
+  const handleKeyDown = (0, import_react17.useCallback)(
     (e) => {
       if (isSelectionEvent(e)) {
         const { current: rowIndex } = highlightedIndexRef;
@@ -1804,7 +1772,7 @@ var useSelection = ({
 // src/useTableContextMenu.ts
 var import_vuu_popups2 = require("@vuu-ui/vuu-popups");
 var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
-var import_react19 = require("react");
+var import_react18 = require("react");
 var NO_ROWS = [];
 var useTableContextMenu = ({
   columns,
@@ -1813,7 +1781,7 @@ var useTableContextMenu = ({
   getSelectedRows
 }) => {
   const [showContextMenu] = (0, import_vuu_popups2.useContextMenu)();
-  const onContextMenu = (0, import_react19.useCallback)(
+  const onContextMenu = (0, import_react18.useCallback)(
     (evt) => {
       const target = evt.target;
       const cellEl = target == null ? void 0 : target.closest("div[role='cell']");
@@ -1842,7 +1810,7 @@ var useTableContextMenu = ({
 // src/useTableModel.ts
 var import_vuu_utils17 = require("@vuu-ui/vuu-utils");
 var import_vuu_ui_controls3 = require("@vuu-ui/vuu-ui-controls");
-var import_react20 = require("react");
+var import_react19 = require("react");
 var { info } = (0, import_vuu_utils17.logger)("useTableModel");
 var DEFAULT_COLUMN_WIDTH = 100;
 var columnWithoutDataType = ({ serverDataType }) => serverDataType === void 0;
@@ -1887,7 +1855,7 @@ var columnReducer = (state, action) => {
   }
 };
 var useTableModel = (tableConfigProp, dataSource) => {
-  const [state, dispatchTableModelAction] = (0, import_react20.useReducer)(columnReducer, { tableConfig: tableConfigProp, dataSource }, init);
+  const [state, dispatchTableModelAction] = (0, import_react19.useReducer)(columnReducer, { tableConfig: tableConfigProp, dataSource }, init);
   const { columns, headings, tableConfig, ...tableAttributes } = state;
   return {
     columns,
@@ -2128,7 +2096,7 @@ function updateTableConfig2(state, { confirmed, filter, groupBy, sort }) {
 
 // src/useTableScroll.ts
 var import_vuu_utils18 = require("@vuu-ui/vuu-utils");
-var import_react21 = require("react");
+var import_react20 = require("react");
 var SCROLL_MOVE_CHECK_THRESHOLD = 100;
 var HORIZONTAL_SCROLL_BUFFER = 200;
 var getMaxScroll = (container) => {
@@ -2179,8 +2147,8 @@ var useCallbackRef = ({
   onAttach,
   onDetach
 }) => {
-  const ref = (0, import_react21.useRef)(null);
-  const callbackRef = (0, import_react21.useCallback)(
+  const ref = (0, import_react20.useRef)(null);
+  const callbackRef = (0, import_react20.useCallback)(
     (el) => {
       if (el) {
         ref.current = el;
@@ -2206,21 +2174,21 @@ var useTableScroll = ({
   setRange,
   viewportMeasurements
 }) => {
-  const firstRowRef = (0, import_react21.useRef)(0);
-  const rowHeightRef = (0, import_react21.useRef)(rowHeight);
-  const contentContainerScrolledRef = (0, import_react21.useRef)(false);
-  const contentContainerPosRef = (0, import_react21.useRef)({
+  const firstRowRef = (0, import_react20.useRef)(0);
+  const rowHeightRef = (0, import_react20.useRef)(rowHeight);
+  const contentContainerScrolledRef = (0, import_react20.useRef)(false);
+  const contentContainerPosRef = (0, import_react20.useRef)({
     scrollTop: 0,
     scrollLeft: 0
   });
-  const scrollbarContainerScrolledRef = (0, import_react21.useRef)(false);
-  const scrollbarContainerPosRef = (0, import_react21.useRef)({
+  const scrollbarContainerScrolledRef = (0, import_react20.useRef)(false);
+  const scrollbarContainerPosRef = (0, import_react20.useRef)({
     scrollTop: 0,
     scrollLeft: 0
   });
-  const scrollbarContainerRef = (0, import_react21.useRef)(null);
-  const contentContainerRef = (0, import_react21.useRef)(null);
-  const lastHorizontalScrollCheckPoint = (0, import_react21.useRef)(0);
+  const scrollbarContainerRef = (0, import_react20.useRef)(null);
+  const contentContainerRef = (0, import_react20.useRef)(null);
+  const lastHorizontalScrollCheckPoint = (0, import_react20.useRef)(0);
   const {
     appliedPageSize,
     isVirtualScroll,
@@ -2228,10 +2196,10 @@ var useTableScroll = ({
     totalHeaderHeight,
     viewportWidth
   } = viewportMeasurements;
-  const columnsWithinViewportRef = (0, import_react21.useRef)([]);
-  const [, forceRefresh] = (0, import_react21.useState)({});
-  const preSpanRef = (0, import_react21.useRef)(0);
-  (0, import_react21.useMemo)(() => {
+  const columnsWithinViewportRef = (0, import_react20.useRef)([]);
+  const [, forceRefresh] = (0, import_react20.useState)({});
+  const preSpanRef = (0, import_react20.useRef)(0);
+  (0, import_react20.useMemo)(() => {
     const [visibleColumns, offset] = (0, import_vuu_utils18.getColumnsInViewport)(
       columns,
       contentContainerPosRef.current.scrollLeft,
@@ -2240,7 +2208,7 @@ var useTableScroll = ({
     preSpanRef.current = offset;
     columnsWithinViewportRef.current = visibleColumns;
   }, [viewportWidth, columns]);
-  const handleHorizontalScroll = (0, import_react21.useCallback)(
+  const handleHorizontalScroll = (0, import_react20.useCallback)(
     (scrollLeft) => {
       contentContainerPosRef.current.scrollLeft = scrollLeft;
       onHorizontalScroll == null ? void 0 : onHorizontalScroll(scrollLeft);
@@ -2260,7 +2228,7 @@ var useTableScroll = ({
     },
     [columns, onHorizontalScroll, viewportWidth]
   );
-  const handleVerticalScroll = (0, import_react21.useCallback)(
+  const handleVerticalScroll = (0, import_react20.useCallback)(
     (scrollTop, pctScrollTop) => {
       contentContainerPosRef.current.scrollTop = scrollTop;
       onVerticalScroll == null ? void 0 : onVerticalScroll(scrollTop, pctScrollTop);
@@ -2279,7 +2247,7 @@ var useTableScroll = ({
       viewportRowCount
     ]
   );
-  const handleScrollbarContainerScroll = (0, import_react21.useCallback)(() => {
+  const handleScrollbarContainerScroll = (0, import_react20.useCallback)(() => {
     const { current: contentContainer } = contentContainerRef;
     const { current: scrollbarContainer } = scrollbarContainerRef;
     const { current: contentContainerScrolled } = contentContainerScrolledRef;
@@ -2302,7 +2270,7 @@ var useTableScroll = ({
     }
     onVerticalScrollInSitu == null ? void 0 : onVerticalScrollInSitu(0);
   }, [onVerticalScrollInSitu]);
-  const handleContentContainerScroll = (0, import_react21.useCallback)(() => {
+  const handleContentContainerScroll = (0, import_react20.useCallback)(() => {
     const { current: scrollbarContainerScrolled } = scrollbarContainerScrolledRef;
     const { current: contentContainer } = contentContainerRef;
     const { current: scrollbarContainer } = scrollbarContainerRef;
@@ -2333,7 +2301,7 @@ var useTableScroll = ({
       }
     }
   }, [handleVerticalScroll, handleHorizontalScroll]);
-  const handleAttachScrollbarContainer = (0, import_react21.useCallback)(
+  const handleAttachScrollbarContainer = (0, import_react20.useCallback)(
     (el) => {
       scrollbarContainerRef.current = el;
       el.addEventListener("scroll", handleScrollbarContainerScroll, {
@@ -2342,14 +2310,14 @@ var useTableScroll = ({
     },
     [handleScrollbarContainerScroll]
   );
-  const handleDetachScrollbarContainer = (0, import_react21.useCallback)(
+  const handleDetachScrollbarContainer = (0, import_react20.useCallback)(
     (el) => {
       scrollbarContainerRef.current = null;
       el.removeEventListener("scroll", handleScrollbarContainerScroll);
     },
     [handleScrollbarContainerScroll]
   );
-  const handleAttachContentContainer = (0, import_react21.useCallback)(
+  const handleAttachContentContainer = (0, import_react20.useCallback)(
     (el) => {
       contentContainerRef.current = el;
       el.addEventListener("scroll", handleContentContainerScroll, {
@@ -2358,7 +2326,7 @@ var useTableScroll = ({
     },
     [handleContentContainerScroll]
   );
-  const handleDetachContentContainer = (0, import_react21.useCallback)(
+  const handleDetachContentContainer = (0, import_react20.useCallback)(
     (el) => {
       contentContainerRef.current = null;
       el.removeEventListener("scroll", handleContentContainerScroll);
@@ -2373,7 +2341,7 @@ var useTableScroll = ({
     onAttach: handleAttachScrollbarContainer,
     onDetach: handleDetachScrollbarContainer
   });
-  const requestScroll = (0, import_react21.useCallback)(
+  const requestScroll = (0, import_react20.useCallback)(
     (scrollRequest) => {
       const { current: contentContainer } = contentContainerRef;
       if (contentContainer) {
@@ -2390,6 +2358,7 @@ var useTableScroll = ({
               activeRow,
               totalHeaderHeight
             );
+            console.log(`outside viewport ? ${direction} ${distance}`);
             if (direction && distance) {
               if (isVirtualScroll) {
                 const offset = direction === "down" ? 1 : -1;
@@ -2462,7 +2431,7 @@ var useTableScroll = ({
       viewportRowCount
     ]
   );
-  const scrollHandles = (0, import_react21.useMemo)(
+  const scrollHandles = (0, import_react20.useMemo)(
     // TODO not complete yet
     () => ({
       scrollToIndex: (rowIndex) => {
@@ -2477,7 +2446,7 @@ var useTableScroll = ({
     }),
     []
   );
-  (0, import_react21.useImperativeHandle)(
+  (0, import_react20.useImperativeHandle)(
     scrollingApiRef,
     () => {
       if (scrollbarContainerRef.current) {
@@ -2488,7 +2457,7 @@ var useTableScroll = ({
     },
     [scrollHandles]
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     if (rowHeight !== rowHeightRef.current) {
       rowHeightRef.current = rowHeight;
       if (contentContainerPosRef.current.scrollTop > 0) {
@@ -2517,7 +2486,7 @@ var useTableScroll = ({
 
 // src/useTableViewport.ts
 var import_vuu_utils19 = require("@vuu-ui/vuu-utils");
-var import_react22 = require("react");
+var import_react21 = require("react");
 var MAX_PIXEL_HEIGHT = 1e7;
 var UNMEASURED_VIEWPORT = {
   appliedPageSize: 0,
@@ -2546,20 +2515,20 @@ var useTableViewport = ({
   selectionEndSize = 4,
   size
 }) => {
-  const inSituRowOffsetRef = (0, import_react22.useRef)(0);
-  const pctScrollTopRef = (0, import_react22.useRef)(0);
+  const inSituRowOffsetRef = (0, import_react21.useRef)(0);
+  const pctScrollTopRef = (0, import_react21.useRef)(0);
   const pixelContentHeight = Math.min(rowHeight * rowCount, MAX_PIXEL_HEIGHT);
   const virtualContentHeight = rowCount * rowHeight;
   const virtualisedExtent = virtualContentHeight - pixelContentHeight;
-  const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = (0, import_react22.useMemo)(
+  const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = (0, import_react21.useMemo)(
     () => (0, import_vuu_utils19.measurePinnedColumns)(columns, selectionEndSize),
     [columns, selectionEndSize]
   );
-  const totalHeaderHeightRef = (0, import_react22.useRef)(headerHeight);
-  (0, import_react22.useMemo)(() => {
+  const totalHeaderHeightRef = (0, import_react21.useRef)(headerHeight);
+  (0, import_react21.useMemo)(() => {
     totalHeaderHeightRef.current = headerHeight * (1 + headings.length);
   }, [headerHeight, headings.length]);
-  const [getRowOffset, getRowAtPosition, isVirtualScroll] = (0, import_react22.useMemo)(() => {
+  const [getRowOffset, getRowAtPosition, isVirtualScroll] = (0, import_react21.useMemo)(() => {
     if (virtualisedExtent) {
       const [_getRowOffset, getRowAtPosition2, _isVirtual] = (0, import_vuu_utils19.virtualRowPositioning)(rowHeight, virtualisedExtent, pctScrollTopRef);
       const getOffset = (row) => {
@@ -2570,10 +2539,10 @@ var useTableViewport = ({
       return (0, import_vuu_utils19.actualRowPositioning)(rowHeight);
     }
   }, [virtualisedExtent, rowHeight]);
-  const setScrollTop = (0, import_react22.useCallback)((_, scrollPct) => {
+  const setScrollTop = (0, import_react21.useCallback)((_, scrollPct) => {
     pctScrollTopRef.current = scrollPct;
   }, []);
-  const setInSituRowOffset = (0, import_react22.useCallback)((rowIndexOffset) => {
+  const setInSituRowOffset = (0, import_react21.useCallback)((rowIndexOffset) => {
     if (rowIndexOffset === 0) {
       inSituRowOffsetRef.current = 0;
     } else {
@@ -2583,7 +2552,7 @@ var useTableViewport = ({
       );
     }
   }, []);
-  return (0, import_react22.useMemo)(() => {
+  return (0, import_react21.useMemo)(() => {
     if (size) {
       const { current: totalHeaderHeight } = totalHeaderHeightRef;
       const scrollbarSize = 15;
@@ -2636,7 +2605,7 @@ var useTableViewport = ({
 // src/useTableAndColumnSettings.ts
 var import_vuu_layout = require("@vuu-ui/vuu-layout");
 var import_vuu_utils20 = require("@vuu-ui/vuu-utils");
-var import_react23 = require("react");
+var import_react22 = require("react");
 var useTableAndColumnSettings = ({
   availableColumns: availableColumnsProps,
   onAvailableColumnsChange,
@@ -2646,11 +2615,11 @@ var useTableAndColumnSettings = ({
   tableConfig
 }) => {
   const dispatchLayoutAction = (0, import_vuu_layout.useLayoutProviderDispatch)();
-  const showTableSettingsRef = (0, import_react23.useRef)();
-  const [availableColumns, setAvailableColumns] = (0, import_react23.useState)(
+  const showTableSettingsRef = (0, import_react22.useRef)();
+  const [availableColumns, setAvailableColumns] = (0, import_react22.useState)(
     availableColumnsProps
   );
-  const showContextPanel = (0, import_react23.useCallback)(
+  const showContextPanel = (0, import_react22.useCallback)(
     (componentType, title, props) => {
       dispatchLayoutAction({
         type: "set-props",
@@ -2667,13 +2636,13 @@ var useTableAndColumnSettings = ({
     },
     [dispatchLayoutAction]
   );
-  const handleCancelCreateColumn = (0, import_react23.useCallback)(() => {
+  const handleCancelCreateColumn = (0, import_react22.useCallback)(() => {
     requestAnimationFrame(() => {
       var _a;
       (_a = showTableSettingsRef.current) == null ? void 0 : _a.call(showTableSettingsRef);
     });
   }, []);
-  const handleCreateCalculatedColumn = (0, import_react23.useCallback)(
+  const handleCreateCalculatedColumn = (0, import_react22.useCallback)(
     (column) => {
       const newAvailableColumns = availableColumns.concat({
         name: column.name,
@@ -2689,7 +2658,7 @@ var useTableAndColumnSettings = ({
     },
     [availableColumns, onAvailableColumnsChange, onCreateCalculatedColumn]
   );
-  const showColumnSettingsPanel = (0, import_react23.useCallback)(
+  const showColumnSettingsPanel = (0, import_react22.useCallback)(
     (action) => {
       showContextPanel("ColumnSettings", "Column Settings", {
         column: action.column,
@@ -2708,7 +2677,7 @@ var useTableAndColumnSettings = ({
       tableConfig
     ]
   );
-  const handleAddCalculatedColumn = (0, import_react23.useCallback)(() => {
+  const handleAddCalculatedColumn = (0, import_react22.useCallback)(() => {
     showColumnSettingsPanel({
       column: {
         name: "::",
@@ -2718,7 +2687,7 @@ var useTableAndColumnSettings = ({
       vuuTable: { module: "SIMUL", table: "instruments" }
     });
   }, [showColumnSettingsPanel]);
-  const handleNavigateToColumn = (0, import_react23.useCallback)(
+  const handleNavigateToColumn = (0, import_react22.useCallback)(
     (columnName) => {
       const column = tableConfig.columns.find((c) => c.name === columnName);
       if (column) {
@@ -2732,7 +2701,7 @@ var useTableAndColumnSettings = ({
     },
     [showColumnSettingsPanel, tableConfig.columns]
   );
-  showTableSettingsRef.current = (0, import_react23.useCallback)(() => {
+  showTableSettingsRef.current = (0, import_react22.useCallback)(() => {
     showContextPanel("TableSettings", "DataGrid Settings", {
       availableColumns: availableColumns != null ? availableColumns : tableConfig.columns.map(({ name, serverDataType }) => ({
         name,
@@ -2761,7 +2730,7 @@ var useTableAndColumnSettings = ({
 
 // src/useRowClassNameGenerators.ts
 var import_vuu_utils21 = require("@vuu-ui/vuu-utils");
-var import_react24 = require("react");
+var import_react23 = require("react");
 var createClassNameGenerator = (ids) => {
   const functions = [];
   ids == null ? void 0 : ids.forEach((id) => {
@@ -2784,7 +2753,7 @@ var createClassNameGenerator = (ids) => {
 var useRowClassNameGenerators = ({
   rowClassNameGenerators
 }) => {
-  return (0, import_react24.useMemo)(() => {
+  return (0, import_react23.useMemo)(() => {
     return createClassNameGenerator(rowClassNameGenerators);
   }, [rowClassNameGenerators]);
 };
@@ -2829,17 +2798,17 @@ var useTable = ({
   selectionModel,
   size
 }) => {
-  const [rowCount, setRowCount] = (0, import_react25.useState)(dataSource.size);
+  const [rowCount, setRowCount] = (0, import_react24.useState)(dataSource.size);
   if (dataSource === void 0) {
     throw Error("no data source provided to Vuu Table");
   }
   const rowClassNameGenerator = useRowClassNameGenerators(config);
   const useRowDragDrop = allowDragDrop ? import_vuu_ui_controls4.useDragDrop : useNullDragDrop;
-  const menuBuilder = (0, import_react25.useMemo)(
+  const menuBuilder = (0, import_react24.useMemo)(
     () => buildContextMenuDescriptors(dataSource),
     [dataSource]
   );
-  const onDataRowcountChange = (0, import_react25.useCallback)((size2) => {
+  const onDataRowcountChange = (0, import_react24.useCallback)((size2) => {
     setRowCount(size2);
   }, []);
   const {
@@ -2856,7 +2825,7 @@ var useTable = ({
       dataSource
     });
   }, [config, dataSource, dispatchTableModelAction]);
-  const applyTableConfigChange = (0, import_react25.useCallback)(
+  const applyTableConfigChange = (0, import_react24.useCallback)(
     (config2) => {
       dispatchTableModelAction({
         type: "init",
@@ -2867,11 +2836,11 @@ var useTable = ({
     },
     [dataSource, dispatchTableModelAction, onConfigChange]
   );
-  const columnMap = (0, import_react25.useMemo)(
+  const columnMap = (0, import_react24.useMemo)(
     () => (0, import_vuu_utils22.buildColumnMap)(dataSource.columns),
     [dataSource.columns]
   );
-  const onSubscribed = (0, import_react25.useCallback)(
+  const onSubscribed = (0, import_react24.useCallback)(
     ({ tableSchema }) => {
       if (tableSchema) {
         dispatchTableModelAction({
@@ -2921,7 +2890,7 @@ var useTable = ({
     onVerticalScrollInSitu: viewportHookSetInSituRowOffset,
     viewportMeasurements
   });
-  const handleConfigEditedInSettingsPanel = (0, import_react25.useCallback)(
+  const handleConfigEditedInSettingsPanel = (0, import_react24.useCallback)(
     (tableConfig2) => {
       dispatchTableModelAction({
         type: "init",
@@ -2932,7 +2901,7 @@ var useTable = ({
     },
     [dataSource, dispatchTableModelAction, onConfigChange]
   );
-  const handleDataSourceConfigChanged = (0, import_react25.useCallback)(
+  const handleDataSourceConfigChanged = (0, import_react24.useCallback)(
     (dataSourceConfig) => {
       dataSource.config = {
         ...dataSource.config,
@@ -2941,7 +2910,7 @@ var useTable = ({
     },
     [dataSource]
   );
-  (0, import_react25.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     dataSource.on("config", (config2, confirmed, changes) => {
       const scrollSensitiveChanges = (changes == null ? void 0 : changes.filterChanged) || (changes == null ? void 0 : changes.groupByChanged);
       if (scrollSensitiveChanges && dataSource.range.from > 0) {
@@ -2957,14 +2926,14 @@ var useTable = ({
       });
     });
   }, [dataSource, dispatchTableModelAction, requestScroll]);
-  const handleCreateCalculatedColumn = (0, import_react25.useCallback)(
+  const handleCreateCalculatedColumn = (0, import_react24.useCallback)(
     (column) => {
       dataSource.columns = dataSource.columns.concat(column.name);
       applyTableConfigChange(addColumn(tableConfig, column));
     },
     [dataSource, tableConfig, applyTableConfigChange]
   );
-  const hideColumns2 = (0, import_react25.useCallback)(
+  const hideColumns2 = (0, import_react24.useCallback)(
     (action) => {
       const { columns: columns2 } = action;
       const hiddenColumns = columns2.map((c) => c.name);
@@ -2978,7 +2947,7 @@ var useTable = ({
     },
     [tableConfig, applyTableConfigChange]
   );
-  const pinColumn3 = (0, import_react25.useCallback)(
+  const pinColumn3 = (0, import_react24.useCallback)(
     (action) => {
       applyTableConfigChange({
         ...tableConfig,
@@ -3001,7 +2970,7 @@ var useTable = ({
     onDataSourceConfigChange: handleDataSourceConfigChanged,
     tableConfig
   });
-  const onPersistentColumnOperation = (0, import_react25.useCallback)(
+  const onPersistentColumnOperation = (0, import_react24.useCallback)(
     (action) => {
       if (isShowColumnSettings(action)) {
         showColumnSettingsPanel(action);
@@ -3030,7 +2999,7 @@ var useTable = ({
     dataSource,
     onPersistentColumnOperation
   });
-  const handleSort = (0, import_react25.useCallback)(
+  const handleSort = (0, import_react24.useCallback)(
     (column, extendSort = false, sortType) => {
       if (dataSource) {
         dataSource.sort = (0, import_vuu_utils22.applySort)(
@@ -3043,8 +3012,8 @@ var useTable = ({
     },
     [dataSource]
   );
-  const resizeCells = (0, import_react25.useRef)();
-  const onResizeColumn = (0, import_react25.useCallback)(
+  const resizeCells = (0, import_react24.useRef)();
+  const onResizeColumn = (0, import_react24.useCallback)(
     (phase, columnName, width) => {
       var _a, _b, _c;
       const column = columns.find((column2) => column2.name === columnName);
@@ -3100,7 +3069,7 @@ var useTable = ({
       containerRef
     ]
   );
-  const onToggleGroup = (0, import_react25.useCallback)(
+  const onToggleGroup = (0, import_react24.useCallback)(
     (row, column) => {
       var _a, _b;
       const isJson = (0, import_vuu_utils22.isJsonGroup)(column, row, columnMap);
@@ -3163,7 +3132,7 @@ var useTable = ({
   } = useCellEditing({
     navigate
   });
-  const handleFocus = (0, import_react25.useCallback)(
+  const handleFocus = (0, import_react24.useCallback)(
     (e) => {
       navigationFocus();
       if (!e.defaultPrevented) {
@@ -3178,13 +3147,13 @@ var useTable = ({
     dataSource,
     getSelectedRows
   });
-  const onMoveGroupColumn = (0, import_react25.useCallback)(
+  const onMoveGroupColumn = (0, import_react24.useCallback)(
     (columns2) => {
       dataSource.groupBy = columns2.map((col) => col.name);
     },
     [dataSource]
   );
-  const onRemoveGroupColumn = (0, import_react25.useCallback)(
+  const onRemoveGroupColumn = (0, import_react24.useCallback)(
     (column) => {
       if ((0, import_vuu_utils22.isGroupColumn)(column)) {
         dataSource.groupBy = [];
@@ -3198,23 +3167,38 @@ var useTable = ({
     },
     [dataSource]
   );
-  const handleSelectionChange = (0, import_react25.useCallback)(
+  const handleSelectionChange = (0, import_react24.useCallback)(
     (selected) => {
       dataSource.select(selected);
       onSelectionChange == null ? void 0 : onSelectionChange(selected);
     },
     [dataSource, onSelectionChange]
   );
+  const handleSelect = (0, import_react24.useCallback)(
+    (row) => {
+      if (onSelect) {
+        onSelect(row === null ? null : (0, import_vuu_utils22.asDataSourceRowObject)(row, columnMap));
+      }
+    },
+    [columnMap, onSelect]
+  );
   const {
     onKeyDown: selectionHookKeyDown,
     onRowClick: selectionHookOnRowClick
   } = useSelection({
     highlightedIndexRef,
-    onSelect,
+    onSelect: handleSelect,
     onSelectionChange: handleSelectionChange,
     selectionModel
   });
-  const handleKeyDown = (0, import_react25.useCallback)(
+  const handleRowClick = (0, import_react24.useCallback)(
+    (evt, row, rangeSelect, keepExistingSelection) => {
+      selectionHookOnRowClick(evt, row, rangeSelect, keepExistingSelection);
+      onRowClickProp == null ? void 0 : onRowClickProp(evt, (0, import_vuu_utils22.asDataSourceRowObject)(row, columnMap));
+    },
+    [columnMap, onRowClickProp, selectionHookOnRowClick]
+  );
+  const handleKeyDown = (0, import_react24.useCallback)(
     (e) => {
       navigationKeyDown(e);
       if (!e.defaultPrevented) {
@@ -3226,14 +3210,7 @@ var useTable = ({
     },
     [navigationKeyDown, editingKeyDown, selectionHookKeyDown]
   );
-  const handleRowClick = (0, import_react25.useCallback)(
-    (row, rangeSelect, keepExistingSelection) => {
-      selectionHookOnRowClick(row, rangeSelect, keepExistingSelection);
-      onRowClickProp == null ? void 0 : onRowClickProp(row);
-    },
-    [onRowClickProp, selectionHookOnRowClick]
-  );
-  const onMoveColumn = (0, import_react25.useCallback)(
+  const onMoveColumn = (0, import_react24.useCallback)(
     (columns2) => {
       const newTableConfig = {
         ...tableConfig,
@@ -3248,17 +3225,17 @@ var useTable = ({
     },
     [dataSource, dispatchTableModelAction, onConfigChange, tableConfig]
   );
-  const handleDropRow = (0, import_react25.useCallback)(
+  const handleDropRow = (0, import_react24.useCallback)(
     (dragDropState) => {
       onDrop == null ? void 0 : onDrop(dragDropState);
     },
     [onDrop]
   );
-  const handleDataEdited = (0, import_react25.useCallback)(
+  const handleDataEdited = (0, import_react24.useCallback)(
     async (row, columnName, value) => dataSource.applyEdit(row, columnName, value),
     [dataSource]
   );
-  const handleDragStartRow = (0, import_react25.useCallback)(
+  const handleDragStartRow = (0, import_react24.useCallback)(
     (dragDropState) => {
       const { initialDragElement } = dragDropState;
       const rowIndex = (0, import_vuu_utils22.getIndexFromRowElement)(initialDragElement);
@@ -3318,17 +3295,17 @@ var useTable = ({
 
 // src/useRowHeight.ts
 var import_vuu_utils23 = require("@vuu-ui/vuu-utils");
-var import_react26 = require("react");
+var import_react25 = require("react");
 var useRowHeight = ({
   rowHeight: rowHeightProp = 0
 }) => {
-  const [rowHeight, setRowHeight] = (0, import_react26.useState)(rowHeightProp);
-  const heightRef = (0, import_react26.useRef)(rowHeight);
-  const resizeObserver = (0, import_react26.useMemo)(() => {
+  const [rowHeight, setRowHeight] = (0, import_react25.useState)(rowHeightProp);
+  const heightRef = (0, import_react25.useRef)(rowHeight);
+  const resizeObserver = (0, import_react25.useMemo)(() => {
     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 ((0, import_vuu_utils23.isValidNumber)(newHeight) && heightRef.current !== newHeight) {
           heightRef.current = newHeight;
           setRowHeight(newHeight);
@@ -3336,12 +3313,13 @@ var useRowHeight = ({
       }
     });
   }, []);
-  const rowRef = (0, import_react26.useCallback)(
+  const rowRef = (0, import_react25.useCallback)(
     (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);
         }
@@ -3356,7 +3334,7 @@ var useRowHeight = ({
 
 // src/Table.tsx
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var classBase7 = "vuuTable";
+var classBase8 = "vuuTable";
 var { IDX: IDX3, RENDER_IDX } = import_vuu_utils24.metadataKeys;
 var TableCore = ({
   Row: Row2 = Row,
@@ -3431,16 +3409,16 @@ var TableCore = ({
     onRowClick: onRowClickProp,
     onSelect,
     onSelectionChange,
-    renderBufferSize,
+    renderBufferSize: Math.max(5, renderBufferSize),
     rowHeight,
     scrollingApiRef,
     selectionModel,
     size
   });
-  const contentContainerClassName = (0, import_clsx9.default)(`${classBase7}-contentContainer`, {
-    [`${classBase7}-colLines`]: tableAttributes.columnSeparators,
-    [`${classBase7}-rowLines`]: tableAttributes.rowSeparators,
-    [`${classBase7}-zebra`]: tableAttributes.zebraStripes
+  const contentContainerClassName = (0, import_clsx9.default)(`${classBase8}-contentContainer`, {
+    [`${classBase8}-colLines`]: tableAttributes.columnSeparators,
+    [`${classBase8}-rowLines`]: tableAttributes.rowSeparators,
+    [`${classBase8}-zebra`]: tableAttributes.zebraStripes
   });
   const cssVariables = {
     "--content-height": `${viewportMeasurements.contentHeight}px`,
@@ -3463,10 +3441,10 @@ var TableCore = ({
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "div",
           {
-            className: `${classBase7}-scrollbarContainer`,
+            className: `${classBase8}-scrollbarContainer`,
             ref: scrollProps.scrollbarContainerRef,
             style: cssVariables,
-            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${classBase7}-scrollbarContent` })
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${classBase8}-scrollbarContent` })
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -3479,7 +3457,7 @@ var TableCore = ({
               "div",
               {
                 ...tableProps,
-                className: `${classBase7}-table`,
+                className: `${classBase8}-table`,
                 role: "table",
                 tabIndex: disableFocus ? void 0 : -1,
                 children: [
@@ -3498,7 +3476,7 @@ var TableCore = ({
                       virtualColSpan: scrollProps.virtualColSpan
                     }
                   ) : null,
-                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${classBase7}-body`, children: data.map((data2) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: `${classBase8}-body`, children: data.map((data2) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                     Row2,
                     {
                       "aria-rowindex": data2[0] + 1,
@@ -3526,7 +3504,7 @@ var TableCore = ({
     }
   );
 };
-var Table = (0, import_react27.forwardRef)(function TableNext({
+var Table = (0, import_react26.forwardRef)(function TableNext({
   Row: Row2,
   allowDragDrop,
   availableColumns,
@@ -3555,8 +3533,8 @@ var Table = (0, import_react27.forwardRef)(function TableNext({
   style: styleProp,
   ...htmlAttributes
 }, forwardedRef) {
-  const containerRef = (0, import_react27.useRef)(null);
-  const [size, setSize] = (0, import_react27.useState)();
+  const containerRef = (0, import_react26.useRef)(null);
+  const [size, setSize] = (0, import_react26.useState)();
   const { rowHeight, rowRef } = useRowHeight({ rowHeight: rowHeightProp });
   if (config === void 0) {
     throw Error(
@@ -3566,11 +3544,12 @@ var Table = (0, import_react27.forwardRef)(function TableNext({
   if (dataSource === void 0) {
     throw Error("vuu Table requires dataSource prop");
   }
+  console.log({ rowHeight });
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     import_vuu_ui_controls5.MeasuredContainer,
     {
       ...htmlAttributes,
-      className: (0, import_clsx9.default)(classBase7, classNameProp),
+      className: (0, import_clsx9.default)(classBase8, classNameProp),
       id,
       onResize: setSize,
       ref: (0, import_core2.useForkRef)(containerRef, forwardedRef),
@@ -3613,16 +3592,16 @@ var Table = (0, import_react27.forwardRef)(function TableNext({
 });
 
 // src/cell-renderers/checkbox-cell/CheckboxCell.tsx
-var import_react28 = require("react");
+var import_react27 = require("react");
 var import_vuu_ui_controls6 = require("@vuu-ui/vuu-ui-controls");
 var import_core3 = require("@salt-ds/core");
 var import_vuu_utils25 = require("@vuu-ui/vuu-utils");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var CheckboxCell = (0, import_react28.memo)(
+var CheckboxCell = (0, import_react27.memo)(
   ({ column, columnMap, onCommit = import_vuu_ui_controls6.WarnCommit, row }) => {
     const dataIdx = columnMap[column.name];
     const isChecked = !!row[dataIdx];
-    const handleCommit = (0, import_react28.useCallback)(
+    const handleCommit = (0, import_react27.useCallback)(
       (value) => async (evt) => {
         const res = await onCommit(value);
         if (res === true) {
@@ -3647,7 +3626,7 @@ var import_core4 = require("@salt-ds/core");
 var import_vuu_ui_controls7 = require("@vuu-ui/vuu-ui-controls");
 var import_clsx10 = __toESM(require("clsx"));
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var classBase8 = "vuuTableInputCell";
+var classBase9 = "vuuTableInputCell";
 var WarnCommit2 = () => {
   console.warn(
     "onCommit handler has not been provided to InputCell cell renderer"
@@ -3668,14 +3647,14 @@ var InputCell = ({
     onCommit,
     clientSideEditValidationCheck
   });
-  const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: `${classBase8}-icon`, "data-icon": "error" }) : void 0;
-  const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: `${classBase8}-icon`, "data-icon": "error" }) : void 0;
+  const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: `${classBase9}-icon`, "data-icon": "error" }) : void 0;
+  const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: `${classBase9}-icon`, "data-icon": "error" }) : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     import_core4.Input,
     {
       ...editProps,
-      className: (0, import_clsx10.default)(classBase8, {
-        [`${classBase8}-error`]: warningMessage !== void 0
+      className: (0, import_clsx10.default)(classBase9, {
+        [`${classBase9}-error`]: warningMessage !== void 0
       }),
       endAdornment,
       startAdornment
@@ -3690,10 +3669,10 @@ var InputCell = ({
 var import_vuu_ui_controls8 = require("@vuu-ui/vuu-ui-controls");
 var import_vuu_utils27 = require("@vuu-ui/vuu-utils");
 var import_clsx11 = __toESM(require("clsx"));
-var import_react29 = require("react");
+var import_react28 = require("react");
 var import_vuu_ui_controls9 = require("@vuu-ui/vuu-ui-controls");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var classBase9 = "vuuTableToggleCell";
+var classBase10 = "vuuTableToggleCell";
 var getValueList = ({ name, type }) => {
   if ((0, import_vuu_utils27.isTypeDescriptor)(type) && (0, import_vuu_utils27.isValueListRenderer)(type.renderer)) {
     return type.renderer.values;
@@ -3703,7 +3682,7 @@ var getValueList = ({ name, type }) => {
     );
   }
 };
-var ToggleCell = (0, import_react29.memo)(
+var ToggleCell = (0, import_react28.memo)(
   function ToggleCell2({
     column,
     columnMap,
@@ -3713,7 +3692,7 @@ var ToggleCell = (0, import_react29.memo)(
     const values = getValueList(column);
     const dataIdx = columnMap[column.name];
     const value = row[dataIdx];
-    const handleCommit = (0, import_react29.useCallback)(
+    const handleCommit = (0, import_react28.useCallback)(
       (evt, value2) => {
         return onCommit(value2).then((response) => {
           if (response === true) {
@@ -3727,7 +3706,7 @@ var ToggleCell = (0, import_react29.memo)(
     return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       import_vuu_ui_controls9.CycleStateButton,
       {
-        className: (0, import_clsx11.default)(classBase9, `${classBase9}-${column.name}`),
+        className: (0, import_clsx11.default)(classBase10, `${classBase10}-${column.name}`),
         onCommit: handleCommit,
         value,
         values,
@@ -3745,11 +3724,11 @@ var ToggleCell = (0, import_react29.memo)(
 // src/useControlledTableNavigation.ts
 var import_vuu_ui_controls10 = require("@vuu-ui/vuu-ui-controls");
 var import_vuu_utils28 = require("@vuu-ui/vuu-utils");
-var import_react30 = require("react");
+var import_react29 = require("react");
 var useControlledTableNavigation = (initialValue, rowCount) => {
-  const tableRef = (0, import_react30.useRef)(null);
+  const tableRef = (0, import_react29.useRef)(null);
   const [highlightedIndexRef, setHighlightedIndex] = (0, import_vuu_ui_controls10.useStateRef)(initialValue);
-  const handleKeyDown = (0, import_react30.useCallback)(
+  const handleKeyDown = (0, import_react29.useCallback)(
     (e) => {
       var _a;
       if (e.key === "ArrowDown") {
@@ -3768,7 +3747,7 @@ var useControlledTableNavigation = (initialValue, rowCount) => {
     },
     [highlightedIndexRef, rowCount, setHighlightedIndex]
   );
-  const handleHighlight = (0, import_react30.useCallback)(
+  const handleHighlight = (0, import_react29.useCallback)(
     (idx) => {
       setHighlightedIndex(idx);
     },