@povio/ui 2.3.3 → 3.0.0-rc.1

package/dist/hooks/useIntersectionObserver.js

@@ -1,31 +1,98 @@
-import { useCallback, useEffect, useState } from "react";
+import { c } from "react/compiler-runtime";
+import { useEffect, useRef } from "react";
 //#region src/hooks/useIntersectionObserver.ts
-var useIntersectionObserver = ({ onIntersection, onIntersectionChange, root, rootMargin, threshold }) => {
-	const [element, setElement] = useState(null);
-	const ref = useCallback((node) => {
-		setElement(node);
-	}, []);
-	useEffect(() => {
-		if (!element) return;
-		const observer = new IntersectionObserver((entries) => {
-			if (entries.some((entry) => entry.isIntersecting)) onIntersection?.();
-			onIntersectionChange?.(entries[0]);
-		}, {
+var useIntersectionObserver = (t0) => {
+	const $ = c(13);
+	const { onIntersection, onIntersectionChange, root, rootMargin, threshold } = t0;
+	const elementRef = useRef(null);
+	const observerRef = useRef(null);
+	const onIntersectionRef = useRef(onIntersection);
+	const onIntersectionChangeRef = useRef(onIntersectionChange);
+	let t1;
+	let t2;
+	if ($[0] !== onIntersection) {
+		t1 = () => {
+			onIntersectionRef.current = onIntersection;
+		};
+		t2 = [onIntersection];
+		$[0] = onIntersection;
+		$[1] = t1;
+		$[2] = t2;
+	} else {
+		t1 = $[1];
+		t2 = $[2];
+	}
+	useEffect(t1, t2);
+	let t3;
+	let t4;
+	if ($[3] !== onIntersectionChange) {
+		t3 = () => {
+			onIntersectionChangeRef.current = onIntersectionChange;
+		};
+		t4 = [onIntersectionChange];
+		$[3] = onIntersectionChange;
+		$[4] = t3;
+		$[5] = t4;
+	} else {
+		t3 = $[4];
+		t4 = $[5];
+	}
+	useEffect(t3, t4);
+	let t5;
+	let t6;
+	if ($[6] !== root || $[7] !== rootMargin || $[8] !== threshold) {
+		t5 = () => {
+			const observer = new IntersectionObserver((entries) => {
+				if (entries.some(_temp)) onIntersectionRef.current?.();
+				onIntersectionChangeRef.current?.(entries[0]);
+			}, {
+				root,
+				rootMargin,
+				threshold
+			});
+			observerRef.current = observer;
+			if (elementRef.current) observer.observe(elementRef.current);
+			return () => {
+				if (elementRef.current) observer.unobserve(elementRef.current);
+				observer.disconnect();
+				observerRef.current = null;
+			};
+		};
+		t6 = [
 			root,
 			rootMargin,
 			threshold
-		});
-		observer.observe(element);
-		return () => observer.disconnect();
-	}, [
-		element,
-		root,
-		onIntersection,
-		onIntersectionChange,
-		rootMargin,
-		threshold
-	]);
-	return { ref };
+		];
+		$[6] = root;
+		$[7] = rootMargin;
+		$[8] = threshold;
+		$[9] = t5;
+		$[10] = t6;
+	} else {
+		t5 = $[9];
+		t6 = $[10];
+	}
+	useEffect(t5, t6);
+	let t7;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = (element) => {
+			if (elementRef.current === element) return;
+			if (observerRef.current && elementRef.current) observerRef.current.unobserve(elementRef.current);
+			elementRef.current = element;
+			if (observerRef.current && elementRef.current) observerRef.current.observe(elementRef.current);
+		};
+		$[11] = t7;
+	} else t7 = $[11];
+	const ref = t7;
+	let t8;
+	if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = { ref };
+		$[12] = t8;
+	} else t8 = $[12];
+	return t8;
 };
+function _temp(entry) {
+	return entry.isIntersecting;
+}
 //#endregion
 export { useIntersectionObserver };

package/dist/hooks/useKeyInteractions.d.ts

