@ai-matrx/design-system 0.61.13 → 0.61.15

package/dist/index.js

@@ -402,7 +402,7 @@ function findPillViolation(el, maxWidth = PILL_MAX_WIDTH_PX) {
 function overflowPast(el, rect, view) {
   for (let p = el.parentElement; p; p = p.parentElement) {
     const ox = view.getComputedStyle(p).overflowX;
-    if (ox === "auto" || ox === "scroll") return null;
+    if ((ox === "auto" || ox === "scroll") && p.scrollWidth > p.clientWidth + 1 && p.scrollHeight <= p.clientHeight + 1) return null;
   }
   const pinned = ["absolute", "fixed"].includes(view.getComputedStyle(el).position);
   const parent = el.parentElement;
@@ -413,9 +413,48 @@ function overflowPast(el, rect, view) {
       if (by > 0.5) return { what: "its container", by };
     }
   }
-  const vw = el.ownerDocument.documentElement.clientWidth || view.innerWidth;
+  let clip = null;
+  let transformed = false;
+  const root = el.ownerDocument.documentElement;
+  for (let p = el.parentElement; p && p !== root; p = p.parentElement) {
+    const pcs = view.getComputedStyle(p);
+    if (!clip && pcs.overflowX !== "visible" && pcs.overflowX !== "") clip = p;
+    if (pcs.transform && pcs.transform !== "none" || pcs.translate && pcs.translate !== "none" || pcs.scale && pcs.scale !== "none" || pcs.rotate && pcs.rotate !== "none") {
+      transformed = true;
+    }
+  }
+  if (clip && !pinned && clip !== parent) {
+    const cr = clip.getBoundingClientRect();
+    if (cr.width > 0) {
+      const by = Math.max(rect.right - cr.right, cr.left - rect.left);
+      if (by > 0.5) return { what: "its clipping container", by };
+    }
+  }
+  let left = rect.left;
+  let right = rect.right;
+  let top = rect.top;
+  let bottom = rect.bottom;
+  for (let p = el.parentElement; p && p !== root; p = p.parentElement) {
+    const pcs = view.getComputedStyle(p);
+    if (pcs.overflowX === "visible" && pcs.overflowY === "visible") continue;
+    const cr = p.getBoundingClientRect();
+    if (cr.width === 0 && cr.height === 0) continue;
+    if (pcs.overflowX !== "visible") {
+      left = Math.max(left, cr.left);
+      right = Math.min(right, cr.right);
+    }
+    if (pcs.overflowY !== "visible") {
+      top = Math.max(top, cr.top);
+      bottom = Math.min(bottom, cr.bottom);
+    }
+  }
+  const vw = root.clientWidth || view.innerWidth;
+  const vh = root.clientHeight || view.innerHeight;
+  if (transformed) return null;
+  if (vw > 0 && (right <= left || right <= 0 || left >= vw)) return null;
+  if (vh > 0 && (bottom <= top || bottom <= 0 || top >= vh)) return null;
   if (vw > 0) {
-    const by = Math.max(rect.right - vw, -rect.left);
+    const by = Math.max(right - vw, -left);
     if (by > 0.5) return { what: "the viewport", by };
   }
   return null;