@dxos/react-ui-table 0.4.10-main.8caae1d → 0.4.10-main.8eec616

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 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";
 
@@ -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"
@@ -233,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);
@@ -280,39 +332,91 @@ var useColumnSorting = (column) => {
 };
 
 // packages/ui/react-ui-table/src/hooks/usePinLastRow.ts
-import { 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();
-  useEffect(() => {
-    if (!pinLastRow) {
-      return;
+  const [pinnedRowKey, setPinnedRowKey] = useState5();
+  const scrollToBottom = useCallback3(() => {
+    const scrollElement = getScrollElement?.();
+    if (scrollElement) {
+      requestAnimationFrame(() => scrollElement.scrollTo({
+        top: scrollElement.scrollHeight
+      }));
     }
+  }, [
+    getScrollElement
+  ]);
+  const pinRow = useCallback3((rowToPin) => {
+    table.resetRowPinning();
+    rowToPin.pin("bottom");
+    setPinnedRowKey(rowToPin.id);
+  }, [
+    table
+  ]);
+  const clearRowPinning = useCallback3(() => {
+    table.resetRowPinning();
+    setPinnedRowKey(void 0);
+  }, [
+    table
+  ]);
+  const pinLastRowCallback = useCallback3(() => {
     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
+  ]);
+  useEffect2(() => {
+    if (pinLastRow) {
+      pinLastRowCallback();
+    }
+  }, [
+    data,
+    pinLastRow,
+    pinLastRowCallback
+  ]);
+};
+
+// 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
@@ -321,16 +425,16 @@ var ColumnMenu = ({ column, ...props }) => {
   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 = useCallback2(() => {
+  const onOpenColumnSettings = useCallback5(() => {
     shouldPreventFocusOnClose.current = true;
     setIsColumnSettingsOpen(true);
   }, [
     shouldPreventFocusOnClose,
     setIsColumnSettingsOpen
   ]);
-  const onDropdownCloseAutoFocus = useCallback2((event) => {
+  const onDropdownCloseAutoFocus = useCallback5((event) => {
     if (shouldPreventFocusOnClose.current) {
       event.preventDefault();
       shouldPreventFocusOnClose.current = false;
@@ -363,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
@@ -399,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)
@@ -441,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 useCallback3, 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";
@@ -642,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 = useCallback3(() => 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 = useCallback3((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
   ]);
@@ -730,7 +807,7 @@ var Table = (props) => {
     // Debug
     debugTable: debug
   });
-  useEffect2(() => {
+  useEffect3(() => {
     onDataSelectionChange?.(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
   }, [
     onDataSelectionChange,
@@ -742,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: 159,
+      L: 120,
       S: void 0,
       C: (f, a) => f(...a)
     });
@@ -762,12 +839,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 +858,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,
@@ -853,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";
@@ -875,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) {
@@ -917,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,
@@ -1099,7 +1187,7 @@ var ColumnBuilder = class {
             value
           }, {
             F: __dxlog_file2,
-            L: 374,
+            L: 376,
             S: this,
             C: (f, a) => f(...a)
           });
@@ -1426,7 +1514,9 @@ export {
   theadTh,
   theadTr,
   translations_default as translations,
+  useColumnResizing,
   useColumnSorting,
-  usePinLastRow
+  usePinLastRow,
+  useRowSelection
 };
 //# sourceMappingURL=index.mjs.map