svelte-ag 0.0.2-dev.72

package/src/lib/bits/internal/kbd-constants.ts

@@ -0,0 +1,40 @@
+export const ALT = "Alt";
+export const ARROW_DOWN = "ArrowDown";
+export const ARROW_LEFT = "ArrowLeft";
+export const ARROW_RIGHT = "ArrowRight";
+export const ARROW_UP = "ArrowUp";
+export const BACKSPACE = "Backspace";
+export const CAPS_LOCK = "CapsLock";
+export const CONTROL = "Control";
+export const DELETE = "Delete";
+export const END = "End";
+export const ENTER = "Enter";
+export const ESCAPE = "Escape";
+export const F1 = "F1";
+export const F10 = "F10";
+export const F11 = "F11";
+export const F12 = "F12";
+export const F2 = "F2";
+export const F3 = "F3";
+export const F4 = "F4";
+export const F5 = "F5";
+export const F6 = "F6";
+export const F7 = "F7";
+export const F8 = "F8";
+export const F9 = "F9";
+export const HOME = "Home";
+export const META = "Meta";
+export const PAGE_DOWN = "PageDown";
+export const PAGE_UP = "PageUp";
+export const SHIFT = "Shift";
+export const SPACE = " ";
+export const TAB = "Tab";
+export const CTRL = "Control";
+export const ASTERISK = "*";
+export const a = "a";
+export const P = "P";
+export const A = "A";
+export const p = "p";
+export const n = "n";
+export const j = "j";
+export const k = "k";

package/src/lib/bits/internal/kbd.ts

@@ -0,0 +1 @@
+export * as kbd from "./kbd-constants.js";

package/src/lib/bits/internal/locale.ts

@@ -0,0 +1,13 @@
+// https://github.com/melt-ui/melt-ui
+import type { Direction } from "$lib/shared/index.js";
+
+/**
+ * Detects the text direction in the element.
+ * @returns {Direction} The text direction ('ltr' for left-to-right or 'rtl' for right-to-left).
+ */
+export function getElemDirection(elem: HTMLElement): Direction {
+	const style = window.getComputedStyle(elem);
+	const direction = style.getPropertyValue("direction");
+
+	return direction as Direction;
+}

package/src/lib/bits/internal/math.test.ts

@@ -0,0 +1,88 @@
+import { describe, expect, it } from "vitest";
+import { linearScale, snapValueToStep } from "./math.js";
+
+describe("snapValueToStep", () => {
+	it("should snap value to nearest step", () => {
+		expect(snapValueToStep(3.7, 0, 10, 1)).toBe(4);
+		expect(snapValueToStep(3.2, 0, 10, 1)).toBe(3);
+	});
+
+	it("should handle decimal steps", () => {
+		expect(snapValueToStep(3.7, 0, 10, 0.5)).toBe(3.5);
+		expect(snapValueToStep(3.8, 0, 10, 0.5)).toBe(4);
+	});
+
+	it("should respect min value", () => {
+		expect(snapValueToStep(1.2, 2, 10, 1)).toBe(2);
+	});
+
+	it("should respect max value", () => {
+		expect(snapValueToStep(9.8, 0, 9, 1)).toBe(9);
+	});
+
+	it("should handle NaN min value", () => {
+		expect(snapValueToStep(3.7, Number.NaN, 10, 1)).toBe(4);
+	});
+
+	it("should handle NaN max value", () => {
+		expect(snapValueToStep(3.7, 0, Number.NaN, 1)).toBe(4);
+	});
+
+	it("should handle both NaN min and max values", () => {
+		expect(snapValueToStep(3.7, Number.NaN, Number.NaN, 1)).toBe(4);
+	});
+
+	it("should handle values outside the range", () => {
+		expect(snapValueToStep(12, 0, 10, 1)).toBe(10);
+		expect(snapValueToStep(-2, 0, 10, 1)).toBe(0);
+	});
+
+	it("should handle large steps", () => {
+		expect(snapValueToStep(17, 0, 100, 20)).toBe(20);
+	});
+
+	it("should maintain precision for decimal steps", () => {
+		expect(snapValueToStep(3.14159, 0, 10, 0.01)).toBe(3.14);
+		expect(snapValueToStep(3.14159, 0, 10, 0.001)).toBe(3.142);
+	});
+});
+
+describe("linearScale", () => {
+	it("correctly scales the value", () => {
+		expect(linearScale([0, 1], [0, 100])(0.5)).toBe(50);
+		expect(linearScale([0, 1], [10, 90])(0.5)).toBe(50);
+		expect(linearScale([0, 1], [0, 100])(0.33)).toBe(33);
+		expect(linearScale([0, 1], [0, 100])(0)).toBe(0);
+	});
+
+	it("is minimum when below minimum", () => {
+		expect(linearScale([0, 1], [0, 100])(2)).toBe(100);
+		expect(linearScale([0, 1], [0, 100])(-5)).toBe(0);
+	});
+
+	it("correctly handles negative scales", () => {
+		expect(linearScale([-1, 1], [0, 100])(0)).toBe(50);
+	});
+
+	it("handles reversed ranges", () => {
+		expect(linearScale([0, 1], [100, 0])(0.5)).toBe(50);
+		expect(linearScale([0, 1], [100, 0])(0)).toBe(100);
+		expect(linearScale([0, 1], [100, 0])(2)).toBe(0); // clamped
+	});
+
+	it("works with non-zero based domains", () => {
+		expect(linearScale([10, 20], [0, 100])(15)).toBe(50);
+		expect(linearScale([100, 200], [0, 1])(150)).toBe(0.5);
+	});
+
+	it("handles unclamped values when clamp is false", () => {
+		const scale = linearScale([0, 1], [0, 100], false);
+		expect(scale(2)).toBe(200);
+		expect(scale(-1)).toBe(-100);
+	});
+
+	it("maintains precision with small numbers", () => {
+		expect(linearScale([0, 0.1], [0, 1])(0.05)).toBeCloseTo(0.5, 6);
+		expect(linearScale([0, 1e-6], [0, 1])(5e-7)).toBeCloseTo(0.5, 6);
+	});
+});

