@hexdspace/react 0.1.16 → 0.1.17

package/dist/css/component.css

@@ -181,18 +181,22 @@
 
     @keyframes dialog-surface-in {
         from {
+            opacity: 0;
             transform: translateY(1.25rem);
         }
         to {
+            opacity: 1;
             transform: translateY(0);
         }
     }
 
     @keyframes dialog-surface-out {
         from {
+            opacity: 1;
             transform: translateY(0);
         }
         to {
+            opacity: 0;
             transform: translateY(1.25rem);
         }
     }

package/dist/index.js

@@ -1559,16 +1559,26 @@ var dialogPanelVariants = cva2(
 );
 var dialogOverlayClass = cn(
   "fixed inset-0 bg-[color:var(--overlay)]",
-  "data-[state=open]:animate-[dialog-overlay-in_var(--motion-med)_cubic-bezier(0.2,0,0.2,1)]",
   "data-[state=closed]:animate-[dialog-overlay-out_var(--motion-med)_cubic-bezier(0.2,0,0.2,1)]",
   "data-[state=closed]:pointer-events-none"
 );
 function DialogContent({ className, ...props }) {
   return /* @__PURE__ */ jsx7("div", { className: cn("DialogContent p-6", className), ...props });
 }
-function AutoHeight({ children }) {
+function AutoHeight({
+  children,
+  onReady,
+  resetKey
+}) {
   const ref = React2.useRef(null);
   const [height, setHeight] = React2.useState("auto");
+  const readyRef = React2.useRef(false);
+  const resetKeyRef = React2.useRef(resetKey);
+  React2.useEffect(() => {
+    if (resetKeyRef.current === resetKey) return;
+    resetKeyRef.current = resetKey;
+    readyRef.current = false;
+  });
   React2.useLayoutEffect(() => {
     const el = ref.current;
     if (!el) return;
@@ -1584,6 +1594,12 @@ function AutoHeight({ children }) {
           if (prevNum < 0 || Math.abs(snapped - prevNum) >= 2) return snapped;
           return prev;
         });
+        if (!readyRef.current) {
+          readyRef.current = true;
+          requestAnimationFrame(() => {
+            onReady?.();
+          });
+        }
       });
     });
     ro.observe(el);
@@ -1591,13 +1607,11 @@ function AutoHeight({ children }) {
       ro.disconnect();
       cancelAnimationFrame(raf);
     };
