@mmlogic/components 0.5.11 → 0.5.12

package/dist/cjs/mrd-boolean-field_25.cjs.entry.js

@@ -6645,6 +6645,10 @@ const MrdTable = class {
         this.resizeObserver = null;
         /** Guards against scheduling more than one column-width measurement per freeze. */
         this.colWidthMeasureScheduled = false;
+        /** True once the header/totals widths have been checked against the current totals row. */
+        this.fixedContentMeasured = false;
+        /** Guards against scheduling more than one grow pass. */
+        this.growScheduled = false;
         /** Drag origin of the running column resize (null = no drag in progress). */
         this.resizeOrigin = null;
         /** True once the user has dragged (or auto-fitted) a column — see colWidthsUserSet usages. */
@@ -6739,6 +6743,7 @@ const MrdTable = class {
         this.colWidths = [];
         this.colWidthMeasureScheduled = false;
         this.colWidthsUserSet = false;
+        this.fixedContentMeasured = false;
     }
     // ── Lifecycle ──────────────────────────────────────────────────────────────
     componentWillLoad() {
@@ -6782,6 +6787,7 @@ const MrdTable = class {
         this.colWidths = [];
         this.colWidthMeasureScheduled = false;
         this.colWidthsUserSet = false;
+        this.fixedContentMeasured = false;
         this.scrollTop = 0;
         this.renderStart = 0;
         // Always fill the visible viewport on init — totalElements may be stale from a
@@ -6855,6 +6861,8 @@ const MrdTable = class {
         if (data.total != null)
             this.aggregationsTotal = data.total;
         this.aggregations = data;
+        // Fresh totals can be wider than the ones the columns were checked against.
+        this.fixedContentMeasured = false;
     }
     // ── Lifecycle ──────────────────────────────────────────────────────────────
     disconnectedCallback() {
@@ -6885,6 +6893,7 @@ const MrdTable = class {
     }
     componentDidRender() {
         this.freezeColWidths();
+        this.growToFixedContent();
     }
     /** Freeze the column widths once the first data page has rendered.
      *
@@ -6938,6 +6947,38 @@ const MrdTable = class {
         const content = scrollWidth > clientWidth ? scrollWidth + paddingRight : clientWidth;
         return Math.ceil(content + borders);
     }
+    /** Width a header cell needs, measured from its children instead of the cell's own
+     *  scrollWidth. A header is not just text: it holds the label plus a sort icon (and a filter
+     *  icon once the column is filtered), with the drag handle absolutely positioned on top of
+     *  the right padding. Summing the in-flow children makes the icons part of the width by
+     *  construction — and a child's own rect is never clipped by the header's `overflow: hidden`,
+     *  so it stays correct even when the header is already truncated on screen.
+     *  Returns 0 when nothing can be measured, so callers fall back to neededWidth(). */
+    neededHeaderWidth(th) {
+        const px = (v) => (typeof v === 'number' && Number.isFinite(v) ? v : 0);
+        const size = (v) => px(parseFloat(v || '0'));
+        const style = getComputedStyle(th);
+        const paddingLeft = size(style.paddingLeft);
+        const paddingRight = size(style.paddingRight);
+        const borders = Math.max(0, px(th.offsetWidth) - px(th.clientWidth));
+        let inflow = 0;
+        let handle = 0;
+        Array.from(th.children).forEach(child => {
+            const el = child;
+            const cs = getComputedStyle(el);
+            const width = px(el.getBoundingClientRect().width) + size(cs.marginLeft) + size(cs.marginRight);
+            // The drag handle is absolutely positioned: it takes no room in the flow, it overlays it.
+            if (cs.position === 'absolute')
+                handle = Math.max(handle, width);
+            else
+                inflow += width;
+        });
+        if (inflow <= 0)
+            return 0;
+        // The handle sits over the right padding; only reserve what would stick out past it,
+        // so the label never ends up underneath the grab area.
+        return Math.ceil(inflow + paddingLeft + paddingRight + Math.max(0, handle - paddingRight) + borders);
+    }
     /** Width each column needs for its header and its rendered page-0 cells — what the columns
      *  are locked to, so they never end up narrower than their content.
      *
@@ -6951,11 +6992,11 @@ const MrdTable = class {
         if (ths.length === 0 || ths.length !== this.columns.length)
             return null;
         const needed = Array.from(ths).map((th, idx) => {
-            let widest = this.neededWidth(th);
+            let widest = Math.max(this.neededWidth(th), this.neededHeaderWidth(th));
             // .mrd-table__cell only matches real data cells — the shimmer/retry rows render a single
             // colSpan cell (without that class) which would measure as the full table width.
             this.el
-                .querySelectorAll(`.mrd-table__cell:nth-child(${idx + 1})`)
+                .querySelectorAll(this.columnCellSelector(idx))
                 .forEach(cell => { widest = Math.max(widest, this.neededWidth(cell)); });
             return widest;
         });
@@ -6965,6 +7006,50 @@ const MrdTable = class {
             return null;
         return needed.map(w => Math.min(Math.max(w, MIN_COL_WIDTH), MAX_AUTOFIT_WIDTH));
     }
+    /** Data and totals cells of one column. The totals row is included everywhere the data
+     *  cells are: it is fixed, always-visible content, so it must never be clipped. */
+    columnCellSelector(idx) {
+        return `.mrd-table__cell:nth-child(${idx + 1}), .mrd-table__totals-cell:nth-child(${idx + 1})`;
+    }
+    /** Width the header and totals cells of each column need. Null when nothing has a box. */
+    measureFixedContentWidths() {
+        const ths = this.el.querySelectorAll('.mrd-table__header');
+        if (ths.length === 0 || ths.length !== this.columns.length)
+            return null;
+        const needed = Array.from(ths).map((th, idx) => {
+            let widest = Math.max(this.neededWidth(th), this.neededHeaderWidth(th));
+            this.el
+                .querySelectorAll(`.mrd-table__totals-cell:nth-child(${idx + 1})`)
+                .forEach(cell => { widest = Math.max(widest, this.neededWidth(cell)); });
+            return widest;
+        });
+        return needed.every(w => w <= 0) ? null : needed;
+    }
+    /** Widen columns whose header or totals cell does not fit. Data cells may be ellipsised —
+     *  that is what the lock is for — but the header and the totals row are fixed content that
+     *  is always on screen, so clipping them just hides information with no way to reveal it.
+     *
+     *  It runs as a second pass because the totals only arrive with setAggregations(), long
+     *  after the widths were frozen on page 0. Grow-only and once per totals change, so it can
+     *  never turn into the per-page re-proportioning the lock exists to prevent. Hand-set
+     *  widths are left alone. */
+    growToFixedContent() {
+        if (this.colWidths.length === 0 || this.colWidthsUserSet || this.fixedContentMeasured || this.growScheduled)
+            return;
+        this.growScheduled = true;
+        index.writeTask(() => {
+            this.growScheduled = false;
+            if (this.colWidths.length === 0 || this.colWidthsUserSet)
+                return;
+            const needed = this.measureFixedContentWidths();
+            if (!needed)
+                return;
+            this.fixedContentMeasured = true;
+            const grown = this.colWidths.map((w, i) => Math.min(Math.max(w, needed[i]), MAX_AUTOFIT_WIDTH));
+            if (grown.some((w, i) => w !== this.colWidths[i]))
+                this.colWidths = grown;
+        });
+    }
     /** Re-reads the rendered header widths into colWidths so a drag starts from what is
      *  actually on screen — and locks the columns if they weren't locked yet.
      *
@@ -7023,9 +7108,14 @@ const MrdTable = class {
             return;
         // .mrd-table__cell only matches real data cells — the shimmer/retry rows render a single
         // colSpan cell (without that class) which would otherwise measure as the full table width.
-        const cells = this.el.querySelectorAll(`.mrd-table__header:nth-child(${idx + 1}), .mrd-table__cell:nth-child(${idx + 1})`);
+        const cells = this.el.querySelectorAll(`.mrd-table__header:nth-child(${idx + 1}), ${this.columnCellSelector(idx)}`);
         let widest = 0;
-        cells.forEach(cell => { widest = Math.max(widest, this.neededWidth(cell)); });
+        cells.forEach(cell => {
+            const needed = cell.classList.contains('mrd-table__header')
+                ? Math.max(this.neededWidth(cell), this.neededHeaderWidth(cell))
+                : this.neededWidth(cell);
+            widest = Math.max(widest, needed);
+        });
         if (widest > 0)
             this.setColWidth(idx, Math.min(widest, MAX_AUTOFIT_WIDTH));
     }

package/dist/collection/components/table/mrd-table/mrd-table.js

@@ -31,6 +31,10 @@ export class MrdTable {
         this.resizeObserver = null;
         /** Guards against scheduling more than one column-width measurement per freeze. */
         this.colWidthMeasureScheduled = false;
+        /** True once the header/totals widths have been checked against the current totals row. */
+        this.fixedContentMeasured = false;
+        /** Guards against scheduling more than one grow pass. */
+        this.growScheduled = false;
         /** Drag origin of the running column resize (null = no drag in progress). */
         this.resizeOrigin = null;
         /** True once the user has dragged (or auto-fitted) a column — see colWidthsUserSet usages. */
@@ -125,6 +129,7 @@ export class MrdTable {
         this.colWidths = [];
         this.colWidthMeasureScheduled = false;
         this.colWidthsUserSet = false;
+        this.fixedContentMeasured = false;
     }
     // ── Lifecycle ──────────────────────────────────────────────────────────────
     componentWillLoad() {
@@ -168,6 +173,7 @@ export class MrdTable {
         this.colWidths = [];
         this.colWidthMeasureScheduled = false;
         this.colWidthsUserSet = false;
+        this.fixedContentMeasured = false;
         this.scrollTop = 0;
         this.renderStart = 0;
         // Always fill the visible viewport on init — totalElements may be stale from a
@@ -241,6 +247,8 @@ export class MrdTable {
         if (data.total != null)
             this.aggregationsTotal = data.total;
         this.aggregations = data;
+        // Fresh totals can be wider than the ones the columns were checked against.
+        this.fixedContentMeasured = false;
     }
     // ── Lifecycle ──────────────────────────────────────────────────────────────
     disconnectedCallback() {
@@ -271,6 +279,7 @@ export class MrdTable {
     }
     componentDidRender() {
         this.freezeColWidths();
+        this.growToFixedContent();
     }
     /** Freeze the column widths once the first data page has rendered.
      *
@@ -324,6 +333,38 @@ export class MrdTable {
         const content = scrollWidth > clientWidth ? scrollWidth + paddingRight : clientWidth;
         return Math.ceil(content + borders);
     }
+    /** Width a header cell needs, measured from its children instead of the cell's own
+     *  scrollWidth. A header is not just text: it holds the label plus a sort icon (and a filter
+     *  icon once the column is filtered), with the drag handle absolutely positioned on top of
+     *  the right padding. Summing the in-flow children makes the icons part of the width by
+     *  construction — and a child's own rect is never clipped by the header's `overflow: hidden`,
+     *  so it stays correct even when the header is already truncated on screen.
+     *  Returns 0 when nothing can be measured, so callers fall back to neededWidth(). */
+    neededHeaderWidth(th) {
+        const px = (v) => (typeof v === 'number' && Number.isFinite(v) ? v : 0);
+        const size = (v) => px(parseFloat(v || '0'));
+        const style = getComputedStyle(th);
+        const paddingLeft = size(style.paddingLeft);
+        const paddingRight = size(style.paddingRight);
+        const borders = Math.max(0, px(th.offsetWidth) - px(th.clientWidth));
+        let inflow = 0;
+        let handle = 0;
+        Array.from(th.children).forEach(child => {
+            const el = child;
+            const cs = getComputedStyle(el);
+            const width = px(el.getBoundingClientRect().width) + size(cs.marginLeft) + size(cs.marginRight);
+            // The drag handle is absolutely positioned: it takes no room in the flow, it overlays it.
+            if (cs.position === 'absolute')
+                handle = Math.max(handle, width);
+            else
+                inflow += width;
+        });
+        if (inflow <= 0)
+            return 0;
+        // The handle sits over the right padding; only reserve what would stick out past it,
+        // so the label never ends up underneath the grab area.
+        return Math.ceil(inflow + paddingLeft + paddingRight + Math.max(0, handle - paddingRight) + borders);
+    }
     /** Width each column needs for its header and its rendered page-0 cells — what the columns
      *  are locked to, so they never end up narrower than their content.
      *
@@ -337,11 +378,11 @@ export class MrdTable {
         if (ths.length === 0 || ths.length !== this.columns.length)
             return null;
         const needed = Array.from(ths).map((th, idx) => {
-            let widest = this.neededWidth(th);
+            let widest = Math.max(this.neededWidth(th), this.neededHeaderWidth(th));
             // .mrd-table__cell only matches real data cells — the shimmer/retry rows render a single
             // colSpan cell (without that class) which would measure as the full table width.
             this.el
-                .querySelectorAll(`.mrd-table__cell:nth-child(${idx + 1})`)
+                .querySelectorAll(this.columnCellSelector(idx))
                 .forEach(cell => { widest = Math.max(widest, this.neededWidth(cell)); });
             return widest;
         });
@@ -351,6 +392,50 @@ export class MrdTable {
             return null;
         return needed.map(w => Math.min(Math.max(w, MIN_COL_WIDTH), MAX_AUTOFIT_WIDTH));
     }
+    /** Data and totals cells of one column. The totals row is included everywhere the data
+     *  cells are: it is fixed, always-visible content, so it must never be clipped. */
+    columnCellSelector(idx) {
+        return `.mrd-table__cell:nth-child(${idx + 1}), .mrd-table__totals-cell:nth-child(${idx + 1})`;
+    }
+    /** Width the header and totals cells of each column need. Null when nothing has a box. */
+    measureFixedContentWidths() {
+        const ths = this.el.querySelectorAll('.mrd-table__header');
+        if (ths.length === 0 || ths.length !== this.columns.length)
+            return null;
+        const needed = Array.from(ths).map((th, idx) => {
+            let widest = Math.max(this.neededWidth(th), this.neededHeaderWidth(th));
+            this.el
+                .querySelectorAll(`.mrd-table__totals-cell:nth-child(${idx + 1})`)
+                .forEach(cell => { widest = Math.max(widest, this.neededWidth(cell)); });
+            return widest;
+        });
+        return needed.every(w => w <= 0) ? null : needed;
+    }
+    /** Widen columns whose header or totals cell does not fit. Data cells may be ellipsised —
+     *  that is what the lock is for — but the header and the totals row are fixed content that
+     *  is always on screen, so clipping them just hides information with no way to reveal it.
+     *
+     *  It runs as a second pass because the totals only arrive with setAggregations(), long
+     *  after the widths were frozen on page 0. Grow-only and once per totals change, so it can
+     *  never turn into the per-page re-proportioning the lock exists to prevent. Hand-set
+     *  widths are left alone. */
+    growToFixedContent() {
+        if (this.colWidths.length === 0 || this.colWidthsUserSet || this.fixedContentMeasured || this.growScheduled)
+            return;
+        this.growScheduled = true;
+        writeTask(() => {
+            this.growScheduled = false;
+            if (this.colWidths.length === 0 || this.colWidthsUserSet)
+                return;
+            const needed = this.measureFixedContentWidths();
+            if (!needed)
+                return;
+            this.fixedContentMeasured = true;
+            const grown = this.colWidths.map((w, i) => Math.min(Math.max(w, needed[i]), MAX_AUTOFIT_WIDTH));
+            if (grown.some((w, i) => w !== this.colWidths[i]))
+                this.colWidths = grown;
+        });
+    }
     /** Re-reads the rendered header widths into colWidths so a drag starts from what is
      *  actually on screen — and locks the columns if they weren't locked yet.
      *
@@ -409,9 +494,14 @@ export class MrdTable {
             return;
         // .mrd-table__cell only matches real data cells — the shimmer/retry rows render a single
         // colSpan cell (without that class) which would otherwise measure as the full table width.
-        const cells = this.el.querySelectorAll(`.mrd-table__header:nth-child(${idx + 1}), .mrd-table__cell:nth-child(${idx + 1})`);
+        const cells = this.el.querySelectorAll(`.mrd-table__header:nth-child(${idx + 1}), ${this.columnCellSelector(idx)}`);
         let widest = 0;
-        cells.forEach(cell => { widest = Math.max(widest, this.neededWidth(cell)); });
+        cells.forEach(cell => {
+            const needed = cell.classList.contains('mrd-table__header')
+                ? Math.max(this.neededWidth(cell), this.neededHeaderWidth(cell))
+                : this.neededWidth(cell);
+            widest = Math.max(widest, needed);
+        });
         if (widest > 0)
             this.setColWidth(idx, Math.min(widest, MAX_AUTOFIT_WIDTH));
     }