@musecat/functionkit 1.0.1 → 1.1.0

package/packages/hooks/useKeyboardListNavigation.ts

@@ -7,164 +7,136 @@ const FIRST_ITEM_KEYS = new Set(["ArrowDown", "ArrowRight", "Home"]);
 const LAST_ITEM_KEYS = new Set(["ArrowUp", "ArrowLeft", "End"]);
 
 type UseKeyboardListNavigationOptions = {
-  itemCount: number;
+	itemCount: number;
 };
 
-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 focusItem = useCallback((index: number) => {
-    const target = itemRefs.current[index];
-    if (!target) {
-      return false;
-    }
-
-    setActiveIndex(index);
-    target.focus();
-    target.scrollIntoView({
-      block: "nearest",
-      inline: "nearest",
-    });
-    return true;
-  }, []);
-
-  const focusBoundaryItem = useCallback(
-    (key: string) => {
-      if (itemCount === 0) {
-        return false;
-      }
-
-      if (FIRST_ITEM_KEYS.has(key)) {
-        return focusItem(0);
-      }
-
-      if (LAST_ITEM_KEYS.has(key)) {
-        return focusItem(itemCount - 1);
-      }
-
-      return false;
-    },
-    [focusItem, itemCount],
-  );
-
-  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);
-      }
-
-      if (key === "ArrowUp" || key === "ArrowLeft") {
-        const nextIndex =
-          activeIndex < 0
-            ? itemCount - 1
-            : (activeIndex - 1 + itemCount) % itemCount;
-        return focusItem(nextIndex);
-      }
-
-      return false;
-    },
-    [activeIndex, focusItem, itemCount],
-  );
-
-  const clickActiveItem = useCallback(() => {
-    if (activeIndex < 0) {
-      return false;
-    }
-
-    itemRefs.current[activeIndex]?.click();
-    return true;
-  }, [activeIndex]);
-
-  const handleListKeyDown = useCallback(
-    (
-      event: React.KeyboardEvent<HTMLElement>,
-      options?: { container?: HTMLElement | null },
-    ) => {
-      if (itemCount === 0 || event.defaultPrevented) {
-        return;
-      }
-
-      const target = event.target as HTMLElement | null;
-
-      if (!target) {
-        return;
-      }
-
-      if (isEditableKeyboardTarget(target)) {
-        return;
-      }
-
-      if (options?.container && !options.container.contains(target)) {
-        return;
-      }
-
-      if (event.key === "Escape") {
-        setActiveIndex(-1);
-        return;
-      }
-
-      if (
-        event.key === "Enter" ||
-        event.key === " " ||
-        event.key === "ArrowDown" ||
-        event.key === "ArrowUp" ||
-        event.key === "ArrowLeft" ||
-        event.key === "ArrowRight" ||
-        event.key === "Home" ||
-        event.key === "End"
-      ) {
-        event.preventDefault();
-      }
-
-      if (event.key === "Enter" || event.key === " ") {
-        clickActiveItem();
-        return;
-      }
-
-      if (moveActiveItem(event.key)) {
-        return;
-      }
-
-      if (focusBoundaryItem(event.key)) {
-        return;
-      }
-    },
-    [clickActiveItem, moveActiveItem, focusBoundaryItem, itemCount],
-  );
-
-  useEffect(() => {
-    itemRefs.current = itemRefs.current.slice(0, itemCount);
-  }, [itemCount]);
-
-  return {
-    activeIndex,
-    setActiveIndex,
-    setItemRef,
-    clickActiveItem,
-    focusBoundaryItem,
-    handleListKeyDown,
-  };
+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 focusItem = useCallback((index: number) => {
+		const target = itemRefs.current[index];
+		if (!target) {
+			return false;
+		}
+
+		setActiveIndex(index);
+		target.focus();
+		target.scrollIntoView({
+			block: "nearest",
+			inline: "nearest",
+		});
+		return true;
+	}, []);
+
+	const focusBoundaryItem = useCallback(
+		(key: string) => {
+			if (itemCount === 0) {
+				return false;
+			}
+
+			if (FIRST_ITEM_KEYS.has(key)) {
+				return focusItem(0);
+			}
+
+			if (LAST_ITEM_KEYS.has(key)) {
+				return focusItem(itemCount - 1);
+			}
+
+			return false;
+		},
+		[focusItem, itemCount],
+	);
+
+	const moveActiveItem = useCallback(
+		(key: string) => {
+			if (key === "ArrowDown" || key === "ArrowRight") {
+				const nextIndex = activeIndex < 0 ? 0 : (activeIndex + 1) % itemCount;
+				return focusItem(nextIndex);
+			}
+
+			if (key === "ArrowUp" || key === "ArrowLeft") {
+				const nextIndex =
+					activeIndex < 0 ? itemCount - 1 : (activeIndex - 1 + itemCount) % itemCount;
+				return focusItem(nextIndex);
+			}
+
+			return focusBoundaryItem(key);
+		},
+		[activeIndex, focusItem, focusBoundaryItem, itemCount],
+	);
+
+	const clickActiveItem = useCallback(() => {
+		if (activeIndex < 0) {
+			return false;
+		}
+
+		itemRefs.current[activeIndex]?.click();
+		return true;
+	}, [activeIndex]);
+
+	const handleListKeyDown = useCallback(
+		(event: React.KeyboardEvent<HTMLElement>, options?: { container?: HTMLElement | null }) => {
+			if (itemCount === 0 || event.defaultPrevented) {
+				return;
+			}
+
+			const target = event.target as HTMLElement | null;
+
+			if (!target) {
+				return;
+			}
+
+			if (isEditableKeyboardTarget(target)) {
+				return;
+			}
+
+			if (options?.container && !options.container.contains(target)) {
+				return;
+			}
+
+			if (event.key === "Escape") {
+				setActiveIndex(-1);
+				return;
+			}
+
+			if (
+				event.key === "Enter" ||
+				event.key === " " ||
+				event.key === "ArrowDown" ||
+				event.key === "ArrowUp" ||
+				event.key === "ArrowLeft" ||
+				event.key === "ArrowRight" ||
+				event.key === "Home" ||
+				event.key === "End"
+			) {
+				event.preventDefault();
+			}
+
+			if (event.key === "Enter" || event.key === " ") {
+				clickActiveItem();
+				return;
+			}
+
+			moveActiveItem(event.key);
+		},
+		[clickActiveItem, moveActiveItem, itemCount],
+	);
+
+	useEffect(() => {
+		itemRefs.current = itemRefs.current.slice(0, itemCount);
+	}, [itemCount]);
+
+	return {
+		activeIndex,
+		setActiveIndex,
+		setItemRef,
+		clickActiveItem,
+		focusBoundaryItem,
+		handleListKeyDown,
+	};
 }

