@dxos/react-ui-table 0.4.10-main.fe71b4c → 0.4.10-next.169e4e3

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,33 +332,33 @@ var useColumnSorting = (column) => {
 };
 
 // packages/ui/react-ui-table/src/hooks/usePinLastRow.ts
-import { useCallback as useCallback2, 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
+import { useCallback as useCallback3, useEffect as useEffect2, useState as useState5 } from "react";
+var usePinLastRow = (pinLastRow, table, data) => {
+  const { scrollContextRef } = useTableRootContext();
+  const [pinnedRowKey, setPinnedRowKey] = useState5();
+  const scrollToBottom = useCallback3(() => {
+    const element = scrollContextRef.current;
+    const scrollHeight = element?.scrollHeight;
+    if (element && scrollHeight) {
+      requestAnimationFrame(() => element.scrollTo({
+        top: scrollHeight
       }));
     }
-  }, [
-    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,17 +545,16 @@ var SortIndicator = ({ direction, onClick }) => {
 };
 
 // packages/ui/react-ui-table/src/components/Table/Table.tsx
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { Slot } from "@radix-ui/react-slot";
 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 { log } from "@dxos/log";
-import { useDefaultValue, useOnTransition } from "@dxos/react-ui";
+import React9, { Fragment, useCallback as useCallback6, useEffect as useEffect3, useState as useState8, useContext as useContext3 } from "react";
+import { useDefaultValue } from "@dxos/react-ui";
+import { mx as mx5 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-table/src/components/Table/TableBody.tsx
 import { useArrowNavigationGroup } from "@fluentui/react-tabster";
 import { flexRender } from "@tanstack/react-table";
-import React6 from "react";
+import React6, { useContext as useContext2 } from "react";
 
 // packages/ui/react-ui-table/src/components/Table/TableContext.tsx
 import React4, { useContext, createContext } from "react";
@@ -505,6 +569,35 @@ var useTableContext = () => {
   return context;
 };
 
+// packages/ui/react-ui-table/src/components/Table/TableRootContext.ts
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { createContext as createContext2, useRef as useRef3, useState as useState7 } from "react";
+var useTableRootContext = () => {
+  const scrollContextRef = useRef3(null);
+  const [tableCount, setTableCount] = useState7(0);
+  const virtualizer = useVirtualizer({
+    getScrollElement: () => scrollContextRef?.current ?? null,
+    count: tableCount,
+    overscan: 8,
+    estimateSize: () => 40
+  });
+  const dispatch = (action) => {
+    switch (action.type) {
+      case "updateTableCount":
+        setTableCount(action.count);
+        break;
+      default:
+        break;
+    }
+  };
+  return {
+    scrollContextRef,
+    virtualizer,
+    dispatch
+  };
+};
+var TableRootContext = createContext2({});
+
 // packages/ui/react-ui-table/src/theme.ts
 import { modalSurface, focusRing, ghostSelected, ghostSelectedCurrent, groupBorder, mx as mx4 } from "@dxos/react-ui-theme";
 var currentRow = "!bg-neutral-75 !dark:bg-neutral-850";
@@ -569,6 +662,7 @@ var TableBody = ({ rows }) => {
     axis: "grid"
   });
   const canBeCurrent = !isGrid && !!onDatumClick;
+  const { virtualizer } = useContext2(TableRootContext);
   return /* @__PURE__ */ React6.createElement("tbody", isGrid && domAttributes, rows.map((row) => {
     const isCurrent = currentDatum === row.original;
     const isSelected = rowSelection?.[row.id];
@@ -580,6 +674,8 @@ var TableBody = ({ rows }) => {
     return /* @__PURE__ */ React6.createElement("tr", {
       key: keyAccessor ? keyAccessor(row.original) : row.id,
       className: classNames,
+      "data-index": row.index,
+      ref: virtualizer.measureElement,
       ...isCurrent && {
         "aria-current": "location"
       },
@@ -677,57 +773,49 @@ 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, onColumnResize, columnVisibility, header = true, rowsSelectable, debug, onDataSelectionChange, getScrollElement, pinLastRow } = props;
+var TableRoot = ({ children }) => {
+  const contextValue = useTableRootContext();
+  return /* @__PURE__ */ React9.createElement(TableRootContext.Provider, {
+    value: contextValue
+  }, children);
+};
+var TableViewport = ({ children, classNames, asChild, ...props }) => {
+  const { scrollContextRef } = useContext3(TableRootContext);
+  const classes = mx5(classNames);
+  return asChild ? /* @__PURE__ */ React9.createElement(Slot, {
+    ref: scrollContextRef,
+    ...props
+  }, children) : /* @__PURE__ */ React9.createElement("div", {
+    role: "none",
+    className: classes,
+    ref: scrollContextRef,
+    ...props
+  }, children);
+};
+var TablePrimitive = (props) => {
+  const { role, onColumnResize, columnVisibility, header = true, rowsSelectable, debug, onDataSelectionChange, 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] = useState8([
+    ...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] = useState8(props.grouping ?? []);
+  useEffect3(() => handleGroupingChange(props.grouping ?? []), [
     handleGroupingChange,
     props.grouping
   ]);
@@ -769,23 +857,15 @@ var Table = (props) => {
     // Debug
     debugTable: debug
   });
-  useEffect2(() => {
+  useEffect3(() => {
     onDataSelectionChange?.(Object.keys(rowSelection).map((id) => table.getRowModel().rowsById[id].original));
   }, [
     onDataSelectionChange,
     rowSelection,
     table
   ]);
-  usePinLastRow(pinLastRow, table, data, getScrollElement);
+  usePinLastRow(pinLastRow, table, data);
   const expand = false;
-  if (!getScrollElement) {
-    log.warn("Table: getScrollElement is not set. This is required for virtualized tables.", void 0, {
-      F: __dxlog_file,
-      L: 160,
-      S: void 0,
-      C: (f, a) => f(...a)
-    });
-  }
   return /* @__PURE__ */ React9.createElement(TableProvider2, {
     ...props,
     table,
@@ -794,20 +874,19 @@ var Table = (props) => {
     isGrid: role === "grid" || role === "treegrid"
   }, /* @__PURE__ */ React9.createElement(TableImpl, {
     debug: false,
-    getScrollElement,
     ...props
   }));
 };
 var TableImpl = (props) => {
-  const { debug, classNames, getScrollElement, role, footer, grouping, fullWidth } = props;
+  const { debug, classNames, role, footer, grouping, fullWidth } = props;
   const { table } = useTableContext();
   if (debug) {
     return /* @__PURE__ */ React9.createElement("pre", {
       className: "font-mono text-xs text-neutral-500 m-1 p-2 ring"
     }, /* @__PURE__ */ React9.createElement("code", null, JSON.stringify(table.getState(), void 0, 2)));
   }
-  const virtualisable = getScrollElement !== void 0;
   const isResizingColumn = table.getState().columnSizingInfo.isResizingColumn;
+  const TableComponent = isResizingColumn ? MemoizedVirtualisedTableContent : VirtualizedTableContent;
   return /* @__PURE__ */ React9.createElement("table", {
     role,
     className: tableRoot(props, classNames),
@@ -816,38 +895,26 @@ var TableImpl = (props) => {
         width: table.getTotalSize()
       }
     }
-  }, /* @__PURE__ */ React9.createElement(TableHead, null), grouping?.length !== 0 ? virtualisable ? isResizingColumn ? /* @__PURE__ */ React9.createElement(MemoizedVirtualisedTableContent, {
-    getScrollElement
-  }) : /* @__PURE__ */ React9.createElement(VirtualizedTableContent, {
-    getScrollElement
-  }) : /* @__PURE__ */ React9.createElement(UnvirtualizedTableContent, null) : /* @__PURE__ */ React9.createElement(GroupedTableContent, null), footer && /* @__PURE__ */ React9.createElement(TableFooter, null));
+  }, /* @__PURE__ */ React9.createElement(TableHead, null), grouping?.length !== 0 ? /* @__PURE__ */ React9.createElement(TableComponent, 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
-  });
-};
-var VirtualizedTableContent = ({ getScrollElement }) => {
+var VirtualizedTableContent = () => {
   const { table } = useTableContext();
+  const { virtualizer, dispatch } = useContext3(TableRootContext);
   const centerRows = table.getCenterRows();
   let pinnedRows = [];
+  useEffect3(() => {
+    dispatch({
+      type: "updateTableCount",
+      count: centerRows.length
+    });
+  }, [
+    centerRows.length
+  ]);
   try {
     pinnedRows = table.getBottomRows();
   } catch (_) {
   }
-  const { getTotalSize, getVirtualItems } = useVirtualizer({
-    getScrollElement,
-    count: centerRows.length,
-    overscan: 8,
-    estimateSize: () => 40
-  });
+  const { getTotalSize, getVirtualItems } = virtualizer;
   const virtualRows = getVirtualItems();
   const totalSize = getTotalSize();
   const paddingTop = virtualRows.length > 0 ? virtualRows?.[0]?.start || 0 : 0;
@@ -855,8 +922,8 @@ var VirtualizedTableContent = ({ getScrollElement }) => {
   const rowsToRender = [
     ...virtualRows.map((virtualRow) => centerRows[virtualRow.index]),
     ...pinnedRows
-  ];
-  return /* @__PURE__ */ React9.createElement(React9.Fragment, null, paddingTop > 0 && /* @__PURE__ */ React9.createElement("tbody", {
+  ].filter((r) => !!r);
+  return /* @__PURE__ */ React9.createElement(Fragment, null, paddingTop > 0 && /* @__PURE__ */ React9.createElement("tbody", {
     role: "none"
   }, /* @__PURE__ */ React9.createElement("tr", {
     role: "none"
@@ -893,6 +960,11 @@ var GroupedTableContent = () => {
     }));
   }));
 };
+var Table = {
+  Root: TableRoot,
+  Table: TablePrimitive,
+  Viewport: TableViewport
+};
 
 // packages/ui/react-ui-table/src/helpers.tsx
 import { useFocusFinders } from "@fluentui/react-tabster";
@@ -900,11 +972,11 @@ 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 { log as log2 } from "@dxos/log";
+import React10, { useCallback as useCallback7, useEffect as useEffect4, useRef as useRef4, useState as useState9 } from "react";
+import { log } from "@dxos/log";
 import { Input as Input2, Tooltip } from "@dxos/react-ui";
-import { getSize as getSize4, mx as mx5 } from "@dxos/react-ui-theme";
-var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/helpers.tsx";
+import { getSize as getSize4, mx as mx6 } from "@dxos/react-ui-theme";
+var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui-table/src/helpers.tsx";
 var createColumnBuilder = () => ({
   helper: createColumnHelper(),
   builder: new ColumnBuilder()
@@ -918,16 +990,19 @@ var ComboboxBuilderCell = (cellContext) => {
   }) : null;
 };
 var StringBuilderCell = (cellContext) => {
-  const ref = useRef3(null);
+  const ref = useRef4(null);
   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] = useState9(getInitialValue);
+  useEffect4(() => setValue(getInitialValue()), [
+    getInitialValue
+  ]);
   const handleSave = () => {
     ref.current && document.activeElement === ref.current && findPrevFocusable(ref.current)?.focus();
     if (value !== initialValue) {
@@ -964,10 +1039,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] = useState9(displayNumber(value, digits));
   const { findPrevFocusable } = useFocusFinders();
-  const ref = useRef3(null);
-  useEffect3(() => {
+  const ref = useRef4(null);
+  useEffect4(() => {
     (!document.activeElement || document.activeElement !== ref.current) && setText(displayNumber(value, digits));
   }, [
     digits,
@@ -1054,7 +1129,7 @@ var ColumnBuilder = class {
       cell: model && onUpdate ? ComboboxBuilderCell : (cellContext) => {
         const cellValue = cellContext.getValue();
         return /* @__PURE__ */ React10.createElement("div", {
-          className: mx5("truncate", classNames)
+          className: mx6("truncate", classNames)
         }, cellValue ? model?.getText(cellValue) : "");
       },
       ...props,
@@ -1085,7 +1160,7 @@ var ColumnBuilder = class {
           value = value.content;
         }
         return /* @__PURE__ */ React10.createElement("div", {
-          className: mx5("truncate", textPadding, classNames)
+          className: mx6("truncate", textPadding, classNames)
         }, value);
       },
       ...props,
@@ -1139,14 +1214,14 @@ var ColumnBuilder = class {
             addSuffix: true
           }) : value.toISOString() : void 0;
           return /* @__PURE__ */ React10.createElement("div", {
-            className: mx5(textPadding, classNames)
+            className: mx6(textPadding, classNames)
           }, str);
         } catch (err) {
-          log2.info("formatError", {
+          log.info("formatError", {
             value
           }, {
-            F: __dxlog_file2,
-            L: 374,
+            F: __dxlog_file,
+            L: 376,
             S: this,
             C: (f, a) => f(...a)
           });
@@ -1278,11 +1353,11 @@ var ColumnBuilder = class {
         const value = cell.getValue();
         if (value) {
           return /* @__PURE__ */ React10.createElement(IconOn, {
-            className: mx5("block mli-auto", getSize4(6), on?.className ?? "text-green-700")
+            className: mx6("block mli-auto", getSize4(6), on?.className ?? "text-green-700")
           });
         } else if (value === false) {
           return /* @__PURE__ */ React10.createElement(IconOff, {
-            className: mx5("block mli-auto", getSize4(6), off?.className ?? "text-red-700")
+            className: mx6("block mli-auto", getSize4(6), off?.className ?? "text-red-700")
           });
         } else {
           return null;
@@ -1451,6 +1526,8 @@ export {
   MemoizedVirtualisedTableContent,
   SortIndicator,
   Table,
+  TablePrimitive,
+  TableRootContext,
   createColumnBuilder,
   currentRow,
   flushPadding,
@@ -1473,7 +1550,10 @@ export {
   theadTh,
   theadTr,
   translations_default as translations,
+  useColumnResizing,
   useColumnSorting,
-  usePinLastRow
+  usePinLastRow,
+  useRowSelection,
+  useTableRootContext
 };
 //# sourceMappingURL=index.mjs.map