base-vaul 1.1.0 → 1.2.1

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,11 +73,6 @@ 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;
   /**
@@ -87,11 +80,6 @@ type DialogProps = {
    * @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
@@ -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,7 +130,6 @@ declare function Root({
   snapToSequentialPoint,
   preventScrollRestoration,
   repositionInputs,
-  onAnimationEnd,
   container,
   autoFocus
 }: DialogProps): react_jsx_runtime0.JSX.Element;

package/dist/index.mjs

@@ -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.1.0",
+  "version": "1.2.1",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -49,8 +49,8 @@
     "turbo": "2.6.3",
     "typescript": "5.9.2",
     "unplugin-lightningcss": "^0.4.3",
-    "@repo/eslint-config": "0.0.1",
-    "@repo/typescript-config": "0.0.0"
+    "@repo/typescript-config": "0.0.0",
+    "@repo/eslint-config": "0.0.1"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc",