ai-design-system 0.1.78 → 0.1.80

package/components/composites/DataTable/EnhancedDataTable.tsx

@@ -55,6 +55,7 @@ export interface EnhancedDataTableProps {
   rightActions?: React.ReactNode
   onCreateClick?: () => void
   createButtonLabel?: string
+  rowActions?: Array<{ key: string; label: string; icon?: string }>
 }
 
 function toRowId(row: DashboardRow, schema: DynamicTableSchema): number | string {
@@ -96,6 +97,7 @@ export function EnhancedDataTable({
   rightActions,
   onCreateClick,
   createButtonLabel = "Create",
+  rowActions,
 }: EnhancedDataTableProps) {
   const [searchQuery, setSearchQuery] = React.useState("")
 
@@ -341,45 +343,100 @@ export function EnhancedDataTable({
       }))
     )
 
-    dynamicColumns.push({
-      id: "actions",
-      cell: ({ row }) => (
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button variant="ghost" className="flex size-8 text-muted-foreground data-[state=open]:bg-muted" size="icon">
-              <Icon name="more-vertical" size="sm" />
-              <span className="sr-only">Open menu</span>
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent align="end" className="w-40">
-            <DropdownMenuItem
-              onClick={() => {
-                setEditingRowId(String(toRowId(row.original, tableSchema)))
-                emitRowAction("edit", row.original)
-              }}
-            >
-              Edit
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={() => emitRowAction("copy", row.original)}>Make a copy</DropdownMenuItem>
-            <DropdownMenuItem onClick={() => emitRowAction("favorite", row.original)}>Favorite</DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem
-              onClick={() => {
-                if (editingRowId === String(toRowId(row.original, tableSchema))) {
-                  setEditingRowId(null)
-                }
-                emitRowAction("delete", row.original)
-              }}
-            >
-              Delete
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-      ),
-    })
+    if (rowActions && rowActions.length === 0) {
+      // No actions column if rowActions is explicitly empty
+    } else if (rowActions && rowActions.length === 1) {
+      const singleAction = rowActions[0]
+      const iconName = singleAction.icon || (singleAction.key === "retry" ? "refresh-cw" : "more-vertical")
+      dynamicColumns.push({
+        id: "actions",
+        cell: ({ row }) => (
+          <Button
+            variant="ghost"
+            size="icon"
+            className="flex size-8 cursor-pointer text-muted-foreground hover:text-foreground"
+            onClick={(e) => {
+              e.stopPropagation()
+              emitRowAction(singleAction.key, row.original)
+            }}
+            title={singleAction.label}
+            aria-label={singleAction.label}
+          >
+            <Icon name={iconName} size="sm" />
+          </Button>
+        ),
+      })
+    } else if (rowActions && rowActions.length > 1) {
+      dynamicColumns.push({
+        id: "actions",
+        cell: ({ row }) => (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="flex size-8 cursor-pointer text-muted-foreground data-[state=open]:bg-muted" size="icon">
+                <Icon name="more-vertical" size="sm" />
+                <span className="sr-only">Open menu</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-40">
+              {rowActions.map((action) => (
+                <DropdownMenuItem
+                  key={action.key}
+                  onClick={() => {
+                    if (action.key === "edit") {
+                      setEditingRowId(String(toRowId(row.original, tableSchema)))
+                    }
+                    emitRowAction(action.key, row.original)
+                  }}
+                >
+                  {action.icon && <Icon name={action.icon} size="xs" className="mr-2 inline" />}
+                  {action.label}
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ),
+      })
+    } else {
+      dynamicColumns.push({
+        id: "actions",
+        cell: ({ row }) => (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="ghost" className="flex size-8 text-muted-foreground data-[state=open]:bg-muted" size="icon">
+                <Icon name="more-vertical" size="sm" />
+                <span className="sr-only">Open menu</span>
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-40">
+              <DropdownMenuItem
+                onClick={() => {
+                  setEditingRowId(String(toRowId(row.original, tableSchema)))
+                  emitRowAction("edit", row.original)
+                }}
+              >
+                Edit
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => emitRowAction("copy", row.original)}>Make a copy</DropdownMenuItem>
+              <DropdownMenuItem onClick={() => emitRowAction("favorite", row.original)}>Favorite</DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                onClick={() => {
+                  if (editingRowId === String(toRowId(row.original, tableSchema))) {
+                    setEditingRowId(null)
+                  }
+                  emitRowAction("delete", row.original)
+                }}
+              >
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ),
+      })
+    }
 
     return dynamicColumns
-  }, [editingRowId, emitRowAction, renderEditableCell, renderReadonlyCell, tableSchema])
+  }, [editingRowId, emitRowAction, renderEditableCell, renderReadonlyCell, rowActions, tableSchema])
 
   const filterKeys = React.useMemo(() => tableSchema.columns.map((column) => column.key), [tableSchema.columns])
 

