@ai-matrx/design-system 0.18.0 → 0.18.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## 0.18.1 — 2026-09-12
+
+Reorderable table columns now drag from the visible header label instead of a
+separate grip. Ordinary click, Enter, and Space sorting remain intact, compact
+headers remain accessible, and sticky headers continue to be the default.
+
+### Consumer action
+
+Update to 0.18.1 to use direct header-label column dragging. No table
+configuration changes are required.
+
 ## 0.18.0 — 2026-09-12
 
 Portable data-table copy controls now use the canonical Alchemy menu for rows,

package/dist/data-table/index.cjs

@@ -460,7 +460,7 @@ module.exports = __toCommonJS(data_table_exports);
 
 // src/data-table/MatrxDataTable.tsx
 var import_react13 = require("react");
-var import_core2 = require("@dnd-kit/core");
+var import_core3 = require("@dnd-kit/core");
 
 // src/data-table/icons.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -4019,6 +4019,7 @@ var import_url_state3 = require("@ai-matrx/kit/url-state");
 
 // src/data-table/ColumnHeaderCell.tsx
 var import_react7 = require("react");
+var import_core = require("@dnd-kit/core");
 
 // src/popover.tsx
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
@@ -4228,8 +4229,29 @@ function ColumnHeaderCell({
   filterShowCancel = false,
   filterFooterHint,
   allowNegation = false,
-  allowNullModes = false
+  allowNullModes = false,
+  reorderColumn
 }) {
+  const reorderEnabled = reorderColumn !== void 0;
+  const { attributes: reorderAttributes, listeners: reorderListeners, setNodeRef } = (0, import_core.useDraggable)(
+    reorderColumn ? {
+      id: `matrx-column-header:${reorderColumn.id}`,
+      data: { matrxDragKind: "column-header", columnId: reorderColumn.id },
+      disabled: false
+    } : {
+      id: `matrx-column-header:inactive:${labelText ?? "column"}`,
+      disabled: true
+    }
+  );
+  const reorderLabel = reorderColumn?.label ?? labelText ?? "column";
+  const reorderActivator = reorderEnabled ? {
+    ...reorderAttributes,
+    ...reorderListeners,
+    ref: setNodeRef,
+    title: `Drag to reorder ${reorderLabel}.`,
+    "aria-description": "Drag this column label to reorder it."
+  } : void 0;
+  const reorderClass = reorderEnabled ? "touch-none cursor-grab active:cursor-grabbing" : void 0;
   const filterActive = isColumnFilterActive(filterValue);
   const deferredFilter = filterApplyLabel !== void 0 || filterShowCancel || filterFooterHint !== void 0;
   const [filterOpen, setFilterOpen] = (0, import_react7.useState)(false);
@@ -4373,7 +4395,21 @@ function ColumnHeaderCell({
   );
   if (compact) {
     if (!sortable && !filterKind) {
-      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("flex items-center justify-center", className), children: label });
+      if (!reorderEnabled) {
+        return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("flex items-center justify-center", className), children: label });
+      }
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn("flex items-center justify-center", className), children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        "button",
+        {
+          type: "button",
+          ...reorderActivator,
+          className: cn(
+            "inline-flex items-center justify-center rounded p-0.5 text-muted-foreground transition-colors hover:text-foreground",
+            reorderClass
+          ),
+          children: label
+        }
+      ) });
     }
     return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "div",
