sheer-ui 0.0.0

package/src/lib/internal/vaul/use-position-fixed.svelte.ts

@@ -0,0 +1,142 @@
+import type { Box, Getter } from '../tools/index.js';
+import { needsIOSFixedBodyScrollLock } from './browser.js';
+import { untrack } from 'svelte';
+import { scrollY } from 'svelte/reactivity/window';
+
+let previousBodyPosition: Record<string, string> | null = null;
+
+/**
+ * This hook is necessary to prevent buggy behavior on iOS devices (need to test on Android).
+ * I won't get into too much detail about what bugs it solves, but so far I've found that setting the body to `position: fixed` is the most reliable way to prevent those bugs.
+ * Issues that this hook solves:
+ * https://github.com/emilkowalski/vaul/issues/435
+ * https://github.com/emilkowalski/vaul/issues/433
+ * And more that I discovered, but were just not reported.
+ */
+export function usePositionFixed({
+	open,
+	modal,
+	nested,
+	hasBeenOpened,
+	preventScrollRestoration,
+	noBodyStyles,
+}: {
+	open: Box<boolean>;
+	modal: Box<boolean>;
+	nested: Box<boolean>;
+	preventScrollRestoration: Box<boolean>;
+	noBodyStyles: Box<boolean>;
+} & {
+	hasBeenOpened: Getter<boolean>;
+}) {
+	let activeUrl = $state(typeof window !== 'undefined' ? window.location.href : '');
+
+	function setPositionFixed() {
+		// All browsers on iOS will return true here.
+		if (!needsIOSFixedBodyScrollLock()) return;
+
+		// If previousBodyPosition is already set, don't set it again.
+		if (previousBodyPosition === null && open.current && !noBodyStyles.current) {
+			previousBodyPosition = {
+				position: document.body.style.position,
+				top: document.body.style.top,
+				left: document.body.style.left,
+				height: document.body.style.height,
+				right: 'unset',
+			};
+
+			// Update the dom inside an animation frame
+			const { scrollX, innerHeight } = window;
+			const scrollPos = scrollY.current ?? 0;
+
+			document.body.style.setProperty('position', 'fixed', 'important');
+			Object.assign(document.body.style, {
+				top: `${-scrollPos}px`,
+				left: `${-scrollX}px`,
+				right: '0px',
+				height: 'auto',
+			});
+
+			window.setTimeout(
+				() =>
+					window.requestAnimationFrame(() => {
+						// Attempt to check if the bottom bar appeared due to the position change
+						const bottomBarHeight = innerHeight - window.innerHeight;
+						if (bottomBarHeight && scrollPos >= innerHeight) {
+							// Move the content further up so that the bottom bar doesn't hide it
+							document.body.style.top = `${-(scrollPos + bottomBarHeight)}px`;
+						}
+					}),
+				300,
+			);
+		}
+	}
+
+	function restorePositionSetting() {
+		// All browsers on iOS will return true here.
+		if (!needsIOSFixedBodyScrollLock()) return;
+
+		if (previousBodyPosition !== null && !noBodyStyles.current) {
+			// Convert the position from "px" to Int
+			const y = -parseInt(document.body.style.top, 10);
+			const x = -parseInt(document.body.style.left, 10);
+
+			// Restore styles
+			Object.assign(document.body.style, previousBodyPosition);
+
+			window.requestAnimationFrame(() => {
+				if (preventScrollRestoration.current && activeUrl !== window.location.href) {
+					activeUrl = window.location.href;
+					return;
+				}
+
+				window.scrollTo(x, y);
+			});
+
+			previousBodyPosition = null;
+		}
+	}
+
+	$effect(() => {
+		const _modal = modal.current;
+		const _activeUrl = activeUrl;
+		return untrack(() => {
+			if (!modal.current) return;
+			return () => {
+				if (typeof document === 'undefined') return;
+				// Another drawer is opened, safe to ignore the execution
+				const hasDrawerOpened = !!document.querySelector('[data-vaul-drawer]');
+				if (hasDrawerOpened) return;
+
+				restorePositionSetting();
+			};
+		});
+	});
+
+	$effect(() => {
+		const _open = open.current;
+		const _hasBeenOpened = hasBeenOpened();
+		const _activeUrl = activeUrl;
+		const _modal = modal.current;
+		const _nested = nested.current;
+		untrack(() => {
+			if (nested.current || !hasBeenOpened()) return;
+			// This is needed to force Safari toolbar to show **before** the drawer starts animating to prevent a gnarly shift from happening
+			if (open.current) {
+				// avoid for standalone mode (PWA)
+				const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
+				!isStandalone && setPositionFixed();
+
+				if (!modal.current) {
+					window.setTimeout(() => {
+						restorePositionSetting();
+					}, 500);
+				}
+			} else {
+				restorePositionSetting();
+			}
+		});
+	});
+
+	return { restorePositionSetting };
+}

