Comparing version 0.8.0 to 0.8.5
@@ -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 }; |
{ | ||
"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" |
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 @@ |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis 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 riskPackage 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 riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Minified code
QualityThis 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
2777
1
94
137784
10
7
2
1