@musecat/functionkit 1.0.1 → 1.1.0

package/packages/hooks/useCheckInvisible.ts

@@ -3,23 +3,23 @@
 import { useEffect, useState } from "react";
 
 export function useCheckInvisible(className: string) {
-  const [isInvisible, setIsInvisible] = useState(false);
+	const [isInvisible, setIsInvisible] = useState(false);
 
-  useEffect(() => {
-    const handleScroll = () => {
-      const el = document.querySelector(`.${className}`);
-      if (el) {
-        const { top } = el.getBoundingClientRect();
-        setIsInvisible(top < 0);
-      } else {
-        setIsInvisible(false);
-      }
-    };
+	useEffect(() => {
+		const handleScroll = () => {
+			const el = document.querySelector(`.${CSS.escape(className)}`);
+			if (el) {
+				const { top } = el.getBoundingClientRect();
+				setIsInvisible(top < 0);
+			} else {
+				setIsInvisible(false);
+			}
+		};
 
-    handleScroll();
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, [className]);
+		handleScroll();
+		window.addEventListener("scroll", handleScroll);
+		return () => window.removeEventListener("scroll", handleScroll);
+	}, [className]);
 
-  return { isInvisible };
+	return { isInvisible };
 }

package/packages/hooks/useCheckScroll.ts

@@ -3,17 +3,17 @@
 import { useEffect, useState } from "react";
 
 export function useCheckScroll() {
-  const [isScrolled, setIsScrolled] = useState(false);
+	const [isScrolled, setIsScrolled] = useState(false);
 
-  useEffect(() => {
-    const handleScroll = () => {
-      setIsScrolled(window.scrollY > 0);
-    };
+	useEffect(() => {
+		const handleScroll = () => {
+			setIsScrolled(window.scrollY > 0);
+		};
 
-    handleScroll();
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
+		handleScroll();
+		window.addEventListener("scroll", handleScroll);
+		return () => window.removeEventListener("scroll", handleScroll);
+	}, []);
 
-  return { isScrolled };
+	return { isScrolled };
 }

package/packages/hooks/useClientDateTime.ts

@@ -2,48 +2,35 @@
 
 import { useEffect, useState } from "react";
 import { formatClientDateTime } from "../datetime/dateTime.client";
-import type {
-  DateInput,
-  DatePreset,
-  TimePreset,
-} from "../datetime/dateTime.shared";
+import type { DateInput, DatePreset, TimePreset } from "../datetime/dateTime.shared";
 import { toDate } from "../datetime/dateTime.shared";
 
 type UseClientDateTimeOptions = {
-  locale?: string;
-  timeZone?: string;
-  datePreset?: DatePreset;
-  timePreset?: TimePreset;
+	locale?: string;
+	timeZone?: string;
+	datePreset?: DatePreset;
+	timePreset?: TimePreset;
 };
 
-export function useClientDateTime(
-  value: DateInput,
-  options?: UseClientDateTimeOptions,
-) {
-  const [ready, setReady] = useState(false);
-  const [text, setText] = useState("");
+export function useClientDateTime(value: DateInput, options?: UseClientDateTimeOptions) {
+	const [ready, setReady] = useState(false);
+	const [text, setText] = useState("");
 
-  useEffect(() => {
-    setText(
-      formatClientDateTime(value, {
-        locale: options?.locale,
-        timeZone: options?.timeZone,
-        datePreset: options?.datePreset,
-        timePreset: options?.timePreset,
-      }),
-    );
-    setReady(true);
-  }, [
-    options?.datePreset,
-    options?.locale,
-    options?.timePreset,
-    options?.timeZone,
-    value,
-  ]);
+	useEffect(() => {
+		setText(
+			formatClientDateTime(value, {
+				locale: options?.locale,
+				timeZone: options?.timeZone,
+				datePreset: options?.datePreset,
+				timePreset: options?.timePreset,
+			}),
+		);
+		setReady(true);
+	}, [options?.datePreset, options?.locale, options?.timePreset, options?.timeZone, value]);
 
-  return {
-    ready,
-    text,
-    date: toDate(value),
-  };
+	return {
+		ready,
+		text,
+		date: toDate(value),
+	};
 }

package/packages/hooks/useDebounce.ts

@@ -1,118 +1,113 @@
 "use client";
 
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo } from "react";
 
 import { usePreservedCallback } from "./usePreservedCallback";
 
 export function debounce<F extends (...args: unknown[]) => void>(
-  func: F,
-  debounceMs: number,
-  {
-    edges = ["leading", "trailing"],
-  }: { edges?: Array<"leading" | "trailing"> } = {},
+	func: F,
+	debounceMs: number,
+	{ edges = ["leading", "trailing"] }: { edges?: Array<"leading" | "trailing"> } = {},
 ): {
-  (...args: Parameters<F>): void;
-  cancel: () => void;
+	(...args: Parameters<F>): void;
+	cancel: () => void;
 } {
-  let pendingThis: ThisParameterType<F> | undefined;
-  let pendingArgs: Parameters<F> | null = null;
-  let timeoutId: ReturnType<typeof setTimeout> | null = null;
-
-  const leading = edges.includes("leading");
-  const trailing = edges.includes("trailing");
-
-  const invoke = () => {
-    if (pendingArgs !== null) {
-      func.apply(pendingThis, pendingArgs);
-      pendingThis = undefined;
-      pendingArgs = null;
-    }
-  };
-
-  const cancelTimer = () => {
-    if (timeoutId !== null) {
-      clearTimeout(timeoutId);
-      timeoutId = null;
-    }
-  };
-
-  const cancel = () => {
-    cancelTimer();
-    pendingThis = undefined;
-    pendingArgs = null;
-  };
-
-  const schedule = () => {
-    cancelTimer();
-    timeoutId = setTimeout(() => {
-      timeoutId = null;
-      if (trailing) invoke();
-      cancel();
-    }, debounceMs);
-  };
-
-  const debounced = function (
-    this: ThisParameterType<F>,
-    ...args: Parameters<F>
-  ) {
-    pendingThis = this;
-    pendingArgs = args;
-
-    const isFirstCall = timeoutId == null;
-
-    schedule();
-
-    if (leading && isFirstCall) {
-      invoke();
-    }
-  } as {
-    (...args: Parameters<F>): void;
-    cancel: () => void;
-  };
-
-  debounced.cancel = cancel;
-  return debounced;
+	let pendingThis: ThisParameterType<F> | undefined;
+	let pendingArgs: Parameters<F> | null = null;
+	let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+	const leading = edges.includes("leading");
+	const trailing = edges.includes("trailing");
+
+	const invoke = () => {
+		if (pendingArgs !== null) {
+			func.apply(pendingThis, pendingArgs);
+			pendingThis = undefined;
+			pendingArgs = null;
+		}
+	};
+
+	const cancelTimer = () => {
+		if (timeoutId !== null) {
+			clearTimeout(timeoutId);
+			timeoutId = null;
+		}
+	};
+
+	const cancel = () => {
+		cancelTimer();
+		pendingThis = undefined;
+		pendingArgs = null;
+	};
+
+	const schedule = () => {
+		cancelTimer();
+		timeoutId = setTimeout(() => {
+			timeoutId = null;
+			if (trailing) invoke();
+			cancel();
+		}, debounceMs);
+	};
+
+	const debounced = function (this: ThisParameterType<F>, ...args: Parameters<F>) {
+		pendingThis = this;
+		pendingArgs = args;
+
+		const isFirstCall = timeoutId == null;
+
+		schedule();
+
+		if (leading && isFirstCall) {
+			invoke();
+		}
+	} as {
+		(...args: Parameters<F>): void;
+		cancel: () => void;
+	};
+
+	debounced.cancel = cancel;
+	return debounced;
 }
 
 type DebounceOptions = {
-  leading?: boolean;
-  trailing?: boolean;
+	leading?: boolean;
+	trailing?: boolean;
 };
 
 export function useDebounce<F extends (...args: unknown[]) => void>(
-  callback: F,
-  wait: number,
-  options: DebounceOptions = {},
+	callback: F,
+	wait: number,
+	options: DebounceOptions = {},
 ) {
-  const preservedCallback = usePreservedCallback(callback) as F;
+	const preservedCallback = usePreservedCallback(callback) as F;
 
-  const { leading = false, trailing = true } = options;
+	const { leading = false, trailing = true } = options;
 
-  const edges = useMemo(() => {
-    const _edges: Array<"leading" | "trailing"> = [];
-    if (leading) {
-      _edges.push("leading");
-    }
+	const edges = useMemo(() => {
+		const _edges: Array<"leading" | "trailing"> = [];
+		if (leading) {
+			_edges.push("leading");
+		}
 
-    if (trailing) {
-      _edges.push("trailing");
-    }
+		if (trailing) {
+			_edges.push("trailing");
+		}
 
-    return _edges;
-  }, [leading, trailing]);
+		return _edges;
+	}, [leading, trailing]);
 
-  const debounced = useMemo(() => {
-    return debounce(preservedCallback, wait, { edges });
-  }, [preservedCallback, wait, edges]);
+	const debounced = useMemo(() => {
+		return debounce(preservedCallback, wait, { edges });
+	}, [preservedCallback, wait, edges]);
 
-  useEffect(
-    function cancelDebouncedOnUnmount() {
-      return () => {
-        debounced.cancel();
-      };
-    },
-    [debounced],
-  );
+	useEffect(
+		function cancelDebouncedOnUnmount() {
+			return () => {
+				debounced.cancel();
+			};
+		},
+		[debounced],
+	);
 
-  return debounced;
+	return debounced;
 }

package/packages/hooks/useDebouncedCallback.ts

@@ -6,64 +6,64 @@ import { debounce } from "./useDebounce";
 import { usePreservedCallback } from "./usePreservedCallback";
 
 type DebounceOptions = {
-  leading?: boolean;
-  trailing?: boolean;
+	leading?: boolean;
+	trailing?: boolean;
 };
 
 export function useDebouncedCallback({
-  onChange,
-  timeThreshold,
-  leading = false,
-  trailing = true,
+	onChange,
+	timeThreshold,
+	leading = false,
+	trailing = true,
 }: DebounceOptions & {
-  onChange: (newValue: boolean) => void;
-  timeThreshold: number;
+	onChange: (newValue: boolean) => void;
+	timeThreshold: number;
 }) {
-  const handleChange = usePreservedCallback(onChange);
-  const ref = useRef({ value: false, clearPreviousDebounce: () => {} });
+	const handleChange = usePreservedCallback(onChange);
+	const ref = useRef({ value: false, clearPreviousDebounce: () => {} });
 
-  useEffect(function clearDebouncedOnUnmount() {
-    const current = ref.current;
-    return () => {
-      current.clearPreviousDebounce();
-    };
-  }, []);
+	useEffect(function clearDebouncedOnUnmount() {
+		const current = ref.current;
+		return () => {
+			current.clearPreviousDebounce();
+		};
+	}, []);
 
-  const edges = useMemo(() => {
-    const _edges: Array<"leading" | "trailing"> = [];
-    if (leading) {
-      _edges.push("leading");
-    }
+	const edges = useMemo(() => {
+		const _edges: Array<"leading" | "trailing"> = [];
+		if (leading) {
+			_edges.push("leading");
+		}
 
-    if (trailing) {
-      _edges.push("trailing");
-    }
+		if (trailing) {
+			_edges.push("trailing");
+		}
 
-    return _edges;
-  }, [leading, trailing]);
+		return _edges;
+	}, [leading, trailing]);
 
-  return useCallback(
-    (nextValue: boolean) => {
-      if (nextValue === ref.current.value) {
-        return;
-      }
+	return useCallback(
+		(nextValue: boolean) => {
+			if (nextValue === ref.current.value) {
+				return;
+			}
 
-      const debounced = debounce(
-        () => {
-          handleChange(nextValue);
+			const debounced = debounce(
+				() => {
+					handleChange(nextValue);
 
-          ref.current.value = nextValue;
-        },
-        timeThreshold,
-        { edges },
-      );
+					ref.current.value = nextValue;
+				},
+				timeThreshold,
+				{ edges },
+			);
 
-      ref.current.clearPreviousDebounce();
+			ref.current.clearPreviousDebounce();
 
-      debounced();
+			debounced();
 
-      ref.current.clearPreviousDebounce = debounced.cancel;
-    },
-    [handleChange, timeThreshold, edges],
-  );
+			ref.current.clearPreviousDebounce = debounced.cancel;
+		},
+		[handleChange, timeThreshold, edges],
+	);
 }

package/packages/hooks/useDoubleClick.ts

@@ -3,51 +3,51 @@
 import { type MouseEvent, useCallback, useEffect, useRef } from "react";
 
 type UseDoubleClickProps<E extends HTMLElement> = {
-  delay?: number;
-  click?: (event: MouseEvent<E>) => void;
-  doubleClick: (event: MouseEvent<E>) => void;
+	delay?: number;
+	click?: (event: MouseEvent<E>) => void;
+	doubleClick: (event: MouseEvent<E>) => void;
 };
 
 export function useDoubleClick<E extends HTMLElement = HTMLElement>({
-  delay = 250,
-  click,
-  doubleClick,
+	delay = 250,
+	click,
+	doubleClick,
 }: UseDoubleClickProps<E>) {
-  const clickTimeout = useRef<number | null>(null);
-
-  const savedClick = useRef(click);
-  const savedDoubleClick = useRef(doubleClick);
-  savedClick.current = click;
-  savedDoubleClick.current = doubleClick;
-
-  useEffect(() => {
-    return () => {
-      if (clickTimeout.current != null) {
-        window.clearTimeout(clickTimeout.current);
-      }
-    };
-  }, []);
-
-  const handleEvent = useCallback(
-    (event: MouseEvent<E>) => {
-      if (clickTimeout.current != null) {
-        window.clearTimeout(clickTimeout.current);
-        clickTimeout.current = null;
-      }
-
-      if (event.detail === 1 && savedClick.current) {
-        clickTimeout.current = window.setTimeout(() => {
-          clickTimeout.current = null;
-          savedClick.current?.(event);
-        }, delay);
-      }
-
-      if (event.detail === 2) {
-        savedDoubleClick.current(event);
-      }
-    },
-    [delay],
-  );
-
-  return handleEvent;
+	const clickTimeout = useRef<number | null>(null);
+
+	const savedClick = useRef(click);
+	const savedDoubleClick = useRef(doubleClick);
+	savedClick.current = click;
+	savedDoubleClick.current = doubleClick;
+
+	useEffect(() => {
+		return () => {
+			if (clickTimeout.current != null) {
+				window.clearTimeout(clickTimeout.current);
+			}
+		};
+	}, []);
+
+	const handleEvent = useCallback(
+		(event: MouseEvent<E>) => {
+			if (clickTimeout.current != null) {
+				window.clearTimeout(clickTimeout.current);
+				clickTimeout.current = null;
+			}
+
+			if (event.detail === 1 && savedClick.current) {
+				clickTimeout.current = window.setTimeout(() => {
+					clickTimeout.current = null;
+					savedClick.current?.(event);
+				}, delay);
+			}
+
+			if (event.detail === 2) {
+				savedDoubleClick.current(event);
+			}
+		},
+		[delay],
+	);
+
+	return handleEvent;
 }