@dxos/react-ui-table 0.4.3-main.f97384b → 0.4.3

package/dist/lib/browser/index.mjs

@@ -191,7 +191,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 { getCoreRowModel, useReactTable, getGroupedRowModel } 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";
@@ -263,8 +263,7 @@ Cell.displayName = CELL_NAME;
 // packages/ui/react-ui-table/src/components/Table/TableBody.tsx
 var TABLE_BODY_NAME = "TableBody";
 var TableBody = ({ rows }) => {
-  const tableContext = useTableContext(TABLE_BODY_NAME);
-  const { table, keyAccessor, debug, expand, isGrid, onDatumClick, currentDatum } = tableContext;
+  const { table, keyAccessor, currentDatum, debug, expand, isGrid, onDatumClick } = useTableContext(TABLE_BODY_NAME);
   const rowSelection = table.getState().rowSelection;
   const domAttributes = useArrowNavigationGroup({
     axis: "grid"
@@ -311,9 +310,9 @@ TableBody.displayName = TABLE_BODY_NAME;
 // packages/ui/react-ui-table/src/components/Table/TableFooter.tsx
 import { flexRender as flexRender2 } from "@tanstack/react-table";
 import React4 from "react";
-var TABLE_FOOTER_NAME = "TableFooter";
+var TABLE_FOOT_NAME = "TableFooter";
 var TableFooter = (props) => {
-  const tableContext = useTableContext(TABLE_FOOTER_NAME);
+  const tableContext = useTableContext(TABLE_FOOT_NAME);
   const { table, expand, debug } = tableContext;
   const footers = table.getFooterGroups();
   return /* @__PURE__ */ React4.createElement("tfoot", {
@@ -328,13 +327,13 @@ var TableFooter = (props) => {
     }, footer.isPlaceholder ? null : flexRender2(footer.column.columnDef.footer, footer.getContext()));
   }), expand && /* @__PURE__ */ React4.createElement("th", null))));
 };
-TableFooter.displayName = TABLE_FOOTER_NAME;
+TableFooter.displayName = TABLE_FOOT_NAME;
 
 // packages/ui/react-ui-table/src/components/Table/TableHead.tsx
 import { flexRender as flexRender3 } from "@tanstack/react-table";
 import React5 from "react";
 import { mx as mx3 } from "@dxos/react-ui-theme";
-var TABLE_HEAD_NAME = "TableHead";
+var TABLE_HEAD_NAME = "TableHeader";
 var TableHead = (_props) => {
   const tableContext = useTableContext(TABLE_HEAD_NAME);
   const headerGroups = tableContext.table.getHeaderGroups();
@@ -377,90 +376,56 @@ 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: getGroupedRowModel2, getHeaderGroups, getState }, debug } = useTableContext("GroupedTableContent");
-  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, getGroupedRowModel2().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, classNames, getScrollElement } = props;
+  const { role, data = [], columns = [], onColumnResize, columnVisibility, header = true, rowsSelectable, debug, onDataSelectionChange } = props;
   const TableProvider2 = TableProvider;
-  const [rowSelection = {}, directlySetRowSelection] = useControllableState({
+  const [columnSizing, setColumnSizing] = useState2({});
+  useEffect(() => {
+    setColumnSizing(columns.filter((column) => !!column.size && column.prop !== void 0).reduce((state, column) => {
+      state[column.prop] = column.size;
+      return state;
+    }, {}));
+  }, [
+    columns
+  ]);
+  const [columnSizingInfo, setColumnSizingInfo] = useState2({});
+  const onColumnResizeDebounced = onColumnResize && debounce(onColumnResize, 1e3);
+  useEffect(() => {
+    if (columnSizingInfo.columnSizingStart?.length === 0) {
+      onColumnResizeDebounced?.(table.getState().columnSizing);
+    }
+  }, [
+    columnSizingInfo
+  ]);
+  const [rowSelection = {}, setRowSelection] = useControllableState({
     prop: props.rowSelection,
     onChange: props.onRowSelectionChange,
     defaultProp: props.defaultRowSelection
   });
+  useEffect(() => {
+    onDataSelectionChange?.(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
+  }, [
+    onDataSelectionChange,
+    rowSelection
+  ]);
   const handleRowSelectionChange = useCallback((updaterOrValue) => {
     const nextRowSelection = typeof updaterOrValue === "function" ? updaterOrValue(rowSelection) : updaterOrValue;
     if (rowsSelectable === "multi") {
-      directlySetRowSelection(nextRowSelection);
+      setRowSelection(nextRowSelection);
     } else if (rowsSelectable) {
       const nextRowSelectionKey = Object.keys(nextRowSelection).filter((id) => !rowSelection[id])[0];
-      directlySetRowSelection(nextRowSelectionKey ? {
+      setRowSelection(nextRowSelectionKey ? {
         [nextRowSelectionKey]: true
       } : {});
     } else {
-      directlySetRowSelection({});
+      setRowSelection({});
     }
   }, [
     rowSelection,
-    directlySetRowSelection
+    setRowSelection
   ]);
-  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 ?? []), [
+  const [grouping, handleGroupingChange] = useState2(props.grouping ?? []);
+  useEffect(() => handleGroupingChange(props.grouping ?? []), [
     props.grouping
   ]);
   const table = useReactTable({
@@ -473,18 +438,24 @@ var Table = (props) => {
       size: 256,
       maxSize: 1024
     },
-    // Rows
-    getCoreRowModel: getCoreRowModel(),
     // State
     state: {
       columnVisibility,
+      columnSizing,
       columnSizingInfo,
       rowSelection,
       grouping
     },
+    // Resize columns
+    columnResizeMode: "onChange",
+    enableColumnResizing: true,
+    onColumnSizingChange: setColumnSizing,
+    onColumnSizingInfoChange: setColumnSizingInfo,
+    // Rows
+    getCoreRowModel: getCoreRowModel(),
     // Grouping
-    getGroupedRowModel: getGroupedRowModel(),
-    onGroupingChange: setGrouping,
+    getGroupedRowModel: grouping.length > 1 ? getGroupedRowModel() : void 0,
+    onGroupingChange: handleGroupingChange,
     // Selection
     ...rowsSelectable === "multi" ? {
       enableMultiRowSelection: true
@@ -492,31 +463,30 @@ var Table = (props) => {
       enableRowSelection: true
     } : {},
     onRowSelectionChange: handleRowSelectionChange,
-    // Resize columns
-    columnResizeMode: "onChange",
-    enableColumnResizing: true,
-    onColumnSizingInfoChange: setColumnSizingInfo,
     // Debug
     debugTable: debug
   });
-  const rows = table.getRowModel().rows;
-  useEffect(() => {
-    if (onDataSelectionChange) {
-      onDataSelectionChange(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
-    }
-  }, [
-    onDataSelectionChange,
-    rowSelection,
-    table
-  ]);
   const expand = false;
   return /* @__PURE__ */ React6.createElement(TableProvider2, {
     ...props,
+    table,
     header,
     expand,
-    table,
     isGrid: role === "grid" || role === "treegrid"
-  }, /* @__PURE__ */ React6.createElement("table", {
+  }, /* @__PURE__ */ React6.createElement(TableImpl, {
+    debug: false
+  }));
+};
+var TableImpl = (props) => {
+  const { role, footer, grouping, getScrollElement, fullWidth, classNames, debug } = props;
+  const { table } = useTableContext("TableImpl");
+  const { rows } = table.getRowModel();
+  if (debug) {
+    return /* @__PURE__ */ React6.createElement("pre", {
+      className: "font-mono text-xs text-neutral-500 m-1 p-2 ring"
+    }, /* @__PURE__ */ React6.createElement("code", null, JSON.stringify(table.getState(), void 0, 2)));
+  }
+  return /* @__PURE__ */ React6.createElement("table", {
     role,
     className: tableRoot(props, classNames),
     ...!fullWidth && {
@@ -524,13 +494,60 @@ var Table = (props) => {
         width: table.getTotalSize()
       }
     }
-  }, /* @__PURE__ */ React6.createElement(TableHead, null), grouping.length === 0 ? getScrollElement ? /* @__PURE__ */ React6.createElement(VirtualizedTableContent, {
+  }, /* @__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))));
+  }) : /* @__PURE__ */ React6.createElement(GroupedTableContent, null), footer && /* @__PURE__ */ React6.createElement(TableFooter, null));
+};
+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: getGroupedRowModel2, getHeaderGroups, getState }, debug } = useTableContext("GroupedTableContent");
+  return /* @__PURE__ */ React6.createElement(React6.Fragment, null, getGroupedRowModel2().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
+    }));
+  }));
 };
 
 // packages/ui/react-ui-table/src/components/Cell/CellCombobox.tsx