vaul - npm Package Compare versions

Comparing version 0.9.2 to 0.9.3

dist/index.d.ts

@@ -25,3 +25,2 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
     dismissible?: boolean;
-    handleOnly?: boolean;
     onDrag?: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
@@ -33,6 +32,13 @@ onRelease?: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void;
     direction?: 'top' | 'bottom' | 'left' | 'right';
-    preventScrollRestoration?: boolean;
-    disablePreventScroll?: boolean;
+    defaultOpen?: boolean;
+    repositionInputs?: boolean;
 } & (WithFadeFromProps | WithoutFadeFromProps);
-declare function Root({ open: openProp, onOpenChange, children, shouldScaleBackground, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, nested, setBackgroundColorOnScale, closeThreshold, scrollLockTimeout, dismissible, handleOnly, fadeFromIndex, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal, onClose, noBodyStyles, direction, preventScrollRestoration, disablePreventScroll, }: DialogProps): React.JSX.Element;
+declare function Root({ open: openProp, onOpenChange, children, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, shouldScaleBackground, setBackgroundColorOnScale, closeThreshold, scrollLockTimeout, dismissible, fadeFromIndex, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal, onClose, noBodyStyles, direction, defaultOpen, repositionInputs, }: DialogProps): React.JSX.Element;
+declare const Overlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type ContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    onAnimationEnd?: (open: boolean) => void;
+};
+declare const Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
+    onAnimationEnd?: (open: boolean) => void;
+} & React.RefAttributes<HTMLDivElement>>;
 declare function NestedRoot({ onDrag, onOpenChange, ...rest }: DialogProps): React.JSX.Element;
@@ -45,5 +51,2 @@ declare const Drawer: {
     } & React.RefAttributes<HTMLDivElement>>;
-    Handle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-        preventCycle?: boolean;
-    } & React.RefAttributes<HTMLDivElement>>;
     Overlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -57,2 +60,2 @@ Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 
-export { Drawer };
+export { Content, type ContentProps, type DialogProps, Drawer, NestedRoot, Overlay, Root, type WithFadeFromProps, type WithoutFadeFromProps };

package.json

 {
   "name": "vaul",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "Drawer component for React.",
@@ -66,4 +66,4 @@ "main": "./dist/index.js",
   "dependencies": {
-    "@radix-ui/react-dialog": "^1.0.4"
+    "@radix-ui/react-dialog": "^1.1.1"
   }
 }

README.md

@@ -24,3 +24,2 @@ https://github.com/emilkowalski/vaul/assets/36730035/fdf8c5e8-ade8-433b-8bb0-4ce10e722516
         <Drawer.Content>
-          <Drawer.Handle />
           <p>Content</p>
@@ -52,3 +51,3 @@ </Drawer.Content>
 
-Contains all parts of a dialog. Use `shouldScaleBackground` to enable background scaling, it requires an element with `[vaul-drawer-wrapper]` data attribute to scale its background.
+Contains all parts of a dialog. Use `shouldScaleBackground` to enable background scaling, it requires an element with `[data-vaul-drawer-wrapper]` data attribute to scale its background.
 Can be controlled with the `value` and `onOpenChange` props. Can be opened by default via the `open` prop.
@@ -68,10 +67,6 @@
 
-`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`.
+`repositionInputs`: When `true` Vaul will reposition inputs rather than scroll then into view if the keyboard is in the way. Setting it to `false` will fall back to the default browser behavior.
 
-`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.
@@ -81,4 +76,20 @@
 
+`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
@@ -108,8 +119,4 @@
 
-### 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.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

118

increased by6.31%

Worsened metrics

Total package byte prevSize

146583

decreased by-7.57%

Lines of code

2773

decreased by-12.74%

Dependency changes

• Updated@radix-ui/react-dialog@^1.1.1