@seed-design/react-drawer 1.0.0 → 1.0.2

package/lib/index.cjs

@@ -0,0 +1,27 @@
+var Drawer12s = require('./Drawer-12s-a4zbhVrK.cjs');
+
+var Drawer_namespace = {
+  __proto__: null,
+  Backdrop: Drawer12s.DrawerBackdrop,
+  CloseButton: Drawer12s.DrawerCloseButton,
+  Content: Drawer12s.DrawerContent,
+  Description: Drawer12s.DrawerDescription,
+  Handle: Drawer12s.DrawerHandle,
+  Positioner: Drawer12s.DrawerPositioner,
+  Root: Drawer12s.DrawerRoot,
+  Title: Drawer12s.DrawerTitle,
+  Trigger: Drawer12s.DrawerTrigger
+};
+
+exports.DrawerBackdrop = Drawer12s.DrawerBackdrop;
+exports.DrawerCloseButton = Drawer12s.DrawerCloseButton;
+exports.DrawerContent = Drawer12s.DrawerContent;
+exports.DrawerDescription = Drawer12s.DrawerDescription;
+exports.DrawerHandle = Drawer12s.DrawerHandle;
+exports.DrawerPositioner = Drawer12s.DrawerPositioner;
+exports.DrawerRoot = Drawer12s.DrawerRoot;
+exports.DrawerTitle = Drawer12s.DrawerTitle;
+exports.DrawerTrigger = Drawer12s.DrawerTrigger;
+exports.useDrawer = Drawer12s.useDrawer;
+exports.useDrawerContext = Drawer12s.useDrawerContext;
+exports.Drawer = Drawer_namespace;

package/lib/index.d.ts

@@ -0,0 +1,212 @@
+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';
+
+interface UseDrawerProps {
+    activeSnapPoint?: number | string | null;
+    setActiveSnapPoint?: (snapPoint: number | string | null) => void;
+    children?: React.ReactNode;
+    open?: boolean;
+    /**
+     * Number between 0 and 1 that determines when the drawer should be closed.
+     * Example: threshold of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more.
+     * @default 0.25
+     */
+    closeThreshold?: number;
+    /**
+     * When `true` the `body` doesn't get any styles assigned from Drawer
+     * @default true
+     */
+    noBodyStyles?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Duration for which the drawer is not draggable after scrolling content inside of the drawer.
+     * @default 500ms
+     */
+    scrollLockTimeout?: number;
+    /**
+     * When `true`, don't move the drawer upwards if there's space, but rather only change it's height so it's fully scrollable when the keyboard is open
+     */
+    fixed?: boolean;
+    /**
+     * When `true` only allows the drawer to be dragged by the `<Drawer.Handle />` component.
+     * @default false
+     */
+    handleOnly?: boolean;
+    /**
+     * When `false` dragging, clicking outside, pressing esc, etc. will not close the drawer.
+     * Use this in comination with the `open` prop, otherwise you won't be able to open/close the drawer.
+     * @default true
+     */
+    dismissible?: boolean;
+    onDrag?: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
+    onRelease?: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void;
+    /**
+     * When `false` it allows to interact with elements outside of the drawer without closing it.
+     * @default true
+     */
+    modal?: boolean;
+    nested?: boolean;
+    onClose?: () => void;
+    /**
+     * Direction of the drawer. Can be `top` or `bottom`, `left`, `right`.
+     * @default 'bottom'
+     */
+    direction?: "top" | "bottom" | "left" | "right";
+    /**
+     * Opened by default, skips initial enter animation. Still reacts to `open` state changes
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * When set to `true` prevents scrolling on the document body on mount, and restores it on unmount.
+     * @default false
+     */
+    disablePreventScroll?: boolean;
+    /**
+     * When `true` Vaul will reposition inputs rather than scroll then into view if the keyboard is in the way.
+     * Setting it to `false` will fall back to the default browser behavior.
+     * @default true when {@link snapPoints} is defined
+     */
+    repositionInputs?: boolean;
+    /**
+     * Disabled velocity based swiping for snap points.
+     * This means that a snap point won't be skipped even if the velocity is high enough.
+     * Useful if each snap point in a drawer is equally important.
+     * @default false
+     */
+    snapToSequentialPoint?: boolean;
+    container?: HTMLElement | null;
+    /**
+     * Gets triggered after the open or close animation ends, it receives an `open` argument with the `open` state of the drawer by the time the function was triggered.
+     * Useful to revert any state changes for example.
+     */
+    onAnimationEnd?: (open: boolean) => void;
+    preventScrollRestoration?: boolean;
+    autoFocus?: boolean;
+    /**
+     * Array of snap points to use.
+     * Example: snapPoints={[0, 100, 200]} will use the first snap point at 0px, the second at 100px, and the third at 200px.
+     * @default undefined
+     */
+    snapPoints?: (number | string)[];
+    /**
+     * Index of the snap point to start fading from.
+     * Example: fadeFromIndex={0} will start fading from the first snap point.
+     * @default snapPoints.length - 1
+     */
+    fadeFromIndex?: number;
+    /**
+     * Whether to close the drawer when interacting outside of the drawer.
+     * @default true
+     */
+    closeOnInteractOutside?: boolean;
+    /**
+     * Whether to close the drawer when pressing the escape key.
+     * @default true
+     */
+    closeOnEscape?: boolean;
+}
+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>;
+    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;
+    dismissible: boolean;
+    shouldAnimate: react.RefObject<boolean>;
+    handleOnly: boolean;
+    isOpen: boolean;
+    isDragging: boolean;
+    shouldFade: boolean;
+    closeDrawer: (fromWithin?: boolean) => void;
+    keyboardIsOpen: react.RefObject<boolean>;
+    modal: boolean;
+    snapPointsOffset: number[];
+    activeSnapPointIndex: number | null;
+    direction: "top" | "bottom" | "left" | "right";
+    noBodyStyles: boolean;
+    container: HTMLElement | null | undefined;
+    autoFocus: boolean;
+    setHasBeenOpened: react.Dispatch<react.SetStateAction<boolean>>;
+    setIsOpen: (value: react.SetStateAction<boolean>) => void;
+    closeOnInteractOutside: boolean;
+    closeOnEscape: boolean;
+};
+
+interface DrawerRootProps extends UseDrawerProps {
+    children?: react.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 DrawerPositioner: react.ForwardRefExoticComponent<DrawerPositionerProps & react.RefAttributes<HTMLDivElement>>;
+interface DrawerBackdropProps extends DialogPrimitive.DialogOverlayProps, react.HTMLAttributes<HTMLDivElement> {
+}
+declare const DrawerBackdrop: react.ForwardRefExoticComponent<DrawerBackdropProps & react.RefAttributes<HTMLDivElement>>;
+interface DrawerContentProps extends DialogPrimitive.DialogContentProps, react.HTMLAttributes<HTMLDivElement> {
+}
+declare const DrawerContent: react.ForwardRefExoticComponent<DrawerContentProps & react.RefAttributes<HTMLDivElement>>;
+interface DrawerTitleProps extends DialogPrimitive.DialogTitleProps {
+}
+declare const DrawerTitle: react.ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+interface DrawerDescriptionProps extends DialogPrimitive.DialogDescriptionProps {
+}
+declare const DrawerDescription: react.ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+interface DrawerCloseButtonProps extends DialogPrimitive.DialogCloseProps {
+}
+declare const DrawerCloseButton: react.ForwardRefExoticComponent<DrawerCloseButtonProps & react.RefAttributes<HTMLButtonElement>>;
+interface DrawerHandleProps extends react.HTMLAttributes<HTMLDivElement> {
+    preventCycle?: boolean;
+}
+declare const DrawerHandle: react.ForwardRefExoticComponent<DrawerHandleProps & react.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>;
+    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;
+    dismissible: boolean;
+    shouldAnimate: react.RefObject<boolean>;
+    handleOnly: boolean;
+    isOpen: boolean;
+    isDragging: boolean;
+    shouldFade: boolean;
+    closeDrawer: (fromWithin?: boolean) => void;
+    keyboardIsOpen: react.RefObject<boolean>;
+    modal: boolean;
+    snapPointsOffset: number[];
+    activeSnapPointIndex: number | null;
+    direction: "top" | "bottom" | "left" | "right";
+    noBodyStyles: boolean;
+    container: HTMLElement | null | undefined;
+    autoFocus: boolean;
+    setHasBeenOpened: react.Dispatch<react.SetStateAction<boolean>>;
+    setIsOpen: (value: react.SetStateAction<boolean>) => void;
+    closeOnInteractOutside: boolean;
+    closeOnEscape: 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 { 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 };

package/lib/index.js

@@ -0,0 +1,17 @@
+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,
+  Backdrop: DrawerBackdrop,
+  CloseButton: DrawerCloseButton,
+  Content: DrawerContent,
+  Description: DrawerDescription,
+  Handle: DrawerHandle,
+  Positioner: DrawerPositioner,
+  Root: DrawerRoot,
+  Title: DrawerTitle,
+  Trigger: DrawerTrigger
+};
+
+export { Drawer_namespace as Drawer, DrawerBackdrop, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerHandle, DrawerPositioner, DrawerRoot, DrawerTitle, DrawerTrigger };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react-drawer",
-  "version": "1.0.0",
+  "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(