@seed-design/react-drawer 1.0.6 → 1.0.8

package/lib/{Drawer-12s-DriAYAR2.cjs → Drawer-12s-DXUv7jE4.cjs}

@@ -6,7 +6,7 @@ var reactUseCallbackRef = require('@radix-ui/react-use-callback-ref');
 var domUtils = require('@seed-design/dom-utils');
 var reactPrimitive = require('@seed-design/react-primitive');
 var React = require('react');
-var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
+var reactUseControllableState = require('@seed-design/react-use-controllable-state');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -380,7 +380,7 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
         snapPointsOffset,
         snapToPoint
     ]);
-    function onRelease({ draggedDistance, closeDrawer, velocity, dismissible }) {
+    function onRelease({ draggedDistance, closeDrawer, velocity, dismissible, event }) {
         if (fadeFromIndex === undefined) return;
         const currentPosition = direction === "bottom" || direction === "right" ? (activeSnapPointOffset ?? 0) - draggedDistance : (activeSnapPointOffset ?? 0) + draggedDistance;
         const isOverlaySnapPoint = activeSnapPointIndex === fadeFromIndex - 1;
@@ -392,7 +392,10 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
             });
         }
         if (!snapToSequentialPoint && velocity > 2 && !hasDraggedUp) {
-            if (dismissible) closeDrawer();
+            if (dismissible) closeDrawer(false, {
+                reason: "drag",
+                event
+            });
             else snapToPoint(snapPointsOffset[0]); // snap to initial point
             return;
         }
@@ -414,7 +417,10 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
                 return;
             }
             if (isFirst && dragDirection < 0 && dismissible) {
-                closeDrawer();
+                closeDrawer(false, {
+                    reason: "drag",
+                    event
+                });
             }
             if (activeSnapPointIndex === null) return;
             snapToPoint(snapPointsOffset[activeSnapPointIndex + dragDirection]);
