plainframe-ui 0.1.4 → 0.1.5

package/dist/index.js

@@ -2125,7 +2125,6 @@ import React8, {
   isValidElement as isValidElement4,
   cloneElement as cloneElement4,
   useRef as useRef5,
-  useLayoutEffect as useLayoutEffect2,
   useEffect as useEffect3
 } from "react";
 import { css as emCss } from "@emotion/react";
@@ -2294,80 +2293,7 @@ var SubMenuContent = ({ children, css: userCss }) => {
   const { open } = useSub();
   const parentLevel = useContext3(LevelCtx);
   const menuGap = useContext3(GapCtx);
-  const clipRef = useRef5(null);
   const innerRef = useRef5(null);
-  const seqRef = useRef5(0);
-  const firstRef = useRef5(true);
-  useLayoutEffect2(() => {
-    const clip = clipRef.current;
-    const inner = innerRef.current;
-    if (!clip || !inner) return;
-    const key = ++seqRef.current;
-    const dur = "360ms cubic-bezier(.25,.8,.4,1)";
-    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 = `${from}px`;
-    void clip.offsetHeight;
-    clip.style.transition = `max-height ${dur}`;
-    clip.style.maxHeight = `${to}px`;
-    const onEnd = (e) => {
-      if (e.target !== clip || e.propertyName !== "max-height") return;
-      if (key !== seqRef.current) return;
-      clip.style.transition = "none";
-      if (open) {
-        clip.style.maxHeight = "none";
-        clip.style.overflow = "visible";
-      } else {
-        clip.style.maxHeight = "0px";
-        clip.style.overflow = "hidden";
-      }
-      clip.removeEventListener("transitionend", onEnd);
-      clip.removeEventListener("transitioncancel", onCancel);
-    };
-    const onCancel = () => {
-      if (key !== seqRef.current) return;
-      clip.removeEventListener("transitionend", onEnd);
-      clip.removeEventListener("transitioncancel", onCancel);
-    };
-    clip.addEventListener("transitionend", onEnd);
-    clip.addEventListener("transitioncancel", onCancel);
-    return () => {
-      clip.removeEventListener("transitionend", onEnd);
-      clip.removeEventListener("transitioncancel", onCancel);
-    };
-  }, [open]);
-  useLayoutEffect2(() => {
-    const clip = clipRef.current;
-    const inner = innerRef.current;
-    if (!clip || !inner || !window.ResizeObserver) return;
-    const ro = new window.ResizeObserver(() => {
-      if (!open) return;
-      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";
-      }
-    });
-    ro.observe(inner);
-    return () => {
-      ro.disconnect();
-    };
-  }, [open]);
   useEffect3(() => {
     const root = innerRef.current;
     if (!root) return;
@@ -2404,25 +2330,16 @@ var SubMenuContent = ({ children, css: userCss }) => {
       });
     }
   }, [open]);
-  useEffect3(() => {
-    const clip = clipRef.current;
-    if (!clip) return;
-    const onFocusIn = () => {
-      clip.style.overflow = "visible";
-    };
-    const onFocusOut = (e) => {
-      if (!clip.contains(e.relatedTarget)) {
-        clip.style.overflow = open ? "visible" : "hidden";
-      }
-    };
-    clip.addEventListener("focusin", onFocusIn);
-    clip.addEventListener("focusout", onFocusOut);
-    return () => {
-      clip.removeEventListener("focusin", onFocusIn);
-      clip.removeEventListener("focusout", onFocusOut);
-    };
-  }, [open]);
+  const clipCss = emCss({
+    display: "grid",
+    gridTemplateRows: open ? "1fr" : "0fr",
+    transition: "grid-template-rows 360ms cubic-bezier(.25,.8,.4,1)",
+    overflow: "hidden",
+    contain: "layout style",
+    position: "relative"
+  });
   const innerCss = emCss({
+    minHeight: 0,
     width: "100%",
     display: "flex",
     flexDirection: "column",
@@ -2430,7 +2347,7 @@ var SubMenuContent = ({ children, css: userCss }) => {
     margin: 0,
     padding: 0,
     opacity: open ? 1 : 0,
-    transform: open ? "translateY(0) scale(1)" : "translateY(16px) scale(0.96)",
+    transform: open ? "translateY(0) scale(1)" : "translateY(1rem) scale(0.95)",
     transition: "opacity 0.35s ease, transform 0.28s ease",
     pointerEvents: open ? "auto" : "none",
     willChange: "opacity, transform"
@@ -2442,20 +2359,15 @@ var SubMenuContent = ({ children, css: userCss }) => {
       "data-open": open ? "" : void 0,
       className: "plainframe-ui-submenu-content",
       css: [emCss({ width: "100%" }), userCss],
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx9("div", { className: "plainframe-ui-submenu-clip", css: clipCss, children: /* @__PURE__ */ jsx9(
         "div",
         {
-          ref: clipRef,
-          className: "plainframe-ui-submenu-clip",
-          css: emCss({
-            willChange: "max-height",
-            contain: "layout style",
-            position: "relative",
-            overflow: "hidden"
-          }),
-          children: /* @__PURE__ */ jsx9("div", { ref: innerRef, className: "plainframe-ui-submenu-inner", css: innerCss, children })
+          ref: innerRef,
+          className: "plainframe-ui-submenu-inner",
+          css: innerCss,
+          children
         }
-      )
+      ) })
     }
   ) });
 };