@mmlogic/components 0.5.9 → 0.5.11

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

@@ -6641,6 +6641,8 @@ const MrdTable = class {
         this.keydownHandler = null;
         this.createPickerClickHandler = null;
         this.viewPopoverClickHandler = null;
+        /** Watches the host for gaining a box (e.g. its tab pane being shown) — see componentDidLoad. */
+        this.resizeObserver = null;
         /** Guards against scheduling more than one column-width measurement per freeze. */
         this.colWidthMeasureScheduled = false;
         /** Drag origin of the running column resize (null = no drag in progress). */
@@ -6745,6 +6747,14 @@ const MrdTable = class {
     }
     componentDidLoad() {
         this.staleCheckTimer = setInterval(() => this.checkStalePages(), STALE_CHECK_INTERVAL_MS);
+        // A table inside a hidden tab pane renders and loads page 0 without ever having a box, so
+        // the width freeze cannot measure anything. ResizeObserver fires the moment the pane is
+        // shown (the host gains a box) — that is when the freeze gets its chance. componentDidRender
+        // is no help there: showing a sibling tab does not re-render this component.
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.freezeColWidths());
+            this.resizeObserver.observe(this.el);
+        }
     }
     // ── Helpers ────────────────────────────────────────────────────────────────
     applyDefaultSort(defaultSort) {
@@ -6848,6 +6858,10 @@ const MrdTable = class {
     }
     // ── Lifecycle ──────────────────────────────────────────────────────────────
     disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
         if (this.staleCheckTimer !== null) {
             clearInterval(this.staleCheckTimer);
             this.staleCheckTimer = null;
@@ -6870,28 +6884,35 @@ const MrdTable = class {
         }
     }
     componentDidRender() {
-        // Freeze header widths once the first data page has rendered. The measurement
-        // reads offsetWidth and writes the colWidths @State, which would trigger a
-        // re-render *during* the render cycle if done synchronously here. Defer it to a
-        // writeTask so the state mutation happens outside the render pass (avoids the
-        // Stencil "state/prop changed during rendering" warning and potential loops).
-        // NB: the freeze must not depend on the totalElements prop — hosts may omit it
-        // and rely on minKnownTotal, in which case the widths would never be locked and
-        // every incoming page would re-flow all columns.
-        if (this.colWidths.length === 0 &&
-            !this.colWidthMeasureScheduled &&
-            this.loadedPages.size > 0) {
-            this.colWidthMeasureScheduled = true;
-            index.writeTask(() => {
-                this.colWidthMeasureScheduled = false;
-                // Re-check: state may have changed (e.g. a reset) between scheduling and running.
-                if (this.colWidths.length !== 0)
-                    return;
-                const measured = this.measureColWidths();
-                if (measured)
-                    this.colWidths = measured;
-            });
-        }
+        this.freezeColWidths();
+    }
+    /** Freeze the column widths once the first data page has rendered.
+     *
+     *  The measurement reads layout and writes the colWidths @State, which would trigger a
+     *  re-render *during* the render cycle if done synchronously from componentDidRender. It is
+     *  deferred to a writeTask so the state mutation happens outside the render pass (avoids the
+     *  Stencil "state/prop changed during rendering" warning and potential loops).
+     *
+     *  NB: the freeze must not depend on the totalElements prop — hosts may omit it and rely on
+     *  minKnownTotal, in which case the widths would never be locked and every incoming page
+     *  would re-flow all columns. */
+    freezeColWidths() {
+        if (this.colWidths.length !== 0 || this.colWidthMeasureScheduled || this.loadedPages.size === 0)
+            return;
+        this.colWidthMeasureScheduled = true;
+        index.writeTask(() => {
+            var _a;
+            this.colWidthMeasureScheduled = false;
+            // Re-check: state may have changed (e.g. a reset) between scheduling and running.
+            if (this.colWidths.length !== 0)
+                return;
+            const measured = (_a = this.measureContentWidths()) !== null && _a !== void 0 ? _a : this.measureColWidths();
+            // A table inside a hidden tab pane (a tab page that is loaded but not shown) has no
+            // layout at all, so every measurement comes back 0. Locking those would pin every
+            // column at MIN_COL_WIDTH for good; wait for the ResizeObserver to report a real box.
+            if (measured && measured.some(w => w > 0))
+                this.colWidths = measured;
+        });
     }
     // ── Column resizing (drag the header border, Excel-style) ──────────────────
     /** Current rendered header widths, or null when they can't be trusted (header not laid out yet). */
@@ -6901,6 +6922,49 @@ const MrdTable = class {
             return null;
         return Array.from(ths).map(th => Math.round(th.getBoundingClientRect().width));
     }
+    /** Width one cell needs to show its content in full, borders included.
+     *  Read from scrollWidth rather than the laid-out box: cells clip with `overflow: hidden`,
+     *  so a squeezed cell reports the width it *was given*, not the width it needs. */
+    neededWidth(cell) {
+        // The layout metrics are absent in the mock DOM the specs run on; treat them as 0
+        // rather than letting a NaN poison the Math.max chain the callers build.
+        const px = (v) => (typeof v === 'number' && Number.isFinite(v) ? v : 0);
+        const clientWidth = px(cell.clientWidth);
+        const scrollWidth = px(cell.scrollWidth);
+        const paddingRight = px(parseFloat(getComputedStyle(cell).paddingRight || '0'));
+        const borders = Math.max(0, px(cell.offsetWidth) - clientWidth);
+        // scrollWidth drops the right padding once the content overflows the clipped box;
+        // when it fits, clientWidth is already the full padded box.
+        const content = scrollWidth > clientWidth ? scrollWidth + paddingRight : clientWidth;
+        return Math.ceil(content + 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.
+     *
+     *  Deliberately not the laid-out widths: with many columns the browser squeezes them to fit
+     *  the container instead of overflowing (the cells clip, so they no longer resist), which
+     *  cost the horizontal scrollbar. Locking the needed widths makes the summed table width
+     *  exceed the container again, and `.mrd-table__scroll` scrolls. Capped per column at
+     *  MAX_AUTOFIT_WIDTH so one outlier value can't blow up the layout — same cap as auto-fit. */
+    measureContentWidths() {
+        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 = this.neededWidth(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})`)
+                .forEach(cell => { widest = Math.max(widest, this.neededWidth(cell)); });
+            return widest;
+        });
+        // Nothing has a box: the table is in a hidden tab pane. Report "cannot measure" rather
+        // than clamping a row of zeroes up to MIN_COL_WIDTH, which would look like a real result.
+        if (needed.every(w => w <= 0))
+            return null;
+        return needed.map(w => Math.min(Math.max(w, MIN_COL_WIDTH), MAX_AUTOFIT_WIDTH));
+    }
     /** 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.
      *
@@ -6961,12 +7025,7 @@ const MrdTable = class {
         // 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})`);
         let widest = 0;
-        cells.forEach(cell => {
-            // scrollWidth is the untruncated content width; cells clip with overflow: hidden.
-            const style = getComputedStyle(cell);
-            const padding = parseFloat(style.paddingLeft || '0') + parseFloat(style.paddingRight || '0');
-            widest = Math.max(widest, cell.scrollWidth + padding);
-        });
+        cells.forEach(cell => { widest = Math.max(widest, this.neededWidth(cell)); });
         if (widest > 0)
             this.setColWidth(idx, Math.min(widest, MAX_AUTOFIT_WIDTH));
     }

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

@@ -27,6 +27,8 @@ export class MrdTable {
         this.keydownHandler = null;
         this.createPickerClickHandler = null;
         this.viewPopoverClickHandler = null;
+        /** Watches the host for gaining a box (e.g. its tab pane being shown) — see componentDidLoad. */
+        this.resizeObserver = null;
         /** Guards against scheduling more than one column-width measurement per freeze. */
         this.colWidthMeasureScheduled = false;
         /** Drag origin of the running column resize (null = no drag in progress). */
@@ -131,6 +133,14 @@ export class MrdTable {
     }
     componentDidLoad() {
         this.staleCheckTimer = setInterval(() => this.checkStalePages(), STALE_CHECK_INTERVAL_MS);
+        // A table inside a hidden tab pane renders and loads page 0 without ever having a box, so
+        // the width freeze cannot measure anything. ResizeObserver fires the moment the pane is
+        // shown (the host gains a box) — that is when the freeze gets its chance. componentDidRender
+        // is no help there: showing a sibling tab does not re-render this component.
+        if (typeof ResizeObserver !== 'undefined') {
+            this.resizeObserver = new ResizeObserver(() => this.freezeColWidths());
+            this.resizeObserver.observe(this.el);
+        }
     }
     // ── Helpers ────────────────────────────────────────────────────────────────
     applyDefaultSort(defaultSort) {
@@ -234,6 +244,10 @@ export class MrdTable {
     }
     // ── Lifecycle ──────────────────────────────────────────────────────────────
     disconnectedCallback() {
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
         if (this.staleCheckTimer !== null) {
             clearInterval(this.staleCheckTimer);
             this.staleCheckTimer = null;
@@ -256,28 +270,35 @@ export class MrdTable {
         }
     }
     componentDidRender() {
-        // Freeze header widths once the first data page has rendered. The measurement
-        // reads offsetWidth and writes the colWidths @State, which would trigger a
-        // re-render *during* the render cycle if done synchronously here. Defer it to a
-        // writeTask so the state mutation happens outside the render pass (avoids the
-        // Stencil "state/prop changed during rendering" warning and potential loops).
-        // NB: the freeze must not depend on the totalElements prop — hosts may omit it
-        // and rely on minKnownTotal, in which case the widths would never be locked and
-        // every incoming page would re-flow all columns.
-        if (this.colWidths.length === 0 &&
-            !this.colWidthMeasureScheduled &&
-            this.loadedPages.size > 0) {
-            this.colWidthMeasureScheduled = true;
-            writeTask(() => {
-                this.colWidthMeasureScheduled = false;
-                // Re-check: state may have changed (e.g. a reset) between scheduling and running.
-                if (this.colWidths.length !== 0)
-                    return;
-                const measured = this.measureColWidths();
-                if (measured)
-                    this.colWidths = measured;
-            });
-        }
+        this.freezeColWidths();
+    }
+    /** Freeze the column widths once the first data page has rendered.
+     *
+     *  The measurement reads layout and writes the colWidths @State, which would trigger a
+     *  re-render *during* the render cycle if done synchronously from componentDidRender. It is
+     *  deferred to a writeTask so the state mutation happens outside the render pass (avoids the
+     *  Stencil "state/prop changed during rendering" warning and potential loops).
+     *
+     *  NB: the freeze must not depend on the totalElements prop — hosts may omit it and rely on
+     *  minKnownTotal, in which case the widths would never be locked and every incoming page
+     *  would re-flow all columns. */
+    freezeColWidths() {
+        if (this.colWidths.length !== 0 || this.colWidthMeasureScheduled || this.loadedPages.size === 0)
+            return;
+        this.colWidthMeasureScheduled = true;
+        writeTask(() => {
+            var _a;
+            this.colWidthMeasureScheduled = false;
+            // Re-check: state may have changed (e.g. a reset) between scheduling and running.
+            if (this.colWidths.length !== 0)
+                return;
+            const measured = (_a = this.measureContentWidths()) !== null && _a !== void 0 ? _a : this.measureColWidths();
+            // A table inside a hidden tab pane (a tab page that is loaded but not shown) has no
+            // layout at all, so every measurement comes back 0. Locking those would pin every
+            // column at MIN_COL_WIDTH for good; wait for the ResizeObserver to report a real box.
+            if (measured && measured.some(w => w > 0))
+                this.colWidths = measured;
+        });
     }
     // ── Column resizing (drag the header border, Excel-style) ──────────────────
     /** Current rendered header widths, or null when they can't be trusted (header not laid out yet). */
@@ -287,6 +308,49 @@ export class MrdTable {
             return null;
         return Array.from(ths).map(th => Math.round(th.getBoundingClientRect().width));
     }
+    /** Width one cell needs to show its content in full, borders included.
+     *  Read from scrollWidth rather than the laid-out box: cells clip with `overflow: hidden`,
+     *  so a squeezed cell reports the width it *was given*, not the width it needs. */
+    neededWidth(cell) {
+        // The layout metrics are absent in the mock DOM the specs run on; treat them as 0
+        // rather than letting a NaN poison the Math.max chain the callers build.
+        const px = (v) => (typeof v === 'number' && Number.isFinite(v) ? v : 0);
+        const clientWidth = px(cell.clientWidth);
+        const scrollWidth = px(cell.scrollWidth);
+        const paddingRight = px(parseFloat(getComputedStyle(cell).paddingRight || '0'));
+        const borders = Math.max(0, px(cell.offsetWidth) - clientWidth);
+        // scrollWidth drops the right padding once the content overflows the clipped box;
+        // when it fits, clientWidth is already the full padded box.
+        const content = scrollWidth > clientWidth ? scrollWidth + paddingRight : clientWidth;
+        return Math.ceil(content + 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.
+     *
+     *  Deliberately not the laid-out widths: with many columns the browser squeezes them to fit
+     *  the container instead of overflowing (the cells clip, so they no longer resist), which
+     *  cost the horizontal scrollbar. Locking the needed widths makes the summed table width
+     *  exceed the container again, and `.mrd-table__scroll` scrolls. Capped per column at
+     *  MAX_AUTOFIT_WIDTH so one outlier value can't blow up the layout — same cap as auto-fit. */
+    measureContentWidths() {
+        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 = this.neededWidth(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})`)
+                .forEach(cell => { widest = Math.max(widest, this.neededWidth(cell)); });
+            return widest;
+        });
+        // Nothing has a box: the table is in a hidden tab pane. Report "cannot measure" rather
+        // than clamping a row of zeroes up to MIN_COL_WIDTH, which would look like a real result.
+        if (needed.every(w => w <= 0))
+            return null;
+        return needed.map(w => Math.min(Math.max(w, MIN_COL_WIDTH), MAX_AUTOFIT_WIDTH));
+    }
     /** 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.
      *
@@ -347,12 +411,7 @@ export class MrdTable {
         // 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})`);
         let widest = 0;
-        cells.forEach(cell => {
-            // scrollWidth is the untruncated content width; cells clip with overflow: hidden.
-            const style = getComputedStyle(cell);
-            const padding = parseFloat(style.paddingLeft || '0') + parseFloat(style.paddingRight || '0');
-            widest = Math.max(widest, cell.scrollWidth + padding);
-        });
+        cells.forEach(cell => { widest = Math.max(widest, this.neededWidth(cell)); });
         if (widest > 0)
             this.setColWidth(idx, Math.min(widest, MAX_AUTOFIT_WIDTH));
     }