diff --git a/src/index.tsx b/src/index.tsx index fe3bb803..cee0ab58 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -95,6 +95,12 @@ export function Root({ setTimeout(() => { onAnimationEnd?.(o); }, TRANSITIONS.DURATION * 1000); + + if (o && !modal) { + window.requestAnimationFrame(() => { + document.body.style.pointerEvents = 'auto'; + }); + } }, }); const [hasBeenOpened, setHasBeenOpened] = React.useState(false); @@ -545,19 +551,6 @@ export function Root({ }; }, [isOpen]); - React.useEffect(() => { - if (drawerRef.current) { - // Find all scrollable elements inside our drawer and assign a class to it so that we can disable overflow when dragging to prevent pointermove not being captured - const children = drawerRef?.current?.querySelectorAll('*'); - children?.forEach((child: Element) => { - const htmlChild = child as HTMLElement; - if (htmlChild.scrollHeight > htmlChild.clientHeight || htmlChild.scrollWidth > htmlChild.clientWidth) { - htmlChild.classList.add('vaul-scrollable'); - } - }); - } - }, [isOpen]); - function onNestedOpenChange(o: boolean) { const scale = o ? (window.innerWidth - NESTED_DISPLACEMENT) / window.innerWidth : 1; const y = o ? -NESTED_DISPLACEMENT : 0; @@ -618,7 +611,6 @@ export function Root({ return ( { if (!dismissible) return; if (open) { @@ -668,7 +660,7 @@ export function Root({ export const Overlay = React.forwardRef>( function ({ ...rest }, ref) { - const { overlayRef, snapPoints, onRelease, shouldFade, isOpen } = useDrawerContext(); + const { overlayRef, snapPoints, onRelease, shouldFade, isOpen, modal } = useDrawerContext(); const composedRef = useComposedRefs(ref, overlayRef); const hasSnapPoints = snapPoints && snapPoints.length > 0; @@ -679,6 +671,7 @@ export const Overlay = React.forwardRef ); diff --git a/src/style.css b/src/style.css index 349f7125..7ce6e4f7 100644 --- a/src/style.css +++ b/src/style.css @@ -50,21 +50,6 @@ transform: translate3d(100%, 0, 0); } -.data-vaul-dragging .data-vaul-scrollable [vault-drawer-direction='top'] { - overflow-y: hidden !important; -} -.data-vaul-dragging .data-vaul-scrollable [vault-drawer-direction='bottom'] { - overflow-y: hidden !important; -} - -.data-vaul-dragging .data-vaul-scrollable [vault-drawer-direction='left'] { - overflow-x: hidden !important; -} - -.data-vaul-dragging .data-vaul-scrollable [vault-drawer-direction='right'] { - overflow-x: hidden !important; -} - [data-vaul-drawer][data-vaul-delayed-snap-points='true'][data-vaul-drawer-direction='top'] { transform: translate3d(0, var(--snap-point-height, 0), 0); } diff --git a/test/src/app/page.tsx b/test/src/app/page.tsx index 783264eb..0e99d346 100644 --- a/test/src/app/page.tsx +++ b/test/src/app/page.tsx @@ -8,6 +8,7 @@ export default function Page() { With scaled background Without scaled background With snap points + With modal false Scrollable with inputs Nested drawers Non-dismissible diff --git a/test/src/app/with-modal-false/page.tsx b/test/src/app/with-modal-false/page.tsx new file mode 100644 index 00000000..4a4d727e --- /dev/null +++ b/test/src/app/with-modal-false/page.tsx @@ -0,0 +1,155 @@ +'use client'; + +import { clsx } from 'clsx'; +import { useState } from 'react'; +import { Drawer } from 'vaul'; + +const snapPoints = ['148px', '355px', 1]; + +export default function Page() { + const [snap, setSnap] = useState(snapPoints[0]); + + const activeSnapPointIndex = snapPoints.indexOf(snap as string); + + return ( +
+
{activeSnapPointIndex}
+ + + + + + + +
+
+ + + + + +
{' '} +

The Hidden Details

+

2 modules, 27 hours of video

+

+ The world of user interface design is an intricate landscape filled with hidden details and nuance. In + this course, you will learn something cool. To the untrained eye, a beautifully designed UI. +

+ +
+

Module 01. The Details

+
+
+ Layers of UI + A basic introduction to Layers of Design. +
+
+ Typography + The fundamentals of type. +
+
+ UI Animations + Going through the right easings and durations. +
+
+
+
+
+
+ “I especially loved the hidden details video. That was so useful, learned a lot by just reading it. + Can’t wait for more course content!” +
+
+ Yvonne Ray, Frontend Developer +
+
+
+
+

Module 02. The Process

+
+
+ Build + Create cool components to practice. +
+
+ User Insight + Find out what users think and fine-tune. +
+
+ Putting it all together + Let's build an app together and apply everything. +
+
+
+
+ + + +
+ ); +}