package/src/lib/internal/vaul/use-prevent-scroll.svelte.ts

@@ -0,0 +1,267 @@
+// This code comes from https://github.com/adobe/react-spectrum/blob/main/packages/react-aria/src/overlays/usePreventScroll.ts
+
+import { isIOS, selfAndAncestors } from '../tools/utils/dom.js';
+import { BROWSER } from 'esm-env';
+import { isWebKit } from './browser.js';
+import { SharedState } from '../shared-state.svelte.js';
+import { BodyScrollLock } from '../body-scroll-lock.svelte.js';
+import { on } from 'svelte/events';
+import { getAbortSignal, untrack } from 'svelte';
+
+interface PreventScrollOptions {
+	/** Whether the scroll lock is disabled. */
+	isDisabled: () => boolean;
+}
+
+const visualViewport = BROWSER && window.visualViewport;
+
+const isScrollable = (node: Element | null, checkForOverflow?: boolean): boolean => {
+	if (!node) return false;
+
+	const style = window.getComputedStyle(node);
+	const root = document.scrollingElement || document.documentElement;
+	let scrollable = /(auto|scroll)/.test(style.overflow + style.overflowX + style.overflowY);
+
+	// Root element has `visible` overflow by default, but is scrollable nonetheless.
+	if (node === root && style.overflow !== 'hidden') {
+		scrollable = true;
+	}
+
+	if (scrollable && checkForOverflow) {
+		scrollable = node.scrollHeight !== node.clientHeight || node.scrollWidth !== node.clientWidth;
+	}
+
+	return scrollable;
+};
+
+// `node` itself is never the answer: callers want the *enclosing* scroller, and both branches of
+// the upstream `isScrollable(node) ? node.parentElement : node` seed skipped it either way.
+const getScrollParent = (node: Element, checkForOverflow?: boolean): Element => {
+	for (const el of selfAndAncestors(node.parentElement)) {
+		if (isScrollable(el, checkForOverflow)) return el;
+	}
+
+	return document.scrollingElement || document.documentElement;
+};
+
+// HTML input types that do not cause the software keyboard to appear.
+const nonTextInputTypes = new Set(['checkbox', 'radio', 'range', 'color', 'file', 'image', 'button', 'submit', 'reset']);
+
+// Shared across every usePreventScroll consumer: the iOS WebKit touch/focus/scroll workaround
+// attaches on the first active caller and tears down when the last one releases. This is separate
+// from body-lock coordination below — it's Drawer-specific (dragging a sheet on iOS), not
+// something Dialog/Popover/Select need.
+const preventScroll = new SharedState(() => {
+	// Setup runs inside the effect (matching upstream react-spectrum's useEffect timing) so the
+	// workaround can ride the effect's abort signal; the signal aborts when the shared root is
+	// disposed, i.e. when the last consumer releases.
+	$effect(() => {
+		// Upstream gates on isIOS() && isWebKit(): iOS 17.4+ allows non-WebKit engines in the EU,
+		// and those don't have WebKit's scroll-lock quirks.
+		if (!isIOS || !isWebKit()) return;
+		preventScrollMobileWebKit(getAbortSignal());
+	});
+});
+
+/**
+ * Prevents scrolling on the document body on mount, and
+ * restores it on unmount. Also ensures that content does not
+ * shift due to the scrollbars disappearing.
+ *
+ * The actual body-style lock (overflow/scrollbar-compensation/pointer-events) is delegated to
+ * `BodyScrollLock` — the same shared, refcounted lock Dialog/Sheet/Select/Popover use — so a
+ * Drawer opened over (or under) one of those doesn't run two uncoordinated scroll-lock strategies
+ * at once. The lock is constructed inside this effect and released by the effect's cleanup, so
+ * register/unregister follow *this* effect's re-run/teardown — "acquire while enabled, release
+ * the moment it's disabled". The iOS touch/focus/scroll workaround above stays Drawer-specific.
+ *
+ * Both are constructed inside `untrack` — their own internal reads/writes (lockMap bookkeeping,
+ * refcounting) must not become dependencies of *this* effect, or a write during construction can
+ * retrigger the very effect that's constructing it.
+ */
+export const usePreventScroll = (opts: PreventScrollOptions) => {
+	$effect(() => {
+		if (opts.isDisabled()) return;
+		const lock = untrack(() => {
+			const lock = new BodyScrollLock(true);
+			preventScroll.get();
+			return lock;
+		});
+		return () => lock.release();
+	});
+};
+
+// Mobile Safari is a whole different beast. Even with overflow: hidden,
+// it still scrolls the page in many situations:
+//
+// 1. When the bottom toolbar and address bar are collapsed, page scrolling is always allowed.
+// 2. When the keyboard is visible, the viewport does not resize. Instead, the keyboard covers part of
+//    it, so it becomes scrollable.
+// 3. When tapping on an input, the page always scrolls so that the input is centered in the visual viewport.
+//    This may cause even fixed position elements to scroll off the screen.
+// 4. When using the next/previous buttons in the keyboard to navigate between inputs, the whole page always
+//    scrolls, even if the input is inside a nested scrollable element that could be scrolled instead.
+//
+// In order to work around these cases, and prevent scrolling without jankiness, we do a few things:
+//
+// 1. Prevent default on `touchmove` events that are not in a scrollable element. This prevents touch scrolling
+//    on the window.
+// 2. Set `overscroll-behavior: contain` on nested scrollable regions so they do not scroll the page when at
+//    the top or bottom. Work around a bug where this does not work when the element does not actually overflow
+//    by preventing default in a `touchmove` event. This is best effort: we can't prevent default when pinch
+//    zooming or when an element contains text selection, which may allow scrolling in some cases.
+// 3. Override focus to prevent WebKit's native page scroll toward the focused input, then scroll it into
+//    view ourselves within its scroll parents.
+function preventScrollMobileWebKit(signal: AbortSignal) {
+	let scrollable: Element;
+	let allowTouchMove = false;
+
+	const onTouchStart = (e: TouchEvent) => {
+		// Store the nearest scrollable parent element from the element that the user touched.
+		const target = e.target as Element;
+		scrollable = isScrollable(target) ? target : getScrollParent(target, true);
+		allowTouchMove = false;
+
+		// If the target is selected, don't preventDefault in touchmove to allow the user to adjust the selection.
+		const selection = target.ownerDocument.defaultView?.getSelection();
+		if (selection && !selection.isCollapsed && selection.containsNode(target, true)) {
+			allowTouchMove = true;
+		}
+
+		// If this is a range input, allow touch move to allow the user to adjust the slider value.
+		if (e.composedPath().some((el) => el instanceof HTMLInputElement && el.type === 'range')) {
+			allowTouchMove = true;
+		}
+
+		// If this is a focused input element with a selected range, allow the user to drag the selection handles.
+		if (
+			'selectionStart' in target &&
+			'selectionEnd' in target &&
+			(target.selectionStart as number) < (target.selectionEnd as number) &&
+			target.ownerDocument.activeElement === target
+		) {
+			allowTouchMove = true;
+		}
+	};
+
+	// Prevent scrolling up when at the top and scrolling down when at the bottom
+	// of a nested scrollable area, otherwise mobile Safari will start scrolling
+	// the window instead.
+	// This must be applied before the touchstart event as of iOS 26, so inject it as a <style> element.
+	const style = document.createElement('style');
+	style.textContent = '@layer { * { overscroll-behavior: contain; } }';
+	document.head.prepend(style);
+
+	const onTouchMove = (e: TouchEvent) => {
+		// Allow pinch-zooming.
+		if (e.touches.length === 2 || allowTouchMove) {
+			return;
+		}
+
+		// Prevent scrolling the window.
+		if (!scrollable || scrollable === document.documentElement || scrollable === document.body) {
+			e.preventDefault();
+			return;
+		}
+
+		// overscroll-behavior should prevent scroll chaining, but currently does not
+		// if the element doesn't actually overflow. https://bugs.webkit.org/show_bug.cgi?id=243452
+		// This checks that both the width and height do not overflow, otherwise we might
+		// block horizontal scrolling too. In that case, adding `touch-action: pan-x` to
+		// the element will prevent vertical page scrolling. We can't add that automatically
+		// because it must be set before the touchstart event.
+		if (scrollable.scrollHeight === scrollable.clientHeight && scrollable.scrollWidth === scrollable.clientWidth) {
+			e.preventDefault();
+		}
+	};
+
+	const onBlur = (e: FocusEvent) => {
+		const target = e.target as HTMLElement;
+		const relatedTarget = e.relatedTarget as HTMLElement | null;
+		if (relatedTarget && isInput(relatedTarget)) {
+			// Focus without scrolling the whole page, and then scroll into view manually.
+			relatedTarget.focus({ preventScroll: true });
+			scrollIntoViewWhenReady(relatedTarget, isInput(target));
+		} else if (!relatedTarget) {
+			// When tapping the Done button on the keyboard, focus moves to the body.
+			// FocusScope will then restore focus back to the input. Later when tapping
+			// the same input again, it is already focused, so no blur event will fire,
+			// resulting in the flow above never running and Safari's native scrolling occurring.
+			// Instead, move focus to the parent focusable element (e.g. the dialog).
+			const focusable = target.parentElement?.closest<HTMLElement>('[tabindex]');
+			focusable?.focus({ preventScroll: true });
+		}
+	};
+
+	// Override programmatic focus to scroll into view without scrolling the whole page.
+	const focus = HTMLElement.prototype.focus;
+	HTMLElement.prototype.focus = function (options?: FocusOptions) {
+		// Track whether the keyboard was already visible before.
+		const activeElement = document.activeElement;
+		const wasKeyboardVisible = activeElement != null && isInput(activeElement);
+
+		// Focus the element without scrolling the page.
+		focus.call(this, { ...options, preventScroll: true });
+
+		if (!options || !options.preventScroll) {
+			scrollIntoViewWhenReady(this, wasKeyboardVisible);
+		}
+	};
+
+	on(document, 'touchstart', onTouchStart, { passive: false, capture: true, signal });
+	on(document, 'touchmove', onTouchMove, { passive: false, capture: true, signal });
+	on(document, 'blur', onBlur, { capture: true, signal });
+
+	signal.addEventListener('abort', () => {
+		style.remove();
+		HTMLElement.prototype.focus = focus;
+	});
+}
+
+function scrollIntoViewWhenReady(target: Element, wasKeyboardVisible: boolean) {
+	if (wasKeyboardVisible || !visualViewport) {
+		// If the keyboard was already visible, scroll the target into view immediately.
+		scrollIntoView(target);
+	} else {
+		// Otherwise, wait for the visual viewport to resize before scrolling so we can
+		// measure the correct position to scroll to.
+		visualViewport.addEventListener('resize', () => scrollIntoView(target), { once: true });
+	}
+}
+
+function scrollIntoView(target: Element) {
+	const root = document.scrollingElement || document.documentElement;
+	let nextTarget: Element | null = target;
+	while (nextTarget && nextTarget !== root) {
+		// Find the parent scrollable element and adjust the scroll position if the target is not already in view.
+		const scrollable = getScrollParent(nextTarget);
+		if (scrollable !== document.documentElement && scrollable !== document.body && scrollable !== nextTarget) {
+			const scrollableRect = scrollable.getBoundingClientRect();
+			const targetRect = nextTarget.getBoundingClientRect();
+			if (targetRect.top < scrollableRect.top || targetRect.bottom > scrollableRect.top + nextTarget.clientHeight) {
+				let bottom = scrollableRect.bottom;
+				if (visualViewport) {
+					bottom = Math.min(bottom, visualViewport.offsetTop + visualViewport.height);
+				}
+
+				// Center within the viewport.
+				const adjustment = targetRect.top - scrollableRect.top - ((bottom - scrollableRect.top) / 2 - targetRect.height / 2);
+				scrollable.scrollTo({
+					// Clamp to the valid range to prevent over-scrolling.
+					top: Math.max(0, Math.min(scrollable.scrollHeight - scrollable.clientHeight, scrollable.scrollTop + adjustment)),
+					behavior: 'smooth',
+				});
+			}
+		}
+
+		nextTarget = scrollable.parentElement;
+	}
+}
+
+export function isInput(target: Element) {
+	return (
+		(target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) ||
+		target instanceof HTMLTextAreaElement ||
+		(target instanceof HTMLElement && target.isContentEditable)
+	);
+}

