@dxos/react-ui-table 0.4.10-next.71cec10 → 0.5.0

package/dist/lib/browser/index.mjs

@@ -333,18 +333,18 @@ var useColumnSorting = (column) => {
 
 // packages/ui/react-ui-table/src/hooks/usePinLastRow.ts
 import { useCallback as useCallback3, useEffect as useEffect2, useState as useState5 } from "react";
-var usePinLastRow = (pinLastRow, table, data, getScrollElement) => {
+var usePinLastRow = (pinLastRow, table, data) => {
+  const { scrollContextRef } = useTableRootContext();
   const [pinnedRowKey, setPinnedRowKey] = useState5();
   const scrollToBottom = useCallback3(() => {
-    const scrollElement = getScrollElement?.();
-    if (scrollElement) {
-      requestAnimationFrame(() => scrollElement.scrollTo({
-        top: scrollElement.scrollHeight
+    const element = scrollContextRef.current;
+    const scrollHeight = element?.scrollHeight;
+    if (element && scrollHeight) {
+      requestAnimationFrame(() => element.scrollTo({
+        top: scrollHeight
       }));
     }
-  }, [
-    getScrollElement
-  ]);
+  }, []);
   const pinRow = useCallback3((rowToPin) => {
     table.resetRowPinning();
     rowToPin.pin("bottom");
@@ -545,16 +545,16 @@ var SortIndicator = ({ direction, onClick }) => {
 };
 
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
+import { Slot } from "@radix-ui/react-slot";
 import { getCoreRowModel, getSortedRowModel, useReactTable, getGroupedRowModel, getExpandedRowModel } from "@tanstack/react-table";
-import { useVirtualizer } from "@tanstack/react-virtual";
-import React9, { Fragment, useCallback as useCallback6, useEffect as useEffect3, useState as useState7 } from "react";
-import { log } from "@dxos/log";
+import React9, { Fragment, useCallback as useCallback6, useEffect as useEffect3, useState as useState8, useContext as useContext3 } from "react";
 import { useDefaultValue } from "@dxos/react-ui";
+import { mx as mx5 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-table/src/components/Table/TableBody.tsx
 import { useArrowNavigationGroup } from "@fluentui/react-tabster";
 import { flexRender } from "@tanstack/react-table";
-import React6 from "react";
+import React6, { useContext as useContext2 } from "react";
 
 // packages/ui/react-ui-table/src/components/Table/TableContext.tsx
 import React4, { useContext, createContext } from "react";
@@ -569,6 +569,35 @@ var useTableContext = () => {
   return context;
 };
 
+// packages/ui/react-ui-table/src/components/Table/TableRootContext.ts
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { createContext as createContext2, useRef as useRef3, useState as useState7 } from "react";
+var useTableRootContext = () => {
+  const scrollContextRef = useRef3(null);
+  const [tableCount, setTableCount] = useState7(0);
+  const virtualizer = useVirtualizer({
+    getScrollElement: () => scrollContextRef?.current ?? null,
+    count: tableCount,
+    overscan: 8,
+    estimateSize: () => 40
+  });
+  const dispatch = (action) => {
+    switch (action.type) {
+      case "updateTableCount":
+        setTableCount(action.count);
+        break;
+      default:
+        break;
+    }
+  };
+  return {
+    scrollContextRef,
+    virtualizer,
+    dispatch
+  };
+};
+var TableRootContext = createContext2({});
+
 // packages/ui/react-ui-table/src/theme.ts
 import { modalSurface, focusRing, ghostSelected, ghostSelectedCurrent, groupBorder, mx as mx4 } from "@dxos/react-ui-theme";
 var currentRow = "!bg-neutral-75 !dark:bg-neutral-850";
@@ -633,6 +662,7 @@ var TableBody = ({ rows }) => {
     axis: "grid"
   });
   const canBeCurrent = !isGrid && !!onDatumClick;
+  const { virtualizer } = useContext2(TableRootContext);
   return /* @__PURE__ */ React6.createElement("tbody", isGrid && domAttributes, rows.map((row) => {
     const isCurrent = currentDatum === row.original;
     const isSelected = rowSelection?.[row.id];
@@ -644,6 +674,8 @@ var TableBody = ({ rows }) => {
     return /* @__PURE__ */ React6.createElement("tr", {
       key: keyAccessor ? keyAccessor(row.original) : row.id,
       className: classNames,
+      "data-index": row.index,
+      ref: virtualizer.measureElement,
       ...isCurrent && {
         "aria-current": "location"
       },
@@ -741,12 +773,30 @@ var TableHead = (_props) => {
 TableHead.displayName = TABLE_HEAD_NAME;
 
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
-var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/components/Table/Table.tsx";
-var Table = (props) => {
-  const { role, onColumnResize, columnVisibility, header = true, rowsSelectable, debug, onDataSelectionChange, getScrollElement, pinLastRow } = props;
+var TableRoot = ({ children }) => {
+  const contextValue = useTableRootContext();
+  return /* @__PURE__ */ React9.createElement(TableRootContext.Provider, {
+    value: contextValue
+  }, children);
+};
+var TableViewport = ({ children, classNames, asChild, ...props }) => {
+  const { scrollContextRef } = useContext3(TableRootContext);
+  const classes = mx5(classNames);
+  return asChild ? /* @__PURE__ */ React9.createElement(Slot, {
+    ref: scrollContextRef,
+    ...props
+  }, children) : /* @__PURE__ */ React9.createElement("div", {
+    role: "none",
+    className: classes,
+    ref: scrollContextRef,
+    ...props
+  }, children);
+};
+var TablePrimitive = (props) => {
+  const { role, onColumnResize, columnVisibility, header = true, rowsSelectable, debug, onDataSelectionChange, pinLastRow } = props;
   const columns = useDefaultValue(props.columns, []);
   const incomingData = useDefaultValue(props.data, []);
-  const [data, setData] = useState7([
+  const [data, setData] = useState8([
     ...incomingData
   ]);
   const forceUpdate = useCallback6(() => setData([
@@ -764,7 +814,7 @@ var Table = (props) => {
     onColumnResize
   });
   const { rowSelection, handleRowSelectionChange } = useRowSelection(props);
-  const [grouping, handleGroupingChange] = useState7(props.grouping ?? []);
+  const [grouping, handleGroupingChange] = useState8(props.grouping ?? []);
   useEffect3(() => handleGroupingChange(props.grouping ?? []), [
     handleGroupingChange,
     props.grouping
@@ -814,16 +864,8 @@ var Table = (props) => {
     rowSelection,
     table
   ]);
-  usePinLastRow(pinLastRow, table, data, getScrollElement);
+  usePinLastRow(pinLastRow, table, data);
   const expand = false;
-  if (!getScrollElement) {
-    log.warn("Table: getScrollElement is not set. This is required for virtualized tables.", void 0, {
-      F: __dxlog_file,
-      L: 120,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
-  }
   return /* @__PURE__ */ React9.createElement(TableProvider2, {
     ...props,
     table,
@@ -832,20 +874,19 @@ var Table = (props) => {
     isGrid: role === "grid" || role === "treegrid"
   }, /* @__PURE__ */ React9.createElement(TableImpl, {
     debug: false,
-    getScrollElement,
     ...props
   }));
 };
 var TableImpl = (props) => {
-  const { debug, classNames, getScrollElement, role, footer, grouping, fullWidth } = props;
+  const { debug, classNames, role, footer, grouping, fullWidth } = props;
   const { table } = useTableContext();
   if (debug) {
     return /* @__PURE__ */ React9.createElement("pre", {
       className: "font-mono text-xs text-neutral-500 m-1 p-2 ring"
     }, /* @__PURE__ */ React9.createElement("code", null, JSON.stringify(table.getState(), void 0, 2)));
   }
-  const virtualisable = getScrollElement !== void 0;
   const isResizingColumn = table.getState().columnSizingInfo.isResizingColumn;
+  const TableComponent = isResizingColumn ? MemoizedVirtualisedTableContent : VirtualizedTableContent;
   return /* @__PURE__ */ React9.createElement("table", {
     role,
     className: tableRoot(props, classNames),
@@ -854,38 +895,26 @@ var TableImpl = (props) => {
         width: table.getTotalSize()
       }
     }
-  }, /* @__PURE__ */ React9.createElement(TableHead, null), grouping?.length !== 0 ? virtualisable ? isResizingColumn ? /* @__PURE__ */ React9.createElement(MemoizedVirtualisedTableContent, {
-    getScrollElement
-  }) : /* @__PURE__ */ React9.createElement(VirtualizedTableContent, {
-    getScrollElement
-  }) : /* @__PURE__ */ React9.createElement(UnvirtualizedTableContent, null) : /* @__PURE__ */ React9.createElement(GroupedTableContent, null), footer && /* @__PURE__ */ React9.createElement(TableFooter, null));
-};
-var UnvirtualizedTableContent = () => {
-  const { table } = useTableContext();
-  const centerRows = table.getCenterRows();
-  const pinnedRows = table.getBottomRows();
-  const rows = [
-    ...centerRows,
-    ...pinnedRows
-  ];
-  return /* @__PURE__ */ React9.createElement(TableBody, {
-    rows
-  });
+  }, /* @__PURE__ */ React9.createElement(TableHead, null), grouping?.length !== 0 ? /* @__PURE__ */ React9.createElement(TableComponent, null) : /* @__PURE__ */ React9.createElement(GroupedTableContent, null), footer && /* @__PURE__ */ React9.createElement(TableFooter, null));
 };
-var VirtualizedTableContent = ({ getScrollElement }) => {
+var VirtualizedTableContent = () => {
   const { table } = useTableContext();
+  const { virtualizer, dispatch } = useContext3(TableRootContext);
   const centerRows = table.getCenterRows();
   let pinnedRows = [];
+  useEffect3(() => {
+    dispatch({
+      type: "updateTableCount",
+      count: centerRows.length
+    });
+  }, [
+    centerRows.length
+  ]);
   try {
     pinnedRows = table.getBottomRows();
   } catch (_) {
   }
-  const { getTotalSize, getVirtualItems } = useVirtualizer({
-    getScrollElement,
-    count: centerRows.length,
-    overscan: 8,
-    estimateSize: () => 40
-  });
+  const { getTotalSize, getVirtualItems } = virtualizer;
   const virtualRows = getVirtualItems();
   const totalSize = getTotalSize();
   const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;
@@ -893,8 +922,8 @@ var VirtualizedTableContent = ({ getScrollElement }) => {
   const rowsToRender = [
     ...virtualRows.map((virtualRow) => centerRows[virtualRow.index]),
     ...pinnedRows
-  ];
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, paddingTop > 0 && /* @__PURE__ */ React9.createElement("tbody", {
+  ].filter((r) => !!r);
+  return /* @__PURE__ */ React9.createElement(Fragment, null, paddingTop > 0 && /* @__PURE__ */ React9.createElement("tbody", {
     role: "none"
   }, /* @__PURE__ */ React9.createElement("tr", {
     role: "none"
@@ -931,6 +960,11 @@ var GroupedTableContent = () => {
     }));
   }));
 };
+var Table = {
+  Root: TableRoot,
+  Table: TablePrimitive,
+  Viewport: TableViewport
+};
 
 // packages/ui/react-ui-table/src/helpers.tsx
 import { useFocusFinders } from "@fluentui/react-tabster";
@@ -938,11 +972,11 @@ import { Check as Check2, ClipboardText, X as X3 } from "@phosphor-icons/react";
 import { createColumnHelper } from "@tanstack/react-table";
 import { format } from "date-fns/format";
 import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
-import React10, { useCallback as useCallback7, useEffect as useEffect4, useRef as useRef3, useState as useState8 } from "react";
-import { log as log2 } from "@dxos/log";
+import React10, { useCallback as useCallback7, useEffect as useEffect4, useRef as useRef4, useState as useState9 } from "react";
+import { log } from "@dxos/log";
 import { Input as Input2, Tooltip } from "@dxos/react-ui";
-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";
+import { getSize as getSize4, mx as mx6 } from "@dxos/react-ui-theme";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/helpers.tsx";
 var createColumnBuilder = () => ({
   helper: createColumnHelper(),
   builder: new ColumnBuilder()
@@ -956,7 +990,7 @@ var ComboboxBuilderCell = (cellContext) => {
   }) : null;
 };
 var StringBuilderCell = (cellContext) => {
-  const ref = useRef3(null);
+  const ref = useRef4(null);
   const { findPrevFocusable } = useFocusFinders();
   const { onUpdate, cell } = cellContext.column.columnDef.meta;
   const initialValue = cellContext.getValue();
@@ -965,7 +999,7 @@ var StringBuilderCell = (cellContext) => {
   }, [
     initialValue
   ]);
-  const [value, setValue] = useState8(getInitialValue);
+  const [value, setValue] = useState9(getInitialValue);
   useEffect4(() => setValue(getInitialValue()), [
     getInitialValue
   ]);
@@ -1005,9 +1039,9 @@ var displayNumber = (value, digits) => value || value === 0 ? value.toLocaleStri
 var NumberBuilderCell = (cellContext) => {
   const { onUpdate, digits } = cellContext.column.columnDef.meta;
   const value = cellContext.getValue();
-  const [text, setText] = useState8(displayNumber(value, digits));
+  const [text, setText] = useState9(displayNumber(value, digits));
   const { findPrevFocusable } = useFocusFinders();
-  const ref = useRef3(null);
+  const ref = useRef4(null);
   useEffect4(() => {
     (!document.activeElement || document.activeElement !== ref.current) && setText(displayNumber(value, digits));
   }, [
@@ -1095,7 +1129,7 @@ var ColumnBuilder = class {
       cell: model && onUpdate ? ComboboxBuilderCell : (cellContext) => {
         const cellValue = cellContext.getValue();
         return /* @__PURE__ */ React10.createElement("div", {
-          className: mx5("truncate", classNames)
+          className: mx6("truncate", classNames)
         }, cellValue ? model?.getText(cellValue) : "");
       },
       ...props,
@@ -1126,7 +1160,7 @@ var ColumnBuilder = class {
           value = value.content;
         }
         return /* @__PURE__ */ React10.createElement("div", {
-          className: mx5("truncate", textPadding, classNames)
+          className: mx6("truncate", textPadding, classNames)
         }, value);
       },
       ...props,
@@ -1180,13 +1214,13 @@ var ColumnBuilder = class {
             addSuffix: true
           }) : value.toISOString() : void 0;
           return /* @__PURE__ */ React10.createElement("div", {
-            className: mx5(textPadding, classNames)
+            className: mx6(textPadding, classNames)
           }, str);
         } catch (err) {
-          log2.info("formatError", {
+          log.info("formatError", {
             value
           }, {
-            F: __dxlog_file2,
+            F: __dxlog_file,
             L: 376,
             S: this,
             C: (f, a) => f(...a)
@@ -1319,11 +1353,11 @@ var ColumnBuilder = class {
         const value = cell.getValue();
         if (value) {
           return /* @__PURE__ */ React10.createElement(IconOn, {
-            className: mx5("block mli-auto", getSize4(6), on?.className ?? "text-green-700")
+            className: mx6("block mli-auto", getSize4(6), on?.className ?? "text-green-700")
           });
         } else if (value === false) {
           return /* @__PURE__ */ React10.createElement(IconOff, {
-            className: mx5("block mli-auto", getSize4(6), off?.className ?? "text-red-700")
+            className: mx6("block mli-auto", getSize4(6), off?.className ?? "text-red-700")
           });
         } else {
           return null;
@@ -1492,6 +1526,8 @@ export {
   MemoizedVirtualisedTableContent,
   SortIndicator,
   Table,
+  TablePrimitive,
+  TableRootContext,
   createColumnBuilder,
   currentRow,
   flushPadding,
@@ -1517,6 +1553,7 @@ export {
   useColumnResizing,
   useColumnSorting,
   usePinLastRow,
-  useRowSelection
+  useRowSelection,
+  useTableRootContext
 };
 //# sourceMappingURL=index.mjs.map