@dxos/react-ui-table 0.4.7-next.f4b92be → 0.4.8-main.00e6f19

package/dist/lib/browser/index.mjs

@@ -195,6 +195,8 @@ import { getCoreRowModel, useReactTable, getGroupedRowModel } from "@tanstack/re
 import { useVirtualizer } from "@tanstack/react-virtual";
 import React6, { Fragment, useCallback, useEffect, useState as useState2 } from "react";
 import { debounce } from "@dxos/async";
+import { log } from "@dxos/log";
+import { useDefaultValue } from "@dxos/react-ui";
 
 // packages/ui/react-ui-table/src/components/Table/TableBody.tsx
 import { useArrowNavigationGroup } from "@fluentui/react-tabster";
@@ -214,7 +216,7 @@ 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.5";
-var gridCellFocusRing = "focus:z-[11] focus:outline outline-2 outline-primary-500 dark:outline-primary-400";
+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 && fixedSurface, ...etc);
@@ -239,10 +241,11 @@ var FocusableCell = ({ cell, children }) => {
   const domAttributes = useFocusableGroup({
     tabBehavior: "limited"
   });
+  const className = tdRoot(tableContext, cell.column.columnDef.meta?.cell?.classNames);
   return /* @__PURE__ */ React2.createElement("td", {
     tabIndex: 0,
     ...domAttributes,
-    className: tdRoot(tableContext, cell.column.columnDef.meta?.cell?.classNames)
+    className
   }, children);
 };
 var StaticCell = ({ cell, children }) => {
@@ -376,8 +379,11 @@ 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, data = [], columns = [], onColumnResize, columnVisibility, header = true, rowsSelectable, debug, onDataSelectionChange } = props;
+  const { role, onColumnResize, columnVisibility, header = true, rowsSelectable, debug, onDataSelectionChange, getScrollElement } = props;
+  const columns = useDefaultValue(props.columns, []);
+  const data = useDefaultValue(props.data, []);
   const TableProvider2 = TableProvider;
   const [columnSizing, setColumnSizing] = useState2({});
   useEffect(() => {
@@ -386,28 +392,15 @@ var Table = (props) => {
       return state;
     }, {}));
   }, [
-    columns
+    columns,
+    setColumnSizing
   ]);
   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") {
