Merge branch 'main' into fix-279

README.md

@@ -21,6 +21,7 @@ function MyComponent() {
       <Drawer.Trigger>Open</Drawer.Trigger>
       <Drawer.Portal>
         <Drawer.Content>
+          <Drawer.Handle />
           <p>Content</p>
         </Drawer.Content>
         <Drawer.Overlay />
@@ -54,20 +55,26 @@ Additional props:
 
 `closeThreshold`: 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.
 
-`scrollLockTimeout`: Duration for which the drawer is not draggable after scrolling content inside of the drawer. Defaults to 500ms
+`scrollLockTimeout`: Duration for which the drawer is not draggable after scrolling content inside of the drawer. Defaults to 500ms.
 
 `snapPoints`: Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Example `[0.2, 0.5, 0.8]`. You can also use px values, which doesn't take screen height into account.
 
 `fadeFromIndex`: Index of a `snapPoint` from which the overlay fade should be applied. Defaults to the last snap point.
 
-`modal`: When `false`it allows to interact with elements outside of the drawer without closing it. Defaults to`true`.
+`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.
+
 `[data-vaul-no-drag]`: When interacting with an element with this data attribute, the drawer won't be dragged.
 
 ### Trigger
@@ -94,6 +101,10 @@ 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 `[vaul-handle-hitarea]` selector (Defaults to 44x44 on mobile devices).
+
 ### Portal
 
 Portals your drawer into the body.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vaul",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "Drawer component for React.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

src/context.ts

@@ -12,7 +12,9 @@ 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>;
   snapPointsOffset: number[] | null;
   snapPoints?: (number | string)[] | null;
@@ -40,7 +42,9 @@ export const DrawerContext = React.createContext<DrawerContextValue>({
   onNestedRelease: () => {},
   openProp: undefined,
   dismissible: false,
+  handleOnly: false,
   isOpen: false,
+  isDragging: false,
   keyboardIsOpen: { current: false },
   snapPointsOffset: null,
   snapPoints: null,
@@ -55,4 +59,10 @@ export const DrawerContext = React.createContext<DrawerContextValue>({
   direction: 'bottom',
 });
 
-export const useDrawerContext = () => React.useContext(DrawerContext);
+export const useDrawerContext = () => {
+  const context = React.useContext(DrawerContext);
+  if (!context) {
+    throw new Error('useDrawerContext must be used within a Drawer.Root');
+  }
+  return context;
+};

src/helpers.ts

@@ -20,8 +20,8 @@ export function isInView(el: HTMLElement): boolean {
   );
 }
 
-export function set(el?: Element | HTMLElement | null, styles?: Style, ignoreCache = false) {
-  if (!el || !(el instanceof HTMLElement) || !styles) return;
+export function set(el: Element | HTMLElement | null | undefined, styles: Style, ignoreCache = false) {
+  if (!el || !(el instanceof HTMLElement)) return;
   let originalStyles: Style = {};
 
   Object.entries(styles).forEach(([key, value]: [string, string]) => {