@ai-matrx/design-system 0.18.0 → 0.18.1

package/dist/data-table/index.js

@@ -427,7 +427,7 @@ import {
   PointerSensor,
   pointerWithin,
   useDndMonitor as useDndMonitor2,
-  useDraggable as useDraggable2,
+  useDraggable as useDraggable3,
   useDroppable as useDroppable2,
   useSensor,
   useSensors
@@ -4022,7 +4022,12 @@ import {
 } from "@ai-matrx/kit/url-state";
 
 // src/data-table/ColumnHeaderCell.tsx
-import { useEffect as useEffect6, useMemo as useMemo3, useState as useState9 } from "react";
+import {
+  useEffect as useEffect6,
+  useMemo as useMemo3,
+  useState as useState9
+} from "react";
+import { useDraggable } from "@dnd-kit/core";
 
 // src/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
@@ -4232,8 +4237,29 @@ function ColumnHeaderCell({
   filterShowCancel = false,
   filterFooterHint,
   allowNegation = false,
-  allowNullModes = false
+  allowNullModes = false,
+  reorderColumn
 }) {
+  const reorderEnabled = reorderColumn !== void 0;
+  const { attributes: reorderAttributes, listeners: reorderListeners, setNodeRef } = 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] = useState9(false);
@@ -4377,7 +4403,21 @@ function ColumnHeaderCell({
   );
   if (compact) {
     if (!sortable && !filterKind) {
-      return /* @__PURE__ */ jsx25("div", { className: cn("flex items-center justify-center", className), children: label });
+      if (!reorderEnabled) {
+        return /* @__PURE__ */ jsx25("div", { className: cn("flex items-center justify-center", className), children: label });
+      }
+      return /* @__PURE__ */ jsx25("div", { className: cn("flex items-center justify-center", className), children: /* @__PURE__ */ jsx25(
+        "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__ */ jsx25(
       "div",
@@ -4394,9 +4434,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: [
@@ -4432,8 +4476,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: [
@@ -4441,6 +4487,17 @@ function ColumnHeaderCell({
               isSorted ? sortDirection === "asc" ? /* @__PURE__ */ jsx25(ArrowUp, { className: "h-3 w-3 shrink-0 text-primary" }) : /* @__PURE__ */ jsx25(ArrowDown, { className: "h-3 w-3 shrink-0 text-primary" }) : /* @__PURE__ */ jsx25(ArrowUpDown, { className: "h-3 w-3 shrink-0 opacity-40" })
             ]
           }
+        ) : reorderEnabled ? /* @__PURE__ */ jsx25(
+          "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__ */ jsx25("span", { className: "truncate text-xs font-semibold uppercase tracking-wide text-muted-foreground", children: label }),
         filterKind ? /* @__PURE__ */ jsxs17("div", { className: "inline-flex items-center", children: [
           /* @__PURE__ */ jsxs17(Popover, { open: filterOpen, onOpenChange: setFilterOpen, children: [
@@ -4763,7 +4820,7 @@ function parseOptionalNumber(raw) {
 
 // src/data-table/ColumnManager.tsx
 import { useEffect as useEffect7, useMemo as useMemo4, useState as useState10 } from "react";
-import { useDndMonitor, useDraggable, useDroppable } from "@dnd-kit/core";
+import { useDndMonitor, useDraggable as useDraggable2, useDroppable } from "@dnd-kit/core";
 init_filter_engine();
 import { jsx as jsx26, jsxs as jsxs18 } from "react/jsx-runtime";
 function ColumnManager({
@@ -4938,7 +4995,7 @@ function ColumnManagerDropTarget({
   return /* @__PURE__ */ jsx26("div", { ref: setNodeRef, "data-matrx-column-manager-drop-target": id, className, children });
 }
 function ColumnManagerDragHandle({ id, label }) {
-  const { attributes, listeners, setNodeRef } = useDraggable({
+  const { attributes, listeners, setNodeRef } = useDraggable2({
     id: `matrx-column-manager:${id}`,
     data: { matrxDragKind: "column-manager", columnId: id }
   });
@@ -6566,6 +6623,7 @@ function MatrxDataTableWithUrlState({
     }
   );
 }
+var COLUMN_REORDER_ACTIVATION_DISTANCE = 6;
 function MatrxDataTableCore({
   data: suppliedData,
   columns,
@@ -6638,7 +6696,9 @@ function MatrxDataTableCore({
   const [internalSearch, setInternalSearch] = useState15("");
   const [draggedRowId, setDraggedRowId] = useState15(null);
   const hierarchySensors = useSensors(
-    useSensor(PointerSensor, { activationConstraint: { distance: 6 } })
+    useSensor(PointerSensor, {
+      activationConstraint: { distance: COLUMN_REORDER_ACTIVATION_DISTANCE }
+    })
   );
   const toolbarSearchControlled = toolbar?.searchValue !== void 0;
   const searchValue = controlledQuery ? controlledQuery.state.search : toolbarSearchControlled ? toolbar?.searchValue ?? "" : internalSearch;
@@ -7696,6 +7756,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__ */ jsx35(Eraser, { className: "h-3.5 w-3.5" }),
@@ -8054,45 +8115,43 @@ function MatrxDataTableCore({
                                     col.align === "right" && "text-right"
                                   ),
                                   style: columnWidthVar(col.width),
-                                  children: /* @__PURE__ */ jsxs26(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: [
-                                    reorderableColumns ? /* @__PURE__ */ jsx35(ColumnReorderHandle, { id, label: headerLabel }) : null,
-                                    /* @__PURE__ */ jsx35(
-                                      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__ */ jsx35(ColumnHeaderDropZone, { id, enabled: reorderableColumns, children: /* @__PURE__ */ jsx35(
+                                    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
                               );
@@ -8683,7 +8742,7 @@ function HierarchyDragHandle({
   label,
   disabled
 }) {
-  const { attributes, listeners, setNodeRef } = useDraggable2({
+  const { attributes, listeners, setNodeRef } = useDraggable3({
     id,
     disabled
   });
@@ -8851,26 +8910,6 @@ function ColumnHeaderDropZone({
   });
   return /* @__PURE__ */ jsx35("div", { ref: setNodeRef, className: "flex min-w-0 items-center", children });
 }
-function ColumnReorderHandle({ id, label }) {
-  const { attributes, listeners, setNodeRef } = useDraggable2({
-    id: `matrx-column-header:${id}`,
-    data: { matrxDragKind: "column-header", columnId: id }
-  });
-  return /* @__PURE__ */ jsx35(
-    "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__ */ jsx35(GripVertical, { className: "h-3.5 w-3.5" })
-    }
-  );
-}
 function columnWidthVar(width) {
   if (width === void 0) return void 0;
   return {