@@ -0,0 +1,20 @@
+import { KeyboardEvent } from 'react';
+export type KeyInteractionAction = "up" | "down" | "left" | "right" | "space" | "escape" | "enter" | "backspace";
+export type KeyInteractionCallback<TElement extends HTMLElement = HTMLElement> = (event: KeyboardEvent<TElement>) => void;
+export interface KeyInteraction<TElement extends HTMLElement = HTMLElement> {
+    callback: KeyInteractionCallback<TElement>;
+    enabled?: boolean;
+    preventDefault?: boolean;
+}
+export interface KeyInteractionGroup<TElement extends HTMLElement = HTMLElement> extends KeyInteraction<TElement> {
+    actions: KeyInteractionAction[];
+}
+export type KeyInteractions<TElement extends HTMLElement = HTMLElement> = Partial<Record<KeyInteractionAction, KeyInteraction<TElement>>> & {
+    interactions?: KeyInteractionGroup<TElement>[];
+};
+export interface UseKeyInteractionsResult<TElement extends HTMLElement = HTMLElement> {
+    onKeyDown: (event: KeyboardEvent<TElement>) => void;
+}
+export declare const getKeyInteractionAction: (event: Pick<KeyboardEvent, "code" | "key">) => KeyInteractionAction | undefined;
+export declare const createKeyInteractionsHandler: <TElement extends HTMLElement = HTMLElement>(interactions: KeyInteractions<TElement>) => (event: KeyboardEvent<TElement>) => void;
+export declare const useKeyInteractions: <TElement extends HTMLElement = HTMLElement>(interactions: KeyInteractions<TElement>) => UseKeyInteractionsResult<TElement>;

package/dist/hooks/useKeyInteractions.js

@@ -0,0 +1,54 @@
+import { c } from "react/compiler-runtime";
+//#region src/hooks/useKeyInteractions.ts
+var KEY_TO_ACTION = {
+	ArrowUp: "up",
+	ArrowDown: "down",
+	ArrowLeft: "left",
+	ArrowRight: "right",
+	" ": "space",
+	Spacebar: "space",
+	Escape: "escape",
+	Enter: "enter",
+	Backspace: "backspace"
+};
+var getKeyInteractionAction = (event) => {
+	return KEY_TO_ACTION[event.key] ?? (event.code === "Space" ? "space" : void 0);
+};
+var createKeyInteractionsHandler = (interactions) => {
+	return (event) => handleKeyInteraction({
+		event,
+		interactions
+	});
+};
+var useKeyInteractions = (interactions) => {
+	const $ = c(4);
+	let t0;
+	if ($[0] !== interactions) {
+		t0 = (event) => handleKeyInteraction({
+			event,
+			interactions
+		});
+		$[0] = interactions;
+		$[1] = t0;
+	} else t0 = $[1];
+	const onKeyDown = t0;
+	let t1;
+	if ($[2] !== onKeyDown) {
+		t1 = { onKeyDown };
+		$[2] = onKeyDown;
+		$[3] = t1;
+	} else t1 = $[3];
+	return t1;
+};
+var handleKeyInteraction = ({ event, interactions }) => {
+	const action = getKeyInteractionAction(event);
+	if (!action) return;
+	const interaction = interactions[action];
+	const groupInteraction = interactions.interactions?.find((group) => group.actions.includes(action));
+	const selectedInteraction = interaction ?? groupInteraction;
+	if (!selectedInteraction || selectedInteraction.enabled === false) return;
+	if (selectedInteraction.preventDefault) event.preventDefault();
+	selectedInteraction.callback(event);
+};
+//#endregion
+export { createKeyInteractionsHandler, getKeyInteractionAction, useKeyInteractions };

package/dist/hooks/useKeyInteractions.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/useLocalStorage.js

