made-refine 0.2.3 → 0.2.4

package/dist/index.js

@@ -4135,6 +4135,7 @@ function useCanvas({ stateRef, setState }) {
   const savedHtmlOverflowRef = React7.useRef("");
   const savedHtmlBgColorRef = React7.useRef("");
   const savedBodyDimensionsRef = React7.useRef({ width: 0, height: 0 });
+  const savedScrollContainersRef = React7.useRef([]);
   const rafIdRef = React7.useRef(null);
   const rafPendingRef = React7.useRef(false);
   const spaceHeldRef = React7.useRef(false);
@@ -4190,6 +4191,58 @@ function useCanvas({ stateRef, setState }) {
       });
     }
   }, [applyTransform, dispatchCanvasChange, setState]);
+  function isScrollableContainer(el) {
+    if (el.scrollHeight <= el.clientHeight + 1) return false;
+    const style = getComputedStyle(el);
+    const overflowY = style.overflowY || style.overflow;
+    if (overflowY === "hidden" || overflowY === "clip") return false;
+    return overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay";
+  }
+  function expandScrollContainers() {
+    const saved = [];
+    const queue = Array.from(document.body.children).filter(
+      (el) => el instanceof HTMLElement
+    );
+    let visited = 0;
+    const maxNodes = 5e3;
+    while (queue.length > 0 && visited < maxNodes) {
+      const nextQueue = [];
+      for (const el of queue) {
+        if (visited >= maxNodes) break;
+        visited++;
+        if (isScrollableContainer(el)) {
+          const style = el.style;
+          saved.push({
+            el,
+            height: style.height,
+            maxHeight: style.maxHeight,
+            overflowX: style.overflowX,
+            overflowY: style.overflowY
+          });
+          style.height = "auto";
+          style.maxHeight = "none";
+          style.overflowX = "visible";
+          style.overflowY = "visible";
+        }
+        for (const child of el.children) {
+          if (child instanceof HTMLElement) nextQueue.push(child);
+        }
+      }
+      queue.length = 0;
+      queue.push(...nextQueue);
+    }
+    savedScrollContainersRef.current = saved;
+  }
+  function restoreScrollContainers() {
+    for (let i = savedScrollContainersRef.current.length - 1; i >= 0; i--) {
+      const { el, height, maxHeight, overflowX, overflowY } = savedScrollContainersRef.current[i];
+      el.style.height = height;
+      el.style.maxHeight = maxHeight;
+      el.style.overflowX = overflowX;
+      el.style.overflowY = overflowY;
+    }
+    savedScrollContainersRef.current = [];
+  }
   const enterCanvas = React7.useCallback(() => {
     const scrollX = window.scrollX;
     const scrollY = window.scrollY;
@@ -4197,15 +4250,16 @@ function useCanvas({ stateRef, setState }) {
     savedBodyOverflowRef.current = document.body.style.overflow;
     savedHtmlOverflowRef.current = document.documentElement.style.overflow;
     savedHtmlBgColorRef.current = document.documentElement.style.backgroundColor;
-    savedBodyDimensionsRef.current = {
-      width: document.body.scrollWidth,
-      height: document.body.scrollHeight
-    };
     const existingTransform = document.body.style.transform;
     if (existingTransform && existingTransform !== "none" && existingTransform !== "") {
       console.warn("[made-refine] canvas mode: overriding existing body transform:", existingTransform);
     }
     window.scrollTo(0, 0);
+    expandScrollContainers();
+    savedBodyDimensionsRef.current = {
+      width: document.body.scrollWidth,
+      height: document.body.scrollHeight
+    };
     updateBodyOffset();
     document.body.style.overflow = "hidden";
     document.documentElement.style.overflow = "hidden";
@@ -4225,6 +4279,7 @@ function useCanvas({ stateRef, setState }) {
     cancelPendingRaf();
     document.body.style.transform = "";
     document.body.style.transformOrigin = "";
+    restoreScrollContainers();
     document.body.style.overflow = savedBodyOverflowRef.current;
     document.documentElement.style.overflow = savedHtmlOverflowRef.current;
     document.documentElement.style.backgroundColor = savedHtmlBgColorRef.current;