sheer-ui 0.4.2 → 0.5.0

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

@@ -1,142 +0,0 @@
-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

@@ -1,267 +0,0 @@
-// 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

@@ -1,246 +0,0 @@
-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,
-	};
-}