@@ -1,4 +1,5 @@
-import { useCallback, useState } from "react";
+import { c } from "react/compiler-runtime";
+import { useState } from "react";
 //#region src/hooks/useLocalStorage.ts
 var getValue = (key, schema) => {
 	if (!localStorage) return null;
@@ -14,24 +15,56 @@ var getValue = (key, schema) => {
 	if (parsedValue.success) return parsedValue.data;
 	else return null;
 };
-var useLocalStorage = ({ key, schema }) => {
-	const [value, setValue] = useState(() => getValue(key, schema));
-	return {
-		value,
-		set: useCallback((newValue) => {
+var useLocalStorage = (t0) => {
+	const $ = c(12);
+	const { key, schema } = t0;
+	let t1;
+	if ($[0] !== key || $[1] !== schema) {
+		t1 = () => getValue(key, schema);
+		$[0] = key;
+		$[1] = schema;
+		$[2] = t1;
+	} else t1 = $[2];
+	const [value, setValue] = useState(t1);
+	let t2;
+	if ($[3] !== key || $[4] !== schema) {
+		t2 = (newValue) => {
 			if (!localStorage) return;
 			const parsedValue = schema.safeParse(newValue);
 			if (!parsedValue.success) return;
 			if (typeof parsedValue.data === "string") localStorage.setItem(key, parsedValue.data);
 			else localStorage.setItem(key, JSON.stringify(parsedValue.data));
 			setValue(parsedValue.data);
-		}, [key, schema]),
-		remove: useCallback(() => {
+		};
+		$[3] = key;
+		$[4] = schema;
+		$[5] = t2;
+	} else t2 = $[5];
+	const set = t2;
+	let t3;
+	if ($[6] !== key) {
+		t3 = () => {
 			if (!localStorage) return;
 			localStorage.removeItem(key);
 			setValue(null);
-		}, [key])
-	};
+		};
+		$[6] = key;
+		$[7] = t3;
+	} else t3 = $[7];
+	const remove = t3;
+	let t4;
+	if ($[8] !== remove || $[9] !== set || $[10] !== value) {
+		t4 = {
+			value,
+			set,
+			remove
+		};
+		$[8] = remove;
+		$[9] = set;
+		$[10] = value;
+		$[11] = t4;
+	} else t4 = $[11];
+	return t4;
 };
 //#endregion
 export { useLocalStorage };

package/dist/hooks/useLongPressRepeat.js

@@ -1,29 +1,64 @@
+import { c } from "react/compiler-runtime";
 import { useEffect, useRef } from "react";
 //#region src/hooks/useLongPressRepeat.ts
-var useLongPressRepeat = ({ onPress, enabled = true, interval = 85, timeout = 500 }) => {
+var useLongPressRepeat = (t0) => {
+	const $ = c(10);
+	const { onPress, enabled: t1, interval: t2, timeout: t3 } = t0;
+	const enabled = t1 === void 0 ? true : t1;
+	const interval = t2 === void 0 ? 85 : t2;
+	const timeout = t3 === void 0 ? 500 : t3;
 	const intervalRef = useRef(void 0);
-	useEffect(() => {
-		return () => {
+	let t4;
+	let t5;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = () => () => {
 			clearInterval(intervalRef.current);
 		};
-	}, []);
-	const onPressStart = () => {
-		onPress(false);
-		if (!enabled) return;
-		intervalRef.current = setTimeout(() => {
-			onPress(true);
-			intervalRef.current = setInterval(() => {
+		t5 = [];
+		$[0] = t4;
+		$[1] = t5;
+	} else {
+		t4 = $[0];
+		t5 = $[1];
+	}
+	useEffect(t4, t5);
+	let t6;
+	if ($[2] !== enabled || $[3] !== interval || $[4] !== onPress || $[5] !== timeout) {
+		t6 = () => {
+			onPress(false);
+			if (!enabled) return;
+			intervalRef.current = setTimeout(() => {
 				onPress(true);
-			}, interval);
-		}, timeout);
-	};
-	const onPressEnd = () => {
-		clearInterval(intervalRef.current);
-	};
-	return {
-		onPressStart,
-		onPressEnd
-	};
+				intervalRef.current = setInterval(() => {
+					onPress(true);
+				}, interval);
+			}, timeout);
+		};
+		$[2] = enabled;
+		$[3] = interval;
+		$[4] = onPress;
+		$[5] = timeout;
+		$[6] = t6;
+	} else t6 = $[6];
+	const onPressStart = t6;
+	let t7;
+	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = () => {
+			clearInterval(intervalRef.current);
+		};
+		$[7] = t7;
+	} else t7 = $[7];
+	const onPressEnd = t7;
+	let t8;
+	if ($[8] !== onPressStart) {
+		t8 = {
+			onPressStart,
+			onPressEnd
+		};
+		$[8] = onPressStart;
+		$[9] = t8;
+	} else t8 = $[9];
+	return t8;
 };
 //#endregion
 export { useLongPressRepeat };

package/dist/hooks/usePagination.js

@@ -1,5 +1,6 @@
 import { UIRouter } from "../config/router.context.js";
 import { RoutingUtils } from "../utils/routing.utils.js";
+import { c } from "react/compiler-runtime";
 import { useEffect, useState } from "react";
 //#region src/hooks/usePagination.ts
 var DEFAULT_STATE = {
@@ -7,26 +8,55 @@ var DEFAULT_STATE = {
 	pageSize: 20
 };
 function usePagination(defaultPagination) {
+	const $ = c(12);
 	const { replace, searchParams } = UIRouter.useUIRouter();
-	const [pagination, setPagination] = useState(defaultPagination ?? {
-		pageIndex: searchParams.has("page") ? Number.parseInt(searchParams.get("page") ?? "", 10) : DEFAULT_STATE.pageIndex,
-		pageSize: searchParams.has("size") ? Number.parseInt(searchParams.get("size") ?? "", 10) : DEFAULT_STATE.pageSize
-	});
-	useEffect(() => {
-		const params = new URLSearchParams(searchParams);
-		params.delete("size");
-		params.delete("page");
-		if (pagination.pageSize !== DEFAULT_STATE.pageSize) params.set("size", pagination.pageSize.toString());
-		if (pagination.pageIndex !== DEFAULT_STATE.pageIndex) params.set("page", pagination.pageIndex.toString());
-		if (params.toString() === searchParams.toString()) return;
-		replace(".", RoutingUtils.toRouterSearch(params));
-	}, [pagination]);
-	return {
-		pagination,
-		setPagination,
-		pageIndex: pagination.pageIndex,
-		pageSize: pagination.pageSize
-	};
+	let t0;
+	if ($[0] !== defaultPagination || $[1] !== searchParams) {
+		t0 = defaultPagination ?? {
+			pageIndex: searchParams.has("page") ? Number.parseInt(searchParams.get("page") ?? "", 10) : DEFAULT_STATE.pageIndex,
+			pageSize: searchParams.has("size") ? Number.parseInt(searchParams.get("size") ?? "", 10) : DEFAULT_STATE.pageSize
+		};
+		$[0] = defaultPagination;
+		$[1] = searchParams;
+		$[2] = t0;
+	} else t0 = $[2];
+	const [pagination, setPagination] = useState(t0);
+	let t1;
+	if ($[3] !== pagination.pageIndex || $[4] !== pagination.pageSize || $[5] !== replace || $[6] !== searchParams) {
+		t1 = () => {
+			const params = new URLSearchParams(searchParams);
+			params.delete("size");
+			params.delete("page");
+			if (pagination.pageSize !== DEFAULT_STATE.pageSize) params.set("size", pagination.pageSize.toString());
+			if (pagination.pageIndex !== DEFAULT_STATE.pageIndex) params.set("page", pagination.pageIndex.toString());
+			if (params.toString() === searchParams.toString()) return;
+			replace(".", RoutingUtils.toRouterSearch(params));
+		};
+		$[3] = pagination.pageIndex;
+		$[4] = pagination.pageSize;
+		$[5] = replace;
+		$[6] = searchParams;
+		$[7] = t1;
+	} else t1 = $[7];
+	let t2;
+	if ($[8] !== pagination) {
+		t2 = [pagination];
+		$[8] = pagination;
+		$[9] = t2;
+	} else t2 = $[9];
+	useEffect(t1, t2);
+	let t3;
+	if ($[10] !== pagination) {
+		t3 = {
+			pagination,
+			setPagination,
+			pageIndex: pagination.pageIndex,
+			pageSize: pagination.pageSize
+		};
+		$[10] = pagination;
+		$[11] = t3;
+	} else t3 = $[11];
+	return t3;
 }
 //#endregion
 export { usePagination };

package/dist/hooks/useQueryAutocomplete.d.ts

@@ -0,0 +1,14 @@
+import { InfiniteData } from '@tanstack/react-query';
+import { Key } from 'react-aria-components';
+import { InfiniteQueryPage, QueryFn, UseQueryAutocompleteOptions } from '../components/inputs/Selection/Autocomplete/queryAutocomplete.types';
+export declare const useQueryAutocomplete: <TQueryFn extends QueryFn, TKey extends Key = Key>({ query, queryParams, queryOptions, mapItems, initialQueryState, search, }: UseQueryAutocompleteOptions<TQueryFn, TKey>) => {
+    data: any;
+    isLoading: boolean;
+    isQueryEnabled: boolean;
+    handleEnableQuery: () => void;
+    items: import('..').SelectItem<TKey>[];
+    totalItems: number | undefined;
+    hasNextPage: boolean;
+    fetchNextPage: ((options?: import('@tanstack/react-query').FetchNextPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<InfiniteData<InfiniteQueryPage<TKey>, unknown>, Error>>) | undefined;
+    isFetchingNextPage: boolean;
+};

package/dist/hooks/useQueryAutocomplete.js

@@ -0,0 +1,57 @@
+import { ApiQueryUtils } from "../utils/query.utils.js";
+import { useMemo, useState } from "react";
+//#region src/hooks/useQueryAutocomplete.ts
+var isFilterSearchParams = (params) => {
+	return typeof params === "object" && params !== null && "filter" in params;
+};
+var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initialQueryState, search }) => {
+	"use no memo";
+	const [isQueryEnabled, setIsQueryEnabled] = useState(!initialQueryState);
+	const queryResult = query(search === void 0 ? queryParams : {
+		...queryParams,
+		limit: queryParams?.limit ?? ApiQueryUtils.DEFAULT_LIMIT,
+		search,
+		filter: {
+			...isFilterSearchParams(queryParams) ? queryParams.filter : {},
+			search
+		}
+	}, {
+		...queryOptions,
+		enabled: isQueryEnabled && (queryOptions?.enabled ?? true)
+	});
+	const data = queryResult.data;
+	const isLoading = queryResult.isLoading;
+	const isInfiniteQueryResult = (result) => {
+		return "hasNextPage" in result && "fetchNextPage" in result;
+	};
+	const handleEnableQuery = () => {
+		setIsQueryEnabled(true);
+	};
+	const infiniteQueryResult = isInfiniteQueryResult(queryResult) ? queryResult : void 0;
+	const isInfiniteQuery = infiniteQueryResult !== void 0;
+	const hasNextPage = infiniteQueryResult?.hasNextPage ?? false;
+	const fetchNextPage = infiniteQueryResult?.fetchNextPage;
+	const isFetchingNextPage = infiniteQueryResult?.isFetchingNextPage ?? false;
+	const totalItems = infiniteQueryResult?.data?.pages?.[0]?.totalItems;
+	const items = useMemo(() => {
+		if (!data) return [];
+		return mapItems(isInfiniteQuery ? data.pages?.flatMap((page) => page?.items ?? []) : data);
+	}, [
+		data,
+		isInfiniteQuery,
+		mapItems
+	]);
+	return {
+		data,
+		isLoading: isLoading || isFetchingNextPage,
+		isQueryEnabled,
+		handleEnableQuery,
+		items,
+		totalItems,
+		hasNextPage,
+		fetchNextPage,
+		isFetchingNextPage
+	};
+};
+//#endregion
+export { useQueryAutocomplete };

package/dist/hooks/useScrollableListBox.js

@@ -1,26 +1,47 @@
 import { useBreakpoint } from "./useBreakpoint.js";
+import { c } from "react/compiler-runtime";
 import { useEffect, useRef } from "react";
 //#region src/hooks/useScrollableListBox.ts
 function useScrollableListBox() {
+	const $ = c(4);
 	const ref = useRef(null);
 	const isDesktop = useBreakpoint("md");
-	useEffect(() => {
-		const node = ref.current;
-		if (!node || isDesktop) return;
-		const onPointerDownCapture = (e) => {
-			e.stopPropagation();
+	let t0;
+	let t1;
+	if ($[0] !== isDesktop) {
+		t0 = () => {
+			const node = ref.current;
+			if (!node || isDesktop) return;
+			const onPointerDownCapture = _temp;
+			const onClickCapture = _temp2;
+			node.addEventListener("pointerdown", onPointerDownCapture);
+			node.addEventListener("click", onClickCapture);
+			return () => {
+				node.removeEventListener("pointerdown", onPointerDownCapture);
+				node.removeEventListener("click", onClickCapture);
+			};
 		};
-		const onClickCapture = (e) => {
-			if (e.currentTarget?.contains(e.target) && e.target !== e.currentTarget) e.target.click();
-		};
-		node.addEventListener("pointerdown", onPointerDownCapture);
-		node.addEventListener("click", onClickCapture);
-		return () => {
-			node.removeEventListener("pointerdown", onPointerDownCapture);
-			node.removeEventListener("click", onClickCapture);
-		};
-	}, [ref, isDesktop]);
-	return { ref };
+		t1 = [ref, isDesktop];
+		$[0] = isDesktop;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useEffect(t0, t1);
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = { ref };
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
+}
+function _temp2(e_0) {
+	if (e_0.currentTarget?.contains(e_0.target) && e_0.target !== e_0.currentTarget) e_0.target.click();
+}
+function _temp(e) {
+	e.stopPropagation();
 }
 //#endregion
 export { useScrollableListBox };