@vuu-ui/vuu-table 0.7.4-debug → 0.7.4

package/cjs/index.js

@@ -1,2847 +1,2 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var src_exports = {};
-__export(src_exports, {
-  Table: () => Table,
-  buildContextMenuDescriptors: () => buildContextMenuDescriptors,
-  useMeasuredContainer: () => useMeasuredContainer,
-  useTableContextMenu: () => useTableContextMenu,
-  useTableModel: () => useTableModel,
-  useTableViewport: () => useTableViewport
-});
-module.exports = __toCommonJS(src_exports);
-
-// src/context-menu/buildContextMenuDescriptors.ts
-var import_vuu_utils = require("@vuu-ui/vuu-utils");
-var buildContextMenuDescriptors = (dataSource) => (location, options) => {
-  const descriptors = [];
-  if (dataSource === void 0) {
-    return descriptors;
-  }
-  if (location === "header") {
-    descriptors.push(
-      ...buildSortMenuItems(options, dataSource)
-    );
-    descriptors.push(
-      ...buildGroupMenuItems(options, dataSource)
-    );
-    descriptors.push(
-      ...buildAggregationMenuItems(options, dataSource)
-    );
-    descriptors.push(...buildColumnDisplayMenuItems(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, label = name } = column;
-  return [
-    {
-      label: `Aggregate ${label}`,
-      children: [
-        { label: "Count", action: "agg-count", options },
-        { label: "Distinct", action: "agg-distinct", options }
-      ].concat(
-        (0, import_vuu_utils.isNumericColumn)(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, label = name } = 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;
-}
-
-// src/context-menu/useTableContextMenu.ts
-var import_vuu_filters = require("@vuu-ui/vuu-filters");
-var import_vuu_utils2 = require("@vuu-ui/vuu-utils");
-var removeFilterColumn = (dataSourceFilter, column) => {
-  if (dataSourceFilter.filterStruct && column) {
-    const [filterStruct, filter] = (0, import_vuu_filters.removeColumnFromFilter)(
-      column,
-      dataSourceFilter.filterStruct
-    );
-    return {
-      filter,
-      filterStruct
-    };
-  } else {
-    return dataSourceFilter;
-  }
-};
-var { Average, Count, Distinct, High, Low, Sum } = import_vuu_utils2.AggregationType;
-var useTableContextMenu = ({
-  dataSource,
-  onPersistentColumnOperation
-}) => {
-  const handleContextMenuAction = (type, options) => {
-    const gridOptions = options;
-    if (gridOptions.column && dataSource) {
-      const { column } = gridOptions;
-      switch (type) {
-        case "sort-asc":
-          return dataSource.sort = (0, import_vuu_utils2.setSortColumn)(dataSource.sort, column, "A"), true;
-        case "sort-dsc":
-          return dataSource.sort = (0, import_vuu_utils2.setSortColumn)(dataSource.sort, column, "D"), true;
-        case "sort-add-asc":
-          return dataSource.sort = (0, import_vuu_utils2.addSortColumn)(dataSource.sort, column, "A"), true;
-        case "sort-add-dsc":
-          return dataSource.sort = (0, import_vuu_utils2.addSortColumn)(dataSource.sort, column, "D"), true;
-        case "group":
-          return dataSource.groupBy = (0, import_vuu_utils2.addGroupColumn)(dataSource.groupBy, column), true;
-        case "group-add":
-          return dataSource.groupBy = (0, import_vuu_utils2.addGroupColumn)(dataSource.groupBy, column), true;
-        case "column-hide":
-          return onPersistentColumnOperation({ type: "hideColumns", columns: [column] }), true;
-        case "column-remove":
-          return dataSource.columns = dataSource.columns.filter((name) => name !== 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 = (0, import_vuu_utils2.setAggregations)(dataSource.aggregations, column, Average), true;
-        case "agg-high":
-          return dataSource.aggregations = (0, import_vuu_utils2.setAggregations)(dataSource.aggregations, column, High), true;
-        case "agg-low":
-          return dataSource.aggregations = (0, import_vuu_utils2.setAggregations)(dataSource.aggregations, column, Low), true;
-        case "agg-count":
-          return dataSource.aggregations = (0, import_vuu_utils2.setAggregations)(dataSource.aggregations, column, Count), true;
-        case "agg-distinct":
-          return dataSource.aggregations = (0, import_vuu_utils2.setAggregations)(dataSource.aggregations, column, Distinct), true;
-        case "agg-sum":
-          return dataSource.aggregations = (0, import_vuu_utils2.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;
-        default:
-      }
-    }
-    return false;
-  };
-  return handleContextMenuAction;
-};
-
-// src/Table.tsx
-var import_vuu_popups4 = require("@vuu-ui/vuu-popups");
-var import_core = require("@salt-ds/core");
-
-// src/RowBasedTable.tsx
-var import_vuu_utils6 = require("@vuu-ui/vuu-utils");
-var import_react9 = require("react");
-
-// src/TableRow.tsx
-var import_vuu_utils5 = require("@vuu-ui/vuu-utils");
-var import_classnames2 = __toESM(require("classnames"));
-var import_react3 = require("react");
-
-// src/TableCell.tsx
-var import_vuu_utils3 = require("@vuu-ui/vuu-utils");
-var import_salt_lab = require("@heswell/salt-lab");
-var import_classnames = __toESM(require("classnames"));
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var { KEY } = import_vuu_utils3.metadataKeys;
-var TableCell = (0, import_react.memo)(
-  ({
-    className: classNameProp,
-    column,
-    columnMap,
-    onClick,
-    row
-  }) => {
-    const labelFieldRef = (0, import_react.useRef)(null);
-    const {
-      align,
-      CellRenderer,
-      key,
-      pin,
-      editable,
-      resizing,
-      valueFormatter
-    } = column;
-    const [editing, setEditing] = (0, import_react.useState)(false);
-    const value = valueFormatter(row[key]);
-    const [editableValue, setEditableValue] = (0, import_react.useState)(value);
-    const handleTitleMouseDown = () => {
-      var _a;
-      (_a = labelFieldRef.current) == null ? void 0 : _a.focus();
-    };
-    const handleTitleKeyDown = (evt) => {
-      if (evt.key === "Enter") {
-        setEditing(true);
-      }
-    };
-    const handleClick = (0, import_react.useCallback)(
-      (evt) => {
-        onClick == null ? void 0 : onClick(evt, column);
-      },
-      [column, onClick]
-    );
-    const handleEnterEditMode = () => {
-      setEditing(true);
-    };
-    const handleExitEditMode = (originalValue = "", finalValue = "", allowDeactivation = true, editCancelled = false) => {
-      var _a;
-      setEditing(false);
-      if (editCancelled) {
-        setEditableValue(originalValue);
-      } else if (finalValue !== originalValue) {
-        setEditableValue(finalValue);
-      }
-      if (allowDeactivation === false) {
-        (_a = labelFieldRef.current) == null ? void 0 : _a.focus();
-      }
-    };
-    const className = (0, import_classnames.default)(classNameProp, {
-      vuuAlignRight: align === "right",
-      vuuPinFloating: pin === "floating",
-      vuuPinLeft: pin === "left",
-      vuuPinRight: pin === "right",
-      "vuuTableCell-resizing": resizing
-    }) || void 0;
-    const style = (0, import_vuu_utils3.getColumnStyle)(column);
-    return editable ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        className,
-        "data-editable": true,
-        role: "cell",
-        style,
-        onKeyDown: handleTitleKeyDown,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_salt_lab.EditableLabel,
-          {
-            editing,
-            value: editableValue,
-            onChange: setEditableValue,
-            onMouseDownCapture: handleTitleMouseDown,
-            onEnterEditMode: handleEnterEditMode,
-            onExitEditMode: handleExitEditMode,
-            onKeyDown: handleTitleKeyDown,
-            ref: labelFieldRef,
-            tabIndex: 0
-          },
-          "title"
-        )
-      }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        className,
-        role: "cell",
-        style,
-        onClick: handleClick,
-        children: CellRenderer ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CellRenderer, { column, columnMap, row }) : value
-      }
-    );
-  },
-  cellValuesAreEqual
-);
-TableCell.displayName = "TableCell";
-function cellValuesAreEqual(prev, next) {
-  return prev.column === next.column && prev.onClick === next.onClick && prev.row[KEY] === next.row[KEY] && prev.row[prev.column.key] === next.row[next.column.key];
-}
-
-// src/TableGroupCell.tsx
-var import_vuu_utils4 = require("@vuu-ui/vuu-utils");
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var { DEPTH, IS_LEAF } = import_vuu_utils4.metadataKeys;
-var getGroupValueAndOffset = (columns, row) => {
-  const { [DEPTH]: depth, [IS_LEAF]: isLeaf } = row;
-  if (isLeaf || depth > columns.length) {
-    return [null, depth === null ? 0 : Math.max(0, depth - 1)];
-  } else if (depth === 0) {
-    return ["$root", 0];
-  } else {
-    const { key, valueFormatter } = columns[depth - 1];
-    const value = valueFormatter(row[key]);
-    return [value, depth - 1];
-  }
-};
-var TableGroupCell = ({ column, onClick, row }) => {
-  const { columns } = column;
-  const [value, offset] = getGroupValueAndOffset(columns, row);
-  const handleClick = (0, import_react2.useCallback)(
-    (evt) => {
-      onClick == null ? void 0 : onClick(evt, column);
-    },
-    [column, onClick]
-  );
-  const style = (0, import_vuu_utils4.getColumnStyle)(column);
-  const isLeaf = row[IS_LEAF];
-  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vuuTableGroupCell-spacer" }, i));
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "div",
-    {
-      className: "vuuTableGroupCell vuuPinLeft",
-      onClick: isLeaf ? void 0 : handleClick,
-      role: "cell",
-      style,
-      children: [
-        spacers,
-        isLeaf ? null : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "vuuTableGroupCell-toggle", "data-icon": "triangle-right" }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: value })
-      ]
-    }
-  );
-};
-
-// src/TableRow.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var { IDX, IS_EXPANDED, SELECTED } = import_vuu_utils5.metadataKeys;
-var classBase = "vuuTableRow";
-var TableRow = (0, import_react3.memo)(function Row({
-  columnMap,
-  columns,
-  offset,
-  onClick,
-  onToggleGroup,
-  virtualColSpan = 0,
-  row
-}) {
-  const {
-    [IDX]: rowIndex,
-    [IS_EXPANDED]: isExpanded,
-    [SELECTED]: isSelected
-  } = row;
-  const className = (0, import_classnames2.default)(classBase, {
-    [`${classBase}-even`]: rowIndex % 2 === 0,
-    [`${classBase}-expanded`]: isExpanded,
-    [`${classBase}-preSelected`]: isSelected === 2
-  });
-  const handleRowClick = (0, import_react3.useCallback)(
-    (evt) => {
-      const rangeSelect = evt.shiftKey;
-      const keepExistingSelection = evt.ctrlKey || evt.metaKey;
-      onClick == null ? void 0 : onClick(row, rangeSelect, keepExistingSelection);
-    },
-    [onClick, row]
-  );
-  const handleGroupCellClick = (0, import_react3.useCallback)(
-    (evt, column) => {
-      if ((0, import_vuu_utils5.isGroupColumn)(column) || (0, import_vuu_utils5.isJsonGroup)(column, row)) {
-        evt.stopPropagation();
-        onToggleGroup == null ? void 0 : onToggleGroup(row, column);
-      }
-    },
-    [onToggleGroup, row]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
-    "div",
-    {
-      "aria-selected": isSelected === 1 ? true : void 0,
-      "aria-rowindex": rowIndex,
-      className,
-      onClick: handleRowClick,
-      role: "row",
-      style: {
-        transform: `translate3d(0px, ${offset}px, 0px)`
-      },
-      children: [
-        virtualColSpan > 0 ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "cell", style: { width: virtualColSpan } }) : null,
-        columns.filter(import_vuu_utils5.notHidden).map((column) => {
-          const isGroup = (0, import_vuu_utils5.isGroupColumn)(column);
-          const isJsonCell = (0, import_vuu_utils5.isJsonColumn)(column);
-          const Cell = isGroup ? TableGroupCell : TableCell;
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-            Cell,
-            {
-              column,
-              columnMap,
-              onClick: isGroup || isJsonCell ? handleGroupCellClick : void 0,
-              row
-            },
-            column.name
-          );
-        })
-      ]
-    }
-  );
-});
-
-// src/TableGroupHeaderCell.tsx
-var import_classnames3 = __toESM(require("classnames"));
-var import_react6 = require("react");
-
-// src/ColumnResizer.tsx
-var import_react4 = require("react");
-var import_jsx_runtime4 = require("react/jsx-runtime");
-var NOOP = () => void 0;
-var baseClass = "vuuColumnResizer";
-var ColumnResizer = ({
-  onDrag,
-  onDragEnd = NOOP,
-  onDragStart = NOOP
-}) => {
-  const position = (0, import_react4.useRef)(0);
-  const onMouseMove = (0, import_react4.useCallback)(
-    (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 = (0, import_react4.useCallback)(
-    (e) => {
-      window.removeEventListener("mouseup", onMouseUp);
-      window.removeEventListener("mousemove", onMouseMove);
-      onDragEnd(e);
-    },
-    [onDragEnd, onMouseMove]
-  );
-  const handleMouseDown = (0, import_react4.useCallback)(
-    (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__ */ (0, import_jsx_runtime4.jsx)("div", { className: baseClass, "data-align": "end", onMouseDown: handleMouseDown });
-};
-
-// src/useTableColumnResize.tsx
-var import_react5 = require("react");
-var useTableColumnResize = ({
-  column,
-  onResize,
-  rootRef
-}) => {
-  const widthRef = (0, import_react5.useRef)(0);
-  const isResizing = (0, import_react5.useRef)(false);
-  const { name } = column;
-  const handleResizeStart = (0, import_react5.useCallback)(() => {
-    if (onResize && rootRef.current) {
-      const { width } = rootRef.current.getBoundingClientRect();
-      widthRef.current = Math.round(width);
-      isResizing.current = true;
-      onResize == null ? void 0 : onResize("begin", name);
-    }
-  }, [name, onResize, rootRef]);
-  const handleResize = (0, import_react5.useCallback)(
-    (_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", name, newWidth);
-            widthRef.current = newWidth;
-          }
-        }
-      }
-    },
-    [name, onResize, rootRef]
-  );
-  const handleResizeEnd = (0, import_react5.useCallback)(() => {
-    if (onResize) {
-      onResize("end", name, widthRef.current);
-      setTimeout(() => {
-        isResizing.current = false;
-      }, 100);
-    }
-  }, [name, onResize]);
-  return {
-    isResizing: isResizing.current,
-    onDrag: handleResize,
-    onDragStart: handleResizeStart,
-    onDragEnd: handleResizeEnd
-  };
-};
-
-// src/TableGroupHeaderCell.tsx
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var classBase2 = "vuuTable-groupHeaderCell";
-var RemoveButton = ({
-  column,
-  onClick,
-  ...htmlAttributes
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "span",
-    {
-      ...htmlAttributes,
-      className: `${classBase2}-close`,
-      "data-icon": "close-circle",
-      onClick: () => onClick == null ? void 0 : onClick(column)
-    }
-  );
-};
-var ColHeader = (props) => {
-  const { children, column, className } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: (0, import_classnames3.default)(`${classBase2}-col`, className), role: "columnheader", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `${classBase2}-label`, children: column.name }),
-    children
-  ] });
-};
-var TableGroupHeaderCell = ({
-  column: groupColumn,
-  className: classNameProp,
-  onRemoveColumn,
-  onResize,
-  ...props
-}) => {
-  const rootRef = (0, import_react6.useRef)(null);
-  const { isResizing, ...resizeProps } = useTableColumnResize({
-    column: groupColumn,
-    onResize,
-    rootRef
-  });
-  const className = (0, import_classnames3.default)(classBase2, classNameProp, {
-    vuuPinLeft: groupColumn.pin === "left",
-    [`${classBase2}-right`]: groupColumn.align === "right",
-    [`${classBase2}-resizing`]: groupColumn.resizing,
-    [`${classBase2}-pending`]: groupColumn.groupConfirmed === false
-  });
-  const { columns } = groupColumn;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className, ref: rootRef, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: `${classBase2}-inner`, children: [
-    columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ColHeader, { column, children: columns.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RemoveButton, { column, onClick: onRemoveColumn }) : null }, column.key)),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RemoveButton, { "data-align": "end", onClick: onRemoveColumn }),
-    groupColumn.resizeable !== false ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ColumnResizer, { ...resizeProps }) : null
-  ] }) });
-};
-
-// src/TableHeaderCell.tsx
-var import_classnames6 = __toESM(require("classnames"));
-var import_react8 = require("react");
-
-// src/SortIndicator.tsx
-var import_classnames4 = __toESM(require("classnames"));
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var classBase3 = "vuuSortIndicator";
-var SortIndicator = ({ sorted }) => {
-  if (!sorted) {
-    return null;
-  }
-  const direction = typeof sorted === "number" ? sorted < 0 ? "dsc" : "asc" : sorted === "A" ? "asc" : "dsc";
-  return typeof sorted === "number" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: (0, import_classnames4.default)(classBase3, "multi-col", direction), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "data-icon": `sorted-${direction}` }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "vuuSortPosition", children: Math.abs(sorted) })
-  ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: (0, import_classnames4.default)(classBase3, "single-col"), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "data-icon": `sorted-${direction}` }) });
-};
-
-// src/TableHeaderCell.tsx
-var import_vuu_popups2 = require("@vuu-ui/vuu-popups");
-
-// src/filter-indicator.tsx
-var import_vuu_popups = require("@vuu-ui/vuu-popups");
-var import_classnames5 = __toESM(require("classnames"));
-var import_react7 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var FilterIndicator = ({ column, filter }) => {
-  const showContextMenu = (0, import_vuu_popups.useContextMenu)();
-  const handleClick = (0, import_react7.useCallback)(
-    (evt) => {
-      evt.stopPropagation();
-      showContextMenu(evt, "filter", { column, filter });
-    },
-    [column, filter, showContextMenu]
-  );
-  if (!column.filter) {
-    return null;
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "div",
-    {
-      className: (0, import_classnames5.default)("vuuFilterIndicator"),
-      "data-icon": "filter",
-      onClick: handleClick
-    }
-  );
-};
-
-// src/TableHeaderCell.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var classBase4 = "vuuTable-headerCell";
-var TableHeaderCell = ({
-  column,
-  className: classNameProp,
-  onClick,
-  onDragStart,
-  onResize,
-  ...props
-}) => {
-  const rootRef = (0, import_react8.useRef)(null);
-  const { isResizing, ...resizeProps } = useTableColumnResize({
-    column,
-    onResize,
-    rootRef
-  });
-  const showContextMenu = (0, import_vuu_popups2.useContextMenu)();
-  const dragTimerRef = (0, import_react8.useRef)(null);
-  const handleContextMenu = (e) => {
-    showContextMenu(e, "header", { column });
-  };
-  const handleClick = (0, import_react8.useCallback)(
-    (evt) => !isResizing && (onClick == null ? void 0 : onClick(evt)),
-    [isResizing, onClick]
-  );
-  const handleMouseDown = (0, import_react8.useCallback)(
-    (evt) => {
-      dragTimerRef.current = window.setTimeout(() => {
-        onDragStart == null ? void 0 : onDragStart(evt);
-        dragTimerRef.current = null;
-      }, 500);
-    },
-    [onDragStart]
-  );
-  const handleMouseUp = (0, import_react8.useCallback)(() => {
-    if (dragTimerRef.current !== null) {
-      window.clearTimeout(dragTimerRef.current);
-      dragTimerRef.current = null;
-    }
-  }, []);
-  const className = (0, import_classnames6.default)(classBase4, classNameProp, {
-    vuuPinFloating: column.pin === "floating",
-    vuuPinLeft: column.pin === "left",
-    vuuPinRight: column.pin === "right",
-    vuuEndPin: column.endPin,
-    [`${classBase4}-resizing`]: column.resizing,
-    [`${classBase4}-right`]: column.align === "right"
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-    "div",
-    {
-      className,
-      ...props,
-      onClick: handleClick,
-      onContextMenu: handleContextMenu,
-      onMouseDown: handleMouseDown,
-      onMouseUp: handleMouseUp,
-      ref: rootRef,
-      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: `${classBase4}-inner`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FilterIndicator, { column }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `${classBase4}-label`, children: column.label }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SortIndicator, { sorted: column.sorted }),
-        column.resizeable !== false ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ColumnResizer, { ...resizeProps }) : null
-      ] })
-    }
-  );
-};
-
-// src/RowBasedTable.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var classBase5 = "vuuTable";
-var { RENDER_IDX } = import_vuu_utils6.metadataKeys;
-var RowBasedTable = ({
-  columns,
-  columnsWithinViewport,
-  data,
-  getRowOffset,
-  headings,
-  onColumnResize,
-  onHeaderCellDragStart,
-  onContextMenu,
-  onRemoveColumnFromGroupBy,
-  onRowClick,
-  onSort,
-  onToggleGroup,
-  tableId,
-  virtualColSpan = 0,
-  rowCount
-}) => {
-  const handleDragStart = (0, import_react9.useCallback)(
-    (evt) => {
-      onHeaderCellDragStart == null ? void 0 : onHeaderCellDragStart(evt);
-    },
-    [onHeaderCellDragStart]
-  );
-  const visibleColumns = (0, import_react9.useMemo)(() => {
-    return columns.filter(import_vuu_utils6.notHidden);
-  }, [columns]);
-  const columnMap = (0, import_react9.useMemo)(() => (0, import_vuu_utils6.buildColumnMap)(columns), [columns]);
-  const handleHeaderClick = (0, import_react9.useCallback)(
-    (evt) => {
-      var _a;
-      const targetElement = evt.target;
-      const headerCell = targetElement.closest(
-        ".vuuTable-headerCell"
-      );
-      const colIdx = parseInt((_a = headerCell == null ? void 0 : headerCell.dataset.idx) != null ? _a : "-1");
-      const column = (0, import_vuu_utils6.visibleColumnAtIndex)(columns, colIdx);
-      const isAdditive = evt.shiftKey;
-      column && onSort(column, isAdditive);
-    },
-    [columns, onSort]
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { "aria-rowcount": rowCount, className: `${classBase5}-table`, role: "table", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `${classBase5}-headers`, role: "rowGroup", children: [
-      headings.map((colHeaders, i) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "vuuTable-heading", children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j)) }, i)),
-      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { role: "row", children: visibleColumns.map((column, i) => {
-        const style = (0, import_vuu_utils6.getColumnStyle)(column);
-        return (0, import_vuu_utils6.isGroupColumn)(column) ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          TableGroupHeaderCell,
-          {
-            column,
-            "data-idx": i,
-            onRemoveColumn: onRemoveColumnFromGroupBy,
-            onResize: onColumnResize,
-            role: "columnHeader",
-            style
-          },
-          i
-        ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          TableHeaderCell,
-          {
-            column,
-            "data-idx": i,
-            id: `${tableId}-${i}`,
-            onClick: handleHeaderClick,
-            onDragStart: handleDragStart,
-            onResize: onColumnResize,
-            role: "columnHeader",
-            style
-          },
-          i
-        );
-      }) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-      "div",
-      {
-        className: `${classBase5}-body`,
-        onContextMenu,
-        role: "rowGroup",
-        children: data == null ? void 0 : data.map((row) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          TableRow,
-          {
-            columnMap,
-            columns: columnsWithinViewport,
-            offset: getRowOffset(row),
-            onClick: onRowClick,
-            virtualColSpan,
-            onToggleGroup,
-            row
-          },
-          row[RENDER_IDX]
-        ))
-      }
-    )
-  ] });
-};
-
-// src/useTable.ts
-var import_vuu_popups3 = require("@vuu-ui/vuu-popups");
-var import_vuu_utils14 = require("@vuu-ui/vuu-utils");
-var import_react20 = require("react");
-
-// src/useDataSource.ts
-var import_vuu_data = require("@vuu-ui/vuu-data");
-var import_vuu_utils7 = require("@vuu-ui/vuu-utils");
-var import_react10 = require("react");
-var { SELECTED: SELECTED2 } = import_vuu_utils7.metadataKeys;
-function useDataSource({
-  dataSource,
-  onConfigChange,
-  onFeatureEnabled,
-  onFeatureInvocation,
-  onSizeChange,
-  onSubscribed,
-  range = { from: 0, to: 0 },
-  renderBufferSize = 0,
-  viewportRowCount
-}) {
-  const [, forceUpdate] = (0, import_react10.useState)(null);
-  const isMounted = (0, import_react10.useRef)(true);
-  const hasUpdated = (0, import_react10.useRef)(false);
-  const rangeRef = (0, import_react10.useRef)({ from: 0, to: 0 });
-  const rafHandle = (0, import_react10.useRef)(null);
-  const data = (0, import_react10.useRef)([]);
-  const dataWindow = (0, import_react10.useMemo)(
-    () => new MovingWindow((0, import_vuu_utils7.getFullRange)(range)),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-  const setData = (0, import_react10.useCallback)(
-    (updates) => {
-      for (const row of updates) {
-        dataWindow.add(row);
-      }
-      data.current = dataWindow.data;
-      hasUpdated.current = true;
-    },
-    [dataWindow]
-  );
-  const datasourceMessageHandler = (0, import_react10.useCallback)(
-    (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 ((0, import_vuu_data.isVuuFeatureAction)(message)) {
-        onFeatureEnabled == null ? void 0 : onFeatureEnabled(message);
-      } else if ((0, import_vuu_data.isVuuFeatureInvocation)(message)) {
-        onFeatureInvocation == null ? void 0 : onFeatureInvocation(message);
-      } else {
-        console.log(`useDataSource unexpected message ${message.type}`);
-      }
-    },
-    [
-      dataWindow,
-      onFeatureEnabled,
-      onFeatureInvocation,
-      onSizeChange,
-      onSubscribed,
-      setData
-    ]
-  );
-  (0, import_react10.useEffect)(
-    () => () => {
-      if (rafHandle.current) {
-        cancelAnimationFrame(rafHandle.current);
-        rafHandle.current = null;
-      }
-      isMounted.current = false;
-    },
-    []
-  );
-  const refreshIfUpdated = (0, import_react10.useCallback)(() => {
-    if (isMounted.current) {
-      if (hasUpdated.current) {
-        forceUpdate({});
-        hasUpdated.current = false;
-      }
-      rafHandle.current = requestAnimationFrame(refreshIfUpdated);
-    }
-  }, [forceUpdate]);
-  (0, import_react10.useEffect)(() => {
-    rafHandle.current = requestAnimationFrame(refreshIfUpdated);
-  }, [refreshIfUpdated]);
-  const adjustRange = (0, import_react10.useCallback)(
-    (rowCount) => {
-      const { from } = dataSource.range;
-      const rowRange = { from, to: from + rowCount };
-      const fullRange = (0, import_vuu_utils7.getFullRange)(rowRange, renderBufferSize);
-      dataWindow.setRange(fullRange);
-      dataSource.range = rangeRef.current = fullRange;
-      dataSource.emit("range", rowRange);
-    },
-    [dataSource, dataWindow, renderBufferSize]
-  );
-  const setRange = (0, import_react10.useCallback)(
-    (range2) => {
-      const fullRange = (0, import_vuu_utils7.getFullRange)(range2, renderBufferSize);
-      dataWindow.setRange(fullRange);
-      dataSource.range = rangeRef.current = fullRange;
-      dataSource.emit("range", range2);
-    },
-    [dataSource, dataWindow, renderBufferSize]
-  );
-  const getSelectedRows = (0, import_react10.useCallback)(() => {
-    return dataWindow.getSelectedRows();
-  }, [dataWindow]);
-  (0, import_react10.useEffect)(() => {
-    dataSource == null ? void 0 : dataSource.subscribe(
-      {
-        range: rangeRef.current
-      },
-      datasourceMessageHandler
-    );
-  }, [dataSource, datasourceMessageHandler, onConfigChange]);
-  (0, import_react10.useEffect)(() => {
-    adjustRange(viewportRowCount);
-  }, [adjustRange, viewportRowCount]);
-  return {
-    data: data.current,
-    getSelectedRows,
-    range: rangeRef.current,
-    setRange,
-    dataSource
-  };
-}
-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 import_vuu_utils7.WindowRange(from, to);
-    this.data = new Array(to - from);
-    this.rowCount = 0;
-  }
-  add(data) {
-    var _a;
-    const [index] = data;
-    if (this.isWithinRange(index)) {
-      const internalIndex = index - this.range.from;
-      this.data[internalIndex] = data;
-      const isSelected = data[SELECTED2];
-      const preSelected = (_a = this.data[internalIndex - 1]) == null ? void 0 : _a[SELECTED2];
-      if (preSelected === 0 && isSelected) {
-        this.data[internalIndex - 1][SELECTED2] = 2;
-      } else if (preSelected === 2 && !isSelected) {
-        this.data[internalIndex - 1][SELECTED2] = 0;
-      }
-    }
-  }
-  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[SELECTED2] === 1);
-  }
-};
-
-// src/useDraggableColumn.ts
-var import_salt_lab2 = require("@heswell/salt-lab");
-var import_react11 = require("react");
-var useDraggableColumn = ({ onDrop }) => {
-  const mousePosRef = (0, import_react11.useRef)();
-  const containerRef = (0, import_react11.useRef)(null);
-  const handleDropSettle = (0, import_react11.useCallback)(() => {
-    console.log(`handleDropSettle`);
-    mousePosRef.current = void 0;
-    containerRef.current = null;
-  }, []);
-  const { draggable, draggedItemIndex, onMouseDown } = (0, import_salt_lab2.useDragDrop)({
-    // allowDragDrop: "drop-indicator",
-    allowDragDrop: true,
-    draggableClassName: "vuuTable-headerCell",
-    orientation: "horizontal",
-    containerRef,
-    itemQuery: ".vuuTable-headerCell",
-    onDrop,
-    onDropSettle: handleDropSettle
-  });
-  const onHeaderCellDragStart = (0, import_react11.useCallback)(
-    (evt) => {
-      const { clientX, clientY } = evt;
-      console.log(
-        `useDraggableColumn handleHeaderCellDragStart means mouseDown fired on a column in RowBasedTable`
-      );
-      const sourceElement = evt.target;
-      const columnHeaderCell = sourceElement.closest(".vuuTable-headerCell");
-      containerRef.current = columnHeaderCell == null ? void 0 : columnHeaderCell.closest(
-        "[role='row']"
-      );
-      const {
-        dataset: { idx = "-1" }
-      } = columnHeaderCell;
-      mousePosRef.current = {
-        clientX,
-        clientY,
-        idx
-      };
-      onMouseDown == null ? void 0 : onMouseDown(evt);
-    },
-    [onMouseDown]
-  );
-  return {
-    draggable,
-    draggedItemIndex,
-    onHeaderCellDragStart
-  };
-};
-
-// src/useKeyboardNavigation.ts
-var import_vuu_utils8 = require("@vuu-ui/vuu-utils");
-var import_react12 = require("react");
-
-// src/keyUtils.ts
-function union(set1, ...sets) {
-  const result = new Set(set1);
-  for (let set of sets) {
-    for (let element of set) {
-      result.add(element);
-    }
-  }
-  return result;
-}
-var ArrowUp = "ArrowUp";
-var ArrowDown = "ArrowDown";
-var ArrowLeft = "ArrowLeft";
-var ArrowRight = "ArrowRight";
-var Home = "Home";
-var End = "End";
-var PageUp = "PageUp";
-var PageDown = "PageDown";
-var actionKeys = /* @__PURE__ */ new Set(["Enter", "Delete", " "]);
-var focusKeys = /* @__PURE__ */ new Set(["Tab"]);
-var arrowLeftRightKeys = /* @__PURE__ */ new Set(["ArrowRight", "ArrowLeft"]);
-var navigationKeys = /* @__PURE__ */ new Set([
-  Home,
-  End,
-  PageUp,
-  PageDown,
-  ArrowDown,
-  ArrowLeft,
-  ArrowRight,
-  ArrowUp
-]);
-var functionKeys = /* @__PURE__ */ new Set([
-  "F1",
-  "F2",
-  "F3",
-  "F4",
-  "F5",
-  "F6",
-  "F7",
-  "F8",
-  "F9",
-  "F10",
-  "F11",
-  "F12"
-]);
-var specialKeys = union(
-  actionKeys,
-  navigationKeys,
-  arrowLeftRightKeys,
-  functionKeys,
-  focusKeys
-);
-var PageKeys = ["Home", "End", "PageUp", "PageDown"];
-var isPagingKey = (key) => PageKeys.includes(key);
-var isNavigationKey = (key) => {
-  return navigationKeys.has(key);
-};
-
-// src/useKeyboardNavigation.ts
-var headerCellQuery = (colIdx) => `.vuuTable-headers .vuuTable-headerCell:nth-child(${colIdx + 1})`;
-var dataCellQuery = (rowIdx, colIdx) => `.vuuTable-body > [aria-rowindex='${rowIdx}'] > [role='cell']:nth-child(${colIdx + 1})`;
-var NULL_CELL_POS = [-1, -1];
-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 > 0) {
-      return [rowIdx, colIdx - 1];
-    } else {
-      return [rowIdx, colIdx];
-    }
-  }
-  return [rowIdx, colIdx];
-}
-var useKeyboardNavigation = ({
-  columnCount = 0,
-  containerRef,
-  disableHighlightOnFocus,
-  data,
-  requestScroll,
-  rowCount = 0,
-  viewportRange
-}) => {
-  var _a;
-  const { from: viewportFirstRow, to: viewportLastRow } = viewportRange;
-  const focusedCellPos = (0, import_react12.useRef)([-1, -1]);
-  const focusableCell = (0, import_react12.useRef)();
-  const activeCellPos = (0, import_react12.useRef)([-1, 0]);
-  const getTableCell = (0, import_react12.useCallback)(
-    ([rowIdx, colIdx]) => {
-      var _a2;
-      const cssQuery = rowIdx === -1 ? headerCellQuery(colIdx) : dataCellQuery(rowIdx, colIdx);
-      return (_a2 = containerRef.current) == null ? void 0 : _a2.querySelector(
-        cssQuery
-      );
-    },
-    [containerRef]
-  );
-  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 = (0, import_react12.useCallback)(
-    (cellPos) => {
-      var _a2;
-      if (containerRef.current) {
-        const activeCell = getTableCell(cellPos);
-        if (activeCell) {
-          if (activeCell !== focusableCell.current) {
-            (_a2 = focusableCell.current) == null ? void 0 : _a2.setAttribute("tabindex", "");
-            focusableCell.current = activeCell;
-            activeCell.setAttribute("tabindex", "0");
-          }
-          activeCell.focus();
-        } else if (!(0, import_vuu_utils8.withinRange)(cellPos[0], viewportRange)) {
-          focusableCell.current = void 0;
-          requestScroll == null ? void 0 : requestScroll({ type: "scroll-page", direction: "up" });
-        }
-      }
-    },
-    // TODO we recreate this function whenever viewportRange changes, which will
-    // be often whilst scrolling - store range in a a ref ?
-    [containerRef, getTableCell, requestScroll, viewportRange]
-  );
-  const setActiveCell = (0, import_react12.useCallback)(
-    (rowIdx, colIdx, fromKeyboard = false) => {
-      const pos = [rowIdx, colIdx];
-      activeCellPos.current = pos;
-      focusCell(pos);
-      if (fromKeyboard) {
-        focusedCellPos.current = pos;
-      }
-    },
-    [focusCell]
-  );
-  const virtualizeActiveCell = (0, import_react12.useCallback)(() => {
-    var _a2;
-    (_a2 = focusableCell.current) == null ? void 0 : _a2.setAttribute("tabindex", "");
-    focusableCell.current = void 0;
-  }, []);
-  const nextPageItemIdx = (0, import_react12.useCallback)(
-    async (key, cellPos) => {
-      switch (key) {
-        case PageDown:
-          requestScroll == null ? void 0 : requestScroll({ type: "scroll-page", direction: "down" });
-          break;
-        case PageUp:
-          requestScroll == null ? void 0 : requestScroll({ type: "scroll-page", direction: "up" });
-          break;
-        case Home:
-          requestScroll == null ? void 0 : requestScroll({ type: "scroll-end", direction: "home" });
-          break;
-        case End:
-          requestScroll == null ? void 0 : requestScroll({ type: "scroll-end", direction: "end" });
-          break;
-      }
-      return cellPos;
-    },
-    [requestScroll]
-  );
-  const handleFocus = (0, import_react12.useCallback)(() => {
-    var _a2;
-    if (disableHighlightOnFocus !== true) {
-      if ((_a2 = containerRef.current) == null ? void 0 : _a2.contains(document.activeElement)) {
-        const focusedCell = getFocusedCell(document.activeElement);
-        if (focusedCell) {
-          focusedCellPos.current = getTableCellPos(focusedCell);
-        }
-      }
-    }
-  }, [disableHighlightOnFocus, containerRef]);
-  const navigateChildItems = (0, import_react12.useCallback)(
-    async (key) => {
-      const [nextRowIdx, nextColIdx] = isPagingKey(key) ? await nextPageItemIdx(key, activeCellPos.current) : nextCellPos(key, activeCellPos.current, columnCount, rowCount);
-      const [rowIdx, colIdx] = activeCellPos.current;
-      if (nextRowIdx !== rowIdx || nextColIdx !== colIdx) {
-        setActiveCell(nextRowIdx, nextColIdx, true);
-      }
-    },
-    [columnCount, nextPageItemIdx, rowCount, setActiveCell]
-  );
-  const handleKeyDown = (0, import_react12.useCallback)(
-    (e) => {
-      if (data.length > 0 && isNavigationKey(e.key)) {
-        e.preventDefault();
-        e.stopPropagation();
-        void navigateChildItems(e.key);
-      }
-    },
-    [data, navigateChildItems]
-  );
-  const handleClick = (0, import_react12.useCallback)(
-    // 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 containerProps = (0, import_react12.useMemo)(() => {
-    return {
-      onClick: handleClick,
-      onFocus: handleFocus,
-      onKeyDown: handleKeyDown
-    };
-  }, [handleClick, handleFocus, handleKeyDown]);
-  (0, import_react12.useLayoutEffect)(() => {
-    const { current: cellPos } = activeCellPos;
-    const withinViewport = cellPos[0] >= viewportFirstRow && cellPos[0] <= viewportLastRow;
-    if (focusableCell.current && !withinViewport) {
-      virtualizeActiveCell();
-    } else if (!focusableCell.current && withinViewport) {
-      focusCell(cellPos);
-    }
-  }, [focusCell, viewportFirstRow, viewportLastRow, virtualizeActiveCell]);
-  const fullyRendered = ((_a = containerRef.current) == null ? void 0 : _a.firstChild) != null;
-  (0, import_react12.useEffect)(() => {
-    var _a2;
-    if (fullyRendered && focusableCell.current === void 0) {
-      const headerCell = (_a2 = containerRef.current) == null ? void 0 : _a2.querySelector(
-        headerCellQuery(0)
-      );
-      if (headerCell) {
-        headerCell.setAttribute("tabindex", "0");
-        focusableCell.current = headerCell;
-      }
-    }
-  }, [containerRef, fullyRendered]);
-  return containerProps;
-};
-
-// src/useMeasuredContainer.ts
-var import_vuu_utils9 = require("@vuu-ui/vuu-utils");
-var import_react14 = require("react");
-
-// src/useResizeObserver.ts
-var import_react13 = require("react");
-var observedMap = /* @__PURE__ */ new Map();
-var getTargetSize = (element, size, dimension) => {
-  switch (dimension) {
-    case "height":
-      return size.height;
-    case "clientHeight":
-      return element.clientHeight;
-    case "clientWidth":
-      return element.clientWidth;
-    case "contentHeight":
-      return size.contentHeight;
-    case "contentWidth":
-      return size.contentWidth;
-    case "scrollHeight":
-      return Math.ceil(element.scrollHeight);
-    case "scrollWidth":
-      return Math.ceil(element.scrollWidth);
-    case "width":
-      return size.width;
-    default:
-      return 0;
-  }
-};
-var resizeObserver = new ResizeObserver((entries) => {
-  for (const entry of entries) {
-    const { target, borderBoxSize, contentBoxSize } = entry;
-    const observedTarget = observedMap.get(target);
-    if (observedTarget) {
-      const [{ blockSize: height, inlineSize: width }] = borderBoxSize;
-      const [{ blockSize: contentHeight, inlineSize: contentWidth }] = contentBoxSize;
-      const { onResize, measurements } = observedTarget;
-      let sizeChanged = false;
-      for (const [dimension, size] of Object.entries(measurements)) {
-        const newSize = getTargetSize(
-          target,
-          { height, width, contentHeight, contentWidth },
-          dimension
-        );
-        if (newSize !== size) {
-          sizeChanged = true;
-          measurements[dimension] = newSize;
-        }
-      }
-      if (sizeChanged) {
-        onResize && onResize(measurements);
-      }
-    }
-  }
-});
-function useResizeObserver(ref, dimensions, onResize, reportInitialSize = false) {
-  const dimensionsRef = (0, import_react13.useRef)(dimensions);
-  const measure = (0, import_react13.useCallback)((target) => {
-    const { width, height } = target.getBoundingClientRect();
-    const { clientWidth: contentWidth, clientHeight: contentHeight } = target;
-    return dimensionsRef.current.reduce(
-      (map, dim) => {
-        map[dim] = getTargetSize(
-          target,
-          { width, height, contentHeight, contentWidth },
-          dim
-        );
-        return map;
-      },
-      {}
-    );
-  }, []);
-  (0, import_react13.useEffect)(() => {
-    const target = ref.current;
-    async function registerObserver() {
-      observedMap.set(target, { measurements: {} });
-      await document.fonts.ready;
-      const observedTarget = observedMap.get(target);
-      if (observedTarget) {
-        const measurements = measure(target);
-        observedTarget.measurements = measurements;
-        resizeObserver.observe(target);
-        if (reportInitialSize) {
-          onResize(measurements);
-        }
-      } else {
-        console.log(
-          `%cuseResizeObserver an target expected to be under observation wa snot found. This warrants investigation`,
-          "font-weight:bold; color:red;"
-        );
-      }
-    }
-    if (target) {
-      if (observedMap.has(target)) {
-        throw Error(
-          "useResizeObserver attemping to observe same element twice"
-        );
-      }
-      registerObserver();
-    }
-    return () => {
-      if (target && observedMap.has(target)) {
-        resizeObserver.unobserve(target);
-        observedMap.delete(target);
-      }
-    };
-  }, [measure, ref]);
-  (0, import_react13.useEffect)(() => {
-    const target = ref.current;
-    const record = observedMap.get(target);
-    if (record) {
-      if (dimensionsRef.current !== dimensions) {
-        dimensionsRef.current = dimensions;
-        const measurements = measure(target);
-        record.measurements = measurements;
-      }
-      record.onResize = onResize;
-    }
-  }, [dimensions, measure, ref, onResize]);
-}
-
-// src/useMeasuredContainer.ts
-var ClientWidthHeight = ["clientHeight", "clientWidth"];
-var isNumber = (val) => Number.isFinite(val);
-var FULL_SIZE = { height: "100%", width: "100%" };
-var getInitialCssSize = (height, width) => {
-  if ((0, import_vuu_utils9.isValidNumber)(height) && (0, import_vuu_utils9.isValidNumber)(width)) {
-    return {
-      height: `${height}px`,
-      width: `${width}px`
-    };
-  } else {
-    return FULL_SIZE;
-  }
-};
-var getInitialInnerSize = (height, width) => {
-  if ((0, import_vuu_utils9.isValidNumber)(height) && (0, import_vuu_utils9.isValidNumber)(width)) {
-    return {
-      height,
-      width
-    };
-  }
-};
-var useMeasuredContainer = ({
-  defaultHeight = 0,
-  defaultWidth = 0,
-  height,
-  width
-}) => {
-  const containerRef = (0, import_react14.useRef)(null);
-  const [size, setSize] = (0, import_react14.useState)({
-    css: getInitialCssSize(height, width),
-    inner: getInitialInnerSize(height, width),
-    outer: {
-      height: height != null ? height : "100%",
-      width: width != null ? width : "100%"
-    }
-  });
-  (0, import_react14.useMemo)(() => {
-    setSize((currentSize) => {
-      const { inner, outer } = currentSize;
-      if ((0, import_vuu_utils9.isValidNumber)(height) && (0, import_vuu_utils9.isValidNumber)(width) && inner && outer) {
-        const { height: innerHeight, width: innerWidth } = inner;
-        const { height: outerHeight, width: outerWidth } = outer;
-        if (outerHeight !== height || outerWidth !== width) {
-          const heightDiff = (0, import_vuu_utils9.isValidNumber)(outerHeight) ? outerHeight - innerHeight : 0;
-          const widthDiff = (0, import_vuu_utils9.isValidNumber)(outerWidth) ? outerWidth - innerWidth : 0;
-          return {
-            ...currentSize,
-            outer: { height, width },
-            inner: { height: height - heightDiff, width: width - widthDiff }
-          };
-        }
-      }
-      return currentSize;
-    });
-  }, [height, width]);
-  const onResize = (0, import_react14.useCallback)(
-    ({ clientWidth, clientHeight }) => {
-      setSize((currentSize) => {
-        const { css, inner, outer } = currentSize;
-        return isNumber(clientHeight) && isNumber(clientWidth) && (clientWidth !== (inner == null ? void 0 : inner.width) || clientHeight !== (inner == null ? void 0 : inner.height)) ? {
-          css,
-          outer,
-          inner: {
-            width: Math.floor(clientWidth) || defaultWidth,
-            height: Math.floor(clientHeight) || defaultHeight
-          }
-        } : currentSize;
-      });
-    },
-    [defaultHeight, defaultWidth]
-  );
-  useResizeObserver(containerRef, ClientWidthHeight, onResize, true);
-  return {
-    containerRef,
-    cssSize: size.css,
-    outerSize: size.outer,
-    innerSize: size.inner
-  };
-};
-
-// src/useSelection.ts
-var import_vuu_utils10 = require("@vuu-ui/vuu-utils");
-var import_react15 = require("react");
-var { IDX: IDX2, SELECTED: SELECTED3 } = import_vuu_utils10.metadataKeys;
-var NO_SELECTION = [];
-var useSelection = ({
-  selectionModel,
-  onSelectionChange
-}) => {
-  selectionModel === "extended" || selectionModel === "checkbox";
-  const lastActiveRef = (0, import_react15.useRef)(-1);
-  const selectedRef = (0, import_react15.useRef)(NO_SELECTION);
-  const handleSelectionChange = (0, import_react15.useCallback)(
-    (row, rangeSelect, keepExistingSelection) => {
-      const { [IDX2]: idx, [SELECTED3]: isSelected } = row;
-      const { current: active } = lastActiveRef;
-      const { current: selected } = selectedRef;
-      const selectOperation = isSelected ? import_vuu_utils10.deselectItem : import_vuu_utils10.selectItem;
-      const newSelected = selectOperation(
-        selectionModel,
-        selected,
-        idx,
-        rangeSelect,
-        keepExistingSelection,
-        active
-      );
-      selectedRef.current = newSelected;
-      lastActiveRef.current = idx;
-      if (onSelectionChange) {
-        onSelectionChange(newSelected);
-      }
-    },
-    [onSelectionChange, selectionModel]
-  );
-  return handleSelectionChange;
-};
-
-// src/useTableModel.ts
-var import_salt_lab3 = require("@heswell/salt-lab");
-var import_vuu_utils11 = require("@vuu-ui/vuu-utils");
-var import_react16 = require("react");
-var { info } = (0, import_vuu_utils11.logger)("useTableModel");
-var DEFAULT_COLUMN_WIDTH = 100;
-var KEY_OFFSET = import_vuu_utils11.metadataKeys.count;
-var columnWithoutDataType = ({ serverDataType }) => serverDataType === void 0;
-var getCellRendererForColumn = (column) => {
-  var _a;
-  if ((0, import_vuu_utils11.isTypeDescriptor)(column.type)) {
-    return (0, import_vuu_utils11.getCellRenderer)((_a = column.type) == null ? void 0 : _a.renderer);
-  }
-};
-var getServerDataTypeForColumn = (column, tableSchema) => {
-  if (column.serverDataType) {
-    return column.serverDataType;
-  } else if (tableSchema) {
-    const schemaColumn = tableSchema.columns.find(
-      (col) => col.name === column.name
-    );
-    if (schemaColumn) {
-      return schemaColumn.serverDataType;
-    }
-  }
-  return "string";
-};
-var numericTypes = ["int", "long", "double"];
-var getDefaultAlignment = (serverDataType) => serverDataType === void 0 ? void 0 : numericTypes.includes(serverDataType) ? "right" : "left";
-var columnReducer = (state, action) => {
-  info == null ? void 0 : info(`GridModelReducer ${action.type}`);
-  switch (action.type) {
-    case "init":
-      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 updateTableConfig(state, action);
-    default:
-      console.log(`unhandled action ${action.type}`);
-      return state;
-  }
-};
-var useTableModel = (tableConfig, dataSourceConfig) => {
-  const [state, dispatchColumnAction] = (0, import_react16.useReducer)(columnReducer, { tableConfig, dataSourceConfig }, init);
-  return {
-    columns: state.columns,
-    dispatchColumnAction,
-    headings: state.headings
-  };
-};
-function init({ dataSourceConfig, tableConfig }) {
-  const columns = tableConfig.columns.map(
-    toKeyedColumWithDefaults(tableConfig)
-  );
-  const maybePinnedColumns = columns.some(import_vuu_utils11.isPinned) ? (0, import_vuu_utils11.sortPinnedColumns)(columns) : columns;
-  const state = {
-    columns: maybePinnedColumns,
-    headings: (0, import_vuu_utils11.getTableHeadings)(maybePinnedColumns)
-  };
-  if (dataSourceConfig) {
-    const { columns: columns2, ...rest } = dataSourceConfig;
-    return updateTableConfig(state, {
-      type: "tableConfig",
-      ...rest
-    });
-  } else {
-    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 toKeyedColumWithDefaults = (options) => (column, index) => {
-  const serverDataType = getServerDataTypeForColumn(
-    column,
-    options.tableSchema
-  );
-  const { columnDefaultWidth = DEFAULT_COLUMN_WIDTH, columnFormatHeader } = options;
-  const {
-    align = getDefaultAlignment(serverDataType),
-    key,
-    name,
-    label = name,
-    width = columnDefaultWidth,
-    ...rest
-  } = column;
-  const keyedColumnWithDefaults = {
-    ...rest,
-    align,
-    CellRenderer: getCellRendererForColumn(column),
-    label: getLabel(label, columnFormatHeader),
-    key: key != null ? key : index + KEY_OFFSET,
-    name,
-    originalIdx: index,
-    serverDataType,
-    valueFormatter: (0, import_vuu_utils11.getValueFormatter)(column),
-    width
-  };
-  if ((0, import_vuu_utils11.isGroupColumn)(keyedColumnWithDefaults)) {
-    keyedColumnWithDefaults.columns = keyedColumnWithDefaults.columns.map(
-      (col) => toKeyedColumWithDefaults(options)(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: (0, import_salt_lab3.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":
-    case "end":
-      return updateColumnProp(state, { type, column, resizing });
-    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 = getServerDataTypeForColumn(column, tableSchema);
-      return {
-        ...column,
-        align: (_a = column.align) != null ? _a : getDefaultAlignment(serverDataType),
-        serverDataType
-      };
-    });
-    return {
-      ...state,
-      columns: cols,
-      tableSchema
-    };
-  } else {
-    return {
-      ...state,
-      tableSchema
-    };
-  }
-}
-function pinColumn2(state, action) {
-  let { columns } = state;
-  const { column, pin } = action;
-  const targetColumn = columns.find((col) => col.name === column.name);
-  if (targetColumn) {
-    columns = replaceColumn(columns, { ...targetColumn, pin });
-    columns = (0, import_vuu_utils11.sortPinnedColumns)(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 = replaceColumn(columns, { ...targetColumn, align });
-    }
-    if (typeof label === "string") {
-      columns = replaceColumn(columns, { ...targetColumn, label });
-    }
-    if (typeof resizing === "boolean") {
-      columns = replaceColumn(columns, { ...targetColumn, resizing });
-    }
-    if (typeof hidden === "boolean") {
-      columns = replaceColumn(columns, { ...targetColumn, hidden });
-    }
-    if (typeof width === "number") {
-      columns = replaceColumn(columns, { ...targetColumn, width });
-    }
-  }
-  return {
-    ...state,
-    columns
-  };
-}
-function updateTableConfig(state, { columns, confirmed, filter, groupBy, sort }) {
-  const hasColumns = columns && columns.length > 0;
-  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 (hasColumns) {
-    result = {
-      ...state,
-      columns: columns.map((colName, index) => {
-        const columnName = (0, import_vuu_utils11.getColumnName)(colName);
-        const key = index + KEY_OFFSET;
-        const col = (0, import_vuu_utils11.findColumn)(result.columns, columnName);
-        if (col) {
-          if (col.key === key) {
-            return col;
-          } else {
-            return {
-              ...col,
-              key
-            };
-          }
-        } else {
-          return toKeyedColumWithDefaults(state)(
-            {
-              name: colName
-            },
-            index
-          );
-        }
-        throw Error(`useTableModel column ${colName} not found`);
-      })
-    };
-  }
-  if (hasGroupBy) {
-    result = {
-      ...state,
-      columns: (0, import_vuu_utils11.applyGroupByToColumns)(result.columns, groupBy, confirmed)
-    };
-  }
-  if (hasSort) {
-    result = {
-      ...state,
-      columns: (0, import_vuu_utils11.applySortToColumns)(result.columns, sort)
-    };
-  }
-  if (hasFilter) {
-    result = {
-      ...state,
-      columns: (0, import_vuu_utils11.applyFilterToColumns)(result.columns, filter)
-    };
-  } else if (result.columns.some(import_vuu_utils11.isFilteredColumn)) {
-    result = {
-      ...state,
-      columns: (0, import_vuu_utils11.stripFilterFromColumns)(result.columns)
-    };
-  }
-  return result;
-}
-function replaceColumn(state, column) {
-  return state.map((col) => col.name === column.name ? column : col);
-}
-
-// src/useTableScroll.ts
-var import_react17 = require("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 getMaxScroll = (container) => {
-  const { clientHeight, clientWidth, scrollHeight, scrollWidth } = container;
-  return [scrollWidth - clientWidth, scrollHeight - clientHeight];
-};
-var useCallbackRef = ({
-  onAttach,
-  onDetach
-}) => {
-  const ref = (0, import_react17.useRef)(null);
-  const callbackRef = (0, import_react17.useCallback)(
-    (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 useTableScroll = ({
-  onHorizontalScroll,
-  onVerticalScroll,
-  viewport
-}) => {
-  const contentContainerScrolledRef = (0, import_react17.useRef)(false);
-  const scrollPosRef = (0, import_react17.useRef)({ scrollTop: 0, scrollLeft: 0 });
-  const scrollbarContainerRef = (0, import_react17.useRef)(null);
-  const contentContainerRef = (0, import_react17.useRef)(null);
-  const {
-    maxScrollContainerScrollHorizontal: maxScrollLeft,
-    maxScrollContainerScrollVertical: maxScrollTop
-  } = viewport;
-  const handleScrollbarContainerScroll = (0, import_react17.useCallback)(() => {
-    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 [maxScrollLeft2, maxScrollTop2] = getMaxScroll(contentContainer);
-      const rootScrollLeft = Math.round(pctScrollLeft * maxScrollLeft2);
-      const rootScrollTop = Math.round(pctScrollTop * maxScrollTop2);
-      contentContainer.scrollTo({
-        left: rootScrollLeft,
-        top: rootScrollTop,
-        behavior: "auto"
-      });
-    }
-  }, []);
-  const handleContentContainerScroll = (0, import_react17.useCallback)(() => {
-    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 = (0, import_react17.useCallback)(
-    (el) => {
-      scrollbarContainerRef.current = el;
-      el.addEventListener("scroll", handleScrollbarContainerScroll, {
-        passive: true
-      });
-    },
-    [handleScrollbarContainerScroll]
-  );
-  const handleDetachScrollbarContainer = (0, import_react17.useCallback)(
-    (el) => {
-      scrollbarContainerRef.current = null;
-      el.removeEventListener("scroll", handleScrollbarContainerScroll);
-    },
-    [handleScrollbarContainerScroll]
-  );
-  const handleAttachContentContainer = (0, import_react17.useCallback)(
-    (el) => {
-      contentContainerRef.current = el;
-      el.addEventListener("scroll", handleContentContainerScroll, {
-        passive: true
-      });
-    },
-    [handleContentContainerScroll]
-  );
-  const handleDetachContentContainer = (0, import_react17.useCallback)(
-    (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 = (0, import_react17.useCallback)(
-    (scrollRequest) => {
-      const { current: scrollbarContainer } = contentContainerRef;
-      if (scrollbarContainer) {
-        contentContainerScrolledRef.current = false;
-        if (scrollRequest.type === "scroll-page") {
-          const { clientHeight, scrollLeft, scrollTop } = scrollbarContainer;
-          const { direction } = scrollRequest;
-          const scrollBy = direction === "down" ? clientHeight : -clientHeight;
-          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"
-          });
-        }
-      }
-    },
-    [maxScrollTop]
-  );
-  return {
-    /** Ref to be assigned to ScrollbarContainer */
-    scrollbarContainerRef: scrollbarContainerCallbackRef,
-    /** Ref to be assigned to ContentContainer */
-    contentContainerRef: contentContainerCallbackRef,
-    /** Scroll the table  */
-    requestScroll
-  };
-};
-
-// src/useTableViewport.ts
-var import_react18 = require("react");
-var import_vuu_utils12 = require("@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, pinnedWidthRight, unpinnedWidth };
-};
-var useTableViewport = ({
-  columns,
-  headerHeight,
-  headings,
-  rowCount,
-  rowHeight,
-  size
-}) => {
-  const pctScrollTopRef = (0, import_react18.useRef)(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 } = (0, import_react18.useMemo)(
-    () => measurePinnedColumns(columns),
-    [columns]
-  );
-  const [actualRowOffset, actualRowAtPosition] = (0, import_react18.useMemo)(
-    () => (0, import_vuu_utils12.actualRowPositioning)(rowHeight),
-    [rowHeight]
-  );
-  const [getRowOffset, getRowAtPosition] = (0, import_react18.useMemo)(() => {
-    if (virtualisedExtent) {
-      return (0, import_vuu_utils12.virtualRowPositioning)(
-        rowHeight,
-        virtualisedExtent,
-        pctScrollTopRef
-      );
-    } else {
-      return [actualRowOffset, actualRowAtPosition];
-    }
-  }, [actualRowAtPosition, actualRowOffset, virtualisedExtent, rowHeight]);
-  const setPctScrollTop = (0, import_react18.useCallback)((scrollPct) => {
-    pctScrollTopRef.current = scrollPct;
-  }, []);
-  return (0, import_react18.useMemo)(() => {
-    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
-  ]);
-};
-
-// src/useVirtualViewport.ts
-var import_vuu_utils13 = require("@vuu-ui/vuu-utils");
-var import_react19 = require("react");
-var useVirtualViewport = ({
-  columns,
-  getRowAtPosition,
-  setRange,
-  viewportMeasurements
-}) => {
-  const firstRowRef = (0, import_react19.useRef)(-1);
-  const {
-    rowCount: viewportRowCount,
-    contentWidth,
-    maxScrollContainerScrollHorizontal
-  } = viewportMeasurements;
-  const availableWidth = contentWidth - maxScrollContainerScrollHorizontal;
-  const scrollLeftRef = (0, import_react19.useRef)(0);
-  const [visibleColumns, preSpan] = (0, import_react19.useMemo)(
-    () => (0, import_vuu_utils13.getColumnsInViewport)(
-      columns,
-      scrollLeftRef.current,
-      scrollLeftRef.current + availableWidth
-    ),
-    [availableWidth, columns]
-  );
-  const preSpanRef = (0, import_react19.useRef)(preSpan);
-  (0, import_react19.useEffect)(() => {
-    setColumnsWithinViewport(visibleColumns);
-  }, [visibleColumns]);
-  const [columnsWithinViewport, setColumnsWithinViewport] = (0, import_react19.useState)(visibleColumns);
-  const handleHorizontalScroll = (0, import_react19.useCallback)(
-    (scrollLeft) => {
-      scrollLeftRef.current = scrollLeft;
-      const [visibleColumns2, pre] = (0, import_vuu_utils13.getColumnsInViewport)(
-        columns,
-        scrollLeft,
-        scrollLeft + availableWidth
-      );
-      if ((0, import_vuu_utils13.itemsChanged)(columnsWithinViewport, visibleColumns2)) {
-        preSpanRef.current = pre;
-        setColumnsWithinViewport(visibleColumns2);
-      }
-    },
-    [availableWidth, columns, columnsWithinViewport]
-  );
-  const handleVerticalScroll = (0, import_react19.useCallback)(
-    (scrollTop) => {
-      const firstRow = getRowAtPosition(scrollTop);
-      if (firstRow !== firstRowRef.current) {
-        firstRowRef.current = firstRow;
-        setRange({ from: firstRow, to: firstRow + viewportRowCount });
-      }
-    },
-    [getRowAtPosition, setRange, viewportRowCount]
-  );
-  return {
-    columnsWithinViewport,
-    onHorizontalScroll: handleHorizontalScroll,
-    onVerticalScroll: handleVerticalScroll,
-    /** number of leading columns not rendered because of virtualization  */
-    virtualColSpan: preSpanRef.current
-  };
-};
-
-// src/useTable.ts
-var NO_ROWS = [];
-var { KEY: KEY2, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = import_vuu_utils14.metadataKeys;
-var useTable = ({
-  config,
-  dataSource,
-  headerHeight,
-  onConfigChange,
-  onFeatureEnabled,
-  onFeatureInvocation,
-  onSelectionChange,
-  renderBufferSize = 0,
-  rowHeight,
-  selectionModel,
-  ...measuredProps
-}) => {
-  var _a, _b;
-  const [rowCount, setRowCount] = (0, import_react20.useState)(dataSource.size);
-  const expectConfigChangeRef = (0, import_react20.useRef)(false);
-  const dataSourceRef = (0, import_react20.useRef)();
-  dataSourceRef.current = dataSource;
-  if (dataSource === void 0) {
-    throw Error("no data source provided to Vuu Table");
-  }
-  const containerMeasurements = useMeasuredContainer(measuredProps);
-  const onDataRowcountChange = (0, import_react20.useCallback)((size) => {
-    setRowCount(size);
-  }, []);
-  const { columns, dispatchColumnAction, headings } = useTableModel(
-    config,
-    dataSource.config
-  );
-  const {
-    getRowAtPosition,
-    getRowOffset,
-    setPctScrollTop,
-    ...viewportMeasurements
-  } = useTableViewport({
-    columns,
-    headerHeight,
-    headings,
-    rowCount,
-    rowHeight,
-    size: containerMeasurements.innerSize
-  });
-  const onSubscribed = (0, import_react20.useCallback)(
-    ({ tableSchema }) => {
-      if (tableSchema) {
-        expectConfigChangeRef.current = true;
-        dispatchColumnAction({
-          type: "setTableSchema",
-          tableSchema
-        });
-      } else {
-        console.log("usbscription message with no schema");
-      }
-    },
-    [dispatchColumnAction]
-  );
-  const handleSelectionChange = (0, import_react20.useCallback)(
-    (selected) => {
-      dataSource.select(selected);
-      onSelectionChange == null ? void 0 : onSelectionChange(selected);
-    },
-    [dataSource, onSelectionChange]
-  );
-  const handleRowClick = useSelection({
-    onSelectionChange: handleSelectionChange,
-    selectionModel
-  });
-  const { data, getSelectedRows, range, setRange } = useDataSource({
-    dataSource,
-    onFeatureEnabled,
-    onFeatureInvocation,
-    onSubscribed,
-    onSizeChange: onDataRowcountChange,
-    renderBufferSize,
-    viewportRowCount: viewportMeasurements.rowCount
-  });
-  const dataRef = (0, import_react20.useRef)();
-  dataRef.current = data;
-  const onPersistentColumnOperation = (0, import_react20.useCallback)(
-    (action) => {
-      expectConfigChangeRef.current = true;
-      dispatchColumnAction(action);
-    },
-    [dispatchColumnAction]
-  );
-  const handleContextMenuAction = useTableContextMenu({
-    dataSource,
-    onPersistentColumnOperation
-  });
-  const handleSort = (0, import_react20.useCallback)(
-    (column, extendSort = false, sortType) => {
-      if (dataSource) {
-        dataSource.sort = (0, import_vuu_utils14.applySort)(
-          dataSource.sort,
-          column,
-          extendSort,
-          sortType
-        );
-      }
-    },
-    [dataSource]
-  );
-  const handleColumnResize = (0, import_react20.useCallback)(
-    (phase, columnName, width) => {
-      const column = columns.find((column2) => column2.name === columnName);
-      if (column) {
-        if (phase === "end") {
-          expectConfigChangeRef.current = true;
-        }
-        dispatchColumnAction({
-          type: "resizeColumn",
-          phase,
-          column,
-          width
-        });
-      } else {
-        throw Error(
-          `useDataTable.handleColumnResize, column ${columnName} not found`
-        );
-      }
-    },
-    [columns, dispatchColumnAction]
-  );
-  const handleToggleGroup = (0, import_react20.useCallback)(
-    (row, column) => {
-      const isJson = (0, import_vuu_utils14.isJsonGroup)(column, row);
-      const key = row[KEY2];
-      if (row[IS_EXPANDED2]) {
-        dataSource.closeTreeNode(key, true);
-        if (isJson) {
-          const idx = columns.indexOf(column);
-          const rows = dataSource.getRowsAtDepth(idx + 1);
-          if (!rows.some((row2) => row2[IS_EXPANDED2] || row2[IS_LEAF2])) {
-            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_LEAF2])) {
-            columnsToShow.push(columns[idx + 1]);
-          }
-          if (columnsToShow.some((col) => col.hidden)) {
-            dispatchColumnAction({
-              type: "showColumns",
-              columns: columnsToShow
-            });
-          }
-        }
-      }
-    },
-    [columns, dataSource, dispatchColumnAction]
-  );
-  const {
-    onVerticalScroll,
-    onHorizontalScroll,
-    columnsWithinViewport,
-    virtualColSpan
-  } = useVirtualViewport({
-    columns,
-    getRowAtPosition,
-    setRange,
-    viewportMeasurements
-  });
-  const handleVerticalScroll = (0, import_react20.useCallback)(
-    (scrollTop, pctScrollTop) => {
-      setPctScrollTop(pctScrollTop);
-      onVerticalScroll(scrollTop);
-    },
-    [onVerticalScroll, setPctScrollTop]
-  );
-  const { requestScroll, ...scrollProps } = useTableScroll({
-    onHorizontalScroll,
-    onVerticalScroll: handleVerticalScroll,
-    viewport: viewportMeasurements,
-    viewportHeight: ((_b = (_a = containerMeasurements.innerSize) == null ? void 0 : _a.height) != null ? _b : 0) - headerHeight
-  });
-  const containerProps = useKeyboardNavigation({
-    columnCount: columns.length,
-    containerRef: containerMeasurements.containerRef,
-    data,
-    requestScroll,
-    rowCount: dataSource == null ? void 0 : dataSource.size,
-    viewportRange: range
-  });
-  const handleRemoveColumnFromGroupBy = (0, import_react20.useCallback)(
-    (column) => {
-      if (column) {
-        if (dataSource && dataSource.groupBy.includes(column.name)) {
-          dataSource.groupBy = dataSource.groupBy.filter(
-            (columnName) => columnName !== column.name
-          );
-        }
-      } else {
-        dataSource.groupBy = [];
-      }
-    },
-    [dataSource]
-  );
-  const handleDropColumn = (0, import_react20.useCallback)(
-    (fromIndex, toIndex) => {
-      const column = dataSource.columns[fromIndex];
-      const columns2 = (0, import_vuu_utils14.moveItem)(dataSource.columns, column, toIndex);
-      if (columns2 !== dataSource.columns) {
-        dataSource.columns = columns2;
-        dispatchColumnAction({ type: "tableConfig", columns: columns2 });
-      }
-    },
-    [dataSource, dispatchColumnAction]
-  );
-  const draggableHook = useDraggableColumn({
-    onDrop: handleDropColumn
-  });
-  (0, import_react20.useEffect)(() => {
-    if (dataSourceRef.current) {
-      expectConfigChangeRef.current = true;
-      dispatchColumnAction({
-        type: "init",
-        tableConfig: config,
-        dataSourceConfig: dataSourceRef.current.config
-      });
-    }
-  }, [config, dispatchColumnAction]);
-  (0, import_react20.useEffect)(() => {
-    dataSource.on("config", (config2, confirmed) => {
-      expectConfigChangeRef.current = true;
-      dispatchColumnAction({
-        type: "tableConfig",
-        ...config2,
-        confirmed
-      });
-    });
-  }, [dataSource, dispatchColumnAction]);
-  (0, import_react20.useMemo)(() => {
-    if (expectConfigChangeRef.current) {
-      onConfigChange == null ? void 0 : onConfigChange({
-        ...config,
-        columns
-      });
-      expectConfigChangeRef.current = false;
-    }
-  }, [columns, config, onConfigChange]);
-  const showContextMenu = (0, import_vuu_popups3.useContextMenu)();
-  const onContextMenu = (0, import_react20.useCallback)(
-    (evt) => {
-      var _a2;
-      const { current: currentData } = dataRef;
-      const { current: currentDataSource } = dataSourceRef;
-      const target = evt.target;
-      const cellEl = target == null ? void 0 : target.closest("div[role='cell']");
-      const rowEl = target == null ? void 0 : target.closest(".vuuTableRow");
-      if (cellEl && rowEl && currentData && currentDataSource) {
-        const { columns: columns2, selectedRowsCount } = currentDataSource;
-        const columnMap = (0, import_vuu_utils14.buildColumnMap)(columns2);
-        const rowIndex = parseInt((_a2 = rowEl.ariaRowIndex) != null ? _a2 : "-1");
-        const cellIndex = Array.from(rowEl.childNodes).indexOf(cellEl);
-        const row = currentData.find(([idx]) => idx === rowIndex);
-        const columnName = columns2[cellIndex];
-        showContextMenu(evt, "grid", {
-          columnMap,
-          columnName,
-          row,
-          selectedRows: selectedRowsCount === 0 ? NO_ROWS : getSelectedRows(),
-          viewport: dataSource == null ? void 0 : dataSource.viewport
-        });
-      }
-    },
-    [dataSource == null ? void 0 : dataSource.viewport, getSelectedRows, showContextMenu]
-  );
-  return {
-    columns,
-    columnsWithinViewport,
-    containerMeasurements,
-    containerProps,
-    data,
-    dispatchColumnAction,
-    getRowOffset,
-    handleContextMenuAction,
-    headings,
-    onColumnResize: handleColumnResize,
-    onContextMenu,
-    onRemoveColumnFromGroupBy: handleRemoveColumnFromGroupBy,
-    onRowClick: handleRowClick,
-    onSort: handleSort,
-    onToggleGroup: handleToggleGroup,
-    virtualColSpan,
-    scrollProps,
-    rowCount,
-    viewportMeasurements,
-    ...draggableHook
-  };
-};
-
-// src/Table.tsx
-var import_classnames7 = __toESM(require("classnames"));
-var import_vuu_utils15 = require("@vuu-ui/vuu-utils");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var classBase6 = "vuuTable";
-var Table = ({
-  allowConfigEditing: showSettings = false,
-  className: classNameProp,
-  config,
-  dataSource,
-  headerHeight = 25,
-  height,
-  id: idProp,
-  onConfigChange,
-  onFeatureEnabled,
-  onFeatureInvocation,
-  onSelectionChange,
-  onShowConfigEditor: onShowSettings,
-  renderBufferSize = 0,
-  rowHeight = 20,
-  selectionModel = "extended",
-  style: styleProp,
-  width,
-  zebraStripes = false,
-  ...htmlAttributes
-}) => {
-  const id = (0, import_core.useIdMemo)(idProp);
-  const {
-    containerMeasurements: { containerRef, innerSize, outerSize },
-    containerProps,
-    dispatchColumnAction,
-    draggable,
-    draggedItemIndex,
-    handleContextMenuAction,
-    scrollProps,
-    viewportMeasurements,
-    ...tableProps
-  } = useTable({
-    config,
-    dataSource,
-    renderBufferSize,
-    headerHeight,
-    height,
-    onConfigChange,
-    onFeatureEnabled,
-    onFeatureInvocation,
-    onSelectionChange,
-    rowHeight,
-    selectionModel,
-    width
-  });
-  const style = {
-    ...outerSize,
-    "--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`,
-    "--table-height": `${innerSize == null ? void 0 : innerSize.height}px`,
-    "--table-width": `${innerSize == null ? void 0 : innerSize.width}px`,
-    "--total-header-height": `${viewportMeasurements.totalHeaderHeight}px`,
-    "--vertical-scrollbar-width": `${viewportMeasurements.verticalScrollbarWidth}px`,
-    "--viewport-body-height": `${viewportMeasurements.viewportBodyHeight}px`
-  };
-  const className = (0, import_classnames7.default)(classBase6, classNameProp, {
-    [`${classBase6}-zebra`]: zebraStripes,
-    [`${classBase6}-loading`]: (0, import_vuu_utils15.isDataLoading)(tableProps.columns)
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_vuu_popups4.ContextMenuProvider,
-    {
-      menuActionHandler: handleContextMenuAction,
-      menuBuilder: buildContextMenuDescriptors(dataSource),
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-        "div",
-        {
-          ...htmlAttributes,
-          ...containerProps,
-          className,
-          id,
-          ref: containerRef,
-          style,
-          tabIndex: -1,
-          children: [
-            innerSize ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              "div",
-              {
-                className: `${classBase6}-scrollbarContainer`,
-                ref: scrollProps.scrollbarContainerRef,
-                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `${classBase6}-scrollbarContent` })
-              }
-            ) : null,
-            innerSize ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-              "div",
-              {
-                className: `${classBase6}-contentContainer`,
-                ref: scrollProps.contentContainerRef,
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                    RowBasedTable,
-                    {
-                      ...tableProps,
-                      headerHeight,
-                      tableId: id
-                    }
-                  ),
-                  draggable
-                ]
-              }
-            ) : null,
-            showSettings && innerSize ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              import_core.Button,
-              {
-                className: `${classBase6}-settings`,
-                "data-icon": "settings",
-                onClick: onShowSettings,
-                variant: "secondary"
-              }
-            ) : null
-          ]
-        }
-      )
-    }
-  );
-};
-
-// src/cell-renderers/json-cell/JsonCell.tsx
-var import_classnames8 = __toESM(require("classnames"));
-var import_vuu_utils16 = require("@vuu-ui/vuu-utils");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var classBase7 = "vuuJsonCell";
-var { IS_EXPANDED: IS_EXPANDED3, KEY: KEY3 } = import_vuu_utils16.metadataKeys;
-var localKey = (key) => {
-  const pos = key.lastIndexOf("|");
-  if (pos === -1) {
-    return "";
-  } else {
-    return key.slice(pos + 1);
-  }
-};
-var JsonCell = ({ column, row }) => {
-  const {
-    key: columnKey
-    /*, type, valueFormatter */
-  } = column;
-  let value = row[columnKey];
-  let isToggle = false;
-  if ((0, import_vuu_utils16.isJsonAttribute)(value)) {
-    value = value.slice(0, -1);
-    isToggle = true;
-  }
-  const rowKey = localKey(row[KEY3]);
-  const className = (0, import_classnames8.default)({
-    [`${classBase7}-name`]: rowKey === value,
-    [`${classBase7}-value`]: rowKey !== value,
-    [`${classBase7}-group`]: isToggle
-  });
-  if (isToggle) {
-    const toggleIcon = row[IS_EXPANDED3] ? "minus-box" : "plus-box";
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `${classBase7}-value`, children: value }),
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: `${classBase7}-toggle`, "data-icon": toggleIcon })
-    ] });
-  } else if (value) {
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className, children: value });
-  } else {
-    return null;
-  }
-};
-(0, import_vuu_utils16.registerComponent)("json", JsonCell, "cell-renderer", {});
+"use strict";var Gn=Object.create;var Se=Object.defineProperty;var Bn=Object.getOwnPropertyDescriptor;var Un=Object.getOwnPropertyNames;var _n=Object.getPrototypeOf,Jn=Object.prototype.hasOwnProperty;var Xn=(e,t)=>{for(var n in t)Se(e,n,{get:t[n],enumerable:!0})},ft=(e,t,n,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of Un(t))!Jn.call(e,r)&&r!==n&&Se(e,r,{get:()=>t[r],enumerable:!(o=Bn(t,r))||o.enumerable});return e};var q=(e,t,n)=>(n=e!=null?Gn(_n(e)):{},ft(t||!e||!e.__esModule?Se(n,"default",{value:e,enumerable:!0}):n,e)),Yn=e=>ft(Se({},"__esModule",{value:!0}),e);var nr={};Xn(nr,{Table:()=>Zo,buildContextMenuDescriptors:()=>Ge,useMeasuredContainer:()=>st,useTableContextMenu:()=>Ue,useTableModel:()=>lt,useTableViewport:()=>ct});module.exports=Yn(nr);var gt=require("@vuu-ui/vuu-utils"),Ge=e=>(t,n)=>{let o=[];if(e===void 0)return o;if(t==="header")o.push(...Qn(n,e)),o.push(...qn(n,e)),o.push(...Zn(n,e)),o.push(...jn(n));else if(t==="filter"){let{column:r,filter:i}=n,s=(i==null?void 0:i.column)===(r==null?void 0:r.name);o.push({label:"Edit filter",action:"filter-edit",options:n}),o.push({label:"Remove filter",action:"filter-remove-column",options:n}),r&&!s&&o.push({label:"Remove all filters",action:"remove-filters",options:n})}return o};function Qn(e,{sort:{sortDefs:t}}){let{column:n}=e,o=[];if(n===void 0)return o;let r=t.length>0;return n.sorted==="A"?o.push({label:"Reverse Sort (DSC)",action:"sort-dsc",options:e}):n.sorted==="D"?o.push({label:"Reverse Sort (ASC)",action:"sort-asc",options:e}):typeof n.sorted=="number"?(n.sorted>0?o.push({label:"Reverse Sort (DSC)",action:"sort-add-dsc",options:e}):o.push({label:"Reverse Sort (ASC)",action:"sort-add-asc",options:e}),r&&Math.abs(n.sorted)<t.length&&o.push({label:"Remove from sort",action:"sort-remove",options:e}),o.push({label:"New Sort",children:[{label:"Ascending",action:"sort-asc",options:e},{label:"Descending",action:"sort-dsc",options:e}]})):r?(o.push({label:"Add to sort",children:[{label:"Ascending",action:"sort-add-asc",options:e},{label:"Descending",action:"sort-add-dsc",options:e}]}),o.push({label:"New Sort",children:[{label:"Ascending",action:"sort-asc",options:e},{label:"Descending",action:"sort-dsc",options:e}]})):o.push({label:"Sort",children:[{label:"Ascending",action:"sort-asc",options:e},{label:"Descending",action:"sort-dsc",options:e}]}),o}function Zn(e,t){let{column:n}=e;if(n===void 0||t.groupBy.length===0)return[];let{name:o,label:r=o}=n;return[{label:`Aggregate ${r}`,children:[{label:"Count",action:"agg-count",options:e},{label:"Distinct",action:"agg-distinct",options:e}].concat((0,gt.isNumericColumn)(n)?[{label:"Sum",action:"agg-sum",options:e},{label:"Avg",action:"agg-avg",options:e},{label:"High",action:"agg-high",options:e},{label:"Low",action:"agg-low",options:e}]:[])}]}var Be=(e,t)=>({label:`Pin ${t}`,action:`column-pin-${t}`,options:e}),We=e=>Be(e,"left"),$e=e=>Be(e,"floating"),Oe=e=>Be(e,"right");function jn(e){let{column:t}=e;if(t===void 0)return[];let{pin:n}=t,o=[{label:"Hide column",action:"column-hide",options:e},{label:"Remove column",action:"column-remove",options:e}];return n===void 0?o.push({label:"Pin column",children:[We(e),$e(e),Oe(e)]}):n==="left"?o.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[$e(e),Oe(e)]}):n==="right"?o.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[We(e),$e(e)]}):n==="floating"&&o.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[We(e),Oe(e)]}),o}function qn(e,{groupBy:t}){let{column:n}=e,o=[];if(n===void 0)return o;let{name:r,label:i=r}=n;return t.length===0?o.push({label:`Group by ${i}`,action:"group",options:e}):o.push({label:`Add ${i} to group by`,action:"group-add",options:e}),o}var bt=require("@vuu-ui/vuu-filters"),N=require("@vuu-ui/vuu-utils"),eo=(e,t)=>{if(e.filterStruct&&t){let[n,o]=(0,bt.removeColumnFromFilter)(t,e.filterStruct);return{filter:o,filterStruct:n}}else return e},{Average:to,Count:no,Distinct:oo,High:ro,Low:so,Sum:io}=N.AggregationType,Ue=({dataSource:e,onPersistentColumnOperation:t})=>(o,r)=>{let i=r;if(i.column&&e){let{column:s}=i;switch(o){case"sort-asc":return e.sort=(0,N.setSortColumn)(e.sort,s,"A"),!0;case"sort-dsc":return e.sort=(0,N.setSortColumn)(e.sort,s,"D"),!0;case"sort-add-asc":return e.sort=(0,N.addSortColumn)(e.sort,s,"A"),!0;case"sort-add-dsc":return e.sort=(0,N.addSortColumn)(e.sort,s,"D"),!0;case"group":return e.groupBy=(0,N.addGroupColumn)(e.groupBy,s),!0;case"group-add":return e.groupBy=(0,N.addGroupColumn)(e.groupBy,s),!0;case"column-hide":return t({type:"hideColumns",columns:[s]}),!0;case"column-remove":return e.columns=e.columns.filter(l=>l!==s.name),!0;case"filter-remove-column":return e.filter=eo(e.filter,s),!0;case"remove-filters":return e.filter={filter:""},!0;case"agg-avg":return e.aggregations=(0,N.setAggregations)(e.aggregations,s,to),!0;case"agg-high":return e.aggregations=(0,N.setAggregations)(e.aggregations,s,ro),!0;case"agg-low":return e.aggregations=(0,N.setAggregations)(e.aggregations,s,so),!0;case"agg-count":return e.aggregations=(0,N.setAggregations)(e.aggregations,s,no),!0;case"agg-distinct":return e.aggregations=(0,N.setAggregations)(e.aggregations,s,oo),!0;case"agg-sum":return e.aggregations=(0,N.setAggregations)(e.aggregations,s,io),!0;case"column-pin-floating":return t({type:"pinColumn",column:s,pin:"floating"}),!0;case"column-pin-left":return t({type:"pinColumn",column:s,pin:"left"}),!0;case"column-pin-right":return t({type:"pinColumn",column:s,pin:"right"}),!0;case"column-unpin":return t({type:"pinColumn",column:s,pin:void 0}),!0;default:}}return!1};var Cn=require("@vuu-ui/vuu-popups"),Ie=require("@salt-ds/core");var $=require("@vuu-ui/vuu-utils"),ge=require("react");var G=require("@vuu-ui/vuu-utils"),Tt=q(require("classnames")),Me=require("react");var Ae=require("@vuu-ui/vuu-utils"),ht=require("@heswell/salt-lab"),vt=q(require("classnames")),Y=require("react");var we=require("react/jsx-runtime"),{KEY:Ct}=Ae.metadataKeys,_e=(0,Y.memo)(({className:e,column:t,columnMap:n,onClick:o,row:r})=>{let i=(0,Y.useRef)(null),{align:s,CellRenderer:l,key:a,pin:u,editable:c,resizing:p,valueFormatter:d}=t,[g,h]=(0,Y.useState)(!1),f=d(r[a]),[T,y]=(0,Y.useState)(f),m=()=>{var E;(E=i.current)==null||E.focus()},C=E=>{E.key==="Enter"&&h(!0)},R=(0,Y.useCallback)(E=>{o==null||o(E,t)},[t,o]),w=()=>{h(!0)},v=(E="",b="",M=!0,S=!1)=>{var H;h(!1),S?y(E):b!==E&&y(b),M===!1&&((H=i.current)==null||H.focus())},D=(0,vt.default)(e,{vuuAlignRight:s==="right",vuuPinFloating:u==="floating",vuuPinLeft:u==="left",vuuPinRight:u==="right","vuuTableCell-resizing":p})||void 0,A=(0,Ae.getColumnStyle)(t);return c?(0,we.jsx)("div",{className:D,"data-editable":!0,role:"cell",style:A,onKeyDown:C,children:(0,we.jsx)(ht.EditableLabel,{editing:g,value:T,onChange:y,onMouseDownCapture:m,onEnterEditMode:w,onExitEditMode:v,onKeyDown:C,ref:i,tabIndex:0},"title")}):(0,we.jsx)("div",{className:D,role:"cell",style:A,onClick:R,children:l?(0,we.jsx)(l,{column:t,columnMap:n,row:r}):f})},lo);_e.displayName="TableCell";function lo(e,t){return e.column===t.column&&e.onClick===t.onClick&&e.row[Ct]===t.row[Ct]&&e.row[e.column.key]===t.row[t.column.key]}var Le=require("@vuu-ui/vuu-utils"),yt=require("react");var pe=require("react/jsx-runtime"),{DEPTH:ao,IS_LEAF:wt}=Le.metadataKeys,co=(e,t)=>{let{[ao]:n,[wt]:o}=t;if(o||n>e.length)return[null,n===null?0:Math.max(0,n-1)];if(n===0)return["$root",0];{let{key:r,valueFormatter:i}=e[n-1];return[i(t[r]),n-1]}},Mt=({column:e,onClick:t,row:n})=>{let{columns:o}=e,[r,i]=co(o,n),s=(0,yt.useCallback)(c=>{t==null||t(c,e)},[e,t]),l=(0,Le.getColumnStyle)(e),a=n[wt],u=Array(i).fill(0).map((c,p)=>(0,pe.jsx)("span",{className:"vuuTableGroupCell-spacer"},p));return(0,pe.jsxs)("div",{className:"vuuTableGroupCell vuuPinLeft",onClick:a?void 0:s,role:"cell",style:l,children:[u,a?null:(0,pe.jsx)("span",{className:"vuuTableGroupCell-toggle","data-icon":"triangle-right"}),(0,pe.jsx)("span",{children:r})]})};var Te=require("react/jsx-runtime"),{IDX:uo,IS_EXPANDED:mo,SELECTED:po}=G.metadataKeys,ke="vuuTableRow",Rt=(0,Me.memo)(function({columnMap:t,columns:n,offset:o,onClick:r,onToggleGroup:i,virtualColSpan:s=0,row:l}){let{[uo]:a,[mo]:u,[po]:c}=l,p=(0,Tt.default)(ke,{[`${ke}-even`]:a%2===0,[`${ke}-expanded`]:u,[`${ke}-preSelected`]:c===2}),d=(0,Me.useCallback)(h=>{let f=h.shiftKey,T=h.ctrlKey||h.metaKey;r==null||r(l,f,T)},[r,l]),g=(0,Me.useCallback)((h,f)=>{((0,G.isGroupColumn)(f)||(0,G.isJsonGroup)(f,l))&&(h.stopPropagation(),i==null||i(l,f))},[i,l]);return(0,Te.jsxs)("div",{"aria-selected":c===1?!0:void 0,"aria-rowindex":a,className:p,onClick:d,role:"row",style:{transform:`translate3d(0px, ${o}px, 0px)`},children:[s>0?(0,Te.jsx)("div",{role:"cell",style:{width:s}}):null,n.filter(G.notHidden).map(h=>{let f=(0,G.isGroupColumn)(h),T=(0,G.isJsonColumn)(h);return(0,Te.jsx)(f?Mt:_e,{column:h,columnMap:t,onClick:f||T?g:void 0,row:l},h.name)})]})});var Je=q(require("classnames")),Pt=require("react");var fe=require("react");var xt=require("react/jsx-runtime"),Dt=()=>{},fo="vuuColumnResizer",Ke=({onDrag:e,onDragEnd:t=Dt,onDragStart:n=Dt})=>{let o=(0,fe.useRef)(0),r=(0,fe.useCallback)(l=>{l.stopPropagation&&l.stopPropagation(),l.preventDefault&&l.preventDefault();let a=Math.round(l.clientX),u=a-o.current;o.current=a,u!==0&&e(l,u)},[e]),i=(0,fe.useCallback)(l=>{window.removeEventListener("mouseup",i),window.removeEventListener("mousemove",r),t(l)},[t,r]),s=(0,fe.useCallback)(l=>{n(l),o.current=Math.round(l.clientX),window.addEventListener("mouseup",i),window.addEventListener("mousemove",r),l.stopPropagation&&l.stopPropagation(),l.preventDefault&&l.preventDefault()},[n,r,i]);return(0,xt.jsx)("div",{className:fo,"data-align":"end",onMouseDown:s})};var se=require("react"),ze=({column:e,onResize:t,rootRef:n})=>{let o=(0,se.useRef)(0),r=(0,se.useRef)(!1),{name:i}=e,s=(0,se.useCallback)(()=>{if(t&&n.current){let{width:u}=n.current.getBoundingClientRect();o.current=Math.round(u),r.current=!0,t==null||t("begin",i)}},[i,t,n]),l=(0,se.useCallback)((u,c)=>{if(n.current&&t){let{width:p}=n.current.getBoundingClientRect(),d=Math.round(p)+c;d!==o.current&&d>0&&(t("resize",i,d),o.current=d)}},[i,t,n]),a=(0,se.useCallback)(()=>{t&&(t("end",i,o.current),setTimeout(()=>{r.current=!1},100))},[i,t]);return{isResizing:r.current,onDrag:l,onDragStart:s,onDragEnd:a}};var B=require("react/jsx-runtime"),ee="vuuTable-groupHeaderCell",Ht=({column:e,onClick:t,...n})=>(0,B.jsx)("span",{...n,className:`${ee}-close`,"data-icon":"close-circle",onClick:()=>t==null?void 0:t(e)}),go=e=>{let{children:t,column:n,className:o}=e;return(0,B.jsxs)("div",{className:(0,Je.default)(`${ee}-col`,o),role:"columnheader",children:[(0,B.jsx)("span",{className:`${ee}-label`,children:n.name}),t]})},Et=({column:e,className:t,onRemoveColumn:n,onResize:o,...r})=>{let i=(0,Pt.useRef)(null),{isResizing:s,...l}=ze({column:e,onResize:o,rootRef:i}),a=(0,Je.default)(ee,t,{vuuPinLeft:e.pin==="left",[`${ee}-right`]:e.align==="right",[`${ee}-resizing`]:e.resizing,[`${ee}-pending`]:e.groupConfirmed===!1}),{columns:u}=e;return(0,B.jsx)("div",{className:a,ref:i,...r,children:(0,B.jsxs)("div",{className:`${ee}-inner`,children:[u.map(c=>(0,B.jsx)(go,{column:c,children:u.length>1?(0,B.jsx)(Ht,{column:c,onClick:n}):null},c.key)),(0,B.jsx)(Ht,{"data-align":"end",onClick:n}),e.resizeable!==!1?(0,B.jsx)(Ke,{...l}):null]})})};var Ft=q(require("classnames")),le=require("react");var Xe=q(require("classnames"));var ie=require("react/jsx-runtime"),St="vuuSortIndicator",At=({sorted:e})=>{if(!e)return null;let t=typeof e=="number"?e<0?"dsc":"asc":e==="A"?"asc":"dsc";return typeof e=="number"?(0,ie.jsxs)("div",{className:(0,Xe.default)(St,"multi-col",t),children:[(0,ie.jsx)("span",{"data-icon":`sorted-${t}`}),(0,ie.jsx)("span",{className:"vuuSortPosition",children:Math.abs(e)})]}):(0,ie.jsx)("div",{className:(0,Xe.default)(St,"single-col"),children:(0,ie.jsx)("span",{"data-icon":`sorted-${t}`})})};var It=require("@vuu-ui/vuu-popups");var Lt=require("@vuu-ui/vuu-popups"),kt=q(require("classnames")),Kt=require("react");var Nt=require("react/jsx-runtime");var zt=({column:e,filter:t})=>{let n=(0,Lt.useContextMenu)(),o=(0,Kt.useCallback)(r=>{r.stopPropagation(),n(r,"filter",{column:e,filter:t})},[e,t,n]);return e.filter?(0,Nt.jsx)("div",{className:(0,kt.default)("vuuFilterIndicator"),"data-icon":"filter",onClick:o}):null};var te=require("react/jsx-runtime"),Re="vuuTable-headerCell",Vt=({column:e,className:t,onClick:n,onDragStart:o,onResize:r,...i})=>{let s=(0,le.useRef)(null),{isResizing:l,...a}=ze({column:e,onResize:r,rootRef:s}),u=(0,It.useContextMenu)(),c=(0,le.useRef)(null),p=T=>{u(T,"header",{column:e})},d=(0,le.useCallback)(T=>!l&&(n==null?void 0:n(T)),[l,n]),g=(0,le.useCallback)(T=>{c.current=window.setTimeout(()=>{o==null||o(T),c.current=null},500)},[o]),h=(0,le.useCallback)(()=>{c.current!==null&&(window.clearTimeout(c.current),c.current=null)},[]),f=(0,Ft.default)(Re,t,{vuuPinFloating:e.pin==="floating",vuuPinLeft:e.pin==="left",vuuPinRight:e.pin==="right",vuuEndPin:e.endPin,[`${Re}-resizing`]:e.resizing,[`${Re}-right`]:e.align==="right"});return(0,te.jsx)("div",{className:f,...i,onClick:d,onContextMenu:p,onMouseDown:g,onMouseUp:h,ref:s,children:(0,te.jsxs)("div",{className:`${Re}-inner`,children:[(0,te.jsx)(zt,{column:e}),(0,te.jsx)("div",{className:`${Re}-label`,children:e.label}),(0,te.jsx)(At,{sorted:e.sorted}),e.resizeable!==!1?(0,te.jsx)(Ke,{...a}):null]})})};var U=require("react/jsx-runtime"),Ye="vuuTable",{RENDER_IDX:bo}=$.metadataKeys,Wt=({columns:e,columnsWithinViewport:t,data:n,getRowOffset:o,headings:r,onColumnResize:i,onHeaderCellDragStart:s,onContextMenu:l,onRemoveColumnFromGroupBy:a,onRowClick:u,onSort:c,onToggleGroup:p,tableId:d,virtualColSpan:g=0,rowCount:h})=>{let f=(0,ge.useCallback)(C=>{s==null||s(C)},[s]),T=(0,ge.useMemo)(()=>e.filter($.notHidden),[e]),y=(0,ge.useMemo)(()=>(0,$.buildColumnMap)(e),[e]),m=(0,ge.useCallback)(C=>{var E;let w=C.target.closest(".vuuTable-headerCell"),v=parseInt((E=w==null?void 0:w.dataset.idx)!=null?E:"-1"),D=(0,$.visibleColumnAtIndex)(e,v),A=C.shiftKey;D&&c(D,A)},[e,c]);return(0,U.jsxs)("div",{"aria-rowcount":h,className:`${Ye}-table`,role:"table",children:[(0,U.jsxs)("div",{className:`${Ye}-headers`,role:"rowGroup",children:[r.map((C,R)=>(0,U.jsx)("div",{className:"vuuTable-heading",children:C.map(({label:w,width:v},D)=>(0,U.jsx)("div",{className:"vuuTable-headingCell",style:{width:v},children:w},D))},R)),(0,U.jsx)("div",{role:"row",children:T.map((C,R)=>{let w=(0,$.getColumnStyle)(C);return(0,$.isGroupColumn)(C)?(0,U.jsx)(Et,{column:C,"data-idx":R,onRemoveColumn:a,onResize:i,role:"columnHeader",style:w},R):(0,U.jsx)(Vt,{column:C,"data-idx":R,id:`${d}-${R}`,onClick:m,onDragStart:f,onResize:i,role:"columnHeader",style:w},R)})})]}),(0,U.jsx)("div",{className:`${Ye}-body`,onContextMenu:l,role:"rowGroup",children:n==null?void 0:n.map(C=>(0,U.jsx)(Rt,{columnMap:y,columns:t,offset:o(C),onClick:u,virtualColSpan:g,onToggleGroup:p,row:C},C[bo]))})]})};var gn=require("@vuu-ui/vuu-popups"),_=require("@vuu-ui/vuu-utils"),L=require("react");var Ne=require("@vuu-ui/vuu-data"),ne=require("@vuu-ui/vuu-utils"),k=require("react"),{SELECTED:De}=ne.metadataKeys;function $t({dataSource:e,onConfigChange:t,onFeatureEnabled:n,onFeatureInvocation:o,onSizeChange:r,onSubscribed:i,range:s={from:0,to:0},renderBufferSize:l=0,viewportRowCount:a}){let[,u]=(0,k.useState)(null),c=(0,k.useRef)(!0),p=(0,k.useRef)(!1),d=(0,k.useRef)({from:0,to:0}),g=(0,k.useRef)(null),h=(0,k.useRef)([]),f=(0,k.useMemo)(()=>new Qe((0,ne.getFullRange)(s)),[]),T=(0,k.useCallback)(v=>{for(let D of v)f.add(D);h.current=f.data,p.current=!0},[f]),y=(0,k.useCallback)(v=>{v.type==="subscribed"?i==null||i(v):v.type==="viewport-update"?(typeof v.size=="number"&&(r==null||r(v.size),f.setRowCount(v.size)),v.rows?T(v.rows):typeof v.size=="number"&&(h.current=f.data,p.current=!0)):(0,Ne.isVuuFeatureAction)(v)?n==null||n(v):(0,Ne.isVuuFeatureInvocation)(v)?o==null||o(v):console.log(`useDataSource unexpected message ${v.type}`)},[f,n,o,r,i,T]);(0,k.useEffect)(()=>()=>{g.current&&(cancelAnimationFrame(g.current),g.current=null),c.current=!1},[]);let m=(0,k.useCallback)(()=>{c.current&&(p.current&&(u({}),p.current=!1),g.current=requestAnimationFrame(m))},[u]);(0,k.useEffect)(()=>{g.current=requestAnimationFrame(m)},[m]);let C=(0,k.useCallback)(v=>{let{from:D}=e.range,A={from:D,to:D+v},E=(0,ne.getFullRange)(A,l);f.setRange(E),e.range=d.current=E,e.emit("range",A)},[e,f,l]),R=(0,k.useCallback)(v=>{let D=(0,ne.getFullRange)(v,l);f.setRange(D),e.range=d.current=D,e.emit("range",v)},[e,f,l]),w=(0,k.useCallback)(()=>f.getSelectedRows(),[f]);return(0,k.useEffect)(()=>{e==null||e.subscribe({range:d.current},y)},[e,y,t]),(0,k.useEffect)(()=>{C(a)},[C,a]),{data:h.current,getSelectedRows:w,range:d.current,setRange:R,dataSource:e}}var Qe=class{constructor({from:t,to:n}){this.rowCount=0;this.setRowCount=t=>{t<this.data.length&&(this.data.length=t),this.rowCount=t};this.range=new ne.WindowRange(t,n),this.data=new Array(n-t),this.rowCount=0}add(t){var o;let[n]=t;if(this.isWithinRange(n)){let r=n-this.range.from;this.data[r]=t;let i=t[De],s=(o=this.data[r-1])==null?void 0:o[De];s===0&&i?this.data[r-1][De]=2:s===2&&!i&&(this.data[r-1][De]=0)}}getAtIndex(t){return this.range.isWithin(t)&&this.data[t-this.range.from]!=null?this.data[t-this.range.from]:void 0}isWithinRange(t){return this.range.isWithin(t)}setRange({from:t,to:n}){if(t!==this.range.from||n!==this.range.to){let[o,r]=this.range.overlap(t,n),i=new Array(Math.max(0,n-t));for(let s=o;s<r;s++){let l=this.getAtIndex(s);if(l){let a=s-t;i[a]=l}}this.data=i,this.range.from=t,this.range.to=n}}getSelectedRows(){return this.data.filter(t=>t[De]===1)}};var Ot=require("@heswell/salt-lab"),be=require("react"),Gt=({onDrop:e})=>{let t=(0,be.useRef)(),n=(0,be.useRef)(null),o=(0,be.useCallback)(()=>{console.log("handleDropSettle"),t.current=void 0,n.current=null},[]),{draggable:r,draggedItemIndex:i,onMouseDown:s}=(0,Ot.useDragDrop)({allowDragDrop:!0,draggableClassName:"vuuTable-headerCell",orientation:"horizontal",containerRef:n,itemQuery:".vuuTable-headerCell",onDrop:e,onDropSettle:o}),l=(0,be.useCallback)(a=>{let{clientX:u,clientY:c}=a;console.log("useDraggableColumn handleHeaderCellDragStart means mouseDown fired on a column in RowBasedTable");let d=a.target.closest(".vuuTable-headerCell");n.current=d==null?void 0:d.closest("[role='row']");let{dataset:{idx:g="-1"}}=d;t.current={clientX:u,clientY:c,idx:g},s==null||s(a)},[s]);return{draggable:r,draggedItemIndex:i,onHeaderCellDragStart:l}};var Xt=require("@vuu-ui/vuu-utils"),K=require("react");function Co(e,...t){let n=new Set(e);for(let o of t)for(let r of o)n.add(r);return n}var Ze="ArrowUp",je="ArrowDown",qe="ArrowLeft",et="ArrowRight";var tt="Home",nt="End",ot="PageUp",rt="PageDown";var ho=new Set(["Enter","Delete"," "]),vo=new Set(["Tab"]),yo=new Set(["ArrowRight","ArrowLeft"]),Bt=new Set([tt,nt,ot,rt,je,qe,et,Ze]),wo=new Set(["F1","F2","F3","F4","F5","F6","F7","F8","F9","F10","F11","F12"]),Ds=Co(ho,Bt,yo,wo,vo);var Mo=["Home","End","PageUp","PageDown"],Ut=e=>Mo.includes(e),_t=e=>Bt.has(e);var Jt=e=>`.vuuTable-headers .vuuTable-headerCell:nth-child(${e+1})`,To=(e,t)=>`.vuuTable-body > [aria-rowindex='${e}'] > [role='cell']:nth-child(${t+1})`,Ro=[-1,-1];function Do(e,[t,n],o,r){return e===Ze?t>-1?[t-1,n]:[t,n]:e===je?t===-1?[0,n]:t===r-1?[t,n]:[t+1,n]:e===et?n<o-1?[t,n+1]:[t,n]:e===qe?n>0?[t,n-1]:[t,n]:[t,n]}var Yt=({columnCount:e=0,containerRef:t,disableHighlightOnFocus:n,data:o,requestScroll:r,rowCount:i=0,viewportRange:s})=>{var E;let{from:l,to:a}=s,u=(0,K.useRef)([-1,-1]),c=(0,K.useRef)(),p=(0,K.useRef)([-1,0]),d=(0,K.useCallback)(([b,M])=>{var H;let S=b===-1?Jt(M):To(b,M);return(H=t.current)==null?void 0:H.querySelector(S)},[t]),g=b=>b==null?void 0:b.closest("[role='columnHeader'],[role='cell']"),h=b=>{var M,S;if(b.role==="columnHeader")return[-1,parseInt((M=b.dataset.idx)!=null?M:"-1",10)];{let H=b.closest("[role='row']");if(H){let W=parseInt((S=H.ariaRowIndex)!=null?S:"-1",10),me=Array.from(H.childNodes).indexOf(b);return[W,me]}}return Ro},f=(0,K.useCallback)(b=>{var M;if(t.current){let S=d(b);S?(S!==c.current&&((M=c.current)==null||M.setAttribute("tabindex",""),c.current=S,S.setAttribute("tabindex","0")),S.focus()):(0,Xt.withinRange)(b[0],s)||(c.current=void 0,r==null||r({type:"scroll-page",direction:"up"}))}},[t,d,r,s]),T=(0,K.useCallback)((b,M,S=!1)=>{let H=[b,M];p.current=H,f(H),S&&(u.current=H)},[f]),y=(0,K.useCallback)(()=>{var b;(b=c.current)==null||b.setAttribute("tabindex",""),c.current=void 0},[]),m=(0,K.useCallback)(async(b,M)=>{switch(b){case rt:r==null||r({type:"scroll-page",direction:"down"});break;case ot:r==null||r({type:"scroll-page",direction:"up"});break;case tt:r==null||r({type:"scroll-end",direction:"home"});break;case nt:r==null||r({type:"scroll-end",direction:"end"});break}return M},[r]),C=(0,K.useCallback)(()=>{var b;if(n!==!0&&(b=t.current)!=null&&b.contains(document.activeElement)){let M=g(document.activeElement);M&&(u.current=h(M))}},[n,t]),R=(0,K.useCallback)(async b=>{let[M,S]=Ut(b)?await m(b,p.current):Do(b,p.current,e,i),[H,W]=p.current;(M!==H||S!==W)&&T(M,S,!0)},[e,m,i,T]),w=(0,K.useCallback)(b=>{o.length>0&&_t(b.key)&&(b.preventDefault(),b.stopPropagation(),R(b.key))},[o,R]),v=(0,K.useCallback)(b=>{let M=b.target,S=g(M);if(S){let[H,W]=h(S);T(H,W)}},[T]),D=(0,K.useMemo)(()=>({onClick:v,onFocus:C,onKeyDown:w}),[v,C,w]);(0,K.useLayoutEffect)(()=>{let{current:b}=p,M=b[0]>=l&&b[0]<=a;c.current&&!M?y():!c.current&&M&&f(b)},[f,l,a,y]);let A=((E=t.current)==null?void 0:E.firstChild)!=null;return(0,K.useEffect)(()=>{var b;if(A&&c.current===void 0){let M=(b=t.current)==null?void 0:b.querySelector(Jt(0));M&&(M.setAttribute("tabindex","0"),c.current=M)}},[t,A]),D};var Q=require("@vuu-ui/vuu-utils"),oe=require("react");var ce=require("react");var ae=new Map,Zt=(e,t,n)=>{switch(n){case"height":return t.height;case"clientHeight":return e.clientHeight;case"clientWidth":return e.clientWidth;case"contentHeight":return t.contentHeight;case"contentWidth":return t.contentWidth;case"scrollHeight":return Math.ceil(e.scrollHeight);case"scrollWidth":return Math.ceil(e.scrollWidth);case"width":return t.width;default:return 0}},Qt=new ResizeObserver(e=>{for(let t of e){let{target:n,borderBoxSize:o,contentBoxSize:r}=t,i=ae.get(n);if(i){let[{blockSize:s,inlineSize:l}]=o,[{blockSize:a,inlineSize:u}]=r,{onResize:c,measurements:p}=i,d=!1;for(let[g,h]of Object.entries(p)){let f=Zt(n,{height:s,width:l,contentHeight:a,contentWidth:u},g);f!==h&&(d=!0,p[g]=f)}d&&c&&c(p)}}});function jt(e,t,n,o=!1){let r=(0,ce.useRef)(t),i=(0,ce.useCallback)(s=>{let{width:l,height:a}=s.getBoundingClientRect(),{clientWidth:u,clientHeight:c}=s;return r.current.reduce((p,d)=>(p[d]=Zt(s,{width:l,height:a,contentHeight:c,contentWidth:u},d),p),{})},[]);(0,ce.useEffect)(()=>{let s=e.current;async function l(){ae.set(s,{measurements:{}}),await document.fonts.ready;let a=ae.get(s);if(a){let u=i(s);a.measurements=u,Qt.observe(s),o&&n(u)}else console.log("%cuseResizeObserver an target expected to be under observation wa snot found. This warrants investigation","font-weight:bold; color:red;")}if(s){if(ae.has(s))throw Error("useResizeObserver attemping to observe same element twice");l()}return()=>{s&&ae.has(s)&&(Qt.unobserve(s),ae.delete(s))}},[i,e]),(0,ce.useEffect)(()=>{let s=e.current,l=ae.get(s);if(l){if(r.current!==t){r.current=t;let a=i(s);l.measurements=a}l.onResize=n}},[t,i,e,n])}var xo=["clientHeight","clientWidth"],qt=e=>Number.isFinite(e),Ho={height:"100%",width:"100%"},Po=(e,t)=>(0,Q.isValidNumber)(e)&&(0,Q.isValidNumber)(t)?{height:`${e}px`,width:`${t}px`}:Ho,Eo=(e,t)=>{if((0,Q.isValidNumber)(e)&&(0,Q.isValidNumber)(t))return{height:e,width:t}},st=({defaultHeight:e=0,defaultWidth:t=0,height:n,width:o})=>{let r=(0,oe.useRef)(null),[i,s]=(0,oe.useState)({css:Po(n,o),inner:Eo(n,o),outer:{height:n!=null?n:"100%",width:o!=null?o:"100%"}});(0,oe.useMemo)(()=>{s(a=>{let{inner:u,outer:c}=a;if((0,Q.isValidNumber)(n)&&(0,Q.isValidNumber)(o)&&u&&c){let{height:p,width:d}=u,{height:g,width:h}=c;if(g!==n||h!==o){let f=(0,Q.isValidNumber)(g)?g-p:0,T=(0,Q.isValidNumber)(h)?h-d:0;return{...a,outer:{height:n,width:o},inner:{height:n-f,width:o-T}}}}return a})},[n,o]);let l=(0,oe.useCallback)(({clientWidth:a,clientHeight:u})=>{s(c=>{let{css:p,inner:d,outer:g}=c;return qt(u)&&qt(a)&&(a!==(d==null?void 0:d.width)||u!==(d==null?void 0:d.height))?{css:p,outer:g,inner:{width:Math.floor(a)||t,height:Math.floor(u)||e}}:c})},[e,t]);return jt(r,xo,l,!0),{containerRef:r,cssSize:i.css,outerSize:i.outer,innerSize:i.inner}};var Ce=require("@vuu-ui/vuu-utils"),xe=require("react"),{IDX:So,SELECTED:Ao}=Ce.metadataKeys,Lo=[],en=({selectionModel:e,onSelectionChange:t})=>{let n=(0,xe.useRef)(-1),o=(0,xe.useRef)(Lo);return(0,xe.useCallback)((i,s,l)=>{let{[So]:a,[Ao]:u}=i,{current:c}=n,{current:p}=o,g=(u?Ce.deselectItem:Ce.selectItem)(e,p,a,s,l,c);o.current=g,n.current=a,t&&t(g)},[t,e])};var tn=require("@heswell/salt-lab"),x=require("@vuu-ui/vuu-utils"),nn=require("react"),{info:it}=(0,x.logger)("useTableModel"),ko=100,on=x.metadataKeys.count,Ko=({serverDataType:e})=>e===void 0,zo=e=>{var t;if((0,x.isTypeDescriptor)(e.type))return(0,x.getCellRenderer)((t=e.type)==null?void 0:t.renderer)},rn=(e,t)=>{if(e.serverDataType)return e.serverDataType;if(t){let n=t.columns.find(o=>o.name===e.name);if(n)return n.serverDataType}return"string"},No=["int","long","double"],sn=e=>e===void 0?void 0:No.includes(e)?"right":"left",Fo=(e,t)=>{switch(it==null||it(`GridModelReducer ${t.type}`),t.type){case"init":return ln(t);case"moveColumn":return Vo(e,t);case"resizeColumn":return Oo(e,t);case"setTableSchema":return Go(e,t);case"hideColumns":return Wo(e,t);case"showColumns":return $o(e,t);case"pinColumn":return Bo(e,t);case"updateColumnProp":return He(e,t);case"tableConfig":return an(e,t);default:return console.log(`unhandled action ${t.type}`),e}},lt=(e,t)=>{let[n,o]=(0,nn.useReducer)(Fo,{tableConfig:e,dataSourceConfig:t},ln);return{columns:n.columns,dispatchColumnAction:o,headings:n.headings}};function ln({dataSourceConfig:e,tableConfig:t}){let n=t.columns.map(at(t)),o=n.some(x.isPinned)?(0,x.sortPinnedColumns)(n):n,r={columns:o,headings:(0,x.getTableHeadings)(o)};if(e){let{columns:i,...s}=e;return an(r,{type:"tableConfig",...s})}else return r}var Io=(e,t)=>t==="uppercase"?e.toUpperCase():t==="capitalize"?e[0].toUpperCase()+e.slice(1).toLowerCase():e,at=e=>(t,n)=>{let o=rn(t,e.tableSchema),{columnDefaultWidth:r=ko,columnFormatHeader:i}=e,{align:s=sn(o),key:l,name:a,label:u=a,width:c=r,...p}=t,d={...p,align:s,CellRenderer:zo(t),label:Io(u,i),key:l!=null?l:n+on,name:a,originalIdx:n,serverDataType:o,valueFormatter:(0,x.getValueFormatter)(t),width:c};return(0,x.isGroupColumn)(d)&&(d.columns=d.columns.map(g=>at(e)(g,g.key))),d};function Vo(e,{column:t,moveBy:n,moveTo:o}){let{columns:r}=e;if(typeof n=="number"){let i=r.indexOf(t),s=r.slice(),[l]=s.splice(i,1);return s.splice(i+n,0,l),{...e,columns:s}}else if(typeof o=="number"){let i=r.indexOf(t);return{...e,columns:(0,tn.moveItem)(r,i,o)}}return e}function Wo(e,{columns:t}){return t.some(n=>n.hidden!==!0)?t.reduce((n,o)=>o.hidden!==!0?He(n,{type:"updateColumnProp",column:o,hidden:!0}):n,e):e}function $o(e,{columns:t}){return t.some(n=>n.hidden)?t.reduce((n,o)=>o.hidden?He(n,{type:"updateColumnProp",column:o,hidden:!1}):n,e):e}function Oo(e,{column:t,phase:n,width:o}){let r="updateColumnProp",i=n!=="end";switch(n){case"begin":case"end":return He(e,{type:r,column:t,resizing:i});case"resize":return He(e,{type:r,column:t,width:o});default:throw Error(`useTableModel.resizeColumn, invalid resizePhase ${n}`)}}function Go(e,{tableSchema:t}){let{columns:n}=e;if(n.some(Ko)){let o=n.map(r=>{var s;let i=rn(r,t);return{...r,align:(s=r.align)!=null?s:sn(i),serverDataType:i}});return{...e,columns:o,tableSchema:t}}else return{...e,tableSchema:t}}function Bo(e,t){let{columns:n}=e,{column:o,pin:r}=t,i=n.find(s=>s.name===o.name);return i?(n=he(n,{...i,pin:r}),n=(0,x.sortPinnedColumns)(n),{...e,columns:n}):e}function He(e,t){let{columns:n}=e,{align:o,column:r,hidden:i,label:s,resizing:l,width:a}=t,u=n.find(c=>c.name===r.name);return u&&((o==="left"||o==="right")&&(n=he(n,{...u,align:o})),typeof s=="string"&&(n=he(n,{...u,label:s})),typeof l=="boolean"&&(n=he(n,{...u,resizing:l})),typeof i=="boolean"&&(n=he(n,{...u,hidden:i})),typeof a=="number"&&(n=he(n,{...u,width:a}))),{...e,columns:n}}function an(e,{columns:t,confirmed:n,filter:o,groupBy:r,sort:i}){let s=t&&t.length>0,l=r!==void 0,a=typeof(o==null?void 0:o.filter)=="string",u=i&&i.sortDefs.length>0,c=e;return s&&(c={...e,columns:t.map((p,d)=>{let g=(0,x.getColumnName)(p),h=d+on,f=(0,x.findColumn)(c.columns,g);return f?f.key===h?f:{...f,key:h}:at(e)({name:p},d)})}),l&&(c={...e,columns:(0,x.applyGroupByToColumns)(c.columns,r,n)}),u&&(c={...e,columns:(0,x.applySortToColumns)(c.columns,i)}),a?c={...e,columns:(0,x.applyFilterToColumns)(c.columns,o)}:c.columns.some(x.isFilteredColumn)&&(c={...e,columns:(0,x.stripFilterFromColumns)(c.columns)}),c}function he(e,t){return e.map(n=>n.name===t.name?t:n)}var I=require("react"),cn=e=>{let{scrollLeft:t,scrollTop:n}=e,{clientHeight:o,clientWidth:r,scrollHeight:i,scrollWidth:s}=e,l=t/(s-r),a=n/(i-o);return[l,a]},Uo=e=>{let{clientHeight:t,clientWidth:n,scrollHeight:o,scrollWidth:r}=e;return[r-n,o-t]},un=({onAttach:e,onDetach:t})=>{let n=(0,I.useRef)(null);return(0,I.useCallback)(r=>{if(r)n.current=r,e==null||e(r);else if(n.current){let{current:i}=n;n.current=r,t==null||t(i)}},[e,t])},mn=({onHorizontalScroll:e,onVerticalScroll:t,viewport:n})=>{let o=(0,I.useRef)(!1),r=(0,I.useRef)({scrollTop:0,scrollLeft:0}),i=(0,I.useRef)(null),s=(0,I.useRef)(null),{maxScrollContainerScrollHorizontal:l,maxScrollContainerScrollVertical:a}=n,u=(0,I.useCallback)(()=>{let{current:m}=s,{current:C}=i,{current:R}=o;if(R)o.current=!1;else if(m&&C){let[w,v]=cn(C),[D,A]=Uo(m),E=Math.round(w*D),b=Math.round(v*A);m.scrollTo({left:E,top:b,behavior:"auto"})}},[]),c=(0,I.useCallback)(()=>{let{current:m}=s,{current:C}=i,{current:R}=r;if(m&&C){let{scrollLeft:w,scrollTop:v}=m,[D,A]=cn(m);o.current=!0,C.scrollLeft=Math.round(D*l),C.scrollTop=Math.round(A*a),R.scrollTop!==v&&(R.scrollTop=v,t==null||t(v,A)),R.scrollLeft!==w&&(R.scrollLeft=w,e==null||e(w))}},[l,a,e,t]),p=(0,I.useCallback)(m=>{i.current=m,m.addEventListener("scroll",u,{passive:!0})},[u]),d=(0,I.useCallback)(m=>{i.current=null,m.removeEventListener("scroll",u)},[u]),g=(0,I.useCallback)(m=>{s.current=m,m.addEventListener("scroll",c,{passive:!0})},[c]),h=(0,I.useCallback)(m=>{s.current=null,m.removeEventListener("scroll",c)},[c]),f=un({onAttach:g,onDetach:h}),T=un({onAttach:p,onDetach:d}),y=(0,I.useCallback)(m=>{let{current:C}=s;if(C){if(o.current=!1,m.type==="scroll-page"){let{clientHeight:R,scrollLeft:w,scrollTop:v}=C,{direction:D}=m,A=D==="down"?R:-R,E=Math.min(Math.max(0,v+A),a);C.scrollTo({top:E,left:w,behavior:"auto"})}else if(m.type==="scroll-end"){let{direction:R}=m,w=R==="end"?a:0;C.scrollTo({top:w,left:C.scrollLeft,behavior:"auto"})}}},[a]);return{scrollbarContainerRef:T,contentContainerRef:f,requestScroll:y}};var Z=require("react"),Fe=require("@vuu-ui/vuu-utils"),_o=15e5,Jo={contentHeight:0,contentWidth:0,getRowAtPosition:()=>-1,getRowOffset:()=>-1,horizontalScrollbarHeight:0,maxScrollContainerScrollHorizontal:0,maxScrollContainerScrollVertical:0,pinnedWidthLeft:0,pinnedWidthRight:0,rowCount:0,setPctScrollTop:()=>{},totalHeaderHeight:0,verticalScrollbarWidth:0,viewportBodyHeight:0},Xo=e=>{let t=0,n=0,o=0;for(let r of e){let{hidden:i,pin:s,width:l}=r,a=i?0:l;s==="left"?t+=a:s==="right"?n+=a:o+=a}return{pinnedWidthLeft:t,pinnedWidthRight:n,unpinnedWidth:o}},ct=({columns:e,headerHeight:t,headings:n,rowCount:o,rowHeight:r,size:i})=>{let s=(0,Z.useRef)(0),a=Math.min(o,_o)*r,c=o*r-a,{pinnedWidthLeft:p,pinnedWidthRight:d,unpinnedWidth:g}=(0,Z.useMemo)(()=>Xo(e),[e]),[h,f]=(0,Z.useMemo)(()=>(0,Fe.actualRowPositioning)(r),[r]),[T,y]=(0,Z.useMemo)(()=>c?(0,Fe.virtualRowPositioning)(r,c,s):[h,f],[f,h,c,r]),m=(0,Z.useCallback)(C=>{s.current=C},[]);return(0,Z.useMemo)(()=>{var C;if(i){let R=n.length,w=15,v=p+g+d,D=v>i.width?w:0,A=t*(1+R),E=a-(((C=i==null?void 0:i.height)!=null?C:0)-D)+A,b=v-i.width+p,M=(i.height-t)/r,S=Number.isInteger(M)?M+1:Math.ceil(M),H=i.height-A,W=a>H?w:0;return{contentHeight:a,getRowAtPosition:y,getRowOffset:T,horizontalScrollbarHeight:D,maxScrollContainerScrollHorizontal:b,maxScrollContainerScrollVertical:E,pinnedWidthLeft:p,pinnedWidthRight:d,rowCount:S,contentWidth:v,setPctScrollTop:m,totalHeaderHeight:A,verticalScrollbarWidth:W,viewportBodyHeight:H}}else return Jo},[i,n.length,p,g,d,a,t,r,y,T,m])};var Pe=require("@vuu-ui/vuu-utils"),V=require("react"),dn=({columns:e,getRowAtPosition:t,setRange:n,viewportMeasurements:o})=>{let r=(0,V.useRef)(-1),{rowCount:i,contentWidth:s,maxScrollContainerScrollHorizontal:l}=o,a=s-l,u=(0,V.useRef)(0),[c,p]=(0,V.useMemo)(()=>(0,Pe.getColumnsInViewport)(e,u.current,u.current+a),[a,e]),d=(0,V.useRef)(p);(0,V.useEffect)(()=>{h(c)},[c]);let[g,h]=(0,V.useState)(c),f=(0,V.useCallback)(y=>{u.current=y;let[m,C]=(0,Pe.getColumnsInViewport)(e,y,y+a);(0,Pe.itemsChanged)(g,m)&&(d.current=C,h(m))},[a,e,g]),T=(0,V.useCallback)(y=>{let m=t(y);m!==r.current&&(r.current=m,n({from:m,to:m+i}))},[t,n,i]);return{columnsWithinViewport:g,onHorizontalScroll:f,onVerticalScroll:T,virtualColSpan:d.current}};var Yo=[],{KEY:Qo,IS_EXPANDED:pn,IS_LEAF:fn}=_.metadataKeys,bn=({config:e,dataSource:t,headerHeight:n,onConfigChange:o,onFeatureEnabled:r,onFeatureInvocation:i,onSelectionChange:s,renderBufferSize:l=0,rowHeight:a,selectionModel:u,...c})=>{var dt,pt;let[p,d]=(0,L.useState)(t.size),g=(0,L.useRef)(!1),h=(0,L.useRef)();if(h.current=t,t===void 0)throw Error("no data source provided to Vuu Table");let f=st(c),T=(0,L.useCallback)(P=>{d(P)},[]),{columns:y,dispatchColumnAction:m,headings:C}=lt(e,t.config),{getRowAtPosition:R,getRowOffset:w,setPctScrollTop:v,...D}=ct({columns:y,headerHeight:n,headings:C,rowCount:p,rowHeight:a,size:f.innerSize}),A=(0,L.useCallback)(({tableSchema:P})=>{P?(g.current=!0,m({type:"setTableSchema",tableSchema:P})):console.log("usbscription message with no schema")},[m]),E=(0,L.useCallback)(P=>{t.select(P),s==null||s(P)},[t,s]),b=en({onSelectionChange:E,selectionModel:u}),{data:M,getSelectedRows:S,range:H,setRange:W}=$t({dataSource:t,onFeatureEnabled:r,onFeatureInvocation:i,onSubscribed:A,onSizeChange:T,renderBufferSize:l,viewportRowCount:D.rowCount}),me=(0,L.useRef)();me.current=M;let Ve=(0,L.useCallback)(P=>{g.current=!0,m(P)},[m]),wn=Ue({dataSource:t,onPersistentColumnOperation:Ve}),Mn=(0,L.useCallback)((P,z=!1,O)=>{t&&(t.sort=(0,_.applySort)(t.sort,P,z,O))},[t]),Tn=(0,L.useCallback)((P,z,O)=>{let F=y.find(J=>J.name===z);if(F)P==="end"&&(g.current=!0),m({type:"resizeColumn",phase:P,column:F,width:O});else throw Error(`useDataTable.handleColumnResize, column ${z} not found`)},[y,m]),Rn=(0,L.useCallback)((P,z)=>{let O=(0,_.isJsonGroup)(z,P),F=P[Qo];if(P[pn]){if(t.closeTreeNode(F,!0),O){let J=y.indexOf(z);t.getRowsAtDepth(J+1).some(X=>X[pn]||X[fn])||m({type:"hideColumns",columns:y.slice(J+2)})}}else if(t.openTreeNode(F),O){let J=t.getChildRows(F),re=y.indexOf(z)+1,X=[y[re]];J.some(de=>de[fn])&&X.push(y[re+1]),X.some(de=>de.hidden)&&m({type:"showColumns",columns:X})}},[y,t,m]),{onVerticalScroll:ut,onHorizontalScroll:Dn,columnsWithinViewport:xn,virtualColSpan:Hn}=dn({columns:y,getRowAtPosition:R,setRange:W,viewportMeasurements:D}),Pn=(0,L.useCallback)((P,z)=>{v(z),ut(P)},[ut,v]),{requestScroll:En,...Sn}=mn({onHorizontalScroll:Dn,onVerticalScroll:Pn,viewport:D,viewportHeight:((pt=(dt=f.innerSize)==null?void 0:dt.height)!=null?pt:0)-n}),An=Yt({columnCount:y.length,containerRef:f.containerRef,data:M,requestScroll:En,rowCount:t==null?void 0:t.size,viewportRange:H}),Ln=(0,L.useCallback)(P=>{P?t&&t.groupBy.includes(P.name)&&(t.groupBy=t.groupBy.filter(z=>z!==P.name)):t.groupBy=[]},[t]),kn=(0,L.useCallback)((P,z)=>{let O=t.columns[P],F=(0,_.moveItem)(t.columns,O,z);F!==t.columns&&(t.columns=F,m({type:"tableConfig",columns:F}))},[t,m]),Kn=Gt({onDrop:kn});(0,L.useEffect)(()=>{h.current&&(g.current=!0,m({type:"init",tableConfig:e,dataSourceConfig:h.current.config}))},[e,m]),(0,L.useEffect)(()=>{t.on("config",(P,z)=>{g.current=!0,m({type:"tableConfig",...P,confirmed:z})})},[t,m]),(0,L.useMemo)(()=>{g.current&&(o==null||o({...e,columns:y}),g.current=!1)},[y,e,o]);let mt=(0,gn.useContextMenu)(),zn=(0,L.useCallback)(P=>{var X;let{current:z}=me,{current:O}=h,F=P.target,J=F==null?void 0:F.closest("div[role='cell']"),re=F==null?void 0:F.closest(".vuuTableRow");if(J&&re&&z&&O){let{columns:de,selectedRowsCount:Nn}=O,Fn=(0,_.buildColumnMap)(de),In=parseInt((X=re.ariaRowIndex)!=null?X:"-1"),Vn=Array.from(re.childNodes).indexOf(J),Wn=z.find(([On])=>On===In),$n=de[Vn];mt(P,"grid",{columnMap:Fn,columnName:$n,row:Wn,selectedRows:Nn===0?Yo:S(),viewport:t==null?void 0:t.viewport})}},[t==null?void 0:t.viewport,S,mt]);return{columns:y,columnsWithinViewport:xn,containerMeasurements:f,containerProps:An,data:M,dispatchColumnAction:m,getRowOffset:w,handleContextMenuAction:wn,headings:C,onColumnResize:Tn,onContextMenu:zn,onRemoveColumnFromGroupBy:Ln,onRowClick:b,onSort:Mn,onToggleGroup:Rn,virtualColSpan:Hn,scrollProps:Sn,rowCount:p,viewportMeasurements:D,...Kn}};var hn=q(require("classnames"));var vn=require("@vuu-ui/vuu-utils"),j=require("react/jsx-runtime"),ue="vuuTable",Zo=({allowConfigEditing:e=!1,className:t,config:n,dataSource:o,headerHeight:r=25,height:i,id:s,onConfigChange:l,onFeatureEnabled:a,onFeatureInvocation:u,onSelectionChange:c,onShowConfigEditor:p,renderBufferSize:d=0,rowHeight:g=20,selectionModel:h="extended",style:f,width:T,zebraStripes:y=!1,...m})=>{let C=(0,Ie.useIdMemo)(s),{containerMeasurements:{containerRef:R,innerSize:w,outerSize:v},containerProps:D,dispatchColumnAction:A,draggable:E,draggedItemIndex:b,handleContextMenuAction:M,scrollProps:S,viewportMeasurements:H,...W}=bn({config:n,dataSource:o,renderBufferSize:d,headerHeight:r,height:i,onConfigChange:l,onFeatureEnabled:a,onFeatureInvocation:u,onSelectionChange:c,rowHeight:g,selectionModel:h,width:T}),me={...v,"--content-height":`${H.contentHeight}px`,"--horizontal-scrollbar-height":`${H.horizontalScrollbarHeight}px`,"--content-width":`${H.contentWidth}px`,"--pinned-width-left":`${H.pinnedWidthLeft}px`,"--pinned-width-right":`${H.pinnedWidthRight}px`,"--header-height":`${r}px`,"--row-height":`${g}px`,"--table-height":`${w==null?void 0:w.height}px`,"--table-width":`${w==null?void 0:w.width}px`,"--total-header-height":`${H.totalHeaderHeight}px`,"--vertical-scrollbar-width":`${H.verticalScrollbarWidth}px`,"--viewport-body-height":`${H.viewportBodyHeight}px`},Ve=(0,hn.default)(ue,t,{[`${ue}-zebra`]:y,[`${ue}-loading`]:(0,vn.isDataLoading)(W.columns)});return(0,j.jsx)(Cn.ContextMenuProvider,{menuActionHandler:M,menuBuilder:Ge(o),children:(0,j.jsxs)("div",{...m,...D,className:Ve,id:C,ref:R,style:me,tabIndex:-1,children:[w?(0,j.jsx)("div",{className:`${ue}-scrollbarContainer`,ref:S.scrollbarContainerRef,children:(0,j.jsx)("div",{className:`${ue}-scrollbarContent`})}):null,w?(0,j.jsxs)("div",{className:`${ue}-contentContainer`,ref:S.contentContainerRef,children:[(0,j.jsx)(Wt,{...W,headerHeight:r,tableId:C}),E]}):null,e&&w?(0,j.jsx)(Ie.Button,{className:`${ue}-settings`,"data-icon":"settings",onClick:p,variant:"secondary"}):null]})})};var yn=q(require("classnames")),ye=require("@vuu-ui/vuu-utils");var ve=require("react/jsx-runtime"),Ee="vuuJsonCell",{IS_EXPANDED:jo,KEY:qo}=ye.metadataKeys,er=e=>{let t=e.lastIndexOf("|");return t===-1?"":e.slice(t+1)},tr=({column:e,row:t})=>{let{key:n}=e,o=t[n],r=!1;(0,ye.isJsonAttribute)(o)&&(o=o.slice(0,-1),r=!0);let i=er(t[qo]),s=(0,yn.default)({[`${Ee}-name`]:i===o,[`${Ee}-value`]:i!==o,[`${Ee}-group`]:r});if(r){let l=t[jo]?"minus-box":"plus-box";return(0,ve.jsxs)("span",{className:s,children:[(0,ve.jsx)("span",{className:`${Ee}-value`,children:o}),(0,ve.jsx)("span",{className:`${Ee}-toggle`,"data-icon":l})]})}else return o?(0,ve.jsx)("span",{className:s,children:o}):null};(0,ye.registerComponent)("json",tr,"cell-renderer",{});
 //# sourceMappingURL=index.js.map