@almadar/ui 5.9.10 → 5.12.0

package/dist/components/molecules/DataList.d.ts

@@ -56,6 +56,8 @@ export interface DataListProps<T extends EntityRow = EntityRow> extends DataDndP
     columns?: readonly DataListField[];
     /** Per-item action buttons */
     itemActions?: readonly DataListItemAction[];
+    /** Max inline action buttons before the rest collapse into a "⋯" overflow menu. Omit = all inline. */
+    maxInlineActions?: number;
     /** When set, the whole row is clickable and emits UI:{itemClickEvent} with
      *  { id, row } (action-button clicks stopPropagation so they still win). */
     itemClickEvent?: EventKey;
@@ -125,7 +127,7 @@ export interface DataListProps<T extends EntityRow = EntityRow> extends DataDndP
      */
     look?: "dense" | "spacious" | "striped" | "borderless" | "card-rows";
 }
-export declare function DataList<T extends EntityRow = EntityRow>({ entity, fields, columns, itemActions, itemClickEvent, gap, variant, groupBy, senderField, currentUser, className, isLoading, error, reorderable: _reorderable, reorderEvent: _reorderEvent, swipeLeftEvent: _swipeLeftEvent, swipeLeftActions: _swipeLeftActions, swipeRightEvent: _swipeRightEvent, swipeRightActions: _swipeRightActions, longPressEvent: _longPressEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable: sortableProp, dropEvent, reorderEvent: dndReorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataListProps<T>): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
+export declare function DataList<T extends EntityRow = EntityRow>({ entity, fields, columns, itemActions, maxInlineActions, itemClickEvent, gap, variant, groupBy, senderField, currentUser, className, isLoading, error, reorderable: _reorderable, reorderEvent: _reorderEvent, swipeLeftEvent: _swipeLeftEvent, swipeLeftActions: _swipeLeftActions, swipeRightEvent: _swipeRightEvent, swipeRightActions: _swipeRightActions, longPressEvent: _longPressEvent, infiniteScroll, loadMoreEvent, hasMore, children, pageSize, renderItem: schemaRenderItem, dragGroup, accepts, sortable: sortableProp, dropEvent, reorderEvent: dndReorderEvent, positionEvent, dndItemIdField, dndRoot, look, }: DataListProps<T>): string | number | bigint | boolean | import("react/jsx-runtime").JSX.Element | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | null | undefined;
 export declare namespace DataList {
     var displayName: string;
 }

package/dist/components/molecules/TableView.d.ts

@@ -59,6 +59,8 @@ export interface TableViewProps<T extends EntityRow = EntityRow> extends DataDnd
     fields?: readonly TableViewColumn[];
     /** Per-row action buttons (trailing column). */
     itemActions?: readonly TableViewItemAction[];
+    /** Max inline action buttons before the rest collapse into a "⋯" overflow menu. Omit = all inline. */
+    maxInlineActions?: number;
     /** Render a leading checkbox column. Selection changes emit `selectEvent`. */
     selectable?: boolean;
     /** Event emitted on selection change: UI:{selectEvent} with { ids, rows }. */
@@ -101,7 +103,7 @@ export interface TableViewProps<T extends EntityRow = EntityRow> extends DataDnd
      */
     look?: 'dense' | 'spacious' | 'striped' | 'borderless' | 'bordered';
 }
-export declare function TableView<T extends EntityRow = EntityRow>({ entity, columns, fields, itemActions, selectable, selectEvent, selectedIds, sortEvent, sortColumn, sortDirection, className, emptyMessage, isLoading, error, groupBy, pageSize, children, renderItem: _schemaRenderItem, look, dragGroup, accepts, sortable, dropEvent, reorderEvent, positionEvent, dndItemIdField, dndRoot, }: TableViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function TableView<T extends EntityRow = EntityRow>({ entity, columns, fields, itemActions, maxInlineActions, selectable, selectEvent, selectedIds, sortEvent, sortColumn, sortDirection, className, emptyMessage, isLoading, error, groupBy, pageSize, children, renderItem: _schemaRenderItem, look, dragGroup, accepts, sortable, dropEvent, reorderEvent, positionEvent, dndItemIdField, dndRoot, }: TableViewProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace TableView {
     var displayName: string;
 }

package/dist/providers/index.cjs

@@ -23448,6 +23448,8 @@ function DataGrid({
   fields,
   columns,
   itemActions,
+  maxInlineActions,
+  scrollX = false,
   cols,
   gap = "md",
   minCardWidth = 280,
@@ -23587,8 +23589,8 @@ function DataGrid({
       /* @__PURE__ */ jsxRuntime.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);
@@ -23715,21 +23717,39 @@ function DataGrid({
                         )
                       ] }, field.name);
                     }) }) }),
