@pagamio/frontend-commons-lib 0.8.316 → 0.8.317

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

@@ -24,11 +24,10 @@ export function getDefaultTableOptions() {
         // ── 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',
+        layoutMode: 'semantic',
         defaultColumn: {
             minSize: 50,
             size: 140,
-            grow: true,
         },
         // ── Brand styling ──
         mantineTableContainerProps: {
@@ -41,7 +40,10 @@ export function getDefaultTableOptions() {
         mantineTableProps: {
             style: {
                 width: '100%',
+                tableLayout: 'auto',
             },
+            verticalSpacing: 'xs',
+            horizontalSpacing: 'xs',
         },
         mantineLoadingOverlayProps: {
             children: _jsx(LoaderComponent, { size: "lg" }),

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

@@ -33,34 +33,32 @@ 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 { size: 130, grow: false };
+        return 130;
     if (TINY_PATTERNS.test(id))
-        return { size: 60, grow: false };
+        return 60;
     if (STATUS_PATTERNS.test(id))
-        return { size: 170, grow: true };
+        return 170;
     if (SMALL_PATTERNS.test(id))
-        return { size: 90, grow: false };
+        return 90;
     if (MEDIUM_PATTERNS.test(id))
-        return { size: 130, grow: true };
+        return 130;
     if (LARGE_PATTERNS.test(id))
-        return { size: 200, grow: true };
-    return { size: 140, grow: true };
+        return 200;
+    return 140;
 }
 /**
  * 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.
+ *
+ * Every column gets a compact pixel size based on its id/accessorKey. No
+ * column grows — `layoutMode: 'grid-no-grow'` ensures MRT auto-adds a spacer
+ * column to absorb any leftover row width, so columns stay reasonably sized
+ * regardless of viewport. Consumer-supplied `size` values are ignored to keep
+ * sizing consistent across the app.
  */
 function processColumns(columns) {
     return columns.map((col) => {
         const id = (col.id ?? col.accessorKey ?? '');
-        const inferred = inferColumnSize(id);
-        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 };
+        const sized = { ...col, size: inferColumnSize(id) };
         if (sized.showHeader === false) {
             return {
                 ...sized,
@@ -203,17 +201,6 @@ 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,

package/lib/styles.css

@@ -3876,22 +3876,7 @@ video {
   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. */
+/* Ensure body cells wrap content instead of clipping. */
 .mantine-Table-td {
   white-space: normal !important;
   overflow: visible !important;
@@ -3903,6 +3888,16 @@ video {
   overflow: visible !important;
   text-overflow: clip !important;
 }
+
+/* MRT semantic mode: the explicit `width: <n>px` on each cell prevents the
+   table from filling its container — leftover space becomes dead gap on the
+   right. Treat the inline width as a minimum hint instead by overriding it
+   to `auto`; the browser's table-layout: auto then distributes width based
+   on content + min-width while filling 100% of the table width. */
+.mantine-Table-table > thead > tr > .mantine-Table-th,
+.mantine-Table-table > tbody > tr > .mantine-Table-td {
+  width: auto !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.316",
+  "version": "0.8.317",
   "publishConfig": {
     "access": "public",
     "provenance": false