@seed-design/react-drawer 1.0.1 → 1.0.2

package/lib/{Drawer-12s-CAlIg6sU.js → Drawer-12s-COJG4T4l.js}

@@ -681,7 +681,7 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
 }
 
 function useDrawer(props) {
-    const { open: openProp, onOpenChange, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, closeThreshold = CLOSE_THRESHOLD, scrollLockTimeout = SCROLL_LOCK_TIMEOUT, dismissible = true, handleOnly = false, fadeFromIndex = snapPoints && snapPoints.length - 1, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal = true, onClose, nested, noBodyStyles = false, direction = "bottom", defaultOpen = false, disablePreventScroll = true, snapToSequentialPoint = false, preventScrollRestoration = false, repositionInputs = true, onAnimationEnd, container, autoFocus = false, closeOnInteractOutside = true, closeOnEscape = true } = props;
+    const { open: openProp, onOpenChange, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, closeThreshold = CLOSE_THRESHOLD, scrollLockTimeout = SCROLL_LOCK_TIMEOUT, dismissible = true, handleOnly = false, fadeFromIndex = snapPoints && snapPoints.length - 1, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal = true, onClose, nested, noBodyStyles = true, direction = "bottom", defaultOpen = false, disablePreventScroll = true, snapToSequentialPoint = false, preventScrollRestoration = false, repositionInputs = true, onAnimationEnd, container, autoFocus = false, closeOnInteractOutside = true, closeOnEscape = true } = props;
     const [isOpen = false, setIsOpen] = useControllableState({
         defaultProp: defaultOpen,
         prop: openProp,
@@ -760,7 +760,9 @@ function useDrawer(props) {
         setIsDragging(true);
         dragStartTime.current = new Date();
         if (isIOS()) {
-            window.addEventListener("touchend", ()=>isAllowedToDrag.current = false, {
+            window.addEventListener("touchend", ()=>{
+                isAllowedToDrag.current = false;
+            }, {
                 once: true
             });
         }
@@ -1020,7 +1022,7 @@ function useDrawer(props) {
                     drawerRef.current.style.height = `${initialDrawerHeight.current}px`;
                 }
                 if (snapPoints && snapPoints.length > 0 && !keyboardIsOpen.current) {
-                    drawerRef.current.style.bottom = `0px`;
+                    drawerRef.current.style.bottom = "0px";
                 } else {
                     drawerRef.current.style.bottom = `${Math.max(diffFromInitial, 0)}px`;
                 }
@@ -1058,9 +1060,8 @@ function useDrawer(props) {
                 setShouldOverlayAnimate(false);
             }, TRANSITIONS.ENTER_DURATION * 1000);
             return ()=>clearTimeout(timeoutId);
-        } else {
-            setShouldOverlayAnimate(false);
         }
+        setShouldOverlayAnimate(false);
     }, [
         isOpen,
         snapPoints,
@@ -1135,7 +1136,7 @@ function useDrawerContext() {
 }
 
 const DrawerRoot = (props)=>{
-    const { children, defaultOpen, dismissible, onOpenChange, modal } = props;
+    const { children, defaultOpen, dismissible, modal } = props;
     const api = useDrawer(props);
     return /*#__PURE__*/ jsx(DialogPrimitive.Root, {
         defaultOpen: defaultOpen,
@@ -1148,7 +1149,6 @@ const DrawerRoot = (props)=>{
                 api.closeDrawer(true);
             }
             api.setIsOpen(open);
-            onOpenChange?.(open);
         },
         modal: modal,
         children: /*#__PURE__*/ jsx(DrawerProvider, {
@@ -1164,7 +1164,8 @@ const DrawerPositioner = /*#__PURE__*/ forwardRef((props, ref)=>{
         ref: ref,
         ...props,
         style: {
-            pointerEvents: api.isOpen ? undefined : "none"
+            pointerEvents: api.isOpen ? undefined : "none",
+            ...props.style
         }
     });
 });

package/lib/{Drawer-12s-BXSK15mB.cjs → Drawer-12s-a4zbhVrK.cjs}

@@ -704,7 +704,7 @@ function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints
 }
 
 function useDrawer(props) {
-    const { open: openProp, onOpenChange, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, closeThreshold = CLOSE_THRESHOLD, scrollLockTimeout = SCROLL_LOCK_TIMEOUT, dismissible = true, handleOnly = false, fadeFromIndex = snapPoints && snapPoints.length - 1, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal = true, onClose, nested, noBodyStyles = false, direction = "bottom", defaultOpen = false, disablePreventScroll = true, snapToSequentialPoint = false, preventScrollRestoration = false, repositionInputs = true, onAnimationEnd, container, autoFocus = false, closeOnInteractOutside = true, closeOnEscape = true } = props;
+    const { open: openProp, onOpenChange, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, closeThreshold = CLOSE_THRESHOLD, scrollLockTimeout = SCROLL_LOCK_TIMEOUT, dismissible = true, handleOnly = false, fadeFromIndex = snapPoints && snapPoints.length - 1, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal = true, onClose, nested, noBodyStyles = true, direction = "bottom", defaultOpen = false, disablePreventScroll = true, snapToSequentialPoint = false, preventScrollRestoration = false, repositionInputs = true, onAnimationEnd, container, autoFocus = false, closeOnInteractOutside = true, closeOnEscape = true } = props;
     const [isOpen = false, setIsOpen] = reactUseControllableState.useControllableState({
         defaultProp: defaultOpen,
         prop: openProp,
@@ -783,7 +783,9 @@ function useDrawer(props) {
         setIsDragging(true);
         dragStartTime.current = new Date();
         if (isIOS()) {
-            window.addEventListener("touchend", ()=>isAllowedToDrag.current = false, {
+            window.addEventListener("touchend", ()=>{
+                isAllowedToDrag.current = false;
+            }, {
                 once: true
             });
         }
@@ -1043,7 +1045,7 @@ function useDrawer(props) {
                     drawerRef.current.style.height = `${initialDrawerHeight.current}px`;
                 }
                 if (snapPoints && snapPoints.length > 0 && !keyboardIsOpen.current) {
-                    drawerRef.current.style.bottom = `0px`;
+                    drawerRef.current.style.bottom = "0px";
                 } else {
                     drawerRef.current.style.bottom = `${Math.max(diffFromInitial, 0)}px`;
                 }
@@ -1081,9 +1083,8 @@ function useDrawer(props) {
                 setShouldOverlayAnimate(false);
             }, TRANSITIONS.ENTER_DURATION * 1000);
             return ()=>clearTimeout(timeoutId);
-        } else {
-            setShouldOverlayAnimate(false);
         }
+        setShouldOverlayAnimate(false);
     }, [
         isOpen,
         snapPoints,
@@ -1158,7 +1159,7 @@ function useDrawerContext() {
 }
 
 const DrawerRoot = (props)=>{
-    const { children, defaultOpen, dismissible, onOpenChange, modal } = props;
+    const { children, defaultOpen, dismissible, modal } = props;
     const api = useDrawer(props);
     return /*#__PURE__*/ jsxRuntime.jsx(DialogPrimitive__namespace.Root, {
         defaultOpen: defaultOpen,
@@ -1171,7 +1172,6 @@ const DrawerRoot = (props)=>{
                 api.closeDrawer(true);
             }
             api.setIsOpen(open);
-            onOpenChange?.(open);
         },
         modal: modal,
         children: /*#__PURE__*/ jsxRuntime.jsx(DrawerProvider, {
@@ -1187,7 +1187,8 @@ const DrawerPositioner = /*#__PURE__*/ React.forwardRef((props, ref)=>{
         ref: ref,
         ...props,
         style: {
-            pointerEvents: api.isOpen ? undefined : "none"
+            pointerEvents: api.isOpen ? undefined : "none",
+            ...props.style
         }
     });
 });

package/lib/index.cjs

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

package/lib/index.d.ts

@@ -3,7 +3,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { PrimitiveProps } from '@seed-design/react-primitive';
 import * as react from 'react';
 
-interface DialogProps {
+interface UseDrawerProps {
     activeSnapPoint?: number | string | null;
     setActiveSnapPoint?: (snapPoint: number | string | null) => void;
     children?: React.ReactNode;
@@ -15,7 +15,8 @@ interface DialogProps {
      */
     closeThreshold?: number;
     /**
-     * When `true` the `body` doesn't get any styles assigned from Vaul
+     * When `true` the `body` doesn't get any styles assigned from Drawer
+     * @default true
      */
     noBodyStyles?: boolean;
     onOpenChange?: (open: boolean) => void;
@@ -107,7 +108,7 @@ interface DialogProps {
      */
     closeOnEscape?: boolean;
 }
-declare function useDrawer(props: DialogProps): {
+declare function useDrawer(props: UseDrawerProps): {
     activeSnapPoint: string | number | null;
     snapPoints: (string | number)[] | undefined;
     setActiveSnapPoint: (value: react.SetStateAction<string | number | null>) => void;
@@ -139,7 +140,7 @@ declare function useDrawer(props: DialogProps): {
     closeOnEscape: boolean;
 };
 
-interface DrawerRootProps extends DialogProps {
+interface DrawerRootProps extends UseDrawerProps {
     children?: react.ReactNode;
 }
 declare const DrawerRoot: (props: DrawerRootProps) => react_jsx_runtime.JSX.Element;
@@ -208,4 +209,4 @@ declare namespace Drawer_namespace {
 }
 
 export { Drawer_namespace as Drawer, DrawerBackdrop, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerHandle, DrawerPositioner, DrawerRoot, DrawerTitle, DrawerTrigger, useDrawer, useDrawerContext };
-export type { DialogProps, DrawerBackdropProps, DrawerCloseButtonProps, DrawerContentProps, DrawerContextValue, DrawerDescriptionProps, DrawerHandleProps, DrawerPositionerProps, DrawerRootProps, DrawerTitleProps, DrawerTriggerProps };
+export type { DrawerBackdropProps, DrawerCloseButtonProps, DrawerContentProps, DrawerContextValue, DrawerDescriptionProps, DrawerHandleProps, 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-CAlIg6sU.js';
-export { u as useDrawer, i as useDrawerContext } from './Drawer-12s-CAlIg6sU.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-COJG4T4l.js';
+export { u as useDrawer, i as useDrawerContext } from './Drawer-12s-COJG4T4l.js';
 
 var Drawer_namespace = {
   __proto__: null,

package/package.json

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

package/src/Drawer.tsx

@@ -8,15 +8,15 @@ import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import type * as React from "react";
 import { forwardRef, useEffect, useRef, useState } from "react";
 import type { DrawerDirection } from "./types";
-import { useDrawer, type DialogProps } from "./useDrawer";
+import { useDrawer, type UseDrawerProps } from "./useDrawer";
 import { DrawerProvider, useDrawerContext } from "./useDrawerContext";
 
-export interface DrawerRootProps extends DialogProps {
+export interface DrawerRootProps extends UseDrawerProps {
   children?: React.ReactNode;
 }
 
 export const DrawerRoot = (props: DrawerRootProps) => {
-  const { children, defaultOpen, dismissible, onOpenChange, modal } = props;
+  const { children, defaultOpen, dismissible, modal } = props;
   const api = useDrawer(props);
   return (
     <DialogPrimitive.Root
@@ -31,7 +31,6 @@ export const DrawerRoot = (props: DrawerRootProps) => {
         }
 
         api.setIsOpen(open);
-        onOpenChange?.(open);
       }}
       modal={modal}
     >
@@ -54,7 +53,7 @@ export const DrawerPositioner = forwardRef<HTMLDivElement, DrawerPositionerProps
     <Primitive.div
       ref={ref}
       {...props}
-      style={{ pointerEvents: api.isOpen ? undefined : "none" }}
+      style={{ pointerEvents: api.isOpen ? undefined : "none", ...props.style }}
     />
   );
 });

package/src/index.ts

@@ -19,7 +19,7 @@ export {
   type DrawerTriggerProps,
 } from "./Drawer";
 
-export { useDrawer, type DialogProps } from "./useDrawer";
+export { useDrawer, type UseDrawerProps } from "./useDrawer";
 export { useDrawerContext, type DrawerContextValue } from "./useDrawerContext";
 
 export * as Drawer from "./Drawer.namespace";

package/src/useDrawer.ts

@@ -14,7 +14,7 @@ import { usePositionFixed } from "./use-position-fixed";
 import { isInput, usePreventScroll } from "./use-prevent-scroll";
 import { useSnapPoints } from "./use-snap-points";
 
-export interface DialogProps {
+export interface UseDrawerProps {
   activeSnapPoint?: number | string | null;
   setActiveSnapPoint?: (snapPoint: number | string | null) => void;
   children?: React.ReactNode;
@@ -26,7 +26,8 @@ export interface DialogProps {
    */
   closeThreshold?: number;
   /**
-   * When `true` the `body` doesn't get any styles assigned from Vaul
+   * When `true` the `body` doesn't get any styles assigned from Drawer
+   * @default true
    */
   noBodyStyles?: boolean;
   onOpenChange?: (open: boolean) => void;
@@ -123,7 +124,7 @@ export interface DialogProps {
   closeOnEscape?: boolean;
 }
 
-export function useDrawer(props: DialogProps) {
+export function useDrawer(props: UseDrawerProps) {
   const {
     open: openProp,
     onOpenChange,
@@ -141,7 +142,7 @@ export function useDrawer(props: DialogProps) {
     modal = true,
     onClose,
     nested,
-    noBodyStyles = false,
+    noBodyStyles = true,
     direction = "bottom",
     defaultOpen = false,
     disablePreventScroll = true,
@@ -263,7 +264,13 @@ export function useDrawer(props: DialogProps) {
     dragStartTime.current = new Date();
 
     if (isIOS()) {
-      window.addEventListener("touchend", () => (isAllowedToDrag.current = false), { once: true });
+      window.addEventListener(
+        "touchend",
+        () => {
+          isAllowedToDrag.current = false;
+        },
+        { once: true },
+      );
     }
     (event.target as HTMLElement).setPointerCapture(event.pointerId);
 
@@ -614,7 +621,7 @@ export function useDrawer(props: DialogProps) {
         }
 
         if (snapPoints && snapPoints.length > 0 && !keyboardIsOpen.current) {
-          drawerRef.current.style.bottom = `0px`;
+          drawerRef.current.style.bottom = "0px";
         } else {
           drawerRef.current.style.bottom = `${Math.max(diffFromInitial, 0)}px`;
         }
@@ -648,9 +655,9 @@ export function useDrawer(props: DialogProps) {
       }, TRANSITIONS.ENTER_DURATION * 1000);
 
       return () => clearTimeout(timeoutId);
-    } else {
-      setShouldOverlayAnimate(false);
     }
+
+    setShouldOverlayAnimate(false);
   }, [isOpen, snapPoints, fadeFromIndex]);
 
   return useMemo(