base-vaul 1.0.0 → 1.2.0

package/dist/index.d.mts

@@ -31,11 +31,9 @@ interface WithoutFadeFromProps {
   snapPoints?: (number | string)[];
   fadeFromIndex?: never;
 }
-type DialogProps = {
+type DialogProps = Dialog.Root.Props & {
   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.
@@ -75,23 +73,13 @@ type DialogProps = {
   dismissible?: boolean;
   onDrag?: (event: BaseUIMouseEvent, percentageDragged: number) => void;
   onRelease?: (event: BaseUIMouseEvent, 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;
+  direction?: 'top' | 'bottom' | 'left' | 'right';
   /**
    * When set to `true` prevents scrolling on the document body on mount, and restores it on unmount.
    * @default false
@@ -111,17 +99,13 @@ type DialogProps = {
    */
   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;
 } & (WithFadeFromProps | WithoutFadeFromProps);
 declare function Root({
   open: openProp,
   onOpenChange,
+  onOpenChangeComplete,
   children,
   onDrag: onDragProp,
   onRelease: onReleaseProp,
@@ -146,14 +130,13 @@ declare function Root({
   snapToSequentialPoint,
   preventScrollRestoration,
   repositionInputs,
-  onAnimationEnd,
   container,
   autoFocus
 }: DialogProps): react_jsx_runtime0.JSX.Element;
-declare const Overlay: React.ForwardRefExoticComponent<Omit<_base_ui_react0.DialogBackdropProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const Overlay: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react0.DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 type ContentProps = React.ComponentPropsWithoutRef<typeof Dialog.Popup>;
-declare const Content: React.ForwardRefExoticComponent<Omit<_base_ui_react0.DialogPopupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-type HandleProps = React.ComponentPropsWithoutRef<"div"> & {
+declare const Content: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react0.DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type HandleProps = React.ComponentPropsWithoutRef<'div'> & {
   preventCycle?: boolean;
 };
 declare const Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -170,16 +153,16 @@ declare function Portal(props: PortalProps): react_jsx_runtime0.JSX.Element;
 declare const Drawer: {
   Root: typeof Root;
   NestedRoot: typeof NestedRoot;
-  Content: React.ForwardRefExoticComponent<Omit<_base_ui_react0.DialogPopupProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-  Overlay: React.ForwardRefExoticComponent<Omit<_base_ui_react0.DialogBackdropProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Content: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react0.DialogPopupProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+  Overlay: React.ForwardRefExoticComponent<Omit<Omit<_base_ui_react0.DialogBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
   Trigger: Dialog.Trigger;
   Portal: typeof Portal;
   Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     preventCycle?: boolean;
   } & React.RefAttributes<HTMLDivElement>>;
-  Close: React.ForwardRefExoticComponent<_base_ui_react0.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
-  Title: React.ForwardRefExoticComponent<_base_ui_react0.DialogTitleProps & React.RefAttributes<HTMLParagraphElement>>;
-  Description: React.ForwardRefExoticComponent<_base_ui_react0.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+  Close: React.ForwardRefExoticComponent<Omit<_base_ui_react0.DialogCloseProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+  Title: React.ForwardRefExoticComponent<Omit<_base_ui_react0.DialogTitleProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+  Description: React.ForwardRefExoticComponent<Omit<_base_ui_react0.DialogDescriptionProps, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
 };
 //#endregion
 export { Content, ContentProps, DialogProps, Drawer, Handle, HandleProps, NestedRoot, Overlay, Portal, Root, WithFadeFromProps, WithoutFadeFromProps };

package/dist/index.mjs

@@ -1,4 +1,4 @@
-"use client";
+'use client';
 
 import { Dialog } from "@base-ui/react";
 import * as React$1 from "react";
@@ -663,17 +663,21 @@ function usePositionFixed({ isOpen, modal, nested, hasBeenOpened, preventScrollR
 
 //#endregion
 //#region src/index.tsx
-function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, shouldScaleBackground = false, setBackgroundColorOnScale = true, 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 }) {
+function Root({ open: openProp, onOpenChange, onOpenChangeComplete, children, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, shouldScaleBackground = false, setBackgroundColorOnScale = true, 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, container, autoFocus = false }) {
+	const isModal = modal === true || modal === "trap-focus";
 	const [isOpen = false, setIsOpen] = useControllableState({
 		defaultProp: defaultOpen,
 		prop: openProp,
 		onChange: (o) => {
-			onOpenChange?.(o);
+			onOpenChange?.(o, {
+				reason: "none",
+				preventUnmountOnClose: () => {}
+			});
 			if (!o && !nested) restorePositionSetting();
 			setTimeout(() => {
-				onAnimationEnd?.(o);
+				onOpenChangeComplete?.(o);
 			}, TRANSITIONS.DURATION * 1e3);
-			if (o && !modal) {
+			if (o && !isModal) {
 				if (typeof window !== "undefined") window.requestAnimationFrame(() => {
 					document.body.style.pointerEvents = "auto";
 				});
@@ -713,10 +717,10 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
 		container,
 		snapToSequentialPoint
 	});
-	usePreventScroll({ isDisabled: !isOpen || isDragging || !modal || justReleased || !hasBeenOpened || !repositionInputs || !disablePreventScroll });
+	usePreventScroll({ isDisabled: !isOpen || isDragging || !isModal || justReleased || !hasBeenOpened || !repositionInputs || !disablePreventScroll });
 	const { restorePositionSetting } = usePositionFixed({
 		isOpen,
-		modal,
+		modal: isModal,
 		nested: nested ?? false,
 		hasBeenOpened,
 		preventScrollRestoration,
@@ -996,10 +1000,10 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
 		});
 	}
 	React.useEffect(() => {
-		if (!modal) window.requestAnimationFrame(() => {
+		if (!isModal) window.requestAnimationFrame(() => {
 			document.body.style.pointerEvents = "auto";
 		});
-	}, [modal]);
+	}, [isModal]);
 	return /* @__PURE__ */ jsx(Dialog.Root, {
 		defaultOpen,
 		onOpenChange: (open) => {
@@ -1010,6 +1014,7 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
 		},
 		open: isOpen,
 		modal,
+		onOpenChangeComplete,
 		children: /* @__PURE__ */ jsx(DrawerContext.Provider, {
 			value: {
 				activeSnapPoint,
@@ -1032,7 +1037,7 @@ function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRe
 				onNestedOpenChange,
 				onNestedRelease,
 				keyboardIsOpen,
-				modal,
+				modal: isModal,
 				snapPointsOffset,
 				activeSnapPointIndex,
 				direction,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "base-vaul",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "type": "module",
   "publishConfig": {
     "access": "public"