@pagamio/frontend-commons-lib 0.8.319 → 0.8.320

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MantineReactTable, useMantineReactTable } from 'mantine-react-table';
 import { HiPlusSm } from 'react-icons/hi';
-import { useMemo, useRef, useState } from 'react';
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { FilterComponent, IconButton } from '../../components';
 import { cn } from '../../helpers';
 import { useMediaQueries } from '../../shared';
@@ -104,18 +104,81 @@ function CustomToolbar({ filters, appliedFilters, onFilterChange, onApply, onCle
 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, }) => {
     const [expanded, setExpanded] = useState({});
     const tableRef = useRef(null);
-    // Note: previously this component force-applied
-    //   max-height: calc(100vh - {tableTop + 68}px)
-    // to the inner mantine table container. That produced a "squeezed" table
-    // whenever the table sat below other content (e.g. nested in tabs on the
-    // event details page) — the table's own top was already far down the
-    // viewport, so the leftover max-height was tiny and only ~3 rows showed
-    // before an internal scroll kicked in.
+    // ── Internal max-height ─────────────────────────────────────────────
+    // The mantine table container is height-capped to `viewportHeight - tableTop`
+    // so that the table is the only scrolling element when its parent layout
+    // is fixed (page header + sidebar stay put). Without this, large datasets
+    // would push the page itself into a scroll, breaking the toolbar/header
+    // sticky behaviour that the rest of the app relies on.
     //
-    // We now let the table render its natural height. Pagination caps the row
-    // count, and the parent route layout already scrolls when the page is
-    // taller than the viewport, so the user gets one continuous scroll instead
-    // of a nested mini-scroll.
+    // Bottom margin reserves space for the bottom toolbar (pagination, ~52px)
+    // plus a small gap so the table doesn't sit flush against page edges.
+    const TABLE_BOTTOM_MARGIN = 68;
+    /**
+     * Walk up the DOM looking for the closest scrollable ancestor (i.e. an
+     * element with overflow-y: auto/scroll AND scrollHeight > clientHeight).
+     * If we find one, the *page* is what's scrolling — we should NOT cap the
+     * table's height because that would create a confusing nested scroll
+     * (page scroll + table scroll). Returns true when the table itself
+     * should manage its own scroll.
+     */
+    const tableShouldOwnScroll = (el) => {
+        let node = el.parentElement;
+        while (node && node !== document.body) {
+            const style = window.getComputedStyle(node);
+            const overflowY = style.overflowY;
+            const isScrollable = (overflowY === 'auto' || overflowY === 'scroll') && node.scrollHeight > node.clientHeight + 1;
+            if (isScrollable)
+                return false;
+            node = node.parentElement;
+        }
+        return true;
+    };
+    const applyTableHeight = (el) => {
+        const mrtContainer = el.querySelector('.mrt-table-container');
+        if (!mrtContainer)
+            return;
+        // If a parent is already handling the scroll, let the table render at
+        // its natural height — the user gets one continuous page scroll.
+        if (!tableShouldOwnScroll(el)) {
+            mrtContainer.style.removeProperty('max-height');
+            return;
+        }
+        const containerTop = mrtContainer.getBoundingClientRect().top;
+        const newMax = Math.round(Math.max(240, window.innerHeight - containerTop - TABLE_BOTTOM_MARGIN));
+        const newMaxStr = `${newMax}px`;
+        // Skip the write if the value hasn't changed — avoids re-layout loops
+        // with ResizeObserver where mutating the cell's max-height would refire
+        // the observer on the next frame.
+        if (mrtContainer.style.maxHeight === newMaxStr)
+            return;
+        mrtContainer.style.setProperty('max-height', newMaxStr, 'important');
+    };
+    // Runs once on mount + whenever the *window* resizes. We deliberately do
+    // NOT run on every render or use a ResizeObserver on the document — both
+    // produce loop conditions: applyTableHeight mutates layout, which fires
+    // the observer, which calls applyTableHeight again. The window-resize
+    // signal is sufficient because tableTop changes during a render get
+    // re-applied by useLayoutEffect-on-mount when the table remounts.
+    useLayoutEffect(() => {
+        if (tableRef.current)
+            applyTableHeight(tableRef.current);
+    }, []);
+    useEffect(() => {
+        const el = tableRef.current;
+        if (!el)
+            return;
+        let frame = 0;
+        const handler = () => {
+            cancelAnimationFrame(frame);
+            frame = requestAnimationFrame(() => applyTableHeight(el));
+        };
+        window.addEventListener('resize', handler);
+        return () => {
+            cancelAnimationFrame(frame);
+            window.removeEventListener('resize', handler);
+        };
+    }, []);
     // Process columns (handle showHeader: false)
     const processedColumns = useMemo(() => processColumns(columns), [columns]);
     // Convert our SortConfig to MRT's SortingState

package/lib/styles.css

@@ -3889,14 +3889,25 @@ video {
   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. */
+/* MRT semantic mode column sizing.
+ *
+ * MRT inlines `width: calc(--col-X-size * 1px)` and
+ * `min-width: max(calc(--col-X-size * 1px), 50px)` on every cell. With
+ * `table-layout: auto`, those fixed values cause two problems:
+ *   1. Cells can't shrink below their min-width, leaving dead gaps when
+ *      content is short.
+ *   2. The combined widths can exceed the container, leaving a horizontal
+ *      gap on the right.
+ *
+ * We override both: cells get `width: auto` and `min-width: 0` so the
+ * browser sizes columns by content, then distributes remaining row space
+ * proportionally. `whiteSpace: normal` (set above) lets long content wrap
+ * instead of being crushed.
+ */
 .mantine-Table-table > thead > tr > .mantine-Table-th,
 .mantine-Table-table > tbody > tr > .mantine-Table-td {
   width: auto !important;
+  min-width: 0 !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.319",
+  "version": "0.8.320",
   "publishConfig": {
     "access": "public",
     "provenance": false