more cleanup

LICENSE

@@ -0,0 +1,10 @@
+MIT License
+
+Copyright (c) 2023 Hunter Johnston
+Copyright (c) 2023 Emil Kowalski
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

src/lib/internal/escape-keydown.ts

@@ -1,7 +1,7 @@
 import { readable } from 'svelte/store';
 import { addEventListener } from './helpers/event.js';
 import { chain } from './prevent-scroll.js';
-import { isFunction, isHTMLElement, noop } from '$lib/internal/helpers/index.js';
+import { isHTMLElement, noop } from '$lib/internal/helpers/index.js';
 
 /**
  * Creates a readable store that tracks the latest Escape Keydown that occurred on the document.
@@ -34,9 +34,10 @@ const documentEscapeKeyStore = readable<KeyboardEvent | undefined>(
 	}
 );
 
-export const useEscapeKeydown = (node: HTMLElement, config: EscapeKeydownConfig = {}) => {
+export function handleEscapeKeydown(node: HTMLElement, handler: (e: KeyboardEvent) => void) {
 	let unsub = noop;
-	function update(config: EscapeKeydownConfig = {}) {
+	function update(handler: (e: KeyboardEvent) => void) {
+		// unsubscribe from the previous config/listeners if they exist
 		unsub();
 
 		unsub = chain(
@@ -49,51 +50,23 @@ export const useEscapeKeydown = (node: HTMLElement, config: EscapeKeydownConfig
 					return;
 				}
 
+				// preventDefault here to prevent exiting fullscreen for mac
 				e.preventDefault();
 
-				// If an ignore function is passed, check if it returns true
-				if (config.ignore) {
-					if (isFunction(config.ignore)) {
-						if (config.ignore(e)) return;
-					}
-					// If an ignore array is passed, check if any elements in the array match the target
-					else if (Array.isArray(config.ignore)) {
-						if (
-							config.ignore.length > 0 &&
-							config.ignore.some((ignoreEl) => {
-								return ignoreEl && target === ignoreEl;
-							})
-						)
-							return;
-					}
-				}
-
-				// If none of the above conditions are met, call the handler
-				config.handler?.(e);
-			}),
-			(node.dataset.escapee = '')
+				handler(e);
+			})
 		);
+
+		// to remain compatible with nested Bits/Melt components, we set a data
+		// attribute to indicate that this element is handling escape keydowns
+		// so we only handle the highest level escapee
+		node.setAttribute('data-escapee', '');
 	}
 
-	update(config);
+	update(handler);
 
-	return {
-		update,
-		destroy() {
-			node.removeAttribute('data-escapee');
-			unsub();
-		}
+	return () => {
+		unsub();
+		node.removeAttribute('data-escapee');
 	};
-};
-
-export type EscapeKeydownConfig = {
-	/**
-	 * Callback when user presses the escape key element.
-	 */
-	handler?: (evt: KeyboardEvent) => void;
-
-	/**
-	 * A predicate function or a list of elements that should not trigger the event.
-	 */
-	ignore?: ((e: KeyboardEvent) => boolean) | Element[];
-};
+}

src/lib/internal/helpers/is.ts

@@ -1,3 +1,16 @@
+// 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'
+]);
+
 export function isHTMLElement(el: unknown): el is HTMLElement {
 	return el instanceof HTMLElement;
 }
@@ -8,3 +21,11 @@ export const isBrowser = typeof document !== 'undefined';
 export function isFunction(v: unknown): v is Function {
 	return typeof v === 'function';
 }
+
+export function isInput(target: Element) {
+	return (
+		(target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) ||
+		target instanceof HTMLTextAreaElement ||
+		(target instanceof HTMLElement && target.isContentEditable)
+	);
+}

src/lib/internal/position-fixed.ts

@@ -5,7 +5,7 @@ import { effect } from './helpers/store.js';
 
 let previousBodyPosition: Record<string, string> | null = null;
 
