@pagamio/frontend-commons-lib 0.8.313 → 0.8.315

package/lib/components/ui/Button.js

@@ -26,7 +26,7 @@ const sizeStyles = {
 const Spinner = () => (_jsxs("svg", { className: "mr-2 h-4 w-4 animate-spin", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), _jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z" })] }));
 const Button = React.forwardRef(({ className, variant = 'primary', size = 'default', asChild = false, href, pill = false, loading = false, fullWidth = false, disabled = false, children, ...props }, ref) => {
     const isDisabled = disabled || loading;
-    const baseStyles = 'inline-flex items-center justify-center font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50';
+    const baseStyles = 'inline-flex items-center justify-center gap-2 font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50';
     const classes = cn(baseStyles, variantStyles[variant], sizeStyles[size], pill ? 'rounded-full' : 'rounded-md', fullWidth && 'w-full', loading && 'cursor-wait', isDisabled && !loading && 'bg-gray-400 text-white cursor-not-allowed', className);
     // Render as <a> when href is provided
     if (href) {

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

@@ -19,11 +19,15 @@ export function getDefaultTableOptions() {
         enableStickyHeader: true,
         enableTopToolbar: false,
         enableBottomToolbar: true,
+        // ── Density: compact rows by default (per MRT v2 docs) ──
+        initialState: { density: 'xs' },
         // ── Layout: columns fill the row width, no horizontal scroll, no gaps ──
+        // In `grid` mode, leftover row width is distributed proportionally to
+        // each column's `size`, so larger columns naturally get more room.
         layoutMode: 'grid',
         defaultColumn: {
-            minSize: 60,
-            size: 180,
+            minSize: 50,
+            size: 140,
             grow: true,
         },
         // ── Brand styling ──

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

@@ -20,14 +20,11 @@ function isInteractiveTarget(target) {
 /**
  * Auto-size buckets based on column id/accessor key.
  * Consumer can always override by setting `size` explicitly on the column.
+ * Per MRT v2 docs, in `grid` layoutMode columns share leftover width
+ * proportionally to `size` — bigger size = bigger share of row.
  *
- * 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
+ * Pinned columns (`grow: false`) stay at their fixed pixel size and don't
+ * eat extra space, so the flexible columns get the slack instead.
  */
 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;
@@ -36,18 +33,18 @@ const MEDIUM_PATTERNS = /^(type|role|category|unit|sku|code|currency|country|met
 const LARGE_PATTERNS = /(name|description|address|email|message|label|title|product|item|note)/i;
 function inferColumnSize(id) {
     if (id === 'actions')
-        return 110;
+        return { size: 100, grow: false };
     if (TINY_PATTERNS.test(id))
-        return 60;
+        return { size: 60, grow: false };
     if (STATUS_PATTERNS.test(id))
-        return 200;
-    if (MEDIUM_PATTERNS.test(id))
-        return 140;
+        return { size: 170, grow: true };
     if (SMALL_PATTERNS.test(id))
-        return 90;
+        return { size: 90, grow: false };
+    if (MEDIUM_PATTERNS.test(id))
+        return { size: 130, grow: true };
     if (LARGE_PATTERNS.test(id))
-        return 220;
-    return 160;
+        return { size: 200, grow: true };
+    return { size: 140, grow: true };
 }
 /**
  * Applies the `showHeader: false` column config and auto-sizes columns.
@@ -60,8 +57,10 @@ function processColumns(columns) {
     return columns.map((col) => {
         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 };
+        const finalSize = col.size === undefined ? inferred.size : Math.max(col.size, inferred.size);
+        const colWithGrow = col;
+        const finalGrow = colWithGrow.grow ?? inferred.grow;
+        const sized = { ...col, size: finalSize, grow: finalGrow };
         if (sized.showHeader === false) {
             return {
                 ...sized,
@@ -204,6 +203,17 @@ const PagamioTable = ({ columns, data, isLoading = false, rowCount, sorting, pag
         enableExpanding: expandable,
         renderDetailPanel,
         onExpandedChange: setExpanded,
+        // Force detail panel to span the entire row in grid layoutMode.
+        // The actual `width: var(--mrt-inner-width)` cap is overridden via global
+        // CSS in src/index.css — these inline styles complement that.
+        mantineDetailPanelProps: {
+            style: {
+                width: '100%',
+                maxWidth: '100%',
+                gridColumn: '1 / -1',
+                flex: '1 1 100%',
+            },
+        },
         // Toolbar visibility
         enableTopToolbar: usesMrtToolbar,
         enableBottomToolbar: hasServerPagination || defaults.enableBottomToolbar,
@@ -246,6 +256,23 @@ const PagamioTable = ({ columns, data, isLoading = false, rowCount, sorting, pag
             },
         },
         mantineTableProps: defaults.mantineTableProps,
+        // Allow body cells to wrap their content instead of truncating with ellipsis.
+        mantineTableBodyCellProps: {
+            style: {
+                whiteSpace: 'normal',
+                overflow: 'visible',
+                textOverflow: 'clip',
+                wordBreak: 'break-word',
+            },
+        },
+        // Allow header cells to wrap too so long titles don't clip.
+        mantineTableHeadCellProps: {
+            style: {
+                whiteSpace: 'normal',
+                overflow: 'visible',
+                textOverflow: 'clip',
+            },
+        },
         // Row interaction styling
         mantineTableBodyRowProps: ({ row }) => ({
             onClick: onRowClick ? (event) => handleRowClick(row, event) : undefined,

package/lib/styles.css

@@ -3875,6 +3875,34 @@ video {
 .dark .apexcharts-xaxistooltip-bottom::after {
   border-bottom-color: hsl(var(--border)) !important;
 }
+
+/* ─────────────────────────────────────────────────────────────────
+   Mantine React Table — detail panel full-width override.
+   In `layoutMode: 'grid'`, MRT sets the cell width to
+   `var(--mrt-inner-width)` which equals the sum of column sizes.
+   Override it so the detail panel always spans the full row width,
+   and force the inner Collapse wrapper to fill the cell.
+   ───────────────────────────────────────────────────────────────── */
+.mantine-Table-td-detail-panel {
+  width: 100% !important;
+  max-width: 100% !important;
+}
+.mantine-Table-td-detail-panel > div {
+  width: 100%;
+}
+
+/* Ensure body cells wrap content instead of clipping in grid mode. */
+.mantine-Table-td {
+  white-space: normal !important;
+  overflow: visible !important;
+  text-overflow: clip !important;
+  word-break: break-word;
+}
+.mantine-Table-th {
+  white-space: normal !important;
+  overflow: visible !important;
+  text-overflow: clip !important;
+}
 .file\:-ms-4::file-selector-button {
   margin-inline-start: -1rem;
 }

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.313",
+  "version": "0.8.315",
   "publishConfig": {
     "access": "public",
     "provenance": false