@almadar/ui 5.9.10 → 5.12.0

package/dist/runtime/index.js

@@ -23168,6 +23168,8 @@ function DataGrid({
   fields,
   columns,
   itemActions,
+  maxInlineActions,
+  scrollX = false,
   cols,
   gap = "md",
   minCardWidth = 280,
@@ -23307,8 +23309,8 @@ function DataGrid({
       /* @__PURE__ */ jsx(
         Box,
         {
-          className: cn("grid", gapStyles6[gap], colsClass, lookStyles5[look], className),
-          style: gridTemplateColumns ? { gridTemplateColumns } : void 0,
+          className: cn("grid", gapStyles6[gap], scrollX ? "grid-flow-col overflow-x-auto" : colsClass, lookStyles5[look], className),
+          style: scrollX ? { gridAutoFlow: "column", gridAutoColumns: `minmax(${minCardWidth}px, 1fr)` } : gridTemplateColumns ? { gridTemplateColumns } : void 0,
           children: data.map((item, index) => {
             const itemData = item;
             const id = itemData.id || String(index);
@@ -23435,21 +23437,39 @@ function DataGrid({
                         )
                       ] }, field.name);
                     }) }) }),
-                    primaryActions.length > 0 && /* @__PURE__ */ jsx(Box, { className: "px-4 py-3 mt-auto border-t border-border", children: /* @__PURE__ */ jsx(HStack, { gap: "sm", className: "justify-end", children: primaryActions.map((action, idx) => /* @__PURE__ */ jsxs(
-                      Button,
-                      {
-                        variant: action.variant === "primary" ? "primary" : "ghost",
-                        size: "sm",
-                        onClick: handleActionClick(action, itemData),
-                        "data-testid": `action-${action.event}`,
-                        "data-row-id": String(itemData.id),
-                        children: [
-                          action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                          action.label
-                        ]
-                      },
-                      idx
-                    )) }) })
+                    primaryActions.length > 0 && /* @__PURE__ */ jsx(Box, { className: "px-4 py-3 mt-auto border-t border-border", children: /* @__PURE__ */ jsxs(HStack, { gap: "sm", className: "justify-end", children: [
+                      (maxInlineActions != null ? primaryActions.slice(0, maxInlineActions) : primaryActions).map((action, idx) => /* @__PURE__ */ jsxs(
+                        Button,
+                        {
+                          variant: action.variant === "primary" ? "primary" : "ghost",
+                          size: "sm",
+                          onClick: handleActionClick(action, itemData),
+                          "data-testid": `action-${action.event}`,
+                          "data-row-id": String(itemData.id),
+                          children: [
+                            action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+                            action.label
+                          ]
+                        },
+                        idx
+                      )),
+                      maxInlineActions != null && primaryActions.length > maxInlineActions && /* @__PURE__ */ jsx(
+                        Menu,
+                        {
+                          position: "bottom-end",
+                          trigger: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": "More actions", "data-testid": "action-overflow", children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
+                          items: primaryActions.slice(maxInlineActions).map((action) => ({
+                            label: action.label,
+                            icon: action.icon,
+                            event: action.event,
+                            onClick: () => eventBus.emit(`UI:${action.event}`, {
+                              id: itemData.id,
+                              row: itemData
+                            })
+                          }))
+                        }
+                      )
+                    ] }) })
                   ]
                 },
                 id
