fix(apollo-vertex): suppress data-table row onClick after text drag-select

A finished text selection inside a row was firing onRowClick on mouseup. Skip
the click when the pointer moved beyond a small threshold AND the resulting
selection is a Range. Wires onRowClick into the demo (toggles row expansion)
so the behavior is testable.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

Author: frankkluijtmans

apps/apollo-vertex/registry/data-table/data-table.tsx

@@ -129,6 +129,12 @@ function DataTable<TData, TValue>({
   const isRowSelectionEnabled = !!(rowSelection && onRowSelectionChange);
   const isPaginationEnabled = !!(pagination && onPaginationChange);
 
+  // Distinguish a click from a drag-select. A pure click can still register a
+  // 1–2px Range due to mouse drift, so we only suppress onRowClick when the
+  // pointer actually moved beyond a small threshold AND a Range exists.
+  // https://github.com/mui/mui-x/issues/1172
+  const pressOriginRef = React.useRef<{ x: number; y: number } | null>(null);
+
   const resetPageIndex = () => {
     onPaginationChange?.((prev) =>
       prev.pageIndex === 0 ? prev : { ...prev, pageIndex: 0 },
@@ -289,7 +295,27 @@ function DataTable<TData, TValue>({
                       getRowClassName?.(row.original),
                     )}
                     {...(onRowClick && {
-                      onClick: () => onRowClick(row.original),
+                      onMouseDown: (e: React.MouseEvent) => {
+                        pressOriginRef.current = {
+                          x: e.clientX,
+                          y: e.clientY,
+                        };
+                      },
+                      onClick: (e: React.MouseEvent<HTMLTableRowElement>) => {
+                        const origin = pressOriginRef.current;
+                        pressOriginRef.current = null;
+                        const moved =
+                          !!origin &&
+                          (Math.abs(e.clientX - origin.x) > 5 ||
+                            Math.abs(e.clientY - origin.y) > 5);
+                        if (
+                          moved &&
+                          window.getSelection()?.type === "Range"
+                        ) {
+                          return;
+                        }
+                        onRowClick(row.original);
+                      },
                     })}
                   >
                     {row.getVisibleCells().map((cell) => (

apps/apollo-vertex/templates/DataTableTemplate.tsx

@@ -310,8 +310,15 @@ function DataTableTemplateContent() {
     <div className="p-4">
       <DataTable
         {...tableState}
+        getRowId={(payment) => payment.id}
         expanded={expanded}
         onExpandedChange={setExpanded}
+        onRowClick={(payment) =>
+          setExpanded((prev) => {
+            if (prev === true) return { [payment.id]: false };
+            return { ...prev, [payment.id]: !prev[payment.id] };
+          })
+        }
         renderExpandedRow={(row) => {
           const payment = row.original;
           return (