vaul - npm Package Compare versions

Comparing version 0.8.0 to 0.8.5

dist/index.d.ts

@@ -28,19 +28,19 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
     onClose?: () => void;
+    direction?: 'top' | 'bottom' | 'left' | 'right';
+    preventScrollRestoration?: boolean;
 } & (WithFadeFromProps | WithoutFadeFromProps);
-declare function Root({ open: openProp, onOpenChange, children, shouldScaleBackground, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, nested, closeThreshold, scrollLockTimeout, dismissible, fadeFromIndex, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal, onClose, }: DialogProps): React.JSX.Element;
-declare function NestedRoot({ onDrag, onOpenChange, ...rest }: DialogProps): React.JSX.Element;
+declare function Root({ open: openProp, onOpenChange, children, shouldScaleBackground, onDrag: onDragProp, onRelease: onReleaseProp, snapPoints, nested, closeThreshold, scrollLockTimeout, dismissible, fadeFromIndex, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, fixed, modal, onClose, direction, preventScrollRestoration, }: DialogProps): JSX.Element;
+declare function NestedRoot({ onDrag, onOpenChange, ...rest }: DialogProps): JSX.Element;
 declare const Drawer: {
     Root: typeof Root;
     NestedRoot: typeof NestedRoot;
-    Content: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
-        onAnimationEnd?: (open: boolean) => void;
-    } & React.RefAttributes<HTMLDivElement>>;
-    Overlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-    Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Content: any;
+    Overlay: any;
+    Trigger: React.ForwardRefExoticComponent<any>;
     Portal: React.FC<DialogPrimitive.DialogPortalProps>;
-    Close: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
-    Title: React.ForwardRefExoticComponent<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;
-    Description: React.ForwardRefExoticComponent<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+    Close: React.ForwardRefExoticComponent<any>;
+    Title: React.ForwardRefExoticComponent<any>;
+    Description: React.ForwardRefExoticComponent<any>;
 };
 
 export { Drawer };

package.json

 {
   "name": "vaul",
-  "version": "0.8.0",
+  "version": "0.8.5",
   "description": "Drawer component for React.",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    "import": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    },
+    "require": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
   "files": [
@@ -12,4 +22,4 @@ "dist"
   "scripts": {
-    "build": "tsup src/index.tsx",
-    "dev": "tsup src/index.tsx --watch",
+    "build": "bunchee",
+    "dev": "bunchee --watch",
     "dev:website": "turbo run dev --filter=website...",
@@ -39,7 +49,10 @@ "dev:test": "turbo run dev --filter=test...",
     "@radix-ui/react-dialog": "^1.0.4",
+    "@types/node": "^20.11.0",
+    "bunchee": "^4.4.0",
     "eslint": "^7.32.0",
     "prettier": "^2.5.1",
-    "typescript": "5.2.2",
-    "tsup": "^6.4.0",
-    "turbo": "1.6"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "turbo": "1.6",
+    "typescript": "5.2.2"
   },
@@ -50,3 +63,3 @@ "peerDependencies": {
   },
-  "packageManager": "pnpm@6.32.11",
+  "packageManager": "pnpm@8.14.1",
   "dependencies": {
@@ -53,0 +66,0 @@ "@radix-ui/react-dialog": "^1.0.4"

README.md

 https://github.com/emilkowalski/vaul/assets/36730035/fdf8c5e8-ade8-433b-8bb0-4ce10e722516
 
-Vaul is an unstyled drawer component for React that can be used as a Dialog replacement on tablet and mobile devices. It uses [Radix's Dialog primitive](https://www.radix-ui.com/docs/primitives/components/dialog#trigger) under the hood and is inspired by [this tweet](https://twitter.com/devongovett/status/1674470185783402496).
+Vaul is an unstyled drawer component for React that can be used as a Dialog replacement on tablet and mobile devices. You can read about why and how it was built [here](https://emilkowal.ski/ui/building-a-drawer-component).
 
 ## Usage
 
-To start using the library, install it in your project:
+To start using the library, install it in your project:,
 
@@ -49,3 +49,3 @@ ```bash
 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.
-Can be controlled with the `value` and `onOpenChange` props. Can be opened by default via `defaultOpen` prop.
+Can be controlled with the `value` and `onOpenChange` props. Can be opened by default via the `open` prop.
 
@@ -64,2 +64,6 @@ Additional props:
 
+`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`.
+
 ### Trigger
@@ -66,0 +70,0 @@

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Lines of code

2777

increased by1267.98%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

94

increased by4.44%

Worsened metrics

Total package byte prevSize

137784

decreased by-38.88%

Dev dependency count

10

increased by42.86%

Number of package files

7

decreased by-12.5%

Number of low supply chain risk alerts

2

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes