@dxos/react-ui-table 0.4.9-main.a3cfaa7 → 0.4.9-main.f3fe18b

package/dist/lib/browser/index.mjs

@@ -229,44 +229,36 @@ var ColumnPanel = ({ context, tableDefs, tableDef, column, onUpdate, onDelete })
 import { useControllableState } from "@radix-ui/react-use-controllable-state";
 import { getCoreRowModel, getSortedRowModel, useReactTable, getGroupedRowModel, getExpandedRowModel } from "@tanstack/react-table";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import React8, { Fragment, useCallback, useEffect, useState as useState2 } from "react";
+import React7, { Fragment, useCallback, useEffect, useState as useState2 } from "react";
 import { log } from "@dxos/log";
 import { useDefaultValue, useOnTransition } from "@dxos/react-ui";
 
 // packages/ui/react-ui-table/src/components/Table/TableBody.tsx
 import { useArrowNavigationGroup } from "@fluentui/react-tabster";
 import { flexRender } from "@tanstack/react-table";
-import React5 from "react";
+import React4 from "react";
 
 // packages/ui/react-ui-table/src/components/Table/TableContext.tsx
-import React3, { useContext, createContext } from "react";
-var TableContext = /* @__PURE__ */ createContext({});
-var TableProvider = ({ children, ...value }) => {
-  return /* @__PURE__ */ React3.createElement(TableContext.Provider, {
-    value
-  }, children);
-};
-var useTableContext = () => {
-  const context = useContext(TableContext);
-  return context;
-};
+import { createContext } from "@radix-ui/react-context";
+var TABLE_NAME = "Table";
+var [TableProvider, useUntypedTableContext] = createContext(TABLE_NAME);
+var useTableContext = (consumerName) => useUntypedTableContext(consumerName);
 
 // packages/ui/react-ui-table/src/theme.ts