package/packages/hooks/useLongPress.ts

@@ -3,118 +3,107 @@
 import { type MouseEvent, type TouchEvent, useCallback, useRef } from "react";
 
 export type UseLongPressOptions<E extends HTMLElement> = {
-  delay?: number;
-  moveThreshold?: {
-    x?: number;
-    y?: number;
-  };
-  onClick?: (event: MouseEvent<E> | TouchEvent<E>) => void;
-  onLongPressEnd?: (event: MouseEvent<E> | TouchEvent<E>) => void;
+	delay?: number;
+	moveThreshold?: {
+		x?: number;
+		y?: number;
+	};
+	onClick?: (event: MouseEvent<E> | TouchEvent<E>) => void;
+	onLongPressEnd?: (event: MouseEvent<E> | TouchEvent<E>) => void;
 };
 
 export function useLongPress<E extends HTMLElement = HTMLElement>(
-  onLongPress: (event: MouseEvent<E> | TouchEvent<E>) => void,
-  {
-    delay = 500,
-    moveThreshold,
-    onClick,
-    onLongPressEnd,
-  }: UseLongPressOptions<E> = {},
+	onLongPress: (event: MouseEvent<E> | TouchEvent<E>) => void,
+	{ delay = 500, moveThreshold, onClick, onLongPressEnd }: UseLongPressOptions<E> = {},
 ) {
-  const timeoutRef = useRef<number | null>(null);
-  const isLongPressActiveRef = useRef(false);
-  const initialPositionRef = useRef({ x: 0, y: 0 });
+	const timeoutRef = useRef<number | null>(null);
+	const isLongPressActiveRef = useRef(false);
+	const initialPositionRef = useRef({ x: 0, y: 0 });
 
-  const savedOnLongPress = useRef(onLongPress);
-  const savedOnClick = useRef(onClick);
-  const savedOnLongPressEnd = useRef(onLongPressEnd);
-  savedOnLongPress.current = onLongPress;
-  savedOnClick.current = onClick;
-  savedOnLongPressEnd.current = onLongPressEnd;
+	const savedOnLongPress = useRef(onLongPress);
+	const savedOnClick = useRef(onClick);
+	const savedOnLongPressEnd = useRef(onLongPressEnd);
+	savedOnLongPress.current = onLongPress;
+	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>) => {
-      const { x, y } = getClientPosition(event);
-      const deltaX = Math.abs(x - initialPositionRef.current.x);
-      const deltaY = Math.abs(y - initialPositionRef.current.y);
+	const isMovedBeyondThreshold = useCallback(
+		(event: MouseEvent<E> | TouchEvent<E>) => {
+			const { x, y } = getClientPosition(event);
+			const deltaX = Math.abs(x - initialPositionRef.current.x);
+			const deltaY = Math.abs(y - initialPositionRef.current.y);
 
-      return (
-        (moveThreshold?.x !== undefined && deltaX > moveThreshold.x) ||
-        (moveThreshold?.y !== undefined && deltaY > moveThreshold.y)
-      );
-    },
-    [getClientPosition, moveThreshold],
-  );
+			return (
+				(moveThreshold?.x !== undefined && deltaX > moveThreshold.x) ||
+				(moveThreshold?.y !== undefined && deltaY > moveThreshold.y)
+			);
+		},
+		[getClientPosition, moveThreshold],
+	);
 
