Use CSS Animations for entry and exit animations

src/constants.ts

@@ -4,3 +4,7 @@ export const TRANSITIONS = {
 };
 
 export const VELOCITY_THRESHOLD = 0.4;
+
+export const BORDER_RADIUS = 8;
+
+export const WINDOW_TOP_OFFSET = 26;

src/context.ts

@@ -4,7 +4,6 @@ import { DrawerDirection } from './types';
 interface DrawerContextValue {
   drawerRef: React.RefObject<HTMLDivElement>;
   overlayRef: React.RefObject<HTMLDivElement>;
-  scaleBackground: (open: boolean) => void;
   onPress: (event: React.PointerEvent<HTMLDivElement>) => void;
   onRelease: (event: React.PointerEvent<HTMLDivElement>) => void;
   onDrag: (event: React.PointerEvent<HTMLDivElement>) => void;
@@ -28,12 +27,14 @@ interface DrawerContextValue {
   openProp?: boolean;
   onOpenChange?: (o: boolean) => void;
   direction?: DrawerDirection;
+  shouldScaleBackground: boolean;
+  setBackgroundColorOnScale: boolean;
+  noBodyStyles: boolean;
 }
 
 export const DrawerContext = React.createContext<DrawerContextValue>({
   drawerRef: { current: null },
   overlayRef: { current: null },
-  scaleBackground: () => {},
   onPress: () => {},
   onRelease: () => {},
   onDrag: () => {},
@@ -57,6 +58,9 @@ export const DrawerContext = React.createContext<DrawerContextValue>({
   closeDrawer: () => {},
   setVisible: () => {},
   direction: 'bottom',
+  shouldScaleBackground: false,
+  setBackgroundColorOnScale: true,
+  noBodyStyles: false,
 });
 
 export const useDrawerContext = () => {

src/helpers.ts

@@ -1,4 +1,4 @@
-import { DrawerDirection } from './types';
+import { AnyFunction, DrawerDirection } from './types';
 
 interface Style {
   [key: string]: string;
@@ -90,3 +90,28 @@ export function getTranslate(element: HTMLElement, direction: DrawerDirection):
 export function dampenValue(v: number) {
   return 8 * (Math.log(v + 1) - 2);
 }
+
+export function assignStyle(element: HTMLElement | null | undefined, style: Partial<CSSStyleDeclaration>) {
+  if (!element) return () => {};
+
+  const prevStyle = element.style.cssText;
+  Object.assign(element.style, style);
+
+  return () => {
+    element.style.cssText = prevStyle;
+  };
+}
+
+/**
+ * Receives functions as arguments and returns a new function that calls all.
+ */
+export function chain<T>(...fns: T[]) {
+  return (...args: T extends AnyFunction ? Parameters<T> : never) => {
+    for (const fn of fns) {
+      if (typeof fn === 'function') {
+        // @ts-ignore
+        fn(...args);
+      }
+    }
+  };
+}

src/index.tsx

@@ -1,23 +1,23 @@
 'use client';
 
 import * as DialogPrimitive from '@radix-ui/react-dialog';
-import React, { useRef, useState } from 'react';
+import React from 'react';
 import { DrawerContext, useDrawerContext } from './context';
 import './style.css';
 import { usePreventScroll, isInput, isIOS, useIsomorphicLayoutEffect } from './use-prevent-scroll';
 import { useComposedRefs } from './use-composed-refs';
 import { usePositionFixed } from './use-position-fixed';
 import { useSnapPoints } from './use-snap-points';
-import { set, reset, getTranslate, dampenValue, isVertical } from './helpers';
-import { TRANSITIONS, VELOCITY_THRESHOLD } from './constants';
+import { set, getTranslate, dampenValue, isVertical } from './helpers';
+import { BORDER_RADIUS, TRANSITIONS, VELOCITY_THRESHOLD } from './constants';
 import { DrawerDirection } from './types';
+import { useControllableState } from './use-controllable-state';
+import { useScaleBackground } from './use-scale-background';
 
 const CLOSE_THRESHOLD = 0.25;
 
 const SCROLL_LOCK_TIMEOUT = 100;
 
-const BORDER_RADIUS = 8;
-
 const NESTED_DISPLACEMENT = 16;
 
 const WINDOW_TOP_OFFSET = 26;
@@ -38,6 +38,7 @@
   activeSnapPoint?: number | string | null;
   setActiveSnapPoint?: (snapPoint: number | string | null) => void;
   children?: React.ReactNode;
+  defaultOpen?: boolean;
   open?: boolean;
   closeThreshold?: number;
   noBodyStyles?: boolean;
@@ -59,10 +60,11 @@
 } & (WithFadeFromProps | WithoutFadeFromProps);
 
 function Root({
+  defaultOpen,
   open: openProp,
   onOpenChange,
   children,
-  shouldScaleBackground,
+  shouldScaleBackground = false,
   onDrag: onDragProp,
   onRelease: onReleaseProp,
   snapPoints,
@@ -83,11 +85,14 @@
   preventScrollRestoration = true,
   disablePreventScroll = false,
 }: DialogProps) {
-  const [isOpen = false, setIsOpen] = React.useState<boolean>(false);
+  const [isOpen = false, setIsOpen] = useControllableState({
+    defaultProp: defaultOpen,
+    prop: openProp,
+    onChange: onOpenChange,
+  });
   const [hasBeenOpened, setHasBeenOpened] = React.useState<boolean>(false);
   // Not visible = translateY(100%)
   const [visible, setVisible] = React.useState<boolean>(false);
-  const [mounted, setMounted] = React.useState<boolean>(false);
   const [isDragging, setIsDragging] = React.useState<boolean>(false);
   const [justReleased, setJustReleased] = React.useState<boolean>(false);
   const overlayRef = React.useRef<HTMLDivElement>(null);
@@ -346,7 +351,6 @@
 
   React.useEffect(() => {
     return () => {
-      scaleBackground(false);
       restorePositionSetting();
     };
   }, []);
@@ -409,29 +413,10 @@
   }, [activeSnapPointIndex, snapPoints, snapPointsOffset]);
 
   function closeDrawer() {
-    if (!drawerRef.current) return;
-
     cancelDrag();
-
     onClose?.();
-    set(drawerRef.current, {
-      transform: isVertical(direction)
-        ? `translate3d(0, ${direction === 'bottom' ? '100%' : '-100%'}, 0)`
-        : `translate3d(${direction === 'right' ? '100%' : '-100%'}, 0, 0)`,
-      transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
-    });
-
-    set(overlayRef.current, {
-      opacity: '0',
-      transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
-    });
-
-    scaleBackground(false);
-
-    setTimeout(() => {
-      setVisible(false);
-      setIsOpen(false);
-    }, 300);
+    setIsOpen(false);
+    setVisible(false);
 
     setTimeout(() => {
       // reset(document.documentElement, 'scrollBehavior');
@@ -441,11 +426,12 @@
     }, TRANSITIONS.DURATION * 1000); // seconds to ms
   }
 
+
   React.useEffect(() => {
     if (!isOpen && shouldScaleBackground) {
       // Can't use `onAnimationEnd` as the component will be invisible by then
       const id = setTimeout(() => {
         reset(document.body);
       }, 200);
 
       return () => clearTimeout(id);
@@ -464,15 +450,16 @@
 
   // This can be done much better
   React.useEffect(() => {
     if (mounted) {
       onOpenChange?.(isOpen);
     }
   }, [isOpen]);
 
   React.useEffect(() => {
     setMounted(true);
   }, []);
 
+
   function resetDrawer() {
     if (!drawerRef.current) return;
     const wrapper = document.querySelector('[vaul-drawer-wrapper]');
@@ -593,7 +580,6 @@
       });
 
       openTime.current = new Date();
-      scaleBackground(true);
     }
   }, [isOpen]);
 
@@ -610,58 +596,6 @@
     }
   }, [visible]);
 
