diff --git a/src/SheetScroller.tsx b/src/SheetScroller.tsx
deleted file mode 100644
index 85c95e5..0000000
--- a/src/SheetScroller.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import React, { type TouchEvent, type UIEvent, forwardRef } from 'react';
-import { motion, type MotionStyle } from 'motion/react';
-
-import { useSheetContext, useSheetScrollerContext } from './context';
-import { type SheetScrollerProps } from './types';
-import { isTouchDevice } from './utils';
-import { styles } from './styles';
-
-export const SheetScroller = forwardRef
(
- (
- {
- autoPadding = true,
- disableScroll = false,
- draggableAt = 'top',
- children,
- style: styleProp,
- className = '',
- ...rest
- },
- ref
- ) => {
- const { y } = useSheetContext();
- const { setDragEnabled, setDragDisabled } = useSheetScrollerContext();
-
- function determineDragState(element: HTMLDivElement) {
- /**
- * If the caller is managing the scrollability of the element,
- * enable the dragging of the sheet content.
- */
- if (disableScroll) {
- setDragEnabled();
- return;
- }
-
- const { scrollTop, scrollHeight, clientHeight } = element;
- const isScrollable = scrollHeight > clientHeight;
-
- if (!isScrollable) return;
-
- const isAtTop = scrollTop <= 0;
- const isAtBottom = scrollHeight - scrollTop === clientHeight;
-
- const shouldEnable =
- (draggableAt === 'top' && isAtTop) ||
- (draggableAt === 'bottom' && isAtBottom) ||
- (draggableAt === 'both' && (isAtTop || isAtBottom));
-
- if (shouldEnable) {
- setDragEnabled();
- } else {
- setDragDisabled();
- }
- }
-
- function onScroll(event: UIEvent) {
- determineDragState(event.currentTarget);
- if (rest.onScroll) rest.onScroll(event);
- }
-
- function onTouchStart(event: TouchEvent) {
- determineDragState(event.currentTarget);
- if (rest.onTouchStart) rest.onTouchStart(event);
- }
-
- const scrollProps = isTouchDevice()
- ? { onScroll, onTouchStart }
- : undefined;
-
- const style: MotionStyle = {
- ...styles.scroller,
- ...styleProp,
- };
-
- if (autoPadding) {
- style.paddingBottom = y;
- }
-
- if (disableScroll) {
- style.overflowY = 'hidden';
- }
-
- return (
-
- {children}
-
- );
- }
-);
-
-SheetScroller.displayName = 'SheetScroller';
diff --git a/src/constants.ts b/src/constants.ts
index b112813..e7f236e 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,13 +1,15 @@
-export const MAX_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';
+import type { SheetTweenConfig } from './types';
+
+export const DEFAULT_HEIGHT = 'calc(100% - env(safe-area-inset-top) - 34px)';
export const IS_SSR = typeof window === 'undefined';
-export const DEFAULT_TWEEN_CONFIG = {
+export const DEFAULT_TWEEN_CONFIG: SheetTweenConfig = {
ease: 'easeOut',
duration: 0.2,
};
-export const REDUCED_MOTION_TWEEN_CONFIG = {
+export const REDUCED_MOTION_TWEEN_CONFIG: SheetTweenConfig = {
ease: 'linear',
duration: 0.01,
};
diff --git a/src/context.tsx b/src/context.tsx
index 6c0cc51..112c509 100644
--- a/src/context.tsx
+++ b/src/context.tsx
@@ -1,10 +1,5 @@
-import React, {
- type ReactNode,
- createContext,
- useContext,
- useState,
-} from 'react';
-import { type SheetScrollerContextType, type SheetContextType } from './types';
+import { createContext, useContext } from 'react';
+import { type SheetContextType } from './types';
export const SheetContext = createContext(
undefined
@@ -15,38 +10,3 @@ export function useSheetContext() {
if (!context) throw new Error('Sheet context error');
return context;
}
-
-export const SheetScrollerContext = createContext<
- SheetScrollerContextType | undefined
->(undefined);
-
-export function SheetScrollerContextProvider({
- children,
-}: {
- children: ReactNode;
-}) {
- const sheetContext = useSheetContext();
- const [disableDrag, setDisableDrag] = useState(!!sheetContext.disableDrag);
-
- function setDragEnabled() {
- if (!sheetContext.disableDrag) setDisableDrag(false);
- }
-
- function setDragDisabled() {
- if (!disableDrag) setDisableDrag(true);
- }
-
- return (
-
- {children}
-
- );
-}
-
-export function useSheetScrollerContext() {
- const context = useContext(SheetScrollerContext);
- if (!context) throw new Error('Sheet scroller context error');
- return context;
-}
diff --git a/src/hooks/use-dimensions.ts b/src/hooks/use-dimensions.ts
index bdf967f..604c673 100644
--- a/src/hooks/use-dimensions.ts
+++ b/src/hooks/use-dimensions.ts
@@ -5,15 +5,15 @@ import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
export function useDimensions() {
const [dimensions, setDimensions] = useState(() => ({
- height: !IS_SSR ? window.innerHeight : 0,
- width: !IS_SSR ? window.innerWidth : 0,
+ windowHeight: !IS_SSR ? window.innerHeight : 0,
+ windowWidth: !IS_SSR ? window.innerWidth : 0,
}));
useIsomorphicLayoutEffect(() => {
function handler() {
setDimensions({
- height: window.innerHeight,
- width: window.innerWidth,
+ windowHeight: window.innerHeight,
+ windowWidth: window.innerWidth,
});
}
diff --git a/src/hooks/use-drag-constraints.ts b/src/hooks/use-drag-constraints.ts
index 4964280..340c4be 100644
--- a/src/hooks/use-drag-constraints.ts
+++ b/src/hooks/use-drag-constraints.ts
@@ -8,7 +8,7 @@ import { type BoundingBox } from 'motion/react';
const constraints: BoundingBox = { bottom: 0, top: 0, left: 0, right: 0 };
export function useDragConstraints() {
- const constraintsRef = useRef(null);
- const onMeasureDragConstraints = useCallback(() => constraints, []);
- return { constraintsRef, onMeasureDragConstraints };
+ const ref = useRef(null);
+ const onMeasure = useCallback(() => constraints, []);
+ return { ref, onMeasure };
}
diff --git a/src/hooks/use-event-callbacks.ts b/src/hooks/use-event-callbacks.ts
deleted file mode 100644
index 969ec2a..0000000
--- a/src/hooks/use-event-callbacks.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { type RefObject, useCallback, useEffect, useRef } from 'react';
-
-import { type SheetEvents } from '../types';
-
-export function useEventCallbacks(
- isOpen: boolean,
- callbacks: RefObject
-) {
- const prevOpen = usePrevious(isOpen);
- const didOpen = useRef(false);
-
- // Because of AnimatePrecence we don't have access to latest isOpen value
- // so we need to read and write to a ref to determine if we are
- // opening or closing the sheet
- const handleAnimationComplete = useCallback(() => {
- if (!didOpen.current) {
- callbacks.current.onOpenEnd?.();
- didOpen.current = true;
- } else {
- callbacks.current.onCloseEnd?.();
- didOpen.current = false;
- }
- }, [isOpen, prevOpen]);
-
- useEffect(() => {
- if (!prevOpen && isOpen) {
- callbacks.current.onOpenStart?.();
- } else if (!isOpen && prevOpen) {
- callbacks.current.onCloseStart?.();
- }
- }, [isOpen, prevOpen]);
-
- return { handleAnimationComplete };
-}
-
-function usePrevious(state: T): T | undefined {
- const ref = useRef(undefined);
-
- useEffect(() => {
- ref.current = state;
- });
-
- return ref.current;
-}
diff --git a/src/hooks/use-modal-effect.ts b/src/hooks/use-modal-effect.ts
index ec56101..9672350 100644
--- a/src/hooks/use-modal-effect.ts
+++ b/src/hooks/use-modal-effect.ts
@@ -1,25 +1,34 @@
-import { transform, type MotionValue } from 'motion';
+import { type MotionValue, transform } from 'motion';
import { type RefObject } from 'react';
+import type { SheetDetent, SheetSnapPoint } from '../types';
import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect';
import { useSafeAreaInsets } from './use-safe-area-insets';
-import { getSheetHeight, getSnapPoints } from '../utils';
export function useModalEffect({
y,
- rootId,
- sheetRef,
- snapPointsProp,
+ detent,
+ rootId: _rootId,
+ sheetHeight,
+ snapPoints,
startThreshold,
}: {
y: MotionValue;
+ detent: SheetDetent;
rootId?: string;
- sheetRef: RefObject;
- snapPointsProp?: number[];
+ sheetHeight: number;
+ snapPoints: SheetSnapPoint[];
startThreshold?: number;
}) {
const insetTop = useSafeAreaInsets().top;
+ let rootId: string | undefined = _rootId;
+
+ if (rootId && detent === 'full') {
+ console.warn('Using "full" detent with modal effect is not supported.');
+ rootId = undefined;
+ }
+
// Cleanup on unmount
useIsomorphicLayoutEffect(() => {
return () => {
@@ -33,15 +42,7 @@ export function useModalEffect({
const root = document.querySelector(`#${rootId}`) as HTMLDivElement;
if (!root) return;
- let sheetHeight = 0;
-
const removeStartListener = y.on('animationStart', () => {
- /**
- * Only calculate the sheet height when the animation starts to avoid
- * unnecessary layout calculations when y value changes.
- */
- sheetHeight = getSheetHeight(sheetRef);
-
// biome-ignore lint/style/noNonNullAssertion: root is always defined here
setupModalEffect(rootId!);
});
@@ -55,17 +56,13 @@ export function useModalEffect({
let progress = Math.max(0, 1 - yValue / sheetHeight);
- const snapPoints = snapPointsProp
- ? getSnapPoints({ snapPointsProp, sheetHeight })
- : undefined;
-
/**
* Start the effect only if we have dragged over the second snap point
* to make the effect more natural as the sheet will reach it's final
* position when the user drags it over the second snap point.
*/
const snapThresholdPoint =
- snapPoints && snapPoints.length > 1 ? snapPoints[1] : undefined;
+ snapPoints.length > 1 ? snapPoints[snapPoints.length - 2] : undefined;
/**
* If we have snap points, we need to calculate the progress percentage
@@ -74,8 +71,7 @@ export function useModalEffect({
* and its end is different.
*/
if (snapThresholdPoint !== undefined) {
- const snapThresholdValue =
- sheetHeight - Math.min(snapThresholdPoint, sheetHeight);
+ const snapThresholdValue = snapThresholdPoint.snapValueY;
if (yValue <= snapThresholdValue) {
progress = (snapThresholdValue - yValue) / snapThresholdValue;
@@ -132,7 +128,7 @@ export function useModalEffect({
removeCompleteListener();
removeCancelListener();
};
- }, [y, rootId, insetTop, startThreshold, snapPointsProp]);
+ }, [y, rootId, insetTop, startThreshold, sheetHeight]);
}
function setupModalEffect(rootId: string) {
diff --git a/src/hooks/use-resize-observer.ts b/src/hooks/use-resize-observer.ts
new file mode 100644
index 0000000..4fbc8db
--- /dev/null
+++ b/src/hooks/use-resize-observer.ts
@@ -0,0 +1,31 @@
+import { useEffect, useRef } from 'react';
+import { useStableCallback } from './use-stable-callback';
+
+export function useResizeObserver(
+ callback: ResizeObserverCallback
+) {
+ const observeRef = useRef(null);
+ const timeoutRef = useRef | null>(null);
+
+ const debouncedCallback: ResizeObserverCallback = useStableCallback(
+ (entries, observer) => {
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
+ timeoutRef.current = setTimeout(() => callback(entries, observer), 32);
+ }
+ );
+
+ useEffect(() => {
+ const element = observeRef.current;
+ if (!element) return;
+
+ const observer = new ResizeObserver(debouncedCallback);
+ observer.observe(element, { box: 'border-box' });
+
+ return () => {
+ observer.disconnect();
+ if (timeoutRef.current) clearTimeout(timeoutRef.current);
+ };
+ }, []);
+
+ return { observeRef };
+}
diff --git a/src/hooks/use-scroll-position.ts b/src/hooks/use-scroll-position.ts
new file mode 100644
index 0000000..730e318
--- /dev/null
+++ b/src/hooks/use-scroll-position.ts
@@ -0,0 +1,72 @@
+import { useEffect, useRef, useState } from 'react';
+
+export function useScrollPosition() {
+ const ref = useRef(null);
+ const [scrollPosition, setScrollPosition] = useState<
+ 'top' | 'bottom' | 'middle' | undefined
+ >(undefined);
+
+ useEffect(() => {
+ const element = ref.current;
+ if (!element) return;
+
+ let scrollTimeout: number | null = null;
+
+ function determineScrollPosition(element: HTMLDivElement) {
+ const { scrollTop, scrollHeight, clientHeight } = element;
+ const isScrollable = scrollHeight > clientHeight;
+
+ if (!isScrollable) {
+ // Reset scroll position if the content is not scrollable anymore
+ if (scrollPosition) setScrollPosition(undefined);
+ return;
+ }
+
+ const isAtTop = scrollTop <= 0;
+ const isAtBottom =
+ Math.ceil(scrollHeight) - Math.ceil(scrollTop) ===
+ Math.ceil(clientHeight);
+
+ let position: 'top' | 'bottom' | 'middle';
+
+ if (isAtTop) {
+ position = 'top';
+ } else if (isAtBottom) {
+ position = 'bottom';
+ } else {
+ position = 'middle';
+ }
+
+ if (position === scrollPosition) return;
+ setScrollPosition(position);
+ }
+
+ function onScroll(event: Event) {
+ if (event.currentTarget instanceof HTMLDivElement) {
+ const el = event.currentTarget;
+ if (scrollTimeout) clearTimeout(scrollTimeout);
+ // Debounce the scroll handler
+ scrollTimeout = setTimeout(() => determineScrollPosition(el), 32);
+ }
+ }
+
+ function onTouchStart(event: Event) {
+ if (event.currentTarget instanceof HTMLDivElement) {
+ determineScrollPosition(event.currentTarget);
+ }
+ }
+
+ determineScrollPosition(element);
+
+ element.addEventListener('scroll', onScroll);
+ element.addEventListener('touchstart', onTouchStart);
+
+ return () => {
+ if (scrollTimeout) clearTimeout(scrollTimeout);
+ element.removeEventListener('scroll', onScroll);
+ element.removeEventListener('touchstart', onTouchStart);
+ };
+ }, []);
+
+ return { ref, scrollPosition };
+}
diff --git a/src/hooks/use-sheet-state.ts b/src/hooks/use-sheet-state.ts
new file mode 100644
index 0000000..85d077a
--- /dev/null
+++ b/src/hooks/use-sheet-state.ts
@@ -0,0 +1,63 @@
+import { useEffect, useState } from 'react';
+import { useStableCallback } from './use-stable-callback';
+
+type SheetState = 'closed' | 'opening' | 'open' | 'closing';
+
+type UseSheetStatesProps = {
+ isOpen: boolean;
+ onClosed?: () => Promise | void;
+ onOpening?: () => Promise | void;
+ onOpen?: () => Promise | void;
+ onClosing?: () => Promise | void;
+};
+
+export function useSheetState({
+ isOpen,
+ onClosed: _onClosed,
+ onOpening: _onOpening,
+ onOpen: _onOpen,
+ onClosing: _onClosing,
+}: UseSheetStatesProps) {
+ const [state, setState] = useState(isOpen ? 'opening' : 'closed');
+ const onClosed = useStableCallback(() => _onClosed?.());
+ const onOpening = useStableCallback(() => _onOpening?.());
+ const onOpen = useStableCallback(() => _onOpen?.());
+ const onClosing = useStableCallback(() => _onClosing?.());
+
+ useEffect(() => {
+ if (isOpen && state === 'closed') {
+ setState('opening');
+ } else if (!isOpen && (state === 'open' || state === 'opening')) {
+ setState('closing');
+ }
+ }, [isOpen, state]);
+
+ useEffect(() => {
+ async function handle() {
+ switch (state) {
+ case 'closed':
+ await onClosed?.();
+ break;
+
+ case 'opening':
+ await onOpening?.();
+ setState('open');
+ break;
+
+ case 'open':
+ await onOpen?.();
+ break;
+
+ case 'closing':
+ await onClosing?.();
+ setState('closed');
+ break;
+ }
+ }
+ handle().catch((error) => {
+ console.error('Internal sheet state error:', error);
+ });
+ }, [state]);
+
+ return state;
+}
diff --git a/src/hooks/use-virtual-keyboard.ts b/src/hooks/use-virtual-keyboard.ts
new file mode 100644
index 0000000..c9e750f
--- /dev/null
+++ b/src/hooks/use-virtual-keyboard.ts
@@ -0,0 +1,153 @@
+import { type RefObject, useEffect, useRef, useState } from 'react';
+import { useStableCallback } from './use-stable-callback';
+
+type VirtualKeyboardState = {
+ isVisible: boolean;
+ height: number;
+};
+
+type UseVirtualKeyboardOptions = {
+ /**
+ * Ref to the container element to apply `keyboard-inset-height` CSS variable updates (required)
+ */
+ containerRef: RefObject;
+ /**
+ * Enable or disable the hook entirely (default: true)
+ */
+ isEnabled?: boolean;
+ /**
+ * Minimum pixel height difference to consider the keyboard visible (default: 100px)
+ */
+ visualViewportThreshold?: number;
+ /**
+ * Whether to treat contenteditable elements as text inputs (default: true)
+ */
+ includeContentEditable?: boolean;
+ /**
+ * Delay in ms for debouncing viewport changes (default: 100ms)
+ */
+ debounceDelay?: number;
+};
+
+export function useVirtualKeyboard({
+ containerRef,
+ isEnabled = true,
+ debounceDelay = 100,
+ includeContentEditable = true,
+ visualViewportThreshold = 100,
+}: UseVirtualKeyboardOptions) {
+ const [state, setState] = useState({
+ isVisible: false,
+ height: 0,
+ });
+
+ const focusedElementRef = useRef(null);
+ const debounceTimer = useRef | null>(null);
+
+ const isTextInput = useStableCallback((el: Element | null) => {
+ return (
+ el?.tagName === 'INPUT' ||
+ el?.tagName === 'TEXTAREA' ||
+ (includeContentEditable &&
+ el instanceof HTMLElement &&
+ el.isContentEditable)
+ );
+ });
+
+ useEffect(() => {
+ if (!isEnabled) return;
+
+ const vv = window.visualViewport;
+ const vk = (navigator as any).virtualKeyboard;
+
+ function setKeyboardInsetHeightEnv(height: number) {
+ containerRef.current?.style.setProperty(
+ '--keyboard-inset-height',
+ `${height}px`
+ );
+ }
+
+ function handleFocusIn(e: FocusEvent) {
+ if (e.target instanceof HTMLElement && isTextInput(e.target)) {
+ focusedElementRef.current = e.target;
+ updateKeyboardState();
+ }
+ }
+
+ function handleFocusOut() {
+ focusedElementRef.current = null;
+ updateKeyboardState();
+ }
+
+ function updateKeyboardState() {
+ if (debounceTimer.current) {
+ clearTimeout(debounceTimer.current);
+ }
+ debounceTimer.current = setTimeout(() => {
+ const active = focusedElementRef.current;
+ const inputIsFocused = isTextInput(active);
+
+ if (!inputIsFocused) {
+ setKeyboardInsetHeightEnv(0);
+ setState({ isVisible: false, height: 0 });
+ return;
+ }
+
+ if (vv) {
+ const heightDiff = window.innerHeight - vv.height;
+
+ if (heightDiff > visualViewportThreshold) {
+ setKeyboardInsetHeightEnv(heightDiff);
+ setState({ isVisible: true, height: heightDiff });
+ } else {
+ setKeyboardInsetHeightEnv(0);
+ setState({ isVisible: false, height: 0 });
+ }
+ }
+ }, debounceDelay);
+ }
+
+ window.addEventListener('focusin', handleFocusIn);
+ window.addEventListener('focusout', handleFocusOut);
+
+ if (vv) {
+ vv.addEventListener('resize', updateKeyboardState);
+ vv.addEventListener('scroll', updateKeyboardState);
+ }
+
+ let currentOverlaysContent = false;
+
+ if (vk) {
+ currentOverlaysContent = vk.overlaysContent;
+ vk.overlaysContent = true;
+ }
+
+ return () => {
+ window.removeEventListener('focusin', handleFocusIn);
+ window.removeEventListener('focusout', handleFocusOut);
+
+ if (vv) {
+ vv.removeEventListener('resize', updateKeyboardState);
+ vv.removeEventListener('scroll', updateKeyboardState);
+ }
+
+ if (vk) {
+ vk.overlaysContent = currentOverlaysContent;
+ }
+
+ if (debounceTimer.current) {
+ clearTimeout(debounceTimer.current);
+ }
+ };
+ }, [
+ debounceDelay,
+ includeContentEditable,
+ isEnabled,
+ visualViewportThreshold,
+ ]);
+
+ return {
+ keyboardHeight: state.height,
+ isKeyboardOpen: state.isVisible,
+ };
+}
diff --git a/src/index.tsx b/src/index.tsx
index c231bfd..63869a5 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,16 +1,18 @@
import type { MotionValue } from 'motion/react';
+import type { RefObject } from 'react';
-import type { SheetCompound, SheetDraggableProps } from './types';
-import { Sheet as SheetBase } from './sheet';
+import { SheetBackdrop } from './SheetBackdrop';
import { SheetContainer } from './SheetContainer';
import { SheetContent } from './SheetContent';
import { SheetHeader } from './SheetHeader';
-import { SheetBackdrop } from './SheetBackdrop';
-import { SheetScroller } from './SheetScroller';
+import { Sheet as SheetBase } from './sheet';
+import type { SheetCompound, SheetDraggableProps } from './types';
export interface SheetRef {
y: MotionValue;
- snapTo: (index: number) => void;
+ yInverted: MotionValue;
+ height: number;
+ snapTo: (index: number) => Promise;
}
export const Sheet: SheetCompound = Object.assign(SheetBase, {
@@ -18,15 +20,15 @@ export const Sheet: SheetCompound = Object.assign(SheetBase, {
Header: SheetHeader,
Content: SheetContent,
Backdrop: SheetBackdrop,
- Scroller: SheetScroller,
});
// Export types
export type SheetHeaderProps = SheetDraggableProps;
export type SheetContentProps = SheetDraggableProps;
export type {
- SheetProps,
SheetBackdropProps,
- SheetScrollerProps,
SheetContainerProps,
+ SheetProps,
+ SheetSnapPoint,
+ SheetStateInfo,
} from './types';
diff --git a/src/sheet.tsx b/src/sheet.tsx
index f79fb61..fba23ad 100644
--- a/src/sheet.tsx
+++ b/src/sheet.tsx
@@ -1,82 +1,92 @@
-import { createPortal } from 'react-dom';
-
-import React, {
- Children,
- cloneElement,
- forwardRef,
- useEffect,
- useImperativeHandle,
- useMemo,
- useRef,
-} from 'react';
-
import {
+ type DragHandler,
+ type Transition,
animate,
- AnimatePresence,
motion,
- type PanInfo,
- type Transition,
useMotionValue,
useReducedMotion,
useTransform,
} from 'motion/react';
+import React, {
+ forwardRef,
+ useImperativeHandle,
+ useRef,
+ useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+import useMeasure from 'react-use-measure';
import {
- REDUCED_MOTION_TWEEN_CONFIG,
- DEFAULT_TWEEN_CONFIG,
DEFAULT_DRAG_CLOSE_THRESHOLD,
DEFAULT_DRAG_VELOCITY_THRESHOLD,
+ DEFAULT_TWEEN_CONFIG,
IS_SSR,
+ REDUCED_MOTION_TWEEN_CONFIG,
} from './constants';
-
-import {
- getSheetHeight,
- getSnapY,
- getSnapPoints,
- getClosestSnapPoint,
-} from './utils';
-
-import { type SheetContextType, type SheetProps } from './types';
-import { SheetScrollerContextProvider, SheetContext } from './context';
-import { styles } from './styles';
-import { useModalEffect } from './hooks/use-modal-effect';
+import { SheetContext } from './context';
import { useDimensions } from './hooks/use-dimensions';
-import { useIsomorphicLayoutEffect } from './hooks/use-isomorphic-layout-effect';
-import { useStableCallback } from './hooks/use-stable-callback';
+import { useModalEffect } from './hooks/use-modal-effect';
import { usePreventScroll } from './hooks/use-prevent-scroll';
+import { useSheetState } from './hooks/use-sheet-state';
+import { useStableCallback } from './hooks/use-stable-callback';
+import { useVirtualKeyboard } from './hooks/use-virtual-keyboard';
+import {
+ computeSnapPoints,
+ handleHighVelocityDrag,
+ handleLowVelocityDrag,
+} from './snap';
+import { styles } from './styles';
+import { type SheetContextType, type SheetProps } from './types';
export const Sheet = forwardRef(
(
{
- onOpenStart,
- onOpenEnd,
- onClose,
- onCloseStart,
- onCloseEnd,
- onSnap,
+ avoidKeyboard = true,
children,
+ className = '',
+ detent = 'default',
+ disableDrag: disableDragProp = false,
disableScrollLocking = false,
+ disableDismiss = false,
+ dragCloseThreshold = DEFAULT_DRAG_CLOSE_THRESHOLD,
+ dragVelocityThreshold = DEFAULT_DRAG_VELOCITY_THRESHOLD,
isOpen,
- snapPoints: snapPointsProp,
- rootId,
modalEffectRootId,
+ modalEffectThreshold,
mountPoint,
- style,
- detent = 'full-height',
- initialSnap = 0,
- disableDrag = false,
prefersReducedMotion = false,
+ snapPoints: snapPointsProp,
+ initialSnap,
+ style,
tweenConfig = DEFAULT_TWEEN_CONFIG,
- dragVelocityThreshold = DEFAULT_DRAG_VELOCITY_THRESHOLD,
- dragCloseThreshold = DEFAULT_DRAG_CLOSE_THRESHOLD,
- modalEffectThreshold,
+ onOpenStart,
+ onOpenEnd,
+ onClose,
+ onCloseStart,
+ onCloseEnd,
+ onSnap,
+ onDrag: onDragProp,
+ onDragStart: onDragStartProp,
+ onDragEnd: onDragEndProp,
...rest
},
ref
) => {
+ const [sheetBoundsRef, sheetBounds] = useMeasure();
const sheetRef = useRef(null);
+ const sheetHeight = Math.round(sheetBounds.height);
+ const [currentSnap, setCurrentSnap] = useState(initialSnap);
+ const snapPoints =
+ snapPointsProp && sheetHeight > 0
+ ? computeSnapPoints({ sheetHeight, snapPointsProp })
+ : [];
+
+ const { windowHeight } = useDimensions();
+ const closedY = sheetHeight > 0 ? sheetHeight : windowHeight;
+ const y = useMotionValue(closedY);
+ const yInverted = useTransform(y, (val) => Math.max(sheetHeight - val, 0));
const indicatorRotation = useMotionValue(0);
- const { height: windowHeight } = useDimensions();
+
const shouldReduceMotion = useReducedMotion();
const reduceMotion = Boolean(prefersReducedMotion || shouldReduceMotion);
const animationOptions: Transition = {
@@ -84,66 +94,67 @@ export const Sheet = forwardRef(
...(reduceMotion ? REDUCED_MOTION_TWEEN_CONFIG : tweenConfig),
};
- // NOTE: the inital value for `y` doesn't matter since it is overwritten by
- // the value driven by the `AnimatePresence` component when the sheet is opened
- // and after that it is driven by the gestures and/or snapping
- const y = useMotionValue(windowHeight);
+ const keyboard = useVirtualKeyboard({
+ isEnabled: isOpen && avoidKeyboard,
+ containerRef: sheetRef,
+ });
+
+ // Disable drag if the keyboard is open to avoid weird behavior
+ const disableDrag = keyboard.isKeyboardOpen || disableDragProp;
// +2 for tolerance in case the animated value is slightly off
- const zIndex = useTransform(y, (value) =>
- value + 2 >= windowHeight ? -1 : (style?.zIndex ?? 9999)
+ const zIndex = useTransform(y, (val) =>
+ val + 2 >= closedY ? -1 : (style?.zIndex ?? 9999)
);
- const visibility = useTransform(y, (value) =>
- value + 2 >= windowHeight ? 'hidden' : 'visible'
+ const visibility = useTransform(y, (val) =>
+ val + 2 >= closedY ? 'hidden' : 'visible'
);
- // Keep the callback fns up-to-date so that they can be accessed inside
- // the effect without including them to the dependencies array
- const callbacks = useRef({
- onOpenStart,
- onOpenEnd,
- onCloseStart,
- onCloseEnd,
+ const updateSnap = useStableCallback((snapIndex: number) => {
+ setCurrentSnap(snapIndex);
+ onSnap?.(snapIndex);
});
- useIsomorphicLayoutEffect(() => {
- callbacks.current = {
- onOpenStart,
- onOpenEnd,
- onCloseStart,
- onCloseEnd,
- };
+ const getSnapPoint = useStableCallback((snapIndex: number) => {
+ if (snapPointsProp && snapPoints) {
+ if (snapIndex < 0 || snapIndex >= snapPoints.length) {
+ console.warn(
+ `Invalid snap index ${snapIndex}. Snap points are: [${snapPointsProp.join(', ')}] and their computed values are: [${snapPoints
+ .map((point) => point.snapValue)
+ .join(', ')}]`
+ );
+ return null;
+ }
+ return snapPoints[snapIndex];
+ }
+ return null;
});
- const onDrag = useStableCallback((_: PointerEvent, info: PanInfo) => {
- const currentY = y.get();
-
- /**
- * Make sure the user cannot drag the sheet beyond the upmost snap point
- * if the `snapPoints` prop is provided.
- */
- if (snapPointsProp) {
- const sheetHeight = getSheetHeight(sheetRef);
- const snapPoints = getSnapPoints({ snapPointsProp, sheetHeight });
- const topSnapPoint = sheetHeight - snapPoints[0];
-
- if (info.delta.y < 0 && currentY <= topSnapPoint) {
- y.set(topSnapPoint);
- return;
- }
+ const snapTo = useStableCallback(async (snapIndex: number) => {
+ if (!snapPointsProp) {
+ console.warn('Snapping is not possible without `snapPoints` prop.');
+ return;
}
- // Update drag indicator rotation based on drag velocity
- const velocity = y.getVelocity();
+ const snapPoint = getSnapPoint(snapIndex);
- if (velocity > 0) indicatorRotation.set(10);
- if (velocity < 0) indicatorRotation.set(-10);
+ if (snapPoint === null) {
+ console.warn(`Invalid snap index ${snapIndex}.`);
+ return;
+ }
- // Make sure user cannot drag beyond the top of the sheet
- y.set(Math.max(currentY + info.delta.y, 0));
+ if (snapIndex === 0) {
+ onClose();
+ return;
+ }
+
+ await animate(y, snapPoint.snapValueY, {
+ ...animationOptions,
+ onComplete: () => updateSnap(snapIndex),
+ });
});
- const onDragStart = useStableCallback(() => {
+ const blurActiveInput = useStableCallback(() => {
// Find focused input inside the sheet and blur it when dragging starts
// to prevent a weird ghost caret "bug" on mobile
const focusedElement = document.activeElement as HTMLElement | null;
@@ -159,148 +170,174 @@ export const Sheet = forwardRef(
}
});
- const onDragEnd = useStableCallback((_, { velocity }: PanInfo) => {
- if (velocity.y > dragVelocityThreshold) {
- // User flicked the sheet down
- onClose();
- } else {
- const sheetHeight = getSheetHeight(sheetRef);
- const currentY = y.get();
+ const onDrag = useStableCallback((event, info) => {
+ onDragProp?.(event, info);
- let yTo = 0;
+ const currentY = y.get();
- const snapPoints = snapPointsProp
- ? getSnapPoints({ snapPointsProp, sheetHeight })
- : undefined;
+ // Update drag indicator rotation based on drag velocity
+ const velocity = y.getVelocity();
+ if (velocity > 0) indicatorRotation.set(10);
+ if (velocity < 0) indicatorRotation.set(-10);
- if (snapPoints) {
- const { snapY, snapIndex } = getClosestSnapPoint({
- snapPoints,
- currentY,
- sheetHeight,
- detent,
- });
+ // Make sure user cannot drag beyond the top of the sheet
+ y.set(Math.max(currentY + info.delta.y, 0));
+ });
- yTo = snapY;
+ const onDragStart = useStableCallback((event, info) => {
+ blurActiveInput();
+ onDragStartProp?.(event, info);
+ });
- // This happens before calling `animate` but it doesn't really matter
- onSnap?.(snapIndex);
- } else if (currentY / sheetHeight > dragCloseThreshold) {
- // Close if dragged over enough far
- yTo = sheetHeight;
- }
+ const onDragEnd = useStableCallback((event, info) => {
+ blurActiveInput();
+ onDragEndProp?.(event, info);
- // Update the spring value so that the sheet is animated to the snap point
- animate(y, yTo, animationOptions);
+ const currentY = y.get();
- // +1px for imprecision tolerance
- if (yTo + 1 >= sheetHeight) {
- onClose();
- }
- }
+ let yTo = 0;
- // Reset indicator rotation after dragging
- indicatorRotation.set(0);
- });
+ const currentSnapPoint =
+ currentSnap !== undefined ? getSnapPoint(currentSnap) : null;
- // Trigger onSnap callback when sheet is opened or closed
- useEffect(() => {
- if (snapPointsProp && onSnap) {
- onSnap(isOpen ? initialSnap : snapPointsProp.length - 1);
- }
- }, [isOpen]);
+ if (currentSnapPoint) {
+ const dragOffsetDirection = info.offset.y > 0 ? 'down' : 'up';
+ const dragVelocityDirection = info.velocity.y > 0 ? 'down' : 'up';
+ const isHighVelocity =
+ Math.abs(info.velocity.y) > dragVelocityThreshold;
- // Animate the sheet open
- useEffect(() => {
- if (!isOpen) return; // let `AnimatePresence` handle the exit animation
+ let result: { yTo: number; snapIndex: number | undefined };
- let yTo = 0;
+ if (isHighVelocity) {
+ result = handleHighVelocityDrag({
+ snapPoints,
+ dragDirection: dragVelocityDirection,
+ });
+ } else {
+ result = handleLowVelocityDrag({
+ currentSnapPoint,
+ currentY,
+ dragDirection: dragOffsetDirection,
+ snapPoints,
+ velocity: info.velocity.y,
+ });
+ }
- if (snapPointsProp) {
- const snapIndex = initialSnap;
- const sheetHeight = getSheetHeight(sheetRef);
- const snapPoints = getSnapPoints({ snapPointsProp, sheetHeight });
- const snapY = getSnapY({ sheetHeight, snapPoints, snapIndex });
+ yTo = result.yTo;
- if (snapY !== null) {
- yTo = snapY;
+ // If disableDismiss is true, prevent closing via gesture
+ if (disableDismiss && yTo + 1 >= sheetHeight) {
+ // Use the bottom-most open snap point
+ const bottomSnapPoint = snapPoints.find((s) => s.snapValue > 0);
+
+ if (bottomSnapPoint) {
+ yTo = bottomSnapPoint.snapValueY;
+ updateSnap(bottomSnapPoint.snapIndex);
+ } else {
+ // If no open snap points available, stay at current position
+ yTo = currentY;
+ }
+ } else if (result.snapIndex !== undefined) {
+ updateSnap(result.snapIndex);
+ }
+ } else if (
+ info.velocity.y > dragVelocityThreshold ||
+ currentY > sheetHeight * dragCloseThreshold
+ ) {
+ // Close the sheet if dragged past the threshold or if the velocity is high enough
+ // But only if disableDismiss is false
+ if (disableDismiss) {
+ // If disableDismiss, snap back to the open position
+ yTo = 0;
+ } else {
+ yTo = closedY;
}
}
+ // Update the spring value so that the sheet is animated to the snap point
animate(y, yTo, animationOptions);
- }, [isOpen]);
-
- useImperativeHandle(ref, () => ({
- y,
- snapTo: (snapIndex: number) => {
- if (!snapPointsProp) {
- console.warn('Snapping is not possible without `snapPoints` prop.');
- return;
- }
- const sheetHeight = getSheetHeight(sheetRef);
- const snapPoints = getSnapPoints({ snapPointsProp, sheetHeight });
- const snapY = getSnapY({ sheetHeight, snapPoints, snapIndex });
+ // +1px for imprecision tolerance
+ // Only call onClose if disableDismiss is false or if we're actually closing
+ if (yTo + 1 >= sheetHeight && !disableDismiss) {
+ onClose();
+ }
- if (snapY !== null) {
- animate(y, snapY, animationOptions);
- onSnap?.(snapIndex);
+ // Reset indicator rotation after dragging
+ indicatorRotation.set(0);
+ });
- // +1px for imprecision tolerance
- if (snapY + 1 >= sheetHeight) {
- onClose();
- }
- }
- },
+ useImperativeHandle(ref, () => ({
+ y,
+ yInverted,
+ height: sheetHeight,
+ snapTo,
}));
- if (rootId) {
- console.warn(
- 'The `rootId` prop is deprecated and will be removed in the next major version. Use `modalEffectRootId` instead.'
- );
- }
-
useModalEffect({
y,
- sheetRef,
- snapPointsProp,
- rootId: rootId || modalEffectRootId,
+ detent,
+ sheetHeight,
+ snapPoints,
+ rootId: modalEffectRootId,
startThreshold: modalEffectThreshold,
});
- // Motion should handle body scroll locking but it's not working
- // properly on iOS. Scroll locking from React Aria seems to work much better.
+ /**
+ * Motion should handle body scroll locking but it's not working properly on iOS.
+ * Scroll locking from React Aria seems to work much better đ¤ˇââī¸
+ */
usePreventScroll({
isDisabled: disableScrollLocking || !isOpen,
});
- const dragProps = useMemo(() => {
- const dragProps: SheetContextType['dragProps'] = {
- drag: 'y',
- dragElastic: 0,
- dragMomentum: false,
- dragPropagation: false,
- onDrag,
- onDragStart,
- onDragEnd,
- };
+ const state = useSheetState({
+ isOpen,
+ onOpen: async () => {
+ onOpenStart?.();
- return disableDrag ? undefined : dragProps;
- }, [disableDrag, windowHeight]);
+ const initialSnapPoint =
+ initialSnap !== undefined ? getSnapPoint(initialSnap) : null;
+
+ const yTo = initialSnapPoint?.snapValueY ?? 0;
+
+ await animate(y, yTo, animationOptions);
+
+ if (initialSnap !== undefined) {
+ updateSnap(initialSnap);
+ }
+
+ onOpenEnd?.();
+ },
+ onClosing: async () => {
+ onCloseStart?.();
+
+ await animate(y, closedY, animationOptions);
+
+ onCloseEnd?.();
+ },
+ });
+
+ const dragProps: SheetContextType['dragProps'] = {
+ drag: 'y',
+ dragElastic: 0,
+ dragMomentum: false,
+ dragPropagation: false,
+ onDrag,
+ onDragStart,
+ onDragEnd,
+ };
const context: SheetContextType = {
- y,
- sheetRef,
- isOpen,
- initialSnap,
+ currentSnap,
detent,
- indicatorRotation,
- callbacks,
- dragProps,
- windowHeight,
- animationOptions,
- reduceMotion,
disableDrag,
+ dragProps,
+ indicatorRotation,
+ avoidKeyboard,
+ sheetBoundsRef,
+ sheetRef,
+ y,
};
const sheet = (
@@ -308,18 +345,11 @@ export const Sheet = forwardRef(
-
- {/* NOTE: AnimatePresence requires us to set keys to children */}
- {isOpen ? (
-
- {Children.map(children, (child: any, i) =>
- cloneElement(child, { key: `sheet-child-${i}` })
- )}
-
- ) : null}
-
+ {state !== 'closed' ? children : null}
);
diff --git a/src/snap.ts b/src/snap.ts
new file mode 100644
index 0000000..f98e198
--- /dev/null
+++ b/src/snap.ts
@@ -0,0 +1,226 @@
+import type { SheetSnapPoint } from './types';
+import { isAscendingOrder } from './utils';
+
+/**
+ * Convert negative / percentage snap points to absolute values
+ *
+ * Example output:
+ *
+ * ```json
+ * [
+ * {
+ * "snapIndex": 0, // <-- bottom snap point
+ * "snapValue": 0,
+ * "snapValueY": 810
+ * },
+ * {
+ * "snapIndex": 1,
+ * "snapValue": 170,
+ * "snapValueY": 640
+ * },
+ * {
+ * "snapIndex": 2,
+ * "snapValue": 405,
+ * "snapValueY": 405
+ * },
+ * {
+ * "snapIndex": 3,
+ * "snapValue": 760,
+ * "snapValueY": 50
+ * },
+ * {
+ * "snapIndex": 4, // <-- top snap point
+ * "snapValue": 810,
+ * "snapValueY": 0
+ * }
+ * ]
+ * ```
+ */
+export function computeSnapPoints({
+ snapPointsProp,
+ sheetHeight,
+}: {
+ snapPointsProp: number[];
+ sheetHeight: number;
+}): SheetSnapPoint[] {
+ if (sheetHeight <= 0) {
+ console.warn(
+ `Sheet height is ${sheetHeight}, cannot compute snap points. ` +
+ 'Make sure the sheet is mounted and has a valid height.'
+ );
+ return [];
+ }
+
+ const snapPointValues = snapPointsProp.map((point) => {
+ // Percentage values e.g. between 0.0 and 1.0
+ if (point > 0 && point <= 1) {
+ return Math.round(point * sheetHeight);
+ }
+
+ return point < 0 ? sheetHeight + point : point; // negative values
+ });
+
+ console.assert(
+ isAscendingOrder(snapPointValues),
+ `Snap points need to be in ascending order got: [${snapPointsProp.join(', ')}]`
+ );
+
+ // Make sure all snap points are within the sheet height
+ snapPointValues.forEach((snap) => {
+ if (snap < 0 || snap > sheetHeight) {
+ console.warn(
+ `Snap point ${snap} is outside of the sheet height ${sheetHeight}. ` +
+ 'This can cause unexpected behavior. Consider adjusting your snap points.'
+ );
+ }
+ });
+
+ if (!snapPointValues.includes(sheetHeight)) {
+ console.warn(
+ 'Snap points do not include the sheet height.' +
+ 'Please include `1` as the last snap point or it will be included automatically.' +
+ 'This is to ensure the sheet can be fully opened.'
+ );
+ snapPointValues.push(sheetHeight);
+ }
+
+ return snapPointValues.map((snap, index) => ({
+ snapIndex: index,
+ snapValue: snap, // Absolute value from the bottom of the sheet
+ snapValueY: sheetHeight - snap, // Y value is inverted as `y = 0` means sheet is at the top
+ }));
+}
+
+function findClosestSnapPoint({
+ snapPoints,
+ currentY,
+}: {
+ snapPoints: SheetSnapPoint[];
+ currentY: number;
+}) {
+ return snapPoints.reduce((closest, snap) =>
+ Math.abs(snap.snapValueY - currentY) <
+ Math.abs(closest.snapValueY - currentY)
+ ? snap
+ : closest
+ );
+}
+
+function findNextSnapPointInDirection({
+ y,
+ snapPoints,
+ dragDirection,
+}: {
+ y: number;
+ snapPoints: SheetSnapPoint[];
+ dragDirection: 'up' | 'down';
+}) {
+ // NOTE: lower Y means higher in the sheet position!
+ if (dragDirection === 'down') {
+ /**
+ * Example:
+ *
+ * [
+ * { snapIndex: 0, snapValueY: 810 },
+ * { snapIndex: 1, snapValueY: 640 },
+ * { snapIndex: 2, snapValueY: 405 }, <-- next down
+ * ------------- Y = 60 ------------
+ * { snapIndex: 3, snapValueY: 50 },
+ * { snapIndex: 4, snapValueY: 0 },
+ * ]
+ */
+ return snapPoints
+ .slice()
+ .reverse()
+ .find((s) => s.snapValueY > y);
+ } else {
+ /**
+ * Example:
+ * [
+ * { snapIndex: 0, snapValueY: 810 },
+ * { snapIndex: 1, snapValueY: 640 },
+ * { snapIndex: 2, snapValueY: 405 },
+ * ------------- Y = 60 ------------
+ * { snapIndex: 3, snapValueY: 50 }, <-- next up
+ * { snapIndex: 4, snapValueY: 0 },
+ * ]
+ */
+ return snapPoints.find((s) => s.snapValueY < y);
+ }
+}
+export function handleHighVelocityDrag({
+ dragDirection,
+ snapPoints,
+}: {
+ dragDirection: 'up' | 'down';
+ snapPoints: SheetSnapPoint[];
+}) {
+ // Go to either the last or the first snap point depending on the direction
+ const bottomSnapPoint = snapPoints[0];
+ const topSnapPoint = snapPoints[snapPoints.length - 1];
+
+ if (dragDirection === 'down') {
+ return {
+ yTo: bottomSnapPoint.snapValueY,
+ snapIndex: bottomSnapPoint.snapIndex,
+ };
+ }
+ return {
+ yTo: topSnapPoint.snapValueY,
+ snapIndex: topSnapPoint.snapIndex,
+ };
+}
+
+export function handleLowVelocityDrag({
+ currentSnapPoint,
+ currentY,
+ dragDirection,
+ snapPoints,
+ velocity,
+}: {
+ currentSnapPoint: SheetSnapPoint;
+ currentY: number;
+ dragDirection: 'up' | 'down';
+ snapPoints: SheetSnapPoint[];
+ velocity: number;
+}) {
+ const closestSnapRelativeToCurrentY = findClosestSnapPoint({
+ snapPoints,
+ currentY,
+ });
+
+ /**
+ * If velocity is very low the user has stopped the sheet to a specific
+ * position and we should snap to the closest snap point as there is no
+ * "momentum" that would push the sheet further to the given direction
+ */
+ if (Math.abs(velocity) < 20) {
+ return {
+ yTo: closestSnapRelativeToCurrentY.snapValueY,
+ snapIndex: closestSnapRelativeToCurrentY.snapIndex,
+ };
+ }
+
+ /**
+ * If the dragging has a bit more velocity, we instead want to go to
+ * the next snap point in the given direction if it exists
+ */
+ const nextSnapInDirectionRelativeToCurrentY = findNextSnapPointInDirection({
+ y: currentY,
+ snapPoints,
+ dragDirection,
+ });
+
+ if (nextSnapInDirectionRelativeToCurrentY) {
+ return {
+ yTo: nextSnapInDirectionRelativeToCurrentY.snapValueY,
+ snapIndex: nextSnapInDirectionRelativeToCurrentY.snapIndex,
+ };
+ }
+
+ // No snap point down, stay at current
+ return {
+ yTo: currentSnapPoint.snapValueY,
+ snapIndex: currentSnapPoint.snapIndex,
+ };
+}
diff --git a/src/styles.ts b/src/styles.ts
index f5443e0..f0b345f 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -1,7 +1,7 @@
import { type Properties } from 'csstype';
-export const styles: Record = {
- wrapper: {
+export const styles = {
+ root: {
position: 'fixed',
top: 0,
bottom: 0,
@@ -66,4 +66,4 @@ export const styles: Record = {
overflowY: 'auto',
overscrollBehaviorY: 'none',
},
-};
+} satisfies Record;
diff --git a/src/types.tsx b/src/types.tsx
index 71e722d..d07de45 100644
--- a/src/types.tsx
+++ b/src/types.tsx
@@ -7,23 +7,16 @@ import {
} from 'react';
import {
- type DragHandlers,
- type MotionValue,
- type MotionProps,
- type motion,
+ type DragHandler,
type EasingDefinition,
+ type MotionProps,
+ type MotionValue,
type Transition,
+ type motion,
} from 'motion/react';
+import type { RectReadOnly } from 'react-use-measure';
-export interface SheetEvents {
- onOpenStart?: () => void;
- onOpenEnd?: () => void;
- onCloseStart?: () => void;
- onCloseEnd?: () => void;
- onSnap?: (index: number) => void;
-}
-
-export type SheetDetent = 'full-height' | 'content-height';
+export type SheetDetent = 'default' | 'full' | 'content';
type CommonProps = MotionProps & {
className?: string;
@@ -37,25 +30,29 @@ export interface SheetTweenConfig {
}
export type SheetProps = {
- isOpen: boolean;
+ avoidKeyboard?: boolean;
children: ReactNode;
- onClose: () => void;
- /** @deprecated Use `modalEffectRootId` instead! */
- rootId?: string;
- modalEffectRootId?: string;
- mountPoint?: Element;
- snapPoints?: number[];
detent?: SheetDetent;
- initialSnap?: number; // index of snap points array
- tweenConfig?: SheetTweenConfig;
+ disableDismiss?: boolean;
disableDrag?: boolean;
disableScrollLocking?: boolean;
- prefersReducedMotion?: boolean;
- dragVelocityThreshold?: number;
dragCloseThreshold?: number;
+ dragVelocityThreshold?: number;
+ initialSnap?: number; // index of snap points array
+ isOpen: boolean;
+ modalEffectRootId?: string;
modalEffectThreshold?: number;
-} & SheetEvents &
- MotionDivProps;
+ mountPoint?: Element;
+ prefersReducedMotion?: boolean;
+ snapPoints?: number[];
+ tweenConfig?: SheetTweenConfig;
+ onClose: () => void;
+ onCloseEnd?: () => void;
+ onCloseStart?: () => void;
+ onOpenEnd?: () => void;
+ onOpenStart?: () => void;
+ onSnap?: (index: number) => void;
+} & MotionDivProps;
export type SheetContainerProps = Omit<
CommonProps,
@@ -64,16 +61,7 @@ export type SheetContainerProps = Omit<
children: ReactNode;
};
-export type SheetDraggableProps = Omit<
- CommonProps,
- | 'drag'
- | 'dragElastic'
- | 'dragConstraints'
- | 'dragMomentum'
- | 'onDrag'
- | 'onDragStart'
- | 'onDragEnd'
-> & {
+export type SheetDraggableProps = MotionDivProps & {
children?: ReactNode;
disableDrag?: boolean;
};
@@ -83,35 +71,43 @@ export type SheetBackdropProps = Omit<
'initial' | 'animate' | 'exit'
>;
-export type SheetScrollerProps = MotionDivProps & {
- draggableAt?: 'top' | 'bottom' | 'both';
- disableScroll?: boolean;
- autoPadding?: boolean;
-};
-
export interface SheetDragProps {
drag: 'y';
dragElastic: number;
dragMomentum: boolean;
dragPropagation: boolean;
- onDrag: DragHandlers['onDrag'];
- onDragStart: DragHandlers['onDragStart'];
- onDragEnd: DragHandlers['onDragEnd'];
+ onDrag: DragHandler;
+ onDragStart: DragHandler;
+ onDragEnd: DragHandler;
}
+export type SheetStateInfo = {
+ scrollPosition?: 'top' | 'bottom' | 'middle';
+ currentSnap?: number;
+};
+
+export type SheetContentScrollableProps = MotionDivProps & {
+ disableDrag?: boolean | ((args: SheetStateInfo) => boolean);
+ disableScroll?: boolean | ((args: SheetStateInfo) => boolean);
+ scrollRef?: RefObject;
+};
+
+export type SheetSnapPoint = {
+ snapIndex: number;
+ snapValue: number; // Absolute value from the bottom of the sheet
+ snapValueY: number; // Y value is inverted as `y = 0` means sheet is at the top
+};
+
export interface SheetContextType {
- y: MotionValue;
- sheetRef: RefObject;
- isOpen: boolean;
+ currentSnap?: number;
detent: SheetDetent;
- initialSnap: SheetProps['initialSnap'];
- indicatorRotation: MotionValue;
- callbacks: RefObject;
- dragProps?: SheetDragProps;
- windowHeight: number;
- animationOptions: Transition;
- reduceMotion: boolean;
disableDrag: boolean;
+ dragProps?: SheetDragProps;
+ indicatorRotation: MotionValue;
+ avoidKeyboard: boolean;
+ sheetBoundsRef: (node: HTMLDivElement | null) => void;
+ sheetRef: RefObject;
+ y: MotionValue;
}
export interface SheetScrollerContextType {
@@ -136,16 +132,15 @@ type SheetComponent = ForwardRefExoticComponent<
SheetProps & RefAttributes
>;
-type ScrollerComponent = ForwardRefExoticComponent<
- SheetScrollerProps & RefAttributes
+type ContentScrollableComponent = ForwardRefExoticComponent<
+ SheetContentScrollableProps & RefAttributes
>;
interface SheetCompoundComponent {
Container: ContainerComponent;
Header: DraggableComponent;
- Content: DraggableComponent;
+ Content: ContentScrollableComponent;
Backdrop: BackdropComponent;
- Scroller: ScrollerComponent;
}
export type SheetCompound = SheetComponent & SheetCompoundComponent;
diff --git a/src/utils.ts b/src/utils.ts
index 1548a9e..bdcd351 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,161 +1,13 @@
import { type ForwardedRef, type RefCallback, type RefObject } from 'react';
import { IS_SSR } from './constants';
-import type { SheetDetent } from './types';
-/**
- * Get the rounded height of the sheet element and log a warning if the
- * element is not mounted yet but the height is requested.
- */
-export function getSheetHeight(sheetRef: RefObject) {
- const sheetEl = sheetRef.current;
-
- if (!sheetEl) {
- console.warn(
- 'Sheet height is not available because the sheet element is not mounted yet.'
- );
- return 0;
- }
-
- return Math.round(sheetEl.getBoundingClientRect().height);
-}
-
-/**
- * Convert negative / percentage snap points to absolute values
- */
-export function getSnapPoints({
- snapPointsProp,
- sheetHeight,
-}: {
- snapPointsProp: number[];
- sheetHeight: number;
-}) {
- const snapPointValues = snapPointsProp.map((point) => {
- // Percentage values e.g. between 0.0 and 1.0
- if (point > 0 && point <= 1) {
- return Math.round(point * sheetHeight);
- }
-
- return point < 0 ? sheetHeight + point : point; // negative values
- });
-
- console.assert(
- inDescendingOrder(snapPointValues) || sheetHeight === 0,
- `Snap points need to be in descending order got: [${snapPointsProp.join(', ')}]`
- );
-
- return snapPointValues;
-}
-
-export function getClosestSnapPoint({
- snapPoints,
- currentY,
- sheetHeight,
- detent,
-}: {
- snapPoints: number[];
- currentY: number;
- sheetHeight: number;
- detent?: SheetDetent;
-}) {
- // Inverse values are the values that can be passed to `animate`
- const snapInverse = snapPoints.map(
- (p) => sheetHeight - Math.min(p, sheetHeight)
- );
-
- // Allow snapping to the top of the sheet if detent is set to `content-height`
- if (detent === 'content-height' && !snapInverse.includes(0)) {
- snapInverse.unshift(0);
- }
-
- // Get the closest snap point
- const snapTo = getClosest(snapInverse, currentY);
- const snapIndex = snapInverse.indexOf(snapTo);
-
- const snapY = validateSnapTo({
- snapTo: getClosest(snapInverse, currentY),
- sheetHeight,
- });
-
- return { snapY, snapIndex };
-}
-
-/**
- * Get the closest number to the goal from the array of numbers.
- */
-export function getClosest(nums: number[], goal: number) {
- let closest = nums[0];
- let minDifference = Math.abs(nums[0] - goal);
-
- for (let i = 1; i < nums.length; i++) {
- const difference = Math.abs(nums[i] - goal);
- if (difference < minDifference) {
- closest = nums[i];
- minDifference = difference;
- }
- }
-
- return closest;
-}
-
-/**
- * Check if the array is in descending order.
- * This is used to validate the snap points.
- */
-export function inDescendingOrder(arr: number[]) {
+export function isAscendingOrder(arr: number[]) {
for (let i = 0; i < arr.length; i++) {
- if (arr[i + 1] > arr[i]) return false;
+ if (arr[i + 1] < arr[i]) return false;
}
-
return true;
}
-/**
- * Get the Y value of the given snap point. This can be passed to the `animate`
- * function to animate the sheet to the given snap point.
- */
-export function getSnapY({
- sheetHeight,
- snapPoints,
- snapIndex,
-}: {
- sheetHeight: number;
- snapPoints: number[];
- snapIndex: number;
-}) {
- const snapPoint = snapPoints[snapIndex];
-
- if (snapPoint === undefined) {
- console.warn(
- `Invalid snap index ${snapIndex}. Snap points are: [${snapPoints.join(', ')}]`
- );
- return null;
- }
-
- const y = validateSnapTo({ snapTo: sheetHeight - snapPoint, sheetHeight });
-
- return y;
-}
-
-/**
- * Make sure the snap point is not out of bounds.
- * Snap points cannot be negative - `0` means the sheet is fully open.
- */
-export function validateSnapTo({
- snapTo,
- sheetHeight,
-}: {
- snapTo: number;
- sheetHeight: number;
-}) {
- if (snapTo < 0) {
- console.warn(
- `Snap point is out of bounds. Sheet height is ${sheetHeight} but snap point is ${sheetHeight + Math.abs(snapTo)}.`
- );
- }
-
- return Math.max(Math.round(snapTo), 0);
-}
-
export function mergeRefs(refs: ForwardedRef[]): RefCallback {
return (value: any) => {
refs.forEach((ref: any) => {
diff --git a/test/ssr.test.tsx b/test/ssr.test.tsx
index 9cc7254..4e14456 100644
--- a/test/ssr.test.tsx
+++ b/test/ssr.test.tsx
@@ -1,21 +1,20 @@
// @vitest-environment node
-import { test, expect } from 'vitest';
-import { renderToString } from 'react-dom/server';
import React from 'react';
+import { renderToString } from 'react-dom/server';
+import { expect, test } from 'vitest';
import { Sheet } from '../src';
test('renders Sheet in HTML output', () => {
- const content = 'Hello world';
const markup = renderToString(
{}}>
- {content}
+ Hello world
);
- expect(markup).toContain(content);
+ expect(markup).toContain('react-modal-sheet');
});
+ 
+ 
+