@pagamio/frontend-commons-lib 0.8.312 → 0.8.313

package/lib/components/ui/DetailsCard.js

@@ -8,9 +8,6 @@ const DetailsCard = ({ data, loading, buttonText, showButton = true, onClickButt
     }
     const rightPanelItem = data.find((item) => item.layout === 'rightPanel' || item.id === '__details_right_panel__');
     const leftData = rightPanelItem ? data.filter((item) => item !== rightPanelItem) : data;
-    return (_jsx("div", { className: "flex flex-col", children: _jsxs(Card, { children: [loading ? (_jsx("div", { className: "mb-2 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4", children: _jsx("div", { className: "flex items-center justify-center col-span-full", children: _jsx(LoaderComponent, {}) }) })) : (_jsxs("div", { className: `mb-2 ${rightPanelItem ? 'flex flex-col gap-6 lg:flex-row' : ''}`, children: [_jsx("div", { className: `grid grid-cols-1 gap-4 sm:grid-cols-2 ${rightPanelItem ? 'flex-1 lg:grid-cols-3' : 'md:grid-cols-4'}`, children: leftData.map((item, index) => {
-                                const capitalizedLabel = item.label.charAt(0).toUpperCase() + item.label.slice(1);
-                                return (_jsxs("div", { className: "flex flex-col", children: [_jsx("div", { className: "mb-1 font-medium text-sm text-muted-foreground", children: capitalizedLabel }), _jsx("div", { className: "text-foreground text-sm break-words", children: item.value })] }, item.id ?? `${item.label}-${index}`));
-                            }) }), rightPanelItem && (_jsxs("div", { className: "lg:w-[320px] lg:shrink-0 lg:border-l lg:border-border lg:pl-6", children: [_jsx("div", { className: "mb-2 font-medium text-sm text-muted-foreground", children: rightPanelItem.label.charAt(0).toUpperCase() + rightPanelItem.label.slice(1) }), _jsx("div", { className: "text-foreground text-sm break-words", children: rightPanelItem.value })] }))] })), !loading && (_jsxs("div", { className: "flex justify-end gap-2 items-center", children: [actionContent && _jsx("div", { className: "flex-1 flex flex-row text-sm justify-end", children: actionContent }), showButton && (_jsx("div", { className: `flex ${actionContent ? 'justify-end' : 'justify-center sm:justify-end'}`, children: _jsx(Button, { type: "button", variant: "primary", disabled: loading, onClick: onClickButton, className: "text-sm", children: buttonText }) }))] }))] }) }));
+    return (_jsx("div", { className: "flex flex-col mb-4", children: _jsxs(Card, { children: [loading ? (_jsx("div", { className: "flex items-center justify-center py-8", children: _jsx(LoaderComponent, {}) })) : (_jsxs("div", { className: "flex flex-col lg:flex-row gap-6", children: [_jsx("div", { className: "flex-1 min-w-0", children: _jsx("div", { className: "grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-x-6 gap-y-4", children: leftData.map((item, index) => (_jsxs("div", { className: "flex flex-col min-w-0", children: [_jsx("div", { className: "mb-0.5 text-xs font-medium text-muted-foreground uppercase tracking-wide", children: item.label.charAt(0).toUpperCase() + item.label.slice(1) }), _jsx("div", { className: "text-foreground text-sm break-words", children: item.value })] }, item.id ?? `${item.label}-${index}`))) }) }), rightPanelItem && (_jsxs("div", { className: "lg:w-[320px] lg:shrink-0 lg:border-l lg:border-border lg:pl-6 flex flex-col gap-2", children: [_jsx("div", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wide", children: rightPanelItem.label.charAt(0).toUpperCase() + rightPanelItem.label.slice(1) }), _jsx("div", { className: "text-foreground text-sm break-words", children: rightPanelItem.value })] }))] })), !loading && (actionContent || showButton) && (_jsxs("div", { className: "flex flex-wrap justify-end gap-2 items-center mt-2", children: [actionContent && _jsx("div", { className: "flex flex-wrap gap-2", children: actionContent }), showButton && (_jsx(Button, { type: "button", variant: "primary", disabled: loading, onClick: onClickButton, className: "text-sm", children: buttonText }))] }))] }) }));
 };
 export default DetailsCard;

package/lib/components/ui/DetailsPage.js

@@ -45,6 +45,6 @@ const DetailsPage = ({ id, parentId, title, loading, detailsData, canEdit, onEdi
     }, [id, parentId, entityName, parentEntityName, updateBreadcrumb]);
     // Capitalize the component for JSX usage
     const TabComponent = tabComponent;
-    return (_jsxs("div", { children: [_jsx(AppPageHeader, { title: title }), _jsx(DetailsCard, { loading: loading, data: formattedDetailsData, buttonText: editButtonText, showButton: canEdit, onClickButton: onEdit || (() => { }), actionContent: actionContent }), TabComponent && _jsx(TabComponent, { ...tabProps }), formEngineConfig && (_jsx(FormEngineDrawer, { title: formEngineConfig.title, isOpen: formEngineConfig.isOpen, onClose: formEngineConfig.onClose, onSubmit: formEngineConfig.onSubmit, fields: formEngineConfig.fields, initialValues: formEngineConfig.initialValues, submitButtonText: formEngineConfig.submitButtonText, marginTop: formEngineConfig.marginTop, onFieldChange: formEngineConfig.onFieldChange, onFieldUpdate: formEngineConfig.onFieldUpdate, persistenceKey: formEngineConfig.persistenceKey, children: formEngineConfig.children }, formEngineConfig.drawerKey))] }));
+    return (_jsxs("div", { children: [_jsx(AppPageHeader, { title: title }), _jsx(DetailsCard, { loading: loading, data: formattedDetailsData, buttonText: editButtonText, showButton: canEdit, onClickButton: onEdit || (() => { }), actionContent: actionContent }), TabComponent && (_jsx("div", { className: "mt-2", children: _jsx(TabComponent, { ...tabProps }) })), formEngineConfig && (_jsx(FormEngineDrawer, { title: formEngineConfig.title, isOpen: formEngineConfig.isOpen, onClose: formEngineConfig.onClose, onSubmit: formEngineConfig.onSubmit, fields: formEngineConfig.fields, initialValues: formEngineConfig.initialValues, submitButtonText: formEngineConfig.submitButtonText, marginTop: formEngineConfig.marginTop, onFieldChange: formEngineConfig.onFieldChange, onFieldUpdate: formEngineConfig.onFieldUpdate, persistenceKey: formEngineConfig.persistenceKey, children: formEngineConfig.children }, formEngineConfig.drawerKey))] }));
 };
 export default DetailsPage;

package/lib/components/ui/FilterComponent.js

@@ -31,7 +31,7 @@ const FilterComponent = ({ filters, selectedFilters, showApplyFilterButton = tru
             resetFilters();
         }
     };
-    return (_jsxs(FilterWrapper, { isNarrow: isNarrow, children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [showSearch && (_jsxs("div", { className: "relative w-full sm:w-[300px]", children: [_jsx(IconSearch, { size: 16, className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" }), _jsx("input", { type: "text", placeholder: searctInputPlaceHolder, value: searchQuery, onChange: onSearch, onKeyDown: handleSearchKeyDown, "aria-label": "Search", className: cn('h-9 w-full rounded-md border border-border bg-background pl-9 pr-3 text-sm text-foreground', 'placeholder:text-muted-foreground', 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50') })] })), filters.map((filter) => {
+    return (_jsxs(FilterWrapper, { isNarrow: isNarrow, children: [_jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-2", children: [showSearch && (_jsxs("div", { className: "relative w-full sm:w-[300px]", children: [_jsx(IconSearch, { size: 16, className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" }), _jsx("input", { type: "text", placeholder: searctInputPlaceHolder, value: searchQuery, onChange: onSearch, onKeyDown: handleSearchKeyDown, "aria-label": "Search", className: cn('h-9 w-full rounded-md border border-border bg-background pl-9 pr-3 text-sm text-foreground', 'placeholder:text-muted-foreground', 'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring', 'disabled:cursor-not-allowed disabled:opacity-50') })] })), filters.map((filter) => {
                         const { name, type, options } = filter;
                         const value = selectedFilters[name];
                         const renderFilterInput = () => {
@@ -71,6 +71,6 @@ const FilterComponent = ({ filters, selectedFilters, showApplyFilterButton = tru
                             return (_jsxs(Select, { value: currentValue || undefined, onValueChange: (val) => handleFilterChange(name, val === '__clear__' ? '' : val), children: [_jsx(SelectTrigger, { className: "h-9 w-full border-border bg-background text-sm text-foreground", "aria-label": filter.placeholder ?? name, children: _jsx(SelectValue, { placeholder: filter.placeholder ?? `Select ${name}` }) }), _jsxs(SelectContent, { children: [currentValue && (_jsx(SelectItem, { value: "__clear__", className: "text-muted-foreground", children: filter.placeholder ?? 'All' })), (options ?? []).map((opt) => (_jsx(SelectItem, { value: opt.value, children: opt.label }, opt.value)))] })] }));
                         };
                         return (_jsx("div", { className: "w-full sm:w-[240px]", children: renderFilterInput() }, name));
-                    }), showApplyFilterButton && shouldShowActionButtons && (_jsx(Button, { onClick: handleApplyFilters, variant: "primary", className: "w-full sm:w-auto", style: { height: 36 }, tabIndex: 0, "aria-label": "Apply Filters", children: "Apply Filters" })), showClearFilters && shouldShowActionButtons && (_jsx(Button, { onClick: resetFilters, variant: "outline-primary", className: "w-full sm:w-auto", style: { height: 36 }, tabIndex: 0, "aria-label": "Clear Filters", children: "Clear Filters" }))] }), children] }));
+                    }), showApplyFilterButton && shouldShowActionButtons && (_jsx(Button, { onClick: handleApplyFilters, variant: "primary", className: "w-full sm:w-auto", style: { height: 36 }, tabIndex: 0, "aria-label": "Apply Filters", children: "Apply Filters" })), showClearFilters && shouldShowActionButtons && (_jsx(Button, { onClick: resetFilters, variant: "outline-primary", className: "w-full sm:w-auto", style: { height: 36 }, tabIndex: 0, "aria-label": "Clear Filters", children: "Clear Filters" }))] }), _jsx("div", { className: "ml-auto flex flex-wrap items-center justify-end gap-2", children: children })] }));
 };
 export default FilterComponent;

package/lib/components/ui/FilterWrapper.js

@@ -1,7 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 const FilterWrapper = ({ isNarrow, children }) => {
-    return (_jsx("div", { className: "bg-card shadow-xl rounded-lg p-4 mb-2", children: _jsx("div", { className: isNarrow
-                ? 'flex flex-col w-full space-y-4'
-                : 'flex flex-row justify-between items-start w-full space-y-0 space-x-0 sm:space-x-4', children: children }) }));
+    return (_jsx("div", { className: "bg-card shadow-xl rounded-lg p-4 mb-2", children: _jsx("div", { className: isNarrow ? 'flex flex-col w-full gap-3' : 'flex items-start justify-between gap-4 w-full', children: children }) }));
 };
 export default FilterWrapper;

package/lib/components/ui/StatusCell.js

@@ -4,6 +4,6 @@ function StatusCell({ displayValue, className = '', icon }) {
     if (icon) {
         return (_jsxs("span", { className: `inline-flex items-center gap-1.5 pl-2.5 pr-3 ${baseClass} ${className}`.trim(), children: [icon, displayValue] }));
     }
-    return _jsx("span", { className: `px-4 ${baseClass} ${className}`.trim(), children: displayValue });
+    return _jsx("span", { className: `inline-block px-4 ${baseClass} ${className}`.trim(), children: displayValue });
 }
 export default StatusCell;

package/lib/pagamio-table/data-table/Defaults.js

@@ -19,11 +19,24 @@ export function getDefaultTableOptions() {
         enableStickyHeader: true,
         enableTopToolbar: false,
         enableBottomToolbar: true,
+        // ── Layout: columns fill the row width, no horizontal scroll, no gaps ──
+        layoutMode: 'grid',
+        defaultColumn: {
+            minSize: 60,
+            size: 180,
+            grow: true,
+        },
         // ── Brand styling ──
         mantineTableContainerProps: {
             style: {
                 border: 'transparent',
                 borderRadius: '4px',
+                overflowX: 'hidden',
+            },
+        },
+        mantineTableProps: {
+            style: {
+                width: '100%',
             },
         },
         mantineLoadingOverlayProps: {

package/lib/pagamio-table/data-table/index.js

@@ -3,6 +3,7 @@ import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
 import { HiPlusSm } from 'react-icons/hi';
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { FilterComponent, IconButton } from '../../components';
+import { cn } from '../../helpers';
 import { useMediaQueries } from '../../shared';
 import { getDefaultTableOptions } from './Defaults';
 import ExportDropdown from './ExportButton';
@@ -16,12 +17,54 @@ function isInteractiveTarget(target) {
         !!target.closest('[data-mantine-stop-propagation]') ||
         !!target.closest('.mantine-ActionIcon-root'));
 }
-/** Applies the `showHeader: false` column config (hides header visually). */
+/**
+ * Auto-size buckets based on column id/accessor key.
+ * Consumer can always override by setting `size` explicitly on the column.
+ *
+ * Buckets:
+ *   - tiny  (60):  qty, count, position, index
+ *   - small (90):  total, price, amount, balance, fee, rate, percent, date, time
+ *   - medium (140): status, type, role, category, unit, sku, code, currency, country
+ *   - actions (110): the actions column
+ *   - large (220): name, description, address, email, message, label, title, product
+ *   - default (160): everything else
+ */
+const TINY_PATTERNS = /^(qty|quantity|count|position|order|index|no|num|number)$/i;
+const SMALL_PATTERNS = /(total|price|amount|balance|fee|rate|percent|created|updated|deleted|date|time|expires|due)/i;
+const STATUS_PATTERNS = /(status|state)$/i;
+const MEDIUM_PATTERNS = /^(type|role|category|unit|sku|code|currency|country|method|source|kind)$/i;
+const LARGE_PATTERNS = /(name|description|address|email|message|label|title|product|item|note)/i;
+function inferColumnSize(id) {
+    if (id === 'actions')
+        return 110;
+    if (TINY_PATTERNS.test(id))
+        return 60;
+    if (STATUS_PATTERNS.test(id))
+        return 200;
+    if (MEDIUM_PATTERNS.test(id))
+        return 140;
+    if (SMALL_PATTERNS.test(id))
+        return 90;
+    if (LARGE_PATTERNS.test(id))
+        return 220;
+    return 160;
+}
+/**
+ * Applies the `showHeader: false` column config and auto-sizes columns.
+ * Inferred size is treated as a minimum — any explicit `col.size` is honoured
+ * only if it is at least the inferred minimum. This guarantees columns like
+ * `status` always have enough room for their chips even if a consumer hardcoded
+ * a too-narrow size.
+ */
 function processColumns(columns) {
     return columns.map((col) => {
-        if (col.showHeader === false) {
+        const id = (col.id ?? col.accessorKey ?? '');
+        const inferred = inferColumnSize(id);
+        const finalSize = col.size === undefined ? inferred : Math.max(col.size, inferred);
+        const sized = { ...col, size: finalSize };
+        if (sized.showHeader === false) {
             return {
-                ...col,
+                ...sized,
                 header: '',
                 enableSorting: false,
                 enableColumnFilter: false,
@@ -31,7 +74,7 @@ function processColumns(columns) {
                 },
             };
         }
-        return col;
+        return sized;
     });
 }
 /** Maps BaseFilter[] to FilterComponent's FilterDefinition[]. */
@@ -57,7 +100,8 @@ function CustomToolbar({ filters, appliedFilters, onFilterChange, onApply, onCle
             else {
                 handleFilter(name, value);
             }
-        }, handleApplyFilters: onApply, resetFilters: onClearFilters ?? (() => { }), showSearch: searchEnabled, searchQuery: searchQuery, onSearch: onSearch, isNarrow: isNarrow, children: _jsxs("div", { className: isNarrow ? 'flex flex-col items-stretch space-y-2 pt-5' : 'flex items-center flex-wrap gap-2', children: [exportConfig?.enabled && (_jsx("div", { className: isNarrow ? 'w-full' : 'flex-grow', children: _jsx(ExportDropdown, { containerClassName: "w-full", columns: columns, data: data, buttonClassName: "h-10", extraOptions: exportConfig.extraOptions, pdfOptions: exportConfig.pdf, xlsxOptions: exportConfig.xlsx, csvOptions: exportConfig.csv, exportAll: !!exportConfig.fetchAllData, fetchData: exportConfig.fetchAllData, enableEmailExport: !!exportConfig.email, emailExportApiUrl: exportConfig.email?.apiUrl, onEmailExportSuccess: exportConfig.email?.onSuccess, onEmailExportError: exportConfig.email?.onError }) })), addButton && (_jsx("div", { className: isNarrow ? 'w-full' : 'flex-grow', children: typeof addButton === 'boolean' ? (_jsx(IconButton, { onClick: onAdd ?? (() => { }), icon: HiPlusSm, label: "add-new-entry", className: "items-center w-full text-nowrap", children: addText ?? 'Add New Entry' })) : (addButton) }))] }) }));
+        }, handleApplyFilters: onApply, resetFilters: onClearFilters ?? (() => { }), showSearch: searchEnabled, searchQuery: searchQuery, onSearch: onSearch, isNarrow: isNarrow, children: _jsxs("div", { className: "flex flex-wrap items-center justify-end gap-2", children: [exportConfig?.enabled && (_jsx(ExportDropdown, { containerClassName: isNarrow ? 'w-full' : undefined, columns: columns, data: data, buttonClassName: "h-10", extraOptions: exportConfig.extraOptions, pdfOptions: exportConfig.pdf, xlsxOptions: exportConfig.xlsx, csvOptions: exportConfig.csv, exportAll: !!exportConfig.fetchAllData, fetchData: exportConfig.fetchAllData, enableEmailExport: !!exportConfig.email, emailExportApiUrl: exportConfig.email?.apiUrl, onEmailExportSuccess: exportConfig.email?.onSuccess, onEmailExportError: exportConfig.email?.onError })), addButton &&
+                    (typeof addButton === 'boolean' ? (_jsx(IconButton, { onClick: onAdd ?? (() => { }), icon: HiPlusSm, label: "add-new-entry", className: cn('items-center text-nowrap', isNarrow ? 'w-full' : undefined), children: addText ?? 'Add New Entry' })) : (addButton))] }) }));
 }
 // ─── PagamioTable Component ──────────────────────────────────────────
 const PagamioTable = ({ columns, data, isLoading = false, rowCount, sorting, pagination, filtering, search, onRowClick, rowClassName, expandable = false, renderDetailPanel, toolbar, toolbarMode = 'custom', enableColumnResizing, enableColumnPinning, enableColumnOrdering, enableColumnFilters, enableHiding, enableRowSelection, enableRowActions, enableRowVirtualization, enableGrouping, enableEditing, enableDensityToggle, enableFullScreenToggle, enableClickToCopy, enableRowNumbers, enableMultiSort, enableStickyHeader, enableStickyFooter, editDisplayMode, onEditingRowSave, onEditingRowCancel, renderRowActions, renderRowActionMenuItems, positionActionsColumn, renderTopToolbarCustomActions, renderBottomToolbarCustomActions, layoutMode, defaultColumn, mantineTableOptions, }) => {
@@ -191,15 +235,17 @@ const PagamioTable = ({ columns, data, isLoading = false, rowCount, sorting, pag
         // Custom MRT toolbar actions
         ...(renderTopToolbarCustomActions && { renderTopToolbarCustomActions }),
         ...(renderBottomToolbarCustomActions && { renderBottomToolbarCustomActions }),
-        // Layout
-        ...(layoutMode && { layoutMode }),
-        ...(defaultColumn && { defaultColumn }),
+        // Layout — columns fill row, no horizontal scroll
+        layoutMode: layoutMode ?? defaults.layoutMode,
+        defaultColumn: defaultColumn ?? defaults.defaultColumn,
         mantineTableContainerProps: {
             style: {
                 border: 'transparent',
                 borderRadius: '4px',
+                overflowX: 'hidden',
             },
         },
+        mantineTableProps: defaults.mantineTableProps,
         // Row interaction styling
         mantineTableBodyRowProps: ({ row }) => ({
             onClick: onRowClick ? (event) => handleRowClick(row, event) : undefined,

package/lib/styles.css

@@ -893,9 +893,6 @@ video {
 .col-span-9 {
   grid-column: span 9 / span 9;
 }
-.col-span-full {
-  grid-column: 1 / -1;
-}
 .-m-1\.5 {
   margin: -0.375rem;
 }
@@ -977,6 +974,9 @@ video {
 .mb-0 {
   margin-bottom: 0px;
 }
+.mb-0\.5 {
+  margin-bottom: 0.125rem;
+}
 .mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -1557,6 +1557,9 @@ video {
 .flex-grow {
   flex-grow: 1;
 }
+.grow {
+  flex-grow: 1;
+}
 .border-collapse {
   border-collapse: collapse;
 }
@@ -1777,9 +1780,6 @@ video {
 .items-baseline {
   align-items: baseline;
 }
-.items-stretch {
-  align-items: stretch;
-}
 .justify-start {
   justify-content: flex-start;
 }
@@ -1834,9 +1834,16 @@ video {
   -moz-column-gap: 1rem;
        column-gap: 1rem;
 }
+.gap-x-6 {
+  -moz-column-gap: 1.5rem;
+       column-gap: 1.5rem;
+}
 .gap-y-2 {
   row-gap: 0.5rem;
 }
+.gap-y-4 {
+  row-gap: 1rem;
+}
 .-space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(-1rem * var(--tw-space-x-reverse));
@@ -1847,11 +1854,6 @@ video {
   margin-right: calc(-1px * var(--tw-space-x-reverse));
   margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
 }
-.space-x-0 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(0px * var(--tw-space-x-reverse));
-  margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
-}
 .space-x-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(0.25rem * var(--tw-space-x-reverse));
@@ -6939,6 +6941,10 @@ video {
     display: none;
   }
 
+  .xl\:grid-cols-4 {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
   .xl\:grid-cols-6 {
     grid-template-columns: repeat(6, minmax(0, 1fr));
   }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.312",
+  "version": "0.8.313",
   "publishConfig": {
     "access": "public",
     "provenance": false