vaul - npm Package Compare versions

Comparing version 0.9.0 to 0.9.1

dist/index.d.ts

@@ -18,7 +18,10 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
     closeThreshold?: number;
+    noBodyStyles?: boolean;
     onOpenChange?: (open: boolean) => void;
     shouldScaleBackground?: boolean;
+    setBackgroundColorOnScale?: boolean;
     scrollLockTimeout?: number;
     fixed?: boolean;
     dismissible?: boolean;
+    handleOnly?: boolean;
     onDrag?: (event: React.PointerEvent<HTMLDivElement>, percentageDragged: number) => void;
@@ -31,4 +34,5 @@ onRelease?: (event: React.PointerEvent<HTMLDivElement>, open: boolean) => void;
     preventScrollRestoration?: boolean;
+    disablePreventScroll?: 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, direction, preventScrollRestoration, }: DialogProps): React.JSX.Element;
+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 NestedRoot({ onDrag, onOpenChange, ...rest }: DialogProps): React.JSX.Element;
@@ -41,2 +45,5 @@ 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>>;
@@ -43,0 +50,0 @@ Trigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package.json

 {
   "name": "vaul",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "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",
   "files": [
     "dist"
   ],
+  "exports": {
+    "import": {
+      "types": "./dist/index.d.mts",
+      "default": "./dist/index.mjs"
+    },
+    "require": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
   "scripts": {
-    "build": "tsup src/index.tsx",
-    "dev": "tsup src/index.tsx --watch",
+    "type-check": "tsc --noEmit",
+    "build": "pnpm type-check && bunchee",
+    "dev": "bunchee --watch",
     "dev:website": "turbo run dev --filter=website...",
@@ -38,7 +49,12 @@ "dev:test": "turbo run dev --filter=test...",
     "@radix-ui/react-dialog": "^1.0.4",
+    "@types/node": "20.5.7",
+    "@types/react": "18.2.55",
+    "@types/react-dom": "18.2.18",
+    "bunchee": "^4.4.6",
     "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"
   },
@@ -45,0 +61,0 @@ "peerDependencies": {

README.md

@@ -24,2 +24,3 @@ https://github.com/emilkowalski/vaul/assets/36730035/fdf8c5e8-ade8-433b-8bb0-4ce10e722516
         <Drawer.Content>
+          <Drawer.Handle />
           <p>Content</p>
@@ -58,3 +59,3 @@ </Drawer.Content>
 
-`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.
 
@@ -65,4 +66,6 @@ `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.
 
-`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`.
@@ -72,4 +75,10 @@
 
-`[data-vaul-no-drag]`: When interacting with an elemenet with this data attribute, the drawer won't be dragged.
+`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
@@ -99,4 +108,8 @@
 
+### 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

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

3178

increased by871.87%

Number of low quality alerts

1

decreased by-50%

Number of lines in readme file

111

increased by13.27%

Worsened metrics

Total package byte prevSize

158613

decreased by-37.45%

Dev dependency count

12

increased by71.43%

Number of package files

7

decreased by-30%

Number of low supply chain risk alerts

2

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes