@vuu-ui/vuu-table-extras 0.8.10-debug → 0.8.11-debug

package/esm/index.js

@@ -2800,6 +2800,233 @@ import { jsx as jsx11 } from "react/jsx-runtime";
 
 // ../vuu-table/src/table/context-menu/buildContextMenuDescriptors.ts
 import { isNumericColumn as isNumericColumn2 } from "@vuu-ui/vuu-utils";
+var buildContextMenuDescriptors = (dataSource) => (location, options) => {
+  const descriptors = [];
+  if (dataSource === void 0) {
+    return descriptors;
+  }
+  if (location === "header" || location === "column-menu") {
+    descriptors.push(
+      ...buildSortMenuItems(options, dataSource)
+    );
+    descriptors.push(
+      ...buildGroupMenuItems(options, dataSource)
+    );
+    descriptors.push(
+      ...buildAggregationMenuItems(options, dataSource)
+    );
+    descriptors.push(...buildColumnDisplayMenuItems(options));
+    descriptors.push({
+      action: "column-settings",
+      icon: "cog",
+      label: `Column Settings`,
+      options
+    });
+    descriptors.push({
+      action: "table-settings",
+      icon: "cog",
+      label: `DataGrid Settings`,
+      options
+    });
+  } else if (location === "filter") {
+    const { column, filter } = options;
+    const colIsOnlyFilter = (filter == null ? void 0 : filter.column) === (column == null ? void 0 : column.name);
+    descriptors.push({
+      label: "Edit filter",
+      action: "filter-edit",
+      options
+    });
+    descriptors.push({
+      label: "Remove filter",
+      action: "filter-remove-column",
+      options
+    });
+    if (column && !colIsOnlyFilter) {
+      descriptors.push({
+        label: `Remove all filters`,
+        action: "remove-filters",
+        options
+      });
+    }
+  }
+  return descriptors;
+};
+function buildSortMenuItems(options, { sort: { sortDefs } }) {
+  const { column } = options;
+  const menuItems = [];
+  if (column === void 0) {
+    return menuItems;
+  }
+  const hasSort = sortDefs.length > 0;
+  if (column.sorted === "A") {
+    menuItems.push({
+      label: "Reverse Sort (DSC)",
+      action: "sort-dsc",
+      options
+    });
+  } else if (column.sorted === "D") {
+    menuItems.push({
+      label: "Reverse Sort (ASC)",
+      action: "sort-asc",
+      options
+    });
+  } else if (typeof column.sorted === "number") {
+    if (column.sorted > 0) {
+      menuItems.push({
+        label: "Reverse Sort (DSC)",
+        action: "sort-add-dsc",
+        options
+      });
+    } else {
+      menuItems.push({
+        label: "Reverse Sort (ASC)",
+        action: "sort-add-asc",
+        options
+      });
+    }
+    if (hasSort && Math.abs(column.sorted) < sortDefs.length) {
+      menuItems.push({
+        label: "Remove from sort",
+        action: "sort-remove",
+        options
+      });
+    }
+    menuItems.push({
+      label: "New Sort",
+      children: [
+        { label: "Ascending", action: "sort-asc", options },
+        { label: "Descending", action: "sort-dsc", options }
+      ]
+    });
+  } else if (hasSort) {
+    menuItems.push({
+      label: "Add to sort",
+      children: [
+        { label: "Ascending", action: "sort-add-asc", options },
+        { label: "Descending", action: "sort-add-dsc", options }
+      ]
+    });
+    menuItems.push({
+      label: "New Sort",
+      children: [
+        { label: "Ascending", action: "sort-asc", options },
+        { label: "Descending", action: "sort-dsc", options }
+      ]
+    });
+  } else {
+    menuItems.push({
+      label: "Sort",
+      children: [
+        { label: "Ascending", action: "sort-asc", options },
+        { label: "Descending", action: "sort-dsc", options }
+      ]
+    });
+  }
+  return menuItems;
+}
+function buildAggregationMenuItems(options, dataSource) {
+  const { column } = options;
+  if (column === void 0 || dataSource.groupBy.length === 0) {
+    return [];
+  }
+  const { name: name2, label = name2 } = column;
+  return [
+    {
+      label: `Aggregate ${label}`,
+      children: [
+        { label: "Count", action: "agg-count", options },
+        { label: "Distinct", action: "agg-distinct", options }
+      ].concat(
+        isNumericColumn2(column) ? [
+          { label: "Sum", action: "agg-sum", options },
+          { label: "Avg", action: "agg-avg", options },
+          { label: "High", action: "agg-high", options },
+          { label: "Low", action: "agg-low", options }
+        ] : []
+      )
+    }
+  ];
+}
+var pinColumn = (options, pinLocation) => ({
+  label: `Pin ${pinLocation}`,
+  action: `column-pin-${pinLocation}`,
+  options
+});
+var pinLeft = (options) => pinColumn(options, "left");
+var pinFloating = (options) => pinColumn(options, "floating");
+var pinRight = (options) => pinColumn(options, "right");
+function buildColumnDisplayMenuItems(options) {
+  const { column } = options;
+  if (column === void 0) {
+    return [];
+  }
+  const { pin } = column;
+  const menuItems = [
+    {
+      label: `Hide column`,
+      action: "column-hide",
+      options
+    },
+    {
+      label: `Remove column`,
+      action: "column-remove",
+      options
+    }
+  ];
+  if (pin === void 0) {
+    menuItems.push({
+      label: `Pin column`,
+      children: [pinLeft(options), pinFloating(options), pinRight(options)]
+    });
+  } else if (pin === "left") {
+    menuItems.push(
+      { label: "Unpin column", action: "column-unpin", options },
+      {
+        label: `Pin column`,
+        children: [pinFloating(options), pinRight(options)]
+      }
+    );
+  } else if (pin === "right") {
+    menuItems.push(
+      { label: "Unpin column", action: "column-unpin", options },
+      {
+        label: `Pin column`,
+        children: [pinLeft(options), pinFloating(options)]
+      }
+    );
+  } else if (pin === "floating") {
+    menuItems.push(
+      { label: "Unpin column", action: "column-unpin", options },
+      {
+        label: `Pin column`,
+        children: [pinLeft(options), pinRight(options)]
+      }
+    );
+  }
+  return menuItems;
+}
+function buildGroupMenuItems(options, { groupBy }) {
+  const { column } = options;
+  const menuItems = [];
+  if (column === void 0) {
+    return menuItems;
+  }
+  const { name: name2, label = name2 } = column;
+  if (groupBy.length === 0) {
+    menuItems.push({
+      label: `Group by ${label}`,
+      action: "group",
+      options
+    });
+  } else {
+    menuItems.push({
+      label: `Add ${label} to group by`,
+      action: "group-add",
+      options
+    });
+  }
+  return menuItems;
+}
 
 // ../vuu-table/src/table/context-menu/useTableContextMenu.ts
 import { removeColumnFromFilter } from "@vuu-ui/vuu-utils";
@@ -2810,7 +3037,81 @@ import {
   setAggregations,
   setSortColumn
 } from "@vuu-ui/vuu-utils";
+var removeFilterColumn = (dataSourceFilter, column) => {
+  if (dataSourceFilter.filterStruct && column) {
+    const [filterStruct, filter] = removeColumnFromFilter(
+      column,
+      dataSourceFilter.filterStruct
+    );
+    return {
+      filter,
+      filterStruct
+    };
+  } else {
+    return dataSourceFilter;
+  }
+};
 var { Average, Count, Distinct, High, Low, Sum } = AggregationType;
+var useTableContextMenu = ({
+  dataSource,
+  onPersistentColumnOperation
+}) => {
+  const handleContextMenuAction = (action) => {
+    const gridOptions = action.options;
+    if (gridOptions.column && dataSource) {
+      const { column } = gridOptions;
+      switch (action.menuId) {
+        case "sort-asc":
+          return dataSource.sort = setSortColumn(dataSource.sort, column, "A"), true;
+        case "sort-dsc":
+          return dataSource.sort = setSortColumn(dataSource.sort, column, "D"), true;
+        case "sort-add-asc":
+          return dataSource.sort = addSortColumn(dataSource.sort, column, "A"), true;
+        case "sort-add-dsc":
+          return dataSource.sort = addSortColumn(dataSource.sort, column, "D"), true;
+        case "group":
+          return dataSource.groupBy = addGroupColumn(dataSource.groupBy, column), true;
+        case "group-add":
+          return dataSource.groupBy = addGroupColumn(dataSource.groupBy, column), true;
+        case "column-hide":
+          return onPersistentColumnOperation({ type: "hideColumns", columns: [column] }), true;
+        case "column-remove":
+          return dataSource.columns = dataSource.columns.filter((name2) => name2 !== column.name), true;
+        case "filter-remove-column":
+          return dataSource.filter = removeFilterColumn(dataSource.filter, column), true;
+        case "remove-filters":
+          return dataSource.filter = { filter: "" }, true;
+        case "agg-avg":
+          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Average), true;
+        case "agg-high":
+          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, High), true;
+        case "agg-low":
+          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Low), true;
+        case "agg-count":
+          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Count), true;
+        case "agg-distinct":
+          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Distinct), true;
+        case "agg-sum":
+          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Sum), true;
+        case "column-pin-floating":
+          return onPersistentColumnOperation({ type: "pinColumn", column, pin: "floating" }), true;
+        case "column-pin-left":
+          return onPersistentColumnOperation({ type: "pinColumn", column, pin: "left" }), true;
+        case "column-pin-right":
+          return onPersistentColumnOperation({ type: "pinColumn", column, pin: "right" }), true;
+        case "column-unpin":
+          return onPersistentColumnOperation({ type: "pinColumn", column, pin: void 0 }), true;
+        case "column-settings":
+          return onPersistentColumnOperation({ type: "columnSettings", column }), true;
+        case "table-settings":
+          return onPersistentColumnOperation({ type: "tableSettings" }), true;
+        default:
+      }
+    }
+    return false;
+  };
+  return handleContextMenuAction;
+};
 
 // ../vuu-table/src/table/Table.tsx
 import { ContextMenuProvider } from "@vuu-ui/vuu-popups";
@@ -3257,6 +3558,38 @@ import {
 } from "@vuu-ui/vuu-utils";
 import { useCallback as useCallback21, useRef as useRef18 } from "react";
 var { IDX: IDX2 } = metadataKeys8;