package/src/lib/bits/internal/math.ts

@@ -0,0 +1,50 @@
+/**
+ * From https://github.com/melt-ui/melt-ui/blob/main/packages/svelte/src/lib/internal/math.ts
+ */
+export function snapValueToStep(value: number, min: number, max: number, step: number): number {
+	const remainder = (value - (Number.isNaN(min) ? 0 : min)) % step;
+	let snappedValue =
+		Math.abs(remainder) * 2 >= step
+			? value + Math.sign(remainder) * (step - Math.abs(remainder))
+			: value - remainder;
+
+	if (!Number.isNaN(min)) {
+		if (snappedValue < min) {
+			snappedValue = min;
+		} else if (!Number.isNaN(max) && snappedValue > max) {
+			snappedValue = min + Math.floor((max - min) / step) * step;
+		}
+	} else if (!Number.isNaN(max) && snappedValue > max) {
+		snappedValue = Math.floor(max / step) * step;
+	}
+
+	const string = step.toString();
+	const index = string.indexOf(".");
+	const precision = index >= 0 ? string.length - index : 0;
+
+	if (precision > 0) {
+		const pow = 10 ** precision;
+		snappedValue = Math.round(snappedValue * pow) / pow;
+	}
+
+	return snappedValue;
+}
+
+export function linearScale(
+	domain: [number, number],
+	range: [number, number],
+	clamp: boolean = true
+): (x: number) => number {
+	const [d0, d1] = domain;
+	const [r0, r1] = range;
+
+	const slope = (r1 - r0) / (d1 - d0);
+
+	return (x: number) => {
+		const result = r0 + slope * (x - d0);
+		if (!clamp) return result;
+		if (result > Math.max(r0, r1)) return Math.max(r0, r1);
+		if (result < Math.min(r0, r1)) return Math.min(r0, r1);
+		return result;
+	};
+}

package/src/lib/bits/internal/noop.ts

@@ -0,0 +1,4 @@
+/**
+ * A no operation function (does nothing)
+ */
+export function noop() {}

package/src/lib/bits/internal/should-trap-focus.ts

@@ -0,0 +1,16 @@
+export function shouldTrapFocus({
+	forceMount,
+	present,
+	trapFocus,
+	open,
+}: {
+	forceMount: boolean;
+	present: boolean;
+	trapFocus: boolean;
+	open: boolean;
+}): boolean {
+	if (forceMount) {
+		return open && trapFocus;
+	}
+	return present && trapFocus && open;
+}

package/src/lib/bits/internal/sleep.ts

@@ -0,0 +1,3 @@
+export function sleep(ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}

