@mond-design-system/react 3.0.0 → 3.0.2

package/dist/index.cjs

@@ -481,20 +481,34 @@ function useOverlay(options) {
 }
 function usePresence(open, durationMs) {
   const [mounted, setMounted] = react.useState(open);
+  const [visible, setVisible] = react.useState(false);
   if (open && !mounted) setMounted(true);
+  if (!open && visible) setVisible(false);
+  react.useEffect(() => {
+    if (!open) return;
+    let second = 0;
+    const first = requestAnimationFrame(() => {
+      second = requestAnimationFrame(() => setVisible(true));
+    });
+    return () => {
+      cancelAnimationFrame(first);
+      cancelAnimationFrame(second);
+    };
+  }, [open]);
   react.useEffect(() => {
     if (open) return;
     const timer = setTimeout(() => setMounted(false), durationMs);
     return () => clearTimeout(timer);
   }, [open, durationMs]);
-  return { mounted: open || mounted, visible: open };
+  return { mounted: open || mounted, visible };
 }
 
 // mds-cssmod:/home/runner/work/mond-design-system/mond-design-system/packages/react/src/components/Overlay/Overlay.module.css?mds-scoped
 var Overlay_module_default = { "scrim": "mds-Overlay__scrim", "variant-modal": "mds-Overlay__variant-modal", "variant-sheet": "mds-Overlay__variant-sheet" };
 var OVERLAY_EXIT_MS = 200;
+var SHEET_EXIT_MS = 320;
 function Overlay({ open, onClose, label, variant, role = "dialog", closeOnScrimClick, panelClassName, children }) {
-  const { mounted, visible } = usePresence(open, OVERLAY_EXIT_MS);
+  const { mounted, visible } = usePresence(open, variant === "sheet" ? SHEET_EXIT_MS : OVERLAY_EXIT_MS);
   const ref = useOverlay({ open, onClose });
   if (!mounted) return null;
   return reactDom.createPortal(