-export function usePositionFixed({
+export function handlePositionFixed({
 	isOpen,
 	modal,
 	nested,

src/lib/internal/prevent-scroll.ts

@@ -1,6 +1,7 @@
 // This code comes from https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/overlays/src/usePreventScroll.ts
 
 import { addEventListener } from './helpers/event.js';
+import { isInput } from './helpers/is.js';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function chain(...callbacks: any[]): (...args: any[]) => void {
@@ -63,19 +64,6 @@ export function getScrollParent(node: Element): Element {
 	return node || 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'
-]);
-
 // The number of active usePreventScroll calls. Used to determine whether to revert back to the original page style/scroll position
 let preventScrollCount = 0;
 let restore: () => void;
@@ -85,7 +73,7 @@ let restore: () => void;
  * restores it on unmount. Also ensures that content does not
  * shift due to the scrollbars disappearing.
  */
-export function usePreventScroll() {
+export function preventScroll() {
 	if (typeof document === 'undefined') return () => {};
 
 	preventScrollCount++;
@@ -174,20 +162,19 @@ function preventScrollStandard() {
 function preventScrollMobileSafari() {
 	let scrollable: Element;
 	let lastY = 0;
+	const { documentElement, body, activeElement } = document;
 
 	function onTouchStart(e: TouchEvent) {
 		// Store the nearest scrollable parent element from the element that the user touched.
 		scrollable = getScrollParent(e.target as Element);
-		if (scrollable === document.documentElement && scrollable === document.body) {
-			return;
-		}
+		if (scrollable === documentElement && scrollable === body) return;
 
 		lastY = e.changedTouches[0].pageY;
 	}
 
 	function onTouchMove(e: TouchEvent) {
 		// Prevent scrolling the window.
-		if (!scrollable || scrollable === document.documentElement || scrollable === document.body) {
+		if (!scrollable || scrollable === documentElement || scrollable === body) {
 			e.preventDefault();
 			return;
 		}
@@ -200,9 +187,7 @@ function preventScrollMobileSafari() {
 		const scrollTop = scrollable.scrollTop;
 		const bottom = scrollable.scrollHeight - scrollable.clientHeight;
 
-		if (bottom === 0) {
-			return;
-		}
+		if (bottom === 0) return;
 
 		if ((scrollTop <= 0 && y > lastY) || (scrollTop >= bottom && y < lastY)) {
 			e.preventDefault();
@@ -213,50 +198,48 @@ function preventScrollMobileSafari() {
 
 	function onTouchEnd(e: TouchEvent) {
 		const target = e.target as HTMLElement;
-
+		if (!(isInput(target) && target !== activeElement)) return;
 		// Apply this change if we're not already focused on the target element
-		if (isInput(target) && target !== document.activeElement) {
-			e.preventDefault();
-
-			// Apply a transform to trick Safari into thinking the input is at the top of the page
-			// so it doesn't try to scroll it into view. When tapping on an input, this needs to
-			// be done before the "focus" event, so we have to focus the element ourselves.
-			target.style.transform = 'translateY(-2000px)';
-			target.focus();
-			requestAnimationFrame(() => {
-				target.style.transform = '';
-			});
-		}
+		e.preventDefault();
+
+		// Apply a transform to trick Safari into thinking the input is at the top of the page
+		// so it doesn't try to scroll it into view. When tapping on an input, this needs to
+		// be done before the "focus" event, so we have to focus the element ourselves.
+		target.style.transform = 'translateY(-2000px)';
+		target.focus();
+		requestAnimationFrame(() => {
+			target.style.transform = '';
+		});
 	}
 
 	function onFocus(e: FocusEvent) {
 		const target = e.target as HTMLElement;
-		if (isInput(target)) {
-			// Transform also needs to be applied in the focus event in cases where focus moves
-			// other than tapping on an input directly, e.g. the next/previous buttons in the
-			// software keyboard. In these cases, it seems applying the transform in the focus event
-			// is good enough, whereas when tapping an input, it must be done before the focus event. 🤷‍♂️
-			target.style.transform = 'translateY(-2000px)';
-			requestAnimationFrame(() => {
-				target.style.transform = '';
-
-				// This will have prevented the browser from scrolling the focused element into view,
-				// so we need to do this ourselves in a way that doesn't cause the whole page to scroll.
-				if (visualViewport) {
-					if (visualViewport.height < window.innerHeight) {
-						// If the keyboard is already visible, do this after one additional frame
-						// to wait for the transform to be removed.
-						requestAnimationFrame(() => {
-							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 });
-					}
+		if (!isInput(target)) return;
+
+		// Transform also needs to be applied in the focus event in cases where focus moves
+		// other than tapping on an input directly, e.g. the next/previous buttons in the
+		// software keyboard. In these cases, it seems applying the transform in the focus event
+		// is good enough, whereas when tapping an input, it must be done before the focus event. 🤷‍♂️
+		target.style.transform = 'translateY(-2000px)';
+		requestAnimationFrame(() => {
+			target.style.transform = '';
+
+			// This will have prevented the browser from scrolling the focused element into view,
+			// so we need to do this ourselves in a way that doesn't cause the whole page to scroll.
+			if (visualViewport) {
+				if (visualViewport.height < window.innerHeight) {
+					// If the keyboard is already visible, do this after one additional frame
+					// to wait for the transform to be removed.
+					requestAnimationFrame(() => {
+						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 onWindowScroll() {
@@ -273,11 +256,11 @@ function preventScrollMobileSafari() {
 
 	const restoreStyles = chain(
 		setStyle(
-			document.documentElement,
+			documentElement,
 			'paddingRight',
-			`${window.innerWidth - document.documentElement.clientWidth}px`
+			`${window.innerWidth - documentElement.clientWidth}px`
 		),
-		setStyle(document.documentElement, 'overflow', 'hidden')
+		setStyle(documentElement, 'overflow', 'hidden')
 		// setStyle(document.body, 'marginTop', `-${scrollY}px`),
 	);
 
@@ -312,15 +295,13 @@ function setStyle(element: HTMLElement, style: any, value: string) {
 }
 
 function scrollIntoView(target: Element) {
-	const root = document.scrollingElement || document.documentElement;
+	const { documentElement, body, scrollingElement } = document;
+
+	const root = scrollingElement || documentElement;
 	while (target && target !== root) {
 		// Find the parent scrollable element and adjust the scroll position if the target is not already in view.
 		const scrollable = getScrollParent(target);
-		if (
-			scrollable !== document.documentElement &&
-			scrollable !== document.body &&
-			scrollable !== target
-		) {
+		if (scrollable !== documentElement && scrollable !== body && scrollable !== target) {
 			const scrollableTop = scrollable.getBoundingClientRect().top;
 			const targetTop = target.getBoundingClientRect().top;
 			const targetBottom = target.getBoundingClientRect().bottom;
@@ -335,11 +316,3 @@ function scrollIntoView(target: Element) {
 		target = scrollable.parentElement;
 	}
 }
-
-export function isInput(target: Element) {
-	return (
-		(target instanceof HTMLInputElement && !nonTextInputTypes.has(target.type)) ||
-		target instanceof HTMLTextAreaElement ||
-		(target instanceof HTMLElement && target.isContentEditable)
-	);
-}

src/lib/internal/snap-points.ts

@@ -2,7 +2,7 @@ import { derived, get, type Writable } from 'svelte/store';
 import { TRANSITIONS, VELOCITY_THRESHOLD } from './constants.js';
 import { effect, set } from './helpers/index.js';
 
-export function createSnapPoints({
+export function handleSnapPoints({
 	activeSnapPoint,
 	snapPoints,
 	drawerRef,