-  function scaleBackground(open: boolean) {
-    const wrapper = document.querySelector('[vaul-drawer-wrapper]');
-
-    if (!wrapper || !shouldScaleBackground) return;
-
-    if (open) {
-      if (setBackgroundColorOnScale) {
-        if (!noBodyStyles) {
-          // setting original styles initially
-          set(document.body, {
-            background: document.body.style.backgroundColor || document.body.style.background,
-          });
-          // setting body styles, with cache ignored, so that we can get correct original styles in reset
-          set(
-            document.body,
-            {
-              background: 'black',
-            },
-            true,
-          );
-        }
-      }
-
-      set(wrapper, {
-        borderRadius: `${BORDER_RADIUS}px`,
-        overflow: 'hidden',
-        ...(isVertical(direction)
-          ? {
-              transform: `scale(${getScale()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,
-              transformOrigin: 'top',
-            }
-          : {
-              transform: `scale(${getScale()}) translate3d(calc(env(safe-area-inset-top) + 14px), 0, 0)`,
-              transformOrigin: 'left',
-            }),
-        transitionProperty: 'transform, border-radius',
-        transitionDuration: `${TRANSITIONS.DURATION}s`,
-        transitionTimingFunction: `cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
-      });
-    } else {
-      // Exit
-      reset(wrapper, 'overflow');
-      reset(wrapper, 'transform');
-      reset(wrapper, 'borderRadius');
-      set(wrapper, {
-        transitionProperty: 'transform, border-radius',
-        transitionDuration: `${TRANSITIONS.DURATION}s`,
-        transitionTimingFunction: `cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
-      });
-    }
-  }
-
   function onNestedOpenChange(o: boolean) {
     const scale = o ? (window.innerWidth - NESTED_DISPLACEMENT) / window.innerWidth : 1;
     const y = o ? -NESTED_DISPLACEMENT : 0;
@@ -688,7 +622,7 @@
     }
   }
 
-  function onNestedDrag(event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) {
+  function onNestedDrag(_event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) {
     if (percentageDragged < 0) return;
 
     const initialDim = isVertical(direction) ? window.innerHeight : window.innerWidth;
@@ -704,7 +638,7 @@
     });
   }
 
-  function onNestedRelease(event: React.PointerEvent<HTMLDivElement>, o: boolean) {
+  function onNestedRelease(_event: React.PointerEvent<HTMLDivElement>, o: boolean) {
     const dim = isVertical(direction) ? window.innerHeight : window.innerWidth;
     const scale = o ? (dim - NESTED_DISPLACEMENT) / dim : 1;
     const translate = o ? -NESTED_DISPLACEMENT : 0;
@@ -722,18 +656,10 @@
   return (
     <DialogPrimitive.Root
       modal={modal}
-      onOpenChange={(o: boolean) => {
-        if (openProp !== undefined) {
-          onOpenChange?.(o);
-          return;
-        }
-
-        if (!o) {
-          closeDrawer();
-        } else {
-          setHasBeenOpened(true);
-          setIsOpen(o);
-        }
+      defaultOpen={defaultOpen}
+      onOpenChange={(open) => {
+        if (open) setHasBeenOpened(true);
+        setIsOpen(open);
       }}
       open={isOpen}
     >
@@ -745,7 +671,6 @@
           setActiveSnapPoint,
           drawerRef,
           overlayRef,
-          scaleBackground,
           onOpenChange,
           onPress,
           setVisible,
@@ -765,6 +690,9 @@
           modal,
           snapPointsOffset,
           direction,
+          shouldScaleBackground,
+          setBackgroundColorOnScale,
+          noBodyStyles,
         }}
       >
         {children}
@@ -916,20 +844,20 @@
     onPress,
     onRelease,
     onDrag,
-    dismissible,
     keyboardIsOpen,
     snapPointsOffset,
     visible,
-    closeDrawer,
     modal,
-    openProp,
-    onOpenChange,
     setVisible,
     handleOnly,
     direction,
+    isOpen,
+    snapPoints,
+    closeDrawer,
   } = useDrawerContext();
   const composedRef = useComposedRefs(ref, drawerRef);
   const pointerStartRef = React.useRef<{ x: number; y: number } | null>(null);
+  const hasSnapPoints = snapPoints && snapPoints.length > 0;
   const wasBeyondThePointRef = React.useRef(false);
 
   const isDeltaInDirection = (delta: { x: number; y: number }, direction: DrawerDirection, threshold = 0) => {
@@ -961,11 +889,18 @@
     setVisible(true);
   }, []);
 
+  React.useEffect(() => {
+    if (!isOpen) closeDrawer();
+  }, [closeDrawer, isOpen]);
+
+  useScaleBackground();
+
   return (
     <DialogPrimitive.Content
       vaul-drawer=""
       vaul-drawer-direction={direction}
       vaul-drawer-visible={visible ? 'true' : 'false'}
+      vaul-snap-points={isOpen && hasSnapPoints ? 'true' : 'false'}
       {...rest}
       ref={composedRef}
       style={
@@ -999,13 +934,6 @@
         if (keyboardIsOpen.current) {
           keyboardIsOpen.current = false;
         }
-        e.preventDefault();
-        onOpenChange?.(false);
-        if (!dismissible || openProp !== undefined) {
-          return;
-        }
-
-        closeDrawer();
       }}
       onFocusOutside={(e) => {
         if (!modal) {