@seed-design/react-drawer 1.0.0 → 1.0.1

package/lib/index.cjs

@@ -0,0 +1,27 @@
+var Drawer12s = require('./Drawer-12s-BXSK15mB.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,211 @@
+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 DialogProps {
+    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 Vaul
+     */
+    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: DialogProps): {
+    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 DialogProps {
+    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 { DialogProps, DrawerBackdropProps, DrawerCloseButtonProps, DrawerContentProps, DrawerContextValue, DrawerDescriptionProps, DrawerHandleProps, DrawerPositionerProps, DrawerRootProps, DrawerTitleProps, DrawerTriggerProps };

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-CAlIg6sU.js';
+export { u as useDrawer, i as useDrawerContext } from './Drawer-12s-CAlIg6sU.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.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",