@povio/ui 3.2.2-rc.3 → 3.2.2-rc.5

package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js

@@ -8,7 +8,7 @@ import { useState } from "react";
 import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 //#region src/components/inputs/Selection/Autocomplete/QueryAutocomplete.tsx
-var QueryAutocompleteContent = ({ query, queryParams, queryOptions, queryMap, leadingContent, ...props }) => {
+var QueryAutocompleteContent = ({ query, queryParams, queryOptions, queryMap, resolveSelectedItemsWithIds, leadingContent, ...props }) => {
 	"use no memo";
 	const ui = UIConfig.useConfig();
 	const [search, setSearch] = useState("");
@@ -24,6 +24,7 @@ var QueryAutocompleteContent = ({ query, queryParams, queryOptions, queryMap, le
 		queryParams,
 		queryOptions,
 		mapItems: (data) => getQueryItems(data, queryMap),
+		resolveSelectedItemsWithIds,
 		search,
 		initialQueryState: selectedIdsToResolve.count > 0 ? false : props.isInitialQueryDisabled ?? ui.queryAutocomplete?.isInitialQueryDisabled,
 		selectedIdsToResolve: selectedIdsToResolve.items

package/dist/components/inputs/Selection/Autocomplete/queryAutocomplete.types.d.ts

@@ -22,6 +22,7 @@ export type QueryAutocompleteProps<TFieldValues extends FieldValues, TSelectItem
     };
     queryOptions?: ExtractQueryOptions<TQueryFn>;
     queryMap?: (data: ExtractedDataType<TQueryFn>) => SelectItem<TSelectItem["id"]>[];
+    resolveSelectedItemsWithIds?: boolean;
     isInitialQueryDisabled?: boolean;
 };
 export interface UseQueryAutocompleteOptions<TQueryFn extends QueryFn, TKey extends Key = Key> {
@@ -31,6 +32,7 @@ export interface UseQueryAutocompleteOptions<TQueryFn extends QueryFn, TKey exte
     };
     queryOptions?: ExtractQueryOptions<TQueryFn>;
     mapItems: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[];
+    resolveSelectedItemsWithIds?: boolean;
     initialQueryState?: boolean;
     search?: string;
     selectedIdsToResolve?: TKey[];

package/dist/components/inputs/Selection/Select/QuerySelect.d.ts

@@ -9,6 +9,7 @@ export type QuerySelectProps<TFieldValues extends FieldValues, TQueryFn extends
     queryParams?: Parameters<TQueryFn>[0];
     queryOptions?: Parameters<TQueryFn>[1];
     queryMap?: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[];
+    resolveSelectedItemsWithIds?: boolean;
     isInitialQueryDisabled?: boolean;
 };
 export declare const QuerySelect: <TFieldValues extends FieldValues, TQueryFn extends QueryFn, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: QuerySelectProps<TFieldValues, TQueryFn, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/Selection/Select/QuerySelect.js

@@ -9,8 +9,8 @@ import { mergeRefs } from "@react-aria/utils";
 import { Controller } from "react-hook-form";
 //#region src/components/inputs/Selection/Select/QuerySelect.tsx
 var QuerySelectContent = (t0) => {
-	const $ = c(29);
-	const { query, queryParams, queryOptions, queryMap, ...props } = t0;
+	const $ = c(30);
+	const { query, queryParams, queryOptions, queryMap, resolveSelectedItemsWithIds, ...props } = t0;
 	const ui = UIConfig.useConfig();
 	const [search, setSearch] = useState("");
 	const isSearchable = props.isSearchable ?? ui.select.isSearchable;
@@ -30,12 +30,13 @@ var QuerySelectContent = (t0) => {
 	const t2 = isSearchable ? search : void 0;
 	const t3 = shouldEnableInitialQuery ? false : props.isInitialQueryDisabled ?? ui.querySelect?.isInitialQueryDisabled;
 	let t4;
-	if ($[2] !== query || $[3] !== queryOptions || $[4] !== queryParams || $[5] !== selectedIdsToResolve.items || $[6] !== t1 || $[7] !== t2 || $[8] !== t3) {
+	if ($[2] !== query || $[3] !== queryOptions || $[4] !== queryParams || $[5] !== resolveSelectedItemsWithIds || $[6] !== selectedIdsToResolve.items || $[7] !== t1 || $[8] !== t2 || $[9] !== t3) {
 		t4 = {
 			query,
 			queryParams,
 			queryOptions,
 			mapItems: t1,
+			resolveSelectedItemsWithIds,
 			search: t2,
 			initialQueryState: t3,
 			selectedIdsToResolve: selectedIdsToResolve.items
@@ -43,51 +44,52 @@ var QuerySelectContent = (t0) => {
 		$[2] = query;
 		$[3] = queryOptions;
 		$[4] = queryParams;
-		$[5] = selectedIdsToResolve.items;
-		$[6] = t1;
-		$[7] = t2;
-		$[8] = t3;
-		$[9] = t4;
-	} else t4 = $[9];
+		$[5] = resolveSelectedItemsWithIds;
+		$[6] = selectedIdsToResolve.items;
+		$[7] = t1;
+		$[8] = t2;
+		$[9] = t3;
+		$[10] = t4;
+	} else t4 = $[10];
 	const { items, totalItems, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete(t4);
 	let onSearchChange;
 	let selectProps;
-	if ($[10] !== props) {
+	if ($[11] !== props) {
 		const { isInitialQueryDisabled: _, onSearchChange: t5, ...t6 } = props;
 		onSearchChange = t5;
 		selectProps = t6;
-		$[10] = props;
-		$[11] = onSearchChange;
-		$[12] = selectProps;
+		$[11] = props;
+		$[12] = onSearchChange;
+		$[13] = selectProps;
 	} else {
-		onSearchChange = $[11];
-		selectProps = $[12];
+		onSearchChange = $[12];
+		selectProps = $[13];
 	}
 	let t5;
-	if ($[13] !== handleEnableQuery || $[14] !== onSearchChange || $[15] !== setSearch) {
+	if ($[14] !== handleEnableQuery || $[15] !== onSearchChange || $[16] !== setSearch) {
 		t5 = (value_0) => {
 			setSearch(value_0);
 			handleEnableQuery();
 			onSearchChange?.(value_0);
 		};
-		$[13] = handleEnableQuery;
-		$[14] = onSearchChange;
-		$[15] = setSearch;
-		$[16] = t5;
-	} else t5 = $[16];
+		$[14] = handleEnableQuery;
+		$[15] = onSearchChange;
+		$[16] = setSearch;
+		$[17] = t5;
+	} else t5 = $[17];
 	const handleSearchChange = t5;
 	let t6;
-	if ($[17] !== handleSearchChange || $[18] !== isSearchable) {
+	if ($[18] !== handleSearchChange || $[19] !== isSearchable) {
 		t6 = isSearchable && {
 			isClientSearchDisabled: true,
 			onSearchChange: handleSearchChange
 		};
-		$[17] = handleSearchChange;
-		$[18] = isSearchable;
-		$[19] = t6;
-	} else t6 = $[19];
+		$[18] = handleSearchChange;
+		$[19] = isSearchable;
+		$[20] = t6;
+	} else t6 = $[20];
 	let t7;
-	if ($[20] !== fetchNextPage || $[21] !== handleEnableQuery || $[22] !== hasNextPage || $[23] !== isLoading || $[24] !== items || $[25] !== selectProps || $[26] !== t6 || $[27] !== totalItems) {
+	if ($[21] !== fetchNextPage || $[22] !== handleEnableQuery || $[23] !== hasNextPage || $[24] !== isLoading || $[25] !== items || $[26] !== selectProps || $[27] !== t6 || $[28] !== totalItems) {
 		t7 = /* @__PURE__ */ jsx(Select, {
 			...selectProps,
 			items,
@@ -99,16 +101,16 @@ var QuerySelectContent = (t0) => {
 			onFocusCapture: handleEnableQuery,
 			...t6
 		});
-		$[20] = fetchNextPage;
-		$[21] = handleEnableQuery;
-		$[22] = hasNextPage;
-		$[23] = isLoading;
-		$[24] = items;
-		$[25] = selectProps;
-		$[26] = t6;
-		$[27] = totalItems;
-		$[28] = t7;
-	} else t7 = $[28];
+		$[21] = fetchNextPage;
+		$[22] = handleEnableQuery;
+		$[23] = hasNextPage;
+		$[24] = isLoading;
+		$[25] = items;
+		$[26] = selectProps;
+		$[27] = t6;
+		$[28] = totalItems;
+		$[29] = t7;
+	} else t7 = $[29];
 	return t7;
 };
 var QuerySelect = (props) => {

package/dist/hooks/useQueryAutocomplete.d.ts

@@ -1,6 +1,6 @@
 import { Key } from 'react-aria-components';
 import { 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, selectedIdsToResolve, }: UseQueryAutocompleteOptions<TQueryFn, TKey>) => {
+export declare const useQueryAutocomplete: <TQueryFn extends QueryFn, TKey extends Key = Key>({ query, queryParams, queryOptions, mapItems, resolveSelectedItemsWithIds, initialQueryState, search, selectedIdsToResolve, }: UseQueryAutocompleteOptions<TQueryFn, TKey>) => {
     data: any;
     isLoading: boolean;
     isQueryEnabled: boolean;

package/dist/hooks/useQueryAutocomplete.js

@@ -4,10 +4,12 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 var isFilterSearchParams = (params) => {
 	return typeof params === "object" && params !== null && "filter" in params;
 };
-var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initialQueryState, search, selectedIdsToResolve = [] }) => {
+var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, resolveSelectedItemsWithIds = false, initialQueryState, search, selectedIdsToResolve = [] }) => {
 	"use no memo";
-	const [isQueryEnabled, setIsQueryEnabled] = useState(!initialQueryState);
-	const queryResult = query(search === void 0 ? queryParams : {
+	const shouldResolveSelectedItems = selectedIdsToResolve.length > 0;
+	const shouldUseSelectedItemsQuery = resolveSelectedItemsWithIds && shouldResolveSelectedItems;
+	const [isQueryEnabled, setIsQueryEnabled] = useState(!initialQueryState && !shouldUseSelectedItemsQuery);
+	const resolvedQueryParams = search === void 0 ? queryParams : {
 		...queryParams,
 		limit: queryParams?.limit ?? ApiQueryUtils.DEFAULT_LIMIT,
 		search,
@@ -15,15 +17,23 @@ var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initia
 			...isFilterSearchParams(queryParams) ? queryParams.filter : {},
 			search
 		}
-	}, {
+	};
+	const isInfiniteQueryResult = (result) => {
+		return "hasNextPage" in result && "fetchNextPage" in result;
+	};
+	const getDataForMapping = (result_0) => isInfiniteQueryResult(result_0) ? result_0.data?.pages?.flatMap((page) => page?.items ?? []) : result_0.data;
+	const queryResult = query(resolvedQueryParams, {
 		...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 selectedItemsQueryResult = query({
+		...queryParams,
+		ids: selectedIdsToResolve
+	}, {
+		...queryOptions,
+		enabled: shouldUseSelectedItemsQuery && (queryOptions?.enabled ?? true)
+	});
 	const handleEnableQuery = () => {
 		setIsQueryEnabled(true);
 	};
@@ -33,13 +43,22 @@ var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initia
 	const fetchNextPage = infiniteQueryResult?.fetchNextPage;
 	const isFetchingNextPage = infiniteQueryResult?.isFetchingNextPage ?? false;
 	const totalItems = infiniteQueryResult?.data?.pages?.[0]?.totalItems;
+	const shouldUseOnlySelectedItemsQuery = shouldUseSelectedItemsQuery && !isQueryEnabled;
+	const queryData = getDataForMapping(queryResult);
+	const selectedItemsQueryData = getDataForMapping(selectedItemsQueryResult);
+	const itemsQueryData = shouldUseOnlySelectedItemsQuery ? selectedItemsQueryData : queryData;
+	const selectedItemsDataToMerge = shouldUseOnlySelectedItemsQuery ? void 0 : selectedItemsQueryData;
 	const items = useMemo(() => {
-		if (!data) return [];
-		return mapItems(isInfiniteQuery ? data.pages?.flatMap((page) => page?.items ?? []) : data);
+		const queryItems = itemsQueryData ? mapItems(itemsQueryData) : [];
+		const itemsById = new Map(queryItems.map((item) => [item.id, item]));
+		(selectedItemsDataToMerge ? mapItems(selectedItemsDataToMerge) : []).forEach((item_0) => {
+			itemsById.set(item_0.id, item_0);
+		});
+		return Array.from(itemsById.values());
 	}, [
-		data,
-		isInfiniteQuery,
-		mapItems
+		itemsQueryData,
+		mapItems,
+		selectedItemsDataToMerge
 	]);
 	const selectedIdsToResolveSet = useMemo(() => new Set(selectedIdsToResolve), [selectedIdsToResolve]);
 	const handleFetchNextPage = useCallback(() => {
@@ -51,8 +70,8 @@ var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initia
 		isFetchingNextPage
 	]);
 	useEffect(() => {
-		if (!isQueryEnabled || !isInfiniteQuery || !hasNextPage || isFetchingNextPage || selectedIdsToResolveSet.size === 0) return;
-		const loadedItemIds = new Set(items.map((item) => item.id));
+		if (!isQueryEnabled || resolveSelectedItemsWithIds || !isInfiniteQuery || !hasNextPage || isFetchingNextPage || selectedIdsToResolveSet.size === 0) return;
+		const loadedItemIds = new Set(items.map((item_1) => item_1.id));
 		if (selectedIdsToResolve.some((id) => !loadedItemIds.has(id))) handleFetchNextPage();
 	}, [
 		handleFetchNextPage,
@@ -61,12 +80,13 @@ var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initia
 		isInfiniteQuery,
 		isQueryEnabled,
 		items,
+		resolveSelectedItemsWithIds,
 		selectedIdsToResolve,
 		selectedIdsToResolveSet
 	]);
 	return {
 		data,
-		isLoading: isLoading || isFetchingNextPage,
+		isLoading: queryResult.isLoading || isFetchingNextPage || selectedItemsQueryResult.isLoading,
 		isQueryEnabled,
 		handleEnableQuery,
 		items,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@povio/ui",
-  "version": "3.2.2-rc.3",
+  "version": "3.2.2-rc.5",
   "type": "module",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",