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

package/esm/index.js

@@ -1,3554 +1,2 @@
-// src/header-cell/GroupHeaderCellNext.tsx
-import { OverflowContainer } from "@vuu-ui/vuu-layout";
-import { useLayoutEffectSkipFirst } from "@vuu-ui/vuu-utils";
-import cx3 from "clsx";
-import { useCallback as useCallback4, useRef as useRef3, useState as useState2 } from "react";
-
-// src/column-header-pill/ColumnHeaderPill.tsx
-import cx from "clsx";
-import { useCallback } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
-var classBase = "vuuColumnHeaderPill";
-var ColumnHeaderPill = ({
-  children,
-  className,
-  column,
-  onRemove,
-  removable,
-  ...htmlAttributes
-}) => {
-  if (removable && typeof onRemove !== "function") {
-    throw Error(
-      "ColumnHeaderPill onRemove prop must be provided if Pill is removable"
-    );
-  }
-  const handleClickRemove = useCallback(
-    (evt) => {
-      evt.preventDefault();
-      evt.stopPropagation();
-      onRemove == null ? void 0 : onRemove(column);
-    },
-    [column, onRemove]
-  );
-  return /* @__PURE__ */ jsxs("div", { ...htmlAttributes, className: cx(classBase, className), children: [
-    children,
-    removable ? /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: `${classBase}-removeButton`,
-        role: "button",
-        "data-icon": "cross",
-        onClick: handleClickRemove
-      }
-    ) : null
-  ] });
-};
-
-// src/column-header-pill/GroupColumnPill.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var GroupColumnPill = ({
-  column,
-  ...columnHeaderProps
-}) => {
-  const { name, sorted } = column;
-  const icon = typeof sorted === "number" ? sorted < 0 ? "arrow-down" : "arrow-up" : sorted === "A" ? "arrow-up" : sorted === "D" ? "arrow-down" : void 0;
-  return /* @__PURE__ */ jsxs2(ColumnHeaderPill, { ...columnHeaderProps, column, children: [
-    /* @__PURE__ */ jsx2("span", { className: "vuuGroupColumnPill-label", children: name }),
-    icon !== void 0 ? /* @__PURE__ */ jsx2("span", { "data-icon": icon }) : null,
-    typeof sorted === "number" ? /* @__PURE__ */ jsx2("span", { className: "vuuSortPosition", children: Math.abs(sorted) }) : null
-  ] });
-};
-
-// src/column-header-pill/SortIndicator.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var SortIndicator = ({ column }) => {
-  if (!column.sorted) {
-    return null;
-  }
-  const icon = typeof column.sorted === "number" ? column.sorted < 0 ? "arrow-down" : "arrow-up" : column.sorted === "A" ? "arrow-up" : "arrow-down";
-  return /* @__PURE__ */ jsxs3(ColumnHeaderPill, { column, children: [
-    /* @__PURE__ */ jsx3("span", { "data-icon": icon }),
-    typeof column.sorted === "number" ? /* @__PURE__ */ jsx3("span", { className: "vuuSortPosition", children: Math.abs(column.sorted) }) : null
-  ] });
-};
-
-// src/column-resizing/ColumnResizer.tsx
-import { useCallback as useCallback2, useRef } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var NOOP = () => void 0;
-var baseClass = "vuuColumnResizerNext";
-var ColumnResizer = ({
-  onDrag,
-  onDragEnd = NOOP,
-  onDragStart = NOOP
-}) => {
-  const position = useRef(0);
-  const onMouseMove = useCallback2(
-    (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 = useCallback2(
-    (e) => {
-      window.removeEventListener("mouseup", onMouseUp);
-      window.removeEventListener("mousemove", onMouseMove);
-      onDragEnd(e);
-    },
-    [onDragEnd, onMouseMove]
-  );
-  const handleMouseDown = useCallback2(
-    (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, onMouseDown: handleMouseDown });
-};
-
-// src/column-resizing/useTableColumnResize.tsx
-import { useCallback as useCallback3, useRef as useRef2, useState } from "react";
-var useTableColumnResize = ({
-  column,
-  onResize,
-  rootRef
-}) => {
-  const widthRef = useRef2(0);
-  const [isResizing, setResizing] = useState(false);
-  const { name } = column;
-  const handleResizeStart = useCallback3(() => {
-    if (onResize && rootRef.current) {
-      const { width } = rootRef.current.getBoundingClientRect();
-      widthRef.current = Math.round(width);
-      setResizing(true);
-      onResize == null ? void 0 : onResize("begin", name);
-    }
-  }, [name, onResize, rootRef]);
-  const handleResize = useCallback3(
-    (_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 = useCallback3(() => {
-    if (onResize) {
-      onResize("end", name, widthRef.current);
-      setTimeout(() => {
-        setResizing(false);
-      }, 80);
-    }
-  }, [name, onResize]);
-  return {
-    isResizing,
-    onDrag: handleResize,
-    onDragStart: handleResizeStart,
-    onDragEnd: handleResizeEnd
-  };
-};
-
-// src/useCell.ts
-import { getColumnStyle } from "@vuu-ui/vuu-utils";
-import cx2 from "clsx";
-import { useMemo } from "react";
-var useCell = (column, classBase10, isHeader) => (
-  // TODO measure perf without the memo, might not be worth the cost
-  useMemo(() => {
-    const className = cx2(classBase10, {
-      vuuPinFloating: column.pin === "floating",
-      vuuPinLeft: column.pin === "left",
-      vuuPinRight: column.pin === "right",
-      vuuEndPin: isHeader && column.endPin,
-      // [`${classBase}-resizing`]: column.resizing,
-      [`${classBase10}-editable`]: column.editable,
-      [`${classBase10}-right`]: column.align === "right"
-    });
-    const style = getColumnStyle(column);
-    return {
-      className,
-      style
-    };
-  }, [column, classBase10, isHeader])
-);
-
-// src/header-cell/GroupHeaderCellNext.tsx
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-import { createElement } from "react";
-var classBase2 = "vuuTableGroupHeaderCell";
-var switchIfChanged = (columns, newColumns) => {
-  if (columns === newColumns) {
-    return columns;
-  } else {
-    return newColumns;
-  }
-};
-var GroupHeaderCellNext = ({
-  column: groupColumn,
-  className: classNameProp,
-  onMoveColumn,
-  onRemoveColumn,
-  onResize,
-  ...htmlAttributes
-}) => {
-  const rootRef = useRef3(null);
-  const { isResizing, ...resizeProps } = useTableColumnResize({
-    column: groupColumn,
-    onResize,
-    rootRef
-  });
-  const [columns, setColumns] = useState2(groupColumn.columns);
-  const { className, style } = useCell(groupColumn, classBase2, true);
-  const columnPillProps = columns.length > 1 ? {
-    removable: true,
-    onRemove: onRemoveColumn
-  } : void 0;
-  const handleMoveItem = useCallback4(
-    (fromIndex, toIndex) => {
-      setColumns((cols) => {
-        const newCols = cols.slice();
-        const [tab] = newCols.splice(fromIndex, 1);
-        if (toIndex === -1) {
-          const result = newCols.concat(tab);
-          onMoveColumn == null ? void 0 : onMoveColumn(result);
-          return result;
-        } else {
-          newCols.splice(toIndex, 0, tab);
-          onMoveColumn == null ? void 0 : onMoveColumn(newCols);
-          return newCols;
-        }
-      });
-    },
-    [onMoveColumn]
-  );
-  useLayoutEffectSkipFirst(() => {
-    setColumns((cols) => switchIfChanged(cols, groupColumn.columns));
-  }, [groupColumn.columns]);
-  return /* @__PURE__ */ jsxs4(
-    "div",
-    {
-      ...htmlAttributes,
-      className: cx3(className, classNameProp, {
-        [`${classBase2}-pending`]: groupColumn.groupConfirmed === false
-      }),
-      ref: rootRef,
-      role: "columnheader",
-      style,
-      children: [
-        /* @__PURE__ */ jsx5(
-          OverflowContainer,
-          {
-            allowDragDrop: true,
-            className: `${classBase2}-inner`,
-            height: 24,
-            onMoveItem: handleMoveItem,
-            overflowPosition: "start",
-            children: columns.map((column) => {
-              return /* @__PURE__ */ createElement(
-                GroupColumnPill,
-                {
-                  ...columnPillProps,
-                  column,
-                  key: column.key
-                }
-              );
-            })
-          }
-        ),
-        /* @__PURE__ */ jsx5(
-          ColumnHeaderPill,
-          {
-            column: groupColumn,
-            removable: true,
-            onRemove: onRemoveColumn
-          }
-        ),
-        groupColumn.resizeable !== false ? /* @__PURE__ */ jsx5(ColumnResizer, { ...resizeProps }) : null
-      ]
-    }
-  );
-};
-
-// src/header-cell/HeaderCell.tsx
-import cx5 from "clsx";
-import { useCallback as useCallback6, useRef as useRef5 } from "react";
-
-// src/column-menu/ColumnMenu.tsx
-import { useContextMenu } from "@vuu-ui/vuu-popups";
-import cx4 from "clsx";
-import {
-  useCallback as useCallback5,
-  useRef as useRef4,
-  useState as useState3
-} from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
-var getPosition = (element) => {
-  if (element) {
-    const { bottom, left } = element.getBoundingClientRect();
-    return { x: left, y: bottom + 6 };
-  }
-};
-var ColumnMenu = ({
-  className,
-  column,
-  ...props
-}) => {
-  const rootRef = useRef4(null);
-  const [menuOpen, setMenuOpen] = useState3(false);
-  const [showContextMenu] = useContextMenu();
-  const handleMenuClose = useCallback5(() => {
-    setMenuOpen(false);
-  }, []);
-  const showColumnMenu = useCallback5(
-    (e) => {
-      setMenuOpen(true);
-      showContextMenu(e, "column-menu", {
-        column,
-        ContextMenuProps: {
-          onClose: handleMenuClose,
-          position: getPosition(rootRef.current)
-        }
-      });
-    },
-    [column, handleMenuClose, showContextMenu]
-  );
-  return /* @__PURE__ */ jsx6(
-    "span",
-    {
-      ...props,
-      className: cx4("vuuTable-columnMenu", className, {
-        "vuuTable-columnMenu-open": menuOpen
-      }),
-      "data-icon": "more-vert",
-      onClick: showColumnMenu,
-      ref: rootRef
-    }
-  );
-};
-
-// src/header-cell/HeaderCell.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var classBase3 = "vuuTableHeaderCell";
-var HeaderCell = ({
-  className: classNameProp,
-  column,
-  onClick,
-  onResize,
-  ...htmlAttributes
-}) => {
-  var _a;
-  const { HeaderCellContentRenderer, HeaderCellLabelRenderer } = column;
-  const rootRef = useRef5(null);
-  const { isResizing, ...resizeProps } = useTableColumnResize({
-    column,
-    onResize,
-    rootRef
-  });
-  const handleClick = useCallback6(
-    (evt) => {
-      !isResizing && (onClick == null ? void 0 : onClick(evt));
-    },
-    [isResizing, onClick]
-  );
-  const { className, style } = useCell(column, classBase3, true);
-  const columnMenu = /* @__PURE__ */ jsx7(ColumnMenu, { column });
-  const columnLabel = HeaderCellLabelRenderer ? /* @__PURE__ */ jsx7(HeaderCellLabelRenderer, { className: `${classBase3}-label`, column }) : /* @__PURE__ */ jsx7("div", { className: `${classBase3}-label`, children: (_a = column.label) != null ? _a : column.name });
-  const columnContent = HeaderCellContentRenderer ? [/* @__PURE__ */ jsx7(HeaderCellContentRenderer, { column }, "content")] : [];
-  const sortIndicator = /* @__PURE__ */ jsx7(SortIndicator, { column });
-  const headerItems = column.align === "right" ? [sortIndicator, columnLabel].concat(columnContent).concat(columnMenu) : [columnMenu, columnLabel, sortIndicator].concat(columnContent);
-  return /* @__PURE__ */ jsxs5(
-    "div",
-    {
-      ...htmlAttributes,
-      className: cx5(className, classNameProp, {
-        [`${classBase3}-resizing`]: isResizing
-      }),
-      onClick: handleClick,
-      ref: rootRef,
-      role: "columnheader",
-      style,
-      children: [
-        ...headerItems,
-        column.resizeable !== false ? /* @__PURE__ */ jsx7(ColumnResizer, { ...resizeProps }) : null
-      ]
-    }
-  );
-};
-
-// src/Table.tsx
-import {
-  MeasuredContainer
-} from "@vuu-ui/vuu-layout";
-import { ContextMenuProvider } from "@vuu-ui/vuu-popups";
-import { metadataKeys as metadataKeys7, useId } from "@vuu-ui/vuu-utils";
-import { useForkRef } from "@salt-ds/core";
-import cx9 from "clsx";
-import {
-  forwardRef,
-  useRef as useRef15,
-  useState as useState7
-} from "react";
-
-// src/Row.tsx
-import {
-  isGroupColumn,
-  isJsonColumn,
-  isJsonGroup,
-  metadataKeys as metadataKeys2,
-  isNotHidden,
-  RowSelected
-} from "@vuu-ui/vuu-utils";
-import cx7 from "clsx";
-import { memo, useCallback as useCallback9 } from "react";
-
-// src/table-cell/TableCell.tsx
-import { isNumericColumn } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback7 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
-var classBase4 = "vuuTableCell";
-var TableCell = ({
-  column,
-  columnMap,
-  onClick,
-  onDataEdited,
-  row
-}) => {
-  const { className, style } = useCell(column, classBase4);
-  const { CellRenderer, name, valueFormatter } = column;
-  const dataIdx = columnMap[name];
-  const handleDataItemEdited = useCallback7(
-    (value) => {
-      if (onDataEdited) {
-        let typedValue = value;
-        if (isNumericColumn(column) && typeof value === "string") {
-          typedValue = column.serverDataType === "double" ? parseFloat(value) : parseInt(value);
-        }
-        return onDataEdited == null ? void 0 : onDataEdited(row, name, typedValue);
-      } else {
-        throw Error(
-          "TableCell onDataEdited prop not supplied for an editable cell"
-        );
-      }
-    },
-    [column, name, onDataEdited, row]
-  );
-  const handleClick = useCallback7(
-    (evt) => {
-      onClick == null ? void 0 : onClick(evt, column);
-    },
-    [column, onClick]
-  );
-  return /* @__PURE__ */ jsx8(
-    "div",
-    {
-      className,
-      onClick: onClick ? handleClick : void 0,
-      role: "cell",
-      style,
-      children: CellRenderer ? /* @__PURE__ */ jsx8(
-        CellRenderer,
-        {
-          column,
-          columnMap,
-          onCommit: handleDataItemEdited,
-          row
-        }
-      ) : valueFormatter(row[dataIdx])
-    }
-  );
-};
-
-// src/table-cell/TableGroupCell.tsx
-import { getGroupValueAndOffset, metadataKeys } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback8 } from "react";
-import cx6 from "clsx";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
-var { IS_LEAF } = metadataKeys;
-var classBase5 = "vuuTableGroupCell";
-var TableGroupCell = ({ column, onClick, row }) => {
-  const { columns } = column;
-  const [value, offset] = getGroupValueAndOffset(columns, row);
-  const { className, style } = useCell(column, classBase5);
-  const handleClick = useCallback8(
-    (evt) => {
-      onClick == null ? void 0 : onClick(evt, column);
-    },
-    [column, onClick]
-  );
-  const isLeaf = row[IS_LEAF];
-  const spacers = Array(offset).fill(0).map((n, i) => /* @__PURE__ */ jsx9("span", { className: `${classBase5}-spacer` }, i));
-  return /* @__PURE__ */ jsxs6(
-    "div",
-    {
-      className: cx6(className, "vuuTableCell"),
-      role: "cell",
-      style,
-      onClick: isLeaf ? void 0 : handleClick,
-      children: [
-        spacers,
-        isLeaf ? null : /* @__PURE__ */ jsx9("span", { className: `${classBase5}-toggle`, "data-icon": "triangle-right" }),
-        /* @__PURE__ */ jsx9("span", { children: value })
-      ]
-    }
-  );
-};
-
-// src/Row.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
-import { createElement as createElement2 } from "react";
-var { IDX, IS_EXPANDED, SELECTED } = metadataKeys2;
-var classBase6 = "vuuTableRow";
-var Row = memo(
-  ({
-    className: classNameProp,
-    columnMap,
-    columns,
-    highlighted,
-    row,
-    offset,
-    onClick,
-    onDataEdited,
-    onToggleGroup,
-    zebraStripes = false,
-    ...htmlAttributes
-  }) => {
-    const {
-      [IDX]: rowIndex,
-      [IS_EXPANDED]: isExpanded,
-      [SELECTED]: selectionStatus
-    } = row;
-    const handleRowClick = useCallback9(
-      (evt) => {
-        const rangeSelect = evt.shiftKey;
-        const keepExistingSelection = evt.ctrlKey || evt.metaKey;
-        onClick == null ? void 0 : onClick(row, rangeSelect, keepExistingSelection);
-      },
-      [onClick, row]
-    );
-    const { True, First, Last } = RowSelected;
-    const className = cx7(classBase6, classNameProp, {
-      [`${classBase6}-even`]: zebraStripes && rowIndex % 2 === 0,
-      [`${classBase6}-expanded`]: isExpanded,
-      [`${classBase6}-highlighted`]: highlighted,
-      [`${classBase6}-selected`]: selectionStatus & True,
-      [`${classBase6}-selectedStart`]: selectionStatus & First,
-      [`${classBase6}-selectedEnd`]: selectionStatus & Last
-    });
-    const style = { transform: `translate3d(0px, ${offset}px, 0px)` };
-    const handleGroupCellClick = useCallback9(
-      (evt, column) => {
-        if (isGroupColumn(column) || isJsonGroup(column, row)) {
-          evt.stopPropagation();
-          onToggleGroup == null ? void 0 : onToggleGroup(row, column);
-        }
-      },
-      [onToggleGroup, row]
-    );
-    return /* @__PURE__ */ createElement2(
-      "div",
-      {
-        ...htmlAttributes,
-        "aria-rowindex": row[0] + 1,
-        key: `row-${row[0]}`,
-        role: "row",
-        className,
-        onClick: handleRowClick,
-        style
-      },
-      /* @__PURE__ */ jsx10("span", { className: `${classBase6}-selectionDecorator vuuStickyLeft` }),
-      columns.filter(isNotHidden).map((column) => {
-        const isGroup = isGroupColumn(column);
-        const isJsonCell = isJsonColumn(column);
-        const Cell = isGroup ? TableGroupCell : TableCell;
-        return /* @__PURE__ */ jsx10(
-          Cell,
-          {
-            column,
-            columnMap,
-            onClick: isGroup || isJsonCell ? handleGroupCellClick : void 0,
-            onDataEdited,
-            row
-          },
-          column.key
-        );
-      }),
-      /* @__PURE__ */ jsx10("span", { className: `${classBase6}-selectionDecorator vuuStickyRight` })
-    );
-  }
-);
-Row.displayName = "Row";
-
-// src/useTable.ts
-import {
-  useDragDropNext as useDragDrop
-} from "@vuu-ui/vuu-ui-controls";
-import {
-  applySort,
-  buildColumnMap as buildColumnMap2,
-  getIndexFromRowElement as getIndexFromRowElement2,
-  isGroupColumn as isGroupColumn3,
-  isJsonGroup as isJsonGroup2,
-  isValidNumber,
-  metadataKeys as metadataKeys6,
-  updateColumn,
-  useLayoutEffectSkipFirst as useLayoutEffectSkipFirst2
-} from "@vuu-ui/vuu-utils";
-import {
-  useCallback as useCallback19,
-  useEffect as useEffect4,
-  useMemo as useMemo5,
-  useState as useState6
-} from "react";
-
-// src/context-menu/buildContextMenuDescriptors.ts
-import { isNumericColumn as isNumericColumn2 } from "@vuu-ui/vuu-utils";
-var buildContextMenuDescriptors = (dataSource) => (location, options) => {
-  const descriptors = [];
-  if (dataSource === void 0) {
-    return descriptors;
-  }
-  if (location === "header" || location === "column-menu") {
-    descriptors.push(
-      ...buildSortMenuItems(options, dataSource)
-    );
-    descriptors.push(
-      ...buildGroupMenuItems(options, dataSource)
-    );
-    descriptors.push(
-      ...buildAggregationMenuItems(options, dataSource)
-    );
-    descriptors.push(...buildColumnDisplayMenuItems(options));
-    descriptors.push({
-      action: "column-settings",
-      icon: "cog",
-      label: `Column Settings`,
-      options
-    });
-    descriptors.push({
-      action: "table-settings",
-      icon: "cog",
-      label: `DataGrid Settings`,
-      options
-    });
-  }
-  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(
-        isNumericColumn2(column) ? [
-          { label: "Sum", action: "agg-sum", options },
-          { label: "Avg", action: "agg-avg", options },
-          { label: "High", action: "agg-high", options },
-          { label: "Low", action: "agg-low", options }
-        ] : []
-      )
-    }
-  ];
-}
-var pinColumn = (options, pinLocation) => ({
-  label: `Pin ${pinLocation}`,
-  action: `column-pin-${pinLocation}`,
-  options
-});
-var pinLeft = (options) => pinColumn(options, "left");
-var pinFloating = (options) => pinColumn(options, "floating");
-var pinRight = (options) => pinColumn(options, "right");
-function buildColumnDisplayMenuItems(options) {
-  const { column } = options;
-  if (column === void 0) {
-    return [];
-  }
-  const { pin } = column;
-  const menuItems = [
-    {
-      label: `Hide column`,
-      action: "column-hide",
-      options
-    },
-    {
-      label: `Remove column`,
-      action: "column-remove",
-      options
-    }
-  ];
-  if (pin === void 0) {
-    menuItems.push({
-      label: `Pin column`,
-      children: [pinLeft(options), pinFloating(options), pinRight(options)]
-    });
-  } else if (pin === "left") {
-    menuItems.push(
-      { label: "Unpin column", action: "column-unpin", options },
-      {
-        label: `Pin column`,
-        children: [pinFloating(options), pinRight(options)]
-      }
-    );
-  } else if (pin === "right") {
-    menuItems.push(
-      { label: "Unpin column", action: "column-unpin", options },
-      {
-        label: `Pin column`,
-        children: [pinLeft(options), pinFloating(options)]
-      }
-    );
-  } else if (pin === "floating") {
-    menuItems.push(
-      { label: "Unpin column", action: "column-unpin", options },
-      {
-        label: `Pin column`,
-        children: [pinLeft(options), pinRight(options)]
-      }
-    );
-  }
-  return menuItems;
-}
-function buildGroupMenuItems(options, { groupBy }) {
-  const { column } = options;
-  const menuItems = [];
-  if (column === void 0) {
-    return menuItems;
-  }
-  const { name, 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/useHandleTableContextMenu.ts
-import { removeColumnFromFilter } from "@vuu-ui/vuu-utils";
-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 useHandleTableContextMenu = ({
-  dataSource,
-  onPersistentColumnOperation
-}) => {
-  const handleContextMenuAction = (action) => {
-    const gridOptions = action.options;
-    if (gridOptions.column && dataSource) {
-      const { column } = gridOptions;
-      switch (action.menuId) {
-        case "sort-asc":
-          return dataSource.sort = setSortColumn(dataSource.sort, column, "A"), true;
-        case "sort-dsc":
-          return dataSource.sort = setSortColumn(dataSource.sort, column, "D"), true;
-        case "sort-add-asc":
-          return dataSource.sort = addSortColumn(dataSource.sort, column, "A"), true;
-        case "sort-add-dsc":
-          return dataSource.sort = addSortColumn(dataSource.sort, column, "D"), true;
-        case "group":
-          return dataSource.groupBy = addGroupColumn(dataSource.groupBy, column), true;
-        case "group-add":
-          return dataSource.groupBy = addGroupColumn(dataSource.groupBy, column), true;
-        case "column-hide":
-          return onPersistentColumnOperation({ type: "hideColumns", columns: [column] }), true;
-        case "column-remove":
-          return dataSource.columns = dataSource.columns.filter((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;
-        case "column-settings":
-          return onPersistentColumnOperation({ type: "columnSettings", column }), true;
-        case "table-settings":
-          return onPersistentColumnOperation({ type: "tableSettings" }), true;
-        default:
-      }
-    }
-    return false;
-  };
-  return handleContextMenuAction;
-};
-
-// src/table-config.ts
-var updateTableConfig = (config, action) => {
-  switch (action.type) {
-    case "col-size":
-      return {
-        ...config,
-        columns: config.columns.map(
-          (col) => col.name === action.column.name ? { ...col, width: action.width } : col
-        )
-      };
-    case "column-prop":
-      return {
-        ...config,
-        columns: config.columns.map(
-          (col) => col.name === action.column.name ? { ...col, [action.property]: action.value } : col
-        )
-      };
-    default:
-      return config;
-  }
-};
-
-// src/useCellEditing.ts
-import { isCharacterKey } from "@vuu-ui/vuu-utils";
-import {
-  useCallback as useCallback10
-} from "react";
-
-// src/table-dom-utils.ts
-var headerCellQuery = (colIdx) => `.vuuTable-col-headers .vuuTableHeaderCell:nth-child(${colIdx})`;
-var dataCellQuery = (rowIdx, colIdx) => `.vuuTable-body > [aria-rowindex='${rowIdx}'] > [role='cell']:nth-child(${colIdx + 1})`;
-var getTableCell = (containerRef, [rowIdx, colIdx]) => {
-  var _a;
-  const cssQuery = rowIdx === -1 ? headerCellQuery(colIdx) : dataCellQuery(rowIdx, colIdx);
-  const cell = (_a = containerRef.current) == null ? void 0 : _a.querySelector(
-    cssQuery
-  );
-  if (cellIsEditable(cell)) {
-    const focusableContent = cell.querySelector("button");
-    return focusableContent || cell;
-  } else {
-    return cell;
-  }
-};
-var cellIsEditable = (cell) => cell.classList.contains("vuuTableCell-editable");
-var cellIsTextInput = (cell) => cell.querySelector(".vuuTableInputCell") !== null;
-function getRowIndex(rowEl) {
-  if (rowEl) {
-    const idx = rowEl.ariaRowIndex;
-    if (idx !== null) {
-      return parseInt(idx, 10) - 1;
-    }
-  }
-  return -1;
-}
-var closestRow = (el) => el.closest('[role="row"]');
-var closestRowIndex = (el) => getRowIndex(closestRow(el));
-
-// src/useCellEditing.ts
-var useCellEditing = ({ navigate }) => {
-  const commitHandler = useCallback10(() => {
-    navigate();
-  }, [navigate]);
-  const editInput = useCallback10(
-    (evt) => {
-      const cellEl = evt.target;
-      const input = cellEl.matches("input") ? cellEl : cellEl.querySelector("input");
-      if (input) {
-        input.focus();
-        input.select();
-      }
-    },
-    []
-  );
-  const focusInput = useCallback10(
-    (evt) => {
-      const cellEl = evt.target;
-      const input = cellEl.querySelector("input");
-      if (input) {
-        input.focus();
-        input.select();
-      }
-    },
-    []
-  );
-  const handleKeyDown = useCallback10(
-    (e) => {
-      const el = e.target;
-      if (cellIsTextInput(el)) {
-        if (isCharacterKey(e.key)) {
-          editInput(e);
-        } else if (e.key === "Enter") {
-          focusInput(e);
-        }
-      }
-    },
-    [editInput, focusInput]
-  );
-  const handleDoubleClick = useCallback10(
-    (e) => {
-      const el = e.target;
-      if (el.matches("input") || el.querySelector("input")) {
-        editInput(e);
-        e.stopPropagation();
-      }
-    },
-    [editInput]
-  );
-  const handleBlur = useCallback10(
-    (e) => {
-      const el = e.target;
-      el.removeEventListener("vuu-commit", commitHandler, true);
-    },
-    [commitHandler]
-  );
-  const handleFocus = useCallback10(
-    (e) => {
-      const el = e.target;
-      el.addEventListener("vuu-commit", commitHandler, true);
-    },
-    [commitHandler]
-  );
-  return {
-    onBlur: handleBlur,
-    onDoubleClick: handleDoubleClick,
-    onFocus: handleFocus,
-    onKeyDown: handleKeyDown
-  };
-};
-
-// src/useDataSource.ts
-import { getFullRange, NULL_RANGE } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback11, useEffect, useMemo as useMemo2, useRef as useRef6, useState as useState4 } from "react";
-
-// src/moving-window.ts
-import {
-  isRowSelectedLast,
-  metadataKeys as metadataKeys3,
-  WindowRange
-} from "@vuu-ui/vuu-utils";
-var { SELECTED: SELECTED2 } = metadataKeys3;
-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(Math.max(0, to - from));
-    this.rowCount = 0;
-  }
-  add(data) {
-    const [index] = data;
-    if (this.isWithinRange(index)) {
-      const internalIndex = index - this.range.from;
-      this.data[internalIndex] = data;
-      if (data[SELECTED2]) {
-        const previousRow = this.data[internalIndex - 1];
-        if (isRowSelectedLast(previousRow)) {
-          this.data[internalIndex - 1] = previousRow.slice();
-          this.data[internalIndex - 1][SELECTED2] -= 4;
-        }
-      }
-    }
-  }
-  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] !== 0);
-  }
-};
-
-// src/useDataSource.ts
-var isVuuFeatureInvocation = (action) => action.type === "vuu-link-created" || action.type === "vuu-link-removed";
-var useDataSource = ({
-  dataSource,
-  onFeatureInvocation,
-  onSizeChange,
-  onSubscribed,
-  range = NULL_RANGE,
-  renderBufferSize = 0
-}) => {
-  const [, forceUpdate] = useState4(null);
-  const data = useRef6([]);
-  const isMounted = useRef6(true);
-  const hasUpdated = useRef6(false);
-  const rangeRef = useRef6(NULL_RANGE);
-  const dataWindow = useMemo2(
-    () => new MovingWindow(getFullRange(range, renderBufferSize)),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-  const setData = useCallback11(
-    (updates) => {
-      for (const row of updates) {
-        dataWindow.add(row);
-      }
-      data.current = dataWindow.data;
-      if (isMounted.current) {
-        forceUpdate({});
-      } else {
-        console.log(`ignore update as we're not mounted`);
-      }
-    },
-    [dataWindow]
-  );
-  const datasourceMessageHandler = useCallback11(
-    (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 (isVuuFeatureInvocation(message)) {
-        onFeatureInvocation == null ? void 0 : onFeatureInvocation(message);
-      } else {
-        console.log(`useDataSource unexpected message ${message.type}`);
-      }
-    },
-    [dataWindow, onFeatureInvocation, onSizeChange, onSubscribed, setData]
-  );
-  const getSelectedRows = useCallback11(() => {
-    return dataWindow.getSelectedRows();
-  }, [dataWindow]);
-  useEffect(() => {
-    var _a;
-    isMounted.current = true;
-    (_a = dataSource.resume) == null ? void 0 : _a.call(dataSource);
-    return () => {
-      var _a2;
-      isMounted.current = false;
-      (_a2 = dataSource.suspend) == null ? void 0 : _a2.call(dataSource);
-    };
-  }, [dataSource]);
-  useEffect(() => {
-    var _a;
-    if (dataSource.status === "disabled") {
-      (_a = dataSource.enable) == null ? void 0 : _a.call(dataSource, datasourceMessageHandler);
-    } else {
-      dataSource == null ? void 0 : dataSource.subscribe(
-        { range: getFullRange(range, renderBufferSize) },
-        datasourceMessageHandler
-      );
-    }
-  }, [dataSource, datasourceMessageHandler, range, renderBufferSize]);
-  const setRange = useCallback11(
-    (range2) => {
-      const fullRange = getFullRange(range2, renderBufferSize);
-      dataWindow.setRange(fullRange);
-      dataSource.range = rangeRef.current = fullRange;
-      dataSource.emit("range", range2);
-    },
-    [dataSource, dataWindow, renderBufferSize]
-  );
-  return {
-    data: data.current,
-    dataRef: data,
-    getSelectedRows,
-    range: rangeRef.current,
-    setRange
-  };
-};
-
-// src/useInitialValue.ts
-import { useMemo as useMemo3, useRef as useRef7 } from "react";
-var useInitialValue = (value) => {
-  const ref = useRef7(value);
-  return useMemo3(() => ref.current, []);
-};
-
-// src/useKeyboardNavigation.ts
-import { useControlled } from "@salt-ds/core";
-import {
-  useCallback as useCallback12,
-  useEffect as useEffect2,
-  useRef as useRef8
-} from "react";
-var rowNavigationKeys = /* @__PURE__ */ new Set([
-  "Home",
-  "End",
-  "PageUp",
-  "PageDown",
-  "ArrowDown",
-  "ArrowUp"
-]);
-var cellNavigationKeys = new Set(rowNavigationKeys);
-cellNavigationKeys.add("ArrowLeft");
-cellNavigationKeys.add("ArrowRight");
-var isNavigationKey = (key, navigationStyle) => {
-  switch (navigationStyle) {
-    case "cell":
-      return cellNavigationKeys.has(key);
-    case "row":
-      return rowNavigationKeys.has(key);
-    default:
-      return false;
-  }
-};
-var PageKeys = ["Home", "End", "PageUp", "PageDown"];
-var isPagingKey = (key) => PageKeys.includes(key);
-var NULL_CELL_POS = [-1, -1];
-var NO_SCROLL_NECESSARY = [void 0, void 0];
-var howFarIsRowOutsideViewport = (rowEl, contentContainer = rowEl.closest(".vuuTable-contentContainer")) => {
-  if (contentContainer) {
-    const viewport = contentContainer == null ? void 0 : contentContainer.getBoundingClientRect();
-    const row = rowEl.getBoundingClientRect();
-    if (row) {
-      if (row.bottom > viewport.bottom) {
-        return ["down", row.bottom - viewport.bottom];
-      } else if (row.top < viewport.top) {
-        return ["up", row.top - viewport.top];
-      } else {
-        return NO_SCROLL_NECESSARY;
-      }
-    } else {
-      throw Error("Whats going on, row not found");
-    }
-  } else {
-    throw Error("Whats going on, scrollbar container not found");
-  }
-};
-var howFarIsCellOutsideViewport = (cellEl) => {
-  var _a;
-  const contentContainer = cellEl.closest(".vuuTable-contentContainer");
-  if (contentContainer) {
-    const rowEl = cellEl.closest(".vuuTableRow");
-    if (rowEl) {
-      const result = howFarIsRowOutsideViewport(rowEl, contentContainer);
-      if (result !== NO_SCROLL_NECESSARY) {
-        return result;
-      }
-      const viewport = contentContainer == null ? void 0 : contentContainer.getBoundingClientRect();
-      const cell = (_a = cellEl.closest(".vuuTableCell")) == null ? void 0 : _a.getBoundingClientRect();
-      if (cell) {
-        if (cell.right > viewport.right) {
-          return ["right", cell.right + 6 - viewport.right];
-        } else if (cell.left < viewport.left) {
-          return ["left", cell.left - viewport.left];
-        }
-      } else {
-        throw Error("Whats going on, cell not found");
-      }
-    }
-  }
-  return NO_SCROLL_NECESSARY;
-};
-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) {
-      return [rowIdx, colIdx + 1];
-    } else {
-      return [rowIdx, colIdx];
-    }
-  } else if (key === "ArrowLeft") {
-    if (colIdx > 1) {
-      return [rowIdx, colIdx - 1];
-    } else {
-      return [rowIdx, colIdx];
-    }
-  }
-  return [rowIdx, colIdx];
-}
-var useKeyboardNavigation = ({
-  columnCount = 0,
-  containerRef,
-  disableFocus = false,
-  defaultHighlightedIndex,
-  disableHighlightOnFocus,
-  highlightedIndex: highlightedIndexProp,
-  navigationStyle,
-  requestScroll,
-  onHighlight,
-  rowCount = 0,
-  viewportRowCount
-}) => {
-  var _a;
-  const focusedCellPos = useRef8([-1, -1]);
-  const focusableCell = useRef8();
-  const activeCellPos = useRef8([-1, 0]);
-  const highlightedIndexRef = useRef8();
-  const [highlightedIndex, setHighlightedIdx] = useControlled({
-    controlled: highlightedIndexProp,
-    default: defaultHighlightedIndex,
-    name: "UseKeyboardNavigation"
-  });
-  highlightedIndexRef.current = highlightedIndex;
-  const setHighlightedIndex = useCallback12(
-    (idx, fromKeyboard = false) => {
-      onHighlight == null ? void 0 : onHighlight(idx);
-      setHighlightedIdx(idx);
-      if (fromKeyboard) {
-      }
-    },
-    [onHighlight, setHighlightedIdx]
-  );
-  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 = useCallback12(
-    (cellPos) => {
-      var _a2;
-      if (containerRef.current) {
-        const activeCell = getTableCell(containerRef, cellPos);
-        if (activeCell) {
-          if (activeCell !== focusableCell.current) {
-            (_a2 = focusableCell.current) == null ? void 0 : _a2.removeAttribute("tabindex");
-            focusableCell.current = activeCell;
-            activeCell.setAttribute("tabindex", "0");
-          }
-          const [direction, distance] = howFarIsCellOutsideViewport(activeCell);
-          if (direction && distance) {
-            requestScroll == null ? void 0 : requestScroll({ type: "scroll-distance", distance, direction });
-          }
-          console.log(`activeCell focus`);
-          activeCell.focus({ preventScroll: true });
-        }
-      }
-    },
-    // TODO we recreate this function whenever viewportRange changes, which will
-    // be often whilst scrolling - store range in a a ref ?
-    [containerRef, requestScroll]
-  );
-  const setActiveCell = useCallback12(
-    (rowIdx, colIdx, fromKeyboard = false) => {
-      const pos = [rowIdx, colIdx];
-      activeCellPos.current = pos;
-      if (navigationStyle === "row") {
-        setHighlightedIdx(rowIdx);
-      } else {
-        focusCell(pos);
-      }
-      if (fromKeyboard) {
-        focusedCellPos.current = pos;
-      }
-    },
-    [focusCell, navigationStyle, setHighlightedIdx]
-  );
-  const nextPageItemIdx = useCallback12(
-    (key, [rowIdx, colIdx]) => new Promise((resolve) => {
-      let newRowIdx = rowIdx;
-      switch (key) {
-        case "PageDown":
-          newRowIdx = Math.min(rowCount - 1, rowIdx + viewportRowCount);
-          requestScroll == null ? void 0 : requestScroll({ type: "scroll-page", direction: "down" });
-          break;
-        case "PageUp":
-          newRowIdx = Math.max(0, rowIdx - viewportRowCount);
-          requestScroll == null ? void 0 : requestScroll({ type: "scroll-page", direction: "up" });
-          break;
-        case "Home":
-          newRowIdx = 0;
-          requestScroll == null ? void 0 : requestScroll({ type: "scroll-end", direction: "home" });
-          break;
-        case "End":
-          newRowIdx = rowCount - 1;
-          requestScroll == null ? void 0 : requestScroll({ type: "scroll-end", direction: "end" });
-          break;
-      }
-      setTimeout(() => {
-        resolve([newRowIdx, colIdx]);
-      }, 90);
-    }),
-    [requestScroll, rowCount, viewportRowCount]
-  );
-  const handleFocus = useCallback12(() => {
-    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);
-          if (navigationStyle === "row") {
-            setHighlightedIdx(focusedCellPos.current[0]);
-          }
-        }
-      }
-    }
-  }, [
-    disableHighlightOnFocus,
-    containerRef,
-    navigationStyle,
-    setHighlightedIdx
-  ]);
-  const navigateChildItems = useCallback12(
-    async (key) => {
-      const [nextRowIdx, nextColIdx] = isPagingKey(key) ? await nextPageItemIdx(key, activeCellPos.current) : nextCellPos(key, activeCellPos.current, columnCount, rowCount);
-      const [rowIdx, colIdx] = activeCellPos.current;
-      if (nextRowIdx !== rowIdx || nextColIdx !== colIdx) {
-        setActiveCell(nextRowIdx, nextColIdx, true);
-      }
-    },
-    [columnCount, nextPageItemIdx, rowCount, setActiveCell]
-  );
-  const scrollRowIntoViewIfNecessary = useCallback12(
-    (rowIndex) => {
-      const { current: container } = containerRef;
-      const activeRow = container == null ? void 0 : container.querySelector(
-        `[aria-rowindex="${rowIndex}"]`
-      );
-      if (activeRow) {
-        const [direction, distance] = howFarIsRowOutsideViewport(activeRow);
-        if (direction && distance) {
-          requestScroll == null ? void 0 : requestScroll({ type: "scroll-distance", distance, direction });
-        }
-      }
-    },
-    [containerRef, requestScroll]
-  );
-  const moveHighlightedRow = useCallback12(
-    async (key) => {
-      const { current: highlighted } = highlightedIndexRef;
-      const [nextRowIdx] = isPagingKey(key) ? await nextPageItemIdx(key, [highlighted != null ? highlighted : -1, 0]) : nextCellPos(key, [highlighted != null ? highlighted : -1, 0], columnCount, rowCount);
-      if (nextRowIdx !== highlighted) {
-        setHighlightedIndex(nextRowIdx);
-        scrollRowIntoViewIfNecessary(nextRowIdx);
-      }
-    },
-    [
-      columnCount,
-      nextPageItemIdx,
-      rowCount,
-      scrollRowIntoViewIfNecessary,
-      setHighlightedIndex
-    ]
-  );
-  useEffect2(() => {
-    if (highlightedIndexProp !== void 0 && highlightedIndexProp !== -1) {
-      scrollRowIntoViewIfNecessary(highlightedIndexProp);
-    }
-  }, [highlightedIndexProp, scrollRowIntoViewIfNecessary]);
-  const handleKeyDown = useCallback12(
-    (e) => {
-      if (rowCount > 0 && isNavigationKey(e.key, navigationStyle)) {
-        e.preventDefault();
-        e.stopPropagation();
-        if (navigationStyle === "row") {
-          moveHighlightedRow(e.key);
-        } else {
-          void navigateChildItems(e.key);
-        }
-      }
-    },
-    [rowCount, navigationStyle, moveHighlightedRow, navigateChildItems]
-  );
-  const handleClick = useCallback12(
-    // 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 handleMouseLeave = useCallback12(() => {
-    setHighlightedIndex(-1);
-  }, [setHighlightedIndex]);
-  const handleMouseMove = useCallback12(
-    (evt) => {
-      const idx = closestRowIndex(evt.target);
-      if (idx !== -1 && idx !== highlightedIndexRef.current) {
-        setHighlightedIndex(idx);
-      }
-    },
-    [setHighlightedIndex]
-  );
-  const navigate = useCallback12(() => {
-    navigateChildItems("ArrowDown");
-  }, [navigateChildItems]);
-  const fullyRendered = ((_a = containerRef.current) == null ? void 0 : _a.firstChild) != null;
-  useEffect2(() => {
-    if (fullyRendered && focusableCell.current === void 0 && !disableFocus) {
-      const { current: container } = containerRef;
-      const cell = (container == null ? void 0 : container.querySelector(headerCellQuery(0))) || (container == null ? void 0 : container.querySelector(dataCellQuery(0, 0)));
-      if (cell) {
-        cell.setAttribute("tabindex", "0");
-        focusableCell.current = cell;
-      }
-    }
-  }, [containerRef, disableFocus, fullyRendered]);
-  return {
-    highlightedIndexRef,
-    navigate,
-    onClick: handleClick,
-    onFocus: handleFocus,
-    onKeyDown: handleKeyDown,
-    onMouseLeave: navigationStyle === "row" ? handleMouseLeave : void 0,
-    onMouseMove: navigationStyle === "row" ? handleMouseMove : void 0
-  };
-};
-
-// src/useSelection.ts
-import {
-  deselectItem,
-  dispatchMouseEvent,
-  isRowSelected,
-  metadataKeys as metadataKeys4,
-  selectItem
-} from "@vuu-ui/vuu-utils";
-import {
-  useCallback as useCallback13,
-  useRef as useRef9
-} from "react";
-var { IDX: IDX2 } = metadataKeys4;
-var NO_SELECTION = [];
-var defaultSelectionKeys = ["Enter", " "];
-var useSelection = ({
-  highlightedIndexRef,
-  selectionKeys = defaultSelectionKeys,
-  selectionModel,
-  onSelect,
-  onSelectionChange
-}) => {
-  selectionModel === "extended" || selectionModel === "checkbox";
-  const lastActiveRef = useRef9(-1);
-  const selectedRef = useRef9(NO_SELECTION);
-  const isSelectionEvent = useCallback13(
-    (evt) => selectionKeys.includes(evt.key),
-    [selectionKeys]
-  );
-  const handleRowClick = useCallback13(
-    (row, rangeSelect, keepExistingSelection) => {
-      const { [IDX2]: idx } = row;
-      const { current: active } = lastActiveRef;
-      const { current: selected } = selectedRef;
-      const selectOperation = isRowSelected(row) ? deselectItem : selectItem;
-      const newSelected = selectOperation(
-        selectionModel,
-        selected,
-        idx,
-        rangeSelect,
-        keepExistingSelection,
-        active
-      );
-      selectedRef.current = newSelected;
-      lastActiveRef.current = idx;
-      onSelect == null ? void 0 : onSelect(row);
-      onSelectionChange == null ? void 0 : onSelectionChange(newSelected);
-    },
-    [onSelect, onSelectionChange, selectionModel]
-  );
-  const handleKeyDown = useCallback13(
-    (e) => {
-      if (isSelectionEvent(e)) {
-        const { current: rowIndex } = highlightedIndexRef;
-        if (rowIndex !== void 0 && rowIndex !== -1) {
-          const rowEl = e.target.querySelector(
-            `[aria-rowindex="${rowIndex}"]`
-          );
-          if (rowEl) {
-            dispatchMouseEvent(rowEl, "click");
-          }
-        }
-      }
-    },
-    [highlightedIndexRef, isSelectionEvent]
-  );
-  return {
-    onKeyDown: handleKeyDown,
-    onRowClick: handleRowClick
-  };
-};
-
-// src/useTableContextMenu.ts
-import { useContextMenu as usePopupContextMenu } from "@vuu-ui/vuu-popups";
-import { buildColumnMap, getIndexFromRowElement } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback14 } from "react";
-var NO_ROWS = [];
-var useTableContextMenu = ({
-  columns,
-  data,
-  dataSource,
-  getSelectedRows
-}) => {
-  const [showContextMenu] = usePopupContextMenu();
-  const onContextMenu = useCallback14(
-    (evt) => {
-      const target = evt.target;
-      const cellEl = target == null ? void 0 : target.closest("div[role='cell']");
-      const rowEl = target == null ? void 0 : target.closest("div[role='row']");
-      if (cellEl && rowEl) {
-        const { selectedRowsCount } = dataSource;
-        const columnMap = buildColumnMap(columns);
-        const rowIndex = getIndexFromRowElement(rowEl);
-        const cellIndex = Array.from(rowEl.childNodes).indexOf(cellEl);
-        const row = data.find(([idx]) => idx === rowIndex);
-        const columnName = columns[cellIndex];
-        showContextMenu(evt, "grid", {
-          columnMap,
-          columnName,
-          row,
-          selectedRows: selectedRowsCount === 0 ? NO_ROWS : getSelectedRows(),
-          viewport: dataSource.viewport
-        });
-      }
-    },
-    [columns, data, dataSource, getSelectedRows, showContextMenu]
-  );
-  return onContextMenu;
-};
-
-// src/useTableModel.ts
-import {
-  applyFilterToColumns,
-  applyGroupByToColumns,
-  applySortToColumns,
-  getCellRenderer,
-  getColumnHeaderContentRenderer,
-  getColumnHeaderLabelRenderer,
-  getColumnLabel,
-  getTableHeadings,
-  getValueFormatter,
-  hasValidationRules,
-  isFilteredColumn,
-  isGroupColumn as isGroupColumn2,
-  isPinned,
-  logger,
-  metadataKeys as metadataKeys5,
-  replaceColumn,
-  sortPinnedColumns,
-  stripFilterFromColumns,
-  subscribedOnly
-} from "@vuu-ui/vuu-utils";
-import { buildValidationChecker } from "@vuu-ui/vuu-ui-controls";
-import { useReducer } from "react";
-var { info } = logger("useTableModel");
-var DEFAULT_COLUMN_WIDTH = 100;
-var KEY_OFFSET = metadataKeys5.count;
-var columnWithoutDataType = ({ serverDataType }) => serverDataType === void 0;
-var getDataType = (column, tableSchema) => {
-  const schemaColumn = tableSchema == null ? void 0 : tableSchema.columns.find(
-    ({ name }) => name === column.name
-  );
-  if (schemaColumn) {
-    return schemaColumn.serverDataType;
-  } else {
-    return column.serverDataType;
-  }
-};
-var numericTypes = ["int", "long", "double"];
-var getDefaultAlignment = (serverDataType) => serverDataType === void 0 ? void 0 : numericTypes.includes(serverDataType) ? "right" : "left";
-var isShowColumnSettings = (action) => action.type === "columnSettings";
-var isShowTableSettings = (action) => action.type === "tableSettings";
-var columnReducer = (state, action) => {
-  info == null ? void 0 : info(`TableModelReducer ${action.type}`);
-  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 updateTableConfig2(state, action);
-    default:
-      console.log(`unhandled action ${action.type}`);
-      return state;
-  }
-};
-var useTableModel = (tableConfigProp, dataSource) => {
-  const [state, dispatchColumnAction] = useReducer(columnReducer, { tableConfig: tableConfigProp, dataSource }, init);
-  const { columns, headings, tableConfig, ...tableAttributes } = state;
-  return {
-    columns,
-    dispatchColumnAction,
-    headings,
-    tableAttributes,
-    tableConfig
-  };
-};
-function init({ dataSource, tableConfig }) {
-  const { columns, ...tableAttributes } = tableConfig;
-  const { config: dataSourceConfig, tableSchema } = dataSource;
-  const runtimeColumns = columns.filter(subscribedOnly(dataSourceConfig == null ? void 0 : dataSourceConfig.columns)).map(
-    columnDescriptorToRuntimeColumDescriptor(tableAttributes, tableSchema)
-  );
-  const maybePinnedColumns = runtimeColumns.some(isPinned) ? sortPinnedColumns(runtimeColumns) : runtimeColumns;
-  let state = {
-    columns: maybePinnedColumns,
-    headings: getTableHeadings(maybePinnedColumns),
-    tableConfig,
-    ...tableAttributes
-  };
-  if (dataSourceConfig) {
-    const { columns: _, ...rest } = dataSourceConfig;
-    state = updateTableConfig2(state, {
-      type: "tableConfig",
-      ...rest
-    });
-  }
-  return state;
-}
-var getLabel = (label, columnFormatHeader) => {
-  if (columnFormatHeader === "uppercase") {
-    return label.toUpperCase();
-  } else if (columnFormatHeader === "capitalize") {
-    return label[0].toUpperCase() + label.slice(1).toLowerCase();
-  }
-  return label;
-};
-var columnDescriptorToRuntimeColumDescriptor = (tableAttributes, tableSchema) => (column, index) => {
-  const { columnDefaultWidth = DEFAULT_COLUMN_WIDTH, columnFormatHeader } = tableAttributes;
-  const serverDataType = getDataType(column, tableSchema);
-  const {
-    align = getDefaultAlignment(serverDataType),
-    key,
-    name,
-    label = getColumnLabel(column),
-    width = columnDefaultWidth,
-    ...rest
-  } = column;
-  const runtimeColumnWithDefaults = {
-    ...rest,
-    align,
-    CellRenderer: getCellRenderer(column),
-    HeaderCellContentRenderer: getColumnHeaderContentRenderer(column),
-    HeaderCellLabelRenderer: getColumnHeaderLabelRenderer(column),
-    clientSideEditValidationCheck: hasValidationRules(column.type) ? buildValidationChecker(column.type.renderer.rules) : void 0,
-    label: getLabel(label, columnFormatHeader),
-    key: key != null ? key : index + KEY_OFFSET,
-    name,
-    originalIdx: index,
-    serverDataType,
-    valueFormatter: getValueFormatter(column, serverDataType),
-    width
-  };
-  if (isGroupColumn2(runtimeColumnWithDefaults)) {
-    runtimeColumnWithDefaults.columns = runtimeColumnWithDefaults.columns.map(
-      (col) => columnDescriptorToRuntimeColumDescriptor(tableAttributes)(
-        col,
-        col.key
-      )
-    );
-  }
-  return runtimeColumnWithDefaults;
-};
-function moveColumn(state, { column, moveBy }) {
-  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
-    };
-  }
-  return state;
-}
-function hideColumns(state, { columns }) {
-  if (columns.some((col) => col.hidden !== true)) {
-    return columns.reduce((s, c) => {
-      if (c.hidden !== true) {
-        return updateColumnProp(s, {
-          type: "updateColumnProp",
-          column: c,
-          hidden: true
-        });
-      } else {
-        return s;
-      }
-    }, state);
-  } else {
-    return state;
-  }
-}
-function showColumns(state, { columns }) {
-  if (columns.some((col) => col.hidden)) {
-    return columns.reduce((s, c) => {
-      if (c.hidden) {
-        return updateColumnProp(s, {
-          type: "updateColumnProp",
-          column: c,
-          hidden: false
-        });
-      } else {
-        return s;
-      }
-    }, state);
-  } else {
-    return state;
-  }
-}
-function resizeColumn(state, { column, phase, width }) {
-  const type = "updateColumnProp";
-  const resizing = phase !== "end";
-  switch (phase) {
-    case "begin":
-      return updateColumnProp(state, { type, column, resizing });
-    case "end":
-      return updateColumnProp(state, { type, column, resizing, width });
-    case "resize":
-      return updateColumnProp(state, { type, column, width });
-    default:
-      throw Error(`useTableModel.resizeColumn, invalid resizePhase ${phase}`);
-  }
-}
-function setTableSchema(state, { tableSchema }) {
-  const { columns } = state;
-  if (columns.some(columnWithoutDataType)) {
-    const cols = columns.map((column) => {
-      var _a;
-      const serverDataType = getDataType(column, tableSchema);
-      return {
-        ...column,
-        align: (_a = column.align) != null ? _a : getDefaultAlignment(serverDataType),
-        serverDataType
-      };
-    });
-    return {
-      ...state,
-      columns: cols
-    };
-  } else {
-    return state;
-  }
-}
-function pinColumn2(state, action) {
-  let { columns } = state;
-  const { column, pin } = action;
-  const targetColumn = columns.find((col) => col.name === column.name);
-  if (targetColumn) {
-    columns = replaceColumn(columns, { ...targetColumn, pin });
-    columns = sortPinnedColumns(columns);
-    return {
-      ...state,
-      columns
-    };
-  } else {
-    return state;
-  }
-}
-function updateColumnProp(state, action) {
-  let { columns, tableConfig } = 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 });
-      const targetConfigColumn = tableConfig.columns.find(
-        (col) => col.name === column.name
-      );
-      if (targetConfigColumn) {
-        tableConfig = {
-          ...tableConfig,
-          columns: replaceColumn(tableConfig.columns, {
-            ...targetConfigColumn,
-            width
-          })
-        };
-      }
-    }
-  }
-  return {
-    ...state,
-    columns,
-    tableConfig
-  };
-}
-function updateTableConfig2(state, { confirmed, filter, groupBy, sort }) {
-  const hasGroupBy = groupBy !== void 0;
-  const hasFilter = typeof (filter == null ? void 0 : filter.filter) === "string";
-  const hasSort = sort && sort.sortDefs.length > 0;
-  let result = state;
-  if (hasGroupBy) {
-    result = {
-      ...state,
-      columns: 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;
-}
-
-// src/useTableScroll.ts
-import { useCallback as useCallback15, useRef as useRef10 } from "react";
-var getPctScroll = (container) => {
-  const { scrollLeft, scrollTop } = container;
-  const { clientHeight, clientWidth, scrollHeight, scrollWidth } = container;
-  const pctScrollLeft = scrollLeft / (scrollWidth - clientWidth);
-  const pctScrollTop = scrollTop / (scrollHeight - clientHeight);
-  return [pctScrollLeft, pctScrollTop];
-};
-var useCallbackRef = ({
-  onAttach,
-  onDetach
-}) => {
-  const ref = useRef10(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 = ({
-  maxScrollLeft,
-  maxScrollTop,
-  onHorizontalScroll,
-  onVerticalScroll,
-  rowHeight,
-  viewportRowCount
-}) => {
-  const contentContainerScrolledRef = useRef10(false);
-  const scrollPosRef = useRef10({ scrollTop: 0, scrollLeft: 0 });
-  const scrollbarContainerRef = useRef10(null);
-  const contentContainerRef = useRef10(null);
-  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 rootScrollLeft = Math.round(pctScrollLeft * maxScrollLeft);
-      const rootScrollTop = Math.round(pctScrollTop * maxScrollTop);
-      contentContainer.scrollTo({
-        left: rootScrollLeft,
-        top: rootScrollTop,
-        behavior: "auto"
-      });
-    }
-  }, [maxScrollLeft, maxScrollTop]);
-  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) {
-        const { scrollLeft, scrollTop } = scrollbarContainer;
-        contentContainerScrolledRef.current = false;
-        if (scrollRequest.type === "scroll-distance") {
-          let newScrollLeft = scrollLeft;
-          let newScrollTop = scrollTop;
-          if (scrollRequest.direction === "up" || scrollRequest.direction === "down") {
-            newScrollTop = Math.min(
-              Math.max(0, scrollTop + scrollRequest.distance),
-              maxScrollTop
-            );
-          } else {
-            newScrollLeft = Math.min(
-              Math.max(0, scrollLeft + scrollRequest.distance),
-              maxScrollLeft
-            );
-          }
-          scrollbarContainer.scrollTo({
-            top: newScrollTop,
-            left: newScrollLeft,
-            behavior: "smooth"
-          });
-        } else if (scrollRequest.type === "scroll-page") {
-          const { direction } = scrollRequest;
-          const scrollBy = viewportRowCount * (direction === "down" ? rowHeight : -rowHeight);
-          const newScrollTop = Math.min(
-            Math.max(0, scrollTop + scrollBy),
-            maxScrollTop
-          );
-          scrollbarContainer.scrollTo({
-            top: newScrollTop,
-            left: scrollLeft,
-            behavior: "auto"
-          });
-        } else if (scrollRequest.type === "scroll-end") {
-          const { direction } = scrollRequest;
-          const scrollTo = direction === "end" ? maxScrollTop : 0;
-          scrollbarContainer.scrollTo({
-            top: scrollTo,
-            left: scrollbarContainer.scrollLeft,
-            behavior: "auto"
-          });
-        }
-      }
-    },
-    [maxScrollLeft, maxScrollTop, rowHeight, viewportRowCount]
-  );
-  return {
-    /** Ref to be assigned to ScrollbarContainer */
-    scrollbarContainerRef: scrollbarContainerCallbackRef,
-    /** Ref to be assigned to ContentContainer */
-    contentContainerRef: contentContainerCallbackRef,
-    /** Scroll the table  */
-    requestScroll
-  };
-};
-
-// src/useTableViewport.ts
-import { useCallback as useCallback16, useMemo as useMemo4, useRef as useRef11 } 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: pinnedWidthLeft + 4,
-    pinnedWidthRight: pinnedWidthRight + 4,
-    unpinnedWidth
-  };
-};
-var useTableViewport = ({
-  columns,
-  headerHeight,
-  headings,
-  rowCount,
-  rowHeight,
-  size
-}) => {
-  const pctScrollTopRef = useRef11(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 } = useMemo4(
-    () => measurePinnedColumns(columns),
-    [columns]
-  );
-  const [actualRowOffset, actualRowAtPosition] = useMemo4(
-    () => actualRowPositioning(rowHeight),
-    [rowHeight]
-  );
-  const [getRowOffset, getRowAtPosition] = useMemo4(() => {
-    if (virtualisedExtent) {
-      return virtualRowPositioning(
-        rowHeight,
-        virtualisedExtent,
-        pctScrollTopRef
-      );
-    } else {
-      return [actualRowOffset, actualRowAtPosition];
-    }
-  }, [actualRowAtPosition, actualRowOffset, virtualisedExtent, rowHeight]);
-  const setPctScrollTop = useCallback16((scrollPct) => {
-    pctScrollTopRef.current = scrollPct;
-  }, []);
-  return useMemo4(() => {
-    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 { useCallback as useCallback17, useEffect as useEffect3, useRef as useRef12 } from "react";
-var useVirtualViewport = ({
-  getRowAtPosition,
-  setRange,
-  viewportMeasurements
-}) => {
-  const firstRowRef = useRef12(0);
-  const { rowCount: viewportRowCount } = viewportMeasurements;
-  const handleVerticalScroll = useCallback17(
-    (scrollTop) => {
-      const firstRow = getRowAtPosition(scrollTop);
-      if (firstRow !== firstRowRef.current) {
-        firstRowRef.current = firstRow;
-        setRange({ from: firstRow, to: firstRow + viewportRowCount });
-      }
-    },
-    [getRowAtPosition, setRange, viewportRowCount]
-  );
-  useEffect3(() => {
-    const { current: from } = firstRowRef;
-    const rowRange = { from, to: from + viewportRowCount };
-    setRange(rowRange);
-  }, [setRange, viewportRowCount]);
-  return {
-    onVerticalScroll: handleVerticalScroll
-  };
-};
-
-// src/useTableAndColumnSettings.ts
-import { useLayoutProviderDispatch } from "@vuu-ui/vuu-layout";
-import { getCalculatedColumnType } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback18, useRef as useRef13, useState as useState5 } from "react";
-var useTableAndColumnSettings = ({
-  availableColumns: availableColumnsProps,
-  onAvailableColumnsChange,
-  onConfigChange,
-  onCreateCalculatedColumn,
-  onDataSourceConfigChange,
-  tableConfig
-}) => {
-  const dispatchLayoutAction = useLayoutProviderDispatch();
-  const showTableSettingsRef = useRef13();
-  const [availableColumns, setAvailableColumns] = useState5(
-    availableColumnsProps
-  );
-  const showContextPanel = useCallback18(
-    (componentType, title, props) => {
-      dispatchLayoutAction({
-        type: "set-props",
-        path: "#context-panel",
-        props: {
-          expanded: true,
-          content: {
-            type: componentType,
-            props
-          },
-          title
-        }
-      });
-    },
-    [dispatchLayoutAction]
-  );
-  const handleCancelCreateColumn = useCallback18(() => {
-    requestAnimationFrame(() => {
-      var _a;
-      (_a = showTableSettingsRef.current) == null ? void 0 : _a.call(showTableSettingsRef);
-    });
-  }, []);
-  const handleCreateCalculatedColumn = useCallback18(
-    (column) => {
-      const newAvailableColumns = availableColumns.concat({
-        name: column.name,
-        serverDataType: getCalculatedColumnType(column)
-      });
-      setAvailableColumns(newAvailableColumns);
-      onAvailableColumnsChange == null ? void 0 : onAvailableColumnsChange(newAvailableColumns);
-      requestAnimationFrame(() => {
-        var _a;
-        (_a = showTableSettingsRef.current) == null ? void 0 : _a.call(showTableSettingsRef);
-      });
-      onCreateCalculatedColumn(column);
-    },
-    [availableColumns, onAvailableColumnsChange, onCreateCalculatedColumn]
-  );
-  const showColumnSettingsPanel = useCallback18(
-    (action) => {
-      showContextPanel("ColumnSettings", "Column Settings", {
-        column: action.column,
-        onCancelCreateColumn: handleCancelCreateColumn,
-        onConfigChange,
-        onCreateCalculatedColumn: handleCreateCalculatedColumn,
-        tableConfig,
-        vuuTable: action.vuuTable
-      });
-    },
-    [
-      handleCancelCreateColumn,
-      handleCreateCalculatedColumn,
-      onConfigChange,
-      showContextPanel,
-      tableConfig
-    ]
-  );
-  const handleAddCalculatedColumn = useCallback18(() => {
-    showColumnSettingsPanel({
-      column: {
-        name: "::",
-        serverDataType: "string"
-      },
-      type: "columnSettings",
-      vuuTable: { module: "SIMUL", table: "instruments" }
-    });
-  }, [showColumnSettingsPanel]);
-  const handleNavigateToColumn = useCallback18(
-    (columnName) => {
-      const column = tableConfig.columns.find((c) => c.name === columnName);
-      if (column) {
-        showColumnSettingsPanel({
-          type: "columnSettings",
-          column,
-          //TODO where do we get this from
-          vuuTable: { module: "SIMUL", table: "instruments" }
-        });
-      }
-    },
-    [showColumnSettingsPanel, tableConfig.columns]
-  );
-  showTableSettingsRef.current = useCallback18(() => {
-    showContextPanel("TableSettings", "DataGrid Settings", {
-      availableColumns: availableColumns != null ? availableColumns : tableConfig.columns.map(({ name, serverDataType }) => ({
-        name,
-        serverDataType
-      })),
-      onAddCalculatedColumn: handleAddCalculatedColumn,
-      onConfigChange,
-      onDataSourceConfigChange,
-      onNavigateToColumn: handleNavigateToColumn,
-      tableConfig
-    });
-  }, [
-    availableColumns,
-    handleAddCalculatedColumn,
-    handleNavigateToColumn,
-    onConfigChange,
-    onDataSourceConfigChange,
-    showContextPanel,
-    tableConfig
-  ]);
-  return {
-    showColumnSettingsPanel,
-    showTableSettingsPanel: showTableSettingsRef.current
-  };
-};
-
-// src/useTable.ts
-var stripInternalProperties = (tableConfig) => {
-  return tableConfig;
-};
-var { KEY, IS_EXPANDED: IS_EXPANDED2, IS_LEAF: IS_LEAF2 } = metadataKeys6;
-var NULL_DRAG_DROP = {
-  draggable: void 0,
-  onMouseDown: void 0
-};
-var useNullDragDrop = () => NULL_DRAG_DROP;
-var addColumn = (tableConfig, column) => ({
-  ...tableConfig,
-  columns: tableConfig.columns.concat(column)
-});
-var useTable = ({
-  allowDragDrop = false,
-  availableColumns,
-  config,
-  containerRef,
-  dataSource,
-  disableFocus,
-  headerHeight = 25,
-  highlightedIndex: highlightedIndexProp,
-  id,
-  navigationStyle = "cell",
-  onAvailableColumnsChange,
-  onConfigChange,
-  onDragStart,
-  onDrop,
-  onFeatureInvocation,
-  onHighlight,
-  onRowClick: onRowClickProp,
-  onSelect,
-  onSelectionChange,
-  renderBufferSize = 0,
-  rowHeight = 20,
-  selectionModel,
-  size
-}) => {
-  const [rowCount, setRowCount] = useState6(dataSource.size);
-  if (dataSource === void 0) {
-    throw Error("no data source provided to Vuu Table");
-  }
-  const useRowDragDrop = allowDragDrop ? useDragDrop : useNullDragDrop;
-  const menuBuilder = useMemo5(
-    () => buildContextMenuDescriptors(dataSource),
-    [dataSource]
-  );
-  const onDataRowcountChange = useCallback19((size2) => {
-    setRowCount(size2);
-  }, []);
-  const {
-    columns: runtimeColumns,
-    dispatchColumnAction,
-    headings,
-    tableAttributes,
-    tableConfig
-  } = useTableModel(config, dataSource);
-  useLayoutEffectSkipFirst2(() => {
-    dispatchColumnAction({
-      type: "init",
-      dataSource,
-      tableConfig
-    });
-  }, [tableConfig, dataSource, dispatchColumnAction]);
-  const applyTableConfigChange = useCallback19(
-    (config2) => {
-      dispatchColumnAction({
-        type: "init",
-        tableConfig: config2,
-        dataSource
-      });
-      onConfigChange == null ? void 0 : onConfigChange(stripInternalProperties(config2));
-    },
-    [dataSource, dispatchColumnAction, onConfigChange]
-  );
-  const [stateColumns, setStateColumns] = useState6();
-  const [columns, setColumnSize] = useMemo5(() => {
-    const setSize = (columnName, width) => {
-      const cols = updateColumn(runtimeColumns, columnName, { width });
-      setStateColumns(cols);
-    };
-    return [stateColumns != null ? stateColumns : runtimeColumns, setSize];
-  }, [runtimeColumns, stateColumns]);
-  const columnMap = useMemo5(
-    () => buildColumnMap2(dataSource.columns),
-    [dataSource.columns]
-  );
-  const {
-    getRowAtPosition,
-    getRowOffset,
-    setPctScrollTop,
-    ...viewportMeasurements
-  } = useTableViewport({
-    columns,
-    headerHeight,
-    headings,
-    rowCount,
-    rowHeight,
-    size
-  });
-  const initialRange = useInitialValue({
-    from: 0,
-    to: viewportMeasurements.rowCount
-  });
-  const onSubscribed = useCallback19(
-    ({ tableSchema }) => {
-      if (tableSchema) {
-        dispatchColumnAction({
-          type: "setTableSchema",
-          tableSchema
-        });
-      } else {
-        console.log("subscription message with no schema");
-      }
-    },
-    [dispatchColumnAction]
-  );
-  const { data, dataRef, getSelectedRows, range, setRange } = useDataSource({
-    dataSource,
-    // We need to factor this out of Table
-    onFeatureInvocation,
-    renderBufferSize,
-    onSizeChange: onDataRowcountChange,
-    onSubscribed,
-    range: initialRange
-  });
-  const handleConfigEditedInSettingsPanel = useCallback19(
-    (tableConfig2) => {
-      console.log(`settings changed`);
-      dispatchColumnAction({
-        type: "init",
-        tableConfig: tableConfig2,
-        dataSource
-      });
-      onConfigChange == null ? void 0 : onConfigChange(stripInternalProperties(tableConfig2));
-    },
-    [dataSource, dispatchColumnAction, onConfigChange]
-  );
-  const handleDataSourceConfigChanged = useCallback19(
-    (dataSourceConfig) => {
-      dataSource.config = {
-        ...dataSource.config,
-        ...dataSourceConfig
-      };
-    },
-    [dataSource]
-  );
-  useEffect4(() => {
-    dataSource.on("config", (config2, confirmed) => {
-      dispatchColumnAction({
-        type: "tableConfig",
-        ...config2,
-        confirmed
-      });
-    });
-  }, [dataSource, dispatchColumnAction]);
-  const handleCreateCalculatedColumn = useCallback19(
-    (column) => {
-      dataSource.columns = dataSource.columns.concat(column.name);
-      applyTableConfigChange(addColumn(tableConfig, column));
-    },
-    [dataSource, tableConfig, applyTableConfigChange]
-  );
-  const hideColumns2 = useCallback19(
-    (action) => {
-      const { columns: columns2 } = action;
-      const hiddenColumns = columns2.map((c) => c.name);
-      const newTableConfig = {
-        ...tableConfig,
-        columns: tableConfig.columns.map(
-          (col) => hiddenColumns.includes(col.name) ? { ...col, hidden: true } : col
-        )
-      };
-      applyTableConfigChange(newTableConfig);
-    },
-    [tableConfig, applyTableConfigChange]
-  );
-  const pinColumn3 = useCallback19(
-    (action) => {
-      applyTableConfigChange({
-        ...tableConfig,
-        columns: updateColumn(tableConfig.columns, {
-          ...action.column,
-          pin: action.pin
-        })
-      });
-    },
-    [tableConfig, applyTableConfigChange]
-  );
-  const { showColumnSettingsPanel, showTableSettingsPanel } = useTableAndColumnSettings({
-    availableColumns: availableColumns != null ? availableColumns : tableConfig.columns.map(({ name, serverDataType = "string" }) => ({
-      name,
-      serverDataType
-    })),
-    onAvailableColumnsChange,
-    onConfigChange: handleConfigEditedInSettingsPanel,
-    onCreateCalculatedColumn: handleCreateCalculatedColumn,
-    onDataSourceConfigChange: handleDataSourceConfigChanged,
-    tableConfig
-  });
-  const onPersistentColumnOperation = useCallback19(
-    (action) => {
-      if (isShowColumnSettings(action)) {
-        showColumnSettingsPanel(action);
-      } else if (isShowTableSettings(action)) {
-        showTableSettingsPanel();
-      } else {
-        switch (action.type) {
-          case "hideColumns":
-            return hideColumns2(action);
-          case "pinColumn":
-            return pinColumn3(action);
-          default:
-            dispatchColumnAction(action);
-        }
-      }
-    },
-    [
-      dispatchColumnAction,
-      hideColumns2,
-      pinColumn3,
-      showColumnSettingsPanel,
-      showTableSettingsPanel
-    ]
-  );
-  const handleContextMenuAction = useHandleTableContextMenu({
-    dataSource,
-    onPersistentColumnOperation
-  });
-  const handleSort = useCallback19(
-    (column, extendSort = false, sortType) => {
-      if (dataSource) {
-        dataSource.sort = applySort(
-          dataSource.sort,
-          column,
-          extendSort,
-          sortType
-        );
-      }
-    },
-    [dataSource]
-  );
-  const onResizeColumn = useCallback19(
-    (phase, columnName, width) => {
-      const column = columns.find((column2) => column2.name === columnName);
-      if (column) {
-        if (phase === "resize") {
-          if (isValidNumber(width)) {
-            setColumnSize(columnName, width);
-          }
-        } else if (phase === "end") {
-          if (isValidNumber(width)) {
-            dispatchColumnAction({
-              type: "resizeColumn",
-              phase,
-              column,
-              width
-            });
-            setStateColumns(void 0);
-            onConfigChange == null ? void 0 : onConfigChange(
-              stripInternalProperties(
-                updateTableConfig(tableConfig, {
-                  type: "col-size",
-                  column,
-                  width
-                })
-              )
-            );
-          }
-        } else {
-          setStateColumns(void 0);
-          dispatchColumnAction({
-            type: "resizeColumn",
-            phase,
-            column,
-            width
-          });
-        }
-      } else {
-        throw Error(
-          `useDataTable.handleColumnResize, column ${columnName} not found`
-        );
-      }
-    },
-    [columns, tableConfig, dispatchColumnAction, onConfigChange, setColumnSize]
-  );
-  const onToggleGroup = useCallback19(
-    (row, column) => {
-      var _a, _b;
-      const isJson = isJsonGroup2(column, row);
-      const key = row[KEY];
-      if (row[IS_EXPANDED2]) {
-        dataSource.closeTreeNode(key, true);
-        if (isJson) {
-          const idx = columns.indexOf(column);
-          const rows = (_a = dataSource.getRowsAtDepth) == null ? void 0 : _a.call(dataSource, idx + 1);
-          if (rows && !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 = (_b = dataSource.getChildRows) == null ? void 0 : _b.call(dataSource, key);
-          const idx = columns.indexOf(column) + 1;
-          const columnsToShow = [columns[idx]];
-          if (childRows && 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 } = useVirtualViewport({
-    columns,
-    getRowAtPosition,
-    setRange,
-    viewportMeasurements
-  });
-  const handleVerticalScroll = useCallback19(
-    (scrollTop) => {
-      onVerticalScroll(scrollTop);
-    },
-    [onVerticalScroll]
-  );
-  const { requestScroll, ...scrollProps } = useTableScroll({
-    maxScrollLeft: viewportMeasurements.maxScrollContainerScrollHorizontal,
-    maxScrollTop: viewportMeasurements.maxScrollContainerScrollVertical,
-    rowHeight,
-    onVerticalScroll: handleVerticalScroll,
-    viewportRowCount: viewportMeasurements.rowCount
-  });
-  const {
-    highlightedIndexRef,
-    navigate,
-    onFocus: navigationFocus,
-    onKeyDown: navigationKeyDown,
-    ...containerProps
-  } = useKeyboardNavigation({
-    columnCount: columns.filter((c) => c.hidden !== true).length,
-    containerRef,
-    disableFocus,
-    highlightedIndex: highlightedIndexProp,
-    navigationStyle,
-    requestScroll,
-    rowCount: dataSource == null ? void 0 : dataSource.size,
-    onHighlight,
-    viewportRange: range,
-    viewportRowCount: viewportMeasurements.rowCount
-  });
-  const {
-    onBlur: editingBlur,
-    onDoubleClick: editingDoubleClick,
-    onKeyDown: editingKeyDown,
-    onFocus: editingFocus
-  } = useCellEditing({
-    navigate
-  });
-  const handleFocus = useCallback19(
-    (e) => {
-      navigationFocus();
-      if (!e.defaultPrevented) {
-        editingFocus(e);
-      }
-    },
-    [editingFocus, navigationFocus]
-  );
-  const onContextMenu = useTableContextMenu({
-    columns,
-    data,
-    dataSource,
-    getSelectedRows
-  });
-  const onMoveGroupColumn = useCallback19(
-    (columns2) => {
-      dataSource.groupBy = columns2.map((col) => col.name);
-    },
-    [dataSource]
-  );
-  const onRemoveGroupColumn = useCallback19(
-    (column) => {
-      if (isGroupColumn3(column)) {
-        dataSource.groupBy = [];
-      } else {
-        if (dataSource && dataSource.groupBy.includes(column.name)) {
-          dataSource.groupBy = dataSource.groupBy.filter(
-            (columnName) => columnName !== column.name
-          );
-        }
-      }
-    },
-    [dataSource]
-  );
-  const handleSelectionChange = useCallback19(
-    (selected) => {
-      dataSource.select(selected);
-      onSelectionChange == null ? void 0 : onSelectionChange(selected);
-    },
-    [dataSource, onSelectionChange]
-  );
-  const {
-    onKeyDown: selectionHookKeyDown,
-    onRowClick: selectionHookOnRowClick
-  } = useSelection({
-    highlightedIndexRef,
-    onSelect,
-    onSelectionChange: handleSelectionChange,
-    selectionModel
-  });
-  const handleKeyDown = useCallback19(
-    (e) => {
-      navigationKeyDown(e);
-      if (!e.defaultPrevented) {
-        editingKeyDown(e);
-      }
-      if (!e.defaultPrevented) {
-        selectionHookKeyDown(e);
-      }
-    },
-    [navigationKeyDown, editingKeyDown, selectionHookKeyDown]
-  );
-  const handleRowClick = useCallback19(
-    (row, rangeSelect, keepExistingSelection) => {
-      selectionHookOnRowClick(row, rangeSelect, keepExistingSelection);
-      onRowClickProp == null ? void 0 : onRowClickProp(row);
-    },
-    [onRowClickProp, selectionHookOnRowClick]
-  );
-  useLayoutEffectSkipFirst2(() => {
-    dispatchColumnAction({
-      type: "init",
-      tableConfig: config,
-      dataSource
-    });
-  }, [config, dataSource, dispatchColumnAction]);
-  const onMoveColumn = useCallback19(
-    (columns2) => {
-      console.log(`useTable onMoveColumn`, {
-        columns: columns2
-      });
-      const newTableConfig = {
-        ...tableConfig,
-        columns: columns2
-      };
-      dispatchColumnAction({
-        type: "init",
-        tableConfig: newTableConfig,
-        dataSource
-      });
-      onConfigChange == null ? void 0 : onConfigChange(stripInternalProperties(newTableConfig));
-    },
-    [dataSource, dispatchColumnAction, onConfigChange, tableConfig]
-  );
-  const handleDropRow = useCallback19(
-    (dragDropState) => {
-      onDrop == null ? void 0 : onDrop(dragDropState);
-    },
-    [onDrop]
-  );
-  const handleDataEdited = useCallback19(
-    async (row, columnName, value) => dataSource.applyEdit(row, columnName, value),
-    [dataSource]
-  );
-  const handleDragStartRow = useCallback19(
-    (dragDropState) => {
-      const { initialDragElement } = dragDropState;
-      const rowIndex = getIndexFromRowElement2(initialDragElement);
-      const row = dataRef.current.find((row2) => row2[0] === rowIndex);
-      if (row) {
-        dragDropState.setPayload(row);
-      } else {
-      }
-      onDragStart == null ? void 0 : onDragStart(dragDropState);
-    },
-    [dataRef, onDragStart]
-  );
-  const { onMouseDown: rowDragMouseDown, draggable: draggableRow } = useRowDragDrop({
-    allowDragDrop,
-    containerRef,
-    draggableClassName: `vuuTable`,
-    id,
-    onDragStart: handleDragStartRow,
-    onDrop: handleDropRow,
-    orientation: "vertical",
-    itemQuery: ".vuuTableRow"
-  });
-  return {
-    ...containerProps,
-    "aria-rowcount": dataSource.size,
-    draggableRow,
-    onBlur: editingBlur,
-    onDoubleClick: editingDoubleClick,
-    onFocus: handleFocus,
-    onKeyDown: handleKeyDown,
-    onMouseDown: rowDragMouseDown,
-    columnMap,
-    columns,
-    data,
-    handleContextMenuAction,
-    headings,
-    highlightedIndex: highlightedIndexRef.current,
-    menuBuilder,
-    onContextMenu,
-    onDataEdited: handleDataEdited,
-    onMoveColumn,
-    onMoveGroupColumn,
-    onRemoveGroupColumn,
-    onRowClick: handleRowClick,
-    onSortColumn: handleSort,
-    onResizeColumn,
-    onToggleGroup,
-    scrollProps,
-    // TODO don't think we need these ...
-    tableAttributes,
-    tableConfig,
-    viewportMeasurements
-  };
-};
-
-// src/table-header/TableHeader.tsx
-import { isGroupColumn as isGroupColumn4, isNotHidden as isNotHidden2 } from "@vuu-ui/vuu-utils";
-import cx8 from "clsx";
-
-// src/table-header/useTableHeader.ts
-import { useDragDropNext as useDragDrop2 } from "@vuu-ui/vuu-ui-controls";
-import { moveColumnTo, visibleColumnAtIndex } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback20, useRef as useRef14 } from "react";
-var useTableHeader = ({
-  columns,
-  onMoveColumn,
-  onSortColumn,
-  tableConfig
-}) => {
-  const containerRef = useRef14(null);
-  const handleDropColumnHeader = useCallback20(
-    (moveFrom, moveTo) => {
-      const column = columns[moveFrom];
-      const orderedColumns = moveColumnTo(columns, column, moveTo);
-      const ofColumn = ({ name }) => (col) => col.name === name;
-      const targetIndex = orderedColumns.findIndex(ofColumn(column));
-      const nextColumn = orderedColumns[targetIndex + 1];
-      const insertPos = nextColumn ? tableConfig.columns.findIndex(ofColumn(nextColumn)) : -1;
-      if (moveTo > moveFrom && insertPos !== -1) {
-        onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos - 1));
-      } else {
-        onMoveColumn(moveColumnTo(tableConfig.columns, column, insertPos));
-      }
-    },
-    [columns, onMoveColumn, tableConfig.columns]
-  );
-  const handleColumnHeaderClick = useCallback20(
-    (evt) => {
-      var _a;
-      const targetElement = evt.target;
-      const headerCell = targetElement.closest(
-        ".vuuTableHeaderCell"
-      );
-      const colIdx = parseInt((_a = headerCell == null ? void 0 : headerCell.dataset.index) != null ? _a : "-1");
-      const column = visibleColumnAtIndex(columns, colIdx);
-      const isAdditive = evt.shiftKey;
-      column && onSortColumn(column, isAdditive);
-    },
-    [columns, onSortColumn]
-  );
-  const {
-    onMouseDown: columnHeaderDragMouseDown,
-    draggable: draggableColumn,
-    ...dragDropHook
-  } = useDragDrop2({
-    allowDragDrop: true,
-    containerRef,
-    draggableClassName: `vuuTable`,
-    onDrop: handleDropColumnHeader,
-    orientation: "horizontal",
-    itemQuery: ".vuuTableHeaderCell"
-  });
-  return {
-    containerRef,
-    draggableColumn,
-    draggedColumnIndex: dragDropHook.draggedItemIndex,
-    onClick: handleColumnHeaderClick,
-    onMouseDown: columnHeaderDragMouseDown
-  };
-};
-
-// src/table-header/TableHeader.tsx
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
-var TableHeader = ({
-  classBase: classBase10 = "vuuTable",
-  columns,
-  headings,
-  onMoveColumn,
-  onMoveGroupColumn,
-  onRemoveGroupColumn,
-  onResizeColumn,
-  onSortColumn,
-  tableConfig,
-  tableId
-}) => {
-  const {
-    containerRef,
-    draggableColumn,
-    draggedColumnIndex,
-    onClick,
-    onMouseDown
-  } = useTableHeader({
-    columns,
-    onMoveColumn,
-    onSortColumn,
-    tableConfig
-  });
-  return /* @__PURE__ */ jsxs7("div", { className: `${classBase10}-col-headings`, ref: containerRef, children: [
-    headings.map((colHeaders, i) => /* @__PURE__ */ jsx11("div", { className: "vuuTable-heading", children: colHeaders.map(({ label, width }, j) => /* @__PURE__ */ jsx11("div", { className: "vuuTable-headingCell", style: { width }, children: label }, j)) }, i)),
-    /* @__PURE__ */ jsxs7("div", { className: `${classBase10}-col-headers`, role: "row", children: [
-      columns.filter(isNotHidden2).map(
-        (col, i) => isGroupColumn4(col) ? /* @__PURE__ */ jsx11(
-          GroupHeaderCellNext,
-          {
-            column: col,
-            "data-index": i,
-            onMoveColumn: onMoveGroupColumn,
-            onRemoveColumn: onRemoveGroupColumn,
-            onResize: onResizeColumn
-          },
-          col.name
-        ) : /* @__PURE__ */ jsx11(
-          HeaderCell,
-          {
-            className: cx8({
-              "vuuDraggable-dragAway": i === draggedColumnIndex
-            }),
-            column: col,
-            "data-index": i,
-            id: `${tableId}-col-${i}`,
-            onClick,
-            onMouseDown,
-            onResize: onResizeColumn
-          },
-          col.name
-        )
-      ),
-      draggableColumn
-    ] })
-  ] });
-};
-
-// src/Table.tsx
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
-var classBase7 = "vuuTable";
-var { IDX: IDX3, RENDER_IDX } = metadataKeys7;
-var TableCore = ({
-  Row: Row2 = Row,
-  allowDragDrop,
-  availableColumns,
-  config,
-  containerRef,
-  dataSource,
-  disableFocus = false,
-  highlightedIndex: highlightedIndexProp,
-  id: idProp,
-  navigationStyle = "cell",
-  onAvailableColumnsChange,
-  onConfigChange,
-  onDragStart,
-  onDrop,
-  onFeatureInvocation,
-  onHighlight,
-  onRowClick: onRowClickProp,
-  onSelect,
-  onSelectionChange,
-  renderBufferSize = 0,
-  rowHeight = 20,
-  selectionModel = "extended",
-  showColumnHeaders = true,
-  headerHeight = showColumnHeaders ? 25 : 0,
-  size
-}) => {
-  const id = useId(idProp);
-  const {
-    columnMap,
-    columns,
-    data,
-    draggableRow,
-    handleContextMenuAction,
-    headings,
-    highlightedIndex,
-    onDataEdited,
-    onMoveColumn,
-    onMoveGroupColumn,
-    onRemoveGroupColumn,
-    onResizeColumn,
-    onRowClick,
-    onSortColumn,
-    onToggleGroup,
-    menuBuilder,
-    scrollProps,
-    tableAttributes,
-    tableConfig,
-    viewportMeasurements,
-    ...tableProps
-  } = useTable({
-    allowDragDrop,
-    availableColumns,
-    config,
-    containerRef,
-    dataSource,
-    disableFocus,
-    headerHeight,
-    highlightedIndex: highlightedIndexProp,
-    id,
-    navigationStyle,
-    onAvailableColumnsChange,
-    onConfigChange,
-    onDragStart,
-    onDrop,
-    onFeatureInvocation,
-    onHighlight,
-    onRowClick: onRowClickProp,
-    onSelect,
-    onSelectionChange,
-    renderBufferSize,
-    rowHeight,
-    selectionModel,
-    size
-  });
-  const className = cx9(`${classBase7}-contentContainer`, {
-    [`${classBase7}-colLines`]: tableAttributes.columnSeparators,
-    [`${classBase7}-rowLines`]: tableAttributes.rowSeparators,
-    // [`${classBase}-highlight`]: tableAttributes.showHighlightedRow,
-    [`${classBase7}-zebra`]: tableAttributes.zebraStripes
-    // [`${classBase}-loading`]: isDataLoading(tableProps.columns),
-  });
-  const cssVariables = {
-    "--content-height": `${viewportMeasurements.contentHeight}px`,
-    "--content-width": `${viewportMeasurements.contentWidth}px`,
-    "--horizontal-scrollbar-height": `${viewportMeasurements.horizontalScrollbarHeight}px`,
-    "--pinned-width-left": `${viewportMeasurements.pinnedWidthLeft}px`,
-    "--pinned-width-right": `${viewportMeasurements.pinnedWidthRight}px`,
-    "--header-height": `${headerHeight}px`,
-    "--row-height": `${rowHeight}px`,
-    "--total-header-height": `${viewportMeasurements.totalHeaderHeight}px`,
-    "--vertical-scrollbar-width": `${viewportMeasurements.verticalScrollbarWidth}px`,
-    "--viewport-body-height": `${viewportMeasurements.viewportBodyHeight}px`
-  };
-  return /* @__PURE__ */ jsxs8(
-    ContextMenuProvider,
-    {
-      menuActionHandler: handleContextMenuAction,
-      menuBuilder,
-      children: [
-        /* @__PURE__ */ jsx12(
-          "div",
-          {
-            className: `${classBase7}-scrollbarContainer`,
-            ref: scrollProps.scrollbarContainerRef,
-            style: cssVariables,
-            children: /* @__PURE__ */ jsx12("div", { className: `${classBase7}-scrollbarContent` })
-          }
-        ),
-        /* @__PURE__ */ jsx12(
-          "div",
-          {
-            className,
-            ref: scrollProps.contentContainerRef,
-            style: cssVariables,
-            children: /* @__PURE__ */ jsxs8(
-              "div",
-              {
-                ...tableProps,
-                className: `${classBase7}-table`,
-                role: "table",
-                tabIndex: disableFocus ? void 0 : -1,
-                children: [
-                  showColumnHeaders ? /* @__PURE__ */ jsx12(
-                    TableHeader,
-                    {
-                      columns,
-                      headings,
-                      onMoveColumn,
-                      onMoveGroupColumn,
-                      onRemoveGroupColumn,
-                      onResizeColumn,
-                      onSortColumn,
-                      tableConfig,
-                      tableId: id
-                    }
-                  ) : null,
-                  /* @__PURE__ */ jsx12("div", { className: `${classBase7}-body`, children: data.map((data2) => /* @__PURE__ */ jsx12(
-                    Row2,
-                    {
-                      columnMap,
-                      columns,
-                      highlighted: highlightedIndex === data2[IDX3],
-                      onClick: onRowClick,
-                      onDataEdited,
-                      row: data2,
-                      offset: rowHeight * data2[IDX3] + viewportMeasurements.totalHeaderHeight,
-                      onToggleGroup,
-                      zebraStripes: tableAttributes.zebraStripes
-                    },
-                    data2[RENDER_IDX]
-                  )) })
-                ]
-              }
-            )
-          }
-        ),
-        draggableRow
-      ]
-    }
-  );
-};
-var Table = forwardRef(function TableNext({
-  Row: Row2,
-  allowDragDrop,
-  availableColumns,
-  className: classNameProp,
-  config,
-  dataSource,
-  disableFocus,
-  highlightedIndex,
-  id,
-  navigationStyle,
-  onAvailableColumnsChange,
-  onConfigChange,
-  onDragStart,
-  onDrop,
-  onFeatureInvocation,
-  onHighlight,
-  onRowClick,
-  onSelect,
-  onSelectionChange,
-  renderBufferSize,
-  rowHeight,
-  selectionModel,
-  showColumnHeaders,
-  headerHeight,
-  style: styleProp,
-  ...htmlAttributes
-}, forwardedRef) {
-  const containerRef = useRef15(null);
-  const [size, setSize] = useState7();
-  if (config === void 0) {
-    throw Error(
-      "vuu Table requires config prop. Minimum config is list of Column Descriptors"
-    );
-  }
-  if (dataSource === void 0) {
-    throw Error("vuu Table requires dataSource prop");
-  }
-  return /* @__PURE__ */ jsx12(
-    MeasuredContainer,
-    {
-      ...htmlAttributes,
-      className: cx9(classBase7, classNameProp),
-      id,
-      onResize: setSize,
-      ref: useForkRef(containerRef, forwardedRef),
-      children: size ? /* @__PURE__ */ jsx12(
-        TableCore,
-        {
-          Row: Row2,
-          allowDragDrop,
-          availableColumns,
-          config,
-          containerRef,
-          dataSource,
-          disableFocus,
-          headerHeight,
-          highlightedIndex,
-          id,
-          navigationStyle,
-          onAvailableColumnsChange,
-          onConfigChange,
-          onDragStart,
-          onDrop,
-          onFeatureInvocation,
-          onHighlight,
-          onRowClick,
-          onSelect,
-          onSelectionChange,
-          renderBufferSize,
-          rowHeight,
-          selectionModel,
-          showColumnHeaders,
-          size
-        }
-      ) : null
-    }
-  );
-});
-
-// src/cell-renderers/checkbox-cell/CheckboxCell.tsx
-import { memo as memo2, useCallback as useCallback21 } from "react";
-import { CheckboxIcon, WarnCommit } from "@vuu-ui/vuu-ui-controls";
-import { Checkbox } from "@salt-ds/core";
-
-// src/cell-renderers/cell-utils.ts
-var dataAndColumnUnchanged = (p, p1) => p.column === p1.column && p.column.valueFormatter(p.row[p.columnMap[p.column.name]]) === p1.column.valueFormatter(p1.row[p1.columnMap[p1.column.name]]);
-
-// src/cell-renderers/checkbox-cell/CheckboxCell.tsx
-import { dispatchCustomEvent, registerComponent } from "@vuu-ui/vuu-utils";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var CheckboxCell = memo2(
-  ({ column, columnMap, onCommit = WarnCommit, row }) => {
-    const dataIdx = columnMap[column.name];
-    const isChecked = row[dataIdx];
-    const handleCommit = useCallback21(
-      (value) => async (evt) => {
-        const res = await onCommit(value);
-        if (res === true) {
-          dispatchCustomEvent(evt.target, "vuu-commit");
-        }
-        return res;
-      },
-      [onCommit]
-    );
-    return column.editable ? /* @__PURE__ */ jsx13(Checkbox, { checked: isChecked, onClick: handleCommit(!isChecked) }) : /* @__PURE__ */ jsx13(CheckboxIcon, { checked: isChecked, disabled: true });
-  },
-  dataAndColumnUnchanged
-);
-CheckboxCell.displayName = "CheckboxCell";
-registerComponent("checkbox-cell", CheckboxCell, "cell-renderer", {
-  serverDataType: "boolean"
-});
-
-// src/cell-renderers/input-cell/InputCell.tsx
-import { registerComponent as registerComponent2 } from "@vuu-ui/vuu-utils";
-import { Input } from "@salt-ds/core";
-import { useEditableText } from "@vuu-ui/vuu-ui-controls";
-import cx10 from "clsx";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var classBase8 = "vuuTableInputCell";
-var WarnCommit2 = () => {
-  console.warn(
-    "onCommit handler has not been provided to InputCell cell renderer"
-  );
-  return Promise.resolve(true);
-};
-var InputCell = ({
-  column,
-  columnMap,
-  onCommit = WarnCommit2,
-  row
-}) => {
-  const dataIdx = columnMap[column.name];
-  const { align = "left", clientSideEditValidationCheck } = column;
-  const { warningMessage, ...editProps } = useEditableText({
-    initialValue: row[dataIdx],
-    onCommit,
-    clientSideEditValidationCheck
-  });
-  const endAdornment = warningMessage && align === "left" ? /* @__PURE__ */ jsx14("span", { className: `${classBase8}-icon`, "data-icon": "error" }) : void 0;
-  const startAdornment = warningMessage && align === "right" ? /* @__PURE__ */ jsx14("span", { className: `${classBase8}-icon`, "data-icon": "error" }) : void 0;
-  return /* @__PURE__ */ jsx14(
-    Input,
-    {
-      ...editProps,
-      className: cx10(classBase8, {
-        [`${classBase8}-error`]: warningMessage !== void 0
-      }),
-      endAdornment,
-      startAdornment
-    }
-  );
-};
-registerComponent2("input-cell", InputCell, "cell-renderer", {});
-
-// src/cell-renderers/toggle-cell/ToggleCell.tsx
-import { WarnCommit as WarnCommit3 } from "@vuu-ui/vuu-ui-controls";
-import {
-  dispatchCustomEvent as dispatchCustomEvent2,
-  isTypeDescriptor,
-  isValueListRenderer,
-  registerComponent as registerComponent3
-} from "@vuu-ui/vuu-utils";
-import cx11 from "clsx";
-import { memo as memo3, useCallback as useCallback22 } from "react";
-import { CycleStateButton } from "@vuu-ui/vuu-ui-controls";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var classBase9 = "vuuTableToggleCell";
-var getValueList = ({ name, type }) => {
-  if (isTypeDescriptor(type) && isValueListRenderer(type.renderer)) {
-    return type.renderer.values;
-  } else {
-    throw Error(
-      `useLookupValues column ${name} has not been configured with a values list`
-    );
-  }
-};
-var ToggleCell = memo3(
-  function ToggleCell2({
-    column,
-    columnMap,
-    onCommit = WarnCommit3,
-    row
-  }) {
-    const values = getValueList(column);
-    const dataIdx = columnMap[column.name];
-    const value = row[dataIdx];
-    const handleCommit = useCallback22(
-      (evt, value2) => {
-        return onCommit(value2).then((response) => {
-          if (response === true) {
-            dispatchCustomEvent2(evt.target, "vuu-commit");
-          }
-          return response;
-        });
-      },
-      [onCommit]
-    );
-    return /* @__PURE__ */ jsx15(
-      CycleStateButton,
-      {
-        className: cx11(classBase9, `${classBase9}-${column.name}`),
-        onCommit: handleCommit,
-        value,
-        values,
-        variant: "cta",
-        children: value
-      }
-    );
-  },
-  dataAndColumnUnchanged
-);
-registerComponent3("toggle-cell", ToggleCell, "cell-renderer", {});
-
-// src/useControlledTableNavigation.ts
-import { useStateRef } from "@vuu-ui/vuu-ui-controls";
-import { dispatchMouseEvent as dispatchMouseEvent2 } from "@vuu-ui/vuu-utils";
-import { useCallback as useCallback23, useRef as useRef16 } from "react";
-var useControlledTableNavigation = (initialValue, rowCount) => {
-  const tableRef = useRef16(null);
-  const [highlightedIndexRef, setHighlightedIndex] = useStateRef(initialValue);
-  const handleKeyDown = useCallback23(
-    (e) => {
-      var _a;
-      if (e.key === "ArrowDown") {
-        setHighlightedIndex((index = -1) => Math.min(rowCount - 1, index + 1));
-      } else if (e.key === "ArrowUp") {
-        setHighlightedIndex((index = -1) => Math.max(0, index - 1));
-      } else if (e.key === "Enter" || e.key === " ") {
-        const { current: rowIdx } = highlightedIndexRef;
-        const rowEl = (_a = tableRef.current) == null ? void 0 : _a.querySelector(
-          `[aria-rowindex="${rowIdx}"]`
-        );
-        if (rowEl) {
-          dispatchMouseEvent2(rowEl, "click");
-        }
-      }
-    },
-    [highlightedIndexRef, rowCount, setHighlightedIndex]
-  );
-  const handleHighlight = useCallback23(
-    (idx) => {
-      setHighlightedIndex(idx);
-    },
-    [setHighlightedIndex]
-  );
-  return {
-    highlightedIndexRef,
-    onHighlight: handleHighlight,
-    onKeyDown: handleKeyDown,
-    tableRef
-  };
-};
-export {
-  CheckboxCell,
-  GroupHeaderCellNext,
-  HeaderCell,
-  InputCell,
-  Table,
-  TableCell,
-  TableGroupCell,
-  ToggleCell,
-  dataAndColumnUnchanged,
-  isShowColumnSettings,
-  isShowTableSettings,
-  updateTableConfig,
-  useControlledTableNavigation,
-  useTableModel,
-  useTableViewport
-};
+import{OverflowContainer as wn}from"@vuu-ui/vuu-layout";import{useLayoutEffectSkipFirst as Rn}from"@vuu-ui/vuu-utils";import yn from"clsx";import{useCallback as Dn,useRef as Mn,useState as Hn}from"react";import sn from"clsx";import{useCallback as un}from"react";import{jsx as cn,jsxs as mn}from"react/jsx-runtime";var Co="vuuColumnHeaderPill",re=({children:e,className:o,column:t,onRemove:r,removable:n,...l})=>{if(n&&typeof r!="function")throw Error("ColumnHeaderPill onRemove prop must be provided if Pill is removable");let a=un(i=>{i.preventDefault(),i.stopPropagation(),r==null||r(t)},[t,r]);return mn("div",{...l,className:sn(Co,o),children:[e,n?cn("span",{className:`${Co}-removeButton`,role:"button","data-icon":"cross",onClick:a}):null]})};import{jsx as Se,jsxs as dn}from"react/jsx-runtime";var vo=({column:e,...o})=>{let{name:t,sorted:r}=e,n=typeof r=="number"?r<0?"arrow-down":"arrow-up":r==="A"?"arrow-up":r==="D"?"arrow-down":void 0;return dn(re,{...o,column:e,children:[Se("span",{className:"vuuGroupColumnPill-label",children:t}),n!==void 0?Se("span",{"data-icon":n}):null,typeof r=="number"?Se("span",{className:"vuuSortPosition",children:Math.abs(r)}):null]})};import{jsx as ho,jsxs as pn}from"react/jsx-runtime";var xo=({column:e})=>{if(!e.sorted)return null;let o=typeof e.sorted=="number"?e.sorted<0?"arrow-down":"arrow-up":e.sorted==="A"?"arrow-up":"arrow-down";return pn(re,{column:e,children:[ho("span",{"data-icon":o}),typeof e.sorted=="number"?ho("span",{className:"vuuSortPosition",children:Math.abs(e.sorted)}):null]})};import{useCallback as ke,useRef as bn}from"react";import{jsx as gn}from"react/jsx-runtime";var To=()=>{},fn="vuuColumnResizerNext",fe=({onDrag:e,onDragEnd:o=To,onDragStart:t=To})=>{let r=bn(0),n=ke(i=>{i.stopPropagation&&i.stopPropagation(),i.preventDefault&&i.preventDefault();let s=Math.round(i.clientX),u=s-r.current;r.current=s,u!==0&&e(i,u)},[e]),l=ke(i=>{window.removeEventListener("mouseup",l),window.removeEventListener("mousemove",n),o(i)},[o,n]),a=ke(i=>{t(i),r.current=Math.round(i.clientX),window.addEventListener("mouseup",l),window.addEventListener("mousemove",n),i.stopPropagation&&i.stopPropagation(),i.preventDefault&&i.preventDefault()},[t,n,l]);return gn("div",{className:fn,onMouseDown:a})};import{useCallback as Le,useRef as Cn,useState as vn}from"react";var ge=({column:e,onResize:o,rootRef:t})=>{let r=Cn(0),[n,l]=vn(!1),{name:a}=e,i=Le(()=>{if(o&&t.current){let{width:c}=t.current.getBoundingClientRect();r.current=Math.round(c),l(!0),o==null||o("begin",a)}},[a,o,t]),s=Le((c,m)=>{if(t.current&&o){let{width:f}=t.current.getBoundingClientRect(),b=Math.round(f)+m;b!==r.current&&b>0&&(o("resize",a,b),r.current=b)}},[a,o,t]),u=Le(()=>{o&&(o("end",a,r.current),setTimeout(()=>{l(!1)},80))},[a,o]);return{isResizing:n,onDrag:s,onDragStart:i,onDragEnd:u}};import{getColumnStyle as hn}from"@vuu-ui/vuu-utils";import xn from"clsx";import{useMemo as Tn}from"react";var J=(e,o,t)=>Tn(()=>{let r=xn(o,{vuuPinFloating:e.pin==="floating",vuuPinLeft:e.pin==="left",vuuPinRight:e.pin==="right",vuuEndPin:t&&e.endPin,[`${o}-editable`]:e.editable,[`${o}-right`]:e.align==="right"}),n=hn(e);return{className:r,style:n}},[e,o,t]);import{jsx as Ie,jsxs as Sn}from"react/jsx-runtime";import{createElement as En}from"react";var Ae="vuuTableGroupHeaderCell",Pn=(e,o)=>e===o?e:o,ze=({column:e,className:o,onMoveColumn:t,onRemoveColumn:r,onResize:n,...l})=>{let a=Mn(null),{isResizing:i,...s}=ge({column:e,onResize:n,rootRef:a}),[u,c]=Hn(e.columns),{className:m,style:f}=J(e,Ae,!0),b=u.length>1?{removable:!0,onRemove:r}:void 0,x=Dn((T,d)=>{c(v=>{let R=v.slice(),[C]=R.splice(T,1);if(d===-1){let M=R.concat(C);return t==null||t(M),M}else return R.splice(d,0,C),t==null||t(R),R})},[t]);return Rn(()=>{c(T=>Pn(T,e.columns))},[e.columns]),Sn("div",{...l,className:yn(m,o,{[`${Ae}-pending`]:e.groupConfirmed===!1}),ref:a,role:"columnheader",style:f,children:[Ie(wn,{allowDragDrop:!0,className:`${Ae}-inner`,height:24,onMoveItem:x,overflowPosition:"start",children:u.map(T=>En(vo,{...b,column:T,key:T.key}))}),Ie(re,{column:e,removable:!0,onRemove:r}),e.resizeable!==!1?Ie(fe,{...s}):null]})};import Vn from"clsx";import{useCallback as Fn,useRef as Kn}from"react";import{useContextMenu as kn}from"@vuu-ui/vuu-popups";import Ln from"clsx";import{useCallback as wo,useRef as An,useState as In}from"react";import{jsx as Nn}from"react/jsx-runtime";var zn=e=>{if(e){let{bottom:o,left:t}=e.getBoundingClientRect();return{x:t,y:o+6}}},Ro=({className:e,column:o,...t})=>{let r=An(null),[n,l]=In(!1),[a]=kn(),i=wo(()=>{l(!1)},[]),s=wo(u=>{l(!0),a(u,"column-menu",{column:o,ContextMenuProps:{onClose:i,position:zn(r.current)}})},[o,i,a]);return Nn("span",{...t,className:Ln("vuuTable-columnMenu",e,{"vuuTable-columnMenu-open":n}),"data-icon":"more-vert",onClick:s,ref:r})};import{jsx as le,jsxs as Gn}from"react/jsx-runtime";var Ce="vuuTableHeaderCell",yo=({className:e,column:o,onClick:t,onResize:r,...n})=>{var R;let{HeaderCellContentRenderer:l,HeaderCellLabelRenderer:a}=o,i=Kn(null),{isResizing:s,...u}=ge({column:o,onResize:r,rootRef:i}),c=Fn(C=>{!s&&(t==null||t(C))},[s,t]),{className:m,style:f}=J(o,Ce,!0),b=le(Ro,{column:o}),x=a?le(a,{className:`${Ce}-label`,column:o}):le("div",{className:`${Ce}-label`,children:(R=o.label)!=null?R:o.name}),T=l?[le(l,{column:o},"content")]:[],d=le(xo,{column:o}),v=o.align==="right"?[d,x].concat(T).concat(b):[b,x,d].concat(T);return Gn("div",{...n,className:Vn(m,e,{[`${Ce}-resizing`]:s}),onClick:c,ref:i,role:"columnheader",style:f,children:[...v,o.resizeable!==!1?le(fe,{...u}):null]})};import{MeasuredContainer as li}from"@vuu-ui/vuu-layout";import{ContextMenuProvider as ii}from"@vuu-ui/vuu-popups";import{metadataKeys as ai,useId as si}from"@vuu-ui/vuu-utils";import{useForkRef as ui}from"@salt-ds/core";import Pt from"clsx";import{forwardRef as ci,useRef as mi,useState as di}from"react";import{isGroupColumn as Eo,isJsonColumn as Jn,isJsonGroup as Yn,metadataKeys as Zn,isNotHidden as jn,RowSelected as qn}from"@vuu-ui/vuu-utils";import er from"clsx";import{memo as or,useCallback as So}from"react";import{isNumericColumn as $n}from"@vuu-ui/vuu-utils";import{useCallback as Do}from"react";import{jsx as Mo}from"react/jsx-runtime";var Bn="vuuTableCell",Ho=({column:e,columnMap:o,onClick:t,onDataEdited:r,row:n})=>{let{className:l,style:a}=J(e,Bn),{CellRenderer:i,name:s,valueFormatter:u}=e,c=o[s],m=Do(b=>{if(r){let x=b;return $n(e)&&typeof b=="string"&&(x=e.serverDataType==="double"?parseFloat(b):parseInt(b)),r==null?void 0:r(n,s,x)}else throw Error("TableCell onDataEdited prop not supplied for an editable cell")},[e,s,r,n]),f=Do(b=>{t==null||t(b,e)},[e,t]);return Mo("div",{className:l,onClick:t?f:void 0,role:"cell",style:a,children:i?Mo(i,{column:e,columnMap:o,onCommit:m,row:n}):u(n[c])})};import{getGroupValueAndOffset as On,metadataKeys as Wn}from"@vuu-ui/vuu-utils";import{useCallback as Un}from"react";import _n from"clsx";import{jsx as Ve,jsxs as Qn}from"react/jsx-runtime";var{IS_LEAF:Xn}=Wn,Ne="vuuTableGroupCell",Po=({column:e,onClick:o,row:t})=>{let{columns:r}=e,[n,l]=On(r,t),{className:a,style:i}=J(e,Ne),s=Un(m=>{o==null||o(m,e)},[e,o]),u=t[Xn],c=Array(l).fill(0).map((m,f)=>Ve("span",{className:`${Ne}-spacer`},f));return Qn("div",{className:_n(a,"vuuTableCell"),role:"cell",style:i,onClick:u?void 0:s,children:[c,u?null:Ve("span",{className:`${Ne}-toggle`,"data-icon":"triangle-right"}),Ve("span",{children:n})]})};import{jsx as Fe}from"react/jsx-runtime";import{createElement as lr}from"react";var{IDX:tr,IS_EXPANDED:nr,SELECTED:rr}=Zn,X="vuuTableRow",Ke=or(({className:e,columnMap:o,columns:t,highlighted:r,row:n,offset:l,onClick:a,onDataEdited:i,onToggleGroup:s,zebraStripes:u=!1,...c})=>{let{[tr]:m,[nr]:f,[rr]:b}=n,x=So(y=>{let D=y.shiftKey,E=y.ctrlKey||y.metaKey;a==null||a(n,D,E)},[a,n]),{True:T,First:d,Last:v}=qn,R=er(X,e,{[`${X}-even`]:u&&m%2===0,[`${X}-expanded`]:f,[`${X}-highlighted`]:r,[`${X}-selected`]:b&T,[`${X}-selectedStart`]:b&d,[`${X}-selectedEnd`]:b&v}),C={transform:`translate3d(0px, ${l}px, 0px)`},M=So((y,D)=>{(Eo(D)||Yn(D,n))&&(y.stopPropagation(),s==null||s(n,D))},[s,n]);return lr("div",{...c,"aria-rowindex":n[0]+1,key:`row-${n[0]}`,role:"row",className:R,onClick:x,style:C},Fe("span",{className:`${X}-selectionDecorator vuuStickyLeft`}),t.filter(jn).map(y=>{let D=Eo(y),E=Jn(y);return Fe(D?Po:Ho,{column:y,columnMap:o,onClick:D||E?M:void 0,onDataEdited:i,row:n},y.key)}),Fe("span",{className:`${X}-selectionDecorator vuuStickyRight`}))});Ke.displayName="Row";import{useDragDropNext as $l}from"@vuu-ui/vuu-ui-controls";import{applySort as Bl,buildColumnMap as Ol,getIndexFromRowElement as Wl,isGroupColumn as Ul,isJsonGroup as _l,isValidNumber as ft,metadataKeys as Xl,updateColumn as gt,useLayoutEffectSkipFirst as Ct}from"@vuu-ui/vuu-utils";import{useCallback as L,useEffect as Ql,useMemo as je,useState as vt}from"react";import{isNumericColumn as ir}from"@vuu-ui/vuu-utils";var ko=e=>(o,t)=>{let r=[];return e===void 0||(o==="header"||o==="column-menu")&&(r.push(...ar(t,e)),r.push(...cr(t,e)),r.push(...sr(t,e)),r.push(...ur(t)),r.push({action:"column-settings",icon:"cog",label:"Column Settings",options:t}),r.push({action:"table-settings",icon:"cog",label:"DataGrid Settings",options:t})),r};function ar(e,{sort:{sortDefs:o}}){let{column:t}=e,r=[];if(t===void 0)return r;let n=o.length>0;return t.sorted==="A"?r.push({label:"Reverse Sort (DSC)",action:"sort-dsc",options:e}):t.sorted==="D"?r.push({label:"Reverse Sort (ASC)",action:"sort-asc",options:e}):typeof t.sorted=="number"?(t.sorted>0?r.push({label:"Reverse Sort (DSC)",action:"sort-add-dsc",options:e}):r.push({label:"Reverse Sort (ASC)",action:"sort-add-asc",options:e}),n&&Math.abs(t.sorted)<o.length&&r.push({label:"Remove from sort",action:"sort-remove",options:e}),r.push({label:"New Sort",children:[{label:"Ascending",action:"sort-asc",options:e},{label:"Descending",action:"sort-dsc",options:e}]})):n?(r.push({label:"Add to sort",children:[{label:"Ascending",action:"sort-add-asc",options:e},{label:"Descending",action:"sort-add-dsc",options:e}]}),r.push({label:"New Sort",children:[{label:"Ascending",action:"sort-asc",options:e},{label:"Descending",action:"sort-dsc",options:e}]})):r.push({label:"Sort",children:[{label:"Ascending",action:"sort-asc",options:e},{label:"Descending",action:"sort-dsc",options:e}]}),r}function sr(e,o){let{column:t}=e;if(t===void 0||o.groupBy.length===0)return[];let{name:r,label:n=r}=t;return[{label:`Aggregate ${n}`,children:[{label:"Count",action:"agg-count",options:e},{label:"Distinct",action:"agg-distinct",options:e}].concat(ir(t)?[{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 Oe=(e,o)=>({label:`Pin ${o}`,action:`column-pin-${o}`,options:e}),Ge=e=>Oe(e,"left"),$e=e=>Oe(e,"floating"),Be=e=>Oe(e,"right");function ur(e){let{column:o}=e;if(o===void 0)return[];let{pin:t}=o,r=[{label:"Hide column",action:"column-hide",options:e},{label:"Remove column",action:"column-remove",options:e}];return t===void 0?r.push({label:"Pin column",children:[Ge(e),$e(e),Be(e)]}):t==="left"?r.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[$e(e),Be(e)]}):t==="right"?r.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[Ge(e),$e(e)]}):t==="floating"&&r.push({label:"Unpin column",action:"column-unpin",options:e},{label:"Pin column",children:[Ge(e),Be(e)]}),r}function cr(e,{groupBy:o}){let{column:t}=e,r=[];if(t===void 0)return r;let{name:n,label:l=n}=t;return o.length===0?r.push({label:`Group by ${l}`,action:"group",options:e}):r.push({label:`Add ${l} to group by`,action:"group-add",options:e}),r}import{removeColumnFromFilter as mr}from"@vuu-ui/vuu-utils";import{addGroupColumn as Lo,addSortColumn as Ao,AggregationType as dr,setAggregations as ie,setSortColumn as Io}from"@vuu-ui/vuu-utils";var pr=(e,o)=>{if(e.filterStruct&&o){let[t,r]=mr(o,e.filterStruct);return{filter:r,filterStruct:t}}else return e},{Average:br,Count:fr,Distinct:gr,High:Cr,Low:vr,Sum:hr}=dr,zo=({dataSource:e,onPersistentColumnOperation:o})=>r=>{let n=r.options;if(n.column&&e){let{column:l}=n;switch(r.menuId){case"sort-asc":return e.sort=Io(e.sort,l,"A"),!0;case"sort-dsc":return e.sort=Io(e.sort,l,"D"),!0;case"sort-add-asc":return e.sort=Ao(e.sort,l,"A"),!0;case"sort-add-dsc":return e.sort=Ao(e.sort,l,"D"),!0;case"group":return e.groupBy=Lo(e.groupBy,l),!0;case"group-add":return e.groupBy=Lo(e.groupBy,l),!0;case"column-hide":return o({type:"hideColumns",columns:[l]}),!0;case"column-remove":return e.columns=e.columns.filter(a=>a!==l.name),!0;case"filter-remove-column":return e.filter=pr(e.filter,l),!0;case"remove-filters":return e.filter={filter:""},!0;case"agg-avg":return e.aggregations=ie(e.aggregations,l,br),!0;case"agg-high":return e.aggregations=ie(e.aggregations,l,Cr),!0;case"agg-low":return e.aggregations=ie(e.aggregations,l,vr),!0;case"agg-count":return e.aggregations=ie(e.aggregations,l,fr),!0;case"agg-distinct":return e.aggregations=ie(e.aggregations,l,gr),!0;case"agg-sum":return e.aggregations=ie(e.aggregations,l,hr),!0;case"column-pin-floating":return o({type:"pinColumn",column:l,pin:"floating"}),!0;case"column-pin-left":return o({type:"pinColumn",column:l,pin:"left"}),!0;case"column-pin-right":return o({type:"pinColumn",column:l,pin:"right"}),!0;case"column-unpin":return o({type:"pinColumn",column:l,pin:void 0}),!0;case"column-settings":return o({type:"columnSettings",column:l}),!0;case"table-settings":return o({type:"tableSettings"}),!0;default:}}return!1};var No=(e,o)=>{switch(o.type){case"col-size":return{...e,columns:e.columns.map(t=>t.name===o.column.name?{...t,width:o.width}:t)};case"column-prop":return{...e,columns:e.columns.map(t=>t.name===o.column.name?{...t,[o.property]:o.value}:t)};default:return e}};import{isCharacterKey as Rr}from"@vuu-ui/vuu-utils";import{useCallback as j}from"react";var We=e=>`.vuuTable-col-headers .vuuTableHeaderCell:nth-child(${e})`,Ue=(e,o)=>`.vuuTable-body > [aria-rowindex='${e}'] > [role='cell']:nth-child(${o+1})`,Vo=(e,[o,t])=>{var l;let r=o===-1?We(t):Ue(o,t),n=(l=e.current)==null?void 0:l.querySelector(r);return xr(n)&&n.querySelector("button")||n},xr=e=>e.classList.contains("vuuTableCell-editable"),Fo=e=>e.querySelector(".vuuTableInputCell")!==null;function Tr(e){if(e){let o=e.ariaRowIndex;if(o!==null)return parseInt(o,10)-1}return-1}var wr=e=>e.closest('[role="row"]'),Ko=e=>Tr(wr(e));var Go=({navigate:e})=>{let o=j(()=>{e()},[e]),t=j(s=>{let u=s.target,c=u.matches("input")?u:u.querySelector("input");c&&(c.focus(),c.select())},[]),r=j(s=>{let c=s.target.querySelector("input");c&&(c.focus(),c.select())},[]),n=j(s=>{let u=s.target;Fo(u)&&(Rr(s.key)?t(s):s.key==="Enter"&&r(s))},[t,r]),l=j(s=>{let u=s.target;(u.matches("input")||u.querySelector("input"))&&(t(s),s.stopPropagation())},[t]),a=j(s=>{s.target.removeEventListener("vuu-commit",o,!0)},[o]),i=j(s=>{s.target.addEventListener("vuu-commit",o,!0)},[o]);return{onBlur:a,onDoubleClick:l,onFocus:i,onKeyDown:n}};import{getFullRange as Xe,NULL_RANGE as $o}from"@vuu-ui/vuu-utils";import{useCallback as he,useEffect as Bo,useMemo as Hr,useRef as xe,useState as Pr}from"react";import{isRowSelectedLast as yr,metadataKeys as Dr,WindowRange as Mr}from"@vuu-ui/vuu-utils";var{SELECTED:_e}=Dr,ve=class{constructor({from:o,to:t}){this.rowCount=0;this.setRowCount=o=>{o<this.data.length&&(this.data.length=o),this.rowCount=o};this.range=new Mr(o,t),this.data=new Array(Math.max(0,t-o)),this.rowCount=0}add(o){let[t]=o;if(this.isWithinRange(t)){let r=t-this.range.from;if(this.data[r]=o,o[_e]){let n=this.data[r-1];yr(n)&&(this.data[r-1]=n.slice(),this.data[r-1][_e]-=4)}}}getAtIndex(o){return this.range.isWithin(o)&&this.data[o-this.range.from]!=null?this.data[o-this.range.from]:void 0}isWithinRange(o){return this.range.isWithin(o)}setRange({from:o,to:t}){if(o!==this.range.from||t!==this.range.to){let[r,n]=this.range.overlap(o,t),l=new Array(Math.max(0,t-o));for(let a=r;a<n;a++){let i=this.getAtIndex(a);if(i){let s=a-o;l[s]=i}}this.data=l,this.range.from=o,this.range.to=t}}getSelectedRows(){return this.data.filter(o=>o[_e]!==0)}};var Er=e=>e.type==="vuu-link-created"||e.type==="vuu-link-removed",Oo=({dataSource:e,onFeatureInvocation:o,onSizeChange:t,onSubscribed:r,range:n=$o,renderBufferSize:l=0})=>{let[,a]=Pr(null),i=xe([]),s=xe(!0),u=xe(!1),c=xe($o),m=Hr(()=>new ve(Xe(n,l)),[]),f=he(d=>{for(let v of d)m.add(v);i.current=m.data,s.current?a({}):console.log("ignore update as we're not mounted")},[m]),b=he(d=>{d.type==="subscribed"?r==null||r(d):d.type==="viewport-update"?(typeof d.size=="number"&&(t==null||t(d.size),m.setRowCount(d.size)),d.rows?f(d.rows):typeof d.size=="number"&&(i.current=m.data,u.current=!0)):Er(d)?o==null||o(d):console.log(`useDataSource unexpected message ${d.type}`)},[m,o,t,r,f]),x=he(()=>m.getSelectedRows(),[m]);Bo(()=>{var d;return s.current=!0,(d=e.resume)==null||d.call(e),()=>{var v;s.current=!1,(v=e.suspend)==null||v.call(e)}},[e]),Bo(()=>{var d;e.status==="disabled"?(d=e.enable)==null||d.call(e,b):e==null||e.subscribe({range:Xe(n,l)},b)},[e,b,n,l]);let T=he(d=>{let v=Xe(d,l);m.setRange(v),e.range=c.current=v,e.emit("range",d)},[e,m,l]);return{data:i.current,dataRef:i,getSelectedRows:x,range:c.current,setRange:T}};import{useMemo as Sr,useRef as kr}from"react";var Wo=e=>{let o=kr(e);return Sr(()=>o.current,[])};import{useControlled as Lr}from"@salt-ds/core";import{useCallback as F,useEffect as Uo,useRef as Te}from"react";var Qo=new Set(["Home","End","PageUp","PageDown","ArrowDown","ArrowUp"]),Je=new Set(Qo);Je.add("ArrowLeft");Je.add("ArrowRight");var Ar=(e,o)=>{switch(o){case"cell":return Je.has(e);case"row":return Qo.has(e);default:return!1}},Ir=["Home","End","PageUp","PageDown"],_o=e=>Ir.includes(e),zr=[-1,-1],Qe=[void 0,void 0],Jo=(e,o=e.closest(".vuuTable-contentContainer"))=>{if(o){let t=o==null?void 0:o.getBoundingClientRect(),r=e.getBoundingClientRect();if(r)return r.bottom>t.bottom?["down",r.bottom-t.bottom]:r.top<t.top?["up",r.top-t.top]:Qe;throw Error("Whats going on, row not found")}else throw Error("Whats going on, scrollbar container not found")},Nr=e=>{var t;let o=e.closest(".vuuTable-contentContainer");if(o){let r=e.closest(".vuuTableRow");if(r){let n=Jo(r,o);if(n!==Qe)return n;let l=o==null?void 0:o.getBoundingClientRect(),a=(t=e.closest(".vuuTableCell"))==null?void 0:t.getBoundingClientRect();if(a){if(a.right>l.right)return["right",a.right+6-l.right];if(a.left<l.left)return["left",a.left-l.left]}else throw Error("Whats going on, cell not found")}}return Qe};function Xo(e,[o,t],r,n){return e==="ArrowUp"?o>-1?[o-1,t]:[o,t]:e==="ArrowDown"?o===-1?[0,t]:o===n-1?[o,t]:[o+1,t]:e==="ArrowRight"?t<r?[o,t+1]:[o,t]:e==="ArrowLeft"?t>1?[o,t-1]:[o,t]:[o,t]}var Yo=({columnCount:e=0,containerRef:o,disableFocus:t=!1,defaultHighlightedIndex:r,disableHighlightOnFocus:n,highlightedIndex:l,navigationStyle:a,requestScroll:i,onHighlight:s,rowCount:u=0,viewportRowCount:c})=>{var O;let m=Te([-1,-1]),f=Te(),b=Te([-1,0]),x=Te(),[T,d]=Lr({controlled:l,default:r,name:"UseKeyboardNavigation"});x.current=T;let v=F((g,h=!1)=>{s==null||s(g),d(g)},[s,d]),R=g=>g==null?void 0:g.closest("[role='columnHeader'],[role='cell']"),C=g=>{var h,w;if(g.role==="columnHeader")return[-1,parseInt((h=g.dataset.idx)!=null?h:"-1",10)];{let k=g.closest("[role='row']");if(k){let I=parseInt((w=k.ariaRowIndex)!=null?w:"-1",10),ue=Array.from(k.childNodes).indexOf(g);return[I,ue]}}return zr},M=F(g=>{var h;if(o.current){let w=Vo(o,g);if(w){w!==f.current&&((h=f.current)==null||h.removeAttribute("tabindex"),f.current=w,w.setAttribute("tabindex","0"));let[k,I]=Nr(w);k&&I&&(i==null||i({type:"scroll-distance",distance:I,direction:k})),console.log("activeCell focus"),w.focus({preventScroll:!0})}}},[o,i]),y=F((g,h,w=!1)=>{let k=[g,h];b.current=k,a==="row"?d(g):M(k),w&&(m.current=k)},[M,a,d]),D=F((g,[h,w])=>new Promise(k=>{let I=h;switch(g){case"PageDown":I=Math.min(u-1,h+c),i==null||i({type:"scroll-page",direction:"down"});break;case"PageUp":I=Math.max(0,h-c),i==null||i({type:"scroll-page",direction:"up"});break;case"Home":I=0,i==null||i({type:"scroll-end",direction:"home"});break;case"End":I=u-1,i==null||i({type:"scroll-end",direction:"end"});break}setTimeout(()=>{k([I,w])},90)}),[i,u,c]),E=F(()=>{var g;if(n!==!0&&(g=o.current)!=null&&g.contains(document.activeElement)){let h=R(document.activeElement);h&&(m.current=C(h),a==="row"&&d(m.current[0]))}},[n,o,a,d]),S=F(async g=>{let[h,w]=_o(g)?await D(g,b.current):Xo(g,b.current,e,u),[k,I]=b.current;(h!==k||w!==I)&&y(h,w,!0)},[e,D,u,y]),N=F(g=>{let{current:h}=o,w=h==null?void 0:h.querySelector(`[aria-rowindex="${g}"]`);if(w){let[k,I]=Jo(w);k&&I&&(i==null||i({type:"scroll-distance",distance:I,direction:k}))}},[o,i]),W=F(async g=>{let{current:h}=x,[w]=_o(g)?await D(g,[h!=null?h:-1,0]):Xo(g,[h!=null?h:-1,0],e,u);w!==h&&(v(w),N(w))},[e,D,u,N,v]);Uo(()=>{l!==void 0&&l!==-1&&N(l)},[l,N]);let K=F(g=>{u>0&&Ar(g.key,a)&&(g.preventDefault(),g.stopPropagation(),a==="row"?W(g.key):S(g.key))},[u,a,W,S]),G=F(g=>{let h=g.target,w=R(h);if(w){let[k,I]=C(w);y(k,I)}},[y]),H=F(()=>{v(-1)},[v]),U=F(g=>{let h=Ko(g.target);h!==-1&&h!==x.current&&v(h)},[v]),se=F(()=>{S("ArrowDown")},[S]),A=((O=o.current)==null?void 0:O.firstChild)!=null;return Uo(()=>{if(A&&f.current===void 0&&!t){let{current:g}=o,h=(g==null?void 0:g.querySelector(We(0)))||(g==null?void 0:g.querySelector(Ue(0,0)));h&&(h.setAttribute("tabindex","0"),f.current=h)}},[o,t,A]),{highlightedIndexRef:x,navigate:se,onClick:G,onFocus:E,onKeyDown:K,onMouseLeave:a==="row"?H:void 0,onMouseMove:a==="row"?U:void 0}};import{deselectItem as Vr,dispatchMouseEvent as Fr,isRowSelected as Kr,metadataKeys as Gr,selectItem as $r}from"@vuu-ui/vuu-utils";import{useCallback as Ye,useRef as Zo}from"react";var{IDX:Br}=Gr,Or=[],Wr=["Enter"," "],jo=({highlightedIndexRef:e,selectionKeys:o=Wr,selectionModel:t,onSelect:r,onSelectionChange:n})=>{let l=Zo(-1),a=Zo(Or),i=Ye(c=>o.includes(c.key),[o]),s=Ye((c,m,f)=>{let{[Br]:b}=c,{current:x}=l,{current:T}=a,v=(Kr(c)?Vr:$r)(t,T,b,m,f,x);a.current=v,l.current=b,r==null||r(c),n==null||n(v)},[r,n,t]);return{onKeyDown:Ye(c=>{if(i(c)){let{current:m}=e;if(m!==void 0&&m!==-1){let f=c.target.querySelector(`[aria-rowindex="${m}"]`);f&&Fr(f,"click")}}},[e,i]),onRowClick:s}};import{useContextMenu as Ur}from"@vuu-ui/vuu-popups";import{buildColumnMap as _r,getIndexFromRowElement as Xr}from"@vuu-ui/vuu-utils";import{useCallback as Qr}from"react";var Jr=[],qo=({columns:e,data:o,dataSource:t,getSelectedRows:r})=>{let[n]=Ur();return Qr(a=>{let i=a.target,s=i==null?void 0:i.closest("div[role='cell']"),u=i==null?void 0:i.closest("div[role='row']");if(s&&u){let{selectedRowsCount:c}=t,m=_r(e),f=Xr(u),b=Array.from(u.childNodes).indexOf(s),x=o.find(([d])=>d===f),T=e[b];n(a,"grid",{columnMap:m,columnName:T,row:x,selectedRows:c===0?Jr:r(),viewport:t.viewport})}},[e,o,t,r,n])};import{applyFilterToColumns as Yr,applyGroupByToColumns as Zr,applySortToColumns as jr,getCellRenderer as qr,getColumnHeaderContentRenderer as el,getColumnHeaderLabelRenderer as ol,getColumnLabel as tl,getTableHeadings as nl,getValueFormatter as rl,hasValidationRules as ll,isFilteredColumn as il,isGroupColumn as al,isPinned as sl,logger as ul,metadataKeys as cl,replaceColumn as q,sortPinnedColumns as et,stripFilterFromColumns as ml,subscribedOnly as dl}from"@vuu-ui/vuu-utils";import{buildValidationChecker as pl}from"@vuu-ui/vuu-ui-controls";import{useReducer as bl}from"react";var{info:Ze}=ul("useTableModel"),fl=100,gl=cl.count,Cl=({serverDataType:e})=>e===void 0,ot=(e,o)=>{let t=o==null?void 0:o.columns.find(({name:r})=>r===e.name);return t?t.serverDataType:e.serverDataType},vl=["int","long","double"],tt=e=>e===void 0?void 0:vl.includes(e)?"right":"left",nt=e=>e.type==="columnSettings",rt=e=>e.type==="tableSettings",hl=(e,o)=>{switch(Ze==null||Ze(`TableModelReducer ${o.type}`),o.type){case"init":return it(o);case"moveColumn":return Tl(e,o);case"resizeColumn":return yl(e,o);case"setTableSchema":return Dl(e,o);case"hideColumns":return wl(e,o);case"showColumns":return Rl(e,o);case"pinColumn":return Ml(e,o);case"updateColumnProp":return ae(e,o);case"tableConfig":return st(e,o);default:return console.log(`unhandled action ${o.type}`),e}},lt=(e,o)=>{let[t,r]=bl(hl,{tableConfig:e,dataSource:o},it),{columns:n,headings:l,tableConfig:a,...i}=t;return{columns:n,dispatchColumnAction:r,headings:l,tableAttributes:i,tableConfig:a}};function it({dataSource:e,tableConfig:o}){let{columns:t,...r}=o,{config:n,tableSchema:l}=e,a=t.filter(dl(n==null?void 0:n.columns)).map(at(r,l)),i=a.some(sl)?et(a):a,s={columns:i,headings:nl(i),tableConfig:o,...r};if(n){let{columns:u,...c}=n;s=st(s,{type:"tableConfig",...c})}return s}var xl=(e,o)=>o==="uppercase"?e.toUpperCase():o==="capitalize"?e[0].toUpperCase()+e.slice(1).toLowerCase():e,at=(e,o)=>(t,r)=>{let{columnDefaultWidth:n=fl,columnFormatHeader:l}=e,a=ot(t,o),{align:i=tt(a),key:s,name:u,label:c=tl(t),width:m=n,...f}=t,b={...f,align:i,CellRenderer:qr(t),HeaderCellContentRenderer:el(t),HeaderCellLabelRenderer:ol(t),clientSideEditValidationCheck:ll(t.type)?pl(t.type.renderer.rules):void 0,label:xl(c,l),key:s!=null?s:r+gl,name:u,originalIdx:r,serverDataType:a,valueFormatter:rl(t,a),width:m};return al(b)&&(b.columns=b.columns.map(x=>at(e)(x,x.key))),b};function Tl(e,{column:o,moveBy:t}){let{columns:r}=e;if(typeof t=="number"){let n=r.indexOf(o),l=r.slice(),[a]=l.splice(n,1);return l.splice(n+t,0,a),{...e,columns:l}}return e}function wl(e,{columns:o}){return o.some(t=>t.hidden!==!0)?o.reduce((t,r)=>r.hidden!==!0?ae(t,{type:"updateColumnProp",column:r,hidden:!0}):t,e):e}function Rl(e,{columns:o}){return o.some(t=>t.hidden)?o.reduce((t,r)=>r.hidden?ae(t,{type:"updateColumnProp",column:r,hidden:!1}):t,e):e}function yl(e,{column:o,phase:t,width:r}){let n="updateColumnProp",l=t!=="end";switch(t){case"begin":return ae(e,{type:n,column:o,resizing:l});case"end":return ae(e,{type:n,column:o,resizing:l,width:r});case"resize":return ae(e,{type:n,column:o,width:r});default:throw Error(`useTableModel.resizeColumn, invalid resizePhase ${t}`)}}function Dl(e,{tableSchema:o}){let{columns:t}=e;if(t.some(Cl)){let r=t.map(n=>{var a;let l=ot(n,o);return{...n,align:(a=n.align)!=null?a:tt(l),serverDataType:l}});return{...e,columns:r}}else return e}function Ml(e,o){let{columns:t}=e,{column:r,pin:n}=o,l=t.find(a=>a.name===r.name);return l?(t=q(t,{...l,pin:n}),t=et(t),{...e,columns:t}):e}function ae(e,o){let{columns:t,tableConfig:r}=e,{align:n,column:l,hidden:a,label:i,resizing:s,width:u}=o,c=t.find(m=>m.name===l.name);if(c&&((n==="left"||n==="right")&&(t=q(t,{...c,align:n})),typeof i=="string"&&(t=q(t,{...c,label:i})),typeof s=="boolean"&&(t=q(t,{...c,resizing:s})),typeof a=="boolean"&&(t=q(t,{...c,hidden:a})),typeof u=="number")){t=q(t,{...c,width:u});let m=r.columns.find(f=>f.name===l.name);m&&(r={...r,columns:q(r.columns,{...m,width:u})})}return{...e,columns:t,tableConfig:r}}function st(e,{confirmed:o,filter:t,groupBy:r,sort:n}){let l=r!==void 0,a=typeof(t==null?void 0:t.filter)=="string",i=n&&n.sortDefs.length>0,s=e;return l&&(s={...e,columns:Zr(s.columns,r,o)}),i&&(s={...e,columns:jr(s.columns,n)}),a?s={...e,columns:Yr(s.columns,t)}:s.columns.some(il)&&(s={...e,columns:ml(s.columns)}),s}import{useCallback as Y,useRef as de}from"react";var ut=e=>{let{scrollLeft:o,scrollTop:t}=e,{clientHeight:r,clientWidth:n,scrollHeight:l,scrollWidth:a}=e,i=o/(a-n),s=t/(l-r);return[i,s]},ct=({onAttach:e,onDetach:o})=>{let t=de(null);return Y(n=>{if(n)t.current=n,e==null||e(n);else if(t.current){let{current:l}=t;t.current=n,o==null||o(l)}},[e,o])},mt=({maxScrollLeft:e,maxScrollTop:o,onHorizontalScroll:t,onVerticalScroll:r,rowHeight:n,viewportRowCount:l})=>{let a=de(!1),i=de({scrollTop:0,scrollLeft:0}),s=de(null),u=de(null),c=Y(()=>{let{current:C}=u,{current:M}=s,{current:y}=a;if(y)a.current=!1;else if(C&&M){let[D,E]=ut(M),S=Math.round(D*e),N=Math.round(E*o);C.scrollTo({left:S,top:N,behavior:"auto"})}},[e,o]),m=Y(()=>{let{current:C}=u,{current:M}=s,{current:y}=i;if(C&&M){let{scrollLeft:D,scrollTop:E}=C,[S,N]=ut(C);a.current=!0,M.scrollLeft=Math.round(S*e),M.scrollTop=Math.round(N*o),y.scrollTop!==E&&(y.scrollTop=E,r==null||r(E,N)),y.scrollLeft!==D&&(y.scrollLeft=D,t==null||t(D))}},[e,o,t,r]),f=Y(C=>{s.current=C,C.addEventListener("scroll",c,{passive:!0})},[c]),b=Y(C=>{s.current=null,C.removeEventListener("scroll",c)},[c]),x=Y(C=>{u.current=C,C.addEventListener("scroll",m,{passive:!0})},[m]),T=Y(C=>{u.current=null,C.removeEventListener("scroll",m)},[m]),d=ct({onAttach:x,onDetach:T}),v=ct({onAttach:f,onDetach:b}),R=Y(C=>{let{current:M}=u;if(M){let{scrollLeft:y,scrollTop:D}=M;if(a.current=!1,C.type==="scroll-distance"){let E=y,S=D;C.direction==="up"||C.direction==="down"?S=Math.min(Math.max(0,D+C.distance),o):E=Math.min(Math.max(0,y+C.distance),e),M.scrollTo({top:S,left:E,behavior:"smooth"})}else if(C.type==="scroll-page"){let{direction:E}=C,S=l*(E==="down"?n:-n),N=Math.min(Math.max(0,D+S),o);M.scrollTo({top:N,left:y,behavior:"auto"})}else if(C.type==="scroll-end"){let{direction:E}=C,S=E==="end"?o:0;M.scrollTo({top:S,left:M.scrollLeft,behavior:"auto"})}}},[e,o,n,l]);return{scrollbarContainerRef:v,contentContainerRef:d,requestScroll:R}};import{useCallback as Hl,useMemo as we,useRef as Pl}from"react";import{actualRowPositioning as El,virtualRowPositioning as Sl}from"@vuu-ui/vuu-utils";var kl=15e5,Ll={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},Al=e=>{let o=0,t=0,r=0;for(let n of e){let{hidden:l,pin:a,width:i}=n,s=l?0:i;a==="left"?o+=s:a==="right"?t+=s:r+=s}return{pinnedWidthLeft:o+4,pinnedWidthRight:t+4,unpinnedWidth:r}},dt=({columns:e,headerHeight:o,headings:t,rowCount:r,rowHeight:n,size:l})=>{let a=Pl(0),s=Math.min(r,kl)*n,c=r*n-s,{pinnedWidthLeft:m,pinnedWidthRight:f,unpinnedWidth:b}=we(()=>Al(e),[e]),[x,T]=we(()=>El(n),[n]),[d,v]=we(()=>c?Sl(n,c,a):[x,T],[T,x,c,n]),R=Hl(C=>{a.current=C},[]);return we(()=>{var C;if(l){let M=t.length,y=15,D=m+b+f,E=D>l.width?y:0,S=o*(1+M),N=s-(((C=l==null?void 0:l.height)!=null?C:0)-E)+S,W=D-l.width+m,K=(l.height-o)/n,G=Number.isInteger(K)?K+1:Math.ceil(K),H=l.height-S,U=s>H?y:0;return{contentHeight:s,getRowAtPosition:v,getRowOffset:d,horizontalScrollbarHeight:E,maxScrollContainerScrollHorizontal:W,maxScrollContainerScrollVertical:N,pinnedWidthLeft:m,pinnedWidthRight:f,rowCount:G,contentWidth:D,setPctScrollTop:R,totalHeaderHeight:S,verticalScrollbarWidth:U,viewportBodyHeight:H}}else return Ll},[l,t.length,m,b,f,s,o,n,v,d,R])};import{useCallback as Il,useEffect as zl,useRef as Nl}from"react";var pt=({getRowAtPosition:e,setRange:o,viewportMeasurements:t})=>{let r=Nl(0),{rowCount:n}=t,l=Il(a=>{let i=e(a);i!==r.current&&(r.current=i,o({from:i,to:i+n}))},[e,o,n]);return zl(()=>{let{current:a}=r,i={from:a,to:a+n};o(i)},[o,n]),{onVerticalScroll:l}};import{useLayoutProviderDispatch as Vl}from"@vuu-ui/vuu-layout";import{getCalculatedColumnType as Fl}from"@vuu-ui/vuu-utils";import{useCallback as ee,useRef as Kl,useState as Gl}from"react";var bt=({availableColumns:e,onAvailableColumnsChange:o,onConfigChange:t,onCreateCalculatedColumn:r,onDataSourceConfigChange:n,tableConfig:l})=>{let a=Vl(),i=Kl(),[s,u]=Gl(e),c=ee((d,v,R)=>{a({type:"set-props",path:"#context-panel",props:{expanded:!0,content:{type:d,props:R},title:v}})},[a]),m=ee(()=>{requestAnimationFrame(()=>{var d;(d=i.current)==null||d.call(i)})},[]),f=ee(d=>{let v=s.concat({name:d.name,serverDataType:Fl(d)});u(v),o==null||o(v),requestAnimationFrame(()=>{var R;(R=i.current)==null||R.call(i)}),r(d)},[s,o,r]),b=ee(d=>{c("ColumnSettings","Column Settings",{column:d.column,onCancelCreateColumn:m,onConfigChange:t,onCreateCalculatedColumn:f,tableConfig:l,vuuTable:d.vuuTable})},[m,f,t,c,l]),x=ee(()=>{b({column:{name:"::",serverDataType:"string"},type:"columnSettings",vuuTable:{module:"SIMUL",table:"instruments"}})},[b]),T=ee(d=>{let v=l.columns.find(R=>R.name===d);v&&b({type:"columnSettings",column:v,vuuTable:{module:"SIMUL",table:"instruments"}})},[b,l.columns]);return i.current=ee(()=>{c("TableSettings","DataGrid Settings",{availableColumns:s!=null?s:l.columns.map(({name:d,serverDataType:v})=>({name:d,serverDataType:v})),onAddCalculatedColumn:x,onConfigChange:t,onDataSourceConfigChange:n,onNavigateToColumn:T,tableConfig:l})},[s,x,T,t,n,c,l]),{showColumnSettingsPanel:b,showTableSettingsPanel:i.current}};var Re=e=>e,{KEY:Jl,IS_EXPANDED:ht,IS_LEAF:xt}=Xl,Yl={draggable:void 0,onMouseDown:void 0},Zl=()=>Yl,jl=(e,o)=>({...e,columns:e.columns.concat(o)}),Tt=({allowDragDrop:e=!1,availableColumns:o,config:t,containerRef:r,dataSource:n,disableFocus:l,headerHeight:a=25,highlightedIndex:i,id:s,navigationStyle:u="cell",onAvailableColumnsChange:c,onConfigChange:m,onDragStart:f,onDrop:b,onFeatureInvocation:x,onHighlight:T,onRowClick:d,onSelect:v,onSelectionChange:R,renderBufferSize:C=0,rowHeight:M=20,selectionModel:y,size:D})=>{let[E,S]=vt(n.size);if(n===void 0)throw Error("no data source provided to Vuu Table");let N=e?$l:Zl,W=je(()=>ko(n),[n]),K=L(p=>{S(p)},[]),{columns:G,dispatchColumnAction:H,headings:U,tableAttributes:se,tableConfig:A}=lt(t,n);Ct(()=>{H({type:"init",dataSource:n,tableConfig:A})},[A,n,H]);let O=L(p=>{H({type:"init",tableConfig:p,dataSource:n}),m==null||m(Re(p))},[n,H,m]),[g,h]=vt(),[w,k]=je(()=>{let p=(P,z)=>{let V=gt(G,P,{width:z});h(V)};return[g!=null?g:G,p]},[G,g]),I=je(()=>Ol(n.columns),[n.columns]),{getRowAtPosition:ue,getRowOffset:oo,setPctScrollTop:to,..._}=dt({columns:w,headerHeight:a,headings:U,rowCount:E,rowHeight:M,size:D}),oe=Wo({from:0,to:_.rowCount}),He=L(({tableSchema:p})=>{p?H({type:"setTableSchema",tableSchema:p}):console.log("subscription message with no schema")},[H]),{data:$,dataRef:pe,getSelectedRows:Pe,range:be,setRange:te}=Oo({dataSource:n,onFeatureInvocation:x,renderBufferSize:C,onSizeChange:K,onSubscribed:He,range:oe}),At=L(p=>{console.log("settings changed"),H({type:"init",tableConfig:p,dataSource:n}),m==null||m(Re(p))},[n,H,m]),It=L(p=>{n.config={...n.config,...p}},[n]);Ql(()=>{n.on("config",(p,P)=>{H({type:"tableConfig",...p,confirmed:P})})},[n,H]);let zt=L(p=>{n.columns=n.columns.concat(p.name),O(jl(A,p))},[n,A,O]),no=L(p=>{let{columns:P}=p,z=P.map(B=>B.name),V={...A,columns:A.columns.map(B=>z.includes(B.name)?{...B,hidden:!0}:B)};O(V)},[A,O]),ro=L(p=>{O({...A,columns:gt(A.columns,{...p.column,pin:p.pin})})},[A,O]),{showColumnSettingsPanel:lo,showTableSettingsPanel:io}=bt({availableColumns:o!=null?o:A.columns.map(({name:p,serverDataType:P="string"})=>({name:p,serverDataType:P})),onAvailableColumnsChange:c,onConfigChange:At,onCreateCalculatedColumn:zt,onDataSourceConfigChange:It,tableConfig:A}),Nt=L(p=>{if(nt(p))lo(p);else if(rt(p))io();else switch(p.type){case"hideColumns":return no(p);case"pinColumn":return ro(p);default:H(p)}},[H,no,ro,lo,io]),Vt=zo({dataSource:n,onPersistentColumnOperation:Nt}),Ft=L((p,P=!1,z)=>{n&&(n.sort=Bl(n.sort,p,P,z))},[n]),Kt=L((p,P,z)=>{let V=w.find(B=>B.name===P);if(V)p==="resize"?ft(z)&&k(P,z):p==="end"?ft(z)&&(H({type:"resizeColumn",phase:p,column:V,width:z}),h(void 0),m==null||m(Re(No(A,{type:"col-size",column:V,width:z})))):(h(void 0),H({type:"resizeColumn",phase:p,column:V,width:z}));else throw Error(`useDataTable.handleColumnResize, column ${P} not found`)},[w,A,H,m,k]),Gt=L((p,P)=>{var B,go;let z=_l(P,p),V=p[Jl];if(p[ht]){if(n.closeTreeNode(V,!0),z){let ce=w.indexOf(P),me=(B=n.getRowsAtDepth)==null?void 0:B.call(n,ce+1);me&&!me.some(ne=>ne[ht]||ne[xt])&&H({type:"hideColumns",columns:w.slice(ce+2)})}}else if(n.openTreeNode(V),z){let ce=(go=n.getChildRows)==null?void 0:go.call(n,V),me=w.indexOf(P)+1,ne=[w[me]];ce&&ce.some(Ee=>Ee[xt])&&ne.push(w[me+1]),ne.some(Ee=>Ee.hidden)&&H({type:"showColumns",columns:ne})}},[w,n,H]),{onVerticalScroll:ao}=pt({columns:w,getRowAtPosition:ue,setRange:te,viewportMeasurements:_}),$t=L(p=>{ao(p)},[ao]),{requestScroll:Bt,...Ot}=mt({maxScrollLeft:_.maxScrollContainerScrollHorizontal,maxScrollTop:_.maxScrollContainerScrollVertical,rowHeight:M,onVerticalScroll:$t,viewportRowCount:_.rowCount}),{highlightedIndexRef:so,navigate:Wt,onFocus:uo,onKeyDown:co,...Ut}=Yo({columnCount:w.filter(p=>p.hidden!==!0).length,containerRef:r,disableFocus:l,highlightedIndex:i,navigationStyle:u,requestScroll:Bt,rowCount:n==null?void 0:n.size,onHighlight:T,viewportRange:be,viewportRowCount:_.rowCount}),{onBlur:_t,onDoubleClick:Xt,onKeyDown:mo,onFocus:po}=Go({navigate:Wt}),Qt=L(p=>{uo(),p.defaultPrevented||po(p)},[po,uo]),Jt=qo({columns:w,data:$,dataSource:n,getSelectedRows:Pe}),Yt=L(p=>{n.groupBy=p.map(P=>P.name)},[n]),Zt=L(p=>{Ul(p)?n.groupBy=[]:n&&n.groupBy.includes(p.name)&&(n.groupBy=n.groupBy.filter(P=>P!==p.name))},[n]),jt=L(p=>{n.select(p),R==null||R(p)},[n,R]),{onKeyDown:bo,onRowClick:fo}=jo({highlightedIndexRef:so,onSelect:v,onSelectionChange:jt,selectionModel:y}),qt=L(p=>{co(p),p.defaultPrevented||mo(p),p.defaultPrevented||bo(p)},[co,mo,bo]),en=L((p,P,z)=>{fo(p,P,z),d==null||d(p)},[d,fo]);Ct(()=>{H({type:"init",tableConfig:t,dataSource:n})},[t,n,H]);let on=L(p=>{console.log("useTable onMoveColumn",{columns:p});let P={...A,columns:p};H({type:"init",tableConfig:P,dataSource:n}),m==null||m(Re(P))},[n,H,m,A]),tn=L(p=>{b==null||b(p)},[b]),nn=L(async(p,P,z)=>n.applyEdit(p,P,z),[n]),rn=L(p=>{let{initialDragElement:P}=p,z=Wl(P),V=pe.current.find(B=>B[0]===z);V&&p.setPayload(V),f==null||f(p)},[pe,f]),{onMouseDown:ln,draggable:an}=N({allowDragDrop:e,containerRef:r,draggableClassName:"vuuTable",id:s,onDragStart:rn,onDrop:tn,orientation:"vertical",itemQuery:".vuuTableRow"});return{...Ut,"aria-rowcount":n.size,draggableRow:an,onBlur:_t,onDoubleClick:Xt,onFocus:Qt,onKeyDown:qt,onMouseDown:ln,columnMap:I,columns:w,data:$,handleContextMenuAction:Vt,headings:U,highlightedIndex:so.current,menuBuilder:W,onContextMenu:Jt,onDataEdited:nn,onMoveColumn:on,onMoveGroupColumn:Yt,onRemoveGroupColumn:Zt,onRowClick:en,onSortColumn:Ft,onResizeColumn:Kt,onToggleGroup:Gt,scrollProps:Ot,tableAttributes:se,tableConfig:A,viewportMeasurements:_}};import{isGroupColumn as ti,isNotHidden as ni}from"@vuu-ui/vuu-utils";import ri from"clsx";import{useDragDropNext as ql}from"@vuu-ui/vuu-ui-controls";import{moveColumnTo as qe,visibleColumnAtIndex as ei}from"@vuu-ui/vuu-utils";import{useCallback as wt,useRef as oi}from"react";var Rt=({columns:e,onMoveColumn:o,onSortColumn:t,tableConfig:r})=>{let n=oi(null),l=wt((c,m)=>{let f=e[c],b=qe(e,f,m),x=({name:R})=>C=>C.name===R,T=b.findIndex(x(f)),d=b[T+1],v=d?r.columns.findIndex(x(d)):-1;m>c&&v!==-1?o(qe(r.columns,f,v-1)):o(qe(r.columns,f,v))},[e,o,r.columns]),a=wt(c=>{var d;let f=c.target.closest(".vuuTableHeaderCell"),b=parseInt((d=f==null?void 0:f.dataset.index)!=null?d:"-1"),x=ei(e,b),T=c.shiftKey;x&&t(x,T)},[e,t]),{onMouseDown:i,draggable:s,...u}=ql({allowDragDrop:!0,containerRef:n,draggableClassName:"vuuTable",onDrop:l,orientation:"horizontal",itemQuery:".vuuTableHeaderCell"});return{containerRef:n,draggableColumn:s,draggedColumnIndex:u.draggedItemIndex,onClick:a,onMouseDown:i}};import{jsx as ye,jsxs as yt}from"react/jsx-runtime";var Dt=({classBase:e="vuuTable",columns:o,headings:t,onMoveColumn:r,onMoveGroupColumn:n,onRemoveGroupColumn:l,onResizeColumn:a,onSortColumn:i,tableConfig:s,tableId:u})=>{let{containerRef:c,draggableColumn:m,draggedColumnIndex:f,onClick:b,onMouseDown:x}=Rt({columns:o,onMoveColumn:r,onSortColumn:i,tableConfig:s});return yt("div",{className:`${e}-col-headings`,ref:c,children:[t.map((T,d)=>ye("div",{className:"vuuTable-heading",children:T.map(({label:v,width:R},C)=>ye("div",{className:"vuuTable-headingCell",style:{width:R},children:v},C))},d)),yt("div",{className:`${e}-col-headers`,role:"row",children:[o.filter(ni).map((T,d)=>ti(T)?ye(ze,{column:T,"data-index":d,onMoveColumn:n,onRemoveColumn:l,onResize:a},T.name):ye(yo,{className:ri({"vuuDraggable-dragAway":d===f}),column:T,"data-index":d,id:`${u}-col-${d}`,onClick:b,onMouseDown:x,onResize:a},T.name)),m]})]})};import{jsx as Z,jsxs as Ht}from"react/jsx-runtime";var Q="vuuTable",{IDX:Mt,RENDER_IDX:pi}=ai,bi=({Row:e=Ke,allowDragDrop:o,availableColumns:t,config:r,containerRef:n,dataSource:l,disableFocus:a=!1,highlightedIndex:i,id:s,navigationStyle:u="cell",onAvailableColumnsChange:c,onConfigChange:m,onDragStart:f,onDrop:b,onFeatureInvocation:x,onHighlight:T,onRowClick:d,onSelect:v,onSelectionChange:R,renderBufferSize:C=0,rowHeight:M=20,selectionModel:y="extended",showColumnHeaders:D=!0,headerHeight:E=D?25:0,size:S})=>{let N=si(s),{columnMap:W,columns:K,data:G,draggableRow:H,handleContextMenuAction:U,headings:se,highlightedIndex:A,onDataEdited:O,onMoveColumn:g,onMoveGroupColumn:h,onRemoveGroupColumn:w,onResizeColumn:k,onRowClick:I,onSortColumn:ue,onToggleGroup:oo,menuBuilder:to,scrollProps:_,tableAttributes:oe,tableConfig:He,viewportMeasurements:$,...pe}=Tt({allowDragDrop:o,availableColumns:t,config:r,containerRef:n,dataSource:l,disableFocus:a,headerHeight:E,highlightedIndex:i,id:N,navigationStyle:u,onAvailableColumnsChange:c,onConfigChange:m,onDragStart:f,onDrop:b,onFeatureInvocation:x,onHighlight:T,onRowClick:d,onSelect:v,onSelectionChange:R,renderBufferSize:C,rowHeight:M,selectionModel:y,size:S}),Pe=Pt(`${Q}-contentContainer`,{[`${Q}-colLines`]:oe.columnSeparators,[`${Q}-rowLines`]:oe.rowSeparators,[`${Q}-zebra`]:oe.zebraStripes}),be={"--content-height":`${$.contentHeight}px`,"--content-width":`${$.contentWidth}px`,"--horizontal-scrollbar-height":`${$.horizontalScrollbarHeight}px`,"--pinned-width-left":`${$.pinnedWidthLeft}px`,"--pinned-width-right":`${$.pinnedWidthRight}px`,"--header-height":`${E}px`,"--row-height":`${M}px`,"--total-header-height":`${$.totalHeaderHeight}px`,"--vertical-scrollbar-width":`${$.verticalScrollbarWidth}px`,"--viewport-body-height":`${$.viewportBodyHeight}px`};return Ht(ii,{menuActionHandler:U,menuBuilder:to,children:[Z("div",{className:`${Q}-scrollbarContainer`,ref:_.scrollbarContainerRef,style:be,children:Z("div",{className:`${Q}-scrollbarContent`})}),Z("div",{className:Pe,ref:_.contentContainerRef,style:be,children:Ht("div",{...pe,className:`${Q}-table`,role:"table",tabIndex:a?void 0:-1,children:[D?Z(Dt,{columns:K,headings:se,onMoveColumn:g,onMoveGroupColumn:h,onRemoveGroupColumn:w,onResizeColumn:k,onSortColumn:ue,tableConfig:He,tableId:N}):null,Z("div",{className:`${Q}-body`,children:G.map(te=>Z(e,{columnMap:W,columns:K,highlighted:A===te[Mt],onClick:I,onDataEdited:O,row:te,offset:M*te[Mt]+$.totalHeaderHeight,onToggleGroup:oo,zebraStripes:oe.zebraStripes},te[pi]))})]})}),H]})},am=ci(function({Row:o,allowDragDrop:t,availableColumns:r,className:n,config:l,dataSource:a,disableFocus:i,highlightedIndex:s,id:u,navigationStyle:c,onAvailableColumnsChange:m,onConfigChange:f,onDragStart:b,onDrop:x,onFeatureInvocation:T,onHighlight:d,onRowClick:v,onSelect:R,onSelectionChange:C,renderBufferSize:M,rowHeight:y,selectionModel:D,showColumnHeaders:E,headerHeight:S,style:N,...W},K){let G=mi(null),[H,U]=di();if(l===void 0)throw Error("vuu Table requires config prop. Minimum config is list of Column Descriptors");if(a===void 0)throw Error("vuu Table requires dataSource prop");return Z(li,{...W,className:Pt(Q,n),id:u,onResize:U,ref:ui(G,K),children:H?Z(bi,{Row:o,allowDragDrop:t,availableColumns:r,config:l,containerRef:G,dataSource:a,disableFocus:i,headerHeight:S,highlightedIndex:s,id:u,navigationStyle:c,onAvailableColumnsChange:m,onConfigChange:f,onDragStart:b,onDrop:x,onFeatureInvocation:T,onHighlight:d,onRowClick:v,onSelect:R,onSelectionChange:C,renderBufferSize:M,rowHeight:y,selectionModel:D,showColumnHeaders:E,size:H}):null})});import{memo as fi,useCallback as gi}from"react";import{CheckboxIcon as Ci,WarnCommit as vi}from"@vuu-ui/vuu-ui-controls";import{Checkbox as hi}from"@salt-ds/core";var De=(e,o)=>e.column===o.column&&e.column.valueFormatter(e.row[e.columnMap[e.column.name]])===o.column.valueFormatter(o.row[o.columnMap[o.column.name]]);import{dispatchCustomEvent as xi,registerComponent as Ti}from"@vuu-ui/vuu-utils";import{jsx as Et}from"react/jsx-runtime";var St=fi(({column:e,columnMap:o,onCommit:t=vi,row:r})=>{let n=o[e.name],l=r[n],a=gi(i=>async s=>{let u=await t(i);return u===!0&&xi(s.target,"vuu-commit"),u},[t]);return e.editable?Et(hi,{checked:l,onClick:a(!l)}):Et(Ci,{checked:l,disabled:!0})},De);St.displayName="CheckboxCell";Ti("checkbox-cell",St,"cell-renderer",{serverDataType:"boolean"});import{registerComponent as wi}from"@vuu-ui/vuu-utils";import{Input as Ri}from"@salt-ds/core";import{useEditableText as yi}from"@vuu-ui/vuu-ui-controls";import Di from"clsx";import{jsx as eo}from"react/jsx-runtime";var Me="vuuTableInputCell",Mi=()=>(console.warn("onCommit handler has not been provided to InputCell cell renderer"),Promise.resolve(!0)),Hi=({column:e,columnMap:o,onCommit:t=Mi,row:r})=>{let n=o[e.name],{align:l="left",clientSideEditValidationCheck:a}=e,{warningMessage:i,...s}=yi({initialValue:r[n],onCommit:t,clientSideEditValidationCheck:a}),u=i&&l==="left"?eo("span",{className:`${Me}-icon`,"data-icon":"error"}):void 0,c=i&&l==="right"?eo("span",{className:`${Me}-icon`,"data-icon":"error"}):void 0;return eo(Ri,{...s,className:Di(Me,{[`${Me}-error`]:i!==void 0}),endAdornment:u,startAdornment:c})};wi("input-cell",Hi,"cell-renderer",{});import{WarnCommit as Pi}from"@vuu-ui/vuu-ui-controls";import{dispatchCustomEvent as Ei,isTypeDescriptor as Si,isValueListRenderer as ki,registerComponent as Li}from"@vuu-ui/vuu-utils";import Ai from"clsx";import{memo as Ii,useCallback as zi}from"react";import{CycleStateButton as Ni}from"@vuu-ui/vuu-ui-controls";import{jsx as Ki}from"react/jsx-runtime";var kt="vuuTableToggleCell",Vi=({name:e,type:o})=>{if(Si(o)&&ki(o.renderer))return o.renderer.values;throw Error(`useLookupValues column ${e} has not been configured with a values list`)},Fi=Ii(function({column:o,columnMap:t,onCommit:r=Pi,row:n}){let l=Vi(o),a=t[o.name],i=n[a],s=zi((u,c)=>r(c).then(m=>(m===!0&&Ei(u.target,"vuu-commit"),m)),[r]);return Ki(Ni,{className:Ai(kt,`${kt}-${o.name}`),onCommit:s,value:i,values:l,variant:"cta",children:i})},De);Li("toggle-cell",Fi,"cell-renderer",{});import{useStateRef as Gi}from"@vuu-ui/vuu-ui-controls";import{dispatchMouseEvent as $i}from"@vuu-ui/vuu-utils";import{useCallback as Lt,useRef as Bi}from"react";var od=(e,o)=>{let t=Bi(null),[r,n]=Gi(e),l=Lt(i=>{var s;if(i.key==="ArrowDown")n((u=-1)=>Math.min(o-1,u+1));else if(i.key==="ArrowUp")n((u=-1)=>Math.max(0,u-1));else if(i.key==="Enter"||i.key===" "){let{current:u}=r,c=(s=t.current)==null?void 0:s.querySelector(`[aria-rowindex="${u}"]`);c&&$i(c,"click")}},[r,o,n]),a=Lt(i=>{n(i)},[n]);return{highlightedIndexRef:r,onHighlight:a,onKeyDown:l,tableRef:t}};export{St as CheckboxCell,ze as GroupHeaderCellNext,yo as HeaderCell,Hi as InputCell,am as Table,Ho as TableCell,Po as TableGroupCell,Fi as ToggleCell,De as dataAndColumnUnchanged,nt as isShowColumnSettings,rt as isShowTableSettings,No as updateTableConfig,od as useControlledTableNavigation,lt as useTableModel,dt as useTableViewport};
 //# sourceMappingURL=index.js.map