package/src/lib/bits/internal/tabbable.ts

@@ -0,0 +1,76 @@
+import { focusable, isFocusable, isTabbable, tabbable } from "tabbable";
+import { activeElement, getDocument } from "./dom.js";
+
+function getTabbableOptions() {
+	return {
+		getShadowRoot: true,
+		displayCheck:
+			// JSDOM does not support the `tabbable` library. To solve this we can
+			// check if `ResizeObserver` is a real function (not polyfilled), which
+			// determines if the current environment is JSDOM-like.
+			typeof ResizeObserver === "function" &&
+			ResizeObserver.toString().includes("[native code]")
+				? "full"
+				: "none",
+	} as const;
+}
+
+export function getTabbableIn(container: HTMLElement, direction: "next" | "prev") {
+	const allTabbable = tabbable(container, getTabbableOptions());
+
+	if (direction === "prev") {
+		allTabbable.reverse();
+	}
+
+	const activeEl = activeElement(getDocument(container)) as HTMLElement;
+
+	const activeIndex = allTabbable.indexOf(activeEl);
+	const nextTabbableElements = allTabbable.slice(activeIndex + 1);
+	return nextTabbableElements[0];
+}
+
+/**
+ * Gets all tabbable elements in the body and finds the next/previous tabbable element
+ * from the `currentNode` based on the `direction` provided.
+ * @param currentNode - the node we want to get the next/previous tabbable from
+ */
+export function getTabbableFrom(currentNode: HTMLElement, direction: "next" | "prev") {
+	if (!isTabbable(currentNode, getTabbableOptions())) {
+		return getTabbableFromFocusable(currentNode, direction);
+	}
+	const allTabbable = tabbable(getDocument(currentNode).body, getTabbableOptions());
+	if (direction === "prev") allTabbable.reverse();
+	const activeIndex = allTabbable.indexOf(currentNode);
+	if (activeIndex === -1) return document.body;
+	const nextTabbableElements = allTabbable.slice(activeIndex + 1);
+	return nextTabbableElements[0];
+}
+
+export function getTabbableFromFocusable(currentNode: HTMLElement, direction: "next" | "prev") {
+	if (!isFocusable(currentNode, getTabbableOptions())) return document.body;
+
+	// find all focusable nodes, since some elements may be focusable but not tabbable
+	// such as context menu triggers
+	const allFocusable = focusable(getDocument(currentNode).body, getTabbableOptions());
+
+	// find index of current node among focusable siblings
+	if (direction === "prev") allFocusable.reverse();
+	const activeIndex = allFocusable.indexOf(currentNode);
+	if (activeIndex === -1) return document.body;
+
+	const nextFocusableElements = allFocusable.slice(activeIndex + 1);
+
+	// find the next focusable node that is also tabbable
+	return (
+		nextFocusableElements.find((node) => isTabbable(node, getTabbableOptions())) ??
+		document.body
+	);
+}
+
+export function getNextTabbable() {
+	return getTabbableIn(document.body, "next");
+}
+
+export function getPreviousTabbable() {
+	return getTabbableIn(document.body, "prev");
+}

package/src/lib/bits/internal/types.ts

