@seed-design/react-drawer 1.0.7 → 1.0.9

package/lib/index.d.ts

@@ -1,12 +1,35 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { PrimitiveProps } from '@seed-design/react-primitive';
-import * as react from 'react';
+import * as React$1 from 'react';
+import React__default from 'react';
 
+interface DrawerReasonToDetailMap {
+    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];
 interface UseDrawerProps {
     activeSnapPoint?: number | string | null;
     setActiveSnapPoint?: (snapPoint: number | string | null) => void;
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
     open?: boolean;
     /**
      * Number between 0 and 1 that determines when the drawer should be closed.
@@ -19,7 +42,7 @@ 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
@@ -40,8 +63,8 @@ interface UseDrawerProps {
      * @default true
      */
     dismissible?: boolean;
-    onDrag?: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
-    onRelease?: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void;
+    onDrag?: (event: React__default.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
+    onRelease?: (event: React__default.PointerEvent<HTMLDivElement>, open: boolean) => void;
     /**
      * When `false` it allows to interact with elements outside of the drawer without closing it.
      * @default true
@@ -106,21 +129,21 @@ interface UseDrawerProps {
 declare function useDrawer(props: UseDrawerProps): {
     activeSnapPoint: string | number | null;
     snapPoints: (string | number)[] | undefined;
-    setActiveSnapPoint: (value: react.SetStateAction<string | number | null>) => void;
-    drawerRef: react.RefObject<HTMLDivElement | null>;
-    overlayRef: react.RefObject<HTMLDivElement | null>;
+    setActiveSnapPoint: (value: string | number | ((prev: string | number | null) => string | number | null) | null, details?: undefined) => void;
+    drawerRef: React__default.RefObject<HTMLDivElement | null>;
+    overlayRef: React__default.RefObject<HTMLDivElement | null>;
     shouldOverlayAnimate: boolean;
-    onOpenChange: ((open: boolean) => void) | undefined;
-    onPress: (event: React.PointerEvent<HTMLDivElement>) => void;
-    onRelease: (event: React.PointerEvent<HTMLDivElement> | null) => void;
-    onDrag: (event: React.PointerEvent<HTMLDivElement>) => void;
+    onOpenChange: ((open: boolean, details?: DrawerChangeDetails) => void) | undefined;
+    onPress: (event: React__default.PointerEvent<HTMLDivElement>) => void;
+    onRelease: (event: React__default.PointerEvent<HTMLDivElement> | null) => void;
+    onDrag: (event: React__default.PointerEvent<HTMLDivElement>) => void;
     dismissible: boolean;
     handleOnly: boolean;
     isOpen: boolean;
     isDragging: boolean;
     shouldFade: boolean;
-    closeDrawer: (fromWithin?: boolean) => void;
-    keyboardIsOpen: react.RefObject<boolean>;
+    closeDrawer: (fromWithin?: boolean, details?: DrawerChangeDetails) => void;
+    keyboardIsOpen: React__default.RefObject<boolean>;
     modal: boolean;
     snapPointsOffset: number[];
     activeSnapPointIndex: number | null;
@@ -128,51 +151,77 @@ declare function useDrawer(props: UseDrawerProps): {
     noBodyStyles: boolean;
     container: HTMLElement | null | undefined;
     autoFocus: boolean;
-    setHasBeenOpened: react.Dispatch<react.SetStateAction<boolean>>;
-    setIsOpen: (value: react.SetStateAction<boolean>) => void;
+    setHasBeenOpened: React__default.Dispatch<React__default.SetStateAction<boolean>>;
+    setIsOpen: (value: boolean | ((prev: boolean) => boolean), details?: DrawerChangeDetails | undefined) => void;
     closeOnInteractOutside: boolean;
     closeOnEscape: boolean;
+    hasAnimationDone: boolean;
+    closeButtonRef: (node: HTMLButtonElement | null) => void;
+    isCloseButtonRendered: boolean;
 };
 
 interface DrawerRootProps extends UseDrawerProps {
-    children?: react.ReactNode;
+    children?: React$1.ReactNode;
 }
 declare const DrawerRoot: (props: DrawerRootProps) => react_jsx_runtime.JSX.Element;
 interface DrawerTriggerProps extends DialogPrimitive.DialogTriggerProps {
 }
-declare const DrawerTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
-interface DrawerPositionerProps extends PrimitiveProps, react.HTMLAttributes<HTMLDivElement> {
+declare const DrawerTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+interface DrawerPositionerProps extends PrimitiveProps, React$1.HTMLAttributes<HTMLDivElement> {
 }
-declare const DrawerPositioner: react.ForwardRefExoticComponent<DrawerPositionerProps & react.RefAttributes<HTMLDivElement>>;
-interface DrawerBackdropProps extends DialogPrimitive.DialogOverlayProps, react.HTMLAttributes<HTMLDivElement> {
+declare const DrawerPositioner: React$1.ForwardRefExoticComponent<DrawerPositionerProps & React$1.RefAttributes<HTMLDivElement>>;
+interface DrawerBackdropProps extends DialogPrimitive.DialogOverlayProps, React$1.HTMLAttributes<HTMLDivElement> {
 }
-declare const DrawerBackdrop: react.ForwardRefExoticComponent<DrawerBackdropProps & react.RefAttributes<HTMLDivElement>>;
-interface DrawerContentProps extends DialogPrimitive.DialogContentProps, react.HTMLAttributes<HTMLDivElement> {
+declare const DrawerBackdrop: React$1.ForwardRefExoticComponent<DrawerBackdropProps & React$1.RefAttributes<HTMLDivElement>>;
+interface DrawerContentProps extends DialogPrimitive.DialogContentProps, React$1.HTMLAttributes<HTMLDivElement> {
 }
-declare const DrawerContent: react.ForwardRefExoticComponent<DrawerContentProps & react.RefAttributes<HTMLDivElement>>;
+declare const DrawerContent: React$1.ForwardRefExoticComponent<DrawerContentProps & React$1.RefAttributes<HTMLDivElement>>;
 interface DrawerTitleProps extends DialogPrimitive.DialogTitleProps {
 }
-declare const DrawerTitle: react.ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+declare const DrawerTitle: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>>;
 interface DrawerDescriptionProps extends DialogPrimitive.DialogDescriptionProps {
 }
-declare const DrawerDescription: react.ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+declare const DrawerDescription: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>>;
+interface DrawerHeaderProps extends PrimitiveProps, React$1.HTMLAttributes<HTMLDivElement> {
+}
+declare const DrawerHeader: React$1.ForwardRefExoticComponent<DrawerHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
 interface DrawerCloseButtonProps extends DialogPrimitive.DialogCloseProps {
 }
-declare const DrawerCloseButton: react.ForwardRefExoticComponent<DrawerCloseButtonProps & react.RefAttributes<HTMLButtonElement>>;
-interface DrawerHandleProps extends react.HTMLAttributes<HTMLDivElement> {
+declare const DrawerCloseButton: React$1.ForwardRefExoticComponent<DrawerCloseButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+interface DrawerHandleProps extends React$1.HTMLAttributes<HTMLDivElement> {
     preventCycle?: boolean;
 }
-declare const DrawerHandle: react.ForwardRefExoticComponent<DrawerHandleProps & react.RefAttributes<HTMLDivElement>>;
+declare const DrawerHandle: React$1.ForwardRefExoticComponent<DrawerHandleProps & React$1.RefAttributes<HTMLDivElement>>;
 
 type DrawerContextValue = ReturnType<typeof useDrawer>;
 declare function useDrawerContext(): {
     activeSnapPoint: string | number | null;
     snapPoints: (string | number)[] | undefined;
-    setActiveSnapPoint: (value: react.SetStateAction<string | number | null>) => void;
-    drawerRef: react.RefObject<HTMLDivElement | null>;
-    overlayRef: react.RefObject<HTMLDivElement | null>;
+    setActiveSnapPoint: (value: string | number | ((prev: string | number | null) => string | number | null) | null, details?: undefined) => void;
+    drawerRef: React$1.RefObject<HTMLDivElement | null>;
+    overlayRef: React$1.RefObject<HTMLDivElement | null>;
     shouldOverlayAnimate: boolean;
-    onOpenChange: ((open: boolean) => void) | undefined;
+    onOpenChange: ((open: boolean, details?: ({
+        reason?: "closeButton" | undefined;
+    } & {
+        event: MouseEvent;
+    }) | ({
+        reason?: "escapeKeyDown" | undefined;
+    } & {
+        event: KeyboardEvent;
+    }) | ({
+        reason?: "interactOutside" | undefined;
+    } & {
+        event: PointerEvent | FocusEvent;
+    }) | ({
+        reason?: "drag" | undefined;
+    } & {
+        event: PointerEvent;
+    }) | ({
+        reason?: "handleClickOnLastSnapPoint" | undefined;
+    } & {
+        event: MouseEvent;
+    })) => void) | undefined;
     onPress: (event: React.PointerEvent<HTMLDivElement>) => void;
     onRelease: (event: React.PointerEvent<HTMLDivElement> | null) => void;
     onDrag: (event: React.PointerEvent<HTMLDivElement>) => void;
@@ -181,8 +230,28 @@ declare function useDrawerContext(): {
     isOpen: boolean;
     isDragging: boolean;
     shouldFade: boolean;
-    closeDrawer: (fromWithin?: boolean) => void;
-    keyboardIsOpen: react.RefObject<boolean>;
+    closeDrawer: (fromWithin?: boolean, details?: ({
+        reason?: "closeButton" | undefined;
+    } & {
+        event: MouseEvent;
+    }) | ({
+        reason?: "escapeKeyDown" | undefined;
+    } & {
+        event: KeyboardEvent;
+    }) | ({
+        reason?: "interactOutside" | undefined;
+    } & {
+        event: PointerEvent | FocusEvent;
+    }) | ({
+        reason?: "drag" | undefined;
+    } & {
+        event: PointerEvent;
+    }) | ({
+        reason?: "handleClickOnLastSnapPoint" | undefined;
+    } & {
+        event: MouseEvent;
+    })) => void;
+    keyboardIsOpen: React$1.RefObject<boolean>;
     modal: boolean;
     snapPointsOffset: number[];
     activeSnapPointIndex: number | null;
@@ -190,16 +259,39 @@ declare function useDrawerContext(): {
     noBodyStyles: boolean;
     container: HTMLElement | null | undefined;
     autoFocus: boolean;
-    setHasBeenOpened: react.Dispatch<react.SetStateAction<boolean>>;
-    setIsOpen: (value: react.SetStateAction<boolean>) => void;
+    setHasBeenOpened: React$1.Dispatch<React$1.SetStateAction<boolean>>;
+    setIsOpen: (value: boolean | ((prev: boolean) => boolean), details?: (({
+        reason?: "closeButton" | undefined;
+    } & {
+        event: MouseEvent;
+    }) | ({
+        reason?: "escapeKeyDown" | undefined;
+    } & {
+        event: KeyboardEvent;
+    }) | ({
+        reason?: "interactOutside" | undefined;
+    } & {
+        event: PointerEvent | FocusEvent;
+    }) | ({
+        reason?: "drag" | undefined;
+    } & {
+        event: PointerEvent;
+    }) | ({
+        reason?: "handleClickOnLastSnapPoint" | undefined;
+    } & {
+        event: MouseEvent;
+    })) | undefined) => void;
     closeOnInteractOutside: boolean;
     closeOnEscape: boolean;
+    hasAnimationDone: boolean;
+    closeButtonRef: (node: HTMLButtonElement | null) => void;
+    isCloseButtonRendered: boolean;
 };
 
 declare namespace Drawer_namespace {
-  export { DrawerBackdrop as Backdrop, DrawerCloseButton as CloseButton, DrawerContent as Content, DrawerDescription as Description, DrawerHandle as Handle, DrawerPositioner as Positioner, DrawerRoot as Root, DrawerTitle as Title, DrawerTrigger as Trigger };
-  export type { DrawerBackdropProps as BackdropProps, DrawerCloseButtonProps as CloseButtonProps, DrawerContentProps as ContentProps, DrawerDescriptionProps as DescriptionProps, DrawerHandleProps as HandleProps, DrawerPositionerProps as PositionerProps, DrawerRootProps as RootProps, DrawerTitleProps as TitleProps, DrawerTriggerProps as TriggerProps };
+  export { DrawerBackdrop as Backdrop, DrawerCloseButton as CloseButton, DrawerContent as Content, DrawerDescription as Description, DrawerHandle as Handle, DrawerHeader as Header, DrawerPositioner as Positioner, DrawerRoot as Root, DrawerTitle as Title, DrawerTrigger as Trigger };
+  export type { DrawerBackdropProps as BackdropProps, DrawerCloseButtonProps as CloseButtonProps, DrawerContentProps as ContentProps, DrawerDescriptionProps as DescriptionProps, DrawerHandleProps as HandleProps, DrawerHeaderProps as HeaderProps, DrawerPositionerProps as PositionerProps, DrawerRootProps as RootProps, DrawerTitleProps as TitleProps, DrawerTriggerProps as TriggerProps };
 }
 
-export { Drawer_namespace as Drawer, DrawerBackdrop, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerHandle, DrawerPositioner, DrawerRoot, DrawerTitle, DrawerTrigger, useDrawer, useDrawerContext };
-export type { DrawerBackdropProps, DrawerCloseButtonProps, DrawerContentProps, DrawerContextValue, DrawerDescriptionProps, DrawerHandleProps, DrawerPositionerProps, DrawerRootProps, DrawerTitleProps, DrawerTriggerProps, UseDrawerProps };
+export { Drawer_namespace as Drawer, DrawerBackdrop, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerHandle, DrawerHeader, DrawerPositioner, DrawerRoot, DrawerTitle, DrawerTrigger, useDrawer, useDrawerContext };
+export type { DrawerBackdropProps, DrawerCloseButtonProps, DrawerContentProps, DrawerContextValue, DrawerDescriptionProps, DrawerHandleProps, DrawerHeaderProps, DrawerPositionerProps, DrawerRootProps, DrawerTitleProps, DrawerTriggerProps, UseDrawerProps };

package/lib/index.js

@@ -1,5 +1,5 @@
-import { D as DrawerBackdrop, a as DrawerCloseButton, b as DrawerContent, c as DrawerDescription, d as DrawerHandle, e as DrawerPositioner, f as DrawerRoot, g as DrawerTitle, h as DrawerTrigger } from './Drawer-12s-1gup1cyj.js';
-export { u as useDrawer, i as useDrawerContext } from './Drawer-12s-1gup1cyj.js';
+import { D as DrawerBackdrop, a as DrawerCloseButton, b as DrawerContent, c as DrawerDescription, d as DrawerHandle, e as DrawerHeader, f as DrawerPositioner, g as DrawerRoot, h as DrawerTitle, i as DrawerTrigger } from './Drawer-12s-B-JAOvwq.js';
+export { u as useDrawer, j as useDrawerContext } from './Drawer-12s-B-JAOvwq.js';
 
 var Drawer_namespace = {
   __proto__: null,
@@ -8,10 +8,11 @@ var Drawer_namespace = {
   Content: DrawerContent,
   Description: DrawerDescription,
   Handle: DrawerHandle,
+  Header: DrawerHeader,
   Positioner: DrawerPositioner,
   Root: DrawerRoot,
   Title: DrawerTitle,
   Trigger: DrawerTrigger
 };
 
-export { Drawer_namespace as Drawer, DrawerBackdrop, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerHandle, DrawerPositioner, DrawerRoot, DrawerTitle, DrawerTrigger };
+export { Drawer_namespace as Drawer, DrawerBackdrop, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerHandle, DrawerHeader, DrawerPositioner, DrawerRoot, DrawerTitle, DrawerTrigger };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react-drawer",
-  "version": "1.0.7",
+  "version": "1.0.9",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -30,7 +30,7 @@
     "@radix-ui/react-compose-refs": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-use-callback-ref": "^1.1.0",
-    "@radix-ui/react-use-controllable-state": "^1.2.2",
+    "@seed-design/react-use-controllable-state": "1.0.0",
     "@seed-design/dom-utils": "1.0.0",
     "@seed-design/react-primitive": "1.0.0"
   },

package/src/Drawer.namespace.ts

@@ -4,6 +4,7 @@ export {
   DrawerContent as Content,
   DrawerDescription as Description,
   DrawerHandle as Handle,
+  DrawerHeader as Header,
   DrawerPositioner as Positioner,
   DrawerRoot as Root,
   DrawerTitle as Title,
@@ -13,6 +14,7 @@ export {
   type DrawerContentProps as ContentProps,
   type DrawerDescriptionProps as DescriptionProps,
   type DrawerHandleProps as HandleProps,
+  type DrawerHeaderProps as HeaderProps,
   type DrawerPositionerProps as PositionerProps,
   type DrawerRootProps as RootProps,
   type DrawerTitleProps as TitleProps,

package/src/Drawer.tsx

@@ -64,13 +64,20 @@ export interface DrawerBackdropProps
     React.HTMLAttributes<HTMLDivElement> {}
 
 export const DrawerBackdrop = forwardRef<HTMLDivElement, DrawerBackdropProps>((props, ref) => {
-  const { overlayRef, onRelease, modal, snapPoints, isOpen, shouldFade, shouldOverlayAnimate } =
-    useDrawerContext();
+  const {
+    overlayRef,
+    onRelease,
+    modal,
+    snapPoints,
+    isOpen,
+    shouldFade,
+    shouldOverlayAnimate,
+    hasAnimationDone,
+  } = useDrawerContext();
   const composedRef = useComposedRefs(ref, overlayRef);
   const hasSnapPoints = snapPoints && snapPoints.length > 0;
   const onMouseUp = useCallbackRef((event: React.PointerEvent<HTMLDivElement>) => onRelease(event));
 
-  // Overlay is the component that is locking scroll, removing it will unlock the scroll without having to dig into Radix's Dialog library
   if (!modal) {
     return null;
   }
@@ -83,6 +90,7 @@ export const DrawerBackdrop = forwardRef<HTMLDivElement, DrawerBackdropProps>((p
       data-snap-points-overlay={isOpen && shouldFade ? "true" : "false"}
       data-should-overlay-animate={shouldOverlayAnimate ? "true" : "false"}
       data-open={dataAttr(isOpen)}
+      data-animation-done={hasAnimationDone ? "true" : "false"}
       {...props}
     />
   );
@@ -114,6 +122,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>((pro
     closeOnInteractOutside,
     closeOnEscape,
     dismissible,
+    hasAnimationDone,
   } = useDrawerContext();
   // Needed to use transition instead of animations
   const [delayedSnapPoints, setDelayedSnapPoints] = useState(false);
@@ -170,6 +179,7 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>((pro
       data-delayed-snap-points={delayedSnapPoints ? "true" : "false"}
       data-drawer-direction={direction}
       data-open={dataAttr(isOpen)}
+      data-animation-done={hasAnimationDone ? "true" : "false"}
       data-drawer=""
       data-snap-points={isOpen && hasSnapPoints ? "true" : "false"}
       data-custom-container={container ? "true" : "false"}
@@ -253,13 +263,13 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>((pro
       onInteractOutside={(e) => {
         // Only close if event is not prevented (e.g., by onFocusOutside or onPointerDownOutside)
         if (dismissible && closeOnInteractOutside && !e.defaultPrevented) {
-          closeDrawer();
+          closeDrawer(false, { reason: "interactOutside", event: e.detail.originalEvent });
         }
         props.onInteractOutside?.(e);
       }}
       onEscapeKeyDown={(e) => {
         if (dismissible && closeOnEscape) {
-          closeDrawer();
+          closeDrawer(false, { reason: "escapeKeyDown", event: e });
         }
         props.onEscapeKeyDown?.(e);
       }}
@@ -276,19 +286,30 @@ export interface DrawerDescriptionProps extends DialogPrimitive.DialogDescriptio
 
 export const DrawerDescription = DialogPrimitive.Description;
 
+export interface DrawerHeaderProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const DrawerHeader = forwardRef<HTMLDivElement, DrawerHeaderProps>((props, ref) => {
+  const { isCloseButtonRendered } = useDrawerContext();
+  return (
+    <Primitive.div ref={ref} data-show-close-button={dataAttr(isCloseButtonRendered)} {...props} />
+  );
+});
+DrawerHeader.displayName = "DrawerHeader";
+
 export interface DrawerCloseButtonProps extends DialogPrimitive.DialogCloseProps {}
 
 export const DrawerCloseButton = forwardRef<HTMLButtonElement, DrawerCloseButtonProps>(
   (props, ref) => {
-    const api = useDrawerContext();
+    const { closeButtonRef, setIsOpen } = useDrawerContext();
+    const composedRef = useComposedRefs(ref, closeButtonRef);
     return (
       <Primitive.button
-        ref={ref}
+        ref={composedRef}
         {...props}
         onClick={(e) => {
           props.onClick?.(e);
           if (e.defaultPrevented) return;
-          api.setIsOpen(false);
+          setIsOpen(false, { reason: "closeButton", event: e.nativeEvent });
         }}
       />
     );
@@ -321,18 +342,18 @@ export const DrawerHandle = forwardRef<HTMLDivElement, DrawerHandleProps>((props
   const closeTimeoutIdRef = useRef<number | null>(null);
   const shouldCancelInteractionRef = useRef(false);
 
-  function handleStartCycle() {
+  function handleStartCycle(event: React.MouseEvent<HTMLDivElement>) {
     // Stop if this is the second click of a double click
     if (shouldCancelInteractionRef.current) {
       handleCancelInteraction();
       return;
     }
     window.setTimeout(() => {
-      handleCycleSnapPoints();
+      handleCycleSnapPoints(event);
     }, DOUBLE_TAP_TIMEOUT);
   }
 
-  function handleCycleSnapPoints() {
+  function handleCycleSnapPoints(event: React.MouseEvent<HTMLDivElement>) {
     // Prevent accidental taps while resizing drawer
     if (isDragging || preventCycle || shouldCancelInteractionRef.current) {
       handleCancelInteraction();
@@ -343,7 +364,7 @@ export const DrawerHandle = forwardRef<HTMLDivElement, DrawerHandleProps>((props
 
     if (!snapPoints || snapPoints.length === 0) {
       if (!dismissible) {
-        closeDrawer();
+        closeDrawer(false, { reason: "handleClickOnLastSnapPoint", event: event.nativeEvent });
       }
       return;
     }
@@ -351,7 +372,7 @@ export const DrawerHandle = forwardRef<HTMLDivElement, DrawerHandleProps>((props
     const isLastSnapPoint = activeSnapPoint === snapPoints[snapPoints.length - 1];
 
     if (isLastSnapPoint && dismissible) {
-      closeDrawer();
+      closeDrawer(false, { reason: "handleClickOnLastSnapPoint", event: event.nativeEvent });
       return;
     }
 

package/src/browser.ts

@@ -30,6 +30,13 @@ export function isIOS(): boolean | undefined {
   return isIPhone() || isIPad();
 }
 
+export function isAndroid(): boolean | undefined {
+  if (typeof window === "undefined" || typeof navigator === "undefined") return false;
+
+  return /Android/.test(navigator.userAgent);
+}
+
+// TODO: use userAgent instead?
 export function testPlatform(re: RegExp): boolean | undefined {
   return typeof window !== "undefined" && window.navigator != null
     ? re.test(window.navigator.platform)

package/src/index.ts

@@ -4,6 +4,7 @@ export {
   DrawerContent,
   DrawerDescription,
   DrawerHandle,
+  DrawerHeader,
   DrawerPositioner,
   DrawerRoot,
   DrawerTitle,
@@ -13,6 +14,7 @@ export {
   type DrawerContentProps,
   type DrawerDescriptionProps,
   type DrawerHandleProps,
+  type DrawerHeaderProps,
   type DrawerPositionerProps,
   type DrawerRootProps,
   type DrawerTitleProps,

package/src/use-snap-points.ts

@@ -1,4 +1,4 @@
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { useControllableState } from "@seed-design/react-use-controllable-state";
 import React from "react";
 import { TRANSITIONS, VELOCITY_THRESHOLD } from "./constants";
 import { isVertical, set } from "./helpers";
@@ -196,11 +196,13 @@ export function useSnapPoints({
     closeDrawer,
     velocity,
     dismissible,
+    event,
   }: {
     draggedDistance: number;
-    closeDrawer: () => void;
+    closeDrawer: (fromWithin: boolean, details: { reason: "drag"; event: PointerEvent }) => void;
     velocity: number;
     dismissible: boolean;
+    event: PointerEvent;
   }) {
     if (fadeFromIndex === undefined) return;
 
@@ -219,7 +221,7 @@ export function useSnapPoints({
     }
 
     if (!snapToSequentialPoint && velocity > 2 && !hasDraggedUp) {
-      if (dismissible) closeDrawer();
+      if (dismissible) closeDrawer(false, { reason: "drag", event });
       else snapToPoint(snapPointsOffset[0]); // snap to initial point
       return;
     }
@@ -247,7 +249,7 @@ export function useSnapPoints({
       }
 
       if (isFirst && dragDirection < 0 && dismissible) {
-        closeDrawer();
+        closeDrawer(false, { reason: "drag", event });
       }
 
       if (activeSnapPointIndex === null) return;