@pure-ds/core 0.7.41 → 0.7.42

package/src/js/pds-core/pds-enhancers.js

@@ -218,6 +218,64 @@ function enhanceDropdown(elem) {
     return false;
   };
 
+  const collectClippingAncestors = (startNode, stopAt = null) => {
+    const targets = [];
+    let current = getContainingAncestor(startNode);
+
+    while (current instanceof Element) {
+      const tagName = String(current.tagName || "").toUpperCase();
+      if (tagName === "HTML" || tagName === "BODY") {
+        break;
+      }
+
+      const style = getComputedStyle(current);
+      const clips = [style.overflow, style.overflowX, style.overflowY].some(
+        (value) => value && value !== "visible",
+      );
+
+      if (clips) {
+        targets.push(current);
+      }
+
+      if (stopAt && current === stopAt) {
+        break;
+      }
+
+      current = getContainingAncestor(current);
+    }
+
+    return targets;
+  };
+
+  const setOverlayClippingOverride = (enabled, stopAt = null) => {
+    if (enabled) {
+      if (overlayOverflowOverrides.size) return;
+
+      const targets = collectClippingAncestors(menu, stopAt);
+      targets.forEach((element) => {
+        overlayOverflowOverrides.set(element, {
+          overflow: element.style.overflow,
+          overflowX: element.style.overflowX,
+          overflowY: element.style.overflowY,
+        });
+
+        element.style.overflow = "visible";
+        element.style.overflowX = "visible";
+        element.style.overflowY = "visible";
+      });
+
+      return;
+    }
+
+    overlayOverflowOverrides.forEach((previous, element) => {
+      element.style.overflow = previous.overflow;
+      element.style.overflowX = previous.overflowX;
+      element.style.overflowY = previous.overflowY;
+    });
+
+    overlayOverflowOverrides.clear();
+  };
+
   const reattachFloatingMenu = () => {
     if (menu.getAttribute("aria-hidden") !== "false") return;
     clearFloatingMenuPosition();
@@ -230,10 +288,19 @@ function enhanceDropdown(elem) {
 
   const positionFloatingMenu = () => {
     if (menu.getAttribute("aria-hidden") !== "false") return;
-    if (hasNonViewportFixedContainingBlock()) {
+    const hasFixedContainingBlock = hasNonViewportFixedContainingBlock();
+
+    if (hasFixedContainingBlock) {
+      // Fixed overlay is unsafe in this context; keep local positioning,
+      // but temporarily unclip ancestor overflow containers.
+      setOverlayClippingOverride(true);
       clearFloatingMenuPosition();
       return;
     }
+
+    // Fixed overlay path does not need clipping overrides.
+    setOverlayClippingOverride(false);
+
     const anchorRect = (trigger || elem).getBoundingClientRect();
     const viewport = window.visualViewport;
     const viewportWidth =
@@ -309,6 +376,7 @@ function enhanceDropdown(elem) {
 
   let configChangedHandler = null;
   let configRepositionFrame = null;
+  const overlayOverflowOverrides = new Map();
   const bindConfigChanged = () => {
     if (configChangedHandler || typeof document === "undefined") return;
     configChangedHandler = () => {
@@ -342,6 +410,7 @@ function enhanceDropdown(elem) {
   let clickHandler = null;
 
   const openMenu = () => {
+    setOverlayClippingOverride(false);
     elem.dataset.dropdownDirection = resolveDirection();
     elem.dataset.dropdownAlign = resolveAlign();
     menu.setAttribute("aria-hidden", "false");
@@ -374,6 +443,7 @@ function enhanceDropdown(elem) {
     unbindReposition();
     unbindConfigChanged();
     clearFloatingMenuPosition();
+    setOverlayClippingOverride(false);
 
     // Remove click-outside handler when closing
     if (clickHandler) {