Drawer

1"use client";
2 
3import * as React from "react";
4import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
5 
6import { cn } from "@/lib/utils";
7 
8type AutoFocusEventHandler = (event: Event) => void;
9type FocusTarget = DrawerPrimitive.Popup.Props["initialFocus"];
10type PointerDownOutsideEvent = CustomEvent<{ originalEvent: PointerEvent }>;
11type FocusOutsideEvent = CustomEvent<{ originalEvent: FocusEvent }>;
12type DismissableLayerHandlers = {
13  onEscapeKeyDown?: (event: KeyboardEvent) => void;
14  onFocusOutside?: (event: FocusOutsideEvent) => void;
15  onInteractOutside?: (event: FocusOutsideEvent | PointerDownOutsideEvent) => void;
16  onPointerDownOutside?: (event: PointerDownOutsideEvent) => void;
17};
18type DrawerDirection = "bottom" | "left" | "right" | "top";
19type DrawerSnapPoint = DrawerPrimitive.Root.SnapPoint;
20type DrawerDragMetrics = {
21  active: boolean;
22  event: React.PointerEvent<HTMLDivElement> | null;
23  percentage: number;
24  pointerType: string;
25  releaseScheduled: boolean;
26  velocity: number;
27};
28type DrawerProps = DrawerPrimitive.Root.Props & {
29  activeSnapPoint?: DrawerSnapPoint | null;
30  autoFocus?: boolean;
31  closeThreshold?: number;
32  container?: HTMLElement | null;
33  direction?: DrawerDirection;
34  disablePreventScroll?: boolean;
35  dismissible?: boolean;
36  fadeFromIndex?: number;
37  fixed?: boolean;
38  handleOnly?: boolean;
39  nested?: boolean;
40  noBodyStyles?: boolean;
41  onAnimationEnd?: (open: boolean) => void;
42  onClose?: () => void;
43  onDrag?: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
44  onRelease?: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void;
45  preventScrollRestoration?: boolean;
46  repositionInputs?: boolean;
47  scrollLockTimeout?: number;
48  setActiveSnapPoint?: (snapPoint: DrawerSnapPoint | null) => void;
49  setBackgroundColorOnScale?: boolean;
50  shouldScaleBackground?: boolean;
51  showSwipeHandle?: boolean;
52  snapToSequentialPoint?: boolean;
53};
54type DrawerPortalProps = DrawerPrimitive.Portal.Props & {
55  forceMount?: boolean;
56};
57type DrawerOverlayProps = DrawerPrimitive.Backdrop.Props & {
58  asChild?: boolean;
59  children?: React.ReactNode;
60  forceMount?: boolean;
61};
62type DrawerContentProps = DrawerPrimitive.Popup.Props & {
63  asChild?: boolean;
64  children?: React.ReactNode;
65  forceMount?: boolean;
66  onCloseAutoFocus?: AutoFocusEventHandler;
67  onOpenAutoFocus?: AutoFocusEventHandler;
68} & DismissableLayerHandlers;
69 
70type DrawerContextProps = {
71// … truncated