@dxos/react-ui-table 0.3.3-main.006ca4d

package/dist/lib/browser/index.mjs

@@ -0,0 +1,844 @@
+// packages/ui/react-ui-table/src/components/ColumnMenu.tsx
+import { Check, CaretDown, Trash, X } from "@phosphor-icons/react";
+import React, { useRef, useState } from "react";
+import { Button, DensityProvider, Input, Popover, Select, Separator } from "@dxos/react-ui";
+import { getSize, mx } from "@dxos/react-ui-theme";
+import { safeParseInt } from "@dxos/util";
+
+// packages/ui/react-ui-table/src/schema.ts
+var columnTypes = /* @__PURE__ */ new Map([
+  [
+    "string",
+    "Text"
+  ],
+  [
+    "boolean",
+    "Checkbox"
+  ],
+  [
+    "number",
+    "Number"
+  ],
+  [
+    "date",
+    "Date"
+  ],
+  [
+    "ref",
+    "Reference"
+  ]
+]);
+
+// packages/ui/react-ui-table/src/components/ColumnMenu.tsx
+var ColumnMenu = ({ column, ...props }) => {
+  const title = column.label?.length ? column.label : column.id;
+  return /* @__PURE__ */ React.createElement("div", {
+    className: "flex grow items-center overflow-hidden"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "truncate",
+    title
+  }, title), /* @__PURE__ */ React.createElement("div", {
+    className: "grow"
+  }), /* @__PURE__ */ React.createElement("div", {
+    className: "flex shrink-0"
+  }, /* @__PURE__ */ React.createElement(ColumnPanel, {
+    ...props,
+    column
+  })));
+};
+var Section = ({ children, className }) => /* @__PURE__ */ React.createElement("div", {
+  role: "none",
+  className: mx("p-2", className)
+}, children);
+var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete }) => {
+  const [open, setOpen] = useState(false);
+  const [prop, setProp] = useState(column.id);
+  const [refTable, setRefTable] = useState(column.refTable);
+  const [refProp, setRefProp] = useState(column.refProp);
+  const [type, setType] = useState(String(column.type));
+  const [label, setLabel] = useState(column.label);
+  const [digits, setDigits] = useState(String(column.digits ?? "0"));
+  const propRef = useRef(null);
+  const handleCancel = () => {
+    setProp(column.id);
+    setOpen(false);
+  };
+  const handleSave = () => {
+    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?.(prop, {
+      id: prop,
+      prop,
+      label,
+      type,
+      refTable,
+      refProp,
+      digits: safeParseInt(digits)
+    });
+    setOpen(false);
+  };
+  return /* @__PURE__ */ React.createElement(Popover.Root, {
+    open,
+    onOpenChange: (nextOpen) => setOpen(nextOpen)
+  }, /* @__PURE__ */ React.createElement(Popover.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React.createElement(Button, {
+    variant: "ghost",
+    classNames: "p-0"
+  }, /* @__PURE__ */ React.createElement(CaretDown, {
+    className: getSize(4)
+  }))), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, null, /* @__PURE__ */ React.createElement(Popover.Viewport, {
+    classNames: "w-60"
+  }, /* @__PURE__ */ React.createElement(DensityProvider, {
+    density: "fine"
+  }, /* @__PURE__ */ React.createElement("div", {
+    className: "flex flex-col gap-1"
+  }, /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
+    classNames: "mbe-1"
+  }, "Label"), /* @__PURE__ */ React.createElement(Input.TextInput, {
+    placeholder: "Column label",
+    value: label ?? "",
+    onChange: (event) => setLabel(event.target.value),
+    autoFocus: true
+  })), /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
+    classNames: "mbe-1 mbs-3"
+  }, "Property"), /* @__PURE__ */ React.createElement(Input.TextInput, {
+    ref: propRef,
+    placeholder: "Property key",
+    // TODO(burdon): Provide hooks for value normalization, ENTER, ESC, etc.
+    value: prop ?? "",
+    onChange: (event) => setProp(event.target.value.replace(/[^\w_]/g, ""))
+  })), /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
+    classNames: "mbe-1 mbs-3"
+  }, "Type"), /* @__PURE__ */ React.createElement(Select.Root, {
+    value: type,
+    onValueChange: setType
+  }, /* @__PURE__ */ React.createElement(Select.TriggerButton, {
+    placeholder: "Type",
+    classNames: "is-full"
+  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, Array.from(columnTypes.entries()).map(([type2, label2]) => /* @__PURE__ */ React.createElement(Select.Option, {
+    key: type2,
+    value: type2
+  }, label2)))))))), type === "number" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
+    classNames: "mbe-1 mbs-3"
+  }, "Decimal places"), /* @__PURE__ */ React.createElement(Input.TextInput, {
+    value: digits ?? "",
+    onChange: (event) => setDigits(event.target.value)
+  })))), type === "ref" && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Section, null, /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
+    classNames: "mbe-1 mbs-3"
+  }, "Table"), /* @__PURE__ */ React.createElement(Select.Root, {
+    value: refTable,
+    onValueChange: setRefTable
+  }, /* @__PURE__ */ React.createElement(Select.TriggerButton, {
+    placeholder: "Table",
+    classNames: "is-full"
+  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, tableDefs.filter((t) => t.id !== tableDef.id).map(({ id, name }) => /* @__PURE__ */ React.createElement(Select.Option, {
+    key: id,
+    value: id
+  }, name ?? id))))))), refTable && /* @__PURE__ */ React.createElement(Input.Root, null, /* @__PURE__ */ React.createElement(Input.Label, {
+    classNames: "mbe-1 mbs-3"
+  }, "Table property"), /* @__PURE__ */ React.createElement(Select.Root, {
+    value: refProp,
+    onValueChange: setRefProp
+  }, /* @__PURE__ */ React.createElement(Select.TriggerButton, {
+    placeholder: "Property",
+    classNames: "is-full"
+  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, tableDefs.find((tableDef2) => tableDef2.id === refTable)?.columns.map(({ id, label: label2 }) => /* @__PURE__ */ React.createElement(Select.Option, {
+    key: id,
+    value: id
+  }, label2 ?? id))))))))), /* @__PURE__ */ React.createElement(Separator, {
+    classNames: "mli-2"
+  }), /* @__PURE__ */ React.createElement(Section, {
+    className: "space-b-1.5"
+  }, /* @__PURE__ */ React.createElement(Button, {
+    variant: "primary",
+    classNames: "is-full flex gap-2",
+    onClick: handleSave
+  }, /* @__PURE__ */ React.createElement("span", null, "Save"), /* @__PURE__ */ React.createElement("div", {
+    className: "grow"
+  }), /* @__PURE__ */ React.createElement(Check, {
+    className: getSize(5)
+  })), /* @__PURE__ */ React.createElement(Button, {
+    classNames: "is-full flex gap-2",
+    onClick: handleCancel
+  }, /* @__PURE__ */ React.createElement("span", null, "Cancel"), /* @__PURE__ */ React.createElement("div", {
+    className: "grow"
+  }), /* @__PURE__ */ React.createElement(X, {
+    className: getSize(5)
+  })), /* @__PURE__ */ React.createElement(Button, {
+    classNames: "is-full flex gap-2",
+    onClick: () => onDelete?.(column.id)
+  }, /* @__PURE__ */ React.createElement("span", null, "Delete"), /* @__PURE__ */ React.createElement("div", {
+    className: "grow"
+  }), /* @__PURE__ */ React.createElement(Trash, {
+    className: getSize(5)
+  })))))), /* @__PURE__ */ React.createElement(Popover.Arrow, null))));
+};
+
+// packages/ui/react-ui-table/src/components/Table.tsx
+import { flexRender, getCoreRowModel, getGroupedRowModel, useReactTable } from "@tanstack/react-table";
+import React2, { Fragment, useEffect, useRef as useRef2, useState as useState2 } from "react";
+import { debounce } from "@dxos/async";
+import { groupBorder, inputSurface, mx as mx2 } from "@dxos/react-ui-theme";
+
+// packages/ui/react-ui-table/src/theme.ts
+import { chromeSurface } from "@dxos/react-ui-theme";
+var defaultTableSlots = {
+  // TODO(burdon): head/body/table rows.
+  header: {
+    className: [
+      chromeSurface,
+      "px-2 font-light select-none"
+    ]
+  },
+  footer: {
+    className: [
+      chromeSurface,
+      "px-2 font-light"
+    ]
+  },
+  // cell: { className: 'px-2' },
+  // TODO(burdon): Compact mode.
+  // TODO(burdon): No hover if editing.
+  // row: { className: 'cursor-pointer hover:bg-neutral-50 dark:hover:bg-neutral-800' },
+  group: {
+    className: "px-2 font-light text-xs text-left"
+  },
+  focus: {
+    className: "ring ring-primary-600 ring-inset"
+  },
+  selected: {
+    className: "!bg-teal-100 dark:!bg-teal-700"
+  }
+};
+
+// packages/ui/react-ui-table/src/components/Table.tsx
+var updateSelection = (selectionState, id, selection) => {
+  switch (selection) {
+    case "single": {
+      return {
+        [id]: true
+      };
+    }
+    case "single-toggle": {
+      return selectionState[id] ? {} : {
+        [id]: true
+      };
+    }
+    case "multiple": {
+      return {
+        [id]: true,
+        ...selectionState
+      };
+    }
+    case "multiple-toggle": {
+      if (selectionState[id]) {
+        const newSelectionState = {
+          ...selectionState
+        };
+        delete newSelectionState[id];
+        return newSelectionState;
+      } else {
+        return {
+          [id]: true,
+          ...selectionState
+        };
+      }
+    }
+  }
+  return selectionState;
+};
+var Table = ({ slots = defaultTableSlots, ...props }) => {
+  const { data = [], columns = [], onColumnResize, columnVisibility, header = true, footer, select, selected, onSelectedChange, fullWidth, pinToBottom, debug } = props;
+  const [focus, setFocus] = useState2();
+  const [rowSelection, setRowSelection] = useState2({});
+  useEffect(() => {
+    setRowSelection(selected?.reduce((selectionState, selected2) => {
+      const row = table.getRowModel().rows.find((row2) => row2.original === selected2);
+      if (row) {
+        selectionState[row.id] = true;
+      }
+      return selectionState;
+    }, {}) ?? {});
+  }, [
+    select,
+    selected
+  ]);
+  const [columnSizingInfo, setColumnSizingInfo] = useState2({});
+  const onColumnResizeDebounced = debounce((info) => onColumnResize?.(info), 500);
+  useEffect(() => {
+    if (columnSizingInfo.columnSizingStart?.length === 0) {
+      onColumnResizeDebounced(table.getState().columnSizing);
+    }
+  }, [
+    columnSizingInfo
+  ]);
+  const [grouping, setGrouping] = useState2(props.grouping ?? []);
+  useEffect(() => setGrouping(props.grouping ?? []), [
+    props.grouping
+  ]);
+  const table = useReactTable({
+    data,
+    columns,
+    defaultColumn: {
+      size: 400,
+      maxSize: 800
+    },
+    getCoreRowModel: getCoreRowModel(),
+    meta: {},
+    // TODO(burdon): Pagination.
+    // TODO(burdon): Sorting.
+    // TODO(burdon): Filtering.
+    state: {
+      columnVisibility,
+      columnSizingInfo,
+      rowSelection,
+      grouping
+    },
+    // Grouping.
+    getGroupedRowModel: getGroupedRowModel(),
+    onGroupingChange: setGrouping,
+    // Selection.
+    enableRowSelection: select === "single" || select === "single-toggle",
+    enableMultiRowSelection: select === "multiple" || select === "multiple-toggle",
+    onRowSelectionChange: (rows) => {
+      setRowSelection(rows);
+    },
+    // Resize columns.
+    // TODO(burdon): Drag to re-order columns.
+    columnResizeMode: "onChange",
+    enableColumnResizing: true,
+    onColumnSizingInfoChange: setColumnSizingInfo,
+    debugTable: debug
+  });
+  const expand = false;
+  const containerRef = usePinToBottom(data, pinToBottom);
+  const handleSelect = (row) => {
+    if (select) {
+      setRowSelection((selectionState) => {
+        const newSelectionState = updateSelection(selectionState, row.id, select);
+        if (onSelectedChange) {
+          const rows = Object.keys(newSelectionState).map((id) => table.getRowModel().rowsById[id].original);
+          onSelectedChange(rows);
+        }
+        return newSelectionState;
+      });
+    } else {
+      onSelectedChange?.([
+        row.original
+      ]);
+    }
+  };
+  return /* @__PURE__ */ React2.createElement("div", {
+    ref: containerRef,
+    className: mx2("grow overflow-auto", slots?.root?.className)
+  }, /* @__PURE__ */ React2.createElement("table", {
+    // Styles:
+    // table-fixed: Prevents fixed sized columns from shrinking.
+    className: mx2(!fullWidth && "table-fixed", inputSurface, slots?.table?.className),
+    style: {
+      width: fullWidth ? "100%" : table.getTotalSize()
+    }
+  }, /* @__PURE__ */ React2.createElement(TableHead, {
+    ...props,
+    slots,
+    header,
+    state: table.getState(),
+    headers: table.getHeaderGroups()
+  }), grouping.length === 0 && /* @__PURE__ */ React2.createElement(TableBody, {
+    ...props,
+    slots,
+    rowSelection,
+    expand,
+    focus,
+    onFocus: setFocus,
+    onSelect: handleSelect,
+    rows: table.getRowModel().rows
+  }), grouping.length !== 0 && table.getGroupedRowModel().rows.map((row, i) => {
+    return /* @__PURE__ */ React2.createElement(Fragment, {
+      key: i
+    }, /* @__PURE__ */ React2.createElement("thead", null, /* @__PURE__ */ React2.createElement("tr", null, slots?.margin && /* @__PURE__ */ React2.createElement("th", {
+      className: mx2(slots?.margin?.className)
+    }), debug && /* @__PURE__ */ React2.createElement("th", null), /* @__PURE__ */ React2.createElement("th", {
+      // TODO(burdon): Calculate row span.
+      colSpan: table.getHeaderGroups()[0].headers.length,
+      className: mx2("text-left", slots?.group?.className)
+    }, table.getState().grouping[0], "[", String(row.getGroupingValue(table.getState().grouping[0])), "]"))), /* @__PURE__ */ React2.createElement(TableBody, {
+      ...props,
+      slots,
+      rowSelection,
+      expand,
+      focus,
+      onFocus: setFocus,
+      onSelect: handleSelect,
+      rows: row.subRows
+    }));
+  }), footer && /* @__PURE__ */ React2.createElement(TableFoot, {
+    ...props,
+    slots,
+    footers: table.getFooterGroups()
+  })), debug && /* @__PURE__ */ React2.createElement("pre", {
+    className: "font-mono text-xs text-neutral-500 my-4 p-2 ring"
+  }, /* @__PURE__ */ React2.createElement("code", null, JSON.stringify(table.getState(), void 0, 2))));
+};
+var usePinToBottom = (data, pinToBottom) => {
+  const containerRef = useRef2(null);
+  const [stickyScrolling, setStickyScrolling] = useState2(true);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!pinToBottom || !container) {
+      return;
+    }
+    const handler = () => {
+      const bottom = container.scrollHeight - container.scrollTop - container.clientHeight === 0;
+      setStickyScrolling(bottom);
+    };
+    container.addEventListener("scroll", handler);
+    return () => container.removeEventListener("scroll", handler);
+  }, []);
+  useEffect(() => {
+    if (!pinToBottom || !containerRef.current || !stickyScrolling) {
+      return;
+    }
+    containerRef.current?.scroll({
+      top: containerRef.current.scrollHeight
+    });
+  }, [
+    data
+  ]);
+  return containerRef;
+};
+var TableHead = ({ state, headers, expand, header, debug, fullWidth, border, slots }) => {
+  return /* @__PURE__ */ React2.createElement("thead", {
+    className: mx2(header ? [
+      "sticky top-0 z-10"
+    ] : "collapse")
+  }, headers.map((headerGroup) => {
+    return (
+      // Group element to hover resize handles.
+      /* @__PURE__ */ React2.createElement("tr", {
+        key: headerGroup.id,
+        className: "font-light group"
+      }, slots?.margin && /* @__PURE__ */ React2.createElement("th", {
+        className: mx2(slots?.margin?.className)
+      }), debug && /* @__PURE__ */ React2.createElement("th", {
+        className: "text-left",
+        style: {
+          width: 32
+        }
+      }, "#"), headerGroup.headers.map((header2) => {
+        return /* @__PURE__ */ React2.createElement("th", {
+          key: header2.id,
+          style: {
+            // Don't set width if fullWidth and no explicit size.
+            width: fullWidth && header2.column.columnDef.meta?.expand ? void 0 : header2.getSize()
+          },
+          // Relative for resize handle.
+          // TODO(burdon): Border scrolls with main content.
+          //  https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element
+          className: mx2("relative text-left", border && groupBorder, slots?.header?.className, header2.column.columnDef.meta?.slots?.header?.className)
+        }, !header2 || header2.isPlaceholder ? null : flexRender(header2.column.columnDef.header, header2.getContext()), header2.column.columnDef.meta?.resizable && /* @__PURE__ */ React2.createElement("div", {
+          className: mx2("absolute top-0 pl-1 h-full z-[10] w-[7px] -right-[5px]", "cursor-col-resize select-none touch-none opacity-20 hover:opacity-100", header2.column.getIsResizing() && "hidden"),
+          style: {
+            transform: header2.column.getIsResizing() ? `translateX(${state.columnSizingInfo.deltaOffset}px)` : void 0
+          },
+          onMouseDown: header2.getResizeHandler(),
+          onTouchStart: header2.getResizeHandler()
+        }, /* @__PURE__ */ React2.createElement("div", {
+          className: "flex group-hover:bg-neutral-700 -ml-[2px] w-[1px] h-full"
+        })));
+      }), expand && /* @__PURE__ */ React2.createElement("th", null), slots?.margin && /* @__PURE__ */ React2.createElement("th", {
+        className: mx2(slots?.margin?.className)
+      }))
+    );
+  }));
+};
+var TableBody = ({ keyAccessor, rows, rowSelection, focus, onFocus, onSelect, debug, border, expand, slots }) => {
+  return /* @__PURE__ */ React2.createElement("tbody", null, rows.map((row) => {
+    return /* @__PURE__ */ React2.createElement("tr", {
+      key: keyAccessor ? keyAccessor(row.original) : row.id,
+      onClick: () => onSelect?.(row),
+      role: "button",
+      className: mx2("group", rowSelection[row.id] && slots?.selected?.className, focus === row.id && slots?.focus?.className, slots?.row?.className)
+    }, slots?.margin && /* @__PURE__ */ React2.createElement("td", {
+      className: mx2(slots?.margin?.className)
+    }, /* @__PURE__ */ React2.createElement("button", {
+      role: "button",
+      style: {
+        width: 1,
+        height: 1
+      },
+      className: "focus:outline-none",
+      onFocus: () => onFocus?.(keyAccessor ? keyAccessor(row.original) : row.id),
+      onBlur: () => onFocus?.(void 0),
+      onKeyDown: (event) => {
+        switch (event.key) {
+          case "ArrowUp": {
+            break;
+          }
+          case "ArrowDown": {
+            break;
+          }
+        }
+      }
+    })), debug && /* @__PURE__ */ React2.createElement("td", null, row.id), row.getVisibleCells().map((cell) => {
+      return /* @__PURE__ */ React2.createElement("td", {
+        key: cell.id,
+        className: mx2(border && groupBorder, cell.column.columnDef.meta?.slots?.cell?.className)
+      }, flexRender(cell.column.columnDef.cell, {
+        className: "px-2",
+        ...cell.getContext()
+      }));
+    }), expand && /* @__PURE__ */ React2.createElement("td", null), slots?.margin && /* @__PURE__ */ React2.createElement("td", {
+      className: mx2(slots?.margin?.className)
+    }));
+  }));
+};
+var TableFoot = ({ footers, expand, slots, debug, border }) => {
+  return /* @__PURE__ */ React2.createElement("tfoot", {
+    className: mx2("sticky bottom-0 z-[10]", slots?.footer?.className)
+  }, footers.map((footerGroup) => /* @__PURE__ */ React2.createElement("tr", {
+    key: footerGroup.id,
+    className: "font-thin"
+  }, slots?.margin && /* @__PURE__ */ React2.createElement("th", {
+    className: mx2(slots?.margin?.className)
+  }), debug && /* @__PURE__ */ React2.createElement("th", null), footerGroup.headers.map((footer) => {
+    return /* @__PURE__ */ React2.createElement("th", {
+      key: footer.id,
+      className: mx2(border && groupBorder, "text-left", slots?.footer?.className, footer.column.columnDef.meta?.slots?.footer?.className)
+    }, footer.isPlaceholder ? null : flexRender(footer.column.columnDef.footer, footer.getContext()));
+  }), expand && /* @__PURE__ */ React2.createElement("th", null), slots?.margin && /* @__PURE__ */ React2.createElement("th", {
+    className: mx2(slots?.margin?.className)
+  }))));
+};
+
+// packages/ui/react-ui-table/src/helpers.tsx
+import { useFocusFinders } from "@fluentui/react-tabster";
+import { Check as Check2, ClipboardText, X as X2 } from "@phosphor-icons/react";
+import { createColumnHelper } from "@tanstack/react-table";
+import format from "date-fns/format";
+import formatDistanceToNow from "date-fns/formatDistanceToNow";
+import defaultsDeep from "lodash.defaultsdeep";
+import React3, { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
+import { ComboBox, Input as Input2, Tooltip } from "@dxos/react-ui";
+import { getSize as getSize2, mx as mx3 } from "@dxos/react-ui-theme";
+import { stripUndefinedValues } from "@dxos/util";
+var findNextFocusable = (findFirstFocusable, container) => {
+  const next = findFirstFocusable(container);
+  if (next) {
+    if (next?.tagName === "INPUT") {
+      return next;
+    }
+    if (container.nextElementSibling) {
+      return findNextFocusable(findFirstFocusable, container.nextSibling);
+    }
+  }
+};
+var createColumnBuilder = () => ({
+  helper: createColumnHelper(),
+  builder: new ColumnBuilder()
+});
+var defaults = (options, ...sources) => {
+  return stripUndefinedValues(defaultsDeep({}, options, ...sources));
+};
+var CellSelector = ({ model, value: _value, onUpdate }) => {
+  const [edit, setEdit] = useState3(false);
+  const [value, setValue] = useState3();
+  useEffect2(() => setValue(_value ? {
+    id: model.getId(_value),
+    label: model.getText(_value)
+  } : void 0), [
+    _value
+  ]);
+  const [items, setItems] = useState3([]);
+  const handleUpdate = async (text) => {
+    const items2 = await model.query(text);
+    setItems(items2.map((item) => ({
+      id: model.getId(item),
+      label: model.getText(item),
+      data: item
+    })));
+  };
+  if (!edit) {
+    const text = _value ? model.getText(_value) : void 0;
+    return (
+      // TODO(burdon): Hack to prevent div from collapsing.
+      /* @__PURE__ */ React3.createElement("div", {
+        className: mx3("w-full px-2", !text && "opacity-0"),
+        onClick: () => setEdit(true)
+      }, text ?? "-")
+    );
+  }
+  return /* @__PURE__ */ React3.createElement(ComboBox.Root, {
+    items,
+    value,
+    onChange: (value2) => onUpdate(value2?.data),
+    onInputChange: handleUpdate
+  }, /* @__PURE__ */ React3.createElement(ComboBox.Input, null), /* @__PURE__ */ React3.createElement(ComboBox.Content, null, items.map((item) => /* @__PURE__ */ React3.createElement(ComboBox.Item, {
+    key: item.id,
+    item
+  }, item.label))));
+};
+var ColumnBuilder = class {
+  /**
+  * Select value
+  */
+  select({ label, className, model, onUpdate, ...props }) {
+    return defaults(props, {
+      minSize: 100,
+      header: (column) => {
+        return /* @__PURE__ */ React3.createElement("div", {
+          className: "truncate"
+        }, label ?? column.header.id);
+      },
+      cell: model && onUpdate ? (cell) => /* @__PURE__ */ React3.createElement(CellSelector, {
+        model,
+        value: cell.getValue(),
+        onUpdate: (value) => onUpdate?.(cell.row.original, cell.column.id, value)
+      }) : (cell) => {
+        const value = cell.getValue();
+        return /* @__PURE__ */ React3.createElement("div", {
+          className: mx3("truncate", className)
+        }, value ? model.getText(value) : "");
+      }
+    });
+  }
+  /**
+  * String formats.
+  */
+  string({ label, className, onUpdate, ...props } = {}) {
+    return defaults(props, {
+      minSize: 100,
+      // TODO(burdon): Default.
+      header: (column) => {
+        return /* @__PURE__ */ React3.createElement("div", {
+          className: "truncate"
+        }, label ?? column.header.id);
+      },
+      cell: onUpdate ? (cell) => {
+        const initialValue = cell.getValue();
+        const [value, setValue] = useState3(initialValue);
+        const inputRef = useRef3(null);
+        const { findFirstFocusable } = useFocusFinders();
+        const handleSave = (focusNext = false) => {
+          if (value === initialValue) {
+            return;
+          }
+          onUpdate?.(cell.row.original, cell.column.id, value);
+          if (focusNext) {
+            const rowElement = inputRef.current?.parentElement?.parentElement;
+            setTimeout(() => {
+              const next = findNextFocusable(findFirstFocusable, rowElement);
+              next?.focus();
+            });
+          }
+        };
+        const handleCancel = () => {
+          setValue(initialValue);
+        };
+        const rows = cell.table.getRowModel().flatRows;
+        const columns = cell.table.getVisibleFlatColumns();
+        const placeholder = cell.row.index === rows.length - 1 && columns[0].id === cell.column.id;
+        return /* @__PURE__ */ React3.createElement(Input2.Root, null, /* @__PURE__ */ React3.createElement(Input2.TextInput, {
+          ref: inputRef,
+          variant: "subdued",
+          placeholder: placeholder ? "Add row..." : void 0,
+          classNames: "px-2",
+          value: value ?? "",
+          onBlur: () => handleSave(false),
+          onChange: (event) => setValue(event.target.value),
+          onKeyDown: (event) => event.key === "Enter" && handleSave(true) || event.key === "Escape" && handleCancel()
+        }));
+      } : (cell) => {
+        const value = cell.getValue();
+        return /* @__PURE__ */ React3.createElement("div", {
+          className: mx3("truncate", className)
+        }, value);
+      }
+    });
+  }
+  /**
+  * Number formats.
+  */
+  number({ label, minSize, className, digits, onUpdate, ...props } = {}) {
+    return defaults(props, {
+      size: 100,
+      minSize: 100,
+      header: (cell) => /* @__PURE__ */ React3.createElement("div", {
+        className: "w-full truncate text-right"
+      }, label ?? cell.header.id),
+      cell: (cell) => {
+        const value = cell.getValue();
+        const [text, setText] = useState3();
+        const handleEdit = () => {
+          if (onUpdate) {
+            setText(value !== void 0 ? String(value) : "");
+          }
+        };
+        const handleSave = () => {
+          const value2 = text?.trim().length ? Number(text) : NaN;
+          onUpdate?.(cell.row.original, cell.column.id, isNaN(value2) ? void 0 : value2);
+          setText(void 0);
+        };
+        const handleCancel = () => {
+          setText(void 0);
+        };
+        if (text !== void 0) {
+          return /* @__PURE__ */ React3.createElement("div", {
+            className: mx3("grow text-right font-mono", className)
+          }, /* @__PURE__ */ React3.createElement(Input2.Root, null, /* @__PURE__ */ React3.createElement(Input2.TextInput, {
+            autoFocus: true,
+            value: text,
+            classNames: "px-2",
+            onBlur: handleSave,
+            onChange: (event) => setText(event.target.value),
+            onKeyDown: (event) => event.key === "Escape" && handleCancel() || event.key === "Enter" && handleSave()
+          })));
+        }
+        return /* @__PURE__ */ React3.createElement("div", {
+          className: mx3('grow w-full text-right font-mono empty:after:content-["\xA0"]', className),
+          onClick: handleEdit
+        }, value?.toLocaleString(void 0, {
+          minimumFractionDigits: digits ?? 0,
+          maximumFractionDigits: digits ?? 2
+        }));
+      }
+    });
+  }
+  /**
+  * Date formats.
+  */
+  // TODO(burdon): Date picker (pluggable renderers?)
+  date({ label, format: formatSpec, relative, className, ...props } = {}) {
+    return defaults(props, {
+      size: 220,
+      minSize: 100,
+      header: (cell) => /* @__PURE__ */ React3.createElement("div", null, label ?? cell.header.id),
+      cell: (cell) => {
+        const value = cell.getValue();
+        try {
+          const str = value ? formatSpec ? format(value, formatSpec) : relative ? formatDistanceToNow(value, {
+            addSuffix: true
+          }) : value.toISOString() : void 0;
+          return /* @__PURE__ */ React3.createElement("div", {
+            className: mx3("font-mono", className)
+          }, str);
+        } catch (err) {
+          console.log(value);
+          return null;
+        }
+      }
+    });
+  }
+  /**
+  * PublicKey with tooltip.
+  */
+  key({ label, tooltip, ...props } = {}) {
+    return defaults(props, {
+      size: 86,
+      minSize: 86,
+      header: (cell) => /* @__PURE__ */ React3.createElement("div", null, label ?? cell.header.id),
+      cell: (cell) => {
+        const value = cell.getValue();
+        if (!value) {
+          return;
+        }
+        const element = /* @__PURE__ */ React3.createElement("div", {
+          className: "font-mono font-thin text-green-500 dark:text-green-300"
+        }, value.truncate());
+        if (!tooltip) {
+          return element;
+        }
+        return /* @__PURE__ */ React3.createElement("div", {
+          className: "group inline-flex gap-2 items-center"
+        }, /* @__PURE__ */ React3.createElement(Tooltip.Provider, null, /* @__PURE__ */ React3.createElement(Tooltip.Root, null, /* @__PURE__ */ React3.createElement(Tooltip.Trigger, {
+          asChild: true
+        }, element), /* @__PURE__ */ React3.createElement(Tooltip.Content, {
+          side: "right"
+        }, /* @__PURE__ */ React3.createElement(Tooltip.Arrow, null), /* @__PURE__ */ React3.createElement(ClipboardText, {
+          onClick: (ev) => {
+            ev.stopPropagation();
+            void navigator.clipboard.writeText(value.toHex());
+          }
+        })))));
+      }
+    });
+  }
+  /**
+  * Checkbox.
+  */
+  checkbox({ label, className, onUpdate, ...props } = {}) {
+    return defaults(props, {
+      size: 40,
+      minSize: 40,
+      header: (column) => /* @__PURE__ */ React3.createElement("div", {
+        className: "flex grow justify-center"
+      }, label ?? column.header.id),
+      cell: (cell) => {
+        const value = cell.getValue();
+        return /* @__PURE__ */ React3.createElement("div", {
+          className: "flex grow justify-center"
+        }, /* @__PURE__ */ React3.createElement(Input2.Root, null, /* @__PURE__ */ React3.createElement(Input2.Checkbox, {
+          onClick: (event) => event.stopPropagation(),
+          classNames: className,
+          disabled: !onUpdate,
+          checked: !!value,
+          onCheckedChange: (value2) => {
+            onUpdate?.(cell.row.original, cell.column.id, !!value2);
+          }
+        })));
+      }
+    });
+  }
+  /**
+  * Icon based on boolean value.
+  */
+  icon({ label, size, on, off, ...props } = {}) {
+    const IconOn = on?.Icon ?? Check2;
+    const IconOff = off?.Icon ?? X2;
+    return defaults(props, {
+      size: size ?? 32,
+      header: (column) => /* @__PURE__ */ React3.createElement("div", {
+        className: "justify-center"
+      }, label ?? column.header.id),
+      cell: (cell) => {
+        const value = cell.getValue();
+        if (value) {
+          return /* @__PURE__ */ React3.createElement("div", {
+            className: "flex grow justify-center"
+          }, /* @__PURE__ */ React3.createElement(IconOn, {
+            className: mx3(getSize2(6), on?.className ?? "text-green-700")
+          }));
+        } else if (value === false) {
+          return /* @__PURE__ */ React3.createElement("div", {
+            className: "flex grow justify-center"
+          }, /* @__PURE__ */ React3.createElement(IconOff, {
+            className: mx3(getSize2(6), off?.className ?? "text-red-700")
+          }));
+        } else {
+          return null;
+        }
+      }
+    });
+  }
+};
+export {
+  ColumnBuilder,
+  ColumnMenu,
+  ColumnPanel,
+  Table,
+  columnTypes,
+  createColumnBuilder,
+  defaultTableSlots,
+  updateSelection
+};
+//# sourceMappingURL=index.mjs.map