@dxos/react-ui-table 0.4.10-main.4c7b3fa → 0.4.10-main.4d48ccf

package/dist/lib/browser/index.mjs

@@ -92,7 +92,7 @@ var CellCombobox = ({ model, value, onValueChange }) => {
 
 // packages/ui/react-ui-table/src/components/ColumnMenu/ColumnMenu.tsx
 import { X as X2, GearSix, CaretDown as CaretDown2, ArrowDown, ArrowUp } from "@phosphor-icons/react";
-import React3, { useRef as useRef2, useState as useState5, useCallback as useCallback3 } from "react";
+import React3, { useRef as useRef2, useState as useState6, useCallback as useCallback5 } from "react";
 import { Button as Button2, DensityProvider, Popover as Popover2, DropdownMenu } from "@dxos/react-ui";
 import { getSize as getSize3, mx as mx3 } from "@dxos/react-ui-theme";
 
@@ -252,11 +252,44 @@ var ColumnSettingsForm = ({ column, tableDef, tableDefs, onUpdate, onDelete, onC
   }))));
 };
 
+// packages/ui/react-ui-table/src/hooks/useColumnSizing.ts
+import { useCallback as useCallback2, useEffect, useState as useState3 } from "react";
+import { useOnTransition } from "@dxos/react-ui";
+var useColumnResizing = ({ columns, onColumnResize }) => {
+  const [columnsInitialised, setColumnsInitialised] = useState3(false);
+  const [columnSizing, setColumnSizing] = useState3({});
+  useEffect(() => {
+    if (columnsInitialised) {
+      return;
+    }
+    setColumnSizing(columns.filter((column) => !!column.size && column.prop !== void 0).reduce((state, column) => {
+      state[column.prop] = column.size;
+      return state;
+    }, {}));
+    setColumnsInitialised(true);
+  }, [
+    columns,
+    setColumnSizing
+  ]);
+  const [columnSizingInfo, setColumnSizingInfo] = useState3({});
+  const notifyColumnResize = useCallback2(() => onColumnResize?.(columnSizing), [
+    onColumnResize,
+    columnSizing
+  ]);
+  useOnTransition(columnSizingInfo.isResizingColumn, (v) => typeof v === "string", false, notifyColumnResize);
+  return {
+    columnSizing,
+    columnSizingInfo,
+    setColumnSizing,
+    setColumnSizingInfo
+  };
+};
+
 // packages/ui/react-ui-table/src/hooks/useColumnSorting.ts
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 var useColumnSorting = (column) => {
-  const [sortDirection, setSortDirection] = useState3(column.getIsSorted());
-  const [firstSort, setFirstSort] = useState3();
+  const [sortDirection, setSortDirection] = useState4(column.getIsSorted());
+  const [firstSort, setFirstSort] = useState4();
   const canSort = column.getCanSort();
   const updateColumnSort = (direction) => {
     setSortDirection(direction);
@@ -299,10 +332,10 @@ var useColumnSorting = (column) => {
 };
 
 // packages/ui/react-ui-table/src/hooks/usePinLastRow.ts
-import { useCallback as useCallback2, useEffect, useState as useState4 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect2, useState as useState5 } from "react";
 var usePinLastRow = (pinLastRow, table, data, getScrollElement) => {
-  const [pinnedRowKey, setPinnedRowKey] = useState4();
-  const scrollToBottom = useCallback2(() => {
+  const [pinnedRowKey, setPinnedRowKey] = useState5();
+  const scrollToBottom = useCallback3(() => {
     const scrollElement = getScrollElement?.();
     if (scrollElement) {
       requestAnimationFrame(() => scrollElement.scrollTo({
@@ -312,20 +345,20 @@ var usePinLastRow = (pinLastRow, table, data, getScrollElement) => {
   }, [
     getScrollElement
   ]);
-  const pinRow = useCallback2((rowToPin) => {
+  const pinRow = useCallback3((rowToPin) => {
     table.resetRowPinning();
     rowToPin.pin("bottom");
     setPinnedRowKey(rowToPin.id);
   }, [
     table
   ]);
-  const clearRowPinning = useCallback2(() => {
+  const clearRowPinning = useCallback3(() => {
     table.resetRowPinning();
     setPinnedRowKey(void 0);
   }, [
     table
   ]);
-  const pinLastRowCallback = useCallback2(() => {
+  const pinLastRowCallback = useCallback3(() => {
     const rows = table.getRowModel().rows;
     if (rows.length === 0) {
       return clearRowPinning();
@@ -343,7 +376,7 @@ var usePinLastRow = (pinLastRow, table, data, getScrollElement) => {
     scrollToBottom,
     pinnedRowKey
   ]);
-  useEffect(() => {
+  useEffect2(() => {
     if (pinLastRow) {
       pinLastRowCallback();
     }
@@ -354,22 +387,54 @@ var usePinLastRow = (pinLastRow, table, data, getScrollElement) => {
   ]);
 };
 
+// packages/ui/react-ui-table/src/hooks/useRowSelection.ts
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useCallback as useCallback4 } from "react";
+var useRowSelection = (props) => {
+  const [rowSelection = {}, setRowSelection] = useControllableState({
+    prop: props.rowSelection,
+    onChange: props.onRowSelectionChange,
+    defaultProp: props.defaultRowSelection
+  });
+  const handleRowSelectionChange = useCallback4((updaterOrValue) => {
+    const nextRowSelection = typeof updaterOrValue === "function" ? updaterOrValue(rowSelection) : updaterOrValue;
+    if (props.rowsSelectable === "multi") {
+      setRowSelection(nextRowSelection);
+    } else if (props.rowsSelectable) {
+      const nextRowSelectionKey = Object.keys(nextRowSelection).filter((id) => !rowSelection[id])[0];
+      setRowSelection(nextRowSelectionKey ? {
+        [nextRowSelectionKey]: true
+      } : {});
+    } else {
+      setRowSelection({});
+    }
+  }, [
+    props.rowsSelectable,
+    setRowSelection,
+    rowSelection
+  ]);
+  return {
+    rowSelection,
+    handleRowSelectionChange
+  };
+};
+
 // packages/ui/react-ui-table/src/components/ColumnMenu/ColumnMenu.tsx
 var ColumnMenu = ({ column, ...props }) => {
   const title = column.label?.length ? column.label : column.id;
   const header = props.context.header;
   const { canSort, sortDirection, onSelectSort, onToggleSort, onClearSort } = useColumnSorting(header.column);
   const columnSettingsAnchorRef = useRef2(null);
-  const [isColumnSettingsOpen, setIsColumnSettingsOpen] = useState5(false);
+  const [isColumnSettingsOpen, setIsColumnSettingsOpen] = useState6(false);
   const shouldPreventFocusOnClose = useRef2(false);
-  const onOpenColumnSettings = useCallback3(() => {
+  const onOpenColumnSettings = useCallback5(() => {
     shouldPreventFocusOnClose.current = true;
     setIsColumnSettingsOpen(true);
   }, [
     shouldPreventFocusOnClose,
     setIsColumnSettingsOpen
   ]);
-  const onDropdownCloseAutoFocus = useCallback3((event) => {
+  const onDropdownCloseAutoFocus = useCallback5((event) => {
     if (shouldPreventFocusOnClose.current) {
       event.preventDefault();
       shouldPreventFocusOnClose.current = false;
@@ -402,7 +467,7 @@ var ColumnMenu = ({ column, ...props }) => {
     variant: "ghost"
   }, /* @__PURE__ */ React3.createElement(CaretDown2, {
     className: getSize3(4)
-  })))), /* @__PURE__ */ React3.createElement(DropdownMenu.Content, {
+  })))), /* @__PURE__ */ React3.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React3.createElement(DropdownMenu.Content, {
     onCloseAutoFocus: onDropdownCloseAutoFocus,
     sideOffset: 4,
     collisionPadding: 8
@@ -438,7 +503,7 @@ var ColumnMenu = ({ column, ...props }) => {
     className: "opacity-50"
   }, /* @__PURE__ */ React3.createElement(GearSix, {
     className: mx3(getSize3(4), "rotate-90")
-  })))), /* @__PURE__ */ React3.createElement(DropdownMenu.Arrow, null)), /* @__PURE__ */ React3.createElement(ColumnSettingsPanel, {
+  })))), /* @__PURE__ */ React3.createElement(DropdownMenu.Arrow, null))), /* @__PURE__ */ React3.createElement(ColumnSettingsPanel, {
     ...props,
     column,
     onClose: () => setIsColumnSettingsOpen(false)
@@ -480,12 +545,11 @@ var SortIndicator = ({ direction, onClick }) => {
 };
 
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
-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 React9, { Fragment, useCallback as useCallback4, useEffect as useEffect2, useState as useState6 } from "react";
+import React9, { Fragment, useCallback as useCallback6, useEffect as useEffect3, useState as useState7 } from "react";
 import { log } from "@dxos/log";
-import { useDefaultValue, useOnTransition } from "@dxos/react-ui";
+import { useDefaultValue } from "@dxos/react-ui";
 
 // packages/ui/react-ui-table/src/components/Table/TableBody.tsx
 import { useArrowNavigationGroup } from "@fluentui/react-tabster";
@@ -681,53 +745,27 @@ var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/c
 var Table = (props) => {
   const { role, onColumnResize, columnVisibility, header = true, rowsSelectable, debug, onDataSelectionChange, getScrollElement, pinLastRow } = props;
   const columns = useDefaultValue(props.columns, []);
-  const data = useDefaultValue(props.data, []);
-  const TableProvider2 = TableProvider;
-  const [columnsInitialised, setColumnsInitialised] = useState6(false);
-  const [columnSizing, setColumnSizing] = useState6({});
-  useEffect2(() => {
-    if (columnsInitialised) {
-      return;
-    }
-    setColumnSizing(columns.filter((column) => !!column.size && column.prop !== void 0).reduce((state, column) => {
-      state[column.prop] = column.size;
-      return state;
-    }, {}));
-    setColumnsInitialised(true);
-  }, [
-    columns,
-    setColumnSizing
+  const incomingData = useDefaultValue(props.data, []);
+  const [data, setData] = useState7([
+    ...incomingData
   ]);
-  const [columnSizingInfo, setColumnSizingInfo] = useState6({});
-  const notifyColumnResize = useCallback4(() => onColumnResize?.(columnSizing), [
-    onColumnResize,
-    columnSizing
+  const forceUpdate = useCallback6(() => setData([
+    ...incomingData
+  ]), [
+    incomingData
   ]);
-  useOnTransition(columnSizingInfo.isResizingColumn, (v) => typeof v === "string", false, notifyColumnResize);
-  const [rowSelection = {}, setRowSelection] = useControllableState({
-    prop: props.rowSelection,
-    onChange: props.onRowSelectionChange,
-    defaultProp: props.defaultRowSelection
-  });
-  const handleRowSelectionChange = useCallback4((updaterOrValue) => {
-    const nextRowSelection = typeof updaterOrValue === "function" ? updaterOrValue(rowSelection) : updaterOrValue;
-    if (rowsSelectable === "multi") {
-      setRowSelection(nextRowSelection);
-    } else if (rowsSelectable) {
-      const nextRowSelectionKey = Object.keys(nextRowSelection).filter((id) => !rowSelection[id])[0];
-      setRowSelection(nextRowSelectionKey ? {
-        [nextRowSelectionKey]: true
-      } : {});
-    } else {
-      setRowSelection({});
-    }
-  }, [
-    rowsSelectable,
-    setRowSelection,
-    rowSelection
+  useEffect3(() => forceUpdate(), [
+    JSON.stringify(incomingData),
+    forceUpdate
   ]);
-  const [grouping, handleGroupingChange] = useState6(props.grouping ?? []);
-  useEffect2(() => handleGroupingChange(props.grouping ?? []), [
+  const TableProvider2 = TableProvider;
+  const { columnSizing, setColumnSizing, columnSizingInfo, setColumnSizingInfo } = useColumnResizing({
+    columns,
+    onColumnResize
+  });
+  const { rowSelection, handleRowSelectionChange } = useRowSelection(props);
+  const [grouping, handleGroupingChange] = useState7(props.grouping ?? []);
+  useEffect3(() => handleGroupingChange(props.grouping ?? []), [
     handleGroupingChange,
     props.grouping
   ]);
@@ -769,7 +807,7 @@ var Table = (props) => {
     // Debug
     debugTable: debug
   });
-  useEffect2(() => {
+  useEffect3(() => {
     onDataSelectionChange?.(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
   }, [
     onDataSelectionChange,
@@ -781,7 +819,7 @@ var Table = (props) => {
   if (!getScrollElement) {
     log.warn("Table: getScrollElement is not set. This is required for virtualized tables.", void 0, {
       F: __dxlog_file,
-      L: 160,
+      L: 120,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -900,7 +938,7 @@ 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, { useEffect as useEffect3, useRef as useRef3, useState as useState7 } from "react";
+import React10, { useCallback as useCallback7, useEffect as useEffect4, useRef as useRef3, useState as useState8 } from "react";
 import { log as log2 } from "@dxos/log";
 import { Input as Input2, Tooltip } from "@dxos/react-ui";
 import { getSize as getSize4, mx as mx5 } from "@dxos/react-ui-theme";
@@ -922,12 +960,15 @@ var StringBuilderCell = (cellContext) => {
   const { findPrevFocusable } = useFocusFinders();
   const { onUpdate, cell } = cellContext.column.columnDef.meta;
   const initialValue = cellContext.getValue();
-  const [value, setValue] = useState7(() => {
-    if (initialValue?.content) {
-      return initialValue?.content;
-    }
-    return initialValue;
-  });
+  const getInitialValue = useCallback7(() => {
+    return initialValue?.content ?? initialValue;
+  }, [
+    initialValue
+  ]);
+  const [value, setValue] = useState8(getInitialValue);
+  useEffect4(() => setValue(getInitialValue()), [
+    getInitialValue
+  ]);
   const handleSave = () => {
     ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();
     if (value !== initialValue) {
@@ -964,10 +1005,10 @@ 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] = useState7(displayNumber(value, digits));
+  const [text, setText] = useState8(displayNumber(value, digits));
   const { findPrevFocusable } = useFocusFinders();
   const ref = useRef3(null);
-  useEffect3(() => {
+  useEffect4(() => {
     (!document.activeElement || document.activeElement !== ref.current) && setText(displayNumber(value, digits));
   }, [
     digits,
@@ -1146,7 +1187,7 @@ var ColumnBuilder = class {
             value
           }, {
             F: __dxlog_file2,
-            L: 374,
+            L: 376,
             S: this,
             C: (f, a) => f(...a)
           });
@@ -1473,7 +1514,9 @@ export {
   theadTh,
   theadTr,
   translations_default as translations,
+  useColumnResizing,
   useColumnSorting,
-  usePinLastRow
+  usePinLastRow,
+  useRowSelection
 };
 //# sourceMappingURL=index.mjs.map