-  const cancelLongPress = useCallback(() => {
-    if (timeoutRef.current !== null) {
-      window.clearTimeout(timeoutRef.current);
-      timeoutRef.current = null;
-    }
-  }, []);
+	const cancelLongPress = useCallback(() => {
+		if (timeoutRef.current !== null) {
+			window.clearTimeout(timeoutRef.current);
+			timeoutRef.current = null;
+		}
+	}, []);
 
-  const handlePressStart = useCallback(
-    (event: MouseEvent<E> | TouchEvent<E>) => {
-      cancelLongPress();
-      initialPositionRef.current = getClientPosition(event);
-      isLongPressActiveRef.current = false;
+	const handlePressStart = useCallback(
+		(event: MouseEvent<E> | TouchEvent<E>) => {
+			cancelLongPress();
+			initialPositionRef.current = getClientPosition(event);
+			isLongPressActiveRef.current = false;
 
-      timeoutRef.current = window.setTimeout(() => {
-        isLongPressActiveRef.current = true;
-        savedOnLongPress.current(event);
-      }, delay);
-    },
-    [cancelLongPress, delay, getClientPosition],
-  );
+			timeoutRef.current = window.setTimeout(() => {
+				isLongPressActiveRef.current = true;
+				savedOnLongPress.current(event);
+			}, delay);
+		},
+		[cancelLongPress, delay, getClientPosition],
+	);
 
-  const handlePressEnd = useCallback(
-    (event: MouseEvent<E> | TouchEvent<E>) => {
-      if (isLongPressActiveRef.current) {
-        savedOnLongPressEnd.current?.(event);
-      } else if (timeoutRef.current !== null) {
-        savedOnClick.current?.(event);
-      }
+	const handlePressEnd = useCallback(
+		(event: MouseEvent<E> | TouchEvent<E>) => {
+			if (isLongPressActiveRef.current) {
+				savedOnLongPressEnd.current?.(event);
+			} else if (timeoutRef.current !== null) {
+				savedOnClick.current?.(event);
+			}
 
-      cancelLongPress();
-      isLongPressActiveRef.current = false;
-    },
-    [cancelLongPress],
-  );
+			cancelLongPress();
+			isLongPressActiveRef.current = false;
+		},
+		[cancelLongPress],
+	);
 
-  const handlePressMove = useCallback(
-    (event: MouseEvent<E> | TouchEvent<E>) => {
-      if (timeoutRef.current !== null && isMovedBeyondThreshold(event)) {
-        cancelLongPress();
-      }
-    },
-    [cancelLongPress, isMovedBeyondThreshold],
-  );
+	const handlePressMove = useCallback(
+		(event: MouseEvent<E> | TouchEvent<E>) => {
+			if (timeoutRef.current !== null && isMovedBeyondThreshold(event)) {
+				cancelLongPress();
+			}
+		},
+		[cancelLongPress, isMovedBeyondThreshold],
+	);
 