-  }, []);
+  }, [onReady]);
   return /* @__PURE__ */ jsx7(
     "div",
     {
-      className: cn(
-        "transition-[height] duration-(--motion-med) ease motion-reduce:transition-none"
-      ),
+      className: cn("transition-[height] duration-(--motion-med) ease motion-reduce:transition-none"),
       style: {
         height: height === "auto" ? "auto" : height,
         maxHeight: "calc(100vh - 4rem)",
@@ -1630,11 +1644,13 @@ function Dialog({
 }) {
   const fallbackId = React2.useId();
   const resolvedRef = React2.useRef(false);
-  const rafRef = React2.useRef(null);
   const isControlled = open2 !== void 0;
   const [uncontrolledOpen, setUncontrolledOpen] = React2.useState(defaultOpen ?? false);
-  const currentOpen = isControlled ? open2 : uncontrolledOpen;
-  const [animateSurface, setAnimateSurface] = React2.useState(false);
+  const isOpen = isControlled ? open2 : uncontrolledOpen;
+  const prevOpenRef = React2.useRef(false);
+  const [contentCycle, setContentCycle] = React2.useState(0);
+  const [surfaceReady, setSurfaceReady] = React2.useState(false);
+  const [overlayReady, setOverlayReady] = React2.useState(false);
   const Template = template;
   const handleOpenChange = (nextOpen) => {
     if (!isControlled) setUncontrolledOpen(nextOpen);
@@ -1657,34 +1673,41 @@ function Dialog({
     [onResolve]
   );
   React2.useEffect(() => {
-    if (rafRef.current) {
-      cancelAnimationFrame(rafRef.current);
-      rafRef.current = null;
-    }
-    if (!currentOpen) {
-      setAnimateSurface(false);
+    const wasOpen = prevOpenRef.current;
+    prevOpenRef.current = Boolean(isOpen);
+    if (isOpen && !wasOpen) {
+      setContentCycle((value) => value + 1);
+      setSurfaceReady(false);
+      setOverlayReady(false);
       return;
     }
-    setAnimateSurface(false);
-    rafRef.current = requestAnimationFrame(() => {
-      rafRef.current = requestAnimationFrame(() => {
-        setAnimateSurface(true);
-      });
+    if (!isOpen && wasOpen) {
+      setSurfaceReady(false);
+      setOverlayReady(false);
+    }
+  }, [isOpen]);
+  const handleAutoHeightReady = React2.useCallback(() => {
+    if (!isOpen) return;
+    requestAnimationFrame(() => {
+      setSurfaceReady(true);
+      setOverlayReady(true);
     });
-    return () => {
-      if (rafRef.current) cancelAnimationFrame(rafRef.current);
-    };
-  }, [currentOpen]);
+  }, [isOpen]);
+  const overlayClassName = cn(
+    "DialogOverlay",
+    dialogOverlayClass,
+    isOpen && !overlayReady ? "opacity-0" : null,
+    overlayReady ? "animate-[dialog-overlay-in_var(--motion-med)_cubic-bezier(0.2,0,0.2,1)] [animation-fill-mode:both]" : null
+  );
+  const surfaceClassName = cn(
+    "dialog-surface relative shell overflow-hidden",
+    isOpen && !surfaceReady ? "opacity-0 translate-y-5" : null,
+    surfaceReady ? "animate-[dialog-surface-in_var(--motion-med)_cubic-bezier(0.16,1,0.3,1)] [animation-fill-mode:both]" : null
+  );
   return /* @__PURE__ */ jsxs3(DialogPrimitive.Root, { open: open2, defaultOpen, onOpenChange: handleOpenChange, modal, children: [
     trigger ? /* @__PURE__ */ jsx7(DialogPrimitive.Trigger, { asChild: true, children: trigger }) : null,
     /* @__PURE__ */ jsxs3(DialogPrimitive.Portal, { children: [
-      modal ? /* @__PURE__ */ jsx7(
-        DialogPrimitive.Overlay,
-        {
-          className: cn("DialogOverlay", dialogOverlayClass),
-          style: { zIndex: zIndex - 1 }
-        }
-      ) : null,
+      modal ? /* @__PURE__ */ jsx7(DialogPrimitive.Overlay, { className: overlayClassName, style: { zIndex: zIndex - 1 } }) : null,
       /* @__PURE__ */ jsx7(
         DialogPrimitive.Content,
         {
@@ -1706,29 +1729,19 @@ function Dialog({
             if (!dismissible) event.preventDefault();
           },
           ...props,
-          children: /* @__PURE__ */ jsxs3(
-            "div",
-            {
-              className: cn(
-                "dialog-surface relative shell overflow-hidden",
-                currentOpen && !animateSurface ? "opacity-0 translate-y-5" : null,
-                animateSurface ? "animate-[dialog-surface-in_var(--motion-med)_cubic-bezier(0.16,1,0.3,1)]" : null
-              ),
-              children: [
-                showClose ? /* @__PURE__ */ jsx7(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx7(
-                  Button,
-                  {
-                    variant: "ghost",
-                    size: "icon",
-                    leftIcon: /* @__PURE__ */ jsx7(XIcon, { className: "w-5 h-5" }),
-                    className: "absolute right-2 top-2 z-10 rounded-full",
-                    "aria-label": closeLabel
-                  }
-                ) }) : null,
-                /* @__PURE__ */ jsx7(AutoHeight, { children: /* @__PURE__ */ jsx7(Template, { id: id ?? fallbackId, payload, onResolve: handleResolve }) })
-              ]
-            }
-          )
+          children: /* @__PURE__ */ jsxs3("div", { className: surfaceClassName, children: [
+            showClose ? /* @__PURE__ */ jsx7(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx7(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                leftIcon: /* @__PURE__ */ jsx7(XIcon, { className: "w-5 h-5" }),
+                className: "absolute right-2 top-2 z-10 rounded-full",
+                "aria-label": closeLabel
+              }
+            ) }) : null,
+            /* @__PURE__ */ jsx7(AutoHeight, { onReady: handleAutoHeightReady, resetKey: contentCycle, children: /* @__PURE__ */ jsx7(Template, { id: id ?? fallbackId, payload, onResolve: handleResolve }) })
+          ] })
         }
       )
     ] })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexdspace/react",
-  "version": "0.1.16",
+  "version": "0.1.17",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",