@@ -421,11 +414,13 @@ var Table = (props) => {
       setRowSelection({});
     }
   }, [
-    rowSelection,
-    setRowSelection
+    rowsSelectable,
+    setRowSelection,
+    rowSelection
   ]);
   const [grouping, handleGroupingChange] = useState2(props.grouping ?? []);
   useEffect(() => handleGroupingChange(props.grouping ?? []), [
+    handleGroupingChange,
     props.grouping
   ]);
   const table = useReactTable({
@@ -456,17 +451,39 @@ var Table = (props) => {
     // Grouping
     getGroupedRowModel: grouping.length > 1 ? getGroupedRowModel() : void 0,
     onGroupingChange: handleGroupingChange,
-    // Selection
-    ...rowsSelectable === "multi" ? {
-      enableMultiRowSelection: true
-    } : rowsSelectable ? {
-      enableRowSelection: true
-    } : {},
+    enableMultiRowSelection: rowsSelectable === "multi" ? true : void 0,
+    enableRowSelection: rowsSelectable === true ? true : void 0,
     onRowSelectionChange: handleRowSelectionChange,
     // Debug
     debugTable: debug
   });
+  const onColumnResizeDebounced = onColumnResize && debounce(onColumnResize, 1e3);
+  useEffect(() => {
+    onDataSelectionChange?.(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
+  }, [
+    onDataSelectionChange,
+    rowSelection,
+    table
+  ]);
+  useEffect(() => {
+    const shouldTriggerResize = columnSizingInfo.columnSizingStart?.length === 0;
+    if (shouldTriggerResize) {
+      onColumnResizeDebounced?.(table.getState().columnSizing);
+    }
+  }, [
+    columnSizingInfo,
+    onColumnResizeDebounced,
+    table
+  ]);
   const expand = false;
+  if (!getScrollElement) {
+    log.warn("Table: getScrollElement is not set. This is required for virtualized tables.", void 0, {
+      F: __dxlog_file,
+      L: 148,
+      S: void 0,
+      C: (f, a) => f(...a)
+    });
+  }
   return /* @__PURE__ */ React6.createElement(TableProvider2, {
     ...props,
     table,
@@ -474,11 +491,13 @@ var Table = (props) => {
     expand,
     isGrid: role === "grid" || role === "treegrid"
   }, /* @__PURE__ */ React6.createElement(TableImpl, {
-    debug: false
+    debug: false,
+    getScrollElement,
+    ...props
   }));
 };
 var TableImpl = (props) => {
-  const { role, footer, grouping, getScrollElement, fullWidth, classNames, debug } = props;
+  const { debug, classNames, getScrollElement, role, footer, grouping, fullWidth } = props;
   const { table } = useTableContext("TableImpl");
   const { rows } = table.getRowModel();
   if (debug) {
@@ -486,6 +505,7 @@ var TableImpl = (props) => {
       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)));
   }
+  const isResizingColumn = table.getState().columnSizingInfo.isResizingColumn;
   return /* @__PURE__ */ React6.createElement("table", {
     role,
     className: tableRoot(props, classNames),
@@ -494,7 +514,9 @@ var TableImpl = (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 ? isResizingColumn ? /* @__PURE__ */ React6.createElement(MemoizedVirtualisedTableContent, {
+    getScrollElement
+  }) : /* @__PURE__ */ React6.createElement(VirtualizedTableContent, {
     getScrollElement
   }) : /* @__PURE__ */ React6.createElement(TableBody, {
     rows
@@ -506,7 +528,7 @@ var VirtualizedTableContent = ({ getScrollElement }) => {
   const { getTotalSize, getVirtualItems } = useVirtualizer({
     getScrollElement,
     count: rows.length,
-    overscan: 16,
+    overscan: 4,
     estimateSize: () => 33
   });
   const virtualRows = getVirtualItems();
@@ -535,6 +557,7 @@ var VirtualizedTableContent = ({ getScrollElement }) => {
     role: "none"
   }))));
 };
+var MemoizedVirtualisedTableContent = /* @__PURE__ */ React6.memo(VirtualizedTableContent);
 var GroupedTableContent = () => {
   const { table: { getGroupedRowModel: getGroupedRowModel2, getHeaderGroups, getState }, debug } = useTableContext("GroupedTableContent");
   return /* @__PURE__ */ React6.createElement(React6.Fragment, null, getGroupedRowModel2().rows.map((row, i) => {
@@ -626,8 +649,10 @@ import { createColumnHelper } from "@tanstack/react-table";
 import { format } from "date-fns/format";
 import { formatDistanceToNow } from "date-fns/formatDistanceToNow";
 import React8, { 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 getSize3, 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(),
   builder: new ColumnBuilder()
@@ -641,8 +666,9 @@ var ComboboxBuilderCell = (cellContext) => {
   }) : null;
 };
 var StringBuilderCell = (cellContext) => {
-  const inputRef = useRef2(null);
-  const { onUpdate } = cellContext.column.columnDef.meta;
+  const ref = useRef2(null);
+  const { findPrevFocusable } = useFocusFinders();
+  const { onUpdate, cell } = cellContext.column.columnDef.meta;
   const initialValue = cellContext.getValue();
   const [value, setValue] = useState4(() => {
     if (initialValue?.content) {
@@ -651,27 +677,26 @@ var StringBuilderCell = (cellContext) => {
     return initialValue;
   });
   const handleSave = () => {
-    if (value === initialValue) {
-      return;
+    ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();
+    if (value !== initialValue) {
+      onUpdate?.(cellContext.row.original, cellContext.column.id, value);
     }
-    onUpdate?.(cellContext.row.original, cellContext.column.id, value);
-  };
-  const handleCancel = () => {
-    setValue(initialValue);
   };
+  const handleCancel = () => setValue(initialValue);
   const rows = cellContext.table.getRowModel().flatRows;
   const columns = cellContext.table.getVisibleFlatColumns();
   const placeholder = cellContext.row.index === rows.length - 1 && columns[0].id === cellContext.column.id;
   return /* @__PURE__ */ React8.createElement(Input2.Root, null, /* @__PURE__ */ React8.createElement(Input2.TextInput, {
-    ref: inputRef,
+    ref,
     variant: "subdued",
     placeholder: placeholder ? "Add row..." : void 0,
     classNames: [
       "is-full",
-      textPadding
+      textPadding,
+      cell?.classNames
     ],
     value: value ?? "",
-    onBlur: () => handleSave(),
+    onBlur: handleSave,
     onChange: (event) => setValue(event.target.value),
     onKeyDown: (event) => event.key === "Enter" && handleSave() || event.key === "Escape" && handleCancel()
   }));
@@ -693,15 +718,15 @@ var NumberBuilderCell = (cellContext) => {
     digits,
     value
   ]);
-  const handleEdit = () => {
-    if (onUpdate) {
-      setText(value !== void 0 ? String(value) : "");
-    }
-  };
+  const handleEdit = () => setText(value !== void 0 ? String(value) : "");
   const handleSave = () => {
     const nextValue = parseNumber(text);
-    onUpdate?.(cellContext.row.original, cellContext.column.id, isNaN(nextValue) ? void 0 : nextValue);
-    setText(displayNumber(nextValue, digits));
+    if (!isNaN(nextValue)) {
+      onUpdate?.(cellContext.row.original, cellContext.column.id, nextValue);
+      setText(displayNumber(nextValue, digits));
+    } else {
+      setText(displayNumber(value, digits));
+    }
     ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();
   };
   const _handleCancel = () => {
@@ -731,10 +756,12 @@ 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__ */ React8.createElement(Input2.Root, null, /* @__PURE__ */ React8.createElement(Input2.Checkbox, {
+  return /* @__PURE__ */ React8.createElement("div", {
+    className: "flex justify-center w-full h-full",
+    role: "presentation"
+  }, /* @__PURE__ */ React8.createElement(Input2.Root, null, /* @__PURE__ */ React8.createElement(Input2.Checkbox, {
     size: 4,
     classNames: [
-      "mli-auto",
       cell?.classNames
     ],
     checked,
@@ -744,7 +771,7 @@ var RowSelectorBuilderCell = (cellContext) => {
       }
     },
     disabled: !(row.getCanSelect() || row.getCanSelectSubRows())
-  }));
+  })));
 };
 var SwitchBuilderCell = (cellContext) => {
   const { onUpdate } = cellContext.column.columnDef.meta;
@@ -861,7 +888,14 @@ var ColumnBuilder = class {
             className: mx5(textPadding, classNames)
           }, str);
         } catch (err) {
-          console.log(value);
+          log2.info("formatError", {
+            value
+          }, {
+            F: __dxlog_file2,
+            L: 370,
+            S: this,
+            C: (f, a) => f(...a)
+          });
           return null;
         }
       },
@@ -922,8 +956,7 @@ var ColumnBuilder = class {
     return {
       id,
       size: 32,
-      minSize: 32,
-      maxSize: 32,
+      enableResizing: false,
       meta: {
         onUpdate,
         cell: {
@@ -933,7 +966,10 @@ var ColumnBuilder = class {
       header: ({ table }) => {
         const { rowsSelectable } = useTableContext("HELPER_SELECT_ROW_HEADER_CELL");
         const checked = table.getIsSomeRowsSelected() ? "indeterminate" : table.getIsAllRowsSelected();
-        return rowsSelectable === "multi" ? /* @__PURE__ */ React8.createElement(Input2.Root, null, /* @__PURE__ */ React8.createElement(Input2.Checkbox, {
+        return rowsSelectable === "multi" ? /* @__PURE__ */ React8.createElement("div", {
+          className: "flex justify-center w-full h-full",
+          role: "presentation"
+        }, /* @__PURE__ */ React8.createElement(Input2.Root, null, /* @__PURE__ */ React8.createElement(Input2.Checkbox, {
           size: 4,
           classNames: [
             "mli-auto",
@@ -941,7 +977,7 @@ var ColumnBuilder = class {
           ],
           checked,
           onCheckedChange: () => table.toggleAllRowsSelected()
-        })) : null;
+        }))) : null;
       },
       cell: RowSelectorBuilderCell
     };
@@ -1003,6 +1039,7 @@ export {
   ColumnBuilder,
   ColumnMenu,
   ColumnPanel,
+  MemoizedVirtualisedTableContent,
   Table,
   createColumnBuilder,
   currentRow,