@seed-design/react-drawer 1.0.7 → 1.0.9

package/src/useDrawer.ts

@@ -1,6 +1,7 @@
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useControllableState } from "@seed-design/react-use-controllable-state";
+import type React from "react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { isIOS, isMobileFirefox } from "./browser";
+import { isAndroid, isIOS, isMobileFirefox } from "./browser";
 import {
   CLOSE_THRESHOLD,
   DRAG_CLASS,
@@ -13,6 +14,21 @@ import { dampenValue, getTranslate, isInput, isVertical, reset, set } from "./he
 import { usePositionFixed } from "./use-position-fixed";
 import { useSnapPoints } from "./use-snap-points";
 
+interface DrawerReasonToDetailMap {
+  // we might add synthetic events later if needed; currently we aim consistency; DismissableLayer gives us native events
+  closeButton: { event: MouseEvent };
+  escapeKeyDown: { event: KeyboardEvent };
+  interactOutside: { event: PointerEvent | FocusEvent };
+  drag: { event: PointerEvent };
+  handleClickOnLastSnapPoint: { event: MouseEvent };
+}
+
+type DrawerChangeDetails = {
+  [R in keyof DrawerReasonToDetailMap]: {
+    reason?: R;
+  } & DrawerReasonToDetailMap[R];
+}[keyof DrawerReasonToDetailMap];
+
 export interface UseDrawerProps {
   activeSnapPoint?: number | string | null;
   setActiveSnapPoint?: (snapPoint: number | string | null) => void;
@@ -29,7 +45,7 @@ export interface UseDrawerProps {
    * @default true
    */
   noBodyStyles?: boolean;
-  onOpenChange?: (open: boolean) => void;
+  onOpenChange?: (open: boolean, details?: DrawerChangeDetails) => void;
   /**
    * Duration for which the drawer is not draggable after scrolling content inside of the drawer.
    * @default 500ms
@@ -149,11 +165,11 @@ export function useDrawer(props: UseDrawerProps) {
     closeOnEscape = true,
   } = props;
 
-  const [isOpen = false, setIsOpen] = useControllableState({
+  const [isOpen = false, setIsOpen] = useControllableState<boolean, DrawerChangeDetails>({
     defaultProp: defaultOpen,
     prop: openProp,
-    onChange: (o: boolean) => {
-      onOpenChange?.(o);
+    onChange: (o: boolean, details?: DrawerChangeDetails) => {
+      onOpenChange?.(o, details);
 
       if (!o && !nested) {
         restorePositionSetting();
@@ -178,9 +194,15 @@ export function useDrawer(props: UseDrawerProps) {
   });
 
   const [hasBeenOpened, setHasBeenOpened] = useState<boolean>(false);
+  const [hasAnimationDone, setHasAnimationDone] = useState<boolean>(false);
   const [isDragging, setIsDragging] = useState<boolean>(false);
   const [shouldOverlayAnimate, setShouldOverlayAnimate] = useState<boolean>(false);
 
+  const [isCloseButtonRendered, setIsCloseButtonRendered] = useState<boolean>(false);
+  const closeButtonRef = useCallback((node: HTMLButtonElement | null) => {
+    setIsCloseButtonRendered(!!node);
+  }, []);
+
   const overlayRef = useRef<HTMLDivElement>(null);
   const openTime = useRef<Date | null>(null);
   const dragStartTime = useRef<Date | null>(null);
@@ -419,12 +441,12 @@ export function useDrawer(props: UseDrawerProps) {
   }, [isDragging]);
 
   const closeDrawer = useCallback(
-    (fromWithin?: boolean) => {
+    (fromWithin?: boolean, details?: DrawerChangeDetails) => {
       cancelDrag();
       onClose?.();
 
       if (!fromWithin) {
-        setIsOpen(false);
+        setIsOpen(false, details);
       }
 
       if (fadeFromIndex !== undefined && fadeFromIndex > 0 && activeSnapPointIndex === 0) {
@@ -489,6 +511,7 @@ export function useDrawer(props: UseDrawerProps) {
         closeDrawer,
         velocity,
         dismissible,
+        event: event.nativeEvent,
       });
       onReleaseProp?.(event, true);
       return;
@@ -501,7 +524,7 @@ export function useDrawer(props: UseDrawerProps) {
     }
 
     if (velocity > VELOCITY_THRESHOLD) {
-      closeDrawer();
+      closeDrawer(false, { reason: "drag", event: event.nativeEvent });
       onReleaseProp?.(event, false);
       return;
     }
@@ -520,7 +543,7 @@ export function useDrawer(props: UseDrawerProps) {
       Math.abs(swipeAmount) >=
       (isHorizontalSwipe ? visibleDrawerWidth : visibleDrawerHeight) * closeThreshold
     ) {
-      closeDrawer();
+      closeDrawer(false, { reason: "drag", event: event.nativeEvent });
       onReleaseProp?.(event, false);
       return;
     }
@@ -583,7 +606,7 @@ export function useDrawer(props: UseDrawerProps) {
           } else {
             drawerRef.current.style.height = `${Math.max(newDrawerHeight, visualViewportHeight - offsetFromTop)}px`;
           }
-        } else if (!isMobileFirefox()) {
+        } else if (!isMobileFirefox() && !isAndroid()) {
           drawerRef.current.style.height = `${initialDrawerHeight.current}px`;
         }
 
@@ -607,12 +630,32 @@ export function useDrawer(props: UseDrawerProps) {
     }
   }, [modal]);
 
+  // Effect 1: Track drawer open state
   useEffect(() => {
     if (isOpen) {
       setHasBeenOpened(true);
     }
   }, [isOpen]);
 
+  // Effect 2: Handle animation state and timer
+  useEffect(() => {
+    if (isOpen) {
+      // Only reset animation state if this is the first open
+      if (!hasBeenOpened) {
+        setHasAnimationDone(false);
+      }
+
+      const timeoutId = setTimeout(() => {
+        setHasAnimationDone(true);
+      }, TRANSITIONS.ENTER_DURATION * 1000);
+
+      return () => clearTimeout(timeoutId);
+    }
+
+    // Reset animation state when drawer closes
+    setHasAnimationDone(false);
+  }, [isOpen, hasBeenOpened]);
+
   useEffect(() => {
     if (isOpen && snapPoints && fadeFromIndex === 0) {
       setShouldOverlayAnimate(true);
@@ -657,6 +700,9 @@ export function useDrawer(props: UseDrawerProps) {
       setIsOpen,
       closeOnInteractOutside,
       closeOnEscape,
+      hasAnimationDone,
+      closeButtonRef,
+      isCloseButtonRendered,
     }),
     [
       activeSnapPoint,
@@ -683,6 +729,9 @@ export function useDrawer(props: UseDrawerProps) {
       onRelease,
       onDrag,
       onPress,
+      hasAnimationDone,
+      closeButtonRef,
+      isCloseButtonRendered,
     ],
   );
 }