smartsell-ui-kit 0.1.16 → 0.1.17

package/README.md

@@ -215,6 +215,20 @@ function CustomerField() {
 
 `TableAsync` follows the same idea for remote datasets, with debounced search and request cancellation support built into the component flow.
 
+Both `Table` and `TableAsync` accept the optional `onRowClick` callback. When provided, it
+receives the clicked item and its visible row index. The desktop table row and the responsive
+mobile card use the same callback; the only visual change is the pointer cursor. Built-in row
+action buttons stop propagation so their handlers do not also trigger `onRowClick`.
+
+```tsx
+<Table
+  items={customers}
+  desktopColumns={desktopColumns}
+  mobileColumns={mobileColumns}
+  onRowClick={(customer) => openCustomer(customer)}
+/>
+```
+
 ## Development workflow
 
 Useful local commands:

package/dist/index.cjs

@@ -4458,7 +4458,8 @@ function OverflowMenu({ label, children }) {
         "aria-label": label,
         "aria-haspopup": "menu",
         "aria-expanded": isOpen,
-        onClick: () => {
+        onClick: (event) => {
+          event.stopPropagation();
           if (!isOpen) {
             updateMenuPosition();
           }
@@ -4513,6 +4514,7 @@ function TableBase({
   desktopColumns,
   mobileColumns,
   getRowId: getCustomRowId,
+  onRowClick,
   actions,
   stickyActionsColumn = true,
   maxInlineActions = DEFAULT_MAX_INLINE_ACTIONS,
@@ -4602,6 +4604,7 @@ function TableBase({
     ariaLabel,
     normalizedPage
   );
+  const hasRowClick = Boolean(onRowClick);
   const shouldStickActionsColumn = Boolean(actions) && stickyActionsColumn;
   const getStickyActionsCellStyle = (backgroundColor, backgroundImage, isHeader = false) => ({
     position: "sticky",
@@ -4670,7 +4673,8 @@ function TableBase({
         disabled,
         title: action.label,
         "aria-label": action.label,
-        onClick: () => {
+        onClick: (event) => {
+          event.stopPropagation();
           if (disabled) {
             return;
           }
@@ -4844,8 +4848,10 @@ function TableBase({
                     "flex min-w-0 flex-col rounded-[20px]",
                     rowActions ? "gap-1" : "gap-2.5",
                     "border-[3px] border-solid border-[var(--theme-background)] bg-[var(--theme-surface)]",
-                    "px-3.5 py-3 shadow-none"
+                    "px-3.5 py-3 shadow-none",
+                    hasRowClick ? "cursor-pointer" : ""
                   ].join(" "),
+                  onClick: onRowClick ? () => onRowClick(item, rowIndex) : void 0,
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                       "div",
@@ -5012,7 +5018,11 @@ function TableBase({
                   return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                     "tr",
                     {
-                      className: isAlternateRow ? "bg-[var(--theme-background)]" : "bg-[var(--theme-surface)]",
+                      className: [
+                        isAlternateRow ? "bg-[var(--theme-background)]" : "bg-[var(--theme-surface)]",
+                        hasRowClick ? "cursor-pointer" : ""
+                      ].join(" "),
+                      onClick: onRowClick ? () => onRowClick(item, rowIndex) : void 0,
                       children: [
                         desktopColumns.map((column, columnIndex) => {
                           return renderDesktopCell(