@payglocal_ui/flux-ui 0.2.2 → 0.2.4

package/dist/index.d.cts

@@ -789,6 +789,22 @@ interface DataTableProps<T> {
      * flush with nothing trailing it. Takes precedence over `rowCta`.
      */
     rowAction?: ReactNode | ((row: T, index: number) => ReactNode);
+    /**
+     * Makes the whole row a click target — the row itself opens a drawer, a
+     * detail page, whatever the table drills into — instead of that living in a
+     * per-cell wrapper or a hover-revealed button.
+     *
+     * The handler sits on the `<tr>`, so the entire row including cell padding
+     * and the empty space between columns is clickable, and the row gets
+     * `cursor-pointer` plus keyboard access (focusable, Enter / Space).
+     *
+     * Clicks that originate inside something interactive — a `<button>`, `<a>`,
+     * a form control, a Radix trigger, or anything marked
+     * `data-row-click-ignore` — do NOT fire this. Copy buttons, per-row menus
+     * and the `rowAction` overlay therefore keep doing only their own job
+     * without each having to stop propagation.
+     */
+    onRowClick?: (row: T, index: number) => void;
     /** Row / cell vertical rhythm and horizontal gutters */
     density?: DataTableDensity;
     /**
@@ -814,7 +830,7 @@ interface DataTableProps<T> {
     /** With `density="compact"`, use tighter cell gutters (`pl-1.5 pr-2.5` vs `px-3`). Footer keeps normal horizontal padding. */
     snug?: boolean;
 }
-declare function DataTable<T>({ columns, data, isLoading, skeletonRows, emptyTitle, emptyDescription, pageSize, page: controlledPage, onPageChange, totalRows, className, rowKey, rowCta, rowAction, density, tableLayout, theadClassName, headerStyle, footerSummary, footerCountLabels, snug, }: DataTableProps<T>): React$1.JSX.Element;
+declare function DataTable<T>({ columns, data, isLoading, skeletonRows, emptyTitle, emptyDescription, pageSize, page: controlledPage, onPageChange, totalRows, className, rowKey, rowCta, rowAction, onRowClick, density, tableLayout, theadClassName, headerStyle, footerSummary, footerCountLabels, snug, }: DataTableProps<T>): React$1.JSX.Element;
 
 interface EmptyStateProps {
     icon?: LucideIcon;

package/dist/index.d.ts

@@ -789,6 +789,22 @@ interface DataTableProps<T> {
      * flush with nothing trailing it. Takes precedence over `rowCta`.
      */
     rowAction?: ReactNode | ((row: T, index: number) => ReactNode);
+    /**
+     * Makes the whole row a click target — the row itself opens a drawer, a
+     * detail page, whatever the table drills into — instead of that living in a
+     * per-cell wrapper or a hover-revealed button.
+     *
+     * The handler sits on the `<tr>`, so the entire row including cell padding
+     * and the empty space between columns is clickable, and the row gets
+     * `cursor-pointer` plus keyboard access (focusable, Enter / Space).
+     *
+     * Clicks that originate inside something interactive — a `<button>`, `<a>`,
+     * a form control, a Radix trigger, or anything marked
+     * `data-row-click-ignore` — do NOT fire this. Copy buttons, per-row menus
+     * and the `rowAction` overlay therefore keep doing only their own job
+     * without each having to stop propagation.
+     */
+    onRowClick?: (row: T, index: number) => void;
     /** Row / cell vertical rhythm and horizontal gutters */
     density?: DataTableDensity;
     /**
@@ -814,7 +830,7 @@ interface DataTableProps<T> {
     /** With `density="compact"`, use tighter cell gutters (`pl-1.5 pr-2.5` vs `px-3`). Footer keeps normal horizontal padding. */
     snug?: boolean;
 }
-declare function DataTable<T>({ columns, data, isLoading, skeletonRows, emptyTitle, emptyDescription, pageSize, page: controlledPage, onPageChange, totalRows, className, rowKey, rowCta, rowAction, density, tableLayout, theadClassName, headerStyle, footerSummary, footerCountLabels, snug, }: DataTableProps<T>): React$1.JSX.Element;
+declare function DataTable<T>({ columns, data, isLoading, skeletonRows, emptyTitle, emptyDescription, pageSize, page: controlledPage, onPageChange, totalRows, className, rowKey, rowCta, rowAction, onRowClick, density, tableLayout, theadClassName, headerStyle, footerSummary, footerCountLabels, snug, }: DataTableProps<T>): React$1.JSX.Element;
 
 interface EmptyStateProps {
     icon?: LucideIcon;

package/dist/index.js

@@ -1,3 +1,5 @@
+"use client";
+
 // src/utils.ts
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -3606,6 +3608,7 @@ function DataTable({
   rowKey,
   rowCta,
   rowAction,
+  onRowClick,
   density = "default",
   tableLayout = "fixed",
   theadClassName,
@@ -3638,6 +3641,12 @@ function DataTable({
   const footerPad = comfortable ? "px-5 py-4" : compact ? "px-4 py-2.5" : "px-4 py-3.5";
   const headText = comfortable ? "text-[12px] font-medium text-muted-foreground tracking-normal" : compact ? "text-[11px] font-semibold text-muted-foreground" : "text-[11px] font-semibold text-foreground/75 dark:text-foreground/85";
   const actionGutter = comfortable ? 20 : compact ? 12 : 16;
+  const ROW_CLICK_IGNORE = 'button, a, input, select, textarea, label, [role="button"], [role="link"], [role="checkbox"], [role="menuitem"], [role="menu"], [role="dialog"], [data-row-click-ignore]';
+  const isRowClickTarget = (target, rowEl) => {
+    if (!(target instanceof Element)) return false;
+    const interactive = target.closest(ROW_CLICK_IGNORE);
+    return !(interactive && rowEl.contains(interactive));
+  };
   return /* @__PURE__ */ jsxs30(
     "div",
     {
@@ -3735,8 +3744,23 @@ function DataTable({
                         comfortable && "min-h-[56px]",
                         compact && "min-h-[44px]",
                         "hover:bg-muted/40 dark:hover:bg-muted/25",
-                        hasAction && "hover:shadow-[0_1px_0_rgba(0,0,0,0.04)] dark:hover:shadow-none"
+                        hasAction && "hover:shadow-[0_1px_0_rgba(0,0,0,0.04)] dark:hover:shadow-none",
+                        // Clickable rows read as clickable, and show a focus ring
+                        // when reached by keyboard. `focus-visible` only, so a
+                        // mouse click does not leave a ring behind on the row.
+                        onRowClick && "cursor-pointer focus-visible:outline-none focus-visible:bg-muted/40 dark:focus-visible:bg-muted/25"
                       ),
+                      tabIndex: onRowClick ? 0 : void 0,
+                      onClick: onRowClick ? (e) => {
+                        if (!isRowClickTarget(e.target, e.currentTarget)) return;
+                        onRowClick(row, i);
+                      } : void 0,
+                      onKeyDown: onRowClick ? (e) => {
+                        if (e.key !== "Enter" && e.key !== " ") return;
+                        if (e.target !== e.currentTarget) return;
+                        e.preventDefault();
+                        onRowClick(row, i);
+                      } : void 0,
                       children: [
                         columns.map((col) => /* @__PURE__ */ jsx49(
                           "td",