@@ -0,0 +1,91 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type { Snippet } from "svelte";
+
+import type { Box, ReadableBoxedValues, WritableBoxedValues } from "./box.svelte.js";
+import type { StyleProperties } from "$lib/shared/index.js";
+
+export type OnChangeFn<T> = (value: T) => void;
+
+export type ElementRef = Box<HTMLElement | null>;
+
+export type WithChild<
+	/**
+	 * The props that the component accepts.
+	 */
+	Props extends Record<PropertyKey, unknown> = {},
+	/**
+	 * The props that are passed to the `child` and `children` snippets. The `ElementProps` are
+	 * merged with these props for the `child` snippet.
+	 */
+	SnippetProps extends Record<PropertyKey, unknown> = { _default: never },
+	/**
+	 * The underlying DOM element being rendered. You can bind to this prop to
+	 * programmatically interact with the element.
+	 */
+	Ref = HTMLElement,
+> = Omit<Props, "child" | "children"> & {
+	child?: SnippetProps extends { _default: never }
+		? Snippet<[{ props: Record<string, unknown> }]>
+		: Snippet<[SnippetProps & { props: Record<string, unknown> }]>;
+	children?: SnippetProps extends { _default: never } ? Snippet : Snippet<[SnippetProps]>;
+	style?: StyleProperties | string | null | undefined;
+	ref?: Ref | null | undefined;
+};
+
+export type WithChildNoChildrenSnippetProps<
+	/**
+	 * The props that the component accepts.
+	 */
+	Props extends Record<PropertyKey, unknown> = {},
+	/**
+	 * The props that are passed to the `child` and `children` snippets. The `ElementProps` are
+	 * merged with these props for the `child` snippet.
+	 */
+	SnippetProps extends Record<PropertyKey, unknown> = { _default: never },
+	/**
+	 * The underlying DOM element being rendered. You can bind to this prop to
+	 * programmatically interact with the element.
+	 */
+	Ref = HTMLElement,
+> = Omit<Props, "child" | "children"> & {
+	child?: SnippetProps extends { _default: never }
+		? Snippet<[{ props: Record<string, unknown> }]>
+		: Snippet<[SnippetProps & { props: Record<string, unknown> }]>;
+	children?: Snippet;
+	style?: StyleProperties | string | null | undefined;
+	ref?: Ref | null | undefined;
+};
+
+export type WithChildren<Props = {}> = Props & {
+	children?: Snippet | undefined;
+};
+
+/**
+ * Constructs a new type by omitting properties from type
+ * 'T' that exist in type 'U'.
+ *
+ * @template T - The base object type from which properties will be omitted.
+ * @template U - The object type whose properties will be omitted from 'T'.
+ * @example
+ * type Result = Without<{ a: number; b: string; }, { b: string; }>;
+ * // Result type will be { a: number; }
+ */
+export type Without<T extends object, U extends object> = Omit<T, keyof U>;
+
+export type Arrayable<T> = T[] | T;
+
+export type Fn = () => void;
+export type AnyFn = (...args: any[]) => any;
+
+export type WithRefProps<T = {}> = T &
+	ReadableBoxedValues<{ id: string }> &
+	WritableBoxedValues<{ ref: HTMLElement | null }>;
+
+export type BitsEvent<T extends Event = Event, U extends HTMLElement = HTMLElement> = T & {
+	currentTarget: U;
+};
+
+export type BitsPointerEvent<T extends HTMLElement = HTMLElement> = BitsEvent<PointerEvent, T>;
+export type BitsKeyboardEvent<T extends HTMLElement = HTMLElement> = BitsEvent<KeyboardEvent, T>;
+export type BitsMouseEvent<T extends HTMLElement = HTMLElement> = BitsEvent<MouseEvent, T>;
+export type BitsFocusEvent<T extends HTMLElement = HTMLElement> = BitsEvent<FocusEvent, T>;

package/src/lib/bits/internal/use-after-animations.svelte.ts

@@ -0,0 +1,30 @@
+import { flushSync } from "svelte";
+import type { Getter } from "svelte-toolbelt";
+
+/**
+ * Calls a function the next frame after all animations have finished.
+ */
+export function useAfterAnimations(getNode: Getter<HTMLElement | null>) {
+	let frame = -1;
+
+	function cancelFrame() {
+		cancelAnimationFrame(frame);
+	}
+
+	$effect(() => cancelFrame);
+
+	return (fn: () => void) => {
+		cancelFrame();
+		const node = getNode();
+		if (!node) return;
+		if (typeof node.getAnimations !== "function" || globalThis.bitsAnimationsDisabled) {
+			fn();
+		} else {
+			frame = requestAnimationFrame(() => {
+				Promise.allSettled(node.getAnimations().map((anim) => anim.finished)).then(() => {
+					flushSync(fn);
+				});
+			});
+		}
+	};
+}

package/src/lib/bits/internal/use-arrow-navigation.ts

