@dxos/react-ui-table 0.5.1-next.2ad6c47 → 0.5.1-next.5a770e3

package/dist/lib/browser/index.mjs

@@ -91,8 +91,8 @@ 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 useState6, useCallback as useCallback5 } from "react";
+import { X as X2, GearSix, CaretDown as CaretDown2, ArrowDown, ArrowUp, ArrowRight, ArrowLeft } from "@phosphor-icons/react";
+import React4, { 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";
 
@@ -106,7 +106,7 @@ var Section = ({ children, className }) => /* @__PURE__ */ React2.createElement(
   role: "none",
   className: mx2("p-2", className)
 }, children);
-var ColumnSettingsForm = ({ column, tableDef, tableDefs, onUpdate, onDelete, onClose }) => {
+var ColumnSettingsForm = ({ column, tableDef, tablesToReference, onUpdate, onDelete, onClose }) => {
   const [formState, setFormState] = useState2({
     prop: column.id,
     refTable: column.refTable,
@@ -144,6 +144,10 @@ var ColumnSettingsForm = ({ column, tableDef, tableDefs, onUpdate, onDelete, onC
     });
     onClose?.();
   };
+  const handleDelete = () => {
+    onDelete?.(column.id);
+    onClose?.();
+  };
   return /* @__PURE__ */ React2.createElement("div", {
     className: "flex flex-col gap-1"
   }, /* @__PURE__ */ React2.createElement(Section, null, /* @__PURE__ */ React2.createElement(Input.Root, null, /* @__PURE__ */ React2.createElement(Input.Label, {
@@ -204,7 +208,7 @@ var ColumnSettingsForm = ({ column, tableDef, tableDefs, onUpdate, onDelete, onC
   }, /* @__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, {
+  }), /* @__PURE__ */ React2.createElement(Select.Portal, null, /* @__PURE__ */ React2.createElement(Select.Content, null, /* @__PURE__ */ React2.createElement(Select.Viewport, null, tablesToReference.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, {
@@ -218,7 +222,7 @@ var ColumnSettingsForm = ({ column, tableDef, tableDefs, onUpdate, onDelete, onC
   }, /* @__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, tablesToReference.find((tableDef2) => tableDef2.id === formState.refTable)?.columns.map(({ id, label }) => /* @__PURE__ */ React2.createElement(Select.Option, {
     key: id,
     value: id
   }, label ?? id)))))))), /* @__PURE__ */ React2.createElement(Separator, {
@@ -244,7 +248,7 @@ var ColumnSettingsForm = ({ column, tableDef, tableDefs, onUpdate, onDelete, onC
     className: getSize2(5)
   })), /* @__PURE__ */ React2.createElement(Button, {
     classNames: "is-full flex gap-2",
-    onClick: () => onDelete?.(column.id)
+    onClick: handleDelete
   }, /* @__PURE__ */ React2.createElement("span", null, t("delete label")), /* @__PURE__ */ React2.createElement("div", {
     className: "grow"
   }), /* @__PURE__ */ React2.createElement(Trash, {
@@ -287,40 +291,66 @@ var useColumnResizing = ({ columns, onColumnResize }) => {
 
 // packages/ui/react-ui-table/src/hooks/useColumnSorting.ts
 import { useState as useState4 } from "react";
-var useColumnSorting = (column) => {
-  const [sortDirection, setSortDirection] = useState4(column.getIsSorted());
-  const [firstSort, setFirstSort] = useState4();
+
+// packages/ui/react-ui-table/src/components/Table/TableContext.tsx
+import React3, { useContext, createContext } from "react";
+var TableContext = /* @__PURE__ */ createContext({});
+var TableProvider = ({ children, ...value }) => {
+  return /* @__PURE__ */ React3.createElement(TableContext.Provider, {
+    value
+  }, children);
+};
+var useTableContext = () => {
+  const context = useContext(TableContext);
+  return context;
+};
+
+// packages/ui/react-ui-table/src/hooks/useColumnSorting.ts
+var useColumnSorting = () => {
+  const [columnSorting, setColumnSorting] = useState4([]);
+  const sortColumn = (columnId, sortDirection) => {
+    setColumnSorting([
+      {
+        id: columnId,
+        desc: sortDirection === "desc"
+      }
+    ]);
+  };
+  const clearColumnSorting = () => {
+    setColumnSorting([]);
+  };
+  return {
+    sorting: columnSorting,
+    sortColumn,
+    clearColumnSorting
+  };
+};
+var useSortColumn = (column) => {
+  const { sorting, sortColumn, clearColumnSorting } = useTableContext();
+  const [initialSortDirection, setInitialSortDirection] = useState4();
+  const columnSort = sorting.find((s) => s.id === column.id);
+  const sortDirection = columnSort ? columnSort.desc ? "desc" : "asc" : void 0;
   const canSort = column.getCanSort();
   const updateColumnSort = (direction) => {
-    setSortDirection(direction);
-    switch (direction) {
-      case false:
-        column.clearSorting();
-        break;
-      case "asc":
-        column.toggleSorting(false);
-        break;
-      case "desc":
-        column.toggleSorting(true);
-        break;
-    }
+    sortColumn(column.id, direction);
   };
   const onToggleSort = () => {
-    if (sortDirection === false) {
+    if (sortDirection === void 0) {
       return;
     }
-    if (sortDirection === firstSort) {
-      updateColumnSort(firstSort === "asc" ? "desc" : "asc");
+    if (sortDirection === initialSortDirection) {
+      updateColumnSort(initialSortDirection === "asc" ? "desc" : "asc");
     } else {
-      updateColumnSort(false);
+      clearColumnSorting();
     }
   };
   const onSelectSort = (direction) => {
-    setFirstSort(direction);
+    clearColumnSorting();
+    setInitialSortDirection(direction);
     updateColumnSort(direction);
   };
   const onClearSort = () => {
-    updateColumnSort(false);
+    clearColumnSorting();
   };
   return {
     canSort,
@@ -420,10 +450,10 @@ var useRowSelection = (props) => {
 };
 
 // packages/ui/react-ui-table/src/components/ColumnMenu/ColumnMenu.tsx
-var ColumnMenu = ({ column, ...props }) => {
+var ColumnMenu = ({ column, columnOrderable, columnPosition, onColumnReorder, ...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 { canSort, sortDirection, onSelectSort, onToggleSort, onClearSort } = useSortColumn(header.column);
   const columnSettingsAnchorRef = useRef2(null);
   const [isColumnSettingsOpen, setIsColumnSettingsOpen] = useState6(false);
   const shouldPreventFocusOnClose = useRef2(false);
@@ -442,103 +472,111 @@ var ColumnMenu = ({ column, ...props }) => {
   }, [
     shouldPreventFocusOnClose
   ]);
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     className: "flex items-center justify-center justify-between"
-  }, /* @__PURE__ */ React3.createElement("div", {
+  }, /* @__PURE__ */ React4.createElement("div", {
     className: "flex items-center gap-1 truncate",
     title
-  }, /* @__PURE__ */ React3.createElement(SortIndicator, {
+  }, /* @__PURE__ */ React4.createElement(SortIndicator, {
     direction: sortDirection,
     onClick: onToggleSort
-  }), /* @__PURE__ */ React3.createElement("div", {
+  }), /* @__PURE__ */ React4.createElement("div", {
     className: "truncate"
-  }, title)), /* @__PURE__ */ React3.createElement(DropdownMenu.Root, {
+  }, title)), /* @__PURE__ */ React4.createElement(DropdownMenu.Root, {
     modal: false
-  }, /* @__PURE__ */ React3.createElement(Popover2.Root, {
+  }, /* @__PURE__ */ React4.createElement(Popover2.Root, {
     open: isColumnSettingsOpen,
     onOpenChange: setIsColumnSettingsOpen,
     modal: false
-  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Trigger, {
+  }, /* @__PURE__ */ React4.createElement(DropdownMenu.Trigger, {
     ref: columnSettingsAnchorRef,
     asChild: true
-  }, /* @__PURE__ */ React3.createElement(Popover2.Anchor, {
+  }, /* @__PURE__ */ React4.createElement(Popover2.Anchor, {
     asChild: true
-  }, /* @__PURE__ */ React3.createElement(Button2, {
+  }, /* @__PURE__ */ React4.createElement(Button2, {
     variant: "ghost"
-  }, /* @__PURE__ */ React3.createElement(CaretDown2, {
+  }, /* @__PURE__ */ React4.createElement(CaretDown2, {
     className: getSize3(4)
-  })))), /* @__PURE__ */ React3.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React3.createElement(DropdownMenu.Content, {
+  })))), /* @__PURE__ */ React4.createElement(DropdownMenu.Portal, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Content, {
     onCloseAutoFocus: onDropdownCloseAutoFocus,
     sideOffset: 4,
     collisionPadding: 8
-  }, /* @__PURE__ */ React3.createElement(DropdownMenu.Viewport, null, canSort && /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(DropdownMenu.Item, {
+  }, /* @__PURE__ */ React4.createElement(DropdownMenu.Viewport, null, canSort && /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
     onClick: () => onSelectSort("asc")
-  }, /* @__PURE__ */ React3.createElement("span", {
+  }, /* @__PURE__ */ React4.createElement("span", {
     className: "grow"
-  }, "Sort ascending"), /* @__PURE__ */ React3.createElement("span", {
+  }, "Sort ascending"), /* @__PURE__ */ React4.createElement("span", {
     className: "opacity-50"
-  }, /* @__PURE__ */ React3.createElement(ArrowUp, {
+  }, /* @__PURE__ */ React4.createElement(ArrowUp, {
     className: getSize3(4)
-  }))), /* @__PURE__ */ React3.createElement(DropdownMenu.Item, {
+  }))), /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
     onClick: () => onSelectSort("desc")
-  }, /* @__PURE__ */ React3.createElement("span", {
+  }, /* @__PURE__ */ React4.createElement("span", {
     className: "grow"
-  }, "Sort descending"), /* @__PURE__ */ React3.createElement("span", {
+  }, "Sort descending"), /* @__PURE__ */ React4.createElement("span", {
     className: "opacity-50"
-  }, /* @__PURE__ */ React3.createElement(ArrowDown, {
+  }, /* @__PURE__ */ React4.createElement(ArrowDown, {
     className: getSize3(4)
-  }))), sortDirection !== false && /* @__PURE__ */ React3.createElement(DropdownMenu.Item, {
+  }))), sortDirection && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
     onClick: onClearSort
-  }, /* @__PURE__ */ React3.createElement("span", {
+  }, /* @__PURE__ */ React4.createElement("span", {
     className: "grow"
-  }, "Clear sort"), /* @__PURE__ */ React3.createElement("span", {
+  }, "Clear sort"), /* @__PURE__ */ React4.createElement("span", {
     className: "opacity-50"
-  }, /* @__PURE__ */ React3.createElement(X2, {
+  }, /* @__PURE__ */ React4.createElement(X2, {
     className: getSize3(4)
-  })))), /* @__PURE__ */ React3.createElement(DropdownMenu.Item, {
+  })))), columnOrderable && /* @__PURE__ */ React4.createElement(React4.Fragment, null, columnPosition !== "start" && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
+    onClick: () => onColumnReorder(header.column.id, "left")
+  }, /* @__PURE__ */ React4.createElement("span", {
+    className: "grow"
+  }, "Move left"), /* @__PURE__ */ React4.createElement("span", {
+    className: "opacity-50"
+  }, /* @__PURE__ */ React4.createElement(ArrowLeft, {
+    className: mx3(getSize3(4))
+  }))), columnPosition !== "end" && /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
+    onClick: () => onColumnReorder(header.column.id, "right")
+  }, /* @__PURE__ */ React4.createElement("span", {
+    className: "grow"
+  }, "Move right"), /* @__PURE__ */ React4.createElement("span", {
+    className: "opacity-50"
+  }, /* @__PURE__ */ React4.createElement(ArrowRight, {
+    className: mx3(getSize3(4))
+  })))), /* @__PURE__ */ React4.createElement(DropdownMenu.Item, {
     onClick: onOpenColumnSettings
-  }, /* @__PURE__ */ React3.createElement("span", {
+  }, /* @__PURE__ */ React4.createElement("span", {
     className: "grow"
-  }, "Column settings"), /* @__PURE__ */ React3.createElement("span", {
+  }, "Column settings"), /* @__PURE__ */ React4.createElement("span", {
     className: "opacity-50"
-  }, /* @__PURE__ */ React3.createElement(GearSix, {
+  }, /* @__PURE__ */ React4.createElement(GearSix, {
     className: mx3(getSize3(4), "rotate-90")
-  })))), /* @__PURE__ */ React3.createElement(DropdownMenu.Arrow, null))), /* @__PURE__ */ React3.createElement(ColumnSettingsPanel, {
+  })))), /* @__PURE__ */ React4.createElement(DropdownMenu.Arrow, null))), /* @__PURE__ */ React4.createElement(Popover2.Portal, null, /* @__PURE__ */ React4.createElement(Popover2.Content, null, /* @__PURE__ */ React4.createElement(Popover2.Viewport, {
+    classNames: "w-60"
+  }, /* @__PURE__ */ React4.createElement(DensityProvider, {
+    density: "fine"
+  }, /* @__PURE__ */ React4.createElement(ColumnSettingsForm, {
     ...props,
     column,
     onClose: () => setIsColumnSettingsOpen(false)
-  }))));
+  }))), /* @__PURE__ */ React4.createElement(Popover2.Arrow, null))))));
 };