@@ -4390,9 +4426,13 @@ function ColumnHeaderCell({
               type: "button",
               "aria-label": menuLabel,
               title: menuLabel,
-              onClick: (e) => e.stopPropagation(),
+              onClick: (event) => {
+                event.stopPropagation();
+              },
+              ...reorderActivator,
               className: cn(
                 "relative inline-flex items-center justify-center rounded p-0.5 transition-colors",
+                reorderClass,
                 isSorted || filterActive ? "text-foreground" : "text-muted-foreground hover:text-foreground"
               ),
               children: [
@@ -4428,8 +4468,10 @@ function ColumnHeaderCell({
           {
             type: "button",
             onClick: onHeaderSortClick,
+            ...reorderActivator,
             className: cn(
               "inline-flex min-w-0 items-center gap-1 rounded px-0.5 py-0.5 text-left text-xs font-semibold uppercase tracking-wide transition-colors",
+              reorderClass,
               isSorted ? "text-foreground" : "text-muted-foreground hover:text-foreground"
             ),
             children: [
@@ -4437,6 +4479,17 @@ function ColumnHeaderCell({
               isSorted ? sortDirection === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArrowUp, { className: "h-3 w-3 shrink-0 text-primary" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArrowDown, { className: "h-3 w-3 shrink-0 text-primary" }) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArrowUpDown, { className: "h-3 w-3 shrink-0 opacity-40" })
             ]
           }
+        ) : reorderEnabled ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+          "button",
+          {
+            type: "button",
+            ...reorderActivator,
+            className: cn(
+              "min-w-0 truncate rounded px-0.5 py-0.5 text-left text-xs font-semibold uppercase tracking-wide text-muted-foreground hover:text-foreground",
+              reorderClass
+            ),
+            children: label
+          }
         ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "truncate text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: label }),
         filterKind ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "inline-flex items-center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Popover, { open: filterOpen, onOpenChange: setFilterOpen, children: [
@@ -4759,7 +4812,7 @@ function parseOptionalNumber(raw) {
 
 // src/data-table/ColumnManager.tsx
 var import_react8 = require("react");
-var import_core = require("@dnd-kit/core");
+var import_core2 = require("@dnd-kit/core");
 init_filter_engine();
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function ColumnManager({
@@ -4809,7 +4862,7 @@ function ColumnManager({
       return next;
     });
   };
-  (0, import_core.useDndMonitor)({
+  (0, import_core2.useDndMonitor)({
     onDragStart(event) {
       if (event.active.data.current?.matrxDragKind !== "column-manager") return;
       setDraggedColumnId(String(event.active.data.current.columnId));
@@ -4927,14 +4980,14 @@ function ColumnManagerDropTarget({
   className,
   children
 }) {
-  const { setNodeRef } = (0, import_core.useDroppable)({
+  const { setNodeRef } = (0, import_core2.useDroppable)({
     id: `matrx-column-manager:${id}`,
     data: { matrxDragKind: "column-manager", columnId: id }
   });
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ref: setNodeRef, "data-matrx-column-manager-drop-target": id, className, children });
 }
 function ColumnManagerDragHandle({ id, label }) {
-  const { attributes, listeners, setNodeRef } = (0, import_core.useDraggable)({
+  const { attributes, listeners, setNodeRef } = (0, import_core2.useDraggable)({
     id: `matrx-column-manager:${id}`,
     data: { matrxDragKind: "column-manager", columnId: id }
   });
@@ -6558,6 +6611,7 @@ function MatrxDataTableWithUrlState({
     }
   );
 }
+var COLUMN_REORDER_ACTIVATION_DISTANCE = 6;
 function MatrxDataTableCore({
   data: suppliedData,
   columns,
@@ -6629,8 +6683,10 @@ function MatrxDataTableCore({
   );
   const [internalSearch, setInternalSearch] = (0, import_react13.useState)("");
   const [draggedRowId, setDraggedRowId] = (0, import_react13.useState)(null);
-  const hierarchySensors = (0, import_core2.useSensors)(
-    (0, import_core2.useSensor)(import_core2.PointerSensor, { activationConstraint: { distance: 6 } })
+  const hierarchySensors = (0, import_core3.useSensors)(
+    (0, import_core3.useSensor)(import_core3.PointerSensor, {
+      activationConstraint: { distance: COLUMN_REORDER_ACTIVATION_DISTANCE }
+    })
   );
   const toolbarSearchControlled = toolbar?.searchValue !== void 0;
   const searchValue = controlledQuery ? controlledQuery.state.search : toolbarSearchControlled ? toolbar?.searchValue ?? "" : internalSearch;
@@ -7471,11 +7527,11 @@ function MatrxDataTableCore({
     } : facet
   ) : toolbar?.facets;
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-    import_core2.DndContext,
+    import_core3.DndContext,
     {
       sensors: hierarchySensors,
-      collisionDetection: import_core2.pointerWithin,
-      measuring: { droppable: { strategy: import_core2.MeasuringStrategy.Always } },
+      collisionDetection: import_core3.pointerWithin,
+      measuring: { droppable: { strategy: import_core3.MeasuringStrategy.Always } },
       onDragStart: (event) => {
         const kind = event.active.data.current?.matrxDragKind;
         if (kind === "column-header") {
@@ -7688,6 +7744,7 @@ function MatrxDataTableCore({
                               size: "sm",
                               className: "h-7 gap-1 px-2 text-xs text-muted-foreground",
                               onClick: clearAllFilters,
+                              "aria-label": "Clear all filters",
                               title: "Clear all filters",
                               children: [
                                 /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Eraser, { className: "h-3.5 w-3.5" }),
@@ -8046,45 +8103,43 @@ function MatrxDataTableCore({
                                     col.align === "right" && "text-right"
                                   ),
                                   style: columnWidthVar(col.width),
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: [
-                                    reorderableColumns ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ColumnReorderHandle, { id, label: headerLabel }) : null,
-                                    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-                                      ColumnHeaderCell,
-                                      {
-                                        label: col.header,
-                                        labelText: headerLabel,
-                                        sortable: col.sortable !== false,
-                                        isSorted: Boolean(isSorted),
-                                        sortDirection: sort?.direction ?? defaultSortDirection,
-                                        onSortAsc: () => setSort({ id, direction: "asc" }),
-                                        onSortDesc: () => setSort({ id, direction: "desc" }),
-                                        onClearSort: () => setSort(null),
-                                        onHeaderSortClick: () => {
-                                          if (!isSorted) {
-                                            setSort({ id, direction: defaultSortDirection });
-                                            return;
-                                          }
-                                          if (sort?.direction === "asc") {
-                                            setSort({ id, direction: "desc" });
-                                            return;
-                                          }
-                                          setSort(null);
-                                        },
-                                        filterKind: meta?.kind ?? null,
-                                        filterValue: columnFilters[id],
-                                        onFilterChange: (next) => setColumnFilter(id, next),
-                                        selectOptions: meta?.options,
-                                        selectSingle: col.filterSingle,
-                                        filterApplyLabel: filterUi?.applyLabel,
-                                        filterShowCancel: filterUi?.showCancel,
-                                        filterFooterHint: filterUi?.footerHint,
-                                        allowNegation: filterUi?.allowNegation,
-                                        allowNullModes: filterUi?.allowNullModes,
-                                        align: col.align,
-                                        compact: col.compact
-                                      }
-                                    )
-                                  ] })
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+                                    ColumnHeaderCell,
+                                    {
+                                      label: col.header,
+                                      labelText: headerLabel,
+                                      sortable: col.sortable !== false,
+                                      isSorted: Boolean(isSorted),
+                                      sortDirection: sort?.direction ?? defaultSortDirection,
+                                      onSortAsc: () => setSort({ id, direction: "asc" }),
+                                      onSortDesc: () => setSort({ id, direction: "desc" }),
+                                      onClearSort: () => setSort(null),
+                                      onHeaderSortClick: () => {
+                                        if (!isSorted) {
+                                          setSort({ id, direction: defaultSortDirection });
+                                          return;
+                                        }
+                                        if (sort?.direction === "asc") {
+                                          setSort({ id, direction: "desc" });
+                                          return;
+                                        }
+                                        setSort(null);
+                                      },
+                                      filterKind: meta?.kind ?? null,
+                                      filterValue: columnFilters[id],
+                                      onFilterChange: (next) => setColumnFilter(id, next),
+                                      selectOptions: meta?.options,
+                                      selectSingle: col.filterSingle,
+                                      filterApplyLabel: filterUi?.applyLabel,
+                                      filterShowCancel: filterUi?.showCancel,
+                                      filterFooterHint: filterUi?.footerHint,
+                                      allowNegation: filterUi?.allowNegation,
+                                      allowNullModes: filterUi?.allowNullModes,
+                                      align: col.align,
+                                      compact: col.compact,
+                                      reorderColumn: reorderableColumns ? { id, label: headerLabel } : void 0
+                                    }
+                                  ) })
                                 },
                                 id
                               );
@@ -8660,7 +8715,7 @@ function MatrxDataTableCore({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core2.DragOverlay, { children: draggedRow ? (
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_core3.DragOverlay, { children: draggedRow ? (
           // w-max: the overlay inherits the ACTIVE node's size, and the active
           // node is the 16px grip handle — without it the label wraps to one
           // character per line.
@@ -8675,7 +8730,7 @@ function HierarchyDragHandle({
   label,
   disabled
 }) {
-  const { attributes, listeners, setNodeRef } = (0, import_core2.useDraggable)({
+  const { attributes, listeners, setNodeRef } = (0, import_core3.useDraggable)({
     id,
     disabled
   });
@@ -8699,7 +8754,7 @@ function HierarchyRootDropTarget({
   label,
   draggedLabel
 }) {
-  const { isOver, setNodeRef } = (0, import_core2.useDroppable)({ id: "__root__" });
+  const { isOver, setNodeRef } = (0, import_core3.useDroppable)({ id: "__root__" });
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "div",
     {
@@ -8723,7 +8778,7 @@ function HierarchyDragIndicatorLayer({
   const [indicator, setIndicator] = (0, import_react13.useState)(
     null
   );
-  (0, import_core2.useDndMonitor)({
+  (0, import_core3.useDndMonitor)({
     onDragMove(event) {
       const container = scrollRef.current;
       const overId = event.over ? String(event.over.id) : null;
@@ -8823,7 +8878,7 @@ function HierarchyDroppableRow({
   disabled,
   children
 }) {
-  const { setNodeRef } = (0, import_core2.useDroppable)({ id, disabled });
+  const { setNodeRef } = (0, import_core3.useDroppable)({ id, disabled });
   if (!(0, import_react13.isValidElement)(children) || children.type !== "tr") return children;
   const row = children;
   return (0, import_react13.cloneElement)(row, {
@@ -8836,33 +8891,13 @@ function ColumnHeaderDropZone({
   enabled,
   children
 }) {
-  const { setNodeRef } = (0, import_core2.useDroppable)({
+  const { setNodeRef } = (0, import_core3.useDroppable)({
     id: `matrx-column-header:${id}`,
     disabled: !enabled,
     data: { matrxDragKind: "column-header", columnId: id }
   });
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref: setNodeRef, className: "flex min-w-0 items-center", children });
 }
-function ColumnReorderHandle({ id, label }) {
-  const { attributes, listeners, setNodeRef } = (0, import_core2.useDraggable)({
-    id: `matrx-column-header:${id}`,
-    data: { matrxDragKind: "column-header", columnId: id }
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-    "button",
-    {
-      ref: setNodeRef,
-      type: "button",
-      className: "mr-1 flex h-7 w-5 shrink-0 touch-none cursor-grab items-center justify-center text-muted-foreground hover:text-foreground active:cursor-grabbing",
-      "aria-label": `Reorder ${label}`,
-      title: `Drag to reorder ${label}`,
-      onClick: (event) => event.stopPropagation(),
-      ...attributes,
-      ...listeners,
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(GripVertical, { className: "h-3.5 w-3.5" })
-    }
-  );
-}
 function columnWidthVar(width) {
   if (width === void 0) return void 0;
   return {