package/components/composites/DataTable/table-types.ts

@@ -8,7 +8,7 @@ export type DashboardRow = z.infer<typeof dashboardRowSchema>
 
 export type DashboardInlineEditableField = "target" | "limit"
 
-export type DashboardRowAction = "edit" | "copy" | "favorite" | "delete"
+export type DashboardRowAction = "edit" | "copy" | "favorite" | "delete" | string
 
 export interface DashboardPaginationState {
   pageIndex: number

package/components/composites/FormReports/FormReportsTable.tsx

@@ -18,6 +18,7 @@ export type FormReportsColumn = TableColumn
 export interface FormReportsRowAction {
   key: string
   label: string
+  icon?: string
 }
 
 export interface FormReportsTableHandlers {
@@ -64,7 +65,7 @@ const dashboardToFormReportsActionMap: Record<DashboardRowAction, string> = {
 export type { DashboardPaginationState }
 
 export const FormReportsTable = React.memo<FormReportsTableProps>(
-  ({ items, columns, pagination, handlers, leftActions, rightActions, onCreateClick, createButtonLabel, enableRowSelection }) => {
+  ({ items, columns, rowActions, pagination, handlers, leftActions, rightActions, onCreateClick, createButtonLabel, enableRowSelection }) => {
     const { rows, originalById, tableSchema } = React.useMemo(() => {
       const byId = new Map<string, FormReportsEntity>()
       const tableColumns: DynamicTableSchema["columns"] = columns
@@ -185,6 +186,7 @@ export const FormReportsTable = React.memo<FormReportsTableProps>(
         rightActions={rightActions}
         onCreateClick={onCreateClick}
         createButtonLabel={createButtonLabel}
+        rowActions={rowActions}
       />
     )
   }

package/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {

package/dist/index.cjs

@@ -132,7 +132,7 @@ function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
 var buttonVariants = classVarianceAuthority.cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
@@ -9830,7 +9830,8 @@ function EnhancedDataTable({
   leftActions,
   rightActions,
   onCreateClick,
-  createButtonLabel = "Create"
+  createButtonLabel = "Create",
+  rowActions
 }) {
   var _a, _b;
   const [searchQuery, setSearchQuery] = React3__namespace.useState("");
@@ -10041,44 +10042,93 @@ function EnhancedDataTable({
         };
       })
     );
-    dynamicColumns.push({
-      id: "actions",
-      cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button2, { variant: "ghost", className: "flex size-8 text-muted-foreground data-[state=open]:bg-muted", size: "icon", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "more-vertical", size: "sm" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Open menu" })
-        ] }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "end", className: "w-40", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            DropdownMenuItem,
-            {
-              onClick: () => {
-                setEditingRowId(String(toRowId(row.original, tableSchema)));
-                emitRowAction("edit", row.original);
-              },
-              children: "Edit"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: () => emitRowAction("copy", row.original), children: "Make a copy" }),
-          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: () => emitRowAction("favorite", row.original), children: "Favorite" }),
-          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
-          /* @__PURE__ */ jsxRuntime.jsx(
+    if (rowActions && rowActions.length === 0) ; else if (rowActions && rowActions.length === 1) {
+      const singleAction = rowActions[0];
+      const iconName = singleAction.icon || (singleAction.key === "retry" ? "refresh-cw" : "more-vertical");
+      dynamicColumns.push({
+        id: "actions",
+        cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx(
+          Button2,
+          {
+            variant: "ghost",
+            size: "icon",
+            className: "flex size-8 cursor-pointer text-muted-foreground hover:text-foreground",
+            onClick: (e) => {
+              e.stopPropagation();
+              emitRowAction(singleAction.key, row.original);
+            },
+            title: singleAction.label,
+            "aria-label": singleAction.label,
+            children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: iconName, size: "sm" })
+          }
+        )
+      });
+    } else if (rowActions && rowActions.length > 1) {
+      dynamicColumns.push({
+        id: "actions",
+        cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button2, { variant: "ghost", className: "flex size-8 cursor-pointer text-muted-foreground data-[state=open]:bg-muted", size: "icon", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "more-vertical", size: "sm" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Open menu" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "end", className: "w-40", children: rowActions.map((action) => /* @__PURE__ */ jsxRuntime.jsxs(
             DropdownMenuItem,
             {
               onClick: () => {
-                if (editingRowId === String(toRowId(row.original, tableSchema))) {
-                  setEditingRowId(null);
+                if (action.key === "edit") {
+                  setEditingRowId(String(toRowId(row.original, tableSchema)));
                 }
-                emitRowAction("delete", row.original);
+                emitRowAction(action.key, row.original);
               },
-              children: "Delete"
-            }
-          )
+              children: [
+                action.icon && /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: action.icon, size: "xs", className: "mr-2 inline" }),
+                action.label
+              ]
+            },
+            action.key
+          )) })
         ] })
