@dxos/react-ui-table 0.3.9-main.5167f76 → 0.3.9-main.52d137d

package/dist/lib/browser/index.mjs

@@ -1,45 +1,42 @@
 // 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 { Button, DensityProvider, Input, Popover, Select, Separator, useTranslation } 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/translations.ts
+var translationKey = "table";
+var translations_default = [
+  {
+    "en-US": {
+      [translationKey]: {
+        "no selection label": "\xA0",
+        "number column type label": "Number",
+        "boolean column type label": "Toggle",
+        "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"
+      }
+    }
+  }
+];
 
 // 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"
+    className: "flex items-center gap-2"
   }, /* @__PURE__ */ React.createElement("div", {
-    className: "truncate",
+    className: "flex-1 min-is-0 truncate",
     title
   }, title), /* @__PURE__ */ React.createElement("div", {
-    className: "grow"
-  }), /* @__PURE__ */ React.createElement("div", {
     className: "flex shrink-0"
   }, /* @__PURE__ */ React.createElement(ColumnPanel, {
     ...props,
@@ -59,6 +56,7 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
   const [label, setLabel] = useState(column.label);
   const [digits, setDigits] = useState(String(column.digits ?? "0"));
   const propRef = useRef(null);
+  const { t } = useTranslation(translationKey);
   const handleCancel = () => {
     setProp(column.id);
     setOpen(false);
@@ -93,7 +91,7 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
     asChild: true
   }, /* @__PURE__ */ React.createElement(Button, {
     variant: "ghost",
-    classNames: "p-0"
+    classNames: "p-1"
   }, /* @__PURE__ */ React.createElement(CaretDown, {
     className: getSize(4)
   }))), /* @__PURE__ */ React.createElement(Popover.Portal, null, /* @__PURE__ */ React.createElement(Popover.Content, null, /* @__PURE__ */ React.createElement(Popover.Viewport, {
@@ -104,14 +102,14 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
     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, {
+  }, t("column label 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, {
+  }, t("property key label")), /* @__PURE__ */ React.createElement(Input.TextInput, {
     ref: propRef,
     placeholder: "Property key",
     // TODO(burdon): Provide hooks for value normalization, ENTER, ESC, etc.
@@ -119,18 +117,23 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
     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, {
+  }, t("column type label")), /* @__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, {
+  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, [
+    "number",
+    "boolean",
+    "string",
+    "ref"
+  ].map((type2) => /* @__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, {
+  }, t(`${type2} column type label`))))))))), 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, {
+  }, t("digits label")), /* @__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, {
@@ -141,7 +144,7 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
   }, /* @__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, {
+  }), /* @__PURE__ */ React.createElement(Select.Portal, null, /* @__PURE__ */ React.createElement(Select.Content, null, /* @__PURE__ */ React.createElement(Select.Viewport, null, tableDefs.filter((t2) => t2.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, {
@@ -163,21 +166,23 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
     variant: "primary",
     classNames: "is-full flex gap-2",
     onClick: handleSave
-  }, /* @__PURE__ */ React.createElement("span", null, "Save"), /* @__PURE__ */ React.createElement("div", {
+  }, /* @__PURE__ */ React.createElement("span", null, t("save label")), /* @__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", {
+  }, /* @__PURE__ */ React.createElement("span", null, t("cancel label", {
+    ns: "os"
+  })), /* @__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", {
+  }, /* @__PURE__ */ React.createElement("span", null, t("delete label")), /* @__PURE__ */ React.createElement("div", {
     className: "grow"
   }), /* @__PURE__ */ React.createElement(Trash, {
     className: getSize(5)
@@ -187,6 +192,7 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { getCoreRowModel, getGroupedRowModel, useReactTable } from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import React6, { Fragment, useCallback, useEffect, useState as useState2 } from "react";
 import { debounce } from "@dxos/async";
 
@@ -202,7 +208,7 @@ var [TableProvider, useUntypedTableContext] = createContext(TABLE_NAME);
 var useTableContext = (consumerName) => useUntypedTableContext(consumerName);
 
 // packages/ui/react-ui-table/src/theme.ts
-import { chromeSurface, fixedSurface, focusRing, groupBorder, hoverColors, mx as mx2 } from "@dxos/react-ui-theme";
+import { chromeSurface, fixedSurface, focusRing, ghostSelected, ghostSelectedCurrent, groupBorder, mx as mx2 } from "@dxos/react-ui-theme";
 var currentRow = "!bg-neutral-75 !dark:bg-neutral-850";
 var selectedRow = "!bg-primary-100 dark:!bg-primary-700";
 var flushPadding = "pli-0 plb-0";
@@ -211,13 +217,13 @@ var headPadding = "pli-2 plb-1.5";
 var gridCellFocusRing = "focus:z-[11] focus:outline outline-2 outline-primary-500 dark:outline-primary-400";
 var tableRoot = ({ fullWidth }, ...etc) => mx2("table-fixed", fullWidth && "is-full", ...etc);
 var groupTh = (_props, ...etc) => mx2("text-start font-medium", flushPadding, ...etc);
-var theadRoot = ({ header }, ...etc) => mx2(header ? "sticky block-start-0 z-10" : "collapse", header && fixedSurface, ...etc);
+var theadRoot = ({ header, stickyHeader }, ...etc) => mx2(header ? stickyHeader && "sticky block-start-[--sticky-top] z-[1]" : "collapse", header && fixedSurface, ...etc);
 var theadTr = (_props, ...etc) => mx2("group", ...etc);
 var theadTh = ({ border }, ...etc) => mx2("relative text-start font-medium select-none truncate", headPadding, border && "border", border && groupBorder, ...etc);
 var theadResizeRoot = (_props, ...etc) => mx2("absolute top-0 pis-1 h-full z-[10] w-[7px] -right-[5px] cursor-col-resize select-none touch-none opacity-20 hover:opacity-100", ...etc);
 var theadResizeThumb = (_props, ...etc) => mx2("flex group-hover:bg-neutral-700 -ml-[2px] w-[1px] h-full", ...etc);
 var tbodyRoot = (_props, ...etc) => mx2(...etc);
-var tbodyTr = ({ isSelected, isCurrent, canBeCurrent }, ...etc) => mx2("group", isSelected ? selectedRow : isCurrent && currentRow, canBeCurrent && focusRing, canBeCurrent && hoverColors, canBeCurrent && "cursor-pointer rounded", ...etc);
+var tbodyTr = ({ canBeCurrent }, ...etc) => mx2("group", canBeCurrent ? ghostSelectedCurrent : ghostSelected, canBeCurrent && focusRing, canBeCurrent && "cursor-pointer rounded", ...etc);
 var tdRoot = ({ border, isGrid }, ...etc) => mx2("relative", flushPadding, border && "border", border && groupBorder, isGrid && gridCellFocusRing, ...etc);
 var tdContent = (_props, ...etc) => mx2(...etc);
 var tfootRoot = (_props, ...etc) => mx2("sticky block-end-0 z-10", chromeSurface, ...etc);
@@ -270,13 +276,14 @@ var TableBody = ({ rows }) => {
     return /* @__PURE__ */ React3.createElement("tr", {
       key: keyAccessor ? keyAccessor(row.original) : row.id,
       className: tbodyTr({
-        isSelected,
-        isCurrent,
         canBeCurrent
       }),
       ...isCurrent && {
         "aria-current": "location"
       },
+      ...isSelected && {
+        "aria-selected": "true"
+      },
       ...canBeCurrent && {
         tabIndex: 0,
         onClick: () => {
@@ -370,8 +377,57 @@ var TableHead = (_props) => {
 TableHead.displayName = TABLE_HEAD_NAME;
 
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
+var VirtualizedTableContent = ({ getScrollElement }) => {
+  const { table: { getRowModel } } = useTableContext("VirtualizedTableContent");
+  const rows = getRowModel().rows;
+  const { getTotalSize, getVirtualItems } = useVirtualizer({
+    getScrollElement,
+    count: rows.length,
+    overscan: 16,
+    estimateSize: () => 33
+  });
+  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;
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, paddingTop > 0 && /* @__PURE__ */ React6.createElement("tbody", {
+    role: "none"
+  }, /* @__PURE__ */ React6.createElement("tr", {
+    role: "none"
+  }, /* @__PURE__ */ React6.createElement("td", {
+    style: {
+      height: `${paddingTop}px`
+    },
+    role: "none"
+  }))), /* @__PURE__ */ React6.createElement(TableBody, {
+    rows: virtualRows.map((virtualRow) => rows[virtualRow.index])
+  }), paddingBottom > 0 && /* @__PURE__ */ React6.createElement("tbody", {
+    role: "none"
+  }, /* @__PURE__ */ React6.createElement("tr", {
+    role: "none"
+  }, /* @__PURE__ */ React6.createElement("td", {
+    style: {
+      height: `${paddingBottom}px`
+    },
+    role: "none"
+  }))));
+};
+var GroupedTableContent = () => {
+  const { table: { getGroupedRowModel: getGroupedRowModel1, getHeaderGroups, getState }, debug } = useTableContext("GroupedTableContent");
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, getGroupedRowModel1().rows.map((row, i) => {
+    return /* @__PURE__ */ React6.createElement(Fragment, {
+      key: i
+    }, /* @__PURE__ */ React6.createElement("thead", null, /* @__PURE__ */ React6.createElement("tr", null, debug && /* @__PURE__ */ React6.createElement("th", null), /* @__PURE__ */ React6.createElement("th", {
+      // TODO(burdon): Calculate row span.
+      colSpan: getHeaderGroups()[0].headers.length,
+      className: groupTh({})
+    }, getState().grouping[0], "[", String(row.getGroupingValue(getState().grouping[0])), "]"))), /* @__PURE__ */ React6.createElement(TableBody, {
+      rows: row.subRows
+    }));
+  }));
+};
 var Table = (props) => {
-  const { role, data = [], columns = [], onColumnResize, columnVisibility, header = true, footer, rowsSelectable, fullWidth, debug, onDataSelectionChange } = props;
+  const { role, data = [], columns = [], onColumnResize, columnVisibility, header = true, footer, rowsSelectable, fullWidth, debug, onDataSelectionChange, classNames, getScrollElement } = props;
   const TableProvider2 = TableProvider;
   const [rowSelection = {}, directlySetRowSelection] = useControllableState({
     prop: props.rowSelection,
@@ -443,6 +499,7 @@ var Table = (props) => {
     // Debug
     debugTable: debug
   });
+  const rows = table.getRowModel().rows;
   useEffect(() => {
     if (onDataSelectionChange) {
       onDataSelectionChange(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
@@ -461,25 +518,17 @@ var Table = (props) => {
     isGrid: role === "grid" || role === "treegrid"
   }, /* @__PURE__ */ React6.createElement("table", {
     role,
-    className: tableRoot(props),
+    className: tableRoot(props, classNames),
     ...!fullWidth && {
       style: {
         width: table.getTotalSize()
       }
     }
-  }, /* @__PURE__ */ React6.createElement(TableHead, null), grouping.length === 0 && /* @__PURE__ */ React6.createElement(TableBody, {
-    rows: table.getRowModel().rows
-  }), grouping.length !== 0 && table.getGroupedRowModel().rows.map((row, i) => {
-    return /* @__PURE__ */ React6.createElement(Fragment, {
-      key: i
-    }, /* @__PURE__ */ React6.createElement("thead", null, /* @__PURE__ */ React6.createElement("tr", null, debug && /* @__PURE__ */ React6.createElement("th", null), /* @__PURE__ */ React6.createElement("th", {
-      // TODO(burdon): Calculate row span.
-      colSpan: table.getHeaderGroups()[0].headers.length,
-      className: groupTh(props)
-    }, table.getState().grouping[0], "[", String(row.getGroupingValue(table.getState().grouping[0])), "]"))), /* @__PURE__ */ React6.createElement(TableBody, {
-      rows: row.subRows
-    }));
-  }), footer && /* @__PURE__ */ React6.createElement(TableFooter, null)), debug && /* @__PURE__ */ React6.createElement("pre", {
+  }, /* @__PURE__ */ React6.createElement(TableHead, null), grouping.length === 0 ? getScrollElement ? /* @__PURE__ */ React6.createElement(VirtualizedTableContent, {
+    getScrollElement
+  }) : /* @__PURE__ */ React6.createElement(TableBody, {
+    rows
+  }) : /* @__PURE__ */ React6.createElement(GroupedTableContent, null), footer && /* @__PURE__ */ React6.createElement(TableFooter, null)), debug && /* @__PURE__ */ React6.createElement("pre", {
     className: "font-mono text-xs text-neutral-500 my-4 p-2 ring"
   }, /* @__PURE__ */ React6.createElement("code", null, JSON.stringify(table.getState(), void 0, 2))));
 };
@@ -487,23 +536,9 @@ var Table = (props) => {
 // packages/ui/react-ui-table/src/components/Cell/CellCombobox.tsx
 import { CaretDown as CaretDown2 } from "@phosphor-icons/react";
 import React7, { useCallback as useCallback2, useState as useState3 } from "react";
-import { Popover as Popover2, useTranslation } from "@dxos/react-ui";
+import { Popover as Popover2, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { PopoverCombobox } from "@dxos/react-ui-searchlist";
 import { descriptionText, getSize as getSize2, mx as mx4, staticPlaceholderText } from "@dxos/react-ui-theme";
-
-// packages/ui/react-ui-table/src/translations.ts
-var translationKey = "table";
-var translations_default = [
-  {
-    "en-US": {
-      [translationKey]: {
-        "no selection label": "\xA0"
-      }
-    }
-  }
-];
-
-// packages/ui/react-ui-table/src/components/Cell/CellCombobox.tsx
 var initialItems = (model, value) => value ? {
   [model.getId(value)]: {
     label: model.getText(value),
@@ -511,7 +546,7 @@ var initialItems = (model, value) => value ? {
   }
 } : {};
 var CellCombobox = ({ model, value, onValueChange }) => {
-  const { t } = useTranslation(translationKey);
+  const { t } = useTranslation2(translationKey);
   const [items, setItems] = useState3(initialItems(model, value));
   const [loading, setLoading] = useState3(false);
   const [searchInputValue, setSearchInputValue] = useState3("");
@@ -540,7 +575,7 @@ var CellCombobox = ({ model, value, onValueChange }) => {
     variant: "ghost",
     classNames: "is-full rounded-none ring-inset"
   }, value ? /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement("span", {
-    className: mx4("font-normal text-start flex-1 min-is-0 truncate mie-2", !value && staticPlaceholderText)
+    className: mx4("font-normal text-start text-base flex-1 min-is-0 truncate mie-2", !value && staticPlaceholderText)
   }, model.getText(value)), /* @__PURE__ */ React7.createElement(CaretDown2, {
     weight: "bold",
     className: getSize2(3)
@@ -568,29 +603,25 @@ var CellCombobox = ({ model, value, onValueChange }) => {
 };
 
 // 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 React8, { useRef as useRef2, useState as useState4 } from "react";
+import React8, { useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
 import { Input as Input2, Tooltip } from "@dxos/react-ui";
 import { getSize as getSize3, mx as mx5 } from "@dxos/react-ui-theme";
-import { stripUndefinedValues } from "@dxos/util";
 var createColumnBuilder = () => ({
   helper: createColumnHelper(),
   builder: new ColumnBuilder()
 });
-var defaults = (options, ...sources) => {
-  return stripUndefinedValues(defaultsDeep({}, options, ...sources));
-};
 var ComboboxBuilderCell = (cellContext) => {
   const { model, onUpdate } = cellContext.column.columnDef.meta;
-  return /* @__PURE__ */ React8.createElement(CellCombobox, {
+  return model ? /* @__PURE__ */ React8.createElement(CellCombobox, {
     model,
     value: cellContext.getValue(),
     onValueChange: (value) => onUpdate?.(cellContext.row.original, cellContext.column.id, value)
-  });
+  }) : null;
 };
 var StringBuilderCell = (cellContext) => {
   const { onUpdate } = cellContext.column.columnDef.meta;
@@ -623,40 +654,55 @@ var StringBuilderCell = (cellContext) => {
     onKeyDown: (event) => event.key === "Enter" && handleSave() || event.key === "Escape" && handleCancel()
   }));
 };
+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, cell, digits } = cellContext.column.columnDef.meta;
+  const { onUpdate, digits } = cellContext.column.columnDef.meta;
   const value = cellContext.getValue();
-  const [text, setText] = useState4();
+  const [text, setText] = useState4(displayNumber(value, digits));
+  const { findPrevFocusable } = useFocusFinders();
+  const ref = useRef2(null);
+  useEffect2(() => {
+    (!document.activeElement || document.activeElement !== ref.current) && setText(displayNumber(value, digits));
+  }, [
+    digits,
+    value
+  ]);
   const handleEdit = () => {
     if (onUpdate) {
       setText(value !== void 0 ? String(value) : "");
     }
   };
   const handleSave = () => {
-    const value2 = text?.trim().length ? Number(text) : NaN;
-    onUpdate?.(cellContext.row.original, cellContext.column.id, isNaN(value2) ? void 0 : value2);
-    setText(void 0);
+    const nextValue = parseNumber(text);
+    onUpdate?.(cellContext.row.original, cellContext.column.id, isNaN(nextValue) ? void 0 : nextValue);
+    setText(displayNumber(nextValue, digits));
+    ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();
   };
-  const handleCancel = () => {
-    setText(void 0);
+  const _handleCancel = () => {
+    setText(displayNumber(value, digits));
+    ref.current && findPrevFocusable(ref.current)?.focus();
   };
-  if (text !== void 0) {
-    return /* @__PURE__ */ React8.createElement(Input2.Root, null, /* @__PURE__ */ React8.createElement(Input2.TextInput, {
-      value: text,
-      classNames: [
-        "is-full text-end font-mono"
-      ],
-      onBlur: handleSave,
-      onChange: (event) => setText(event.target.value),
-      onKeyDown: (event) => event.key === "Escape" && handleCancel() || event.key === "Enter" && handleSave()
-    }));
-  }
-  return /* @__PURE__ */ React8.createElement("div", {
-    className: mx5('is-full text-end font-mono empty:after:content-["\xA0"]', textPadding, cell?.classNames),
-    onClick: handleEdit
-  }, value?.toLocaleString(void 0, {
-    minimumFractionDigits: digits ?? 0,
-    maximumFractionDigits: digits ?? 2
+  return /* @__PURE__ */ React8.createElement(Input2.Root, null, /* @__PURE__ */ React8.createElement(Input2.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()
+      );
+    }
   }));
 };
 var RowSelectorBuilderCell = (cellContext) => {
@@ -696,15 +742,8 @@ var ColumnBuilder = class {
   * Combobox value
   */
   combobox({ label, classNames, model, onUpdate, ...props }) {
-    return defaults(props, {
+    return {
       minSize: 100,
-      meta: {
-        model,
-        onUpdate,
-        cell: {
-          classNames
-        }
-      },
       header: (column) => {
         return label ?? column.header.id;
       },
@@ -713,21 +752,25 @@ var ColumnBuilder = class {
         return /* @__PURE__ */ React8.createElement("div", {
           className: mx5("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 defaults(props, {
+    return {
       minSize: 100,
-      meta: {
-        onUpdate,
-        cell: {
-          classNames
-        }
-      },
       // TODO(burdon): Default.
       header: (column) => {
         return label ?? column.header.id;
@@ -737,43 +780,51 @@ var ColumnBuilder = class {
         return /* @__PURE__ */ React8.createElement("div", {
           className: mx5("truncate", textPadding, classNames)
         }, value);
+      },
+      ...props,
+      meta: {
+        ...props.meta,
+        onUpdate,
+        cell: {
+          ...props.meta?.cell,
+          classNames
+        }
       }
-    });
+    };
   }
   /**
   * Number formats.
   */
   number({ label, minSize, classNames, digits, onUpdate, ...props } = {}) {
-    return defaults(props, {
+    return {
       size: 100,
       minSize: 100,
+      header: (cell) => label ?? cell.header.id,
+      cell: NumberBuilderCell,
+      ...props,
       meta: {
+        ...props.meta,
         onUpdate,
         digits,
         header: {
-          classNames: "text-end"
+          classNames: "text-end",
+          ...props.meta?.header
         },
         cell: {
+          ...props.meta?.cell,
           classNames
         }
-      },
-      header: (cell) => label ?? cell.header.id,
-      cell: NumberBuilderCell
-    });
+      }
+    };
   }
   /**
   * Date formats.
   */
   // TODO(burdon): Date picker (pluggable renderers?)
   date({ label, format: formatSpec, relative, classNames, ...props } = {}) {
-    return defaults(props, {
+    return {
       size: 220,
       minSize: 100,
-      meta: {
-        cell: {
-          classNames
-        }
-      },
       header: (cell) => label ?? cell.header.id,
       cell: (cell) => {
         const value = cell.getValue();
@@ -788,24 +839,24 @@ var ColumnBuilder = class {
           console.log(value);
           return null;
         }
+      },
+      ...props,
+      meta: {
+        ...props.meta,
+        cell: {
+          ...props.meta?.cell,
+          classNames
+        }
       }
-    });
+    };
   }
   /**
   * PublicKey with tooltip.
   */
-  key({ label, tooltip, ...props } = {}) {
-    return defaults(props, {
+  key({ label, tooltip, classNames, ...props } = {}) {
+    return {
       size: 94,
       minSize: 94,
-      meta: {
-        cell: {
-          classNames: [
-            "font-mono",
-            textPadding
-          ]
-        }
-      },
       header: (cell) => label ?? cell.header.id,
       cell: (cell) => {
         const value = cell.getValue();
@@ -816,21 +867,33 @@ var ColumnBuilder = class {
         if (!tooltip) {
           return element;
         }
-        return /* @__PURE__ */ React8.createElement(Tooltip.Provider, null, /* @__PURE__ */ React8.createElement(Tooltip.Root, null, /* @__PURE__ */ React8.createElement(Tooltip.Trigger, null, element), /* @__PURE__ */ React8.createElement(Tooltip.Content, {
+        return /* @__PURE__ */ React8.createElement(Tooltip.Provider, null, /* @__PURE__ */ React8.createElement(Tooltip.Root, null, /* @__PURE__ */ React8.createElement(Tooltip.Trigger, null, element), /* @__PURE__ */ React8.createElement(Tooltip.Portal, null, /* @__PURE__ */ React8.createElement(Tooltip.Content, {
           side: "right"
         }, /* @__PURE__ */ React8.createElement(Tooltip.Arrow, null), /* @__PURE__ */ React8.createElement(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({ label, classNames, onUpdate, id = "selectRow", ...props } = {}) {
+  selectRow({ classNames, onUpdate, id = "selectRow" } = {}) {
     return {
       id,
       size: 32,
@@ -862,21 +925,24 @@ var ColumnBuilder = class {
   * Switch
   */
   switch({ label, classNames, onUpdate, ...props } = {}) {
-    return defaults(props, {
+    return {
       size: 50,
       minSize: 50,
+      header: (column) => label ?? column.header.id,
+      cell: SwitchBuilderCell,
+      ...props,
       meta: {
+        ...props.meta,
         onUpdate,
         cell: {
+          ...props.meta?.cell,
           classNames: [
             textPadding,
             classNames
           ]
         }
-      },
-      header: (column) => label ?? column.header.id,
-      cell: SwitchBuilderCell
-    });
+      }
+    };
   }
   /**
   * Icon based on boolean value.
@@ -884,7 +950,7 @@ var ColumnBuilder = class {
   icon({ label, size, on, off, ...props } = {}) {
     const IconOn = on?.Icon ?? Check2;
     const IconOff = off?.Icon ?? X2;
-    return defaults(props, {
+    return {
       size: size ?? 32,
       header: (column) => /* @__PURE__ */ React8.createElement("div", {
         className: "justify-center"
@@ -902,8 +968,9 @@ var ColumnBuilder = class {
         } else {
           return null;
         }
-      }
-    });
+      },
+      ...props
+    };
   }
 };
 export {
@@ -912,7 +979,6 @@ export {
   ColumnMenu,
   ColumnPanel,
   Table,
-  columnTypes,
   createColumnBuilder,
   currentRow,
   flushPadding,
@@ -933,6 +999,7 @@ export {
   theadResizeThumb,
   theadRoot,
   theadTh,
-  theadTr
+  theadTr,
+  translations_default as translations
 };
 //# sourceMappingURL=index.mjs.map