@povio/ui 2.2.9-rc.13 → 2.2.9-rc.15
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/DateTime/shared/CalendarCell.js +2 -2
- package/dist/components/inputs/Inputs/InputItem.d.ts +1 -1
- package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.d.ts +1 -1
- package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js +13 -9
- package/dist/components/inputs/Selection/Autocomplete/queryAutocomplete.types.d.ts +34 -19
- package/dist/components/inputs/Selection/Select/QuerySelect.js +1 -1
- package/dist/components/inputs/Selection/shared/SelectInput.js +4 -4
- package/dist/components/inputs/shared/TooltipWrapper.js +5 -1
- package/dist/components/inputs/shared/tooltipWrapper.cva.d.ts +4 -0
- package/dist/components/inputs/shared/tooltipWrapper.cva.js +5 -0
- package/dist/config/uiStyle.context.d.ts +4 -0
- package/dist/hooks/useIntersectionObserver.d.ts +1 -1
- package/dist/hooks/useIntersectionObserver.js +29 -10
- package/dist/hooks/useQueryAutocomplete.d.ts +5 -17
- package/dist/hooks/useQueryAutocomplete.js +11 -3
- package/dist/index.d.ts +1 -0
- package/dist/utils/query.utils.d.ts +4 -0
- package/dist/utils/query.utils.js +8 -0
- package/package.json +1 -1
|
@@ -17,12 +17,12 @@ var CalendarCell = ({ state, onApply, shouldCloseOnSelect = true, onDateSelectio
|
|
|
17
17
|
const onClick = useCallback((event) => {
|
|
18
18
|
buttonProps.onClick?.(event);
|
|
19
19
|
if (onDateSelection) onDateSelection(props.date);
|
|
20
|
-
if (
|
|
20
|
+
if (shouldCloseOnSelect && !isDisabled) onApply?.(props.date);
|
|
21
21
|
}, [
|
|
22
22
|
buttonProps,
|
|
23
23
|
onDateSelection,
|
|
24
24
|
props.date,
|
|
25
|
-
|
|
25
|
+
isDisabled,
|
|
26
26
|
shouldCloseOnSelect,
|
|
27
27
|
onApply
|
|
28
28
|
]);
|
|
@@ -15,7 +15,7 @@ declare const componentRegistry: {
|
|
|
15
15
|
readonly select: typeof Select;
|
|
16
16
|
readonly querySelect: <TFieldValues extends import('react-hook-form').FieldValues, TQueryFn extends import('../Selection/shared/querySelect.utils').QueryFn, TKey extends import('react-aria').Key = import('react-aria').Key>({ query, queryParams, queryOptions, queryMap, ...props }: import('../Selection/Select/QuerySelect.js').QuerySelectProps<TFieldValues, TQueryFn, TKey>) => import("react/jsx-runtime").JSX.Element;
|
|
17
17
|
readonly autocomplete: typeof Autocomplete;
|
|
18
|
-
readonly queryAutocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TSelectItem extends import('../../..').SelectItem<any>, TQueryFn extends import('../Selection/Autocomplete/queryAutocomplete.types').QueryFn
|
|
18
|
+
readonly queryAutocomplete: <TFieldValues extends import('react-hook-form').FieldValues, TSelectItem extends import('../../..').SelectItem<any>, TQueryFn extends import('../Selection/Autocomplete/queryAutocomplete.types').QueryFn>({ query, queryParams, queryOptions, queryMap, leadingContent, ...props }: import('../Selection/Autocomplete/queryAutocomplete.types').QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
|
|
19
19
|
readonly segment: <TFieldValues extends import('react-hook-form').FieldValues, TKey extends import('react-aria').Key = import('react-aria').Key>(props: import('../../..').ControlledSegmentProps<TFieldValues, TKey>) => import("react/jsx-runtime").JSX.Element;
|
|
20
20
|
readonly datePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, minValue, maxValue, ...props }: import('../DateTime/DatePicker/DatePicker').ControlledDatePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
21
21
|
readonly dateTimePicker: <TFieldValues extends import('react-hook-form').FieldValues>({ fullIso, ...props }: import('../DateTime/DateTimePicker/DateTimePicker').ControlledDateTimePickerProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import { FieldValues } from 'react-hook-form';
|
|
2
2
|
import { QueryAutocompleteProps, QueryFn } from './queryAutocomplete.types';
|
|
3
3
|
import { SelectItem } from '../shared/select.types';
|
|
4
|
-
export declare const QueryAutocomplete: <TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn
|
|
4
|
+
export declare const QueryAutocomplete: <TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn>({ query, queryParams, queryOptions, queryMap, leadingContent, ...props }: QueryAutocompleteProps<TFieldValues, TSelectItem, TQueryFn>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,34 +1,38 @@
|
|
|
1
1
|
import { UIConfig } from "../../../../config/uiConfig.context.js";
|
|
2
2
|
import { Autocomplete } from "./Autocomplete.js";
|
|
3
|
+
import { getQueryItems } from "../shared/querySelect.utils.js";
|
|
3
4
|
import { useQueryAutocomplete } from "../../../../hooks/useQueryAutocomplete.js";
|
|
4
5
|
import { jsx } from "react/jsx-runtime";
|
|
5
6
|
import { useState } from "react";
|
|
6
7
|
//#region src/components/inputs/Selection/Autocomplete/QueryAutocomplete.tsx
|
|
7
|
-
var QueryAutocomplete = ({ query, queryParams, queryOptions, queryMap, ...props }) => {
|
|
8
|
+
var QueryAutocomplete = ({ query, queryParams, queryOptions, queryMap, leadingContent, ...props }) => {
|
|
8
9
|
const ui = UIConfig.useConfig();
|
|
9
10
|
const [search, setSearch] = useState("");
|
|
10
|
-
const
|
|
11
|
-
const extractedData = Array.isArray(data) ? data : data.pages.flatMap((page) => page.items ?? []);
|
|
12
|
-
return queryMap?.(extractedData) ?? extractedData;
|
|
13
|
-
};
|
|
11
|
+
const { onChange, ...restProps } = props;
|
|
14
12
|
const { items, totalItems, isLoading, handleEnableQuery, hasNextPage, fetchNextPage } = useQueryAutocomplete({
|
|
15
13
|
query,
|
|
16
14
|
queryParams,
|
|
17
15
|
queryOptions,
|
|
18
|
-
mapItems: (data) =>
|
|
16
|
+
mapItems: (data) => getQueryItems(data, queryMap),
|
|
19
17
|
search,
|
|
20
18
|
initialQueryState: props.isInitialQueryDisabled ?? ui.queryAutocomplete?.isInitialQueryDisabled
|
|
21
19
|
});
|
|
22
|
-
const
|
|
20
|
+
const handleChange = (value) => {
|
|
21
|
+
onChange?.(value);
|
|
22
|
+
props.onBlur?.({ target: { value: null } });
|
|
23
|
+
};
|
|
24
|
+
const { isInitialQueryDisabled: _, ...autocompleteProps } = restProps;
|
|
23
25
|
return /* @__PURE__ */ jsx(Autocomplete, {
|
|
24
|
-
...
|
|
26
|
+
...autocompleteProps,
|
|
25
27
|
items,
|
|
28
|
+
totalItems,
|
|
26
29
|
onSearchChange: setSearch,
|
|
27
30
|
isClientSearchDisabled: true,
|
|
28
31
|
isLoading,
|
|
29
|
-
|
|
32
|
+
onChange: handleChange,
|
|
30
33
|
onMouseEnter: handleEnableQuery,
|
|
31
34
|
onFocusCapture: handleEnableQuery,
|
|
35
|
+
leadingContent,
|
|
32
36
|
hasLoadMore: hasNextPage,
|
|
33
37
|
onLoadMore: fetchNextPage
|
|
34
38
|
});
|
|
@@ -1,30 +1,45 @@
|
|
|
1
|
-
import { UseInfiniteQueryResult, UseQueryResult } from '@tanstack/react-query';
|
|
1
|
+
import { InfiniteData, UseInfiniteQueryResult, UseQueryResult } from '@tanstack/react-query';
|
|
2
2
|
import { Key } from 'react-aria-components';
|
|
3
3
|
import { FieldValues } from 'react-hook-form';
|
|
4
4
|
import { AutocompleteProps } from './Autocomplete';
|
|
5
5
|
import { GroupedSelectControlProps, GroupedSelectProps, SelectItem } from '../shared/select.types';
|
|
6
6
|
import { OmitDiscriminatedUnion } from '../../../../types/common';
|
|
7
|
-
export
|
|
8
|
-
items
|
|
7
|
+
export type InfiniteQueryPage<TKey extends Key> = {
|
|
8
|
+
items?: SelectItem<TKey>[];
|
|
9
9
|
totalItems?: number;
|
|
10
|
-
}
|
|
11
|
-
export type QueryResult<
|
|
12
|
-
export type QueryFn
|
|
13
|
-
export type
|
|
14
|
-
export type
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
10
|
+
};
|
|
11
|
+
export type QueryResult<TData> = UseQueryResult<TData> | UseInfiniteQueryResult<TData>;
|
|
12
|
+
export type QueryFn = (params: any, options?: any) => QueryResult<any>;
|
|
13
|
+
export type ExtractQueryParams<TQueryFn> = TQueryFn extends (params: infer TParams, ...args: any[]) => any ? TParams : never;
|
|
14
|
+
export type ExtractQueryOptions<TQueryFn> = TQueryFn extends (params: any, options?: infer TOptions) => any ? TOptions : never;
|
|
15
|
+
export type QueryDataType<TQueryFn extends QueryFn> = Exclude<ReturnType<TQueryFn>["data"], undefined>;
|
|
16
|
+
export type ExtractPageType<T> = T extends InfiniteData<infer TPage> ? TPage : T;
|
|
17
|
+
export type ExtractedDataType<TQueryFn extends QueryFn> = ExtractPageType<QueryDataType<TQueryFn>> | ExtractPageType<QueryDataType<TQueryFn>>[];
|
|
18
|
+
type QueryAutocompleteFilter = {
|
|
19
|
+
search?: string;
|
|
20
|
+
};
|
|
21
|
+
type QueryAutocompleteSearchParams = {
|
|
22
|
+
search?: string;
|
|
23
|
+
} | {
|
|
24
|
+
filter?: QueryAutocompleteFilter;
|
|
25
|
+
};
|
|
26
|
+
export type QueryAutocompleteProps<TFieldValues extends FieldValues, TSelectItem extends SelectItem<any>, TQueryFn extends QueryFn> = OmitDiscriminatedUnion<AutocompleteProps<TSelectItem["id"]>, "items" | "onSearchChange" | "isLoading" | keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TSelectItem["id"]> & {
|
|
27
|
+
query: ExtractQueryParams<TQueryFn> extends QueryAutocompleteSearchParams ? TQueryFn : never;
|
|
28
|
+
queryParams?: Omit<ExtractQueryParams<TQueryFn>, "search" | "limit"> & {
|
|
29
|
+
limit?: number;
|
|
30
|
+
};
|
|
31
|
+
queryOptions?: ExtractQueryOptions<TQueryFn>;
|
|
32
|
+
queryMap?: (data: ExtractedDataType<TQueryFn>) => SelectItem<TSelectItem["id"]>[];
|
|
21
33
|
isInitialQueryDisabled?: boolean;
|
|
22
34
|
};
|
|
23
|
-
export interface UseQueryAutocompleteOptions<
|
|
35
|
+
export interface UseQueryAutocompleteOptions<TQueryFn extends QueryFn, TKey extends Key = Key> {
|
|
24
36
|
query: TQueryFn;
|
|
25
|
-
queryParams?:
|
|
26
|
-
|
|
27
|
-
|
|
37
|
+
queryParams?: Omit<ExtractQueryParams<TQueryFn>, "search" | "limit"> & {
|
|
38
|
+
limit?: number;
|
|
39
|
+
};
|
|
40
|
+
queryOptions?: ExtractQueryOptions<TQueryFn>;
|
|
41
|
+
mapItems: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[];
|
|
28
42
|
initialQueryState?: boolean;
|
|
29
|
-
search
|
|
43
|
+
search?: string;
|
|
30
44
|
}
|
|
45
|
+
export {};
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { UIConfig } from "../../../../config/uiConfig.context.js";
|
|
2
2
|
import { SelectBase } from "../shared/SelectBase.js";
|
|
3
|
-
import { useQueryAutocomplete } from "../../../../hooks/useQueryAutocomplete.js";
|
|
4
3
|
import { getQueryItems } from "../shared/querySelect.utils.js";
|
|
4
|
+
import { useQueryAutocomplete } from "../../../../hooks/useQueryAutocomplete.js";
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
6
6
|
import { mergeRefs } from "@react-aria/utils";
|
|
7
7
|
import { Controller } from "react-hook-form";
|
|
@@ -137,10 +137,6 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
|
|
|
137
137
|
})
|
|
138
138
|
]
|
|
139
139
|
}),
|
|
140
|
-
trailingContent && /* @__PURE__ */ jsx("div", {
|
|
141
|
-
className: "flex shrink-0 items-center",
|
|
142
|
-
children: trailingContent
|
|
143
|
-
}),
|
|
144
140
|
isClearable && /* @__PURE__ */ jsx(InputClear, {
|
|
145
141
|
onClear: () => {
|
|
146
142
|
onClear();
|
|
@@ -148,6 +144,10 @@ var SelectInput = ({ ref, placeholder, variant, as, size, isDisabled, isInvalid,
|
|
|
148
144
|
},
|
|
149
145
|
show: showClearButton
|
|
150
146
|
}),
|
|
147
|
+
trailingContent && /* @__PURE__ */ jsx("div", {
|
|
148
|
+
className: "flex shrink-0 items-center",
|
|
149
|
+
children: trailingContent
|
|
150
|
+
}),
|
|
151
151
|
!hideDropdownIcon && /* @__PURE__ */ jsx(Button, {
|
|
152
152
|
excludeFromTabOrder: true,
|
|
153
153
|
"aria-label": t(($) => isOpen ? $.ui.closeAlt : $.ui.openAlt),
|
|
@@ -1,7 +1,10 @@
|
|
|
1
|
+
import { UIStyle } from "../../../config/uiStyle.context.js";
|
|
1
2
|
import { Tooltip } from "../../overlays/Tooltip/Tooltip.js";
|
|
3
|
+
import { tooltipWrapperTrigger } from "./tooltipWrapper.cva.js";
|
|
2
4
|
import { jsx } from "react/jsx-runtime";
|
|
3
5
|
//#region src/components/inputs/shared/TooltipWrapper.tsx
|
|
4
6
|
var TooltipWrapper = (props) => {
|
|
7
|
+
const tooltipWrapperTriggerCva = UIStyle.useCva("tooltipWrapper.triggerCva", tooltipWrapperTrigger);
|
|
5
8
|
if (props.as !== "inline") return props.children;
|
|
6
9
|
return /* @__PURE__ */ jsx(Tooltip, {
|
|
7
10
|
text: props.error || void 0,
|
|
@@ -9,10 +12,11 @@ var TooltipWrapper = (props) => {
|
|
|
9
12
|
color: "error",
|
|
10
13
|
hidden: !props.error,
|
|
11
14
|
isNonInteractiveTrigger: true,
|
|
12
|
-
triggerClassName: props.triggerClassName,
|
|
15
|
+
triggerClassName: tooltipWrapperTriggerCva({ className: props.triggerClassName }),
|
|
13
16
|
triggerTabIndex: props.triggerTabIndex,
|
|
14
17
|
children: /* @__PURE__ */ jsx("div", {
|
|
15
18
|
tabIndex: -1,
|
|
19
|
+
className: tooltipWrapperTriggerCva({}),
|
|
16
20
|
children: props.children
|
|
17
21
|
})
|
|
18
22
|
});
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { VariantProps } from 'class-variance-authority';
|
|
2
|
+
export declare const tooltipWrapperTrigger: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
|
|
3
|
+
export interface TooltipWrapperTriggerVariantProps extends VariantProps<typeof tooltipWrapperTrigger> {
|
|
4
|
+
}
|
|
@@ -13,6 +13,7 @@ import { SelectPopoverCva } from '../components/inputs/Selection/shared/selectDe
|
|
|
13
13
|
import { SelectListBoxItemCva } from '../components/inputs/Selection/shared/selectItem.cva';
|
|
14
14
|
import { InputBaseProps, InputSideProps, InputSizeProps } from '../components/inputs/shared/input.cva';
|
|
15
15
|
import { LabelBaseProps } from '../components/inputs/shared/label.cva';
|
|
16
|
+
import { TooltipWrapperTriggerVariantProps } from '../components/inputs/shared/tooltipWrapper.cva';
|
|
16
17
|
import { ToggleVariantProps } from '../components/inputs/Toggle/toggle.cva';
|
|
17
18
|
import { MenuCvaVariantProps, MenuItemVariantProps, MenuPopoverVariantProps, MenuPopoverWrapperVariantProps } from '../components/Menu/menu.cva';
|
|
18
19
|
import { AccordionChevronVariantProps, AccordionHeadingSubtitleVariantProps, AccordionHeadingTitleVariantProps, AccordionHeadingVariantProps, AccordionIconVariantProps, AccordionItemVariantProps, AccordionPanelContentVariantProps, AccordionPanelVariantProps, AccordionTriggerVariantProps, AccordionVariantProps } from '../components/navigation/Accordion/accordion.cva';
|
|
@@ -72,6 +73,9 @@ export declare namespace UIStyle {
|
|
|
72
73
|
sizeCva?: Cva<InputSizeProps>;
|
|
73
74
|
sideCva?: Cva<InputSideProps>;
|
|
74
75
|
};
|
|
76
|
+
tooltipWrapper: {
|
|
77
|
+
triggerCva?: Cva<TooltipWrapperTriggerVariantProps>;
|
|
78
|
+
};
|
|
75
79
|
datePickerInput: {
|
|
76
80
|
contentRowCva?: Cva<DatePickerInputContentRowProps>;
|
|
77
81
|
};
|
|
@@ -3,6 +3,6 @@ type UseIntersectionObserverProps = {
|
|
|
3
3
|
onIntersectionChange?: (entry: IntersectionObserverEntry) => void;
|
|
4
4
|
} & IntersectionObserverInit;
|
|
5
5
|
export declare const useIntersectionObserver: <T extends HTMLElement>({ onIntersection, onIntersectionChange, root, rootMargin, threshold, }: UseIntersectionObserverProps) => {
|
|
6
|
-
ref:
|
|
6
|
+
ref: (element: T | null) => void;
|
|
7
7
|
};
|
|
8
8
|
export {};
|
|
@@ -1,25 +1,44 @@
|
|
|
1
|
-
import { useEffect, useRef } from "react";
|
|
1
|
+
import { useCallback, useEffect, useMemo, useRef } from "react";
|
|
2
2
|
//#region src/hooks/useIntersectionObserver.ts
|
|
3
3
|
var useIntersectionObserver = ({ onIntersection, onIntersectionChange, root, rootMargin, threshold }) => {
|
|
4
|
-
const
|
|
4
|
+
const elementRef = useRef(null);
|
|
5
|
+
const observerRef = useRef(null);
|
|
6
|
+
const onIntersectionRef = useRef(onIntersection);
|
|
7
|
+
const onIntersectionChangeRef = useRef(onIntersectionChange);
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
onIntersectionRef.current = onIntersection;
|
|
10
|
+
}, [onIntersection]);
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
onIntersectionChangeRef.current = onIntersectionChange;
|
|
13
|
+
}, [onIntersectionChange]);
|
|
5
14
|
useEffect(() => {
|
|
6
15
|
const observer = new IntersectionObserver((entries) => {
|
|
7
|
-
if (entries.some((entry) => entry.isIntersecting))
|
|
8
|
-
|
|
16
|
+
if (entries.some((entry) => entry.isIntersecting)) onIntersectionRef.current?.();
|
|
17
|
+
onIntersectionChangeRef.current?.(entries[0]);
|
|
9
18
|
}, {
|
|
10
19
|
root,
|
|
11
20
|
rootMargin,
|
|
12
21
|
threshold
|
|
13
22
|
});
|
|
14
|
-
|
|
15
|
-
|
|
23
|
+
observerRef.current = observer;
|
|
24
|
+
if (elementRef.current) observer.observe(elementRef.current);
|
|
25
|
+
return () => {
|
|
26
|
+
if (elementRef.current) observer.unobserve(elementRef.current);
|
|
27
|
+
observer.disconnect();
|
|
28
|
+
observerRef.current = null;
|
|
29
|
+
};
|
|
16
30
|
}, [
|
|
17
|
-
ref,
|
|
18
31
|
root,
|
|
19
|
-
|
|
20
|
-
|
|
32
|
+
rootMargin,
|
|
33
|
+
threshold
|
|
21
34
|
]);
|
|
22
|
-
|
|
35
|
+
const ref = useCallback((element) => {
|
|
36
|
+
if (elementRef.current === element) return;
|
|
37
|
+
if (observerRef.current && elementRef.current) observerRef.current.unobserve(elementRef.current);
|
|
38
|
+
elementRef.current = element;
|
|
39
|
+
if (observerRef.current && elementRef.current) observerRef.current.observe(elementRef.current);
|
|
40
|
+
}, []);
|
|
41
|
+
return useMemo(() => ({ ref }), [ref]);
|
|
23
42
|
};
|
|
24
43
|
//#endregion
|
|
25
44
|
export { useIntersectionObserver };
|
|
@@ -1,26 +1,14 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { InfiniteData } from '@tanstack/react-query';
|
|
2
2
|
import { Key } from 'react-aria-components';
|
|
3
|
-
import {
|
|
4
|
-
type QueryResult<TData = any> = UseQueryResult<TData> | UseInfiniteQueryResult<TData>;
|
|
5
|
-
type QueryFn<TData = any> = (...args: any[]) => QueryResult<TData>;
|
|
6
|
-
type QueryDataType<TQueryFn extends QueryFn> = Exclude<ReturnType<TQueryFn>["data"], undefined>;
|
|
7
|
-
interface UseQueryAutocompleteOptions<TQueryFn extends QueryFn, TKey extends Key = Key> {
|
|
8
|
-
query: TQueryFn;
|
|
9
|
-
queryParams?: Parameters<TQueryFn>[0];
|
|
10
|
-
queryOptions?: Parameters<TQueryFn>[1];
|
|
11
|
-
mapItems: (data: QueryDataType<TQueryFn>) => SelectItem<TKey>[];
|
|
12
|
-
initialQueryState?: boolean;
|
|
13
|
-
search?: string;
|
|
14
|
-
}
|
|
3
|
+
import { InfiniteQueryPage, QueryFn, UseQueryAutocompleteOptions } from '../components/inputs/Selection/Autocomplete/queryAutocomplete.types';
|
|
15
4
|
export declare const useQueryAutocomplete: <TQueryFn extends QueryFn, TKey extends Key = Key>({ query, queryParams, queryOptions, mapItems, initialQueryState, search, }: UseQueryAutocompleteOptions<TQueryFn, TKey>) => {
|
|
16
5
|
data: any;
|
|
17
6
|
isLoading: boolean;
|
|
18
7
|
isQueryEnabled: boolean;
|
|
19
8
|
handleEnableQuery: () => void;
|
|
20
|
-
items: SelectItem<TKey>[];
|
|
21
|
-
totalItems:
|
|
9
|
+
items: import('..').SelectItem<TKey>[];
|
|
10
|
+
totalItems: number | undefined;
|
|
22
11
|
hasNextPage: boolean;
|
|
23
|
-
fetchNextPage: ((
|
|
12
|
+
fetchNextPage: ((options?: import('@tanstack/react-query').FetchNextPageOptions) => Promise<import('@tanstack/react-query').InfiniteQueryObserverResult<InfiniteData<InfiniteQueryPage<TKey>, unknown>, Error>>) | undefined;
|
|
24
13
|
isFetchingNextPage: boolean;
|
|
25
14
|
};
|
|
26
|
-
export {};
|
|
@@ -1,10 +1,19 @@
|
|
|
1
|
+
import { ApiQueryUtils } from "../utils/query.utils.js";
|
|
1
2
|
import { useMemo, useState } from "react";
|
|
2
3
|
//#region src/hooks/useQueryAutocomplete.ts
|
|
4
|
+
var isFilterSearchParams = (params) => {
|
|
5
|
+
return typeof params === "object" && params !== null && "filter" in params;
|
|
6
|
+
};
|
|
3
7
|
var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initialQueryState, search }) => {
|
|
4
8
|
const [isQueryEnabled, setIsQueryEnabled] = useState(!initialQueryState);
|
|
5
9
|
const queryResult = query(search === void 0 ? queryParams : {
|
|
10
|
+
...queryParams,
|
|
11
|
+
limit: queryParams?.limit ?? ApiQueryUtils.DEFAULT_LIMIT,
|
|
6
12
|
search,
|
|
7
|
-
...queryParams
|
|
13
|
+
...isFilterSearchParams(queryParams) ? { filter: {
|
|
14
|
+
...queryParams.filter,
|
|
15
|
+
search
|
|
16
|
+
} } : {}
|
|
8
17
|
}, {
|
|
9
18
|
...queryOptions,
|
|
10
19
|
enabled: isQueryEnabled && (queryOptions?.enabled ?? true)
|
|
@@ -14,11 +23,10 @@ var useQueryAutocomplete = ({ query, queryParams, queryOptions, mapItems, initia
|
|
|
14
23
|
const isInfiniteQueryResult = (result) => {
|
|
15
24
|
return "hasNextPage" in result && "fetchNextPage" in result;
|
|
16
25
|
};
|
|
17
|
-
const isInfiniteQuery = isInfiniteQueryResult(queryResult);
|
|
18
26
|
const handleEnableQuery = () => {
|
|
19
27
|
setIsQueryEnabled(true);
|
|
20
28
|
};
|
|
21
|
-
const infiniteQueryResult =
|
|
29
|
+
const infiniteQueryResult = isInfiniteQueryResult(queryResult) ? queryResult : void 0;
|
|
22
30
|
const hasNextPage = infiniteQueryResult?.hasNextPage ?? false;
|
|
23
31
|
const fetchNextPage = infiniteQueryResult?.fetchNextPage;
|
|
24
32
|
const isFetchingNextPage = infiniteQueryResult?.isFetchingNextPage ?? false;
|
package/dist/index.d.ts
CHANGED
|
@@ -103,6 +103,7 @@ export { Select } from './components/inputs/Selection/Select/Select';
|
|
|
103
103
|
export type { ControlledSliderProps, SliderProps } from './components/inputs/Slider/Slider';
|
|
104
104
|
export { Slider } from './components/inputs/Slider/Slider';
|
|
105
105
|
export type { InputVariantProps } from './components/inputs/shared/input.cva';
|
|
106
|
+
export type { TooltipWrapperTriggerVariantProps } from './components/inputs/shared/tooltipWrapper.cva';
|
|
106
107
|
export type { ControlledToggleProps, ToggleProps } from './components/inputs/Toggle/Toggle';
|
|
107
108
|
export { Toggle } from './components/inputs/Toggle/Toggle';
|
|
108
109
|
export type { MenuProps } from './components/Menu/Menu';
|