diff --git a/src/context.ts b/src/context.ts index b08603a..4f8742c 100644 --- a/src/context.ts +++ b/src/context.ts @@ -5,7 +5,7 @@ interface DrawerContextValue { drawerRef: React.RefObject; overlayRef: React.RefObject; onPress: (event: React.PointerEvent) => void; - onRelease: (event: React.PointerEvent) => void; + onRelease: (event: React.PointerEvent | null) => void; onDrag: (event: React.PointerEvent) => void; onNestedDrag: (event: React.PointerEvent, percentageDragged: number) => void; onNestedOpenChange: (o: boolean) => void; @@ -23,7 +23,7 @@ interface DrawerContextValue { closeDrawer: () => void; openProp?: boolean; onOpenChange?: (o: boolean) => void; - direction?: DrawerDirection; + direction: DrawerDirection; shouldScaleBackground: boolean; setBackgroundColorOnScale: boolean; noBodyStyles: boolean; diff --git a/src/index.tsx b/src/index.tsx index 7d78d7c..99179b6 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -155,7 +155,7 @@ export function Root({ modal = true, onClose, nested, - noBodyStyles, + noBodyStyles = false, direction = 'bottom', defaultOpen = false, disablePreventScroll = true, @@ -247,7 +247,7 @@ export function Root({ const { restorePositionSetting } = usePositionFixed({ isOpen, modal, - nested, + nested: nested ?? false, hasBeenOpened, preventScrollRestoration, noBodyStyles, @@ -307,7 +307,11 @@ export function Root({ } // Disallow dragging if drawer was scrolled within `scrollLockTimeout` - if (date.getTime() - lastTimeDragPrevented.current?.getTime() < scrollLockTimeout && swipeAmount === 0) { + if ( + lastTimeDragPrevented.current && + date.getTime() - lastTimeDragPrevented.current.getTime() < scrollLockTimeout && + swipeAmount === 0 + ) { lastTimeDragPrevented.current = date; return false; } @@ -581,7 +585,7 @@ export function Root({ dragEndTime.current = new Date(); } - function onRelease(event: React.PointerEvent) { + function onRelease(event: React.PointerEvent | null) { if (!isDragging || !drawerRef.current) return; drawerRef.current.classList.remove(DRAG_CLASS); @@ -590,7 +594,7 @@ export function Root({ dragEndTime.current = new Date(); const swipeAmount = getTranslate(drawerRef.current, direction); - if (!shouldDrag(event.target, false) || !swipeAmount || Number.isNaN(swipeAmount)) return; + if (!event || !shouldDrag(event.target, false) || !swipeAmount || Number.isNaN(swipeAmount)) return; if (dragStartTime.current === null) return; @@ -790,9 +794,11 @@ export const Overlay = React.forwardRef) => onRelease(event), [onRelease]); + return ( (function ( } }, []); - function handleOnPointerUp(event: React.PointerEvent) { + function handleOnPointerUp(event: React.PointerEvent | null) { pointerStartRef.current = null; wasBeyondThePointRef.current = false; onRelease(event); @@ -1005,8 +1011,10 @@ export const Handle = React.forwardRef(function ( // Make sure to clear the timeout id if the user releases the handle before the cancel timeout handleCancelInteraction(); - if ((!snapPoints || snapPoints.length === 0) && dismissible) { - closeDrawer(); + if (!snapPoints || snapPoints.length === 0) { + if (!dismissible) { + closeDrawer(); + } return; } @@ -1031,7 +1039,9 @@ export const Handle = React.forwardRef(function ( } function handleCancelInteraction() { - window.clearTimeout(closeTimeoutIdRef.current); + if (closeTimeoutIdRef.current) { + window.clearTimeout(closeTimeoutIdRef.current); + } shouldCancelInteractionRef.current = false; } diff --git a/src/use-prevent-scroll.ts b/src/use-prevent-scroll.ts index 447c916..2ed43a7 100644 --- a/src/use-prevent-scroll.ts +++ b/src/use-prevent-scroll.ts @@ -267,11 +267,15 @@ function preventScrollMobileSafari() { } // Sets a CSS property on an element, and returns a function to revert it to the previous value. -function setStyle(element: HTMLElement, style: string, value: string) { +function setStyle(element: HTMLElement, style: keyof React.CSSProperties, value: string) { + // https://github.com/microsoft/TypeScript/issues/17827#issuecomment-391663310 + // @ts-ignore let cur = element.style[style]; + // @ts-ignore element.style[style] = value; return () => { + // @ts-ignore element.style[style] = cur; }; } diff --git a/src/use-snap-points.ts b/src/use-snap-points.ts index f3655c0..0c3507e 100644 --- a/src/use-snap-points.ts +++ b/src/use-snap-points.ts @@ -60,7 +60,7 @@ export function useSnapPoints({ ); const activeSnapPointIndex = React.useMemo( - () => snapPoints?.findIndex((snapPoint) => snapPoint === activeSnapPoint), + () => snapPoints?.findIndex((snapPoint) => snapPoint === activeSnapPoint) ?? null, [snapPoints, activeSnapPoint], ); @@ -126,6 +126,7 @@ export function useSnapPoints({ if ( snapPointsOffset && newSnapPointIndex !== snapPointsOffset.length - 1 && + fadeFromIndex !== undefined && newSnapPointIndex !== fadeFromIndex && newSnapPointIndex < fadeFromIndex ) { @@ -205,7 +206,7 @@ export function useSnapPoints({ const dragDirection = hasDraggedUp ? 1 : -1; // 1 = up, -1 = down // Don't do anything if we swipe upwards while being on the last snap point - if (dragDirection > 0 && isLastSnapPoint) { + if (dragDirection > 0 && isLastSnapPoint && snapPoints) { snapToPoint(snapPointsOffset[snapPoints.length - 1]); return; } diff --git a/tsconfig.json b/tsconfig.json index c54f605..d62bc9e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,7 +4,8 @@ "target": "es2018", "moduleResolution": "node", "esModuleInterop": true, - "lib": ["es2015", "dom"] + "lib": ["es2015", "dom"], + "strict": true }, "include": ["src"], }