@seed-design/react-drawer 1.0.3 → 1.0.5

package/lib/{Drawer-12s-Cg9AJtdN.js → Drawer-12s-9vODHlci.js}

@@ -492,7 +492,6 @@ function useDrawer(props) {
     const isAllowedToDrag = useRef(false);
     const pointerStart = useRef(0);
     const keyboardIsOpen = useRef(false);
-    const shouldAnimate = useRef(!defaultOpen);
     const previousDiffFromInitial = useRef(0);
     const drawerRef = useRef(null);
     const drawerHeightRef = useRef(drawerRef.current?.getBoundingClientRect().height || 0);
@@ -746,11 +745,6 @@ function useDrawer(props) {
     }, [
         isOpen
     ]);
-    useEffect(()=>{
-        window.requestAnimationFrame(()=>{
-            shouldAnimate.current = true;
-        });
-    }, []);
     useEffect(()=>{
         function onVisualViewportChange() {
             if (!drawerRef.current || !repositionInputs) return;
@@ -845,7 +839,6 @@ function useDrawer(props) {
             onRelease,
             onDrag,
             dismissible,
-            shouldAnimate,
             handleOnly,
             isOpen,
             isDragging,
@@ -937,7 +930,7 @@ const DrawerPositioner = /*#__PURE__*/ forwardRef((props, ref)=>{
 });
 DrawerPositioner.displayName = "DrawerPositioner";
 const DrawerBackdrop = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { overlayRef, onRelease, modal, snapPoints, isOpen, shouldFade, shouldAnimate, shouldOverlayAnimate } = useDrawerContext();
+    const { overlayRef, onRelease, modal, snapPoints, isOpen, shouldFade, shouldOverlayAnimate } = useDrawerContext();
     const composedRef = useComposedRefs(ref, overlayRef);
     const hasSnapPoints = snapPoints && snapPoints.length > 0;
     const onMouseUp = useCallbackRef((event)=>onRelease(event));
@@ -950,7 +943,6 @@ const DrawerBackdrop = /*#__PURE__*/ forwardRef((props, ref)=>{
         onMouseUp: onMouseUp,
         "data-snap-points": isOpen && hasSnapPoints ? "true" : "false",
         "data-snap-points-overlay": isOpen && shouldFade ? "true" : "false",
-        "data-animate": shouldAnimate?.current ? "true" : "false",
         "data-should-overlay-animate": shouldOverlayAnimate ? "true" : "false",
         "data-open": dataAttr(isOpen),
         ...props
@@ -959,7 +951,7 @@ const DrawerBackdrop = /*#__PURE__*/ forwardRef((props, ref)=>{
 DrawerBackdrop.displayName = "DrawerBackdrop";
 const DrawerContent = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { onPointerDownOutside, style, onOpenAutoFocus, ...restProps } = props;
-    const { drawerRef, onPress, onRelease, onDrag, keyboardIsOpen, snapPointsOffset, activeSnapPointIndex, modal, isOpen, direction, snapPoints, container, handleOnly, shouldAnimate, autoFocus, closeDrawer, closeOnInteractOutside, closeOnEscape, dismissible } = useDrawerContext();
+    const { drawerRef, onPress, onRelease, onDrag, keyboardIsOpen, snapPointsOffset, activeSnapPointIndex, modal, isOpen, direction, snapPoints, container, handleOnly, autoFocus, closeDrawer, closeOnInteractOutside, closeOnEscape, dismissible } = useDrawerContext();
     // Needed to use transition instead of animations
     const [delayedSnapPoints, setDelayedSnapPoints] = useState(false);
     const composedRef = useComposedRefs(ref, drawerRef);
@@ -1009,7 +1001,6 @@ const DrawerContent = /*#__PURE__*/ forwardRef((props, ref)=>{
         "data-drawer": "",
         "data-snap-points": isOpen && hasSnapPoints ? "true" : "false",
         "data-custom-container": container ? "true" : "false",
-        "data-animate": shouldAnimate?.current ? "true" : "false",
         ...restProps,
         ref: composedRef,
         style: snapPointsOffset && snapPointsOffset.length > 0 ? {
@@ -1114,7 +1105,7 @@ const LONG_HANDLE_PRESS_TIMEOUT = 250;
 const DOUBLE_TAP_TIMEOUT = 120;
 const DrawerHandle = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { preventCycle = false, children, ...rest } = props;
-    const { closeDrawer, isDragging, snapPoints, activeSnapPoint, setActiveSnapPoint, dismissible, handleOnly, isOpen, onPress, onDrag } = useDrawerContext();
+    const { closeDrawer, isDragging, snapPoints, activeSnapPoint, setActiveSnapPoint, dismissible, handleOnly, isOpen, onPress, onDrag, onRelease } = useDrawerContext();
     const closeTimeoutIdRef = useRef(null);
     const shouldCancelInteractionRef = useRef(false);
     function handleStartCycle() {
@@ -1174,7 +1165,10 @@ const DrawerHandle = /*#__PURE__*/ forwardRef((props, ref)=>{
         onPointerMove: (e)=>{
             if (handleOnly) onDrag(e);
         },
-        // onPointerUp is already handled by the content component
+        onPointerUp: (e)=>{
+            if (handleOnly) onRelease(e);
+            handleCancelInteraction();
+        },
         "data-drawer-visible": isOpen ? "true" : "false",
         "data-handle": "",
         "aria-hidden": "true",

package/lib/{Drawer-12s-D1dD-wen.cjs → Drawer-12s-CTzxFYGf.cjs}

@@ -515,7 +515,6 @@ function useDrawer(props) {
     const isAllowedToDrag = React.useRef(false);
     const pointerStart = React.useRef(0);
     const keyboardIsOpen = React.useRef(false);
-    const shouldAnimate = React.useRef(!defaultOpen);
     const previousDiffFromInitial = React.useRef(0);
     const drawerRef = React.useRef(null);
     const drawerHeightRef = React.useRef(drawerRef.current?.getBoundingClientRect().height || 0);
@@ -769,11 +768,6 @@ function useDrawer(props) {
     }, [
         isOpen
     ]);
-    React.useEffect(()=>{
-        window.requestAnimationFrame(()=>{
-            shouldAnimate.current = true;
-        });
-    }, []);
     React.useEffect(()=>{
         function onVisualViewportChange() {
             if (!drawerRef.current || !repositionInputs) return;
@@ -868,7 +862,6 @@ function useDrawer(props) {
             onRelease,
             onDrag,
             dismissible,
-            shouldAnimate,
             handleOnly,
             isOpen,
             isDragging,
@@ -960,7 +953,7 @@ const DrawerPositioner = /*#__PURE__*/ React.forwardRef((props, ref)=>{
 });
 DrawerPositioner.displayName = "DrawerPositioner";
 const DrawerBackdrop = /*#__PURE__*/ React.forwardRef((props, ref)=>{
-    const { overlayRef, onRelease, modal, snapPoints, isOpen, shouldFade, shouldAnimate, shouldOverlayAnimate } = useDrawerContext();
+    const { overlayRef, onRelease, modal, snapPoints, isOpen, shouldFade, shouldOverlayAnimate } = useDrawerContext();
     const composedRef = reactComposeRefs.useComposedRefs(ref, overlayRef);
     const hasSnapPoints = snapPoints && snapPoints.length > 0;
     const onMouseUp = reactUseCallbackRef.useCallbackRef((event)=>onRelease(event));
@@ -973,7 +966,6 @@ const DrawerBackdrop = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         onMouseUp: onMouseUp,
         "data-snap-points": isOpen && hasSnapPoints ? "true" : "false",
         "data-snap-points-overlay": isOpen && shouldFade ? "true" : "false",
-        "data-animate": shouldAnimate?.current ? "true" : "false",
         "data-should-overlay-animate": shouldOverlayAnimate ? "true" : "false",
         "data-open": domUtils.dataAttr(isOpen),
         ...props
@@ -982,7 +974,7 @@ const DrawerBackdrop = /*#__PURE__*/ React.forwardRef((props, ref)=>{
 DrawerBackdrop.displayName = "DrawerBackdrop";
 const DrawerContent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const { onPointerDownOutside, style, onOpenAutoFocus, ...restProps } = props;
-    const { drawerRef, onPress, onRelease, onDrag, keyboardIsOpen, snapPointsOffset, activeSnapPointIndex, modal, isOpen, direction, snapPoints, container, handleOnly, shouldAnimate, autoFocus, closeDrawer, closeOnInteractOutside, closeOnEscape, dismissible } = useDrawerContext();
+    const { drawerRef, onPress, onRelease, onDrag, keyboardIsOpen, snapPointsOffset, activeSnapPointIndex, modal, isOpen, direction, snapPoints, container, handleOnly, autoFocus, closeDrawer, closeOnInteractOutside, closeOnEscape, dismissible } = useDrawerContext();
     // Needed to use transition instead of animations
     const [delayedSnapPoints, setDelayedSnapPoints] = React.useState(false);
     const composedRef = reactComposeRefs.useComposedRefs(ref, drawerRef);
@@ -1032,7 +1024,6 @@ const DrawerContent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         "data-drawer": "",
         "data-snap-points": isOpen && hasSnapPoints ? "true" : "false",
         "data-custom-container": container ? "true" : "false",
-        "data-animate": shouldAnimate?.current ? "true" : "false",
         ...restProps,
         ref: composedRef,
         style: snapPointsOffset && snapPointsOffset.length > 0 ? {
@@ -1137,7 +1128,7 @@ const LONG_HANDLE_PRESS_TIMEOUT = 250;
 const DOUBLE_TAP_TIMEOUT = 120;
 const DrawerHandle = /*#__PURE__*/ React.forwardRef((props, ref)=>{
     const { preventCycle = false, children, ...rest } = props;
-    const { closeDrawer, isDragging, snapPoints, activeSnapPoint, setActiveSnapPoint, dismissible, handleOnly, isOpen, onPress, onDrag } = useDrawerContext();
+    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() {
@@ -1197,7 +1188,10 @@ const DrawerHandle = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         onPointerMove: (e)=>{
             if (handleOnly) onDrag(e);
         },
-        // onPointerUp is already handled by the content component
+        onPointerUp: (e)=>{
+            if (handleOnly) onRelease(e);
+            handleCancelInteraction();
+        },
         "data-drawer-visible": isOpen ? "true" : "false",
         "data-handle": "",
         "aria-hidden": "true",

package/lib/index.cjs

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

package/lib/index.d.ts

@@ -55,7 +55,7 @@ interface UseDrawerProps {
      */
     direction?: "top" | "bottom" | "left" | "right";
     /**
-     * Opened by default, skips initial enter animation. Still reacts to `open` state changes
+     * Opened by default. Still reacts to `open` state changes
      * @default false
      */
     defaultOpen?: boolean;
@@ -115,7 +115,6 @@ declare function useDrawer(props: UseDrawerProps): {
     onRelease: (event: React.PointerEvent<HTMLDivElement> | null) => void;
     onDrag: (event: React.PointerEvent<HTMLDivElement>) => void;
     dismissible: boolean;
-    shouldAnimate: react.RefObject<boolean>;
     handleOnly: boolean;
     isOpen: boolean;
     isDragging: boolean;
@@ -178,7 +177,6 @@ declare function useDrawerContext(): {
     onRelease: (event: React.PointerEvent<HTMLDivElement> | null) => void;
     onDrag: (event: React.PointerEvent<HTMLDivElement>) => void;
     dismissible: boolean;
-    shouldAnimate: react.RefObject<boolean>;
     handleOnly: boolean;
     isOpen: boolean;
     isDragging: 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 DrawerPositioner, f as DrawerRoot, g as DrawerTitle, h as DrawerTrigger } from './Drawer-12s-Cg9AJtdN.js';
-export { u as useDrawer, i as useDrawerContext } from './Drawer-12s-Cg9AJtdN.js';
+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-9vODHlci.js';
+export { u as useDrawer, i as useDrawerContext } from './Drawer-12s-9vODHlci.js';
 
 var Drawer_namespace = {
   __proto__: null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react-drawer",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",

package/src/Drawer.tsx

@@ -71,7 +71,6 @@ export const DrawerBackdrop = forwardRef<HTMLDivElement, DrawerBackdropProps>((p
     snapPoints,
     isOpen,
     shouldFade,
-    shouldAnimate,
     shouldOverlayAnimate,
   } = useDrawerContext();
   const composedRef = useComposedRefs(ref, overlayRef);
@@ -89,7 +88,6 @@ export const DrawerBackdrop = forwardRef<HTMLDivElement, DrawerBackdropProps>((p
       onMouseUp={onMouseUp}
       data-snap-points={isOpen && hasSnapPoints ? "true" : "false"}
       data-snap-points-overlay={isOpen && shouldFade ? "true" : "false"}
-      data-animate={shouldAnimate?.current ? "true" : "false"}
       data-should-overlay-animate={shouldOverlayAnimate ? "true" : "false"}
       data-open={dataAttr(isOpen)}
       {...props}
@@ -118,7 +116,6 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>((pro
     snapPoints,
     container,
     handleOnly,
-    shouldAnimate,
     autoFocus,
     closeDrawer,
     closeOnInteractOutside,
@@ -183,7 +180,6 @@ export const DrawerContent = forwardRef<HTMLDivElement, DrawerContentProps>((pro
       data-drawer=""
       data-snap-points={isOpen && hasSnapPoints ? "true" : "false"}
       data-custom-container={container ? "true" : "false"}
-      data-animate={shouldAnimate?.current ? "true" : "false"}
       {...restProps}
       ref={composedRef}
       style={
@@ -325,6 +321,7 @@ export const DrawerHandle = forwardRef<HTMLDivElement, DrawerHandleProps>((props
     isOpen,
     onPress,
     onDrag,
+    onRelease,
   } = useDrawerContext();
 
   const closeTimeoutIdRef = useRef<number | null>(null);
@@ -396,7 +393,10 @@ export const DrawerHandle = forwardRef<HTMLDivElement, DrawerHandleProps>((props
       onPointerMove={(e) => {
         if (handleOnly) onDrag(e);
       }}
-      // onPointerUp is already handled by the content component
+      onPointerUp={(e) => {
+        if (handleOnly) onRelease(e);
+        handleCancelInteraction();
+      }}
       data-drawer-visible={isOpen ? "true" : "false"}
       data-handle=""
       aria-hidden="true"

package/src/useDrawer.ts

@@ -65,7 +65,7 @@ export interface UseDrawerProps {
    */
   direction?: "top" | "bottom" | "left" | "right";
   /**
-   * Opened by default, skips initial enter animation. Still reacts to `open` state changes
+   * Opened by default. Still reacts to `open` state changes
    * @default false
    */
   defaultOpen?: boolean;
@@ -116,6 +116,7 @@ export interface UseDrawerProps {
    * @default true
    */
   closeOnEscape?: boolean;
+
 }
 
 export function useDrawer(props: UseDrawerProps) {
@@ -189,7 +190,6 @@ export function useDrawer(props: UseDrawerProps) {
   const isAllowedToDrag = useRef<boolean>(false);
   const pointerStart = useRef(0);
   const keyboardIsOpen = useRef(false);
-  const shouldAnimate = useRef(!defaultOpen);
   const previousDiffFromInitial = useRef(0);
   const drawerRef = useRef<HTMLDivElement>(null);
   const drawerHeightRef = useRef(drawerRef.current?.getBoundingClientRect().height || 0);
@@ -543,11 +543,6 @@ export function useDrawer(props: UseDrawerProps) {
     };
   }, [isOpen]);
 
-  useEffect(() => {
-    window.requestAnimationFrame(() => {
-      shouldAnimate.current = true;
-    });
-  }, []);
 
   useEffect(() => {
     function onVisualViewportChange() {
@@ -647,7 +642,6 @@ export function useDrawer(props: UseDrawerProps) {
       onRelease,
       onDrag,
       dismissible,
-      shouldAnimate,
       handleOnly,
       isOpen,
       isDragging,