@ecohouse/ui 0.1.50 → 0.1.52

package/dist/index.js

@@ -35084,6 +35084,7 @@ var Drawer = forwardRef(function Drawer2({
   className
 }, forwardedRef) {
   const panelRef = useRef(null);
+  const shellRef = useRef(null);
   const setPanelRef = useMemo(() => mergeRefs(panelRef, forwardedRef), [forwardedRef]);
   const resolvedClassName = className?.trim() || void 0;
   const closeTimeoutRef = useRef(null);
@@ -35105,6 +35106,22 @@ var Drawer = forwardRef(function Drawer2({
       document.removeEventListener("keydown", onKeyDown);
     };
   }, [mounted, onClose]);
+  const targetWidth = Math.min(width, typeof window !== "undefined" ? window.innerWidth : width);
+  const playWidth = useCallback(
+    (target) => {
+      const shell = shellRef.current;
+      if (!shell) return;
+      const reduced = typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+      const duration = reduced ? 0 : animationDuration;
+      const from = shell.getBoundingClientRect().width;
+      shell.style.transition = "none";
+      shell.style.width = `${from}px`;
+      void shell.offsetWidth;
+      shell.style.transition = `width ${duration}ms cubic-bezier(0.32, 0.72, 0, 1)`;
+      shell.style.width = `${target}px`;
+    },
+    [animationDuration]
+  );
   useEffect(() => {
     if (Platform.OS !== "web") return void 0;
     if (closeTimeoutRef.current) {
@@ -35113,12 +35130,10 @@ var Drawer = forwardRef(function Drawer2({
     }
     if (open) {
       setMounted(true);
-      const frame = requestAnimationFrame(() => {
-        requestAnimationFrame(() => setEntered(true));
-      });
-      return () => cancelAnimationFrame(frame);
+      return void 0;
     }
     setEntered(false);
+    playWidth(0);
     closeTimeoutRef.current = setTimeout(() => {
       setMounted(false);
       closeTimeoutRef.current = null;
@@ -35129,7 +35144,22 @@ var Drawer = forwardRef(function Drawer2({
         closeTimeoutRef.current = null;
       }
     };
-  }, [open, animationDuration]);
+  }, [open, animationDuration, playWidth]);
+  useEffect(() => {
+    if (Platform.OS !== "web" || !mounted || !open) return void 0;
+    const shell = shellRef.current;
+    if (shell) {
+      shell.style.transition = "none";
+      shell.style.width = "0px";
+    }
+    const frame = requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        setEntered(true);
+        playWidth(targetWidth);
+      });
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [mounted, open, targetWidth, playWidth]);
   useEffect(() => {
     if (Platform.OS === "web") return void 0;
     if (open) {
@@ -35256,16 +35286,16 @@ var Drawer = forwardRef(function Drawer2({
             /* @__PURE__ */ jsx(
               "div",
               {
+                ref: shellRef,
                 onTransitionEnd: handleWebTransitionEnd,
                 style: {
                   position: "relative",
                   zIndex: 1,
                   height: "100%",
-                  width: entered ? Math.min(width, typeof window !== "undefined" ? window.innerWidth : width) : 0,
+                  flex: "0 0 auto",
                   minWidth: 0,
                   maxWidth: "100%",
                   overflow: "hidden",
-                  transition: `width ${animationDuration}ms cubic-bezier(0.32, 0.72, 0, 1)`,
                   willChange: "width",
                   boxSizing: "border-box"
                 },
@@ -35273,10 +35303,12 @@ var Drawer = forwardRef(function Drawer2({
                   "div",
                   {
                     style: {
-                      width,
+                      position: "absolute",
+                      top: 0,
+                      right: 0,
+                      bottom: 0,
+                      width: targetWidth,
                       maxWidth: "100%",
-                      height: "100%",
-                      marginLeft: "auto",
                       display: "flex",
                       flexDirection: "column"
                     },
@@ -35854,11 +35886,14 @@ var styles31 = StyleSheet.create({
     borderColor: colors.grey700,
     borderRadius: 16,
     backgroundColor: colors.grey700,
-    shadowColor: colors.black,
-    shadowOffset: { width: 0, height: 8 },
-    shadowOpacity: 0.4,
-    shadowRadius: 18,
-    elevation: 12
+    ...Platform.select({
+      web: {
+        boxShadow: `0 8px 18px ${colors.black}66`
+      },
+      default: {
+        elevation: 12
+      }
+    })
   },
   list: {
     maxHeight: MENU_MAX_HEIGHT