@@ -23499,6 +23519,7 @@ var init_DataGrid = __esm({
     init_Button();
     init_Icon();
     init_InfiniteScrollSentinel();
+    init_Menu();
     init_useDataDnd();
     dataGridLog = createLogger("almadar:ui:data-grid");
     BADGE_VARIANTS = /* @__PURE__ */ new Set([
@@ -23578,6 +23599,7 @@ function DataList({
   fields,
   columns,
   itemActions,
+  maxInlineActions,
   itemClickEvent,
   gap = "none",
   variant = "default",
@@ -23668,6 +23690,46 @@ function DataList({
     };
     eventBus.emit(`UI:${action.event}`, payload);
   };
+  const renderItemActions = (itemData) => {
+    if (!itemActions || itemActions.length === 0) return null;
+    const inline = maxInlineActions != null ? itemActions.slice(0, maxInlineActions) : itemActions;
+    const overflow = maxInlineActions != null ? itemActions.slice(maxInlineActions) : [];
+    return /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "flex-shrink-0", children: [
+      inline.map((action, idx) => /* @__PURE__ */ jsxs(
+        Button,
+        {
+          variant: action.variant ?? "ghost",
+          size: "sm",
+          onClick: handleActionClick(action, itemData),
+          "data-testid": `action-${action.event}`,
+          "data-row-id": String(itemData.id),
+          className: cn(action.variant === "danger" && "text-error hover:bg-error/10"),
+          children: [
+            action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+            action.label
+          ]
+        },
+        idx
+      )),
+      overflow.length > 0 && /* @__PURE__ */ jsx(
+        Menu,
+        {
+          position: "bottom-end",
+          trigger: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": "More actions", "data-testid": "action-overflow", children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
+          items: overflow.map((action) => ({
+            label: action.label,
+            icon: action.icon,
+            event: action.event,
+            variant: action.variant === "danger" ? "danger" : "default",
+            onClick: () => eventBus.emit(`UI:${action.event}`, {
+              id: itemData.id,
+              row: itemData
+            })
+          }))
+        }
+      )
+    ] });
+  };
   const handleRowClick = (itemData) => () => {
     if (!itemClickEvent) return;
     const payload = {
@@ -23757,31 +23819,7 @@ function DataList({
         /* @__PURE__ */ jsxs(Box, { "data-entity-row": true, "data-entity-id": id2, onClick: itemClickEvent ? handleRowClick(itemData) : void 0, className: cn(itemClickEvent && "cursor-pointer"), children: [
           /* @__PURE__ */ jsxs(Box, { className: "group flex items-stretch gap-2", children: [
             /* @__PURE__ */ jsx(Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
-            itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(
-              HStack,
-              {
-                gap: "xs",
-                className: "flex-shrink-0",
-                children: itemActions.map((action, idx) => /* @__PURE__ */ jsxs(
-                  Button,
-                  {
-                    variant: action.variant ?? "ghost",
-                    size: "sm",
-                    onClick: handleActionClick(action, itemData),
-                    "data-testid": `action-${action.event}`,
-                    "data-row-id": String(itemData.id),
-                    className: cn(
-                      action.variant === "danger" && "text-error hover:bg-error/10"
-                    ),
-                    children: [
-                      action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                      action.label
-                    ]
-                  },
-                  idx
-                ))
-              }
-            )
+            renderItemActions(itemData)
           ] }),
           isCard && !isLast && /* @__PURE__ */ jsx(Box, { className: "mx-6 border-b border-border/40" })
         ] }, id2)
@@ -23852,24 +23890,7 @@ function DataList({
                   ] }, field.name);
                 })
               ] }),
-              itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-shrink-0", children: itemActions.map((action, idx) => /* @__PURE__ */ jsxs(
-                Button,
-                {
-                  variant: action.variant ?? "ghost",
-                  size: "sm",
-                  onClick: handleActionClick(action, itemData),
-                  "data-testid": `action-${action.event}`,
-                  "data-row-id": String(itemData.id),
-                  className: cn(
-                    action.variant === "danger" && "text-error hover:bg-error/10"
-                  ),
-                  children: [
-                    action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                    action.label
-                  ]
-                },
-                idx
-              )) })
+              renderItemActions(itemData)
             ]
           }
         ),
