fix: controlled state

README.md

@@ -21,7 +21,6 @@ function MyComponent() {
       <Drawer.Trigger>Open</Drawer.Trigger>
       <Drawer.Portal>
         <Drawer.Content>
-          <Drawer.Handle />
           <p>Content</p>
         </Drawer.Content>
         <Drawer.Overlay />
@@ -63,20 +62,32 @@ Additional props:
 
 `modal`: When `false` it allows to interact with elements outside of the drawer without closing it. Defaults to `true`.
 
-`handleOnly`: When `true` only allows the drawer to be dragged by the `<Drawer.Handle />` component. Defaults to `false`.
-
 `direction`: Direction of the drawer. Can be `top` or `bottom`, `left`, `right`. Defaults to `bottom`.
 
-`preventScrollRestoration`: When `true` it prevents scroll restoration when the drawer is closed after a navigation happens inside of it. Defaults to `true`.
-
 `disablePreventScroll`: When `true` scroll prevention mechanism will be disabled. Scroll prevention ensures that page will not scroll on mobile when opening drawer. However this mechanism gets confused when drawer has an input with autofocus and therefore opens simulataneosly with touch keyboard. Defaults to `true`. `modal` set to `false` also disables it.
 
 `noBodyStyles`: When `true` the `body` doesn't get any styles assigned from Vaul.
 
 `setBackgroundColorOnScale`: When `false` we don't change body's background color when the drawer is open. `true` by default.
 
+`defaultOpen`: Opened by default, still reacts to `open` state changes.
+
 `[data-vaul-no-drag]`: When interacting with an element with this data attribute, the drawer won't be dragged.
 
+### Controlled Drawer
+
+Drawer can be controlled programmatically by providing the `open` prop. If you want to react to open state changes from within the Drawer use the `onOpenChange` prop, this will allow you to provide your own open state while still closing the drawer when the escape key is pressed for example.
+
+```
+const [open, setOpen] = React.useState(false);
+
+// ...
+
+<Drawer.Root open={open} onOpenChange={setOpen}>
+  // ...
+</Drawer.Root>
+```
+
 ### Trigger
 
 The button that opens the dialog. [Props](https://www.radix-ui.com/docs/primitives/components/dialog#trigger).
@@ -101,10 +112,6 @@ An optional accessible description to be announced when the dialog is opened. [P
 
 The button that closes the dialog. [Props](https://www.radix-ui.com/docs/primitives/components/dialog#close).
 
-### Handle
-
-A drag hint (also known as grabber). Shows people that they can drag the drawer to resize it; they can also tap it to cycle through the snap points, and double tap quickly to close the drawer. Set `preventCycle={true}` to stop this behavior. If you want to change the handle's hit area you can do so by styling the `[data-vaul-handle-hitarea]` selector (Defaults to 44x44 on mobile devices).
-
 ### Portal
 
 Portals your drawer into the body.

package.json

@@ -63,6 +63,6 @@
   },
   "packageManager": "pnpm@8.8.0",
   "dependencies": {
-    "@radix-ui/react-dialog": "^1.0.4"
+    "@radix-ui/react-dialog": "^1.1.1"
   }
 }

src/constants.ts

@@ -4,3 +4,15 @@ export const TRANSITIONS = {
 };
 
 export const VELOCITY_THRESHOLD = 0.4;
+
+export const CLOSE_THRESHOLD = 0.25;
+
+export const SCROLL_LOCK_TIMEOUT = 100;
+
+export const BORDER_RADIUS = 8;
+
+export const NESTED_DISPLACEMENT = 16;
+
+export const WINDOW_TOP_OFFSET = 26;
+
+export const DRAG_CLASS = 'vaul-dragging';

src/context.ts

@@ -12,7 +12,6 @@ interface DrawerContextValue {
   onNestedOpenChange: (o: boolean) => void;
   onNestedRelease: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void;
   dismissible: boolean;
-  handleOnly: boolean;
   isOpen: boolean;
   isDragging: boolean;
   keyboardIsOpen: React.MutableRefObject<boolean>;
@@ -22,9 +21,7 @@ interface DrawerContextValue {
   shouldFade: boolean;
   activeSnapPoint?: number | string | null;
   setActiveSnapPoint: (o: number | string | null) => void;
-  visible: boolean;
   closeDrawer: () => void;
-  setVisible: (o: boolean) => void;
   openProp?: boolean;
   onOpenChange?: (o: boolean) => void;
   direction?: DrawerDirection;
@@ -42,7 +39,6 @@ export const DrawerContext = React.createContext<DrawerContextValue>({
   onNestedRelease: () => {},
   openProp: undefined,
   dismissible: false,
-  handleOnly: false,
   isOpen: false,
   isDragging: false,
   keyboardIsOpen: { current: false },
@@ -53,9 +49,7 @@ export const DrawerContext = React.createContext<DrawerContextValue>({
   activeSnapPoint: null,
   onOpenChange: () => {},
   setActiveSnapPoint: () => {},
-  visible: false,
   closeDrawer: () => {},
-  setVisible: () => {},
   direction: 'bottom',
 });