@dxos/react-ui-table 0.5.1-main.bf560fd → 0.5.1-main.c4f37e4

package/dist/lib/browser/index.mjs

@@ -91,7 +91,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 { 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,
@@ -208,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, {
@@ -222,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, {
@@ -450,7 +450,7 @@ 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 } = useSortColumn(header.column);
@@ -525,6 +525,22 @@ var ColumnMenu = ({ column, ...props }) => {
     className: "opacity-50"
   }, /* @__PURE__ */ React4.createElement(X2, {
     className: getSize3(4)
+  })))), 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__ */ React4.createElement("span", {
@@ -974,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