plainframe-ui 0.1.3 → 0.1.4

package/dist/index.js

@@ -2296,34 +2296,34 @@ var SubMenuContent = ({ children, css: userCss }) => {
   const menuGap = useContext3(GapCtx);
   const clipRef = useRef5(null);
   const innerRef = useRef5(null);
-  const readyRef = useRef5(false);
   const seqRef = useRef5(0);
-  useLayoutEffect2(() => {
-    const clip = clipRef.current;
-    if (!clip) return;
-    if (open) {
-      clip.style.maxHeight = "none";
-      clip.style.overflow = "visible";
-    } else {
-      clip.style.maxHeight = "0px";
-      clip.style.overflow = "hidden";
-    }
-    readyRef.current = true;
-  }, []);
+  const firstRef = useRef5(true);
   useLayoutEffect2(() => {
     const clip = clipRef.current;
     const inner = innerRef.current;
-    if (!clip || !inner || !readyRef.current) return;
+    if (!clip || !inner) return;
     const key = ++seqRef.current;
     const dur = "360ms cubic-bezier(.25,.8,.4,1)";
-    const current = clip.style.maxHeight === "none" ? inner.scrollHeight : parseFloat(clip.style.maxHeight || "0") || 0;
-    const target = open ? inner.scrollHeight : 0;
+    if (firstRef.current) {
+      firstRef.current = false;
+      clip.style.transition = "none";
+      if (open) {
+        clip.style.maxHeight = "none";
+        clip.style.overflow = "visible";
+      } else {
+        clip.style.maxHeight = "0px";
+        clip.style.overflow = "hidden";
+      }
+      return;
+    }
+    const from = open ? 0 : inner.scrollHeight;
+    const to = open ? inner.scrollHeight : 0;
     clip.style.transition = "none";
     clip.style.overflow = "hidden";
-    clip.style.maxHeight = `${current}px`;
+    clip.style.maxHeight = `${from}px`;
     void clip.offsetHeight;
     clip.style.transition = `max-height ${dur}`;
-    clip.style.maxHeight = `${target}px`;
+    clip.style.maxHeight = `${to}px`;
     const onEnd = (e) => {
       if (e.target !== clip || e.propertyName !== "max-height") return;
       if (key !== seqRef.current) return;
@@ -2353,17 +2353,19 @@ var SubMenuContent = ({ children, css: userCss }) => {
   useLayoutEffect2(() => {
     const clip = clipRef.current;
     const inner = innerRef.current;
-    if (!clip || !inner) return;
+    if (!clip || !inner || !window.ResizeObserver) return;
     const ro = new window.ResizeObserver(() => {
       if (!open) return;
-      const h = inner.scrollHeight;
-      if (clip.style.maxHeight !== "none") {
-        clip.style.maxHeight = `${h}px`;
+      const isAnimating = clip.style.maxHeight !== "none" && (clip.style.transition || "").includes("max-height");
+      if (isAnimating) {
+        clip.style.transition = "none";
+        clip.style.maxHeight = "none";
+        clip.style.overflow = "visible";
       }
     });
-    if (ro) ro.observe(inner);
+    ro.observe(inner);
     return () => {
-      ro && ro.disconnect();
+      ro.disconnect();
     };
   }, [open]);
   useEffect3(() => {
@@ -2428,7 +2430,7 @@ var SubMenuContent = ({ children, css: userCss }) => {
     margin: 0,
     padding: 0,
     opacity: open ? 1 : 0,
-    transform: open ? "translateY(0) scale(1)" : "translateY(1rem) scale(0.95)",
+    transform: open ? "translateY(0) scale(1)" : "translateY(16px) scale(0.96)",
     transition: "opacity 0.35s ease, transform 0.28s ease",
     pointerEvents: open ? "auto" : "none",
     willChange: "opacity, transform"