+var NO_SELECTION = [];
+var useSelection = ({
+  selectionModel,
+  onSelect,
+  onSelectionChange
+}) => {
+  selectionModel === "extended" || selectionModel === "checkbox";
+  const lastActiveRef = useRef18(-1);
+  const selectedRef = useRef18(NO_SELECTION);
+  const handleSelectionChange = useCallback21(
+    (row, rangeSelect, keepExistingSelection) => {
+      const { [IDX2]: idx } = row;
+      const { current: active } = lastActiveRef;
+      const { current: selected } = selectedRef;
+      const selectOperation = isRowSelected(row) ? deselectItem : selectItem;
+      const newSelected = selectOperation(
+        selectionModel,
+        selected,
+        idx,
+        rangeSelect,
+        keepExistingSelection,
+        active
+      );
+      selectedRef.current = newSelected;
+      lastActiveRef.current = idx;
+      onSelect == null ? void 0 : onSelect(row);
+      onSelectionChange == null ? void 0 : onSelectionChange(newSelected);
+    },
+    [onSelect, onSelectionChange, selectionModel]
+  );
+  return handleSelectionChange;
+};
 
 // ../vuu-table/src/table/useTableModel.ts
 import {
@@ -3291,6 +3624,126 @@ import {
   actualRowPositioning,
   virtualRowPositioning
 } from "@vuu-ui/vuu-utils";
+var MAX_RAW_ROWS = 15e5;
+var UNMEASURED_VIEWPORT = {
+  contentHeight: 0,
+  contentWidth: 0,
+  getRowAtPosition: () => -1,
+  getRowOffset: () => -1,
+  horizontalScrollbarHeight: 0,
+  maxScrollContainerScrollHorizontal: 0,
+  maxScrollContainerScrollVertical: 0,
+  pinnedWidthLeft: 0,
+  pinnedWidthRight: 0,
+  rowCount: 0,
+  setPctScrollTop: () => void 0,
+  totalHeaderHeight: 0,
+  verticalScrollbarWidth: 0,
+  viewportBodyHeight: 0
+};
+var measurePinnedColumns = (columns) => {
+  let pinnedWidthLeft = 0;
+  let pinnedWidthRight = 0;
+  let unpinnedWidth = 0;
+  for (const column of columns) {
+    const { hidden, pin, width } = column;
+    const visibleWidth = hidden ? 0 : width;
+    if (pin === "left") {
+      pinnedWidthLeft += visibleWidth;
+    } else if (pin === "right") {
+      pinnedWidthRight += visibleWidth;
+    } else {
+      unpinnedWidth += visibleWidth;
+    }
+  }
+  return {
+    pinnedWidthLeft: pinnedWidthLeft + 4,
+    pinnedWidthRight: pinnedWidthRight + 4,
+    unpinnedWidth
+  };
+};
+var useTableViewport = ({
+  columns,
+  headerHeight,
+  headings,
+  rowCount,
+  rowHeight,
+  size
+}) => {
+  const pctScrollTopRef = useRef20(0);
+  const appliedRowCount = Math.min(rowCount, MAX_RAW_ROWS);
+  const appliedContentHeight = appliedRowCount * rowHeight;
+  const virtualContentHeight = rowCount * rowHeight;
+  const virtualisedExtent = virtualContentHeight - appliedContentHeight;
+  const { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth } = useMemo8(
+    () => measurePinnedColumns(columns),
+    [columns]
+  );
+  const [actualRowOffset, actualRowAtPosition] = useMemo8(
+    () => actualRowPositioning(rowHeight),
+    [rowHeight]
+  );
+  const [getRowOffset, getRowAtPosition] = useMemo8(() => {
+    if (virtualisedExtent) {
+      return virtualRowPositioning(
+        rowHeight,
+        virtualisedExtent,
+        pctScrollTopRef
+      );
+    } else {
+      return [actualRowOffset, actualRowAtPosition];
+    }
+  }, [actualRowAtPosition, actualRowOffset, virtualisedExtent, rowHeight]);
+  const setPctScrollTop = useCallback23((scrollPct) => {
+    pctScrollTopRef.current = scrollPct;
+  }, []);
+  return useMemo8(() => {
+    var _a;
+    if (size) {
+      const headingsDepth = headings.length;
+      const scrollbarSize = 15;
+      const contentWidth = pinnedWidthLeft + unpinnedWidth + pinnedWidthRight;
+      const horizontalScrollbarHeight = contentWidth > size.width ? scrollbarSize : 0;
+      const totalHeaderHeight = headerHeight * (1 + headingsDepth);
+      const maxScrollContainerScrollVertical = appliedContentHeight - (((_a = size == null ? void 0 : size.height) != null ? _a : 0) - horizontalScrollbarHeight) + totalHeaderHeight;
+      const maxScrollContainerScrollHorizontal = contentWidth - size.width + pinnedWidthLeft;
+      const visibleRows = (size.height - headerHeight) / rowHeight;
+      const count = Number.isInteger(visibleRows) ? visibleRows + 1 : Math.ceil(visibleRows);
+      const viewportBodyHeight = size.height - totalHeaderHeight;
+      const verticalScrollbarWidth = appliedContentHeight > viewportBodyHeight ? scrollbarSize : 0;
+      return {
+        contentHeight: appliedContentHeight,
+        getRowAtPosition,
+        getRowOffset,
+        horizontalScrollbarHeight,
+        maxScrollContainerScrollHorizontal,
+        maxScrollContainerScrollVertical,
+        pinnedWidthLeft,
+        pinnedWidthRight,
+        rowCount: count,
+        contentWidth,
+        setPctScrollTop,
+        totalHeaderHeight,
+        verticalScrollbarWidth,
+        viewportBodyHeight
+      };
+    } else {
+      return UNMEASURED_VIEWPORT;
+    }
+  }, [
+    size,
+    headings.length,
+    pinnedWidthLeft,
+    unpinnedWidth,
+    pinnedWidthRight,
+    appliedContentHeight,
+    headerHeight,
+    rowHeight,
+    getRowAtPosition,
+    getRowOffset,
+    setPctScrollTop
+  ]);
+};
 
 // ../vuu-table/src/table/useVirtualViewport.ts
 import {
@@ -3354,6 +3807,7 @@ var JsonCell = ({ column, row }) => {
     return null;
   }
 };
+console.log("register JsonCell");
 registerComponent6("json", JsonCell, "cell-renderer", {
   description: "JSON formatter",
   label: "JSON formatter",
@@ -3367,44 +3821,199 @@ import { useRef as useRef25 } from "react";
 // ../vuu-table/src/table-next/column-resizing/ColumnResizer.tsx
 import { useCallback as useCallback26, useRef as useRef23 } from "react";
 import { jsx as jsx22 } from "react/jsx-runtime";
+var NOOP = () => void 0;
+var baseClass = "vuuColumnResizerNext";
+var ColumnResizer2 = ({
+  onDrag,
+  onDragEnd = NOOP,
+  onDragStart = NOOP
+}) => {
+  const position = useRef23(0);
+  const onMouseMove = useCallback26(
+    (e) => {
+      if (e.stopPropagation) {
+        e.stopPropagation();
+      }
+      if (e.preventDefault) {
+        e.preventDefault();
+      }
+      const x = Math.round(e.clientX);
+      const moveBy = x - position.current;
+      position.current = x;
+      if (moveBy !== 0) {
+        onDrag(e, moveBy);
+      }
+    },
+    [onDrag]
+  );
+  const onMouseUp = useCallback26(
+    (e) => {
+      window.removeEventListener("mouseup", onMouseUp);
+      window.removeEventListener("mousemove", onMouseMove);
+      onDragEnd(e);
+    },
+    [onDragEnd, onMouseMove]
+  );
+  const handleMouseDown = useCallback26(
+    (e) => {
+      onDragStart(e);
+      position.current = Math.round(e.clientX);
+      window.addEventListener("mouseup", onMouseUp);
+      window.addEventListener("mousemove", onMouseMove);
+      if (e.stopPropagation) {
+        e.stopPropagation();
+      }
+      if (e.preventDefault) {
+        e.preventDefault();
+      }
+    },
+    [onDragStart, onMouseMove, onMouseUp]
+  );
+  return /* @__PURE__ */ jsx22("div", { className: baseClass, onMouseDown: handleMouseDown });
+};
 
 // ../vuu-table/src/table-next/column-resizing/useTableColumnResize.tsx
 import { useCallback as useCallback27, useRef as useRef24, useState as useState10 } from "react";
+var useTableColumnResize2 = ({
+  column,
+  onResize,
+  rootRef
+}) => {
+  const widthRef = useRef24(0);
+  const [isResizing, setResizing] = useState10(false);
+  const { name: name2 } = column;
+  const handleResizeStart = useCallback27(() => {
+    console.log("onResizeStart");
+    if (onResize && rootRef.current) {
+      console.log("handleResizeStart");
+      const { width } = rootRef.current.getBoundingClientRect();
+      widthRef.current = Math.round(width);
+      setResizing(true);
+      onResize == null ? void 0 : onResize("begin", name2);
+    }
+  }, [name2, onResize, rootRef]);
+  const handleResize = useCallback27(
+    (_evt, moveBy) => {
+      if (rootRef.current) {
+        if (onResize) {
+          const { width } = rootRef.current.getBoundingClientRect();
+          const newWidth = Math.round(width) + moveBy;
+          if (newWidth !== widthRef.current && newWidth > 0) {
+            onResize("resize", name2, newWidth);
+            widthRef.current = newWidth;
+          }
+        }
+      }
+    },
+    [name2, onResize, rootRef]
+  );
+  const handleResizeEnd = useCallback27(() => {
+    if (onResize) {
+      onResize("end", name2, widthRef.current);
+      setTimeout(() => {
+        setResizing(false);
+      }, 80);
+    }
+  }, [name2, onResize]);
+  return {
+    isResizing,
+    onDrag: handleResize,
+    onDragStart: handleResizeStart,
+    onDragEnd: handleResizeEnd
+  };
+};
 
 // ../vuu-table/src/table-next/useCell.ts
 import { getColumnStyle as getColumnStyle4 } from "@vuu-ui/vuu-utils";
 import cx15 from "classnames";
 import { useMemo as useMemo11 } from "react";
-var useCell = (column, classBase19, isHeader) => (
+var useCell = (column, classBase23, isHeader) => (
   // TODO measure perf without the memo, might not be worth the cost
   useMemo11(() => {
-    const className = cx15(classBase19, {
+    const className = cx15(classBase23, {
       vuuPinFloating: column.pin === "floating",
       vuuPinLeft: column.pin === "left",
       vuuPinRight: column.pin === "right",
       vuuEndPin: isHeader && column.endPin,
       // [`${classBase}-resizing`]: column.resizing,
-      [`${classBase19}-editable`]: column.editable,
-      [`${classBase19}-right`]: column.align === "right"
+      [`${classBase23}-editable`]: column.editable,
+      [`${classBase23}-right`]: column.align === "right"
     });
     const style = getColumnStyle4(column);
     return {
       className,
       style
     };
-  }, [column, classBase19, isHeader])
+  }, [column, classBase23, isHeader])
 );
 
 // ../vuu-table/src/table-next/column-header-pill/ColumnHeaderPill.tsx
 import cx16 from "classnames";
 import { useCallback as useCallback28 } from "react";
 import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+var classBase13 = "vuuColumnHeaderPill";
+var ColumnHeaderPill = ({
+  children,
+  className,
+  column,
+  onRemove,
+  removable,
+  ...htmlAttributes
+}) => {
+  if (removable && typeof onRemove !== "function") {
+    throw Error(
+      "ColumnHeaderPill onRemove prop must be provided if Pill is removable"
+    );
+  }
+  const handleClickRemove = useCallback28(
+    (evt) => {
+      evt.preventDefault();
+      evt.stopPropagation();
+      onRemove == null ? void 0 : onRemove(column);
+    },
+    [column, onRemove]
+  );
+  return /* @__PURE__ */ jsxs18("div", { ...htmlAttributes, className: cx16(classBase13, className), children: [
+    children,
+    removable ? /* @__PURE__ */ jsx23(
+      "span",
+      {
+        className: `${classBase13}-removeButton`,
+        role: "button",
+        "data-icon": "cross",
+        onClick: handleClickRemove
+      }
+    ) : null
+  ] });
+};
 
 // ../vuu-table/src/table-next/column-header-pill/GroupColumnPill.tsx
 import { jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+var GroupColumnPill = ({
+  column,
+  ...columnHeaderProps
+}) => {
+  const { name: name2, sorted } = column;
+  const icon = typeof sorted === "number" ? sorted < 0 ? "arrow-down" : "arrow-up" : sorted === "A" ? "arrow-up" : sorted === "D" ? "arrow-down" : void 0;
+  return /* @__PURE__ */ jsxs19(ColumnHeaderPill, { ...columnHeaderProps, column, children: [
+    /* @__PURE__ */ jsx24("span", { className: "vuuGroupColumnPill-label", children: name2 }),
+    icon !== void 0 ? /* @__PURE__ */ jsx24("span", { "data-icon": icon }) : null,
+    typeof sorted === "number" ? /* @__PURE__ */ jsx24("span", { className: "vuuSortPosition", children: Math.abs(sorted) }) : null
+  ] });
+};
 
 // ../vuu-table/src/table-next/column-header-pill/SortIndicator.tsx
 import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+var SortIndicator2 = ({ column }) => {
+  if (!column.sorted) {
+    return null;
+  }
+  const icon = typeof column.sorted === "number" ? column.sorted < 0 ? "arrow-down" : "arrow-up" : column.sorted === "A" ? "arrow-up" : "arrow-down";
+  return /* @__PURE__ */ jsxs20(ColumnHeaderPill, { column, children: [
+    /* @__PURE__ */ jsx25("span", { "data-icon": icon }),
+    typeof column.sorted === "number" ? /* @__PURE__ */ jsx25("span", { className: "vuuSortPosition", children: Math.abs(column.sorted) }) : null
+  ] });
+};
 
 // ../vuu-table/src/table-next/header-cell/GroupHeaderCell.tsx
 import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
@@ -3419,6 +4028,92 @@ import {
 } from "@vuu-ui/vuu-layout";
 import { jsx as jsx27, jsxs as jsxs22 } from "react/jsx-runtime";
 import { createElement as createElement2 } from "react";
+var classBase14 = "vuuTableNextGroupHeaderCell";
+var switchIfChanged = (columns, newColumns) => {
+  if (columns === newColumns) {
+    return columns;
+  } else {
+    return newColumns;
+  }
+};
+var GroupHeaderCellNext = ({
+  column: groupColumn,
+  className: classNameProp,
+  onRemoveColumn,
+  onResize,
+  ...htmlAttributes
+}) => {
+  const rootRef = useRef26(null);
+  const { isResizing, ...resizeProps } = useTableColumnResize2({
+    column: groupColumn,
+    onResize,
+    rootRef
+  });
+  const [columns, setColumns] = useState11(groupColumn.columns);
+  const { className, style } = useCell(groupColumn, classBase14, true);
+  const columnPillProps = columns.length > 1 ? {
+    removable: true,
+    onRemove: onRemoveColumn
+  } : void 0;
+  const handleMoveItem = useCallback29((fromIndex, toIndex) => {
+    setColumns((cols) => {
+      const newCols = cols.slice();
+      const [tab] = newCols.splice(fromIndex, 1);
+      if (toIndex === -1) {
+        return newCols.concat(tab);
+      } else {
+        newCols.splice(toIndex, 0, tab);
+        return newCols;
+      }
+    });
+  }, []);
+  useLayoutEffectSkipFirst(() => {
+    setColumns((cols) => switchIfChanged(cols, groupColumn.columns));
+  }, [groupColumn.columns]);
+  return /* @__PURE__ */ jsxs22(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx18(className, "vuuTableNextHeaderCell", classNameProp, {
+        [`${classBase14}-pending`]: groupColumn.groupConfirmed === false
+      }),
+      ref: rootRef,
+      role: "columnheader",
+      style,
+      children: [
+        /* @__PURE__ */ jsx27(
+          OverflowContainer,
+          {
+            allowDragDrop: true,
+            className: `${classBase14}-inner`,
+            height: 24,
+            onMoveItem: handleMoveItem,
+            overflowPosition: "start",
+            children: columns.map((column) => {
+              return /* @__PURE__ */ createElement2(
+                GroupColumnPill,
+                {
+                  ...columnPillProps,
+                  column,
+                  key: column.key
+                }
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx27(
+          ColumnHeaderPill,
+          {
+            column: groupColumn,
+            removable: true,
+            onRemove: onRemoveColumn
+          }
+        ),
+        groupColumn.resizeable !== false ? /* @__PURE__ */ jsx27(ColumnResizer2, { ...resizeProps }) : null
+      ]
+    }
+  );
+};
 
 // ../vuu-table/src/table-next/header-cell/HeaderCell.tsx
 import { useCallback as useCallback31, useRef as useRef28 } from "react";
@@ -3432,16 +4127,104 @@ import {
   useState as useState12
 } from "react";
 import { jsx as jsx28 } 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 = useRef27(null);
+  const [menuOpen, setMenuOpen] = useState12(false);
+  const [showContextMenu] = useContextMenu3();
+  const handleMenuClose = useCallback30(() => {
+    setMenuOpen(false);
+  }, []);
+  const showColumnMenu = useCallback30(
+    (e) => {
+      setMenuOpen(true);
+      showContextMenu(e, "column-menu", {
+        column,
+        ContextMenuProps: {
+          onClose: handleMenuClose,
+          position: getPosition(rootRef.current)
+        }
+      });
+    },
+    [column, handleMenuClose, showContextMenu]
+  );
+  return /* @__PURE__ */ jsx28(
+    "span",
+    {
+      ...props,
+      className: cx19("vuuTable-columnMenu", className, {
+        "vuuTable-columnMenu-open": menuOpen
+      }),
+      "data-icon": "more-vert",
+      onClick: showColumnMenu,
+      ref: rootRef
+    }
+  );
+};
 
 // ../vuu-table/src/table-next/header-cell/HeaderCell.tsx
 import cx20 from "classnames";
 import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
+var classBase15 = "vuuTableNextHeaderCell";
+var HeaderCell = ({
+  className: classNameProp,
+  column,
+  onClick,
+  onResize,
+  ...htmlAttributes
+}) => {
+  var _a;
+  const rootRef = useRef28(null);
+  const { isResizing, ...resizeProps } = useTableColumnResize2({
+    column,
+    onResize,
+    rootRef
+  });
+  const handleClick = useCallback31(
+    (evt) => {
+      console.log(`click isResizing ${isResizing}`);
+      !isResizing && (onClick == null ? void 0 : onClick(evt));
+    },
+    [isResizing, onClick]
+  );
+  const { className, style } = useCell(column, classBase15, true);
+  const columnMenu = /* @__PURE__ */ jsx29(ColumnMenu, { column });
+  const columnLabel = /* @__PURE__ */ jsx29("div", { className: `${classBase15}-label`, children: (_a = column.label) != null ? _a : column.name });
+  const sortIndicator = /* @__PURE__ */ jsx29(SortIndicator2, { column });
+  const headerItems = column.align === "right" ? [sortIndicator, columnLabel, columnMenu] : [columnMenu, columnLabel, sortIndicator];
+  return /* @__PURE__ */ jsxs23(
+    "div",
+    {
+      ...htmlAttributes,
+      className: cx20(className, classNameProp, {
+        [`${classBase15}-resizing`]: isResizing
+      }),
+      onClick: handleClick,
+      ref: rootRef,
+      role: "columnheader",
+      style,
+      children: [
+        ...headerItems,
+        column.resizeable !== false ? /* @__PURE__ */ jsx29(ColumnResizer2, { ...resizeProps }) : null
+      ]
+    }
+  );
+};
 
 // ../vuu-table/src/table-next/TableNext.tsx
 import { ContextMenuProvider as ContextMenuProvider2 } from "@vuu-ui/vuu-popups";
 import { isGroupColumn as isGroupColumn7, metadataKeys as metadataKeys18, notHidden as notHidden4 } from "@vuu-ui/vuu-utils";
 import cx23 from "classnames";
-import { useRef as useRef34 } from "react";
+import { forwardRef, useRef as useRef34 } from "react";
 
 // ../vuu-table/src/table-next/Row.tsx
 import {
@@ -3460,14 +4243,15 @@ import { metadataKeys as metadataKeys12 } from "@vuu-ui/vuu-utils";
 import { useCallback as useCallback32 } from "react";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var { IDX: IDX3 } = metadataKeys12;
-var classBase13 = "vuuTableNextCell";
+var classBase16 = "vuuTableNextCell";
 var TableCell2 = ({
   column,
   columnMap,
+  onClick,
   onDataEdited,
   row
 }) => {
-  const { className, style } = useCell(column, classBase13);
+  const { className, style } = useCell(column, classBase16);
   const { CellRenderer, name: name2, valueFormatter } = column;
   const dataIdx = columnMap[name2];
   const handleDataItemEdited = useCallback32(
@@ -3477,15 +4261,30 @@ var TableCell2 = ({
     },
     [name2, onDataEdited, row]
   );
-  return /* @__PURE__ */ jsx30("div", { className, role: "cell", style, children: CellRenderer ? /* @__PURE__ */ jsx30(
-    CellRenderer,
+  const handleClick = useCallback32(
+    (evt) => {
+      onClick == null ? void 0 : onClick(evt, column);
+    },
+    [column, onClick]
+  );
+  return /* @__PURE__ */ jsx30(
+    "div",
     {
-      column,
-      columnMap,
-      onCommit: handleDataItemEdited,
-      row
+      className,
+      onClick: onClick ? handleClick : void 0,
+      role: "cell",
+      style,
+      children: CellRenderer ? /* @__PURE__ */ jsx30(
+        CellRenderer,
+        {
+          column,
+          columnMap,
+          onCommit: handleDataItemEdited,
+          row
+        }
+      ) : valueFormatter(row[dataIdx])
     }
-  ) : valueFormatter(row[dataIdx]) });
+  );
 };
 
 // ../vuu-table/src/table-next/table-cell/TableGroupCell.tsx
@@ -3494,11 +4293,11 @@ import { useCallback as useCallback33 } from "react";
 import cx21 from "classnames";
 import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
 var { IS_LEAF: IS_LEAF3 } = metadataKeys13;
-var classBase14 = "vuuTableNextGroupCell";
+var classBase17 = "vuuTableNextGroupCell";
 var TableGroupCell2 = ({ column, onClick, row }) => {
   const { columns } = column;
   const [value, offset] = getGroupValueAndOffset2(columns, row);
-  const { className, style } = useCell(column, classBase14);
+  const { className, style } = useCell(column, classBase17);
   const handleClick = useCallback33(
     (evt) => {
       onClick == null ? void 0 : onClick(evt, column);
@@ -3506,7 +4305,7 @@ var TableGroupCell2 = ({ column, onClick, row }) => {
     [column, onClick]
   );
   const isLeaf = row[IS_LEAF3];
-  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ jsx31("span", { className: `${classBase14}-spacer` }, i));
+  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ jsx31("span", { className: `${classBase17}-spacer` }, i));
   return /* @__PURE__ */ jsxs24(
     "div",
     {
@@ -3516,7 +4315,7 @@ var TableGroupCell2 = ({ column, onClick, row }) => {
       onClick: isLeaf ? void 0 : handleClick,
       children: [
         spacers,
-        isLeaf ? null : /* @__PURE__ */ jsx31("span", { className: `${classBase14}-toggle`, "data-icon": "triangle-right" }),
+        isLeaf ? null : /* @__PURE__ */ jsx31("span", { className: `${classBase17}-toggle`, "data-icon": "triangle-right" }),
         /* @__PURE__ */ jsx31("span", { children: value })
       ]
     }
@@ -3527,7 +4326,7 @@ var TableGroupCell2 = ({ column, onClick, row }) => {
 import { jsx as jsx32 } from "react/jsx-runtime";
 import { createElement as createElement3 } from "react";
 var { IDX: IDX4, IS_EXPANDED: IS_EXPANDED4, SELECTED: SELECTED3 } = metadataKeys14;
-var classBase15 = "vuuTableNextRow";
+var classBase18 = "vuuTableNextRow";
 var Row2 = memo3(
   ({
     className: classNameProp,
@@ -3555,12 +4354,12 @@ var Row2 = memo3(
       [onClick, row]
     );
     const { True: True2, First: First2, Last: Last2 } = RowSelected2;
-    const className = cx22(classBase15, classNameProp, {
-      [`${classBase15}-even`]: zebraStripes && rowIndex % 2 === 0,
-      [`${classBase15}-expanded`]: isExpanded,
-      [`${classBase15}-selected`]: selectionStatus & True2,
-      [`${classBase15}-selectedStart`]: selectionStatus & First2,
-      [`${classBase15}-selectedEnd`]: selectionStatus & Last2
+    const className = cx22(classBase18, classNameProp, {
+      [`${classBase18}-even`]: zebraStripes && rowIndex % 2 === 0,
+      [`${classBase18}-expanded`]: isExpanded,
+      [`${classBase18}-selected`]: selectionStatus & True2,
+      [`${classBase18}-selectedStart`]: selectionStatus & First2,
+      [`${classBase18}-selectedEnd`]: selectionStatus & Last2
     });
     const style = { transform: `translate3d(0px, ${offset}px, 0px)` };
     const handleGroupCellClick = useCallback34(
@@ -3583,7 +4382,7 @@ var Row2 = memo3(
         onClick: handleRowClick,
         style
       },
-      /* @__PURE__ */ jsx32("span", { className: `${classBase15}-selectionDecorator vuuStickyLeft` }),
+      /* @__PURE__ */ jsx32("span", { className: `${classBase18}-selectionDecorator vuuStickyLeft` }),
       columns.filter(notHidden3).map((column) => {
         const isGroup = isGroupColumn4(column);
         const isJsonCell = isJsonColumn2(column);
@@ -3600,7 +4399,7 @@ var Row2 = memo3(
           column.key
         );
       }),
-      /* @__PURE__ */ jsx32("span", { className: `${classBase15}-selectionDecorator vuuStickyRight` })
+      /* @__PURE__ */ jsx32("span", { className: `${classBase18}-selectionDecorator vuuStickyRight` })
     );
   }
 );
@@ -3618,23 +4417,277 @@ import {
   useRef as useRef29
 } from "react";
 
-// ../vuu-table/src/table-next/useTableNext.ts
-import {
-  applySort as applySort2,
-  buildColumnMap as buildColumnMap4,
-  isGroupColumn as isGroupColumn6,
-  isJsonGroup as isJsonGroup4,
-  isValidNumber as isValidNumber5,
-  metadataKeys as metadataKeys17,
-  updateColumn as updateColumn2,
-  visibleColumnAtIndex as visibleColumnAtIndex2
-} from "@vuu-ui/vuu-utils";
-import {
-  useCallback as useCallback41,
-  useEffect as useEffect13,
-  useMemo as useMemo15,
-  useState as useState14
-} from "react";
+// ../vuu-table/src/table-next/table-dom-utils.ts
+var headerCellQuery = (colIdx) => `.vuuTableNext-col-headers .vuuTableNextHeaderCell:nth-child(${colIdx})`;
+var dataCellQuery = (rowIdx, colIdx) => `.vuuTableNext-body > [aria-rowindex='${rowIdx}'] > [role='cell']:nth-child(${colIdx + 1})`;
+var getTableCell = (containerRef, [rowIdx, colIdx]) => {
+  var _a;
+  const cssQuery = rowIdx === -1 ? headerCellQuery(colIdx) : dataCellQuery(rowIdx, colIdx);
+  const cell = (_a = containerRef.current) == null ? void 0 : _a.querySelector(
+    cssQuery
+  );
+  if (cellIsEditable(cell)) {
+    const focusableContent = cell.querySelector("button");
+    return focusableContent || cell;
+  } else {
+    return cell;
+  }
+};
+var cellIsEditable = (cell) => cell.classList.contains("vuuTableNextCell-editable");
+var cellIsTextInput = (cell) => cell.querySelector(".vuuTableInputCell") !== null;
+
+// ../vuu-table/src/table-next/useKeyboardNavigation.ts
+var navigationKeys2 = /* @__PURE__ */ new Set([
+  "Home",
+  "End",
+  "PageUp",
+  "PageDown",
+  "ArrowDown",
+  "ArrowLeft",
+  "ArrowRight",
+  "ArrowUp"
+]);
+var isNavigationKey2 = (key) => {
+  return navigationKeys2.has(key);
+};
+var PageKeys = ["Home", "End", "PageUp", "PageDown"];
+var isPagingKey2 = (key) => PageKeys.includes(key);
+var NULL_CELL_POS = [-1, -1];
+var NO_SCROLL_NECESSARY = [void 0, void 0];
+var howFarIsCellOutsideViewport = (cellEl) => {
+  var _a, _b;
+  const scrollbarContainer = (_a = cellEl.closest(".vuuTableNext")) == null ? void 0 : _a.querySelector(".vuuTableNext-scrollbarContainer");
+  if (scrollbarContainer) {
+    const viewport = scrollbarContainer == null ? void 0 : scrollbarContainer.getBoundingClientRect();
+    const cell = (_b = cellEl.closest(".vuuTableNextCell")) == null ? void 0 : _b.getBoundingClientRect();
+    if (cell) {
+      if (cell.bottom > viewport.bottom) {
+        return ["down", cell.bottom - viewport.bottom];
+      } else if (cell.top < viewport.top) {
+        return ["up", cell.top - viewport.top];
+      } else if (cell.right < viewport.right) {
+        return ["right", cell.right - viewport.right];
+      } else if (cell.left < viewport.left) {
+        return ["left", cell.left - viewport.left];
+      } else {
+        return NO_SCROLL_NECESSARY;
+      }
+    } else {
+      throw Error("Whats going on, cell not found");
+    }
+  } else {
+    throw Error("Whats going on, scrollbar container not found");
+  }
+};
+function nextCellPos(key, [rowIdx, colIdx], columnCount, rowCount) {
+  if (key === "ArrowUp") {
+    if (rowIdx > -1) {
+      return [rowIdx - 1, colIdx];
+    } else {
+      return [rowIdx, colIdx];
+    }
+  } else if (key === "ArrowDown") {
+    if (rowIdx === -1) {
+      return [0, colIdx];
+    } else if (rowIdx === rowCount - 1) {
+      return [rowIdx, colIdx];
+    } else {
+      return [rowIdx + 1, colIdx];
+    }
+  } else if (key === "ArrowRight") {
+    if (colIdx < columnCount - 1) {
+      return [rowIdx, colIdx + 1];
+    } else {
+      return [rowIdx, colIdx];
+    }
+  } else if (key === "ArrowLeft") {
+    if (colIdx > 1) {
+      return [rowIdx, colIdx - 1];
+    } else {
+      return [rowIdx, colIdx];
+    }
+  }
+  return [rowIdx, colIdx];
+}
+var useKeyboardNavigation2 = ({
+  columnCount = 0,
+  containerRef,
+  disableHighlightOnFocus,
+  requestScroll,
+  rowCount = 0,
+  viewportRowCount
+}) => {
+  var _a;
+  const focusedCellPos = useRef29([-1, -1]);
+  const focusableCell = useRef29();
+  const activeCellPos = useRef29([-1, 0]);
+  const getFocusedCell = (element) => element == null ? void 0 : element.closest(
+    "[role='columnHeader'],[role='cell']"
+  );
+  const getTableCellPos = (tableCell) => {
+    var _a2, _b;
+    if (tableCell.role === "columnHeader") {
+      const colIdx = parseInt((_a2 = tableCell.dataset.idx) != null ? _a2 : "-1", 10);
+      return [-1, colIdx];
+    } else {
+      const focusedRow = tableCell.closest("[role='row']");
+      if (focusedRow) {
+        const rowIdx = parseInt((_b = focusedRow.ariaRowIndex) != null ? _b : "-1", 10);
+        const colIdx = Array.from(focusedRow.childNodes).indexOf(tableCell);
+        return [rowIdx, colIdx];
+      }
+    }
+    return NULL_CELL_POS;
+  };
+  const focusCell = useCallback35(
+    (cellPos) => {
+      var _a2;
+      if (containerRef.current) {
+        const activeCell = getTableCell(containerRef, cellPos);
+        if (activeCell) {
+          if (activeCell !== focusableCell.current) {
+            (_a2 = focusableCell.current) == null ? void 0 : _a2.removeAttribute("tabindex");
+            focusableCell.current = activeCell;
+            activeCell.setAttribute("tabindex", "0");
+          }
+          const [direction, distance] = howFarIsCellOutsideViewport(activeCell);
+          if (direction && distance) {
+            requestScroll == null ? void 0 : requestScroll({ type: "scroll-distance", distance, direction });
+          }
+          activeCell.focus();
+        }
+      }
+    },
+    // TODO we recreate this function whenever viewportRange changes, which will
+    // be often whilst scrolling - store range in a a ref ?
+    [containerRef, requestScroll]
+  );
+  const setActiveCell = useCallback35(
+    (rowIdx, colIdx, fromKeyboard = false) => {
+      const pos = [rowIdx, colIdx];
+      activeCellPos.current = pos;
+      focusCell(pos);
+      if (fromKeyboard) {
+        focusedCellPos.current = pos;
+      }
+    },
+    [focusCell]
+  );
+  const nextPageItemIdx = useCallback35(
+    (key, [rowIdx, colIdx]) => new Promise((resolve) => {
+      let newRowIdx = rowIdx;
+      switch (key) {
+        case "PageDown":
+          newRowIdx = Math.min(rowCount - 1, rowIdx + viewportRowCount);
+          requestScroll == null ? void 0 : requestScroll({ type: "scroll-page", direction: "down" });
+          break;
+        case "PageUp":
+          newRowIdx = Math.max(0, rowIdx - viewportRowCount);
+          requestScroll == null ? void 0 : requestScroll({ type: "scroll-page", direction: "up" });
+          break;
+        case "Home":
+          newRowIdx = 0;
+          requestScroll == null ? void 0 : requestScroll({ type: "scroll-end", direction: "home" });
+          break;
+        case "End":
+          newRowIdx = rowCount - 1;
+          requestScroll == null ? void 0 : requestScroll({ type: "scroll-end", direction: "end" });
+          break;
+      }
+      setTimeout(() => {
+        resolve([newRowIdx, colIdx]);
+      }, 90);
+    }),
+    [requestScroll, rowCount, viewportRowCount]
+  );
+  const handleFocus = useCallback35(() => {
+    var _a2;
+    if (disableHighlightOnFocus !== true) {
+      if ((_a2 = containerRef.current) == null ? void 0 : _a2.contains(document.activeElement)) {
+        const focusedCell = getFocusedCell(document.activeElement);
+        if (focusedCell) {
+          console.log({ focusedCell });
+          focusedCellPos.current = getTableCellPos(focusedCell);
+        }
+      }
+    }
+  }, [disableHighlightOnFocus, containerRef]);
+  const navigateChildItems = useCallback35(
+    async (key) => {
+      console.log(`navigate child items ${key}`);
+      const [nextRowIdx, nextColIdx] = isPagingKey2(key) ? await nextPageItemIdx(key, activeCellPos.current) : nextCellPos(key, activeCellPos.current, columnCount, rowCount);
+      console.log(`nextRowIdx ${nextRowIdx} nextColIdx ${nextColIdx}`);
+      const [rowIdx, colIdx] = activeCellPos.current;
+      if (nextRowIdx !== rowIdx || nextColIdx !== colIdx) {
+        setActiveCell(nextRowIdx, nextColIdx, true);
+      }
+    },
+    [columnCount, nextPageItemIdx, rowCount, setActiveCell]
+  );
+  const handleKeyDown = useCallback35(
+    (e) => {
+      if (rowCount > 0 && isNavigationKey2(e.key)) {
+        e.preventDefault();
+        e.stopPropagation();
+        void navigateChildItems(e.key);
+      }
+    },
+    [rowCount, navigateChildItems]
+  );
+  const handleClick = useCallback35(
+    // Might not be a cell e.g the Settings button
+    (evt) => {
+      const target = evt.target;
+      const focusedCell = getFocusedCell(target);
+      if (focusedCell) {
+        const [rowIdx, colIdx] = getTableCellPos(focusedCell);
+        setActiveCell(rowIdx, colIdx);
+      }
+    },
+    [setActiveCell]
+  );
+  const navigate = useCallback35(() => {
+    navigateChildItems("ArrowDown");
+  }, [navigateChildItems]);
+  const containerProps = useMemo12(() => {
+    return {
+      navigate,
+      onClick: handleClick,
+      onFocus: handleFocus,
+      onKeyDown: handleKeyDown
+    };
+  }, [handleClick, handleFocus, handleKeyDown, navigate]);
+  const fullyRendered = ((_a = containerRef.current) == null ? void 0 : _a.firstChild) != null;
+  useEffect10(() => {
+    if (fullyRendered && focusableCell.current === void 0) {
+      const { current: container } = containerRef;
+      const cell = (container == null ? void 0 : container.querySelector(headerCellQuery(0))) || (container == null ? void 0 : container.querySelector(dataCellQuery(0, 0)));
+      if (cell) {
+        cell.setAttribute("tabindex", "0");
+        focusableCell.current = cell;
+      }
+    }
+  }, [containerRef, fullyRendered]);
+  return containerProps;
+};
+
+// ../vuu-table/src/table-next/useTableNext.ts
+import {
+  applySort as applySort2,
+  buildColumnMap as buildColumnMap4,
+  isGroupColumn as isGroupColumn6,
+  isJsonGroup as isJsonGroup4,
+  isValidNumber as isValidNumber5,
+  metadataKeys as metadataKeys17,
+  updateColumn as updateColumn2,
+  visibleColumnAtIndex as visibleColumnAtIndex2
+} from "@vuu-ui/vuu-utils";
+import {
+  useCallback as useCallback41,
+  useEffect as useEffect13,
+  useMemo as useMemo15,
+  useState as useState14
+} from "react";
 
 // ../vuu-table/src/table-next/table-config.ts
 var updateTableConfig = (config, action) => {
@@ -3669,18 +4722,235 @@ import { useCallback as useCallback36, useEffect as useEffect11, useMemo as useM
 // ../vuu-table/src/table-next/moving-window.ts
 import { metadataKeys as metadataKeys15, WindowRange as WindowRange2 } from "@vuu-ui/vuu-utils";
 var { SELECTED: SELECTED4 } = metadataKeys15;
+var MovingWindow = class {
+  constructor({ from, to }) {
+    this.rowCount = 0;
+    this.setRowCount = (rowCount) => {
+      if (rowCount < this.data.length) {
+        this.data.length = rowCount;
+      }
+      this.rowCount = rowCount;
+    };
+    this.range = new WindowRange2(from, to);
+    this.data = new Array(to - from);
+    this.rowCount = 0;
+  }
+  add(data) {
+    const [index] = data;
+    if (this.isWithinRange(index)) {
+      const internalIndex = index - this.range.from;
+      this.data[internalIndex] = data;
+    }
+  }
+  getAtIndex(index) {
+    return this.range.isWithin(index) && this.data[index - this.range.from] != null ? this.data[index - this.range.from] : void 0;
+  }
+  isWithinRange(index) {
+    return this.range.isWithin(index);
+  }
+  setRange({ from, to }) {
+    if (from !== this.range.from || to !== this.range.to) {
+      const [overlapFrom, overlapTo] = this.range.overlap(from, to);
+      const newData = new Array(Math.max(0, to - from));
+      for (let i = overlapFrom; i < overlapTo; i++) {
+        const data = this.getAtIndex(i);
+        if (data) {
+          const index = i - from;
+          newData[index] = data;
+        }
+      }
+      this.data = newData;
+      this.range.from = from;
+      this.range.to = to;
+    }
+  }
+  getSelectedRows() {
+    return this.data.filter((row) => row[SELECTED4] !== 0);
+  }
+};
+
+// ../vuu-table/src/table-next/useDataSource.ts
+var useDataSource2 = ({
+  dataSource,
+  onFeatureEnabled,
+  onFeatureInvocation,
+  onSizeChange,
+  onSubscribed,
+  range = NULL_RANGE,
+  renderBufferSize = 0
+}) => {
+  const [, forceUpdate] = useState13(null);
+  const data = useRef30([]);
+  const isMounted = useRef30(true);
+  const hasUpdated = useRef30(false);
+  const rangeRef = useRef30(NULL_RANGE);
+  const dataWindow = useMemo13(
+    () => new MovingWindow(getFullRange2(range, renderBufferSize)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+  const setData = useCallback36(
+    (updates) => {
+      for (const row of updates) {
+        dataWindow.add(row);
+      }
+      data.current = dataWindow.data;
+      if (isMounted.current) {
+        forceUpdate({});
+      }
+    },
+    [dataWindow]
+  );
+  const datasourceMessageHandler = useCallback36(
+    (message) => {
+      if (message.type === "subscribed") {
+        onSubscribed == null ? void 0 : onSubscribed(message);
+      } else if (message.type === "viewport-update") {
+        if (typeof message.size === "number") {
+          onSizeChange == null ? void 0 : onSizeChange(message.size);
+          dataWindow.setRowCount(message.size);
+        }
+        if (message.rows) {
+          setData(message.rows);
+        } else if (typeof message.size === "number") {
+          data.current = dataWindow.data;
+          hasUpdated.current = true;
+        }
+      } else if (isVuuFeatureAction2(message)) {
+        onFeatureEnabled == null ? void 0 : onFeatureEnabled(message);
+      } else if (isVuuFeatureInvocation2(message)) {
+        onFeatureInvocation == null ? void 0 : onFeatureInvocation(message);
+      } else {
+        console.log(`useDataSource unexpected message ${message.type}`);
+      }
+    },
+    [
+      dataWindow,
+      onFeatureEnabled,
+      onFeatureInvocation,
+      onSizeChange,
+      onSubscribed,
+      setData
+    ]
+  );
+  useEffect11(
+    () => () => {
+      isMounted.current = true;
+      isMounted.current = false;
+    },
+    []
+  );
+  useEffect11(() => {
+    dataSource == null ? void 0 : dataSource.subscribe(
+      { range: getFullRange2(range, renderBufferSize) },
+      datasourceMessageHandler
+    );
+  }, [dataSource, datasourceMessageHandler, range, renderBufferSize]);
+  const setRange = useCallback36(
+    (range2) => {
+      const fullRange = getFullRange2(range2, renderBufferSize);
+      dataWindow.setRange(fullRange);
+      dataSource.range = rangeRef.current = fullRange;
+      dataSource.emit("range", range2);
+    },
+    [dataSource, dataWindow, renderBufferSize]
+  );
+  return {
+    data: data.current,
+    range: rangeRef.current,
+    setRange
+  };
+};
 
 // ../vuu-table/src/table-next/useInitialValue.ts
 import { useMemo as useMemo14, useRef as useRef31 } from "react";
+var useInitialValue = (value) => {
+  const ref = useRef31(value);
+  return useMemo14(() => ref.current, []);
+};
 
 // ../vuu-table/src/table-next/useTableContextMenu.ts
 import { buildColumnMap as buildColumnMap3 } from "@vuu-ui/vuu-utils";
 import { useCallback as useCallback37 } from "react";
 import { useContextMenu as usePopupContextMenu2 } from "@vuu-ui/vuu-popups";
+var useTableContextMenu2 = ({
+  columns,
+  data
+}) => {
+  const [showContextMenu] = usePopupContextMenu2();
+  const onContextMenu = useCallback37(
+    (evt) => {
+      var _a;
+      const target = evt.target;
+      const cellEl = target == null ? void 0 : target.closest("div[role='cell']");
+      const rowEl = target == null ? void 0 : target.closest("div[role='row']");
+      if (cellEl && rowEl) {
+        const columnMap = buildColumnMap3(columns);
+        const rowIndex = parseInt((_a = rowEl.ariaRowIndex) != null ? _a : "-1");
+        const cellIndex = Array.from(rowEl.childNodes).indexOf(cellEl);
+        const row = data.find(([idx]) => idx === rowIndex);
+        const columnName = columns[cellIndex];
+        showContextMenu(evt, "grid", {
+          columnMap,
+          columnName,
+          row
+          // selectedRows: selectedRowsCount === 0 ? NO_ROWS : getSelectedRows(),
+          // viewport: dataSource?.viewport,
+        });
+      }
+    },
+    [columns, data, showContextMenu]
+  );
+  return onContextMenu;
+};
 
 // ../vuu-table/src/table-next/useCellEditing.ts
 import { isCharacterKey } from "@vuu-ui/vuu-utils";
 import { useCallback as useCallback38 } from "react";
+var useCellEditing = ({ navigate }) => {
+  const commitHandler = useCallback38(() => {
+    navigate();
+  }, [navigate]);
+  const editInput = useCallback38(
+    (evt) => {
+      const cellEl = evt.target;
+      const input = cellEl.querySelector("input");
+      if (input) {
+        input.focus();
+        input.select();
+      }
+      cellEl.addEventListener("vuu-commit", commitHandler, true);
+    },
+    [commitHandler]
+  );
+  const focusInput = useCallback38(
+    (evt) => {
+      const cellEl = evt.target;
+      const input = cellEl.querySelector("input");
+      if (input) {
+        input.focus();
+        input.select();
+      }
+      cellEl.addEventListener("vuu-commit", commitHandler, true);
+    },
+    [commitHandler]
+  );
+  const handleKeyDown = useCallback38(
+    (e) => {
+      if (cellIsTextInput(e.target)) {
+        if (isCharacterKey(e.key)) {
+          editInput(e);
+        } else if (e.key === "Enter") {
+          focusInput(e);
+        }
+      }
+    },
+    [editInput, focusInput]
+  );
+  return {
+    onKeyDown: handleKeyDown
+  };
+};
 
 // ../vuu-table/src/table-next/useTableModel.ts
 import {
@@ -3705,22 +4975,1074 @@ import {
 import { buildValidationChecker } from "@vuu-ui/vuu-ui-controls";
 import { useReducer as useReducer2 } from "react";
 var { info } = logger("useTableModel");
+var DEFAULT_COLUMN_WIDTH = 100;
 var KEY_OFFSET2 = metadataKeys16.count;
+var columnWithoutDataType = ({ serverDataType }) => serverDataType === void 0;
+var getCellRendererForColumn = (column) => {
+  var _a;
+  if (isTypeDescriptor8(column.type)) {
+    return getCellRenderer2((_a = column.type) == null ? void 0 : _a.renderer);
+  }
+};
+var getDataType = (column, tableSchema) => {
+  var _a;
+  const schemaColumn = tableSchema.columns.find(
+    ({ name: name2 }) => name2 === column.name
+  );
+  if (schemaColumn) {
+    return schemaColumn.serverDataType;
+  } else {
+    return (_a = column.serverDataType) != null ? _a : "string";
+  }
+};
+var numericTypes = ["int", "long", "double"];
+var getDefaultAlignment3 = (serverDataType) => serverDataType === void 0 ? void 0 : numericTypes.includes(serverDataType) ? "right" : "left";
+var isShowColumnSettings = (action) => action.type === "columnSettings";
+var isShowTableSettings = (action) => action.type === "tableSettings";
+var columnReducer = (state, action) => {
+  info == null ? void 0 : info(`TableModelReducer ${action.type}`);
+  console.log(`TableModelReducer ${action.type}`);
+  switch (action.type) {
+    case "init":
+      console.log({ init: action });
+      return init(action);
+    case "moveColumn":
+      return moveColumn(state, action);
+    case "resizeColumn":
+      return resizeColumn(state, action);
+    case "setTableSchema":
+      return setTableSchema(state, action);
+    case "hideColumns":
+      return hideColumns(state, action);
+    case "showColumns":
+      return showColumns(state, action);
+    case "pinColumn":
+      return pinColumn2(state, action);
+    case "updateColumnProp":
+      return updateColumnProp(state, action);
+    case "tableConfig":
+      return updateTableConfig2(state, action);
+    default:
+      console.log(`unhandled action ${action.type}`);
+      return state;
+  }
+};
+var useTableModel2 = (tableConfigProp, dataSourceConfig) => {
+  const [state, dispatchColumnAction] = useReducer2(columnReducer, { tableConfig: tableConfigProp, dataSourceConfig }, init);
+  const { columns, headings, tableConfig, ...tableAttributes } = state;
+  return {
+    columns,
+    dispatchColumnAction,
+    headings,
+    tableAttributes,
+    tableConfig
+  };
+};
+function init({
+  dataSourceConfig,
+  tableConfig
+}) {
+  const { columns, ...tableAttributes } = tableConfig;
+  const keyedColumns = columns.filter(subscribedOnly(dataSourceConfig == null ? void 0 : dataSourceConfig.columns)).map(columnDescriptorToKeyedColumDescriptor(tableAttributes));
+  const maybePinnedColumns = keyedColumns.some(isPinned2) ? sortPinnedColumns2(keyedColumns) : keyedColumns;
+  let state = {
+    columns: maybePinnedColumns,
+    headings: getTableHeadings2(maybePinnedColumns),
+    tableConfig,
+    ...tableAttributes
+  };
+  if (dataSourceConfig) {
+    const { columns: _, ...rest } = dataSourceConfig;
+    state = updateTableConfig2(state, {
+      type: "tableConfig",
+      ...rest
+    });
+  }
+  return state;
+}
+var getLabel = (label, columnFormatHeader) => {
+  if (columnFormatHeader === "uppercase") {
+    return label.toUpperCase();
+  } else if (columnFormatHeader === "capitalize") {
+    return label[0].toUpperCase() + label.slice(1).toLowerCase();
+  }
+  return label;
+};
+var columnDescriptorToKeyedColumDescriptor = (tableAttributes) => (column, index) => {
+  const { columnDefaultWidth = DEFAULT_COLUMN_WIDTH, columnFormatHeader } = tableAttributes;
+  const {
+    align = getDefaultAlignment3(column.serverDataType),
+    key,
+    name: name2,
+    label = name2,
+    width = columnDefaultWidth,
+    ...rest
+  } = column;
+  const keyedColumnWithDefaults = {
+    ...rest,
+    align,
+    CellRenderer: getCellRendererForColumn(column),
+    clientSideEditValidationCheck: hasValidationRules(column.type) ? buildValidationChecker(column.type.renderer.rules) : void 0,
+    label: getLabel(label, columnFormatHeader),
+    key: key != null ? key : index + KEY_OFFSET2,
+    name: name2,
+    originalIdx: index,
+    valueFormatter: getValueFormatter2(column),
+    width
+  };
+  if (isGroupColumn5(keyedColumnWithDefaults)) {
+    keyedColumnWithDefaults.columns = keyedColumnWithDefaults.columns.map(
+      (col) => columnDescriptorToKeyedColumDescriptor(tableAttributes)(col, col.key)
+    );
+  }
+  return keyedColumnWithDefaults;
+};
+function moveColumn(state, { column, moveBy, moveTo }) {
+  const { columns } = state;
+  if (typeof moveBy === "number") {
+    const idx = columns.indexOf(column);
+    const newColumns = columns.slice();
+    const [movedColumns] = newColumns.splice(idx, 1);
+    newColumns.splice(idx + moveBy, 0, movedColumns);
+    return {
+      ...state,
+      columns: newColumns
+    };
+  } else if (typeof moveTo === "number") {
+    const index = columns.indexOf(column);
+    return {
+      ...state,
+      columns: moveItem(columns, index, moveTo)
+    };
+  }
+  return state;
+}
+function hideColumns(state, { columns }) {
+  if (columns.some((col) => col.hidden !== true)) {
+    return columns.reduce((s, c) => {
+      if (c.hidden !== true) {
+        return updateColumnProp(s, {
+          type: "updateColumnProp",
+          column: c,
+          hidden: true
+        });
+      } else {
+        return s;
+      }
+    }, state);
+  } else {
+    return state;
+  }
+}
+function showColumns(state, { columns }) {
+  if (columns.some((col) => col.hidden)) {
+    return columns.reduce((s, c) => {
+      if (c.hidden) {
+        return updateColumnProp(s, {
+          type: "updateColumnProp",
+          column: c,
+          hidden: false
+        });
+      } else {
+        return s;
+      }
+    }, state);
+  } else {
+    return state;
+  }
+}
+function resizeColumn(state, { column, phase, width }) {
+  const type = "updateColumnProp";
+  const resizing = phase !== "end";
+  switch (phase) {
+    case "begin":
+      return updateColumnProp(state, { type, column, resizing });
+    case "end":
+      return updateColumnProp(state, { type, column, resizing, width });
+    case "resize":
+      return updateColumnProp(state, { type, column, width });
+    default:
+      throw Error(`useTableModel.resizeColumn, invalid resizePhase ${phase}`);
+  }
+}
+function setTableSchema(state, { tableSchema }) {
+  const { columns } = state;
+  if (columns.some(columnWithoutDataType)) {
+    const cols = columns.map((column) => {
+      var _a;
+      const serverDataType = getDataType(column, tableSchema);
+      return {
+        ...column,
+        align: (_a = column.align) != null ? _a : getDefaultAlignment3(serverDataType),
+        serverDataType
+      };
+    });
+    return {
+      ...state,
+      columns: cols
+    };
+  } else {
+    return state;
+  }
+}
+function pinColumn2(state, action) {
+  let { columns } = state;
+  const { column, pin } = action;
+  const targetColumn = columns.find((col) => col.name === column.name);
+  if (targetColumn) {
+    columns = replaceColumn2(columns, { ...targetColumn, pin });
+    columns = sortPinnedColumns2(columns);
+    return {
+      ...state,
+      columns
+    };
+  } else {
+    return state;
+  }
+}
+function updateColumnProp(state, action) {
+  let { columns } = state;
+  const { align, column, hidden, label, resizing, width } = action;
+  const targetColumn = columns.find((col) => col.name === column.name);
+  if (targetColumn) {
+    if (align === "left" || align === "right") {
+      columns = replaceColumn2(columns, { ...targetColumn, align });
+    }
+    if (typeof label === "string") {
+      columns = replaceColumn2(columns, { ...targetColumn, label });
+    }
+    if (typeof resizing === "boolean") {
+      columns = replaceColumn2(columns, { ...targetColumn, resizing });
+    }
+    if (typeof hidden === "boolean") {
+      columns = replaceColumn2(columns, { ...targetColumn, hidden });
+    }
+    if (typeof width === "number") {
+      columns = replaceColumn2(columns, { ...targetColumn, width });
+    }
+  }
+  return {
+    ...state,
+    columns
+  };
+}
+function updateTableConfig2(state, { confirmed, filter, groupBy, sort }) {
+  const hasGroupBy = groupBy !== void 0;
+  const hasFilter = typeof (filter == null ? void 0 : filter.filter) === "string";
+  const hasSort = sort && sort.sortDefs.length > 0;
+  let result = state;
+  if (hasGroupBy) {
+    result = {
+      ...state,
+      columns: applyGroupByToColumns2(result.columns, groupBy, confirmed)
+    };
+  }
+  if (hasSort) {
+    result = {
+      ...state,
+      columns: applySortToColumns2(result.columns, sort)
+    };
+  }
+  if (hasFilter) {
+    result = {
+      ...state,
+      columns: applyFilterToColumns2(result.columns, filter)
+    };
+  } else if (result.columns.some(isFilteredColumn2)) {
+    result = {
+      ...state,
+      columns: stripFilterFromColumns2(result.columns)
+    };
+  }
+  return result;
+}
+function replaceColumn2(state, column) {
+  return state.map((col) => col.name === column.name ? column : col);
+}
 
 // ../vuu-table/src/table-next/useTableScroll.ts
 import { useCallback as useCallback39, useRef as useRef32 } from "react";
+var getPctScroll = (container) => {
+  const { scrollLeft, scrollTop } = container;
+  const { clientHeight, clientWidth, scrollHeight, scrollWidth } = container;
+  const pctScrollLeft = scrollLeft / (scrollWidth - clientWidth);
+  const pctScrollTop = scrollTop / (scrollHeight - clientHeight);
+  return [pctScrollLeft, pctScrollTop];
+};
+var useCallbackRef = ({
+  onAttach,
+  onDetach
+}) => {
+  const ref = useRef32(null);
+  const callbackRef = useCallback39(
+    (el) => {
+      if (el) {
+        ref.current = el;
+        onAttach == null ? void 0 : onAttach(el);
+      } else if (ref.current) {
+        const { current: originalRef } = ref;
+        ref.current = el;
+        onDetach == null ? void 0 : onDetach(originalRef);
+      }
+    },
+    [onAttach, onDetach]
+  );
+  return callbackRef;
+};
+var useTableScroll2 = ({
+  maxScrollLeft,
+  maxScrollTop,
+  onHorizontalScroll,
+  onVerticalScroll,
+  rowHeight,
+  viewportRowCount
+}) => {
+  const contentContainerScrolledRef = useRef32(false);
+  const scrollPosRef = useRef32({ scrollTop: 0, scrollLeft: 0 });
+  const scrollbarContainerRef = useRef32(null);
+  const contentContainerRef = useRef32(null);
+  const handleScrollbarContainerScroll = useCallback39(() => {
+    const { current: contentContainer } = contentContainerRef;
+    const { current: scrollbarContainer } = scrollbarContainerRef;
+    const { current: contentContainerScrolled } = contentContainerScrolledRef;
+    if (contentContainerScrolled) {
+      contentContainerScrolledRef.current = false;
+    } else if (contentContainer && scrollbarContainer) {
+      const [pctScrollLeft, pctScrollTop] = getPctScroll(scrollbarContainer);
+      const rootScrollLeft = Math.round(pctScrollLeft * maxScrollLeft);
+      const rootScrollTop = Math.round(pctScrollTop * maxScrollTop);
+      contentContainer.scrollTo({
+        left: rootScrollLeft,
+        top: rootScrollTop,
+        behavior: "auto"
+      });
+    }
+  }, [maxScrollLeft, maxScrollTop]);
+  const handleContentContainerScroll = useCallback39(() => {
+    const { current: contentContainer } = contentContainerRef;
+    const { current: scrollbarContainer } = scrollbarContainerRef;
+    const { current: scrollPos } = scrollPosRef;
+    if (contentContainer && scrollbarContainer) {
+      const { scrollLeft, scrollTop } = contentContainer;
+      const [pctScrollLeft, pctScrollTop] = getPctScroll(contentContainer);
+      contentContainerScrolledRef.current = true;
+      scrollbarContainer.scrollLeft = Math.round(pctScrollLeft * maxScrollLeft);
+      scrollbarContainer.scrollTop = Math.round(pctScrollTop * maxScrollTop);
+      if (scrollPos.scrollTop !== scrollTop) {
+        scrollPos.scrollTop = scrollTop;
+        onVerticalScroll == null ? void 0 : onVerticalScroll(scrollTop, pctScrollTop);
+      }
+      if (scrollPos.scrollLeft !== scrollLeft) {
+        scrollPos.scrollLeft = scrollLeft;
+        onHorizontalScroll == null ? void 0 : onHorizontalScroll(scrollLeft);
+      }
+    }
+  }, [maxScrollLeft, maxScrollTop, onHorizontalScroll, onVerticalScroll]);
+  const handleAttachScrollbarContainer = useCallback39(
+    (el) => {
+      scrollbarContainerRef.current = el;
+      el.addEventListener("scroll", handleScrollbarContainerScroll, {
+        passive: true
+      });
+    },
+    [handleScrollbarContainerScroll]
+  );
+  const handleDetachScrollbarContainer = useCallback39(
+    (el) => {
+      scrollbarContainerRef.current = null;
+      el.removeEventListener("scroll", handleScrollbarContainerScroll);
+    },
+    [handleScrollbarContainerScroll]
+  );
+  const handleAttachContentContainer = useCallback39(
+    (el) => {
+      contentContainerRef.current = el;
+      el.addEventListener("scroll", handleContentContainerScroll, {
+        passive: true
+      });
+    },
+    [handleContentContainerScroll]
+  );
+  const handleDetachContentContainer = useCallback39(
+    (el) => {
+      contentContainerRef.current = null;
+      el.removeEventListener("scroll", handleContentContainerScroll);
+    },
+    [handleContentContainerScroll]
+  );
+  const contentContainerCallbackRef = useCallbackRef({
+    onAttach: handleAttachContentContainer,
+    onDetach: handleDetachContentContainer
+  });
+  const scrollbarContainerCallbackRef = useCallbackRef({
+    onAttach: handleAttachScrollbarContainer,
+    onDetach: handleDetachScrollbarContainer
+  });
+  const requestScroll = useCallback39(
+    (scrollRequest) => {
+      const { current: scrollbarContainer } = contentContainerRef;
+      if (scrollbarContainer) {
+        const { scrollLeft, scrollTop } = scrollbarContainer;
+        contentContainerScrolledRef.current = false;
+        if (scrollRequest.type === "scroll-distance") {
+          let newScrollLeft = scrollLeft;
+          let newScrollTop = scrollTop;
+          if (scrollRequest.direction === "up" || scrollRequest.direction === "down") {
+            newScrollTop = Math.min(
+              Math.max(0, scrollTop + scrollRequest.distance),
+              maxScrollTop
+            );
+          } else {
+            newScrollLeft = Math.min(
+              Math.max(0, scrollLeft + scrollRequest.distance),
+              maxScrollLeft
+            );
+          }
+          scrollbarContainer.scrollTo({
+            top: newScrollTop,
+            left: newScrollLeft,
+            behavior: "auto"
+          });
+        } else if (scrollRequest.type === "scroll-page") {
+          const { direction } = scrollRequest;
+          const scrollBy = viewportRowCount * (direction === "down" ? rowHeight : -rowHeight);
+          const newScrollTop = Math.min(
+            Math.max(0, scrollTop + scrollBy),
+            maxScrollTop
+          );
+          scrollbarContainer.scrollTo({
+            top: newScrollTop,
+            left: scrollLeft,
+            behavior: "auto"
+          });
+        } else if (scrollRequest.type === "scroll-end") {
+          const { direction } = scrollRequest;
+          const scrollTo = direction === "end" ? maxScrollTop : 0;
+          scrollbarContainer.scrollTo({
+            top: scrollTo,
+            left: scrollbarContainer.scrollLeft,
+            behavior: "auto"
+          });
+        }
+      }
+    },
+    [maxScrollLeft, maxScrollTop, rowHeight, viewportRowCount]
+  );
+  return {
+    /** Ref to be assigned to ScrollbarContainer */
+    scrollbarContainerRef: scrollbarContainerCallbackRef,
+    /** Ref to be assigned to ContentContainer */
+    contentContainerRef: contentContainerCallbackRef,
+    /** Scroll the table  */
+    requestScroll
+  };
+};
 
 // ../vuu-table/src/table-next/useVirtualViewport.ts
 import { useCallback as useCallback40, useEffect as useEffect12, useRef as useRef33 } from "react";
+var useVirtualViewport2 = ({
+  columns,
+  getRowAtPosition,
+  setRange,
+  viewportMeasurements
+}) => {
+  const firstRowRef = useRef33(0);
+  const { contentWidth, rowCount: viewportRowCount } = viewportMeasurements;
+  const handleVerticalScroll = useCallback40(
+    (scrollTop) => {
+      const firstRow = getRowAtPosition(scrollTop);
+      if (firstRow !== firstRowRef.current) {
+        firstRowRef.current = firstRow;
+        setRange({ from: firstRow, to: firstRow + viewportRowCount });
+      }
+    },
+    [getRowAtPosition, setRange, viewportRowCount]
+  );
+  useEffect12(() => {
+    const { current: from } = firstRowRef;
+    const rowRange = { from, to: from + viewportRowCount };
+    setRange(rowRange);
+  }, [setRange, viewportRowCount]);
+  return {
+    onVerticalScroll: handleVerticalScroll
+  };
+};
 
 // ../vuu-table/src/table-next/useTableNext.ts
 var { KEY: KEY6, IS_EXPANDED: IS_EXPANDED5, IS_LEAF: IS_LEAF4 } = metadataKeys17;
+var addColumn = (tableConfig, column) => ({
+  ...tableConfig,
+  columns: tableConfig.columns.concat(column)
+});
+var useTable2 = ({
+  availableColumns,
+  config,
+  containerRef,
+  dataSource,
+  headerHeight = 25,
+  onAvailableColumnsChange,
+  onConfigChange,
+  onFeatureEnabled,
+  onFeatureInvocation,
+  onRowClick: onRowClickProp,
+  onSelect,
+  onSelectionChange,
+  renderBufferSize = 0,
+  rowHeight = 20,
+  selectionModel
+}) => {
+  const [rowCount, setRowCount] = useState14(dataSource.size);
+  if (dataSource === void 0) {
+    throw Error("no data source provided to Vuu Table");
+  }
+  const [size, setSize] = useState14();
+  const handleResize = useCallback41((size2) => {
+    setSize(size2);
+  }, []);
+  const menuBuilder = useMemo15(
+    () => buildContextMenuDescriptors(dataSource),
+    [dataSource]
+  );
+  const onDataRowcountChange = useCallback41((size2) => {
+    setRowCount(size2);
+  }, []);
+  const {
+    columns: modelColumns,
+    dispatchColumnAction,
+    headings,
+    tableAttributes,
+    tableConfig
+  } = useTableModel2(config, dataSource.config);
+  useLayoutEffectSkipFirst2(() => {
+    dispatchColumnAction({
+      type: "init",
+      dataSourceConfig: dataSource.config,
+      tableConfig
+    });
+  }, [tableConfig, dataSource.config, dispatchColumnAction]);
+  const [stateColumns, setStateColumns] = useState14();
+  const [columns, setColumnSize] = useMemo15(() => {
+    const setSize2 = (columnName, width) => {
+      const cols = updateColumn2(modelColumns, columnName, { width });
+      setStateColumns(cols);
+    };
+    return [stateColumns != null ? stateColumns : modelColumns, setSize2];
+  }, [modelColumns, stateColumns]);
+  const columnMap = useMemo15(
+    () => buildColumnMap4(dataSource.columns),
+    [dataSource.columns]
+  );
+  const {
+    getRowAtPosition,
+    getRowOffset,
+    setPctScrollTop,
+    ...viewportMeasurements
+  } = useTableViewport({
+    columns,
+    headerHeight,
+    headings,
+    rowCount,
+    rowHeight,
+    size
+  });
+  const initialRange = useInitialValue({
+    from: 0,
+    to: viewportMeasurements.rowCount
+  });
+  const onSubscribed = useCallback41(
+    ({ tableSchema }) => {
+      if (tableSchema) {
+      } else {
+        console.log("usbscription message with no schema");
+      }
+    },
+    []
+  );
+  const { data, range, setRange } = useDataSource2({
+    dataSource,
+    onFeatureEnabled,
+    onFeatureInvocation,
+    renderBufferSize,
+    onSizeChange: onDataRowcountChange,
+    onSubscribed,
+    range: initialRange
+  });
+  const handleConfigChanged = useCallback41(
+    (tableConfig2) => {
+      dispatchColumnAction({
+        type: "init",
+        tableConfig: tableConfig2,
+        dataSourceConfig: dataSource.config
+      });
+      onConfigChange == null ? void 0 : onConfigChange(tableConfig2);
+    },
+    [dataSource.config, dispatchColumnAction, onConfigChange]
+  );
+  const handleDataSourceConfigChanged = useCallback41(
+    (dataSourceConfig) => {
+      dataSource.config = {
+        ...dataSource.config,
+        ...dataSourceConfig
+      };
+    },
+    [dataSource]
+  );
+  const handleCreateCalculatedColumn = useCallback41(
+    (column) => {
+      dataSource.columns = dataSource.columns.concat(column.name);
+      const newTableConfig = addColumn(tableConfig, column);
+      dispatchColumnAction({
+        type: "init",
+        tableConfig: newTableConfig,
+        dataSourceConfig: dataSource.config
+      });
+      onConfigChange == null ? void 0 : onConfigChange(newTableConfig);
+    },
+    [dataSource, dispatchColumnAction, onConfigChange, tableConfig]
+  );
+  useEffect13(() => {
+    dataSource.on("config", (config2, confirmed) => {
+      dispatchColumnAction({
+        type: "tableConfig",
+        ...config2,
+        confirmed
+      });
+    });
+  }, [dataSource, dispatchColumnAction]);
+  const { showColumnSettingsPanel, showTableSettingsPanel } = useTableAndColumnSettings({
+    availableColumns: availableColumns != null ? availableColumns : tableConfig.columns.map(({ name: name2, serverDataType = "string" }) => ({
+      name: name2,
+      serverDataType
+    })),
+    onAvailableColumnsChange,
+    onConfigChange: handleConfigChanged,
+    onCreateCalculatedColumn: handleCreateCalculatedColumn,
+    onDataSourceConfigChange: handleDataSourceConfigChanged,
+    tableConfig
+  });
+  const onPersistentColumnOperation = useCallback41(
+    (action) => {
+      if (isShowColumnSettings(action)) {
+        showColumnSettingsPanel(action);
+      } else if (isShowTableSettings(action)) {
+        showTableSettingsPanel();
+      } else {
+        dispatchColumnAction(action);
+      }
+    },
+    [dispatchColumnAction, showColumnSettingsPanel, showTableSettingsPanel]
+  );
+  const handleContextMenuAction = useTableContextMenu({
+    dataSource,
+    onPersistentColumnOperation
+  });
+  const handleSort = useCallback41(
+    (column, extendSort = false, sortType) => {
+      if (dataSource) {
+        dataSource.sort = applySort2(
+          dataSource.sort,
+          column,
+          extendSort,
+          sortType
+        );
+      }
+    },
+    [dataSource]
+  );
+  const onHeaderResize = useCallback41(
+    (phase, columnName, width) => {
+      const column = columns.find((column2) => column2.name === columnName);
+      if (column) {
+        if (phase === "resize") {
+          if (isValidNumber5(width)) {
+            setColumnSize(columnName, width);
+          }
+        } else if (phase === "end") {
+          if (isValidNumber5(width)) {
+            dispatchColumnAction({
+              type: "resizeColumn",
+              phase,
+              column,
+              width
+            });
+            onConfigChange == null ? void 0 : onConfigChange(
+              updateTableConfig(tableConfig, {
+                type: "col-size",
+                column,
+                width
+              })
+            );
+          }
+        } else {
+          setStateColumns(void 0);
+          dispatchColumnAction({
+            type: "resizeColumn",
+            phase,
+            column,
+            width
+          });
+        }
+      } else {
+        throw Error(
+          `useDataTable.handleColumnResize, column ${columnName} not found`
+        );
+      }
+    },
+    [columns, tableConfig, dispatchColumnAction, onConfigChange, setColumnSize]
+  );
+  const onToggleGroup = useCallback41(
+    (row, column) => {
+      const isJson = isJsonGroup4(column, row);
+      const key = row[KEY6];
+      if (row[IS_EXPANDED5]) {
+        dataSource.closeTreeNode(key, true);
+        if (isJson) {
+          const idx = columns.indexOf(column);
+          const rows = dataSource.getRowsAtDepth(idx + 1);
+          if (!rows.some((row2) => row2[IS_EXPANDED5] || row2[IS_LEAF4])) {
+            dispatchColumnAction({
+              type: "hideColumns",
+              columns: columns.slice(idx + 2)
+            });
+          }
+        }
+      } else {
+        dataSource.openTreeNode(key);
+        if (isJson) {
+          const childRows = dataSource.getChildRows(key);
+          const idx = columns.indexOf(column) + 1;
+          const columnsToShow = [columns[idx]];
+          if (childRows.some((row2) => row2[IS_LEAF4])) {
+            columnsToShow.push(columns[idx + 1]);
+          }
+          if (columnsToShow.some((col) => col.hidden)) {
+            dispatchColumnAction({
+              type: "showColumns",
+              columns: columnsToShow
+            });
+          }
+        }
+      }
+    },
+    [columns, dataSource, dispatchColumnAction]
+  );
+  const { onVerticalScroll } = useVirtualViewport2({
+    columns,
+    getRowAtPosition,
+    setRange,
+    viewportMeasurements
+  });
+  const handleVerticalScroll = useCallback41(
+    (scrollTop) => {
+      onVerticalScroll(scrollTop);
+    },
+    [onVerticalScroll]
+  );
+  const { requestScroll, ...scrollProps } = useTableScroll2({
+    maxScrollLeft: viewportMeasurements.maxScrollContainerScrollHorizontal,
+    maxScrollTop: viewportMeasurements.maxScrollContainerScrollVertical,
+    rowHeight,
+    onVerticalScroll: handleVerticalScroll,
+    viewportRowCount: viewportMeasurements.rowCount
+  });
+  const {
+    navigate,
+    onKeyDown: navigationKeyDown,
+    ...containerProps
+  } = useKeyboardNavigation2({
+    columnCount: columns.filter((c) => c.hidden !== true).length,
+    containerRef,
+    requestScroll,
+    rowCount: dataSource == null ? void 0 : dataSource.size,
+    viewportRange: range,
+    viewportRowCount: viewportMeasurements.rowCount
+  });
+  const { onKeyDown: editingKeyDown } = useCellEditing({ navigate });
+  const handleKeyDown = useCallback41(
+    (e) => {
+      navigationKeyDown(e);
+      if (!e.defaultPrevented) {
+        editingKeyDown(e);
+      }
+    },
+    [navigationKeyDown, editingKeyDown]
+  );
+  const onContextMenu = useTableContextMenu2({ columns, data });
+  const onHeaderClick = useCallback41(
+    (evt) => {
+      var _a;
+      const targetElement = evt.target;
+      const headerCell = targetElement.closest(
+        ".vuuTableNextHeaderCell"
+      );
+      const colIdx = parseInt((_a = headerCell == null ? void 0 : headerCell.dataset.index) != null ? _a : "-1");
+      const column = visibleColumnAtIndex2(columns, colIdx);
+      const isAdditive = evt.shiftKey;
+      column && handleSort(column, isAdditive);
+    },
+    [columns, handleSort]
+  );
+  const onRemoveGroupColumn = useCallback41(
+    (column) => {
+      if (isGroupColumn6(column)) {
+        dataSource.groupBy = [];
+      } else {
+        if (dataSource && dataSource.groupBy.includes(column.name)) {
+          dataSource.groupBy = dataSource.groupBy.filter(
+            (columnName) => columnName !== column.name
+          );
+        }
+      }
+    },
+    [dataSource]
+  );
+  const handleSelectionChange = useCallback41(
+    (selected) => {
+      dataSource.select(selected);
+      onSelectionChange == null ? void 0 : onSelectionChange(selected);
+    },
+    [dataSource, onSelectionChange]
+  );
+  const selectionHookOnRowClick = useSelection({
+    onSelect,
+    onSelectionChange: handleSelectionChange,
+    selectionModel
+  });
+  const handleRowClick = useCallback41(
+    (row, rangeSelect, keepExistingSelection) => {
+      selectionHookOnRowClick(row, rangeSelect, keepExistingSelection);
+      onRowClickProp == null ? void 0 : onRowClickProp(row);
+    },
+    [onRowClickProp, selectionHookOnRowClick]
+  );
+  useEffect13(() => {
+    dataSource.on("config", (config2, confirmed) => {
+      dispatchColumnAction({
+        type: "tableConfig",
+        ...config2,
+        confirmed
+      });
+    });
+  }, [dataSource, dispatchColumnAction]);
+  const handleDrop = useCallback41(
+    (moveFrom, moveTo) => {
+      const column = columns[moveFrom];
+      dispatchColumnAction({
+        type: "moveColumn",
+        column,
+        moveTo
+      });
+    },
+    [columns, dispatchColumnAction]
+  );
+  const handleDataEdited = useCallback41(
+    (rowIndex, columnName, value) => {
+      return dataSource.applyEdit(rowIndex, columnName, value);
+    },
+    [dataSource]
+  );
+  const { onMouseDown: dragDropHookHandleMouseDown, ...dragDropHook } = useDragDrop2({
+    allowDragDrop: true,
+    containerRef,
+    // this is for useDragDropNext
+    draggableClassName: `vuuTableNext`,
+    // extendedDropZone: overflowedItems.length > 0,
+    onDrop: handleDrop,
+    orientation: "horizontal",
+    itemQuery: ".vuuTableNextHeaderCell"
+  });
+  const headerProps = {
+    onClick: onHeaderClick,
+    onMouseDown: dragDropHookHandleMouseDown,
+    onResize: onHeaderResize
+  };
+  return {
+    ...containerProps,
+    onKeyDown: handleKeyDown,
+    columnMap,
+    columns,
+    data,
+    handleContextMenuAction,
+    headerProps,
+    menuBuilder,
+    onContextMenu,
+    onDataEdited: handleDataEdited,
+    onRemoveGroupColumn,
+    onResize: handleResize,
+    onRowClick: handleRowClick,
+    onToggleGroup,
+    scrollProps,
+    tableAttributes,
+    viewportMeasurements,
+    dragDropHook
+  };
+};
 
 // ../vuu-table/src/table-next/TableNext.tsx
 import { MeasuredContainer, useId } from "@vuu-ui/vuu-layout";
+import { useForkRef } from "@salt-ds/core";
 import { jsx as jsx33, jsxs as jsxs25 } from "react/jsx-runtime";
 import { createElement as createElement4 } from "react";
+var classBase19 = "vuuTableNext";
 var { IDX: IDX5, RENDER_IDX: RENDER_IDX2 } = metadataKeys18;
+var TableNext = forwardRef(function TableNext2({
+  Row: Row3 = Row2,
+  availableColumns,
+  className: classNameProp,
+  config,
+  dataSource,
+  id: idProp,
+  onAvailableColumnsChange,
+  onConfigChange,
+  onFeatureEnabled,
+  onFeatureInvocation,
+  onRowClick: onRowClickProp,
+  onSelect,
+  onSelectionChange,
+  onShowConfigEditor: onShowSettings,
+  renderBufferSize = 0,
+  rowHeight = 20,
+  selectionModel = "extended",
+  showColumnHeaders = true,
+  headerHeight = showColumnHeaders ? 25 : 0,
+  style: styleProp,
+  ...htmlAttributes
+}, forwardedRef) {
+  const id = useId(idProp);
+  const containerRef = useRef34(null);
+  const {
+    columnMap,
+    columns,
+    data,
+    dragDropHook,
+    handleContextMenuAction,
+    headerProps,
+    onDataEdited,
+    onRemoveGroupColumn,
+    onResize,
+    onRowClick,
+    onToggleGroup,
+    menuBuilder,
+    scrollProps,
+    tableAttributes,
+    viewportMeasurements,
+    ...tableProps
+  } = useTable2({
+    availableColumns,
+    config,
+    containerRef,
+    dataSource,
+    headerHeight,
+    onAvailableColumnsChange,
+    onConfigChange,
+    onFeatureEnabled,
+    onFeatureInvocation,
+    onRowClick: onRowClickProp,
+    onSelect,
+    onSelectionChange,
+    renderBufferSize,
+    rowHeight,
+    selectionModel
+  });
+  const getStyle = () => {
+    return {
+      ...styleProp,
+      "--content-height": `${viewportMeasurements.contentHeight}px`,
+      "--horizontal-scrollbar-height": `${viewportMeasurements.horizontalScrollbarHeight}px`,
+      "--content-width": `${viewportMeasurements.contentWidth}px`,
+      "--pinned-width-left": `${viewportMeasurements.pinnedWidthLeft}px`,
+      "--pinned-width-right": `${viewportMeasurements.pinnedWidthRight}px`,
+      "--header-height": `${headerHeight}px`,
+      "--row-height": `${rowHeight}px`,
+      "--total-header-height": `${viewportMeasurements.totalHeaderHeight}px`,
+      "--vertical-scrollbar-width": `${viewportMeasurements.verticalScrollbarWidth}px`,
+      "--viewport-body-height": `${viewportMeasurements.viewportBodyHeight}px`
+    };
+  };
+  const className = cx23(classBase19, classNameProp, {
+    [`${classBase19}-colLines`]: tableAttributes.columnSeparators,
+    [`${classBase19}-rowLines`]: tableAttributes.rowSeparators,
+    [`${classBase19}-zebra`]: tableAttributes.zebraStripes
+    // [`${classBase}-loading`]: isDataLoading(tableProps.columns),
+  });
+  return /* @__PURE__ */ jsx33(
+    ContextMenuProvider2,
+    {
+      menuActionHandler: handleContextMenuAction,
+      menuBuilder,
+      children: /* @__PURE__ */ jsxs25(
+        MeasuredContainer,
+        {
+          ...htmlAttributes,
+          className,
+          onResize,
+          ref: useForkRef(containerRef, forwardedRef),
+          style: getStyle(),
+          children: [
+            /* @__PURE__ */ jsx33(
+              "div",
+              {
+                className: `${classBase19}-scrollbarContainer`,
+                ref: scrollProps.scrollbarContainerRef,
+                children: /* @__PURE__ */ jsx33("div", { className: `${classBase19}-scrollbarContent` })
+              }
+            ),
+            /* @__PURE__ */ jsx33(
+              "div",
+              {
+                className: `${classBase19}-contentContainer`,
+                ref: scrollProps.contentContainerRef,
+                children: /* @__PURE__ */ jsxs25("div", { ...tableProps, className: `${classBase19}-table`, tabIndex: -1, children: [
+                  showColumnHeaders ? /* @__PURE__ */ jsx33("div", { className: `${classBase19}-col-headings`, children: /* @__PURE__ */ jsxs25("div", { className: `${classBase19}-col-headers`, role: "row", children: [
+                    columns.filter(notHidden4).map(
+                      (col, i) => isGroupColumn7(col) ? /* @__PURE__ */ createElement4(
+                        GroupHeaderCellNext,
+                        {
+                          ...headerProps,
+                          column: col,
+                          "data-index": i,
+                          key: col.name,
+                          onRemoveColumn: onRemoveGroupColumn
+                        }
+                      ) : /* @__PURE__ */ createElement4(
+                        HeaderCell,
+                        {
+                          ...headerProps,
+                          className: cx23({
+                            "vuuDraggable-dragAway": i === dragDropHook.draggedItemIndex
+                          }),
+                          column: col,
+                          "data-index": i,
+                          id: `${id}-col-${i}`,
+                          key: col.name
+                        }
+                      )
+                    ),
+                    dragDropHook.draggable
+                  ] }) }) : null,
+                  /* @__PURE__ */ jsx33("div", { className: `${classBase19}-body`, children: data.map((data2) => /* @__PURE__ */ jsx33(
+                    Row3,
+                    {
+                      columnMap,
+                      columns,
+                      onClick: onRowClick,
+                      onDataEdited,
+                      row: data2,
+                      offset: rowHeight * data2[IDX5] + headerHeight,
+                      onToggleGroup,
+                      zebraStripes: tableAttributes.zebraStripes
+                    },
+                    data2[RENDER_IDX2]
+                  )) })
+                ] })
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+});
 
 // ../vuu-table/src/table-next/cell-renderers/dropdown-cell/DropdownCell.tsx
 import {
@@ -3733,7 +6055,7 @@ import {
 } from "@vuu-ui/vuu-utils";
 import { useCallback as useCallback42, useState as useState15 } from "react";
 import { jsx as jsx34 } from "react/jsx-runtime";
-var classBase16 = "vuuTableDropdownCell";
+var classBase20 = "vuuTableDropdownCell";
 var openKeys = ["Enter", " "];
 var DropdownCell = ({ column, columnMap, row }) => {
   var _a, _b, _c;
@@ -3751,7 +6073,7 @@ var DropdownCell = ({ column, columnMap, row }) => {
   return /* @__PURE__ */ jsx34(
     Dropdown3,
     {
-      className: classBase16,
+      className: classBase20,
       onSelectionChange: handleSelectionChange,
       openKeys,
       selected: value,
@@ -3768,7 +6090,7 @@ import { Input as Input3 } from "@salt-ds/core";
 import { useEditableText } from "@vuu-ui/vuu-ui-controls";
 import cx24 from "classnames";
 import { jsx as jsx35 } from "react/jsx-runtime";
-var classBase17 = "vuuTableInputCell";
+var classBase21 = "vuuTableInputCell";
 var WarnCommit = () => {
   console.warn(
     "onCommit handler has not been provided to InputCell cell renderer"
@@ -3792,14 +6114,14 @@ var InputCell = ({
     onCommit,
     clientSideEditValidationCheck
   });
-  const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ jsx35("span", { className: `${classBase17}-icon`, "data-icon": "error" }) : void 0;
-  const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ jsx35("span", { className: `${classBase17}-icon`, "data-icon": "error" }) : void 0;
+  const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ jsx35("span", { className: `${classBase21}-icon`, "data-icon": "error" }) : void 0;
+  const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ jsx35("span", { className: `${classBase21}-icon`, "data-icon": "error" }) : void 0;
   return /* @__PURE__ */ jsx35(
     Input3,
     {
       ...editProps,
-      className: cx24(classBase17, {
-        [`${classBase17}-error`]: warningMessage !== void 0
+      className: cx24(classBase21, {
+        [`${classBase21}-error`]: warningMessage !== void 0
       }),
       endAdornment,
       startAdornment
@@ -3975,7 +6297,7 @@ var useTableSettings = ({
 
 // src/table-settings/TableSettingsPanel.tsx
 import { jsx as jsx36, jsxs as jsxs26 } from "react/jsx-runtime";
-var classBase18 = "vuuTableSettingsPanel";
+var classBase22 = "vuuTableSettingsPanel";
 var TableSettingsPanel = ({
   availableColumns,
   onAddCalculatedColumn,
@@ -3998,7 +6320,7 @@ var TableSettingsPanel = ({
     onDataSourceConfigChange,
     tableConfig: tableConfigProp
   });
-  return /* @__PURE__ */ jsxs26("div", { ...htmlAttributes, className: classBase18, children: [
+  return /* @__PURE__ */ jsxs26("div", { ...htmlAttributes, className: classBase22, children: [
     /* @__PURE__ */ jsxs26(FormField5, { children: [
       /* @__PURE__ */ jsx36(FormFieldLabel5, { children: "Column Labels" }),
       /* @__PURE__ */ jsxs26(
@@ -4083,9 +6405,9 @@ var TableSettingsPanel = ({
         onMoveListItem
       }
     ),
-    /* @__PURE__ */ jsxs26("div", { className: `${classBase18}-calculatedButtonbar`, children: [
+    /* @__PURE__ */ jsxs26("div", { className: `${classBase22}-calculatedButtonbar`, children: [
       /* @__PURE__ */ jsx36(Button4, { "data-icon": "plus", onClick: onAddCalculatedColumn }),
-      /* @__PURE__ */ jsx36("span", { className: `${classBase18}-calculatedLabel`, children: "Add calculated column" })
+      /* @__PURE__ */ jsx36("span", { className: `${classBase22}-calculatedLabel`, children: "Add calculated column" })
     ] })
   ] });
 };