@@ -0,0 +1,168 @@
+import type { Direction } from "$lib/shared/index.js";
+
+type ArrowKeyOptions = "horizontal" | "vertical" | "both";
+
+interface ArrowNavigationOptions {
+	/**
+	 * The arrow key options to allow navigation
+	 *
+	 * @defaultValue "both"
+	 */
+	arrowKeyOptions?: ArrowKeyOptions;
+
+	/**
+	 * The attribute name to find the collection items in the parent element.
+	 */
+	attributeName: string;
+
+	/**
+	 * The parent element where contains all the collection items, this will collect every item to be used when nav
+	 * It will be ignored if attributeName is provided
+	 *
+	 * @defaultValue []
+	 */
+	itemsArray?: HTMLElement[];
+
+	/**
+	 * Allow loop navigation. If false, it will stop at the first and last element
+	 *
+	 * @defaultValue true
+	 */
+	loop?: boolean;
+
+	/**
+	 * The orientation of the collection
+	 *
+	 * @defaultValue "ltr"
+	 */
+	dir?: Direction;
+
+	/**
+	 * Prevent the scroll when navigating. This happens when the direction of the
+	 * key matches the scroll direction of any ancestor scrollable elements.
+	 *
+	 * @defaultValue true
+	 */
+	preventScroll?: boolean;
+
+	/**
+	 * By default all currentElement would trigger navigation. If `true`, currentElement nodeName in the ignore list will return null
+	 *
+	 * @defaultValue false
+	 */
+	enableIgnoredElement?: boolean;
+
+	/**
+	 * Focus the element after navigation
+	 *
+	 * @defaultValue false
+	 */
+	focus?: boolean;
+}
+
+const ignoredElement = ["INPUT", "TEXTAREA"];
+
+/**
+ *
+ * @param e               Keyboard event
+ * @param currentElement  Event initiator element or any element that wants to handle the navigation
+ * @param parentElement   Parent element where contains all the collection items, this will collect every item to be used when nav
+ * @param options         further options
+ * @returns               the navigated html element or null if none
+ */
+export function useArrowNavigation(
+	e: KeyboardEvent,
+	currentElement: HTMLElement,
+	parentElement: HTMLElement | undefined,
+	options: ArrowNavigationOptions
+): HTMLElement | null {
+	if (
+		!currentElement ||
+		(options.enableIgnoredElement && ignoredElement.includes(currentElement.nodeName))
+	) {
+		return null;
+	}
+
+	const {
+		arrowKeyOptions = "both",
+		attributeName,
+		itemsArray = [],
+		loop = true,
+		dir = "ltr",
+		preventScroll = true,
+		focus = false,
+	} = options;
+
+	const [right, left, up, down, home, end] = [
+		e.key === "ArrowRight",
+		e.key === "ArrowLeft",
+		e.key === "ArrowUp",
+		e.key === "ArrowDown",
+		e.key === "Home",
+		e.key === "End",
+	];
+	const goingVertical = up || down;
+	const goingHorizontal = right || left;
+	if (
+		!home &&
+		!end &&
+		((!goingVertical && !goingHorizontal) ||
+			(arrowKeyOptions === "vertical" && goingHorizontal) ||
+			(arrowKeyOptions === "horizontal" && goingVertical))
+	)
+		return null;
+
+	const allCollectionItems: HTMLElement[] = parentElement
+		? Array.from(parentElement.querySelectorAll(attributeName))
+		: itemsArray;
+
+	if (!allCollectionItems.length) return null;
+
+	if (preventScroll) e.preventDefault();
+
+	let item: HTMLElement | null = null;
+
+	if (goingHorizontal || goingVertical) {
+		const goForward = goingVertical ? down : dir === "ltr" ? right : left;
+		item = findNextFocusableElement(allCollectionItems, currentElement, {
+			goForward,
+			loop,
+		});
+	} else if (home) {
+		item = allCollectionItems.at(0) || null;
+	} else if (end) {
+		item = allCollectionItems.at(-1) || null;
+	}
+
+	if (focus) item?.focus();
+
+	return item;
+}
+
+/**
+ * Recursive function to find the next focusable element to avoid disabled elements
+ */
+function findNextFocusableElement(
+	elements: HTMLElement[],
+	currentElement: HTMLElement,
+	{ goForward, loop }: { goForward: boolean; loop?: boolean },
+	iterations = elements.length
+): HTMLElement | null {
+	if (--iterations === 0) return null;
+
+	const index = elements.indexOf(currentElement);
+	const newIndex = goForward ? index + 1 : index - 1;
+
+	if (!loop && (newIndex < 0 || newIndex >= elements.length)) return null;
+
+	const adjustedNewIndex = (newIndex + elements.length) % elements.length;
+	const candidate = elements[adjustedNewIndex];
+	if (!candidate) return null;
+
+	const isDisabled =
+		candidate.hasAttribute("disabled") && candidate.getAttribute("disabled") !== "false";
+	if (isDisabled) {
+		return findNextFocusableElement(elements, candidate, { goForward, loop }, iterations);
+	}
+	return candidate;
+}