@@ -484,8 +490,8 @@ function useDrawer(props) {
     const [isOpen = false, setIsOpen] = reactUseControllableState.useControllableState({
         defaultProp: defaultOpen,
         prop: openProp,
-        onChange: (o)=>{
-            onOpenChange?.(o);
+        onChange: (o, details)=>{
+            onOpenChange?.(o, details);
             if (!o && !nested) {
                 restorePositionSetting();
             }
@@ -680,11 +686,11 @@ function useDrawer(props) {
     }, [
         isDragging
     ]);
-    const closeDrawer = React.useCallback((fromWithin)=>{
+    const closeDrawer = React.useCallback((fromWithin, details)=>{
         cancelDrag();
         onClose?.();
         if (!fromWithin) {
-            setIsOpen(false);
+            setIsOpen(false, details);
         }
         if (fadeFromIndex !== undefined && fadeFromIndex > 0 && activeSnapPointIndex === 0) {
             set(overlayRef.current, {
@@ -734,7 +740,8 @@ function useDrawer(props) {
                 draggedDistance: distMoved * directionMultiplier,
                 closeDrawer,
                 velocity,
-                dismissible
+                dismissible,
+                event: event.nativeEvent
             });
             onReleaseProp?.(event, true);
             return;
@@ -745,7 +752,10 @@ function useDrawer(props) {
             return;
         }
         if (velocity > VELOCITY_THRESHOLD) {
-            closeDrawer();
+            closeDrawer(false, {
+                reason: "drag",
+                event: event.nativeEvent
+            });
             onReleaseProp?.(event, false);
             return;
         }
@@ -753,7 +763,10 @@ function useDrawer(props) {
         const visibleDrawerWidth = Math.min(drawerRef.current.getBoundingClientRect().width ?? 0, window.innerWidth);
         const isHorizontalSwipe = direction === "left" || direction === "right";
         if (Math.abs(swipeAmount) >= (isHorizontalSwipe ? visibleDrawerWidth : visibleDrawerHeight) * closeThreshold) {
-            closeDrawer();
+            closeDrawer(false, {
+                reason: "drag",
+                event: event.nativeEvent
+            });
             onReleaseProp?.(event, false);
             return;
         }
@@ -1129,13 +1142,19 @@ const DrawerContent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         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);
         }
@@ -1162,7 +1181,10 @@ const DrawerCloseButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         onClick: (e)=>{
             props.onClick?.(e);
             if (e.defaultPrevented) return;
-            setIsOpen(false);
+            setIsOpen(false, {
+                reason: "closeButton",
+                event: e.nativeEvent
+            });
         }
     });
 });
@@ -1173,17 +1195,17 @@ const DrawerHandle = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const { closeDrawer, isDragging, snapPoints, activeSnapPoint, setActiveSnapPoint, dismissible, handleOnly, isOpen, onPress, onDrag, onRelease } = useDrawerContext();
     const closeTimeoutIdRef = React.useRef(null);
     const shouldCancelInteractionRef = React.useRef(false);
-    function handleStartCycle() {
+    function handleStartCycle(event) {
         // 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) {
         // Prevent accidental taps while resizing drawer
         if (isDragging || preventCycle || shouldCancelInteractionRef.current) {
             handleCancelInteraction();
@@ -1193,13 +1215,19 @@ const DrawerHandle = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         handleCancelInteraction();
         if (!snapPoints || snapPoints.length === 0) {
             if (!dismissible) {
-                closeDrawer();
+                closeDrawer(false, {
+                    reason: "handleClickOnLastSnapPoint",
+                    event: event.nativeEvent
+                });
             }
             return;
         }
         const isLastSnapPoint = activeSnapPoint === snapPoints[snapPoints.length - 1];
         if (isLastSnapPoint && dismissible) {
-            closeDrawer();
+            closeDrawer(false, {
+                reason: "handleClickOnLastSnapPoint",
+                event: event.nativeEvent
+            });
             return;
         }
         const currentSnapIndex = snapPoints.findIndex((point)=>point === activeSnapPoint);

package/lib/{Drawer-12s-BdeYHia6.js → Drawer-12s-DnXlK1K0.js}

@@ -6,7 +6,7 @@ import { useCallbackRef } from '@radix-ui/react-use-callback-ref';
 import { dataAttr } from '@seed-design/dom-utils';
 import { Primitive } from '@seed-design/react-primitive';
 import React, { useState, useCallback, useRef, useEffect, useMemo, createContext, useContext, forwardRef } from 'react';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import { useControllableState } from '@seed-design/react-use-controllable-state';
 
 function isMobileFirefox() {
     if (typeof window === "undefined" || typeof navigator === "undefined") return false;
@@ -357,7 +357,7 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
         snapPointsOffset,
         snapToPoint
     ]);
-    function onRelease({ draggedDistance, closeDrawer, velocity, dismissible }) {
+    function onRelease({ draggedDistance, closeDrawer, velocity, dismissible, event }) {
         if (fadeFromIndex === undefined) return;
         const currentPosition = direction === "bottom" || direction === "right" ? (activeSnapPointOffset ?? 0) - draggedDistance : (activeSnapPointOffset ?? 0) + draggedDistance;
         const isOverlaySnapPoint = activeSnapPointIndex === fadeFromIndex - 1;
@@ -369,7 +369,10 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
             });
         }
         if (!snapToSequentialPoint && velocity > 2 && !hasDraggedUp) {
-            if (dismissible) closeDrawer();
+            if (dismissible) closeDrawer(false, {
+                reason: "drag",
+                event
+            });
             else snapToPoint(snapPointsOffset[0]); // snap to initial point
             return;
         }
@@ -391,7 +394,10 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
                 return;
             }
             if (isFirst && dragDirection < 0 && dismissible) {
-                closeDrawer();
+                closeDrawer(false, {
+                    reason: "drag",
+                    event
+                });
             }
             if (activeSnapPointIndex === null) return;
             snapToPoint(snapPointsOffset[activeSnapPointIndex + dragDirection]);
@@ -461,8 +467,8 @@ function useDrawer(props) {
     const [isOpen = false, setIsOpen] = useControllableState({
         defaultProp: defaultOpen,
         prop: openProp,
-        onChange: (o)=>{
-            onOpenChange?.(o);
+        onChange: (o, details)=>{
+            onOpenChange?.(o, details);
             if (!o && !nested) {
                 restorePositionSetting();
             }
@@ -657,11 +663,11 @@ function useDrawer(props) {
     }, [
         isDragging
     ]);
-    const closeDrawer = useCallback((fromWithin)=>{
+    const closeDrawer = useCallback((fromWithin, details)=>{
         cancelDrag();
         onClose?.();
         if (!fromWithin) {
-            setIsOpen(false);
+            setIsOpen(false, details);
         }
         if (fadeFromIndex !== undefined && fadeFromIndex > 0 && activeSnapPointIndex === 0) {
             set(overlayRef.current, {
@@ -711,7 +717,8 @@ function useDrawer(props) {
                 draggedDistance: distMoved * directionMultiplier,
                 closeDrawer,
                 velocity,
-                dismissible
+                dismissible,
+                event: event.nativeEvent
             });
             onReleaseProp?.(event, true);
             return;
@@ -722,7 +729,10 @@ function useDrawer(props) {
             return;
         }
         if (velocity > VELOCITY_THRESHOLD) {
-            closeDrawer();
+            closeDrawer(false, {
+                reason: "drag",
+                event: event.nativeEvent
+            });
             onReleaseProp?.(event, false);
             return;
         }
@@ -730,7 +740,10 @@ function useDrawer(props) {
         const visibleDrawerWidth = Math.min(drawerRef.current.getBoundingClientRect().width ?? 0, window.innerWidth);
         const isHorizontalSwipe = direction === "left" || direction === "right";
         if (Math.abs(swipeAmount) >= (isHorizontalSwipe ? visibleDrawerWidth : visibleDrawerHeight) * closeThreshold) {
-            closeDrawer();
+            closeDrawer(false, {
+                reason: "drag",
+                event: event.nativeEvent
+            });
             onReleaseProp?.(event, false);
             return;
         }
@@ -1106,13 +1119,19 @@ const DrawerContent = /*#__PURE__*/ forwardRef((props, ref)=>{
         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);
         }
@@ -1139,7 +1158,10 @@ const DrawerCloseButton = /*#__PURE__*/ forwardRef((props, ref)=>{
         onClick: (e)=>{
             props.onClick?.(e);
             if (e.defaultPrevented) return;
-            setIsOpen(false);
+            setIsOpen(false, {
+                reason: "closeButton",
+                event: e.nativeEvent
+            });
         }
     });
 });
@@ -1150,17 +1172,17 @@ const DrawerHandle = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { closeDrawer, isDragging, snapPoints, activeSnapPoint, setActiveSnapPoint, dismissible, handleOnly, isOpen, onPress, onDrag, onRelease } = useDrawerContext();
     const closeTimeoutIdRef = useRef(null);
     const shouldCancelInteractionRef = useRef(false);
-    function handleStartCycle() {
+    function handleStartCycle(event) {
         // 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) {
         // Prevent accidental taps while resizing drawer
         if (isDragging || preventCycle || shouldCancelInteractionRef.current) {
             handleCancelInteraction();
@@ -1170,13 +1192,19 @@ const DrawerHandle = /*#__PURE__*/ forwardRef((props, ref)=>{
         handleCancelInteraction();
         if (!snapPoints || snapPoints.length === 0) {
             if (!dismissible) {
-                closeDrawer();
+                closeDrawer(false, {
+                    reason: "handleClickOnLastSnapPoint",
+                    event: event.nativeEvent
+                });
             }
             return;
         }
         const isLastSnapPoint = activeSnapPoint === snapPoints[snapPoints.length - 1];
         if (isLastSnapPoint && dismissible) {
-            closeDrawer();
+            closeDrawer(false, {
+                reason: "handleClickOnLastSnapPoint",
+                event: event.nativeEvent
+            });
             return;
         }
         const currentSnapIndex = snapPoints.findIndex((point)=>point === activeSnapPoint);

package/lib/index.cjs

@@ -1,4 +1,4 @@
-var Drawer12s = require('./Drawer-12s-DriAYAR2.cjs');
+var Drawer12s = require('./Drawer-12s-DXUv7jE4.cjs');
 
 var Drawer_namespace = {
   __proto__: null,

package/lib/index.d.ts

@@ -2,11 +2,34 @@ 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$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$1.SetStateAction<string | number | null>) => void;
-    drawerRef: React$1.RefObject<HTMLDivElement | null>;
-    overlayRef: React$1.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$1.RefObject<boolean>;
+    closeDrawer: (fromWithin?: boolean, details?: DrawerChangeDetails) => void;
+    keyboardIsOpen: React__default.RefObject<boolean>;
     modal: boolean;
     snapPointsOffset: number[];
     activeSnapPointIndex: number | null;
@@ -128,8 +151,8 @@ declare function useDrawer(props: UseDrawerProps): {
     noBodyStyles: boolean;
     container: HTMLElement | null | undefined;
     autoFocus: boolean;
-    setHasBeenOpened: React$1.Dispatch<React$1.SetStateAction<boolean>>;
-    setIsOpen: (value: React$1.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;
@@ -174,11 +197,31 @@ type DrawerContextValue = ReturnType<typeof useDrawer>;
 declare function useDrawerContext(): {
     activeSnapPoint: string | number | null;
     snapPoints: (string | number)[] | undefined;
-    setActiveSnapPoint: (value: React$1.SetStateAction<string | number | null>) => void;
+    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;
@@ -187,7 +230,27 @@ declare function useDrawerContext(): {
     isOpen: boolean;
     isDragging: boolean;
     shouldFade: boolean;
-    closeDrawer: (fromWithin?: boolean) => void;
+    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[];
@@ -197,7 +260,27 @@ declare function useDrawerContext(): {
     container: HTMLElement | null | undefined;
     autoFocus: boolean;
     setHasBeenOpened: React$1.Dispatch<React$1.SetStateAction<boolean>>;
-    setIsOpen: (value: React$1.SetStateAction<boolean>) => void;
+    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;

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 DrawerHeader, f as DrawerPositioner, g as DrawerRoot, h as DrawerTitle, i as DrawerTrigger } from './Drawer-12s-BdeYHia6.js';
-export { u as useDrawer, j as useDrawerContext } from './Drawer-12s-BdeYHia6.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-DnXlK1K0.js';
+export { u as useDrawer, j as useDrawerContext } from './Drawer-12s-DnXlK1K0.js';
 
 var Drawer_namespace = {
   __proto__: null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react-drawer",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "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.tsx

@@ -263,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);
       }}
@@ -309,7 +309,7 @@ export const DrawerCloseButton = forwardRef<HTMLButtonElement, DrawerCloseButton
         onClick={(e) => {
           props.onClick?.(e);
           if (e.defaultPrevented) return;
-          setIsOpen(false);
+          setIsOpen(false, { reason: "closeButton", event: e.nativeEvent });
         }}
       />
     );
@@ -342,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();
@@ -364,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;
     }
@@ -372,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/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;

package/src/useDrawer.ts

@@ -1,4 +1,5 @@
-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 {
@@ -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();
@@ -425,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) {
@@ -495,6 +511,7 @@ export function useDrawer(props: UseDrawerProps) {
         closeDrawer,
         velocity,
         dismissible,
+        event: event.nativeEvent,
       });
       onReleaseProp?.(event, true);
       return;
@@ -507,7 +524,7 @@ export function useDrawer(props: UseDrawerProps) {
     }
 
     if (velocity > VELOCITY_THRESHOLD) {
-      closeDrawer();
+      closeDrawer(false, { reason: "drag", event: event.nativeEvent });
       onReleaseProp?.(event, false);
       return;
     }
@@ -526,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;
     }