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

package/esm/index.js

@@ -1,2886 +1,2 @@
-// src/context-menu/buildContextMenuDescriptors.ts
-import { isNumericColumn } from "@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(
-        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
-import { removeColumnFromFilter } from "@vuu-ui/vuu-filters";
-import {
-  addGroupColumn,
-  addSortColumn,
-  AggregationType,
-  setAggregations,
-  setSortColumn
-} from "@vuu-ui/vuu-utils";
-var removeFilterColumn = (dataSourceFilter, column) => {
-  if (dataSourceFilter.filterStruct && column) {
-    const [filterStruct, filter] = removeColumnFromFilter(
-      column,
-      dataSourceFilter.filterStruct
-    );
-    return {
-      filter,
-      filterStruct
-    };
-  } else {
-    return dataSourceFilter;
-  }
-};
-var { Average, Count, Distinct, High, Low, Sum } = AggregationType;
-var useTableContextMenu = ({
-  dataSource,
-  onPersistentColumnOperation
-}) => {
-  const handleContextMenuAction = (type, options) => {
-    const gridOptions = options;
-    if (gridOptions.column && dataSource) {
-      const { column } = gridOptions;
-      switch (type) {
-        case "sort-asc":
-          return dataSource.sort = setSortColumn(dataSource.sort, column, "A"), true;
-        case "sort-dsc":
-          return dataSource.sort = setSortColumn(dataSource.sort, column, "D"), true;
-        case "sort-add-asc":
-          return dataSource.sort = addSortColumn(dataSource.sort, column, "A"), true;
-        case "sort-add-dsc":
-          return dataSource.sort = addSortColumn(dataSource.sort, column, "D"), true;
-        case "group":
-          return dataSource.groupBy = addGroupColumn(dataSource.groupBy, column), true;
-        case "group-add":
-          return dataSource.groupBy = addGroupColumn(dataSource.groupBy, column), true;
-        case "column-hide":
-          return onPersistentColumnOperation({ type: "hideColumns", columns: [column] }), true;
-        case "column-remove":
-          return dataSource.columns = dataSource.columns.filter((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 = setAggregations(dataSource.aggregations, column, Average), true;
-        case "agg-high":
-          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, High), true;
-        case "agg-low":
-          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Low), true;
-        case "agg-count":
-          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Count), true;
-        case "agg-distinct":
-          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Distinct), true;
-        case "agg-sum":
-          return dataSource.aggregations = setAggregations(dataSource.aggregations, column, Sum), true;
-        case "column-pin-floating":
-          return onPersistentColumnOperation({ type: "pinColumn", column, pin: "floating" }), true;
-        case "column-pin-left":
-          return onPersistentColumnOperation({ type: "pinColumn", column, pin: "left" }), true;
-        case "column-pin-right":
-          return onPersistentColumnOperation({ type: "pinColumn", column, pin: "right" }), true;
-        case "column-unpin":
-          return onPersistentColumnOperation({ type: "pinColumn", column, pin: void 0 }), true;
-        default:
-      }
-    }
-    return false;
-  };
-  return handleContextMenuAction;
-};
-
-// src/Table.tsx
-import { ContextMenuProvider } from "@vuu-ui/vuu-popups";
-import { Button, useIdMemo } from "@salt-ds/core";
-
-// src/RowBasedTable.tsx
-import {
-  buildColumnMap,
-  getColumnStyle as getColumnStyle3,
-  isGroupColumn as isGroupColumn2,
-  metadataKeys as metadataKeys4,
-  notHidden as notHidden2,
-  visibleColumnAtIndex
-} from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback8, useMemo } from "react";
-
-// src/TableRow.tsx
-import {
-  isGroupColumn,
-  isJsonColumn,
-  isJsonGroup,
-  metadataKeys as metadataKeys3,
-  notHidden
-} from "@vuu-ui/vuu-utils";
-import cx2 from "classnames";
-import { memo as memo2, useCallback as useCallback3 } from "react";
-
-// src/TableCell.tsx
-import { getColumnStyle, metadataKeys } from "@vuu-ui/vuu-utils";
-import { EditableLabel } from "@heswell/salt-lab";
-import cx from "classnames";
-import {
-  memo,
-  useCallback,
-  useRef,
-  useState
-} from "react";
-import { jsx } from "react/jsx-runtime";
-var { KEY } = metadataKeys;
-var TableCell = memo(
-  ({
-    className: classNameProp,
-    column,
-    columnMap,
-    onClick,
-    row
-  }) => {
-    const labelFieldRef = useRef(null);
-    const {
-      align,
-      CellRenderer,
-      key,
-      pin,
-      editable,
-      resizing,
-      valueFormatter
-    } = column;
-    const [editing, setEditing] = useState(false);
-    const value = valueFormatter(row[key]);
-    const [editableValue, setEditableValue] = 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 = 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 = cx(classNameProp, {
-      vuuAlignRight: align === "right",
-      vuuPinFloating: pin === "floating",
-      vuuPinLeft: pin === "left",
-      vuuPinRight: pin === "right",
-      "vuuTableCell-resizing": resizing
-    }) || void 0;
-    const style = getColumnStyle(column);
-    return editable ? /* @__PURE__ */ jsx(
-      "div",
-      {
-        className,
-        "data-editable": true,
-        role: "cell",
-        style,
-        onKeyDown: handleTitleKeyDown,
-        children: /* @__PURE__ */ jsx(
-          EditableLabel,
-          {
-            editing,
-            value: editableValue,
-            onChange: setEditableValue,
-            onMouseDownCapture: handleTitleMouseDown,
-            onEnterEditMode: handleEnterEditMode,
-            onExitEditMode: handleExitEditMode,
-            onKeyDown: handleTitleKeyDown,
-            ref: labelFieldRef,
-            tabIndex: 0
-          },
-          "title"
-        )
-      }
-    ) : /* @__PURE__ */ jsx(
-      "div",
-      {
-        className,
-        role: "cell",
-        style,
-        onClick: handleClick,
-        children: CellRenderer ? /* @__PURE__ */ 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
-import { getColumnStyle as getColumnStyle2, metadataKeys as metadataKeys2 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback2 } from "react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var { DEPTH, IS_LEAF } = metadataKeys2;
-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 = useCallback2(
-    (evt) => {
-      onClick == null ? void 0 : onClick(evt, column);
-    },
-    [column, onClick]
-  );
-  const style = getColumnStyle2(column);
-  const isLeaf = row[IS_LEAF];
-  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ jsx2("span", { className: "vuuTableGroupCell-spacer" }, i));
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: "vuuTableGroupCell vuuPinLeft",
-      onClick: isLeaf ? void 0 : handleClick,
-      role: "cell",
-      style,
-      children: [
-        spacers,
-        isLeaf ? null : /* @__PURE__ */ jsx2("span", { className: "vuuTableGroupCell-toggle", "data-icon": "triangle-right" }),
-        /* @__PURE__ */ jsx2("span", { children: value })
-      ]
-    }
-  );
-};
-
-// src/TableRow.tsx
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-var { IDX, IS_EXPANDED, SELECTED } = metadataKeys3;
-var classBase = "vuuTableRow";
-var TableRow = memo2(function Row({
-  columnMap,
-  columns,
-  offset,
-  onClick,
-  onToggleGroup,
-  virtualColSpan = 0,
-  row
-}) {
-  const {
-    [IDX]: rowIndex,
-    [IS_EXPANDED]: isExpanded,
-    [SELECTED]: isSelected
-  } = row;
-  const className = cx2(classBase, {
-    [`${classBase}-even`]: rowIndex % 2 === 0,
-    [`${classBase}-expanded`]: isExpanded,
-    [`${classBase}-preSelected`]: isSelected === 2
-  });
-  const handleRowClick = useCallback3(
-    (evt) => {
-      const rangeSelect = evt.shiftKey;
-      const keepExistingSelection = evt.ctrlKey || evt.metaKey;
-      onClick == null ? void 0 : onClick(row, rangeSelect, keepExistingSelection);
-    },
-    [onClick, row]
-  );
-  const handleGroupCellClick = useCallback3(
-    (evt, column) => {
-      if (isGroupColumn(column) || isJsonGroup(column, row)) {
-        evt.stopPropagation();
-        onToggleGroup == null ? void 0 : onToggleGroup(row, column);
-      }
-    },
-    [onToggleGroup, row]
-  );
-  return /* @__PURE__ */ jsxs2(
-    "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__ */ jsx3("div", { role: "cell", style: { width: virtualColSpan } }) : null,
-        columns.filter(notHidden).map((column) => {
-          const isGroup = isGroupColumn(column);
-          const isJsonCell = isJsonColumn(column);
-          const Cell = isGroup ? TableGroupCell : TableCell;
-          return /* @__PURE__ */ jsx3(
-            Cell,
-            {
-              column,
-              columnMap,
-              onClick: isGroup || isJsonCell ? handleGroupCellClick : void 0,
-              row
-            },
-            column.name
-          );
-        })
-      ]
-    }
-  );
-});
-
-// src/TableGroupHeaderCell.tsx
-import cx3 from "classnames";
-import { useRef as useRef4 } from "react";
-
-// src/ColumnResizer.tsx
-import { useCallback as useCallback4, useRef as useRef2 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var NOOP = () => void 0;
-var baseClass = "vuuColumnResizer";
-var ColumnResizer = ({
-  onDrag,
-  onDragEnd = NOOP,
-  onDragStart = NOOP
-}) => {
-  const position = useRef2(0);
-  const onMouseMove = useCallback4(
-    (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 = useCallback4(
-    (e) => {
-      window.removeEventListener("mouseup", onMouseUp);
-      window.removeEventListener("mousemove", onMouseMove);
-      onDragEnd(e);
-    },
-    [onDragEnd, onMouseMove]
-  );
-  const handleMouseDown = useCallback4(
-    (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__ */ jsx4("div", { className: baseClass, "data-align": "end", onMouseDown: handleMouseDown });
-};
-
-// src/useTableColumnResize.tsx
-import { useCallback as useCallback5, useRef as useRef3 } from "react";
-var useTableColumnResize = ({
-  column,
-  onResize,
-  rootRef
-}) => {
-  const widthRef = useRef3(0);
-  const isResizing = useRef3(false);
-  const { name } = column;
-  const handleResizeStart = useCallback5(() => {
-    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 = useCallback5(
-    (_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 = useCallback5(() => {
-    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
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-var classBase2 = "vuuTable-groupHeaderCell";
-var RemoveButton = ({
-  column,
-  onClick,
-  ...htmlAttributes
-}) => {
-  return /* @__PURE__ */ jsx5(
-    "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__ */ jsxs3("div", { className: cx3(`${classBase2}-col`, className), role: "columnheader", children: [
-    /* @__PURE__ */ jsx5("span", { className: `${classBase2}-label`, children: column.name }),
-    children
-  ] });
-};
-var TableGroupHeaderCell = ({
-  column: groupColumn,
-  className: classNameProp,
-  onRemoveColumn,
-  onResize,
-  ...props
-}) => {
-  const rootRef = useRef4(null);
-  const { isResizing, ...resizeProps } = useTableColumnResize({
-    column: groupColumn,
-    onResize,
-    rootRef
-  });
-  const className = cx3(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__ */ jsx5("div", { className, ref: rootRef, ...props, children: /* @__PURE__ */ jsxs3("div", { className: `${classBase2}-inner`, children: [
-    columns.map((column) => /* @__PURE__ */ jsx5(ColHeader, { column, children: columns.length > 1 ? /* @__PURE__ */ jsx5(RemoveButton, { column, onClick: onRemoveColumn }) : null }, column.key)),
-    /* @__PURE__ */ jsx5(RemoveButton, { "data-align": "end", onClick: onRemoveColumn }),
-    groupColumn.resizeable !== false ? /* @__PURE__ */ jsx5(ColumnResizer, { ...resizeProps }) : null
-  ] }) });
-};
-
-// src/TableHeaderCell.tsx
-import cx6 from "classnames";
-import { useCallback as useCallback7, useRef as useRef5 } from "react";
-
-// src/SortIndicator.tsx
-import cx4 from "classnames";
-import { jsx as jsx6, jsxs as jsxs4 } from "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__ */ jsxs4("div", { className: cx4(classBase3, "multi-col", direction), children: [
-    /* @__PURE__ */ jsx6("span", { "data-icon": `sorted-${direction}` }),
-    /* @__PURE__ */ jsx6("span", { className: "vuuSortPosition", children: Math.abs(sorted) })
-  ] }) : /* @__PURE__ */ jsx6("div", { className: cx4(classBase3, "single-col"), children: /* @__PURE__ */ jsx6("span", { "data-icon": `sorted-${direction}` }) });
-};
-
-// src/TableHeaderCell.tsx
-import { useContextMenu as useContextMenu2 } from "@vuu-ui/vuu-popups";
-
-// src/filter-indicator.tsx
-import { useContextMenu } from "@vuu-ui/vuu-popups";
-import cx5 from "classnames";
-import { useCallback as useCallback6 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var FilterIndicator = ({ column, filter }) => {
-  const showContextMenu = useContextMenu();
-  const handleClick = useCallback6(
-    (evt) => {
-      evt.stopPropagation();
-      showContextMenu(evt, "filter", { column, filter });
-    },
-    [column, filter, showContextMenu]
-  );
-  if (!column.filter) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx7(
-    "div",
-    {
-      className: cx5("vuuFilterIndicator"),
-      "data-icon": "filter",
-      onClick: handleClick
-    }
-  );
-};
-
-// src/TableHeaderCell.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-var classBase4 = "vuuTable-headerCell";
-var TableHeaderCell = ({
-  column,
-  className: classNameProp,
-  onClick,
-  onDragStart,
-  onResize,
-  ...props
-}) => {
-  const rootRef = useRef5(null);
-  const { isResizing, ...resizeProps } = useTableColumnResize({
-    column,
-    onResize,
-    rootRef
-  });
-  const showContextMenu = useContextMenu2();
-  const dragTimerRef = useRef5(null);
-  const handleContextMenu = (e) => {
-    showContextMenu(e, "header", { column });
-  };
-  const handleClick = useCallback7(
-    (evt) => !isResizing && (onClick == null ? void 0 : onClick(evt)),
-    [isResizing, onClick]
-  );
-  const handleMouseDown = useCallback7(
-    (evt) => {
-      dragTimerRef.current = window.setTimeout(() => {
-        onDragStart == null ? void 0 : onDragStart(evt);
-        dragTimerRef.current = null;
-      }, 500);
-    },
-    [onDragStart]
-  );
-  const handleMouseUp = useCallback7(() => {
-    if (dragTimerRef.current !== null) {
-      window.clearTimeout(dragTimerRef.current);
-      dragTimerRef.current = null;
-    }
-  }, []);
-  const className = cx6(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__ */ jsx8(
-    "div",
-    {
-      className,
-      ...props,
-      onClick: handleClick,
-      onContextMenu: handleContextMenu,
-      onMouseDown: handleMouseDown,
-      onMouseUp: handleMouseUp,
-      ref: rootRef,
-      children: /* @__PURE__ */ jsxs5("div", { className: `${classBase4}-inner`, children: [
-        /* @__PURE__ */ jsx8(FilterIndicator, { column }),
-        /* @__PURE__ */ jsx8("div", { className: `${classBase4}-label`, children: column.label }),
-        /* @__PURE__ */ jsx8(SortIndicator, { sorted: column.sorted }),
-        column.resizeable !== false ? /* @__PURE__ */ jsx8(ColumnResizer, { ...resizeProps }) : null
-      ] })
-    }
-  );
-};
-
-// src/RowBasedTable.tsx
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-var classBase5 = "vuuTable";
-var { RENDER_IDX } = metadataKeys4;
-var RowBasedTable = ({
-  columns,
-  columnsWithinViewport,
-  data,
-  getRowOffset,
-  headings,
-  onColumnResize,
-  onHeaderCellDragStart,
-  onContextMenu,
-  onRemoveColumnFromGroupBy,
-  onRowClick,
-  onSort,
-  onToggleGroup,
-  tableId,
-  virtualColSpan = 0,
-  rowCount
-}) => {
-  const handleDragStart = useCallback8(
-    (evt) => {
-      onHeaderCellDragStart == null ? void 0 : onHeaderCellDragStart(evt);
-    },
-    [onHeaderCellDragStart]
-  );
-  const visibleColumns = useMemo(() => {
-    return columns.filter(notHidden2);
-  }, [columns]);
-  const columnMap = useMemo(() => buildColumnMap(columns), [columns]);
-  const handleHeaderClick = useCallback8(
-    (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 = visibleColumnAtIndex(columns, colIdx);
-      const isAdditive = evt.shiftKey;
-      column && onSort(column, isAdditive);
-    },
-    [columns, onSort]
-  );
-  return /* @__PURE__ */ jsxs6("div", { "aria-rowcount": rowCount, className: `${classBase5}-table`, role: "table", children: [
-    /* @__PURE__ */ jsxs6("div", { className: `${classBase5}-headers`, role: "rowGroup", children: [
-      headings.map((colHeaders, i) => /* @__PURE__ */ jsx9("div", { className: "vuuTable-heading", children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ jsx9("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j)) }, i)),
-      /* @__PURE__ */ jsx9("div", { role: "row", children: visibleColumns.map((column, i) => {
-        const style = getColumnStyle3(column);
-        return isGroupColumn2(column) ? /* @__PURE__ */ jsx9(
-          TableGroupHeaderCell,
-          {
-            column,
-            "data-idx": i,
-            onRemoveColumn: onRemoveColumnFromGroupBy,
-            onResize: onColumnResize,
-            role: "columnHeader",
-            style
-          },
-          i
-        ) : /* @__PURE__ */ jsx9(
-          TableHeaderCell,
-          {
-            column,
-            "data-idx": i,
-            id: `${tableId}-${i}`,
-            onClick: handleHeaderClick,
-            onDragStart: handleDragStart,
-            onResize: onColumnResize,
-            role: "columnHeader",
-            style
-          },
-          i
-        );
-      }) })
-    ] }),
-    /* @__PURE__ */ jsx9(
-      "div",
-      {
-        className: `${classBase5}-body`,
-        onContextMenu,
-        role: "rowGroup",
-        children: data == null ? void 0 : data.map((row) => /* @__PURE__ */ jsx9(
-          TableRow,
-          {
-            columnMap,
-            columns: columnsWithinViewport,
-            offset: getRowOffset(row),
-            onClick: onRowClick,
-            virtualColSpan,
-            onToggleGroup,
-            row
-          },
-          row[RENDER_IDX]
-        ))
-      }
-    )
-  ] });
-};
-
-// src/useTable.ts
-import { useContextMenu as usePopupContextMenu } from "@vuu-ui/vuu-popups";
-import {
-  applySort,
-  buildColumnMap as buildColumnMap2,
-  isJsonGroup as isJsonGroup2,
-  metadataKeys as metadataKeys8,
-  moveItem as moveItem2
-} from "@vuu-ui/vuu-utils";
-import {
-  useCallback as useCallback18,
-  useEffect as useEffect5,
-  useMemo as useMemo7,
-  useRef as useRef15,
-  useState as useState5
-} from "react";
-
-// src/useDataSource.ts
-import {
-  isVuuFeatureAction,
-  isVuuFeatureInvocation
-} from "@vuu-ui/vuu-data";
-import { getFullRange, metadataKeys as metadataKeys5, WindowRange } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback9, useEffect, useMemo as useMemo2, useRef as useRef6, useState as useState2 } from "react";
-var { SELECTED: SELECTED2 } = metadataKeys5;
-function useDataSource({
-  dataSource,
-  onConfigChange,
-  onFeatureEnabled,
-  onFeatureInvocation,
-  onSizeChange,
-  onSubscribed,
-  range = { from: 0, to: 0 },
-  renderBufferSize = 0,
-  viewportRowCount
-}) {
-  const [, forceUpdate] = useState2(null);
-  const isMounted = useRef6(true);
-  const hasUpdated = useRef6(false);
-  const rangeRef = useRef6({ from: 0, to: 0 });
-  const rafHandle = useRef6(null);
-  const data = useRef6([]);
-  const dataWindow = useMemo2(
-    () => new MovingWindow(getFullRange(range)),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-  const setData = useCallback9(
-    (updates) => {
-      for (const row of updates) {
-        dataWindow.add(row);
-      }
-      data.current = dataWindow.data;
-      hasUpdated.current = true;
-    },
-    [dataWindow]
-  );
-  const datasourceMessageHandler = useCallback9(
-    (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 (isVuuFeatureAction(message)) {
-        onFeatureEnabled == null ? void 0 : onFeatureEnabled(message);
-      } else if (isVuuFeatureInvocation(message)) {
-        onFeatureInvocation == null ? void 0 : onFeatureInvocation(message);
-      } else {
-        console.log(`useDataSource unexpected message ${message.type}`);
-      }
-    },
-    [
-      dataWindow,
-      onFeatureEnabled,
-      onFeatureInvocation,
-      onSizeChange,
-      onSubscribed,
-      setData
-    ]
-  );
-  useEffect(
-    () => () => {
-      if (rafHandle.current) {
-        cancelAnimationFrame(rafHandle.current);
-        rafHandle.current = null;
-      }
-      isMounted.current = false;
-    },
-    []
-  );
-  const refreshIfUpdated = useCallback9(() => {
-    if (isMounted.current) {
-      if (hasUpdated.current) {
-        forceUpdate({});
-        hasUpdated.current = false;
-      }
-      rafHandle.current = requestAnimationFrame(refreshIfUpdated);
-    }
-  }, [forceUpdate]);
-  useEffect(() => {
-    rafHandle.current = requestAnimationFrame(refreshIfUpdated);
-  }, [refreshIfUpdated]);
-  const adjustRange = useCallback9(
-    (rowCount) => {
-      const { from } = dataSource.range;
-      const rowRange = { from, to: from + rowCount };
-      const fullRange = getFullRange(rowRange, renderBufferSize);
-      dataWindow.setRange(fullRange);
-      dataSource.range = rangeRef.current = fullRange;
-      dataSource.emit("range", rowRange);
-    },
-    [dataSource, dataWindow, renderBufferSize]
-  );
-  const setRange = useCallback9(
-    (range2) => {
-      const fullRange = getFullRange(range2, renderBufferSize);
-      dataWindow.setRange(fullRange);
-      dataSource.range = rangeRef.current = fullRange;
-      dataSource.emit("range", range2);
-    },
-    [dataSource, dataWindow, renderBufferSize]
-  );
-  const getSelectedRows = useCallback9(() => {
-    return dataWindow.getSelectedRows();
-  }, [dataWindow]);
-  useEffect(() => {
-    dataSource == null ? void 0 : dataSource.subscribe(
-      {
-        range: rangeRef.current
-      },
-      datasourceMessageHandler
-    );
-  }, [dataSource, datasourceMessageHandler, onConfigChange]);
-  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 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
-import { useDragDrop } from "@heswell/salt-lab";
-import { useCallback as useCallback10, useRef as useRef7 } from "react";
-var useDraggableColumn = ({ onDrop }) => {
-  const mousePosRef = useRef7();
-  const containerRef = useRef7(null);
-  const handleDropSettle = useCallback10(() => {
-    console.log(`handleDropSettle`);
-    mousePosRef.current = void 0;
-    containerRef.current = null;
-  }, []);
-  const { draggable, draggedItemIndex, onMouseDown } = useDragDrop({
-    // allowDragDrop: "drop-indicator",
-    allowDragDrop: true,
-    draggableClassName: "vuuTable-headerCell",
-    orientation: "horizontal",
-    containerRef,
-    itemQuery: ".vuuTable-headerCell",
-    onDrop,
-    onDropSettle: handleDropSettle
-  });
-  const onHeaderCellDragStart = useCallback10(
-    (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
-import { withinRange } from "@vuu-ui/vuu-utils";
-import {
-  useCallback as useCallback11,
-  useEffect as useEffect2,
-  useLayoutEffect,
-  useMemo as useMemo3,
-  useRef as useRef8
-} from "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 = useRef8([-1, -1]);
-  const focusableCell = useRef8();
-  const activeCellPos = useRef8([-1, 0]);
-  const getTableCell = useCallback11(
-    ([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 = useCallback11(
-    (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 (!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 = useCallback11(
-    (rowIdx, colIdx, fromKeyboard = false) => {
-      const pos = [rowIdx, colIdx];
-      activeCellPos.current = pos;
-      focusCell(pos);
-      if (fromKeyboard) {
-        focusedCellPos.current = pos;
-      }
-    },
-    [focusCell]
-  );
-  const virtualizeActiveCell = useCallback11(() => {
-    var _a2;
-    (_a2 = focusableCell.current) == null ? void 0 : _a2.setAttribute("tabindex", "");
-    focusableCell.current = void 0;
-  }, []);
-  const nextPageItemIdx = useCallback11(
-    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 = useCallback11(() => {
-    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 = useCallback11(
-    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 = useCallback11(
-    (e) => {
-      if (data.length > 0 && isNavigationKey(e.key)) {
-        e.preventDefault();
-        e.stopPropagation();
-        void navigateChildItems(e.key);
-      }
-    },
-    [data, navigateChildItems]
-  );
-  const handleClick = useCallback11(
-    // 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 = useMemo3(() => {
-    return {
-      onClick: handleClick,
-      onFocus: handleFocus,
-      onKeyDown: handleKeyDown
-    };
-  }, [handleClick, handleFocus, handleKeyDown]);
-  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;
-  useEffect2(() => {
-    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
-import { isValidNumber } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback13, useMemo as useMemo4, useRef as useRef10, useState as useState3 } from "react";
-
-// src/useResizeObserver.ts
-import { useCallback as useCallback12, useEffect as useEffect3, useRef as useRef9 } from "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 = useRef9(dimensions);
-  const measure = useCallback12((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;
-      },
-      {}
-    );
-  }, []);
-  useEffect3(() => {
-    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]);
-  useEffect3(() => {
-    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 (isValidNumber(height) && isValidNumber(width)) {
-    return {
-      height: `${height}px`,
-      width: `${width}px`
-    };
-  } else {
-    return FULL_SIZE;
-  }
-};
-var getInitialInnerSize = (height, width) => {
-  if (isValidNumber(height) && isValidNumber(width)) {
-    return {
-      height,
-      width
-    };
-  }
-};
-var useMeasuredContainer = ({
-  defaultHeight = 0,
-  defaultWidth = 0,
-  height,
-  width
-}) => {
-  const containerRef = useRef10(null);
-  const [size, setSize] = useState3({
-    css: getInitialCssSize(height, width),
-    inner: getInitialInnerSize(height, width),
-    outer: {
-      height: height != null ? height : "100%",
-      width: width != null ? width : "100%"
-    }
-  });
-  useMemo4(() => {
-    setSize((currentSize) => {
-      const { inner, outer } = currentSize;
-      if (isValidNumber(height) && isValidNumber(width) && inner && outer) {
-        const { height: innerHeight, width: innerWidth } = inner;
-        const { height: outerHeight, width: outerWidth } = outer;
-        if (outerHeight !== height || outerWidth !== width) {
-          const heightDiff = isValidNumber(outerHeight) ? outerHeight - innerHeight : 0;
-          const widthDiff = isValidNumber(outerWidth) ? outerWidth - innerWidth : 0;
-          return {
-            ...currentSize,
-            outer: { height, width },
-            inner: { height: height - heightDiff, width: width - widthDiff }
-          };
-        }
-      }
-      return currentSize;
-    });
-  }, [height, width]);
-  const onResize = useCallback13(
-    ({ 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
-import { deselectItem, metadataKeys as metadataKeys6, selectItem } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback14, useRef as useRef11 } from "react";
-var { IDX: IDX2, SELECTED: SELECTED3 } = metadataKeys6;
-var NO_SELECTION = [];
-var useSelection = ({
-  selectionModel,
-  onSelectionChange
-}) => {
-  selectionModel === "extended" || selectionModel === "checkbox";
-  const lastActiveRef = useRef11(-1);
-  const selectedRef = useRef11(NO_SELECTION);
-  const handleSelectionChange = useCallback14(
-    (row, rangeSelect, keepExistingSelection) => {
-      const { [IDX2]: idx, [SELECTED3]: isSelected } = row;
-      const { current: active } = lastActiveRef;
-      const { current: selected } = selectedRef;
-      const selectOperation = isSelected ? deselectItem : 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
-import { moveItem } from "@heswell/salt-lab";
-import {
-  applyFilterToColumns,
-  applyGroupByToColumns,
-  applySortToColumns,
-  findColumn,
-  getCellRenderer,
-  getColumnName,
-  getTableHeadings,
-  getValueFormatter,
-  isFilteredColumn,
-  isGroupColumn as isGroupColumn3,
-  isPinned,
-  isTypeDescriptor,
-  logger,
-  metadataKeys as metadataKeys7,
-  sortPinnedColumns,
-  stripFilterFromColumns
-} from "@vuu-ui/vuu-utils";
-import { useReducer } from "react";
-var { info } = logger("useTableModel");
-var DEFAULT_COLUMN_WIDTH = 100;
-var KEY_OFFSET = metadataKeys7.count;
-var columnWithoutDataType = ({ serverDataType }) => serverDataType === void 0;
-var getCellRendererForColumn = (column) => {
-  var _a;
-  if (isTypeDescriptor(column.type)) {
-    return 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] = 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(isPinned) ? sortPinnedColumns(columns) : columns;
-  const state = {
-    columns: maybePinnedColumns,
-    headings: 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: getValueFormatter(column),
-    width
-  };
-  if (isGroupColumn3(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: 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 = 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 = getColumnName(colName);
-        const key = index + KEY_OFFSET;
-        const col = 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: applyGroupByToColumns(result.columns, groupBy, confirmed)
-    };
-  }
-  if (hasSort) {
-    result = {
-      ...state,
-      columns: applySortToColumns(result.columns, sort)
-    };
-  }
-  if (hasFilter) {
-    result = {
-      ...state,
-      columns: applyFilterToColumns(result.columns, filter)
-    };
-  } else if (result.columns.some(isFilteredColumn)) {
-    result = {
-      ...state,
-      columns: stripFilterFromColumns(result.columns)
-    };
-  }
-  return result;
-}
-function replaceColumn(state, column) {
-  return state.map((col) => col.name === column.name ? column : col);
-}
-
-// src/useTableScroll.ts
-import { useCallback as useCallback15, useRef as useRef12 } from "react";
-var getPctScroll = (container) => {
-  const { scrollLeft, scrollTop } = container;
-  const { clientHeight, clientWidth, scrollHeight, scrollWidth } = container;
-  const pctScrollLeft = scrollLeft / (scrollWidth - clientWidth);
-  const pctScrollTop = scrollTop / (scrollHeight - clientHeight);
-  return [pctScrollLeft, pctScrollTop];
-};
-var getMaxScroll = (container) => {
-  const { clientHeight, clientWidth, scrollHeight, scrollWidth } = container;
-  return [scrollWidth - clientWidth, scrollHeight - clientHeight];
-};
-var useCallbackRef = ({
-  onAttach,
-  onDetach
-}) => {
-  const ref = useRef12(null);
-  const callbackRef = useCallback15(
-    (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 = useRef12(false);
-  const scrollPosRef = useRef12({ scrollTop: 0, scrollLeft: 0 });
-  const scrollbarContainerRef = useRef12(null);
-  const contentContainerRef = useRef12(null);
-  const {
-    maxScrollContainerScrollHorizontal: maxScrollLeft,
-    maxScrollContainerScrollVertical: maxScrollTop
-  } = viewport;
-  const handleScrollbarContainerScroll = useCallback15(() => {
-    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 = useCallback15(() => {
-    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 = useCallback15(
-    (el) => {
-      scrollbarContainerRef.current = el;
-      el.addEventListener("scroll", handleScrollbarContainerScroll, {
-        passive: true
-      });
-    },
-    [handleScrollbarContainerScroll]
-  );
-  const handleDetachScrollbarContainer = useCallback15(
-    (el) => {
-      scrollbarContainerRef.current = null;
-      el.removeEventListener("scroll", handleScrollbarContainerScroll);
-    },
-    [handleScrollbarContainerScroll]
-  );
-  const handleAttachContentContainer = useCallback15(
-    (el) => {
-      contentContainerRef.current = el;
-      el.addEventListener("scroll", handleContentContainerScroll, {
-        passive: true
-      });
-    },
-    [handleContentContainerScroll]
-  );
-  const handleDetachContentContainer = useCallback15(
-    (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 = useCallback15(
-    (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
-import { useCallback as useCallback16, useMemo as useMemo5, useRef as useRef13 } from "react";
-import {
-  actualRowPositioning,
-  virtualRowPositioning
-} from "@vuu-ui/vuu-utils";
-var MAX_RAW_ROWS = 15e5;
-var UNMEASURED_VIEWPORT = {
-  contentHeight: 0,
-  contentWidth: 0,
-  getRowAtPosition: () => -1,
-  getRowOffset: () => -1,
-  horizontalScrollbarHeight: 0,
-  maxScrollContainerScrollHorizontal: 0,
-  maxScrollContainerScrollVertical: 0,
-  pinnedWidthLeft: 0,
-  pinnedWidthRight: 0,
-  rowCount: 0,
-  setPctScrollTop: () => void 0,
-  totalHeaderHeight: 0,
-  verticalScrollbarWidth: 0,
-  viewportBodyHeight: 0
-};
-var measurePinnedColumns = (columns) => {
-  let pinnedWidthLeft = 0;
-  let pinnedWidthRight = 0;
-  let unpinnedWidth = 0;
-  for (const column of columns) {
-    const { hidden, pin, width } = column;
-    const visibleWidth = hidden ? 0 : width;
-    if (pin === "left") {
-      pinnedWidthLeft += visibleWidth;
-    } else if (pin === "right") {
-      pinnedWidthRight += visibleWidth;
-    } else {
-      unpinnedWidth += visibleWidth;
-    }
-  }
-  return { pinnedWidthLeft, pinnedWidthRight, unpinnedWidth };
-};
-var useTableViewport = ({
-  columns,
-  headerHeight,
-  headings,
-  rowCount,
-  rowHeight,
-  size
-}) => {
-  const pctScrollTopRef = useRef13(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 } = useMemo5(
-    () => measurePinnedColumns(columns),
-    [columns]
-  );
-  const [actualRowOffset, actualRowAtPosition] = useMemo5(
-    () => actualRowPositioning(rowHeight),
-    [rowHeight]
-  );
-  const [getRowOffset, getRowAtPosition] = useMemo5(() => {
-    if (virtualisedExtent) {
-      return virtualRowPositioning(
-        rowHeight,
-        virtualisedExtent,
-        pctScrollTopRef
-      );
-    } else {
-      return [actualRowOffset, actualRowAtPosition];
-    }
-  }, [actualRowAtPosition, actualRowOffset, virtualisedExtent, rowHeight]);
-  const setPctScrollTop = useCallback16((scrollPct) => {
-    pctScrollTopRef.current = scrollPct;
-  }, []);
-  return useMemo5(() => {
-    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
-import {
-  getColumnsInViewport,
-  itemsChanged
-} from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback17, useEffect as useEffect4, useMemo as useMemo6, useRef as useRef14, useState as useState4 } from "react";
-var useVirtualViewport = ({
-  columns,
-  getRowAtPosition,
-  setRange,
-  viewportMeasurements
-}) => {
-  const firstRowRef = useRef14(-1);
-  const {
-    rowCount: viewportRowCount,
-    contentWidth,
-    maxScrollContainerScrollHorizontal
-  } = viewportMeasurements;
-  const availableWidth = contentWidth - maxScrollContainerScrollHorizontal;
-  const scrollLeftRef = useRef14(0);
-  const [visibleColumns, preSpan] = useMemo6(
-    () => getColumnsInViewport(
-      columns,
-      scrollLeftRef.current,
-      scrollLeftRef.current + availableWidth
-    ),
-    [availableWidth, columns]
-  );
-  const preSpanRef = useRef14(preSpan);
-  useEffect4(() => {
-    setColumnsWithinViewport(visibleColumns);
-  }, [visibleColumns]);
-  const [columnsWithinViewport, setColumnsWithinViewport] = useState4(visibleColumns);
-  const handleHorizontalScroll = useCallback17(
-    (scrollLeft) => {
-      scrollLeftRef.current = scrollLeft;
-      const [visibleColumns2, pre] = getColumnsInViewport(
-        columns,
-        scrollLeft,
-        scrollLeft + availableWidth
-      );
-      if (itemsChanged(columnsWithinViewport, visibleColumns2)) {
-        preSpanRef.current = pre;
-        setColumnsWithinViewport(visibleColumns2);
-      }
-    },
-    [availableWidth, columns, columnsWithinViewport]
-  );
-  const handleVerticalScroll = useCallback17(
-    (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 } = metadataKeys8;
-var useTable = ({
-  config,
-  dataSource,
-  headerHeight,
-  onConfigChange,
-  onFeatureEnabled,
-  onFeatureInvocation,
-  onSelectionChange,
-  renderBufferSize = 0,
-  rowHeight,
-  selectionModel,
-  ...measuredProps
-}) => {
-  var _a, _b;
-  const [rowCount, setRowCount] = useState5(dataSource.size);
-  const expectConfigChangeRef = useRef15(false);
-  const dataSourceRef = useRef15();
-  dataSourceRef.current = dataSource;
-  if (dataSource === void 0) {
-    throw Error("no data source provided to Vuu Table");
-  }
-  const containerMeasurements = useMeasuredContainer(measuredProps);
-  const onDataRowcountChange = useCallback18((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 = useCallback18(
-    ({ tableSchema }) => {
-      if (tableSchema) {
-        expectConfigChangeRef.current = true;
-        dispatchColumnAction({
-          type: "setTableSchema",
-          tableSchema
-        });
-      } else {
-        console.log("usbscription message with no schema");
-      }
-    },
-    [dispatchColumnAction]
-  );
-  const handleSelectionChange = useCallback18(
-    (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 = useRef15();
-  dataRef.current = data;
-  const onPersistentColumnOperation = useCallback18(
-    (action) => {
-      expectConfigChangeRef.current = true;
-      dispatchColumnAction(action);
-    },
-    [dispatchColumnAction]
-  );
-  const handleContextMenuAction = useTableContextMenu({
-    dataSource,
-    onPersistentColumnOperation
-  });
-  const handleSort = useCallback18(
-    (column, extendSort = false, sortType) => {
-      if (dataSource) {
-        dataSource.sort = applySort(
-          dataSource.sort,
-          column,
-          extendSort,
-          sortType
-        );
-      }
-    },
-    [dataSource]
-  );
-  const handleColumnResize = useCallback18(
-    (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 = useCallback18(
-    (row, column) => {
-      const isJson = isJsonGroup2(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 = useCallback18(
-    (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 = useCallback18(
-    (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 = useCallback18(
-    (fromIndex, toIndex) => {
-      const column = dataSource.columns[fromIndex];
-      const columns2 = moveItem2(dataSource.columns, column, toIndex);
-      if (columns2 !== dataSource.columns) {
-        dataSource.columns = columns2;
-        dispatchColumnAction({ type: "tableConfig", columns: columns2 });
-      }
-    },
-    [dataSource, dispatchColumnAction]
-  );
-  const draggableHook = useDraggableColumn({
-    onDrop: handleDropColumn
-  });
-  useEffect5(() => {
-    if (dataSourceRef.current) {
-      expectConfigChangeRef.current = true;
-      dispatchColumnAction({
-        type: "init",
-        tableConfig: config,
-        dataSourceConfig: dataSourceRef.current.config
-      });
-    }
-  }, [config, dispatchColumnAction]);
-  useEffect5(() => {
-    dataSource.on("config", (config2, confirmed) => {
-      expectConfigChangeRef.current = true;
-      dispatchColumnAction({
-        type: "tableConfig",
-        ...config2,
-        confirmed
-      });
-    });
-  }, [dataSource, dispatchColumnAction]);
-  useMemo7(() => {
-    if (expectConfigChangeRef.current) {
-      onConfigChange == null ? void 0 : onConfigChange({
-        ...config,
-        columns
-      });
-      expectConfigChangeRef.current = false;
-    }
-  }, [columns, config, onConfigChange]);
-  const showContextMenu = usePopupContextMenu();
-  const onContextMenu = useCallback18(
-    (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 = buildColumnMap2(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
-import cx7 from "classnames";
-import { isDataLoading } from "@vuu-ui/vuu-utils";
-import { jsx as jsx10, jsxs as jsxs7 } from "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 = 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 = cx7(classBase6, classNameProp, {
-    [`${classBase6}-zebra`]: zebraStripes,
-    [`${classBase6}-loading`]: isDataLoading(tableProps.columns)
-  });
-  return /* @__PURE__ */ jsx10(
-    ContextMenuProvider,
-    {
-      menuActionHandler: handleContextMenuAction,
-      menuBuilder: buildContextMenuDescriptors(dataSource),
-      children: /* @__PURE__ */ jsxs7(
-        "div",
-        {
-          ...htmlAttributes,
-          ...containerProps,
-          className,
-          id,
-          ref: containerRef,
-          style,
-          tabIndex: -1,
-          children: [
-            innerSize ? /* @__PURE__ */ jsx10(
-              "div",
-              {
-                className: `${classBase6}-scrollbarContainer`,
-                ref: scrollProps.scrollbarContainerRef,
-                children: /* @__PURE__ */ jsx10("div", { className: `${classBase6}-scrollbarContent` })
-              }
-            ) : null,
-            innerSize ? /* @__PURE__ */ jsxs7(
-              "div",
-              {
-                className: `${classBase6}-contentContainer`,
-                ref: scrollProps.contentContainerRef,
-                children: [
-                  /* @__PURE__ */ jsx10(
-                    RowBasedTable,
-                    {
-                      ...tableProps,
-                      headerHeight,
-                      tableId: id
-                    }
-                  ),
-                  draggable
-                ]
-              }
-            ) : null,
-            showSettings && innerSize ? /* @__PURE__ */ jsx10(
-              Button,
-              {
-                className: `${classBase6}-settings`,
-                "data-icon": "settings",
-                onClick: onShowSettings,
-                variant: "secondary"
-              }
-            ) : null
-          ]
-        }
-      )
-    }
-  );
-};
-
-// src/cell-renderers/json-cell/JsonCell.tsx
-import cx8 from "classnames";
-import {
-  isJsonAttribute,
-  metadataKeys as metadataKeys9,
-  registerComponent
-} from "@vuu-ui/vuu-utils";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
-var classBase7 = "vuuJsonCell";
-var { IS_EXPANDED: IS_EXPANDED3, KEY: KEY3 } = metadataKeys9;
-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 (isJsonAttribute(value)) {
-    value = value.slice(0, -1);
-    isToggle = true;
-  }
-  const rowKey = localKey(row[KEY3]);
-  const className = cx8({
-    [`${classBase7}-name`]: rowKey === value,
-    [`${classBase7}-value`]: rowKey !== value,
-    [`${classBase7}-group`]: isToggle
-  });
-  if (isToggle) {
-    const toggleIcon = row[IS_EXPANDED3] ? "minus-box" : "plus-box";
-    return /* @__PURE__ */ jsxs8("span", { className, children: [
-      /* @__PURE__ */ jsx11("span", { className: `${classBase7}-value`, children: value }),
-      /* @__PURE__ */ jsx11("span", { className: `${classBase7}-toggle`, "data-icon": toggleIcon })
-    ] });
-  } else if (value) {
-    return /* @__PURE__ */ jsx11("span", { className, children: value });
-  } else {
-    return null;
-  }
-};
-registerComponent("json", JsonCell, "cell-renderer", {});
-export {
-  Table,
-  buildContextMenuDescriptors,
-  useMeasuredContainer,
-  useTableContextMenu,
-  useTableModel,
-  useTableViewport
-};
+import{isNumericColumn as Rn}from"@vuu-ui/vuu-utils";var Be=e=>(t,n)=>{let o=[];if(e===void 0)return o;if(t==="header")o.push(...Dn(n,e)),o.push(...Pn(n,e)),o.push(...xn(n,e)),o.push(...Hn(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 Dn(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 xn(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(Rn(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 Ce=(e,t)=>({label:`Pin ${t}`,action:`column-pin-${t}`,options:e}),fe=e=>Ce(e,"left"),ge=e=>Ce(e,"floating"),be=e=>Ce(e,"right");function Hn(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:[fe(e),ge(e),be(e)]}):n==="left"?o.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[ge(e),be(e)]}):n==="right"?o.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[fe(e),ge(e)]}):n==="floating"&&o.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[fe(e),be(e)]}),o}function Pn(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}import{removeColumnFromFilter as En}from"@vuu-ui/vuu-filters";import{addGroupColumn as Ue,addSortColumn as _e,AggregationType as Sn,setAggregations as Y,setSortColumn as Je}from"@vuu-ui/vuu-utils";var An=(e,t)=>{if(e.filterStruct&&t){let[n,o]=En(t,e.filterStruct);return{filter:o,filterStruct:n}}else return e},{Average:Ln,Count:kn,Distinct:Kn,High:zn,Low:Nn,Sum:Fn}=Sn,Xe=({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=Je(e.sort,s,"A"),!0;case"sort-dsc":return e.sort=Je(e.sort,s,"D"),!0;case"sort-add-asc":return e.sort=_e(e.sort,s,"A"),!0;case"sort-add-dsc":return e.sort=_e(e.sort,s,"D"),!0;case"group":return e.groupBy=Ue(e.groupBy,s),!0;case"group-add":return e.groupBy=Ue(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=An(e.filter,s),!0;case"remove-filters":return e.filter={filter:""},!0;case"agg-avg":return e.aggregations=Y(e.aggregations,s,Ln),!0;case"agg-high":return e.aggregations=Y(e.aggregations,s,zn),!0;case"agg-low":return e.aggregations=Y(e.aggregations,s,Nn),!0;case"agg-count":return e.aggregations=Y(e.aggregations,s,kn),!0;case"agg-distinct":return e.aggregations=Y(e.aggregations,s,Kn),!0;case"agg-sum":return e.aggregations=Y(e.aggregations,s,Fn),!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};import{ContextMenuProvider as cs}from"@vuu-ui/vuu-popups";import{Button as us,useIdMemo as ms}from"@salt-ds/core";import{buildColumnMap as Mo,getColumnStyle as To,isGroupColumn as Ro,metadataKeys as Do,notHidden as xo,visibleColumnAtIndex as Ho}from"@vuu-ui/vuu-utils";import{useCallback as gt,useMemo as bt}from"react";import{isGroupColumn as qe,isJsonColumn as jn,isJsonGroup as qn,metadataKeys as eo,notHidden as to}from"@vuu-ui/vuu-utils";import no from"classnames";import{memo as oo,useCallback as et}from"react";import{getColumnStyle as In,metadataKeys as Vn}from"@vuu-ui/vuu-utils";import{EditableLabel as Wn}from"@heswell/salt-lab";import $n from"classnames";import{memo as On,useCallback as Gn,useRef as Bn,useState as Ye}from"react";import{jsx as ie}from"react/jsx-runtime";var{KEY:Qe}=Vn,he=On(({className:e,column:t,columnMap:n,onClick:o,row:r})=>{let i=Bn(null),{align:s,CellRenderer:l,key:a,pin:u,editable:c,resizing:p,valueFormatter:d}=t,[g,h]=Ye(!1),f=d(r[a]),[T,y]=Ye(f),m=()=>{var P;(P=i.current)==null||P.focus()},C=P=>{P.key==="Enter"&&h(!0)},R=Gn(P=>{o==null||o(P,t)},[t,o]),w=()=>{h(!0)},v=(P="",b="",M=!0,E=!1)=>{var x;h(!1),E?y(P):b!==P&&y(b),M===!1&&((x=i.current)==null||x.focus())},D=$n(e,{vuuAlignRight:s==="right",vuuPinFloating:u==="floating",vuuPinLeft:u==="left",vuuPinRight:u==="right","vuuTableCell-resizing":p})||void 0,S=In(t);return c?ie("div",{className:D,"data-editable":!0,role:"cell",style:S,onKeyDown:C,children:ie(Wn,{editing:g,value:T,onChange:y,onMouseDownCapture:m,onEnterEditMode:w,onExitEditMode:v,onKeyDown:C,ref:i,tabIndex:0},"title")}):ie("div",{className:D,role:"cell",style:S,onClick:R,children:l?ie(l,{column:t,columnMap:n,row:r}):f})},Un);he.displayName="TableCell";function Un(e,t){return e.column===t.column&&e.onClick===t.onClick&&e.row[Qe]===t.row[Qe]&&e.row[e.column.key]===t.row[t.column.key]}import{getColumnStyle as _n,metadataKeys as Jn}from"@vuu-ui/vuu-utils";import{useCallback as Xn}from"react";import{jsx as ve,jsxs as Zn}from"react/jsx-runtime";var{DEPTH:Yn,IS_LEAF:Ze}=Jn,Qn=(e,t)=>{let{[Yn]:n,[Ze]: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]}},je=({column:e,onClick:t,row:n})=>{let{columns:o}=e,[r,i]=Qn(o,n),s=Xn(c=>{t==null||t(c,e)},[e,t]),l=_n(e),a=n[Ze],u=Array(i).fill(0).map((c,p)=>ve("span",{className:"vuuTableGroupCell-spacer"},p));return Zn("div",{className:"vuuTableGroupCell vuuPinLeft",onClick:a?void 0:s,role:"cell",style:l,children:[u,a?null:ve("span",{className:"vuuTableGroupCell-toggle","data-icon":"triangle-right"}),ve("span",{children:r})]})};import{jsx as tt,jsxs as lo}from"react/jsx-runtime";var{IDX:ro,IS_EXPANDED:so,SELECTED:io}=eo,le="vuuTableRow",nt=oo(function({columnMap:t,columns:n,offset:o,onClick:r,onToggleGroup:i,virtualColSpan:s=0,row:l}){let{[ro]:a,[so]:u,[io]:c}=l,p=no(le,{[`${le}-even`]:a%2===0,[`${le}-expanded`]:u,[`${le}-preSelected`]:c===2}),d=et(h=>{let f=h.shiftKey,T=h.ctrlKey||h.metaKey;r==null||r(l,f,T)},[r,l]),g=et((h,f)=>{(qe(f)||qn(f,l))&&(h.stopPropagation(),i==null||i(l,f))},[i,l]);return lo("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?tt("div",{role:"cell",style:{width:s}}):null,n.filter(to).map(h=>{let f=qe(h),T=jn(h);return tt(f?je:he,{column:h,columnMap:t,onClick:f||T?g:void 0,row:l},h.name)})]})});import it from"classnames";import{useRef as mo}from"react";import{useCallback as ye,useRef as ao}from"react";import{jsx as uo}from"react/jsx-runtime";var ot=()=>{},co="vuuColumnResizer",ae=({onDrag:e,onDragEnd:t=ot,onDragStart:n=ot})=>{let o=ao(0),r=ye(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=ye(l=>{window.removeEventListener("mouseup",i),window.removeEventListener("mousemove",r),t(l)},[t,r]),s=ye(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 uo("div",{className:co,"data-align":"end",onMouseDown:s})};import{useCallback as we,useRef as rt}from"react";var ce=({column:e,onResize:t,rootRef:n})=>{let o=rt(0),r=rt(!1),{name:i}=e,s=we(()=>{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=we((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=we(()=>{t&&(t("end",i,o.current),setTimeout(()=>{r.current=!1},100))},[i,t]);return{isResizing:r.current,onDrag:l,onDragStart:s,onDragEnd:a}};import{jsx as G,jsxs as at}from"react/jsx-runtime";var V="vuuTable-groupHeaderCell",st=({column:e,onClick:t,...n})=>G("span",{...n,className:`${V}-close`,"data-icon":"close-circle",onClick:()=>t==null?void 0:t(e)}),po=e=>{let{children:t,column:n,className:o}=e;return at("div",{className:it(`${V}-col`,o),role:"columnheader",children:[G("span",{className:`${V}-label`,children:n.name}),t]})},lt=({column:e,className:t,onRemoveColumn:n,onResize:o,...r})=>{let i=mo(null),{isResizing:s,...l}=ce({column:e,onResize:o,rootRef:i}),a=it(V,t,{vuuPinLeft:e.pin==="left",[`${V}-right`]:e.align==="right",[`${V}-resizing`]:e.resizing,[`${V}-pending`]:e.groupConfirmed===!1}),{columns:u}=e;return G("div",{className:a,ref:i,...r,children:at("div",{className:`${V}-inner`,children:[u.map(c=>G(po,{column:c,children:u.length>1?G(st,{column:c,onClick:n}):null},c.key)),G(st,{"data-align":"end",onClick:n}),e.resizeable!==!1?G(ae,{...l}):null]})})};import vo from"classnames";import{useCallback as Me,useRef as pt}from"react";import ct from"classnames";import{jsx as ue,jsxs as fo}from"react/jsx-runtime";var ut="vuuSortIndicator",mt=({sorted:e})=>{if(!e)return null;let t=typeof e=="number"?e<0?"dsc":"asc":e==="A"?"asc":"dsc";return typeof e=="number"?fo("div",{className:ct(ut,"multi-col",t),children:[ue("span",{"data-icon":`sorted-${t}`}),ue("span",{className:"vuuSortPosition",children:Math.abs(e)})]}):ue("div",{className:ct(ut,"single-col"),children:ue("span",{"data-icon":`sorted-${t}`})})};import{useContextMenu as yo}from"@vuu-ui/vuu-popups";import{useContextMenu as go}from"@vuu-ui/vuu-popups";import bo from"classnames";import{useCallback as Co}from"react";import{jsx as ho}from"react/jsx-runtime";var dt=({column:e,filter:t})=>{let n=go(),o=Co(r=>{r.stopPropagation(),n(r,"filter",{column:e,filter:t})},[e,t,n]);return e.filter?ho("div",{className:bo("vuuFilterIndicator"),"data-icon":"filter",onClick:o}):null};import{jsx as q,jsxs as wo}from"react/jsx-runtime";var j="vuuTable-headerCell",ft=({column:e,className:t,onClick:n,onDragStart:o,onResize:r,...i})=>{let s=pt(null),{isResizing:l,...a}=ce({column:e,onResize:r,rootRef:s}),u=yo(),c=pt(null),p=T=>{u(T,"header",{column:e})},d=Me(T=>!l&&(n==null?void 0:n(T)),[l,n]),g=Me(T=>{c.current=window.setTimeout(()=>{o==null||o(T),c.current=null},500)},[o]),h=Me(()=>{c.current!==null&&(window.clearTimeout(c.current),c.current=null)},[]),f=vo(j,t,{vuuPinFloating:e.pin==="floating",vuuPinLeft:e.pin==="left",vuuPinRight:e.pin==="right",vuuEndPin:e.endPin,[`${j}-resizing`]:e.resizing,[`${j}-right`]:e.align==="right"});return q("div",{className:f,...i,onClick:d,onContextMenu:p,onMouseDown:g,onMouseUp:h,ref:s,children:wo("div",{className:`${j}-inner`,children:[q(dt,{column:e}),q("div",{className:`${j}-label`,children:e.label}),q(mt,{sorted:e.sorted}),e.resizeable!==!1?q(ae,{...a}):null]})})};import{jsx as B,jsxs as Ct}from"react/jsx-runtime";var Te="vuuTable",{RENDER_IDX:Po}=Do,ht=({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=gt(C=>{s==null||s(C)},[s]),T=bt(()=>e.filter(xo),[e]),y=bt(()=>Mo(e),[e]),m=gt(C=>{var P;let w=C.target.closest(".vuuTable-headerCell"),v=parseInt((P=w==null?void 0:w.dataset.idx)!=null?P:"-1"),D=Ho(e,v),S=C.shiftKey;D&&c(D,S)},[e,c]);return Ct("div",{"aria-rowcount":h,className:`${Te}-table`,role:"table",children:[Ct("div",{className:`${Te}-headers`,role:"rowGroup",children:[r.map((C,R)=>B("div",{className:"vuuTable-heading",children:C.map(({label:w,width:v},D)=>B("div",{className:"vuuTable-headingCell",style:{width:v},children:w},D))},R)),B("div",{role:"row",children:T.map((C,R)=>{let w=To(C);return Ro(C)?B(lt,{column:C,"data-idx":R,onRemoveColumn:a,onResize:i,role:"columnHeader",style:w},R):B(ft,{column:C,"data-idx":R,id:`${d}-${R}`,onClick:m,onDragStart:f,onResize:i,role:"columnHeader",style:w},R)})})]}),B("div",{className:`${Te}-body`,onContextMenu:l,role:"rowGroup",children:n==null?void 0:n.map(C=>B(nt,{columnMap:y,columns:t,offset:o(C),onClick:u,virtualColSpan:g,onToggleGroup:p,row:C},C[Po]))})]})};import{useContextMenu as qr}from"@vuu-ui/vuu-popups";import{applySort as es,buildColumnMap as ts,isJsonGroup as ns,metadataKeys as os,moveItem as rs}from"@vuu-ui/vuu-utils";import{useCallback as z,useEffect as Qt,useMemo as ss,useRef as Ie,useState as is}from"react";import{isVuuFeatureAction as Eo,isVuuFeatureInvocation as So}from"@vuu-ui/vuu-data";import{getFullRange as Re,metadataKeys as Ao,WindowRange as Lo}from"@vuu-ui/vuu-utils";import{useCallback as Q,useEffect as me,useMemo as ko,useRef as ee,useState as Ko}from"react";var{SELECTED:te}=Ao;function vt({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]=Ko(null),c=ee(!0),p=ee(!1),d=ee({from:0,to:0}),g=ee(null),h=ee([]),f=ko(()=>new De(Re(s)),[]),T=Q(v=>{for(let D of v)f.add(D);h.current=f.data,p.current=!0},[f]),y=Q(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)):Eo(v)?n==null||n(v):So(v)?o==null||o(v):console.log(`useDataSource unexpected message ${v.type}`)},[f,n,o,r,i,T]);me(()=>()=>{g.current&&(cancelAnimationFrame(g.current),g.current=null),c.current=!1},[]);let m=Q(()=>{c.current&&(p.current&&(u({}),p.current=!1),g.current=requestAnimationFrame(m))},[u]);me(()=>{g.current=requestAnimationFrame(m)},[m]);let C=Q(v=>{let{from:D}=e.range,S={from:D,to:D+v},P=Re(S,l);f.setRange(P),e.range=d.current=P,e.emit("range",S)},[e,f,l]),R=Q(v=>{let D=Re(v,l);f.setRange(D),e.range=d.current=D,e.emit("range",v)},[e,f,l]),w=Q(()=>f.getSelectedRows(),[f]);return me(()=>{e==null||e.subscribe({range:d.current},y)},[e,y,t]),me(()=>{C(a)},[C,a]),{data:h.current,getSelectedRows:w,range:d.current,setRange:R,dataSource:e}}var De=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 Lo(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[te],s=(o=this.data[r-1])==null?void 0:o[te];s===0&&i?this.data[r-1][te]=2:s===2&&!i&&(this.data[r-1][te]=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[te]===1)}};import{useDragDrop as zo}from"@heswell/salt-lab";import{useCallback as yt,useRef as wt}from"react";var Mt=({onDrop:e})=>{let t=wt(),n=wt(null),o=yt(()=>{console.log("handleDropSettle"),t.current=void 0,n.current=null},[]),{draggable:r,draggedItemIndex:i,onMouseDown:s}=zo({allowDragDrop:!0,draggableClassName:"vuuTable-headerCell",orientation:"horizontal",containerRef:n,itemQuery:".vuuTable-headerCell",onDrop:e,onDropSettle:o}),l=yt(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}};import{withinRange as Oo}from"@vuu-ui/vuu-utils";import{useCallback as I,useEffect as Go,useLayoutEffect as Bo,useMemo as Uo,useRef as Ke}from"react";function No(e,...t){let n=new Set(e);for(let o of t)for(let r of o)n.add(r);return n}var xe="ArrowUp",He="ArrowDown",Pe="ArrowLeft",Ee="ArrowRight";var Se="Home",Ae="End",Le="PageUp",ke="PageDown";var Fo=new Set(["Enter","Delete"," "]),Io=new Set(["Tab"]),Vo=new Set(["ArrowRight","ArrowLeft"]),Tt=new Set([Se,Ae,Le,ke,He,Pe,Ee,xe]),Wo=new Set(["F1","F2","F3","F4","F5","F6","F7","F8","F9","F10","F11","F12"]),El=No(Fo,Tt,Vo,Wo,Io);var $o=["Home","End","PageUp","PageDown"],Rt=e=>$o.includes(e),Dt=e=>Tt.has(e);var xt=e=>`.vuuTable-headers .vuuTable-headerCell:nth-child(${e+1})`,_o=(e,t)=>`.vuuTable-body > [aria-rowindex='${e}'] > [role='cell']:nth-child(${t+1})`,Jo=[-1,-1];function Xo(e,[t,n],o,r){return e===xe?t>-1?[t-1,n]:[t,n]:e===He?t===-1?[0,n]:t===r-1?[t,n]:[t+1,n]:e===Ee?n<o-1?[t,n+1]:[t,n]:e===Pe?n>0?[t,n-1]:[t,n]:[t,n]}var Ht=({columnCount:e=0,containerRef:t,disableHighlightOnFocus:n,data:o,requestScroll:r,rowCount:i=0,viewportRange:s})=>{var P;let{from:l,to:a}=s,u=Ke([-1,-1]),c=Ke(),p=Ke([-1,0]),d=I(([b,M])=>{var x;let E=b===-1?xt(M):_o(b,M);return(x=t.current)==null?void 0:x.querySelector(E)},[t]),g=b=>b==null?void 0:b.closest("[role='columnHeader'],[role='cell']"),h=b=>{var M,E;if(b.role==="columnHeader")return[-1,parseInt((M=b.dataset.idx)!=null?M:"-1",10)];{let x=b.closest("[role='row']");if(x){let k=parseInt((E=x.ariaRowIndex)!=null?E:"-1",10),J=Array.from(x.childNodes).indexOf(b);return[k,J]}}return Jo},f=I(b=>{var M;if(t.current){let E=d(b);E?(E!==c.current&&((M=c.current)==null||M.setAttribute("tabindex",""),c.current=E,E.setAttribute("tabindex","0")),E.focus()):Oo(b[0],s)||(c.current=void 0,r==null||r({type:"scroll-page",direction:"up"}))}},[t,d,r,s]),T=I((b,M,E=!1)=>{let x=[b,M];p.current=x,f(x),E&&(u.current=x)},[f]),y=I(()=>{var b;(b=c.current)==null||b.setAttribute("tabindex",""),c.current=void 0},[]),m=I(async(b,M)=>{switch(b){case ke:r==null||r({type:"scroll-page",direction:"down"});break;case Le:r==null||r({type:"scroll-page",direction:"up"});break;case Se:r==null||r({type:"scroll-end",direction:"home"});break;case Ae:r==null||r({type:"scroll-end",direction:"end"});break}return M},[r]),C=I(()=>{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=I(async b=>{let[M,E]=Rt(b)?await m(b,p.current):Xo(b,p.current,e,i),[x,k]=p.current;(M!==x||E!==k)&&T(M,E,!0)},[e,m,i,T]),w=I(b=>{o.length>0&&Dt(b.key)&&(b.preventDefault(),b.stopPropagation(),R(b.key))},[o,R]),v=I(b=>{let M=b.target,E=g(M);if(E){let[x,k]=h(E);T(x,k)}},[T]),D=Uo(()=>({onClick:v,onFocus:C,onKeyDown:w}),[v,C,w]);Bo(()=>{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 S=((P=t.current)==null?void 0:P.firstChild)!=null;return Go(()=>{var b;if(S&&c.current===void 0){let M=(b=t.current)==null?void 0:b.querySelector(xt(0));M&&(M.setAttribute("tabindex","0"),c.current=M)}},[t,S]),D};import{isValidNumber as W}from"@vuu-ui/vuu-utils";import{useCallback as Zo,useMemo as jo,useRef as qo,useState as er}from"react";import{useCallback as Yo,useEffect as Pt,useRef as Qo}from"react";var U=new Map,St=(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}},Et=new ResizeObserver(e=>{for(let t of e){let{target:n,borderBoxSize:o,contentBoxSize:r}=t,i=U.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=St(n,{height:s,width:l,contentHeight:a,contentWidth:u},g);f!==h&&(d=!0,p[g]=f)}d&&c&&c(p)}}});function At(e,t,n,o=!1){let r=Qo(t),i=Yo(s=>{let{width:l,height:a}=s.getBoundingClientRect(),{clientWidth:u,clientHeight:c}=s;return r.current.reduce((p,d)=>(p[d]=St(s,{width:l,height:a,contentHeight:c,contentWidth:u},d),p),{})},[]);Pt(()=>{let s=e.current;async function l(){U.set(s,{measurements:{}}),await document.fonts.ready;let a=U.get(s);if(a){let u=i(s);a.measurements=u,Et.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(U.has(s))throw Error("useResizeObserver attemping to observe same element twice");l()}return()=>{s&&U.has(s)&&(Et.unobserve(s),U.delete(s))}},[i,e]),Pt(()=>{let s=e.current,l=U.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 tr=["clientHeight","clientWidth"],Lt=e=>Number.isFinite(e),nr={height:"100%",width:"100%"},or=(e,t)=>W(e)&&W(t)?{height:`${e}px`,width:`${t}px`}:nr,rr=(e,t)=>{if(W(e)&&W(t))return{height:e,width:t}},kt=({defaultHeight:e=0,defaultWidth:t=0,height:n,width:o})=>{let r=qo(null),[i,s]=er({css:or(n,o),inner:rr(n,o),outer:{height:n!=null?n:"100%",width:o!=null?o:"100%"}});jo(()=>{s(a=>{let{inner:u,outer:c}=a;if(W(n)&&W(o)&&u&&c){let{height:p,width:d}=u,{height:g,width:h}=c;if(g!==n||h!==o){let f=W(g)?g-p:0,T=W(h)?h-d:0;return{...a,outer:{height:n,width:o},inner:{height:n-f,width:o-T}}}}return a})},[n,o]);let l=Zo(({clientWidth:a,clientHeight:u})=>{s(c=>{let{css:p,inner:d,outer:g}=c;return Lt(u)&&Lt(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 At(r,tr,l,!0),{containerRef:r,cssSize:i.css,outerSize:i.outer,innerSize:i.inner}};import{deselectItem as sr,metadataKeys as ir,selectItem as lr}from"@vuu-ui/vuu-utils";import{useCallback as ar,useRef as Kt}from"react";var{IDX:cr,SELECTED:ur}=ir,mr=[],zt=({selectionModel:e,onSelectionChange:t})=>{let n=Kt(-1),o=Kt(mr);return ar((i,s,l)=>{let{[cr]:a,[ur]:u}=i,{current:c}=n,{current:p}=o,g=(u?sr:lr)(e,p,a,s,l,c);o.current=g,n.current=a,t&&t(g)},[t,e])};import{moveItem as dr}from"@heswell/salt-lab";import{applyFilterToColumns as pr,applyGroupByToColumns as fr,applySortToColumns as gr,findColumn as br,getCellRenderer as Cr,getColumnName as hr,getTableHeadings as vr,getValueFormatter as yr,isFilteredColumn as wr,isGroupColumn as Mr,isPinned as Tr,isTypeDescriptor as Rr,logger as Dr,metadataKeys as xr,sortPinnedColumns as Nt,stripFilterFromColumns as Hr}from"@vuu-ui/vuu-utils";import{useReducer as Pr}from"react";var{info:ze}=Dr("useTableModel"),Er=100,Ft=xr.count,Sr=({serverDataType:e})=>e===void 0,Ar=e=>{var t;if(Rr(e.type))return Cr((t=e.type)==null?void 0:t.renderer)},It=(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"},Lr=["int","long","double"],Vt=e=>e===void 0?void 0:Lr.includes(e)?"right":"left",kr=(e,t)=>{switch(ze==null||ze(`GridModelReducer ${t.type}`),t.type){case"init":return $t(t);case"moveColumn":return zr(e,t);case"resizeColumn":return Ir(e,t);case"setTableSchema":return Vr(e,t);case"hideColumns":return Nr(e,t);case"showColumns":return Fr(e,t);case"pinColumn":return Wr(e,t);case"updateColumnProp":return ne(e,t);case"tableConfig":return Ot(e,t);default:return console.log(`unhandled action ${t.type}`),e}},Wt=(e,t)=>{let[n,o]=Pr(kr,{tableConfig:e,dataSourceConfig:t},$t);return{columns:n.columns,dispatchColumnAction:o,headings:n.headings}};function $t({dataSourceConfig:e,tableConfig:t}){let n=t.columns.map(Ne(t)),o=n.some(Tr)?Nt(n):n,r={columns:o,headings:vr(o)};if(e){let{columns:i,...s}=e;return Ot(r,{type:"tableConfig",...s})}else return r}var Kr=(e,t)=>t==="uppercase"?e.toUpperCase():t==="capitalize"?e[0].toUpperCase()+e.slice(1).toLowerCase():e,Ne=e=>(t,n)=>{let o=It(t,e.tableSchema),{columnDefaultWidth:r=Er,columnFormatHeader:i}=e,{align:s=Vt(o),key:l,name:a,label:u=a,width:c=r,...p}=t,d={...p,align:s,CellRenderer:Ar(t),label:Kr(u,i),key:l!=null?l:n+Ft,name:a,originalIdx:n,serverDataType:o,valueFormatter:yr(t),width:c};return Mr(d)&&(d.columns=d.columns.map(g=>Ne(e)(g,g.key))),d};function zr(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:dr(r,i,o)}}return e}function Nr(e,{columns:t}){return t.some(n=>n.hidden!==!0)?t.reduce((n,o)=>o.hidden!==!0?ne(n,{type:"updateColumnProp",column:o,hidden:!0}):n,e):e}function Fr(e,{columns:t}){return t.some(n=>n.hidden)?t.reduce((n,o)=>o.hidden?ne(n,{type:"updateColumnProp",column:o,hidden:!1}):n,e):e}function Ir(e,{column:t,phase:n,width:o}){let r="updateColumnProp",i=n!=="end";switch(n){case"begin":case"end":return ne(e,{type:r,column:t,resizing:i});case"resize":return ne(e,{type:r,column:t,width:o});default:throw Error(`useTableModel.resizeColumn, invalid resizePhase ${n}`)}}function Vr(e,{tableSchema:t}){let{columns:n}=e;if(n.some(Sr)){let o=n.map(r=>{var s;let i=It(r,t);return{...r,align:(s=r.align)!=null?s:Vt(i),serverDataType:i}});return{...e,columns:o,tableSchema:t}}else return{...e,tableSchema:t}}function Wr(e,t){let{columns:n}=e,{column:o,pin:r}=t,i=n.find(s=>s.name===o.name);return i?(n=Z(n,{...i,pin:r}),n=Nt(n),{...e,columns:n}):e}function ne(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=Z(n,{...u,align:o})),typeof s=="string"&&(n=Z(n,{...u,label:s})),typeof l=="boolean"&&(n=Z(n,{...u,resizing:l})),typeof i=="boolean"&&(n=Z(n,{...u,hidden:i})),typeof a=="number"&&(n=Z(n,{...u,width:a}))),{...e,columns:n}}function Ot(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=hr(p),h=d+Ft,f=br(c.columns,g);return f?f.key===h?f:{...f,key:h}:Ne(e)({name:p},d)})}),l&&(c={...e,columns:fr(c.columns,r,n)}),u&&(c={...e,columns:gr(c.columns,i)}),a?c={...e,columns:pr(c.columns,o)}:c.columns.some(wr)&&(c={...e,columns:Hr(c.columns)}),c}function Z(e,t){return e.map(n=>n.name===t.name?t:n)}import{useCallback as $,useRef as oe}from"react";var Gt=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]},$r=e=>{let{clientHeight:t,clientWidth:n,scrollHeight:o,scrollWidth:r}=e;return[r-n,o-t]},Bt=({onAttach:e,onDetach:t})=>{let n=oe(null);return $(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])},Ut=({onHorizontalScroll:e,onVerticalScroll:t,viewport:n})=>{let o=oe(!1),r=oe({scrollTop:0,scrollLeft:0}),i=oe(null),s=oe(null),{maxScrollContainerScrollHorizontal:l,maxScrollContainerScrollVertical:a}=n,u=$(()=>{let{current:m}=s,{current:C}=i,{current:R}=o;if(R)o.current=!1;else if(m&&C){let[w,v]=Gt(C),[D,S]=$r(m),P=Math.round(w*D),b=Math.round(v*S);m.scrollTo({left:P,top:b,behavior:"auto"})}},[]),c=$(()=>{let{current:m}=s,{current:C}=i,{current:R}=r;if(m&&C){let{scrollLeft:w,scrollTop:v}=m,[D,S]=Gt(m);o.current=!0,C.scrollLeft=Math.round(D*l),C.scrollTop=Math.round(S*a),R.scrollTop!==v&&(R.scrollTop=v,t==null||t(v,S)),R.scrollLeft!==w&&(R.scrollLeft=w,e==null||e(w))}},[l,a,e,t]),p=$(m=>{i.current=m,m.addEventListener("scroll",u,{passive:!0})},[u]),d=$(m=>{i.current=null,m.removeEventListener("scroll",u)},[u]),g=$(m=>{s.current=m,m.addEventListener("scroll",c,{passive:!0})},[c]),h=$(m=>{s.current=null,m.removeEventListener("scroll",c)},[c]),f=Bt({onAttach:g,onDetach:h}),T=Bt({onAttach:p,onDetach:d}),y=$(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,S=D==="down"?R:-R,P=Math.min(Math.max(0,v+S),a);C.scrollTo({top:P,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}};import{useCallback as Or,useMemo as de,useRef as Gr}from"react";import{actualRowPositioning as Br,virtualRowPositioning as Ur}from"@vuu-ui/vuu-utils";var _r=15e5,Jr={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},Xr=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}},_t=({columns:e,headerHeight:t,headings:n,rowCount:o,rowHeight:r,size:i})=>{let s=Gr(0),a=Math.min(o,_r)*r,c=o*r-a,{pinnedWidthLeft:p,pinnedWidthRight:d,unpinnedWidth:g}=de(()=>Xr(e),[e]),[h,f]=de(()=>Br(r),[r]),[T,y]=de(()=>c?Ur(r,c,s):[h,f],[f,h,c,r]),m=Or(C=>{s.current=C},[]);return de(()=>{var C;if(i){let R=n.length,w=15,v=p+g+d,D=v>i.width?w:0,S=t*(1+R),P=a-(((C=i==null?void 0:i.height)!=null?C:0)-D)+S,b=v-i.width+p,M=(i.height-t)/r,E=Number.isInteger(M)?M+1:Math.ceil(M),x=i.height-S,k=a>x?w:0;return{contentHeight:a,getRowAtPosition:y,getRowOffset:T,horizontalScrollbarHeight:D,maxScrollContainerScrollHorizontal:b,maxScrollContainerScrollVertical:P,pinnedWidthLeft:p,pinnedWidthRight:d,rowCount:E,contentWidth:v,setPctScrollTop:m,totalHeaderHeight:S,verticalScrollbarWidth:k,viewportBodyHeight:x}}else return Jr},[i,n.length,p,g,d,a,t,r,y,T,m])};import{getColumnsInViewport as Jt,itemsChanged as Yr}from"@vuu-ui/vuu-utils";import{useCallback as Xt,useEffect as Qr,useMemo as Zr,useRef as Fe,useState as jr}from"react";var Yt=({columns:e,getRowAtPosition:t,setRange:n,viewportMeasurements:o})=>{let r=Fe(-1),{rowCount:i,contentWidth:s,maxScrollContainerScrollHorizontal:l}=o,a=s-l,u=Fe(0),[c,p]=Zr(()=>Jt(e,u.current,u.current+a),[a,e]),d=Fe(p);Qr(()=>{h(c)},[c]);let[g,h]=jr(c),f=Xt(y=>{u.current=y;let[m,C]=Jt(e,y,y+a);Yr(g,m)&&(d.current=C,h(m))},[a,e,g]),T=Xt(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 ls=[],{KEY:as,IS_EXPANDED:Zt,IS_LEAF:jt}=os,qt=({config:e,dataSource:t,headerHeight:n,onConfigChange:o,onFeatureEnabled:r,onFeatureInvocation:i,onSelectionChange:s,renderBufferSize:l=0,rowHeight:a,selectionModel:u,...c})=>{var Oe,Ge;let[p,d]=is(t.size),g=Ie(!1),h=Ie();if(h.current=t,t===void 0)throw Error("no data source provided to Vuu Table");let f=kt(c),T=z(H=>{d(H)},[]),{columns:y,dispatchColumnAction:m,headings:C}=Wt(e,t.config),{getRowAtPosition:R,getRowOffset:w,setPctScrollTop:v,...D}=_t({columns:y,headerHeight:n,headings:C,rowCount:p,rowHeight:a,size:f.innerSize}),S=z(({tableSchema:H})=>{H?(g.current=!0,m({type:"setTableSchema",tableSchema:H})):console.log("usbscription message with no schema")},[m]),P=z(H=>{t.select(H),s==null||s(H)},[t,s]),b=zt({onSelectionChange:P,selectionModel:u}),{data:M,getSelectedRows:E,range:x,setRange:k}=vt({dataSource:t,onFeatureEnabled:r,onFeatureInvocation:i,onSubscribed:S,onSizeChange:T,renderBufferSize:l,viewportRowCount:D.rowCount}),J=Ie();J.current=M;let pe=z(H=>{g.current=!0,m(H)},[m]),tn=Xe({dataSource:t,onPersistentColumnOperation:pe}),nn=z((H,A=!1,K)=>{t&&(t.sort=es(t.sort,H,A,K))},[t]),on=z((H,A,K)=>{let L=y.find(N=>N.name===A);if(L)H==="end"&&(g.current=!0),m({type:"resizeColumn",phase:H,column:L,width:K});else throw Error(`useDataTable.handleColumnResize, column ${A} not found`)},[y,m]),rn=z((H,A)=>{let K=ns(A,H),L=H[as];if(H[Zt]){if(t.closeTreeNode(L,!0),K){let N=y.indexOf(A);t.getRowsAtDepth(N+1).some(F=>F[Zt]||F[jt])||m({type:"hideColumns",columns:y.slice(N+2)})}}else if(t.openTreeNode(L),K){let N=t.getChildRows(L),O=y.indexOf(A)+1,F=[y[O]];N.some(X=>X[jt])&&F.push(y[O+1]),F.some(X=>X.hidden)&&m({type:"showColumns",columns:F})}},[y,t,m]),{onVerticalScroll:We,onHorizontalScroll:sn,columnsWithinViewport:ln,virtualColSpan:an}=Yt({columns:y,getRowAtPosition:R,setRange:k,viewportMeasurements:D}),cn=z((H,A)=>{v(A),We(H)},[We,v]),{requestScroll:un,...mn}=Ut({onHorizontalScroll:sn,onVerticalScroll:cn,viewport:D,viewportHeight:((Ge=(Oe=f.innerSize)==null?void 0:Oe.height)!=null?Ge:0)-n}),dn=Ht({columnCount:y.length,containerRef:f.containerRef,data:M,requestScroll:un,rowCount:t==null?void 0:t.size,viewportRange:x}),pn=z(H=>{H?t&&t.groupBy.includes(H.name)&&(t.groupBy=t.groupBy.filter(A=>A!==H.name)):t.groupBy=[]},[t]),fn=z((H,A)=>{let K=t.columns[H],L=rs(t.columns,K,A);L!==t.columns&&(t.columns=L,m({type:"tableConfig",columns:L}))},[t,m]),gn=Mt({onDrop:fn});Qt(()=>{h.current&&(g.current=!0,m({type:"init",tableConfig:e,dataSourceConfig:h.current.config}))},[e,m]),Qt(()=>{t.on("config",(H,A)=>{g.current=!0,m({type:"tableConfig",...H,confirmed:A})})},[t,m]),ss(()=>{g.current&&(o==null||o({...e,columns:y}),g.current=!1)},[y,e,o]);let $e=qr(),bn=z(H=>{var F;let{current:A}=J,{current:K}=h,L=H.target,N=L==null?void 0:L.closest("div[role='cell']"),O=L==null?void 0:L.closest(".vuuTableRow");if(N&&O&&A&&K){let{columns:X,selectedRowsCount:Cn}=K,hn=ts(X),vn=parseInt((F=O.ariaRowIndex)!=null?F:"-1"),yn=Array.from(O.childNodes).indexOf(N),wn=A.find(([Tn])=>Tn===vn),Mn=X[yn];$e(H,"grid",{columnMap:hn,columnName:Mn,row:wn,selectedRows:Cn===0?ls:E(),viewport:t==null?void 0:t.viewport})}},[t==null?void 0:t.viewport,E,$e]);return{columns:y,columnsWithinViewport:ln,containerMeasurements:f,containerProps:dn,data:M,dispatchColumnAction:m,getRowOffset:w,handleContextMenuAction:tn,headings:C,onColumnResize:on,onContextMenu:bn,onRemoveColumnFromGroupBy:pn,onRowClick:b,onSort:nn,onToggleGroup:rn,virtualColSpan:an,scrollProps:mn,rowCount:p,viewportMeasurements:D,...gn}};import ds from"classnames";import{isDataLoading as ps}from"@vuu-ui/vuu-utils";import{jsx as re,jsxs as en}from"react/jsx-runtime";var _="vuuTable",Ua=({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=ms(s),{containerMeasurements:{containerRef:R,innerSize:w,outerSize:v},containerProps:D,dispatchColumnAction:S,draggable:P,draggedItemIndex:b,handleContextMenuAction:M,scrollProps:E,viewportMeasurements:x,...k}=qt({config:n,dataSource:o,renderBufferSize:d,headerHeight:r,height:i,onConfigChange:l,onFeatureEnabled:a,onFeatureInvocation:u,onSelectionChange:c,rowHeight:g,selectionModel:h,width:T}),J={...v,"--content-height":`${x.contentHeight}px`,"--horizontal-scrollbar-height":`${x.horizontalScrollbarHeight}px`,"--content-width":`${x.contentWidth}px`,"--pinned-width-left":`${x.pinnedWidthLeft}px`,"--pinned-width-right":`${x.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":`${x.totalHeaderHeight}px`,"--vertical-scrollbar-width":`${x.verticalScrollbarWidth}px`,"--viewport-body-height":`${x.viewportBodyHeight}px`},pe=ds(_,t,{[`${_}-zebra`]:y,[`${_}-loading`]:ps(k.columns)});return re(cs,{menuActionHandler:M,menuBuilder:Be(o),children:en("div",{...m,...D,className:pe,id:C,ref:R,style:J,tabIndex:-1,children:[w?re("div",{className:`${_}-scrollbarContainer`,ref:E.scrollbarContainerRef,children:re("div",{className:`${_}-scrollbarContent`})}):null,w?en("div",{className:`${_}-contentContainer`,ref:E.contentContainerRef,children:[re(ht,{...k,headerHeight:r,tableId:C}),P]}):null,e&&w?re(us,{className:`${_}-settings`,"data-icon":"settings",onClick:p,variant:"secondary"}):null]})})};import fs from"classnames";import{isJsonAttribute as gs,metadataKeys as bs,registerComponent as Cs}from"@vuu-ui/vuu-utils";import{jsx as Ve,jsxs as Ms}from"react/jsx-runtime";var se="vuuJsonCell",{IS_EXPANDED:hs,KEY:vs}=bs,ys=e=>{let t=e.lastIndexOf("|");return t===-1?"":e.slice(t+1)},ws=({column:e,row:t})=>{let{key:n}=e,o=t[n],r=!1;gs(o)&&(o=o.slice(0,-1),r=!0);let i=ys(t[vs]),s=fs({[`${se}-name`]:i===o,[`${se}-value`]:i!==o,[`${se}-group`]:r});if(r){let l=t[hs]?"minus-box":"plus-box";return Ms("span",{className:s,children:[Ve("span",{className:`${se}-value`,children:o}),Ve("span",{className:`${se}-toggle`,"data-icon":l})]})}else return o?Ve("span",{className:s,children:o}):null};Cs("json",ws,"cell-renderer",{});export{Ua as Table,Be as buildContextMenuDescriptors,kt as useMeasuredContainer,Xe as useTableContextMenu,Wt as useTableModel,_t as useTableViewport};
 //# sourceMappingURL=index.js.map