@morze/ui 0.2.6 → 0.2.8

package/dist/index.d.cts

@@ -538,6 +538,12 @@ type DataTableProps<T> = {
     /** localStorage key for widths, order, visibility and pinning. */
     persistKey?: string | null;
     toolbar?: React.ReactNode;
+    /**
+     * `false` drops the Columns button — for a table whose layout the host
+     * fixes, or drives from its own UI. The layout itself still works: `layout`,
+     * `onLayoutChange` and `persistKey` are unaffected.
+     */
+    columnManager?: boolean;
     /**
      * Stretches the columns to fill the container on mount and on container
      * resize, so there is no dead space at the right edge. Columns the user
@@ -568,7 +574,7 @@ type DataTableProps<T> = {
     caption?: string;
     className?: string;
 };
-declare function DataTable<T>({ columns, data, rowKey, total, loading, error, onRetry, query, onQueryChange, selection, onSelectionChange, bulkActions, renderExpanded, onRowClick, rowClassName, rowProps, layout: controlledLayout, onLayoutChange, persistKey, toolbar, autoFit, density, stickyHeader, emptyState, pageSizeOptions, pagination, onLoadMore, hasMore, autoLoadMore, labels: labelsProp, locale, caption, className, }: DataTableProps<T>): React.JSX.Element;
+declare function DataTable<T>({ columns, data, rowKey, total, loading, error, onRetry, query, onQueryChange, selection, onSelectionChange, bulkActions, renderExpanded, onRowClick, rowClassName, rowProps, layout: controlledLayout, onLayoutChange, persistKey, toolbar, columnManager, autoFit, density, stickyHeader, emptyState, pageSizeOptions, pagination, onLoadMore, hasMore, autoLoadMore, labels: labelsProp, locale, caption, className, }: DataTableProps<T>): React.JSX.Element;
 
 declare function DataTablePagination({ query, total, rowsOnPage, pageSizeOptions, labels: labelsProp, locale, onQueryChange, }: {
     query: DataTableQuery;
@@ -590,7 +596,12 @@ type Props$1<T> = {
     layout: ColumnLayout;
     onToggleHidden: (id: string) => void;
     onSetPinned: (id: string, side: 'left' | 'right' | undefined) => void;
-    onMove: (id: string, delta: number) => void;
+    /**
+     * Unused since the arrows started moving a column past its neighbour in the
+     * same pin group, which `onMoveTo` already expresses. Kept so a host that
+     * mounts this component directly still type-checks.
+     */
+    onMove?: (id: string, delta: number) => void;
     onMoveTo: (id: string, targetId: string) => void;
     onReset: () => void;
     labels?: Partial<DataTableLabels>;
@@ -599,8 +610,16 @@ type Props$1<T> = {
  * Reordering lives here rather than on the header itself: dragging a header
  * would fight the resize handle, and a list gives keyboard users real controls
  * instead of a drag-only affordance.
+ *
+ * The list is grouped the way the table paints — pinned left, then loose, then
+ * pinned right — because it used to show the raw `layout.order` instead. A
+ * column dragged to the top of that list landed second in the table, behind
+ * whatever was pinned, and moving a column past a pinned neighbour changed the
+ * order without changing anything on screen. Both read as a broken reorder.
+ * Moves therefore stay inside a column's own group; crossing between them is
+ * what the pin button is for.
  */
-declare function ColumnManager<T>({ columns, layout, onToggleHidden, onSetPinned, onMove, onMoveTo, onReset, labels: labelsProp, }: Props$1<T>): React.JSX.Element;
+declare function ColumnManager<T>({ columns, layout, onToggleHidden, onSetPinned, onMoveTo, onReset, labels: labelsProp, }: Props$1<T>): React.JSX.Element;
 
 type Props = {
     columnLabel: string;

package/dist/index.d.ts

@@ -538,6 +538,12 @@ type DataTableProps<T> = {
     /** localStorage key for widths, order, visibility and pinning. */
     persistKey?: string | null;
     toolbar?: React.ReactNode;
+    /**
+     * `false` drops the Columns button — for a table whose layout the host
+     * fixes, or drives from its own UI. The layout itself still works: `layout`,
+     * `onLayoutChange` and `persistKey` are unaffected.
+     */
+    columnManager?: boolean;
     /**
      * Stretches the columns to fill the container on mount and on container
      * resize, so there is no dead space at the right edge. Columns the user
@@ -568,7 +574,7 @@ type DataTableProps<T> = {
     caption?: string;
     className?: string;
 };
-declare function DataTable<T>({ columns, data, rowKey, total, loading, error, onRetry, query, onQueryChange, selection, onSelectionChange, bulkActions, renderExpanded, onRowClick, rowClassName, rowProps, layout: controlledLayout, onLayoutChange, persistKey, toolbar, autoFit, density, stickyHeader, emptyState, pageSizeOptions, pagination, onLoadMore, hasMore, autoLoadMore, labels: labelsProp, locale, caption, className, }: DataTableProps<T>): React.JSX.Element;
+declare function DataTable<T>({ columns, data, rowKey, total, loading, error, onRetry, query, onQueryChange, selection, onSelectionChange, bulkActions, renderExpanded, onRowClick, rowClassName, rowProps, layout: controlledLayout, onLayoutChange, persistKey, toolbar, columnManager, autoFit, density, stickyHeader, emptyState, pageSizeOptions, pagination, onLoadMore, hasMore, autoLoadMore, labels: labelsProp, locale, caption, className, }: DataTableProps<T>): React.JSX.Element;
 
 declare function DataTablePagination({ query, total, rowsOnPage, pageSizeOptions, labels: labelsProp, locale, onQueryChange, }: {
     query: DataTableQuery;
@@ -590,7 +596,12 @@ type Props$1<T> = {
     layout: ColumnLayout;
     onToggleHidden: (id: string) => void;
     onSetPinned: (id: string, side: 'left' | 'right' | undefined) => void;
-    onMove: (id: string, delta: number) => void;
+    /**
+     * Unused since the arrows started moving a column past its neighbour in the
+     * same pin group, which `onMoveTo` already expresses. Kept so a host that
+     * mounts this component directly still type-checks.
+     */
+    onMove?: (id: string, delta: number) => void;
     onMoveTo: (id: string, targetId: string) => void;
     onReset: () => void;
     labels?: Partial<DataTableLabels>;
@@ -599,8 +610,16 @@ type Props$1<T> = {
  * Reordering lives here rather than on the header itself: dragging a header
  * would fight the resize handle, and a list gives keyboard users real controls
  * instead of a drag-only affordance.
+ *
+ * The list is grouped the way the table paints — pinned left, then loose, then
+ * pinned right — because it used to show the raw `layout.order` instead. A
+ * column dragged to the top of that list landed second in the table, behind
+ * whatever was pinned, and moving a column past a pinned neighbour changed the
+ * order without changing anything on screen. Both read as a broken reorder.
+ * Moves therefore stay inside a column's own group; crossing between them is
+ * what the pin button is for.
  */
-declare function ColumnManager<T>({ columns, layout, onToggleHidden, onSetPinned, onMove, onMoveTo, onReset, labels: labelsProp, }: Props$1<T>): React.JSX.Element;
+declare function ColumnManager<T>({ columns, layout, onToggleHidden, onSetPinned, onMoveTo, onReset, labels: labelsProp, }: Props$1<T>): React.JSX.Element;
 
 type Props = {
     columnLabel: string;

package/dist/index.js

@@ -138,8 +138,8 @@ var ArrowUpIcon = icon(/* @__PURE__ */ jsx("path", { d: "M12 19V5m-7 7 7-7 7 7"
 var ArrowDownIcon = icon(/* @__PURE__ */ jsx("path", { d: "M12 5v14m7-7-7 7-7-7" }));
 var SortIcon = icon(
   /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("path", { d: "m7 15 3 3 3-3", opacity: "0.9" }),
-    /* @__PURE__ */ jsx("path", { d: "m7 9 3-3 3 3", opacity: "0.9" })
+    /* @__PURE__ */ jsx("path", { d: "m8 10 4-4 4 4" }),
+    /* @__PURE__ */ jsx("path", { d: "m8 14 4 4 4-4" })
   ] })
 );
 var FilterIcon = icon(/* @__PURE__ */ jsx("path", { d: "M4 5h16l-6.5 7.5V19l-3 2v-8.5L4 5Z" }));
@@ -159,7 +159,13 @@ var GripIcon = icon(
     /* @__PURE__ */ jsx("circle", { cx: "15", cy: "17", r: "1.4", fill: "currentColor" })
   ] })
 );
-var PinIcon = icon(/* @__PURE__ */ jsx("path", { d: "M15 3 21 9l-4 1-4 4-1 5-6-6 5-1 4-4 1-4Z" }));
+var PinIcon = icon(
+  /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("path", { d: "M9 4h6v5l3 4v2H6v-2l3-4V4Z" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 4h8" }),
+    /* @__PURE__ */ jsx("path", { d: "M12 15v5" })
+  ] })
+);
 var EyeIcon = icon(
   /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z" }),
@@ -2082,26 +2088,53 @@ function FilterChip({
     /* @__PURE__ */ jsx("button", { type: "button", onClick: onClear, "aria-label": clearLabel, className: "mz-focusable", children: "\xD7" })
   ] });
 }
+function nameOf(column, declaredIndex) {
+  if (column.label?.trim()) return column.label;
+  if (typeof column.header === "string" && column.header.trim()) return column.header;
+  return `#${declaredIndex + 1}`;
+}
 function ColumnManager({
   columns,
   layout,
   onToggleHidden,
   onSetPinned,
-  onMove,
   onMoveTo,
   onReset,
   labels: labelsProp
 }) {
   const labels = resolveLabels(labelsProp);
   const [dragging, setDragging] = React39.useState(null);
-  const byId = React39.useMemo(() => new Map(columns.map((c) => [c.id, c])), [columns]);
-  const ordered = layout.order.map((id) => byId.get(id)).filter((c) => Boolean(c));
+  const [dropTarget, setDropTarget] = React39.useState(null);
+  const entries = React39.useMemo(() => {
+    const byId = new Map(columns.map((c, index) => [c.id, { column: c, declaredIndex: index }]));
+    const ordered = layout.order.map((id) => byId.get(id)).filter((e) => Boolean(e));
+    const side = (id) => layout.pinned[id];
+    const groups = ["left", void 0, "right"];
+    return groups.flatMap((group) => {
+      const inGroup = ordered.filter((e) => side(e.column.id) === group);
+      return inGroup.map((entry, indexInGroup) => ({
+        ...entry,
+        side: group,
+        indexInGroup,
+        groupSize: inGroup.length,
+        previous: inGroup[indexInGroup - 1]?.column.id,
+        next: inGroup[indexInGroup + 1]?.column.id,
+        name: nameOf(entry.column, entry.declaredIndex)
+      }));
+    });
+  }, [columns, layout]);
+  const sideOf = (id) => layout.pinned[id];
+  const canDrop = (targetId) => Boolean(dragging) && dragging !== targetId && sideOf(dragging) === sideOf(targetId);
+  const endDrag = () => {
+    setDragging(null);
+    setDropTarget(null);
+  };
   const hiddenCount = layout.hidden.length;
   return /* @__PURE__ */ jsxs(Popover, { children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "secondary", size: "sm", children: [
       /* @__PURE__ */ jsx(ColumnsIcon, {}),
       labels.columns,
-      hiddenCount > 0 ? /* @__PURE__ */ jsx("span", { className: "mz-dt__count", children: ordered.length - hiddenCount }) : null
+      hiddenCount > 0 ? /* @__PURE__ */ jsx("span", { className: "mz-dt__count", children: entries.length - hiddenCount }) : null
     ] }) }),
     /* @__PURE__ */ jsxs(PopoverContent, { align: "end", className: "mz-dt__columns", children: [
       /* @__PURE__ */ jsxs("div", { className: "mz-dt__columns-head", children: [
@@ -2109,35 +2142,60 @@ function ColumnManager({
         /* @__PURE__ */ jsx(Button, { variant: "link", size: "xs", onClick: onReset, children: labels.reset })
       ] }),
       /* @__PURE__ */ jsx(Separator, {}),
-      /* @__PURE__ */ jsx("ul", { className: "mz-dt__columns-list", children: ordered.map((column, index) => {
+      /* @__PURE__ */ jsx("ul", { className: "mz-dt__columns-list", children: entries.map((entry) => {
+        const column = entry.column;
         const hidden = layout.hidden.includes(column.id);
-        const pinned = layout.pinned[column.id];
-        const label = column.label ?? (typeof column.header === "string" ? column.header : column.id);
+        const pinned = entry.side;
+        const name = entry.name;
+        const pinTitle = pinned === "left" ? labels.pinnedLeft : pinned === "right" ? labels.pinnedRight : labels.notPinned;
         return /* @__PURE__ */ jsxs(
           "li",
           {
             className: "mz-dt__columns-item",
             "data-dragging": dragging === column.id || void 0,
+            "data-drop": dropTarget === column.id || void 0,
+            "data-pinned": pinned,
             draggable: true,
-            onDragStart: () => setDragging(column.id),
-            onDragEnd: () => setDragging(null),
-            onDragOver: (event) => event.preventDefault(),
-            onDrop: () => {
-              if (dragging && dragging !== column.id) onMoveTo(dragging, column.id);
-              setDragging(null);
+            onDragStart: (event) => {
+              if (event.target.closest(".mz-dt__columns-controls")) {
+                event.preventDefault();
+                return;
+              }
+              setDragging(column.id);
+              event.dataTransfer.effectAllowed = "move";
+              try {
+                event.dataTransfer.setData("text/plain", column.id);
+              } catch {
+              }
+            },
+            onDragEnd: endDrag,
+            onDragOver: (event) => {
+              if (!canDrop(column.id)) {
+                event.dataTransfer.dropEffect = "none";
+                return;
+              }
+              event.preventDefault();
+              event.dataTransfer.dropEffect = "move";
+              setDropTarget(column.id);
+            },
+            onDragLeave: () => setDropTarget((c) => c === column.id ? null : c),
+            onDrop: (event) => {
+              event.preventDefault();
+              if (canDrop(column.id)) onMoveTo(dragging, column.id);
+              endDrag();
             },
             children: [
               /* @__PURE__ */ jsx("span", { className: "mz-dt__columns-grip", "aria-hidden": "true", children: /* @__PURE__ */ jsx(GripIcon, {}) }),
-              /* @__PURE__ */ jsx("span", { className: "mz-dt__columns-label", children: label }),
-              /* @__PURE__ */ jsxs("div", { className: "mz-dt__columns-controls", children: [
+              /* @__PURE__ */ jsx("span", { className: "mz-dt__columns-label", children: name }),
+              /* @__PURE__ */ jsxs("div", { className: "mz-dt__columns-controls", draggable: false, children: [
                 /* @__PURE__ */ jsx(
                   "button",
                   {
                     type: "button",
                     className: "mz-dt__icon-btn mz-focusable",
-                    disabled: index === 0,
-                    onClick: () => onMove(column.id, -1),
-                    "aria-label": labels.moveUp(label),
+                    disabled: !entry.previous,
+                    onClick: () => entry.previous && onMoveTo(column.id, entry.previous),
+                    "aria-label": labels.moveUp(name),
                     children: "\u2191"
                   }
                 ),
@@ -2146,9 +2204,9 @@ function ColumnManager({
                   {
                     type: "button",
                     className: "mz-dt__icon-btn mz-focusable",
-                    disabled: index === ordered.length - 1,
-                    onClick: () => onMove(column.id, 1),
-                    "aria-label": labels.moveDown(label),
+                    disabled: !entry.next,
+                    onClick: () => entry.next && onMoveTo(column.id, entry.next),
+                    "aria-label": labels.moveDown(name),
                     children: "\u2193"
                   }
                 ),
@@ -2156,14 +2214,12 @@ function ColumnManager({
                   "button",
                   {
                     type: "button",
-                    className: "mz-dt__icon-btn mz-focusable",
+                    className: "mz-dt__icon-btn mz-dt__pin mz-focusable",
                     "data-active": pinned ? true : void 0,
+                    "data-pinned": pinned,
                     onClick: () => onSetPinned(column.id, pinned === "left" ? "right" : pinned === "right" ? void 0 : "left"),
-                    "aria-label": labels.pinning(
-                      label,
-                      pinned === "left" ? labels.pinnedLeft : pinned === "right" ? labels.pinnedRight : labels.notPinned
-                    ),
-                    title: pinned === "left" ? labels.pinnedLeft : pinned === "right" ? labels.pinnedRight : labels.notPinned,
+                    "aria-label": labels.pinning(name, pinTitle),
+                    title: pinTitle,
                     children: /* @__PURE__ */ jsx(PinIcon, {})
                   }
                 ),
@@ -2174,7 +2230,7 @@ function ColumnManager({
                     className: "mz-dt__icon-btn mz-focusable",
                     disabled: column.hideable === false,
                     onClick: () => onToggleHidden(column.id),
-                    "aria-label": hidden ? labels.show(label) : labels.hide(label),
+                    "aria-label": hidden ? labels.show(name) : labels.hide(name),
                     children: hidden ? /* @__PURE__ */ jsx(EyeOffIcon, {}) : /* @__PURE__ */ jsx(EyeIcon, {})
                   }
                 )
@@ -2627,6 +2683,7 @@ function DataTable({
   onLayoutChange,
   persistKey = null,
   toolbar,
+  columnManager = true,
   autoFit = true,
   density = "normal",
   stickyHeader = true,
@@ -2655,7 +2712,6 @@ function DataTable({
     setWidth,
     toggleHidden,
     setPinned,
-    move,
     moveTo,
     reset,
     fitTo
@@ -2887,22 +2943,25 @@ function DataTable({
       className: cn("mz-dt", className),
       style: widthVars,
       children: [
-        (toolbar || chips.length > 0 || columns.some((c) => c.hideable !== false)) && /* @__PURE__ */ jsxs("div", { className: "mz-dt__toolbar", children: [
-          /* @__PURE__ */ jsx("div", { className: "mz-dt__toolbar-main", children: toolbar }),
-          /* @__PURE__ */ jsx("div", { className: "mz-dt__toolbar-side", children: /* @__PURE__ */ jsx(
-            ColumnManager,
-            {
-              columns,
-              layout,
-              labels: labelsProp,
-              onToggleHidden: toggleHidden,
-              onSetPinned: setPinned,
-              onMove: move,
-              onMoveTo: moveTo,
-              onReset: reset
-            }
-          ) })
-        ] }),
+        (() => {
+          const showManager = columnManager && columns.some((c) => c.hideable !== false);
+          if (!toolbar && chips.length === 0 && !showManager) return null;
+          return /* @__PURE__ */ jsxs("div", { className: "mz-dt__toolbar", children: [
+            /* @__PURE__ */ jsx("div", { className: "mz-dt__toolbar-main", children: toolbar }),
+            showManager && /* @__PURE__ */ jsx("div", { className: "mz-dt__toolbar-side", children: /* @__PURE__ */ jsx(
+              ColumnManager,
+              {
+                columns,
+                layout,
+                labels: labelsProp,
+                onToggleHidden: toggleHidden,
+                onSetPinned: setPinned,
+                onMoveTo: moveTo,
+                onReset: reset
+              }
+            ) })
+          ] });
+        })(),
         chips.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mz-dt__chips", children: [
           chips.map(([id, value]) => /* @__PURE__ */ jsx(
             FilterChip,