@musecat/functionkit 1.0.2 → 1.1.0

package/tests/hooks/useKeyboardListNavigation.test.ts

@@ -1,19 +1,15 @@
-import { describe, test, expect, vi } from "vitest";
-import { renderHook, act } from "@testing-library/react";
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
 import { useKeyboardListNavigation } from "@/packages/hooks/useKeyboardListNavigation";
 
 describe("useKeyboardListNavigation", () => {
 	test("initializes with activeIndex -1", () => {
-		const { result } = renderHook(() =>
-			useKeyboardListNavigation({ itemCount: 3 }),
-		);
+		const { result } = renderHook(() => useKeyboardListNavigation({ itemCount: 3 }));
 		expect(result.current.activeIndex).toBe(-1);
 	});
 
 	test("handleListKeyDown with ArrowDown moves to first item when none active", () => {
-		const { result } = renderHook(() =>
-			useKeyboardListNavigation({ itemCount: 3 }),
-		);
+		const { result } = renderHook(() => useKeyboardListNavigation({ itemCount: 3 }));
 
 		const container = document.createElement("div");
 		const items = [0, 1, 2].map(() => {
@@ -32,14 +28,14 @@ describe("useKeyboardListNavigation", () => {
 			target: container,
 		} as unknown as React.KeyboardEvent<HTMLElement>;
 
-		act(() => { result.current.handleListKeyDown(event); });
+		act(() => {
+			result.current.handleListKeyDown(event);
+		});
 		expect(result.current.activeIndex).toBe(0);
 	});
 
 	test("handleListKeyDown with ArrowUp moves to previous item", () => {
-		const { result } = renderHook(() =>
-			useKeyboardListNavigation({ itemCount: 3 }),
-		);
+		const { result } = renderHook(() => useKeyboardListNavigation({ itemCount: 3 }));
 
 		const container = document.createElement("div");
 		const items = [0, 1, 2].map(() => {
@@ -50,7 +46,9 @@ describe("useKeyboardListNavigation", () => {
 			return el;
 		});
 		items.forEach((el, i) => result.current.setItemRef(i, el));
-		act(() => { result.current.setActiveIndex(1); });
+		act(() => {
+			result.current.setActiveIndex(1);
+		});
 
 		const event = {
 			key: "ArrowUp",
@@ -59,14 +57,336 @@ describe("useKeyboardListNavigation", () => {
 			target: container,
 		} as unknown as React.KeyboardEvent<HTMLElement>;
 
-		act(() => { result.current.handleListKeyDown(event); });
+		act(() => {
+			result.current.handleListKeyDown(event);
+		});
 		expect(result.current.activeIndex).toBe(0);
 	});
 
+	test("ArrowDown moves to next item when one is active", () => {
+		const { result } = renderHook(() => useKeyboardListNavigation({ itemCount: 3 }));
+
+		const container = document.createElement("div");
+		const items = [0, 1, 2].map(() => {
+			const el = document.createElement("div");
+			el.setAttribute("tabindex", "-1");
+			el.scrollIntoView = vi.fn();
+			container.appendChild(el);
+			return el;
+		});
+		items.forEach((el, i) => result.current.setItemRef(i, el));
+		act(() => {
+			result.current.setActiveIndex(0);
+		});
+
+		const event = {
+			key: "ArrowDown",
+			defaultPrevented: false,
+			preventDefault: vi.fn(),
+			target: container,
+		} as unknown as React.KeyboardEvent<HTMLElement>;
+
+		act(() => {
+			result.current.handleListKeyDown(event);
+		});
+		expect(result.current.activeIndex).toBe(1);
+	});
+
+	test("ArrowUp with no active index goes to last item", () => {
+		const { result } = renderHook(() => useKeyboardListNavigation({ itemCount: 3 }));
+
+		const container = document.createElement("div");
+		const items = [0, 1, 2].map(() => {
+			const el = document.createElement("div");
+			el.setAttribute("tabindex", "-1");
+			el.scrollIntoView = vi.fn();
+			container.appendChild(el);
+			return el;
+		});
+		items.forEach((el, i) => result.current.setItemRef(i, el));
+
+		const event = {
+			key: "ArrowUp",
+			defaultPrevented: false,
+			preventDefault: vi.fn(),
+			target: container,
+		} as unknown as React.KeyboardEvent<HTMLElement>;
+
+		act(() => {
+			result.current.handleListKeyDown(event);
+		});
+		expect(result.current.activeIndex).toBe(2);
+	});
+
+	test("unrecognized key passes preventDefault and falls through", () => {
+		const { result } = renderHook(() => useKeyboardListNavigation({ itemCount: 3 }));
+
+		const container = document.createElement("div");
+		const input = document.createElement("input");
+		container.appendChild(input);
+
+		const event = {
+			key: "Tab",
+			defaultPrevented: false,
+			preventDefault: vi.fn(),
+			target: container,
+		} as unknown as React.KeyboardEvent<HTMLElement>;
+
+		act(() => {
+			result.current.handleListKeyDown(event);
+		});
+		expect(event.preventDefault).not.toHaveBeenCalled();
+	});
+
+	test("clickActiveItem returns false when no active index", () => {
+		const { result } = renderHook(() => useKeyboardListNavigation({ itemCount: 3 }));
+		expect(result.current.clickActiveItem()).toBe(false);
+	});
+
+	test("focusBoundaryItem returns false when itemCount is 0", () => {
+		const { result } = renderHook(() => useKeyboardListNavigation({ itemCount: 0 }));
+		expect(result.current.focusBoundaryItem("ArrowDown")).toBe(false);
+	});
+
+	test("focusBoundaryItem returns false for unmatched key", () => {
+		const { result } = renderHook(() => useKeyboardListNavigation({ itemCount: 3 }));
+		expect(result.current.focusBoundaryItem("Tab")).toBe(false);
+	});
+
+	test("focusBoundaryItem returns false when target ref is missing", () => {
+		const { result } = renderHook(() => useKeyboardListNavigation({ itemCount: 3 }));
+		expect(result.current.focusBoundaryItem("ArrowDown")).toBe(false);
+	});
+
+	test("focusBoundaryItem returns true for Home through moveActiveItem fallthrough", () => {
+		const { result } = renderHook(() => useKeyboardListNavigation({ itemCount: 3 }));
+		const item0 = document.createElement("div");
+		item0.setAttribute("tabindex", "-1");
+		item0.focus = vi.fn();
+		item0.scrollIntoView = vi.fn();
+		result.current.setItemRef(0, item0);
+
+		const event = {
+			key: "Home",
+			defaultPrevented: false,
+			preventDefault: vi.fn(),
+			target: document.createElement("div"),
+		} as unknown as React.KeyboardEvent<HTMLElement>;
+
+		act(() => {
+			result.current.handleListKeyDown(event);
+		});
+		expect(result.current.activeIndex).toBe(0);
+	});
+
+	test("handleListKeyDown with null target returns early", () => {
+		const { result } = renderHook(() => useKeyboardListNavigation({ itemCount: 3 }));
+
+		const event = {
+			key: "ArrowDown",
+			defaultPrevented: false,
+			preventDefault: vi.fn(),
+			target: null,
+		} as unknown as React.KeyboardEvent<HTMLElement>;
+
+		act(() => {
+			result.current.handleListKeyDown(event);
+		});
+		expect(result.current.activeIndex).toBe(-1);
+	});
+
+	test("Enter key on active item calls clickActiveItem", () => {
+		const { result } = renderHook(() => useKeyboardListNavigation({ itemCount: 3 }));
+
+		const container = document.createElement("div");
+		const items = [0, 1, 2].map(() => {
+			const el = document.createElement("div");
+			el.setAttribute("tabindex", "-1");
+			el.scrollIntoView = vi.fn();
+			el.click = vi.fn();
+			container.appendChild(el);
+			return el;
+		});
+		items.forEach((el, i) => result.current.setItemRef(i, el));
+
+		act(() => {
+			result.current.setActiveIndex(1);
+		});
+
+		const event = {
+			key: "Enter",
+			defaultPrevented: false,
+			preventDefault: vi.fn(),
+			target: container,
+		} as unknown as React.KeyboardEvent<HTMLElement>;
+
+		act(() => {
+			result.current.handleListKeyDown(event);
+		});
+		expect(items[1].click).toHaveBeenCalledOnce();
+	});
+
+	test("Space key on active item calls clickActiveItem", () => {
+		const { result } = renderHook(() => useKeyboardListNavigation({ itemCount: 3 }));
+
+		const container = document.createElement("div");
+		const items = [0, 1, 2].map(() => {
+			const el = document.createElement("div");
+			el.setAttribute("tabindex", "-1");
+			el.scrollIntoView = vi.fn();
+			el.click = vi.fn();
+			container.appendChild(el);
+			return el;
+		});
+		items.forEach((el, i) => result.current.setItemRef(i, el));
+
+		act(() => {
+			result.current.setActiveIndex(1);
+		});
+
+		const event = {
+			key: " ",
+			defaultPrevented: false,
+			preventDefault: vi.fn(),
+			target: container,
+		} as unknown as React.KeyboardEvent<HTMLElement>;
+
+		act(() => {
+			result.current.handleListKeyDown(event);
+		});
+		expect(items[1].click).toHaveBeenCalledOnce();
+	});
+
+	test("Home key focuses first item when no active index", () => {
+		const { result } = renderHook(() => useKeyboardListNavigation({ itemCount: 3 }));
+
+		const container = document.createElement("div");
+		const item0 = document.createElement("div");
+		item0.setAttribute("tabindex", "-1");
+		item0.scrollIntoView = vi.fn();
+		item0.focus = vi.fn();
+		container.appendChild(item0);
+		result.current.setItemRef(0, item0);
+
+		const event = {
+			key: "Home",
+			defaultPrevented: false,
+			preventDefault: vi.fn(),
+			target: container,
+		} as unknown as React.KeyboardEvent<HTMLElement>;
+
+		act(() => {
+			result.current.handleListKeyDown(event);
+		});
+		expect(result.current.activeIndex).toBe(0);
+	});
+
+	test("returns early when itemCount is 0", () => {
+		const { result } = renderHook(() => useKeyboardListNavigation({ itemCount: 0 }));
+
+		const event = {
+			key: "ArrowDown",
+			defaultPrevented: false,
+			preventDefault: vi.fn(),
+			target: document.createElement("div"),
+		} as unknown as React.KeyboardEvent<HTMLElement>;
+
+		act(() => {
+			result.current.handleListKeyDown(event);
+		});
+		expect(result.current.activeIndex).toBe(-1);
+	});
+
+	test("returns early when event is defaultPrevented", () => {
+		const { result } = renderHook(() => useKeyboardListNavigation({ itemCount: 3 }));
+
+		const event = {
+			key: "ArrowDown",
+			defaultPrevented: true,
+			preventDefault: vi.fn(),
+			target: document.createElement("div"),
+		} as unknown as React.KeyboardEvent<HTMLElement>;
+
+		act(() => {
+			result.current.handleListKeyDown(event);
+		});
+		expect(result.current.activeIndex).toBe(-1);
+	});
+
+	test("ignores events on editable target", () => {
+		const { result } = renderHook(() => useKeyboardListNavigation({ itemCount: 3 }));
+
+		const container = document.createElement("div");
+		const input = document.createElement("input");
+		container.appendChild(input);
+
+		const event = {
+			key: "ArrowDown",
+			defaultPrevented: false,
+			preventDefault: vi.fn(),
+			target: input,
+		} as unknown as React.KeyboardEvent<HTMLElement>;
+
+		act(() => {
+			result.current.handleListKeyDown(event);
+		});
+		expect(result.current.activeIndex).toBe(-1);
+	});
+
+	test("ignores events outside container", () => {
+		const { result } = renderHook(() => useKeyboardListNavigation({ itemCount: 3 }));
+
+		const container = document.createElement("div");
+		const outside = document.createElement("div");
+		document.body.appendChild(outside);
+
+		const event = {
+			key: "ArrowDown",
+			defaultPrevented: false,
+			preventDefault: vi.fn(),
+			target: outside,
+		} as unknown as React.KeyboardEvent<HTMLElement>;
+
+		act(() => {
+			result.current.handleListKeyDown(event, { container });
+		});
+		expect(result.current.activeIndex).toBe(-1);
+	});
+
+	test("End key focuses last item via focusBoundaryItem", () => {
+		const { result } = renderHook(() => useKeyboardListNavigation({ itemCount: 3 }));
+
+		const container = document.createElement("div");
+		const items = [0, 1, 2].map(() => {
+			const el = document.createElement("div");
+			el.setAttribute("tabindex", "-1");
+			el.scrollIntoView = vi.fn();
+			el.focus = vi.fn();
+			container.appendChild(el);
+			return el;
+		});
+		items.forEach((el, i) => result.current.setItemRef(i, el));
+
+		// Set activeIndex to 0 so ArrowUp falls through to focusBoundaryItem
+		act(() => {
+			result.current.setActiveIndex(0);
+		});
+
+		const event = {
+			key: "End",
+			defaultPrevented: false,
+			preventDefault: vi.fn(),
+			target: container,
+		} as unknown as React.KeyboardEvent<HTMLElement>;
+
+		act(() => {
+			result.current.handleListKeyDown(event);
+		});
+		expect(result.current.activeIndex).toBe(2);
+	});
+
 	test("Escape resets activeIndex to -1", () => {
-		const { result } = renderHook(() =>
-			useKeyboardListNavigation({ itemCount: 3 }),
-		);
+		const { result } = renderHook(() => useKeyboardListNavigation({ itemCount: 3 }));
 
 		const event = {
 			key: "Escape",
@@ -76,7 +396,9 @@ describe("useKeyboardListNavigation", () => {
 		} as unknown as React.KeyboardEvent<HTMLElement>;
 
 		result.current.setActiveIndex(1);
-		act(() => { result.current.handleListKeyDown(event); });
+		act(() => {
+			result.current.handleListKeyDown(event);
+		});
 		expect(result.current.activeIndex).toBe(-1);
 	});
 });

package/tests/hooks/useLongPress.test.ts

@@ -1,26 +1,45 @@
-import { describe, test, expect, vi, beforeEach, afterEach } from "vitest";
-import { renderHook, act } from "@testing-library/react";
+import { act, renderHook } from "@testing-library/react";
 import type React from "react";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import { useLongPress } from "@/packages/hooks/useLongPress";
 
-function createMouseEvent(type: string): React.MouseEvent<HTMLElement> {
+function createMouseEvent(
+	type: string,
+	overrides?: Partial<MouseEventInit>,
+): React.MouseEvent<HTMLElement> {
 	return {
 		type,
-		nativeEvent: new MouseEvent(type, { clientX: 0, clientY: 0 }),
-		clientX: 0,
-		clientY: 0,
+		nativeEvent: new MouseEvent(type, { clientX: 0, clientY: 0, ...overrides }),
+		clientX: overrides?.clientX ?? 0,
+		clientY: overrides?.clientY ?? 0,
 	} as unknown as React.MouseEvent<HTMLElement>;
 }
 
+function createTouchEvent(type: string): React.TouchEvent<HTMLElement> {
+	return {
+		type,
+		nativeEvent: new TouchEvent(type, {
+			touches: [{ clientX: 0, clientY: 0 } as Touch],
+			changedTouches: [{ clientX: 0, clientY: 0 } as Touch],
+		}),
+	} as unknown as React.TouchEvent<HTMLElement>;
+}
+
 describe("useLongPress", () => {
-	beforeEach(() => { vi.useFakeTimers(); });
-	afterEach(() => { vi.useRealTimers(); });
+	beforeEach(() => {
+		vi.useFakeTimers();
+	});
+	afterEach(() => {
+		vi.useRealTimers();
+	});
 
 	test("fires onLongPress after delay", () => {
 		const onLongPress = vi.fn();
 		const { result } = renderHook(() => useLongPress(onLongPress, { delay: 200 }));
 
-		act(() => { result.current.onMouseDown(createMouseEvent("mousedown")); });
+		act(() => {
+			result.current.onMouseDown(createMouseEvent("mousedown"));
+		});
 		expect(onLongPress).not.toHaveBeenCalled();
 		vi.advanceTimersByTime(200);
 		expect(onLongPress).toHaveBeenCalledOnce();
@@ -29,24 +48,167 @@ describe("useLongPress", () => {
 	test("fires onClick when released before delay", () => {
 		const onLongPress = vi.fn();
 		const onClick = vi.fn();
+		const { result } = renderHook(() => useLongPress(onLongPress, { delay: 200, onClick }));
+
+		act(() => {
+			result.current.onMouseDown(createMouseEvent("mousedown"));
+		});
+		act(() => {
+			result.current.onMouseUp(createMouseEvent("mouseup"));
+		});
+		vi.advanceTimersByTime(200);
+		expect(onLongPress).not.toHaveBeenCalled();
+		expect(onClick).toHaveBeenCalledOnce();
+	});
+
+	test("no click callback fires when released before delay without onClick handler", () => {
+		const onLongPress = vi.fn();
+		const { result } = renderHook(() => useLongPress(onLongPress, { delay: 200 }));
+
+		act(() => {
+			result.current.onMouseDown(createMouseEvent("mousedown"));
+		});
+		act(() => {
+			result.current.onMouseUp(createMouseEvent("mouseup"));
+		});
+		vi.advanceTimersByTime(200);
+		expect(onLongPress).not.toHaveBeenCalled();
+	});
+
+	test("uses mouse position without touches for getClientPosition", () => {
+		const onLongPress = vi.fn();
 		const { result } = renderHook(() =>
-			useLongPress(onLongPress, { delay: 200, onClick }),
+			useLongPress(onLongPress, { delay: 200, moveThreshold: { x: 50 } }),
 		);
 
-		act(() => { result.current.onMouseDown(createMouseEvent("mousedown")); });
-		act(() => { result.current.onMouseUp(createMouseEvent("mouseup")); });
+		act(() => {
+			result.current.onMouseDown(createMouseEvent("mousedown", { clientX: 100, clientY: 200 }));
+		});
+		vi.advanceTimersByTime(50);
+		// Move less than threshold — should not cancel
+		act(() => {
+			result.current.onMouseMove(createMouseEvent("mousemove", { clientX: 110, clientY: 200 }));
+		});
+		vi.advanceTimersByTime(150);
+		expect(onLongPress).toHaveBeenCalledOnce();
+	});
+
+	test("fires onLongPressEnd when released after long press", () => {
+		const onLongPress = vi.fn();
+		const onLongPressEnd = vi.fn();
+		const { result } = renderHook(() => useLongPress(onLongPress, { delay: 200, onLongPressEnd }));
+
+		act(() => {
+			result.current.onMouseDown(createMouseEvent("mousedown"));
+		});
+		vi.advanceTimersByTime(200);
+		expect(onLongPress).toHaveBeenCalledOnce();
+
+		act(() => {
+			result.current.onMouseUp(createMouseEvent("mouseup"));
+		});
+		expect(onLongPressEnd).toHaveBeenCalledOnce();
+	});
+
+	test("cancels long press when moved beyond threshold (x)", () => {
+		const onLongPress = vi.fn();
+		const { result } = renderHook(() =>
+			useLongPress(onLongPress, {
+				delay: 200,
+				moveThreshold: { x: 10 },
+			}),
+		);
+
+		act(() => {
+			result.current.onMouseDown(createMouseEvent("mousedown"));
+		});
+		act(() => {
+			result.current.onMouseMove(createMouseEvent("mousemove", { clientX: 30, clientY: 0 }));
+		});
+		vi.advanceTimersByTime(200);
+		expect(onLongPress).not.toHaveBeenCalled();
+	});
+
+	test("cancels long press when moved beyond threshold (y)", () => {
+		const onLongPress = vi.fn();
+		const { result } = renderHook(() =>
+			useLongPress(onLongPress, {
+				delay: 200,
+				moveThreshold: { y: 10 },
+			}),
+		);
+
+		act(() => {
+			result.current.onMouseDown(createMouseEvent("mousedown"));
+		});
+		act(() => {
+			result.current.onMouseMove(createMouseEvent("mousemove", { clientX: 0, clientY: 30 }));
+		});
 		vi.advanceTimersByTime(200);
 		expect(onLongPress).not.toHaveBeenCalled();
-		expect(onClick).toHaveBeenCalledOnce();
+	});
+
+	test("does not cancel when moved within threshold", () => {
+		const onLongPress = vi.fn();
+		const { result } = renderHook(() =>
+			useLongPress(onLongPress, {
+				delay: 200,
+				moveThreshold: { x: 50, y: 50 },
+			}),
+		);
+
+		act(() => {
+			result.current.onMouseDown(createMouseEvent("mousedown"));
+		});
+		act(() => {
+			result.current.onMouseMove(createMouseEvent("mousemove", { clientX: 20, clientY: 20 }));
+		});
+		vi.advanceTimersByTime(200);
+		expect(onLongPress).toHaveBeenCalledOnce();
+	});
+
+	test("works with touch events", () => {
+		const onLongPress = vi.fn();
+		const { result } = renderHook(() => useLongPress(onLongPress, { delay: 200 }));
+
+		act(() => {
+			result.current.onTouchStart(createTouchEvent("touchstart"));
+		});
+		vi.advanceTimersByTime(200);
+		expect(onLongPress).toHaveBeenCalledOnce();
+
+		act(() => {
+			result.current.onTouchEnd(createTouchEvent("touchend"));
+		});
 	});
 
 	test("cancels on mouse leave", () => {
 		const onLongPress = vi.fn();
 		const { result } = renderHook(() => useLongPress(onLongPress, { delay: 200 }));
 
-		act(() => { result.current.onMouseDown(createMouseEvent("mousedown")); });
-		act(() => { result.current.onMouseLeave(createMouseEvent("mouseleave")); });
+		act(() => {
+			result.current.onMouseDown(createMouseEvent("mousedown"));
+		});
+		act(() => {
+			result.current.onMouseLeave(createMouseEvent("mouseleave"));
+		});
 		vi.advanceTimersByTime(200);
 		expect(onLongPress).not.toHaveBeenCalled();
 	});
+
+	test("mouse up after mouse leave does not fire onClick (timeout already cleared)", () => {
+		const onClick = vi.fn();
+		const { result } = renderHook(() => useLongPress(() => {}, { delay: 200, onClick }));
+
+		act(() => {
+			result.current.onMouseDown(createMouseEvent("mousedown"));
+		});
+		act(() => {
+			result.current.onMouseLeave(createMouseEvent("mouseleave"));
+		});
+		act(() => {
+			result.current.onMouseUp(createMouseEvent("mouseup"));
+		});
+		expect(onClick).not.toHaveBeenCalled();
+	});
 });

package/tests/hooks/usePreservedCallback.test.ts

@@ -1,13 +1,12 @@
-import { describe, test, expect, vi } from "vitest";
 import { renderHook } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
 import { usePreservedCallback } from "@/packages/hooks/usePreservedCallback";
 
 describe("usePreservedCallback", () => {
 	test("returns a stable function reference across renders", () => {
-		const { result, rerender } = renderHook(
-			({ cb }) => usePreservedCallback(cb),
-			{ initialProps: { cb: vi.fn() } },
-		);
+		const { result, rerender } = renderHook(({ cb }) => usePreservedCallback(cb), {
+			initialProps: { cb: vi.fn() },
+		});
 		const firstRef = result.current;
 		rerender({ cb: vi.fn() });
 		expect(result.current).toBe(firstRef);
@@ -16,10 +15,9 @@ describe("usePreservedCallback", () => {
 	test("invokes the latest callback", () => {
 		const fn1 = vi.fn();
 		const fn2 = vi.fn();
-		const { result, rerender } = renderHook(
-			({ cb }) => usePreservedCallback(cb),
-			{ initialProps: { cb: fn1 } },
-		);
+		const { result, rerender } = renderHook(({ cb }) => usePreservedCallback(cb), {
+			initialProps: { cb: fn1 },
+		});
 		rerender({ cb: fn2 });
 		result.current();
 		expect(fn2).toHaveBeenCalledOnce();