-                    primaryActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "px-4 py-3 mt-auto border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "sm", className: "justify-end", children: primaryActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                          action.label
-                        ]
-                      },
-                      idx
-                    )) }) })
+                    primaryActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "px-4 py-3 mt-auto border-t border-border", children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "sm", className: "justify-end", children: [
+                      (maxInlineActions != null ? primaryActions.slice(0, maxInlineActions) : primaryActions).map((action, idx) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+                            action.label
+                          ]
+                        },
+                        idx
+                      )),
+                      maxInlineActions != null && primaryActions.length > maxInlineActions && /* @__PURE__ */ jsxRuntime.jsx(
+                        Menu,
+                        {
+                          position: "bottom-end",
+                          trigger: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", "aria-label": "More actions", "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.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
@@ -23779,6 +23799,7 @@ var init_DataGrid = __esm({
     init_Button();
     init_Icon();
     init_InfiniteScrollSentinel();
+    init_Menu();
     init_useDataDnd();
     dataGridLog = logger.createLogger("almadar:ui:data-grid");
     BADGE_VARIANTS = /* @__PURE__ */ new Set([
@@ -23858,6 +23879,7 @@ function DataList({
   fields,
   columns,
   itemActions,
+  maxInlineActions,
   itemClickEvent,
   gap = "none",
   variant = "default",
@@ -23948,6 +23970,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__ */ jsxRuntime.jsxs(HStack, { gap: "xs", className: "flex-shrink-0", children: [
+      inline.map((action, idx) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+            action.label
+          ]
+        },
+        idx
+      )),
+      overflow.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+        Menu,
+        {
+          position: "bottom-end",
+          trigger: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", "aria-label": "More actions", "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.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 = {
@@ -24037,31 +24099,7 @@ function DataList({
         /* @__PURE__ */ jsxRuntime.jsxs(Box, { "data-entity-row": true, "data-entity-id": id2, onClick: itemClickEvent ? handleRowClick(itemData) : void 0, className: cn(itemClickEvent && "cursor-pointer"), children: [
           /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: "group flex items-stretch gap-2", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 min-w-0", children: children(itemData, index) }),
-            itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
-              HStack,
-              {
-                gap: "xs",
-                className: "flex-shrink-0",
-                children: itemActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                      action.label
-                    ]
-                  },
-                  idx
-                ))
-              }
-            )
+            renderItemActions(itemData)
           ] }),
           isCard && !isLast && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "mx-6 border-b border-border/40" })
         ] }, id2)
@@ -24132,24 +24170,7 @@ function DataList({
                   ] }, field.name);
                 })
               ] }),
-              itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "xs", className: "flex-shrink-0", children: itemActions.map((action, idx) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                    action.label
-                  ]
-                },
-                idx
-              )) })
+              renderItemActions(itemData)
             ]
           }
         ),
@@ -24219,6 +24240,7 @@ var init_DataList = __esm({
     init_ProgressBar();
     init_Divider();
     init_InfiniteScrollSentinel();
+    init_Menu();
     init_useDataDnd();
     dataListLog = logger.createLogger("almadar:ui:data-list");
     listLookStyles = {
@@ -29328,6 +29350,7 @@ function TableView({
   columns,
   fields,
   itemActions,
+  maxInlineActions,
   selectable = false,
   selectEvent,
   selectedIds,
@@ -29420,10 +29443,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__ */ jsxRuntime.jsxs(
     Box,
@@ -29510,22 +29536,41 @@ function TableView({
             }
             return /* @__PURE__ */ jsxRuntime.jsx(Box, { role: "cell", className: cellBase, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: formatCell(raw, col.format) }) }, col.key);
           }),
-          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(HStack, { gap: "xs", className: "flex-shrink-0 opacity-60 group-hover:opacity-100 transition-opacity", children: itemActions.map((action, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
-                action.label
-              ]
-            },
-            i
-          )) })
+          itemActions && itemActions.length > 0 && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Icon, { name: action.icon, size: "xs", className: "mr-1" }),
+                  action.label
+                ]
+              },
+              i
+            )),
+            maxInlineActions != null && itemActions.length > maxInlineActions && /* @__PURE__ */ jsxRuntime.jsx(
+              Menu,
+              {
+                position: "bottom-end",
+                trigger: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", "aria-label": "More actions", "data-testid": "action-overflow", children: /* @__PURE__ */ jsxRuntime.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
+                  })
+                }))
+              }
+            )
+          ] })
         ]
       }
     );
@@ -29573,6 +29618,7 @@ var init_TableView = __esm({
     init_Icon();
     init_Checkbox();
     init_Divider();
+    init_Menu();
     init_useDataDnd();
     logger.createLogger("almadar:ui:table-view");
     alignClass = {
@@ -29586,11 +29632,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";
   }