@jinaan/uikit 0.1.56 → 0.1.58

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinaan/uikit",
-  "version": "0.1.56",
+  "version": "0.1.58",
   "description": "Reusable React and Tailwind UI components for Jinaan projects.",
   "license": "UNLICENSED",
   "type": "module",

package/src/data-table.tsx

@@ -462,13 +462,25 @@ export function DataTable<T>({
       // shrink the stale minWidth would keep a scrollbar alive forever. The
       // sizer span is intrinsic in every state. Widths stay unrounded so the
       // sum is the exact content requirement.
+      //
+      // Content floor: fixed-layout cells don't grow with their content, so
+      // an interactive control (a role select that gains its label, a badge
+      // that renders late) would overflow into its neighbor. Read the cell's
+      // scrollWidth and its direct children's rects so overflowing content
+      // widens the column instead of spilling over it.
       const bandThs = bandTableRef.current?.querySelectorAll("thead th");
-      const widths = Array.from(cells, (cell, i) =>
-        Math.max(
+      const widths = Array.from(cells, (cell, i) => {
+        const childWidth = Math.max(
+          0,
+          ...Array.from(cell.children, (child) => child.getBoundingClientRect().width),
+        );
+        return Math.max(
           cell.getBoundingClientRect().width,
+          cell.scrollWidth,
+          childWidth,
           bandThs?.item(i)?.querySelector("[data-col-sizer]")?.getBoundingClientRect().width ?? 0,
-        ),
-      );
+        );
+      });
       // Bail out when nothing changed: a new array would re-render, and the
       // re-render would re-run this effect, looping forever.
       setColumnWidths((prev) =>
@@ -497,7 +509,30 @@ export function DataTable<T>({
     if (typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(measure);
     observer.observe(table);
-    return () => observer.disconnect();
+
+    // Cell content can change without the table resizing (an async label
+    // landing inside an already-pinned fixed column). Watch the tbody — not
+    // the whole table, so our own colgroup writes can't loop — and remeasure
+    // so overflowing content widens its column instead of overlapping the
+    // neighbor.
+    let frame: number | null = null;
+    const scheduleMeasure = () => {
+      if (frame !== null) return;
+      frame = requestAnimationFrame(() => {
+        frame = null;
+        measure();
+      });
+    };
+    const mutations = new MutationObserver(scheduleMeasure);
+    const firstBody = table.tBodies[0];
+    if (firstBody) {
+      mutations.observe(firstBody, { childList: true, characterData: true, subtree: true });
+    }
+    return () => {
+      observer.disconnect();
+      mutations.disconnect();
+      if (frame !== null) cancelAnimationFrame(frame);
+    };
     // `pinned` re-runs this effect after the structure reset clears the
     // widths (false) and again after re-pinning (true). Safe to measure in
     // the pinned state because the floor reads sizer spans — intrinsic in

package/src/dropdown-menu.tsx

@@ -79,7 +79,7 @@ export const DropdownMenuContent = forwardRef<
       ref={ref}
       sideOffset={sideOffset}
       className={cn(
-        "menu-surface btn-inner-border z-50 min-w-48 overflow-hidden rounded-lg border border-line bg-(--button-secondary-bg) p-1",
+        "menu-surface btn-inner-border z-50 min-w-(--radix-popper-anchor-width) overflow-hidden rounded-lg border border-line bg-(--button-secondary-bg) p-1",
         "data-[state=open]:animate-in data-[state=closed]:animate-out",
         "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
         "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",

package/src/select.tsx

@@ -78,7 +78,7 @@ export const SelectContent = forwardRef<
         position={position}
         sideOffset={sideOffset}
         className={cn(
-          "menu-surface btn-inner-border z-50 min-w-48 overflow-hidden rounded-lg border border-line bg-(--button-secondary-bg) p-1",
+          "menu-surface btn-inner-border z-50 min-w-(--radix-select-trigger-width) overflow-hidden rounded-lg border border-line bg-(--button-secondary-bg) p-1",
           "data-[state=open]:animate-in data-[state=closed]:animate-out",
           "data-[state=open]:fade-in-0 data-[state=closed]:fade-out-0",
           "data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95",