-      ] })
-    });
+      });
+    } else {
+      dynamicColumns.push({
+        id: "actions",
+        cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu2, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(Button2, { variant: "ghost", className: "flex size-8 text-muted-foreground data-[state=open]:bg-muted", size: "icon", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Icon, { name: "more-vertical", size: "sm" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Open menu" })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenuContent, { align: "end", className: "w-40", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DropdownMenuItem,
+              {
+                onClick: () => {
+                  setEditingRowId(String(toRowId(row.original, tableSchema)));
+                  emitRowAction("edit", row.original);
+                },
+                children: "Edit"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: () => emitRowAction("copy", row.original), children: "Make a copy" }),
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { onClick: () => emitRowAction("favorite", row.original), children: "Favorite" }),
+            /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              DropdownMenuItem,
+              {
+                onClick: () => {
+                  if (editingRowId === String(toRowId(row.original, tableSchema))) {
+                    setEditingRowId(null);
+                  }
+                  emitRowAction("delete", row.original);
+                },
+                children: "Delete"
+              }
+            )
+          ] })
+        ] })
+      });
+    }
     return dynamicColumns;
-  }, [editingRowId, emitRowAction, renderEditableCell, renderReadonlyCell, tableSchema]);
+  }, [editingRowId, emitRowAction, renderEditableCell, renderReadonlyCell, rowActions, tableSchema]);
   const filterKeys = React3__namespace.useMemo(() => tableSchema.columns.map((column) => column.key), [tableSchema.columns]);
   const filteredData = React3__namespace.useMemo(() => {
     const query = searchQuery.trim().toLowerCase();
@@ -10483,7 +10533,7 @@ var dashboardToFormReportsActionMap = {
   delete: "delete"
 };
 var FormReportsTable = React3__namespace.memo(
-  ({ items, columns, pagination, handlers, leftActions, rightActions, onCreateClick, createButtonLabel, enableRowSelection }) => {
+  ({ items, columns, rowActions, pagination, handlers, leftActions, rightActions, onCreateClick, createButtonLabel, enableRowSelection }) => {
     const { rows, originalById, tableSchema } = React3__namespace.useMemo(() => {
       const byId = /* @__PURE__ */ new Map();
       const tableColumns = columns;
@@ -10625,7 +10675,8 @@ var FormReportsTable = React3__namespace.memo(
         leftActions,
         rightActions,
         onCreateClick,
-        createButtonLabel
+        createButtonLabel,
+        rowActions
       }
     );
   }