-var ColumnSettingsPanel = ({ tableDefs, tableDef, column, onUpdate, onDelete, onClose }) => /* @__PURE__ */ React3.createElement(Popover2.Portal, null, /* @__PURE__ */ React3.createElement(Popover2.Content, null, /* @__PURE__ */ React3.createElement(Popover2.Viewport, {
-  classNames: "w-60"
-}, /* @__PURE__ */ React3.createElement(DensityProvider, {
-  density: "fine"
-}, /* @__PURE__ */ React3.createElement(ColumnSettingsForm, {
-  column,
-  tableDefs,
-  tableDef,
-  onUpdate,
-  onDelete,
-  onClose
-}))), /* @__PURE__ */ React3.createElement(Popover2.Arrow, null)));
 var SortIndicator = ({ direction, onClick }) => {
-  if (direction === false) {
+  if (direction === void 0) {
     return null;
   }
   let icon;
   switch (direction) {
     case "asc":
-      icon = /* @__PURE__ */ React3.createElement(ArrowUp, {
+      icon = /* @__PURE__ */ React4.createElement(ArrowUp, {
         className: getSize3(3)
       });
       break;
     case "desc":
-      icon = /* @__PURE__ */ React3.createElement(ArrowDown, {
+      icon = /* @__PURE__ */ React4.createElement(ArrowDown, {
         className: getSize3(3)
       });
       break;
   }
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React4.createElement("div", {
     onClick,
     className: "flex items-center cursor-pointer"
   }, icon);
@@ -556,19 +594,6 @@ import { useArrowNavigationGroup } from "@fluentui/react-tabster";
 import { flexRender } from "@tanstack/react-table";
 import React6, { useContext as useContext2 } from "react";
 
-// packages/ui/react-ui-table/src/components/Table/TableContext.tsx
-import React4, { useContext, createContext } from "react";
-var TableContext = /* @__PURE__ */ createContext({});
-var TableProvider = ({ children, ...value }) => {
-  return /* @__PURE__ */ React4.createElement(TableContext.Provider, {
-    value
-  }, children);
-};
-var useTableContext = () => {
-  const context = useContext(TableContext);
-  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";
@@ -819,6 +844,7 @@ var TablePrimitive = (props) => {
     handleGroupingChange,
     props.grouping
   ]);
+  const columnSorting = useColumnSorting();
   const table = useReactTable({
     // Data
     meta: {},
@@ -834,6 +860,7 @@ var TablePrimitive = (props) => {
       columnVisibility,
       columnSizing,
       columnSizingInfo,
+      sorting: columnSorting.sorting,
       rowSelection,
       grouping
     },
@@ -868,6 +895,7 @@ var TablePrimitive = (props) => {
   const expand = false;
   return /* @__PURE__ */ React9.createElement(TableProvider2, {
     ...props,
+    ...columnSorting,
     table,
     header,
     expand,
@@ -962,8 +990,8 @@ var GroupedTableContent = () => {
 };
 var Table = {
   Root: TableRoot,
-  Table: TablePrimitive,
-  Viewport: TableViewport
+  Viewport: TableViewport,
+  Main: TablePrimitive
 };
 
 // packages/ui/react-ui-table/src/helpers.tsx
@@ -1522,7 +1550,6 @@ export {
   ColumnBuilder,
   ColumnMenu,
   ColumnSettingsForm,
-  ColumnSettingsPanel,
   MemoizedVirtualisedTableContent,
   SortIndicator,
   Table,
@@ -1554,6 +1581,7 @@ export {
   useColumnSorting,
   usePinLastRow,
   useRowSelection,
+  useSortColumn,
   useTableRootContext
 };
 //# sourceMappingURL=index.mjs.map