@jinaan/uikit 0.1.55 → 0.1.57

package/package.json

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

package/src/combobox.tsx

@@ -206,10 +206,10 @@ export function Combobox({
                   aria-selected={item.value === value}
                   onClick={() => pick(item)}
                   className={cn(
-                    "flex w-full items-center gap-3 rounded-lg px-2 py-2 text-left transition-colors",
+                    "flex w-full items-center gap-3 rounded-lg px-2 py-1.5 text-left transition-colors",
                     item.value === value
-                      ? "bg-(--button-surface-active)"
-                      : "hover:bg-(--button-surface-hover)",
+                      ? "bg-(--combobox-search-bg)"
+                      : "hover:bg-(--combobox-search-bg) focus:bg-(--combobox-search-bg) data-highlighted:bg-(--combobox-search-bg)",
                   )}
                 >
                   {renderItem ? (

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