@dxos/react-ui-table 0.4.10-main.dd2b9ae → 0.4.10-main.dfa0529

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 useCallback2 } from "react";
+import React3, { useRef as useRef2, useState as useState5, useCallback as useCallback3 } 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";
 
@@ -107,19 +107,21 @@ var Section = ({ children, className }) => /* @__PURE__ */ React2.createElement(
   className: mx2("p-2", className)
 }, children);
 var ColumnSettingsForm = ({ column, tableDef, tableDefs, onUpdate, onDelete, onClose }) => {
-  const [prop, setProp] = useState2(column.id);
-  const [refTable, setRefTable] = useState2(column.refTable);
-  const [refProp, setRefProp] = useState2(column.refProp);
-  const [type, setType] = useState2(String(column.type));
-  const [label, setLabel] = useState2(column.label);
-  const [digits, setDigits] = useState2(String(column.digits ?? "0"));
+  const [formState, setFormState] = useState2({
+    prop: column.id,
+    refTable: column.refTable,
+    refProp: column.refProp,
+    type: String(column.type),
+    label: column.label,
+    digits: String(column.digits ?? "0")
+  });
   const propRef = useRef(null);
   const { t } = useTranslation2(translationKey);
   const handleCancel = () => {
-    setProp(column.id);
     onClose?.();
   };
   const handleSave = () => {
+    const { prop, refTable, refProp, type, label, digits } = formState;
     if (!prop.length || !prop.match(/^[a-zA-Z_].+/i)) {
       propRef.current?.focus();
       return;
@@ -131,7 +133,7 @@ var ColumnSettingsForm = ({ column, tableDef, tableDefs, onUpdate, onDelete, onC
         return;
       }
     }
-    onUpdate?.(prop, {
+    onUpdate?.(column.id, {
       id: prop,
       prop,
       label,
@@ -148,22 +150,30 @@ var ColumnSettingsForm = ({ column, tableDef, tableDefs, onUpdate, onDelete, onC
     classNames: "mbe-1"
   }, t("column label label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
     placeholder: "Column label",
-    value: label ?? "",
-    onChange: (event) => setLabel(event.target.value),
+    value: formState.label ?? "",
+    onChange: (event) => setFormState((prevState) => ({
+      ...prevState,
+      label: event.target.value
+    })),
     autoFocus: true
   })), /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
   }, t("property key label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
     ref: propRef,
     placeholder: "Property key",
-    // TODO(burdon): Provide hooks for value normalization, ENTER, ESC, etc.
-    value: prop ?? "",
-    onChange: (event) => setProp(event.target.value.replace(/[^\w_]/g, ""))
+    value: formState.prop ?? "",
+    onChange: (event) => setFormState((prevState) => ({
+      ...prevState,
+      prop: event.target.value.replace(/[^\w_]/g, "")
+    }))
   })), /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
   }, t("column type label")), /* @__PURE__ */ React2.createElement(Select.Root, {
-    value: type,
-    onValueChange: setType
+    value: formState.type,
+    onValueChange: (value) => setFormState((prevState) => ({
+      ...prevState,
+      type: value
+    }))
   }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
     placeholder: "Type",
     classNames: "is-full"
@@ -172,37 +182,46 @@ var ColumnSettingsForm = ({ column, tableDef, tableDefs, onUpdate, onDelete, onC
     "boolean",
     "string",
     "ref"
-  ].map((type2) => /* @__PURE__ */ React2.createElement(Select.Option, {
-    key: type2,
-    value: type2
-  }, t(`${type2} column type label`))))))))), type === "number" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Section, null, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
+  ].map((type) => /* @__PURE__ */ React2.createElement(Select.Option, {
+    key: type,
+    value: type
+  }, t(`${type} column type label`))))))))), formState.type === "number" && /* @__PURE__ */ React2.createElement(Section, null, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
   }, t("digits label")), /* @__PURE__ */ React2.createElement(Input.TextInput, {
-    value: digits ?? "",
-    onChange: (event) => setDigits(event.target.value)
-  })))), type === "ref" && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(Section, null, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
+    value: formState.digits ?? "",
+    onChange: (event) => setFormState((prevState) => ({
+      ...prevState,
+      digits: event.target.value
+    }))
+  }))), formState.type === "ref" && /* @__PURE__ */ React2.createElement(Section, null, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
   }, "Table"), /* @__PURE__ */ React2.createElement(Select.Root, {
-    value: refTable,
-    onValueChange: setRefTable
+    value: formState.refTable,
+    onValueChange: (value) => setFormState((prevState) => ({
+      ...prevState,
+      refTable: value
+    }))
   }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
     placeholder: "Table",
     classNames: "is-full"
   }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, tableDefs.filter((t2) => t2.id !== tableDef.id).map(({ id, name }) => /* @__PURE__ */ React2.createElement(Select.Option, {
     key: id,
     value: id
-  }, name ?? id))))))), refTable && /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
+  }, name ?? id))))))), formState.refTable && /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
     classNames: "mbe-1 mbs-3"
   }, "Table property"), /* @__PURE__ */ React2.createElement(Select.Root, {
-    value: refProp,
-    onValueChange: setRefProp
+    value: formState.refProp,
+    onValueChange: (value) => setFormState((prevState) => ({
+      ...prevState,
+      refProp: value
+    }))
   }, /* @__PURE__ */ React2.createElement(Select.TriggerButton, {
     placeholder: "Property",
     classNames: "is-full"
-  }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, tableDefs.find((tableDef2) => tableDef2.id === refTable)?.columns.map(({ id, label: label2 }) => /* @__PURE__ */ React2.createElement(Select.Option, {
+  }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, tableDefs.find((tableDef2) => tableDef2.id === formState.refTable)?.columns.map(({ id, label }) => /* @__PURE__ */ React2.createElement(Select.Option, {
     key: id,
     value: id
-  }, label2 ?? id))))))))), /* @__PURE__ */ React2.createElement(Separator, {
+  }, label ?? id)))))))), /* @__PURE__ */ React2.createElement(Separator, {
     classNames: "mli-2"
   }), /* @__PURE__ */ React2.createElement(Section, {
     className: "space-b-1.5"
@@ -280,38 +299,58 @@ var useColumnSorting = (column) => {
 };
 
 // packages/ui/react-ui-table/src/hooks/usePinLastRow.ts
-import { useEffect, useState as useState4 } from "react";
+import { useCallback as useCallback2, useEffect, useState as useState4 } from "react";
 var usePinLastRow = (pinLastRow, table, data, getScrollElement) => {
   const [pinnedRowKey, setPinnedRowKey] = useState4();
-  useEffect(() => {
-    if (!pinLastRow) {
-      return;
+  const scrollToBottom = useCallback2(() => {
+    const scrollElement = getScrollElement?.();
+    if (scrollElement) {
+      requestAnimationFrame(() => scrollElement.scrollTo({
+        top: scrollElement.scrollHeight
+      }));
     }
+  }, [
+    getScrollElement
+  ]);
+  const pinRow = useCallback2((rowToPin) => {
+    table.resetRowPinning();
+    rowToPin.pin("bottom");
+    setPinnedRowKey(rowToPin.id);
+  }, [
+    table
+  ]);
+  const clearRowPinning = useCallback2(() => {
+    table.resetRowPinning();
+    setPinnedRowKey(void 0);
+  }, [
+    table
+  ]);
+  const pinLastRowCallback = useCallback2(() => {
     const rows = table.getRowModel().rows;
-    const rowToPin = rows[rows.length - 1];
-    const rowId = rowToPin.id;
-    if (rowId === pinnedRowKey) {
+    if (rows.length === 0) {
+      return clearRowPinning();
+    }
+    const lastRow = rows[rows.length - 1];
+    if (lastRow.id === pinnedRowKey) {
       return;
     }
-    table.resetRowPinning();
-    rowToPin.pin("bottom");
-    const scrollElement = getScrollElement?.();
-    const isFirstRender = pinnedRowKey === void 0;
-    if (scrollElement && !isFirstRender) {
-      requestAnimationFrame(() => {
-        scrollElement.scrollTo({
-          top: scrollElement.scrollHeight
-        });
-      });
+    pinRow(lastRow);
+    if (pinnedRowKey !== void 0) {
+      scrollToBottom();
     }
-    setPinnedRowKey(rowId);
   }, [
-    pinLastRow,
     table,
-    getScrollElement,
-    pinnedRowKey,
-    setPinnedRowKey,
-    data
+    scrollToBottom,
+    pinnedRowKey
+  ]);
+  useEffect(() => {
+    if (pinLastRow) {
+      pinLastRowCallback();
+    }
+  }, [
+    data,
+    pinLastRow,
+    pinLastRowCallback
   ]);
 };
 
@@ -323,14 +362,14 @@ var ColumnMenu = ({ column, ...props }) => {
   const columnSettingsAnchorRef = useRef2(null);
   const [isColumnSettingsOpen, setIsColumnSettingsOpen] = useState5(false);
   const shouldPreventFocusOnClose = useRef2(false);
-  const onOpenColumnSettings = useCallback2(() => {
+  const onOpenColumnSettings = useCallback3(() => {
     shouldPreventFocusOnClose.current = true;
     setIsColumnSettingsOpen(true);
   }, [
     shouldPreventFocusOnClose,
     setIsColumnSettingsOpen
   ]);
-  const onDropdownCloseAutoFocus = useCallback2((event) => {
+  const onDropdownCloseAutoFocus = useCallback3((event) => {
     if (shouldPreventFocusOnClose.current) {
       event.preventDefault();
       shouldPreventFocusOnClose.current = false;
@@ -444,7 +483,7 @@ var SortIndicator = ({ direction, onClick }) => {
 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 useCallback3, useEffect as useEffect2, useState as useState6 } from "react";
+import React9, { Fragment, useCallback as useCallback4, useEffect as useEffect2, useState as useState6 } from "react";
 import { log } from "@dxos/log";
 import { useDefaultValue, useOnTransition } from "@dxos/react-ui";
 
@@ -660,7 +699,7 @@ var Table = (props) => {
     setColumnSizing
   ]);
   const [columnSizingInfo, setColumnSizingInfo] = useState6({});
-  const notifyColumnResize = useCallback3(() => onColumnResize?.(columnSizing), [
+  const notifyColumnResize = useCallback4(() => onColumnResize?.(columnSizing), [
     onColumnResize,
     columnSizing
   ]);
@@ -670,7 +709,7 @@ var Table = (props) => {
     onChange: props.onRowSelectionChange,
     defaultProp: props.defaultRowSelection
   });
-  const handleRowSelectionChange = useCallback3((updaterOrValue) => {
+  const handleRowSelectionChange = useCallback4((updaterOrValue) => {
     const nextRowSelection = typeof updaterOrValue === "function" ? updaterOrValue(rowSelection) : updaterOrValue;
     if (rowsSelectable === "multi") {
       setRowSelection(nextRowSelection);
@@ -742,7 +781,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: 159,
+      L: 160,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -762,12 +801,6 @@ var Table = (props) => {
 var TableImpl = (props) => {
   const { debug, classNames, getScrollElement, role, footer, grouping, fullWidth } = props;
   const { table } = useTableContext();
-  const centerRows = table.getCenterRows();
-  const bottomRows = table.getBottomRows();
-  const rows = [
-    ...centerRows,
-    ...bottomRows
-  ];
   if (debug) {
     return /* @__PURE__ */ React9.createElement("pre", {
       className: "font-mono text-xs text-neutral-500 m-1 p-2 ring"
@@ -787,14 +820,28 @@ var TableImpl = (props) => {
     getScrollElement
   }) : /* @__PURE__ */ React9.createElement(VirtualizedTableContent, {
     getScrollElement
-  }) : /* @__PURE__ */ React9.createElement(TableBody, {
+  }) : /* @__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(GroupedTableContent, null), footer && /* @__PURE__ */ React9.createElement(TableFooter, null));
+  });
 };
 var VirtualizedTableContent = ({ getScrollElement }) => {
   const { table } = useTableContext();
   const centerRows = table.getCenterRows();
-  const pinnedRows = table.getBottomRows();
+  let pinnedRows = [];
+  try {
+    pinnedRows = table.getBottomRows();
+  } catch (_) {
+  }
   const { getTotalSize, getVirtualItems } = useVirtualizer({
     getScrollElement,
     count: centerRows.length,