package/src/lib/internal/vaul/use-snap-points.svelte.ts

@@ -0,0 +1,246 @@
+import type { ReadableBoxedValues, WritableBoxedValues } from '../tools/index.js';
+import type { DrawerDirection, Getters } from './types.js';
+import { applyStyle, isVertical } from './helpers.js';
+import { VELOCITY_THRESHOLD } from './constants.js';
+import { untrack } from 'svelte';
+import { innerWidth, innerHeight } from 'svelte/reactivity/window';
+
+export function useSnapPoints({
+	snapPoints,
+	drawerNode: drawerNode,
+	overlayNode: overlayNode,
+	fadeFromIndex,
+	setOpenTime,
+	direction,
+	container,
+	snapToSequentialPoint,
+	activeSnapPoint,
+	open,
+	isReleasing,
+}: Getters<{
+	drawerNode: HTMLElement | null;
+	overlayNode: HTMLElement | null;
+	isReleasing: boolean;
+}> & {
+	setOpenTime: (time: number) => void;
+} & WritableBoxedValues<{
+		activeSnapPoint: number | string | null | undefined;
+		open: boolean;
+	}> &
+	ReadableBoxedValues<{
+		direction: DrawerDirection;
+		container: HTMLElement | null | undefined;
+		snapToSequentialPoint: boolean;
+		fadeFromIndex: number | undefined;
+		snapPoints: (number | string)[] | undefined;
+	}>) {
+	const isLastSnapPoint = $derived(activeSnapPoint.current === snapPoints.current?.[snapPoints.current.length - 1] || null);
+
+	const activeSnapPointIndex = $derived(snapPoints.current?.findIndex((snapPoint) => snapPoint === activeSnapPoint.current));
+
+	// At-or-above fadeFromIndex (upstream's snapToPoint fades the overlay for any
+	// target >= fadeFromIndex, not just the exact point); drives the overlay's
+	// data-vaul-snap-points-overlay attribute, whose stylesheet rules own the fade.
+	const shouldFade = $derived(
+		(snapPoints.current &&
+			snapPoints.current.length > 0 &&
+			(fadeFromIndex.current || fadeFromIndex.current === 0) &&
+			!Number.isNaN(fadeFromIndex.current) &&
+			activeSnapPointIndex !== undefined &&
+			activeSnapPointIndex >= fadeFromIndex.current) ||
+			!snapPoints.current,
+	);
+
+	const snapPointsOffset = $derived.by(() => {
+		open.current;
+		const winWidth = innerWidth.current;
+		const winHeight = innerHeight.current;
+		const windowDimensions =
+			winWidth !== undefined && winHeight !== undefined ? { innerWidth: winWidth, innerHeight: winHeight } : undefined;
+		const containerSize = container.current
+			? {
+					width: container.current.getBoundingClientRect().width,
+					height: container.current.getBoundingClientRect().height,
+				}
+			: windowDimensions
+				? { width: windowDimensions.innerWidth, height: windowDimensions.innerHeight }
+				: { width: 0, height: 0 };
+
+		return (
+			snapPoints.current?.map((snapPoint) => {
+				const isPx = typeof snapPoint === 'string';
+				let snapPointAsNumber = 0;
+
+				if (isPx) {
+					snapPointAsNumber = parseInt(snapPoint, 10);
+				}
+
+				if (isVertical(direction.current)) {
+					const height = isPx ? snapPointAsNumber : windowDimensions ? snapPoint * containerSize.height : 0;
+
+					if (windowDimensions) {
+						return direction.current === 'bottom' ? containerSize.height - height : -containerSize.height + height;
+					}
+
+					return height;
+				}
+				const width = isPx ? snapPointAsNumber : windowDimensions ? snapPoint * containerSize.width : 0;
+
+				if (windowDimensions) {
+					return direction.current === 'right' ? containerSize.width - width : -containerSize.width + width;
+				}
+
+				return width;
+			}) ?? []
+		);
+	});
+
+	const activeSnapPointOffset = $derived(activeSnapPointIndex != null ? snapPointsOffset[activeSnapPointIndex] : null);
+
+	const onSnapPointChange = (activeSnapPointIndex: number) =>
+		snapPoints.current && activeSnapPointIndex === snapPointsOffset.length - 1 && setOpenTime(performance.now());
+
+	function snapToPoint(dimension: number) {
+		const newSnapPointIndex = snapPointsOffset?.findIndex((snapPointDim) => snapPointDim === dimension) ?? null;
+		onSnapPointChange(newSnapPointIndex);
+
+		applyStyle(drawerNode(), {
+			transform: isVertical(direction.current) ? `translate3d(0, ${dimension}px, 0)` : `translate3d(${dimension}px, 0, 0)`,
+		});
+		// Hand the fade back to the data-vaul-snap-points-overlay stylesheet rules:
+		// clear the drag-time inline opacity and let the activeSnapPoint write below
+		// flip the attribute (via shouldFade); stylesheet transitions animate both nodes.
+		drawerNode()?.style.removeProperty('transition');
+		overlayNode()?.style.removeProperty('opacity');
+
+		activeSnapPoint.current = snapPoints.current?.[Math.max(newSnapPointIndex, 0)];
+	}
+
+	$effect(() => {
+		const _activeSnapPoint = activeSnapPoint.current;
+		const _open = open.current;
+		untrack(() => {
+			// we only want to snap to the next point if we are closing via a
+			// means other than release, otherwise a race condition can occur
+			// where the drawer snaps to the previous point and then closes,
+			// rather than continuing to close from the current point
+			const releasing = isReleasing();
+			if (!activeSnapPoint.current || releasing) return;
+
+			const newIndex = snapPoints.current?.findIndex((snapPoint) => snapPoint === activeSnapPoint.current) ?? -1;
+			if (snapPointsOffset && newIndex !== -1 && typeof snapPointsOffset[newIndex] === 'number') {
+				if (snapPointsOffset[newIndex] === activeSnapPoint.current) return;
+				snapToPoint(snapPointsOffset[newIndex]);
+			}
+		});
+	});
+
+	function onRelease({
+		draggedDistance,
+		closeDrawer,
+		velocity,
+		dismissible,
+	}: {
+		draggedDistance: number;
+		closeDrawer: () => void;
+		velocity: number;
+		dismissible: boolean;
+	}) {
+		if (fadeFromIndex.current === undefined) return;
+		const dir = direction.current;
+		const currentPosition =
+			dir === 'bottom' || dir === 'right' ? (activeSnapPointOffset ?? 0) - draggedDistance : (activeSnapPointOffset ?? 0) + draggedDistance;
+		const isFirst = activeSnapPointIndex === 0;
+		const hasDraggedUp = draggedDistance > 0;
+
+		if (!snapToSequentialPoint.current && velocity > 2 && !hasDraggedUp) {
+			if (dismissible) {
+				closeDrawer();
+			} else {
+				snapToPoint(snapPointsOffset[0]!);
+			}
+			return;
+		}
+
+		if (!snapToSequentialPoint.current && velocity > 2 && hasDraggedUp && snapPointsOffset && snapPoints.current) {
+			snapToPoint(snapPointsOffset[snapPoints.current.length - 1]!);
+			return;
+		}
+
+		// Find the closest snap point to the current position
+		const closestSnapPoint = snapPointsOffset?.reduce((prev, curr) => {
+			if (typeof prev !== 'number' || typeof curr !== 'number') return prev;
+			return Math.abs(curr - currentPosition) < Math.abs(prev - currentPosition) ? curr : prev;
+		});
+
+		const dim = isVertical(dir) ? (innerHeight.current ?? 0) : (innerWidth.current ?? 0);
+
+		if (velocity > VELOCITY_THRESHOLD && Math.abs(draggedDistance) < dim * 0.4) {
+			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 && snapPoints.current) {
+				snapToPoint(snapPointsOffset[snapPoints.current.length - 1]!);
+				return;
+			}
+
+			if (isFirst && dragDirection < 0 && dismissible) {
+				closeDrawer();
+			}
+
+			if (activeSnapPointIndex === null) return;
+
+			snapToPoint(snapPointsOffset[activeSnapPointIndex! + dragDirection]!);
+			return;
+		}
+		snapToPoint(closestSnapPoint);
+	}
+
+	const onDrag = ({ draggedDistance }: { draggedDistance: number }) => {
+		if (activeSnapPointOffset == null) return;
+		const dir = direction.current;
+		const bottomOrRight = dir === 'bottom' || dir === 'right';
+		const newValue = bottomOrRight ? activeSnapPointOffset - draggedDistance : activeSnapPointOffset + draggedDistance;
+		const lastSnapPoint = snapPointsOffset[snapPointsOffset.length - 1]!;
+		// Don't do anything if we exceed the last (biggest) snap point
+		if (bottomOrRight && newValue < lastSnapPoint) return;
+		if (!bottomOrRight && newValue > lastSnapPoint) return;
+		applyStyle(drawerNode(), {
+			transform: isVertical(dir) ? `translate3d(0, ${newValue}px, 0)` : `translate3d(${newValue}px, 0, 0)`,
+		});
+	};
+
+	const getPercentageDragged = (absDraggedDistance: number, isDraggingDown: boolean): number | null => {
+		if (!snapPoints.current || typeof activeSnapPointIndex !== 'number' || !snapPointsOffset || fadeFromIndex.current === undefined)
+			return null;
+		const isOverlaySnapPoint = activeSnapPointIndex === fadeFromIndex.current - 1;
+		const isOverlaySnapPointOrHigher = activeSnapPointIndex >= fadeFromIndex.current;
+		if (isOverlaySnapPointOrHigher && isDraggingDown) return 0;
+		if (isOverlaySnapPoint && !isDraggingDown) return 1;
+		if (!shouldFade && !isOverlaySnapPoint) return null;
+		const targetSnapPointIndex = isOverlaySnapPoint ? activeSnapPointIndex + 1 : activeSnapPointIndex - 1;
+		const snapPointDistance = isOverlaySnapPoint
+			? snapPointsOffset[targetSnapPointIndex]! - snapPointsOffset[targetSnapPointIndex - 1]!
+			: snapPointsOffset[targetSnapPointIndex + 1]! - snapPointsOffset[targetSnapPointIndex]!;
+		const percentageDragged = absDraggedDistance / Math.abs(snapPointDistance);
+		return isOverlaySnapPoint ? 1 - percentageDragged : percentageDragged;
+	};
+
+	return {
+		get isLastSnapPoint() {
+			return isLastSnapPoint;
+		},
+		get shouldFade() {
+			return shouldFade;
+		},
+		get activeSnapPointIndex() {
+			return activeSnapPointIndex;
+		},
+		get snapPointsOffset() {
+			return snapPointsOffset;
+		},
+		getPercentageDragged,
+		onRelease,
+		onDrag,
+	};
+}