@dxos/react-ui-table 0.8.1-staging.5be625a → 0.8.1-staging.97aedb1

package/dist/lib/node/deprecated/index.cjs

@@ -1,1511 +0,0 @@
-"use strict";
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var deprecated_exports = {};
-__export(deprecated_exports, {
-  CellCombobox: () => CellCombobox,
-  ColumnBuilder: () => ColumnBuilder,
-  ColumnMenu: () => ColumnMenu,
-  ColumnSettings: () => ColumnSettings,
-  MemoizedVirtualizedTableContent: () => MemoizedVirtualizedTableContent,
-  SortIndicator: () => SortIndicator,
-  TABLE_NAME: () => TABLE_NAME,
-  Table: () => Table,
-  TablePrimitive: () => TablePrimitive,
-  TableProvider: () => TableProvider,
-  TableRootContext: () => TableRootContext,
-  createColumnBuilder: () => createColumnBuilder,
-  currentRow: () => currentRow,
-  flushPadding: () => flushPadding,
-  gridCellFocusRing: () => gridCellFocusRing,
-  groupTh: () => groupTh,
-  headPadding: () => headPadding,
-  schemaToColumnDefs: () => schemaToColumnDefs,
-  selectedRow: () => selectedRow,
-  tableRoot: () => tableRoot,
-  tbodyRoot: () => tbodyRoot,
-  tbodyTr: () => tbodyTr,
-  tdRoot: () => tdRoot,
-  textPadding: () => textPadding,
-  theadResizeRoot: () => theadResizeRoot,
-  theadRoot: () => theadRoot,
-  theadTh: () => theadTh,
-  theadTr: () => theadTr,
-  translations: () => translations_default,
-  useColumnResizing: () => useColumnResizing,
-  useColumnSorting: () => useColumnSorting,
-  usePinLastRow: () => usePinLastRow,
-  useRowSelection: () => useRowSelection,
-  useSortColumn: () => useSortColumn,
-  useTableContext: () => useTableContext,
-  useTableRootContext: () => useTableRootContext
-});
-module.exports = __toCommonJS(deprecated_exports);
-var import_react = require("@phosphor-icons/react");
-var import_react2 = __toESM(require("react"));
-var import_react_ui = require("@dxos/react-ui");
-var import_react_ui_searchlist = require("@dxos/react-ui-searchlist");
-var import_react_ui_theme = require("@dxos/react-ui-theme");
-var import_react3 = require("@phosphor-icons/react");
-var import_react4 = __toESM(require("react"));
-var import_react_ui2 = require("@dxos/react-ui");
-var import_react_ui_theme2 = require("@dxos/react-ui-theme");
-var import_react5 = __toESM(require("react"));
-var import_echo_schema = require("@dxos/echo-schema");
-var import_react_ui3 = require("@dxos/react-ui");
-var import_util = require("@dxos/util");
-var import_react6 = require("react");
-var import_react_ui4 = require("@dxos/react-ui");
-var import_react7 = require("react");
-var import_react8 = __toESM(require("react"));
-var import_debug = require("@dxos/debug");
-var import_react9 = require("react");
-var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
-var import_react10 = require("react");
-var import_react_slot = require("@radix-ui/react-slot");
-var import_react_table = require("@tanstack/react-table");
-var import_react11 = __toESM(require("react"));
-var import_react_ui5 = require("@dxos/react-ui");
-var import_react_ui_theme3 = require("@dxos/react-ui-theme");
-var import_react_tabster = require("@fluentui/react-tabster");
-var import_react_table2 = require("@tanstack/react-table");
-var import_react12 = __toESM(require("react"));
-var import_react_virtual = require("@tanstack/react-virtual");
-var import_react13 = require("react");
-var import_react_ui_theme4 = require("@dxos/react-ui-theme");
-var import_react_tabster2 = require("@fluentui/react-tabster");
-var import_react14 = __toESM(require("react"));
-var import_react_table3 = require("@tanstack/react-table");
-var import_react15 = __toESM(require("react"));
-var import_react_ui_grid = require("@dxos/react-ui-grid");
-var import_react_tabster3 = require("@fluentui/react-tabster");
-var import_react16 = require("@phosphor-icons/react");
-var import_react_table4 = require("@tanstack/react-table");
-var import_format = require("date-fns/format");
-var import_formatDistanceToNow = require("date-fns/formatDistanceToNow");
-var import_react17 = __toESM(require("react"));
-var import_log = require("@dxos/log");
-var import_react_ui6 = require("@dxos/react-ui");
-var import_react_ui_grid2 = require("@dxos/react-ui-grid");
-var import_react_ui_theme5 = require("@dxos/react-ui-theme");
-var import_echo_schema2 = require("@dxos/echo-schema");
-var import_echo_schema3 = require("@dxos/echo-schema");
-var import_schema = require("@dxos/schema");
-var translationKey = "table";
-var translations_default = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "no selection label": "\xA0",
-        "number column type label": "Number",
-        "boolean column type label": "Boolean",
-        "date column type label": "Date",
-        "string column type label": "Text",
-        "ref column type label": "Reference",
-        "digits label": "Decimal places",
-        "save label": "Save",
-        "delete label": "Delete",
-        "column label label": "Label",
-        "property key label": "Property",
-        "column type label": "Type"
-      }
-    }
-  }
-];
-var initialItems = (model, value) => value ? {
-  [model.getId(value)]: {
-    label: model.getText(value),
-    data: value
-  }
-} : {};
-var CellCombobox = ({ model, value, onValueChange }) => {
-  const { t } = (0, import_react_ui.useTranslation)(translationKey);
-  const [items, setItems] = (0, import_react2.useState)(initialItems(model, value));
-  const [loading, setLoading] = (0, import_react2.useState)(false);
-  const [searchInputValue, setSearchInputValue] = (0, import_react2.useState)("");
-  const handleSearchInputValueChange = async (text) => {
-    setSearchInputValue(text ?? "");
-    setLoading(true);
-    const items2 = await model.query(text);
-    setItems(items2.reduce((acc, item) => {
-      acc[model.getId(item)] = {
-        label: model.getText(item),
-        data: item
-      };
-      return acc;
-    }, initialItems(model, value)));
-    setLoading(false);
-  };
-  const handleValueChange = (0, import_react2.useCallback)((id) => {
-    onValueChange(items[id]?.data);
-  }, [
-    items,
-    onValueChange
-  ]);
-  return /* @__PURE__ */ import_react2.default.createElement(import_react_ui_searchlist.PopoverCombobox.Root, {
-    placeholder: t("no selection label")
-  }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui_searchlist.PopoverCombobox.Trigger, {
-    variant: "ghost",
-    classNames: "is-full rounded-none ring-inset"
-  }, value ? /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement("span", {
-    className: (0, import_react_ui_theme.mx)("font-normal text-start text-baseText flex-1 min-is-0 truncate mie-2", !value && import_react_ui_theme.staticPlaceholderText)
-  }, model.getText(value)), /* @__PURE__ */ import_react2.default.createElement(import_react.CaretDown, {
-    weight: "bold",
-    className: (0, import_react_ui_theme.getSize)(3)
-  })) : null), /* @__PURE__ */ import_react2.default.createElement(import_react_ui_searchlist.PopoverCombobox.Content, {
-    shouldFilter: false,
-    classNames: "is-[--radix-popover-trigger-width]"
-  }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui_searchlist.PopoverCombobox.Input, {
-    value: searchInputValue,
-    onValueChange: handleSearchInputValueChange
-  }), /* @__PURE__ */ import_react2.default.createElement(import_react_ui_searchlist.PopoverCombobox.List, null, searchInputValue.length < 1 ? /* @__PURE__ */ import_react2.default.createElement("p", {
-    className: (0, import_react_ui_theme.mx)("text-center", import_react_ui_theme.descriptionText)
-  }, "Start typing to search") : loading ? /* @__PURE__ */ import_react2.default.createElement("p", {
-    className: (0, import_react_ui_theme.mx)("text-center", import_react_ui_theme.descriptionText)
-  }, "Searching\u2026") : /* @__PURE__ */ import_react2.default.createElement(import_react2.default.Fragment, null, /* @__PURE__ */ import_react2.default.createElement(import_react_ui_searchlist.PopoverCombobox.Empty, {
-    classNames: [
-      "text-center",
-      import_react_ui_theme.descriptionText
-    ]
-  }, "No results"), Object.entries(items).map(([id, { label }]) => /* @__PURE__ */ import_react2.default.createElement(import_react_ui_searchlist.PopoverCombobox.Item, {
-    key: id,
-    value: id,
-    onSelect: handleValueChange,
-    classNames: "truncate"
-  }, label)))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Popover.Arrow, null)));
-};
-var ColumnSettings = ({ column, tableDef, tablesToReference, onUpdate, onDelete, onClose }) => {
-  const { t } = (0, import_react_ui3.useTranslation)(translationKey);
-  const propRef = (0, import_react5.useRef)(null);
-  const [formState, setFormState] = (0, import_react5.useState)({
-    prop: column.id,
-    refTable: column.refTable,
-    refProp: column.refProp,
-    type: String(column.type),
-    label: column.label,
-    digits: String(column.digits ?? "0")
-  });
-  const handleSave = () => {
-    const { prop, refTable, refProp, type, label, digits } = formState;
-    if (!prop.length || !prop.match(/^[a-zA-Z_].+/i)) {
-      propRef.current?.focus();
-      return;
-    }
-    const current = tableDef.columns.find((c) => c.id !== column.id && c.id === prop);
-    if (current) {
-      if (current.type !== "ref") {
-        propRef.current?.focus();
-        return;
-      }
-    }
-    onUpdate?.(column.id, {
-      id: prop,
-      prop,
-      label,
-      type,
-      refTable,
-      refProp,
-      digits: (0, import_util.safeParseInt)(digits)
-    });
-    onClose?.();
-  };
-  const handleDelete = () => {
-    onDelete?.(column.id);
-    onClose?.();
-  };
-  return /* @__PURE__ */ import_react5.default.createElement("div", {
-    className: "flex flex-col w-full gap-4"
-  }, /* @__PURE__ */ import_react5.default.createElement("div", {
-    className: "flex flex-col gap-2"
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Input.Root, null, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Input.Label, null, t("column label label")), /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Input.TextInput, {
-    placeholder: "Column label",
-    value: formState.label ?? "",
-    onChange: (event) => setFormState((prevState) => ({
-      ...prevState,
-      label: event.target.value
-    })),
-    autoFocus: true,
-    "data-testid": "table.column-settings.label"
-  })), /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Input.Root, null, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Input.Label, null, t("property key label")), /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Input.TextInput, {
-    ref: propRef,
-    placeholder: "Property key",
-    value: formState.prop ?? "",
-    onChange: (event) => setFormState((prevState) => ({
-      ...prevState,
-      prop: event.target.value.replace(/[^\w_]/g, "")
-    }))
-  })), /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Input.Root, null, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Input.Label, null, t("column type label")), /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Select.Root, {
-    value: formState.type,
-    onValueChange: (value) => setFormState((prevState) => ({
-      ...prevState,
-      type: value
-    }))
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Select.TriggerButton, {
-    classNames: "is-full",
-    placeholder: "Type"
-  }), /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Select.Portal, null, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Select.Content, null, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Select.Viewport, null, import_echo_schema.FormatEnums.map((type) => /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Select.Option, {
-    key: type,
-    value: type
-  }, t(`${type} column type label`)))))))), formState.type === "number" && /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Input.Root, null, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Input.Label, null, t("digits label")), /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Input.TextInput, {
-    value: formState.digits ?? "",
-    onChange: (event) => setFormState((prevState) => ({
-      ...prevState,
-      digits: event.target.value
-    }))
-  })), formState.type === "ref" && /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Input.Root, null, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Input.Label, null, "Table"), /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Select.Root, {
-    value: formState.refTable,
-    onValueChange: (value) => setFormState((prevState) => ({
-      ...prevState,
-      refTable: value
-    }))
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Select.TriggerButton, {
-    placeholder: "Table",
-    classNames: "is-full"
-  }), /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Select.Portal, null, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Select.Content, null, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Select.Viewport, null, tablesToReference.filter((t2) => t2.id !== tableDef.id).map(({ id, name }) => /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Select.Option, {
-    key: id,
-    value: id
-  }, name ?? id))))))), formState.refTable && /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Input.Root, null, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Input.Label, null, "Table property"), /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Select.Root, {
-    value: formState.refProp,
-    onValueChange: (value) => setFormState((prevState) => ({
-      ...prevState,
-      refProp: value
-    }))
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Select.TriggerButton, {
-    placeholder: "Property"
-  }), /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Select.Portal, null, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Select.Content, null, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Select.Viewport, null, tablesToReference.find((tableDef2) => tableDef2.id === formState.refTable)?.columns.map(({ id, label }) => /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Select.Option, {
-    key: id,
-    value: id
-  }, label ?? id))))))))), /* @__PURE__ */ import_react5.default.createElement("div", null, /* @__PURE__ */ import_react5.default.createElement("div", {
-    className: "flex flex-row justify-end gap-1"
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Button, {
-    onClick: handleDelete,
-    "data-testid": "table.column-settings.delete"
-  }, t("delete label")), /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Button, {
-    variant: "primary",
-    onClick: handleSave,
-    "data-testid": "table.column-settings.save"
-  }, t("save label")))));
-};
-var useColumnResizing = ({ columns, onColumnResize }) => {
-  const [columnsInitialised, setColumnsInitialised] = (0, import_react6.useState)(false);
-  const [columnSizing, setColumnSizing] = (0, import_react6.useState)({});
-  (0, import_react6.useEffect)(() => {
-    if (columnsInitialised) {
-      return;
-    }
-    setColumnSizing(columns.filter((column) => !!column.size && column.prop !== void 0).reduce((state, column) => {
-      state[column.prop] = column.size;
-      return state;
-    }, {}));
-    setColumnsInitialised(true);
-  }, [
-    columns,
-    setColumnSizing
-  ]);
-  const [columnSizingInfo, setColumnSizingInfo] = (0, import_react6.useState)({});
-  const notifyColumnResize = (0, import_react6.useCallback)(() => onColumnResize?.(columnSizing), [
-    onColumnResize,
-    columnSizing
-  ]);
-  (0, import_react_ui4.useOnTransition)(columnSizingInfo.isResizingColumn, (v) => typeof v === "string", false, notifyColumnResize);
-  return {
-    columnSizing,
-    columnSizingInfo,
-    setColumnSizing,
-    setColumnSizingInfo
-  };
-};
-var TABLE_NAME = "Table";
-var TableContext = /* @__PURE__ */ (0, import_react8.createContext)(void 0);
-var TableProvider = ({ children, ...value }) => {
-  return /* @__PURE__ */ import_react8.default.createElement(TableContext.Provider, {
-    value
-  }, children);
-};
-var useTableContext = () => {
-  return (0, import_react8.useContext)(TableContext) ?? (0, import_debug.raise)(new Error("Missing TableContext"));
-};
-var useColumnSorting = () => {
-  const [columnSorting, setColumnSorting] = (0, import_react7.useState)([]);
-  const sortColumn = (columnId, sortDirection) => {
-    setColumnSorting([
-      {
-        id: columnId,
-        desc: sortDirection === "desc"
-      }
-    ]);
-  };
-  const clearColumnSorting = () => {
-    setColumnSorting([]);
-  };
-  return {
-    sorting: columnSorting,
-    sortColumn,
-    clearColumnSorting
-  };
-};
-var useSortColumn = (column) => {
-  const { sorting, sortColumn, clearColumnSorting } = useTableContext();
-  const [initialSortDirection, setInitialSortDirection] = (0, import_react7.useState)();
-  const columnSort = sorting.find((s) => s.id === column.id);
-  const sortDirection = columnSort ? columnSort.desc ? "desc" : "asc" : void 0;
-  const canSort = column.getCanSort();
-  const updateColumnSort = (direction) => {
-    sortColumn(column.id, direction);
-  };
-  const onToggleSort = () => {
-    if (sortDirection === void 0) {
-      return;
-    }
-    if (sortDirection === initialSortDirection) {
-      updateColumnSort(initialSortDirection === "asc" ? "desc" : "asc");
-    } else {
-      clearColumnSorting();
-    }
-  };
-  const onSelectSort = (direction) => {
-    clearColumnSorting();
-    setInitialSortDirection(direction);
-    updateColumnSort(direction);
-  };
-  const onClearSort = () => {
-    clearColumnSorting();
-  };
-  return {
-    canSort,
-    sortDirection,
-    onSelectSort,
-    onToggleSort,
-    onClearSort
-  };
-};
-var usePinLastRow = (pinLastRow, table, data) => {
-  const [pinnedRowKey, setPinnedRowKey] = (0, import_react9.useState)();
-  const pinRow = (0, import_react9.useCallback)((rowToPin) => {
-    table.resetRowPinning();
-    rowToPin.pin("bottom");
-    setPinnedRowKey(rowToPin.id);
-  }, [
-    table
-  ]);
-  const clearRowPinning = (0, import_react9.useCallback)(() => {
-    table.resetRowPinning();
-    setPinnedRowKey(void 0);
-  }, [
-    table
-  ]);
-  const pinLastRowCallback = (0, import_react9.useCallback)(() => {
-    const rows = table.getRowModel().rows;
-    if (rows.length === 0) {
-      return clearRowPinning();
-    }
-    const lastRow = rows[rows.length - 1];
-    if (lastRow.id === pinnedRowKey) {
-      return;
-    }
-    pinRow(lastRow);
-  }, [
-    table,
-    pinnedRowKey
-  ]);
-  (0, import_react9.useEffect)(() => {
-    if (pinLastRow) {
-      pinLastRowCallback();
-    }
-  }, [
-    data,
-    pinLastRow,
-    pinLastRowCallback
-  ]);
-};
-var useRowSelection = (props) => {
-  const [rowSelection = {}, setRowSelection] = (0, import_react_use_controllable_state.useControllableState)({
-    prop: props.rowSelection,
-    onChange: props.onRowSelectionChange,
-    defaultProp: props.defaultRowSelection
-  });
-  const handleRowSelectionChange = (0, import_react10.useCallback)((updaterOrValue) => {
-    const nextRowSelection = typeof updaterOrValue === "function" ? updaterOrValue(rowSelection) : updaterOrValue;
-    if (props.rowsSelectable === "multi") {
-      setRowSelection(nextRowSelection);
-    } else if (props.rowsSelectable) {
-      const nextRowSelectionKey = Object.keys(nextRowSelection).filter((id) => !rowSelection[id])[0];
-      setRowSelection(nextRowSelectionKey ? {
-        [nextRowSelectionKey]: true
-      } : {});
-    } else {
-      setRowSelection({});
-    }
-  }, [
-    props.rowsSelectable,
-    setRowSelection,
-    rowSelection
-  ]);
-  return {
-    rowSelection,
-    handleRowSelectionChange
-  };
-};
-var ColumnMenu = ({ column, columnOrderable, columnPosition, onColumnReorder, ...props }) => {
-  const title = column.label?.length ? column.label : column.id;
-  const header = props.context.header;
-  const { canSort, sortDirection, onSelectSort, onToggleSort, onClearSort } = useSortColumn(header.column);
-  const columnSettingsAnchorRef = (0, import_react4.useRef)(null);
-  const [isColumnSettingsOpen, setIsColumnSettingsOpen] = (0, import_react4.useState)(false);
-  const shouldPreventFocusOnClose = (0, import_react4.useRef)(false);
-  const onOpenColumnSettings = (0, import_react4.useCallback)(() => {
-    shouldPreventFocusOnClose.current = true;
-    setIsColumnSettingsOpen(true);
-  }, [
-    shouldPreventFocusOnClose,
-    setIsColumnSettingsOpen
-  ]);
-  const onDropdownCloseAutoFocus = (0, import_react4.useCallback)((event) => {
-    if (shouldPreventFocusOnClose.current) {
-      event.preventDefault();
-      shouldPreventFocusOnClose.current = false;
-    }
-  }, [
-    shouldPreventFocusOnClose
-  ]);
-  return /* @__PURE__ */ import_react4.default.createElement("div", {
-    className: "flex items-center justify-between"
-  }, /* @__PURE__ */ import_react4.default.createElement("div", {
-    className: "flex items-center gap-1 truncate",
-    title
-  }, /* @__PURE__ */ import_react4.default.createElement(SortIndicator, {
-    direction: sortDirection,
-    onClick: onToggleSort
-  }), /* @__PURE__ */ import_react4.default.createElement("div", {
-    className: "truncate"
-  }, title)), /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.DropdownMenu.Root, {
-    modal: false
-  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Popover.Root, {
-    open: isColumnSettingsOpen,
-    onOpenChange: setIsColumnSettingsOpen,
-    modal: false
-  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.DropdownMenu.Trigger, {
-    ref: columnSettingsAnchorRef,
-    asChild: true
-  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Popover.Anchor, {
-    asChild: true
-  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Button, {
-    variant: "ghost",
-    "data-testid": "table.column-menu"
-  }, /* @__PURE__ */ import_react4.default.createElement(import_react3.CaretDown, {
-    className: (0, import_react_ui_theme2.getSize)(4)
-  })))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.DropdownMenu.Portal, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.DropdownMenu.Content, {
-    onCloseAutoFocus: onDropdownCloseAutoFocus,
-    sideOffset: 4,
-    collisionPadding: 8
-  }, /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.DropdownMenu.Viewport, null, canSort && /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.DropdownMenu.Item, {
-    onClick: () => onSelectSort("asc")
-  }, /* @__PURE__ */ import_react4.default.createElement("span", {
-    className: "grow"
-  }, "Sort ascending"), /* @__PURE__ */ import_react4.default.createElement("span", {
-    className: "opacity-50"
-  }, /* @__PURE__ */ import_react4.default.createElement(import_react3.ArrowUp, {
-    className: (0, import_react_ui_theme2.getSize)(4)
-  }))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.DropdownMenu.Item, {
-    onClick: () => onSelectSort("desc")
-  }, /* @__PURE__ */ import_react4.default.createElement("span", {
-    className: "grow"
-  }, "Sort descending"), /* @__PURE__ */ import_react4.default.createElement("span", {
-    className: "opacity-50"
-  }, /* @__PURE__ */ import_react4.default.createElement(import_react3.ArrowDown, {
-    className: (0, import_react_ui_theme2.getSize)(4)
-  }))), sortDirection && /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.DropdownMenu.Item, {
-    onClick: onClearSort
-  }, /* @__PURE__ */ import_react4.default.createElement("span", {
-    className: "grow"
-  }, "Clear sort"), /* @__PURE__ */ import_react4.default.createElement("span", {
-    className: "opacity-50"
-  }, /* @__PURE__ */ import_react4.default.createElement(import_react3.X, {
-    className: (0, import_react_ui_theme2.getSize)(4)
-  })))), columnOrderable && /* @__PURE__ */ import_react4.default.createElement(import_react4.default.Fragment, null, columnPosition !== "start" && /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.DropdownMenu.Item, {
-    onClick: () => onColumnReorder(header.column.id, "left")
-  }, /* @__PURE__ */ import_react4.default.createElement("span", {
-    className: "grow"
-  }, "Move left"), /* @__PURE__ */ import_react4.default.createElement("span", {
-    className: "opacity-50"
-  }, /* @__PURE__ */ import_react4.default.createElement(import_react3.ArrowLeft, {
-    className: (0, import_react_ui_theme2.mx)((0, import_react_ui_theme2.getSize)(4))
-  }))), columnPosition !== "end" && /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.DropdownMenu.Item, {
-    onClick: () => onColumnReorder(header.column.id, "right")
-  }, /* @__PURE__ */ import_react4.default.createElement("span", {
-    className: "grow"
-  }, "Move right"), /* @__PURE__ */ import_react4.default.createElement("span", {
-    className: "opacity-50"
-  }, /* @__PURE__ */ import_react4.default.createElement(import_react3.ArrowRight, {
-    className: (0, import_react_ui_theme2.mx)((0, import_react_ui_theme2.getSize)(4))
-  })))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.DropdownMenu.Item, {
-    onClick: onOpenColumnSettings,
-    "data-testid": "table.open-column-settings"
-  }, /* @__PURE__ */ import_react4.default.createElement("span", {
-    className: "grow"
-  }, "Column settings"), /* @__PURE__ */ import_react4.default.createElement("span", {
-    className: "opacity-50"
-  }, /* @__PURE__ */ import_react4.default.createElement(import_react3.GearSix, {
-    className: (0, import_react_ui_theme2.mx)((0, import_react_ui_theme2.getSize)(4), "rotate-90")
-  })))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.DropdownMenu.Arrow, null))), /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Popover.Portal, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Popover.Content, null, /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Popover.Viewport, null, /* @__PURE__ */ import_react4.default.createElement(ColumnSettings, {
-    ...props,
-    column,
-    onClose: () => setIsColumnSettingsOpen(false)
-  })), /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Popover.Arrow, null))))));
-};
-var SortIndicator = ({ direction, onClick }) => {
-  if (direction === void 0) {
-    return null;
-  }
-  let icon;
-  switch (direction) {
-    case "asc":
-      icon = /* @__PURE__ */ import_react4.default.createElement(import_react3.ArrowUp, {
-        className: (0, import_react_ui_theme2.getSize)(3)
-      });
-      break;
-    case "desc":
-      icon = /* @__PURE__ */ import_react4.default.createElement(import_react3.ArrowDown, {
-        className: (0, import_react_ui_theme2.getSize)(3)
-      });
-      break;
-  }
-  return /* @__PURE__ */ import_react4.default.createElement("div", {
-    onClick,
-    className: "flex items-center cursor-pointer"
-  }, icon);
-};
-var useTableRootContext = () => {
-  const scrollContextRef = (0, import_react13.useRef)(null);
-  const [tableCount, setTableCount] = (0, import_react13.useState)(0);
-  const virtualizer = (0, import_react_virtual.useVirtualizer)({
-    getScrollElement: () => scrollContextRef?.current ?? null,
-    count: tableCount,
-    overscan: 8,
-    estimateSize: () => 40
-  });
-  const dispatch = (action) => {
-    switch (action.type) {
-      case "updateTableCount":
-        setTableCount(action.count);
-        break;
-      default:
-        break;
-    }
-  };
-  return {
-    scrollContextRef,
-    virtualizer,
-    dispatch
-  };
-};
-var TableRootContext = (0, import_react13.createContext)({});
-var currentRow = "!bg-neutral-75 !dark:bg-neutral-850";
-var selectedRow = "!bg-primary-100 dark:!bg-primary-700";
-var flushPadding = "pli-0 plb-0";
-var textPadding = "pli-2 plb-0";
-var headPadding = "pli-2 plb-0";
-var gridCellFocusRing = "relative focus-within:outline focus-within:outline-1 outline-primary-500 outline-offset-[-1px]";
-var borderColors = "border-neutral-200 dark:border-neutral-700";
-var stickyRowColors = "bg-neutral-50  dark:bg-neutral-800";
-var tableRoot = ({ fullWidth }, ...etc) => (0, import_react_ui_theme4.mx)("table-fixed", "text-neutral-800 dark:text-neutral-200", fullWidth && "is-full", ...etc);
-var groupTh = (_props, ...etc) => (0, import_react_ui_theme4.mx)("text-start font-medium", flushPadding, ...etc);
-var theadRoot = ({ header, stickyHeader }, ...etc) => (0, import_react_ui_theme4.mx)(header ? stickyHeader && "sticky block-start-[--sticky-top] z-[1]" : "collapse", stickyRowColors, ...etc);
-var theadTr = (_props, ...etc) => (0, import_react_ui_theme4.mx)("group", ...etc);
-var theadTh = ({ border }, ...etc) => (0, import_react_ui_theme4.mx)("relative", "text-start text-xs select-none truncate", headPadding, border && borderColors, border && "border-t border-b border-l last:border-r", ...etc);
-var theadResizeRoot = ({ isResizing }) => {
-  return (0, import_react_ui_theme4.mx)("absolute h-full w-[4px] top-0 right-0", "cursor-col-resize", "user-select-none", "touch-action-none", "pointer-coarse:bg-neutral-100 dark:pointer-coarse:bg-neutral-800", !isResizing && "group-hover:bg-neutral-100 dark:group-hover:bg-neutral-800", isResizing && "bg-primary-500");
-};
-var tbodyRoot = (_props, ...etc) => (0, import_react_ui_theme4.mx)(...etc);
-var tbodyTr = ({ canBeCurrent, isPinned }, ...etc) => (0, import_react_ui_theme4.mx)("group", canBeCurrent ? import_react_ui_theme4.ghostSelectedCurrent : import_react_ui_theme4.ghostSelected, canBeCurrent && import_react_ui_theme4.focusRing, canBeCurrent && "cursor-pointer", isPinned && "sticky z-1 block-end-0", isPinned && stickyRowColors, ...etc);
-var tdRoot = ({ border, isGrid, pinned }, ...etc) => (0, import_react_ui_theme4.mx)("relative", "focus-within:!bg-neutral-50 dark:focus-within:!bg-neutral-900", flushPadding, border && "border-b border-l last:border-r border-neutral-200 dark:border-neutral-700", pinned && "border-t", isGrid && gridCellFocusRing, ...etc);
-var CELL_NAME = "Cell";
-var FocusableCell = ({ cell, children }) => {
-  const tableContext = useTableContext();
-  const focusableGroupAttrs = (0, import_react_tabster2.useFocusableGroup)({
-    tabBehavior: "limited"
-  });
-  const pinned = tableContext.table.getState().rowPinning?.bottom?.includes(cell.row.id);
-  const className = tdRoot({
-    ...tableContext,
-    pinned
-  }, cell.column.columnDef.meta?.cell?.classNames);
-  const handleKeyDown = (0, import_react14.useCallback)(({ key, currentTarget }) => {
-    if (key !== "Enter") {
-      return;
-    }
-    const currentRow2 = currentTarget.closest("tr");
-    if (!currentRow2) {
-      return;
-    }
-    const cellIndex = Array.from(currentRow2.cells || []).indexOf(currentTarget);
-    const nextSibling = currentRow2.nextElementSibling;
-    if (!(nextSibling instanceof HTMLTableRowElement)) {
-      let depth = 0;
-      const pollForNewRow = () => {
-        const newNextSibling = currentRow2.nextElementSibling;
-        if (newNextSibling instanceof HTMLTableRowElement) {
-          const nextCell = newNextSibling.cells[cellIndex];
-          const input = nextCell.querySelector("input");
-          if (input) {
-            input.focus();
-          }
-          currentRow2.scrollIntoView({
-            behavior: "smooth",
-            block: "center"
-          });
-        } else if (depth++ < 100) {
-          requestAnimationFrame(pollForNewRow);
-        }
-      };
-      requestAnimationFrame(pollForNewRow);
-    }
-  }, []);
-  return /* @__PURE__ */ import_react14.default.createElement("td", {
-    "data-testid": "table.cell",
-    tabIndex: 0,
-    ...focusableGroupAttrs,
-    className,
-    onKeyDown: handleKeyDown
-  }, children);
-};
-var StaticCell = ({ cell, children }) => {
-  const tableContext = useTableContext();
-  return /* @__PURE__ */ import_react14.default.createElement("td", {
-    "data-testid": "table.cell",
-    className: tdRoot(tableContext, cell.column.columnDef.meta?.cell?.classNames)
-  }, children);
-};
-var Cell = ({ cell, children }) => {
-  const { isGrid } = useTableContext();
-  const Root = isGrid ? FocusableCell : StaticCell;
-  return /* @__PURE__ */ import_react14.default.createElement(Root, {
-    cell
-  }, children);
-};
-Cell.displayName = CELL_NAME;
-var TABLE_BODY_NAME = "TableBody";
-var TableBody = ({ rows }) => {
-  const { table, keyAccessor, currentDatum, debug, expand, isGrid, onDatumClick } = useTableContext();
-  const rowSelection = table.getState().rowSelection;
-  const arrowNavigationAttrs = (0, import_react_tabster.useArrowNavigationGroup)({
-    axis: "grid"
-  });
-  const canBeCurrent = !isGrid && !!onDatumClick;
-  const { virtualizer } = (0, import_react12.useContext)(TableRootContext);
-  return /* @__PURE__ */ import_react12.default.createElement("tbody", isGrid && arrowNavigationAttrs, rows.map((row) => {
-    const isCurrent = currentDatum === row.original;
-    const isSelected = rowSelection?.[row.id];
-    const isPinned = row.getIsPinned();
-    const classNames = tbodyTr({
-      canBeCurrent,
-      isPinned: isPinned !== false
-    });
-    return /* @__PURE__ */ import_react12.default.createElement("tr", {
-      key: keyAccessor ? keyAccessor(row.original) : row.id,
-      className: classNames,
-      "data-index": row.index,
-      "data-testid": "table.data-row",
-      ref: virtualizer.measureElement,
-      ...isCurrent && {
-        "aria-current": "location"
-      },
-      ...isSelected && {
-        "aria-selected": "true"
-      },
-      ...canBeCurrent && {
-        tabIndex: 0,
-        onClick: () => {
-          onDatumClick(row.original);
-        },
-        onKeyUp: ({ key }) => {
-          if (key === "Enter" || key === " ") {
-            onDatumClick(row.original);
-          }
-        }
-      }
-    }, debug && /* @__PURE__ */ import_react12.default.createElement("td", null, row.id), row.getVisibleCells().map((cell) => {
-      return /* @__PURE__ */ import_react12.default.createElement(Cell, {
-        key: cell.id,
-        cell
-      }, (0, import_react_table2.flexRender)(cell.column.columnDef.cell, {
-        ...cell.getContext()
-      }));
-    }), expand && /* @__PURE__ */ import_react12.default.createElement("td", null));
-  }));
-};
-TableBody.displayName = TABLE_BODY_NAME;
-var TABLE_HEAD_NAME = "TableHeader";
-var TableHead = (_props) => {
-  const tableContext = useTableContext();
-  const headerGroups = tableContext.table.getHeaderGroups();
-  return /* @__PURE__ */ import_react15.default.createElement("thead", {
-    className: theadRoot(tableContext)
-  }, headerGroups.map((headerGroup) => {
-    return (
-      // Group element to hover resize handles.
-      /* @__PURE__ */ import_react15.default.createElement("tr", {
-        key: headerGroup.id,
-        className: theadTr(tableContext)
-      }, tableContext.debug && /* @__PURE__ */ import_react15.default.createElement("th", {
-        className: "font-mono",
-        style: {
-          width: import_react_ui_grid.defaultSizeCol
-        }
-      }, "#"), headerGroup.headers.map((header) => {
-        const isResizing = header.column.getIsResizing();
-        const onResize = header.getResizeHandler();
-        const resizable = header.column.columnDef.meta?.resizable;
-        return /* @__PURE__ */ import_react15.default.createElement("th", {
-          key: header.id,
-          style: {
-            width: header.getSize()
-          },
-          className: theadTh(tableContext, header.column.columnDef.meta?.header?.classNames),
-          "data-testid": "table.header-cell"
-        }, !header || header.isPlaceholder ? null : (0, import_react_table3.flexRender)(header.column.columnDef.header, header.getContext()), resizable && /* @__PURE__ */ import_react15.default.createElement("div", {
-          className: theadResizeRoot({
-            isResizing
-          }),
-          onDoubleClick: header.column.resetSize,
-          onMouseDown: onResize,
-          onTouchStart: onResize
-        }));
-      }), tableContext.expand && /* @__PURE__ */ import_react15.default.createElement("th", null))
-    );
-  }));
-};
-TableHead.displayName = TABLE_HEAD_NAME;
-var TableRoot = ({ children }) => {
-  const contextValue = useTableRootContext();
-  return /* @__PURE__ */ import_react11.default.createElement(TableRootContext.Provider, {
-    value: contextValue
-  }, children);
-};
-var TableViewport = ({ children, classNames, asChild, ...props }) => {
-  const { scrollContextRef } = (0, import_react11.useContext)(TableRootContext);
-  const classes = (0, import_react_ui_theme3.mx)(classNames, "overflow-auto");
-  return asChild ? /* @__PURE__ */ import_react11.default.createElement(import_react_slot.Slot, {
-    ref: scrollContextRef,
-    className: classes,
-    ...props
-  }, children) : /* @__PURE__ */ import_react11.default.createElement("div", {
-    role: "none",
-    className: classes,
-    ref: scrollContextRef,
-    ...props
-  }, children);
-};
-var TablePrimitive = (props) => {
-  const { role, header = true, rowsSelectable, debug, pinLastRow, columnVisibility, onColumnResize, onDataSelectionChange } = props;
-  const columns = (0, import_react_ui5.useDefaultValue)(props.columns, () => []);
-  const incomingData = (0, import_react_ui5.useDefaultValue)(props.data, () => []);
-  const [data, setData] = (0, import_react11.useState)([
-    ...incomingData
-  ]);
-  const forceUpdate = (0, import_react11.useCallback)(() => setData([
-    ...incomingData
-  ]), [
-    incomingData
-  ]);
-  (0, import_react11.useEffect)(() => forceUpdate(), [
-    JSON.stringify(incomingData),
-    forceUpdate
-  ]);
-  const TableProvider2 = TableProvider;
-  const { columnSizing, setColumnSizing, columnSizingInfo, setColumnSizingInfo } = useColumnResizing({
-    columns,
-    onColumnResize
-  });
-  const { rowSelection, handleRowSelectionChange } = useRowSelection(props);
-  const [grouping, handleGroupingChange] = (0, import_react11.useState)(props.grouping ?? []);
-  (0, import_react11.useEffect)(() => handleGroupingChange(props.grouping ?? []), [
-    handleGroupingChange,
-    props.grouping
-  ]);
-  const columnSorting = useColumnSorting();
-  const table = (0, import_react_table.useReactTable)({
-    // Data
-    meta: {},
-    data,
-    // Columns
-    columns,
-    defaultColumn: {
-      size: 400,
-      maxSize: 1024
-    },
-    // State
-    state: {
-      columnVisibility,
-      columnSizing,
-      columnSizingInfo,
-      sorting: columnSorting.sorting,
-      rowSelection,
-      grouping
-    },
-    // Resize columns
-    columnResizeMode: "onChange",
-    enableColumnResizing: true,
-    onColumnSizingChange: setColumnSizing,
-    onColumnSizingInfoChange: setColumnSizingInfo,
-    // Rows
-    getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
-    getSortedRowModel: (0, import_react_table.getSortedRowModel)(),
-    getExpandedRowModel: (0, import_react_table.getExpandedRowModel)(),
-    // Grouping
-    getGroupedRowModel: grouping.length > 1 ? (0, import_react_table.getGroupedRowModel)() : void 0,
-    onGroupingChange: handleGroupingChange,
-    enableMultiRowSelection: rowsSelectable === "multi" ? true : void 0,
-    enableRowSelection: rowsSelectable === true ? true : void 0,
-    onRowSelectionChange: handleRowSelectionChange,
-    enableSorting: true,
-    enableColumnPinning: true,
-    // Debug
-    debugTable: debug
-  });
-  (0, import_react11.useEffect)(() => {
-    onDataSelectionChange?.(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
-  }, [
-    onDataSelectionChange,
-    rowSelection,
-    table
-  ]);
-  usePinLastRow(pinLastRow, table, data);
-  const expand = false;
-  return /* @__PURE__ */ import_react11.default.createElement(TableProvider2, {
-    ...props,
-    ...columnSorting,
-    table,
-    header,
-    expand,
-    isGrid: role === "grid" || role === "treegrid"
-  }, /* @__PURE__ */ import_react11.default.createElement(TableImpl, {
-    debug: false,
-    ...props
-  }));
-};
-var TableImpl = (props) => {
-  const { debug, classNames, role, grouping, fullWidth } = props;
-  const { table } = useTableContext();
-  if (debug) {
-    return /* @__PURE__ */ import_react11.default.createElement("pre", {
-      className: "font-mono text-xs text-neutral-500 m-1 p-2 ring"
-    }, /* @__PURE__ */ import_react11.default.createElement("code", null, JSON.stringify(table.getState(), void 0, 2)));
-  }
-  const isResizingColumn = table.getState().columnSizingInfo.isResizingColumn;
-  const TableComponent = isResizingColumn ? MemoizedVirtualizedTableContent : VirtualizedTableContent;
-  return /* @__PURE__ */ import_react11.default.createElement("table", {
-    role,
-    className: tableRoot(props, classNames),
-    style: {
-      // borderCollapse: 'separate',
-      borderSpacing: 0,
-      ...!fullWidth && {
-        width: table.getTotalSize()
-      }
-    }
-  }, /* @__PURE__ */ import_react11.default.createElement(TableHead, null), grouping?.length !== 0 ? /* @__PURE__ */ import_react11.default.createElement(TableComponent, null) : /* @__PURE__ */ import_react11.default.createElement(GroupedTableContent, null));
-};
-var VirtualizedTableContent = () => {
-  const { table } = useTableContext();
-  const { virtualizer, dispatch } = (0, import_react11.useContext)(TableRootContext);
-  const centerRows = table.getCenterRows();
-  let pinnedRows = [];
-  (0, import_react11.useEffect)(() => {
-    dispatch({
-      type: "updateTableCount",
-      count: centerRows.length
-    });
-  }, [
-    centerRows.length
-  ]);
-  try {
-    pinnedRows = table.getBottomRows();
-  } catch (_) {
-  }
-  const { getTotalSize, getVirtualItems } = virtualizer;
-  const virtualRows = getVirtualItems();
-  const totalSize = getTotalSize();
-  const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;
-  const paddingBottom = virtualRows.length > 0 ? totalSize - (virtualRows?.[virtualRows.length - 1]?.end || 0) : 0;
-  const rowsToRender = [
-    ...virtualRows.map((virtualRow) => centerRows[virtualRow.index]),
-    ...pinnedRows
-  ].filter((r) => !!r);
-  return /* @__PURE__ */ import_react11.default.createElement(import_react11.Fragment, null, paddingTop > 0 && /* @__PURE__ */ import_react11.default.createElement("tbody", {
-    role: "none"
-  }, /* @__PURE__ */ import_react11.default.createElement("tr", {
-    role: "none"
-  }, /* @__PURE__ */ import_react11.default.createElement("td", {
-    style: {
-      height: `${paddingTop}px`
-    },
-    role: "none"
-  }))), /* @__PURE__ */ import_react11.default.createElement(TableBody, {
-    rows: rowsToRender
-  }), paddingBottom > 0 && /* @__PURE__ */ import_react11.default.createElement("tbody", {
-    role: "none"
-  }, /* @__PURE__ */ import_react11.default.createElement("tr", {
-    role: "none"
-  }, /* @__PURE__ */ import_react11.default.createElement("td", {
-    style: {
-      height: `${paddingBottom}px`
-    },
-    role: "none"
-  }))));
-};
-var MemoizedVirtualizedTableContent = /* @__PURE__ */ (0, import_react11.memo)(VirtualizedTableContent);
-var GroupedTableContent = () => {
-  const { table: { getGroupedRowModel: getGroupedRowModel2, getHeaderGroups, getState }, debug } = useTableContext();
-  return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, getGroupedRowModel2().rows.map((row, i) => {
-    return /* @__PURE__ */ import_react11.default.createElement(import_react11.Fragment, {
-      key: i
-    }, /* @__PURE__ */ import_react11.default.createElement("thead", null, /* @__PURE__ */ import_react11.default.createElement("tr", null, debug && /* @__PURE__ */ import_react11.default.createElement("th", null), /* @__PURE__ */ import_react11.default.createElement("th", {
-      // TODO(burdon): Calculate row span.
-      colSpan: getHeaderGroups()[0].headers.length,
-      className: groupTh({})
-    }, getState().grouping[0], "[", String(row.getGroupingValue(getState().grouping[0])), "]"))), /* @__PURE__ */ import_react11.default.createElement(TableBody, {
-      rows: row.subRows
-    }));
-  }));
-};
-var Table = {
-  Root: TableRoot,
-  Viewport: TableViewport,
-  Main: TablePrimitive
-};
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/deprecated/helpers.tsx";
-var createColumnBuilder = () => ({
-  helper: (0, import_react_table4.createColumnHelper)(),
-  builder: new ColumnBuilder()
-});
-var ComboboxBuilderCell = (cellContext) => {
-  const { model, onUpdate } = cellContext.column.columnDef.meta;
-  return model ? /* @__PURE__ */ import_react17.default.createElement(CellCombobox, {
-    model,
-    value: cellContext.getValue(),
-    onValueChange: (value) => onUpdate?.(cellContext.row.original, cellContext.column.id, value)
-  }) : null;
-};
-var StringBuilderCell = (cellContext) => {
-  const ref = (0, import_react17.useRef)(null);
-  const { findPrevFocusable } = (0, import_react_tabster3.useFocusFinders)();
-  const { onUpdate, cell } = cellContext.column.columnDef.meta;
-  const initialValue = cellContext.getValue();
-  const getInitialValue = (0, import_react17.useCallback)(() => {
-    return initialValue?.content ?? initialValue;
-  }, [
-    initialValue
-  ]);
-  const [value, setValue] = (0, import_react17.useState)(getInitialValue);
-  (0, import_react17.useEffect)(() => setValue(getInitialValue()), [
-    getInitialValue
-  ]);
-  const handleSave = () => {
-    ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();
-    if (value !== initialValue) {
-      onUpdate?.(cellContext.row.original, cellContext.column.id, value);
-    }
-  };
-  const handleCancel = () => setValue(initialValue);
-  let placeholder = false;
-  const columns = cellContext.table.getVisibleFlatColumns();
-  if (columns[0].id === cellContext.column.id) {
-    const rowCount = cellContext.table.getRowModel().rows.length;
-    placeholder = cellContext.row.index === rowCount - 1 && columns[0].id === cellContext.column.id;
-  }
-  return /* @__PURE__ */ import_react17.default.createElement(import_react_ui6.Input.Root, null, /* @__PURE__ */ import_react17.default.createElement(import_react_ui6.Input.TextInput, {
-    ref,
-    variant: "subdued",
-    placeholder: placeholder ? "Add row..." : void 0,
-    classNames: [
-      "is-full",
-      textPadding,
-      cell?.classNames
-    ],
-    value: value ?? "",
-    onBlur: handleSave,
-    onChange: (event) => setValue(event.target.value),
-    onKeyDown: (event) => event.key === "Enter" && handleSave() || event.key === "Escape" && handleCancel(),
-    autoComplete: "off"
-  }));
-};
-var parseNumber = (text) => text?.trim().length ? Number(text) : NaN;
-var displayNumber = (value, digits) => value || value === 0 ? value.toLocaleString(void 0, {
-  minimumFractionDigits: digits ?? 0,
-  maximumFractionDigits: digits ?? 2
-}) : "";
-var NumberBuilderCell = (cellContext) => {
-  const { onUpdate, digits } = cellContext.column.columnDef.meta;
-  const value = cellContext.getValue();
-  const [text, setText] = (0, import_react17.useState)(displayNumber(value, digits));
-  const { findPrevFocusable } = (0, import_react_tabster3.useFocusFinders)();
-  const ref = (0, import_react17.useRef)(null);
-  (0, import_react17.useEffect)(() => {
-    (!document.activeElement || document.activeElement !== ref.current) && setText(displayNumber(value, digits));
-  }, [
-    digits,
-    value
-  ]);
-  const handleEdit = () => setText(value !== void 0 ? String(value) : "");
-  const handleSave = () => {
-    const nextValue = parseNumber(text);
-    if (!isNaN(nextValue)) {
-      onUpdate?.(cellContext.row.original, cellContext.column.id, nextValue);
-      setText(displayNumber(nextValue, digits));
-    } else {
-      setText(displayNumber(value, digits));
-    }
-    ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();
-  };
-  const _handleCancel = () => {
-    setText(displayNumber(value, digits));
-    ref.current && findPrevFocusable(ref.current)?.focus();
-  };
-  return /* @__PURE__ */ import_react17.default.createElement(import_react_ui6.Input.Root, null, /* @__PURE__ */ import_react17.default.createElement(import_react_ui6.Input.TextInput, {
-    ref,
-    variant: "subdued",
-    value: text,
-    classNames: [
-      "is-full text-end font-mono",
-      textPadding
-    ],
-    onBlur: handleSave,
-    onFocus: handleEdit,
-    onChange: ({ target: { value: value2 } }) => setText(value2),
-    onKeyDown: (event) => {
-      return (
-        /* (event.key === 'Escape' && handleCancel()) || */
-        event.key === "Enter" && handleSave()
-      );
-    },
-    autoComplete: "off"
-  }));
-};
-var RowSelectorBuilderCell = (cellContext) => {
-  const { cell } = cellContext.column.columnDef.meta;
-  const { row } = cellContext;
-  const checked = row.getCanSelect() ? row.getIsSelected() : row.getCanSelectSubRows() && (row.getIsSomeSelected() ? "indeterminate" : row.getIsAllSubRowsSelected());
-  return /* @__PURE__ */ import_react17.default.createElement("div", {
-    className: "flex justify-center w-full h-full",
-    role: "presentation"
-  }, /* @__PURE__ */ import_react17.default.createElement(import_react_ui6.Input.Root, null, /* @__PURE__ */ import_react17.default.createElement(import_react_ui6.Input.Checkbox, {
-    size: 4,
-    classNames: [
-      cell?.classNames
-    ],
-    checked,
-    onCheckedChange: (event) => {
-      if (row.getCanSelect()) {
-        row.getToggleSelectedHandler()(event);
-      }
-    },
-    disabled: !(row.getCanSelect() || row.getCanSelectSubRows())
-  })));
-};
-var SwitchBuilderCell = (cellContext) => {
-  const { onUpdate } = cellContext.column.columnDef.meta;
-  const value = cellContext.getValue();
-  return /* @__PURE__ */ import_react17.default.createElement(import_react_ui6.Input.Root, null, /* @__PURE__ */ import_react17.default.createElement(import_react_ui6.Input.Switch, {
-    classNames: "block mli-auto",
-    onClick: (event) => event.stopPropagation(),
-    disabled: !onUpdate,
-    checked: !!value,
-    onCheckedChange: (value2) => {
-      onUpdate?.(cellContext.row.original, cellContext.column.id, !!value2);
-    }
-  }));
-};
-var ColumnBuilder = class {
-  /**
-  * Combobox value
-  */
-  combobox({ label, classNames, model, onUpdate, ...props }) {
-    return {
-      minSize: 100,
-      header: (column) => {
-        return label ?? column.header.id;
-      },
-      cell: model && onUpdate ? ComboboxBuilderCell : (cellContext) => {
-        const cellValue = cellContext.getValue();
-        return /* @__PURE__ */ import_react17.default.createElement("div", {
-          className: (0, import_react_ui_theme5.mx)("truncate", classNames)
-        }, cellValue ? model?.getText(cellValue) : "");
-      },
-      ...props,
-      meta: {
-        ...props.meta,
-        model,
-        onUpdate,
-        cell: {
-          classNames,
-          ...props.meta?.cell
-        }
-      }
-    };
-  }
-  /**
-  * String formats.
-  */
-  string({ label, classNames, onUpdate, ...props } = {}) {
-    return {
-      minSize: 100,
-      // TODO(burdon): Default.
-      header: (column) => {
-        return label ?? column.header.id;
-      },
-      cell: onUpdate ? StringBuilderCell : (cell) => {
-        let value = cell.getValue();
-        if (typeof value === "object" && value?.type === "dxos.Text.v0") {
-          value = value.content;
-        }
-        return /* @__PURE__ */ import_react17.default.createElement("div", {
-          className: (0, import_react_ui_theme5.mx)("truncate", textPadding, classNames)
-        }, value);
-      },
-      ...props,
-      meta: {
-        ...props.meta,
-        onUpdate,
-        cell: {
-          ...props.meta?.cell,
-          classNames
-        }
-      }
-    };
-  }
-  /**
-  * Number formats.
-  */
-  number({ label, minSize, classNames, digits, onUpdate, ...props } = {}) {
-    return {
-      size: 100,
-      minSize: 100,
-      header: (cell) => label ?? cell.header.id,
-      cell: NumberBuilderCell,
-      ...props,
-      meta: {
-        ...props.meta,
-        onUpdate,
-        digits,
-        header: {
-          ...props.meta?.header
-        },
-        cell: {
-          ...props.meta?.cell,
-          classNames
-        }
-      }
-    };
-  }
-  /**
-  * Date formats.
-  */
-  // TODO(burdon): Date picker (pluggable renderers?)
-  date({ label, format: formatSpec, relative, classNames, ...props } = {}) {
-    return {
-      size: 220,
-      minSize: 100,
-      header: (cell) => label ?? cell.header.id,
-      cell: (cell) => {
-        const value = cell.getValue();
-        try {
-          const str = value ? formatSpec ? (0, import_format.format)(value, formatSpec) : relative ? (0, import_formatDistanceToNow.formatDistanceToNow)(value, {
-            addSuffix: true
-          }) : value.toISOString() : void 0;
-          return /* @__PURE__ */ import_react17.default.createElement("div", {
-            className: (0, import_react_ui_theme5.mx)(textPadding, classNames)
-          }, str);
-        } catch (err) {
-          import_log.log.info("formatError", {
-            value
-          }, {
-            F: __dxlog_file,
-            L: 378,
-            S: this,
-            C: (f, a) => f(...a)
-          });
-          return null;
-        }
-      },
-      ...props,
-      meta: {
-        ...props.meta,
-        cell: {
-          ...props.meta?.cell,
-          classNames
-        }
-      }
-    };
-  }
-  /**
-  * PublicKey with tooltip.
-  */
-  key({ label, tooltip, classNames, ...props } = {}) {
-    return {
-      size: 94,
-      minSize: 94,
-      header: (cell) => label ?? cell.header.id,
-      cell: (cell) => {
-        const value = cell.getValue();
-        if (!value) {
-          return;
-        }
-        const element = value.truncate();
-        if (!tooltip) {
-          return element;
-        }
-        return /* @__PURE__ */ import_react17.default.createElement(import_react_ui6.Tooltip.Provider, null, /* @__PURE__ */ import_react17.default.createElement(import_react_ui6.Tooltip.Root, null, /* @__PURE__ */ import_react17.default.createElement(import_react_ui6.Tooltip.Trigger, null, element), /* @__PURE__ */ import_react17.default.createElement(import_react_ui6.Tooltip.Portal, null, /* @__PURE__ */ import_react17.default.createElement(import_react_ui6.Tooltip.Content, {
-          side: "right"
-        }, /* @__PURE__ */ import_react17.default.createElement(import_react_ui6.Tooltip.Arrow, null), /* @__PURE__ */ import_react17.default.createElement(import_react16.ClipboardText, {
-          onClick: (ev) => {
-            ev.stopPropagation();
-            void navigator.clipboard.writeText(value.toHex());
-          }
-        })))));
-      },
-      ...props,
-      meta: {
-        ...props.meta,
-        cell: {
-          ...props.meta?.cell,
-          classNames: [
-            "font-mono",
-            textPadding,
-            classNames
-          ]
-        }
-      }
-    };
-  }
-  /**
-  * Row selector
-  */
-  selectRow({ classNames, onUpdate, id = "selectRow" } = {}) {
-    return {
-      id,
-      size: import_react_ui_grid2.defaultSizeRow,
-      enableResizing: false,
-      meta: {
-        onUpdate,
-        cell: {
-          classNames
-        }
-      },
-      header: ({ table }) => {
-        const { rowsSelectable } = useTableContext();
-        const checked = table.getIsSomeRowsSelected() ? "indeterminate" : table.getIsAllRowsSelected();
-        return rowsSelectable === "multi" ? /* @__PURE__ */ import_react17.default.createElement("div", {
-          className: "flex justify-center w-full h-full",
-          role: "presentation"
-        }, /* @__PURE__ */ import_react17.default.createElement(import_react_ui6.Input.Root, null, /* @__PURE__ */ import_react17.default.createElement(import_react_ui6.Input.Checkbox, {
-          size: 4,
-          classNames: [
-            "mli-auto",
-            classNames
-          ],
-          checked,
-          onCheckedChange: () => table.toggleAllRowsSelected()
-        }))) : null;
-      },
-      cell: RowSelectorBuilderCell
-    };
-  }
-  /**
-  * Switch
-  */
-  switch({ label, classNames, onUpdate, ...props } = {}) {
-    return {
-      size: 50,
-      minSize: 50,
-      header: (column) => label ?? column.header.id,
-      // TODO(zan): Implement sort algorithm.
-      enableSorting: true,
-      cell: SwitchBuilderCell,
-      ...props,
-      meta: {
-        ...props.meta,
-        onUpdate,
-        cell: {
-          ...props.meta?.cell,
-          classNames: [
-            textPadding,
-            classNames
-          ]
-        }
-      }
-    };
-  }
-  /**
-  * Icon based on boolean value.
-  */
-  icon({ label, size, on, off, ...props } = {}) {
-    const IconOn = on?.Icon ?? import_react16.Check;
-    const IconOff = off?.Icon ?? import_react16.X;
-    return {
-      size: size ?? import_react_ui_grid2.defaultSizeRow,
-      // TODO(zan): Implement sort algorithm.
-      enableSorting: false,
-      header: (column) => /* @__PURE__ */ import_react17.default.createElement("div", {
-        className: "justify-center"
-      }, label ?? column.header.id),
-      cell: (cell) => {
-        const value = cell.getValue();
-        if (value) {
-          return /* @__PURE__ */ import_react17.default.createElement(IconOn, {
-            className: (0, import_react_ui_theme5.mx)("block mli-auto", (0, import_react_ui_theme5.getSize)(6), on?.className ?? "text-green-700")
-          });
-        } else if (value === false) {
-          return /* @__PURE__ */ import_react17.default.createElement(IconOff, {
-            className: (0, import_react_ui_theme5.mx)("block mli-auto", (0, import_react_ui_theme5.getSize)(6), off?.className ?? "text-red-700")
-          });
-        } else {
-          return null;
-        }
-      },
-      ...props
-    };
-  }
-  /**
-  * This display column type is for nested/unhandled data to appear as JSON.
-  */
-  json({ label, classNames, ...props } = {}) {
-    return {
-      size: 120,
-      minSize: 120,
-      header: (cell) => label ?? cell.header.id,
-      cell: (cell) => {
-        const value = cell.getValue();
-        return /* @__PURE__ */ import_react17.default.createElement("div", {
-          className: "overflow-scroll"
-        }, /* @__PURE__ */ import_react17.default.createElement("code", {
-          className: "text-xs"
-        }, JSON.stringify(value)));
-      },
-      ...props,
-      meta: {
-        ...props.meta,
-        cell: {
-          ...props.meta?.cell,
-          classNames: [
-            "font-mono",
-            textPadding,
-            classNames
-          ]
-        }
-      }
-    };
-  }
-};
-var schemaToColumnDefs = (schema) => {
-  const { helper, builder } = createColumnBuilder();
-  return (0, import_schema.mapSchemaToFields)(schema).map(({ property, type, format: format2 }) => {
-    const propertyKey = property.toString();
-    if (!format2) {
-      switch (type) {
-        case import_echo_schema2.TypeEnum.String: {
-          return helper.accessor(propertyKey, builder.string({
-            label: propertyKey,
-            classNames: [
-              property === "id" && "font-mono"
-            ]
-          }));
-        }
-        case import_echo_schema2.TypeEnum.Number: {
-          return helper.accessor(propertyKey, builder.number({
-            label: propertyKey
-          }));
-        }
-        case import_echo_schema2.TypeEnum.Boolean: {
-          return helper.accessor(propertyKey, builder.switch({
-            label: propertyKey
-          }));
-        }
-        default: {
-          throw new Error(`Unhandled scalar type: ${type}`);
-        }
-      }
-    }
-    switch (format2) {
-      case import_echo_schema3.FormatEnum.Date: {
-        return helper.accessor(propertyKey, builder.date({
-          label: propertyKey
-        }));
-      }
-      case import_echo_schema3.FormatEnum.JSON: {
-        return helper.accessor(propertyKey, builder.json({
-          label: propertyKey,
-          id: propertyKey
-        }));
-      }
-      default: {
-        throw new Error(`Unhandled format: ${format2}`);
-      }
-    }
-  });
-};
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  CellCombobox,
-  ColumnBuilder,
-  ColumnMenu,
-  ColumnSettings,
-  MemoizedVirtualizedTableContent,
-  SortIndicator,
-  TABLE_NAME,
-  Table,
-  TablePrimitive,
-  TableProvider,
-  TableRootContext,
-  createColumnBuilder,
-  currentRow,
-  flushPadding,
-  gridCellFocusRing,
-  groupTh,
-  headPadding,
-  schemaToColumnDefs,
-  selectedRow,
-  tableRoot,
-  tbodyRoot,
-  tbodyTr,
-  tdRoot,
-  textPadding,
-  theadResizeRoot,
-  theadRoot,
-  theadTh,
-  theadTr,
-  translations,
-  useColumnResizing,
-  useColumnSorting,
-  usePinLastRow,
-  useRowSelection,
-  useSortColumn,
-  useTableContext,
-  useTableRootContext
-});
-//# sourceMappingURL=index.cjs.map