-import { modalSurface, focusRing, ghostSelected, ghostSelectedCurrent, groupBorder, mx as mx2 } from "@dxos/react-ui-theme";
+import { modalSurface, 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";
 var textPadding = "pli-2 plb-0.5";
-var headPadding = "pli-2 plb-1";
+var headPadding = "pli-2 plb-1.5";
 var gridCellFocusRing = "focus-within:z-[11] focus-within: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, stickyHeader }, ...etc) => mx2(header ? stickyHeader && "sticky block-start-[--sticky-top] z-[1]" : "collapse", header && "base-surface", "drop-shadow-sm", ...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 && groupBorder, border && "border border-t-0 border-b-0 border-neutral-200", ...etc);
-var theadResizeRoot = ({ isResizing }) => {
-  return mx2("absolute h-full w-[4px] top-0 right-0", "cursor-col-resize", "user-select-none", "touch-action-none", !isResizing && "group-hover:bg-neutral-100 dark:group-hover:bg-neutral-800", "pointer-coarse:bg-neutral-100 dark:pointer-coarse:bg-neutral-800", isResizing && "bg-primary-500 dark:bg-primary-400");
-};
+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 = ({ 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);
@@ -277,30 +269,30 @@ var tfootTh = ({ border }, ...etc) => mx2(textPadding, modalSurface, border && g
 
 // packages/ui/react-ui-table/src/components/Cell/Cell.tsx
 import { useFocusableGroup } from "@fluentui/react-tabster";
-import React4 from "react";
+import React3 from "react";
 var CELL_NAME = "Cell";
 var FocusableCell = ({ cell, children }) => {
-  const tableContext = useTableContext();
+  const tableContext = useTableContext(CELL_NAME);
   const domAttributes = useFocusableGroup({
     tabBehavior: "limited"
   });
   const className = tdRoot(tableContext, cell.column.columnDef.meta?.cell?.classNames);
-  return /* @__PURE__ */ React4.createElement("td", {
+  return /* @__PURE__ */ React3.createElement("td", {
     tabIndex: 0,
     ...domAttributes,
     className
   }, children);
 };
 var StaticCell = ({ cell, children }) => {
-  const tableContext = useTableContext();
-  return /* @__PURE__ */ React4.createElement("td", {
+  const tableContext = useTableContext(CELL_NAME);
+  return /* @__PURE__ */ React3.createElement("td", {
     className: tdRoot(tableContext, cell.column.columnDef.meta?.cell?.classNames)
   }, children);
 };
 var Cell = ({ cell, children }) => {
-  const { isGrid } = useTableContext();
+  const { isGrid } = useTableContext(CELL_NAME);
   const Root = isGrid ? FocusableCell : StaticCell;
-  return /* @__PURE__ */ React4.createElement(Root, {
+  return /* @__PURE__ */ React3.createElement(Root, {
     cell
   }, children);
 };
@@ -309,16 +301,16 @@ Cell.displayName = CELL_NAME;
 // packages/ui/react-ui-table/src/components/Table/TableBody.tsx
 var TABLE_BODY_NAME = "TableBody";
 var TableBody = ({ rows }) => {
-  const { table, keyAccessor, currentDatum, debug, expand, isGrid, onDatumClick } = useTableContext();
+  const { table, keyAccessor, currentDatum, debug, expand, isGrid, onDatumClick } = useTableContext(TABLE_BODY_NAME);
   const rowSelection = table.getState().rowSelection;
   const domAttributes = useArrowNavigationGroup({
     axis: "grid"
   });
   const canBeCurrent = !isGrid && !!onDatumClick;
-  return /* @__PURE__ */ React5.createElement("tbody", isGrid && domAttributes, rows.map((row) => {
+  return /* @__PURE__ */ React4.createElement("tbody", isGrid && domAttributes, rows.map((row) => {
     const isCurrent = currentDatum === row.original;
     const isSelected = rowSelection?.[row.id];
-    return /* @__PURE__ */ React5.createElement("tr", {
+    return /* @__PURE__ */ React4.createElement("tr", {
       key: keyAccessor ? keyAccessor(row.original) : row.id,
       className: tbodyTr({
         canBeCurrent
@@ -340,80 +332,83 @@ var TableBody = ({ rows }) => {
           }
         }
       }
-    }, debug && /* @__PURE__ */ React5.createElement("td", null, row.id), row.getVisibleCells().map((cell) => {
-      return /* @__PURE__ */ React5.createElement(Cell, {
+    }, debug && /* @__PURE__ */ React4.createElement("td", null, row.id), row.getVisibleCells().map((cell) => {
+      return /* @__PURE__ */ React4.createElement(Cell, {
         key: cell.id,
         cell
       }, flexRender(cell.column.columnDef.cell, {
         className: "pli-2",
         ...cell.getContext()
       }));
-    }), expand && /* @__PURE__ */ React5.createElement("td", null));
+    }), expand && /* @__PURE__ */ React4.createElement("td", null));
   }));
 };
 TableBody.displayName = TABLE_BODY_NAME;
 
 // packages/ui/react-ui-table/src/components/Table/TableFooter.tsx
 import { flexRender as flexRender2 } from "@tanstack/react-table";
-import React6 from "react";
+import React5 from "react";
 var TABLE_FOOT_NAME = "TableFooter";
 var TableFooter = (props) => {
-  const tableContext = useTableContext();
+  const tableContext = useTableContext(TABLE_FOOT_NAME);
   const { table, expand, debug } = tableContext;
   const footers = table.getFooterGroups();
-  return /* @__PURE__ */ React6.createElement("tfoot", {
+  return /* @__PURE__ */ React5.createElement("tfoot", {
     className: tfootRoot(props)
-  }, footers.map((footerGroup) => /* @__PURE__ */ React6.createElement("tr", {
+  }, footers.map((footerGroup) => /* @__PURE__ */ React5.createElement("tr", {
     key: footerGroup.id,
     className: tfootTr(tableContext)
-  }, debug && /* @__PURE__ */ React6.createElement("th", null), footerGroup.headers.map((footer) => {
-    return /* @__PURE__ */ React6.createElement("th", {
+  }, debug && /* @__PURE__ */ React5.createElement("th", null), footerGroup.headers.map((footer) => {
+    return /* @__PURE__ */ React5.createElement("th", {
       key: footer.id,
       className: tfootTh(tableContext, footer.column.columnDef.meta?.footer?.classNames)
     }, footer.isPlaceholder ? null : flexRender2(footer.column.columnDef.footer, footer.getContext()));
-  }), expand && /* @__PURE__ */ React6.createElement("th", null))));
+  }), expand && /* @__PURE__ */ React5.createElement("th", null))));
 };
 TableFooter.displayName = TABLE_FOOT_NAME;
 
 // packages/ui/react-ui-table/src/components/Table/TableHead.tsx
 import { flexRender as flexRender3 } from "@tanstack/react-table";
-import React7 from "react";
+import React6 from "react";
+import { mx as mx3 } from "@dxos/react-ui-theme";
 var TABLE_HEAD_NAME = "TableHeader";
 var TableHead = (_props) => {
-  const tableContext = useTableContext();
+  const tableContext = useTableContext(TABLE_HEAD_NAME);
   const headerGroups = tableContext.table.getHeaderGroups();
-  return /* @__PURE__ */ React7.createElement("thead", {
+  const state = tableContext.table.getState();
+  return /* @__PURE__ */ React6.createElement("thead", {
     className: theadRoot(tableContext)
   }, headerGroups.map((headerGroup) => {
     return (
       // Group element to hover resize handles.
-      /* @__PURE__ */ React7.createElement("tr", {
+      /* @__PURE__ */ React6.createElement("tr", {
         key: headerGroup.id,
         className: theadTr(tableContext)
-      }, tableContext.debug && /* @__PURE__ */ React7.createElement("th", {
+      }, tableContext.debug && /* @__PURE__ */ React6.createElement("th", {
         className: "font-mono",
         style: {
           width: 32
         }
       }, "#"), headerGroup.headers.map((header) => {
         const isResizing = header.column.getIsResizing();
-        const onResize = header.getResizeHandler();
-        const resizable = header.column.columnDef.meta?.resizable;
-        return /* @__PURE__ */ React7.createElement("th", {
+        const resizeHandler = header.getResizeHandler();
+        return /* @__PURE__ */ React6.createElement("th", {
           key: header.id,
           style: {
             width: header.getSize()
           },
           className: theadTh(tableContext, header.column.columnDef.meta?.header?.classNames)
-        }, !header || header.isPlaceholder ? null : flexRender3(header.column.columnDef.header, header.getContext()), resizable && /* @__PURE__ */ React7.createElement("div", {
-          className: theadResizeRoot({
-            isResizing
-          }),
-          onDoubleClick: header.column.resetSize,
-          onMouseDown: onResize,
-          onTouchStart: onResize
-        }));
-      }), tableContext.expand && /* @__PURE__ */ React7.createElement("th", null))
+        }, !header || header.isPlaceholder ? null : flexRender3(header.column.columnDef.header, header.getContext()), header.column.columnDef.meta?.resizable && /* @__PURE__ */ React6.createElement("div", {
+          className: theadResizeRoot(tableContext, isResizing && "hidden"),
+          style: {
+            transform: `translateX(${isResizing ? state.columnSizingInfo.deltaOffset : 0}px)`
+          },
+          onMouseDown: resizeHandler,
+          onTouchStart: resizeHandler
+        }, /* @__PURE__ */ React6.createElement("div", {
+          className: mx3(theadResizeThumb(tableContext))
+        })));
+      }), tableContext.expand && /* @__PURE__ */ React6.createElement("th", null))
     );
   }));
 };
@@ -540,13 +535,13 @@ var Table = (props) => {
       C: (f, a) => f(...a)
     });
   }
-  return /* @__PURE__ */ React8.createElement(TableProvider2, {
+  return /* @__PURE__ */ React7.createElement(TableProvider2, {
     ...props,
     table,
     header,
     expand,
     isGrid: role === "grid" || role === "treegrid"
-  }, /* @__PURE__ */ React8.createElement(TableImpl, {
+  }, /* @__PURE__ */ React7.createElement(TableImpl, {
     debug: false,
     getScrollElement,
     ...props
@@ -554,7 +549,7 @@ var Table = (props) => {
 };
 var TableImpl = (props) => {
   const { debug, classNames, getScrollElement, role, footer, grouping, fullWidth } = props;
-  const { table } = useTableContext();
+  const { table } = useTableContext("TableImpl");
   const centerRows = table.getCenterRows();
   const bottomRows = table.getBottomRows();
   const rows = [
@@ -562,13 +557,12 @@ var TableImpl = (props) => {
     ...bottomRows
   ];
   if (debug) {
-    return /* @__PURE__ */ React8.createElement("pre", {
+    return /* @__PURE__ */ React7.createElement("pre", {
       className: "font-mono text-xs text-neutral-500 m-1 p-2 ring"
-    }, /* @__PURE__ */ React8.createElement("code", null, JSON.stringify(table.getState(), void 0, 2)));
+    }, /* @__PURE__ */ React7.createElement("code", null, JSON.stringify(table.getState(), void 0, 2)));
   }
-  const virtualisable = getScrollElement !== void 0;
   const isResizingColumn = table.getState().columnSizingInfo.isResizingColumn;
-  return /* @__PURE__ */ React8.createElement("table", {
+  return /* @__PURE__ */ React7.createElement("table", {
     role,
     className: tableRoot(props, classNames),
     ...!fullWidth && {
@@ -576,16 +570,16 @@ var TableImpl = (props) => {
         width: table.getTotalSize()
       }
     }
-  }, /* @__PURE__ */ React8.createElement(TableHead, null), grouping?.length !== 0 ? virtualisable ? isResizingColumn ? /* @__PURE__ */ React8.createElement(MemoizedVirtualisedTableContent, {
+  }, /* @__PURE__ */ React7.createElement(TableHead, null), grouping?.length !== 0 ? getScrollElement ? isResizingColumn ? /* @__PURE__ */ React7.createElement(MemoizedVirtualisedTableContent, {
     getScrollElement
-  }) : /* @__PURE__ */ React8.createElement(VirtualizedTableContent, {
+  }) : /* @__PURE__ */ React7.createElement(VirtualizedTableContent, {
     getScrollElement
-  }) : /* @__PURE__ */ React8.createElement(TableBody, {
+  }) : /* @__PURE__ */ React7.createElement(TableBody, {
     rows
-  }) : /* @__PURE__ */ React8.createElement(GroupedTableContent, null), footer && /* @__PURE__ */ React8.createElement(TableFooter, null));
+  }) : /* @__PURE__ */ React7.createElement(GroupedTableContent, null), footer && /* @__PURE__ */ React7.createElement(TableFooter, null));
 };
 var VirtualizedTableContent = ({ getScrollElement }) => {
-  const { table } = useTableContext();
+  const { table } = useTableContext("VirtualizedTableContent");
   const centerRows = table.getCenterRows();
   const pinnedRows = table.getBottomRows();
   const rows = [
@@ -595,46 +589,46 @@ var VirtualizedTableContent = ({ getScrollElement }) => {
   const { getTotalSize, getVirtualItems } = useVirtualizer({
     getScrollElement,
     count: rows.length,
-    overscan: 8,
-    estimateSize: () => 40
+    overscan: 4,
+    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__ */ React8.createElement(React8.Fragment, null, paddingTop > 0 && /* @__PURE__ */ React8.createElement("tbody", {
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, paddingTop > 0 && /* @__PURE__ */ React7.createElement("tbody", {
     role: "none"
-  }, /* @__PURE__ */ React8.createElement("tr", {
+  }, /* @__PURE__ */ React7.createElement("tr", {
     role: "none"
-  }, /* @__PURE__ */ React8.createElement("td", {
+  }, /* @__PURE__ */ React7.createElement("td", {
     style: {
       height: `${paddingTop}px`
     },
     role: "none"
-  }))), /* @__PURE__ */ React8.createElement(TableBody, {
+  }))), /* @__PURE__ */ React7.createElement(TableBody, {
     rows: virtualRows.map((virtualRow) => rows[virtualRow.index])
-  }), paddingBottom > 0 && /* @__PURE__ */ React8.createElement("tbody", {
+  }), paddingBottom > 0 && /* @__PURE__ */ React7.createElement("tbody", {
     role: "none"
-  }, /* @__PURE__ */ React8.createElement("tr", {
+  }, /* @__PURE__ */ React7.createElement("tr", {
     role: "none"
-  }, /* @__PURE__ */ React8.createElement("td", {
+  }, /* @__PURE__ */ React7.createElement("td", {
     style: {
       height: `${paddingBottom}px`
     },
     role: "none"
   }))));
 };
-var MemoizedVirtualisedTableContent = /* @__PURE__ */ React8.memo(VirtualizedTableContent);
+var MemoizedVirtualisedTableContent = /* @__PURE__ */ React7.memo(VirtualizedTableContent);
 var GroupedTableContent = () => {
-  const { table: { getGroupedRowModel: getGroupedRowModel2, getHeaderGroups, getState }, debug } = useTableContext();
-  return /* @__PURE__ */ React8.createElement(React8.Fragment, null, getGroupedRowModel2().rows.map((row, i) => {
-    return /* @__PURE__ */ React8.createElement(Fragment, {
+  const { table: { getGroupedRowModel: getGroupedRowModel2, getHeaderGroups, getState }, debug } = useTableContext("GroupedTableContent");
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, getGroupedRowModel2().rows.map((row, i) => {
+    return /* @__PURE__ */ React7.createElement(Fragment, {
       key: i
-    }, /* @__PURE__ */ React8.createElement("thead", null, /* @__PURE__ */ React8.createElement("tr", null, debug && /* @__PURE__ */ React8.createElement("th", null), /* @__PURE__ */ React8.createElement("th", {
+    }, /* @__PURE__ */ React7.createElement("thead", null, /* @__PURE__ */ React7.createElement("tr", null, debug && /* @__PURE__ */ React7.createElement("th", null), /* @__PURE__ */ React7.createElement("th", {
       // TODO(burdon): Calculate row span.
       colSpan: getHeaderGroups()[0].headers.length,
       className: groupTh({})
-    }, getState().grouping[0], "[", String(row.getGroupingValue(getState().grouping[0])), "]"))), /* @__PURE__ */ React8.createElement(TableBody, {
+    }, getState().grouping[0], "[", String(row.getGroupingValue(getState().grouping[0])), "]"))), /* @__PURE__ */ React7.createElement(TableBody, {
       rows: row.subRows
     }));
   }));
@@ -642,10 +636,10 @@ var GroupedTableContent = () => {
 
 // packages/ui/react-ui-table/src/components/Cell/CellCombobox.tsx
 import { CaretDown } from "@phosphor-icons/react";
-import React9, { useCallback as useCallback2, useState as useState3 } from "react";
+import React8, { useCallback as useCallback2, useState as useState3 } from "react";
 import { Popover as Popover2, useTranslation as useTranslation2 } from "@dxos/react-ui";
 import { PopoverCombobox } from "@dxos/react-ui-searchlist";
-import { descriptionText, getSize as getSize3, mx as mx3, staticPlaceholderText } from "@dxos/react-ui-theme";
+import { descriptionText, getSize as getSize3, mx as mx4, staticPlaceholderText } from "@dxos/react-ui-theme";
 var initialItems = (model, value) => value ? {
   [model.getId(value)]: {
     label: model.getText(value),
@@ -676,37 +670,37 @@ var CellCombobox = ({ model, value, onValueChange }) => {
     items,
     onValueChange
   ]);
-  return /* @__PURE__ */ React9.createElement(PopoverCombobox.Root, {
+  return /* @__PURE__ */ React8.createElement(PopoverCombobox.Root, {
     placeholder: t("no selection label")
-  }, /* @__PURE__ */ React9.createElement(PopoverCombobox.Trigger, {
+  }, /* @__PURE__ */ React8.createElement(PopoverCombobox.Trigger, {
     variant: "ghost",
     classNames: "is-full rounded-none ring-inset"
-  }, value ? /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement("span", {
-    className: mx3("font-normal text-start text-base flex-1 min-is-0 truncate mie-2", !value && staticPlaceholderText)
-  }, model.getText(value)), /* @__PURE__ */ React9.createElement(CaretDown, {
+  }, value ? /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement("span", {
+    className: mx4("font-normal text-start text-base flex-1 min-is-0 truncate mie-2", !value && staticPlaceholderText)
+  }, model.getText(value)), /* @__PURE__ */ React8.createElement(CaretDown, {
     weight: "bold",
     className: getSize3(3)
-  })) : null), /* @__PURE__ */ React9.createElement(PopoverCombobox.Content, {
+  })) : null), /* @__PURE__ */ React8.createElement(PopoverCombobox.Content, {
     shouldFilter: false,
     classNames: "is-[--radix-popover-trigger-width]"
-  }, /* @__PURE__ */ React9.createElement(PopoverCombobox.Input, {
+  }, /* @__PURE__ */ React8.createElement(PopoverCombobox.Input, {
     value: searchInputValue,
     onValueChange: handleSearchInputValueChange
-  }), /* @__PURE__ */ React9.createElement(PopoverCombobox.List, null, searchInputValue.length < 1 ? /* @__PURE__ */ React9.createElement("p", {
-    className: mx3("text-center", descriptionText)
-  }, "Start typing to search") : loading ? /* @__PURE__ */ React9.createElement("p", {
-    className: mx3("text-center", descriptionText)
-  }, "Searching\u2026") : /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(PopoverCombobox.Empty, {
+  }), /* @__PURE__ */ React8.createElement(PopoverCombobox.List, null, searchInputValue.length < 1 ? /* @__PURE__ */ React8.createElement("p", {
+    className: mx4("text-center", descriptionText)
+  }, "Start typing to search") : loading ? /* @__PURE__ */ React8.createElement("p", {
+    className: mx4("text-center", descriptionText)
+  }, "Searching\u2026") : /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(PopoverCombobox.Empty, {
     classNames: [
       "text-center",
       descriptionText
     ]
-  }, "No results"), Object.entries(items).map(([id, { label }]) => /* @__PURE__ */ React9.createElement(PopoverCombobox.Item, {
+  }, "No results"), Object.entries(items).map(([id, { label }]) => /* @__PURE__ */ React8.createElement(PopoverCombobox.Item, {
     key: id,
     value: id,
     onSelect: handleValueChange,
     classNames: "truncate"
-  }, label)))), /* @__PURE__ */ React9.createElement(Popover2.Arrow, null)));
+  }, label)))), /* @__PURE__ */ React8.createElement(Popover2.Arrow, null)));
 };
 
 // packages/ui/react-ui-table/src/helpers.tsx
@@ -715,10 +709,10 @@ 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 React10, { useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
+import React9, { useEffect as useEffect2, useRef as useRef2, useState as useState4 } from "react";
 import { log as log2 } from "@dxos/log";
 import { Input as Input2, Tooltip } from "@dxos/react-ui";
-import { getSize as getSize4, mx as mx4 } from "@dxos/react-ui-theme";
+import { getSize as getSize4, mx as mx5 } from "@dxos/react-ui-theme";
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/helpers.tsx";
 var createColumnBuilder = () => ({
   helper: createColumnHelper(),
@@ -726,7 +720,7 @@ var createColumnBuilder = () => ({
 });
 var ComboboxBuilderCell = (cellContext) => {
   const { model, onUpdate } = cellContext.column.columnDef.meta;
-  return model ? /* @__PURE__ */ React10.createElement(CellCombobox, {
+  return model ? /* @__PURE__ */ React9.createElement(CellCombobox, {
     model,
     value: cellContext.getValue(),
     onValueChange: (value) => onUpdate?.(cellContext.row.original, cellContext.column.id, value)
@@ -756,7 +750,7 @@ var StringBuilderCell = (cellContext) => {
     const rowCount = cellContext.table.getRowModel().rows.length;
     placeholder = cellContext.row.index === rowCount - 1 && columns[0].id === cellContext.column.id;
   }
-  return /* @__PURE__ */ React10.createElement(Input2.Root, null, /* @__PURE__ */ React10.createElement(Input2.TextInput, {
+  return /* @__PURE__ */ React9.createElement(Input2.Root, null, /* @__PURE__ */ React9.createElement(Input2.TextInput, {
     ref,
     variant: "subdued",
     placeholder: placeholder ? "Add row..." : void 0,
@@ -803,7 +797,7 @@ var NumberBuilderCell = (cellContext) => {
     setText(displayNumber(value, digits));
     ref.current && findPrevFocusable(ref.current)?.focus();
   };
-  return /* @__PURE__ */ React10.createElement(Input2.Root, null, /* @__PURE__ */ React10.createElement(Input2.TextInput, {
+  return /* @__PURE__ */ React9.createElement(Input2.Root, null, /* @__PURE__ */ React9.createElement(Input2.TextInput, {
     ref,
     variant: "subdued",
     value: text,
@@ -826,10 +820,10 @@ 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__ */ React10.createElement("div", {
+  return /* @__PURE__ */ React9.createElement("div", {
     className: "flex justify-center w-full h-full",
     role: "presentation"
-  }, /* @__PURE__ */ React10.createElement(Input2.Root, null, /* @__PURE__ */ React10.createElement(Input2.Checkbox, {
+  }, /* @__PURE__ */ React9.createElement(Input2.Root, null, /* @__PURE__ */ React9.createElement(Input2.Checkbox, {
     size: 4,
     classNames: [
       cell?.classNames
@@ -846,7 +840,7 @@ var RowSelectorBuilderCell = (cellContext) => {
 var SwitchBuilderCell = (cellContext) => {
   const { onUpdate } = cellContext.column.columnDef.meta;
   const value = cellContext.getValue();
-  return /* @__PURE__ */ React10.createElement(Input2.Root, null, /* @__PURE__ */ React10.createElement(Input2.Switch, {
+  return /* @__PURE__ */ React9.createElement(Input2.Root, null, /* @__PURE__ */ React9.createElement(Input2.Switch, {
     classNames: "block mli-auto",
     onClick: (event) => event.stopPropagation(),
     disabled: !onUpdate,
@@ -868,8 +862,8 @@ var ColumnBuilder = class {
       },
       cell: model && onUpdate ? ComboboxBuilderCell : (cellContext) => {
         const cellValue = cellContext.getValue();
-        return /* @__PURE__ */ React10.createElement("div", {
-          className: mx4("truncate", classNames)
+        return /* @__PURE__ */ React9.createElement("div", {
+          className: mx5("truncate", classNames)
         }, cellValue ? model?.getText(cellValue) : "");
       },
       ...props,
@@ -899,8 +893,8 @@ var ColumnBuilder = class {
         if (typeof value === "object" && value?.__typename === "dxos.Text.v0") {
           value = value.content;
         }
-        return /* @__PURE__ */ React10.createElement("div", {
-          className: mx4("truncate", textPadding, classNames)
+        return /* @__PURE__ */ React9.createElement("div", {
+          className: mx5("truncate", textPadding, classNames)
         }, value);
       },
       ...props,
@@ -954,8 +948,8 @@ var ColumnBuilder = class {
           const str = value ? formatSpec ? format(value, formatSpec) : relative ? formatDistanceToNow(value, {
             addSuffix: true
           }) : value.toISOString() : void 0;
-          return /* @__PURE__ */ React10.createElement("div", {
-            className: mx4(textPadding, classNames)
+          return /* @__PURE__ */ React9.createElement("div", {
+            className: mx5(textPadding, classNames)
           }, str);
         } catch (err) {
           log2.info("formatError", {
@@ -996,9 +990,9 @@ var ColumnBuilder = class {
         if (!tooltip) {
           return element;
         }
-        return /* @__PURE__ */ React10.createElement(Tooltip.Provider, null, /* @__PURE__ */ React10.createElement(Tooltip.Root, null, /* @__PURE__ */ React10.createElement(Tooltip.Trigger, null, element), /* @__PURE__ */ React10.createElement(Tooltip.Portal, null, /* @__PURE__ */ React10.createElement(Tooltip.Content, {
+        return /* @__PURE__ */ React9.createElement(Tooltip.Provider, null, /* @__PURE__ */ React9.createElement(Tooltip.Root, null, /* @__PURE__ */ React9.createElement(Tooltip.Trigger, null, element), /* @__PURE__ */ React9.createElement(Tooltip.Portal, null, /* @__PURE__ */ React9.createElement(Tooltip.Content, {
           side: "right"
-        }, /* @__PURE__ */ React10.createElement(Tooltip.Arrow, null), /* @__PURE__ */ React10.createElement(ClipboardText, {
+        }, /* @__PURE__ */ React9.createElement(Tooltip.Arrow, null), /* @__PURE__ */ React9.createElement(ClipboardText, {
           onClick: (ev) => {
             ev.stopPropagation();
             void navigator.clipboard.writeText(value.toHex());
@@ -1034,12 +1028,12 @@ var ColumnBuilder = class {
         }
       },
       header: ({ table }) => {
-        const { rowsSelectable } = useTableContext();
+        const { rowsSelectable } = useTableContext("HELPER_SELECT_ROW_HEADER_CELL");
         const checked = table.getIsSomeRowsSelected() ? "indeterminate" : table.getIsAllRowsSelected();
-        return rowsSelectable === "multi" ? /* @__PURE__ */ React10.createElement("div", {
+        return rowsSelectable === "multi" ? /* @__PURE__ */ React9.createElement("div", {
           className: "flex justify-center w-full h-full",
           role: "presentation"
-        }, /* @__PURE__ */ React10.createElement(Input2.Root, null, /* @__PURE__ */ React10.createElement(Input2.Checkbox, {
+        }, /* @__PURE__ */ React9.createElement(Input2.Root, null, /* @__PURE__ */ React9.createElement(Input2.Checkbox, {
           size: 4,
           classNames: [
             "mli-auto",
@@ -1087,18 +1081,18 @@ var ColumnBuilder = class {
       size: size ?? 32,
       // TODO(Zan): Implement sort algorithm
       enableSorting: false,
-      header: (column) => /* @__PURE__ */ React10.createElement("div", {
+      header: (column) => /* @__PURE__ */ React9.createElement("div", {
         className: "justify-center"
       }, label ?? column.header.id),
       cell: (cell) => {
         const value = cell.getValue();
         if (value) {
-          return /* @__PURE__ */ React10.createElement(IconOn, {
-            className: mx4("block mli-auto", getSize4(6), on?.className ?? "text-green-700")
+          return /* @__PURE__ */ React9.createElement(IconOn, {
+            className: mx5("block mli-auto", getSize4(6), on?.className ?? "text-green-700")
           });
         } else if (value === false) {
-          return /* @__PURE__ */ React10.createElement(IconOff, {
-            className: mx4("block mli-auto", getSize4(6), off?.className ?? "text-red-700")
+          return /* @__PURE__ */ React9.createElement(IconOff, {
+            className: mx5("block mli-auto", getSize4(6), off?.className ?? "text-red-700")
           });
         } else {
           return null;
@@ -1132,6 +1126,7 @@ export {
   tfootTh,
   tfootTr,
   theadResizeRoot,
+  theadResizeThumb,
   theadRoot,
   theadTh,
   theadTr,