-  return {
-    onMouseDown: handlePressStart,
-    onMouseUp: handlePressEnd,
-    onMouseLeave: cancelLongPress,
-    onTouchStart: handlePressStart,
-    onTouchEnd: handlePressEnd,
-    ...(hasThreshold
-      ? { onTouchMove: handlePressMove, onMouseMove: handlePressMove }
-      : {}),
-  };
+	return {
+		onMouseDown: handlePressStart,
+		onMouseUp: handlePressEnd,
+		onMouseLeave: cancelLongPress,
+		onTouchStart: handlePressStart,
+		onTouchEnd: handlePressEnd,
+		...(hasThreshold ? { onTouchMove: handlePressMove, onMouseMove: handlePressMove } : {}),
+	};
 }

package/packages/hooks/usePreservedCallback.ts

@@ -3,19 +3,19 @@
 import { useCallback, useEffect, useRef } from "react";
 
 export function usePreservedCallback<
-  Arguments extends unknown[] = unknown[],
-  ReturnValue = unknown,
+	Arguments extends unknown[] = unknown[],
+	ReturnValue = unknown,
 >(callback: (...args: Arguments) => ReturnValue) {
-  const callbackRef = useRef(callback);
+	const callbackRef = useRef(callback);
 
-  useEffect(
-    function syncCallbackRef() {
-      callbackRef.current = callback;
-    },
-    [callback],
-  );
+	useEffect(
+		function syncCallbackRef() {
+			callbackRef.current = callback;
+		},
+		[callback],
+	);
 
-  return useCallback((...args: Arguments) => {
-    return callbackRef.current(...args);
-  }, []);
+	return useCallback((...args: Arguments) => {
+		return callbackRef.current(...args);
+	}, []);
 }

package/packages/hooks/usePreservedReference.ts

@@ -3,19 +3,19 @@
 import { useMemo, useRef } from "react";
 
 function areDeeplyEqual<T>(a: T, b: T): boolean {
-  return JSON.stringify(a) === JSON.stringify(b);
+	return JSON.stringify(a) === JSON.stringify(b);
 }
 
 export function usePreservedReference<T>(
-  value: T,
-  areValuesEqual: (a: T, b: T) => boolean = areDeeplyEqual,
+	value: T,
+	areValuesEqual: (a: T, b: T) => boolean = areDeeplyEqual,
 ): T {
-  const ref = useRef(value);
+	const ref = useRef(value);
 
-  return useMemo(() => {
-    if (!areValuesEqual(ref.current, value)) {
-      ref.current = value;
-    }
-    return ref.current;
-  }, [areValuesEqual, value]);
+	return useMemo(() => {
+		if (!areValuesEqual(ref.current, value)) {
+			ref.current = value;
+		}
+		return ref.current;
+	}, [areValuesEqual, value]);
 }

package/packages/hooks/useRefEffect.ts

@@ -7,29 +7,29 @@ import { usePreservedCallback } from "./usePreservedCallback";
 export type CleanupCallback = () => void;
 
 export function useRefEffect<RefElement extends HTMLElement = HTMLElement>(
-  callback: (element: RefElement) => CleanupCallback | undefined,
-  deps: DependencyList,
+	callback: (element: RefElement) => CleanupCallback | undefined,
+	deps: DependencyList,
 ): (element: RefElement | null) => void {
-  const preservedCallback = usePreservedCallback(callback);
-  const cleanupCallbackRef = useRef<CleanupCallback>(() => {});
+	const preservedCallback = usePreservedCallback(callback);
+	const cleanupCallbackRef = useRef<CleanupCallback>(() => {});
 
-  const effect = useCallback(
-    (element: RefElement | null) => {
-      cleanupCallbackRef.current();
-      cleanupCallbackRef.current = () => {};
+	const effect = useCallback(
+		(element: RefElement | null) => {
+			cleanupCallbackRef.current();
+			cleanupCallbackRef.current = () => {};
 
-      if (element == null) {
-        return;
-      }
+			if (element == null) {
+				return;
+			}
 
-      const cleanup = preservedCallback(element);
+			const cleanup = preservedCallback(element);
 
-      if (typeof cleanup === "function") {
-        cleanupCallbackRef.current = cleanup;
-      }
-    },
-    [preservedCallback, ...deps],
-  );
+			if (typeof cleanup === "function") {
+				cleanupCallbackRef.current = cleanup;
+			}
+		},
+		[preservedCallback, ...deps],
+	);
 
-  return effect;
+	return effect;
 }