@povio/ui 3.2.2-rc.2 → 3.2.2-rc.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js +2 -1
- package/dist/components/inputs/Selection/Autocomplete/queryAutocomplete.types.d.ts +2 -0
- package/dist/components/inputs/Selection/Select/QuerySelect.d.ts +1 -0
- package/dist/components/inputs/Selection/Select/QuerySelect.js +39 -37
- package/dist/hooks/useQueryAutocomplete.d.ts +1 -1
- package/dist/hooks/useQueryAutocomplete.js +26 -23
- package/package.json +1 -1
|
@@ -8,7 +8,7 @@ import { useState } from "react";
|
|
|
8
8
|
import { mergeRefs } from "@react-aria/utils";
|
|
9
9
|
import { Controller } from "react-hook-form";
|
|
10
10
|
//#region src/components/inputs/Selection/Autocomplete/QueryAutocomplete.tsx
|
|
11
|
-
var QueryAutocompleteContent = ({ query, queryParams, queryOptions, queryMap, leadingContent, ...props }) => {
|
|
11
|
+
var QueryAutocompleteContent = ({ query, queryParams, queryOptions, queryMap, resolveSelectedItemsWithIds, leadingContent, ...props }) => {
|
|
12
12
|
"use no memo";
|
|
13
13
|
const ui = UIConfig.useConfig();
|
|
14
14
|
const [search, setSearch] = useState("");
|
|
@@ -24,6 +24,7 @@ var QueryAutocompleteContent = ({ query, queryParams, queryOptions, queryMap, le
|
|
|
24
24
|
queryParams,
|
|
25
25
|
queryOptions,
|
|
26
26
|
mapItems: (data) => getQueryItems(data, queryMap),
|
|
27
|
+
resolveSelectedItemsWithIds,
|
|
27
28
|
search,
|
|
28
29
|
initialQueryState: selectedIdsToResolve.count > 0 ? false : props.isInitialQueryDisabled ?? ui.queryAutocomplete?.isInitialQueryDisabled,
|
|
29
30
|
selectedIdsToResolve: selectedIdsToResolve.items
|
|
@@ -22,6 +22,7 @@ export type QueryAutocompleteProps<TFieldValues extends FieldValues, TSelectItem
|
|
|
22
22
|
};
|
|
23
23
|
queryOptions?: ExtractQueryOptions<TQueryFn>;
|
|
24
24
|
queryMap?: (data: ExtractedDataType<TQueryFn>) => SelectItem<TSelectItem["id"]>[];
|
|
25
|
+
resolveSelectedItemsWithIds?: boolean;
|
|
25
26
|
isInitialQueryDisabled?: boolean;
|
|
26
27
|
};
|
|
27
28
|
export interface UseQueryAutocompleteOptions<TQueryFn extends QueryFn, TKey extends Key = Key> {
|
|
@@ -31,6 +32,7 @@ export interface UseQueryAutocompleteOptions<TQueryFn extends QueryFn, TKey exte
|
|
|
31
32
|
};
|
|
32
33
|
queryOptions?: ExtractQueryOptions<TQueryFn>;
|
|
33
34
|
mapItems: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[];
|
|
35
|
+
resolveSelectedItemsWithIds?: boolean;
|
|
34
36
|
initialQueryState?: boolean;
|
|
35
37
|
search?: string;
|
|
36
38
|
selectedIdsToResolve?: TKey[];
|
|
@@ -9,6 +9,7 @@ export type QuerySelectProps<TFieldValues extends FieldValues, TQueryFn extends
|
|
|
9
9
|
queryParams?: Parameters<TQueryFn>[0];
|
|
10
10
|
queryOptions?: Parameters<TQueryFn>[1];
|
|
11
11
|
queryMap?: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[];
|
|
12
|
+
resolveSelectedItemsWithIds?: boolean;
|
|
12
13
|
isInitialQueryDisabled?: boolean;
|
|
13
14
|
};
|
|
14
15
|
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;
|
|
@@ -9,8 +9,8 @@ import { mergeRefs } from "@react-aria/utils";
|
|
|
9
9
|
import { Controller } from "react-hook-form";
|
|
10
10
|
//#region src/components/inputs/Selection/Select/QuerySelect.tsx
|
|
11
11
|
var QuerySelectContent = (t0) => {
|
|
12
|
-
const $ = c(
|
|
13
|
-
const { query, queryParams, queryOptions, queryMap, ...props } = t0;
|
|
12
|
+
const $ = c(30);
|
|
13
|
+
const { query, queryParams, queryOptions, queryMap, resolveSelectedItemsWithIds, ...props } = t0;
|
|
14
14
|
const ui = UIConfig.useConfig();
|
|
15
15
|
const [search, setSearch] = useState("");
|
|
16
16
|
const isSearchable = props.isSearchable ?? ui.select.isSearchable;
|
|
@@ -30,12 +30,13 @@ var QuerySelectContent = (t0) => {
|
|
|
30
30
|
const t2 = isSearchable ? search : void 0;
|
|
31
31
|
const t3 = shouldEnableInitialQuery ? false : props.isInitialQueryDisabled ?? ui.querySelect?.isInitialQueryDisabled;
|
|
32
32
|
let t4;
|
|
33
|
-
if ($[2] !== query || $[3] !== queryOptions || $[4] !== queryParams || $[5] !== selectedIdsToResolve.items || $[
|
|
33
|
+
if ($[2] !== query || $[3] !== queryOptions || $[4] !== queryParams || $[5] !== resolveSelectedItemsWithIds || $[6] !== selectedIdsToResolve.items || $[7] !== t1 || $[8] !== t2 || $[9] !== t3) {
|
|
34
34
|
t4 = {
|
|
35
35
|
query,
|
|
36
36
|
queryParams,
|
|
37
37
|
queryOptions,
|
|
38
38
|
mapItems: t1,
|
|
39
|
+
resolveSelectedItemsWithIds,
|
|
39
40
|
search: t2,
|
|
40
41
|
initialQueryState: t3,
|
|
41
42
|
selectedIdsToResolve: selectedIdsToResolve.items
|
|
@@ -43,51 +44,52 @@ var QuerySelectContent = (t0) => {
|
|
|
43
44
|
$[2] = query;
|
|
44
45
|
$[3] = queryOptions;
|
|
45
46
|
$[4] = queryParams;
|
|
46
|
-
$[5] =
|
|
47
|
-
$[6] =
|
|
48
|
-
$[7] =
|
|
49
|
-
$[8] =
|
|
50
|
-
$[9] =
|
|
51
|
-
|
|
47
|
+
$[5] = resolveSelectedItemsWithIds;
|
|
48
|
+
$[6] = selectedIdsToResolve.items;
|
|
49
|
+
$[7] = t1;
|
|
50
|
+
$[8] = t2;
|
|
51
|
+
$[9] = t3;
|
|
52
|
+
$[10] = t4;
|
|
53
|
+
} else t4 = $[10];
|
|
52
54
|
const { items, totalItems, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete(t4);
|
|
53
55
|
let onSearchChange;
|
|
54
56
|
let selectProps;
|
|
55
|
-
if ($[
|
|
57
|
+
if ($[11] !== props) {
|
|
56
58
|
const { isInitialQueryDisabled: _, onSearchChange: t5, ...t6 } = props;
|
|
57
59
|
onSearchChange = t5;
|
|
58
60
|
selectProps = t6;
|
|
59
|
-
$[
|
|
60
|
-
$[
|
|
61
|
-
$[
|
|
61
|
+
$[11] = props;
|
|
62
|
+
$[12] = onSearchChange;
|
|
63
|
+
$[13] = selectProps;
|
|
62
64
|
} else {
|
|
63
|
-
onSearchChange = $[
|
|
64
|
-
selectProps = $[
|
|
65
|
+
onSearchChange = $[12];
|
|
66
|
+
selectProps = $[13];
|
|
65
67
|
}
|
|
66
68
|
let t5;
|
|
67
|
-
if ($[
|
|
69
|
+
if ($[14] !== handleEnableQuery || $[15] !== onSearchChange || $[16] !== setSearch) {
|
|
68
70
|
t5 = (value_0) => {
|
|
69
71
|
setSearch(value_0);
|
|
70
72
|
handleEnableQuery();
|
|
71
73
|
onSearchChange?.(value_0);
|
|
72
74
|
};
|
|
73
|
-
$[
|
|
74
|
-
$[
|
|
75
|
-
$[
|
|
76
|
-
$[
|
|
77
|
-
} else t5 = $[
|
|
75
|
+
$[14] = handleEnableQuery;
|
|
76
|
+
$[15] = onSearchChange;
|
|
77
|
+
$[16] = setSearch;
|
|
78
|
+
$[17] = t5;
|
|
79
|
+
} else t5 = $[17];
|
|
78
80
|
const handleSearchChange = t5;
|
|
79
81
|
let t6;
|
|
80
|
-
if ($[
|
|
82
|
+
if ($[18] !== handleSearchChange || $[19] !== isSearchable) {
|
|
81
83
|
t6 = isSearchable && {
|
|
82
84
|
isClientSearchDisabled: true,
|
|
83
85
|
onSearchChange: handleSearchChange
|
|
84
86
|
};
|
|
85
|
-
$[
|
|
86
|
-
$[
|
|
87
|
-
$[
|
|
88
|
-
} else t6 = $[
|
|
87
|
+
$[18] = handleSearchChange;
|
|
88
|
+
$[19] = isSearchable;
|
|
89
|
+
$[20] = t6;
|
|
90
|
+
} else t6 = $[20];
|
|
89
91
|
let t7;
|
|
90
|
-
if ($[
|
|
92
|
+
if ($[21] !== fetchNextPage || $[22] !== handleEnableQuery || $[23] !== hasNextPage || $[24] !== isLoading || $[25] !== items || $[26] !== selectProps || $[27] !== t6 || $[28] !== totalItems) {
|
|
91
93
|
t7 = /* @__PURE__ */ jsx(Select, {
|
|
92
94
|
...selectProps,
|
|
93
95
|
items,
|
|
@@ -99,16 +101,16 @@ var QuerySelectContent = (t0) => {
|
|
|
99
101
|
onFocusCapture: handleEnableQuery,
|
|
100
102
|
...t6
|
|
101
103
|
});
|
|
102
|
-
$[
|
|
103
|
-
$[
|
|
104
|
-
$[
|
|
105
|
-
$[
|
|
106
|
-
$[
|
|
107
|
-
$[
|
|
108
|
-
$[
|
|
109
|
-
$[
|
|
110
|
-
$[
|
|
111
|
-
} else t7 = $[
|
|
104
|
+
$[21] = fetchNextPage;
|
|
105
|
+
$[22] = handleEnableQuery;
|
|
106
|
+
$[23] = hasNextPage;
|
|
107
|
+
$[24] = isLoading;
|
|
108
|
+
$[25] = items;
|
|
109
|
+
$[26] = selectProps;
|
|
110
|
+
$[27] = t6;
|
|
111
|
+
$[28] = totalItems;
|
|
112
|
+
$[29] = t7;
|
|
113
|
+
} else t7 = $[29];
|
|
112
114
|
return t7;
|
|
113
115
|
};
|
|
114
116
|
var QuerySelect = (props) => {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Key } from 'react-aria-components';
|
|
2
2
|
import { QueryFn, UseQueryAutocompleteOptions } from '../components/inputs/Selection/Autocomplete/queryAutocomplete.types';
|
|
3
|
-
export declare const useQueryAutocomplete: <TQueryFn extends QueryFn, TKey extends Key = Key>({ query, queryParams, queryOptions, mapItems, initialQueryState, search, selectedIdsToResolve, }: UseQueryAutocompleteOptions<TQueryFn, TKey>) => {
|
|
3
|
+
export declare const useQueryAutocomplete: <TQueryFn extends QueryFn, TKey extends Key = Key>({ query, queryParams, queryOptions, mapItems, resolveSelectedItemsWithIds, initialQueryState, search, selectedIdsToResolve, }: UseQueryAutocompleteOptions<TQueryFn, TKey>) => {
|
|
4
4
|
data: any;
|
|
5
5
|
isLoading: boolean;
|
|
6
6
|
isQueryEnabled: boolean;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { ApiQueryUtils } from "../utils/query.utils.js";
|
|
2
|
-
import { useCallback, useEffect, useMemo,
|
|
2
|
+
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
3
3
|
//#region src/hooks/useQueryAutocomplete.ts
|
|
4
4
|
var isFilterSearchParams = (params) => {
|
|
5
5
|
return typeof params === "object" && params !== null && "filter" in params;
|
|
6
6
|
};
|
|
7
|
-
var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initialQueryState, search, selectedIdsToResolve = [] }) => {
|
|
7
|
+
var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, resolveSelectedItemsWithIds = false, initialQueryState, search, selectedIdsToResolve = [] }) => {
|
|
8
8
|
"use no memo";
|
|
9
9
|
const [isQueryEnabled, setIsQueryEnabled] = useState(!initialQueryState);
|
|
10
10
|
const queryResult = query(search === void 0 ? queryParams : {
|
|
@@ -20,7 +20,15 @@ var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initia
|
|
|
20
20
|
enabled: isQueryEnabled && (queryOptions?.enabled ?? true)
|
|
21
21
|
});
|
|
22
22
|
const data = queryResult.data;
|
|
23
|
-
const
|
|
23
|
+
const shouldResolveSelectedItems = selectedIdsToResolve.length > 0;
|
|
24
|
+
const selectedItemsQueryResult = query({
|
|
25
|
+
...queryParams,
|
|
26
|
+
ids: selectedIdsToResolve
|
|
27
|
+
}, {
|
|
28
|
+
...queryOptions,
|
|
29
|
+
enabled: resolveSelectedItemsWithIds && isQueryEnabled && shouldResolveSelectedItems && (queryOptions?.enabled ?? true)
|
|
30
|
+
});
|
|
31
|
+
const selectedItemsData = selectedItemsQueryResult.data;
|
|
24
32
|
const isInfiniteQueryResult = (result) => {
|
|
25
33
|
return "hasNextPage" in result && "fetchNextPage" in result;
|
|
26
34
|
};
|
|
@@ -33,38 +41,32 @@ var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initia
|
|
|
33
41
|
const fetchNextPage = infiniteQueryResult?.fetchNextPage;
|
|
34
42
|
const isFetchingNextPage = infiniteQueryResult?.isFetchingNextPage ?? false;
|
|
35
43
|
const totalItems = infiniteQueryResult?.data?.pages?.[0]?.totalItems;
|
|
36
|
-
const isFetchNextPageRequestedRef = useRef(false);
|
|
37
44
|
const items = useMemo(() => {
|
|
38
|
-
|
|
39
|
-
|
|
45
|
+
const extractedData = data ? isInfiniteQuery ? data.pages?.flatMap((page) => page?.items ?? []) : data : void 0;
|
|
46
|
+
const queryItems = extractedData ? mapItems(extractedData) : [];
|
|
47
|
+
const itemsById = new Map(queryItems.map((item) => [item.id, item]));
|
|
48
|
+
(selectedItemsData ? mapItems(selectedItemsData) : []).forEach((item_0) => {
|
|
49
|
+
itemsById.set(item_0.id, item_0);
|
|
50
|
+
});
|
|
51
|
+
return Array.from(itemsById.values());
|
|
40
52
|
}, [
|
|
41
53
|
data,
|
|
42
54
|
isInfiniteQuery,
|
|
43
|
-
mapItems
|
|
55
|
+
mapItems,
|
|
56
|
+
selectedItemsData
|
|
44
57
|
]);
|
|
45
58
|
const selectedIdsToResolveSet = useMemo(() => new Set(selectedIdsToResolve), [selectedIdsToResolve]);
|
|
46
59
|
const handleFetchNextPage = useCallback(() => {
|
|
47
|
-
if (!fetchNextPage || !hasNextPage || isFetchingNextPage
|
|
48
|
-
|
|
49
|
-
try {
|
|
50
|
-
fetchNextPage().finally(() => {
|
|
51
|
-
isFetchNextPageRequestedRef.current = false;
|
|
52
|
-
});
|
|
53
|
-
} catch (error) {
|
|
54
|
-
isFetchNextPageRequestedRef.current = false;
|
|
55
|
-
throw error;
|
|
56
|
-
}
|
|
60
|
+
if (!fetchNextPage || !hasNextPage || isFetchingNextPage) return;
|
|
61
|
+
fetchNextPage();
|
|
57
62
|
}, [
|
|
58
63
|
fetchNextPage,
|
|
59
64
|
hasNextPage,
|
|
60
65
|
isFetchingNextPage
|
|
61
66
|
]);
|
|
62
67
|
useEffect(() => {
|
|
63
|
-
if (!isFetchingNextPage
|
|
64
|
-
|
|
65
|
-
useEffect(() => {
|
|
66
|
-
if (!isQueryEnabled || !isInfiniteQuery || !hasNextPage || isFetchingNextPage || selectedIdsToResolveSet.size === 0) return;
|
|
67
|
-
const loadedItemIds = new Set(items.map((item) => item.id));
|
|
68
|
+
if (!isQueryEnabled || resolveSelectedItemsWithIds || !isInfiniteQuery || !hasNextPage || isFetchingNextPage || selectedIdsToResolveSet.size === 0) return;
|
|
69
|
+
const loadedItemIds = new Set(items.map((item_1) => item_1.id));
|
|
68
70
|
if (selectedIdsToResolve.some((id) => !loadedItemIds.has(id))) handleFetchNextPage();
|
|
69
71
|
}, [
|
|
70
72
|
handleFetchNextPage,
|
|
@@ -73,12 +75,13 @@ var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initia
|
|
|
73
75
|
isInfiniteQuery,
|
|
74
76
|
isQueryEnabled,
|
|
75
77
|
items,
|
|
78
|
+
resolveSelectedItemsWithIds,
|
|
76
79
|
selectedIdsToResolve,
|
|
77
80
|
selectedIdsToResolveSet
|
|
78
81
|
]);
|
|
79
82
|
return {
|
|
80
83
|
data,
|
|
81
|
-
isLoading: isLoading || isFetchingNextPage,
|
|
84
|
+
isLoading: queryResult.isLoading || isFetchingNextPage || selectedItemsQueryResult.isLoading,
|
|
82
85
|
isQueryEnabled,
|
|
83
86
|
handleEnableQuery,
|
|
84
87
|
items,
|