@musecat/functionkit 1.0.2 → 1.1.0

package/packages/hooks/useKeyboardListNavigation.ts

@@ -10,18 +10,13 @@ type UseKeyboardListNavigationOptions = {
 	itemCount: number;
 };
 
-export function useKeyboardListNavigation({
-	itemCount,
-}: UseKeyboardListNavigationOptions) {
+export function useKeyboardListNavigation({ itemCount }: UseKeyboardListNavigationOptions) {
 	const [activeIndex, setActiveIndex] = useState(-1);
 	const itemRefs = useRef<(HTMLElement | null)[]>([]);
 
-	const setItemRef = useCallback(
-		(index: number, element: HTMLElement | null) => {
-			itemRefs.current[index] = element;
-		},
-		[],
-	);
+	const setItemRef = useCallback((index: number, element: HTMLElement | null) => {
+		itemRefs.current[index] = element;
+	}, []);
 
 	const focusItem = useCallback((index: number) => {
 		const target = itemRefs.current[index];
@@ -59,18 +54,6 @@ export function useKeyboardListNavigation({
 
 	const moveActiveItem = useCallback(
 		(key: string) => {
-			if (itemCount === 0) {
-				return false;
-			}
-
-			if (key === "Home") {
-				return focusItem(0);
-			}
-
-			if (key === "End") {
-				return focusItem(itemCount - 1);
-			}
-
 			if (key === "ArrowDown" || key === "ArrowRight") {
 				const nextIndex = activeIndex < 0 ? 0 : (activeIndex + 1) % itemCount;
 				return focusItem(nextIndex);
@@ -78,15 +61,13 @@ export function useKeyboardListNavigation({
 
 			if (key === "ArrowUp" || key === "ArrowLeft") {
 				const nextIndex =
-					activeIndex < 0
-						? itemCount - 1
-						: (activeIndex - 1 + itemCount) % itemCount;
+					activeIndex < 0 ? itemCount - 1 : (activeIndex - 1 + itemCount) % itemCount;
 				return focusItem(nextIndex);
 			}
 
-			return false;
+			return focusBoundaryItem(key);
 		},
-		[activeIndex, focusItem, itemCount],
+		[activeIndex, focusItem, focusBoundaryItem, itemCount],
 	);
 
 	const clickActiveItem = useCallback(() => {
@@ -99,10 +80,7 @@ export function useKeyboardListNavigation({
 	}, [activeIndex]);
 
 	const handleListKeyDown = useCallback(
-		(
-			event: React.KeyboardEvent<HTMLElement>,
-			options?: { container?: HTMLElement | null },
-		) => {
+		(event: React.KeyboardEvent<HTMLElement>, options?: { container?: HTMLElement | null }) => {
 			if (itemCount === 0 || event.defaultPrevented) {
 				return;
 			}
@@ -144,15 +122,9 @@ export function useKeyboardListNavigation({
 				return;
 			}
 
-			if (moveActiveItem(event.key)) {
-				return;
-			}
-
-			if (focusBoundaryItem(event.key)) {
-				return;
-			}
+			moveActiveItem(event.key);
 		},
-		[clickActiveItem, moveActiveItem, focusBoundaryItem, itemCount],
+		[clickActiveItem, moveActiveItem, itemCount],
 	);
 
 	useEffect(() => {

package/packages/hooks/useLongPress.ts

@@ -14,12 +14,7 @@ export type UseLongPressOptions<E extends HTMLElement> = {
 
 export function useLongPress<E extends HTMLElement = HTMLElement>(
 	onLongPress: (event: MouseEvent<E> | TouchEvent<E>) => void,
-	{
-		delay = 500,
-		moveThreshold,
-		onClick,
-		onLongPressEnd,
-	}: UseLongPressOptions<E> = {},
+	{ delay = 500, moveThreshold, onClick, onLongPressEnd }: UseLongPressOptions<E> = {},
 ) {
 	const timeoutRef = useRef<number | null>(null);
 	const isLongPressActiveRef = useRef(false);
@@ -32,22 +27,18 @@ export function useLongPress<E extends HTMLElement = HTMLElement>(
 	savedOnClick.current = onClick;
 	savedOnLongPressEnd.current = onLongPressEnd;
 
-	const hasThreshold =
-		moveThreshold?.x !== undefined || moveThreshold?.y !== undefined;
+	const hasThreshold = moveThreshold?.x !== undefined || moveThreshold?.y !== undefined;
 
-	const getClientPosition = useCallback(
-		(event: MouseEvent<E> | TouchEvent<E>) => {
-			if ("touches" in event.nativeEvent) {
-				const touch = event.nativeEvent.touches[0];
-				return { x: touch.clientX, y: touch.clientY };
-			}
-			return {
-				x: event.nativeEvent.clientX,
-				y: event.nativeEvent.clientY,
-			};
-		},
-		[],
-	);
+	const getClientPosition = useCallback((event: MouseEvent<E> | TouchEvent<E>) => {
+		if ("touches" in event.nativeEvent) {
+			const touch = event.nativeEvent.touches[0];
+			return { x: touch.clientX, y: touch.clientY };
+		}
+		return {
+			x: event.nativeEvent.clientX,
+			y: event.nativeEvent.clientY,
+		};
+	}, []);
 
 	const isMovedBeyondThreshold = useCallback(
 		(event: MouseEvent<E> | TouchEvent<E>) => {
@@ -113,8 +104,6 @@ export function useLongPress<E extends HTMLElement = HTMLElement>(
 		onMouseLeave: cancelLongPress,
 		onTouchStart: handlePressStart,
 		onTouchEnd: handlePressEnd,
-		...(hasThreshold
-			? { onTouchMove: handlePressMove, onMouseMove: handlePressMove }
-			: {}),
+		...(hasThreshold ? { onTouchMove: handlePressMove, onMouseMove: handlePressMove } : {}),
 	};
 }

package/packages/hooks/useRelativeDateTime.ts

@@ -12,10 +12,7 @@ type UseRelativeDateTimeOptions = {
 	updateIntervalMs?: number;
 };
 
-export function useRelativeDateTime(
-	value: DateInput,
-	options?: UseRelativeDateTimeOptions,
-) {
+export function useRelativeDateTime(value: DateInput, options?: UseRelativeDateTimeOptions) {
 	const [ready, setReady] = useState(false);
 	const [text, setText] = useState("");
 	const [isRelative, setIsRelative] = useState(false);

package/packages/hooks/useViewportHeight.ts

@@ -6,8 +6,7 @@ export function useViewportHeight() {
 	const [height, setHeight] = useState(0);
 
 	useEffect(() => {
-		const update = () =>
-			setHeight(window.visualViewport?.height ?? window.innerHeight);
+		const update = () => setHeight(window.visualViewport?.height ?? window.innerHeight);
 
 		update();
 		window.visualViewport?.addEventListener("resize", update);

package/packages/hooks/useViewportMatch.ts

@@ -6,10 +6,6 @@ export function useViewportMatch(mediaQuery: string): boolean {
 	const [isMatched, setIsMatched] = useState(false);
 
 	useEffect(() => {
-		if (typeof window === "undefined") {
-			return;
-		}
-
 		const mediaQueryList = window.matchMedia(mediaQuery);
 		const syncMatchState = () => {
 			setIsMatched(mediaQueryList.matches);

package/packages/utils/buildContext.tsx

@@ -1,13 +1,12 @@
 "use client";
 
-import { createContext, type ReactNode, useContext, useMemo } from "react";
+import { createContext, type ReactNode, useContext } from "react";
 
 export function buildContext<T>(defaultValue: T) {
 	const Ctx = createContext<T>(defaultValue);
 
 	function Provider({ value, children }: { value: T; children: ReactNode }) {
-		const stable = useMemo(() => value, [value]);
-		return <Ctx.Provider value={stable}>{children}</Ctx.Provider>;
+		return <Ctx.Provider value={value}>{children}</Ctx.Provider>;
 	}
 
 	function useValue() {

package/packages/utils/floatingMotion.ts

@@ -1,8 +1,4 @@
-export type FloatingMotionMode =
-	| "anchored"
-	| "center-selected"
-	| "modal-center"
-	| "mobile-sheet";
+export type FloatingMotionMode = "anchored" | "center-selected" | "modal-center" | "mobile-sheet";
 
 export type FloatingPlacement =
 	| "top-left"
@@ -21,9 +17,7 @@ export interface FloatingMotionPreset {
 	ease: string;
 }
 
-export const getFloatingMotionPreset = (
-	mode: FloatingMotionMode,
-): FloatingMotionPreset => {
+export const getFloatingMotionPreset = (mode: FloatingMotionMode): FloatingMotionPreset => {
 	if (mode === "mobile-sheet") {
 		return {
 			enterMs: 360,
@@ -55,15 +49,20 @@ export const getFloatingMotionPreset = (
 	};
 };
 
+type FloatingRow = "top" | "middle" | "bottom";
+type FloatingCol = "left" | "center" | "right";
+
+function parsePlacement(placement: FloatingPlacement): [FloatingRow, FloatingCol] {
+	const [row, col] = placement.split("-") as [FloatingRow, FloatingCol];
+	return [row, col];
+}
+
 export const getFloatingTransformOrigin = (
 	placement?: FloatingPlacement,
 ): string => {
 	if (!placement) return "top center";
 
-	const [row, col] = placement.split("-") as [
-		"top" | "middle" | "bottom",
-		"left" | "center" | "right",
-	];
+	const [row, col] = parsePlacement(placement);
 	const y = row === "top" ? "bottom" : row === "bottom" ? "top" : "center";
 	const x = col === "right" ? "right" : col === "left" ? "left" : "center";
 
@@ -82,18 +81,13 @@ export const getFloatingHiddenTransform = ({
 	if (mode === "center-selected") return "translateY(.45rem) scale(.99)";
 	if (!placement) return "translateY(.4rem) scale(.975)";
 
-	const [row, col] = placement.split("-") as [
-		"top" | "middle" | "bottom",
-		"left" | "center" | "right",
-	];
+	const [row, col] = parsePlacement(placement);
 
 	if (row === "top") return "translateY(.4rem) scale(.975)";
 	if (row === "bottom") return "translateY(-.4rem) scale(.975)";
 
-	if (row === "middle") {
-		if (col === "left") return "translateX(.4rem) scale(.975)";
-		if (col === "right") return "translateX(-.4rem) scale(.975)";
-	}
+	if (col === "left") return "translateX(.4rem) scale(.975)";
+	if (col === "right") return "translateX(-.4rem) scale(.975)";
 
 	return "translateY(.4rem) scale(.975)";
 };

package/packages/utils/subscribeKeyboardHeight.ts

@@ -12,6 +12,7 @@ export function subscribeKeyboardHeight({
 	throttleMs = 16,
 }: SubscribeKeyboardHeightOptions) {
 	let ticking = false;
+	let disposed = false;
 	let lastHeight = 0;
 
 	const notify = (height: number) => {
@@ -19,6 +20,7 @@ export function subscribeKeyboardHeight({
 		ticking = true;
 
 		const run = () => {
+			if (disposed) return;
 			if (height !== lastHeight) {
 				lastHeight = height;
 				callback(height);
@@ -47,6 +49,7 @@ export function subscribeKeyboardHeight({
 
 	return {
 		unsubscribe() {
+			disposed = true;
 			window.visualViewport?.removeEventListener("resize", handleResize);
 			window.visualViewport?.removeEventListener("scroll", handleResize);
 		},

package/tests/components/ScrolltoTop.test.tsx

@@ -1,5 +1,5 @@
-import { describe, test, expect, vi } from "vitest";
 import { render } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
 import { ScrolltoTop } from "@/packages/components/ScrolltoTop";
 
 describe("ScrolltoTop", () => {

package/tests/components/SwitchCase.test.tsx

@@ -1,7 +1,6 @@
-import { describe, test, expect } from "vitest";
 import { render } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
 import { SwitchCase } from "@/packages/components/SwitchCase";
-import React from "react";
 
 describe("SwitchCase", () => {
 	const cases = {

package/tests/components/ViewportPortal.test.tsx

@@ -1,10 +1,6 @@
-import { describe, test, expect, beforeEach } from "vitest";
 import { render, screen } from "@testing-library/react";
-import {
-	ViewportPortal,
-	getViewportPortalRoot,
-} from "@/packages/components/ViewportPortal";
-import React from "react";
+import { beforeEach, describe, expect, test } from "vitest";
+import { getViewportPortalRoot, ViewportPortal } from "@/packages/components/ViewportPortal";
 
 describe("ViewportPortal", () => {
 	beforeEach(() => {
@@ -25,6 +21,14 @@ describe("ViewportPortal", () => {
 		expect(document.querySelectorAll("#viewport-portal-root").length).toBe(1);
 	});
 
+	test("getViewportPortalRoot returns null when document is undefined (SSR)", () => {
+		const origDocument = global.document;
+		// @ts-expect-error
+		delete global.document;
+		expect(getViewportPortalRoot()).toBeNull();
+		global.document = origDocument;
+	});
+
 	test("ViewportPortal renders children into the portal root", () => {
 		render(
 			<ViewportPortal>

package/tests/cookie/cookie.test.ts

@@ -1,11 +1,11 @@
-import { describe, test, expect, beforeEach, vi, afterEach } from "vitest";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
 import {
-	parseClientCookieNames,
+	clearAllClientCookies,
+	clearClientCookie,
 	getClientCookie,
 	setClientCookie,
-	clearClientCookie,
-	clearAllClientCookies,
 } from "@/packages/cookie/cookie.shared";
+import { parseClientCookieNames } from "@/packages/cookie/cookieNames.shared";
 
 describe("cookie module", () => {
 	beforeEach(() => {
@@ -44,6 +44,11 @@ describe("cookie module", () => {
 			expect(getClientCookie("baz")).toBe("qux");
 		});
 
+		test("skips cookies with empty name when parsing", () => {
+			document.cookie = "=value; foo=bar";
+			expect(getClientCookie("foo")).toBe("bar");
+		});
+
 		test("returns undefined if cookie does not exist", () => {
 			document.cookie = "foo=bar";
 			expect(getClientCookie("missing")).toBeUndefined();
@@ -51,7 +56,7 @@ describe("cookie module", () => {
 
 		test("handles undefined document", () => {
 			const originalDocument = global.document;
-			// @ts-ignore
+			// @ts-expect-error
 			delete global.document;
 
 			expect(getClientCookie("foo")).toBeUndefined();
@@ -61,6 +66,37 @@ describe("cookie module", () => {
 	});
 
 	describe("setClientCookie", () => {
+		test("handles undefined document in setClientCookie", () => {
+			const origDocument = global.document;
+			// @ts-expect-error
+			delete global.document;
+			setClientCookie("foo", "bar");
+			global.document = origDocument;
+		});
+
+		test("parseClientCookie handles malformed entries", () => {
+			const result = parseClientCookieNames("=value; key");
+			expect(result).toEqual(["key"]);
+		});
+
+		test("clearAllClientCookies handles empty cookie name", () => {
+			const mockDoc = { cookie: "=1;;" };
+			const entries = clearAllClientCookies({ documentRef: mockDoc as any });
+			expect(Array.isArray(entries)).toBe(true);
+		});
+
+		test("clearAllClientCookies skips entries with empty name", () => {
+			const mockDoc = { cookie: "a=1;;b=2" };
+			const entries = clearAllClientCookies({ documentRef: mockDoc as any });
+			// Entries with empty names should be skipped in the loop
+			expect(entries).toEqual(["a", "b"]);
+		});
+
+		test("setClientCookie with days=0 does not add expires", () => {
+			setClientCookie("foo", "bar", 0);
+			expect(document.cookie).toBe("foo=bar; path=/");
+		});
+
 		test("sets cookie with name and value", () => {
 			setClientCookie("foo", "bar");
 			expect(document.cookie).toBe("foo=bar; path=/");
@@ -98,7 +134,7 @@ describe("cookie module", () => {
 			clearClientCookie("foo", {
 				hostname: "custom.com",
 				path: "/custom",
-				documentRef: mockDoc as any,
+				documentRef: mockDoc,
 			});
 			expect(mockDoc.cookie).toBe(
 				"foo=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/custom; domain=custom.com;",
@@ -109,7 +145,7 @@ describe("cookie module", () => {
 	describe("clearAllClientCookies", () => {
 		test("clears all cookies based on documentRef.cookie", () => {
 			const mockDoc = { cookie: "a=1; b=2" };
-			const entries = clearAllClientCookies({ documentRef: mockDoc as any });
+			const entries = clearAllClientCookies({ documentRef: mockDoc });
 
 			expect(entries).toEqual(["a", "b"]);
 			expect(mockDoc.cookie).toContain(
@@ -122,8 +158,8 @@ describe("cookie module", () => {
 			const mockDoc = { cookie: "a=1; b=2" };
 
 			const entries = clearAllClientCookies({
-				documentRef: mockDoc as any,
-				cookieStore: cookieStore as any,
+				documentRef: mockDoc,
+				cookieStore,
 			});
 
 			expect(entries).toEqual(["a", "b"]);
@@ -133,7 +169,7 @@ describe("cookie module", () => {
 
 		test("clears cookies from root path when includeRoot is true", () => {
 			const mockDoc = { cookie: "a=1" };
-			clearAllClientCookies({ documentRef: mockDoc as any, includeRoot: true });
+			clearAllClientCookies({ documentRef: mockDoc, includeRoot: true });
 
 			// The function iterates and updates document.cookie, so it will contain the last assignment.
 			// With paths ["/", "/test/path"] and domain "example.com"
@@ -145,7 +181,7 @@ describe("cookie module", () => {
 		test("uses provided cookieString instead of documentRef.cookie", () => {
 			const mockDoc = { cookie: "a=1" };
 			const entries = clearAllClientCookies({
-				documentRef: mockDoc as any,
+				documentRef: mockDoc,
 				cookieString: "x=1; y=2",
 			});