@@ -23939,6 +23960,7 @@ var init_DataList = __esm({
     init_ProgressBar();
     init_Divider();
     init_InfiniteScrollSentinel();
+    init_Menu();
     init_useDataDnd();
     dataListLog = createLogger("almadar:ui:data-list");
     listLookStyles = {
@@ -28984,6 +29006,7 @@ function TableView({
   columns,
   fields,
   itemActions,
+  maxInlineActions,
   selectable = false,
   selectEvent,
   selectedIds,
@@ -29076,10 +29099,13 @@ function TableView({
   }
   const lk = LOOKS[look];
   const hasActions = Boolean(itemActions && itemActions.length > 0);
+  const inlineActionCount = hasActions ? maxInlineActions != null ? Math.min(itemActions.length, maxInlineActions) : itemActions.length : 0;
+  const hasOverflowActions = hasActions && maxInlineActions != null && itemActions.length > maxInlineActions;
+  const actionsTrack = hasActions ? `${inlineActionCount * 6 + (hasOverflowActions ? 3 : 0)}rem` : null;
   const gridTemplateColumns = [
     selectable ? "auto" : null,
     ...colDefs.map((c) => c.width ?? "minmax(0, 1fr)"),
-    hasActions ? "auto" : null
+    actionsTrack
   ].filter(Boolean).join(" ");
   const header = /* @__PURE__ */ jsxs(
     Box,
@@ -29166,22 +29192,41 @@ function TableView({
             }
             return /* @__PURE__ */ jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
-          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsx(HStack, { gap: "xs", className: "flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: itemActions.map((action, i) => /* @__PURE__ */ jsxs(
-            Button,
-            {
-              variant: action.variant ?? "ghost",
-              size: "sm",
-              onClick: handleActionClick(action, row),
-              "data-testid": `action-${action.event}`,
-              "data-row-id": String(row.id),
-              className: cn(action.variant === "danger" && "text-error hover:bg-error/10"),
-              children: [
-                action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                action.label
-              ]
-            },
-            i
-          )) })
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxs(HStack, { gap: "xs", className: "justify-end flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: [
+            (maxInlineActions != null ? itemActions.slice(0, maxInlineActions) : itemActions).map((action, i) => /* @__PURE__ */ jsxs(
+              Button,
+              {
+                variant: action.variant ?? "ghost",
+                size: "sm",
+                onClick: handleActionClick(action, row),
+                "data-testid": `action-${action.event}`,
+                "data-row-id": String(row.id),
+                className: cn(action.variant === "danger" && "text-error hover:bg-error/10"),
+                children: [
+                  action.icon && /* @__PURE__ */ jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+                  action.label
+                ]
+              },
+              i
+            )),
+            maxInlineActions != null && itemActions.length > maxInlineActions && /* @__PURE__ */ jsx(
+              Menu,
+              {
+                position: "bottom-end",
+                trigger: /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", "aria-label": "More actions", "data-testid": "action-overflow", children: /* @__PURE__ */ jsx(Icon, { name: "more-horizontal", size: "xs" }) }),
+                items: itemActions.slice(maxInlineActions).map((action) => ({
+                  label: action.label,
+                  icon: action.icon,
+                  event: action.event,
+                  variant: action.variant === "danger" ? "danger" : "default",
+                  onClick: () => eventBus.emit(`UI:${action.event}`, {
+                    id: row.id,
+                    row
+                  })
+                }))
+              }
+            )
+          ] })
         ]
       }
     );
@@ -29229,6 +29274,7 @@ var init_TableView = __esm({
     init_Icon();
     init_Checkbox();
     init_Divider();
+    init_Menu();
     init_useDataDnd();
     createLogger("almadar:ui:table-view");
     alignClass = {
@@ -29242,11 +29288,11 @@ var init_TableView = __esm({
       semibold: "font-semibold"
     };
     LOOKS = {
-      dense: { rowPad: "px-3 py-2", headPad: "px-3 py-2", striped: false, divider: true },
-      spacious: { rowPad: "px-5 py-4", headPad: "px-5 py-3", striped: false, divider: true },
-      striped: { rowPad: "px-3 py-2", headPad: "px-3 py-2", striped: true, divider: false },
-      borderless: { rowPad: "px-3 py-2", headPad: "px-3 py-2", striped: false, divider: false },
-      bordered: { rowPad: "px-3 py-2", headPad: "px-3 py-2", striped: false, divider: true }
+      dense: { rowPad: "px-card-md py-card-sm", headPad: "px-card-md py-card-sm", striped: false, divider: true },
+      spacious: { rowPad: "px-card-lg py-card-md", headPad: "px-card-lg py-card-sm", striped: false, divider: true },
+      striped: { rowPad: "px-card-md py-card-sm", headPad: "px-card-md py-card-sm", striped: true, divider: false },
+      borderless: { rowPad: "px-card-md py-card-sm", headPad: "px-card-md py-card-sm", striped: false, divider: false },
+      bordered: { rowPad: "px-card-md py-card-sm", headPad: "px-card-md py-card-sm", striped: false, divider: true }
     };
     TableView.displayName = "TableView";
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "5.9.10",
+  "version": "5.12.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "sideEffects": [