@dxos/react-ui-table 0.4.10-main.c5e8686 → 0.4.10-main.cb83c78

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