@alaarab/ogrid-core 2.1.13 → 2.1.14

package/dist/esm/index.js

@@ -1058,23 +1058,94 @@ var CELL_PADDING = 16;
 var GRID_BORDER_RADIUS = 6;
 
 // src/utils/columnAutosize.ts
-var AUTOSIZE_EXTRA_PX = 28;
+var AUTOSIZE_EXTRA_PX = 16;
 var AUTOSIZE_MAX_PX = 520;
+function measureHeaderWidth(th) {
+  const cs = getComputedStyle(th);
+  const thPadding = (parseFloat(cs.paddingLeft) || 0) + (parseFloat(cs.paddingRight) || 0);
+  let resizeHandleWidth = 0;
+  for (let i = 0; i < th.children.length; i++) {
+    const child = th.children[i];
+    const cls = child.className || "";
+    if (cls.includes("resizeHandle") || cls.includes("resize-handle") || cls.includes("ogrid-resize-handle")) {
+      resizeHandleWidth = child.offsetWidth;
+      break;
+    }
+  }
+  const contentContainer = th.firstElementChild;
+  if (!contentContainer) return th.offsetWidth;
+  const modified = [];
+  const expandDescendants = (parent) => {
+    for (let i = 0; i < parent.children.length; i++) {
+      const child = parent.children[i];
+      const style = getComputedStyle(child);
+      if (style.overflow === "hidden" || style.flexShrink !== "0") {
+        modified.push({
+          el: child,
+          overflow: child.style.overflow,
+          flexShrink: child.style.flexShrink,
+          width: child.style.width,
+          minWidth: child.style.minWidth
+        });
+        child.style.overflow = "visible";
+        child.style.flexShrink = "0";
+        child.style.width = "max-content";
+        child.style.minWidth = "max-content";
+      }
+      expandDescendants(child);
+    }
+  };
+  const origPos = contentContainer.style.position;
+  const origWidth = contentContainer.style.width;
+  contentContainer.style.position = "absolute";
+  contentContainer.style.width = "max-content";
+  expandDescendants(contentContainer);
+  const expandedWidth = contentContainer.offsetWidth;
+  contentContainer.style.position = origPos;
+  contentContainer.style.width = origWidth;
+  for (const m of modified) {
+    m.el.style.overflow = m.overflow;
+    m.el.style.flexShrink = m.flexShrink;
+    m.el.style.width = m.width;
+    m.el.style.minWidth = m.minWidth;
+  }
+  return expandedWidth + resizeHandleWidth + thPadding;
+}
 function measureColumnContentWidth(columnId, minWidth, container) {
   const minW = minWidth ?? DEFAULT_MIN_COLUMN_WIDTH;
   const root = container ?? document;
   const cells = root.querySelectorAll(`[data-column-id="${columnId}"]`);
   if (cells.length === 0) return minW;
   let maxWidth = minW;
+  const contentEls = [];
+  const origPositions = [];
+  const origWidths = [];
   cells.forEach((cell) => {
     const el = cell;
-    const label = el.querySelector?.("[data-header-label]");
-    if (label) {
-      maxWidth = Math.max(maxWidth, label.scrollWidth + AUTOSIZE_EXTRA_PX);
+    const isHeader = !!el.querySelector?.("[data-header-label]");
+    if (isHeader) {
+      maxWidth = Math.max(maxWidth, measureHeaderWidth(el));
     } else {
-      maxWidth = Math.max(maxWidth, el.scrollWidth);
+      const content = el.firstElementChild ?? el;
+      contentEls.push(content);
     }
   });
+  if (contentEls.length > 0) {
+    for (let i = 0; i < contentEls.length; i++) {
+      const el = contentEls[i];
+      origPositions.push(el.style.position);
+      origWidths.push(el.style.width);
+      el.style.position = "absolute";
+      el.style.width = "max-content";
+    }
+    for (let i = 0; i < contentEls.length; i++) {
+      maxWidth = Math.max(maxWidth, contentEls[i].offsetWidth + AUTOSIZE_EXTRA_PX);
+    }
+    for (let i = 0; i < contentEls.length; i++) {
+      contentEls[i].style.position = origPositions[i];
+      contentEls[i].style.width = origWidths[i];
+    }
+  }
   return Math.min(AUTOSIZE_MAX_PX, Math.max(minW, Math.ceil(maxWidth)));
 }
 

package/dist/types/utils/columnAutosize.d.ts

@@ -1,15 +1,16 @@
 /**
  * Column autosize DOM measurement utilities shared across all frameworks.
  */
-/** Extra pixels added to header label width to account for filter icon + padding. */
-export declare const AUTOSIZE_EXTRA_PX = 28;
+/** Extra pixels added after body content measurement for padding. */
+export declare const AUTOSIZE_EXTRA_PX = 16;
 /** Maximum column width from autosize. */
 export declare const AUTOSIZE_MAX_PX = 520;
 /**
  * Measure the ideal width for a column by scanning all DOM cells with
- * `[data-column-id="<columnId>"]` and computing the maximum scrollWidth.
+ * `[data-column-id="<columnId>"]` and computing the maximum content width.
  *
- * Header cells with a `[data-header-label]` child get extra padding for icons.
+ * Header cells: temporarily unconstrained to measure true content width.
+ * Body cells: measured via `position: absolute; width: max-content`.
  *
  * @param columnId - Column to measure
  * @param minWidth - Minimum width (defaults to DEFAULT_MIN_COLUMN_WIDTH)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alaarab/ogrid-core",
-  "version": "2.1.13",
+  "version": "2.1.14",
   "description": "OGrid core – framework-agnostic types, algorithms, and utilities for OGrid data grids.",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",